# States

 ### sonic-states displays different states depending on the value of a sub-property of its dataProvider (data-path attribute in dot notation):
 * It loops over its child templates and tests if the regexp contained in the *data-value* attribute matches the value of the property
 * If so, the content of the corresponding template is displayed as a state.
 * If the attribute dataProviderExpression is provided the content is surrounded by a div:
 * The "dataProvider" attribute of this div is the result of calling the replace function on the property value with the regexp and dataproviderExpression as parameters.
 * The subscribers/fetch... of the template will refer to this dataProvider
 * You can also use url-pattern expressions for the route parameters, see the examples
 *
 **Examples**
 * With ma.property= 2 :
 * RegExp data-value = (\d+) and dataproviderExpression = /user/$1 the dataProvider attribute will be "/user/2"
 * url-pattern data-value = :id and dataproviderExpression = /user/:id the dataProvider attribute will be "/user/2

## Basic

<sonic-code>
  <template>
    <div class="flex gap-2 items-center" formDataProvider="states-basic-example">
      <sonic-button radio name="selection" value="#home" checked size="xs">Home</sonic-button>
      <sonic-button radio name="selection" value="#about" size="xs">About</sonic-button>
      <sonic-button radio name="selection" value="#work" size="xs">Work</sonic-button>
      <sonic-button radio name="selection" value="#contact" size="xs">Contact</sonic-button>
    </div>
    <div class="text-center text-neutral-700 border rounded text-4xl  my-6 p-3 ">
    <sonic-states dataProvider="states-basic-example" data-path="selection">
      <template data-value="#home">Home</template>
      <template data-value="#about">About</template>
      <template data-value="#work">Work</template>
      <template data-value="#contact">Contact</template>
    </sonic-states>
    </div>
  </template>
</sonic-code>

## Regexp

When using **capturing groups ()** the stored values are accessible via the **dataProviderExpression**  
**e.g.**, data-value="#couleur_<b class="text-danger">(\d+)</b>" => dataProviderExpression="api/unknown/<b class="text-danger">$1</b>"

<sonic-code>
  <template>
    <div  serviceURL="https://reqres.in">
      <sonic-list formDataProvider="states-regexp-example" fetch dataProvider="api/unknown" key="data" class="flex gap-2 items-center" >
        <template>
          <sonic-button radio size="xs" name="selection" data-bind ::value="#couleur_$id">
            <span data-bind ::inner-html="ucFirst|$name"></span>
          </sonic-button>
        </template>
      </sonic-list>
      <sonic-states dataProvider="states-regexp-example" data-path="selection">
        <template data-value="#couleur_(\d+)" dataProviderExpression="api/unknown/$1">
          <sonic-fetch>
            <input type="color" disabled data-bind ::value="$data.color" class=" w-full h-10 my-3" />
          </sonic-fetch>
        </template>
      </sonic-states>
    </div>
  </template>
</sonic-code>

## Url-pattern

Same as RegExp but using <a href="https://www.npmjs.com/package/url-pattern" target="_blank">url patterns</a>  
**e.g.**, data-value="#couleur_<b class="text-danger">:id</b>" => dataProviderExpression="api/unknown/<b class="text-danger">:id</b>"

<sonic-code>
  <template>
    <div serviceURL="https://reqres.in">
      <sonic-list formDataProvider="states-regexp-example" fetch dataProvider="api/unknown" key="data" class="flex gap-2 items-center" >
        <template>
          <sonic-button radio size="xs" name="selection" data-bind ::value="#couleur_$id">
            <span data-bind ::inner-html="ucFirst|$name"></span>
          </sonic-button>
        </template>
      </sonic-list>
      <sonic-states dataProvider="states-regexp-example" data-path="selection">
        <template data-value="#couleur_:id" dataProviderExpression="api/unknown/:id">
          <sonic-fetch>
            <input type="color" disabled data-bind ::value="$data.color" class=" w-full h-10 my-3" />
          </sonic-fetch>
        </template>
      </sonic-states>
    </div>
  </template>
</sonic-code>