@countriesdb/widget 0.1.1

package/dist/index.esm.js

@@ -0,0 +1,863 @@
+import { applyCountryNameFilter, sortCountries, buildSubdivisionTree, parseNestingPrefixes, flattenSubdivisionOptions, CountriesDBClient } from '@countriesdb/widget-core';
+
+/**
+ * DOM manipulation utilities
+ */
+/**
+ * Initialize a select element with default option
+ */
+function initializeSelect(select, fallbackLabel = 'Not Applicable', isSubdivision = false) {
+    const isMultiple = select.hasAttribute('multiple');
+    // For multi-select, don't add default option or use data-label/data-default-value
+    if (isMultiple) {
+        select.innerHTML = '';
+        // Remove data-label and data-default-value for multi-select (they're ignored)
+        if (select.dataset.label !== undefined) {
+            delete select.dataset.label;
+        }
+        if (select.dataset.defaultValue !== undefined) {
+            delete select.dataset.defaultValue;
+        }
+    }
+    else {
+        const dataLabel = select.dataset.label;
+        const dataDefaultValue = select.dataset.defaultValue;
+        const label = dataLabel || fallbackLabel;
+        const defaultValue = dataDefaultValue ?? '';
+        select.innerHTML = `<option value="${defaultValue}">${label}</option>`;
+        if (dataLabel !== undefined) {
+            select.dataset.label = dataLabel;
+        }
+        if (dataDefaultValue !== undefined) {
+            select.dataset.defaultValue = dataDefaultValue;
+        }
+    }
+    if (isSubdivision) {
+        select.disabled = true;
+    }
+}
+/**
+ * Populate a select element with countries
+ */
+function populateCountrySelect(select, countries, language, countryNameFilter) {
+    // Apply filter and get display names
+    let filteredCountries = applyCountryNameFilter(countries, countryNameFilter, language);
+    // Sort if filter was applied
+    if (countryNameFilter) {
+        filteredCountries = sortCountries(filteredCountries, language);
+    }
+    // Clear existing options (except default)
+    const defaultOption = select.querySelector('option[value=""]') ||
+        (select.dataset.defaultValue ? select.querySelector(`option[value="${select.dataset.defaultValue}"]`) : null);
+    const defaultValue = select.dataset.defaultValue ?? '';
+    // Keep default option if it exists
+    select.innerHTML = defaultOption ? defaultOption.outerHTML : `<option value="${defaultValue}">${select.dataset.label || '&mdash;'}</option>`;
+    // Add country options
+    filteredCountries.forEach((country) => {
+        const option = document.createElement('option');
+        option.value = country.iso_alpha_2;
+        option.textContent = country._displayName;
+        select.appendChild(option);
+    });
+}
+/**
+ * Populate a select element with subdivisions
+ */
+function buildSubdivisionOptionsHTML(subdivisions, select, language, showSubdivisionType, allowParentSelection, subdivisionNameFilter) {
+    const tree = buildSubdivisionTree(subdivisions);
+    // Parse nesting prefixes from data attributes
+    const dataAttributes = {};
+    for (let lvl = 1; lvl <= 10; lvl++) {
+        const key = `nested${lvl}Prefix`;
+        const value = select.dataset[key];
+        if (value !== undefined) {
+            dataAttributes[`nested${lvl}Prefix`] = value;
+        }
+        else {
+            break;
+        }
+    }
+    const prefixes = parseNestingPrefixes(dataAttributes);
+    const isMultiple = select.hasAttribute('multiple');
+    const labelKey = showSubdivisionType ? 'full_name' : 'name';
+    let html = '';
+    // For multi-select, don't add default option
+    if (!isMultiple) {
+        const defaultLabel = select.dataset.label || '&mdash;';
+        const defaultValue = select.dataset.defaultValue ?? '';
+        html = `<option value="${defaultValue}">${defaultLabel}</option>`;
+    }
+    html += flattenSubdivisionOptions(tree, 0, prefixes, labelKey, language, allowParentSelection, subdivisionNameFilter);
+    return html;
+}
+/**
+ * Apply preselected value to a select element
+ */
+function applyPreselectedValue(select, value) {
+    if (!value || value.trim() === '') {
+        return;
+    }
+    const isMultiple = select.hasAttribute('multiple');
+    if (isMultiple) {
+        // For multi-select, parse comma-separated values
+        const values = value
+            .split(',')
+            .map((v) => v.trim())
+            .filter((v) => v !== '');
+        // Select all matching options
+        Array.from(select.options).forEach((option) => {
+            option.selected = values.includes(option.value);
+        });
+    }
+    else {
+        // Single select: set single value
+        select.value = value;
+    }
+}
+/**
+ * Handle API error by showing error message in select
+ */
+function handleApiError(select, errorMessage) {
+    const message = errorMessage instanceof Error ? errorMessage.message : errorMessage;
+    const defaultValue = select.dataset.defaultValue ?? '';
+    select.innerHTML += `<option value="${defaultValue}" disabled>${message}</option>`;
+}
+
+/**
+ * Event system for widget updates
+ */
+/**
+ * Dispatch a custom update event for widget changes
+ */
+function dispatchUpdateEvent(select, detail = {}) {
+    let selectedValues = [];
+    if (select.multiple) {
+        // For multi-select, selectedOptions is a HTMLCollection, convert to array
+        selectedValues = Array.from(select.selectedOptions || [])
+            .map((opt) => opt.value)
+            .filter((v) => v !== '');
+    }
+    else {
+        // For single-select, use value
+        selectedValues = select.value ? [select.value] : [];
+    }
+    const evt = new CustomEvent('countriesWidget:update', {
+        bubbles: true,
+        detail: {
+            value: select.value || '',
+            selectedValues,
+            name: select.dataset.name || null,
+            country: select.dataset.country || null,
+            isSubdivision: select.classList.contains('subdivision-selection'),
+            ...detail,
+        },
+    });
+    select.dispatchEvent(evt);
+}
+/**
+ * Check if an event was initiated by the widget (not user)
+ */
+function isWidgetInitiatedEvent(event) {
+    return event.isWidgetInitiated === true;
+}
+
+/**
+ * Follow logic for related and upward navigation
+ */
+/**
+ * Trigger follow logic when a subdivision is selected
+ */
+async function triggerFollowLogic(select, apiKey, backendUrl, state, followRelated, followUpward, updateSubdivisionSelectFn) {
+    {
+        return;
+    }
+}
+/**
+ * Handle follow_related from subdivision change event
+ */
+async function handleFollowRelatedFromSubdivision(select, apiKey, backendUrl, state, followRelated, updateSubdivisionSelectFn) {
+    if (!followRelated) {
+        return;
+    }
+    const linkedCountrySelect = document.querySelector(`.country-selection[data-name="${select.dataset.country}"]`);
+    // Only work if country is single-select (never when country is multi)
+    if (!linkedCountrySelect || linkedCountrySelect.multiple) {
+        return;
+    }
+    const allSubs = state.subdivisionsMap.get(select);
+    if (!allSubs) {
+        return;
+    }
+    // Get selected code (for multi-select, use first selected value)
+    const selectedCode = select.multiple
+        ? (select.selectedOptions[0]?.value || null)
+        : select.value;
+    if (!selectedCode) {
+        return;
+    }
+    const picked = allSubs.find((s) => s.code === selectedCode);
+    if (!picked || !picked.related_country_code) {
+        return;
+    }
+    const targetCountry = picked.related_country_code;
+    const targetSubdivision = picked.related_subdivision_code;
+    const relatedSubsSelect = document.querySelector(`.subdivision-selection[data-country="${linkedCountrySelect.dataset.name}"]`);
+    if (relatedSubsSelect && targetSubdivision) {
+        relatedSubsSelect.dataset.preselected = targetSubdivision;
+    }
+    if (linkedCountrySelect.value !== targetCountry) {
+        linkedCountrySelect.value = targetCountry;
+        dispatchUpdateEvent(linkedCountrySelect, { type: 'country', reason: 'regular' });
+        await updateSubdivisionSelectFn(linkedCountrySelect, apiKey, targetCountry);
+    }
+    else {
+        if (relatedSubsSelect && targetSubdivision) {
+            await updateSubdivisionSelectFn(relatedSubsSelect, apiKey, targetCountry);
+        }
+    }
+}
+/**
+ * Handle follow_upward from subdivision change event
+ */
+async function handleFollowUpwardFromSubdivision(select, apiKey, backendUrl, state, followUpward, updateSubdivisionSelectFn) {
+    if (!followUpward) {
+        return;
+    }
+    // Disable for multi-select subdivisions
+    if (select.multiple) {
+        return;
+    }
+    const linkedCountrySelect = document.querySelector(`.country-selection[data-name="${select.dataset.country}"]`);
+    // Only work if country is single-select (never when country is multi)
+    if (!linkedCountrySelect || linkedCountrySelect.multiple) {
+        return;
+    }
+    const allSubs = state.subdivisionsMap.get(select);
+    if (!allSubs) {
+        return;
+    }
+    const selectedCode = select.value;
+    if (!selectedCode) {
+        return;
+    }
+    const picked = allSubs.find((s) => s.code === selectedCode);
+    if (!picked || !picked.is_subdivision_of) {
+        return;
+    }
+    const parentCode = picked.is_subdivision_of.parent_country_code;
+    const parentSub = picked.is_subdivision_of.subdivision_code;
+    if (parentSub) {
+        const relatedSubsSelect = document.querySelector(`.subdivision-selection[data-country="${linkedCountrySelect.dataset.name}"]`);
+        if (relatedSubsSelect) {
+            relatedSubsSelect.dataset.preselected = parentSub;
+        }
+    }
+    if (linkedCountrySelect.value !== parentCode) {
+        linkedCountrySelect.value = parentCode;
+        dispatchUpdateEvent(linkedCountrySelect, { type: 'country', reason: 'follow' });
+        await updateSubdivisionSelectFn(linkedCountrySelect, apiKey, parentCode);
+    }
+    else if (parentSub) {
+        const relatedSubsSelect = document.querySelector(`.subdivision-selection[data-country="${linkedCountrySelect.dataset.name}"]`);
+        if (relatedSubsSelect) {
+            await updateSubdivisionSelectFn(relatedSubsSelect, apiKey, parentCode);
+        }
+    }
+}
+/**
+ * Handle follow_upward from country change event
+ */
+async function handleFollowUpwardFromCountry(select, apiKey, backendUrl, state, followUpward, updateSubdivisionSelectFn) {
+    // Only works when country is single-select (never for multi-select)
+    if (!followUpward || select.multiple) {
+        return;
+    }
+    const countries = state.countriesMap.get(select);
+    if (!countries) {
+        return;
+    }
+    const chosen = select.value;
+    if (!chosen) {
+        return;
+    }
+    const picked = countries.find((c) => c.iso_alpha_2 === chosen);
+    if (!picked || !picked.is_subdivision_of) {
+        return;
+    }
+    const parentCode = picked.is_subdivision_of.parent_country_code;
+    const parentSub = picked.is_subdivision_of.subdivision_code;
+    if (select.value !== parentCode) {
+        if (parentSub) {
+            const linkedSubdivisionSelects = Array.from(document.querySelectorAll(`.subdivision-selection[data-country="${select.dataset.name}"]`));
+            for (const s of linkedSubdivisionSelects) {
+                // Only preselect if subdivision is single-select (follow_upward doesn't work with multi)
+                if (!s.multiple) {
+                    s.dataset.preselected = parentSub;
+                }
+            }
+        }
+        select.value = parentCode;
+        dispatchUpdateEvent(select, { type: 'country', reason: 'regular' });
+        await updateSubdivisionSelectFn(select, apiKey, parentCode);
+    }
+    else if (parentSub) {
+        const linkedSubdivisionSelects = Array.from(document.querySelectorAll(`.subdivision-selection[data-country="${select.dataset.name}"]`));
+        for (const s of linkedSubdivisionSelects) {
+            // Only update if subdivision is single-select
+            if (!s.multiple) {
+                await updateSubdivisionSelectFn(s, apiKey, parentCode);
+            }
+        }
+    }
+}
+
+/**
+ * Widget initialization logic
+ */
+/**
+ * Setup subdivision selection elements
+ */
+async function setupSubdivisionSelection(apiKey, backendUrl, state, config) {
+    const subdivisionSelects = Array.from(document.querySelectorAll('.subdivision-selection'));
+    for (const select of subdivisionSelects) {
+        // Initialize with a default option
+        initializeSelect(select, '&mdash;', true);
+        // Linked country select (if any)
+        const countryName = select.dataset.country;
+        const linkedCountrySelect = countryName
+            ? document.querySelector(`.country-selection[data-name="${countryName}"]`)
+            : null;
+        // Check if linked country select is multi-select (not allowed)
+        if (linkedCountrySelect && linkedCountrySelect.hasAttribute('multiple')) {
+            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
+        if (!countryName || !linkedCountrySelect) {
+            if (select.hasAttribute('data-country-code') &&
+                select.dataset.countryCode) {
+                await updateSubdivisionSelect(select, apiKey, backendUrl, state, config, select.dataset.countryCode);
+            }
+            else {
+                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
+        select.addEventListener('change', (event) => {
+            if (isWidgetInitiatedEvent(event)) {
+                return;
+            }
+            dispatchUpdateEvent(select, { type: 'subdivision', reason: 'regular' });
+        });
+        // --- follow_related (forward direction) ---
+        select.addEventListener('change', async (event) => {
+            if (isWidgetInitiatedEvent(event)) {
+                return;
+            }
+            await handleFollowRelatedFromSubdivision(select, apiKey, backendUrl, state, config.followRelated, (s, key, code) => updateSubdivisionSelect(s, key, backendUrl, state, config, code));
+        });
+        // --- follow_upward (reverse direction) ---
+        select.addEventListener('change', async (event) => {
+            if (isWidgetInitiatedEvent(event)) {
+                return;
+            }
+            await handleFollowUpwardFromSubdivision(select, apiKey, backendUrl, state, config.followUpward, (s, key, code) => updateSubdivisionSelect(s, key, backendUrl, state, config, code));
+        });
+    }
+}
+/**
+ * Update subdivision select with data for a specific country
+ */
+async function updateSubdivisionSelect(select, apiKey, backendUrl, state, config, countryCode) {
+    const preselectedValue = select.getAttribute('data-preselected') || select.dataset.preselected;
+    // Check if this is a reload (select was already populated before)
+    const isReload = state.subdivisionsMap.has(select);
+    initializeSelect(select, '&mdash;', true);
+    // Mark as initializing to prevent change events
+    state.isInitializing.add(select);
+    let effectiveCountryCode = countryCode;
+    if (!effectiveCountryCode) {
+        effectiveCountryCode = select.dataset.countryCode || '';
+    }
+    if (effectiveCountryCode) {
+        let valueSetByWidget = false; // Track if a value was set by widget
+        try {
+            // 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');
+            const languageHeaders = CountriesDBClient.getLanguageHeaders(undefined, undefined);
+            const subdivisionsResult = await CountriesDBClient.fetchSubdivisions({
+                apiKey,
+                backendUrl,
+                countryCode: effectiveCountryCode,
+                shouldUseGeoIP,
+                preferOfficial,
+                subdivisionRomanizationPreference: config.subdivisionRomanizationPreference,
+                preferLocalVariant: config.preferLocalVariant,
+                languageHeaders,
+            });
+            const subdivisions = subdivisionsResult.data;
+            const subdivisionsLanguage = subdivisionsResult.language || 'en';
+            // Store in memory
+            state.subdivisionsMap.set(select, subdivisions);
+            state.subdivisionsLanguageMap.set(select, subdivisionsLanguage);
+            if (subdivisions.length > 0) {
+                // Populate <option>
+                select.disabled = false;
+                // Preserve data attributes before setting innerHTML (only for non-multi-select)
+                const isMultiple = select.hasAttribute('multiple');
+                const dataLabel = !isMultiple ? select.dataset.label : undefined;
+                const dataDefaultValue = !isMultiple
+                    ? select.dataset.defaultValue
+                    : undefined;
+                select.innerHTML = buildSubdivisionOptionsHTML(subdivisions, select, subdivisionsLanguage, config.showSubdivisionType, config.allowParentSelection, config.subdivisionNameFilter);
+                // Restore data attributes after setting innerHTML
+                if (!isMultiple) {
+                    if (dataLabel !== undefined) {
+                        select.dataset.label = dataLabel;
+                    }
+                    if (dataDefaultValue !== undefined) {
+                        select.dataset.defaultValue = dataDefaultValue;
+                    }
+                }
+                // Manual preselection wins
+                if (preselectedValue !== undefined &&
+                    preselectedValue !== null &&
+                    preselectedValue.trim() !== '') {
+                    applyPreselectedValue(select, preselectedValue);
+                    dispatchUpdateEvent(select, {
+                        type: 'subdivision',
+                        reason: 'preselected',
+                    });
+                    valueSetByWidget = true;
+                    await triggerFollowLogic(select, apiKey, backendUrl, state, false, // followRelated - handled in event listeners
+                    false, // followUpward - handled in event listeners
+                    (s, key, code) => updateSubdivisionSelect(s, key, backendUrl, state, config, code));
+                }
+                else {
+                    // Try GeoIP preselect
+                    if (shouldUseGeoIP) {
+                        const preselectedSubdivision = subdivisions.find((subdivision) => subdivision.preselected);
+                        if (preselectedSubdivision) {
+                            const isMultiple = select.hasAttribute('multiple');
+                            if (isMultiple) {
+                                // For multi-select, find and select the option
+                                const option = Array.from(select.options).find((opt) => opt.value === preselectedSubdivision.code);
+                                if (option) {
+                                    option.selected = true;
+                                }
+                            }
+                            else {
+                                // Single select: set value directly
+                                select.value = preselectedSubdivision.code;
+                            }
+                            dispatchUpdateEvent(select, {
+                                type: 'subdivision',
+                                reason: 'geoip',
+                            });
+                            valueSetByWidget = true;
+                            await triggerFollowLogic(select, apiKey, backendUrl, state, false, false, (s, key, code) => updateSubdivisionSelect(s, key, backendUrl, state, config, code));
+                        }
+                    }
+                }
+            }
+            else {
+                select.disabled = true;
+            }
+        }
+        catch (error) {
+            console.error('Failed to fetch subdivisions:', error);
+            handleApiError(select, error);
+        }
+        finally {
+            // Mark initialization as complete
+            state.isInitializing.delete(select);
+            // Only fire 'reload' if this is a reload, not initial load
+            if (isReload && !valueSetByWidget) {
+                dispatchUpdateEvent(select, {
+                    type: 'subdivision',
+                    reason: 'reload',
+                });
+            }
+        }
+    }
+    else if (!select.dataset.country ||
+        !document.querySelector(`.country-selection[data-name="${select.dataset.country}"]`)) {
+        const defaultValue = select.dataset.defaultValue ?? '';
+        select.innerHTML += `<option value="${defaultValue}" disabled>Error: No country select present</option>`;
+    }
+}
+/**
+ * Update subdivisions for all linked subdivision selects when country changes
+ */
+async function updateSubdivisions(countrySelect, apiKey, backendUrl, state, config) {
+    // Don't update subdivisions for multi-select countries (not supported)
+    if (countrySelect.hasAttribute('multiple')) {
+        return;
+    }
+    const selectedCountry = countrySelect.value;
+    const linkedSubdivisionSelects = Array.from(document.querySelectorAll(`.subdivision-selection[data-country="${countrySelect.dataset.name}"]`));
+    for (const select of linkedSubdivisionSelects) {
+        await updateSubdivisionSelect(select, apiKey, backendUrl, state, config, selectedCountry);
+    }
+}
+/**
+ * Setup country selection elements
+ */
+async function setupCountrySelection(apiKey, backendUrl, state, config, subdivisionConfig) {
+    const countrySelects = Array.from(document.querySelectorAll('.country-selection'));
+    const seenNames = {}; // track data-name to detect duplicates
+    for (const select of countrySelects) {
+        const name = select.dataset.name;
+        // Duplicates
+        if (name && seenNames[name]) {
+            select.removeAttribute('data-name');
+            initializeSelect(select, '&mdash;');
+            const defaultValue = select.dataset.defaultValue ?? '';
+            select.innerHTML += `<option value="${defaultValue}" disabled>Error: Duplicate field</option>`;
+            continue;
+        }
+        if (name) {
+            seenNames[name] = true;
+        }
+        // Avoid conflict if mis-classed
+        if (select.classList.contains('subdivision-selection')) {
+            select.classList.remove('subdivision-selection');
+            select.classList.add('subdivision-selection-removed');
+        }
+        // Initialize
+        initializeSelect(select, '&mdash;');
+        // Mark as initializing to prevent change events
+        state.isInitializing.add(select);
+        let valueSetByWidget = false; // Track if value was set by widget
+        let loadedInitialSubdivisions = false; // Track if subdivisions were loaded
+        try {
+            const preselectedValue = select.getAttribute('data-preselected') || select.dataset.preselected;
+            // Use GeoIP only if data-preselected attribute is not set at all
+            const shouldUseGeoIP = preselectedValue === undefined || preselectedValue === null;
+            const languageHeaders = CountriesDBClient.getLanguageHeaders(config.forcedLanguage, config.defaultLanguage);
+            // Fetch & populate countries
+            const countriesResult = await CountriesDBClient.fetchCountries({
+                apiKey,
+                backendUrl,
+                shouldUseGeoIP,
+                isoCountryNames: config.isoCountryNames,
+                languageHeaders,
+            });
+            const countries = countriesResult.data;
+            const countriesLanguage = countriesResult.language || 'en';
+            state.countriesMap.set(select, countries);
+            populateCountrySelect(select, countries, countriesLanguage, config.countryNameFilter);
+            // Apply preselected (manual)
+            if (preselectedValue !== undefined &&
+                preselectedValue !== null &&
+                preselectedValue.trim() !== '') {
+                applyPreselectedValue(select, preselectedValue);
+                dispatchUpdateEvent(select, { type: 'country', reason: 'preselected' });
+                valueSetByWidget = true;
+                // Load subdivisions after applying preselected value
+                if (select.value &&
+                    select.value !== (select.dataset.defaultValue || '')) {
+                    // This will be handled by the updateSubdivisions call below
+                    // We need to pass the config for subdivisions
+                }
+            }
+            // GeoIP auto-select
+            if (shouldUseGeoIP) {
+                const preselectedCountry = countries.find((country) => country.preselected);
+                if (preselectedCountry) {
+                    select.value = preselectedCountry.iso_alpha_2;
+                    dispatchUpdateEvent(select, { type: 'country', reason: 'geoip' });
+                    valueSetByWidget = true;
+                }
+            }
+            // If already chosen, load subdivisions
+            if (!loadedInitialSubdivisions &&
+                select.value &&
+                select.value !== (select.dataset.defaultValue || '')) {
+                // Subdivisions will be loaded by event handler
+                loadedInitialSubdivisions = true;
+            }
+            // On change => update subdivisions
+            select.addEventListener('change', async (event) => {
+                if (isWidgetInitiatedEvent(event)) {
+                    return;
+                }
+                // Dispatch update event for user-initiated country change
+                dispatchUpdateEvent(select, { type: 'country', reason: 'regular' });
+                // Update subdivisions
+                await updateSubdivisions(select, apiKey, backendUrl, state, subdivisionConfig);
+                const chosen = select.value;
+                if (!chosen) {
+                    return;
+                }
+                const stored = state.countriesMap.get(select) || [];
+                const picked = stored.find((c) => c.iso_alpha_2 === chosen);
+                if (!picked) {
+                    return;
+                }
+                // followUpward from country perspective
+                // Only works when country is single-select (never for multi-select)
+                if (config.followUpward && !select.multiple && picked.is_subdivision_of) {
+                    await handleFollowUpwardFromCountry(select, apiKey, backendUrl, state, config.followUpward, (s, key, code) => updateSubdivisionSelect(s, key, backendUrl, state, subdivisionConfig, code));
+                }
+            });
+        }
+        catch (error) {
+            console.error('Failed to fetch countries:', error);
+            handleApiError(select, error);
+            // Handle subdivision errors
+            if (select.dataset.name) {
+                const linkedSubdivisionSelects = Array.from(document.querySelectorAll(`.subdivision-selection[data-country="${select.dataset.name}"]`));
+                for (const s of linkedSubdivisionSelects) {
+                    initializeSelect(s, '&mdash;');
+                    handleApiError(s, error);
+                }
+            }
+        }
+        finally {
+            // Mark initialization as complete
+            state.isInitializing.delete(select);
+            // If no preselected and no geoip selection happened, emit a regular update
+            if (!valueSetByWidget) {
+                dispatchUpdateEvent(select, { type: 'country', reason: 'regular' });
+            }
+        }
+    }
+}
+
+/**
+ * @countriesdb/widget
+ *
+ * Plain JavaScript widget for CountriesDB.
+ * Provides DOM manipulation and auto-initialization for country/subdivision selects.
+ */
+// Global namespace to prevent double initialization
+const NS_KEY = '__CountriesWidgetNS__';
+/**
+ * Main widget initialization function
+ */
+async function CountriesWidgetLoad(options = {}) {
+    // Initialize namespace
+    if (!window[NS_KEY]) {
+        window[NS_KEY] = {
+            initialized: false,
+            initPromise: null,
+            version: 0,
+        };
+    }
+    const NS = window[NS_KEY];
+    // Share the same promise across concurrent calls
+    NS.initPromise = (async () => {
+        // Wait for DOM if needed
+        if (document.readyState === 'loading') {
+            await new Promise((resolve) => {
+                document.addEventListener('DOMContentLoaded', () => resolve(), {
+                    once: true,
+                });
+            });
+        }
+        // Get configuration from options or script URL
+        const config = getConfigFromOptionsOrScript(options);
+        // Validate configuration
+        if (!config.publicKey) {
+            console.error('CountriesDB Widget: publicKey is required');
+            return false;
+        }
+        // Check for conflicting parameters
+        if (config.followRelated && config.followUpward) {
+            showParamConflictError();
+            return false;
+        }
+        // Initialize widget state
+        const state = {
+            countriesMap: new WeakMap(),
+            subdivisionsMap: new WeakMap(),
+            subdivisionsLanguageMap: new WeakMap(),
+            isInitializing: new Set(),
+        };
+        // Setup subdivisions first (they depend on countries)
+        await setupSubdivisionSelection(config.publicKey, config.backendUrl, state, {
+            followRelated: config.followRelated || false,
+            followUpward: config.followUpward || false,
+            showSubdivisionType: config.showSubdivisionType !== false,
+            allowParentSelection: config.allowParentSelection || false,
+            subdivisionRomanizationPreference: config.subdivisionRomanizationPreference,
+            preferLocalVariant: config.preferLocalVariant || false,
+            subdivisionNameFilter: config.subdivisionNameFilter,
+        });
+        const subdivisionConfig = {
+            showSubdivisionType: config.showSubdivisionType !== false,
+            allowParentSelection: config.allowParentSelection || false,
+            subdivisionRomanizationPreference: config.subdivisionRomanizationPreference,
+            preferLocalVariant: config.preferLocalVariant || false,
+            subdivisionNameFilter: config.subdivisionNameFilter,
+        };
+        // Setup countries
+        await setupCountrySelection(config.publicKey, config.backendUrl, state, {
+            defaultLanguage: config.defaultLanguage,
+            forcedLanguage: config.forcedLanguage,
+            isoCountryNames: config.isoCountryNames || false,
+            followRelated: config.followRelated || false,
+            followUpward: config.followUpward || false,
+            countryNameFilter: config.countryNameFilter,
+        }, subdivisionConfig);
+        // After countries are set up, update subdivisions for any preselected countries
+        const countrySelects = Array.from(document.querySelectorAll('.country-selection'));
+        for (const select of countrySelects) {
+            if (select.value &&
+                select.value !== (select.dataset.defaultValue || '')) {
+                await updateSubdivisions(select, config.publicKey, config.backendUrl, state, subdivisionConfig);
+            }
+        }
+        NS.initialized = true;
+        return true;
+    })();
+    return NS.initPromise;
+}
+/**
+ * Get configuration from options or script URL parameters
+ */
+function getConfigFromOptionsOrScript(options) {
+    // Try to get config from script URL (for backward compatibility with widget.blade.php)
+    let scriptUrl = null;
+    try {
+        const loaderScript = document.currentScript ||
+            Array.from(document.getElementsByTagName('script'))
+                .filter((s) => s.src)
+                .pop();
+        if (loaderScript && loaderScript.src) {
+            scriptUrl = new URL(loaderScript.src);
+        }
+    }
+    catch {
+        // Ignore errors
+    }
+    const config = {
+        publicKey: options.publicKey || scriptUrl?.searchParams.get('public_key') || '',
+        backendUrl: options.backendUrl || scriptUrl?.searchParams.get('backend_url') || getBackendUrlFromScript(),
+        defaultLanguage: options.defaultLanguage || scriptUrl?.searchParams.get('default_language') || undefined,
+        forcedLanguage: options.forcedLanguage || scriptUrl?.searchParams.get('forced_language') || undefined,
+        showSubdivisionType: options.showSubdivisionType !== undefined
+            ? options.showSubdivisionType
+            : parseBoolean(scriptUrl?.searchParams.get('show_subdivision_type') ?? '1'),
+        followRelated: options.followRelated !== undefined
+            ? options.followRelated
+            : parseBoolean(scriptUrl?.searchParams.get('follow_related') ?? 'false'),
+        followUpward: options.followUpward !== undefined
+            ? options.followUpward
+            : parseBoolean(scriptUrl?.searchParams.get('follow_upward') ?? 'false'),
+        allowParentSelection: options.allowParentSelection !== undefined
+            ? options.allowParentSelection
+            : parseBoolean(scriptUrl?.searchParams.get('allow_parent_selection') ?? 'false'),
+        isoCountryNames: options.isoCountryNames !== undefined
+            ? options.isoCountryNames
+            : parseBoolean(scriptUrl?.searchParams.get('iso_country_names') ?? 'false'),
+        subdivisionRomanizationPreference: options.subdivisionRomanizationPreference ||
+            scriptUrl?.searchParams.get('subdivision_romanization_preference') ||
+            undefined,
+        preferLocalVariant: options.preferLocalVariant !== undefined
+            ? options.preferLocalVariant
+            : parseBoolean(scriptUrl?.searchParams.get('prefer_local_variant') ?? 'false'),
+        countryNameFilter: options.countryNameFilter,
+        subdivisionNameFilter: options.subdivisionNameFilter,
+        autoInit: options.autoInit !== undefined
+            ? options.autoInit
+            : parseBoolean(scriptUrl?.searchParams.get('auto_init') ?? 'true'),
+    };
+    // Resolve filter functions from global scope if specified by name
+    if (scriptUrl) {
+        const countryNameFilterName = scriptUrl.searchParams.get('countryNameFilter');
+        if (countryNameFilterName && typeof window !== 'undefined') {
+            const filter = window[countryNameFilterName];
+            if (typeof filter === 'function') {
+                config.countryNameFilter = filter;
+            }
+        }
+        const subdivisionNameFilterName = scriptUrl.searchParams.get('subdivisionNameFilter');
+        if (subdivisionNameFilterName && typeof window !== 'undefined') {
+            const filter = window[subdivisionNameFilterName];
+            if (typeof filter === 'function') {
+                config.subdivisionNameFilter = filter;
+            }
+        }
+    }
+    return config;
+}
+/**
+ * Get backend URL from script tag or use default
+ */
+function getBackendUrlFromScript() {
+    try {
+        const loaderScript = document.currentScript ||
+            Array.from(document.getElementsByTagName('script'))
+                .filter((s) => s.src)
+                .pop();
+        if (loaderScript && loaderScript.src) {
+            const scriptUrl = new URL(loaderScript.src);
+            const scheme = scriptUrl.protocol;
+            const host = scriptUrl.hostname;
+            const port = scriptUrl.port ? `:${scriptUrl.port}` : '';
+            return `${scheme}//${host}${port}`;
+        }
+    }
+    catch {
+        // Ignore errors
+    }
+    // Default to API domain (never use embedding site's domain)
+    return 'https://api.countriesdb.com';
+}
+/**
+ * Parse boolean from string value
+ */
+function parseBoolean(value) {
+    if (value === null || value === undefined) {
+        return false;
+    }
+    const lowered = String(value).trim().toLowerCase();
+    return !(lowered === '0' || lowered === 'false');
+}
+/**
+ * Show error when both follow_related and follow_upward are enabled
+ */
+function showParamConflictError() {
+    const errorMessage = 'Error: Cannot enable both follow_related and follow_upward';
+    const countrySelects = Array.from(document.querySelectorAll('.country-selection'));
+    for (const select of countrySelects) {
+        select.innerHTML = `<option value="${select.dataset.defaultValue ?? ''}" disabled>${errorMessage}</option>`;
+    }
+    const subdivisionSelects = Array.from(document.querySelectorAll('.subdivision-selection'));
+    for (const select of subdivisionSelects) {
+        select.innerHTML = `<option value="${select.dataset.defaultValue ?? ''}" disabled>${errorMessage}</option>`;
+    }
+}
+// Expose public loader
+if (typeof window !== 'undefined') {
+    window.CountriesWidgetLoad = CountriesWidgetLoad;
+    // Auto-init if script URL has auto_init=true (or not set, default is true)
+    const loaderScript = document.currentScript ||
+        Array.from(document.getElementsByTagName('script'))
+            .filter((s) => s.src)
+            .pop();
+    if (loaderScript && loaderScript.src) {
+        try {
+            const scriptUrl = new URL(loaderScript.src);
+            const autoInit = scriptUrl.searchParams.get('auto_init');
+            const shouldAutoInit = autoInit === null || autoInit === 'true' || autoInit === '1';
+            if (shouldAutoInit) {
+                Promise.resolve().then(() => {
+                    CountriesWidgetLoad().catch(console.error);
+                });
+            }
+        }
+        catch {
+            // Ignore errors, don't auto-init
+        }
+    }
+}
+
+export { CountriesWidgetLoad as default };
+//# sourceMappingURL=index.esm.js.map