@supersoniks/concorde 1.1.46 → 1.1.47

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;

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;
@@ -53,23 +86,6 @@ declare const List_base: {
         getBoundingClientRect(): DOMRect;
     };
 } & (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 +103,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/queue/queue.d.ts

@@ -3,7 +3,6 @@ import "@supersoniks/concorde/core/components/functional/list/list";
 import { PublisherProxy } from "@supersoniks/concorde/core/utils/PublisherProxy";
 type QueueItem = {
     id: string;
-    endPoint: string;
     dataProvider: string;
     offset: number;
     limit: number;
@@ -38,7 +37,6 @@ export default class Queue extends Queue_base {
     filteredFields: string;
     disconnectedCallback(): void;
     static instanceCounter: number;
-    instanceId: number;
     localStorage: string;
     connectedCallback(): Promise<void>;
     filterPublisher: PublisherProxy | null;

package/core/components/functional/queue/queue.js

@@ -52,7 +52,6 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
         this.resultCount = 0;
         this.noLazyload = false;
         this.filteredFields = "";
-        this.instanceId = 0;
         this.localStorage = "disabled";
         this.filterPublisher = null;
         this.searchHash = "";
@@ -82,7 +81,6 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
             connectedCallback: { get: () => super.connectedCallback }
         });
         return __awaiter(this, void 0, void 0, function* () {
-            this.instanceId = Queue_1.instanceCounter++;
             this.localStorage = this.getAttribute("localStorage") || this.localStorage;
             this.removeAttribute("localStorage");
             this.noShadowDom = "";
@@ -91,14 +89,9 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
             if (!this.dataProvider)
                 this.dataProvider =
                     this.dataProviderExpression ||
-                        "sonic-queue-" +
-                            this.instanceId +
-                            "-" +
-                            Math.random().toString(36).substring(7);
+                        "sonic-queue-" + Queue_1.instanceCounter++ + "-" + Math.random().toString(36).substring(7);
             if (!this.dataProviderExpression) {
-                this.dataProviderExpression =
-                    HTML.getAncestorAttributeValue(this.parentElement, "dataProvider") ||
-                        "";
+                this.dataProviderExpression = HTML.getAncestorAttributeValue(this.parentElement, "dataProvider") || "";
             }
             _super.connectedCallback.call(this);
             this.key = this.getAttribute("key");
@@ -116,8 +109,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
             this.next();
             return;
         }
-        this.filterPublisher =
-            PublisherManager.getInstance().get(dataFilterProvider);
+        this.filterPublisher = PublisherManager.getInstance().get(dataFilterProvider);
         (_a = this.filterPublisher) === null || _a === void 0 ? void 0 : _a.onInternalMutation(() => {
             this.updateFilteredContent();
         });
@@ -137,9 +129,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
             let value = filterData[f];
             if (Array.isArray(value))
                 value = value.filter((v) => v !== null);
-            if ((this.filteredFields && !filteredFieldsArray.includes(f)) ||
-                value == null ||
-                value.toString() === "")
+            if ((this.filteredFields && !filteredFieldsArray.includes(f)) || value == null || value.toString() === "")
                 continue;
             searchParams.set(f, filterData[f].toString());
         }
@@ -179,7 +169,6 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
          * Un ne repasse donc à 0 qu'à partir du premier chargement.
          * */
         if (!this.nextHadEvent && e) {
-            this.publisher.resultCount = 0;
             this.resultCount = 0;
         }
         this.nextHadEvent = !!e;
@@ -187,9 +176,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
             if (e.detail.requestId < this.requestId)
                 return;
             this.resultCount += e.detail.props.length;
-            if (!e.detail.isFirstLoad ||
-                !e.detail.props.length ||
-                this.dataProviderExpression.indexOf("$offset") == -1) {
+            if (!e.detail.isFirstLoad || !e.detail.props.length || this.dataProviderExpression.indexOf("$offset") == -1) {
                 this.publisher.resultCount = this.resultCount;
                 return;
             }
@@ -202,8 +189,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
         else {
             const props = this.props;
             const item = props[props.length - 1];
-            offset =
-                parseInt(item.offset.toString()) + parseInt(item.limit.toString());
+            offset = parseInt(item.offset.toString()) + parseInt(item.limit.toString());
         }
         if (requestDuration > 0 && e && !this.localStorage)
             this.limit = Math.round((this.limit / requestDuration) * this.targetRequestDuration);
@@ -211,18 +197,14 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
             this.limit = 1;
         if (this.limit > 15)
             this.limit = 15;
-        let dataProvider = this.dataProviderExpression
-            .replace("$offset", offset + "")
-            .replace("$limit", this.limit + "");
+        let dataProvider = this.dataProviderExpression.replace("$offset", offset + "").replace("$limit", this.limit + "");
         const split = dataProvider.split("?");
         const endpoint = split.shift();
         const searchParams = new URLSearchParams(split.join("?"));
         const filterData = (_a = this.filterPublisher) === null || _a === void 0 ? void 0 : _a.get();
         const filteredFieldsArray = this.filteredFields.split(" ");
         for (const f in filterData) {
-            if ((this.filteredFields && filteredFieldsArray.includes(f)) ||
-                filterData[f] == null ||
-                filterData[f] == "")
+            if ((this.filteredFields && !filteredFieldsArray.includes(f)) || filterData[f] == null)
                 continue;
             searchParams.set(f, filterData[f]);
         }
@@ -235,8 +217,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
             ...this.props,
             {
                 id: searchParams.toString() + "/" + this.props.length,
-                dataProvider: dataProvider + "_item_from_queue_" + this.instanceId,
-                endPoint: dataProvider,
+                dataProvider: dataProvider,
                 offset: offset,
                 limit: this.limit,
             },
@@ -258,23 +239,17 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
         // }
         if (!Array.isArray(this.props))
             return nothing;
-        let lazyload = !this.noLazyload;
-        if (this.props.length == 1) {
-            lazyload = false;
-        }
         return html `
       ${map(this.props, (item, index) => {
             var _a;
-            const templates = index == 0
-                ? this.templates
-                : (_a = this.templates) === null || _a === void 0 ? void 0 : _a.filter((elt) => elt.getAttribute("data-value") != "no-item");
+            const templates = index == 0 ? this.templates : (_a = this.templates) === null || _a === void 0 ? void 0 : _a.filter((elt) => elt.getAttribute("data-value") != "no-item");
             return html `
           <sonic-list
             fetch
             cache=${this.cache}
             displayContents
             lazyBoundsRatio=${this.lazyBoundsRatio}
-            ?lazyload=${lazyload}
+            ?lazyload=${!this.noLazyload}
             localStorage=${this.localStorage}
             requestId=${this.requestId}
             .itemPropertyMap=${this.itemPropertyMap}
@@ -283,7 +258,6 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
             key=${this.key}
             @loading=${this.resetDuration}
             dataProvider="${item.dataProvider}"
-            endPoint="${item.endPoint}"
             idKey=${this.idKey}
             .templates=${templates}
           >

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;
@@ -60,9 +61,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/button/button.d.ts

@@ -151,6 +151,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/input/input.d.ts

@@ -92,7 +92,6 @@ export declare class Input extends Input_base {
     connectedCallback(): void;
     disconnectedCallback(): void;
     willUpdate(changedProperties: PropertyValues): void;
-    setSelectionRange(start: number, end: number): void;
     hasSlotOrProps(): void;
     inlineContentFocus(): void;
     changeTimeoutId?: ReturnType<typeof setTimeout>;

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement, css } from "lit";
-import { customElement, property, queryAssignedNodes, state, } from "lit/decorators.js";
+import { customElement, property, queryAssignedNodes, state } from "lit/decorators.js";
 import { query } from "lit/decorators/query.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { formControl, label, description, passwordToggle, } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
@@ -69,14 +69,10 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
         this.hasSlotOrProps();
         super.willUpdate(changedProperties);
     }
-    setSelectionRange(start, end) {
-        this.input.setSelectionRange(start, end);
-    }
     hasSlotOrProps() {
         var _a, _b, _c, _d;
         this.hasLabel = this.label || ((_a = this.slotLabelNodes) === null || _a === void 0 ? void 0 : _a.length) ? true : false;
-        this.hasDescription =
-            this.description || ((_b = this.slotDescriptionNodes) === null || _b === void 0 ? void 0 : _b.length) ? true : false;
+        this.hasDescription = this.description || ((_b = this.slotDescriptionNodes) === null || _b === void 0 ? void 0 : _b.length) ? true : false;
         this.hasSuffix = ((_c = this.slotSuffixNodes) === null || _c === void 0 ? void 0 : _c.length) ? true : false;
         this.hasPrefix = ((_d = this.slotPrefixNodes) === null || _d === void 0 ? void 0 : _d.length) ? true : false;
     }
@@ -156,10 +152,7 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
                       aria-label="Toggle password visibility"
                       variant="unstyled"
                     >
-                      <sonic-icon
-                        library="heroicons"
-                        name=${this.isPassword ? "eye" : "eye-slash"}
-                      ></sonic-icon>
+                      <sonic-icon library="heroicons" name=${this.isPassword ? "eye" : "eye-slash"}></sonic-icon>
                     </sonic-button>`
             : ""}
             <slot name="suffix" @slotchange=${this.hasSlotOrProps}></slot>