Use location component partials for country/state selects

README.md

@@ -80,40 +80,17 @@ state:
 
 ### Front-end usage
 
-The front-end can also use the relationships by creating a partial called **country-state** with the content:
+The front-end can also use the relationships by rendering the `@form-select-country` and `@form-select-state` partials provided by the location component. Before proceeding, make sure you have the `location` component attached to the page or layout.
 
 ```twig
-{% set countryId = countryId|default(form_value('country_id')) %}
-{% set stateId = stateId|default(form_value('state_id')) %}
-
 <div class="form-group">
     <label for="accountCountry">Country</label>
-    {{ form_select_country('country_id', countryId, {
-        id: 'accountCountry',
-        class: 'form-control',
-        emptyOption: '',
-        'data-request': 'onInit',
-        'data-request-update': {
-            'country-state': '#partialCountryState'
-        }
-    }) }}
+    {% partial '@form-select-country' countryId=user.country_id %}
 </div>
 
 <div class="form-group">
     <label for="accountState">State</label>
-    {{ form_select_state('state_id', countryId, stateId, {
-        id: 'accountState',
-        class: 'form-control',
-        emptyOption: ''
-    }) }}
-</div>
-```
-
-This partial can be rendered in a form with the following:
-
-```twig
-<div id="partialCountryState">
-    {% partial 'country-state' countryId=user.country_id stateId=user.state_id %}
+    {% partial '@form-select-state' countryId=user.country_id stateId=user.state_id %}
 </div>
 ```
 

components/location/form-select-country.htm

@@ -0,0 +1,18 @@
+{% set countryId = countryId|default(post('country_id')) %}
+{% set uniqueId = post('country_unique_id', uniqueId|default('stateControlSelector')) %}
+{% set countries = __SELF__.availableCountries|default([]) %}
+
+<select
+    name="country_id"
+    class="form-select"
+    data-request="onAjax"
+    data-request-data="{
+        country_unique_id: '{{ uniqueId }}'
+    }"
+    data-request-update="{
+        '@form-select-state': '#{{ uniqueId }}'
+    }">
+    {% for country in countries %}
+        <option value="{{ country.id }}" {{ country.id == countryId ? 'selected'}}>{{ country.name }}</option>
+    {% endfor %}
+</select>

components/location/form-select-state.htm

@@ -0,0 +1,25 @@
+{% set countryId = post('country_id', countryId|default(null)) %}
+{% set stateId = post('state_id', stateId|default(null)) %}
+{% set uniqueId = post('country_unique_id', uniqueId|default('stateControlSelector')) %}
+{% set countries = __SELF__.availableCountries|default([]) %}
+{% set country = countries.find(countryId)|default(countries.first()) %}
+{% set states = country.fetchStates() %}
+{% set optionsOnly = post('country_unique_id') %}
+
+{% if optionsOnly %}
+    <option></option>
+    {% for state in states %}
+        <option value="{{ state.id }}" {{ state.id == stateId ? 'selected'}}>{{ state.name }}</option>
+    {% endfor %}
+{% else %}
+    <select
+        id="{{ uniqueId }}"
+        name="state_id"
+        class="form-select"
+    >
+        <option></option>
+        {% for state in states %}
+            <option value="{{ state.id }}" {{ state.id == stateId ? 'selected'}}>{{ state.name }}</option>
+        {% endfor %}
+    </select>
+{% endif %}