@supersoniks/concorde 2.0.2 → 2.0.3

package/core/_types/types.d.ts

@@ -21,10 +21,8 @@ export type MixinArgsType = any;
 export type PrimitiveType = string | number | boolean | bigint | undefined | null | symbol;
 export type PublisherInterface<T = PublisherContentType> = Publisher<T> & any;
 export type CoreJSType = string | number | boolean | null | {
-    [property: string]: CoreJSType;
+    [property: string | number | symbol]: CoreJSType;
 } | CoreJSType[];
 export type TypeAndRecordOfType<U> = U & Record<string | number, U>;
-export type PublisherContentType = CoreJSType & {
-    __value?: CoreJSType;
-};
+export type PublisherContentType = unknown;
 export type HTMLFormControl = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;

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

@@ -1,4 +1,4 @@
-import { LitElement, nothing } from "lit";
+import { LitElement } from "lit";
 type DateTimeFormatPartExtended = {
     hidden?: boolean;
     source?: string;
@@ -19,6 +19,7 @@ export declare class SonicDate extends SonicDate_base {
     start_date_string: string | null;
     end_date_string: string | null;
     start_date: number;
+    hide_hours: boolean;
     end_date: number;
     era: "narrow" | "short" | "long" | "";
     year: "numeric" | "2-digit";
@@ -26,6 +27,7 @@ export declare class SonicDate extends SonicDate_base {
     day: "numeric" | "2-digit";
     weekday: "narrow" | "short" | "long" | "hidden";
     hour: "numeric" | "2-digit" | "hidden";
+    hour12: boolean;
     minute: "numeric" | "2-digit" | "hidden";
     language: string;
     renderIf: boolean;
@@ -38,6 +40,6 @@ export declare class SonicDate extends SonicDate_base {
      */
     getDatesParts(start_date: number, end_date: number, options: Intl.DateTimeFormatOptions): DateTimeFormatPartExtended[];
     dateStringToSeconds(dateString: string): number;
-    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/unsafe-html").UnsafeHTMLDirective>;
 }
 export {};

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

@@ -8,8 +8,9 @@ import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import TemplatesContainer from "@supersoniks/concorde/core/mixins/TemplatesContainer";
 import Format from "@supersoniks/concorde/core/utils/Format";
 import HTML from "@supersoniks/concorde/core/utils/HTML";
-import { html, LitElement, nothing } from "lit";
+import { LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 const tagName = "sonic-date";
 let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement)) {
     constructor() {
@@ -24,6 +25,7 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
         this.start_date_string = null;
         this.end_date_string = null;
         this.start_date = 0;
+        this.hide_hours = false;
         this.end_date = 0;
         this.era = "";
         this.year = "numeric";
@@ -31,6 +33,7 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
         this.day = "2-digit";
         this.weekday = "short";
         this.hour = "2-digit";
+        this.hour12 = false;
         this.minute = "2-digit";
         this.language = "";
         this.renderIf = true;
@@ -44,10 +47,10 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
         return this._wording_billet_periode_validite;
     }
     set wording_billet_periode_validite(value) {
+        if (!value)
+            value = "Du %s au %s";
         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();
     }
@@ -70,7 +73,7 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
             //
             //on affiche pas l'heure si les dates sont les mêmes
             const isSameDay = start.toDateString() == end.toDateString();
-            if (!isSameDay) {
+            if (!isSameDay || this.hide_hours) {
                 delete options.hour;
                 delete options.minute;
             }
@@ -78,9 +81,7 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
             parts = format.formatRangeToParts(start, end);
             //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";
@@ -99,7 +100,9 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
         }
         //En mode  design on cache les ","
         if (this.designMode) {
-            parts.forEach((part) => (part.hidden = part.value.trim() == ","));
+            // parts.forEach((part) => (part.hidden = part.value.trim() == ","));
+            // replace all "," by " "
+            parts.forEach((part) => (part.value = part.value.replace(/,/g, " ")));
         }
         parts[0].value = Format.ucFirst(parts[0].value);
         return parts.filter((p) => p.hidden !== true);
@@ -137,6 +140,7 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
             year: this.year,
             month: this.month,
             day: this.day,
+            hour12: this.hour12,
         };
         if (this.weekday !== "hidden")
             options.weekday = this.weekday;
@@ -152,17 +156,22 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
          * On récupère les différentes partie affichées en vu de l'injection dans le template
          */
         const parts = this.getDatesParts(this.start_date, this.end_date, options);
-        return html `${parts.map((part) => {
+        return unsafeHTML(`${parts
+            .map((part) => {
             const template = this.templateParts[part.type];
             if (template) {
                 const clone = document.importNode(template.content, true);
                 const child = clone.children[0];
                 if (child.innerText.trim() == "")
                     child.innerText = part.value;
-                return clone;
+                return child.outerHTML;
             }
-            return html `<span class="${part.type}">${part.value}</span>`;
-        })}`;
+            const span = document.createElement("span");
+            span.innerText = part.value;
+            span.className = part.type;
+            return `<span class="${part.type}">${part.value}</span>`;
+        })
+            .join("")}`);
     }
 };
 __decorate([
@@ -189,6 +198,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], SonicDate.prototype, "start_date", void 0);
+__decorate([
+    property({ type: Boolean })
+], SonicDate.prototype, "hide_hours", void 0);
 __decorate([
     property({ type: Number })
 ], SonicDate.prototype, "end_date", void 0);
@@ -210,6 +222,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], SonicDate.prototype, "hour", void 0);
+__decorate([
+    property({ type: Boolean })
+], SonicDate.prototype, "hour12", void 0);
 __decorate([
     property({ type: String })
 ], SonicDate.prototype, "minute", void 0);

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

@@ -1,5 +1,7 @@
 /// <reference types="node" />
-import { LitElement } from "lit";
+import { LitElement, nothing } from "lit";
+import { LoaderMode } from "../../ui/loader/loader";
+import { DirectiveResult } from "lit/async-directive";
 declare const Fetch_base: {
     new (...args: any[]): {
         api: import("../../../utils/api").default | null;
@@ -7,12 +9,11 @@ declare const Fetch_base: {
         isFirstLoad: boolean;
         isLoading: boolean;
         lazyLoad?: boolean | undefined;
-        noLoader?: boolean | undefined;
         iObserver: IntersectionObserver | null;
-        isDefaultLoaderEnabled: boolean;
         isFetchEnabled: boolean;
+        fetchedData: any;
         _endPoint: string;
-        props: (import("../../../_types/types").PublisherContentType & import("../../../utils/api").ResultTypeInterface) | null;
+        props: import("../../../utils/api").ResultTypeInterface | null;
         endPoint: string;
         requestId: number;
         refetchEveryMs: number;
@@ -49,12 +50,8 @@ 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;
+} & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<import("../../../_types/types").CoreJSType>) & (new (...args: any[]) => import("../../../mixins/TemplatesContainer").TemplatesContainerInterface) & typeof LitElement;
 /**
  * ###Fetch charge un contenu via un appel d'api web.
  * Extends mixins : Fetcher, [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page)
@@ -83,12 +80,14 @@ declare const Fetch_base: {
  * | token | Fetcher ou un de ses parents | A fournir à la place des autres attributs si on le possède | q<d34gb | null |
  
  #### Autres choses utiles
- * * L'attribut *noLoader* du composant permet de désactiver l'affichage du loader par défaut.
  * * On peut appeler la methode invalidate() sur le publisher associé au  composant pour declencher le rechargement des données.
  * * endPoint est une propriété réctive, par conséquent, sa modification, manuelle via template ou data binbding provoque la mise à jour du contenu.
  */
 export declare class Fetch extends Fetch_base {
     static styles: import("lit").CSSResult[];
+    loader?: LoaderMode | true | "";
+    renderLoader(): import("lit-html").TemplateResult<1> | typeof nothing;
+    renderSkeleton(): DirectiveResult<import("lit-html/directive").DirectiveClass>;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

package/core/components/functional/fetch/fetch.js

@@ -4,10 +4,12 @@ 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 { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import Fetcher from "@supersoniks/concorde/core/mixins/Fetcher";
+import { TemplatesContainer } from "@supersoniks/concorde/mixins";
+import { templateContent } from "lit/directives/template-content.js";
 const tagName = "sonic-fetch"; // For Astro.build
 /**
  * ###Fetch charge un contenu via un appel d'api web.
@@ -37,13 +39,24 @@ const tagName = "sonic-fetch"; // For Astro.build
  * | token | Fetcher ou un de ses parents | A fournir à la place des autres attributs si on le possède | q<d34gb | null |
  
  #### Autres choses utiles
- * * L'attribut *noLoader* du composant permet de désactiver l'affichage du loader par défaut.
  * * On peut appeler la methode invalidate() sur le publisher associé au  composant pour declencher le rechargement des données.
  * * endPoint est une propriété réctive, par conséquent, sa modification, manuelle via template ou data binbding provoque la mise à jour du contenu.
  */
-let Fetch = class Fetch extends Fetcher(Subscriber(LitElement)) {
+let Fetch = class Fetch extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
+    renderLoader() {
+        if (!(this.isLoading && this.loader !== undefined))
+            return nothing;
+        const loader = this.loader === true || this.loader === "" ? "fixed" : this.loader;
+        return html `<sonic-loader mode=${loader}></sonic-loader>`;
+    }
+    renderSkeleton() {
+        const template = this.templateParts["skeleton"];
+        if (!(this.isLoading && template))
+            return nothing;
+        return templateContent(template);
+    }
     render() {
-        return html `<slot></slot>`;
+        return html ` ${this.renderSkeleton()} ${this.renderLoader()} ${!this.isLoading ? html `<slot></slot>` : nothing} `;
     }
 };
 Fetch.styles = [
@@ -53,6 +66,9 @@ Fetch.styles = [
       }
     `,
 ];
+__decorate([
+    property()
+], Fetch.prototype, "loader", void 0);
 Fetch = __decorate([
     customElement(tagName)
 ], Fetch);

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

@@ -1,10 +1,11 @@
 /// <reference types="node" />
-import { LitElement } from "lit";
+import { LitElement, nothing } from "lit";
 import "@supersoniks/concorde/core/components/ui/loader/loader";
 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";
+import { LoaderMode } from "@supersoniks/concorde/core/components/ui/loader/loader";
 /**
  *  ### List boucle sur sa propriété "props" et crée des éléments a partir des données en bouclant également sur ses templates.
  *
@@ -44,12 +45,11 @@ declare const List_base: {
         isFirstLoad: boolean;
         isLoading: boolean;
         lazyLoad?: boolean | undefined;
-        noLoader?: boolean | undefined;
         iObserver: IntersectionObserver | null;
-        isDefaultLoaderEnabled: boolean;
         isFetchEnabled: boolean;
+        fetchedData: any;
         _endPoint: string;
-        props: (import("../../../_types/types").PublisherContentType & import("../../../utils/api").ResultTypeInterface) | null;
+        props: import("../../../utils/api").ResultTypeInterface | null;
         endPoint: string;
         requestId: number;
         refetchEveryMs: number;
@@ -86,10 +86,6 @@ 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;
 export declare class List extends List_base {
@@ -103,15 +99,16 @@ export declare class List extends List_base {
      * La propriété idKey est utilisé repérer les lignes de manière unique si pour les item de la liste item[this.idKey] n'existe pas, alors l'index est utilisé
      */
     idKey: string;
+    loader?: LoaderMode | true | "";
     limit: number;
     offset: number;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    renderLoader(): TemplateResult<1> | typeof nothing;
+    renderSkeleton(): DirectiveResult<import("lit-html/directive").DirectiveClass>;
     renderLoadingState(): DirectiveResult<typeof TemplateContentDirective> | TemplateResult;
     renderNoResultState(): TemplateResult<1>;
     formatProps(): (import("../../../_types/types").CoreJSType[] & {
-        __value?: import("../../../_types/types").CoreJSType | undefined;
-    } & {
         _sonic_http_response_?: Response | undefined;
         text?: string | undefined;
     }) | null;

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

@@ -32,7 +32,6 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
     connectedCallback() {
         this.noShadowDom = "";
         this.defferedDebug = this.hasAttribute("debug") || null;
-        this.isDefaultLoaderEnabled = false;
         this.isFetchEnabled = this.hasAttribute("fetch");
         if (this.isFetchEnabled)
             this.isLoading = true;
@@ -41,10 +40,23 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
     disconnectedCallback() {
         super.disconnectedCallback();
     }
+    renderLoader() {
+        if (!(this.isLoading && this.loader !== undefined))
+            return nothing;
+        const template = this.templateParts["skeleton"];
+        if (template)
+            return nothing;
+        const loader = this.loader === true || this.loader === "" ? "fixed" : this.loader;
+        return html `<sonic-loader mode=${loader}></sonic-loader>`;
+    }
+    renderSkeleton() {
+        const template = this.templateParts["skeleton"];
+        if (!(this.isLoading && template))
+            return nothing;
+        return templateContent(template);
+    }
     renderLoadingState() {
-        return this.templateParts["skeleton"]
-            ? templateContent(this.templateParts["skeleton"])
-            : html `<sonic-loader mode="inline"></sonic-loader>`;
+        return html `${this.renderSkeleton()} ${this.renderLoader()}`;
     }
     renderNoResultState() {
         return html ` <div
@@ -187,6 +199,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], List.prototype, "idKey", void 0);
+__decorate([
+    property()
+], List.prototype, "loader", void 0);
 __decorate([
     property()
 ], List.prototype, "limit", void 0);

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

@@ -10,6 +10,7 @@ type QueueItem = {
 };
 type QueueProps = QueueItem[] & {
     resultCount?: number;
+    lastFetchedData?: unknown;
 };
 declare const Queue_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<QueueProps>) & typeof LitElement;
 /**
@@ -44,10 +45,11 @@ export default class Queue extends Queue_base {
     filterPublisher: PublisherProxy | null;
     configFilter(): void;
     filterTimeoutId?: ReturnType<typeof setTimeout>;
+    filterTimeoutMs: number;
     searchHash: string;
     requestId: number;
     isFirstRequest: boolean;
-    updateFilteredContent(): void;
+    updateFilteredContent: () => void;
     /**
      * Cette expression est utilisée comme modèle par le composant Queue pour renseigngner le dataProvider de la [liste](./?path=/docs/core-components-functional-list-list--basic) créée.
      * * l'expression *$offset* est alors remplacée par le numéro de l'élément à partir duquel démarrer
@@ -56,7 +58,6 @@ export default class Queue extends Queue_base {
      */
     dataProviderExpression: string;
     idKey: string;
-    currentScrollPosition: number | undefined;
     resetDuration(): void;
     listDataProviders: string[];
     nextHadEvent: boolean;

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

@@ -46,9 +46,51 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
         this.instanceId = 0;
         this.localStorage = "disabled";
         this.filterPublisher = null;
+        this.filterTimeoutMs = 400;
         this.searchHash = "";
         this.requestId = 0;
         this.isFirstRequest = true;
+        this.updateFilteredContent = () => {
+            /**
+             * On ne lance la recherche que si le hash de recherche est différent
+             */
+            const dataProvider = this.dataProviderExpression;
+            const split = dataProvider.split("?");
+            split.shift();
+            const searchParams = new URLSearchParams(split.join("?"));
+            const filterData = this.filterPublisher?.get();
+            const filteredFieldsArray = this.filteredFields.split(" ");
+            for (const f in filterData) {
+                let value = filterData[f];
+                if (Array.isArray(value))
+                    value = value.filter((v) => v !== null);
+                if ((this.filteredFields && !filteredFieldsArray.includes(f)) || value == null || value.toString() === "")
+                    continue;
+                searchParams.set(f, filterData[f].toString());
+            }
+            const searchHash = searchParams.toString();
+            if (searchHash == this.searchHash && !this.isFirstRequest)
+                return;
+            this.searchHash = searchHash;
+            /**
+             * on reset les données avant de lancer la requète
+             */
+            for (const dataProvider of this.listDataProviders) {
+                PublisherManager.delete(dataProvider);
+            }
+            this.listDataProviders = [];
+            clearTimeout(this.filterTimeoutId);
+            this.filterTimeoutId = setTimeout(async () => {
+                const count = this.resultCount;
+                this.props = null;
+                //On garde le décompte au cas ou il n'y aurait pas rechargement
+                this.requestId++;
+                this.resultCount = count;
+                await PublisherManager.getInstance().isLocalStrorageReady;
+                window.requestAnimationFrame(() => this.next());
+            }, this.isFirstRequest ? 0 : this.filterTimeoutMs);
+            this.isFirstRequest = false;
+        };
         /**
          * Cette expression est utilisée comme modèle par le composant Queue pour renseigngner le dataProvider de la [liste](./?path=/docs/core-components-functional-list-list--basic) créée.
          * * l'expression *$offset* est alors remplacée par le numéro de l'élément à partir duquel démarrer
@@ -57,20 +99,33 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
          */
         this.dataProviderExpression = "";
         this.idKey = "id";
-        this.currentScrollPosition = undefined;
         this.listDataProviders = [];
         this.nextHadEvent = false;
     }
     disconnectedCallback() {
         for (const dataProvider of this.listDataProviders) {
             PublisherManager.delete(dataProvider);
+            this.listDataProviders = [];
         }
+        this.filterPublisher?.offInternalMutation(this.updateFilteredContent);
+        // reset internal state
+        this.props = null;
+        this.limit = 5;
+        this.offset = 0;
+        this.resultCount = 0;
+        this.searchHash = "";
+        this.requestId = 0;
+        this.isFirstRequest = true;
+        this.nextHadEvent = false;
+        this.publisher.set({});
         super.disconnectedCallback();
         return;
     }
     async connectedCallback() {
         this.instanceId = Queue_1.instanceCounter++;
         this.localStorage = this.getAttribute("localStorage") || this.localStorage;
+        this.filterTimeoutMs = parseInt(this.getAttribute("filterTimeoutMs") || "400");
+        //On supprime l'attribut car une queue ne doi pas être en localstorage, ce sont ses sous composants list qui doivent l'être
         this.removeAttribute("localStorage");
         this.noShadowDom = "";
         this.defferedDebug = this.hasAttribute("debug") || null;
@@ -81,11 +136,12 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
             this.dataProviderExpression = HTML.getAncestorAttributeValue(this.parentElement, "dataProvider") || "";
         }
         super.connectedCallback();
+        this.publisher.set({});
         this.key = this.getAttribute("key");
+        await PublisherManager.getInstance().isLocalStrorageReady;
         if (!this.templates)
             this.templates = Array.from(this.querySelectorAll("template"));
         this.lastRequestTime = new Date().getTime();
-        await PublisherManager.getInstance().isLocalStrorageReady;
         this.configFilter();
     }
     configFilter() {
@@ -95,50 +151,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
             return;
         }
         this.filterPublisher = PublisherManager.getInstance().get(dataFilterProvider);
-        this.filterPublisher?.onInternalMutation(() => {
-            this.updateFilteredContent();
-        });
-    }
-    updateFilteredContent() {
-        /**
-         * On ne lance la recherche que si le hash de recherche est différent
-         */
-        const dataProvider = this.dataProviderExpression;
-        const split = dataProvider.split("?");
-        split.shift();
-        const searchParams = new URLSearchParams(split.join("?"));
-        const filterData = this.filterPublisher?.get();
-        const filteredFieldsArray = this.filteredFields.split(" ");
-        for (const f in filterData) {
-            let value = filterData[f];
-            if (Array.isArray(value))
-                value = value.filter((v) => v !== null);
-            if ((this.filteredFields && !filteredFieldsArray.includes(f)) || value == null || value.toString() === "")
-                continue;
-            searchParams.set(f, filterData[f].toString());
-        }
-        const searchHash = searchParams.toString();
-        if (searchHash == this.searchHash && !this.isFirstRequest)
-            return;
-        this.searchHash = searchHash;
-        /**
-         * on reset les données avant de lancer la requète
-         */
-        for (const dataProvider of this.listDataProviders) {
-            PublisherManager.delete(dataProvider);
-        }
-        this.listDataProviders = [];
-        clearTimeout(this.filterTimeoutId);
-        this.filterTimeoutId = setTimeout(async () => {
-            const count = this.resultCount;
-            this.props = null;
-            //On garde le décompte au cas ou il n'y aurait pas rechargement
-            this.requestId++;
-            this.resultCount = count;
-            await PublisherManager.getInstance().isLocalStrorageReady;
-            window.requestAnimationFrame(() => this.next());
-        }, this.isFirstRequest ? 0 : 400);
-        this.isFirstRequest = false;
+        this.filterPublisher?.onInternalMutation(this.updateFilteredContent);
     }
     resetDuration() {
         this.lastRequestTime = new Date().getTime();
@@ -157,6 +170,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
         }
         this.nextHadEvent = !!e;
         if (e) {
+            this.publisher.lastFetchedData = e.detail.fetchedData;
             if (e.detail.requestId < this.requestId)
                 return;
             this.resultCount += e.detail.props.length;
@@ -184,7 +198,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
             this.limit = 15;
         let dataProvider = this.dataProviderExpression.replace("$offset", offset + "").replace("$limit", this.limit + "");
         const split = dataProvider.split("?");
-        const endpoint = split.shift();
+        let endpoint = split.shift();
         const searchParams = new URLSearchParams(split.join("?"));
         const filterData = this.filterPublisher?.get();
         const filteredFieldsArray = this.filteredFields.split(" ");
@@ -195,15 +209,15 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
         }
         if (!this.searchHash)
             this.searchHash = searchParams.toString();
-        dataProvider = endpoint + "?" + searchParams.toString();
+        endpoint = endpoint + "?" + searchParams.toString();
+        dataProvider = dataProvider + "_item_from_queue_" + this.instanceId;
         this.listDataProviders.push(dataProvider);
-        // this.currentScrollPosition = document.scrollingElement?.scrollTop;
         const newProps = [
             ...this.props,
             {
                 id: searchParams.toString() + "/" + this.props.length,
-                dataProvider: dataProvider + "_item_from_queue_" + this.instanceId,
-                endPoint: dataProvider,
+                dataProvider: dataProvider,
+                endPoint: endpoint,
                 offset: offset,
                 limit: this.limit,
             },
@@ -213,16 +227,6 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
         this.lastRequestTime = new Date().getTime();
     }
     render() {
-        /**
-         * supression du retablisment de la scroll pos.
-         **/
-        // if (this.currentScrollPosition) {
-        //   window.requestAnimationFrame(() => {
-        //     if (document.scrollingElement && this.currentScrollPosition != undefined)
-        //       document.scrollingElement.scrollTop = this.currentScrollPosition;
-        //     this.currentScrollPosition = undefined;
-        //   });
-        // }
         if (!Array.isArray(this.props))
             return nothing;
         let lazyload = !this.noLazyload;
@@ -235,6 +239,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement, {}) {
             return html `
           <sonic-list
             fetch
+            loader="inline"
             cache=${this.cache}
             displayContents
             lazyBoundsRatio=${this.lazyBoundsRatio}

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

@@ -16,6 +16,7 @@ declare const SonicRouter_base: (new (...args: any[]) => import("@supersoniks/co
  */
 export declare class SonicRouter extends SonicRouter_base {
     templateValueAttribute: string;
+    fallBackRoute?: string;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private _location;

package/core/components/functional/router/router.js

@@ -68,10 +68,18 @@ let SonicRouter = class SonicRouter extends Subscriber(TemplatesContainer(LitEle
                     if (this.location.indexOf(path.replace(document.location.origin, "")) != -1) {
                         templates.push(t);
                     }
-                    ;
                 }
             }
         }
+        if (templates.length == 0) {
+            if (this.fallBackRoute && this.isConnected) {
+                document.location.href = this.fallBackRoute;
+            }
+            const fallback = this.templatePartsList.find((t) => t.hasAttribute("data-fallback"));
+            if (fallback) {
+                templates.push(fallback);
+            }
+        }
         return html `${repeat(templates, (template, index) => {
             template;
             return index + new Date().getTime();
@@ -99,6 +107,9 @@ let SonicRouter = class SonicRouter extends Subscriber(TemplatesContainer(LitEle
         })}`;
     }
 };
+__decorate([
+    property({ type: String })
+], SonicRouter.prototype, "fallBackRoute", void 0);
 __decorate([
     property()
 ], SonicRouter.prototype, "location", null);