source/import_documentation/Mixins/federation-mixin.rst

+.. _federation-mixin:
+federation-mixin
+================
+
+The federation mixin is a post-processor mixin, compatible with list-mixin.
+
+It provides the ability to fetch all the resources of multiple containers and show them in a single list.
+
+Used by:
+--------
+
+    * :ref:`solid-display <solid-display>`

source/import_documentation/Mixins/filter-mixin.rst

+.. _filter-mixin:
+filter-mixin
+=============
+
+The filter mixin is a post-processor mixin, compatible with list-mixin.
+It provides the ability for the user to dynamically filter a list of resources.
+
+Used by:
+--------
+
+    * :ref:`solid-display <solid-display>`
+    * :ref:`solid-map <solid-map>`
+
+
+Attributes
+----------
+
+``filtered-by``
+~~~~~~~~~~~~~~~
+
+    Target a ``<solid-form-search>`` used to filter current list of resource.
+
+    Example:
+
+    .. code:: html
+
+        <solid-form-search
+            id="my-filter"
+            fields="email"
+            label-email="search by email"
+        ></solid-form-search>
+
+        <solid-display
+            data-src="http://server/users"
+            fields="username, last_name, email"
+            filtered-by="my-filter"
+        ></solid-display>
+
+
+
+``search-fields`` **deprecated**
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+    The properties you want to use to filter the list of resources.
+    You can add multiple fields, separated by a comma.
+
+    In this example, a ``solid-form`` with a ``username`` input and a ``email`` input
+    is created. Each time the user types something in one input, the list is filtered.
+
+    .. code:: html
+
+        <solid-display
+            data-src="http://server/users"
+            fields="username, email, first_name, last_name"
+            search-fields="username, email"
+        ></solid-display>
+
+
+    You can customize the generated ``solid-form`` by adding an attribute which starts by ``search-``.
+    It will be automatically added to the ``solid-form``, without the prefix ``search-``.
+
+        -  ``search-value-[field]``: The default value of ``[field]``
+        -  ``search-label-[field]``: Set the label for ``[field]``
+        -  ``search-widget-[field]``: The form widget of ``[field]``
+        -  ``search-range-[field]``: The range of values of  ``[field]``
+        -  ...
\ No newline at end of file

source/import_documentation/Mixins/grouper-mixin.rst

+.. _grouper-mixin:
+grouper-mixin
+=============
+
+The grouper mixin is a post-processor mixin, compatible with list-mixin.
+It provides the ability to group resources, depending of the values of one of their properties.
+
+Used by:
+--------
+
+    * :ref:`solid-display <solid-display>`
+    * :ref:`solid-map <solid-map>`
+
+
+Attributes
+----------
+
+``group-by``
+~~~~~~~~~~~~
+    The resources will be grouped by the field you give as a parameter.
+
+    In this example, the mixin will render one
+    ``<div>`` for each different date, and put the corresponding resources inside.
+
+    .. code:: html
+
+        <solid-display
+            data-src=http://server/events/"
+            fields="name, date"
+            group-by="date"
+        ></solid-display>
+
+
+    When used with the pagination, each group is paginated.
+
+    You can also use the dot syntax to group by a nested resource. For example, 
+    set the ``group-by`` attribute to ``nested_resource.name``.
+
+``group-widget``
+~~~~~~~~~~~~~~~~
+    *Available from version 0.13*
+    default: ``solid-group-default``
+
+    The name of the widget to use as a group widget.
+    It takes the name of the group as a ``value`` and put content in a ``div[data-content]``.
+    Here is an example of a custom group widget:
+
+    .. code:: html
+
+        <solid-widget name="custom-group">
+            <template>
+                <h2>${value}</h2>
+                <section data-content></section>
+            </template>
+        </solid-widget>
+
+``group-class``
+~~~~~~~~~~~~~~~
+    The name of the class to add on each group widget.
\ No newline at end of file

source/import_documentation/Mixins/highlighter-mixin.rst

+.. _highlighter-mixin:
+highlighter-mixin
+=================
+
+The highlighter mixin is a post-processor mixin, compatible with list-mixin.
+It provides the ability to put some resources at the top of the list, depending of the values of their properties.
+
+Used by:
+--------
+
+    * :ref:`solid-display <solid-display>`
+
+
+Attributes
+----------
+
+``highlight-[field]``
+~~~~~~~~~~~~~~~~~~~~~
+    Put the resource at the top of the list if ``[field]`` is equal to the attribute value.
+
+    In this example, all the users with a ``first_name`` equal to ``pierre`` will be at the beginning of the list.
+
+    .. code:: html
+
+        <solid-display
+            data-src="http://server/users/"
+            fields="first_name"
+            highlight-first_name="pierre"
+        ></solid-display>
+

source/import_documentation/Mixins/list-mixin.rst

+.. _list-mixin:
+list-mixin
+==========
+
+The list mixin provides the ability to display all resources of a container one by one.
+It can make transformations on the list by being combined with some post-processors mixins.
+
+Used by:
+--------
+
+    * :ref:`solid-display <solid-display>`
+    * :ref:`solid-calendar <solid-calendar>`
+    * :ref:`solid-map <solid-map>`
+
+Post-processors:
+----------------
+
+    * :ref:`counter-mixin <counter-mixin>`
+
+
+
+Attributes
+----------
+
+``empty-widget``
+~~~~~~~~~~~~~~~~
+    Name of the widget to display when there is no element in the list.
+
+
+``empty-value``
+~~~~~~~~~~~~~~~
+    Value to pass to the empty widget if the list is empty. It is accessible in ``${value}``
+
+    For example, it can be a route name, which allow to put a link in the widget.
+
+    .. code:: html
+
+        <solid-display
+            data-src="http://server/projects/"
+            fields="name"
+            empty-widget="no-project-widget"
+            empty-value="add-project"
+        ></solid-display>
+
+        <solid-widget name="no-project-widget">
+            <template>
+                <small>No project yet in the list. <solid-link next="${value}">click here to add one</solid-link></small>
+            </template>
+        </solid-widget>
+

source/import_documentation/Mixins/next-mixin.rst

+.. _next-mixin:
+next-mixin
+==========
+
+The next-mixin provides the ability to precise the componant or the page to display after an action.
+
+Used by:
+--------
+
+    * :ref:`solid-display <solid-display>`
+    * :ref:`solid-map <solid-map>`
+    * :ref:`solid-calendar <solid-calendar>`
+    * :ref:`solid-form <solid-form>`
+    * :ref:`solid-delete <solid-delete>`
+
+
+
+Attributes
+----------
+
+``next``
+~~~~~~~~
+    ``name`` attribute of the ``<solid-route>`` that should be accessed when a ``<solid-display>``, ``<solid-map>`` or ``<solid-calendar>`` element is clicked. 
+
+    It can also be used to indicate the ``name`` attribute of the ``<solid-route>`` to reach after :
+
+        * a click on a ``<solid-delete>`` button (only after the resource is correctly deleted);
+        * a click on the submit button in a ``<solid-form>`` (only after the resource is correctly saved).
+
+    See the documentation of ``<solid-router>`` for more details.

source/import_documentation/Mixins/paginate-mixin.rst

+.. _paginate-mixin:
+paginate-mixin
+==============
+
+The paginate mixin is a post-processor mixin, compatible with list-mixin.
+It provides the ability to paginate a list of resources.
+
+Used by:
+--------
+
+    * :ref:`solid-display <solid-display>`
+
+
+Attributes
+----------
+
+``paginate-by``
+~~~~~~~~~~~~~~~
+    The list can be split in pages. The "previous" and "next"
+    buttons and the pages counter will be added automatically.
+
+    In this example, the list will show pages of 5 users.
+
+    .. code:: html
+
+        <solid-display
+            data-src=http://server/users/"
+            fields="username"
+            paginate-by="5"
+        ></solid-display>
+
+
+``paginate-loop``
+~~~~~~~~~~~~~~~~~
+    If this attribute is present, when the user is on the last page, the "Next" button brings back to the first one.
+    Also, when he is on the first page, the "Previous" button brings to the last page.
+
+    Is is particularly useful for creating a carousel.
+
+    .. code:: html
+
+        <solid-display
+            data-src=http://server/features/"
+            fields="name, description"
+            paginate-by="1"
+            paginate-loop
+        ></solid-display>
\ No newline at end of file

source/import_documentation/Mixins/required-mixin.rst

+.. _required-mixin:
+required-mixin
+===============
+
+The required mixin is a post-processor mixin, compatible with list-mixin.
+It provides the ability to display a list of resources according to the property/-ies its possess.
+
+Used by:
+--------
+
+    * :ref:`solid-display <solid-display>`
+
+
+Attributes
+----------
+
+``required-[field]``
+~~~~~~~~~~~~~~~~
+   *Available from version 0.13*
+
+    The attribute takes no value. ``[field]`` represents the mandatory property of resources to be displayed.
+
+    In this example, users must have email to be dislayed.
+
+    .. code:: html
+
+        <solid-display
+            data-src=http://server/users/"
+            fields="username"
+            required-email
+        ></solid-display>
+
+    It is possible to combine this mixin twice, ``required-uvw`` and ``required-[field]``.
\ No newline at end of file

source/import_documentation/Mixins/server-pagination-mixin.rst

+.. _server-pagination-mixin:
+server-pagination-mixin
+================
+
+The server-pagination mixin is a post-processor mixin, which provides the ability to handle the pagination server side, hence reducing the number of resources fetched on first call.
+
+
+Used by:
+--------
+
+    * :ref:`solid-display <solid-display>`
+
+Attributes
+----------
+
+``limit``
+~~~~~~~~~~~~~~~
+    The number of resources to fetch.
+
+    In this example, the list will show pages of 5 users.
+
+    .. code:: html
+
+        <solid-display
+            data-src=http://server/users/"
+            fields="username"
+            limit="5"
+        ></solid-display>
+
+``offset``
+~~~~~~~~~~~~~~~
+    The offset of the first resource to fetch
+
+    In this example, the list will show pages of 5 users, skipping the first ten.
+
+    .. code:: html
+
+        <solid-display
+            data-src=http://server/users/"
+            fields="username"
+            limit="5"
+            offset="10"
+        ></solid-display>
\ No newline at end of file

source/import_documentation/Mixins/sorter-mixin.rst

+.. _sorter-mixin:
+sorter-mixin
+============
+
+The sorter mixin is a post-processor mixin, compatible with list-mixin.
+It provides the ability to sort some resources, depending of the values of one of their properties.
+
+Used by:
+--------
+
+    * :ref:`solid-display <solid-display>`
+
+
+Attributes
+----------
+
+``order-asc`` or ``order-desc``
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+    The name of the field you want to use to order the list.
+
+    To sort in ascending, use ``order-asc``. To sort descending, use ``order-desc``.
+
+    In this example, the users list will be ordered
+    alphabetically based on the username.
+
+    .. code:: html
+
+        <solid-display
+            data-src="http://server/users/"
+            fields="username"
+            order-asc="username"
+        ></solid-display>
+
+``order-by-random``
+~~~~~~~~~~~~~~~~~~~
+    If the attribute is present, the list will be shuffled before being displayed
+
+    .. code:: html
+
+        <solid-display
+            data-src="http://server/users/"
+            fields="username"
+            order-by-random
+        ></solid-display>
+
+``sorted-by``
+~~~~~~~~~~~~~
+
+    *Available from version 0.16*
+
+    Target a ``<solid-form-search>`` used to provide several options for the user to sort current list of resource.
+
+    The ``fields`` attribute of ``<solid-form-search>`` must at least contain ``field``. 
+    ``Field`` attribute contains the fields of the resource to be offered to the user for sorting the data.
+
+    ``Order`` attribute allows you to propose 2 sorting orders: ascending (``asc``) and descending (``desc``). 
+    By default, the order is ascending.
+
+    The ``<solid-display>`` cannot combine ``order-asc`` or ``order-desc`` attribute AND ``sorted-by`` attribute.
+
+    example:
+
+    .. code:: html
+
+        <solid-form-search
+            id="my-sorter"
+            fields="field, order"
+            enum-field="username, email"
+            enum-order="ascending order = asc, descending order = desc"
+        ></solid-form-search>
+
+        <solid-display
+            data-src="http://server/users"
+            fields="username, last_name, email"
+            sorted-by="my-sorter"
+        ></solid-display>
\ No newline at end of file

source/import_documentation/Mixins/store-mixin.rst

+.. _store-mixin:
+store-mixin
+===========
+
+The store mixin allows to fetch a resource or a container from an URI, and
+provides the data to the component.
+
+Used by:
+--------
+
+    * :ref:`solid-display <solid-display>`
+    * :ref:`solid-form <solid-form>`
+    * :ref:`solid-map <solid-map>`
+    * :ref:`solid-calendar <solid-calendar>`
+    * :ref:`solid-ac-checker <solid-ac-checker>`
+
+
+Attributes
+----------
+
+.. _data-src:
+``data-src``
+~~~~~~~~~~~~
+    The uri of the LDP resource you want to fetch and use in the component.
+
+    Each time this attribute is changed, the data is fetched again.
+
+    When the data has been successfuly fetched, the mixin ask the component to render.
+
+.. _nested-field:
+``nested-field``
+~~~~~~~~~~~~~~~~
+    The name of the field of the requested resource to
+    display. Useful when the source url is auto-generated (for instance,
+    with the attribute ``bind-resources``) but you need to display
+    another field of this source.
+
+    The example below illustrates how to use nested-field attribute :
+
+        * The ``profile`` is a resource nested in the current resource, it will automatically fetch the ``city``, ``phone``, ``website`` values to display them.
+        * The second solid-display shows another way to display the values from a nested resource with dot ``.``.
+
+    .. code:: html
+
+        <solid-display
+            data-src="data/list/user-1.jsonld"
+            nested-field="profile"
+            fields="city, phone, website"
+        ></solid-display>
+
+        <solid-display
+            data-src="data/list/user-1.jsonld"
+            fields="profile.city, profile.phone, profile.website"
+        ></solid-display>
+
+.. figure:: ../../_static/images/import_documentation/img-core-examples/nested-field.png
+   :alt: nested-field attribute use
+
+.. _extra-context:
+``extra-context``
+~~~~~~~~~~~~~~~~~
+    The id of the ``<script>`` tag which contains
+    the context you want to add for this component. An extra context
+    looks like this:
+
+    .. code:: html
+
+        <script id="custom-context" type="application/ld+json">
+            { "user": "https://api.test-paris.happy-dev.fr/users/" }
+        </script>
+
+    If your ``<script>`` tag has the attribute ``data-default-context``,
+    this extra context will be applied on all the components which
+    doesn’t have an ``extra-context`` attribute.
+
+.. _loader-id:
+``loader-id``
+~~~~~~~~~~~~~
+    Id of the loader element you want to display during the loading time.
+
+    Exemple of use : 
+
+    .. code:: html
+
+        <section>
+            <h1>Solid-form</h1>
+            <div id="form-loader"  >
+                Loading&#8230;
+            </div>
+            <solid-form 
+                data-src="https://api.startinblox.com/users/"
+                fields= "first_name, last_name, email"
+                label-first_name = "First name"
+                label-last_name = "Last name"
+                label-email = "Email"
+                loader-id = "form-loader">
+            </solid-form>
+        </section>
+
+    .. image:: ./../../_static/images/import_documentation/loader.gif
+        :alt: Exemple of loader
+
+.. _no-render:
+``no-render``
+~~~~~~~~~~~~~
+   *Available from version 0.13*
+
+    While this attribute is present on a component, no data will be fetched.
+    This attribute is automatically removed by the router when the component
+    is in a view which has been activated.
+    This allow to lazy-load components.
+
+
+``store://`` attribute values
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+   *Available from version 0.13*
+
+    This mixin decode all attribute values starting by ``store://resource``, 
+    ``store://container`` or ``store://user`` and replace them by the values fetched 
+    from the store.
+
+    It can be a value fetched from the current resource or the current logged in user (works with ``sib-auth``).
+
+    This example will create a text input filled with the username of the current user:
+
+    .. code:: html
+
+        <solid-form
+            data-src="https://api.startinblox.com/circles/"
+            fields="user"
+            value-user="store://user.username"
+        ></solid-form>
+
+
+    This example will write the name of the circle in the custom field:
+
+    .. code:: html
+
+        <solid-display
+            data-src="https://api.startinblox.com/circles/1/"
+            fields="custom-field"
+            value-custom-field="store://resource.name"
+        ></solid-display>
+
+Events
+------
+
+``populate``
+~~~~~~~~~~~~
+    Fired when the component has rendered.
+
+
+API
+---
+
+- ``component.resource``: returns the Proxy of the current resource
+- ``component.resource.clearCache()`` (async): clears the cache of the store for this resource
+- ``component.resourceId``: returns the id of the current resource

source/import_documentation/Mixins/translation-mixin.rst

+.. _translation-mixin:
+translation-mixin
+=================
+*Available from version 0.17*
+
+The translation mixin provides an automatic translation in elements, depending on the browser language (English and French). Translations are default values, visible if no value is given by an attribute.
+
+The concerned elements are :
+    - the submit-button in :ref:`solid-form <solid-form>`, 
+    - the button in :ref:`solid-delete <solid-delete>`,
+    - the confirmation message from :ref:`validation-mixin <validation-mixin>`,
+    - the text in modal dialog's buttons from :ref:`validation-mixin <validation-mixin>`,
+    - :ref:`search-placeholder-[field] <search-placeholder-[field]>` and :ref:`search-text-[field] <search-text-[field]>` attributes available with ``autocompletion`` feature (SlimSelect plugin) from :ref:`widget API reference <reference>`.
+
+Used by:
+--------
+
+    * :ref:`store-mixin <store-mixin>`
+    * :ref:`validation-mixin <validation-mixin>`
\ No newline at end of file

source/import_documentation/Mixins/validation-mixin.rst

+.. _validation-mixin:
+validation-mixin
+================
+*Available from version 0.16*
+
+The validation mixin creates a modal dialog before deleting or submitting data.
+
+Used by:
+--------
+
+    * :ref:`solid-delete <solid-delete>`
+    * :ref:`solid-form <solid-form>`
+
+Attributes
+----------
+
+.. _confirmation-type:
+``confirmation-type``
+~~~~~~~~~~~~~~~~~~~~~
+    It is a prerequisite and can take two options : 
+
+        - ``confirm``: to access to a basic modal dialog.
+        - ``dialog``: to get a ``<dialog>`` more customizable.
+
+.. _confirmation-message:
+``confirmation-message``
+~~~~~~~~~~~~~~~~~~~~~~~~
+    Message displayed in the modal dialog (``confirm`` or ``dialog`` type).
+    The message by default is "Please, confirm your choice" in English, "Merci de confirmer votre choix" in French.
+
+
+
+**The attributes below only concern ``dialog`` type.**
+
+.. _confirmation-submit-text:
+``confirmation-submit-text``
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+    Text displayed on the submit button (by default, "Ok" in English, "Oui" in French).
+
+.. _confirmation-cancel-text:
+``confirmation-cancel-text``
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+    Text displayed on the cancel button (by default "Cancel" in English, "Annuler" in French).
+
+.. _confirmation-submit-class:
+``confirmation-submit-class``
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+    Submit button class name (undefined by default).
+
+.. _confirmation-cancel-class:
+``confirmation-cancel-class``
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+    Cancel button class name (undefined by default).
+
+
+    Some examples of the use of validation mixin attributes :
+
+    .. code:: html
+
+        <solid-delete
+            data-src="http://server/user/"
+            confirmation-type="confirm"
+            confirmation-message="Thank you to confirm the data deletion."
+        ></solid-delete>
+
+        <solid-form
+            data-src="../data/list/events.jsonld"
+            confirmation-type="dialog"
+            confirmation-message="Are you sure you want to create this event ?"
+            confirmation-submit-text="Yes, I am"
+            confirmation-submit-class="submit-button"
+            confirmation-cancel-class="cancel-button"
+        ></solid-form>
+
+.. _confirmation-widget:
+``confirmation-widget``
+~~~~~~~~~~~~~~~~~~~~~~~
+    *Available from version 0.17*
+
+    Allows to insert a widget in the modal dialog, instead of ``confirmation-message`` (confirmation-widget prevails over confirmation-message).
+    The widget can contain a ``<solid-display>`` to display data from the resource concerned.
+
+    Example of confirmation-widget attribute use :
+
+    .. code:: html
+
+        <solid-widget name="confirm-delete-widget">
+            <template>
+                <div>
+                    <p>Are you sure to delete <strong><solid-display fields="name" data-src="${value}" style="display:inline-block"></solid-display></strong> ? </p>
+                </div>
+            </template>
+        ></solid-widget>
+
+        <solid-delete
+            data-src="http://server/user/"
+            confirmation-type="dialog"
+            confirmation-widget="confirm-delete-widget"
+        ></solid-delete>

source/import_documentation/Mixins/widget-mixin.rst

+.. _widget-mixin:
+widget-mixin
+============
+
+The widget mixin allows to create a widget in the DOM for each properties of a resource, and set its value.
+
+Used by:
+--------
+
+    * :ref:`solid-display <solid-display>`
+    * :ref:`solid-form <solid-form>`
+    * :ref:`solid-form-search <solid-form-search>`
+    * :ref:`solid-map <solid-map>`
+    * :ref:`solid-table <solid-table>`
+
+
+Attributes
+----------
+
+.. _fields:
+``fields``
+~~~~~~~~~~
+    The ordered list of fields to be displayed, separated by commas.
+
+    By default, all the fields of the resource are used.
+
+    To not show any fields, put an empty fields (eg.
+    ``<solid-display fields />)``.
+
+    By default, all displayed fields are inserted into a ``<div>``.
+
+    It is possible to use the dot ``.`` to display data from a nested resource.
+
+    **Sets**
+
+    To group fields within a ``<div>`` tag, enclose some fields in parenthesis.
+
+    In this example, a ``<div name="fullName">`` will be created, and it will contain
+    the widgets of the first name and the last name of the user.
+
+    .. code:: html
+
+        <solid-display
+            data-src="http://server/users/1/"
+            fields="fullName(first_name, last_name), email"
+        ></solid-display>
+
+    Make sure you don’t give your set the same name as a field as it would result in an infinite loop.
+    
+    You can customize the group widget, see the :ref:`Sets widgets <reference>` page for more info.
+
+    **Strings**
+
+    To display static strings in the fields list, put it inside quotes.
+
+    .. code:: html
+
+        <solid-display
+            data-src="http://server/users/1/"
+            fields=" 'Email: ', email "
+        ></solid-display>
+
+    It will create a ``<span>`` element filled with the text ``Email: ``.
+
+
+.. _value-field:
+``value-[field]``
+~~~~~~~~~~~~~~~~~
+   To display a string not contained within the data.
+
+    .. code:: html
+
+        <solid-display
+            fields="title"
+            value-title="My custom and static title"
+        ></solid-display>
+
+.. _default-field:
+``default-[field]``
+~~~~~~~~~~~~~~~~~~~
+    Value displayed for ``[field]`` when it’s empty or not defined.
+
+.. _widget-field:
+``widget-[field]``
+~~~~~~~~~~~~~~~~~~
+   The widget to be used to display the ``[field]``. This widget can be:
+
+   - A core widget. More informations on the :ref:`widget reference <reference>` page.
+   - A custom widget. More informations on the :ref:`solid-widget <solid-widget>` page.
+   - A native HTML tag (ie: ``h1``). The value will be inserted as text content of the tag.
+
+.. _default-widget:
+``default-widget``
+~~~~~~~~~~~~~~~~~~
+   The widget to use for all the fields, except if a specific one is defined for a field.
+
+.. _default-widget-field:
+``default-widget-[field]``
+~~~~~~~~~~~~~~~~~~~~~~~~~~
+   The widget displayed by default if the ``[field]`` is empty.
+
+.. _action-field:
+``action-[field]``
+~~~~~~~~~~~~~~~~~~
+    Displays a link with a ``<solid-link>`` tag with the current resource as ``data-src`` and 
+    the value of the attribute as ``next``.
+
+.. _link-text-field:
+``link-text-[field]``
+~~~~~~~~~~~~~~~~~~~~~
+    *Works only with solid-display-link(-mailto/tel/blank) and solid-action*
+    *Available from version 0.18*
+
+    Modify the displayed value as link in :
+
+    - ``<a>`` for solid-display-link,
+    - ``<solid-link>`` in solid-action.
+
+.. _src-field:
+``src-[field]``
+~~~~~~~~~~~~~~~
+    Defines the ``data-src`` in the solid-link created by the ``action-[field]`` attribute.
+
+.. _label-field-wm:
+``label-[field]``
+~~~~~~~~~~~~~~~~~
+   Set the label for the ``[field]``.
+
+.. _placeholder-field:
+``placeholder-[field]``
+~~~~~~~~~~~~~~~~~~~~~~~
+    Set the placeholder for the ``[field]``.
+
+.. _class-field:
+``class-[field]``
+~~~~~~~~~~~~~~~~~
+    Set the class applied to the widget of the ``[field]`` or the set.
+
+.. _editable-field-wm:
+``editable-[field]``
+~~~~~~~~~~~~~~~~~~~~
+    *Works only with display widgets*
+
+    Add an “edit” button next to the ``[field]`` to let the user edit it.
+    The changes are saved as soon as the field loses focus.
+
+    The editable attribute works with the following templates:
+
+    - ``display-div``
+    - ``display-link``
+    
+    .. code:: html
+
+        <solid-display
+            data-src="http://server/users/1/"
+            fields="name"
+            widget-name="solid-display-div"
+            editable-name
+        ></solid-display>
+
+.. _alt-field:
+``alt-[field]``
+~~~~~~~~~~~~~~~
+    *Works only with solid-display-img*
+
+    Set the alt for the field ``[field]``.
+
+.. _empty-set:
+``empty-[set]``
+~~~~~~~~~~~~~~~
+    *Available from version 0.17*
+
+    Name of the widget to display when all the fields in ``[set]`` are empty.
+
+.. _empty-set-value:
+``empty-[set]-value``
+~~~~~~~~~~~~~~~~~~~~~
+     *Available from version 0.17*
+     
+    Value to pass to the empty widget if all fields in ``[set]`` are empty. It is accessible in ``${value}``
+
+    .. code:: html
+
+        <solid-display
+            data-src="http://server/users/"
+            fields="fullname(first_name, last_name)"
+            empty-fullname="no-name-widget"
+            empty-fullname-value="add-name"
+        ></solid-display>
+
+        <solid-widget name="no-name-widget">
+            <template>
+                <small>No fullname filled in. <solid-link next="${value}">click here to add one</solid-link></small>
+            </template>
+        </solid-widget>
+
+.. _multiple-field:
+``multiple-[field]``
+~~~~~~~~~~~~~~~~~~~~
+    Allows to display the container ``[field]`` nested in the current resource.
+
+    It takes a container URI as a value, fetch all the resources
+    of this container and display them.
+
+    Multiple widget can be specified, example:
+    ``multiple-skills="my-custom-multiple-widget"``. If argument is used
+    without value, default multiple widget is used.
+
+
+    It can be used in :
+
+    - ``solid-display``: a nested ``solid-display`` will be created with the container URI as data-src. 
+    All attributes of the form ``multiple-[field]-[attribute]`` are transfered
+    on the nested ``solid-display`` as ``[attribute]``.
+    For example, to choose the fields you want to display, you can set:
+    ``multiple-[field]-fields="name, @id"``
+
+    .. code:: html
+
+        <solid-display
+            data-src="http://server/users/1/"
+            fields="skills"
+            multiple-skills
+            multiple-skills-fields="name"
+        ></solid-display>
+
+    - ``solid-form`` : all the resources of the container are displayed in a text widget.
+    Buttons are automatically created to add and remove elements.
+
+    For ``solid-form`` only :
+
+- ``multiple-[field]-add-label`` : Text of the “+” button used to add an element  
+
+- ``multiple-[field]-remove-label`` : Text of the “x” button used to remove an element  
+
+*Available from version 0.18*
+
+- ``multiple-[field]-add-class`` : Class of the “+” button used to add an element
+
+- ``multiple-[field]-remove-class`` : Class of the “x” button used to remove an element  
\ No newline at end of file

source/import_documentation/Use-a-component-alone-in-an-existing-application.rst

-Initialization
-==============
+Add a component to a website
+****************************
+   Use Startin'blox according to your needs.
 
-If you have already an application and you want to add a Sib
-Compoponent, it’s very easy.
+Startin'blox was designed to be modular. You need to add a calendar or a map to your website? 
+SiB allows you to add functionality in a few minutes, with the minimum of skills.
 
-1. Import the core of Startin’blox
-----------------------------------
+Here, we will see how to add a Startin'blox component to an existing HTML page. You can follow the steps with your own website, or with an empty HTML page for practice.
 
-To start, simply import the core in your head tag:
+No need for complicated tools or installations: to follow this section, you just need an internet connection and a minute of your time.
 
-.. code:: html
+1. Import the core of Startin’blox
+----------------------------------
 
-   <script type="module" src="https://unpkg.com/@startinblox/core"></script>
 
-It enables you to use Startin’blox technology and all the main
-components from the core of the framework.
 
 2. Import the component you want
 --------------------------------
@@ -23,47 +21,53 @@ In the documentation of the component you’ve chosen, you’ll find the
 script to import.
 
 .. code:: html
-
-   <script type="module" src="https://unpkg.com/@startinblox/my-component"></script>
+   
+      <!-- ... Import the core ... -->
+      <script type="module" src="https://unpkg.com/@startinblox/core"></script>
+      <!-- ... Import your component ... -->
+      <script type="module" src="https://unpkg.com/@startinblox/my-sib-component"></script>
+   </head>
 
 3. Use your component
 ---------------------
 
-A component is a simple tag. Each component has its own attributes that
-allow us to customize its behavior.
+A component is a simple tag with attributes that allow us to customize its behavior.
+
+The main interest of startin'blox is to be able to plug to your component the data sources of your choice. It can be public data sources or your own data sources.
+
+=> `How to create your own data sources <How-to-make-components/>`__
 
-Let’s see an exemple with sib-display :
+Each component has its own documentation where you'll fine the script import and its use.
 
 .. code:: html
 
-   <sib-display
-     data-src="http://api.myadress.com/users/"
-     fields="first_name, last_name"
-   ></sib-display>
+   <sib-component
+     data-src="http://api.myadress.com/sources/"
+     fields="attribute_X, attribute_Y"
+   ></sib-component>
+
+
+That's it!
+
+Now all you have to do is stylize it :)
+
+
+
+Are you in some kind of trouble?
+--------------------------------
+   There are to kind of component : **the officials ones** and **the community ones**.
+
+If the component you have a problem with is an official component, `ask the Startin'blox team for help <https://community.startinblox.com/>`__!
+
+If it is a Community component, in the readme.md of the component should give you the address of the maintainer. You can contact them directly.
+
+If the component does not quite meet your expectations, you can also propose your variation.
+
+=> `See how to develop components <How-to-make-components/>`__.
 
-This code will retrieve the data from the uri assigned to the data-src
-attribute and display all fields present in the field attribute. See the
-full explanation on `the doc of SiB Display <Components/SiB-Display>`__.
 
-Default component available in the core
----------------------------------------
 
-By importing the Startin’blox core, the following main components are
-available :
 
--  `SiB Display <Components/SiB-Display>`__ - To display datas
--  `SiB Form <Components/SiB-Form>`__ - To display a form
--  `SiB Delete <Components/SiB-Delete>`__ - To delete datas
--  `SiB Ac Checker <Components/SiB-Ac-Checker>`__ - To manage permission
--  `Sib Widget <Components/SiB-Widget>`__ - To custom your rendering
--  `SiB Calendar <Components/SiB-Calendar>`__ - To display a calendar
--  `SiB Map <Components/SiB-Map>`__ - To display a map
 
-Imagine your components !
--------------------------
 
-There is `a tutorial <./How%20to%20make%20components%20?>`__ to learn
-how to create your own components.
 
-If you have any difficulties, don’t hesitate to ask people on `our
-chat <community.startinblox.com>`__ :)

source/import_documentation/Widgets/Examples.rst

+.. _widgets-examples:
+
+Examples
+=========
+
+Common widgets
+--------------
+
+Here is a few examples of widgets use. First, there is the HTML using Startin'blox and then, the displayed result in a webpage.
+
+All the values from ``<solid-display>`` are displayed with and without widget.
+
+solid-display-img
+~~~~~~~~~~~~~~~~~
+
+.. code:: html
+
+   <solid-display
+      data-src="data/list/user-1.jsonld"
+      fields="notimage, image"
+      value-notimage="https://images.unsplash.com/photo-1621359729423-dcbdbac348fb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
+      value-image="https://images.unsplash.com/photo-1621359729423-dcbdbac348fb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
+      widget-image="solid-display-img"
+      alt-image="pink flowers"
+   ></solid-display>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-img.png
+   :alt: Widget solid-display-img
+
+
+solid-display-link
+~~~~~~~~~~~~~~~~~~
+
+.. code:: html
+
+   <solid-display
+      data-src="data/list/user-1.jsonld"
+      fields="notlink, link"
+      value-notlink="https://startinblox.com/fr/"
+      value-link="https://startinblox.com/fr/"
+      widget-link="solid-display-link"
+    ></solid-display>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-link.png
+   :alt: Widget solid-display-link
+
+
+solid-display-link-mailto
+~~~~~~~~~~~~~~~~~~~~~~~~~
+
+.. code:: html
+
+   <solid-display
+      data-src="data/list/user-5.jsonld"
+      fields="email"
+   ></solid-display>
+
+   <solid-display
+      data-src="data/list/user-5.jsonld"
+      fields="email"
+      widget-email="solid-display-link-mailto"
+   ></solid-display>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-mailto.png
+   :alt: Widget solid-display-link-mailto
+
+
+solid-display-value-date
+~~~~~~~~~~~~~~~~~~~~~~~~
+
+.. code:: html
+
+   <solid-display
+      data-src="data/list/event-1.jsonld"
+      fields="date"
+   ></solid-display>
+
+   <solid-display
+      data-src="data/list/event-1.jsonld"
+      fields="date"
+      widget-date="solid-display-value-date"
+   ></solid-display>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-date.png
+   :alt: Widget solid-display-value-date
+
+
+solid-form-radio
+~~~~~~~~~~~~~~~~
+range attribute
+
+.. code:: html
+
+   <solid-form
+      data-src="data/list/event-1.jsonld"
+      fields="contact"
+      widget-contact="solid-form-radio"
+      range-contact="data/list/users.jsonld"
+   ></solid-form>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-radio.png
+   :alt: Widget solid-form-radio
+
+solid-form-dropdown
+~~~~~~~~~~~~~~~~~~~
+enum attribute
+
+.. code:: html
+
+   <solid-form
+      data-src="data/list/event-1.jsonld"
+      fields="personnes"
+      widget-personnes="solid-form-dropdown"
+      enum-personnes="Sacha, Camille, Charlie, Lou"
+   ></solid-form>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-dropdown.png
+   :alt: Widget solid-form-dropdown
+
+solid-form-textarea-label
+~~~~~~~~~~~~~~~~~~~~~~~~~
+
+.. code:: html
+
+   <solid-form
+      data-src="data/list/event-1.jsonld"
+      fields="description"
+      widget-description="solid-form-textarea-label"
+   ></solid-form>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-textarea.png
+   :alt: Widget solid-form-textarea-label
+
+solid-form-text-placeholder
+~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+.. code:: html
+
+   <solid-form
+      data-src="./data/list/users.jsonld"
+      fields="first_name"
+      widget-first_name="solid-form-text-placeholder"
+      placeholder-first_name="Enter your name"
+   ></solid-form>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-placeholder.png
+   :alt: Widget solid-form-text-placehoder
+
+solid-form-text-label
+~~~~~~~~~~~~~~~~~~~~~
+
+.. code:: html
+
+   <solid-form
+      data-src="./data/list/users.jsonld"
+      fields="first_name"
+      widget-first_name="solid-form-text-label"
+      label-first_name="First name :"
+   ></solid-form>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-label.png
+   :alt: Widget solid-form-text-label
+
+solid-set-div
+~~~~~~~~~~~~~
+
+.. code:: html
+
+   <solid-display
+      data-src="data/list/users.jsonld"
+      fields="name(first_name, ' - ' ,last_name, ' - ', username)"
+      widget-name="solid-set-div"
+   ></solid-display>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-set.png
+   :alt: Widget solid-set-div
+
+*The border is applied on solid-set-div*
+
+solid-action
+~~~~~~~~~~~~
+
+A classic example of solid-action use is a list of resources (users here) with only one field displayed and the possibility to access additionnal informations by clicking on "User details" :
+
+.. code:: html
+
+   <solid-display
+      data-src="data/list/users.jsonld"
+      fields="name, details"
+      value-details="User details"
+      label-name="Name :"
+      widget-name="solid-display-value-label"
+   ></solid-display>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-action.png
+   :alt: Basic solid-display
+
+This is the solid-display with action attribute and link-text-[field] attribute use to replace the basic value-[field] from above.
+
+.. code:: html
+
+   <solid-display
+      data-src="data/list/users.jsonld"
+      fields="name, details"
+      label-name="Name :"
+      widget-name="solid-display-value-label"
+      action-details="user-details"
+      link-text-details="User details"
+   ></solid-display>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-action2.png
+   :alt: Widget solid-action
+
+By adding a router, a route and another view, clicking on the solid-action displays the view (dotted border): 
+
+.. code:: html
+
+   <solid-router use-hash>
+      <solid-route
+         hidden
+         use-id
+         name="user-details"
+      ></solid-route>
+   </solid-router> 
+
+   <solid-display
+      data-src="data/list/users.jsonld"
+      fields="name, details"
+      label-name="Name :"
+      widget-name="solid-display-value-label"
+      action-details="user-details"
+      link-text-details="User details"
+   ></solid-display>
+
+   <div data-view="user-details" hidden>
+      <solid-display
+         bind-resources
+         fields="first_name, last_name, username, email"
+      ></solid-display>
+   </div>
+
+.. figure:: ../../_static/images/import_documentation/widgets-examples/widget-action3.png
+    :alt: Widget solid-action with view
+
+
+Step-by-step widget creation
+----------------------------
+
+Create your widget
+~~~~~~~~~~~~~~~~~~
+
+To display a field in a ``div`` tag, create your widget like this:
+
+   - ``solid-``: all the widgets of the core start with ``solid`` keyword
+   - ``display-``: to use the display directory of templates
+   - ``div``: to use the ``div`` template
+
+Which gives us:
+
+.. code:: html
+
+   <solid-display
+      bind-resource
+      fields="name"
+      widget-name="solid-display-div"
+   ></solid-display>
+
+This code generates:
+
+.. code:: html
+
+   <solid-display
+      bind-resource
+      fields="name"
+      widget-name="solid-display-div"
+   >
+      <!-- auto generated part -->
+      <div>
+         <solid-display-div name="name" value="John Doe">
+            <div name="name">John Doe</div>
+         </solid-display-div>
+      </div>
+      <!-- /auto generated part -->
+   </solid-display>
+
+
+Add a feature
+~~~~~~~~~~~~~~~
+
+If you want to add a label, just add ``-label`` to your widget name
+
+.. code:: html
+
+   <solid-display
+      bind-resource
+      fields="name"
+      widget-name="solid-display-div-label"
+   >
+      <!-- auto generated part -->
+      <div>
+         <solid-display-div-label name="name" value="John Doe">
+            <label>name</label>
+            <div name="name">John Doe</div>
+         </solid-display-div-label>
+      </div>
+      <!-- /auto generated part -->
+   </solid-display>
+
+
+Mix keyword order
+~~~~~~~~~~~~~~~~~
+
+You can mix the order of the keywords, for the same result. For example, you can replace ``solid-display-div-label`` by ``solid-label-div-display``:
+
+.. warning::
+
+   Be careful because the generated widget will also have the name you give him. It can also have impact on CSS if you target widgets by their names.
+
+
+.. code:: html
+
+   <solid-display
+      bind-resource
+      fields="name"
+      widget-name="solid-label-div-display"
+   >
+      <!-- auto generated part -->
+      <div>
+         <solid-label-div-display name="name" value="John Doe">
+            <label>name</label>
+            <div name="name">John Doe</div>
+         </solid-label-div-display>
+      </div>
+      <!-- /auto generated part -->
+   </solid-display>
+
+
+Customize the label
+~~~~~~~~~~~~~~~~~~~
+
+To customize the label, you can set the ``label-name`` attribute on the ``solid-display``
+
+.. code:: html
+
+   <solid-display
+      bind-resource
+      fields="name"
+      widget-name="solid-label-div-display"
+      label-name="User name:"
+   >
+      <!-- auto generated part -->
+      <div>
+         <solid-label-div-display name="name" value="John Doe">
+            <label>User name:</label>
+            <div name="name">John Doe</div>
+         </solid-label-div-display>
+      </div>
+      <!-- /auto generated part -->
+   </solid-display>
+
+
+Handle multiples
+~~~~~~~~~~~~~~~~
+
+In the case of a form, you may have to handle a field where you need to add or delete values. It can be done like this:
+
+.. code:: html
+
+   <solid-form
+      bind-user
+      fields="skills"
+      multiple-skills
+   ></solid-form>
+
+As ``skills`` is a container, you will see each line as a text input, containing the id of the resource.
+You will also have the ability to add or remove lines. The default multiple widget used is ``solid-form-multiple``.
+
+
+Add a dropdown
+~~~~~~~~~~~~~~
+
+If you want to limit the selection of the skills to a list, add a ``range-skills`` attribute.
+
+.. code:: html
+
+   <solid-form
+      bind-user
+      fields="skills"
+      multiple-skills
+      range-skills="http://ldpserver/skills"
+   ></solid-form>
+
+Your text inputs will be replaced by dropdowns showing the available options.
+
+
+Customize the multiple widget
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+If you need to have only one dropdown to select multiple values, you can change the multiple widget:
+
+.. code:: html
+
+   <solid-form
+      bind-user
+      fields="skills"
+      multiple-skills="solid-form-multipleselect"
+      range-skills="http://ldpserver/skills"
+   ></solid-form>
+
+Like for other widgets, you can choose to add features by adding them to the widget name.
+The following example will add a label before the widget, and initialize the SlimSelect plugin used for autocompletion.
+
+.. code:: html
+
+   <solid-form
+      bind-user
+      fields="skills"
+      multiple-skills="solid-form-multipleselect-autocompletion-label"
+      range-skills="http://ldpserver/skills"
+   ></solid-form>
+

source/import_documentation/Widgets/Reference.rst

+.. _reference:
+
+Widgets API Reference
+=====================
+
+Widgets are tools that allow to choose, precise how to display data.
+
+They are created at the moment you ask for it for the first time.
+The name of the widget is analyzed to build a widget which uses the features and template you want.
+
+Here is a schema of how it works:
+
+.. figure:: ../../_static/images/import_documentation/Widgets-API-Developers.png
+   :alt: Widget API 1
+
+``solid-[type]-[template]-[features]``
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+Its name must begin by "**solid-**", followed by at least a ``type`` (except for ``default`` type) and a ``template``, and eventually one or several ``features``.
+
+*All the keywords must be separated by an hyphen``-``, it is recommended to keep that order (to harmonise widget names writing).*
+
+``type``
+++++++++
+
+It refers to the "kind" of data to display :
+
+- ``display`` refers to a display formatting,  
+- ``form`` to display a form element (``<input>``, ``<textarea>``, ``<select>``, etc),
+- ``set`` to precise how to display values of fields in :ref:`sets <widget-mixin>`.
+ 
+It will select the directory of template to use.
+
+
+``template``
+++++++++++++
+Name of the template to use.
+
+Each type has several templates. They specify how to use or display the value(s) and/or to indicate the HTML tag to use.
+
+Available templates :
+
+-  ``display`` directory
+
+   -  ``value``: displays ``value`` directly in the widget tag.
+   -  ``div``: displays ``value`` inside a ``<div>`` tag.
+   -  ``link``: displays ``value`` as an ``href`` attribute in a ``<a>`` tag.
+   -  ``img``: displays ``value`` as a ``src``  attribute in a ``<img>`` tag.
+   -  ``boolean``: displays label (or name) in a ``<label>`` tag if ``value  == true``.
+
+-  ``form`` directory
+
+   -  ``text``: set ``value`` in an ``<input>`` of type ``text``.
+   -  ``textarea``: set ``value`` in a ``<textarea>``.
+   -  ``richtext``: set ``value`` in an ``<div>`` and initialize a light rich text editor by using ``Quill``.
+   -  ``checkbox``: create a checkbox, which is checked if ``value == true``.
+   -  ``email``: set ``value`` in an ``<input>`` of type ``email``.
+   -  ``date``: set ``value`` in an ``<input>`` of type ``date``.
+   -  ``rangedate``: set 2 values in 2 ``<input>`` of type ``date``. Used for filtering with min and max. 
+      Possible to add ``start-value-[field]`` and ``end-value-[field]`` attributes to set min and max values. Date format to follow : "YYYY-MM-DD". Each attribute accepts ``today`` as value.
+   -  ``number``: set ``value`` in an ``<input>`` of type ``number``.
+   -  ``rangenumber``: set 2 values in 2 ``<input>`` of type ``number``. Used for filtering with min and max. 
+      Possible to add ``start-value-[field]`` and ``end-value-[field]`` attributes to set min and max values.
+   -  ``hidden``: set ``value`` in an ``<input>`` of type ``hidden``. If you need to use a boolean or numeric value you can add a ``bool`` or 
+      ``num`` mixin (ie: ``solid-form-hidden-bool``).
+   -  ``dropdown``: set ``value`` in a ``<select>``. The list is provided via the ``range`` attribute, which expects a container’s URL, or via the ``enum`` attribute, which takes a list of the values separated by commas.
+   -  ``radio``: set ``value`` in a list of radio buttons. The list is provided via the ``range`` attribute, which expects a container’s URL, or via the ``enum`` attribute, which takes a list of the values separated by commas.
+   -  ``multiple``: Accept a container URI as a ``value``, and inserts one widget per resource with a “remove” button for each widget, and an “add” button.
+   -  ``multipleselect``: Accept a container URI as a ``value``, and inserts a dropdown widget with the ``multiple`` attribute.
+   -  ``checkboxes``: Accept a container URI as a ``value``, allow to select multiple values with in a list of checkbox inputs. The list is provided via the ``range`` attribute, which expects a container’s URL, or via the ``enum`` attribute, which takes a list of the values separated by commas.
+   -  ``file``: Inserts an ``<input/>`` and an ``<input type="file"/>``.
+      When a file is selected it’s uploaded, URL of file is returned by request and set as the ``<input/>`` value.
+      The upload URL is provided via the ``upload-url`` attribute.
+   -  ``image``: Works like ``file`` but allow only images in the input, and create a preview of the image when selected by the user.
+   -  ``color``: set ``value`` in an ``<input>`` of type ``color``.
+   -  ``password``: set ``value`` in an ``<input>`` of type ``password``.
+   -  ``time``: set ``value`` in an ``<input>`` of type ``time``. The format value is ``hh:mm``.
+
+-  ``set``
+
+   -  ``default``: inserts widgets directly in the set tag.
+   -  ``div``: inserts widgets in a ``<div>`` tag.
+   -  ``ul``: inserts widgets in a ``<ul>`` tag.
+
+-  **default** (no type keyword defined)
+
+   -  ``action``: Displays a link inside a ``<solid-link>`` tag with ``src`` for the ``data-src`` attribute,
+      ``value`` for the ``next`` attribute and ``link-text`` as text content.
+   -  ``multiple``: insert a ``solid-display`` with the ``@id`` of a container as ``data-src``.
+      The fields to display are chosen with the ``multiple-[field name]-fields`` attribute.
+
+
+``features``
+++++++++++++
+They allows to modify the behavior or the display of the widget. It is possible to add one or several features to the widget's name :
+
+-  ``label``: adds a ``label`` before the template. Uses the attribute ``name`` if ``label`` is not defined.
+-  ``labellast``: adds a ``label`` after the template. Uses the attribute ``name`` if ``label`` is not defined.
+-  ``autocompletion``: initializes the ``SlimSelect`` plugin. Works only with ``dropdown`` and ``multipleselect`` templates.
+-  ``autolink``: analyzes widget content, and transforms all links in anchor.
+-  ``mailto``: adds ``mailto:`` at the beginning of an ``href`` attribute. Works only with links.
+-  ``tel``: adds ``tel:`` at the beginning of an ``href`` attribute. Works only with links.
+-  ``blank``: adds an attribute ``target="_blank"``. Works only with links.
+-  ``placeholder``: adds a placeholder in the input. Uses the attribute ``name`` or ``label`` if ``placeholder`` is not defined. Works only with input widgets.
+-  ``date``: transforms the value in a date, in the browser’s default locale format.
+-  ``datetime``: transforms the value in a date and time, in the browser’s default locale format.
+-  ``multiline``: shows a value on multiple lines (replace ``\n`` by ``<br>``).
+-  ``markdown``: takes markdown code and displays formatted text. Works only with a display template (value, div, link).
+-  ``addable``: adds a ``<solid-form>`` that allows to add data on the field concerned. 
+   It accepts attributes from :ref:`solid-form <solid-form>` by using ``addable-[field]-[attribute]="value"`` format.
+   If ``addable-data-src`` is not provided, the solid-form will use the URI in ``range-[field]`` as data-src, if declared. 
+-  ``oembed``: displays the video content of an oEmbed link filled with the associated ``value-[field]`` attribute.
\ No newline at end of file

source/import_documentation/about/About-our-components.rst

+.. _about-our-components:
+About our components
+####################
+
+**When you should create a component**
+
+    *A component is a feature*
+    
+    A component is an application service that can be re-used by multiple organizations. You can think about it as an atomic functionality that can be picked and added by people with no technical skills.
+
+    Developers often build components in order to avoid repeating the same piece of code in multiple places. As a developer, why should you make a component when you can have the same functionality with the same amount of code?
+
+    *Because you don't create a component for your technical needs but for the needs of organizations*.
+    *Our components are* **high level components**. *That is to say that it is close to the human understanding of a functionality*.
+
+    Developing with Startin'Blox is an opportunity to shift your perspective regarding who you program for. Instead of thinking just about your own requirements, you're invited to deliver features useful to both your own project and a much broader ecosystem of organizations.
+
+    **Example with a FAQ component**
+    For instance, implementing a collaborative FAQ could be done with little code. Encapsulating them within an FAQ component wouldn't make your code more concise. But it permit you to share the *idea* of a FAQ as a tool of onboarding or knowledge management.
+
+
+    *With components, you share more than code, you share tools for collaboration within and between organizations.*
+
+    So, when you develop a new feature, think about who could use it. If it can be useful to others and there's no similar component already available, make a component so that your work will be easily accessed and used by many!
+
+    **Other example :** 
+    * An interactive map
+    * An agenda
+    * A job board
+    * A skill directory

source/import_documentation/build-existing-app.rst

+How to build a SIB application from sources
+###########################################
+
+Requirements
+============
+
+npm 6.7.0
+
+
+Configure the app
+=================
+Get the code of your app (for the example the SIB App):
+
+.. code-block:: bash
+
+    git clone https://git.happy-dev.fr/startinblox/applications/sib-app.git /tmp/sib_app
+    cd /tmp/sib_app
+
+Create JON file and configure the client to contact the servers:
+
+.. code-block:: json
+
+    {
+      "xmpp": "https://jabber.happy-dev.fr/http-bind/",
+      "authority": "http://api.batman.happy-dev.fr/",
+      "clientName": "Sib App",
+      "authorityName": "batman",
+      "publicDirectory": false,
+      "endpoints": {
+        "circles": "https://api.batman.happy-dev.fr/circles/",
+        "users": "https://api.batman.happy-dev.fr/users/"
+      },
+      "analytics": []
+    }
+
+The parameters are:
+
+.. list-table::
+   :stub-columns: 1 
+
+   * - xmpp 
+     - authority 
+     - authorityName
+     - clientName
+     - endpoints
+   * - the BOSH access of your Prosody's server 
+     - the primary OpenID authority url, for sib-auth
+     - the primary OpenID authority name, for sib-auth
+     - your client name, for sib-auth
+     - api points to the server to contact for each capability
+
+
+
+In this example we are contacting the same server (batman.happy-dev.fr) for all our application capabilities. Because we installed the server with this configuration we know it supports all capabilities we need. But we could point each capability to different servers as long as they support it.
+If you use a local development server, you should use http://localhost:8000/ instead.
+
+Build the client app
+====================
+Create your application bundle:
+
+.. code-block:: bash
+
+    npm run build
+
+The application bundle is in the dist folder, ready to be deployed everywhere as a static file.
+You can serve your application locally (assuming you already have a SIB server setup) to check its behavior:
+
+.. code-block:: bash
+
+    npm run watch
\ No newline at end of file

source/import_documentation/build-full-application.rst

+Build a full app with SiB
+***************************
+
+With the core of the framework and some offical components, we'll be able to build a full app in SiB.
+
+1. Import the core of Startin’blox
+----------------------------------
+
+To start, simply import the core in your HTML file:
+
+.. code-block:: html
+
+        <!-- ... Import the core ... -->    
+        <script type="module" src="https://unpkg.com/@startinblox/core"></script>
+    </head>
+
+
+2. Use core components
+-----------------------
+
+You can now freely use all the component included in the core.
+
+For the example we are going to build a directory.
+
+.. code-block:: html
+
+        <!-- ... Add a form ... -->
+        <sib-form 
+        data-src="https://api.startinblox.com/users/"
+        fields="first_name, last_name, email"
+        ></sib-form>
+
+        <!-- ... Display datas ... -->
+        <sib-display 
+        data-src="https://api.startinblox.com/users/"
+        fields="first_name, last_name, email"
+        ></sib-display>
+     </body>
+
+The form and the display are connected to the same data sources. When you add people by the form, it will be rendered by the display.
+
+=>  `More information about Sib-form <How-to-make-components/>`__
+
+=>  `More information about Sib-display <How-to-make-components/>`__
+
+=>  `See all the core components <How-to-make-components/>`__
+
+
+3. Use official components
+--------------------------
+
+Let's assume we want to add a menu to our app. We're gonna add the router component ``sib-router``
+
+.. code-block:: html
+
+        <!-- ... Import the core ... -->    
+        <script type="module" src="https://unpkg.com/@startinblox/core"></script>
+        <!-- ... Import SiB Router ... -->
+        <script type="module" src="https://unpkg.com/@startinblox/router"></script>
+    </head>
+    <body>
+        <sib-router default-route="users-list" use-hash>
+            <sib-route name="users-list">Show users</sib-route>
+            <sib-route name="user-form">Add a new user</sib-route>
+        </sib-router>
+
+        <section id="user-form">
+            <sib-form 
+            data-src="https://api.startinblox.com/users/"
+            fields="first_name, last_name, email"
+            ></sib-form>
+        </section>
+
+        <section id="users-list">
+            <sib-display 
+            data-src="https://api.startinblox.com/users/"
+            fields="first_name, last_name, email"
+            ></sib-display>
+        </section>
+    </body>
+
+=>  `More information about Sib-Router <How-to-make-components/>`__
+
+=>  `See all the official components <How-to-make-components/>`__
+
+=>  `Try this example in the demo <https://startinblox.com/fr/technology#demo/>`__
+
+=>  `Play with the SiB Builder <https://la-pommeraye.fr/sib-builder//>`__
+
+
+4. Authentication
+-----------------
+
+.. warning::
+    This part is missing
+
+5. Manage permissions
+---------------------
+
+.. warning::
+    This part is missing
+
+
+Something is missing ? 
+
+
+`Let's us know <https://mailto:alice@startinblox.com/>`__ !