@supersoniks/concorde 1.1.46 → 1.1.48

package/core/_types/types.d.ts

@@ -26,6 +26,5 @@ export type CoreJSType = string | number | boolean | null | {
 export type TypeAndRecordOfType<U> = U & Record<string | number, U>;
 export type PublisherContentType = CoreJSType & {
     __value?: CoreJSType;
-    _key_?: number;
 };
 export type HTMLFormControl = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;

package/core/components/functional/date/date.js

@@ -45,7 +45,9 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
     }
     set wording_billet_periode_validite(value) {
         this._wording_billet_periode_validite = value;
-        this.duAu = this.wording_billet_periode_validite.split("%s").map((str) => str.trim());
+        this.duAu = this.wording_billet_periode_validite
+            .split("%s")
+            .map((str) => str.trim());
         this.duAu.pop();
         this.requestUpdate();
     }
@@ -74,25 +76,31 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
             }
             const format = new Intl.DateTimeFormat(this.language || this.pageLanguage, options);
             parts = format.formatRangeToParts(start, end);
-            //En mode  design on cache les ","
-            if (this.designMode) {
-                parts.forEach((part) => (part.hidden = part.value.trim() == ","));
-            }
             //on affiche du au uniquement si on a deux dates différentes
             if (!isSameDay) {
-                const to = parts.find((part) => part.type == "literal" && part.source == "shared" && part.value.trim().length > 0);
+                const to = parts.find((part) => part.type == "literal" &&
+                    part.source == "shared" &&
+                    part.value.trim().length > 0);
                 if (to) {
                     to.value = " " + this.duAu[1] + " ";
                     to.type = "to";
                 }
                 if (!this.designMode)
-                    parts.unshift({ type: "from", value: this.duAu[0] + " ", source: "shared" });
+                    parts.unshift({
+                        type: "from",
+                        value: this.duAu[0] + " ",
+                        source: "shared",
+                    });
             }
         }
         else {
             const format = new Intl.DateTimeFormat(this.language || this.pageLanguage, options);
             parts = format.formatToParts(start);
         }
+        //En mode  design on cache les ","
+        if (this.designMode) {
+            parts.forEach((part) => (part.hidden = part.value.trim() == ","));
+        }
         parts[0].value = Format.ucFirst(parts[0].value);
         return parts.filter((p) => p.hidden !== true);
     }

package/core/components/functional/fetch/fetch.d.ts

@@ -19,6 +19,7 @@ declare const Fetch_base: {
         onInvalidate?: (() => void) | undefined;
         disconnectedCallback(): void;
         connectedCallback(): void;
+        lazyLoadSpan?: HTMLSpanElement | undefined;
         handleLazyLoad(): void;
         onIntersection(entries: IntersectionObserverEntry[]): void;
         propertyMap: object;
@@ -46,6 +47,10 @@ declare const Fetch_base: {
         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;
     };
 } & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<import("../../../_types/types").CoreJSType>) & typeof LitElement;
 /**

package/core/components/functional/list/list.d.ts

@@ -5,6 +5,38 @@ import "@supersoniks/concorde/core/components/functional/subscriber/subscriber";
 import { DirectiveResult } from "lit/directive";
 import { TemplateContentDirective } from "lit/directives/template-content.js";
 import { TemplateResult } from "lit";
+/**
+ *  ### List boucle sur sa propriété "props" et crée des éléments a partir des données en bouclant également sur ses templates.
+ *
+ * Extends mixins : Fetcher, [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page)
+ *
+ * * Si le composant possède un attribut *fetch*, il charge un contenu via un appel d'api web.<br>
+ * Voir [fetcher](./?path=/docs/core-components-functional-fetch--basic) pour la configuration des autres attributs.
+ * * Chaque élément créé est englobé dans un objet [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page).<br>
+ *  Un dataProvider y est associé a l'adresse suivante *dataProvider-de-la-liste$/*index-de-la-ligne-courante*
+ *  Les données de la ligne sont donc disponible pour les élements internes (subscribers, data-binding)
+ *  * Lors du chargement un objet loader inline est affiché.
+ *  * Si le résultat de la requête est un objet, il est imbriqué dans un tableau pour garantir le fonctionnement.<br>
+ * Cependant, si l'attribut `extractValues` est présent, les valeurs des propriétés de l'objet sont mises dans  dans un tableau pour le rendu.
+ * * La propriété _metadata_ est ajoutés à la donnée de chaque item. Elle contient les informations suivantes :
+ * * key : l'index de l'item dans la liste
+ * * even : true si l'index est pair
+ * * odd : true si l'index est impair
+ * * onlyChild : true si la liste ne contient qu'un seul item
+ * * firstChild : true si l'item est le premier de la liste
+ * * lastChild : true si l'item est le dernier de la liste
+ * * Si la liste ne contient aucun item, le template "no-item" est utilisé si il est défini.
+ * * On peut appler la methode invalidate() sur son publishe pour declencher le rechargement des données
+ * *
+ */
+export type ListItemMetadata = {
+    key?: string;
+    even?: boolean;
+    odd?: boolean;
+    onlyChild?: boolean;
+    firstChild?: boolean;
+    lastChild?: boolean;
+};
 declare const List_base: {
     new (...args: any[]): {
         api: import("../../../utils/api").default | null;
@@ -24,6 +56,7 @@ declare const List_base: {
         onInvalidate?: (() => void) | undefined;
         disconnectedCallback(): void;
         connectedCallback(): void;
+        lazyLoadSpan?: HTMLSpanElement | undefined;
         handleLazyLoad(): void;
         onIntersection(entries: IntersectionObserverEntry[]): void;
         propertyMap: object;
@@ -51,25 +84,12 @@ declare const List_base: {
         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;
     };
 } & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<import("../../../_types/types").CoreJSType>) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/TemplatesContainer").TemplatesContainerInterface) & typeof LitElement;
-/**
- *  ### List boucle sur sa propriété "props" et crée des éléments a partir des données en bouclant également sur ses templates.
- *
- * Extends mixins : Fetcher, [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page)
- *
- * * Si le composant possède un attribut *fetch*, il charge un contenu via un appel d'api web.<br>
- * Voir [fetcher](./?path=/docs/core-components-functional-fetch--basic) pour la configuration des autres attributs.
- * * Chaque élément créé est englobé dans un objet [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page).<br>
- *  Un dataProvider y est associé a l'adresse suivante *dataProvider-de-la-liste$/*index-de-la-ligne-courante*
- *  Les données de la ligne sont donc disponible pour les élements internes (subscribers, data-binding)
- *  * Lors du chargement un objet loader inline est affiché.
- *  * Si le résultat de la requête est un objet, il est imbriqué dans un tableau pour garantir le fonctionnement.<br>
- * Cependant, si l'attribut `extractValues` est présent, les valeurs des propriétés de l'objet sont mises dans  dans un tableau pour le rendu.
- * * La propriété _key_ est ajoutés à la donnée de chaque item. Elle contient l'index dans le cas d'un liste simple ou la clés associée à la valeur si `extractValues` est définit.
- * * On peut appler la methode invalidate() sur son publishe pour declencher le rechargement des données
- * *
- */
 export declare class List extends List_base {
     itemPropertyMap?: object;
     /**
@@ -87,7 +107,6 @@ export declare class List extends List_base {
     renderNoResultState(): TemplateResult<1>;
     formatProps(): (import("../../../_types/types").CoreJSType[] & {
         __value?: import("../../../_types/types").CoreJSType | undefined;
-        _key_?: number | undefined;
     } & {
         _sonic_http_response_?: Response | undefined;
         text?: string | undefined;

package/core/components/functional/list/list.js

@@ -14,23 +14,6 @@ import "@supersoniks/concorde/core/components/functional/subscriber/subscriber";
 import Objects from "@supersoniks/concorde/core/utils/Objects";
 import TemplatesContainer from "@supersoniks/concorde/core/mixins/TemplatesContainer";
 const tagName = "sonic-list";
-/**
- *  ### List boucle sur sa propriété "props" et crée des éléments a partir des données en bouclant également sur ses templates.
- *
- * Extends mixins : Fetcher, [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page)
- *
- * * Si le composant possède un attribut *fetch*, il charge un contenu via un appel d'api web.<br>
- * Voir [fetcher](./?path=/docs/core-components-functional-fetch--basic) pour la configuration des autres attributs.
- * * Chaque élément créé est englobé dans un objet [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page).<br>
- *  Un dataProvider y est associé a l'adresse suivante *dataProvider-de-la-liste$/*index-de-la-ligne-courante*
- *  Les données de la ligne sont donc disponible pour les élements internes (subscribers, data-binding)
- *  * Lors du chargement un objet loader inline est affiché.
- *  * Si le résultat de la requête est un objet, il est imbriqué dans un tableau pour garantir le fonctionnement.<br>
- * Cependant, si l'attribut `extractValues` est présent, les valeurs des propriétés de l'objet sont mises dans  dans un tableau pour le rendu.
- * * La propriété _key_ est ajoutés à la donnée de chaque item. Elle contient l'index dans le cas d'un liste simple ou la clés associée à la valeur si `extractValues` est définit.
- * * On peut appler la methode invalidate() sur son publishe pour declencher le rechargement des données
- * *
- */
 let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
     constructor() {
         super(...arguments);
@@ -155,10 +138,17 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
                 return nothing;
             if (typeof key != "string" && typeof key != "number")
                 return nothing;
-            const pub = this.publisher[key];
-            pub._key_ = key + "";
+            const isLastChild = index >= length - 1;
+            const indexMod2 = index % 2;
+            const childPublisher = this.publisher[key];
+            /**
+             * Ajout de metatdonnées au publisher de l'enfant
+             */
+            //La prop key est gardée pour le moment pour compatibilité
+            //TODO : supprimer la prop key cquand c'est ok côté covoit.
+            childPublisher._key_ = key + "";
+            childPublisher._metadata_ = Object.assign(Object.assign({}, childPublisher._metadata_.get()), { key: key, even: indexMod2 == 0, odd: indexMod2 == 1, onlyChild: length == 1, firstChild: index == 0, lastChild: isLastChild });
             counter++;
-            const isNotLast = index < length - 1;
             if (templatePart)
                 counter = -1;
             return (item &&
@@ -166,7 +156,7 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
             <sonic-subscriber
               ?debug=${this.defferedDebug === true}
               .bindPublisher=${function () {
-                    return pub;
+                    return childPublisher;
                 }}
               .propertyMap?=${this.itemPropertyMap}
               dataProvider="${this.dataProvider}/list-item/${key}"
@@ -175,7 +165,7 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
                     ? templateContent(templatePart)
                     : templateContent(this.templateList[counter % templateCount])}
             </sonic-subscriber>
-            ${separator && isNotLast ? templateContent(separator) : nothing}
+            ${separator && !isLastChild ? templateContent(separator) : nothing}
           `);
         })}
     `;

package/core/components/functional/sdui/sdui.d.ts

@@ -19,6 +19,7 @@ declare const SonicSDUI_base: {
         onInvalidate?: (() => void) | undefined;
         disconnectedCallback(): void;
         connectedCallback(): void;
+        lazyLoadSpan?: HTMLSpanElement | undefined;
         handleLazyLoad(): void;
         onIntersection(entries: IntersectionObserverEntry[]): void;
         propertyMap: object;
@@ -46,6 +47,10 @@ declare const SonicSDUI_base: {
         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;
     };
 } & (new (...args: any[]) => import("../../../mixins/Subscriber").SubscriberInterface<import("../../../_types/types").CoreJSType>) & typeof LitElement;
 /**
@@ -60,9 +65,6 @@ declare const SonicSDUI_base: {
  * Son format est décrit par le type SDUITransformDescription
  *
  *  * Si le résultat de la requête est un objet, il est imbriqué dans un tableau pour garantir le fonctionnement.<br>
- * Cependant, si l'attribut `extractValues` est présent, les valeurs des propriétés de l'objet sont mises dans  dans un tableau pour le rendu.
- * * La propriété _key_ est ajoutés à la donnée de chaque item. Elle contient l'index dans le cas d'un liste simple ou la clés associée à la valeur si `extractValues` est définit.
- * * On peut appler la methode invalidate() sur son publishe pour declencher le rechargement des données
  * *
  */
 export declare class SonicSDUI extends SonicSDUI_base {

package/core/components/functional/sdui/sdui.js

@@ -32,9 +32,6 @@ const tagName = "sonic-sdui"; // For Astro.build
  * Son format est décrit par le type SDUITransformDescription
  *
  *  * Si le résultat de la requête est un objet, il est imbriqué dans un tableau pour garantir le fonctionnement.<br>
- * Cependant, si l'attribut `extractValues` est présent, les valeurs des propriétés de l'objet sont mises dans  dans un tableau pour le rendu.
- * * La propriété _key_ est ajoutés à la donnée de chaque item. Elle contient l'index dans le cas d'un liste simple ou la clés associée à la valeur si `extractValues` est définit.
- * * On peut appler la methode invalidate() sur son publishe pour declencher le rechargement des données
  * *
  */
 let SonicSDUI = class SonicSDUI extends Fetcher(Subscriber(LitElement)) {

package/core/components/ui/_css/type.js

@@ -1,8 +1,8 @@
 import { css } from "lit";
 export const typeColor = css `
-  :host{
-    --sc-color:inherit;
-    color:var(--sc-color);
+  :host {
+    --sc-color: inherit;
+    color: var(--sc-color);
   }
 
   :host([type="primary"]) {
@@ -21,16 +21,16 @@ export const typeColor = css `
     --sc-color: var(--sc-success);
   }
 
-  .inherit-color{
-    color:var(--sc-color);
+  .inherit-color {
+    color: var(--sc-color);
   }
 `;
 export const typesBg = css `
-  :host{
-    --sc-color:inherit;
-    --sc-bg:inherit;
-    color:var(--sc-color);
-    background:var(--sc-bg);
+  :host {
+    --sc-color: inherit;
+    --sc-bg: inherit;
+    color: var(--sc-color);
+    background: var(--sc-bg);
   }
 
   :host([type="primary"]) {
@@ -54,7 +54,7 @@ export const typesBg = css `
     --sc-bg: var(--sc-success);
   }
 
-  .inherit-bg{
-    color:inherit;
+  .inherit-bg {
+    color: inherit;
   }
 `;

package/core/components/ui/badge/badge.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { fontSize, } from "@supersoniks/concorde/core/components/ui/_css/size";
+import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
 const tagName = "sonic-badge";
 /**
  * Un badge simple avec deux slots, un nommé prefix et un nomé suffix de manière à pouvoir mettre (par exemple) une icone avant ou après le contenu.
@@ -46,12 +46,11 @@ Badge.styles = [
         --sc-fs: 1rem;
 
         --sc-badge-color: var(--sc-base-content, #1f2937);
-        --sc-badge-bg: var(--sc-base-200, #e5e7eb);
+        --sc-badge-bg: var(--sc-base-100, #e5e7eb);
 
         --sc-badge-border-with: var(--sc-form-border-width, 0.1rem);
         --sc-badge-border-color: transparent;
-        --sc-badge-border: var(--sc-badge-border-with) solid
-          var(--sc-badge-border-color);
+        --sc-badge-border: var(--sc-badge-border-with) solid var(--sc-badge-border-color);
 
         --sc-badge-rounded: 0.85em;
         --sc-badge-fw: var(--sc-font-weight-base);

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

@@ -59,6 +59,10 @@ declare const Button_base: {
         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;
     };
 } & (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;
 /**
@@ -151,6 +155,7 @@ export declare class Button extends Button_base {
     private _location;
     get location(): string;
     set location(value: string);
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;
     onSlotChange(): void;
 }

package/core/components/ui/button/button.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import LocationHandler from "@supersoniks/concorde/core/utils/LocationHandler";
 import { html, LitElement, css } from "lit";
-import { customElement, property, queryAssignedElements, state } from "lit/decorators.js";
+import { customElement, property, queryAssignedElements, state, } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
 import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import FormCheckable from "@supersoniks/concorde/core/mixins/FormCheckable";
@@ -88,7 +88,6 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
         this._href = value;
         if (this.href && this.href.indexOf("http") != 0) {
             LocationHandler.onChange(this);
-            this.location = document.location.href.replace(document.location.origin, "");
         }
         else
             LocationHandler.offChange(this);
@@ -113,7 +112,9 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
              * On on veut pouvoir rest un autre form que celui qui contient le bouton
              */
             const resetDataProvider = this.getAttribute("reset");
-            const formPublisher = resetDataProvider ? PublisherManager.get(resetDataProvider) : this.getFormPublisher();
+            const formPublisher = resetDataProvider
+                ? PublisherManager.get(resetDataProvider)
+                : this.getFormPublisher();
             if (formPublisher)
                 formPublisher.set({});
         }
@@ -141,7 +142,14 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
     }
     set location(value) {
         this._location = value;
-        LocationHandler.updateComponentActiveState(this);
+        this.requestUpdate();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has("location") ||
+            changedProperties.has("href") ||
+            changedProperties.has("autoActive")) {
+            LocationHandler.updateComponentActiveState(this);
+        }
     }
     render() {
         const btnStyles = {
@@ -160,10 +168,20 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
         aria-labelledby=${ifDefined(this.ariaLabelledby)}
         @click=${this.handleChange}
       >
-        <slot @slotchange=${this.onSlotChange} part="prefix" name="prefix"></slot>
+        <slot
+          @slotchange=${this.onSlotChange}
+          part="prefix"
+          name="prefix"
+        ></slot>
         <slot part="main" class="main-slot"></slot>
-        <slot @slotchange=${this.onSlotChange} part="suffix" name="suffix"></slot>
-        ${this.loading == true ? html `<sonic-icon name="loader" class="loader"></sonic-icon>` : ""}
+        <slot
+          @slotchange=${this.onSlotChange}
+          part="suffix"
+          name="suffix"
+        ></slot>
+        ${this.loading == true
+            ? html `<sonic-icon name="loader" class="loader"></sonic-icon>`
+            : ""}
       </button>
     `;
         return this.href
@@ -172,7 +190,9 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
           target=${ifDefined(this.target)}
           aria-label=${ifDefined(this.ariaLabel)}
           aria-labelledby=${ifDefined(this.ariaLabelledby)}
-          @click=${this.pushState || this.goBack !== null ? this.handleNavigation : null}
+          @click=${this.pushState || this.goBack !== null
+                ? this.handleNavigation
+                : null}
           >${btn}</a
         >`
             : html `${btn}`;
@@ -205,7 +225,10 @@ Button.styles = [
         --sc-btn-border-width: var(--sc-form-border-width);
         --sc-btn-border-color: transparent;
 
-        --btn-outline-bg-hover: var(--sc-btn-outline-bg-hover, var(--sc-base-100));
+        --btn-outline-bg-hover: var(
+          --sc-btn-outline-bg-hover,
+          var(--sc-base-100)
+        );
         --sc-btn-ghost-bg-hover: var(--sc-base-100);
 
         --sc-btn-active-color: var(--sc-base);
@@ -243,8 +266,8 @@ Button.styles = [
         cursor: pointer;
         text-align: center;
         line-height: 1.1;
-        border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr) var(--sc-item-rounded-br)
-          var(--sc-item-rounded-bl);
+        border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr)
+          var(--sc-item-rounded-br) var(--sc-item-rounded-bl);
 
         background: var(--btn-bg);
         color: var(--btn-color);
@@ -254,7 +277,8 @@ Button.styles = [
         padding-left: var(--sc-btn-px);
         padding-right: var(--sc-btn-px);
 
-        border: var(--sc-btn-border-width) var(--sc-btn-border-style) var(--sc-btn-border-color);
+        border: var(--sc-btn-border-width) var(--sc-btn-border-style)
+          var(--sc-btn-border-color);
         min-height: var(--sc-btn-height);
       }
 
@@ -471,6 +495,7 @@ Button.styles = [
       /*BOUTON Avec icone seulement*/
       :host([icon]) ::slotted(sonic-icon) {
         font-size: 1.2em;
+        vertical-align: middle;
       }
 
       /*Tooltip ne joue pas sur le layout*/

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

@@ -60,6 +60,10 @@ declare const Checkbox_base: {
         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;
     };
 } & {
     new (...args: any[]): {
@@ -138,6 +142,10 @@ declare const Checkbox_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;
 /**

package/core/components/ui/form/css/form-control.js

@@ -67,12 +67,13 @@ export const formControl = css `
 
     line-height: 1.1;
     color: var(--sc-input-c);
-    border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr) var(--sc-item-rounded-br)
-      var(--sc-item-rounded-bl);
+    border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr)
+      var(--sc-item-rounded-br) var(--sc-item-rounded-bl);
 
     font-family: var(--sc-input-ff);
     background-color: var(--sc-input-background);
-    border: var(--sc-input-b-width) solid var(--sc-input-b-color, var(--sc-base-300, #aaa));
+    border: var(--sc-input-b-width) solid
+      var(--sc-input-b-color, var(--sc-base-300, #aaa));
     width: 100%;
     font-size: var(--sc-input-fs);
 
@@ -167,6 +168,7 @@ export const formControl = css `
     flex: 0 0 auto;
     max-width: 100%;
     max-width: 100%;
+    white-space: nowrap;
   }
 
   :host([inlineContent]) .has-suffix slot[name="suffix"] {
@@ -289,8 +291,8 @@ export const formControl = css `
   }
   input[type="color"]::-webkit-color-swatch {
     border: none;
-    border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr) var(--sc-item-rounded-br)
-      var(--sc-item-rounded-bl);
+    border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr)
+      var(--sc-item-rounded-br) var(--sc-item-rounded-bl);
   }
 
   /*Input Image*/

package/core/components/ui/form/form-layout/form-layout.js

@@ -59,7 +59,9 @@ FormLayout.styles = [
       ::slotted(sonic-textarea) {
         grid-column: 1 / -1;
       }*/
-
+      ::slotted(sonic-submit) {
+        display: contents;
+      }
       ::slotted(:not(sonic-input):not(sonic-select):not(sonic-input-autocomplete):not(.form-item-container)) {
         grid-column: 1 / -1;
       }

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

@@ -54,8 +54,14 @@ declare const Input_base: {
         requestUpdate(): void;
         getAttribute(name: string): string;
         hasAttribute(attributeName: string): boolean;
-        disconnectedCallback(): void;
+        disconnectedCallback(): void; /**
+         * Taille du composant, implique notamment des modifications de typo et de marge interne
+         */
         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 Input extends Input_base {

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

@@ -4,6 +4,7 @@ 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 { Size } from "../../_css/size";
+import { ResizeController } from "@lit-labs/observers/resize_controller.js";
 type ListItem = Record<string, string>;
 declare const InputAutocomplete_base: (new (...args: any[]) => import("../../../../mixins/TemplatesContainer").TemplatesContainerInterface) & {
     new (...args: any[]): {
@@ -62,6 +63,10 @@ declare const InputAutocomplete_base: (new (...args: any[]) => import("../../../
         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("../../../../mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("../../../../mixins/Subscriber").SubscriberInterface<import("../../../../_types/types").CoreJSType>) & typeof LitElement;
 /**
@@ -82,6 +87,9 @@ export declare class InputAutocomplete extends InputAutocomplete_base {
     select?: boolean;
     key: string;
     searchParameter: string;
+    slotInputPrefixNodes: Array<Node>;
+    hasInputPrefix: boolean;
+    _resizeController: ResizeController<unknown>;
     /**
      * Les dataProviders
      */
@@ -97,6 +105,7 @@ export declare class InputAutocomplete extends InputAutocomplete_base {
     /**
      * Les fonctions de gestion
      */
+    hasSlotOrProps(): void;
     private updateSearchParameter;
     private initSearchParameter;
     private selectListItem;