@supersoniks/concorde 1.1.4 → 1.1.7

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,8 @@ declare const Fetch_base: {
         iObserver: IntersectionObserver | null;
         isDefaultLoaderEnabled: boolean;
         isFetchEnabled: boolean;
-        _fetchEventData(): Promise<void>;
+        _fetchData(): Promise<void>;
+        onInvalidate: any;
         disconnectedCallback(): void;
         connectedCallback(): void;
         firstUpdated(): void;
@@ -37,12 +38,17 @@ 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 {
+    noAutofill: boolean;
     static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -10,12 +10,20 @@ 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)) {
+    constructor() {
+        super(...arguments);
+        this.noAutofill = true;
+    }
     render() {
         return html `<slot></slot>`;
     }

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

@@ -10,7 +10,8 @@ declare const List_base: {
         iObserver: IntersectionObserver | null;
         isDefaultLoaderEnabled: boolean;
         isFetchEnabled: boolean;
-        _fetchEventData(): Promise<void>;
+        _fetchData(): Promise<void>;
+        onInvalidate: any;
         disconnectedCallback(): void;
         connectedCallback(): void;
         firstUpdated(): void;
@@ -40,15 +41,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

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,
@@ -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/subscriber/subscriber.d.ts

@@ -4,6 +4,7 @@ declare const SonicSubscriber_base: (new (...args: any[]) => import("@supersonik
  * Voir la partie dédiée dans *MISCALLENOUS*
  */
 export declare class SonicSubscriber extends SonicSubscriber_base {
+    noAutofill: boolean;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/functional/subscriber/subscriber.js

@@ -11,6 +11,10 @@ import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
  * Voir la partie dédiée dans *MISCALLENOUS*
  */
 let SonicSubscriber = class SonicSubscriber extends Subscriber(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.noAutofill = true;
+    }
     connectedCallback() {
         this.noShadowDom = "";
         super.connectedCallback();

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/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 {};