@supersoniks/concorde 2.0.7 → 3.0.0

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

@@ -0,0 +1,130 @@
+# 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).
+
+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.
+
+Here are some of the features of the input-autocomplete component:
+
+* 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.
+
+If you are looking for a component to provide a suggest behavior, the input-autocomplete component is a good option. 
+
+
+
+## Simple Example
+
+In this example, the input will use its name as the search parameter when calling the service responsible for autocompletion.
+
+The template is used to render the list items of results.
+The list items are responsible for making a selection.
+
+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.
+
+
+<sonic-code>
+  <template>
+    <sonic-input-autocomplete 
+    class="w-64"
+    label="A french city name" 
+    formDataProvider="autoComplete-example-base" 
+    name="nom" 
+    placeholder="Paris, Lyon, Tours, ..." 
+    serviceurl="https://geo.api.gouv.fr" 
+    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="https://geo.api.gouv.fr" 
+    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="https://geo.api.gouv.fr" 
+    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="https://geo.api.gouv.fr" 
+    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> 
+

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

@@ -0,0 +1,285 @@
+import {html, LitElement, css, nothing} from "lit";
+import {customElement, property, queryAssignedNodes, state} from "lit/decorators.js";
+import {FormInput, FormElement, Subscriber, TemplatesContainer} from "@supersoniks/concorde/mixins";
+import "@supersoniks/concorde/core/components/ui/form/input/input";
+import "@supersoniks/concorde/core/components/ui/pop/pop";
+import "@supersoniks/concorde/core/components/functional/queue/queue";
+import "@supersoniks/concorde/core/components/ui/menu/menu-item";
+import {ifDefined} from "lit/directives/if-defined.js";
+import {PublisherManager} from "@supersoniks/concorde/utils";
+import {PublisherProxy} from "@supersoniks/concorde/core/utils/PublisherProxy";
+import {Size} from "../../_css/size";
+import {Input} from "@supersoniks/concorde/core/components/ui/form/input/input";
+import {customScroll} from "@supersoniks/concorde/core/components/ui/_css/scroll";
+import {ResizeController} from "@lit-labs/observers/resize-controller.js";
+
+type ListItem = Record<string, string>;
+
+/**
+ * Input avec autocomplete. Propose des valeurs à partir d'un sonic-queue.
+ * L'input permet de filtrer les choix de valeurs dans le sonic-pop.
+ * La valeur de cet input est ensuite retransmit au premier via un dataProvider.
+ */
+@customElement("sonic-input-autocomplete")
+export class InputAutocomplete extends TemplatesContainer(FormInput(FormElement(Subscriber(LitElement)))) {
+  static styles = [
+    customScroll,
+    css`
+      :host {
+        display: block;
+      }
+
+      sonic-menu {
+        display: block;
+        max-height: clamp(12rem, 20vh, 20rem);
+        min-width: 14rem;
+        width: 100%;
+      }
+    `,
+  ];
+
+  /**
+   * Possibles mutualisation avec text
+   */
+  @property({type: String}) size: Size = "md";
+  @property({type: String}) placeholder = "";
+  @property() filteredFields = "";
+  @property({type: Boolean}) readonly: boolean | null = null;
+
+  @property({type: String}) dataProviderExpression = "";
+  @property({type: Boolean}) select?: boolean;
+  @property({type: String}) key = "";
+  /** The parameter name to use in dataProviderExpression route */
+  @property({type: String}) searchParameter = "";
+  /** The property name to search in the dataProviderExpression result, use "_self" if result is a string list */
+  @property({type: String}) propertyName = "";
+
+  @queryAssignedNodes({slot: "prefix", flatten: true})
+  slotInputPrefixNodes!: Array<Node>;
+
+  @state() hasInputPrefix = false;
+  _resizeController = new ResizeController(this, {});
+
+  /**
+   * Les dataProviders
+   */
+  private searchDataProvider = "";
+  private initSearchDataProvider = "";
+  private queueDataProvider = "";
+  private initQueueDataProvider = "";
+  private lastValidSearch: ListItem | string = "";
+  private searchPublisher?: PublisherProxy;
+  private countPublisher?: PublisherProxy;
+  private initCountPublisher?: PublisherProxy;
+  private formValuePublisher?: PublisherProxy;
+
+  /**
+   * Les fonctions de gestion
+   */
+  hasSlotOrProps() {
+    this.hasInputPrefix = !!this.slotInputPrefixNodes?.length;
+  }
+
+  /**
+   * Run when the formDataProvider's field is updated
+   *
+   * @param value
+   */
+  private updateSearchParameter = (value: string) => {
+    if (value == "") {
+      this.lastValidSearch = "";
+      return;
+    }
+    const found = this.queryQueueListItem(this.queueDataProvider, this.findSelection, this.setSearchFromSelection);
+    // Si la liste de this.queueDataProvider est bien initialisée, mais qu'aucun item ne correspond à la recherche
+    // On affiche quand même la valeur dans le champ de recherche, car il provient directement du formDataProvider
+    if (found === false) {
+      this.lastValidSearch = value;
+      this.searchPublisher?.set(this.lastValidSearch);
+    }
+  };
+
+  private initSearchParameter = () => {
+    this.queryQueueListItem(this.initQueueDataProvider, this.findSelection, this.setSearchFromSelection);
+  };
+
+  private selectListItem = (listItem: ListItem) => {
+    const value = this.propertyName === "_self" ? listItem : listItem[this.propertyName || this.name];
+    this.formValuePublisher?.set(value);
+  };
+
+  private findSearchedItem = (listItem: ListItem) => {
+    const value = this.propertyName === "_self" ? listItem : listItem[this.propertyName || this.searchParameter || this.name];
+    return value == this.searchPublisher?.get();
+  };
+
+  private findSelection = (listItem: ListItem) => {
+    const value = this.propertyName === "_self" ? listItem : listItem[this.propertyName || this.name];
+    return value == this.value;
+  };
+
+  private setSearchFromSelection = (listItem: ListItem) => {
+    this.lastValidSearch = this.propertyName === "_self" ? listItem : listItem[this.propertyName || this.searchParameter || this.name];
+    this.searchPublisher?.set(this.lastValidSearch);
+  };
+  private updateActiveSelection = () => {
+    this.queryQueueListItem(this.queueDataProvider, this.findSearchedItem, this.selectListItem);
+    if (!this.select && this.lastValidSearch && this.lastValidSearch != this.searchPublisher?.get() && this.formValuePublisher?.get()) {
+      this.formValuePublisher?.set("");
+    }
+  };
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    /**
+     * Nom de la valeur de recherche
+     * Si non défini, on utilise name
+     **/
+    const searchParameter = this.searchParameter || this.name;
+
+    /**
+     * Nommage des différents dataProviders utilisés
+     */
+    const formDataProvider = this.getAncestorAttributeValue("formDataProvider");
+    // Create unique provider name with formProvider name + input name
+    const dpPrefix = formDataProvider + "__" + this.name + "__autocomplete";
+    this.initSearchDataProvider = `${dpPrefix}_init_search__`;
+    this.initQueueDataProvider = `${dpPrefix}_init_queue__`;
+    this.searchDataProvider = `${dpPrefix}_search__`;
+    this.queueDataProvider = `${dpPrefix}_queue__`;
+
+    /**
+     * Les publishers utilisés plusieurs fois dans la classe son miss en propriétés privées de la classe
+     */
+    const getPublisher = PublisherManager.get;
+    this.searchPublisher = getPublisher(this.searchDataProvider)[searchParameter];
+    this.formValuePublisher = getPublisher(formDataProvider)[this.name];
+    this.countPublisher = getPublisher(this.queueDataProvider).resultCount;
+    this.initCountPublisher = getPublisher(this.initQueueDataProvider).resultCount;
+
+    /**
+     * Si une valeur est fourrnie a l'initialisation, un queue spécifique appelle le service avec le name founi en paramètre
+     * Pour récupérer la valeur de searchParameter correspondante et renseigner l'input
+     **/
+    if (this.value) {
+      PublisherManager.get(this.initSearchDataProvider)[this.name] = this.value;
+    }
+    this.initCountPublisher?.onAssign(this.initSearchParameter);
+
+    /**
+     * Lorsque la sélection change, on met à jour la valeur de recherche
+     */
+    this.formValuePublisher?.onAssign(this.updateSearchParameter);
+
+    /**
+     * Lorsque La valeur de recherche change, que le composant n'est pas en mode select
+     * et qu'elle est différente de la derniere recherche valide on désactive la selection
+     */
+    this.countPublisher?.onAssign(this.updateActiveSelection);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.initCountPublisher?.offAssign(this.initSearchParameter);
+    this.formValuePublisher?.offAssign(this.updateSearchParameter);
+    this.countPublisher?.offAssign(this.updateActiveSelection);
+    const getPublisher = PublisherManager.get;
+    getPublisher(this.initSearchDataProvider).delete();
+    getPublisher(this.initQueueDataProvider).delete();
+    getPublisher(this.searchDataProvider).delete();
+    getPublisher(this.queueDataProvider).delete();
+  }
+
+  /**
+   * @param queueDataProvider
+   * @param itemFinder
+   * @param itemMutator
+   *
+   * @return bool|undefined True if item found, false otherwise, undefined if result is not a list
+   */
+  queryQueueListItem(queueDataProvider: string, itemFinder: (listItem: ListItem) => boolean, itemMutator: (listItem: ListItem) => void) {
+    const queuePublisher = PublisherManager.get(queueDataProvider);
+    let listItem: ListItem | undefined;
+    const listsDescriptors = queuePublisher.get();
+    if (!Array.isArray(listsDescriptors)) return;
+    for (const listDescriptor of listsDescriptors) {
+      const list = PublisherManager.get(listDescriptor.dataProvider).get();
+      if (!Array.isArray(list)) continue;
+      listItem = list.find(itemFinder);
+      if (listItem) {
+        break;
+      }
+    }
+    if (listItem) {
+      itemMutator(listItem);
+      return true;
+    }
+    return false;
+  }
+
+  setSelectionRange(start: number, end: number) {
+    (this.querySelector("sonic-input") as Input)?.setSelectionRange(start, end);
+  }
+
+  handleHide(): void {
+    if (!this.select) return;
+    if (this.searchPublisher?.get() == "") {
+      this.lastValidSearch = "";
+      this.formValuePublisher?.set("");
+      return;
+    }
+    this.searchPublisher?.set(this.lastValidSearch);
+  }
+
+  render() {
+    return html`
+      <sonic-pop noToggle style="display:block;" @hide=${this.handleHide}>
+        <sonic-input
+          dataProvider="${this.initSearchDataProvider + Math.random()}"
+          formDataProvider="${this.searchDataProvider}"
+          type="search"
+          data-keyboard-nav="${this.getAttribute("data-keyboard-nav") || ""}"
+          label="${ifDefined(this.label)}"
+          description="${ifDefined(this.description)}"
+          name="${ifDefined(this.searchParameter || this.name)}"
+          placeholder="${ifDefined(this.placeholder)}"
+          ?readonly="${this.readonly}"
+          autocomplete="off"
+          clearable
+          inlineContent
+          size=${this.size}
+        >
+          <slot name="prefix" slot="prefix" @slotchange=${this.hasSlotOrProps}></slot>
+
+          ${this.select
+            ? html` <sonic-icon slot="suffix" class="select-chevron" name="nav-arrow-down" .size=${this.size}></sonic-icon> `
+            : nothing}
+        </sonic-input>
+        <sonic-menu slot="content" class="custom-scroll" style="${this.offsetWidth ? `width: ${this.offsetWidth}px` : ""}">
+          <sonic-queue
+            dataProvider="${this.queueDataProvider}"
+            filteredFields=${this.filteredFields}
+            dataProviderExpression="${this.dataProviderExpression}"
+            dataFilterProvider="${this.searchDataProvider}"
+            key="${this.key}"
+            .templates=${this.templateList}
+            displayContents
+          >
+          </sonic-queue>
+          <sonic-queue
+            noLazyload
+            noLoader
+            dataProvider="${this.initQueueDataProvider}"
+            filteredFields=${this.filteredFields}
+            dataProviderExpression="${this.dataProviderExpression}"
+            dataFilterProvider="${this.initSearchDataProvider}"
+            key="${this.key}"
+            displayContents
+          >
+          </sonic-queue>
+        </sonic-menu>
+      </sonic-pop>
+    `;
+  }
+}

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

@@ -0,0 +1,86 @@
+# Radio
+
+## Size
+<sonic-code>
+  <template>
+    <div class="grid gap-2" formDataProvider="radioSizeExemple">
+      <sonic-radio name="size" value="2xs" size="2xs">2xs radio</sonic-radio>
+      <sonic-radio name="size" value="xs" size="xs">xs radio</sonic-radio>
+      <sonic-radio name="size" value="sm" size="sm">sm radio</sonic-radio>
+      <sonic-radio name="size" value="default" >default radio</sonic-radio>
+      <sonic-radio name="size" value="lg" size="lg">lg radio</sonic-radio>
+      <sonic-radio name="size" value="xl" size="xl">xl radio</sonic-radio>
+      <sonic-radio name="size" value="2xl" size="2xl">2xl radio</sonic-radio>
+    </div>
+  </template>
+</sonic-code>
+
+## Checked
+<sonic-code>
+  <template>
+  <sonic-radio checked
+    >Already checked radio
+  </sonic-radio>
+  </template>
+</sonic-code>
+
+## Disabled
+<sonic-code>
+  <template>
+  <sonic-radio disabled
+    >Disabled radio
+  </sonic-radio>
+  </template>
+</sonic-code>
+
+## Disabled and checked
+<sonic-code>
+  <template>
+  <sonic-radio disabled checked
+    >Disabled but already checked radio
+  </sonic-radio>
+  </template>
+</sonic-code>
+
+## radio with link
+<sonic-code>
+  <template>
+  <sonic-radio name="link" value="link">radio with <sonic-link href="#" class="underline text-info">link</sonic-link>
+  </template>
+</sonic-code>
+
+
+## Example of use
+<sonic-code>
+  <template>
+    <sonic-theme color background theme=${theme} class="p-8">
+      <sonic-subscriber dataProvider="jokeFilterRadio" class="text-xl my-4 block font-bold">
+        Remove following jokes :
+        <sonic-value key="blacklistFlags" class="block text-sm"></sonic-value>
+      </sonic-subscriber>
+      <div formDataProvider="jokeFilterRadio"  class="grid grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-2 mt-2 mb-3">
+        <sonic-radio name="blacklistFlags"  value="nsfw">nsfw</sonic-radio>
+        <sonic-radio name="blacklistFlags"  value="religious">religious</sonic-radio>
+        <sonic-radio name="blacklistFlags"  value="political">political</sonic-radio>
+        <sonic-radio name="blacklistFlags"  value="racist" checked >racist</sonic-radio>
+        <sonic-radio name="blacklistFlags"  value="sexist"  >sexist</sonic-radio>
+        <sonic-radio name="blacklistFlags"   value="explicit">explicit</sonic-radio>
+      </div>
+      <sonic-queue
+        lazyload
+        dataProviderExpression="joke/Any?amount=10&lang=en"
+        dataFilterProvider="jokeFilterRadio"
+        serviceURL="https://v2.jokeapi.dev"
+        key="jokes"
+      >
+        <template>
+          <div class="border-0 border-b-[1px] border-b-neutral-300  py-3 leading-tight">
+            <sonic-value key="joke"></sonic-value>
+            <sonic-value key="setup" class="font-bold"></sonic-value><br>
+            <sonic-value key="delivery"></sonic-value>
+          </div>
+        </template>
+      </sonic-queue>
+    </sonic-theme>
+  </template>
+</sonic-code>

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

@@ -0,0 +1,44 @@
+import {css} from "lit";
+import {customElement} from "lit/decorators.js";
+import {Checkbox} from "@supersoniks/concorde/core/components/ui/form/checkbox/checkbox";
+
+const tagName = "sonic-radio";
+/**
+ * ### Le composant sonic-radio étend sonic-checkbox en assignant sa propriété radio à true.
+ *
+ * * Le type d'input html utilisé passe également de checkbox à radio.
+ * * Le comportement est donc similaire à un bouton radio classique mais avec les fonctionnalités de sonic-checkbox (ie : Subscriber / FormElement / FormCheckable).
+ */
+
+@customElement(tagName)
+export class Radio extends Checkbox {
+  static styles = [
+    Checkbox.styles,
+    css`
+      :host input {
+        border-radius: 50%;
+      }
+      :host sonic-icon {
+        border-radius: 50%;
+        overflow: hidden;
+        background-color: var(--sc-primary-content);
+        line-height: 0;
+        display: block;
+        font-size: 1em;
+        height: 0.6em;
+        width: 0.6em;
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.radio = true;
+  }
+  connectedCallback() {
+    // this.iconName = "circle-small";
+    // this.iconPrefix = "solid";
+    super.connectedCallback();
+    this.type = "radio";
+  }
+}

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

@@ -0,0 +1,99 @@
+# Select
+
+## Options
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-select> 
+        <option value="">No Selection</option>
+        <option value="1">One</option>
+        <option value="2" selected>Two (set by "tag")</option>
+        <option value="3">Three</option>
+      </sonic-select>
+      <sonic-select options='[{"value":"", "wording":"Set options via \"attribute\""},
+              {"value":"dark", "wording":"dark (set by \"attribute\")", "selected" : "true"}, {"value":"auto", "wording":"auto"}
+              ]'> 
+      </sonic-select>
+    </div>
+  </template>
+</sonic-code>
+
+## Size
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-select size="2xs"><option>2xs</option></sonic-select>
+      <sonic-select size="xs"><option>xs</option></sonic-select>
+      <sonic-select size="sm"><option>sm</option></sonic-select>
+      <sonic-select size="md"><option>md</option></sonic-select>
+      <sonic-select size="default"><option>default</option></sonic-select>
+      <sonic-select size="lg"><option>lg</option></sonic-select>
+      <sonic-select size="xl"><option>xl</option></sonic-select>
+      <sonic-select size="2xl"><option>2xl</option></sonic-select>
+    </div>
+  </template>
+</sonic-code>
+
+
+## Multiple
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-select multiple> 
+        <option value="">Choose a number</option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </sonic-select>
+    </div>
+  </template>
+</sonic-code>
+
+
+## Disabled
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-select disabled> 
+        <option value="">Choose a number</option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </sonic-select>
+    </div>
+  </template>
+</sonic-code>
+
+## Example of use
+<sonic-code>
+  <template>
+    <sonic-theme color background theme=${theme} class="p-8">
+      <sonic-select
+        formDataProvider="select-filter"
+        name="lang"
+        value="fr"
+      >
+      <option value="fr">fr<option>
+      <optionn value="en">en<option>
+      </sonic-select>
+      <sonic-subscriber dataProvider="select-filter" class="text-xl my-4 block font-bold">
+        Blagues trouvées pour le code de langue"<span data-bind ::inner-html="$lang"></span>" :
+      </sonic-subscriber>
+      <sonic-queue
+        lazyload
+        dataProviderExpression="joke/Any?amount=10"
+        dataFilterProvider="select-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>