@supersoniks/concorde 1.1.3 → 1.1.6

package/bin/cli.js

@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+
+const { execSync } = require('child_process');
+const runCommand = command => {
+  try {
+    execSync(command, { stdio: "inherit" });
+  } catch (e) {
+    console.error(`Failed to execute ${command}`, e);
+    return false;
+  }
+  return true;
+}
+const repoName = process.argv[2];
+const gitCheckoutCommand = `git clone --depth 1 https://github.com/ladigitale/concorde-ts-starter ${repoName}`;
+const removeDotGitCommand = `rm -rf ${repoName}/.git`;
+const installDepsCommand = `cd ${repoName} && yarn install`
+const enableShortPathCmd = `cd ${repoName} && npx concorde enable-short-paths`;
+console.log(`Cloning repository with name ${repoName}`);
+const checkout = runCommand(gitCheckoutCommand)
+if (!checkout) process.exit(-1);
+
+const removeDotGit = runCommand(removeDotGitCommand);
+if (!removeDotGit) process.exit(-1);
+
+console.log(`installing dependencies for ${repoName}`);
+const installDeps = runCommand(installDepsCommand);
+if (!installDeps) process.exit(-1);
+
+const enableShortPath = runCommand(enableShortPathCmd);
+if (!enableShortPath) process.exit(-1);
+
+
+console.log("Congratulations! You are ready. Follow the following commands to start");
+console.log(`cd ${repoName} && yarn dev`);
+

package/cli.js

@@ -57,10 +57,15 @@ function enableShortPaths() {
     console.log("✔️ Go and look to tsconfig.json to see generated paths");
   }
 }
+
 switch (process.argv[2]) {
   case "enable-short-paths":
     enableShortPaths();
-    break;
+  break;
+  case "create-concorde-ts-app":
+    createConcordeTsApp();
+  break;
+
   default:
     console.log("Usage: npx concorde <command>");
     console.log("Commands:");

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

@@ -8,7 +8,7 @@ declare const Fetch_base: {
         iObserver: IntersectionObserver | null;
         isDefaultLoaderEnabled: boolean;
         isFetchEnabled: boolean;
-        _fetchEventData(): Promise<void>;
+        _fetchData(): Promise<void>;
         disconnectedCallback(): void;
         connectedCallback(): void;
         firstUpdated(): void;
@@ -37,10 +37,14 @@ declare const Fetch_base: {
 } & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
 /**
  * ###Fetch charge un contenu via un appel d'api web.
- * * On indique notamment la route de l'api avec l'attribut endpoint dans la balise du composant.
- * * Si l'attribut endpoint n'est pas disponible le composant utilise la valeur de dataProvider "ancêtre" le plus proche.
+ * * Fetch etendsles mixins Fetcher et Subscriber
+ * * On indique notamment la route de l'api avec l'attribut `endpoint` dans la balise du composant.
+ * * Si l'attribut `endpoint` n'est pas disponible le composant utilise la valeur de `dataProvider` "ancêtre" le plus proche.
+ * * L'attribut `key` peut être renseigné pour cibler une sous partie de la donnée chargée.
+ * Par exemple si la données est `{ma:{data:{a:1,b:2}}}` on peut ecrire `key="ma.data"`. Dans ce cas la données disponible dans le composant sera `{a:1, b:2}`
  * * Les propriétés réactives de tout composants étendant [subscriber](./?path=/docs/miscallenous-🔔-subscriber--page) avec le même dataProvider seront renseignées avec les propriétés de l'objet chargé via l'api.
  * * L'affichage du loader peut être désactivé en ajoutant l'attribut *noLoader* à la balise du composant.
+ * * On peut appler la methode invalidate() sur son publishe pour declencher le rechargement des données
  */
 export declare class Fetch extends Fetch_base {
     static styles: import("lit").CSSResult[];

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

@@ -10,10 +10,14 @@ import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import Fetcher from "@supersoniks/concorde/core/mixins/Fetcher";
 /**
  * ###Fetch charge un contenu via un appel d'api web.
- * * On indique notamment la route de l'api avec l'attribut endpoint dans la balise du composant.
- * * Si l'attribut endpoint n'est pas disponible le composant utilise la valeur de dataProvider "ancêtre" le plus proche.
+ * * Fetch etendsles mixins Fetcher et Subscriber
+ * * On indique notamment la route de l'api avec l'attribut `endpoint` dans la balise du composant.
+ * * Si l'attribut `endpoint` n'est pas disponible le composant utilise la valeur de `dataProvider` "ancêtre" le plus proche.
+ * * L'attribut `key` peut être renseigné pour cibler une sous partie de la donnée chargée.
+ * Par exemple si la données est `{ma:{data:{a:1,b:2}}}` on peut ecrire `key="ma.data"`. Dans ce cas la données disponible dans le composant sera `{a:1, b:2}`
  * * Les propriétés réactives de tout composants étendant [subscriber](./?path=/docs/miscallenous-🔔-subscriber--page) avec le même dataProvider seront renseignées avec les propriétés de l'objet chargé via l'api.
  * * L'affichage du loader peut être désactivé en ajoutant l'attribut *noLoader* à la balise du composant.
+ * * On peut appler la methode invalidate() sur son publishe pour declencher le rechargement des données
  */
 let Fetch = class Fetch extends Fetcher(Subscriber(LitElement)) {
     render() {

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

@@ -10,7 +10,7 @@ declare const List_base: {
         iObserver: IntersectionObserver | null;
         isDefaultLoaderEnabled: boolean;
         isFetchEnabled: boolean;
-        _fetchEventData(): Promise<void>;
+        _fetchData(): Promise<void>;
         disconnectedCallback(): void;
         connectedCallback(): void;
         firstUpdated(): void;
@@ -40,15 +40,16 @@ declare const List_base: {
 /**
  *  ### 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.
- *
+ * * Si le composant possède un attribut *fetch*, il charge un contenu via un appel d'api web comme le fait [fetch](./?path=/docs/core-components-functional-fetch--basic)
+ *  * La proriété *key* (issue du fetcher) permet de 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
+ *  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 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**
+ *  * Si le résultat de la requête est un objet, il est imbriqué dans un tableau pour garantir le fonctionnement.
+ * 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 {
     static styles: import("lit").CSSResult[];

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

@@ -18,15 +18,16 @@ import TemplatesContainer from "@supersoniks/concorde/core/mixins/TemplatesConta
 /**
  *  ### 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.
- *
+ * * Si le composant possède un attribut *fetch*, il charge un contenu via un appel d'api web comme le fait [fetch](./?path=/docs/core-components-functional-fetch--basic)
+ *  * La proriété *key* (issue du fetcher) permet de 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
+ *  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 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**
+ *  * Si le résultat de la requête est un objet, il est imbriqué dans un tableau pour garantir le fonctionnement.
+ * 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() {
@@ -84,7 +85,9 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
             counter++;
             if (hasCustomTemplate)
                 counter = -1;
-            let pub = this.publisher[extractValues ? item.key : index];
+            let key = extractValues ? item.key : index;
+            let pub = this.publisher[key];
+            pub._key_ = key + "";
             return (item &&
                 html `
               <sonic-subscriber
@@ -92,7 +95,7 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
                 .bindPublisher=${function () {
                     return pub;
                 }}
-                .?propertyMap="${this.itemPropertyMap}"
+                .propertyMap=${ifDefined(this.itemPropertyMap)}
                 dataProvider="${this.dataProvider}/list-item/${index}"
               >
                 ${hasCustomTemplate

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

@@ -10,7 +10,7 @@ declare const Queue_base: (new (...args: any[]) => import("@supersoniks/concorde
  * 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 {
+export default class Queue extends Queue_base {
     templates: Array<HTMLTemplateElement> | null;
     lastRequestTime: number;
     key: String;
@@ -20,6 +20,7 @@ export declare class Queue extends Queue_base {
      */
     targetRequestDuration: number;
     limit: number;
+    offset: number;
     static instanceCounter: number;
     connectedCallback(): void;
     filterPublisher: PublisherProxy | null;

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

@@ -36,6 +36,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
          * Cette valeur est mise à jour ensuite par Queue pour chauq lot pour se rapprocher tanque possible de *targetRequestDuration*
          */
         this.limit = 5;
+        this.offset = 0;
         this.filterPublisher = null;
         this.filterTimeoutId = undefined;
         /**
@@ -90,7 +91,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
     }
     next(e) {
         var _a, _b;
-        let offset = 0;
+        let offset = this.offset;
         const newTime = new Date().getTime();
         const requestDuration = newTime - this.lastRequestTime;
         if (e) {
@@ -102,7 +103,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
             this.props = [];
         }
         else {
-            const props = Object.values(this.props);
+            const props = this.props;
             const item = props[props.length - 1];
             offset = parseInt(item.offset.toString()) + parseInt(item.limit.toString());
         }
@@ -124,7 +125,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
         this.listDataProviders.push(dataProvider);
         this.currentScrollPosition = (_b = document.scrollingElement) === null || _b === void 0 ? void 0 : _b.scrollTop;
         this.props = [
-            ...Object.values(this.props),
+            ...this.props,
             {
                 id: searchParams.toString() + "/" + this.props.length,
                 dataProvider: dataProvider,
@@ -148,7 +149,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
       ${repeat(this.props, (item) => item.id, (item) => html `
             <sonic-list
               fetch
-              .?itemPropertyMap=${this.itemPropertyMap}
+              .itemPropertyMap=${this.itemPropertyMap}
               debug=${ifDefined(this.defferedDebug)}
               @load=${this.next}
               key=${this.key}
@@ -172,6 +173,9 @@ __decorate([
 __decorate([
     property()
 ], Queue.prototype, "limit", void 0);
+__decorate([
+    property()
+], Queue.prototype, "offset", void 0);
 __decorate([
     property({ type: String })
 ], Queue.prototype, "dataProviderExpression", void 0);
@@ -181,7 +185,7 @@ __decorate([
 Queue = Queue_1 = __decorate([
     customElement("sonic-queue")
 ], Queue);
-export { Queue };
+export default Queue;
 //Ajout pour custom-elements-manifesy pour storybook notamment
 try {
     customElements.define("sonic-queue", Queue);

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

@@ -41,7 +41,7 @@ let SonicRedirect = class SonicRedirect extends Subscriber(LitElement) {
             return;
         let onDataPath = this.getAttribute("onData").split(".");
         let searchedData = Objects.traverse(this.props, onDataPath);
-        if (searchedData) {
+        if (searchedData && !(Objects.isObject(searchedData) && searchedData)) {
             LocationHandler.changeFromComponent(this);
         }
     }

package/core/components/functional/states/states.js

@@ -37,6 +37,7 @@ let SonicStates = class SonicStates extends Subscriber(TemplatesContainer(LitEle
     }
     connectedCallback() {
         super.connectedCallback();
+        console.log("BB");
         if (this.hasAttribute("data-path")) {
             this.statePath = this.getAttribute("data-path");
         }
@@ -64,6 +65,7 @@ let SonicStates = class SonicStates extends Subscriber(TemplatesContainer(LitEle
         if ((!Array.isArray(state) && Objects.isObject(state)) || state === undefined) {
             state = "";
         }
+        console.log(state);
         for (let t of this.templatePartsList) {
             let path = t.getAttribute(this.templateValueAttribute);
             let stateToMatch = state;

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

@@ -15,7 +15,7 @@ declare const Submit_base: (new (...args: any[]) => import("@supersoniks/concord
  */
 export declare class Submit extends Submit_base {
     static styles: import("lit").CSSResult;
-    disabled: "disabled" | "" | null;
+    disabled: boolean;
     api: API | null;
     connectedCallback(): void;
     submit(): Promise<void>;

package/core/components/functional/submit/submit.js

@@ -34,7 +34,7 @@ import { css, html, LitElement } from "lit";
 let Submit = class Submit extends Subscriber(LitElement) {
     constructor() {
         super(...arguments);
-        this.disabled = null;
+        this.disabled = false;
         this.api = null;
     }
     connectedCallback() {
@@ -51,7 +51,7 @@ let Submit = class Submit extends Subscriber(LitElement) {
     submit() {
         var _a, _b, _c, _d, _e;
         return __awaiter(this, void 0, void 0, function* () {
-            this.publisher.disabled = '';
+            this.publisher.disabled = true;
             let method = ((_a = this.getAttribute("method")) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) || "post";
             let postData = PublisherManager.getInstance().get(this.getAncestorAttributeValue("formDataProvider")).get();
             let result = null;
@@ -79,23 +79,22 @@ let Submit = class Submit extends Subscriber(LitElement) {
                 clearedDataProvider.split(" ").forEach(dataProvider => PublisherManager.getInstance().get(dataProvider).set({}));
             }
             PublisherManager.getInstance().get(this.getAncestorAttributeValue("submitResultDataProvider")).set(result);
-            this.publisher.disabled = null;
+            this.publisher.disabled = false;
         });
     }
     render() {
-        let disabled = this.disabled === "" || this.disabled === "disabled" ? "disabled" : "";
-        return html `<div class="${disabled}"><slot></slot></div>`;
+        return html `<div ?data-disabled=${this.disabled}><slot></slot></div>`;
     }
 };
 Submit.styles = css `
-    .disabled {
+    [data-disabled]{
       opacity: 0.3;
       pointer-events: none;
       user-select: none;
     }
   `;
 __decorate([
-    property({ type: String })
+    property({ type: Boolean })
 ], Submit.prototype, "disabled", void 0);
 Submit = __decorate([
     customElement("sonic-submit")

package/core/components/ui/alert/alert.js

@@ -103,7 +103,13 @@ Alert.styles = [
         bottom: 0;
         opacity: 0.08;
         border-radius: var(--sc-alert-rounded);
+        pointer-events:none;
       }
+      :host([background]) > div {
+        z-index:2;
+        position:relative;
+      }
+
 
       /*SIZE*/
       :host([size="xs"]) {

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

@@ -151,7 +151,7 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
         <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 prefix="iconoir" name="notch" class="loader"></sonic-icon>` : ""}
+        ${this.loading == true ? html `<sonic-icon prefix="feather" name="loader" class="loader"></sonic-icon>` : ""}
       </button>
     `;
         return this.href
@@ -282,6 +282,9 @@ Button.styles = [
       }
 
       /*SIZE*/
+      :host([size="2xs"]) {
+        --sc-btn-fs: 0.6rem;
+      }
       :host([size="xs"]) {
         --sc-btn-fs: 0.75rem;
       }

package/core/components/ui/icon/icons.json

@@ -1 +1 @@
-{"iconoir":{"cancel":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","check-circled-outline":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7 12.5L10 15.5L17 8.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","check":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5 13L9 17L19 7\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","emoji-think-left":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 15H7M2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M8.5 9C8.22386 9 8 8.77614 8 8.5C8 8.22386 8.22386 8 8.5 8C8.77614 8 9 8.22386 9 8.5C9 8.77614 8.77614 9 8.5 9Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M15.5 9C15.2239 9 15 8.77614 15 8.5C15 8.22386 15.2239 8 15.5 8C15.7761 8 16 8.22386 16 8.5C16 8.77614 15.7761 9 15.5 9Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","info-empty":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 11.5V16.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 7.51L12.01 7.49889\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","more-vert":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 18.5C12.2761 18.5 12.5 18.2761 12.5 18C12.5 17.7239 12.2761 17.5 12 17.5C11.7239 17.5 11.5 17.7239 11.5 18C11.5 18.2761 11.7239 18.5 12 18.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 6.5C12.2761 6.5 12.5 6.27614 12.5 6C12.5 5.72386 12.2761 5.5 12 5.5C11.7239 5.5 11.5 5.72386 11.5 6C11.5 6.27614 11.7239 6.5 12 6.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","nav-arrow-down":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","warning-circled-outline":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 7L12 13\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 17.01L12.01 16.9989\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"}}
+{"iconoir":{"cancel":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","check-circled-outline":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7 12.5L10 15.5L17 8.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","check":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5 13L9 17L19 7\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","emoji-think-left":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 15H7M2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M8.5 9C8.22386 9 8 8.77614 8 8.5C8 8.22386 8.22386 8 8.5 8C8.77614 8 9 8.22386 9 8.5C9 8.77614 8.77614 9 8.5 9Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M15.5 9C15.2239 9 15 8.77614 15 8.5C15 8.22386 15.2239 8 15.5 8C15.7761 8 16 8.22386 16 8.5C16 8.77614 15.7761 9 15.5 9Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","info-empty":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 11.5V16.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 7.51L12.01 7.49889\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","loader":"","more-vert":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 18.5C12.2761 18.5 12.5 18.2761 12.5 18C12.5 17.7239 12.2761 17.5 12 17.5C11.7239 17.5 11.5 17.7239 11.5 18C11.5 18.2761 11.7239 18.5 12 18.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 6.5C12.2761 6.5 12.5 6.27614 12.5 6C12.5 5.72386 12.2761 5.5 12 5.5C11.7239 5.5 11.5 5.72386 11.5 6C11.5 6.27614 11.7239 6.5 12 6.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","nav-arrow-down":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","warning-circled-outline":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 7L12 13\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 17.01L12.01 16.9989\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"}}

package/core/components/ui/theme/theme-collection/core-variables.js

@@ -4,7 +4,7 @@ export const coreVariables = css `
     /* --sc-rfs: 16px; */
 
     /* polices*/
-    --sc-font-family-base: aileron, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
+    --sc-font-family-base: "neue-haas-unica", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
       "Helvetica Neue", Arial, sans-serif;
     --sc-font-weight-base: 400;
     --sc-font-style-base: inherit;

package/core/components/ui/toast/toast-item.d.ts

@@ -0,0 +1,16 @@
+import { LitElement, nothing } from "lit";
+import "./types";
+import { ToastStatus } from "./types";
+export declare class SonicToastItem extends LitElement {
+    static styles: import("lit").CSSResult[];
+    title: string;
+    text: string;
+    status: ToastStatus;
+    ghost: boolean;
+    preserve: boolean;
+    visible: boolean;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    hide(): void;
+    show(): void;
+    autoHide(): void;
+}

package/core/components/ui/toast/toast-item.js

@@ -0,0 +1,243 @@
+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, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import "./types";
+const icon = {
+    warning: "warning-circled-outline",
+    success: "check-circled-outline",
+    error: "warning-circled-outline",
+    info: "info-empty",
+};
+let SonicToastItem = class SonicToastItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.title = "";
+        this.text = "";
+        this.status = "";
+        this.ghost = false;
+        this.preserve = false;
+        this.visible = true;
+    }
+    render() {
+        if (!this.visible) {
+            return nothing;
+        }
+        return html `<div
+      class="sonic-toast ${this.status} ${this.ghost ? "ghost" : ""}"
+      
+    >
+      ${this.status &&
+            html `<sonic-icon prefix="iconoir" name=${icon[this.status]} class="sonic-toast-icon" size="2xl"></sonic-icon>`}
+      
+      <button aria-label="Close" class="sonic-toast-close" @click=${() => this.hide()}>
+        <sonic-icon prefix="iconoir" name="cancel" size="lg"></sonic-icon>
+      </button>
+      
+      <div class="sonic-toast-text">
+        ${this.title ? html `<div class="sonic-toast-title">${this.title}</div>` : ""}
+        ${this.text ? unsafeHTML(this.text) : ""}
+        <slot></slot>
+      </div>
+
+      ${!this.preserve ? this.autoHide() : ""}
+    </div>`;
+    }
+    hide() {
+        if (!this.closest('sonic-toast')) {
+            this.visible = false;
+        }
+        this.dispatchEvent(new CustomEvent("hide", { bubbles: true }));
+    }
+    show() {
+        this.visible = true;
+    }
+    autoHide() {
+        setTimeout(() => {
+            this.hide();
+        }, 4200);
+    }
+};
+SonicToastItem.styles = [
+    css `
+      * {
+        box-sizing: border-box;
+      }
+      :host {
+        display: block;
+        pointer-events: auto;
+        --sc-toast-status-color: transparent;
+        --sc-toast-color: var(--sc-base-content);
+        --sc-toast-bg: var(--sc-base);
+        --sc-toast-rounded: var(--sc-rounded-md);
+        --sc-toast-shadow: var(--sc-shadow-lg);
+      }
+
+      .sonic-toast-area {
+        pointer-events: none;
+        width: calc(100% - 2.5rem);
+        max-width: 64ch;
+        gap: 1rem;
+      }
+
+      .fixed-area {
+        position: fixed;
+        bottom: 1.25rem;
+        right: 1.25rem;
+        z-index: 999;
+        display: flex;
+        flex-direction: column-reverse;
+      }
+
+      .sonic-toast {
+        position: relative;
+        pointer-events: auto;
+        background: var(--sc-toast-bg);
+        color: var(--sc-toast-color);
+        box-shadow: var(--sc-toast-shadow);
+        border-radius: var(--sc-toast-rounded);
+        padding: 1em 2.5rem 1em 1em;
+        line-height: 1.25;
+        display: flex;
+        gap: 0.5rem;
+        max-height: 10rem;
+        overflow: auto;
+      }
+
+      .sonic-toast-text {
+        align-self: center;
+        margin-top: auto;
+        margin-bottom: auto;
+      }
+
+      ::slotted(a),
+      .sonic-toast-text a {
+        color: inherit;
+        text-decoration: underline;
+        text-underline-offset: 0.15rem;
+      }
+
+      /*BUTTON CLOSE*/
+      .sonic-toast-close {
+        all: unset;
+        position: absolute;
+        pointer-events: initial;
+        right: 0.5em;
+        top: 0.5em;
+        width: 1.5rem;
+        height: 1.5rem;
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        text-align: center;
+        opacity: 0.5;
+        background: rgba(0, 0, 0, 0);
+      }
+
+      .sonic-toast-close:focus,
+      .sonic-toast-close:hover {
+        opacity: 1;
+        background: rgba(0, 0, 0, 0.075);
+      }
+
+      .sonic-toast-close svg {
+        width: 1rem;
+        height: 1rem;
+        object-fit: contain;
+        object-position: center center;
+      }
+
+      /*Title*/
+      .sonic-toast-title {
+        font-weight: bold;
+        font-size: 1.15rem;
+        margin: 0.15em 0 0.25em;
+      }
+
+      /*STATUS*/
+      .success {
+        --sc-toast-status-color: var(--sc-success);
+        --sc-toast-title-color: var(--sc-toast-status-color);
+      }
+
+      .error {
+        --sc-toast-status-color: var(--sc-danger);
+        --sc-toast-title-color: var(--sc-toast-status-color);
+      }
+
+      .warning {
+        --sc-toast-status-color: var(--sc-warning);
+        --sc-toast-title-color: var(--sc-toast-status-color);
+      }
+
+      .info {
+        --sc-toast-status-color: var(--sc-info);
+        --sc-toast-title-color: var(--sc-toast-status-color);
+      }
+
+      .success,
+      .error,
+      .info,
+      .warning {
+        border-top: 3px solid var(--sc-toast-status-color, curentColor);
+      }
+
+      .sonic-toast:before {
+        background-color: var(--sc-toast-status-color);
+        content: "";
+        display: block;
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        opacity: 0.05;
+        pointer-events: none;
+        transition: 0.2s;
+        border-radius: var(--sc-toast-status-color);
+      }
+      .sonic-toast:hover:before {
+        opacity: 0.025;
+      }
+      .info .sonic-toast-icon,
+      .error .sonic-toast-icon,
+      .success .sonic-toast-icon,
+      .warning .sonic-toast-icon {
+        color: var(--sc-toast-status-color, curentColor);
+      }
+
+      .ghost {
+        opacity: 0.85;
+        pointer-events: none;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], SonicToastItem.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], SonicToastItem.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], SonicToastItem.prototype, "status", void 0);
+__decorate([
+    property({ type: Boolean })
+], SonicToastItem.prototype, "ghost", void 0);
+__decorate([
+    property({ type: Boolean })
+], SonicToastItem.prototype, "preserve", void 0);
+__decorate([
+    state()
+], SonicToastItem.prototype, "visible", void 0);
+SonicToastItem = __decorate([
+    customElement("sonic-toast-item")
+], SonicToastItem);
+export { SonicToastItem };

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

@@ -1,30 +1,19 @@
 import { LitElement, nothing } from "lit";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
-declare type ToastStatus = "success" | "error" | "info";
-declare type Toast = {
-    id?: number;
-    text: string;
-    title?: string;
-    status?: ToastStatus;
-    preserve?: boolean;
-    ghost?: boolean;
-    marginTop?: string;
-};
+import "./toast-item";
+import { Toast } from "./types";
 export declare class SonicToast extends LitElement {
-    static styles: import("lit").CSSResult[];
     toasts: Toast[];
+    createRenderRoot(): this;
     render(): import("lit-html").TemplateResult<1> | typeof nothing;
     static removeAll(): void;
     static add(conf: Toast): {
         id: number;
         text: string;
         title: string | undefined;
-        status: ToastStatus | undefined;
+        status: import("./types").ToastStatus | undefined;
         preserve: boolean | undefined;
         ghost: boolean | undefined;
-        marginTop: string | undefined;
     } | null;
     removeItem(item: Toast): void;
-    autoRemoveItem(item: Toast): void;
 }
-export {};

package/core/components/ui/toast/toast.js

@@ -4,36 +4,41 @@ 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 { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { repeat } from "lit/directives/repeat.js";
 import { animate } from "@lit-labs/motion";
 import Objects from "@supersoniks/concorde/core/utils/Objects";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
-const icon = {
-    warning: "warning-circled-outline",
-    success: "check-circled-outline",
-    error: "warning-circled-outline",
-    info: "info-empty",
-};
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { styleMap } from "lit/directives/style-map.js";
+import "./toast-item";
 let SonicToast = class SonicToast extends LitElement {
     constructor() {
         super(...arguments);
         this.toasts = [];
     }
+    createRenderRoot() {
+        return this;
+    }
     render() {
-        var _a;
+        let styles = {
+            pointerEvents: "none",
+            width: "calc(100% - 2.5rem)",
+            maxWidth: "64ch",
+            gap: "1rem",
+            display: "flex",
+        };
+        if (window.parent == window) {
+            styles = Object.assign(Object.assign({}, styles), { position: "fixed", bottom: "1.25rem", right: "1.25rem", zIndex: "999", flexDirection: "column-reverse" });
+        }
+        // ${window.parent == window ? "fixed-area" : ""}
         if (!this.toasts)
             return nothing;
-        let marginTop = ((_a = this.toasts[0]) === null || _a === void 0 ? void 0 : _a.marginTop) || "0";
-        return html `<div
-      style=${"margin-top:" + marginTop}
-      class="sonic-toast-area ${window.parent == window ? "fixed-area" : ""}"
-    >
+        return html `<div aria-live="polite" style=${styleMap(styles)}>
       ${repeat(this.toasts, (item) => item.id, (item) => html `
-          <div
-            class="sonic-toast ${item.status} ${item.ghost ? "ghost" : ""}"
+          <sonic-toast-item status=${item.status} ?ghost=${item.ghost} ?preserve=${item.preserve} id=${item.id}
+            @hide=${() => this.removeItem(item)}
             ${animate({
             keyframeOptions: {
                 duration: 250,
@@ -51,22 +56,8 @@ let SonicToast = class SonicToast extends LitElement {
             stabilizeOut: true,
         })}
           >
-            ${item.status &&
-            html `<sonic-icon prefix="iconoir" name=${icon[item.status]} class="sonic-toast-icon" size="2xl"></sonic-icon>`}
-
-            <div class="sonic-toast-text">
-              ${item.title ? html `<div class="sonic-toast-title">${item.title}</div>` : ""}
-              ${item.text ? unsafeHTML(item.text) : ""}
-              <slot></slot>
-            </div>
-            
-            ${true //!item.ghost
-            ? html `<button class="sonic-toast-close" @click=${() => this.removeItem(item)}>
-                  <sonic-icon prefix="iconoir" name="cancel"></sonic-icon>
-                </button>`
-            : ""}
-            ${!item.preserve ? this.autoRemoveItem(item) : ""}
-          </div>
+            ${item.text ? unsafeHTML(item.text) : ""}
+          </sonic-toast-item>
         `)}
     </div>`;
     }
@@ -87,7 +78,7 @@ let SonicToast = class SonicToast extends LitElement {
         // Ajoute le toast à la liste
         let toastComponent = document.querySelector("sonic-toast");
         const nextId = new Date().valueOf();
-        const interactiveRegExp = new RegExp('<\/a>|<\/button>');
+        const interactiveRegExp = new RegExp("</a>|</button>");
         const hasInteractive = interactiveRegExp.test(conf.text);
         const currentToast = {
             id: nextId,
@@ -96,7 +87,6 @@ let SonicToast = class SonicToast extends LitElement {
             status: conf.status,
             preserve: hasInteractive ? true : conf.preserve,
             ghost: conf.ghost,
-            marginTop: conf.marginTop,
         };
         if (toastComponent.toasts.length > 0) {
             let toastA = Object.assign({}, currentToast);
@@ -113,142 +103,7 @@ let SonicToast = class SonicToast extends LitElement {
     removeItem(item) {
         this.toasts = this.toasts.filter((i) => i != item);
     }
-    autoRemoveItem(item) {
-        setTimeout(() => {
-            this.removeItem(item);
-        }, 4200);
-    }
 };
-SonicToast.styles = [
-    css `
-      * {
-        box-sizing: border-box;
-      }
-      :host {
-        display: contents;
-      }
-
-      .sonic-toast-area {
-        pointer-events: none;
-        width: calc(100% - 2.5rem);
-        max-width: 40ch;
-      }
-
-      .fixed-area {
-        position: fixed;
-        top: 1.25rem;
-        right: 1.25rem;
-        z-index: 999;
-      }
-
-      .sonic-toast {
-        --sc-toast-status-color: transparent;
-        position: relative;
-        pointer-events: auto;
-        background: var(--sc-base-800);
-        color: var(--sc-base);
-        box-shadow: var(--sc-shadow);
-        border-radius: var(--sc-rounded);
-        padding: 1em 2rem 1em 1em;
-        font-size: 0.85em;
-        line-height: 1.25;
-        display: flex;
-        gap: 0.5rem;
-        max-height: 10rem;
-        overflow: auto;
-      }
-
-      .sonic-toast + .sonic-toast {
-        margin-top: 1rem;
-      }
-
-      .sonic-toast-text {
-        align-self: center;
-        margin-top: auto;
-        margin-bottom: auto;
-      }
-
-      ::slotted(a),
-      .sonic-toast-text a {
-        color: inherit;
-        text-decoration: underline;
-      }
-
-      /*BUTTON CLOSE*/
-      .sonic-toast-close {
-        all: unset;
-        position: absolute;
-        pointer-events:initial;
-        right: 0.5em;
-        top: 0.5em;
-        width: 1.5rem;
-        height: 1.5rem;
-        cursor: pointer;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 50%;
-        text-align: center;
-        opacity: 0.5;
-        background: rgba(0, 0, 0, 0);
-      }
-
-      .sonic-toast-close:focus,
-      .sonic-toast-close:hover {
-        opacity: 1;
-        background: rgba(0, 0, 0, 0.075);
-      }
-
-      .sonic-toast-close svg {
-        width: 1rem;
-        height: 1rem;
-        object-fit: contain;
-        object-position: center center;
-      }
-
-      /*Title*/
-      .sonic-toast-title {
-        font-weight: bold;
-        margin-bottom: 0.25em;
-      }
-
-      /*STATUS*/
-      .success {
-        --sc-toast-status-color: var(--sc-success);
-      }
-
-      .error {
-        --sc-toast-status-color: var(--sc-danger);
-      }
-
-      .warning {
-        --sc-toast-status-color: var(--sc-warning);
-      }
-
-      .info {
-        --sc-toast-status-color: var(--sc-info);
-      }
-
-      .success,
-      .error,
-      .info,
-      .warning {
-        border-top: 2px solid var(--sc-toast-status-color, curentColor);
-      }
-
-      .info .sonic-toast-icon,
-      .error .sonic-toast-icon,
-      .success .sonic-toast-icon,
-      .warning .sonic-toast-icon {
-        color: var(--sc-toast-status-color, curentColor);
-      }
-
-      .ghost {
-        opacity: 0.85;
-        pointer-events: none;
-      }
-    `,
-];
 __decorate([
     property({ type: Array })
 ], SonicToast.prototype, "toasts", void 0);

package/core/components/ui/toast/types.d.ts

@@ -0,0 +1,9 @@
+export declare type ToastStatus = "" | "success" | "error" | "info";
+export declare type Toast = {
+    id?: number;
+    text: string;
+    title?: string;
+    status?: ToastStatus;
+    preserve?: boolean;
+    ghost?: boolean;
+};

package/core/components/ui/toast/types.js

@@ -0,0 +1 @@
+export {};

package/core/mixins/Fetcher.d.ts

@@ -1,4 +1,5 @@
 import API from "@supersoniks/concorde/core/utils/api";
+import "../components/ui/button/button";
 import { SubscriberInterface } from "./Subscriber";
 declare type Constructor<T> = new (...args: any[]) => T;
 declare const Fetcher: <T extends Constructor<SubscriberInterface>>(superClass: T) => {
@@ -36,7 +37,7 @@ declare const Fetcher: <T extends Constructor<SubscriberInterface>>(superClass:
          * Elles sont ensuite injectées dans le publisher en accord avec la cible définie dans la propriété key
          * Un Toast est affiché si le chargement échoue
          */
-        _fetchEventData(): Promise<void>;
+        _fetchData(): Promise<void>;
         disconnectedCallback(): void;
         connectedCallback(): void;
         /**
@@ -48,13 +49,18 @@ declare const Fetcher: <T extends Constructor<SubscriberInterface>>(superClass:
         getAncestorAttributeValue(attributeName: string): string;
         hasAncestorAttribute(attributeName: string): boolean;
         querySelectorAll(selector: string): NodeListOf<Element>;
+        /**
+         * isFirstLoad vaut true jusqu'au premier chargement de données
+         */
         publisher: any;
         dataProvider: String;
         noShadowDom: string | null;
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
         makeShadow(props: Record<string, any>, value: any): any;
-        dispatchEvent(event: Event): void;
+        dispatchEvent(event: Event): void; /**
+         * IObserver est l'intersection observer qui permet de charger les données au scroll si l'attribut lazyload est renseigné
+         */
         setAttribute(name: string, value: string): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;

package/core/mixins/Fetcher.js

@@ -10,6 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { Loader } from "../components/ui/loader/loader";
 import { SonicToast } from "../components/ui/toast/toast";
 import API from "@supersoniks/concorde/core/utils/api";
+import "../components/ui/button/button";
 import Objects from "../utils/Objects";
 const Fetcher = (superClass) => {
     class FetcherElement extends superClass {
@@ -51,7 +52,7 @@ const Fetcher = (superClass) => {
          * Elles sont ensuite injectées dans le publisher en accord avec la cible définie dans la propriété key
          * Un Toast est affiché si le chargement échoue
          */
-        _fetchEventData() {
+        _fetchData() {
             return __awaiter(this, void 0, void 0, function* () {
                 if (!this.isFetchEnabled)
                     return;
@@ -86,10 +87,13 @@ const Fetcher = (superClass) => {
             });
         }
         disconnectedCallback() {
+            var _a;
             super.disconnectedCallback();
+            (_a = this.publisher) === null || _a === void 0 ? void 0 : _a.offInvalidate(() => this._fetchData());
             this.isFirstLoad = false;
         }
         connectedCallback() {
+            var _a;
             this.noShadowDom = "";
             if (!this.isFetchEnabled) {
                 super.connectedCallback();
@@ -101,9 +105,10 @@ const Fetcher = (superClass) => {
             if (this.props) {
                 this.publisher.set(this.props);
             }
+            (_a = this.publisher) === null || _a === void 0 ? void 0 : _a.onInvalidate(() => this._fetchData());
             const lazyLoad = this.getAncestorAttributeValue("lazyload");
             if (lazyLoad === null) {
-                this._fetchEventData();
+                this._fetchData();
             }
         }
         /**
@@ -131,13 +136,13 @@ const Fetcher = (superClass) => {
                 this.iObserver.observe(elt);
             }
             else if (this.isFirstLoad) {
-                this._fetchEventData();
+                this._fetchData();
             }
         }
         onIntersection(entries) {
             for (const e of entries) {
                 if (e.isIntersecting && this.isFirstLoad) {
-                    this._fetchEventData();
+                    this._fetchData();
                 }
             }
         }

package/core/mixins/Subscriber.js

@@ -52,6 +52,9 @@ const Subscriber = (superClass) => {
              * Cela se fait à l'initialisation uniquement et n'est pas modifiable lors de la vie du composant.
              */
             this.noShadowDom = null;
+            /**
+             * Permet de mapper un nom de propriété de donnée source vars une propriété du subscriber à la volée
+             */
             this.propertyMap = null;
             this.title = "";
             /**
@@ -82,7 +85,7 @@ const Subscriber = (superClass) => {
             this.args = args;
         }
         /**
-         * retourn un objet contenant les propriétés de value + celle de props si elle ne sont pas déjà dans value.
+         * retourne un objet contenant les propriétés de value + celle de props si elle ne sont pas déjà dans value.
          */
         makeShadow(props, value) {
             if (typeof value == "object" && value !== null) {

package/core/utils/DataBindObserver.js

@@ -1,4 +1,3 @@
-import Objects from "@supersoniks/concorde/core/utils/Objects";
 import Format from "@supersoniks/concorde/core/utils/Format";
 import HTML from "@supersoniks/concorde/core/utils/HTML";
 import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy.mjs";
@@ -189,9 +188,12 @@ export default class DataBindObserver {
                          */
                         if (values.length == 1 && bindedVariablesDescriptor.variables[0].join(".") == expression.substring(1)) {
                             let value = values[0];
-                            if (Objects.isObject(value) &&
-                                value.hasOwnProperty("__value") &&
-                                (Objects.isUndefindOrNull(value.__value) || value.__value === "")) {
+                            if (value === null
+                            // ||
+                            // ( Objects.isObject(value) &&
+                            // value.hasOwnProperty("__value") &&
+                            // (Objects.isUndefindOrNull(value.__value) || value.__value === "") )
+                            ) {
                                 value = "";
                             }
                             rec[propertyToUpdate] = value;
@@ -203,9 +205,11 @@ export default class DataBindObserver {
                         for (let i = 0; i < values.length; i++) {
                             let value = values[i];
                             let variable = bindedVariablesDescriptor.variables[i];
-                            if (Objects.isObject(value) &&
-                                value.hasOwnProperty("__value") &&
-                                Objects.isUndefindOrNull(value.__value)) {
+                            if (value === null
+                            // Objects.isObject(value) &&
+                            // value.hasOwnProperty("__value") &&
+                            // Objects.isUndefindOrNull(value.__value)
+                            ) {
                                 hasUndeterminatedValue = true;
                                 value = undefined;
                             }

package/core/utils/PublisherProxy.d.mts

@@ -5,6 +5,7 @@ export class PublisherProxy {
     constructor(target: any, parentProxPub?: null);
     _proxies_: Map<any, any>;
     _value_: any;
+    _invalidateListeners_: Set<any>;
     _assignListeners_: Set<any>;
     _mutationListeners_: Set<any>;
     _fillListeners_: Set<any>;
@@ -23,6 +24,7 @@ export class PublisherProxy {
     hasListener(): boolean;
     _publishInternalMutation_(lockInternalMutationsTransmission?: boolean): void;
     _publishAssignement_(lockInternalMutationsTransmission?: boolean): void;
+    _publishInvalidation_(): void;
     _publishDynamicFilling_(key: any, value: any): void;
     _publishTemplateFilling_(key: any, value: any): void;
     /**
@@ -34,6 +36,18 @@ export class PublisherProxy {
      * Stop les appels de la fonction "handler" (passée en paramettre) lorsque la valeur gérée par le proxy change par assignation
      */
     offAssign(handler: any): void;
+    /**
+     * Appel la fonction "handler" (passée en paramettre) lorsque la donnée est flaggée comme invalide
+     */
+    onInvalidate(handler: any): void;
+    /**
+     * Stop les appels de la fonction "handler" (passée en paramettre) lorsque la donnée est flaggée comme invalide
+     */
+    offInvalidate(handler: any): void;
+    /**
+     * Flag les données comme étant invalides
+     */
+    invalidate(handler: any): void;
     /**
      * Appel la fonction "handler" (passée en paramettre) lorsque quelque chose change la valeur gérée par le proxy quelque soit la profondeur de la donnée
      *

package/core/utils/PublisherProxy.mjs

@@ -13,6 +13,7 @@ export class PublisherProxy {
     constructor(target, parentProxPub = null) {
         this._proxies_ = new Map();
         this._value_ = target;
+        this._invalidateListeners_ = new Set();
         this._assignListeners_ = new Set();
         this._mutationListeners_ = new Set();
         this._fillListeners_ = new Set();
@@ -32,6 +33,7 @@ export class PublisherProxy {
         for (let proxy of this._proxies_.values()) {
             proxy.delete();
         }
+        this._invalidateListeners_.clear();
         this._assignListeners_.clear();
         this._mutationListeners_.clear();
         this._fillListeners_.clear();
@@ -44,6 +46,7 @@ export class PublisherProxy {
     hasListener() {
         return (this._templateFillListeners_.size > 0 ||
             this._assignListeners_.size > 0 ||
+            this._invalidateListeners_.size > 0 ||
             this._mutationListeners_.size > 0 ||
             this._fillListeners_.size > 0);
     }
@@ -59,6 +62,9 @@ export class PublisherProxy {
         this._assignListeners_.forEach((handler) => handler(this._value_.__value ? this._value_.__value : this._value_));
         this._publishInternalMutation_(lockInternalMutationsTransmission);
     }
+    _publishInvalidation_() {
+        this._invalidateListeners_.forEach((handler) => handler());
+    }
     _publishDynamicFilling_(key, value) {
         this._fillListeners_.forEach((handler) => {
             if (handler[key] !== value)
@@ -95,6 +101,26 @@ export class PublisherProxy {
     offAssign(handler) {
         this._assignListeners_.delete(handler);
     }
+    /**
+     * Appel la fonction "handler" (passée en paramettre) lorsque la donnée est flaggée comme invalide
+     */
+    onInvalidate(handler) {
+        if (typeof handler != "function")
+            return;
+        this._invalidateListeners_.add(handler);
+    }
+    /**
+     * Stop les appels de la fonction "handler" (passée en paramettre) lorsque la donnée est flaggée comme invalide
+     */
+    offInvalidate(handler) {
+        this._invalidateListeners_.delete(handler);
+    }
+    /**
+     * Flag les données comme étant invalides
+     */
+    invalidate(handler) {
+        this._publishInvalidation_();
+    }
     /**
      * Appel la fonction "handler" (passée en paramettre) lorsque quelque chose change la valeur gérée par le proxy quelque soit la profondeur de la donnée
      *
@@ -194,8 +220,8 @@ export class PublisherProxy {
      * Extraire la valeur actuelle du proxy
      */
     get() {
-        if (this._value_.__value)
-            return this._value_.__value;
+        if (this._value_.hasOwnProperty("__value"))
+            return this._value_.__value || null;
         return this._value_;
     }
 }
@@ -274,6 +300,9 @@ export default class Publisher extends PublisherProxy {
              */
             get: function (oTarget, sKey) {
                 if ([
+                    "invalidate",
+                    "onInvalidate",
+                    "offInvalidate",
                     "onAssign",
                     "offAssign",
                     "startDynamicFilling",
@@ -287,11 +316,13 @@ export default class Publisher extends PublisherProxy {
                     "_templateFillListeners_",
                     "_fillListeners_",
                     "_assignListeners_",
+                    "_invalidateListeners_",
                     "_publishInternalMutation_",
                     "hasListener",
                     "delete",
                     "_mutationListeners_",
                     "_publishDynamicFilling_",
+                    "_publishInvalidation_",
                     "_publishTemplateFilling_",
                     "_publishAssignement_",
                     "_proxies_",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "1.1.3",
+  "version": "1.1.6",
   "customElements": "custom-elements.json",
   "license": "MIT",
   "publishConfig": {
@@ -125,8 +125,12 @@
     "./ui/theme": "./core/components/ui/theme/theme",
     "./core/components/ui/toast/message-subscriber": "./core/components/ui/toast/message-subscriber",
     "./ui/toast/message-subscriber": "./core/components/ui/toast/message-subscriber",
+    "./core/components/ui/toast/toast-item": "./core/components/ui/toast/toast-item",
+    "./ui/toast/toast-item": "./core/components/ui/toast/toast-item",
     "./core/components/ui/toast/toast": "./core/components/ui/toast/toast",
     "./ui/toast": "./core/components/ui/toast/toast",
+    "./core/components/ui/toast/types": "./core/components/ui/toast/types",
+    "./ui/toast/types": "./core/components/ui/toast/types",
     "./core/components/ui/tooltip/tooltip": "./core/components/ui/tooltip/tooltip",
     "./ui/tooltip": "./core/components/ui/tooltip/tooltip",
     "./core/components/ui/ui": "./core/components/ui/ui",
@@ -165,7 +169,5 @@
     "./utils/api": "./core/utils/api",
     "./index": "./index"
   },
-  "bin": {
-    "concorde": "./cli.js"
-  }
+  "bin": "./bin/cli.js"
 }