@supersoniks/concorde 2.0.7 → 3.0.0

package/{core/components/functional/fetch/fetch.js → src/core/components/functional/fetch/fetch.ts}

@@ -1,22 +1,18 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import Fetcher from "@supersoniks/concorde/core/mixins/Fetcher";
+import { LoaderMode } from "../../ui/loader/loader";
 import { TemplatesContainer } from "@supersoniks/concorde/mixins";
 import { templateContent } from "lit/directives/template-content.js";
+import { DirectiveResult } from "lit/async-directive.js";
 const tagName = "sonic-fetch"; // For Astro.build
 /**
  * ###Fetch charge un contenu via un appel d'api web.
  * Extends mixins : Fetcher, [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page)
- *
+ * 
  * #### Configuration via les attributs
- *
+ * 
  * | nom          | sur quelle balise | Description | Exemple de valeur | défaut / requis |
  * | -------------------------------------------------------------------------------------- |
  * | serviceURL   |Fetcher ou un de ses parents | URL de base des services. | http://la-billetterie.net/api/v2 | domain du site |
@@ -24,10 +20,10 @@ const tagName = "sonic-fetch"; // For Astro.build
  * | dataProvider  |Fetcher ou un de ses parents | Identifiant d'un publisher qui stock les données, voir [subscriber](./?path=/docs/miscallenous-🔔-subscriber--page). | billetterie/user/2 | *REQUIS* |
  * | headersDataProvider  |Fetcher ou un de ses parents | Identifiant d'un publisher qui stock les données destinées à être envoyées en entêtes de la requetes | MyCoockieHEaders | null |
  * | key  |Fetcher  | extrait une sous propriété de la donnée chargée avant de l'assignée à son publisher | ma.data | null |
- *
+ * 
  * *Si la données est `{ma:{data:{a:1,b:2}}}` et `key="ma.data"`, la données disponible dans le composant sera `{a:1, b:2}`*
  
- #### Intégration auto de basic auth (pour tester une api qui nécessite une authentification)
+ #### Intégration auto de basic auth (pour tester une api qui nécessite une authentification) 
  
  * Fetch utilise le service pour générer le token et l'ajoute au header de l'appel qui récupère les données.
 
@@ -42,34 +38,34 @@ const tagName = "sonic-fetch"; // For Astro.build
  * * On peut appeler la methode invalidate() sur le publisher associé au  composant pour declencher le rechargement des données.
  * * endPoint est une propriété réctive, par conséquent, sa modification, manuelle via template ou data binbding provoque la mise à jour du contenu.
  */
-let Fetch = class Fetch extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
-    renderLoader() {
-        if (!(this.isLoading && this.loader !== undefined))
-            return nothing;
-        const loader = this.loader === true || this.loader === "" ? "fixed" : this.loader;
-        return html `<sonic-loader mode=${loader}></sonic-loader>`;
-    }
-    renderSkeleton() {
-        const template = this.templateParts["skeleton"];
-        if (!(this.isLoading && template))
-            return nothing;
-        return templateContent(template);
-    }
-    render() {
-        return html ` ${this.renderSkeleton()} ${this.renderLoader()} ${!this.isLoading ? html `<slot></slot>` : nothing} `;
-    }
-};
-Fetch.styles = [
-    css `
+
+@customElement(tagName)
+export class Fetch extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
+  static styles = [
+    css`
       :host {
         display: contents;
       }
     `,
-];
-__decorate([
-    property()
-], Fetch.prototype, "loader", void 0);
-Fetch = __decorate([
-    customElement(tagName)
-], Fetch);
-export { Fetch };
+  ];
+  @property() loader?: LoaderMode | true | "";
+
+  renderLoader() {
+    if (!(this.isLoading && this.loader !== undefined)) return nothing;
+    const loader =
+      this.loader === true || this.loader === "" ? "fixed" : this.loader;
+    return html`<sonic-loader mode=${loader}></sonic-loader>`;
+  }
+  renderSkeleton() {
+    const template = this.templateParts["skeleton"];
+    if (!(this.isLoading && template)) return nothing;
+    return templateContent(template) as DirectiveResult;
+  }
+
+  render() {
+    return html`
+      ${this.renderSkeleton()} ${this.renderLoader()}
+      ${!this.isLoading ? html`<slot></slot>` : nothing}
+    `;
+  }
+}

package/src/core/components/functional/if/if.md

@@ -0,0 +1,16 @@
+# if / condition
+
+The **sonic-if** component shows its content based on the value of its reactive property names **condition**
+
+<sonic-code>
+  <template>
+<div dataProvider="visibilitySettings" formDataProvider="visibilitySettings">
+  <sonic-checkbox label="Show evacuation plan" name="togglePlan" unique checked value="true"></sonic-checkbox>
+  <sonic-if  data-bind ::condition="$togglePlan" class="mt-4 block">
+  <sonic-image src="https://www.thebaron.info/assets/mail/concorde-evacuation.jpg" rounded="md" ratio="654/463"></sonic-image>
+  </sonic-if>
+</div>
+  </template>
+</sonic-code>
+
+

package/src/core/components/functional/if/if.test.ts

@@ -0,0 +1,40 @@
+import {expect} from "@jest/globals";
+import TestUtils from "@supersoniks/concorde/test-utils/TestUtils";
+import "./if";
+
+function create() {
+  return TestUtils.bootstrap(`<sonic-if>Some Content</sonic-if>`)[0];
+}
+
+test("shows ''Some Content'' condition = true set by property accessor", async () => {
+  const elt: any = create();
+  elt.condition = true;
+  await elt.updated();
+  const renderedText = elt.shadowRoot.children[0].assignedNodes()[0].textContent;
+  expect(renderedText).toBe("Some Content");
+});
+
+test("shows nothing condition = false set by property accessor", async () => {
+  const elt: any = create();
+  elt.condition = false;
+  await elt.updated();
+  const children = Array.from(elt.shadowRoot.children).filter((elt: any) => elt.nodeName.toLowerCase() != "style");
+  const length = children.length;
+  expect(length).toBe(0);
+});
+
+test("shows ''Some Content'' condition = true set by attribute", async () => {
+  const elt: any = create();
+  elt.setAttribute("condition", "");
+  await elt.updated();
+  const renderedText = elt.shadowRoot.children[0].assignedNodes()[0].textContent;
+  expect(renderedText).toBe("Some Content");
+});
+
+test("shows nothing condition not set", async () => {
+  const elt: any = create();
+  await elt.updated();
+  const children = Array.from(elt.shadowRoot.children).filter((elt: any) => elt.nodeName.toLowerCase() != "style");
+  const length = children.length;
+  expect(length).toBe(0);
+});

package/src/core/components/functional/if/if.ts

@@ -0,0 +1,23 @@
+import {css, html, LitElement, nothing} from "lit";
+import {customElement, property} from "lit/decorators.js";
+const tagName = "sonic-if"; // For Astro.build
+/**
+ * Le composant *sonic-if* affiche son contenu dans le slot principal si sa propriété .condition est évaluée à true
+ */
+@customElement(tagName)
+export class SonicIF extends LitElement {
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
+
+  /**
+   * Le contenu s'affiche si la condition est évaluée à true.
+   */
+  @property({type: Boolean}) condition = false;
+  render() {
+    if (!this.condition) return nothing;
+    return html` <slot></slot> `;
+  }
+}

package/src/core/components/functional/list/list.md

@@ -0,0 +1,194 @@
+# List
+
+The **sonic-list** component creates list items.
+
+
+List extends the mixins  [Subscriber](#docs/_core-concept/subscriber.md/subscriber) and Fetcher : 
+* As a Subscriber it as a **props** reactive property (basically an array of data) and its data is associated to a publisher via its dataProvider attribute.
+* List doesn't Fetch by default (see below for activation).
+
+
+## Template
+
+The list component loops over its template children to render each items of its props data.  
+Consider the following example using **2 templates** and **9 items** :    
+- First template will render the first item.  
+- Second template will render the second item.  
+- Then back to the first template and so on and so forth.
+
+Note that for each line there is a dataProvider found at *[list dataProvider name]/liste-item/[line index or key]*
+You can hover the list items in the examples to see it.
+
+<sonic-code>
+  <template>
+     <sonic-list dataProvider="listTemplateExample" class="grid grid-cols-3 gap-4" props='[{"id": "1"}, {"id": "2"}, {"id": "3"}, {"id": "4"}, {"id": "5"}, {"id": "6"}, {"id": "7"}, {"id": "8"}, {"id": "9"}]' debug>      
+     <template>
+        <div class="bg-neutral-100 text-center p-3">
+          <sonic-value key="id"></sonic-value>
+          <div class="text-xs">1st template</div>
+        </div>
+      </template>
+      <template>
+        <div class="bg-neutral-100 text-info text-center p-3">
+          <sonic-value key="id"></sonic-value>
+          <div class="text-xs">2nd template</div>
+        </div>
+      </template>
+    </sonic-list>
+  </template>
+</sonic-code>
+
+
+
+## TemplateKey / data-value
+
+The **templateKey** attribute allows you to bind a template to a props item.  
+Consider the following example :  
+- The list **templateKey** attribute is set to the value **tpl** (any name would do)
+- Items 4,5 and 6 are each one **referencing** a templates with a matching **data-value** attribute
+
+<sonic-code>
+  <template>
+    <sonic-list
+      templateKey="tpl"
+      class="grid gap-3"
+      dataProvider="TemplateKeyExample"
+      props='[
+        {"id":"1", "default": "The first template with no data-value is used"},
+        {"id":"2", "default": "The second template with no data-value is used"},
+        {"id":"3", "default": "Back to the first template with no data-value"},
+        {"id":"4", "tpl":"custom-tpl-danger"},
+        {"id":"5", "tpl":"custom-tpl-info"},
+        {"id":"6", "tpl":"custom-tpl-success"},
+        {"id":"7", "tpl": "Non-valid tpl name, Back to the first template with no data-value"}
+      ]'
+      debug
+    >
+      <template>
+        <div class="p-2 border rounded text-neutral-900">
+          <sonic-value key="id"> : </sonic-value>
+          <b>First</b> template with no <b>data-value</b> attribute
+        </div>
+      </template>
+      <template data-value="custom-tpl-danger">
+        <div class="p-2 border rounded text-danger">
+          <sonic-value key="id"> : </sonic-value>
+          data-value : <b>custom-tpl-danger</b>
+        </div>
+      </template>
+      <template data-value="custom-tpl-info">
+        <div class="p-2 border rounded text-info">
+          <sonic-value key="id"> : </sonic-value>
+          data-value : <b>custom-tpl-info</b>
+        </div>
+      </template>
+      <template data-value="custom-tpl-success">
+        <div class="p-2 border rounded text-success">
+          <sonic-value key="id"> : </sonic-value>
+          data-value : <b>custom-tpl-success</b>
+        </div>
+      </template>
+      <template>
+        <div class="p-2 border rounded text-neutral-400">
+          <sonic-value key="id"> : </sonic-value>
+          <b>Second</b> template with no <b>data-value</b> attribute <br>
+          This one is used if it <b>follows another data-item</b> with <b>no tpl</b> specified in the props
+        </div>
+      </template>
+    </sonic-list>
+  </template>
+</sonic-code>
+
+## Special templates : list item separator / empty list view
+
+A special template with attribute **data-value="separator"** will act as a separator between each list item
+
+<sonic-code>
+  <template>
+    <sonic-list props='[{"id":"1"},{"id":"2"},{"id":"3"}]' dataProvider="ListSeparatorDemo">
+      <template><sonic-value key="id"></sonic-value></template>
+      <template data-value="separator"> 🤜 </template>
+    </sonic-list>
+  </template>
+</sonic-code>
+
+The same principle can be used to handle empty lists using a template with attribute **data-value="no-item"**
+
+
+## Fetch
+
+Enables the list to get data from an external API in order to fill its **props** attribute with an **array of items**
+See the [Fetch] web component(#core/components/functional/fetch/fetch.md/fetch)
+<sonic-code>
+  <template>
+    <sonic-list props='["a", "b", "c"]' debug fetch serviceURL="https://reqres.in" dataProvider="api/users" key="data" class="grid grid-cols-1">
+        <template>
+          <docs-preview-user-item></docs-preview-user-item>
+        </template>
+    </sonic-list>
+  </template>
+</sonic-code>
+
+## Extract Values
+
+Example of using the `extractValues` attribute with a service.
+As in the previous example, the `fetch` attribute indicates that a service call should be made.
+Note that we use:
+* the property `_metadata_` added by the list component to display the key of the extracted value
+* the special property `_self_` that allows targeting the item itself. This is useful here because there is no sub-property; we are directly dealing with a string.
+<sonic-code>
+  <template>
+   <sonic-list
+      debug
+      fetch
+      serviceURL="https://reqres.in"
+      dataProvider="list-extract-values-test"
+      endPoint="api/users/2"
+      key="data"
+      extractValues
+    >
+      <template>
+        <div class="flex items-center">
+          <span data-bind ::inner-html="$_metadata_.key  : " class="bold w-24"></span>
+          <span data-bind ::inner-html="$_self_"></span>
+          <sonic-if data-bind ::condition="|'$_metadata_.key' == 'avatar'">
+            <sonic-image data-bind ::src="$_self_" rounded="full" ratio="1/1" class="w-20 block"></sonic-image>
+          </sonic-if>
+        </div>
+      </template>
+    </sonic-list>
+  </template>
+</sonic-code>
+
+## Additionnal tips
+
+* If the result of the request is an object, it is nested within an array to ensure functionality.
+* The invalidate() method can be called on its publisher to trigger data reloading.
+* Each list item publisher has a "_parent_" property pointing to the list publisher
+
+
+
+<!-- 
+## FormDataProvider
+
+<sonic-alert status="error" background>À déplacer dans la bonne doc</sonic-alert>
+
+<sonic-code>
+  <template>
+  <div formDataProvider="profileInfos">
+    <form>
+      <sonic-fieldset label="Edit profile">
+        <sonic-form-layout>
+          <sonic-input label="First name" type="text" name="first_name" value="Sponge" size="sm"></sonic-input>
+          <sonic-input label="Last name" type="text" name="last_name" value="Bob" size="sm"></sonic-input>
+          <sonic-input label="email" type="email" name="email" value="bob@krustykrab.com" size="sm"></sonic-input>
+          <sonic-input label="Image url" type="text" name="avatar" value="http://www.bobleponge.fr/goodies/avatars/avatar-bob-eponge_Bob-Eponge-coiffure.jpg" size="sm"></sonic-input>
+        </sonic-form-layout>
+      </sonic-fieldset>
+    </form>
+  </div>
+  <sonic-card  dataProvider="profileInfos">
+    <docs-preview-user-item ></docs-preview-user-item>
+  </sonic-card>
+  </template>
+</sonic-code> -->

package/src/core/components/functional/list/list.ts

@@ -0,0 +1,236 @@
+import { html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import Fetcher from "@supersoniks/concorde/core/mixins/Fetcher";
+import { templateContent } from "lit/directives/template-content.js";
+import "@supersoniks/concorde/core/components/ui/loader/loader";
+import "@supersoniks/concorde/core/components/functional/subscriber/subscriber";
+import Objects from "@supersoniks/concorde/core/utils/Objects";
+import TemplatesContainer from "@supersoniks/concorde/core/mixins/TemplatesContainer";
+import { DirectiveResult } from "lit/directive.js";
+import { TemplateContentDirective } from "lit/directives/template-content.js";
+import { TemplateResult } from "lit";
+import { LoaderMode } from "@supersoniks/concorde/core/components/ui/loader/loader";
+const tagName = "sonic-list";
+/**
+ *  ### List boucle sur sa propriété "props" et crée des éléments a partir des données en bouclant également sur ses templates.
+ *
+ * Extends mixins : Fetcher, [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page)
+ *
+ * * Si le composant possède un attribut *fetch*, il charge un contenu via un appel d'api web.<br>
+ * Voir [fetcher](./?path=/docs/core-components-functional-fetch--basic) pour la configuration des autres attributs.
+ * * Chaque élément créé est englobé dans un objet [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page).<br>
+ *  Un dataProvider y est associé a l'adresse suivante *dataProvider-de-la-liste$/*index-de-la-ligne-courante*
+ *  Les données de la ligne sont donc disponible pour les élements internes (subscribers, data-binding)
+ *  * Lors du chargement un objet loader inline est affiché.
+ *  * Si le résultat de la requête est un objet, il est imbriqué dans un tableau pour garantir le fonctionnement.<br>
+ * Cependant, si l'attribut `extractValues` est présent, les valeurs des propriétés de l'objet sont mises dans  dans un tableau pour le rendu.
+ * * La propriété _metadata_ est ajoutés à la donnée de chaque item. Elle contient les informations suivantes :
+ * * key : l'index de l'item dans la liste
+ * * even : true si l'index est pair
+ * * odd : true si l'index est impair
+ * * onlyChild : true si la liste ne contient qu'un seul item
+ * * firstChild : true si l'item est le premier de la liste
+ * * lastChild : true si l'item est le dernier de la liste
+ * * Si la liste ne contient aucun item, le template "no-item" est utilisé si il est défini.
+ * * On peut appler la methode invalidate() sur son publishe pour declencher le rechargement des données
+ * *
+ */
+export type ListItemMetadata = {
+  key?: string;
+  even?: boolean;
+  odd?: boolean;
+  onlyChild?: boolean;
+  firstChild?: boolean;
+  lastChild?: boolean;
+};
+
+@customElement(tagName)
+export class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
+  @property({ type: Object }) itemPropertyMap?: object;
+  /**
+   * La propriété templateKey contient le nom de la propriété qui sera utilisé pour identifier le template à utiliser dans la donnée de la ligne.
+   * Par exemple si templateIdentifier = "name" et que la donnée de la ligne est {name: "myTemplate" ... }, alors le template possédant l'attribut data-value="myTemplate" sera utilisé.
+   */
+  @property({ type: String }) templateKey = "template";
+  /**
+   * La propriété idKey est utilisé repérer les lignes de manière unique si pour les item de la liste item[this.idKey] n'existe pas, alors l'index est utilisé
+   */
+  @property({ type: String }) idKey = "id";
+
+  @property() loader?: LoaderMode | true | "";
+
+  @property() limit = Number.POSITIVE_INFINITY;
+  @property() offset = 0;
+
+  connectedCallback() {
+    this.noShadowDom = "";
+    this.defferedDebug = this.hasAttribute("debug") || null;
+    this.isFetchEnabled = this.hasAttribute("fetch");
+    if (this.isFetchEnabled) this.isLoading = true;
+    super.connectedCallback();
+  }
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+  }
+
+  renderLoader() {
+    if (!(this.isLoading && this.loader !== undefined)) return nothing;
+    const template = this.templateParts["skeleton"];
+    if (template) return nothing;
+    const loader =
+      this.loader === true || this.loader === "" ? "fixed" : this.loader;
+    return html`<sonic-loader mode=${loader}></sonic-loader>`;
+  }
+  renderSkeleton() {
+    const template = this.templateParts["skeleton"];
+    if (!(this.isLoading && template)) return nothing;
+    return templateContent(template) as DirectiveResult;
+  }
+
+  renderLoadingState():
+    | DirectiveResult<typeof TemplateContentDirective>
+    | TemplateResult {
+    return html`${this.renderSkeleton()} ${this.renderLoader()}`;
+  }
+  renderNoResultState() {
+    return html` <div
+      style="color: var(--sc-base-400);
+    font-size: 1.5em;
+    margin: 4rem 0;
+    display: flex;
+    gap: 0.5rem;"
+    >
+      <sonic-icon name="emoji-puzzled" size="lg"></sonic-icon
+      ><span class="sonic-no-result-text"
+        >${typeof this.props === "string" && this.props == ""
+          ? "Aucun résultat"
+          : this.props}</span
+      >
+    </div>`;
+  }
+  formatProps() {
+    let props = this.props;
+    if (props == null) {
+      return null;
+    }
+    const response = props._sonic_http_response_;
+    const extractValues = this.hasAttribute("extractValues");
+    //si props n'est pas un tableau on l'adapte
+    if (!Array.isArray(props)) {
+      if (extractValues) {
+        props = Object.entries(props).map(([k, v]) => ({ key: k, value: v }));
+      } else {
+        if (
+          Objects.isObject(props) &&
+          Object.keys(props).length > 0 &&
+          (!response || response.ok)
+        )
+          props = [props];
+        else {
+          props = [];
+        }
+      }
+    }
+    props = props.filter((e) => e != null);
+    if (response) props._sonic_http_response_ = response;
+    return props;
+  }
+
+  render() {
+    /**
+     * Loading
+     */
+    const isLoadingState = this.isLoading && !Array.isArray(this.props);
+
+    if (isLoadingState) return this.renderLoadingState();
+    /**
+     * Si props est une string on considère qu'il n'y a pas de résultats
+     */
+    const isString = typeof this.props === "string";
+    if (isString) return this.renderNoResultState();
+    /**
+     * si props mal formé ou null on retourne une div vide (nécessaire pour le lazyload)
+     */
+    const propsIsBaddlyFormatted = !Objects.isObject(this.props);
+    if (propsIsBaddlyFormatted) return html`<div></div>`;
+
+    /**
+     * On format les props pour les rendre compatibles avec le fonctionnement du rendu en fonction du paramétrage du composant (cf : "extractValues" )
+     */
+
+    const props = this.formatProps();
+    /**
+     *  On peut définir un template spécifique si le résultat est un tableau vide
+     */
+    if ((props?.length || 0) == 0 && this.templateParts["no-item"]) {
+      return templateContent(this.templateParts["no-item"]);
+    }
+    /**
+     * Rendu des lignes
+     *  */
+    const templateCount = this.templateList.length;
+    let counter = -1;
+    const extractValues = this.hasAttribute("extractValues");
+    const separator = this.templateParts["separator"];
+    const length = props?.length || 0;
+
+    const items = props?.slice(this.offset, this.offset + this.limit);
+
+    return html`
+      ${items?.map((item, index: number) => {
+        if (item == null) return nothing;
+        let templatePart: HTMLTemplateElement | null = null;
+        let key: number | string = index;
+
+        if (typeof item == "object" && !Array.isArray(item)) {
+          const templatePartName = item[this.templateKey];
+          if (templatePartName && typeof templatePartName == "string") {
+            templatePart = this.templateParts[templatePartName];
+          }
+          if (extractValues) key = item?.["key"] as number | string;
+        }
+        if (key == "_sonic_http_response_") return nothing;
+        if (typeof key != "string" && typeof key != "number") return nothing;
+        const isLastChild = index >= length - 1;
+        const indexMod2 = index % 2;
+        const childPublisher = this.publisher[key];
+        /**
+         * Ajout de metatdonnées au publisher de l'enfant
+         */
+        //La prop key est gardée pour le moment pour compatibilité
+        //TODO : supprimer la prop key cquand c'est ok côté covoit.
+        childPublisher._key_ = key + "";
+        childPublisher._metadata_ = {
+          ...childPublisher._metadata_.get(), //Si il y a d'autres données.
+          key: key,
+          even: indexMod2 == 0,
+          odd: indexMod2 == 1,
+          onlyChild: length == 1,
+          firstChild: index == 0,
+          lastChild: isLastChild,
+        };
+        counter++;
+        if (templatePart) counter = -1;
+        return (
+          item &&
+          html`
+            <sonic-subscriber
+              ?debug=${this.defferedDebug === true}
+              .bindPublisher=${function () {
+                return childPublisher;
+              }}
+              .propertyMap?=${this.itemPropertyMap}
+              dataProvider="${this.dataProvider}/list-item/${key}"
+            >
+              ${templatePart
+                ? templateContent(templatePart)
+                : templateContent(this.templateList[counter % templateCount])}
+            </sonic-subscriber>
+            ${separator && !isLastChild ? templateContent(separator) : nothing}
+          `
+        );
+      })}
+    `;
+  }
+}

package/src/core/components/functional/mix/mix.md

@@ -0,0 +1,41 @@
+# Mix
+
+Mix allows you to mix several subsets of dataProvider in a new key/value structure which is itself associated with a new dataProvider. The data update is then bidirectional.
+
+Dot notation is supported to extract a sub-part of the data.
+
+For example, if we declare dataproviders as follows :
+<sonic-code>
+  <template>
+    <sonic-subscriber dataProvider="dataToMixA" props='{"foo":{"bar":2}}'></sonic-subscriber>
+    <sonic-subscriber dataProvider="dataToMixB" props='{"baz":3}'></sonic-subscriber>
+  </template>
+</sonic-code>
+We can rearrange the data as follows
+<sonic-code>
+  <template>
+    <sonic-mix dataProvider="mixedData" composition='{"either":"dataToMixB","orThat":"dataToMixA.foo.bar"}'>
+      <div>Value of dataToMixA.foo.bar and mixedData.orThat : <sonic-value key="orThat"></sonic-value></div>
+      <div>Value of dataToMixB.baz and mixedData.either.baz : <sonic-value key="either.baz"></sonic-value></div>
+    </sonic-mix>
+  </template>
+</sonic-code>
+Then we can change values in both dataProviders programaticaly this way, they will stay in sync
+<sonic-code language="javascript">
+  <template>
+  SonicPublisherManager.get("mixedData").either.baz=6;
+  SonicPublisherManager.get("dataToMixB").baz=8;
+  SonicPublisherManager.get("dataToMixA").foo.bar=8;
+  SonicPublisherManager.get("mixedData").orThat=6;
+  </template>
+</sonic-code>
+Or by using a form element
+<sonic-code>
+<template>
+<sonic-input label="mixedData.orThat" formDataProvider="mixedData" name="orThat"></sonic-input>
+</template>
+</sonic-code>
+
+
+
+