@supersoniks/concorde 3.1.1 → 3.1.3

package/src/core/components/ui/captcha/captcha.ts

@@ -1,8 +1,8 @@
-import {Subscriber} from "@supersoniks/concorde/mixins";
-import {PublisherManager} from "@supersoniks/concorde/utils";
-import {html, LitElement} from "lit";
-import {customElement, property} from "lit/decorators.js";
-import {ConcordeWindow} from "@supersoniks/concorde/core/_types/types";
+import { Subscriber } from "@supersoniks/concorde/mixins";
+import { PublisherManager } from "@supersoniks/concorde/utils";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ConcordeWindow } from "@supersoniks/concorde/core/_types/types";
 import Publisher from "@supersoniks/concorde/core/utils/PublisherProxy";
 
 declare const window: ConcordeWindow;
@@ -41,7 +41,8 @@ export class Captcha extends Subscriber(LitElement) {
     }
     super.connectedCallback();
     this.formPublisher = PublisherManager.get(
-      this.getAncestorAttributeValue("headersDataProvider") ?? this.getAncestorAttributeValue("formDataProvider")
+      this.getAncestorAttributeValue("headersDataProvider") ??
+        this.getAncestorAttributeValue("formDataProvider")
     );
 
     // add css to document to force z-index
@@ -52,15 +53,24 @@ export class Captcha extends Subscriber(LitElement) {
       document.head.appendChild(style);
     }
 
-    if (this.formPublisher && !(this.formPublisher.captchaToken as Publisher<string>).get()) {
+    if (
+      this.formPublisher &&
+      !(this.formPublisher.captchaToken as Publisher<string>).get()
+    ) {
       this.formPublisher.needsCaptchaValidation = true;
-      (this.formPublisher.captchaToken as Publisher<string>).onAssign(this.onCaptchaTokenChanged);
+      (this.formPublisher.captchaToken as Publisher<string>).onAssign(
+        this.onCaptchaTokenChanged
+      );
     }
   }
   disconnectedCallback(): void {
     if (this.formPublisher) {
-      (this.formPublisher.captchaToken as Publisher<string>).offAssign(this.onCaptchaTokenChanged);
+      (this.formPublisher.captchaToken as Publisher<string>).offAssign(
+        this.onCaptchaTokenChanged
+      );
+      this.formPublisher.captchaToken = "";
     }
+
     super.disconnectedCallback();
   }
   requestToken() {
@@ -68,17 +78,25 @@ export class Captcha extends Subscriber(LitElement) {
 
     // On récupère l'action liée au recaptcha,
     // et on vérifie qu'il ne contienne que des caractères alpha-numériques, underscore et slash
-    const action = (this.action ?? this.formPublisher.captchaAction?.get() ?? "submit").replace(/[^\w_/]/g, "_");
-    const method = (this.formPublisher.captchaMethod?.get() ?? "POST").toUpperCase();
+    const action = (
+      this.action ??
+      this.formPublisher.captchaAction?.get() ??
+      "submit"
+    ).replace(/[^\w_/]/g, "_");
+    const method = (
+      this.formPublisher.captchaMethod?.get() ?? "POST"
+    ).toUpperCase();
     delete this.formPublisher.captchaAction;
     delete this.formPublisher.captchaMethod;
 
     window.grecaptcha.ready(() => {
-      window.grecaptcha.execute(this.key, {action: method + "//" + action}).then((token: string) => {
-        if (this.formPublisher) {
-          this.formPublisher.captchaToken = token;
-        }
-      });
+      window.grecaptcha
+        .execute(this.key, { action: method + "//" + action })
+        .then((token: string) => {
+          if (this.formPublisher) {
+            this.formPublisher.captchaToken = token;
+          }
+        });
     });
   }
 

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

@@ -1,17 +1,27 @@
-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 { 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";
+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>;
 
@@ -21,7 +31,9 @@ type ListItem = Record<string, string>;
  * 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)))) {
+export class InputAutocomplete extends TemplatesContainer(
+  FormInput(FormElement(Subscriber(LitElement)))
+) {
   static styles = [
     customScroll,
     css`
@@ -41,20 +53,20 @@ export class InputAutocomplete extends TemplatesContainer(FormInput(FormElement(
   /**
    * Possibles mutualisation avec text
    */
-  @property({type: String}) size: Size = "md";
-  @property({type: String}) placeholder = "";
+  @property({ type: String }) size: Size = "md";
+  @property({ type: String }) placeholder = "";
   @property() filteredFields = "";
-  @property({type: Boolean}) readonly: boolean | null = null;
+  @property({ type: Boolean }) readonly: boolean | null = null;
 
-  @property({type: String}) dataProviderExpression = "";
-  @property({type: Boolean}) select?: boolean;
-  @property({type: String}) key = "";
+  @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 = "";
+  @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 = "";
+  @property({ type: String }) propertyName = "";
 
-  @queryAssignedNodes({slot: "prefix", flatten: true})
+  @queryAssignedNodes({ slot: "prefix", flatten: true })
   slotInputPrefixNodes!: Array<Node>;
 
   @state() hasInputPrefix = false;
@@ -88,9 +100,14 @@ export class InputAutocomplete extends TemplatesContainer(FormInput(FormElement(
   private updateSearchParameter = (value: string) => {
     if (value == "") {
       this.lastValidSearch = "";
+
       return;
     }
-    const found = this.queryQueueListItem(this.queueDataProvider, this.findSelection, this.setSearchFromSelection);
+    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) {
@@ -100,31 +117,58 @@ export class InputAutocomplete extends TemplatesContainer(FormInput(FormElement(
   };
 
   private initSearchParameter = () => {
-    this.queryQueueListItem(this.initQueueDataProvider, this.findSelection, this.setSearchFromSelection);
+    this.queryQueueListItem(
+      this.initQueueDataProvider,
+      this.findSelection,
+      this.setSearchFromSelection
+    );
   };
 
   private selectListItem = (listItem: ListItem) => {
-    const value = this.propertyName === "_self" ? listItem : listItem[this.propertyName || this.name];
+    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];
+    console.log(this.propertyName);
+
+    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];
+    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.lastValidSearch =
+      this.propertyName === "_self"
+        ? listItem
+        : listItem[this.searchParameter || this.propertyName || 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.queryQueueListItem(
+      this.queueDataProvider,
+      this.findSearchedItem,
+      this.selectListItem
+    );
+    if (
+      !this.select &&
+      this.lastValidSearch &&
+      this.lastValidSearch != this.searchPublisher?.get() &&
+      this.formValuePublisher?.get()
+    ) {
       this.formValuePublisher?.set("");
     }
   };
@@ -153,10 +197,14 @@ export class InputAutocomplete extends TemplatesContainer(FormInput(FormElement(
      * 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.searchPublisher = getPublisher(this.searchDataProvider)[
+      searchParameter
+    ];
     this.formValuePublisher = getPublisher(formDataProvider)[this.name];
     this.countPublisher = getPublisher(this.queueDataProvider).resultCount;
-    this.initCountPublisher = getPublisher(this.initQueueDataProvider).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
@@ -198,7 +246,11 @@ export class InputAutocomplete extends TemplatesContainer(FormInput(FormElement(
    *
    * @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) {
+  queryQueueListItem(
+    queueDataProvider: string,
+    itemFinder: (listItem: ListItem) => boolean,
+    itemMutator: (listItem: ListItem) => void
+  ) {
     const queuePublisher = PublisherManager.get(queueDataProvider);
     let listItem: ListItem | undefined;
     const listsDescriptors = queuePublisher.get();
@@ -250,20 +302,35 @@ export class InputAutocomplete extends TemplatesContainer(FormInput(FormElement(
           inlineContent
           size=${this.size}
         >
-          <slot name="prefix" slot="prefix" @slotchange=${this.hasSlotOrProps}></slot>
+          <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> `
+            ? 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-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}
+            .templates=${this.templateList.concat(this.templatePartsList)}
             displayContents
           >
           </sonic-queue>

package/src/core/utils/PublisherProxy.ts

@@ -77,8 +77,9 @@ export class PublisherProxy<T = any> {
    * Supprime les écouteurs associés
    */
   delete() {
-    for (const proxy of this._proxies_.values()) {
-      proxy.delete();
+    for (const key in this._proxies_.keys()) {
+      if ((key as string) == "_parent_") continue;
+      this._proxies_.get(key)?.delete();
     }
     this._invalidateListeners_.clear();
     this._assignListeners_.clear();