@supersoniks/concorde 1.1.44 → 1.1.46

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

@@ -21,17 +21,33 @@ let Modal = class Modal extends Subscriber(LitElement) {
     constructor() {
         super(...arguments);
         this.forceAction = false;
+        this.removeOnHide = false;
         this.align = "left";
         this.padding = "var(--sc-modal-py) var(--sc-modal-px)";
         this.maxWidth = "var(--sc-modal-max-w) ";
         this.maxHeight = "var(--sc-modal-max-h) ";
         this.width = "100%";
         this.height = "auto";
+        this.zIndex = "var(--sc-modal-z-index)";
         this.fullScreen = false;
         this.visible = false;
     }
     static create(options) {
         const modal = document.createElement(tagName);
+        // modal styles
+        if (options.removeOnHide === true)
+            modal.setAttribute("removeOnHide", "true");
+        if (options.maxWidth)
+            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.paddingX)
+            modal.style.setProperty("--sc-modal-px", options === null || options === void 0 ? void 0 : options.paddingX);
+        if (options.paddingY)
+            modal.style.setProperty("--sc-modal-py", options === null || options === void 0 ? void 0 : options.paddingY);
+        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>` || "";
         const container = document.querySelector("sonic-theme") || document.body;
@@ -67,6 +83,7 @@ let Modal = class Modal extends Subscriber(LitElement) {
             maxHeight: this.maxHeight,
             width: this.width,
             height: this.height,
+            zIndex: this.zIndex,
             borderRadius: this.fullScreen ? "0" : "var(--sc-modal-rounded)",
         };
         const modalWrapperStyles = {
@@ -105,7 +122,7 @@ let Modal = class Modal extends Subscriber(LitElement) {
 
       <div
         class="overlay"
-        @click="${!this.forceAction ? this.hide : ""}"
+        @click="${!this.forceAction ? this.hide : null}"
         ${animate({
             keyframeOptions: {
                 duration: 500,
@@ -130,6 +147,9 @@ let Modal = class Modal extends Subscriber(LitElement) {
         if (this.hasAttribute("resetDataProviderOnHide")) {
             PublisherManager.get(this.getAttribute("resetDataProviderOnHide")).set({});
         }
+        if (this.removeOnHide) {
+            this.remove();
+        }
     }
     dispose() {
         this.hide();
@@ -138,9 +158,9 @@ let Modal = class Modal extends Subscriber(LitElement) {
     handleEscape(e) {
         if (e.key === "Escape") {
             const modals = [...document.querySelectorAll(tagName)];
-            modals.forEach((item) => {
-                if (!this.forceAction) {
-                    item.hide();
+            modals.forEach((modal) => {
+                if (!modal.forceAction) {
+                    modal.hide();
                 }
             });
         }
@@ -164,6 +184,7 @@ Modal.styles = [
         --sc-modal-max-w: min(100vw, 64ch);
         --sc-modal-max-h: 80vh;
         --sc-modal-rounded: var(--sc-rounded-lg);
+        --sc-modal-z-index: 990;
       }
 
       * {
@@ -175,7 +196,7 @@ Modal.styles = [
         bottom: 0;
         left: 0;
         width: 100%;
-        z-index: 990;
+        z-index: calc(var(--sc-modal-z-index) + 1);
         align-items: center;
         justify-content: center;
         flex-direction: column;
@@ -207,7 +228,7 @@ Modal.styles = [
         top: 0;
         right: 0;
         bottom: 0;
-        z-index: 900;
+        z-index: var(--sc-modal-z-index);
         opacity: 0.8;
         position: fixed;
       }
@@ -226,6 +247,7 @@ Modal.styles = [
         .modal {
           max-width: none !important;
           width: 100% !important;
+          border-radius: var(--sc-modal-rounded) var(--sc-modal-rounded) 0 0 !important;
         }
       }
 
@@ -270,6 +292,9 @@ Modal.styles = [
 __decorate([
     property({ type: Boolean })
 ], Modal.prototype, "forceAction", void 0);
+__decorate([
+    property({ type: Boolean })
+], Modal.prototype, "removeOnHide", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], Modal.prototype, "align", void 0);
@@ -288,6 +313,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Modal.prototype, "height", void 0);
+__decorate([
+    property({ type: String })
+], Modal.prototype, "zIndex", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Modal.prototype, "fullScreen", void 0);

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

@@ -1,4 +1,4 @@
-import { LitElement } from "lit";
+import { LitElement, PropertyValues } from "lit";
 type PopPlacement = "bottom" | "top" | "right" | "left";
 export declare class Pop extends LitElement {
     static pops: Set<Pop>;
@@ -6,7 +6,6 @@ export declare class Pop extends LitElement {
     open: boolean;
     popBtn: HTMLElement;
     popContent: HTMLElement;
-    toggle: "true" | "false";
     noToggle: boolean;
     inline: boolean;
     /**
@@ -17,14 +16,16 @@ export declare class Pop extends LitElement {
     positioningRuns: boolean;
     lastContentX: number;
     lastContentY: number;
-    runPositioning(): void;
+    resizeObserver: ResizeObserver;
+    runPositioningLoop(): void;
     _toggle(e: Event): void;
     _show(): void;
     _hide(): void;
     _handleClosePop(e: Event): void;
     connectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     disconnectedCallback(): void;
-    _setUpMenu(placement: PopPlacement): void;
+    computePosition(placement: PopPlacement): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

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

@@ -13,7 +13,6 @@ let Pop = Pop_1 = class Pop extends LitElement {
     constructor() {
         super(...arguments);
         this.open = false;
-        this.toggle = "true";
         this.noToggle = false;
         this.inline = false;
         /**
@@ -22,15 +21,16 @@ let Pop = Pop_1 = class Pop extends LitElement {
         this.shadow = "lg";
         this.placement = "bottom";
         this.positioningRuns = false;
-        this.lastContentX = Number.NaN;
-        this.lastContentY = Number.NaN;
+        this.lastContentX = 0;
+        this.lastContentY = 0;
+        this.resizeObserver = new ResizeObserver(() => this.computePosition(this.placement));
     }
-    runPositioning() {
+    runPositioningLoop() {
         if (!this.positioningRuns)
             return;
         this.positioningRuns = true;
-        this._setUpMenu(this.placement);
-        window.requestAnimationFrame(() => this.runPositioning());
+        this.computePosition(this.placement);
+        window.requestAnimationFrame(() => this.runPositioningLoop());
     }
     _toggle(e) {
         if (this.open && this.noToggle)
@@ -42,19 +42,22 @@ let Pop = Pop_1 = class Pop extends LitElement {
         this.open ? this._show() : this._hide();
     }
     _show() {
+        this.popContent.style.removeProperty("display");
         this.open = true;
         this.popContent.setAttribute("tabindex", "0");
         if (this.popBtn && this.popContent && !this.positioningRuns) {
             this.positioningRuns = true;
-            this.lastContentX = Number.NaN;
-            this.lastContentY = Number.NaN;
-            this.runPositioning();
+            this.lastContentX = 0;
+            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();
@@ -65,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();
         });
@@ -78,6 +82,13 @@ let Pop = Pop_1 = class Pop extends LitElement {
         }
         Pop_1.pops.add(this);
     }
+    // /*
+    //   On attends le premier rendu pour observer les changements de taille car popup content n'est pas encore défini sinon
+    // */
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        this.resizeObserver.observe(this.popContent);
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         Pop_1.pops.delete(this);
@@ -85,22 +96,20 @@ let Pop = Pop_1 = class Pop extends LitElement {
             document.removeEventListener("pointerdown", this._handleClosePop);
             document.removeEventListener("click", this._handleClosePop);
         }
+        this.resizeObserver.unobserve(this.popContent);
     }
-    _setUpMenu(placement) {
-        var _a;
-        const contentRect = (_a = this.popContent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    computePosition(placement) {
+        var _a, _b, _c;
+        let contentRect = (_a = this.popContent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
         const padding = 8;
-        const shiftPadding = 20;
+        const shiftPadding = 5;
         const thisRect = this.getBoundingClientRect();
-        if (!this.offsetParent)
-            return;
-        const bodyRect = this.offsetParent.getBoundingClientRect();
-        const x0 = thisRect.left - bodyRect.left;
-        const y0 = thisRect.top - bodyRect.top;
+        const x0 = thisRect.left;
+        const y0 = thisRect.top;
         let x = x0, y = y0;
         const yTop = y0 - contentRect.height - padding;
-        const xLeft = x0 - contentRect.width - 2 * padding;
-        const xRight = x0 + thisRect.width + 2 * padding;
+        const xLeft = x0 - contentRect.width - padding;
+        const xRight = x0 + thisRect.width + padding;
         const yBottom = y0 + thisRect.height + padding;
         switch (placement) {
             case "bottom":
@@ -116,36 +125,71 @@ let Pop = Pop_1 = class Pop extends LitElement {
                 x = xRight;
                 break;
         }
-        const dxRight = window.innerWidth - xRight - bodyRect.left - contentRect.width - shiftPadding;
-        if (dxRight < 0 && placement === "right")
-            x = xLeft;
-        if (dxRight < 0 && ["top", "bottom"].includes(placement))
-            x = Math.max(x + dxRight, xLeft + thisRect.width);
-        const dxLeft = -bodyRect.left - xLeft;
-        if (dxLeft > shiftPadding && placement === "left")
+        // const dxRight = window.innerWidth - xRight - bodyRect.left - contentRect.width - shiftPadding;
+        // if (dxRight < 0 && placement === "right") x = xLeft;
+        // if (dxRight < 0 && ["top", "bottom"].includes(placement)) x = Math.max(x + dxRight, xLeft + thisRect.width);
+        // const dxLeft = -bodyRect.left - xLeft;
+        // if (dxLeft > shiftPadding && placement === "left") x = xRight;
+        // const dyBottom = window.innerHeight - yBottom - bodyRect.top - contentRect.height - shiftPadding;
+        // if (dyBottom < 0 && placement === "bottom") y = yTop;
+        // if (dyBottom < 0 && ["left", "right"].includes(placement)) y = Math.max(y + dyBottom, yTop + thisRect.height);
+        // const dyTop = -bodyRect.top - yTop;
+        // if (dyTop > -shiftPadding && placement === "top") y = yBottom;
+        this.lastContentX += x - contentRect.x;
+        this.lastContentY += y - contentRect.y;
+        Object.assign(this.popContent.style, {
+            left: `${this.lastContentX}px`,
+            top: `${this.lastContentY}px`,
+        });
+        contentRect = (_b = this.popContent) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+        if (contentRect.x < shiftPadding && placement == "left")
             x = xRight;
-        const dyBottom = window.innerHeight - yBottom - bodyRect.top - contentRect.height - shiftPadding;
-        if (dyBottom < 0 && placement === "bottom")
-            y = yTop;
-        if (dyBottom < 0 && ["left", "right"].includes(placement))
-            y = Math.max(y + dyBottom, yTop + thisRect.height);
-        const dyTop = -bodyRect.top - yTop;
-        if (dyTop > -shiftPadding && placement === "top")
+        if (contentRect.y < shiftPadding && placement == "top")
             y = yBottom;
-        this.lastContentX = x;
-        this.lastContentY = y;
+        if (contentRect.x + contentRect.width > window.innerWidth - shiftPadding &&
+            placement == "right")
+            x = xLeft;
+        if (contentRect.y + contentRect.height > window.innerHeight - shiftPadding &&
+            placement == "bottom")
+            y = yTop;
+        this.lastContentX += x - contentRect.x;
+        this.lastContentY += y - contentRect.y;
+        Object.assign(this.popContent.style, {
+            left: `${this.lastContentX}px`,
+            top: `${this.lastContentY}px`,
+        });
+        contentRect = (_c = this.popContent) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+        if (contentRect.x < 0) {
+            this.lastContentX += -contentRect.x;
+        }
+        if (contentRect.y < 0) {
+            this.lastContentY += -contentRect.y;
+        }
+        if (contentRect.x + contentRect.width > window.innerWidth) {
+            this.lastContentX +=
+                window.innerWidth - (contentRect.x + contentRect.width);
+        }
+        if (contentRect.y + contentRect.height > window.innerHeight) {
+            this.lastContentY +=
+                window.innerHeight - (contentRect.y + contentRect.height);
+        }
         Object.assign(this.popContent.style, {
-            left: `${x}px`,
-            top: `${y}px`,
+            left: `${this.lastContentX}px`,
+            top: `${this.lastContentY}px`,
         });
     }
     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"
         part="content"
+        style="display: none;"
         class="  
           ${this.open ? "is-open" : ""}"
       ></slot>
@@ -174,7 +218,7 @@ Pop.styles = [
         border-radius: min(calc(var(--sc-btn-rounded) * 2), 0.4em);
       }
 
-      slot[name="content"].is-open {
+      slot[name="content"].is-open:not(.is-empty) {
         transform: translateY(0) scale(1);
         opacity: 1;
         pointer-events: auto;
@@ -215,9 +259,6 @@ __decorate([
 __decorate([
     query("slot[name=content]")
 ], Pop.prototype, "popContent", void 0);
-__decorate([
-    property({ type: String })
-], Pop.prototype, "toggle", void 0);
 __decorate([
     property({ type: Boolean })
 ], Pop.prototype, "noToggle", void 0);

package/core/components/ui/theme/theme-collection/core-variables.js

@@ -2,12 +2,13 @@ import { css } from "lit";
 export const coreVariables = css `
   :host {
     /* polices*/
-    --sc-font-family-base: "Inter var", "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
-      "Helvetica Neue", Arial, sans-serif;
+    --sc-font-family-base: "Inter var", "Inter", -apple-system, system-ui,
+      BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+      sans-serif;
     --sc-font-weight-base: 400;
     --sc-font-style-base: normal;
 
-    --sc-headings-font-family: var(--sc-font-family-base);
+    --sc-headings-font-family: var(--sc-font-family-base), sans-serif;
     --sc-headings-font-style: var(--sc-font-style-base);
     --sc-headings-line-height: 1.1;
     --sc-headings-font-weight: 700;
@@ -29,16 +30,23 @@ export const coreVariables = css `
     /* 4 for rounded full*/
     --sc-btn-rounded-intensity: 1.4;
     --sc-btn-font-weight: 500;
-    --sc-btn-rounded: calc((var(--sc-rounded) + var(--sc-rounded-size-intensity)) * var(--sc-btn-rounded-intensity));
+    --sc-btn-rounded: calc(
+      (var(--sc-rounded) + var(--sc-rounded-size-intensity)) *
+        var(--sc-btn-rounded-intensity)
+    );
 
     /* Placeholder */
     --sc-placeholder-bg: rgba(17, 24, 39, 0.05);
 
     /* OMBRES */
-    --sc-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    --sc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-    --sc-shadow-lg: 0 10px 15px 0px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-    --sc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --sc-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1),
+      0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --sc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --sc-shadow-lg: 0 10px 15px 0px rgb(0 0 0 / 0.1),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --sc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
+      0 8px 10px -6px rgb(0 0 0 / 0.1);
     --sc-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 
     /* Forms */
@@ -50,7 +58,8 @@ export const coreVariables = css `
     --sc-input-border-color: var(--sc-input-bg);
     --sc-input-rounded-intensity: 1.4;
     --sc-input-rounded: calc(
-      (var(--sc-rounded) + var(--sc-rounded-size-intensity)) * var(--sc-input-rounded-intensity)
+      (var(--sc-rounded) + var(--sc-rounded-size-intensity)) *
+        var(--sc-input-rounded-intensity)
     );
     --sc-label-font-weight: 500;
 

package/core/components/ui/theme/theme.js

@@ -30,7 +30,8 @@ let Theme = Theme_1 = class Theme extends LitElement {
         const fontUrls = [];
         for (let i = 0; i < ssLength; i++) {
             const ss = stylesheets[i];
-            if (ss.href && (ss.href.includes("googleapis") || ss.href.includes("typekit.net")))
+            if (ss.href &&
+                (ss.href.includes("googleapis") || ss.href.includes("typekit.net")))
                 fontUrls.push(ss.href);
         }
         document.querySelectorAll("iframe").forEach((elt) => {
@@ -50,7 +51,11 @@ let Theme = Theme_1 = class Theme extends LitElement {
     }
     getCssVariables() {
         const names = [];
-        const stylesheets = [...Theme_1.styles.map((s) => s.styleSheet), ...Array.from(document.styleSheets)];
+        const stylesheets = [
+            ...Theme_1.styles.map((s) => s.styleSheet),
+            ...Array.from(document.styleSheets),
+        ];
+        console.log(stylesheets);
         for (const stylesheet of stylesheets) {
             try {
                 if (!stylesheet)
@@ -96,7 +101,7 @@ Theme.styles = [
       }
 
       :host([font]) {
-        font-family: var(--sc-font-family-base);
+        font-family: var(--sc-font-family-base), sans-serif;
         font-weight: var(--sc-font-weight-base);
         font-style: var(--sc-font-style-base);
       }

package/core/components/ui/tooltip/tooltip.js

@@ -38,14 +38,14 @@ Tooltip.styles = [
         opacity: 0;
         pointer-events: none;
         background: var(--sc-base-content, #111827);
-        padding: 0.25rem;
-        border-radius: 0.25rem;
+        padding: 0.32rem 0.25rem;
+        border-radius: var(--sc-rounded);
         color: var(--sc-base, #fff);
         z-index: 999;
         display: none;
         line-height: 1.1;
         width: max-content;
-        max-width: 20rem;
+        max-width: 18rem;
         white-space: pre-line;
         font-weight: var(--sc-tooltip-fw);
       }

package/core/mixins/Fetcher.d.ts

@@ -54,7 +54,7 @@ declare const Fetcher: <T extends Constructor<SubscriberInterface<PropsType>>, P
         /**
          * Première update, le comportement de lazyload est géré ici a l'aide d'un intersection observer.
          */
-        firstUpdated(): void;
+        handleLazyLoad(): void;
         onIntersection(entries: IntersectionObserverEntry[]): void;
         propertyMap: object;
         isConnected: boolean;
@@ -80,6 +80,7 @@ declare const Fetcher: <T extends Constructor<SubscriberInterface<PropsType>>, P
         requestUpdate(): void;
         getAttribute(name: string): string;
         hasAttribute(attributeName: string): boolean;
+        getBoundingClientRect(): DOMRect;
     };
 } & T;
 export default Fetcher;

package/core/mixins/Fetcher.js

@@ -87,29 +87,46 @@ const Fetcher = (superClass, propsType) => {
                     return;
                 // if (!this.dataProvider) return;
                 this.dispatchEvent(new CustomEvent("loading", { detail: this }));
-                this.isLoading = true;
-                this.requestUpdate();
+                if (this.getAttribute("localStorage") === "enabled") {
+                    yield PublisherManager.getInstance().isLocalStrorageReady;
+                }
+                if (!this.isConnected)
+                    return;
                 const hasLoader = this.isDefaultLoaderEnabled && !this.hasAttribute("noLoader");
-                if (hasLoader)
+                if (hasLoader) {
                     Loader.show();
+                }
                 const headerData = PublisherManager.getInstance()
                     .get(this.getAncestorAttributeValue("headersDataProvider"))
                     .get();
+                this.isLoading = true;
+                if (Objects.isObject(this.props) && Object.keys(this.props || {}).length > 0 && this.isFirstLoad) {
+                    this.dispatchEvent(new CustomEvent("load", { detail: this }));
+                    this.isFirstLoad = false;
+                    this.isLoading = false;
+                }
                 let data = yield this.api.get(this.endPoint || this.dataProvider || "", headerData);
+                if (!this.isConnected) {
+                    if (hasLoader)
+                        Loader.hide();
+                    return;
+                }
                 // Je garde ça mais normalement ça n'arrive jamais
                 if (!data) {
                     SonicToast.add({ text: "Network Error", status: "error" });
                     this.isLoading = false;
-                    if (hasLoader)
+                    if (hasLoader) {
                         Loader.hide();
+                    }
                     return;
                 }
                 // Si data ne contient que la réponse HTTP, avec un statut not ok, on affiche un message
                 else if (data._sonic_http_response_ && !data._sonic_http_response_.ok && Object.keys(data).length === 1) {
                     SonicToast.add({ text: "Network Error", status: "error" });
                 }
-                if (hasLoader)
+                if (hasLoader) {
                     Loader.hide();
+                }
                 if (this.key) {
                     const response = data._sonic_http_response_;
                     /* preserveOtherKeys s'exprime lorsque le paramètre "key" est défini
@@ -138,11 +155,10 @@ const Fetcher = (superClass, propsType) => {
         connectedCallback() {
             var _a;
             // this.noShadowDom = "";
+            super.connectedCallback();
             if (!this.isFetchEnabled) {
-                super.connectedCallback();
                 return;
             }
-            super.connectedCallback();
             this.key = this.getAttribute("key");
             if (this.props) {
                 this.publisher.set(this.props);
@@ -153,25 +169,38 @@ const Fetcher = (superClass, propsType) => {
             if (lazyLoad === null) {
                 this._fetchData();
             }
+            else {
+                this.handleLazyLoad();
+            }
         }
         /**
          * Première update, le comportement de lazyload est géré ici a l'aide d'un intersection observer.
          */
-        firstUpdated() {
+        handleLazyLoad() {
             const lazyLoad = this.getAttribute("lazyload");
             if (lazyLoad === null) {
                 return;
             }
+            const rect = this.getBoundingClientRect();
+            if (rect.x < window.innerWidth && rect.right > 0 && rect.y < window.innerHeight && rect.right > 0) {
+                this._fetchData();
+                return;
+            }
+            const boundsRatio = parseFloat(this.getAttribute("lazyBoundsRatio") || "1");
             const options = {
                 root: null,
-                rootMargin: Math.max(window.innerWidth, window.innerHeight) + "px",
+                rootMargin: Math.max(window.innerWidth * boundsRatio, window.innerHeight * boundsRatio) + "px",
             };
             this.iObserver = new IntersectionObserver((entries) => this.onIntersection(entries), options);
-            let elt = this.shadowRoot ? this.shadowRoot.children[0] : this.children[0];
+            /**
+             * on retire cette partie car finalement on mets systématiquement un span pour la détection de l'intersection
+             */
+            let elt = (this.shadowRoot ? this.shadowRoot.children[0] : this.children[0]);
             if (elt && elt.nodeName.toLocaleLowerCase() == "slot")
                 elt = elt.children[0];
             if (!elt || elt.nodeName.toLocaleLowerCase() == "template") {
                 elt = document.createElement("span");
+                // const elt = document.createElement("span");
                 this.appendChild(elt);
             }
             if (elt) {
@@ -182,9 +211,12 @@ const Fetcher = (superClass, propsType) => {
             }
         }
         onIntersection(entries) {
+            var _a;
             for (const e of entries) {
                 if (e.isIntersecting && this.isFirstLoad) {
                     this._fetchData();
+                    (_a = this.iObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+                    break;
                 }
             }
         }

package/core/mixins/FormCheckable.d.ts

@@ -81,6 +81,7 @@ declare const Form: <T extends Constructor<FormElementInterface>>(superClass: T)
         requestUpdate(): void;
         getAttribute(name: string): string;
         hasAttribute(attributeName: string): boolean;
+        getBoundingClientRect(): DOMRect;
     };
 } & 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();
                 }
             });
         }