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

package/dist/js/core/components/ui/form/input-autocomplete/input-autocomplete.js

@@ -4,9 +4,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var InputAutocomplete_1;
 import { html, LitElement, css, nothing } from "lit";
 import { customElement, property, queryAssignedNodes, state, query, } from "lit/decorators.js";
-import { FormInput, FormElement, Subscriber, TemplatesContainer, } from "@supersoniks/concorde/mixins";
+import { FormInput, FormElement, 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";
@@ -16,75 +17,149 @@ import { PublisherManager } from "@supersoniks/concorde/utils";
 import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
 import { ResizeController } from "@lit-labs/observers/resize-controller.js";
 import { traverseDotNotation } from "@supersoniks/concorde/core/utils/Objects";
+const SUGGESTION_VALUE_ATTR = "data-autocomplete-value";
+const SUGGESTION_LABEL_ATTR = "data-autocomplete-label";
 /**
- * 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.
+ * Input avec suggestions (queue). Valeur formulaire via formDataProvider + name ;
+ * texte de recherche sur un store interne dédié.
  */
-let InputAutocomplete = class InputAutocomplete extends TemplatesContainer(FormInput(FormElement(Subscriber(LitElement)))) {
+let InputAutocomplete = InputAutocomplete_1 = class InputAutocomplete extends TemplatesContainer(FormInput(FormElement(LitElement))) {
     constructor() {
         super(...arguments);
-        /**
-         * Possibles mutualisation avec text
-         */
         this.size = "md";
         this.placeholder = "";
         this.filteredFields = "";
         this.readonly = null;
         this.dataProviderExpression = "";
-        this.minSearchLength = 0;
+        this.serviceURL = "";
+        this.minSearchLength = 3;
         this.key = "";
-        /** The parameter name to use in dataProviderExpression route */
         this.searchParameter = "";
-        /** The property name to search in the dataProviderExpression result, use "_self" if result is a string list */
         this.propertyName = "";
+        this.items = null;
         this.hasInputPrefix = false;
         this._resizeController = new ResizeController(this, {});
-        this.isPopVisible = false;
-        /**
-         * Les dataProviders
-         */
+        this.searchText = "";
         this.searchDataProvider = "";
+        /** Filtre queue : ne reçoit la saisie qu'à partir de minSearchLength. */
+        this.queueFilterDataProvider = "";
         this.initSearchDataProvider = "";
         this.queueDataProvider = "";
         this.initQueueDataProvider = "";
+        /** Public — cptypeahead. */
         this.lastValidSearch = "";
+        this.providersReady = false;
+        /** Évite de rouvrir le pop juste après une sélection. */
+        this.suppressPopOpen = false;
+        this.filterArmed = false;
+        this.updateSearchParameter = (value) => {
+            if (value == "" || value == null) {
+                if (this.isSearchParameter()) {
+                    this.lastValidSearch = "";
+                    this.setSearchText("");
+                }
+                return;
+            }
+            const found = this.queryQueueListItem(this.queueDataProvider, (listItem) => {
+                const itemVal = this.propertyName === "_self"
+                    ? listItem
+                    : listItem[this.propertyName || this.name];
+                return itemVal == value;
+            }, this.setSearchFromSelection);
+            if (!found) {
+                const foundInit = this.queryQueueListItem(this.initQueueDataProvider, (listItem) => {
+                    const itemVal = this.propertyName === "_self"
+                        ? listItem
+                        : listItem[this.propertyName || this.name];
+                    return itemVal == value;
+                }, this.setSearchFromSelection);
+                if (!foundInit && this.isSearchParameter()) {
+                    this.lastValidSearch = value;
+                    this.setSearchText(String(value));
+                }
+            }
+        };
+        this.onSearchPublisherAssign = (value) => {
+            const next = value == null ? "" : String(value);
+            if (this.searchText !== next) {
+                this.searchText = next;
+            }
+            this.syncQueueFilter(next);
+            this.openPopIfNeeded(next);
+        };
+        this.handleSearchActivity = () => {
+            const text = String(this.searchPublisher?.get() ?? this.searchText ?? "");
+            this.openPopIfNeeded(text, true);
+        };
+        /** keyup composé depuis l'input shadow — ouvre le pop dès qu'il y a assez de caractères. */
+        this.handleSearchKeyUp = (e) => {
+            if (e.ctrlKey || e.metaKey || e.altKey)
+                return;
+            if (["Escape", "Tab", "Enter", "ArrowUp", "ArrowDown"].includes(e.key))
+                return;
+            this.handleSearchActivity();
+        };
         /**
-         * Run when the formDataProvider's field is updated
-         *
-         * @param value
+         * Capture : empêche la nav FormElement (data-keyboard-nav) de sortir du champ
+         * et de fermer le pop. ArrowDown/Up gardent le pop ouvert et entrent dans la liste.
+         * Enter depuis le champ sélectionne la 1re suggestion.
          */
-        this.updateSearchParameter = (value) => {
-            if (value == "" && this.isSearchParameter()) {
-                this.lastValidSearch = "";
+        this.handleSearchKeyDown = (e) => {
+            const path = e.composedPath();
+            const fromMenuItem = path.some((n) => n?.tagName === "SONIC-MENU-ITEM");
+            // Enter / Espace sur une suggestion → sélection
+            if (fromMenuItem && (e.key === "Enter" || e.key === " ")) {
+                const item = path.find((n) => n?.tagName === "SONIC-MENU-ITEM");
+                if (!item)
+                    return;
+                e.preventDefault();
+                e.stopPropagation();
+                this.selectSuggestionItem(item);
                 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.isSearchParameter()) {
-                this.lastValidSearch = value;
-                this.searchPublisher?.set(this.lastValidSearch);
+            if (fromMenuItem)
+                return;
+            const text = String(this.searchPublisher?.get() ?? this.searchText ?? "");
+            if (!this.shouldShowSuggestions(text))
+                return;
+            // Enter dans le champ → 1re suggestion
+            if (e.key === "Enter") {
+                const items = this.getSuggestionItems();
+                if (!items.length)
+                    return;
+                e.preventDefault();
+                e.stopPropagation();
+                this.selectSuggestionItem(items[0]);
+                return;
             }
+            if (e.key !== "ArrowDown" && e.key !== "ArrowUp")
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            this.suppressPopOpen = false;
+            this.popElement?.show();
+            requestAnimationFrame(() => this.popElement?.show());
+            const items = this.getSuggestionItems();
+            if (!items.length)
+                return;
+            const target = e.key === "ArrowDown" ? items[0] : items[items.length - 1];
+            target.focus?.();
         };
-        this.updatePopContentVisibility = (value) => {
-            this.isPopVisible = (value?.length || 0) >= this.minSearchLength;
+        /**
+         * pointerdown : avant le click document qui ferme le pop.
+         * data-autocomplete-* (démos .items) ou value + textContent (templates legacy).
+         */
+        this.handleSuggestionPointerDown = (e) => {
+            const item = e.composedPath().find((n) => n?.tagName === "SONIC-MENU-ITEM");
+            if (!item)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            this.selectSuggestionItem(item);
         };
         this.initSearchParameter = () => {
             this.queryQueueListItem(this.initQueueDataProvider, this.findSelection, this.setSearchFromSelection);
         };
-        this.selectListItem = (listItem) => {
-            const value = this.propertyName === "_self"
-                ? listItem
-                : listItem[this.propertyName || this.name];
-            this.formValuePublisher?.set(value);
-        };
-        this.findSearchedItem = (listItem) => {
-            const value = this.propertyName === "_self"
-                ? listItem
-                : listItem[this.propertyName || this.searchParameter || this.name];
-            return value == this.searchPublisher?.get();
-        };
         this.findSelection = (listItem) => {
             const value = this.propertyName === "_self"
                 ? listItem
@@ -96,136 +171,225 @@ let InputAutocomplete = class InputAutocomplete extends TemplatesContainer(FormI
                 this.propertyName === "_self"
                     ? listItem
                     : listItem[this.searchParameter || this.propertyName || this.name];
-            if (this.isSearchParameter()) {
-                this.searchPublisher?.set(this.lastValidSearch);
-            }
+            this.setSearchText(this.lastValidSearch);
         };
-        this.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("");
+        this.handleFocusOut = (e) => {
+            const related = e.relatedTarget;
+            if (this.deepContains(this.popElement, related) ||
+                this.deepContains(this, related)) {
+                return;
             }
-        };
-        this.handleFocusOut = (_e) => {
-            // Utiliser setTimeout pour vérifier où va le focus après le focusout
-            // Cela permet de ne pas fermer le pop si le focus va vers un élément du pop
             setTimeout(() => {
+                if (this.suppressPopOpen)
+                    return;
                 const activeElement = document.activeElement;
-                if (!activeElement) {
-                    this.popElement.hide();
+                if (!activeElement ||
+                    this.deepContains(this.popElement, activeElement) ||
+                    this.deepContains(this, activeElement)) {
                     return;
                 }
-                // Vérifier si le focus est dans le popElement ou dans ce composant
-                const isInPop = this.popElement.contains(activeElement) ||
-                    this.popElement.shadowRoot?.contains(activeElement);
-                const isInComponent = this.contains(activeElement) ||
-                    this.shadowRoot?.contains(activeElement);
-                // Si le focus n'est ni dans le pop ni dans ce composant, fermer le pop
-                if (!isInPop && !isInComponent) {
-                    this.popElement.hide();
-                }
+                this.popElement?.hide();
             }, 0);
         };
     }
-    /**
-     * Les fonctions de gestion
-     */
     hasSlotOrProps() {
         this.hasInputPrefix = !!this.slotInputPrefixNodes?.length;
     }
+    searchFieldName() {
+        return this.searchParameter || this.name;
+    }
     isSearchParameter() {
         return !this.searchParameter || this.searchParameter === this.name;
     }
-    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";
+    shouldShowSuggestions(text) {
+        return ((text?.length || 0) >= this.minSearchLength || this.minSearchLength === 0);
+    }
+    isSearchFocused() {
+        const active = document.activeElement;
+        if (!active)
+            return false;
+        const input = this.renderRoot?.querySelector("sonic-input.form-element");
+        return !!(input &&
+            (active === input ||
+                input.contains(active) ||
+                input.shadowRoot?.contains(active)));
+    }
+    openPopIfNeeded(text, fromUserInput = false) {
+        if (this.suppressPopOpen)
+            return;
+        if (!this.shouldShowSuggestions(text)) {
+            this.popElement?.hide();
+            return;
+        }
+        if (fromUserInput || this.isSearchFocused() || this.popElement?.open) {
+            this.popElement?.show();
+            // 2e show après le render Lit du pop (remettait display:none)
+            requestAnimationFrame(() => {
+                if (this.suppressPopOpen)
+                    return;
+                const current = String(this.searchPublisher?.get() ?? this.searchText ?? "");
+                if (this.shouldShowSuggestions(current)) {
+                    this.popElement?.show();
+                }
+            });
+        }
+    }
+    setSearchText(value) {
+        const next = value == null || value === ""
+            ? ""
+            : typeof value === "string"
+                ? value
+                : String(value);
+        this.searchText = next;
+        if (this.searchPublisher && this.searchPublisher.get() !== next) {
+            this.searchPublisher.set(next);
+        }
+        this.syncQueueFilter(next);
+    }
+    /** Pousse vers la queue seulement si assez de caractères. */
+    syncQueueFilter(text) {
+        if (!this.queueFilterPublisher)
+            return;
+        const ready = this.minSearchLength === 0 || text.length >= this.minSearchLength;
+        if (ready) {
+            if (!this.filterArmed || this.queueFilterPublisher.get() !== text) {
+                this.queueFilterPublisher.set(text);
+            }
+            this.filterArmed = true;
+            return;
+        }
+        if (this.filterArmed) {
+            this.filterArmed = false;
+            this.clearSearchQueueResults();
+        }
+    }
+    clearSearchQueueResults() {
+        if (!this.queueDataProvider)
+            return;
+        const queuePub = PublisherManager.get(this.queueDataProvider);
+        const descriptors = queuePub.get();
+        if (Array.isArray(descriptors)) {
+            for (const d of descriptors) {
+                if (d?.dataProvider) {
+                    PublisherManager.getInstance().delete(d.dataProvider);
+                }
+            }
+        }
+        queuePub.set([]);
+    }
+    applySuggestion(value, label) {
+        this.suppressPopOpen = true;
+        const formValue = value;
+        const searchLabel = label ||
+            (typeof formValue === "string" ? formValue : String(formValue ?? ""));
+        this.formValuePublisher?.set(formValue);
+        this.lastValidSearch = this.isSearchParameter() ? formValue : searchLabel;
+        this.setSearchText(this.isSearchParameter() ? String(formValue ?? "") : searchLabel);
+        this.popElement?.hide();
+        // Laisse le cycle hide/focus se terminer avant de réautoriser l'ouverture.
+        requestAnimationFrame(() => {
+            this.suppressPopOpen = false;
+        });
+    }
+    getSuggestionItems() {
+        return [
+            ...(this.renderRoot?.querySelectorAll("sonic-menu-item") ?? []),
+        ];
+    }
+    selectSuggestionItem(item) {
+        const value = item.getAttribute(SUGGESTION_VALUE_ATTR) ?? item.value ?? null;
+        const label = item.getAttribute(SUGGESTION_LABEL_ATTR) ??
+            (item.textContent || "").trim();
+        if (value == null && !label)
+            return;
+        this.applySuggestion(value ?? label, label);
+    }
+    setupProviders() {
+        const searchParameter = this.searchFieldName();
+        const formDataProvider = this.formDataProvider ||
+            this.getAncestorAttributeValue("formDataProvider") ||
+            "";
+        const instanceId = InputAutocomplete_1.instanceCounter++;
+        const dpPrefix = (formDataProvider || "form") +
+            "__" +
+            (this.name || "field") +
+            "__autocomplete__" +
+            instanceId;
         this.initSearchDataProvider = `${dpPrefix}_init_search__`;
         this.initQueueDataProvider = `${dpPrefix}_init_queue__`;
         this.searchDataProvider = `${dpPrefix}_search__`;
+        this.queueFilterDataProvider = `${dpPrefix}_queue_filter__`;
         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.searchPublisher =
+            getPublisher(this.searchDataProvider)[searchParameter];
+        this.queueFilterPublisher =
+            getPublisher(this.queueFilterDataProvider)[searchParameter];
         this.formValuePublisher = traverseDotNotation(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].set(this.value);
+            getPublisher(this.initSearchDataProvider)[this.name].set(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);
-        this.searchPublisher?.onAssign(this.updatePopContentVisibility);
+        this.searchPublisher?.onAssign(this.onSearchPublisherAssign);
+        const existing = this.searchPublisher?.get();
+        if (existing != null && existing !== "") {
+            this.searchText = String(existing);
+            this.syncQueueFilter(this.searchText);
+        }
+        this.providersReady = true;
+    }
+    teardownProviders() {
+        this.initCountPublisher?.offAssign(this.initSearchParameter);
+        this.formValuePublisher?.offAssign(this.updateSearchParameter);
+        this.searchPublisher?.offAssign(this.onSearchPublisherAssign);
+        const getPublisher = PublisherManager.get;
+        if (this.initSearchDataProvider)
+            getPublisher(this.initSearchDataProvider).delete();
+        if (this.initQueueDataProvider)
+            getPublisher(this.initQueueDataProvider).delete();
+        if (this.searchDataProvider)
+            getPublisher(this.searchDataProvider).delete();
+        if (this.queueFilterDataProvider)
+            getPublisher(this.queueFilterDataProvider).delete();
+        if (this.queueDataProvider)
+            getPublisher(this.queueDataProvider).delete();
+        this.providersReady = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setupProviders();
+        this.addEventListener("keyup", this.handleSearchKeyUp);
+        this.addEventListener("keydown", this.handleSearchKeyDown, true);
     }
     firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
-        // Écouter le focusout sur le popElement pour fermer le pop quand le focus sort
         this.popElement.addEventListener("focusout", this.handleFocusOut);
     }
     disconnectedCallback() {
+        this.removeEventListener("keyup", this.handleSearchKeyUp);
+        this.removeEventListener("keydown", this.handleSearchKeyDown, true);
+        this.teardownProviders();
+        this.popElement?.removeEventListener("focusout", this.handleFocusOut);
         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();
-        this.searchPublisher?.offAssign(this.updatePopContentVisibility);
-        // Retirer l'écouteur de focusout
-        this.popElement.removeEventListener("focusout", this.handleFocusOut);
     }
-    /**
-     * @param queueDataProvider
-     * @param itemFinder
-     * @param itemMutator
-     *
-     * @return bool|undefined True if item found, false otherwise, undefined if result is not a list
-     */
     queryQueueListItem(queueDataProvider, itemFinder, itemMutator) {
         const queuePublisher = PublisherManager.get(queueDataProvider);
         let listItem;
-        let listsDescriptors = queuePublisher.get();
+        const listsDescriptors = queuePublisher.get();
         if (!listsDescriptors || !Array.isArray(listsDescriptors)) {
             return false;
         }
         if (!listsDescriptors.length)
             return false;
         for (const listDescriptor of listsDescriptors) {
-            let list = PublisherManager.get(listDescriptor.dataProvider).get();
+            const list = PublisherManager.get(listDescriptor.dataProvider).get();
             if (!Array.isArray(list))
                 continue;
             listItem = list.find(itemFinder);
-            if (listItem) {
+            if (listItem)
                 break;
-            }
         }
         if (listItem) {
             itemMutator(listItem);
@@ -234,40 +398,59 @@ let InputAutocomplete = class InputAutocomplete extends TemplatesContainer(FormI
         return false;
     }
     setSelectionRange(start, end) {
-        this.querySelector("sonic-input")?.setSelectionRange(start, end);
+        this.renderRoot?.querySelector("sonic-input.form-element")?.setSelectionRange(start, end);
     }
     handleHide() {
         if (!this.select)
             return;
-        if (this.searchPublisher?.get() == "") {
+        if (!this.searchText) {
             this.lastValidSearch = "";
             this.formValuePublisher?.set("");
             return;
         }
-        this.searchPublisher?.set(this.lastValidSearch);
+        this.setSearchText(this.lastValidSearch);
     }
-    getInputValue() {
-        if (!this.isSearchParameter()) {
-            return this.lastValidSearch;
+    /** Contient `node` même à travers des shadow roots imbriqués. */
+    deepContains(container, node) {
+        if (!container || !node)
+            return false;
+        let current = node;
+        while (current) {
+            if (current === container || container.contains(current))
+                return true;
+            const root = current.getRootNode();
+            if (root instanceof ShadowRoot) {
+                current = root.host;
+            }
+            else {
+                break;
+            }
         }
-        return this.searchPublisher?.get();
+        return false;
     }
     handleFocus() {
-        this.popElement.show();
+        const text = String(this.searchText ?? "");
+        if (this.shouldShowSuggestions(text)) {
+            this.suppressPopOpen = false;
+            this.popElement?.show();
+        }
     }
     render() {
+        if (!this.providersReady || !this.searchDataProvider) {
+            return nothing;
+        }
+        const templates = this.templateList.concat(this.templatePartsList);
         return html `
       <sonic-pop manual style="display:block;" @hide=${this.handleHide}>
         <sonic-input
           class="form-element"
-          dataProvider="${this.initSearchDataProvider + Math.random()}"
-          noAutofill
-          formDataProvider="${this.searchDataProvider}"
+          .formDataProvider=${this.searchDataProvider}
+          .value=${this.searchText}
           type="search"
-          data-keyboard-nav="${this.getAttribute("data-keyboard-nav") || ""}"
+          data-keyboard-nav=""
           label="${ifDefined(this.label)}"
           description="${ifDefined(this.description)}"
-          name="${ifDefined(this.searchParameter || this.name)}"
+          name="${ifDefined(this.searchFieldName())}"
           ?required=${this.required}
           placeholder="${ifDefined(this.placeholder)}"
           ?readonly="${this.readonly}"
@@ -276,7 +459,7 @@ let InputAutocomplete = class InputAutocomplete extends TemplatesContainer(FormI
           inlineContent
           size=${this.size}
           @focus=${this.handleFocus}
-          value=${ifDefined(this.getInputValue())}
+          @change=${this.handleSearchActivity}
         >
           <slot
             name="prefix"
@@ -298,33 +481,40 @@ let InputAutocomplete = class InputAutocomplete extends TemplatesContainer(FormI
         <sonic-menu
           slot="content"
           class="custom-scroll"
-          style="${this.offsetWidth
-            ? `width: ${this.offsetWidth}px`
-            : ""}; display:${this.isPopVisible ? "block" : "none"};"
+          data-on-select="keep"
+          style="${this.offsetWidth ? `width: ${this.offsetWidth}px` : ""}"
+          @pointerdown=${this.handleSuggestionPointerDown}
         >
           <sonic-queue
             dataProvider="${this.queueDataProvider}"
             filteredFields=${this.filteredFields}
             dataProviderExpression="${this.dataProviderExpression}"
-            dataFilterProvider="${this.searchDataProvider}"
-            key="${this.key}"
-            .templates=${this.templateList.concat(this.templatePartsList)}
-            displayContents
-          >
-          </sonic-queue>
-          <sonic-queue
-            noLazyload
-            loader="no-loader"
-            dataProvider="${this.initQueueDataProvider}"
-            filteredFields=${this.filteredFields}
-            dataProviderExpression="${this.dataProviderExpression}"
-            dataFilterProvider="${this.initSearchDataProvider}"
+            dataFilterProvider="${this.queueFilterDataProvider}"
+            serviceURL=${ifDefined(this.serviceURL || undefined)}
             key="${this.key}"
+            .templates=${templates}
+            .items=${this.items}
             displayContents
           >
           </sonic-queue>
         </sonic-menu>
       </sonic-pop>
+      <!-- Lookup valeur initiale : hors menu, jamais displayContents (sinon visible). -->
+      <sonic-queue
+        class="init-queue"
+        hidden
+        noLazyload
+        loader="no-loader"
+        dataProvider="${this.initQueueDataProvider}"
+        filteredFields=${this.filteredFields}
+        dataProviderExpression="${this.dataProviderExpression}"
+        dataFilterProvider="${this.initSearchDataProvider}"
+        serviceURL=${ifDefined(this.serviceURL || undefined)}
+        key="${this.key}"
+        .templates=${templates}
+        .items=${this.items}
+      >
+      </sonic-queue>
     `;
     }
 };
@@ -334,7 +524,6 @@ InputAutocomplete.styles = [
       :host {
         display: block;
       }
-      /**disable mouse if there is an attribute readonly  */
       :host([readonly]),
       :host([disabled]) {
         pointer-events: none;
@@ -351,8 +540,18 @@ InputAutocomplete.styles = [
         min-width: 14rem;
         width: 100%;
       }
+
+      .init-queue {
+        display: none !important;
+        position: absolute;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        pointer-events: none;
+      }
     `,
 ];
+InputAutocomplete.instanceCounter = 0;
 __decorate([
     property({ type: String })
 ], InputAutocomplete.prototype, "size", void 0);
@@ -368,6 +567,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], InputAutocomplete.prototype, "dataProviderExpression", void 0);
+__decorate([
+    property({ type: String })
+], InputAutocomplete.prototype, "serviceURL", void 0);
 __decorate([
     property({ type: Number })
 ], InputAutocomplete.prototype, "minSearchLength", void 0);
@@ -383,6 +585,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], InputAutocomplete.prototype, "propertyName", void 0);
+__decorate([
+    property({ type: Function, attribute: false })
+], InputAutocomplete.prototype, "items", void 0);
 __decorate([
     queryAssignedNodes({ slot: "prefix", flatten: true })
 ], InputAutocomplete.prototype, "slotInputPrefixNodes", void 0);
@@ -394,11 +599,11 @@ __decorate([
 ], InputAutocomplete.prototype, "popElement", void 0);
 __decorate([
     state()
-], InputAutocomplete.prototype, "isPopVisible", void 0);
+], InputAutocomplete.prototype, "searchText", void 0);
 __decorate([
     state()
-], InputAutocomplete.prototype, "lastValidSearch", void 0);
-InputAutocomplete = __decorate([
+], InputAutocomplete.prototype, "searchDataProvider", void 0);
+InputAutocomplete = InputAutocomplete_1 = __decorate([
     customElement("sonic-input-autocomplete")
 ], InputAutocomplete);
 export { InputAutocomplete };