@supersoniks/concorde 1.1.47 → 1.1.48

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

@@ -4,111 +4,261 @@ 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;
 };
-import { html, LitElement, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { 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 { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
+import { ResizeController } from "@lit-labs/observers/resize_controller.js";
 /**
  * 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.
  */
-let InputAutocomplete = class InputAutocomplete extends TemplatesContainer(Subscriber(LitElement)) {
+let InputAutocomplete = class InputAutocomplete extends TemplatesContainer(FormInput(FormElement(Subscriber(LitElement)))) {
     constructor() {
         super(...arguments);
-        // Filtering input
-        this._name = "";
-        this.forceAutoFill = false;
+        /**
+         * Possibles mutualisation avec text
+         */
+        this.size = "md";
         this.placeholder = "";
         this.filteredFields = "";
         this.readonly = null;
         this.dataProviderExpression = "";
         this.key = "";
-        this.value = "";
-        this.formDataProvider = "";
+        this.searchParameter = "";
+        this.hasInputPrefix = false;
+        this._resizeController = new ResizeController(this, {});
+        /**
+         * Les dataProviders
+         */
+        this.searchDataProvider = "";
+        this.initSearchDataProvider = "";
+        this.queueDataProvider = "";
+        this.initQueueDataProvider = "";
+        this.lastValidSearch = "";
+        this.updateSearchParameter = (value) => {
+            if (value == "") {
+                this.lastValidSearch = "";
+                return;
+            }
+            this.queryQueueListItem(this.queueDataProvider, this.findSelection, this.setSearchFromSelection);
+        };
+        this.initSearchParameter = () => {
+            this.queryQueueListItem(this.initQueueDataProvider, this.findSelection, this.setSearchFromSelection);
+        };
+        this.selectListItem = (listItem) => {
+            var _a;
+            (_a = this.formValuePublisher) === null || _a === void 0 ? void 0 : _a.set(listItem[this.name]);
+        };
+        this.findSearchedItem = (listItem) => {
+            var _a;
+            return (listItem[this.searchParameter || this.name] == ((_a = this.searchPublisher) === null || _a === void 0 ? void 0 : _a.get()));
+        };
+        this.findSelection = (listItem) => {
+            return listItem[this.name] == this.value;
+        };
+        this.setSearchFromSelection = (listItem) => {
+            var _a;
+            this.lastValidSearch = listItem[this.searchParameter || this.name];
+            (_a = this.searchPublisher) === null || _a === void 0 ? void 0 : _a.set(this.lastValidSearch);
+        };
+        this.updateActiveSelection = () => {
+            var _a, _b, _c;
+            this.queryQueueListItem(this.queueDataProvider, this.findSearchedItem, this.selectListItem);
+            if (!this.select &&
+                this.lastValidSearch &&
+                this.lastValidSearch != ((_a = this.searchPublisher) === null || _a === void 0 ? void 0 : _a.get()) &&
+                ((_b = this.formValuePublisher) === null || _b === void 0 ? void 0 : _b.get())) {
+                (_c = this.formValuePublisher) === null || _c === void 0 ? void 0 : _c.set("");
+            }
+        };
     }
-    get name() {
-        return this._name;
+    /**
+     * Les fonctions de gestion
+     */
+    hasSlotOrProps() {
+        var _a;
+        this.hasInputPrefix = !!((_a = this.slotInputPrefixNodes) === null || _a === void 0 ? void 0 : _a.length);
     }
-    set name(value) {
-        if (this.hasAttribute("name") && !this.forceAutoFill)
-            value = this.getAttribute("name");
-        this._name = value;
-        this.requestUpdate();
+    connectedCallback() {
+        var _a, _b, _c;
+        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");
+        const dpPrefix = formDataProvider + "__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;
+        }
+        (_a = this.initCountPublisher) === null || _a === void 0 ? void 0 : _a.onAssign(this.initSearchParameter);
+        /**
+         * Lorsque la sélection change, on met à jour la valeur de recherche
+         */
+        (_b = this.formValuePublisher) === null || _b === void 0 ? void 0 : _b.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
+         */
+        (_c = this.countPublisher) === null || _c === void 0 ? void 0 : _c.onAssign(this.updateActiveSelection);
     }
-    get description() {
-        return this._description;
+    disconnectedCallback() {
+        var _a, _b, _c;
+        super.disconnectedCallback();
+        (_a = this.initCountPublisher) === null || _a === void 0 ? void 0 : _a.offAssign(this.initSearchParameter);
+        (_b = this.formValuePublisher) === null || _b === void 0 ? void 0 : _b.offAssign(this.updateSearchParameter);
+        (_c = this.countPublisher) === null || _c === void 0 ? void 0 : _c.offAssign(this.updateActiveSelection);
+        const getPublisher = PublisherManager.get;
+        getPublisher(this.initSearchDataProvider).delete();
+        getPublisher(this.initQueueDataProvider).delete();
+        getPublisher(this.searchDataProvider).delete();
+        getPublisher(this.queueDataProvider).delete();
     }
-    set description(value) {
-        if (this.hasAttribute("description") && !this.forceAutoFill)
-            value = this.getAttribute("description");
-        this._description = value;
-        this.requestUpdate();
+    queryQueueListItem(queueDataProvider, itemFinder, itemMutator) {
+        const queuePublisher = PublisherManager.get(queueDataProvider);
+        let listItem;
+        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);
+        }
     }
-    get label() {
-        return this._label;
+    setSelectionRange(start, end) {
+        var _a;
+        (_a = this.querySelector("sonic-input")) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
     }
-    set label(value) {
-        if (this.hasAttribute("label") && !this.forceAutoFill)
-            value = this.getAttribute("label");
-        this._label = value;
-        this.requestUpdate();
-    }
-    connectedCallback() {
-        this.formDataProvider = this.getAncestorAttributeValue("formDataProvider");
-        super.connectedCallback();
+    handleHide() {
+        var _a, _b, _c;
+        if (!this.select)
+            return;
+        if (((_a = this.searchPublisher) === null || _a === void 0 ? void 0 : _a.get()) == "") {
+            this.lastValidSearch = "";
+            (_b = this.formValuePublisher) === null || _b === void 0 ? void 0 : _b.set("");
+            return;
+        }
+        (_c = this.searchPublisher) === null || _c === void 0 ? void 0 : _c.set(this.lastValidSearch);
     }
     render() {
         return html `
-      <sonic-pop noToggle style="display:block;">
+      <sonic-pop noToggle style="display:block;" @hide=${this.handleHide}>
         <sonic-input
+          dataProvider="${this.initSearchDataProvider + Math.random()}"
+          formDataProvider="${this.searchDataProvider}"
           type="search"
-          data-keyboard-nav="nav-autocomplete"
+          data-keyboard-nav="${this.getAttribute("data-keyboard-nav") || ""}"
           label="${ifDefined(this.label)}"
           description="${ifDefined(this.description)}"
-          name="${ifDefined(this.name)}"
-          value="${ifDefined(this.value)}"
+          name="${ifDefined(this.searchParameter || this.name)}"
+          placeholder="${ifDefined(this.placeholder)}"
+          ?readonly="${this.readonly}"
           autocomplete="off"
           clearable
-        ></sonic-input>
-        <sonic-menu slot="content">
+          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.formDataProvider}"
+            dataFilterProvider="${this.searchDataProvider}"
             key="${this.key}"
             .templates=${this.templateList}
             displayContents
           >
           </sonic-queue>
+          <sonic-queue
+            noLazyload
+            dataProvider="${this.initQueueDataProvider}"
+            filteredFields=${this.filteredFields}
+            dataProviderExpression="${this.dataProviderExpression}"
+            dataFilterProvider="${this.initSearchDataProvider}"
+            key="${this.key}"
+            displayContents
+          >
+          </sonic-queue>
         </sonic-menu>
       </sonic-pop>
     `;
     }
 };
 InputAutocomplete.styles = [
+    customScroll,
     css `
       :host {
         display: block;
       }
+
+      sonic-menu {
+        display: block;
+        max-height: clamp(20rem, 55vh, 35rem);
+        min-width: 14rem;
+        width: 100%;
+      }
     `,
 ];
 __decorate([
-    property()
-], InputAutocomplete.prototype, "name", null);
-__decorate([
-    property()
-], InputAutocomplete.prototype, "forceAutoFill", void 0);
-__decorate([
-    property()
-], InputAutocomplete.prototype, "description", null);
-__decorate([
-    property()
-], InputAutocomplete.prototype, "label", null);
+    property({ type: String })
+], InputAutocomplete.prototype, "size", void 0);
 __decorate([
     property({ type: String })
 ], InputAutocomplete.prototype, "placeholder", void 0);
@@ -121,12 +271,21 @@ __decorate([
 __decorate([
     property({ type: String })
 ], InputAutocomplete.prototype, "dataProviderExpression", void 0);
+__decorate([
+    property({ type: Boolean })
+], InputAutocomplete.prototype, "select", void 0);
 __decorate([
     property({ type: String })
 ], InputAutocomplete.prototype, "key", void 0);
 __decorate([
     property({ type: String })
-], InputAutocomplete.prototype, "value", void 0);
+], InputAutocomplete.prototype, "searchParameter", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "prefix" })
+], InputAutocomplete.prototype, "slotInputPrefixNodes", void 0);
+__decorate([
+    state()
+], InputAutocomplete.prototype, "hasInputPrefix", void 0);
 InputAutocomplete = __decorate([
     customElement("sonic-input-autocomplete")
 ], InputAutocomplete);

package/core/components/ui/form/textarea/textarea.d.ts

@@ -56,6 +56,10 @@ declare const Textarea_base: {
         hasAttribute(attributeName: string): boolean;
         disconnectedCallback(): void;
         getBoundingClientRect(): DOMRect;
+        onConnected(callback: (component: any) => void): void;
+        offConnected(callback: (component: any) => void): void;
+        onDisconnected(callback: (component: any) => void): void;
+        offDisconnected(callback: (component: any) => void): void;
     };
 } & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<import("../../../../_types/types").CoreJSType>) & typeof LitElement;
 export declare class Textarea extends Textarea_base {

package/core/components/ui/modal/modal.d.ts

@@ -11,6 +11,8 @@ declare type ModalCreateOptions = {
     paddingY?: string;
     width?: string;
     maxWidth?: string;
+    height?: string;
+    maxHeight?: string;
     removeOnHide?: boolean;
 };
 declare const Modal_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<import("@supersoniks/concorde/core/_types/types").CoreJSType>) & typeof LitElement;

package/core/components/ui/modal/modal.js

@@ -41,6 +41,10 @@ let Modal = class Modal extends Subscriber(LitElement) {
             modal.maxWidth = options === null || options === void 0 ? void 0 : options.maxWidth;
         if (options.width)
             modal.width = options === null || options === void 0 ? void 0 : options.width;
+        if (options.maxHeight)
+            modal.maxHeight = options === null || options === void 0 ? void 0 : options.maxHeight;
+        if (options.height)
+            modal.height = options === null || options === void 0 ? void 0 : options.height;
         if (options.paddingX)
             modal.style.setProperty("--sc-modal-px", options === null || options === void 0 ? void 0 : options.paddingX);
         if (options.paddingY)
@@ -48,8 +52,7 @@ let Modal = class Modal extends Subscriber(LitElement) {
         if (options.zIndex)
             modal.style.setProperty("--sc-modal-z-index", options === null || options === void 0 ? void 0 : options.zIndex);
         // inner content
-        modal.innerHTML =
-            `<sonic-modal-close></sonic-modal-close><sonic-modal-content>${options.content}</sonic-modal-content>` || "";
+        modal.innerHTML = `<sonic-modal-close></sonic-modal-close><sonic-modal-content>${options.content}</sonic-modal-content>` || "";
         const container = document.querySelector("sonic-theme") || document.body;
         container.appendChild(modal);
         modal.show();
@@ -182,7 +185,7 @@ Modal.styles = [
         --sc-modal-py: 2.5rem;
         --sc-modal-px: 1.5rem;
         --sc-modal-max-w: min(100vw, 64ch);
-        --sc-modal-max-h: 80vh;
+        --sc-modal-max-h: 85vh;
         --sc-modal-rounded: var(--sc-rounded-lg);
         --sc-modal-z-index: 990;
       }

package/core/components/ui/pop/pop.js

@@ -51,11 +51,13 @@ let Pop = Pop_1 = class Pop extends LitElement {
             this.lastContentY = 0;
             this.runPositioningLoop();
         }
+        this.dispatchEvent(new CustomEvent("show"));
     }
     _hide() {
         this.open = false;
         this.popContent.setAttribute("tabindex", "-1");
         this.positioningRuns = false;
+        this.dispatchEvent(new CustomEvent("hide"));
     }
     _handleClosePop(e) {
         const path = e.composedPath();
@@ -66,7 +68,8 @@ let Pop = Pop_1 = class Pop extends LitElement {
             const isCloseManual = HTML.getAncestorAttributeValue(target, "data-on-select") === "keep";
             if (e.type == "pointerdown" && popContainsTarget)
                 return;
-            if (e.type == "click" && ((popContainsTarget && isCloseManual) || !popContentContainsTarget))
+            if (e.type == "click" &&
+                ((popContainsTarget && isCloseManual) || !popContentContainsTarget))
                 return;
             pop._hide();
         });
@@ -143,9 +146,11 @@ let Pop = Pop_1 = class Pop extends LitElement {
             x = xRight;
         if (contentRect.y < shiftPadding && placement == "top")
             y = yBottom;
-        if (contentRect.x + contentRect.width > window.innerWidth - shiftPadding && placement == "right")
+        if (contentRect.x + contentRect.width > window.innerWidth - shiftPadding &&
+            placement == "right")
             x = xLeft;
-        if (contentRect.y + contentRect.height > window.innerHeight - shiftPadding && placement == "bottom")
+        if (contentRect.y + contentRect.height > window.innerHeight - shiftPadding &&
+            placement == "bottom")
             y = yTop;
         this.lastContentX += x - contentRect.x;
         this.lastContentY += y - contentRect.y;
@@ -161,10 +166,12 @@ let Pop = Pop_1 = class Pop extends LitElement {
             this.lastContentY += -contentRect.y;
         }
         if (contentRect.x + contentRect.width > window.innerWidth) {
-            this.lastContentX += window.innerWidth - (contentRect.x + contentRect.width);
+            this.lastContentX +=
+                window.innerWidth - (contentRect.x + contentRect.width);
         }
         if (contentRect.y + contentRect.height > window.innerHeight) {
-            this.lastContentY += window.innerHeight - (contentRect.y + contentRect.height);
+            this.lastContentY +=
+                window.innerHeight - (contentRect.y + contentRect.height);
         }
         Object.assign(this.popContent.style, {
             left: `${this.lastContentX}px`,
@@ -173,7 +180,11 @@ let Pop = Pop_1 = class Pop extends LitElement {
     }
     render() {
         return html `
-      <slot @click=${this._toggle} @keydown=${this._toggle} class="contents"></slot>
+      <slot
+        @click=${this._toggle}
+        @keydown=${this._toggle}
+        class="contents"
+      ></slot>
       <slot
         name="content"
         tabindex="-1"

package/core/decorators/Subscriber.d.ts

@@ -0,0 +1,3 @@
+export declare function bind(value: string): (target: any, propertyKey: string) => void;
+export declare function onAssign(values: Array<string>): (target: any, propertyKey: string, descriptor: PropertyDescriptor) => void;
+export declare function autoFill(value: string): (target: any) => void;

package/core/decorators/Subscriber.js

@@ -0,0 +1,78 @@
+import { Objects, PublisherManager } from "@supersoniks/concorde/utils";
+export function bind(value) {
+    const split = value.split(".");
+    if (split.length == 0) {
+        return function () {
+            //Empty def function
+        };
+    }
+    const dataProvider = split.shift() || "";
+    let publisher = PublisherManager.get(dataProvider);
+    publisher = Objects.traverse(publisher, split);
+    return function (target, propertyKey) {
+        let onAssign;
+        target.onConnected((component) => {
+            onAssign = (value) => {
+                component[propertyKey] = value;
+            };
+            publisher.onAssign(onAssign);
+        });
+        target.onDisconnected(() => {
+            publisher.offAssign(onAssign);
+        });
+    };
+}
+export function onAssign(values) {
+    const onAssignValues = [];
+    const confs = [];
+    let callback;
+    for (let i = 0; i < values.length; i++) {
+        const value = values[i];
+        const split = value.split(".");
+        if (split.length == 0) {
+            continue;
+        }
+        const dataProvider = split.shift() || "";
+        let publisher = PublisherManager.get(dataProvider);
+        publisher = Objects.traverse(publisher, split);
+        const onAssign = (value) => {
+            onAssignValues[i] = value;
+            if (onAssignValues.filter((v) => v !== null).length == values.length)
+                callback(...onAssignValues);
+        };
+        confs.push({ publisher, onAssign });
+    }
+    return function (target, propertyKey, descriptor) {
+        propertyKey;
+        target.onConnected((component) => {
+            callback = descriptor.value.bind(component);
+            for (const conf of confs) {
+                conf.publisher.onAssign(conf.onAssign);
+            }
+        });
+        target.onDisconnected(() => {
+            for (const conf of confs) {
+                conf.publisher.offAssign(conf.onAssign);
+            }
+        });
+    };
+}
+export function autoFill(value) {
+    const split = value.split(".");
+    if (split.length == 0) {
+        return function () {
+            //Empty def function
+        };
+    }
+    const dataProvider = split.shift() || "";
+    let publisher = PublisherManager.get(dataProvider);
+    publisher = Objects.traverse(publisher, split);
+    return function (target) {
+        target.prototype.connectedCallbackCalls.add((component) => {
+            publisher.startTemplateFilling(component);
+        });
+        target.prototype.disconnectedCallbackCalls.add((component) => {
+            publisher.stopTemplateFilling(component);
+        });
+    };
+}

package/core/mixins/Fetcher.d.ts

@@ -70,7 +70,9 @@ declare const Fetcher: <T extends Constructor<SubscriberInterface<PropsType>>, P
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
         displayContents: boolean;
-        shadowRoot?: ShadowRoot | undefined;
+        shadowRoot?: ShadowRoot | undefined; /**
+         * isFirstLoad vaut true jusqu'au premier chargement de données
+         */
         dispatchEvent(event: Event): void;
         setAttribute(name: string, value: string): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
@@ -82,6 +84,10 @@ declare const Fetcher: <T extends Constructor<SubscriberInterface<PropsType>>, P
         getAttribute(name: string): string;
         hasAttribute(attributeName: string): boolean;
         getBoundingClientRect(): DOMRect;
+        onConnected(callback: (component: any) => void): void;
+        offConnected(callback: (component: any) => void): void;
+        onDisconnected(callback: (component: any) => void): void;
+        offDisconnected(callback: (component: any) => void): void;
     };
 } & T;
 export default Fetcher;

package/core/mixins/FormCheckable.d.ts

@@ -82,6 +82,10 @@ declare const Form: <T extends Constructor<FormElementInterface>>(superClass: T)
         getAttribute(name: string): string;
         hasAttribute(attributeName: string): boolean;
         getBoundingClientRect(): DOMRect;
+        onConnected(callback: (component: any) => void): void;
+        offConnected(callback: (component: any) => void): void;
+        onDisconnected(callback: (component: any) => void): void;
+        offDisconnected(callback: (component: any) => void): void;
     };
 } & T;
 export default Form;

package/core/mixins/FormElement.d.ts

@@ -11,6 +11,7 @@ export interface FormElementInterface extends SubscriberInterface {
     getValueForFormPublisher(): FormElementValue;
     validateFormElement(): void;
     focus?: () => void;
+    forceAutoFill: boolean;
     shadowRoot?: ShadowRoot;
     error: boolean;
     autofocus: boolean;

package/core/mixins/FormElement.js

@@ -74,7 +74,8 @@ const Form = (superClass) => {
         }
         getFormPublisher() {
             if (!this.formDataProvider)
-                this.formDataProvider = this.getAncestorAttributeValue("formDataProvider");
+                this.formDataProvider =
+                    this.getAncestorAttributeValue("formDataProvider");
             if (this.formDataProvider) {
                 return PublisherManager.get(this.formDataProvider);
             }
@@ -120,7 +121,9 @@ const Form = (superClass) => {
         }
         initPublisher() {
             let formPublisher = this.getFormPublisher();
-            const value = this.hasAncestorAttribute("initFromPublisher") && this._name && formPublisher[this._name].get()
+            const value = this.hasAncestorAttribute("initFromPublisher") &&
+                this._name &&
+                formPublisher[this._name].get()
                 ? formPublisher[this._name].get()
                 : this.getAttribute("value");
             if (this._name && this.publisher)
@@ -219,6 +222,7 @@ const Form = (superClass) => {
                 if (elt && elt.focus) {
                     elt.focus();
                     e.preventDefault();
+                    e.stopPropagation();
                 }
             });
         }

package/core/mixins/FormInput.d.ts

@@ -42,10 +42,7 @@ declare const Form: <T extends Constructor<FormElementInterface>>(superClass: T)
         children: HTMLCollection;
         appendChild(node: Node): Node;
         getAncestorAttributeValue(attributeName: string): string;
-        hasAncestorAttribute(attributeName: string): boolean; /**
-         * Le type De l'input, comme en html cependant tous les types ne sont pas actuellements compatibles en raison du style en vigueur
-         * On peut essayer text, date, color, email par exemple, mais pas radio/checkbox/range a priori
-         */
+        hasAncestorAttribute(attributeName: string): boolean;
         querySelectorAll(selector: string): NodeListOf<Element>;
         publisher: any;
         dataProvider: string | null;
@@ -66,6 +63,10 @@ declare const Form: <T extends Constructor<FormElementInterface>>(superClass: T)
         hasAttribute(attributeName: string): boolean;
         disconnectedCallback(): void;
         getBoundingClientRect(): DOMRect;
+        onConnected(callback: (component: any) => void): void;
+        offConnected(callback: (component: any) => void): void;
+        onDisconnected(callback: (component: any) => void): void;
+        offDisconnected(callback: (component: any) => void): void;
     };
 } & T;
 export default Form;

package/core/mixins/Subscriber.d.ts

@@ -31,6 +31,10 @@ export interface SubscriberInterface<PropsType = CoreJSType> {
     hasAttribute(attributeName: string): boolean;
     disconnectedCallback(): void;
     getBoundingClientRect(): DOMRect;
+    onConnected(callback: (component: any) => void): void;
+    offConnected(callback: (component: any) => void): void;
+    onDisconnected(callback: (component: any) => void): void;
+    offDisconnected(callback: (component: any) => void): void;
 }
 declare const Subscriber: <PropsType = CoreJSType, T extends Constructor<LitElement> = Constructor<LitElement>>(superClass: T, type?: PropsType | undefined) => Constructor<SubscriberInterface<PropsType>> & T;
 export default Subscriber;