@iapps/ng-dhis2-ui 1.2.133 → 1.2.134

package/fesm2022/iapps-ng-dhis2-ui.mjs

@@ -6536,6 +6536,157 @@ const CoordinatePickerField = ({ label, name, value, required, disabled, error,
                     React__default.createElement(Button$1, { primary: true, onClick: handleConfirmFromMap, disabled: !pendingCoordinate }, "Use Selected Location")))))));
 };
 
+const ALL_COUNTRIES = [
+    // East Africa first (for convenience)
+    { isoCode: 'TZ', dialCode: '+255', name: 'Tanzania', flag: '🇹🇿' },
+    { isoCode: 'KE', dialCode: '+254', name: 'Kenya', flag: '🇰🇪' },
+    { isoCode: 'UG', dialCode: '+256', name: 'Uganda', flag: '🇺🇬' },
+    { isoCode: 'RW', dialCode: '+250', name: 'Rwanda', flag: '🇷🇼' },
+    { isoCode: 'BI', dialCode: '+257', name: 'Burundi', flag: '🇧🇮' },
+    { isoCode: 'SS', dialCode: '+211', name: 'South Sudan', flag: '🇸🇸' },
+    { isoCode: 'ET', dialCode: '+251', name: 'Ethiopia', flag: '🇪🇹' },
+    // A few examples from other regions:
+    { isoCode: 'GB', dialCode: '+44', name: 'United Kingdom', flag: '🇬🇧' },
+    { isoCode: 'US', dialCode: '+1', name: 'United States', flag: '🇺🇸' },
+    { isoCode: 'CA', dialCode: '+1', name: 'Canada', flag: '🇨🇦' },
+    { isoCode: 'DE', dialCode: '+49', name: 'Germany', flag: '🇩🇪' },
+    { isoCode: 'IN', dialCode: '+91', name: 'India', flag: '🇮🇳' },
+    { isoCode: 'CN', dialCode: '+86', name: 'China', flag: '🇨🇳' },
+    { isoCode: 'BR', dialCode: '+55', name: 'Brazil', flag: '🇧🇷' },
+    // 👉 Here you add the rest of the world.
+    // You can load a standard JSON of all countries (isoCode, dialCode, name, flag)
+    // and generate this array at build time if you prefer.
+];
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+const DEFAULT_COUNTRY_ISO = 'TZ';
+const FilterableSingleSelectField = SingleSelectField;
+function normalizeTanzaniaLocal(raw) {
+    const digits = (raw || '').replace(/\D/g, '');
+    if (!digits)
+        return '';
+    if (digits.startsWith('255')) {
+        let sub = digits.slice(3);
+        if (sub.startsWith('0'))
+            sub = sub.slice(1);
+        return ('0' + sub).slice(0, 10);
+    }
+    if (digits.startsWith('0')) {
+        return digits.slice(0, 10);
+    }
+    if (/^[67]\d{7,9}$/.test(digits)) {
+        return ('0' + digits).slice(0, 10);
+    }
+    if (digits.length >= 9 && !digits.startsWith('0')) {
+        return ('0' + digits.slice(0, 9)).slice(0, 10);
+    }
+    return digits.slice(0, 10);
+}
+const InternationalPhoneField = ({ name, label, placeholder, value, required, disabled, error, validationText, inputWidth, defaultCountryIsoCode = DEFAULT_COUNTRY_ISO, onChange, onBlur, }) => {
+    const [selectedIsoCode, setSelectedIsoCode] = React__default.useState(defaultCountryIsoCode);
+    const [filterText, setFilterText] = React__default.useState('');
+    const [leadingZeroWarning, setLeadingZeroWarning] = React__default.useState(null);
+    const selectedCountry = ALL_COUNTRIES.find((c) => c.isoCode === selectedIsoCode) ??
+        ALL_COUNTRIES.find((c) => c.isoCode === DEFAULT_COUNTRY_ISO);
+    const [localNumber, setLocalNumber] = React__default.useState('');
+    React__default.useEffect(() => {
+        const raw = value ?? '';
+        if (selectedCountry.isoCode === 'TZ') {
+            const normalizedStored = normalizeTanzaniaLocal(raw);
+            if (!normalizedStored) {
+                setLocalNumber('');
+                return;
+            }
+            const digits = normalizedStored.replace(/\D/g, '');
+            const ui = digits.startsWith('0') ? digits.slice(1) : digits;
+            setLocalNumber(ui);
+        }
+        else {
+            const digits = raw.replace(/\D/g, '').slice(0, 15);
+            setLocalNumber(digits);
+        }
+        setLeadingZeroWarning(null);
+    }, [value, selectedCountry.isoCode]);
+    const filteredCountries = React__default.useMemo(() => {
+        const term = filterText.trim().toLowerCase();
+        if (!term)
+            return ALL_COUNTRIES;
+        return ALL_COUNTRIES.filter((c) => {
+            const haystack = `${c.name} ${c.dialCode} ${c.isoCode}`.toLowerCase();
+            return haystack.includes(term);
+        });
+    }, [filterText]);
+    const handleCountryChange = ({ selected }) => {
+        setSelectedIsoCode(selected);
+    };
+    const handleLocalChange = ({ value }) => {
+        const digitsOnly = (value || '').replace(/\D/g, '');
+        if (selectedCountry.isoCode === 'TZ') {
+            let ui = digitsOnly;
+            if (ui.startsWith('0')) {
+                setLeadingZeroWarning('For Tanzania, do not start the number with 0. Enter it without the leading 0 (e.g. 767000000).');
+                ui = ui.slice(1);
+            }
+            else {
+                setLeadingZeroWarning(null);
+            }
+            ui = ui.slice(0, 9);
+            const stored = ui ? '0' + ui : '';
+            setLocalNumber(ui);
+            onChange(stored);
+        }
+        else {
+            const ui = digitsOnly.slice(0, 15);
+            setLocalNumber(ui);
+            onChange(ui);
+            setLeadingZeroWarning(null);
+        }
+    };
+    const effectiveValidationText = leadingZeroWarning ??
+        validationText ??
+        'Enter the phone number without the leading 0 (e.g. 767000000). The country code is already applied, and the system will store it as 0767000000 for Tanzania.';
+    const hasError = Boolean(error || leadingZeroWarning);
+    const wrapperStyle = {
+        maxWidth: typeof inputWidth === 'number' ? inputWidth : inputWidth || 480,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.5rem',
+    };
+    return (React__default.createElement("div", { style: wrapperStyle },
+        label && (React__default.createElement("label", { htmlFor: name, style: {
+                fontSize: '0.875rem',
+                fontWeight: 500,
+                color: '#1f2933',
+            } },
+            label,
+            required ? (React__default.createElement("span", { style: { color: '#e53935', marginLeft: 4 } }, "*")) : null)),
+        React__default.createElement("div", { style: {
+                display: 'flex',
+                width: '100%',
+                gap: '0.75rem',
+                alignItems: 'stretch',
+            } },
+            React__default.createElement("div", { style: {
+                    flex: '0 0 auto',
+                    width: 260,
+                } },
+                React__default.createElement(FilterableSingleSelectField, { selected: selectedIsoCode, onChange: handleCountryChange, disabled: disabled, dense: true, filterable: true, onFilterChange: ({ value }) => setFilterText(value), noMatchText: "No matching country" }, filteredCountries.map((country) => (React__default.createElement(SingleSelectOption, { key: country.isoCode, value: country.isoCode, label: `${country.flag} ${country.name} (${country.dialCode})` }))))),
+            React__default.createElement("div", { style: { flex: '1 1 0', minWidth: 0 } },
+                React__default.createElement(InputField$1, { type: "tel", name: name, placeholder: placeholder ?? '767000000', value: localNumber, required: required, disabled: disabled, error: hasError, validationText: effectiveValidationText, autoComplete: "tel", max: selectedCountry.isoCode === 'TZ' ? '9' : '15', onChange: handleLocalChange, onBlur: () => {
+                        if (selectedCountry.isoCode === 'TZ') {
+                            const digits = (localNumber || '')
+                                .replace(/\D/g, '')
+                                .slice(0, 9);
+                            const stored = digits ? '0' + digits : '';
+                            if (digits !== localNumber) {
+                                setLocalNumber(digits);
+                                onChange(stored);
+                            }
+                        }
+                        onBlur?.();
+                    } })))));
+};
+
 // Copyright 2024 UDSM DHIS2 Lab. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
@@ -6661,7 +6812,6 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                         value &&
                         value.length > 0 &&
                         touched)) {
-                    //  if (this.field().unique && value && value.length > 0 && touched) {
                     setCheckingUniqueness(true);
                     setRecordExistError(undefined);
                     try {
@@ -6684,6 +6834,18 @@ class BaseFormFieldComponent extends ReactWrapperModule {
             };
             const formFieldContent = () => {
                 switch (this.field().controlType) {
+                    case 'number':
+                        return (React__default.createElement(InputField$1, { error: hasError, validationText: validationError, type: this.field().type, inputWidth: inputWidth, required: this.field().required, name: this.field().id, label: this.label(), min: this.field().min?.toString(), max: this.field().max?.toString(), placeholder: this.placeholder(), value: value, readOnly: disabled, onChange: (event) => {
+                                onValueChange(event.value);
+                            }, onBlur: () => {
+                                checkValueUniqueness();
+                            } }));
+                    case 'tel':
+                        return (React__default.createElement(InternationalPhoneField, { name: this.field().id, label: this.label(), placeholder: this.placeholder(), value: value ?? '', required: this.field().required, disabled: disabled, error: hasError, validationText: validationError, inputWidth: this.fieldConfig()?.inputWidth, defaultCountryIsoCode: "TZ", onChange: (localNumber) => {
+                                onValueChange(localNumber);
+                            }, onBlur: () => {
+                                checkValueUniqueness();
+                            } }));
                     case 'coordinate':
                         return (React__default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 } },
                             React__default.createElement(NoticeBox, { title: "Location capture required" },
@@ -6772,9 +6934,7 @@ class BaseFormFieldComponent extends ReactWrapperModule {
                     case 'date-time': {
                         const field = this.field();
                         const isDateTimeField = field.type === 'date-time';
-                        const inputType = isDateTimeField
-                            ? 'datetime-local'
-                            : 'date';
+                        const inputType = isDateTimeField ? 'datetime-local' : 'date';
                         // Value coming from DHIS2 store
                         const htmlValue = this.formatValueForHtmlInputFromDhis(value, isDateTimeField);
                         const htmlMin = field.min
@@ -7780,9 +7940,9 @@ class FieldUtil {
             case FieldType.TRUE_ONLY:
                 return 'checkbox';
             case FieldType.NUMBER:
-                return 'textbox';
+                return 'number';
             case FieldType.PHONE_NUMBER:
-                return 'textbox';
+                return 'tel';
             case FieldType.ORG_UNIT:
                 return 'org-unit';
             case FieldType.DATE:
@@ -7826,7 +7986,9 @@ class FieldControlTypeUtil {
             case FieldType.TRUE_ONLY:
                 return 'checkbox';
             case FieldType.NUMBER:
-                return 'textbox';
+                return 'number';
+            case FieldType.PHONE_NUMBER:
+                return 'tel';
             case FieldType.INTEGER_ZERO_OR_POSITIVE:
                 return 'textbox';
             case FieldType.ORG_UNIT:
@@ -7864,6 +8026,8 @@ class FormFieldTypeUtil {
                 return 'coordinate';
             case FieldType.DATE_TIME:
                 return 'date-time';
+            case FieldType.PHONE_NUMBER:
+                return 'tel';
             default:
                 return 'text';
         }