@supersoniks/concorde 4.9.98-visual-stack.0 → 4.9.98-visual-stack.2

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

@@ -13,27 +13,28 @@ import {
   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 {
+  fontSize,
+  Size,
+} from "@supersoniks/concorde/core/components/ui/_css/size";
+import {
+  resolveUiLabel,
+  uiAriaLabels,
+} from "@supersoniks/concorde/core/components/ui/_i18n/ui-aria-labels";
 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.
+ * ### sonic-input — FormInput + FormElement
+ * Synchronise `value` via `formDataProvider` + `name`.
+ * Peut alimenter un `sonic-queue` via `dataFilterProvider` pointant sur le même store.
  */
 const tagName = "sonic-input";
 
 @customElement(tagName)
-export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
+export class Input extends FormInput(FormElement(LitElement)) {
   static styles = [
     fontSize,
     formControl,
@@ -54,14 +55,7 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
   /**
    * 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, reflect: true }) size?: Size;
   @property({ type: String }) inputmode?: string;
   @property({ type: String }) list?: string;
   @property({ type: String }) placeholder?: string;
@@ -108,11 +102,11 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
     super.connectedCallback();
     this.hasSlotOrProps();
     if (this.hasAttribute("sameValueAs")) {
-      this.sameValueAsName = this.getAttribute("sameValueAs");
+      this.sameValueAsName = this.getAttribute("sameValueAs") || undefined;
       this.sameValueAsHandle = (v: string) =>
         (this.pattern = this.escapeRegExp(v));
       const formPublisher = this.getFormPublisher();
-      if (!formPublisher) return;
+      if (!formPublisher || !this.sameValueAsName) return;
       formPublisher[this.sameValueAsName].onAssign(this.sameValueAsHandle);
     }
     if (this.type == "password") {
@@ -169,7 +163,7 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
     if (this.changeTimeoutId) clearTimeout(this.changeTimeoutId);
     this.changeTimeoutId = setTimeout(
       () => super.handleChange(e),
-      parseInt(this.getAttribute("inputDelayMs"))
+      parseInt(this.getAttribute("inputDelayMs") || "0"),
     );
   }
 
@@ -218,8 +212,8 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
     //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.hasLabel ? "form-label" : "hidden"
+      }"
         >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot
           name="label"
           @slotchange=${this.hasSlotOrProps}
@@ -227,8 +221,8 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
       ></label>
 
       <div @click=${this.inlineContentFocus} class="form-control ${classMap(
-      slotClasses
-    )}">
+        slotClasses,
+      )}">
         <div part="content" class="${
           this.inlineContent ? "form-element form-element-wrapper" : "contents"
         }">
@@ -269,7 +263,11 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
                       shape="circle"
                       class="password-toggle"
                       @click=${this.togglePasswordVisibility}
-                      data-aria-label="Toggle password visibility"
+                      .ariaLabel=${resolveUiLabel(
+                        this.isPassword
+                          ? uiAriaLabels.showPassword
+                          : uiAriaLabels.hidePassword,
+                      )}
                       variant="unstyled"
                     >
                       <sonic-icon

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

@@ -1,133 +1,29 @@
 # Input-autocomplete
 
-The input-autocomplete component brings input and queue together in order to create a suggest behavior. This is why this component is partially configured as a form [input](#core/components/ui/form/input/input.md/input) and as a [queue](#core/components/functional/queue/queue.md/queue).
+Champ formulaire + suggestions via [queue](#core/components/functional/queue/queue.md/queue). Valeur via `formDataProvider` + `name` ; la recherche filtre la queue (store interne).
 
-Please note that only basic text input params and methods are implemented at this time. You should also be sure to understand the behavior of a [queue](#core/components/functional/queue/queue.md/queue) in order to take full advantage of the input-autocomplete component.
+Rendu des lignes : propriété **`.items`** (callback Lit) — voir les démos ci-dessous. Mock : `serviceURL="/docs-mock-api/geo/"`.
 
-Here are some of the features of the input-autocomplete component:
+## Simple
 
-Doc examples below use HTML binding on suggestion rows. The Lit equivalent uses an **`items`** callback with the row object (see `docs-queue-geo-demo` in `src/docs/example/docs-queue-demos.ts`). Embedding without Lit: [HTML integration](#docs/_misc/html-integration.md/html-integration).
+`name` = paramètre de recherche = valeur formulaire.
 
-* It provides a suggest behavior, where the user can type a few letters and the component will suggest possible matches.
-* It can be used with a variety of data providers, such as an API.
-* It is fully customizable, so you can change the look and feel of the component to match your needs.
+<docs-lit-demo for="docs-input-autocomplete-basic-demo"></docs-lit-demo>
 
-If you are looking for a component to provide a suggest behavior, the input-autocomplete component is a good option. 
+## Valeur ≠ paramètre de recherche
 
+Recherche sur `nom`, valeur formulaire = `code`. Préremplissage via `value`.
 
+<docs-lit-demo for="docs-input-autocomplete-code-demo"></docs-lit-demo>
 
-## Simple Example
+## Mode select
 
-In this example, the input will use its name as the search parameter when calling the service responsible for autocompletion.
+À la fermeture du pop, seule une valeur de la liste (ou vide) est conservée.
 
-The template is used to render the list items of results.
-The list items are responsible for making a selection.
+<docs-lit-demo for="docs-input-autocomplete-select-demo"></docs-lit-demo>
 
-This time, we added buttons with the same name as the input while keeping the same data provider.
-The result is that when you select an item, the input takes the value of the selected item, completing the classic suggest behavior.
+## Navigation clavier
 
+`data-keyboard-nav` sur le champ et les items (flèches haut / bas).
 
-<sonic-code>
-  <template>
-    <sonic-input-autocomplete 
-    class="w-64"
-    label="A french city name" 
-    formDataProvider="autoComplete-example-base" 
-    name="nom" 
-    propertyName="bloop"
-    placeholder="Paris, Lyon, Tours, ..." 
-    serviceurl="/docs-mock-api/geo" 
-    dataproviderexpression="communes?limit=5&boost=population"
-    >
-      <template>
-        <sonic-menu-item debug radio name="nom" data-bind ::inner-html="$nom" ::value="$nom"></sonic-menu-item>
-      </template>
-    </sonic-input-autocomplete>
-  </template>
-</sonic-code> 
-
-
-## Value different from search parameter
-
-In this example, the search parameter is separated from the name of the input. This means that the input will use the name "nom" as the search parameter, but the form data provider will be filled with the data named "siren" from the selected list item.
-
-To do this, we need to use the `searchParam` attribute on the input element. This attribute specifies the name of the search parameter that will be used.
-
-We also need to use the `name` and `value` attribute on the list items. This attribute specifies the value of the data provider that will be used for the selected list item.
-
-By using these attributes, we can separate the search parameter from the name of the input and still fill the form data provider with the data from the selected list item.
-
-
-<sonic-code>
-  <template>
-    <sonic-input-autocomplete 
-    class="w-64"
-    label="A french city name" 
-    formDataProvider="autoComplete-example" 
-    name="siren" 
-    value="212703771" 
-    placeholder="Paris, Lyon, Tours, ..." 
-    serviceurl="/docs-mock-api/geo" 
-    dataproviderexpression="communes?limit=5&boost=population"
-    searchParameter="nom" 
-    >
-      <template>
-        <sonic-menu-item debug  radio name="siren" data-bind ::inner-html="$nom" ::value="$siren"></sonic-menu-item>
-      </template>
-    </sonic-input-autocomplete>
-  </template>
-</sonic-code> 
-
-
-## Select autocomplete / value different from search parameter
-
-This example is the same as the previous one, except that the `select` attribute is used. This attribute changes the look and feel of the component slightly.
-
-Now the text is less free because, you must select either something from the list given by the service, or nothing else.
-
-The following code shows how to use the `select` attribute in an autocomplete input:
-
-<sonic-code>
-  <template>
-    <sonic-input-autocomplete 
-    select
-    class="w-64"
-    label="A french city name" 
-    formDataProvider="autoComplete-example2" 
-    name="siren" 
-    value="212703771" 
-    placeholder="Paris, Lyon, Tours, ..." 
-    serviceurl="/docs-mock-api/geo" 
-    dataproviderexpression="communes?limit=5&boost=population"
-    searchParameter="nom" 
-    >
-      <template>
-        <sonic-menu-item debug radio name="siren" data-bind ::inner-html="$nom" ::value="$siren"></sonic-menu-item>
-      </template>
-    </sonic-input-autocomplete>
-  </template>
-</sonic-code> 
-
-## keyboard navigation
-
-At the moment you can enable keyboard up/down by adding an attribut "data-keyboard-nav" on the component and its listItems
-
-<sonic-code>
-  <template>
-    <sonic-input-autocomplete 
-    class="w-64"
-    label="A french city name" 
-    formDataProvider="autoComplete-example-keyboard" 
-    name="nom" 
-    data-keyboard-nav="nav-autocomplete" 
-    placeholder="Paris, Lyon, Tours, ..." 
-    serviceurl="/docs-mock-api/geo" 
-    dataproviderexpression="communes?limit=60&boost=population"
-    >
-    <template>
-        <sonic-menu-item debug radio name="nom" data-keyboard-nav="nav-autocomplete" data-bind ::inner-html="$nom" ::value="$nom"></sonic-menu-item>
-      </template>
-    </sonic-input-autocomplete>
-  </template>
-</sonic-code> 
-
+<docs-lit-demo for="docs-input-autocomplete-keyboard-demo"></docs-lit-demo>