@countriesdb/widget 0.1.23 → 0.1.25

package/dist/index.js

@@ -400,8 +400,6 @@
         else {
             select.innerHTML += `<option value="${defaultValue}" disabled>${formattedMessage}</option>`;
         }
-        // Ensure select is enabled so users can see the error
-        select.disabled = false;
     }
 
     /**
@@ -435,6 +433,34 @@
         });
         select.dispatchEvent(evt);
     }
+    /**
+     * Dispatch a custom ready event once a select has been populated.
+     */
+    function dispatchReadyEvent(select, detail = {}) {
+        const selectedValues = select.multiple
+            ? Array.from(select.selectedOptions || [])
+                .map((opt) => opt.value)
+                .filter((v) => v !== '')
+            : select.value
+                ? [select.value]
+                : [];
+        const evt = new CustomEvent('countriesWidget:ready', {
+            bubbles: true,
+            detail: {
+                value: select.value || '',
+                selectedValues,
+                name: select.dataset.name || null,
+                country: select.dataset.country || null,
+                isSubdivision: select.classList.contains('subdivision-selection'),
+                type: select.classList.contains('subdivision-selection')
+                    ? 'subdivision'
+                    : 'country',
+                phase: 'initial',
+                ...detail,
+            },
+        });
+        select.dispatchEvent(evt);
+    }
     /**
      * Check if an event was initiated by the widget (not user)
      */
@@ -711,7 +737,8 @@
                 : null;
             // Check if linked country select is multi-select (not allowed)
             if (linkedCountrySelect && linkedCountrySelect.hasAttribute('multiple')) {
-                handleApiError(select, 'Cannot link to multi-select country. Use data-country-code instead.', true);
+                const defaultValue = select.dataset.defaultValue ?? '';
+                select.innerHTML = `<option value="${defaultValue}" disabled>Error: Cannot link to multi-select country. Use data-country-code instead.</option>`;
                 continue;
             }
             // No direct link → maybe data-country-code
@@ -721,7 +748,8 @@
                     await updateSubdivisionSelect(select, apiKey, backendUrl, state, config, select.dataset.countryCode);
                 }
                 else {
-                    handleApiError(select, 'No country select present');
+                    const defaultValue = select.dataset.defaultValue ?? '';
+                    select.innerHTML += `<option value="${defaultValue}" disabled>Error: No country select present</option>`;
                 }
             }
             // Always dispatch an update event for user-initiated subdivision changes
@@ -767,8 +795,10 @@
                 // Use GeoIP only if data-preselected attribute is not set at all
                 const shouldUseGeoIP = preselectedValue === undefined || preselectedValue === null;
                 // Check if this subdivision select prefers official subdivisions
-                const preferOfficial = select.hasAttribute('data-prefer-official') ||
-                    config.preferOfficialSubdivisions;
+                // Use data attribute if present, otherwise use config
+                const preferOfficial = select.hasAttribute('data-prefer-official')
+                    ? true
+                    : config.preferOfficialSubdivisions;
                 const languageHeaders = CountriesDBClient.getLanguageHeaders(config.forcedLanguage, config.defaultLanguage);
                 const subdivisionsResult = await CountriesDBClient.fetchSubdivisions({
                     apiKey,
@@ -854,6 +884,10 @@
             finally {
                 // Mark initialization as complete
                 state.isInitializing.delete(select);
+                dispatchReadyEvent(select, {
+                    type: 'subdivision',
+                    phase: isReload ? 'reload' : 'initial',
+                });
                 // Only fire 'reload' if this is a reload, not initial load
                 if (isReload && !valueSetByWidget) {
                     dispatchUpdateEvent(select, {
@@ -865,7 +899,8 @@
         }
         else if (!select.dataset.country ||
             !document.querySelector(`.country-selection[data-name="${select.dataset.country}"]`)) {
-            handleApiError(select, 'No country select present');
+            const defaultValue = select.dataset.defaultValue ?? '';
+            select.innerHTML += `<option value="${defaultValue}" disabled>Error: No country select present</option>`;
         }
     }
     /**
@@ -894,7 +929,8 @@
             if (name && seenNames[name]) {
                 select.removeAttribute('data-name');
                 initializeSelect(select, '&mdash;');
-                handleApiError(select, 'Duplicate field');
+                const defaultValue = select.dataset.defaultValue ?? '';
+                select.innerHTML += `<option value="${defaultValue}" disabled>Error: Duplicate field</option>`;
                 continue;
             }
             if (name) {
@@ -995,6 +1031,10 @@
             finally {
                 // Mark initialization as complete
                 state.isInitializing.delete(select);
+                dispatchReadyEvent(select, {
+                    type: 'country',
+                    phase: 'initial',
+                });
                 // If no preselected and no geoip selection happened, emit a regular update
                 if (!valueSetByWidget) {
                     dispatchUpdateEvent(select, { type: 'country', reason: 'regular' });
@@ -1113,14 +1153,12 @@
             // But only if it matches the widget pattern (not a bundled file)
             if (document.currentScript && document.currentScript instanceof HTMLScriptElement) {
                 const src = document.currentScript.src;
-                if (src && (src.includes('@countriesdb/widget') ||
-                    src.includes('widget/dist/index.js'))) {
+                if (src && (src.includes('@countriesdb/widget') || src.includes('widget/dist/index.js'))) {
                     loaderScript = document.currentScript;
                 }
             }
             // If currentScript didn't match, search for widget script
             if (!loaderScript) {
-                // Only consider script tags that loaded the widget bundle
                 const scripts = Array.from(document.getElementsByTagName('script'));
                 loaderScript = scripts.find((s) => s.src && (s.src.includes('@countriesdb/widget') ||
                     s.src.includes('widget/dist/index.js'))) || null;
@@ -1163,11 +1201,6 @@
                 : globalConfig?.isoCountryNames !== undefined
                     ? globalConfig.isoCountryNames
                     : parseBoolean(scriptUrl?.searchParams.get('iso_country_names') ?? 'false'),
-            preferOfficialSubdivisions: options.preferOfficialSubdivisions !== undefined
-                ? options.preferOfficialSubdivisions
-                : globalConfig?.preferOfficialSubdivisions !== undefined
-                    ? globalConfig.preferOfficialSubdivisions
-                    : parseBoolean(scriptUrl?.searchParams.get('prefer_official') ?? 'false'),
             subdivisionRomanizationPreference: options.subdivisionRomanizationPreference ||
                 globalConfig?.subdivisionRomanizationPreference ||
                 scriptUrl?.searchParams.get('subdivision_romanization_preference') ||
@@ -1177,6 +1210,11 @@
                 : globalConfig?.preferLocalVariant !== undefined
                     ? globalConfig.preferLocalVariant
                     : parseBoolean(scriptUrl?.searchParams.get('prefer_local_variant') ?? 'false'),
+            preferOfficialSubdivisions: options.preferOfficialSubdivisions !== undefined
+                ? options.preferOfficialSubdivisions
+                : globalConfig?.preferOfficialSubdivisions !== undefined
+                    ? globalConfig.preferOfficialSubdivisions
+                    : parseBoolean(scriptUrl?.searchParams.get('prefer_official') ?? 'false'),
             countryNameFilter: options.countryNameFilter ?? globalConfig?.countryNameFilter,
             subdivisionNameFilter: options.subdivisionNameFilter ?? globalConfig?.subdivisionNameFilter,
             autoInit: options.autoInit !== undefined
@@ -1214,8 +1252,7 @@
             // But only if it matches the widget pattern (not a bundled file)
             if (document.currentScript && document.currentScript instanceof HTMLScriptElement) {
                 const src = document.currentScript.src;
-                if (src && (src.includes('@countriesdb/widget') ||
-                    src.includes('widget/dist/index.js'))) {
+                if (src && (src.includes('@countriesdb/widget') || src.includes('widget/dist/index.js'))) {
                     loaderScript = document.currentScript;
                 }
             }
@@ -1283,26 +1320,19 @@
      * Show error when both follow_related and follow_upward are enabled
      */
     function showParamConflictError() {
-        const errorMessage = 'Cannot enable both follow_related and follow_upward';
+        const errorMessage = 'Error: Cannot enable both follow_related and follow_upward';
         const countrySelects = Array.from(document.querySelectorAll('.country-selection'));
         for (const select of countrySelects) {
-            handleApiError(select, errorMessage, true);
+            select.innerHTML = `<option value="${select.dataset.defaultValue ?? ''}" disabled>${errorMessage}</option>`;
         }
         const subdivisionSelects = Array.from(document.querySelectorAll('.subdivision-selection'));
         for (const select of subdivisionSelects) {
-            handleApiError(select, errorMessage, true);
+            select.innerHTML = `<option value="${select.dataset.defaultValue ?? ''}" disabled>${errorMessage}</option>`;
         }
     }
     // Expose public loader
     if (typeof window !== 'undefined') {
         window.CountriesWidgetLoad = CountriesWidgetLoad;
-        // Dispatch ready event to notify consumers that the widget is available
-        // Use setTimeout(0) to ensure it fires after any synchronous code completes
-        setTimeout(() => {
-            if (typeof window !== 'undefined') {
-                window.dispatchEvent(new CustomEvent('countriesWidget:ready'));
-            }
-        }, 0);
         // Auto-init if script URL has auto_init=true (or not set, default is true)
         // Use a function that waits for DOM to be ready and finds the script tag reliably
         (function checkAutoInit() {
@@ -1317,14 +1347,12 @@
             // But only if it matches the widget pattern (not a bundled file)
             if (document.currentScript && document.currentScript instanceof HTMLScriptElement) {
                 const src = document.currentScript.src;
-                if (src && (src.includes('@countriesdb/widget') ||
-                    src.includes('widget/dist/index.js'))) {
+                if (src && (src.includes('@countriesdb/widget') || src.includes('widget/dist/index.js'))) {
                     loaderScript = document.currentScript;
                 }
             }
             // If currentScript didn't match, search for widget script
             if (!loaderScript) {
-                // Fallback: find script tag with @countriesdb/widget in src
                 const scripts = Array.from(document.getElementsByTagName('script'));
                 loaderScript = scripts.find((s) => s.src && (s.src.includes('@countriesdb/widget') ||
                     s.src.includes('widget/dist/index.js'))) || null;