@supersoniks/concorde 2.0.7 → 3.0.1

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

@@ -0,0 +1,87 @@
+# States
+
+ ### sonic-states displays different states depending on the value of a sub-property of its dataProvider (data-path attribute in dot notation):
+ * It loops over its child templates and tests if the regexp contained in the *data-value* attribute matches the value of the property
+ * If so, the content of the corresponding template is displayed as a state.
+ * If the attribute dataProviderExpression is provided the content is surrounded by a div:
+ * The "dataProvider" attribute of this div is the result of calling the replace function on the property value with the regexp and dataproviderExpression as parameters.
+ * The subscribers/fetch... of the template will refer to this dataProvider
+ * You can also use url-pattern expressions for the route parameters, see the examples
+ *
+ **Examples**
+ * With ma.property= 2 :
+ * RegExp data-value = (\d+) and dataproviderExpression = /user/$1 the dataProvider attribute will be "/user/2"
+ * url-pattern data-value = :id and dataproviderExpression = /user/:id the dataProvider attribute will be "/user/2
+
+## Basic
+
+<sonic-code>
+  <template>
+    <div class="flex gap-2 items-center" formDataProvider="states-basic-example">
+      <sonic-button radio name="selection" value="#home" checked size="xs">Home</sonic-button>
+      <sonic-button radio name="selection" value="#about" size="xs">About</sonic-button>
+      <sonic-button radio name="selection" value="#work" size="xs">Work</sonic-button>
+      <sonic-button radio name="selection" value="#contact" size="xs">Contact</sonic-button>
+    </div>
+    <div class="text-center text-neutral-700 border rounded text-4xl  my-6 p-3 ">
+    <sonic-states dataProvider="states-basic-example" data-path="selection">
+      <template data-value="#home">Home</template>
+      <template data-value="#about">About</template>
+      <template data-value="#work">Work</template>
+      <template data-value="#contact">Contact</template>
+    </sonic-states>
+    </div>
+  </template>
+</sonic-code>
+
+## Regexp
+
+When using **capturing groups ()** the stored values are accessible via the **dataProviderExpression**  
+**e.g.**, data-value="#couleur_<b class="text-danger">(\d+)</b>" => dataProviderExpression="api/unknown/<b class="text-danger">$1</b>"
+
+<sonic-code>
+  <template>
+    <sonic-theme theme="light" serviceURL="https://reqres.in">
+      <sonic-list formDataProvider="states-regexp-example" fetch dataProvider="api/unknown" key="data" class="flex gap-2 items-center" >
+        <template>
+          <sonic-button radio size="xs" name="selection" data-bind ::value="#couleur_$id">
+            <span data-bind ::inner-html="ucFirst|$name"></span>
+          </sonic-button>
+        </template>
+      </sonic-list>
+      <sonic-states dataProvider="states-regexp-example" data-path="selection">
+        <template data-value="#couleur_(\d+)" dataProviderExpression="api/unknown/$1">
+          <sonic-fetch>
+            <input type="color" disabled data-bind ::value="$data.color" class=" w-full h-10 my-3" />
+          </sonic-fetch>
+        </template>
+      </sonic-states>
+    </sonic-theme>
+  </template>
+</sonic-code>
+
+## Url-pattern
+
+Same as RegExp but using <a href="https://www.npmjs.com/package/url-pattern" target="_blank">url patterns</a>  
+**e.g.**, data-value="#couleur_<b class="text-danger">:id</b>" => dataProviderExpression="api/unknown/<b class="text-danger">:id</b>"
+
+<sonic-code>
+  <template>
+    <sonic-theme theme="light" serviceURL="https://reqres.in">
+      <sonic-list formDataProvider="states-regexp-example" fetch dataProvider="api/unknown" key="data" class="flex gap-2 items-center" >
+        <template>
+          <sonic-button radio size="xs" name="selection" data-bind ::value="#couleur_$id">
+            <span data-bind ::inner-html="ucFirst|$name"></span>
+          </sonic-button>
+        </template>
+      </sonic-list>
+      <sonic-states dataProvider="states-regexp-example" data-path="selection">
+        <template data-value="#couleur_:id" dataProviderExpression="api/unknown/:id">
+          <sonic-fetch>
+            <input type="color" disabled data-bind ::value="$data.color" class=" w-full h-10 my-3" />
+          </sonic-fetch>
+        </template>
+      </sonic-states>
+    </sonic-theme>
+  </template>
+</sonic-code>

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

@@ -0,0 +1,121 @@
+import {LitElement, html} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import {templateContent} from "lit/directives/template-content.js";
+import {repeat} from "lit/directives/repeat.js";
+import Objects from "@supersoniks/concorde/core/utils/Objects";
+import UrlPattern from "url-pattern";
+import TemplatesContainer from "@supersoniks/concorde/core/mixins/TemplatesContainer";
+import {PublisherInterface, TypeAndRecordOfType} from "@supersoniks/concorde/core/_types/types";
+type UrlPatternExtended = {names: string[]} & UrlPattern;
+
+const tagName = "sonic-states";
+/**
+ * ### sonic-states affiche des états différents en fonction de la valeur d'une sous propriété de son dataProvider (attribut data-path en dot notation):
+ * * Il boucle sur ses template enfants et test si la regexp contenue dans l'attribut *data-value* match la valeur de la propriété
+ * * Si oui le contenu du template correspontant est affiché comme état.
+ * * Si l'attribut dataProviderExpression est fourni le contenu est entouré d'une div :
+ * * L'attribut "dataProvider" de cette div est le resultat de l'appel à la fonction replace sur valeur de la propriété avec comme paramettres la regexp et dataproviderExpression.
+ * * Les subscribers/fetch... du template se réfèrerons à ce dataProvider
+ * * On peut également utiliser les des expressions du type url-pattern pour les paramètres de la route voir les exemples
+ *
+ * **Exemples**
+ * Avec ma.propriete= 2 :
+ * * RegExp data-value = (\d+) et dataproviderExpression = /user/$1 l'attribut dataProvider vaudra "/user/2"
+ * * url-pattern data-value = :id et dataproviderExpression = /user/:id l'attribut dataProvider vaudra "/user/2"
+ *
+ */
+
+@customElement(tagName)
+export class SonicStates extends Subscriber(TemplatesContainer(LitElement)) {
+  @property() state = "";
+  @property({type: Boolean, reflect: true}) inverted = false;
+  statePath = "";
+  onAssign = (value: string) => {
+    this.state = value;
+    this.requestUpdate();
+  };
+  statePublisher?: TypeAndRecordOfType<PublisherInterface<string & object>>;
+  connectedCallback(): void {
+    this.noShadowDom = "";
+    super.connectedCallback();
+    if (this.hasAttribute("data-path")) {
+      this.statePath = this.getAttribute("data-path");
+    }
+    if (this.statePath) {
+      this.statePublisher = this.publisher;
+      const split = this.statePath.split(".");
+      for (const s of split) {
+        this.statePublisher = this.statePublisher[s] as typeof this.statePublisher;
+      }
+      this.statePublisher.onAssign(this.onAssign);
+    }
+  }
+  disconnectedCallback(): void {
+    if (this.statePath) this.statePublisher?.offAssign(this.onAssign);
+    super.disconnectedCallback();
+  }
+  render() {
+    const templates = [];
+    let state = this.state;
+    if ((!Array.isArray(state) && Objects.isObject(state)) || state === undefined) {
+      state = "";
+    }
+    for (const t of this.templatePartsList) {
+      let path = t.getAttribute(this.templateValueAttribute) as string;
+      let stateToMatch = state;
+
+      if (this.inverted) {
+        stateToMatch = path;
+        path = state;
+      }
+      if (path == "") path = this.inverted ? ".*?" : "^$";
+      const regexp = new RegExp(path);
+      if (regexp.test(stateToMatch)) {
+        templates.push(t);
+        t.removeAttribute("mode");
+      } else {
+        const urlPattern = new UrlPattern(path) as UrlPatternExtended;
+        if (urlPattern.names.length > 0 && urlPattern.match(stateToMatch)) {
+          t.setAttribute("mode", "patternMatching");
+          templates.push(t);
+        }
+      }
+    }
+    return html`${repeat(
+      templates,
+      (template, index) => {
+        template;
+        return index + new Date().getTime();
+      },
+      (template) => {
+        if (template.title) document.title = template.title;
+        if (template.hasAttribute("dataProviderExpression")) {
+          const dataProviderExpression = template.getAttribute("dataProviderExpression") as string;
+          let dataProvider = "";
+          let stateToMatch = state;
+          let path: string = template.getAttribute(this.templateValueAttribute) as string;
+          if (this.inverted) {
+            stateToMatch = path;
+            path = state;
+          }
+          if (path == "") path = this.inverted ? "*" : "^$";
+          if (template.getAttribute("mode") == "patternMatching") {
+            const matcher = new UrlPattern(path);
+            const filler = new UrlPattern(dataProviderExpression);
+            dataProvider = filler.stringify(matcher.match(stateToMatch));
+          } else {
+            const regexp = new RegExp(path);
+
+            const match = (stateToMatch + "").match(regexp);
+            if (match) {
+              dataProvider = match.shift()?.replace(regexp, dataProviderExpression) as string;
+            }
+          }
+          return html`<div style="display:contents" dataProvider="${dataProvider}">${templateContent(template)}</div>`;
+        }
+        return templateContent(template);
+      }
+    )}`;
+  }
+}

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

@@ -0,0 +1,48 @@
+# Submit
+
+## The submit element is used to send data to a rest service
+ * The api is set up like a [fetcher](#core/components/functional/fetch/fetch.md/fetch).
+ * The *formDataProvider* attribute points to the adress where the data is held by a publisher.
+ * This attribute is also used by form elements such as *sonic-input*, or *sonic-select*, which fill this publisher with their *value* attribute according to their *name* attribute
+ * The *method* attribute allows you to choose the sending method: *put/delete/post*, *post* being the default method.
+ * If the *onClick* attribute is present, the data is sent when the content is clicked on
+ * If the *onEnterKey* attribute is present, data is sent when the enter key of an element contained in the *sonic-submit* with focus is pressed
+ * During sending, *sonic-submit* elements with the same *dataProvider* attribute have the *disabled="disabled "* property, which has the effect of disabling their content
+ * The *clearedDataOnSuccess* attribute can be used to clear the data from the corresponding dataProvider when the call to the api has provided a result.
+
+## Form example
+<sonic-code>
+  <template>
+  <sonic-scope
+        serviceURL="https://reqres.in" dataProvider="api/register"
+        formDataProvider="submit-example" submitResultDataProvider="submit-example-result"
+        method="post"
+        class="max-w-lg block"
+      >
+        <sonic-submit onEnterKey>
+          <div class="grid grid-cols-2 gap-4 mb-4 ">
+            <sonic-input required name="email" type="email" value="eve.holt@reqres.in"></sonic-input>
+            <sonic-input required type="password" name="password" value="pistol"></sonic-input>
+          </div>
+        </sonic-submit>
+        <sonic-submit onClick>
+          <sonic-button type="success" class="w-full">Submit</sonic-button>
+        </sonic-submit>
+    </sonic-scope>
+  </template>
+</sonic-code>
+
+## Result handling example
+
+Result will show when something has been submit because the **dataprovider** used in this example is the same as the **submitResultDataProvider** used in the previous form.
+<sonic-code>
+  <template>
+      <div dataProvider="submit-example-result">
+        <div>Id : <span data-bind ::inner-html="$id"></span></div>
+        <div>Token : <span data-bind ::inner-html="$token"></span></div>
+        <div data-bind ::inner-html="$error"></div>
+      </div>
+  </template>
+</sonic-code>
+
+

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

@@ -0,0 +1,265 @@
+import "@supersoniks/concorde/core/components/ui/button/button";
+import {
+  ConcordeWindow,
+  HTMLFormControl,
+} from "@supersoniks/concorde/core/_types/types";
+import { Loader } from "@supersoniks/concorde/core/components/ui/loader/loader";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import API, { ResultTypeInterface } from "@supersoniks/concorde/core/utils/api";
+import Objects from "@supersoniks/concorde/core/utils/Objects";
+import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
+import { Message } from "@supersoniks/concorde/core/_types/types";
+import { HTML } from "@supersoniks/concorde/utils";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+type SubmitResult =
+  | ({ messages: Message[] } & ResultTypeInterface)
+  | null
+  | undefined;
+const tagName = "sonic-submit";
+
+declare const window: ConcordeWindow;
+
+/**
+ * ###L'élément submit permet d'envoyer des données en rest
+ * * Les données envoyées sont celles présentes dans le publisher dont l'adresse est renseignée via l'attribut *formDataProvider*.
+ * Cet attribut est également utilisé par les éléments de form comme *sonic-input*, ou *sonic-select*, qui remplissent ce publisher avec leur attribut *value* en fonction de leur attribut *name*
+ * * L'api est configuré à la manière d'un fetcher.
+ * * L'attribut *method* permet de choisir la méthode d'envoie : *put/delete/post*, *post* étant la méthode par défaut.
+ * * Si l'attribut *onClick* est présent, les données sont envoyées quand on click dans son contenu
+ * * Si l'attribut *onEnterKey* est présent, les données sont envoyées quand on appuie sur la touche entrée d'un élément contenu dans le *sonic-submit* ayant le focus
+ * * Pendant l'envoi, les éléments *sonic-submit* ayant le même attribut *dataProvider* ont la propriété *disabled="disabled"* ce qui a pour effet de désactiver leur contenu
+ * * L'attribut *clearedDataOnSuccess* peut être utilisé pour vider les données des dataProvider correspondants lorsque l'appel à l'api a fourni un résultat.
+ */
+@customElement(tagName)
+export class Submit extends Subscriber(LitElement) {
+  static styles = css`
+    [data-disabled] {
+      opacity: 0.3;
+      pointer-events: none;
+      user-select: none;
+    }
+  `;
+  @property({ type: String }) submitResultKey: string | null = null;
+  @property({ type: Boolean }) disabled = false;
+  @property({ type: String }) endPoint: string | null = null;
+  @property() name = "";
+  @property() value = "";
+  api: API | null = null;
+
+  connectedCallback() {
+    if (this.hasAttribute("onClick")) {
+      this.addEventListener("click", () => this.submit());
+    }
+    if (this.hasAttribute("onEnterKey")) {
+      this.addEventListener("keydown", (e: KeyboardEvent) => {
+        if (e.key === "Enter") this.submit();
+      });
+    }
+    super.connectedCallback();
+    this.api = new API(this.getApiConfiguration());
+  }
+
+  submitNativeForm() {
+    const form: HTMLFormElement = HTML.getClosestForm(this) as HTMLFormElement;
+    if (!form) return;
+    const formDataProvider = this.getAncestorAttributeValue("formDataProvider");
+    const formData = PublisherManager.get(formDataProvider).get();
+    for (const name in formData) {
+      if (name == "isFormValid") continue;
+      let control = form.querySelector(
+        'input[name="' +
+          name +
+          '"], select[name="' +
+          name +
+          '"], textarea[name="' +
+          name +
+          '"]'
+      ) as HTMLFormControl;
+
+      if (!control) {
+        control = document.createElement("input");
+        control.type = "hidden";
+        control.name = name;
+        form.appendChild(control);
+      }
+      let value = formData[name];
+      if (Array.isArray(value)) value = value.join(",");
+      if (control.type === "checkbox" || control.type === "radio") {
+        if (value) (control as HTMLInputElement).checked = true;
+      } else {
+        control.value = value;
+      }
+    }
+    const submitButton = document.createElement("input") as HTMLInputElement;
+    submitButton.name = this.name;
+    submitButton.style.display = "none";
+    submitButton.value = this.value;
+    submitButton.type = "submit";
+    form.appendChild(submitButton);
+    if (submitButton) submitButton.click();
+  }
+
+  async submit() {
+    const formPublisher = PublisherManager.getInstance().get(
+      this.getAncestorAttributeValue("formDataProvider")
+    );
+    //
+    // Validation du formulaire
+    formPublisher.isFormValid = true;
+    formPublisher.invalidate();
+    if (!formPublisher.isFormValid.get()) return;
+    if (this.publisher) this.publisher.disabled = true;
+    formPublisher.isFormValid;
+    // support native html form
+    const native = this.hasAttribute("native");
+    if (native) {
+      this.submitNativeForm();
+      return;
+    }
+    //
+    //Recup données
+    const method = this.getAttribute("method")?.toLocaleLowerCase() || "post";
+
+    const sendAsFormData = this.hasAttribute("sendAsFormData");
+    const formData = formPublisher.get();
+    delete formData.isFormValid;
+    const headesDataProvider = this.getAncestorAttributeValue(
+      "headersDataProvider"
+    );
+    const headerPublisher = headesDataProvider
+      ? PublisherManager.getInstance().get(headesDataProvider)
+      : null;
+    let headerData = {};
+    if (headerPublisher) headerData = headerPublisher.get();
+    let result: SubmitResult = null;
+    const dataProvider = this.getAncestorAttributeValue("dataProvider");
+    const endPoint = this.endPoint || dataProvider;
+    Loader.show();
+    const sendData = async () => {
+      //
+      //envoi données
+      if (sendAsFormData) {
+        result = await this.api?.submitFormData(
+          endPoint,
+          formData,
+          method,
+          headerData
+        );
+      } else {
+        switch (method) {
+          case "put":
+            result = await this.api?.put(endPoint, formData, headerData);
+            break;
+          case "delete":
+            result = await this.api?.delete(endPoint, formData, headerData);
+            break;
+          case "get":
+            // add formData to endpoint
+            const params = new URLSearchParams();
+            if (formData) {
+              for (const key in formData) {
+                params.append(key, formData[key]);
+              }
+            }
+            const paramString = "?" + params.toString();
+            result = await this.api?.get(endPoint + paramString, headerData);
+            break;
+          default:
+            result = await this.api?.post(endPoint, formData, headerData);
+            break;
+        }
+      }
+
+      Loader.hide();
+      if (!result)
+        result = { messages: [{ content: "Network Error", status: "error" }] };
+      // Si result ne contient que la réponse HTTP, avec un status not ok, on ajoute un message
+      else if (
+        result._sonic_http_response_ &&
+        !result._sonic_http_response_.ok &&
+        Object.keys(result).length === 1
+      )
+        result.messages = [{ content: "Network Error", status: "error" }];
+      const clearedDataProvider = this.getAncestorAttributeValue(
+        "clearedDataOnSuccess"
+      );
+      if (clearedDataProvider) {
+        clearedDataProvider
+          .split(" ")
+          .forEach((dataProvider) =>
+            PublisherManager.get(dataProvider).set({})
+          );
+      }
+
+      const username_key = this.hasAttribute("usernameKey")
+        ? this.getAttribute("usernameKey")
+        : "username";
+      const password_key = this.hasAttribute("passwordKey")
+        ? this.getAttribute("passwordKey")
+        : "password";
+      if (
+        this.api?.lastResult?.ok &&
+        formData[username_key] &&
+        formData[password_key]
+      ) {
+        this.saveCredentials(formData[username_key], formData[password_key]);
+      }
+
+      if (this.submitResultKey) {
+        result = Objects.traverse(
+          result,
+          this.submitResultKey.split("."),
+          true
+        );
+      }
+      const submitResultDataProvider = this.getAncestorAttributeValue(
+        "submitResultDataProvider"
+      );
+      if (submitResultDataProvider)
+        PublisherManager.get(submitResultDataProvider).set(result);
+      if (this.publisher) this.publisher.disabled = null;
+    };
+    const captchaPublisher = headerPublisher?.needsCaptchaValidation.get()
+      ? headerPublisher
+      : formPublisher.needsCaptchaValidation.get()
+      ? formPublisher
+      : null;
+    if (captchaPublisher) {
+      captchaPublisher.captchaMethod = method;
+      captchaPublisher.captchaAction =
+        dataProvider?.split("?")[0] ??
+        this.getAncestorAttributeValue("formDataProvider") ??
+        "submit";
+      captchaPublisher.captchaToken = "request_token";
+      const captchaAssign = (token?: string) => {
+        if (token != "request_token" && token != "") {
+          sendData();
+          // Après l'envoie des données, on supprime ce onAssign.
+          // Sinon les handler se cumuleraient après plusieurs submit consécutifs.
+          captchaPublisher.captchaToken.offAssign(captchaAssign);
+        }
+      };
+      captchaPublisher.captchaToken.onAssign(captchaAssign);
+    } else {
+      sendData();
+    }
+  }
+
+  async saveCredentials(username: string, password: string) {
+    // Check if the browser supports password credentials (and the Credential Management API)
+    if ("PasswordCredential" in window) {
+      const credential = new window.PasswordCredential({
+        id: username,
+        // name: "Carina Anand", // In case of a login, the name comes from the server.
+        password: password,
+      });
+
+      await navigator.credentials.store(credential);
+    }
+  }
+  protected render(): unknown {
+    return html`<div ?data-disabled=${this.disabled}><slot></slot></div>`;
+  }
+}

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

@@ -0,0 +1,91 @@
+# Subscriber
+
+La mixin Subscriber permet lier un composant à un publisher.
+La liaison à un publisher se fait via l'attribut *dataProvider* du composant qui représente ce que l'on obtient en appellant PublisherManager.get(dataProvider).
+
+Les propriétés du composant sont automatiquement remplies avec les propriétés du même nom dans les données du publisher.
+
+Le composant est automatiquement mis à jour lorsque les données du publisher sont mises à jour.
+
+## DataProvider
+
+**Id** of the dataProvider that the component will **subscribe** to
+
+<sonic-code>
+  <template>
+    <sonic-subscriber dataProvider="id_that_the_subsriber_will_subscribe_to" debug>
+      <sonic-button> custom dataProvider id</sonic-button>
+    </sonic-subscriber>
+    <sonic-subscriber debug>
+      <sonic-button> default id : pageHTML</sonic-button>
+    </sonic-subscriber>
+  </template>
+</sonic-code>
+
+## Props
+
+Data object (json) that will be passed to the dataProvider
+
+<sonic-code>
+  <template>
+    <sonic-subscriber props='{"data":"Hello world"}' debug>
+      <sonic-button> Hover to see the data</sonic-button>
+    </sonic-subscriber>
+  </template>
+</sonic-code>
+
+
+## Debug
+
+**Helper**, display the data held by the dataProvider in a floating div
+
+<sonic-code>
+  <template>
+    <sonic-subscriber debug>
+      <sonic-button> see the dataProvider'data </sonic-button>
+    </sonic-subscriber>
+  </template>
+</sonic-code>
+
+
+## NoAutofill
+
+<sonic-alert status="info">Docs coming soon</sonic-alert>
+
+## PropertyMap
+
+<sonic-alert status="info">Docs coming soon</sonic-alert>
+
+Permet de mapper un nom de propriété de donnée source vers une propriété du subscriber à la volée
+
+## BindPublisher
+
+<sonic-alert status="info">Docs coming soon</sonic-alert>
+
+On peut utiliser cette fonction pour lier un publisher spécifique au composant si besoin.
+
+## instanceCounter
+
+<sonic-alert status="info">Docs coming soon</sonic-alert>
+
+## Publisher
+
+<sonic-alert status="info">Docs coming soon</sonic-alert>
+
+## Args
+
+<sonic-alert status="info">Docs coming soon</sonic-alert>
+ 
+## NoShadowDom
+
+Par défaut on crée un shadow dom mais on peut demander à ne pas en avoir via cette propriété et un attribut associé.  
+Cela se fait à l'initialisation uniquement et n'est pas modifiable lors de la vie du composant.
+
+
+## Other attributes gathered from subscriber.stories.ts
+
+styles ??  
+title ??  
+_props ??  
+onAssign ??  
+defferedDebug ??

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

@@ -0,0 +1,28 @@
+import {html, LitElement, PropertyValues} from "lit";
+import {customElement} from "lit/decorators.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+const tagName = "sonic-subscriber";
+/**
+ * Voir la partie dédiée dans *MISCALLENOUS*
+ */
+
+@customElement(tagName)
+export class SonicSubscriber extends Subscriber(LitElement) {
+  noAutofill = true;
+  connectedCallback(): void {
+    this.noShadowDom = "";
+    super.connectedCallback();
+  }
+
+  updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+
+    // Display contents, notamment pour les layout dans tableaux
+    if (this.children.length == 0) this.style.display = "none";
+    else this.style.display = "contents";
+  }
+
+  render() {
+    return html`<slot></slot> `;
+  }
+}

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

@@ -0,0 +1,35 @@
+# Value
+
+Simply shows a value from a data provider.
+You can target sub data value using dot syntax.
+The value reacts to changes.
+
+* Below is a form that helps you to set a value for the field "preference" in the data target with id "value-example"
+<sonic-code>
+  <template>
+    <div formDataProvider="value-example">
+      which one do you prefer  ?
+      <sonic-radio name="preference" checked value="dogs"> Dogs</sonic-radio>
+      <sonic-radio name="preference" value="cats"> Cats</sonic-radio>
+    </div>
+  </template>
+</sonic-code>
+* Then you can see live value of the preference using this code :
+<sonic-code>
+  <template>
+  I prefer <sonic-value dataProvider="value-example" key="preference"></sonic-value> 
+  </template>
+</sonic-code>
+* If you have more complex data like this
+<sonic-code>
+  <template>
+    <sonic-subscriber dataProvider="value-example-2" props='{"my":{"complex":[{"data":"👋 Hi There"}]}}'></sonic-subscriber> 
+  </template>
+</sonic-code>
+* You can target it with the dot syntax
+<sonic-code>
+  <template>
+  <sonic-value dataProvider="value-example-2" key="my.complex.0.data"></sonic-value> 
+  </template>
+</sonic-code>
+