@supersoniks/concorde 1.0.6 → 1.1.0

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

@@ -0,0 +1,132 @@
+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 { html, LitElement, css } 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 "../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";
+/**
+ *  ### List boucle sur sa propriété "props" et crée des éléments a partir des données en bouclant également sur ses templates.
+ *
+ * * Si le composant possède un attribut *fetch* (quelque soit sa valeur), il charge un contenu via un appel d'api web comme le fait [fetch](./?path=/docs/core-components-functional-fetch--basic)
+ * Dans ce cas la proriété *key* (qui est issue du fetcher) peut être utilisé pour cibler une propriété particulière du retour de l'api.
+ *
+ *  * Chaque élément créé est englobé dans un objet [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page)
+ *  un dataProvider y est associé a l'adresse suivante *dataProvider-de-la-liste$/*index-e-la-ligne-courante*
+ *  Les éléments contenus dans le template seront donc remplis par les données si ils sont eux même des subscriber et qu'il possèdent des propriétés réactives correspondantes
+ *  * Lors du chargement un objet loader inline est affiché.
+ *  * Si le résultat de la requête n'est pas une liste, mais est un objet, alors il est imbriqué dans un tableau pour garantir le fonctionnement.
+ * On paut aussi extraire directement toutes les valeurs dans un tableau pour le rendu en ajoutant l'attribut **extractValues**
+ */
+let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
+    constructor() {
+        super(...arguments);
+        /**
+         * 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é.
+         */
+        this.templateKey = "template";
+        /**
+         * 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é
+         */
+        this.idKey = "id";
+    }
+    connectedCallback() {
+        this.noShadowDom = "";
+        this.defferedDebug = this.hasAttribute("debug") || null;
+        this.isDefaultLoaderEnabled = false;
+        this.isFetchEnabled = this.hasAttribute("fetch");
+        super.connectedCallback();
+    }
+    render() {
+        if (this.isLoading && !Array.isArray(this.props))
+            return html `<sonic-loader mode="inline"></sonic-loader>`;
+        // si props est une string on considère qu'il n'y a pas de résultats
+        if (typeof this.props == "string") {
+            return html `<div class="sonic-no-result-container">
+        <sonic-icon prefix="iconoir" name="emoji-think-left" size="lg"></sonic-icon><span class="sonic-no-result-text">${this.props}</span>
+      </div>`;
+        }
+        // si props est un objet mais qu'il n'y a pas de contenu on retourn une div vide (nécessaire pour le lazyload)
+        if (!Objects.isObject(this.props) || Object.keys(this.props).length == 0) {
+            return html `<div></div>`;
+        }
+        let props = this.props;
+        let extractValues = this.hasAttribute("extractValues");
+        //si props n'est pas un tableau on l'adapte
+        if (!Array.isArray(props)) {
+            if (extractValues) {
+                props = Object.entries(props).map(([k, v]) => ({ key: k, value: v }));
+            }
+            else {
+                props = [props];
+            }
+        }
+        // Resultats
+        let templateCount = this.templateList.length;
+        let counter = -1;
+        return html `
+      ${repeat(props, (item, index) => item[this.idKey] || index, (item, index) => {
+            let templatePartName = item[this.templateKey];
+            let hasCustomTemplate = templatePartName && this.templateParts[templatePartName];
+            counter++;
+            if (hasCustomTemplate)
+                counter = -1;
+            let pub = this.publisher[extractValues ? item.key : index];
+            return (item &&
+                html `
+              <sonic-subscriber
+                debug=${ifDefined(this.defferedDebug)}
+                .bindPublisher=${function () {
+                    return pub;
+                }}
+                dataProvider="${this.dataProvider}/list-item/${index}"
+              >
+                ${hasCustomTemplate
+                    ? templateContent(this.templateParts[templatePartName])
+                    : templateContent(this.templateList[counter % templateCount])}
+              </sonic-subscriber>
+            `);
+        })}
+    `;
+    }
+};
+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: String })
+], List.prototype, "templateKey", void 0);
+__decorate([
+    property({ type: String })
+], List.prototype, "idKey", void 0);
+List = __decorate([
+    customElement("sonic-list")
+], List);
+export { List };
+//Ajout pour custom-elements-manifest pour storybook notamment
+try {
+    customElements.define("sonic-list", List);
+}
+catch (e) { }

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

@@ -0,0 +1,42 @@
+import { LitElement, nothing } from "lit";
+import '../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;
+/**
+ *### 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 declare class Queue extends Queue_base {
+    templates: Array<HTMLTemplateElement> | null;
+    lastRequestTime: number;
+    key: String;
+    /**
+     * Durée cible en ms d'une requête pour afficher 1 lot.
+     */
+    targetRequestDuration: number;
+    limit: number;
+    static instanceCounter: number;
+    connectedCallback(): void;
+    filterPublisher: PublisherProxy | null;
+    configFilter(): void;
+    filterTimeoutId: any;
+    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
+     * * l'expression *$limit* est remplacée par la valeur représentant le nombre d'éléments à charger
+     * * Si pas d'expression *$offset* le composant se comporte un peu comme une liste, il ne va pas essayer de charger les éléments suivants
+     */
+    dataProviderExpression: string;
+    idKey: string;
+    currentScrollPosition: number | undefined;
+    resetDuration(): void;
+    listDataProviders: string[];
+    next(e?: CustomEvent): void;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+export {};

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

@@ -0,0 +1,184 @@
+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;
+};
+var Queue_1;
+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 '../list/list';
+/**
+ *### 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.
+ */
+let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.templates = null;
+        this.lastRequestTime = 0;
+        this.key = "";
+        /**
+         * Durée cible en ms d'une requête pour afficher 1 lot.
+         */
+        this.targetRequestDuration = 500;
+        /*
+         * Quantité d'éléments devant être chargés dans le premier lot.
+         * Cette valeur est mise à jour ensuite par Queue pour chauq lot pour se rapprocher tanque possible de *targetRequestDuration*
+         */
+        this.limit = 5;
+        this.filterPublisher = null;
+        this.filterTimeoutId = undefined;
+        /**
+         * 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
+         * * l'expression *$limit* est remplacée par la valeur représentant le nombre d'éléments à charger
+         * * Si pas d'expression *$offset* le composant se comporte un peu comme une liste, il ne va pas essayer de charger les éléments suivants
+         */
+        this.dataProviderExpression = "";
+        this.idKey = "id";
+        this.currentScrollPosition = undefined;
+        this.listDataProviders = [];
+    }
+    connectedCallback() {
+        this.noShadowDom = "";
+        this.defferedDebug = this.hasAttribute("debug") || null;
+        if (!this.dataProvider)
+            this.dataProvider = "sonic-queue-" + Queue_1.instanceCounter++;
+        this.configFilter();
+        super.connectedCallback();
+        this.key = this.getAttribute("key");
+        this.templates = [...this.querySelectorAll("template")];
+        this.lastRequestTime = new Date().getTime();
+        this.next();
+    }
+    configFilter() {
+        var _a;
+        let dataFilterProvider = this.getAncestorAttributeValue("dataFilterProvider");
+        if (!dataFilterProvider)
+            return;
+        this.filterPublisher = PublisherManager.getInstance().get(dataFilterProvider);
+        (_a = this.filterPublisher) === null || _a === void 0 ? void 0 : _a.onInternalMutation(() => {
+            var _a;
+            if (Object.keys((_a = this.filterPublisher) === null || _a === void 0 ? void 0 : _a.get()).length == 0)
+                return;
+            this.updateFilteredContent();
+        });
+    }
+    updateFilteredContent() {
+        for (let dataProvider of this.listDataProviders) {
+            PublisherManager.delete(dataProvider);
+        }
+        this.listDataProviders = [];
+        clearTimeout(this.filterTimeoutId);
+        this.filterTimeoutId = setTimeout(() => {
+            this.props = null;
+            this.next();
+        }, 250);
+    }
+    resetDuration() {
+        this.lastRequestTime = new Date().getTime();
+    }
+    next(e) {
+        var _a, _b;
+        let offset = 0;
+        const newTime = new Date().getTime();
+        const requestDuration = newTime - this.lastRequestTime;
+        if (e) {
+            if (!e.detail.isFirstLoad || !e.detail.props.length || this.dataProviderExpression.indexOf("$offset") == -1) {
+                return;
+            }
+        }
+        if (!Array.isArray(this.props)) {
+            this.props = [];
+        }
+        else {
+            const props = Object.values(this.props);
+            const item = props[props.length - 1];
+            offset = parseInt(item.offset.toString()) + parseInt(item.limit.toString());
+        }
+        if (requestDuration > 0 && e)
+            this.limit = Math.round((this.limit / requestDuration) * this.targetRequestDuration);
+        if (this.limit < 1)
+            this.limit = 1;
+        if (this.limit > 15)
+            this.limit = 15;
+        let dataProvider = this.dataProviderExpression.replace("$offset", offset + "").replace("$limit", this.limit + "");
+        let split = dataProvider.split("?");
+        let endpoint = split.shift();
+        let searchParams = new URLSearchParams(split.join("?"));
+        let filterData = (_a = this.filterPublisher) === null || _a === void 0 ? void 0 : _a.get();
+        for (let f in filterData) {
+            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 = [
+            ...Object.values(this.props),
+            {
+                id: searchParams.toString() + "/" + this.props.length,
+                dataProvider: dataProvider,
+                offset: offset,
+                limit: this.limit,
+            },
+        ];
+        this.lastRequestTime = new Date().getTime();
+    }
+    render() {
+        if (this.currentScrollPosition) {
+            window.requestAnimationFrame(() => {
+                if (document.scrollingElement)
+                    document.scrollingElement.scrollTop = this.currentScrollPosition;
+                this.currentScrollPosition = undefined;
+            });
+        }
+        if (!Array.isArray(this.props))
+            return nothing;
+        return html `
+      ${repeat(this.props, (item) => item.id, (item) => html `
+            <sonic-list
+              fetch
+              debug=${ifDefined(this.defferedDebug)}
+              @load=${this.next}
+              key=${this.key}
+              @loading=${this.resetDuration}
+              dataProvider="${item.dataProvider}"
+              idKey=${this.idKey}
+              .templates=${this.templates}
+            >
+            </sonic-list>
+          `)}
+    `;
+    }
+};
+Queue.instanceCounter = 0;
+__decorate([
+    property()
+], Queue.prototype, "targetRequestDuration", void 0);
+__decorate([
+    property()
+], Queue.prototype, "limit", void 0);
+__decorate([
+    property({ type: String })
+], Queue.prototype, "dataProviderExpression", void 0);
+__decorate([
+    property({ type: String })
+], Queue.prototype, "idKey", void 0);
+Queue = Queue_1 = __decorate([
+    customElement("sonic-queue")
+], Queue);
+export { Queue };
+//Ajout pour custom-elements-manifesy pour storybook notamment
+try {
+    customElements.define("sonic-queue", Queue);
+}
+catch (e) { }

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

@@ -0,0 +1,18 @@
+import { LitElement } from "lit";
+declare const SonicRedirect_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & 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;
+    disconnectedCallback(): void;
+    update(): void;
+}
+export {};

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

@@ -0,0 +1,57 @@
+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 { LitElement } from "lit";
+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";
+/**
+ * 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é.
+ */
+let SonicRedirect = class SonicRedirect extends Subscriber(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.udpateCallBack = () => { };
+    }
+    connectedCallback() {
+        this.noShadowDom = "";
+        this.style.display = "none";
+        super.connectedCallback();
+        this.udpateCallBack = () => this.update();
+        if (this.publisher)
+            this.publisher.onInternalMutation(this.udpateCallBack);
+    }
+    disconnectedCallback() {
+        if (this.publisher)
+            this.publisher.offInternalMutation(this.udpateCallBack);
+        super.disconnectedCallback();
+    }
+    update() {
+        if (!this.props)
+            return;
+        let onDataPath = this.getAttribute("onData").split(".");
+        let searchedData = Objects.traverse(this.props, onDataPath);
+        if (searchedData) {
+            LocationHandler.changeFromComponent(this);
+        }
+    }
+};
+SonicRedirect = __decorate([
+    customElement("sonic-redirect")
+], SonicRedirect);
+export { SonicRedirect };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define("sonic-redirect", SonicRedirect);
+}
+catch (e) { }

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

@@ -0,0 +1,26 @@
+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;
+/**
+ * ### 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;
+    disconnectedCallback(): void;
+    private _location;
+    set location(value: string);
+    get location(): string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

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

@@ -0,0 +1,104 @@
+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 { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import { templateContent } from "lit/directives/template-content.js";
+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";
+/**
+ * ### 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"
+ */
+let SonicRouter = class SonicRouter extends Subscriber(TemplatesContainer(LitElement)) {
+    constructor() {
+        super(...arguments);
+        this.templateValueAttribute = "data-route";
+        this._location = document.location.href.replace(document.location.origin, "");
+    }
+    connectedCallback() {
+        this.noShadowDom = "";
+        LocationHandler.onChange(this);
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        LocationHandler.offChange(this);
+        super.disconnectedCallback();
+    }
+    set location(value) {
+        this._location = value;
+        this.requestUpdate();
+    }
+    get location() {
+        return this._location;
+    }
+    render() {
+        let templates = [];
+        for (let t of this.templatePartsList) {
+            let path = t.getAttribute(this.templateValueAttribute);
+            let regexp = new RegExp(path);
+            let urlPattern = new UrlPattern(path);
+            if (regexp.test(this.location)) {
+                templates.push(t);
+            }
+            else if (urlPattern.match(this.location)) {
+                t.setAttribute("mode", "patternMatching");
+                templates.push(t);
+            }
+        }
+        return html `${repeat(templates, (template, index) => {
+            template;
+            return index + new Date().getTime();
+        }, (template) => {
+            var _a;
+            if (template.title)
+                document.title = template.title;
+            if (template.hasAttribute("dataProviderExpression")) {
+                let dataProvider = "";
+                let dataProviderExpression = template.getAttribute("dataProviderExpression");
+                if (template.getAttribute("mode") == "patternMatching") {
+                    const matcher = new UrlPattern(template.getAttribute(this.templateValueAttribute));
+                    const filler = new UrlPattern(dataProviderExpression);
+                    dataProvider = filler.stringify(matcher.match(this.location));
+                }
+                else {
+                    const regexp = new RegExp(template.getAttribute(this.templateValueAttribute));
+                    let match = (this.location + "").match(regexp);
+                    if (match) {
+                        dataProvider = (_a = match.shift()) === null || _a === void 0 ? void 0 : _a.replace(regexp, dataProviderExpression);
+                    }
+                }
+                return html `<div style="display:contents" dataProvider="${dataProvider}">${templateContent(template)}</div>`;
+            }
+            return templateContent(template);
+        })}`;
+    }
+};
+__decorate([
+    property()
+], SonicRouter.prototype, "location", null);
+SonicRouter = __decorate([
+    customElement("sonic-router")
+], SonicRouter);
+export { SonicRouter };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define("sonic-router", SonicRouter);
+}
+catch (e) { }

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

@@ -0,0 +1,28 @@
+import { LitElement } from "lit";
+declare const SonicStates_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/TemplatesContainer").TemplatesContainerInterface) & typeof LitElement;
+/**
+ * ### sonic-states affiche des états différents en fonction de la valeur d'une sous propriété de son dataProvider (attribut data-path en dot notation):
+ * * Il boucle sur ses template enfants et test si la regexp contenue dans l'attribut *data-value* match la valeur de la propriété
+ * * Si oui le contenu du template correspontant est affiché comme état.
+ * * 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 valeur de la propriété avec comme paramettres la regexp et dataproviderExpression.
+ * * Les subscribers/fetch... du template se réfèrerons à ce dataProvider
+ * * On peut également utiliser les des expressions du type url-pattern pour les paramètres de la route voir les exemples
+ *
+ * **Exemples**
+ * Avec ma.propriete= 2 :
+ * * RegExp data-value = (\d+) et dataproviderExpression = /user/$1 l'attribut dataProvider vaudra "/user/2"
+ * * url-pattern data-value = :id et dataproviderExpression = /user/:id l'attribut dataProvider vaudra "/user/2"
+ *
+ */
+export declare class SonicStates extends SonicStates_base {
+    state: string;
+    inverted: Boolean;
+    statePath: string;
+    onAssign: ((value: any) => void) | null;
+    statePublisher: any;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};