@supersoniks/concorde 1.1.42 → 1.1.43

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

@@ -4,17 +4,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement, css, nothing } from "lit";
+import { 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 { repeat } from "lit/directives/repeat.js";
 import { templateContent } from "lit/directives/template-content.js";
 import "@supersoniks/concorde/core/components/ui/loader/loader";
 import "@supersoniks/concorde/core/components/functional/subscriber/subscriber";
 import Objects from "@supersoniks/concorde/core/utils/Objects";
-import { ifDefined } from "lit/directives/if-defined.js";
 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.
  *
@@ -32,11 +31,9 @@ import TemplatesContainer from "@supersoniks/concorde/core/mixins/TemplatesConta
  * * On peut appler la methode invalidate() sur son publishe pour declencher le rechargement des données
  * *
  */
-const tagName = "sonic-list";
 let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
     constructor() {
         super(...arguments);
-        this.itemPropertyMap = null;
         /**
          * La propriété templateKey contient le nom de la propriété qui sera utilisé pour identifier le template à utiliser dans la donnée de la ligne.
          * Par exemple si templateIdentifier = "name" et que la donnée de la ligne est {name: "myTemplate" ... }, alors le template possédant l'attribut data-value="myTemplate" sera utilisé.
@@ -62,8 +59,17 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
             : html `<sonic-loader mode="inline"></sonic-loader>`;
     }
     renderNoResultState() {
-        return html ` <div class="sonic-no-result-container">
-      <sonic-icon name="emoji-puzzled" size="lg"></sonic-icon><span class="sonic-no-result-text">${this.props}</span>
+        return html ` <div
+      style="color: var(--sc-base-400);
+    font-size: 1.5em;
+    margin: 4rem 0;
+    display: flex;
+    gap: 0.5rem;"
+    >
+      <sonic-icon name="emoji-puzzled" size="lg"></sonic-icon
+      ><span class="sonic-no-result-text"
+        >${typeof this.props === "string" && this.props == "" ? "Aucun résultat" : this.props}</span
+      >
     </div>`;
     }
     formatProps() {
@@ -83,7 +89,9 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
                 }
             }
         }
-        props._sonic_http_response_ = response;
+        props = props.filter((e) => e != null);
+        if (response)
+            props._sonic_http_response_ = response;
         return props;
     }
     render() {
@@ -118,54 +126,44 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
         /**
          * Rendu des lignes
          *  */
-        let templateCount = this.templateList.length;
+        const templateCount = this.templateList.length;
         let counter = -1;
-        let extractValues = this.hasAttribute("extractValues");
+        const extractValues = this.hasAttribute("extractValues");
+        const separator = this.templateParts["separator"];
+        const length = props.length;
         return html `
-      ${repeat(props, (item, index) => item[this.idKey] || index, (item, index) => {
+      ${props.map((item, index) => {
             let templatePartName = item[this.templateKey];
             let hasCustomTemplate = templatePartName && this.templateParts[templatePartName];
-            let key = extractValues ? item.key : index;
+            let key = extractValues ? item === null || item === void 0 ? void 0 : item[this.idKey] : index;
             if (key == "_sonic_http_response_")
                 return nothing;
             let pub = this.publisher[key];
             pub._key_ = key + "";
             counter++;
+            const isNotLast = index < length - 1;
             if (hasCustomTemplate)
                 counter = -1;
             return (item &&
                 html `
-              <sonic-subscriber
-                debug=${ifDefined(this.defferedDebug)}
-                .bindPublisher=${function () {
+            <sonic-subscriber
+              ?debug=${this.defferedDebug === true}
+              .bindPublisher=${function () {
                     return pub;
                 }}
-                .propertyMap=${ifDefined(this.itemPropertyMap)}
-                dataProvider="${this.dataProvider}/list-item/${index}"
-              >
-                ${hasCustomTemplate
+              .propertyMap?=${this.itemPropertyMap}
+              dataProvider="${this.dataProvider}/list-item/${key}"
+            >
+              ${hasCustomTemplate
                     ? templateContent(this.templateParts[templatePartName])
                     : templateContent(this.templateList[counter % templateCount])}
-              </sonic-subscriber>
-            `);
+            </sonic-subscriber>
+            ${separator && isNotLast ? templateContent(separator) : nothing}
+          `);
         })}
     `;
     }
 };
-List.styles = [
-    css `
-      .sonic-no-result-container {
-        color: var(--sc-base-400);
-        font-size: 1.65rem;
-      }
-      sonic-icon {
-        margin-right: 0.25em;
-      }
-      span {
-        vertical-align: middle;
-      }
-    `,
-];
 __decorate([
     property({ type: Object })
 ], List.prototype, "itemPropertyMap", void 0);
@@ -179,8 +177,3 @@ List = __decorate([
     customElement(tagName)
 ], List);
 export { List };
-//Ajout pour custom-elements-manifest pour storybook notamment
-try {
-    customElements.define(tagName, List);
-}
-catch (e) { }

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

@@ -0,0 +1,22 @@
+import { LitElement } from "lit";
+import { PublisherInterface, PublisherContentType } from "@supersoniks/concorde/core/_types/types";
+declare type Composition = Record<string, Object | string>;
+declare type Listener = {
+    publisher: PublisherInterface;
+    subscriber: <T>(v: T) => void;
+};
+declare const SonicMix_base: (new (...args: any[]) => import("../../../mixins/Subscriber").SubscriberInterface<any>) & typeof LitElement;
+export default class SonicMix extends SonicMix_base {
+    private _composition;
+    get composition(): Composition;
+    static styles: import("lit").CSSResult[];
+    set composition(value: Composition);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updateComposition(): void;
+    listeners: Listener[];
+    removePublisherListeners(): void;
+    parseComposition<T extends PublisherContentType = any>(composition: Composition, publisher: PublisherInterface<T>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/core/components/functional/mix/mix.js

@@ -0,0 +1,99 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { PublisherProxy } from "@supersoniks/concorde/core/utils/PublisherProxy";
+import { Subscriber } from "@supersoniks/concorde/mixins";
+import { Objects, PublisherManager } from "@supersoniks/concorde/utils";
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+let SonicMix = class SonicMix extends Subscriber(LitElement) {
+    constructor() {
+        super(...arguments);
+        this._composition = {};
+        this.listeners = [];
+    }
+    get composition() {
+        return this._composition;
+    }
+    set composition(value) {
+        this._composition = value;
+        this.updateComposition();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateComposition();
+    }
+    disconnectedCallback() {
+        this.removePublisherListeners();
+        super.disconnectedCallback();
+    }
+    updateComposition() {
+        this.removePublisherListeners();
+        if (!this.publisher)
+            return;
+        this.publisher.set({});
+        this.parseComposition(this.composition, this.publisher);
+    }
+    removePublisherListeners() {
+        let listeners = this.listeners;
+        this.listeners = [];
+        listeners.forEach((listener) => {
+            this.publisher.offAssign(listener.subscriber);
+        });
+    }
+    parseComposition(composition, publisher) {
+        if (!composition)
+            return;
+        for (let z in composition) {
+            let value = composition[z];
+            if (typeof value === "string") {
+                let split = value.split(".");
+                let publisherSource = PublisherManager.get(split.shift());
+                publisherSource = Objects.traverse(publisherSource, split);
+                let publisherSubscriber = {
+                    publisher: publisherSource,
+                    subscriber: (v) => {
+                        publisher[z] = v;
+                    },
+                };
+                this.listeners.push(publisherSubscriber);
+                publisherSource.onAssign(publisherSubscriber.subscriber);
+                publisher._proxies_.set(z, publisherSource);
+            }
+            else {
+                this.publisher[z] = {};
+                let newPublisher = new PublisherProxy({}, publisher);
+                publisher._proxies_.set(z, newPublisher);
+                let publisherSubscriber = {
+                    publisher: newPublisher,
+                    subscriber: (v) => {
+                        publisher[z] = v;
+                    },
+                };
+                this.listeners.push(publisherSubscriber);
+                newPublisher.onAssign(publisherSubscriber.subscriber);
+                this.parseComposition(value, newPublisher);
+            }
+        }
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+SonicMix.styles = [
+    css `
+      :host {
+        display: contents;
+      }
+    `,
+];
+__decorate([
+    property({ type: Object })
+], SonicMix.prototype, "composition", null);
+SonicMix = __decorate([
+    customElement("sonic-mix")
+], SonicMix);
+export default SonicMix;

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

@@ -1,7 +1,15 @@
 import { LitElement, nothing } from "lit";
 import "@supersoniks/concorde/core/components/functional/list/list";
-import { PublisherProxy } from "@supersoniks/concorde/core/utils/PublisherProxy.mjs";
-declare const Queue_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+import { PublisherProxy } from "@supersoniks/concorde/core/utils/PublisherProxy";
+declare const Queue_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<any>) & typeof LitElement;
+/**
+ *### Une Queue charge du contenu par lot selon l'expression renseignée dans l'attribut *dataProviderExpression*.
+ * * Chaque lot est chargé par un composant [List](./?path=/docs/core-components-functional-list-list--basic) dont le dataProvider créé à partir de l'attribut dataProviderExpression
+ * * A l'initialisation elle regarde l'attribut dataFilterProvider qui donne l'adresse d'un [publisher](./?path=/docs/how-to-🥨-dialogue-inter-composant--page)
+ * Si cet attribut est touvé, Queue écoute le publisher fourni et se réinitialise à chaque modification du contenu de celui-ci.
+ * Les valeurs renseignées dans ce publisher sont ajoutées en get à chaque requête
+ * * la proriété *key* peut être utilisé pour cibler une propriété particulière du retour de l'api.
+ */
 export default class Queue extends Queue_base {
     templates: Array<HTMLTemplateElement> | null;
     lastRequestTime: number;
@@ -13,12 +21,16 @@ export default class Queue extends Queue_base {
     targetRequestDuration: number;
     limit: number;
     offset: number;
+    resultCount: number;
     filteredFields: string;
+    disconnectedCallback(): void;
     static instanceCounter: number;
     connectedCallback(): void;
     filterPublisher: PublisherProxy | null;
     configFilter(): void;
-    filterTimeoutId: any;
+    filterTimeoutId?: ReturnType<typeof setTimeout>;
+    searchHash: string;
+    requestId: number;
     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.
@@ -31,6 +43,7 @@ export default class Queue extends Queue_base {
     currentScrollPosition: number | undefined;
     resetDuration(): void;
     listDataProviders: string[];
+    nextHadEvent: boolean;
     next(e?: CustomEvent): void;
     render(): import("lit-html").TemplateResult<1> | typeof nothing;
 }

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

@@ -9,9 +9,10 @@ import { html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import { repeat } from "lit/directives/repeat.js";
-import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy.mjs";
-import { ifDefined } from "lit/directives/if-defined.js";
+import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
 import "@supersoniks/concorde/core/components/functional/list/list";
+import { HTML } from "@supersoniks/concorde/utils";
+const tagName = "sonic-queue";
 /**
  *### Une Queue charge du contenu par lot selon l'expression renseignée dans l'attribut *dataProviderExpression*.
  * * Chaque lot est chargé par un composant [List](./?path=/docs/core-components-functional-list-list--basic) dont le dataProvider créé à partir de l'attribut dataProviderExpression
@@ -20,7 +21,6 @@ import "@supersoniks/concorde/core/components/functional/list/list";
  * Les valeurs renseignées dans ce publisher sont ajoutées en get à chaque requête
  * * la proriété *key* peut être utilisé pour cibler une propriété particulière du retour de l'api.
  */
-const tagName = "sonic-queue";
 let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
     constructor() {
         super(...arguments);
@@ -38,9 +38,11 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
          */
         this.limit = 5;
         this.offset = 0;
+        this.resultCount = 0;
         this.filteredFields = "";
         this.filterPublisher = null;
-        this.filterTimeoutId = undefined;
+        this.searchHash = "";
+        this.requestId = 0;
         /**
          * 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
@@ -51,10 +53,22 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
         this.idKey = "id";
         this.currentScrollPosition = undefined;
         this.listDataProviders = [];
+        this.nextHadEvent = false;
+    }
+    disconnectedCallback() {
+        for (let dataProvider of this.listDataProviders) {
+            PublisherManager.delete(dataProvider);
+        }
+        super.disconnectedCallback();
+        return;
     }
     connectedCallback() {
         this.noShadowDom = "";
         this.defferedDebug = this.hasAttribute("debug") || null;
+        /**Compat avec states et routing **/
+        if (!this.dataProviderExpression) {
+            this.dataProviderExpression = HTML.getAncestorAttributeValue(this.parentElement, "dataProvider") || "";
+        }
         if (!this.dataProvider)
             this.dataProvider = "sonic-queue-" + Queue_1.instanceCounter++;
         this.configFilter();
@@ -79,13 +93,39 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
         });
     }
     updateFilteredContent() {
+        var _a;
+        /**
+         * On ne lance la recherche que si le hash de recherche est différent
+         */
+        let dataProvider = this.dataProviderExpression;
+        let split = dataProvider.split("?");
+        split.shift();
+        let searchParams = new URLSearchParams(split.join("?"));
+        let filterData = (_a = this.filterPublisher) === null || _a === void 0 ? void 0 : _a.get();
+        let filteredFieldsArray = this.filteredFields.split(" ");
+        for (let f in filterData) {
+            if ((this.filteredFields && !filteredFieldsArray.includes(f)) || filterData[f] == null)
+                continue;
+            searchParams.set(f, filterData[f]);
+        }
+        let searchHash = searchParams.toString();
+        if (searchHash == this.searchHash)
+            return;
+        this.searchHash = searchHash;
+        /**
+         * on reset les données avant de lancer la requète
+         */
         for (let dataProvider of this.listDataProviders) {
             PublisherManager.delete(dataProvider);
         }
         this.listDataProviders = [];
         clearTimeout(this.filterTimeoutId);
         this.filterTimeoutId = setTimeout(() => {
+            let count = this.resultCount;
             this.props = null;
+            //On garde le décompte au cas ou il n'y aurait pas rechargement
+            this.resultCount = count;
+            this.requestId++;
             this.next();
         }, 250);
     }
@@ -97,13 +137,27 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
         let offset = this.offset;
         const newTime = new Date().getTime();
         const requestDuration = newTime - this.lastRequestTime;
+        /**
+         * Le rechargement n'est pas garanti si pas de changement dans les filtres
+         * Un ne repasse donc à 0 qu'à partir du premier chargement.
+         * */
+        if (!this.nextHadEvent && e) {
+            this.resultCount = 0;
+        }
+        this.nextHadEvent = !!e;
         if (e) {
+            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) {
+                this.publisher.resultCount = this.resultCount;
                 return;
             }
         }
         if (!Array.isArray(this.props)) {
-            this.props = [];
+            let newProps = [];
+            newProps.resultCount = this.resultCount;
+            this.props = newProps;
         }
         else {
             const props = this.props;
@@ -123,14 +177,14 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
         let filterData = (_a = this.filterPublisher) === null || _a === void 0 ? void 0 : _a.get();
         let filteredFieldsArray = this.filteredFields.split(" ");
         for (let f in filterData) {
-            if (this.filteredFields && !filteredFieldsArray.includes(f))
+            if ((this.filteredFields && !filteredFieldsArray.includes(f)) || filterData[f] == null)
                 continue;
             searchParams.set(f, filterData[f]);
         }
         dataProvider = endpoint + "?" + searchParams.toString();
         this.listDataProviders.push(dataProvider);
         this.currentScrollPosition = (_b = document.scrollingElement) === null || _b === void 0 ? void 0 : _b.scrollTop;
-        this.props = [
+        let newProps = [
             ...this.props,
             {
                 id: searchParams.toString() + "/" + this.props.length,
@@ -139,6 +193,8 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
                 limit: this.limit,
             },
         ];
+        newProps.resultCount = this.resultCount;
+        this.props = newProps;
         this.lastRequestTime = new Date().getTime();
     }
     render() {
@@ -158,9 +214,11 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
             return html `
             <sonic-list
               fetch
-              ?displayContents=${this.displayContents}
-              .itemPropertyMap=${this.itemPropertyMap}
-              debug=${ifDefined(this.defferedDebug)}
+              displayContents
+              lazyload
+              requestId=${this.requestId}
+              ?itemPropertyMap=${this.itemPropertyMap}
+              ?debug=${this.defferedDebug === true}
               @load=${this.next}
               key=${this.key}
               @loading=${this.resetDuration}
@@ -190,6 +248,9 @@ __decorate([
 __decorate([
     property()
 ], Queue.prototype, "offset", void 0);
+__decorate([
+    property()
+], Queue.prototype, "resultCount", void 0);
 __decorate([
     property()
 ], Queue.prototype, "filteredFields", void 0);
@@ -203,8 +264,3 @@ Queue = Queue_1 = __decorate([
     customElement(tagName)
 ], Queue);
 export default Queue;
-//Ajout pour custom-elements-manifesy pour storybook notamment
-try {
-    customElements.define(tagName, Queue);
-}
-catch (e) { }

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

@@ -1,5 +1,14 @@
 import { LitElement } from "lit";
-declare const SonicRedirect_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+declare const SonicRedirect_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<any>) & typeof LitElement;
+/**
+ * sonic-redirect permet d'effectuer une redirection.
+ * * L'URL de redirection fournie dans l'attribut *to*.
+ * * La redirection est effectuée en fonction de la disponibilité d'une donnée issue du publisher à l'adresse fournie par l'attribut dataProvider
+ * * La donnée a trouver est renseignées via l'attribut *onData* qui peur repésenter un chemin dans la donnée via la dot syntaxe
+ * * Si la données est trouvée et qu'elle peut être évaluée à true alors la redirection est effectuée
+ * Par exemple : la données vaut {user:{id:2}} si onData="user.id"la redirection est effectuée.
+ * * Si l'attribut pushState est défini, alors la redirection est effectuée via pushState, sinon c'est document.location qui est modifié.
+ */
 export declare class SonicRedirect extends SonicRedirect_base {
     udpateCallBack: () => void;
     connectedCallback(): void;

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

@@ -9,6 +9,7 @@ import { customElement } from "lit/decorators.js";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import LocationHandler from "@supersoniks/concorde/core/utils/LocationHandler";
 import Objects from "@supersoniks/concorde/core/utils/Objects";
+const tagName = "sonic-redirect";
 /**
  * sonic-redirect permet d'effectuer une redirection.
  * * L'URL de redirection fournie dans l'attribut *to*.
@@ -18,7 +19,6 @@ import Objects from "@supersoniks/concorde/core/utils/Objects";
  * Par exemple : la données vaut {user:{id:2}} si onData="user.id"la redirection est effectuée.
  * * Si l'attribut pushState est défini, alors la redirection est effectuée via pushState, sinon c'est document.location qui est modifié.
  */
-const tagName = "sonic-redirect";
 let SonicRedirect = class SonicRedirect extends Subscriber(LitElement) {
     constructor() {
         super(...arguments);
@@ -38,6 +38,10 @@ let SonicRedirect = class SonicRedirect extends Subscriber(LitElement) {
         super.disconnectedCallback();
     }
     update() {
+        if (this.hasAttribute("onAdded")) {
+            LocationHandler.changeFromComponent(this);
+            return;
+        }
         if (!this.props)
             return;
         let onDataPath = this.getAttribute("onData").split(".");
@@ -51,8 +55,3 @@ SonicRedirect = __decorate([
     customElement(tagName)
 ], SonicRedirect);
 export { SonicRedirect };
-//Ajout pour la creation du cem notamment pour Storybook
-try {
-    customElements.define(tagName, SonicRedirect);
-}
-catch (e) { }

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

@@ -1,5 +1,19 @@
 import { LitElement } from "lit";
-declare const SonicRouter_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/TemplatesContainer").TemplatesContainerInterface) & typeof LitElement;
+declare const SonicRouter_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<any>) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/TemplatesContainer").TemplatesContainerInterface) & typeof LitElement;
+/**
+ * ### Le router observe les modification document.location et met à jour sa vu de la manière suivante :
+ * * Il boucle sur ses template enfants et test si la regexp contenue dans l'attribut *data-route* match document.location
+ * * Si oui le contenu du template est affiché
+ * * Si l'attribut dataProviderExpression est fourni le contenu est entouré d'une div :
+ * * L'attribut "dataProvider" de cette div est le resultat de l'appel à la fonction replace sur la propriété location avec comme paramettres la regexpe et dataproviderExpression.
+ * * On peut également utiliser les des expressions du type url-pattern pour les paramètres de la route voir les exemples
+ * * les subscribers/fetch... du template ser réfèrerons à ce dataProvider
+ *
+ * **Exemples **
+ * Avec location = /youpla/utilisateur/2 :
+ * * RegExp : data-route = /utilisateur/(\d+) et dataproviderExpression = /user/$1 l'attribut dataProvider vaudra "/user/2"
+ * * url-pattern : /*utilisateur/:id et dataproviderExpression = /user/:id l'attribut dataProvider vaudra "/user/2"
+ */
 export declare class SonicRouter extends SonicRouter_base {
     templateValueAttribute: string;
     connectedCallback(): void;

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

@@ -12,6 +12,7 @@ import LocationHandler from "@supersoniks/concorde/core/utils/LocationHandler";
 import { repeat } from "lit/directives/repeat.js";
 import UrlPattern from "url-pattern";
 import TemplatesContainer from "@supersoniks/concorde/core/mixins/TemplatesContainer";
+const tagName = "sonic-router";
 /**
  * ### Le router observe les modification document.location et met à jour sa vu de la manière suivante :
  * * Il boucle sur ses template enfants et test si la regexp contenue dans l'attribut *data-route* match document.location
@@ -26,7 +27,6 @@ import TemplatesContainer from "@supersoniks/concorde/core/mixins/TemplatesConta
  * * RegExp : data-route = /utilisateur/(\d+) et dataproviderExpression = /user/$1 l'attribut dataProvider vaudra "/user/2"
  * * url-pattern : /*utilisateur/:id et dataproviderExpression = /user/:id l'attribut dataProvider vaudra "/user/2"
  */
-const tagName = "sonic-router";
 let SonicRouter = class SonicRouter extends Subscriber(TemplatesContainer(LitElement)) {
     constructor() {
         super(...arguments);
@@ -98,8 +98,3 @@ SonicRouter = __decorate([
     customElement(tagName)
 ], SonicRouter);
 export { SonicRouter };
-//Ajout pour la creation du cem notamment pour Storybook
-try {
-    customElements.define(tagName, SonicRouter);
-}
-catch (e) { }

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

@@ -32,7 +32,7 @@ export default class SDUIDescriptorTransformer {
     /**
      * Pour chaque élément de la liste, remplace l'élément par ses enfants
      */
-    unWrap(transformAction: SDUITransformAction, list: SDUITransformList): void;
+    unwrap(transformAction: SDUITransformAction, list: SDUITransformList): void;
     /**
      * Regroupe tous les éléments de la liste dans l'élément fourni via la prop `ui` de transformAction
      * L'élément créé est inséré en lieu et place du premier élément de la liste