@supersoniks/concorde 2.0.7 → 3.0.0

package/src/core/components/ui/form/form-actions/form-actions.ts

@@ -0,0 +1,32 @@
+import {html, LitElement, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {styleMap} from "lit/directives/style-map.js";
+
+const tagName = "sonic-form-actions";
+
+@customElement(tagName)
+export class FormActions extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+      slot {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.3rem;
+      }
+    `,
+  ];
+
+  @property({type: String}) direction = "row";
+  @property({type: String}) justify = "flex-start";
+
+  render() {
+    const styles = {
+      flexDirection: this.direction,
+      justifyContent: this.justify,
+    };
+    return html`<slot style=${styleMap(styles)}></slot>`;
+  }
+}

package/src/core/components/ui/form/form-layout/form-layout.md

@@ -0,0 +1,43 @@
+# Form-layout
+
+<sonic-code>
+  <template>
+  <form>
+    <sonic-form-layout>
+      <sonic-input autocomplete="family-name" label="Nom" name="nom"></sonic-input>
+      <sonic-input autocomplete="given-name" label="Prénom" name="prenom"></sonic-input>
+      <sonic-select autocomplete="sex" label="Sexe" name="sexe">
+        <option value="" selected="selected">- Sélectionner -</option>
+        <option value="-">Je préfère ne pas le dire</option>
+        <option value="Homme">Homme</option>
+        <option value="Femme">Femme</option>
+      </sonic-select>
+      <sonic-input autocomplete="bday" label="Date de naissance" name="date_naissance" type="date"></sonic-input>
+      <sonic-divider></sonic-divider>
+      <sonic-input autocomplete="email" label="e-mail" name="email" type="email"></sonic-input>
+      <sonic-input
+        autocomplete="email"
+        label="Confirmer votre e-mail"
+        name="email_confirmation"
+        type="email"
+      ></sonic-input>
+      <sonic-input autocomplete="new-password" label="Mot de passe" name="password" type="password"></sonic-input>
+      <sonic-input
+        autocomplete="new-password"
+        label="Confirmer votre mot de passe"
+        name="password_confirmation"
+        type="password"
+      ></sonic-input>
+      <sonic-divider></sonic-divider>
+      <sonic-textarea label="Message" rows="5">
+      </sonic-textarea>
+      <sonic-checkbox>Inscription à la newsletter</sonic-checkbox>
+      <sonic-checkbox>J'ai lu et accepte les <sonic-link href="#" class="underline">Conditions générales de ventes</sonic-link></sonic-checkbox>
+      <sonic-form-actions>
+        <sonic-button type="success">Valider</sonic-button> 
+      </sonic-form-actions>
+    </sonic-form-layout>
+  </form >
+  </template>
+</sonic-code>
+

package/src/core/components/ui/form/form-layout/form-layout.ts

@@ -0,0 +1,71 @@
+import {html, LitElement, css} from "lit";
+import {customElement, property, queryAssignedElements} from "lit/decorators.js";
+import {ResizeController} from "@lit-labs/observers/resize-controller.js";
+import {classMap} from "lit/directives/class-map.js";
+
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+
+const tagName = "sonic-form-layout";
+
+@customElement(tagName)
+export class FormLayout extends Subscriber(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+
+      div {
+        display: grid;
+        grid-gap: 1.5rem;
+        align-items: flex-start;
+      }
+
+      .cq--md {
+        grid-gap: 1.75rem;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      .one-form-element {
+        grid-template-columns: 1fr;
+      }
+      /*::slotted(sonic-radio),
+      ::slotted(sonic-checkbox),
+      ::slotted(sonic-form-actions),
+      ::slotted(sonic-divider),
+      ::slotted(sonic-textarea) {
+        grid-column: 1 / -1;
+      }*/
+      ::slotted(sonic-submit) {
+        display: contents;
+      }
+      ::slotted(:not(sonic-input):not(sonic-select):not(sonic-input-autocomplete):not(.form-item-container)) {
+        grid-column: 1 / -1;
+      }
+
+      ::slotted(sonic-divider) {
+        --sc-divider-my: 0;
+      }
+    `,
+  ];
+  _resizeController = new ResizeController(this, {});
+
+  @queryAssignedElements({flatten: true}) slottedElements!: HTMLElement[];
+  @property({type: Boolean}) oneFormElement = false;
+
+  onSlotChange() {
+    let elements = this.slottedElements;
+    const formElementColumns = ["sonic-input", "sonic-select", "sonic-input-autocomplete", ".form-item-container"];
+    // keep only form elements
+    elements = elements.filter((elt) => formElementColumns.includes(elt.nodeName.toLowerCase()));
+    this.oneFormElement = elements.length == 1;
+  }
+  render() {
+    const classes = {
+      "cq--md": this.offsetWidth > 440,
+      "one-form-element": this.oneFormElement,
+    };
+    return html`<div class=${classMap(classes)}>
+      <slot @slotchange=${this.onSlotChange}></slot>
+    </div>`;
+  }
+}

package/src/core/components/ui/form/input/input.md

@@ -0,0 +1,168 @@
+# Input
+
+
+<sonic-button type="info" size="sm" target="_blank" href="https://www.w3schools.com/tags/tag_input.asp#midcontentadcontainer">
+  <sonic-icon library="iconoir" name="open-new-window" slot="prefix" ></sonic-icon>
+  Native attibutes list
+</sonic-button>
+
+## Label
+<sonic-code>
+  <template>
+  <sonic-input label="Label"></sonic-input>
+  </template>
+</sonic-code>
+
+## Placeholder
+<sonic-code>
+  <template>
+  <sonic-input placeholder="placeholder"></sonic-input>
+  </template>
+</sonic-code>
+
+## Value
+<sonic-code>
+  <template>
+  <sonic-input value="value"></sonic-input>
+  </template>
+</sonic-code>
+
+## Required
+<sonic-code>
+  <template>
+  <sonic-input required  type="email" placeholder="you@email.com" label="Feedback on blur"></sonic-input>
+  </template>
+</sonic-code>
+
+## Description
+<sonic-code>
+  <template>
+  <sonic-input description="Description goes here" ></sonic-input>
+  </template>
+</sonic-code>
+
+## Type
+<sonic-button size="2xs" type="info" target="_blank" href="https://www.w3schools.com/html/html_form_input_types.asp">Liste des types</sonic-button>
+
+<sonic-code>
+  <template>
+  <div class="grid gap-3">
+    <sonic-input type="text" label="Text">Text</sonic-input>
+    <sonic-input type="email" label="Email" placeholder="plop@kiki.com"></sonic-input>
+    <sonic-input type="password" label="Password"></sonic-input>
+    <sonic-input type="date" label="Date"></sonic-input>
+    <sonic-input type="number" label="Number"></sonic-input>
+    <sonic-input type="color" label="Color" value="#ffff00"></sonic-input>
+  </div>
+  </template>
+</sonic-code>
+
+## Size
+<sonic-code>
+  <template>
+  <div class="grid gap-3">
+    <sonic-input size="2xs" value="2xs"></sonic-input>
+    <sonic-input size="xs" value="xs"></sonic-input>
+    <sonic-input size="sm" value="sm"></sonic-input>
+    <sonic-input size="md" value="md"></sonic-input>
+    <sonic-input value="default"></sonic-input>
+    <sonic-input size="lg" value="lg"></sonic-input>
+    <sonic-input size="xl" value="xl"></sonic-input>
+    <sonic-input size="2xl" value="2xl"></sonic-input>
+  </div>
+  </template>
+</sonic-code>
+
+## List
+<sonic-alert status="error" label="Non fonctionnel" class="mb-4"></sonic-alert>
+
+<sonic-code>
+  <template>
+  <sonic-input list="browsers"></sonic-input>
+  <datalist id="browsers">
+    <option value="Internet Explorer">
+    <option value="Firefox">
+    <option value="Google Chrome">
+    <option value="Opera">
+    <option value="Safari">
+  </datalist>
+  </template>
+</sonic-code>
+
+## Prefix & suffix
+
+<sonic-code>
+  <template>
+  <div class="grid grid-cols-2 gap-3">
+    <sonic-input type="search" label="Search" placeholder="Search plane">
+      <sonic-icon library="iconoir" name="search" slot="prefix"></sonic-icon>
+    </sonic-input>
+    <sonic-input type="number" label="Amount" placeholder="0">
+      <sonic-icon library="iconoir" name="euro" slot="suffix"></sonic-icon>
+    </sonic-input>
+  </div>
+  </template>
+</sonic-code>
+
+## InlineContent
+
+<sonic-code>
+  <template>
+  <div class="grid grid-cols-4 gap-3">
+    <sonic-input inlineContent type="search" label="Search icon in input" placeholder="Search plane">
+      <sonic-icon library="iconoir" name="search" slot="prefix"></sonic-icon>
+    </sonic-input>
+    <sonic-input inlineContent type="number" label="Number of seats" placeholder="0">
+      <div slot="suffix" class="flex gap-2 items-center">
+        <sonic-badge type="danger" size="sm">4 max</sonic-badge>
+        <sonic-icon library="iconoir" name="euro" ></sonic-icon>
+      </div>
+    </sonic-input>
+  </div>
+  </template>
+</sonic-code>
+
+
+
+## Example of use
+<sonic-code>
+  <template>
+  <sonic-theme color background theme=${theme} class="p-8">
+    <sonic-input
+      formDataProvider="input-filter"
+      name="contains"
+      value="chien"
+    ></sonic-input>
+    <sonic-subscriber dataProvider="input-filter" class="text-xl my-4 block font-bold">
+      Blagues trouvées pour "<span data-bind ::inner-html="$contains"></span>" :
+    </sonic-subscriber>
+    <sonic-queue
+      lazyload
+      dataProviderExpression="joke/Any?amount=10&lang=fr"
+      dataFilterProvider="input-filter"
+      serviceURL="https://v2.jokeapi.dev"
+      key="jokes"
+    >
+      <template>
+        <div class="border-0 border-b-[1px] border-b-neutral-300 border-dotted py-3">
+          <div data-bind ::inner-html="$joke"></div>
+          <div data-bind ::inner-html="$setup"></div>
+          <div data-bind ::inner-html="$delivery"></div>
+        </div>
+      </template>
+    </sonic-queue>
+  </sonic-theme>
+  </template>
+</sonic-code>
+
+
+<sonic-code>
+  <template>
+    <sonic-input type="search"  placeholder="Search plane" class="inline-block">
+    </sonic-input>
+    <sonic-button type="danger" label="Amount" placeholder="0">azdazd
+    </sonic-button>
+  </template>
+</sonic-code>
+
+<!-- <sonic-input type="password" inlineContent size="2xl"><span slot="suffix">PLOP</span></sonic-input> -->

package/src/core/components/ui/form/input/input.ts

@@ -0,0 +1,227 @@
+import {html, LitElement, PropertyValues, css, nothing} from "lit";
+import {customElement, property, queryAssignedNodes, state} from "lit/decorators.js";
+import {query} from "lit/decorators/query.js";
+import {ifDefined} from "lit/directives/if-defined.js";
+import {formControl, label, description, passwordToggle} from "@supersoniks/concorde/core/components/ui/form/css/form-control";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
+import FormInput from "@supersoniks/concorde/core/mixins/FormInput";
+import {classMap} from "lit/directives/class-map.js";
+import {fontSize} from "@supersoniks/concorde/core/components/ui/_css/size";
+import {unsafeHTML} from "lit/directives/unsafe-html.js";
+
+/**
+ * ### Le composent sonic-input étend les mixins FormInput, FormElement et Subscriber
+ * **FormElement :**
+ * * La propriété value est remplie automatiquement a l'aide de l'attribut name renseigné, ceci en prenant la valeur de la propriété du même nom dans les données du dataprovider associé.
+ * * Par défault lorsque l'on édite l'input, la valeur est également mise à jour via le même dataprovider
+ * * On peut cependant décider de mettre à jour la donnée à une autre adresse en renseigne l'attribut *formDataProvider*.
+ * * Par conséquent on peut par exemple le lier à un composant *queue* (via sa propriété *dataFilterProvider*) de manière à appeller en auto une api avec des filtres.
+ * **FormInput :**
+ * Uniquement des propriétés classiques d'un input HTML.
+ */
+const tagName = "sonic-input";
+
+@customElement(tagName)
+export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
+  static styles = [
+    fontSize,
+    formControl,
+    label,
+    description,
+    passwordToggle,
+    css`
+      :host([type="hidden"]) {
+        appearance: none !important;
+        display: none !important;
+      }
+      :host > .form-control {
+        position: relative;
+      }
+    `,
+  ];
+
+  /**
+   * Taille du composant, implique notamment des modifications de typo et de marge interne
+   */
+  @property({type: String, reflect: true}) size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+  @property({type: String}) list?: string;
+  @property({type: String}) placeholder?: string;
+  @property({type: String}) pattern?: string;
+  @property({type: String}) min?: string;
+  @property({type: String}) max?: string;
+  @property({type: Boolean}) readonly = false;
+  @property({type: Number}) step?: number;
+  @property({type: Number}) minlength?: number;
+  @property({type: Number}) maxlength?: number;
+  @property({type: String}) src?: string;
+
+  @property({type: Boolean, reflect: true}) inlineContent = false;
+  @property({type: Boolean}) disableInlineContentFocus = false;
+  @property({type: Boolean}) showPasswordToggle = false;
+
+  @queryAssignedNodes({slot: "label", flatten: true})
+  slotLabelNodes!: Array<Node>;
+
+  @queryAssignedNodes({slot: "description", flatten: true})
+  slotDescriptionNodes!: Array<Node>;
+
+  @queryAssignedNodes({slot: "suffix", flatten: true})
+  slotSuffixNodes!: Array<Node>;
+
+  @queryAssignedNodes({slot: "prefix", flatten: true})
+  slotPrefixNodes!: Array<Node>;
+
+  @query("input") input!: HTMLInputElement;
+
+  @state() hasDescription = false;
+  @state() hasLabel = false;
+  @state() hasSuffix = false;
+  @state() hasPrefix = false;
+  @state() isPassword = false;
+
+  sameValueAsHandle?: (v: string) => void;
+  sameValueAsName?: string;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.hasSlotOrProps();
+    if (this.hasAttribute("sameValueAs")) {
+      this.sameValueAsName = this.getAttribute("sameValueAs");
+      this.sameValueAsHandle = (v: string) => (this.pattern = this.escapeRegExp(v));
+      const formPublisher = this.getFormPublisher();
+      if (!formPublisher) return;
+      formPublisher[this.sameValueAsName].onAssign(this.sameValueAsHandle);
+    }
+    if (this.type == "password") {
+      this.isPassword = true;
+      this.showPasswordToggle = true;
+      this.inlineContent = true;
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.hasAttribute("sameValueAs") && this.sameValueAsName) {
+      const formPublisher = this.getFormPublisher();
+      if (!formPublisher) return;
+      formPublisher[this.sameValueAsName].offAssign(this.sameValueAsHandle);
+    }
+  }
+
+  escapeRegExp(string: string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
+  }
+
+  willUpdate(changedProperties: PropertyValues) {
+    this.hasSlotOrProps();
+    super.willUpdate(changedProperties);
+  }
+
+  setSelectionRange(start: number, end: number) {
+    this.input.setSelectionRange(start, end);
+  }
+
+  hasSlotOrProps() {
+    this.hasLabel = this.label || this.slotLabelNodes?.length ? true : false;
+    this.hasDescription = this.description || this.slotDescriptionNodes?.length ? true : false;
+    this.hasSuffix = this.slotSuffixNodes?.length ? true : false;
+    this.hasPrefix = this.slotPrefixNodes?.length ? true : false;
+  }
+
+  inlineContentFocus() {
+    if (!this.inlineContent || this.disableInlineContentFocus) return;
+    this.input?.focus();
+  }
+  changeTimeoutId?: ReturnType<typeof setTimeout>;
+
+  handleChange(e?: Event) {
+    if (!this.hasAttribute("inputDelayMs")) {
+      super.handleChange(e);
+      return;
+    }
+    if (this.changeTimeoutId) clearTimeout(this.changeTimeoutId);
+    this.changeTimeoutId = setTimeout(() => super.handleChange(e), parseInt(this.getAttribute("inputDelayMs")));
+  }
+
+  // toggle password visibility
+  togglePasswordVisibility() {
+    this.isPassword = !this.isPassword;
+    this._type = this.isPassword ? "password" : "text";
+    // this.type = this.isPassword ? "password" : "text";
+  }
+
+  render() {
+    const slotClasses = {
+      "has-prefix": this.hasPrefix,
+      "has-suffix": this.hasSuffix,
+      "no-suffix": !this.hasSuffix,
+      "no-prefix": !this.hasPrefix,
+    };
+    //let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
+    return html`
+      <label for="${this.id || "form-element"}" class="${this.hasLabel ? "form-label" : "hidden"}"
+        >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot
+          name="label"
+          @slotchange=${this.hasSlotOrProps}
+        ></slot
+      ></label>
+
+      <div @click=${this.inlineContentFocus} class="form-control ${classMap(slotClasses)}">
+        <div part="content" class="${this.inlineContent ? "form-element form-element-wrapper" : "contents"}">
+            <slot name="prefix" @slotchange=${this.hasSlotOrProps}></slot>
+            <input
+              part="input"
+              id=${ifDefined(this.id || "form-element")}
+              part="input"
+              class="form-element input"
+              @input=${this.handleChange}
+              @blur=${this.handleBlur}
+              type=${this.type}
+              disabled=${ifDefined(this.disabled)}
+              ?readonly=${this.readonly}
+              ?autofocus=${this.autofocus}
+              list=${ifDefined(this.list)}
+              tabindex=${ifDefined(this.tabindex)}
+              pattern=${ifDefined(this.pattern)}
+              min=${ifDefined(this.min)}
+              max=${ifDefined(this.max)}
+              step=${ifDefined(this.step)}
+              src=${ifDefined(this.src)}
+              minlength=${ifDefined(this.minlength)}
+              maxlength=${ifDefined(this.maxlength)}
+              placeholder=${ifDefined(this.placeholder)}
+              required=${ifDefined(this.required)}
+              autocomplete=${ifDefined(this.autocomplete)}
+              aria-label=${ifDefined(this.ariaLabel)}
+              aria-labelledby=${ifDefined(this.ariaLabelledby)}
+              .name=${this.name}
+              .value=${this.value}
+            />
+              ${
+                this.showPasswordToggle
+                  ? html`<sonic-button
+                      shape="circle"
+                      class="password-toggle"
+                      @click=${this.togglePasswordVisibility}
+                      aria-label="Toggle password visibility"
+                      variant="unstyled"
+                    >
+                      <sonic-icon library="heroicons" name=${this.isPassword ? "eye" : "eye-slash"}></sonic-icon>
+                    </sonic-button>`
+                  : ""
+              }
+            <slot name="suffix" @slotchange=${this.hasSlotOrProps}></slot>
+          </div>
+        </div>
+
+        <!-- le slot ne doit pas avoir d'espace-->
+        <slot
+          name="description"
+          @slotchange=${this.hasSlotOrProps}
+          class="${this.hasDescription ? "form-description" : "hidden"}"
+        >${this.description ? html`${unsafeHTML(this.description)}` : nothing}</slot>
+        <slot name="list"></slot>
+      </div>
+    `;
+  }
+}

package/src/core/components/ui/form/input/password-helper.ts

@@ -0,0 +1,68 @@
+import {html, LitElement, nothing} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {Subscriber} from "@supersoniks/concorde/mixins";
+import {PublisherManager} from "@supersoniks/concorde/utils";
+import "@supersoniks/concorde/core/components/ui/icon/icon";
+const tagName = "sonic-password-helper"; // For Astro.build
+@customElement(tagName)
+export class SonicComponent extends Subscriber(LitElement) {
+  @property() name?: string;
+  @property() minChars = 8;
+  @state() hasNoChar = true;
+  @state() hasEnoughChars = false;
+  @state() hasMinuscule = false;
+  @state() hasMajuscule = false;
+  @state() hasNumber = false;
+  @state() hasSpecialChar = false;
+
+  @property() wording_password_helper_decription = "Le mot de passe doit contenir au moins :";
+  @property() wording_password_helper_min_length = "8 caractères";
+  @property() wording_password_helper_lower_case = "1 minuscule";
+  @property() wording_password_helper_upper_case = "1 majuscule";
+  @property() wording_password_helper_number = "1 chiffre";
+  @property() wording_password_helper_special_char = "1 caractère spécial";
+
+  checkValue?: (v: string) => void;
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.name) {
+      this.checkValue = (v) => {
+        if (v) {
+          this.hasNoChar = v.length == 0;
+          this.hasEnoughChars = v.length > this.minChars;
+        } else {
+          this.hasNoChar = true;
+          this.hasEnoughChars = false;
+        }
+
+        this.hasMinuscule = /[a-z]/.test(v);
+        this.hasMajuscule = /[A-Z]/.test(v);
+        this.hasNumber = /[0-9]/.test(v);
+        this.hasSpecialChar = /[!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~]/.test(v);
+      };
+      PublisherManager.get(this.getAncestorAttributeValue("formDataProvider"))[this.name].onAssign(this.checkValue);
+    }
+  }
+  disconnectedCallback(): void {
+    if (this.checkValue && this.name) {
+      PublisherManager.get(this.getAncestorAttributeValue("formDataProvider"))[this.name].offAssign(this.checkValue);
+    }
+    super.disconnectedCallback();
+  }
+  getIcon(test: boolean) {
+    return test
+      ? html`<sonic-icon library="heroicons" name="face-smile"></sonic-icon>`
+      : html`<sonic-icon library="heroicons" name="x-mark"></sonic-icon>`;
+  }
+  render() {
+    if (this.hasNoChar) return nothing;
+    return html`
+      <div>${this.wording_password_helper_decription}</div>
+      <div>${this.getIcon(this.hasEnoughChars)} ${this.wording_password_helper_min_length}</div>
+      <div>${this.getIcon(this.hasMinuscule)} ${this.wording_password_helper_lower_case}</div>
+      <div>${this.getIcon(this.hasMajuscule)} ${this.wording_password_helper_upper_case}</div>
+      <div>${this.getIcon(this.hasNumber)} ${this.wording_password_helper_number}</div>
+      <div>${this.getIcon(this.hasSpecialChar)} ${this.wording_password_helper_special_char}</div>
+    `;
+  }
+}

package/src/core/components/ui/form/input/same-value-helper.ts

@@ -0,0 +1,48 @@
+import {html, LitElement, nothing} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {Subscriber} from "@supersoniks/concorde/mixins";
+import {PublisherManager} from "@supersoniks/concorde/utils";
+import "@supersoniks/concorde/core/components/ui/icon/icon";
+import {unsafeHTML} from "lit/directives/unsafe-html.js";
+const tagName = "sonic-same-value-helper"; // For Astro.build
+@customElement(tagName)
+export class SonicComponent extends Subscriber(LitElement) {
+  @property() name?: string;
+  @property() sameValueAs?: string;
+  @property() descriptionWhenEqual = "Correspondance : oui";
+  @property() descriptionWhenNotEqual = "Correspondance : non";
+  @state() areEqual = false;
+  @state() hasNoChar = true;
+
+  checkValue?: (v: string) => void;
+  connectedCallback() {
+    super.connectedCallback();
+    const formDataProvider = PublisherManager.get(this.getAncestorAttributeValue("formDataProvider"));
+    if (this.name && this.sameValueAs) {
+      this.checkValue = (v) => {
+        if (v) this.hasNoChar = v.length == 0;
+        else this.hasNoChar = true;
+        if (this.name && this.sameValueAs) {
+          this.areEqual = formDataProvider[this.name].get() == formDataProvider[this.sameValueAs].get();
+        }
+      };
+      formDataProvider[this.name].onAssign(this.checkValue);
+      formDataProvider[this.sameValueAs].onAssign(this.checkValue);
+    }
+  }
+  disconnectedCallback(): void {
+    if (this.checkValue && this.name && this.sameValueAs) {
+      const formDataProvider = PublisherManager.get(this.getAncestorAttributeValue("formDataProvider"));
+      formDataProvider[this.name].offAssign(this.checkValue);
+      formDataProvider[this.sameValueAs].offAssign(this.checkValue);
+    }
+    super.disconnectedCallback();
+  }
+  //TODO Multilangue
+  render() {
+    if (this.hasNoChar) return nothing;
+    return html`
+      <span> ${this.areEqual ? unsafeHTML(this.descriptionWhenEqual) : unsafeHTML(this.descriptionWhenNotEqual)} </span>
+    `;
+  }
+}