source/import_documentation/Components/Solid-Form-Search.rst

+.. _solid-form-search:
+solid-form-search
+=================
+
+Allows you to filter the contents of a component that uses the ``filter-mixin`` such as ``solid-display`` or ``solid-map``.
+This must have a ``filtered-by`` attribute set to the id of the current ``solid-form-search``.
+
+.. 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>
+
+
+Mixins
+------
+
+This component uses the following mixins:
+
+   * :ref:`widget-mixin <widget-mixin>`
+
+Please check their documentation to know more about their capabilities.
+
+
+Specific attributes
+-------------------
+
+``fields``
+~~~~~~~~~~
+   List of fields used to perform the search.
+
+   More details on its use below (in **widget-mixin attributes**).
+
+.. _label-field-sfs:
+``label-[field]``
+~~~~~~~~~~~~~~~~~
+   When displaying a form, the default labels are the fields names of the model.
+   If you want something fancier, you can set this attribute.
+   i.e. ``label-username="Your name"``
+
+.. _submit-button-sfs:
+``submit-button``
+~~~~~~~~~~~~~~~~~
+   *Available from version 0.13*
+
+   Text of the submit button to create in the search form. If the attribute is not defined,
+   no button will be added and the form will trigger the search on change.
+
+.. _class-submit-button-sfs:
+``class-submit-button``
+~~~~~~~~~~~~~~~~~~~~~~~
+   Define the ``class`` of the ``div`` containing the submit button.
+   
+.. _range-field-sfs:
+``range-[field]``
+~~~~~~~~~~~~~~~~~
+   URL of a container which list the accepted values
+   for the field ``[field]``. It’s particularly useful with a dropdown or multipleselect
+   field.
+
+.. _enum-field-sfs:
+``enum-[field]``
+~~~~~~~~~~~~~~~~
+   *Available from version 0.13*
+
+   List of values of your choice for the field ``[field]``. 
+   They have to be filled manually and must be separated by commas. 
+   It’s particularly useful with a dropdown or radio field.
+
+   Two formats are possible:
+      * ``enum-[field]="value1, value2, value3"`` : each value will be displayed 
+      and loaded in value attribute
+      
+      * ``enum-[field]="value1 = a, value2 = b, value3 = c"``: each value will be displayed 
+      and "a", "b", "c" will be loaded in value attribute.
+
+.. _start-value-field:
+``start-value-[field]``
+~~~~~~~~~~~~~~~~~~~~~~~
+   *Available from version 0.15*
+
+   Allows to define the value of the first ``<input>`` to filter data.
+   Only usable with ``solid-form-rangedate`` and ``solid-form-rangenumber``.
+   In ``solid-form-rangedate``, it can be defined to ``today``.
+
+.. _end-value-field:
+``end-value-[field]``
+~~~~~~~~~~~~~~~~~~~~~
+   *Available from version 0.15*
+
+   Allows to define the value of the second ``<input>`` to filter data.
+   Only usable with ``solid-form-rangedate`` and ``solid-form-rangenumber``.
+   In ``solid-form-rangedate``, it can be defined to ``today``.
+
+.. _autocomplete-field-sfs:
+``autocomplete-[field]``
+~~~~~~~~~~~~~~~~~~~~~~~~
+   *Available from version 0.15*
+
+   Equal to the value ``off``, it cancels the automatic entry of values in the relevant ``[field]``.
+   It can be added to ``inputs``, ``textarea`` and ``select``.
+
+.. _search-placeholder-field:
+``search-placeholder-[field]``
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+   *Available from version 0.17*
+
+   Allows to modify "searchPlaceholder" displayed in the search bar (from SlimSelect plugin).
+   Its value by default is "Search" in English, "Rechercher" in French.
+   **It works only with the autocompletion feature.**
+
+.. _search-text-field:
+``search-text-[field]``
+~~~~~~~~~~~~~~~~~~~~~~~
+   *Available from version 0.17*
+
+   Allows to modify "searchText" displayed when no value is found (from SlimSelect plugin).
+   Its value by default is "No result" in English, "Aucun résultat" in French.
+   **It works only with the autocompletion feature.**
+
+   .. code:: html
+
+      <solid-form-search
+         id="filter-multiselectautocomp"
+         fields="skills"
+         widget-skills="solid-form-multipleselect-autocompletion-placeholder"
+         placeholder-skills="Please, pick a value"
+         search-text-skills="Nothing found"
+         search-placeholder-skills="Searching..."
+      ></solid-form-search>
+      <solid-display
+         data-src="data/list/users.jsonld"
+         fields="username, skills"
+         multiple-skills
+         filtered-by="filter-multiselectautocomp"
+      ></solid-display>
+
+.. _auto-range-field:
+``auto-range-[field]``
+~~~~~~~~~~~~~~~~~~~~~~~
+   *Available from version 0.17*
+
+   Dynamically populates a dropdown based on the values of the ``solid-display``(s) associated.
+   For each ``solid-display``, it will look for its ``field`` values, and add them to the dropdown.
+   Each value is displayed only once.
+   ``field`` can target a ``container`` or a ``resource``.
+
+   In this example below, ``auto-range-skills ``attribute catches all skill values for all users in the ``data-src`` `data/list/users` and displays in the dropdown all skills once :
+   
+   .. code:: html
+
+      <solid-form-search
+         id="filter-autorange"
+         fields="skills"
+         auto-range-skills
+      ></solid-form-search>
+      <solid-display
+         data-src="data/list/users.jsonld"
+         fields="username, skills"
+         multiple-skills
+         filtered-by="filter-autorange"
+      ></solid-display>
+
+
+Mixin attributes
+-----------------
+
+**From widget-mixin :**
+
+.. include:: ../Mixins/widget-mixin.rst
+   :start-line: 18
+
+
+Widgets
+-------
+By default, the widget used is ``<solid-form-label-text>``. Cf the 
+:ref:`Widget <reference>` page for more info.
+
+
+Events
+-------
+
+``formChange``
+~~~~~~~~~~~~~~
+   Triggered when the form values change

source/import_documentation/Components/Solid-Form.rst

+.. _solid-form:
+solid-form
+==========
+
+The `solid-form` component serves dual purposes: editing existing resources 
+and creating new resources within a container.
+
+
+Editing a Resource
+-------------------
+
+The `solid-form` component receives the URL of a resource via its `data-src` attribute 
+and displays a form for editing the resource.
+
+.. code:: html
+
+   <solid-form data-src="http://example.com/resource/123/"></solid-form>
+
+
+Creating a Resource
+-------------------
+
+If provided with the URL of a container of resources, the `solid-form` component displays 
+a form for creating a new resource and adding it to the container.
+
+.. code:: html
+
+   <solid-form data-src="http://example.com/container/"></solid-form>
+
+
+Mixins
+------
+
+This component uses the following mixins:
+   * :ref:`next-mixin <next-mixin>`
+   * :ref:`store-mixin <store-mixin>`
+   * :ref:`validation-mixin <validation-mixin>`
+   * :ref:`widget-mixin <widget-mixin>`
+
+Please refer to their documentation for more details about their capabilities.
+
+
+Specific attributes
+-------------------
+
+.. _autocomplete-field-sf:
+``autocomplete-[field]``
+~~~~~~~~~~~~~~~~~~~~~~~~
+   *Available from version 0.15*
+
+   When set to ``off``, it disables the automatic entry of values in the specified ``[field]``. 
+   This attribute can be added to ``inputs``, ``textarea`` and ``select``.
+
+
+.. _autosave:
+``autosave``
+~~~~~~~~~~~~
+   *Available from version 0.16*
+
+   If this attribute is defined, each change in an input will trigger a request to update the resource.
+   This attribute works only when editing resources, not creating them.
+
+
+.. _class-submit-button-sf:
+``class-submit-button``
+~~~~~~~~~~~~~~~~~~~~~~~
+Define the ``class`` of the ``div`` containing the submit button.
+
+
+.. _enum-field-sf:
+``enum-[field]``
+~~~~~~~~~~~~~~~~
+   *Available from version 0.13*
+
+   Specifies a list of values for the specified ``[field]``.
+   These values must be be filled manually and separated by commas. 
+   This is particularly useful for dropdown or radio fields.
+
+   Two formats are possible:
+      * ``enum-[field]="value 1, value 2, value 3"`` : each value will be displayed 
+      and loaded in value attribute
+      
+      * ``enum-[field]="value1 = a, value2 = b, value3 = c"``: each value will be displayed 
+      and "a", "b", "c" will be loaded in value attribute.
+
+
+``fields``
+~~~~~~~~~~
+   Specifies the list of fields used to create the form. By default, all fields are used. 
+   More details can be found in the **widget-mixin attributes** section
+
+
+.. _label-field-sf:
+``label-[field]``
+~~~~~~~~~~~~~~~~~
+   When displaying a form, the default labels are the field names of the model.
+   To customize a label, use this attribute, i.e. ``label-username="Your name"``
+
+
+.. _max-field:
+``max-[field]``
+~~~~~~~~~~~~~~~
+   Specifies the maximum value for the specified ``[field]``.
+   This attribute works only with ``solid-form-number`` and ``solid-form-time`` widgets.
+
+
+.. _maxlength-field:
+``maxlength-[field]``
+~~~~~~~~~~~~~~~~~~~~~
+   *Available from version 0.16*
+
+   Specifies the maximum number of characters that can be typed for the specified  ``[field]``.
+   This attribute works only with ``solid-form-text``, ``solid-form-email`` or ``solid-form-password`` and ``solid-form-textarea`` widgets.
+
+
+.. _min-field:
+``min-[field]``
+~~~~~~~~~~~~~~~
+   Specifies the minimum value for the specified ``[field]``.
+   This attribute works only with ``solid-form-number`` and ``solid-form-time`` widgets.
+
+
+.. _minlength-field:
+``minlength-[field]``
+~~~~~~~~~~~~~~~~~~~~~
+   *Available from version 0.16*
+
+   Specifies the minimum number of characters that can be typed for the specified ``[field]``.
+   This attribute works only with ``solid-form-text``, ``solid-form-email`` or ``solid-form-password`` and ``solid-form-textarea`` widgets.
+
+
+.. _naked:
+``naked``
+~~~~~~~~~
+   When set, this attribute removes the submit button. This is particularly useful to prevent the nested forms to
+   display their own submit button.
+
+
+.. _order-asc-field:
+.. _order-desc-field:
+``order-asc-[field]`` or ``order-desc-[field]``
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+   Specifies the field used to order the range list ``[field]``.
+   i.e. ``order-asc-users="username"``
+
+
+.. _partial:
+``partial``
+~~~~~~~~~~~
+   Use this attribute when the form does not include all the fields of the resource that you want to update. 
+   This indicates that only the provided fields should be updated, leaving the unspecified fields unchanged.
+
+
+.. _pattern-field:
+``pattern-[field]``
+~~~~~~~~~~~~~~~
+   *Available from version 0.13*
+
+   ASpecifies a regular expression to validate the input's value for the specified ``[field]``.
+   This attribute works only with a ``solid-form-text`` widget.
+
+
+.. _range-field-sf:
+``range-[field]``
+~~~~~~~~~~~~~~~~~
+   Specifies the URL of a container that lists the accepted values for the specified ``[field]``. 
+   This is particularly useful with a dropdown field.
+
+
+.. _required-field:
+``required-[field]``
+~~~~~~~~~~~~~~~~~~~~
+   Makes the specified ``[field]`` required by adding the ``required`` attribute to the input.
+
+
+.. _step-field:
+``step-[field]``
+~~~~~~~~~~~~~~~~
+   *Available from version 0.16*
+
+   Specifies the stepping interval number for the specified  ``[field]`` based on the ``min-[field]`` value. This attribute works with:
+      -  ``solid-form-time`` widget : The value is given in seconds (default value is 60).
+      -  ``solid-form-number`` widget : The default value is 1.
+
+.. _submit-button-sf:
+``submit-button``
+~~~~~~~~~~~~~~~~~
+   Specifies the text of the form's submit button.
+
+
+.. _title-field:
+``title-[field]``
+~~~~~~~~~~~~~~~~~
+   *Available from version 0.13*
+
+   Adds extra information about the specified ``[field]``.
+   This attribute works only with a ``solid-form-text`` widget.
+
+
+.. _upload-url-field:
+``upload-url-[field]``
+~~~~~~~~~~~~~~~~~~~~~~
+   Specifies the URL to upload a file for the specified ``[field]``. This attribute automatically sets
+   ``widget-[field]`` to ``solid-form-file`` if not defined.
+   This is particularly useful with a dropdown field.
+ 
+
+
+Mixin attributes
+-----------------
+
+**From next-mixin :**
+
+.. include:: ../Mixins/next-mixin.rst
+   :start-line: 21
+
+**From store-mixin :**
+
+.. include:: ../Mixins/store-mixin.rst
+   :start-line: 21
+   :end-before: Events
+
+**From validation-mixin :**
+
+.. include:: ../Mixins/validation-mixin.rst
+   :start-line: 17
+
+**From widget-mixin :**
+
+.. include:: ../Mixins/widget-mixin.rst
+   :start-line: 18
+
+
+Widgets
+-------
+By default, the widget used is ``<solid-form-label-text>``. Cf the 
+:ref:`Widget <reference>` page for more info.
+
+
+Events
+-------
+
+``formChange``
+~~~~~~~~~~~~~~
+   Triggered when the form values change
+
+``save``
+~~~~~~~~~~~~~~
+   Triggered when the response of the submit has been received successfully

source/import_documentation/Components/Solid-Lang.rst

+.. _solid-lang:
+solid-lang
+==========
+
+Displays a button to set the language of the application.
+
+.. code:: html
+
+   <solid-lang lang="is" data-label="Icelandic"></solid-lang>
+
+
+It uses the ``selectLanguage`` method from the :ref:`store <selectLanguage>`.
+
+Attributes
+----------
+
+``lang``
+~~~~~~~~~~~~
+   Code of the language.
+
+``data-label``
+~~~~~~~~~~~~~~
+   Text to display on the button.

source/import_documentation/Components/Solid-Map.rst

+.. _solid-map:
+solid-map
+=========
+
+Receives the URL of a resource or of a container of resources via its
+``data-src`` attribute, and displays it on a **map**. Here is the list
+of fields needed to display the resources properly:
+
+-  ``http://www.w3.org/2003/01/geo/wgs84_pos#lat``: latitude on which the resource will be displayed
+-  ``http://www.w3.org/2003/01/geo/wgs84_pos#lng``: longitude on which the resource will be displayed
+
+``lat`` and ``lng`` properties are added to the default context to map
+respectively ``http://www.w3.org/2003/01/geo/wgs84_pos#lat`` and ``http://www.w3.org/2003/01/geo/wgs84_pos#lng``.
+
+
+Mixins
+------
+
+This component uses the following mixins:
+
+  * :ref:`counter-mixin <counter-mixin>`
+  * :ref:`filter-mixin <filter-mixin>`
+  * :ref:`grouper-mixin <grouper-mixin>`
+  * :ref:`list-mixin <list-mixin>`
+  * :ref:`next-mixin <next-mixin>`
+  * :ref:`store-mixin <store-mixin>`
+  * :ref:`widget-mixin <widget-mixin>`
+
+
+Please check their documentation to know more about their capabilities.
+
+
+Specific attributes
+-------------------
+
+Like for ``solid-display``, fields can be displayed and filters or searching capabilities can be
+added to interact with the list of data being displayed.
+
+``fields``
+~~~~~~~~~~
+  List of the fields to display in a popup which opens when a marker is clicked. If the attribute is not defined, no popup will show up.
+
+  More details on its use below (in **widget-mixin attributes**).
+
+``clustering``
+~~~~~~~~~~~~~~
+  *Available from version 0.16*
+
+  If this attribute is defined, markers spacially close are grouped in clusters.
+
+
+Mixin attributes
+-----------------
+
+**From counter-mixin :**
+
+.. include:: ../Mixins/counter-mixin.rst
+    :start-line: 17
+
+**From filter-mixin :**
+
+.. include:: ../Mixins/filter-mixin.rst
+    :start-line: 18
+
+**From grouper-mixin :**
+
+.. include:: ../Mixins/grouper-mixin.rst
+    :start-line: 18
+
+**From list-mixin :**
+
+.. include:: ../Mixins/list-mixin.rst
+    :start-line: 25
+
+**From next-mixin :**
+
+.. include:: ../Mixins/next-mixin.rst
+    :start-line: 21
+
+**From store-mixin :**
+
+.. include:: ../Mixins/store-mixin.rst
+    :start-line: 21
+    :end-before: Events
+
+**From widget-mixin :**
+
+.. include:: ../Mixins/widget-mixin.rst
+    :start-line: 18
+
+
+Events
+-------
+
+``resourceSelect``
+~~~~~~~~~~~~~~~~~~~
+   Triggered when a marker is clicked on the map
+
+Useful links: 
+---------------
+  To find latitude and longitude: https://www.latlong.net/
\ No newline at end of file

source/import_documentation/Components/Solid-Router.rst

+.. _solid-router:
+solid-router
+============
+
+This is a series of web component respecting both the web components
+standards and the Linked Data Platform convention. They are aimed at
+enabling anyone with little development skills to create their own web
+application by placing these components in an HTML file.
+
+An full app example can be found in index.html:
+
+Initialization
+--------------
+
+You first need to load the webcomponents polyfill for the browsers that
+have not implemented them yet, and import the components you want to use
+in your HTML file:
+
+.. code:: html
+
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-loader.js"></script>
+    <script type="module" src="https://unpkg.com/@startinblox/router@latest"></script>
+
+Then you can use the new tags in your markup, for instance:
+``<solid-router>``. More details on each component in the following
+section.
+
+Usage
+-----
+
+Displays a menu and handle the navigation for you.
+
+.. code:: html
+
+    <solid-router
+        default-route="list"
+        route-prefix="my-app"
+        use-hash
+    >
+        <solid-route name="list">List</solid-route>
+        <solid-route name="form">Form</solid-route>
+        <solid-route name="detail">Details</solid-route>
+    </solid-router>
+
+``<solid-router>`` attributes:
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+-  ``default-route``: The ``name`` attribute of the default
+   ``<solid-route>`` displayed.
+-  ``route-prefix``: If you app is not run from the root of your
+   domain name, for instance ``www.your-domain.com/some-uri``, you
+   should set ``route-prefix`` to ``"some-uri"``.
+-  ``use-hash``: If you can't rewrite the URLs on your server, you
+   might want to set this attribute to use ``location.hash`` instead of
+   ``location.pathname`` as URLs.
+-  ``keep-url``: It freezes the URL of all the ``<solid-route>`` included. Usefull to freeze the URL when a pop-up is displayed.
+
+``<solid-route>`` attributes:
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+-  ``use-id``: indicates that the route takes an id.
+-  ``name``: The name of the route. Must match the ``data-view`` of the view
+   that is to be displayed. The same name is used as a url identifier as
+   well.
+-  ``rdf-type``: Can be used as an alternative of ``name``. The
+   route will be activated if a resource with the given type is passed
+   to the router.
+-  ``active``: This attribute is present on route being displayed by
+   ``<solid-router>``. It is automatically added/removed by
+   ``<solid-router>`` and should not be tinkered manually.
+
+``<div data-view=[name]>`` attributes:
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+-  ``view-title``: allows to change the ``title`` of the page when a user navigates to this view.
+-  ``view-description``: allows to change the ``<meta name="description">`` of the page when the user navigates to this view.
+
+solid-link
+----------
+
+``<solid-link>`` accepts the following attributes:
+
+-  ``next``: The ``name`` attribute of the ``<solid-route>`` you
+   want to access.
+
+-  ``data-src``: The resource you want to use in your view. Often
+   used to show more details about this resource, by adding the
+   ``bind-resources`` attribute to a component (more details about ``bind-resources`` below).
+
+Example:
+
+.. code:: html
+
+    <solid-link next="profile">See profile</solid-link>
+
+solid-analytics
+---------------
+
+Manage browsing statistics.
+
+Sign in on a web analytics service and set ``<solid-analytics>`` inside
+``<body>``, at the begining for example.
+
+``<solid-analytics>`` accepts the following attributes:
+
+-  ``type``: the type of web analytics service used (currently
+   supports ``'matomo'``, ``'google'`` or ``'debug'``).
+-  ``url``: URL of the service. For ``type="google"`` it is not
+   necessary to specify the url attribute.
+-  ``id``: id of the website on the service.
+
+Type ``'debug'`` allow to test solid-analytics. It will display the route
+on the console each time a navigation is triggered.
+
+Example :
+
+.. code:: html
+
+    <solid-analytics type="matomo" url="https://matomo.example.com/" id="1234"></solid-analytics>
+
+Interacting with the router
+---------------------------
+
+``bind-resources`` attribute
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+To associate the currently displayed resource to a component, add the
+``bind-resources`` attribute to it. It will set its ``data-src``
+attribute to the currently displayed resource's URL.
+
+Example:
+
+.. code:: html
+
+   <sib-conversation
+      bind-resources
+   ></sib-conversation>
+
+will result in:
+
+.. code:: html
+
+   <sib-conversation
+      data-src="https://your-domain/your-group-uri/3"
+      bind-resources
+   ></sib-conversation>
+
+In the same way, the ``bind-user`` attribute  can be used to associate the
+currently logged in user to a component and set its ``data-src`` attribute
+accordingly.
+More informations about this in the :ref:`sib-auth documentation<bind-user>`.
+
+Navigate with an event
+~~~~~~~~~~~~~~~~~~~~~~
+
+To trigger a route change through javascript, you can trigger a
+``requestNavigation`` event anywhere on the DOM.
+
+The detail part must have at least one of these two parameters:
+   * ``route``: the name of the route to activate
+   * ``resource``: a resource that will be passed to all elements with the ``bind-resources`` attribute. If no route name is given, the router tries to find a route that has a ``rdf-type`` that matches the type of the resource.
+
+Events
+------
+
+``navigate``
+~~~~~~~~~~~~
+
+This event is triggered whenever a route is activated, after the view is
+displayed.
+
+

source/import_documentation/Components/Solid-Table.rst

+.. _solid-table:
+solid-table
+===========
+
+*Available from version 0.16*
+
+Receives the URL of a resource or of a container of resources via its
+``data-src`` attribute, and displays it in a `table`. Each resource is a line (``<tr>``)
+and each field is a cell (``<td>``).
+
+Like for the ``solid-display``, custom widgets can be specified for each
+field. Filters and searching capabilities can be easily
+added to interact with the list of data being displayed.
+
+.. code:: html
+
+   <solid-table
+      data-src="https://server/users/"
+      fields="first_name, last_name"
+   ></solid-table>
+
+
+Mixins
+------
+
+This component uses the following mixins:
+   * :ref:`counter-mixin <counter-mixin>`
+   * :ref:`federation-mixin <federation-mixin>`
+   * :ref:`filter-mixin <filter-mixin>`
+   * :ref:`grouper-mixin <grouper-mixin>`
+   * :ref:`highlighter-mixin <highlighter-mixin>`
+   * :ref:`list-mixin <list-mixin>`
+   * :ref:`paginate-mixin <paginate-mixin>`
+   * :ref:`required-mixin <required-mixin>`
+   * :ref:`paginate-mixin <server-pagination-mixin>`
+   * :ref:`sorter-mixin <sorter-mixin>`
+   * :ref:`store-mixin <store-mixin>`
+   * :ref:`widget-mixin <widget-mixin>`
+
+Please check their documentation to know more about their capabilities.
+
+
+Specific attributes
+-------------------
+
+``fields``
+~~~~~~~~~~
+   List of fields displayed in the table.
+
+   More details on its use below (in **widget-mixin attributes**).
+
+``header``
+~~~~~~~~~~
+   If defined, adds a header line at the top of the table.
+   You can customize each header by setting a ``label-[field]`` attribute.
+
+``selectable``
+~~~~~~~~~~~~~~
+   If defined, adds checkboxes at the beginning of each line.
+   If the ``header`` attribute is defined, a checkbox will also be added to the headline
+   to select/unselect all the lines.
+
+   You have access to the selected lines in Javascript, like this: 
+
+   .. code:: javascript
+
+      document.querySelector('solid-table').component.selectedLines
+      // returns [ "resourceId1", "resourceId2" ]
+
+``editable-[field]``
+~~~~~~~~~~~~~~~~~~~~
+   Makes a cell editable by creating a solid-form in the cell.
+   This form will be saved automatically when a change is detected.
+
+   You can customize the attributes of the form by setting them like this:
+
+   .. code:: html
+
+      <solid-table
+         data-src="https://server/users/"
+         fields="first_name"
+         editable-first_name
+         widget-first_name="solid-form-placeholder-text"
+         placeholder-first_name="Your First Name"
+      ></solid-table>
+
+
+Mixin attributes
+-----------------
+
+**From counter-mixin :**
+
+.. include:: ../Mixins/counter-mixin.rst
+   :start-line: 17
+
+**From filter-mixin :**
+
+.. include:: ../Mixins/filter-mixin.rst
+   :start-line: 18
+
+**From grouper-mixin :**
+
+.. include:: ../Mixins/grouper-mixin.rst
+   :start-line: 18
+
+**From highlighter-mixin :**
+
+.. include:: ../Mixins/highlighter-mixin.rst
+   :start-line: 17
+
+**From list-mixin :**
+
+.. include:: ../Mixins/list-mixin.rst
+   :start-line: 25
+
+**From paginate-mixin :**
+
+.. include:: ../Mixins/paginate-mixin.rst
+   :start-line: 17
+
+**From required-mixin :**
+
+.. include:: ../Mixins/required-mixin.rst
+   :start-line: 17
+
+**From sorter-mixin :**
+
+.. include:: ../Mixins/sorter-mixin.rst
+   :start-line: 17
+
+**From store-mixin :**
+
+.. include:: ../Mixins/store-mixin.rst
+   :start-line: 21
+   :end-before: Events
+
+**From widget-mixin :**
+
+.. include:: ../Mixins/widget-mixin.rst
+   :start-line: 18
+
+
+Widgets
+-------
+By default, the widget used is ``<solid-display-value>``. Cf the 
+:ref:`Widget <reference>` page for more info.

source/import_documentation/Components/Solid-Widget.rst

+.. _solid-widget:
+solid-widget
+============
+
+Take a ``name`` as an attribute and a HTML template, and create an HTML
+custom element you can use as a widget. i.e.
+
+.. code:: html
+
+   <!-- Your custom widget to display a customer... -->
+   <solid-widget name="my-custom-widget">
+     <template>
+       <h2>Customer name: ${value.name}</h2>
+     </template>
+   </solid-widget>
+
+   <!-- ... used in a solid-display -->
+   <solid-display
+     data-src="http://server/projects/"
+     fields="name, customer"
+     widget-customer="my-custom-widget"
+   ></solid-display>
+
+In a ``solid-widget``, you have access to these values:
+
+-  ``id``: id of the displayed resource
+-  ``value``: all the values of the current resources
+-  ``name``: name of the current field
+-  ``label``: if defined, label of the current field
+-  ``range``: if defined, range of the current field
+
+.. note::
+
+   NB: Do not forget to define your custom template in a ``<template>``
+   tag. Otherwise, your widget will not be declared properly.
+
+Attributes
+----------
+
+``data-holder``
+~~~~~~~~~~~~~~~
+Special attribute which can be inserted in a ``<solid-form>`` or an ``<input>`` within a ``<solid-widget>``.
+
+When set on an element in the widget, it takes the ``value`` of this element and associate it with the ``field`` targetted by the widget.
+
+If this attribute is combined with ``data-src="${value}"`` on a ``<solid-form>`` in a widget, values from the nested resource are directly editable. It works only if ``value`` is a resource (and not if it's a literal).
+
+
+``data-src="${value}"``
+~~~~~~~~~~~~~~~~~~~~~~~
+It is usable to edit a nested resource (ie: a profile of a user, a customer of a project, ...) by creating a ``<solid-form>`` in a ``<solid-widget>``. 
+
+The ``value`` will be the ``@id`` of the nested resource, thus putting it in the ``data-src`` will create a form field on this nested resource.
+
+It cannot be used without ``data-holder`` attribute.
+
+
+The example below illustrates the input widget with and without ``value="${value}"`` 
+(input's ``value="${value}"`` is equivalent to solid-form's ``data-src="${value}"``) :
+
+.. code:: html
+
+  <solid-form
+    data-src="../data/list/users.jsonld"
+    fields="email"
+    widget-email="custom-form-widget-1"
+  ></solid-form>
+  <solid-widget name="custom-form-widget-1">
+    <template>
+      <input type="text" data-holder />
+    </template>
+  </solid-widget>
+
+  <solid-form
+    data-src="../data/list/user-1.jsonld"
+    fields="email"
+    widget-email="custom-form-widget-2"
+  ></solid-form>
+  <solid-widget name="custom-form-widget-2">
+    <template>
+      <input type="text" data-holder value="${value}" />
+    </template>
+  </solid-widget>
+
+.. figure:: ../../_static/images/import_documentation/img-core-examples/data-holder-in-solid-widget.png
+   :alt: solid-widget with and without value="${value}" attribute

source/import_documentation/Components/index.rst

+************
 Components
-==========
+************
 
 .. toctree::
    :maxdepth: 2
    :caption: Components:
 
-   SiB-Ac-Checker
-   Sib-Calendar
-   SiB-Delete
-   SiB-Display
-   SiB-Form
-   SiB-Map
-   SiB-Widget
\ No newline at end of file
+   framework-components
+   official-components
+   community-components
\ No newline at end of file

source/import_documentation/Developping-with-SibTemplateElement.rst

+.. _with-solid-template-element:
+Developing a comoponent with SolidTemplateElement
+================================================
+
+What is SolidTemplateElement?
+---------------------------
+It is a class that can extend your component in order to purify your code of all useless complexity so that you can concentrate on the essential: your functionality.
+
+    .. warning:: 
+        To start this tutorial, you should have followed :ref:`this first part <create-components>`.
+
+What are we going to do?
+-------------------------
+For the example, we are gonna make a simple FAQ component.
+It just displays questions and answers in an accordion and allows the user to submit a new question.
+
+Something like this: 
+
+    .. image:: ./../../_static/images/import_documentation/faq.gif
+        :alt: A FAQ component as example
+
+
+Let's suppose we want to make the recipient's email customizable.
+To obtain this rendering, it would be enough to implement in our html page a component that looked like this: 
+
+.. code:: html
+
+    <solid-faq
+        data-src="https://api.startinblox.com/faqs/"
+        recipient-email="alice@startinblox.com"
+    ></solid-faq>
+
+.. note:: 
+   **Remember the ``data-src`` attribute ?** 
+   This attribute hosts the data source you want to interact with in this component.
+
+.. note:: 
+    **Want to learn more about web components ?** 
+    We recommend this `introduction <https://www.webcomponents.org/introduction>`__.
+
+**Let's start :)**
+
+1. Set the base of you component in a solid-faq.js file
+-----------------------------------------------------
+Create a component that extends SolidTemplateElement. 
+Here is the minimum code your component must contain that extends ``SolidTemplateElement``.
+
+    .. code:: js
+
+        /**
+        * solid-faq.js
+        */
+        // Import SolidTemplateElement
+        import SolidTemplateElement from "https://unpkg.com/@startinblox/core@0.10/dist/solid-template-element.js";
+
+        // Name your component and extend SolidTemplateElement
+        export class SolidFAQ extends SolidTemplateElement {
+
+                constructor() {
+                super();
+            }
+
+            // Define the attributes you want
+            static get propsDefinition() {
+                return {
+                dataSrc: "data-src",
+                recipientEmail: "recipient-email",
+                };
+            }
+
+            // Pass your attributes to your template
+            template({ dataSrc, recipientEmail }) {
+                // If we have no data sources, we display nothing
+                if (!dataSrc) return "";
+                let tmpl = `
+                    <solid-display
+                        data-src="${dataSrc}"
+                        fields="question, answer"
+                        id="faq"
+                    ></solid-display>
+                    `;
+                // Otherwise, set the possibility to submit a question 
+                if (recipientEmail) {
+                tmpl += `
+                    <a href='mailto:${recipientEmail}?subject=A%20new%20question%20for%20the%20FAQ&body=Hi!'>
+                        Your question question not here ?
+                    </a>
+                `;
+                }
+                return tmpl;
+            }
+        }
+
+        customElements.define("solid-faq", SolidFAQ);
+
+
+2. Pay attention to propsDefinition method
+------------------------------------------
+
+You are going to set your attribute in this method. `recipientEmail` is the parameter where we are going to fill in the email of our recipient.
+
+.. code:: js
+
+        static get propsDefinition() {
+            return {
+                dataSrc: 'data-src',
+                recipientEmail: 'recipient-email'
+            }
+        }
+
+.. note:: 
+        Note the syntaxe convention => recipientEmail: 'recipient-email'
+
+3. Let's focus on the template
+-------------------------------
+The template contains the HTML you want to render. Pass your attributes to your template and write it.
+To display the questions and answers, we are going to use :ref:`solid-display <solid-display>`.
+The attributes fields is used to define which datas you want to display from your data source.
+
+We add a conditional rendering: if no email is filled in, the possibility to submit a question is not displayed.
+
+.. code:: js
+
+    // Pass your attributes to your template
+    template({ dataSrc, recipientEmail }) {
+        // If we have no data sources, we display nothing
+        if (!dataSrc) return "";
+        let tmpl = `
+            <solid-display
+                data-src="${dataSrc}"
+                fields="question, answer"
+                id="faq"
+            ></solid-display>
+            `;
+        // Otherwise, set the possibility to submit a question 
+        if (recipientEmail) {
+        tmpl += `
+            <a href='mailto:${recipientEmail}?subject=A%20new%20question%20for%20the%20FAQ&body=Hi!'>
+                Your question question not here ?
+            </a>
+        `;
+        }
+        return tmpl;
+    }
+
+4. Set fake datas
+-----------------
+
+Creating data sources is quite another matter. For the example, we will use static data in `JSON-LD <https://fr.wikipedia.org/wiki/JSON-LD>`__. 
+
+Create a file named ``data-faq.jsonld`` at the root of your project and put these datas:
+
+.. code:: json
+
+    {
+        "@id": "",
+        "@type": "ldp:Container",
+        "ldp:contains": [
+            {
+                "question": "What is Startin'blox ?",
+                "answer": "A cooperative and a technology to build the web of our dreams",
+                "@id": "questions-1",
+                "permissions": []
+            },
+            {
+                "question": "What is the SOLID project ?",
+                "answer": "A set of standards that allows web applications to all speak the same language and become interoperable.",
+                "@id": "questions-2",
+                "permissions": []
+            }
+        ],
+        "permissions": [],
+        "@context": "https://cdn.happy-dev.fr/owl/hdcontext.jsonld"
+    }
+
+.. note:: 
+    If you want to know more about how our API looks like, have a look to `our SOLID introduction <https://docs.startinblox.com/import_documentation/Solid-introduction.html>`__.
+
+5. Implement your component
+-----------------------------
+Import the script of your component and set the component in your ``index.html``.
+
+.. code:: html
+
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <!--Import a custom font-->
+        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet"> 
+        <!--Import the framework-->
+        <script type="module" src="https://unpkg.com/@startinblox/core"></script>
+        <!--Import the component-->
+        <script type="module" src="/solid-faq.js"></script>
+        <title>Solid FAQ Demo</title>
+    </head>
+    <body>
+        <h1>Solid FAQ Demo</h1>
+        <!--Import the component-->
+        <solid-faq
+            data-src="data-faq.jsonld"
+            recipient-email="alice@startinblox.com"
+        ></solid-faq>
+    </body>
+    </html>
+
+6. Test your component
+-----------------------
+
+.. code:: bash
+
+    npm run serve
+
+
+You should be able to display your data but at the moment it's a bit ugly. Let's add some style.
+
+
+4. Implement JS and CSS in your component
+-----------------------------------------
+Create a js file, like ``/js/main.js``.
+
+Add the JS you need to make your accordion work, like this:
+
+.. code:: js
+
+    /**
+    * js/main.js
+    */
+    // Select the component
+    var component = document.getElementById("faq");
+
+    // We use populate event to detect when the component is generated
+    component.addEventListener("populate", (event) => {
+
+        // Seclect each question
+        var acc = document.querySelectorAll("solid-display-value[name='question']");
+        var i;
+
+        for (i = 0; i < acc.length; i++) {
+            //For each question, if we click..
+            acc[i].addEventListener("click", function () {
+            // Add or remove the "active" class
+            this.classList.toggle("active");
+
+            // Select the answer just below the question
+            var panel = this.nextElementSibling;
+            // If the answer is opened, then close it
+            if (panel.style.maxHeight) {
+                panel.style.maxHeight = null;
+            // Otherwise, open it.
+            } else {
+                panel.style.maxHeight = panel.scrollHeight + "px";
+            }
+            });
+        }
+    })
+
+.. note:: 
+    **Did you notice the populate event?** It's an event that allows you to trigger javascript only after the component you want to manipulate has been generated. 
+    See `the Event documentation <https://docs.startinblox.com/import_documentation/Events.html>`__ for more explanation.
+
+Here is the CSS used for the demo:
+
+.. code:: css
+
+    /**
+    * css/main.css
+    */
+
+    body {
+        font-family: 'Montserrat', sans-serif;
+        background-color: #4475B8;
+    }
+    h1{
+        color : white;
+    }
+
+    solid-faq {
+        max-width : 700px;
+    }
+
+    solid-display-value[name='question'] {
+        cursor: pointer;
+        padding: 18px;
+        text-align: left;
+        border: none;
+        outline: none;
+        transition: 0.4s;
+        display : block;
+        background-color: white;
+        color : #4475B8;
+    }
+
+    solid-display-value[name='answer'] {
+        padding: 0 30px;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.2s ease-out;
+        display : block;
+        background-color : #ECECEC;
+        color : #414141;
+        border : 1px #FDD17A solid;
+        line-height: 30px;
+    }
+
+    solid-display-value[name='question']:after {
+        content: '\02795'; 
+        font-size: 13px;
+        float: right;
+        margin-left: 5px;
+    }
+
+    solid-display-value[name='question'].active:after {
+        content: "\2796";   
+    }
+
+    solid-faq solid-display+a{
+        color : white;
+        line-height : 50px ;
+    }
+
+**Use Helper functions**
+
+SiB framework provides you `helpers functions <https://docs.startinblox.com/import_documentation/Helpers-functions.html>`__ to add JS and CSS in your component.
+
+Add at the begin of your ``solid-faq.js``, import your JS and CSS with those functions:
+
+.. code:: js
+
+    ...
+
+    // Import Helper functions
+    import {
+    importCSS,
+    importJS,
+    } from "https://unpkg.com/@startinblox/core@0.10/dist/libs/helpers.js";
+
+    // Use the Helpers functions
+    importJS(`./js/main.js`);
+    importCSS(`/css/main.css`);
+
+    export class SolidFAQ extends SolidTemplateElement {
+
+    ...
+
+**It should be better now, no ?**
+
+    .. image:: ./../../_static/images/import_documentation/faq.gif
+        :alt: A FAQ component as example
+
+
+7. Translate your component
+---------------------------
+
+.. warning::
+    This part is not working and need improvement. You can jump to the step 8 :)
+
+To translate the static strings of your components, follow these steps:
+
+- In your component, create a folder which contains all the translation files. You can name it ``locales`` for example. Inside, create one file per language, with the structure ``[code_language].json``, for example: ``fr.json``.
+- In each file, add one line per string to translate. Your file should look like this:
+
+.. code:: json
+
+    {
+        "label.question": "Your question is not here ?"
+    }
+
+
+- In the constructor of your component, define the path of your folder:
+
+.. code:: js
+
+    // For the demo
+    const base_url = "./"; 
+    // The production url of your component =>
+    //const base_url = "https://path/to/your/component"; 
+
+    export class SolidFAQ extends SolidTemplateElement {
+
+        constructor() {
+            ...
+
+            this.setTranslationsPath(`${base_url}/locales`);
+        }
+
+    ...
+
+    }
+
+- Use the ``localize`` method to show the translated strings in your template:
+
+.. code:: js
+
+    const base_url = "https://unpkg.com/@startinblox/solid-faq"; // url of your component
+
+    export class SolidFAQ extends SolidTemplateElement {
+
+        ...
+
+        template( { dataSrc, recipientEmail } ) {
+            if (!dataSrc) return '';
+            let tmpl = `
+                ...
+                <a href='mailto:p.${recipientEmail}?subject=A%20new%20question%20for%20the%20FAQ&body=Hi!'>
+                    ${this.localize('label.question')}
+                </a>
+            `;
+            return tmpl
+        }
+    }
+
+
+As a developer who uses a component, you can also add you own translation files by targeting you translation folder.
+Like for the component, this folder should contain one file per language:
+
+.. code:: html
+
+    <solid-conversation
+        data-src="./data/conversations.jsonld"
+        extra-translations-path="http://my_app/locales"
+    ></solid-conversation>
+
+
+8. Does it work well?
+---------------------
+
+    .. image:: ./../../_static/images/import_documentation/faq.gif
+        :alt: A FAQ component as example
+
+If you get any trouble (or any idea to improve!), please `mail me <'mailto:alice@startinblox.com?subject=A%20feedback%20from%20the%20doc>`__ :)
+
+.. note::
+    **Document your component!**
+
+    Each time you create a component, remember to document it with a README.md, especially the version of the core with which it was developed. If you create a component by default you will be considered as the maintainer. This means that you are responsible for its future updates but also that you could get support contracts on this component in the future :)
+
+    Releases are posted `here <https://git.startinblox.com/framework/sib-core/-/releases>`__.
+    Subscribe to the newsletter not to miss the next ones! 
+
+
+.. warning::
+    This tutorial could be improved by adding accessibility.
+
+Go Deeper
+==========
+
+Discover other features of the framework playing with `the demo on the website <https://startinblox.com/fr/technology#demo>`__.
+
+
+
+
+

source/import_documentation/Developping-without-SibTemplateElement.rst

+.. _without-solid-template-element:
+Developping component without SolidTemplateElement
+==================================================
+
+This section is coming soon :)
\ No newline at end of file

source/import_documentation/How-to-make-components.rst

-How-to make components
-----------------------
-
-We’ve made `a sib-tutorial
-component <https://git.startinblox.com/components/sib-tutorial>`__. It’s
-very simple exemple to provide you a template to start easily you own.
-
-It’s a skeleton which use ``SIBTemplateElement``. For educational
-purposes, we would like to make a more detail example without our
-template.
-
-It will come soon :)
-
-If with this example, you have some questions left, please `open an
-issue <https://git.startinblox.com/components/sib-tutorial/issues>`__ ou
-ask us on the `community chat <https://community.startinblox.com>`__.
-
-Thanks!

source/import_documentation/Mixins/counter-mixin.rst

+.. _counter-mixin:
+counter-mixin
+=============
+
+The counter mixin is a post-processor mixin, compatible with list-mixin, which provides the ability to show the number of resources of a container.
+
+Used by:
+--------
+
+    * :ref:`solid-display <solid-display>`
+    * :ref:`solid-map <solid-map>`
+
+
+Attributes
+----------
+
+``counter-template``
+~~~~~~~~~~~~~~~~~~~~~
+    Template used to show the number of resources.
+    It takes a string in which you can use HTML
+    tags, and the ``counter`` variable to add the number.
+
+    .. code:: html
+
+        <solid-display
+            data-src="http://server/users/"
+            fields="username"
+            counter-template="<strong>${counter} users here</strong>"
+        ></solid-display>

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