@supersoniks/concorde 1.1.9 → 1.1.10

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

@@ -0,0 +1,5 @@
+import { LitElement } from "lit";
+export declare class SonicConfiguration extends LitElement {
+    isSonicConfig: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/core/components/functional/configuration/configuration.js

@@ -0,0 +1,21 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+let SonicConfiguration = class SonicConfiguration extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isSonicConfig = true;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+SonicConfiguration = __decorate([
+    customElement("sonic-configuration")
+], SonicConfiguration);
+export { SonicConfiguration };

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

@@ -71,9 +71,10 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
                     }
                 }
             }
-            if (parts.some((part) => part.source == "endRange")) {
+            const isSameDay = start.getFullYear() == end.getFullYear() && start.getMonth() == end.getMonth() && start.getDate() == end.getDate();
+            if (parts.some((part) => part.source == "endRange") && !isSameDay) {
                 for (let part of parts) {
-                    if (part.type == "literal" && part.source == "shared" && part.value.trim().length > 0) {
+                    if (part.type == "literal" && part.source == "shared" && part.value.trim().length > 0 && !isSameDay) {
                         part.value = " " + this.duAu[1] + " ";
                         part.type = "to";
                         break;

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

@@ -23,7 +23,6 @@ declare const Fetch_base: {
         noShadowDom: string | null;
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
-        makeShadow(props: Record<string, any>, value: any): any;
         dispatchEvent(event: Event): void;
         setAttribute(name: string, value: string): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
@@ -38,17 +37,35 @@ 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.
- * * 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
+ * Extends mixins : Fetcher, [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page)
+ *
+ * #### Configuration via les attributs
+ *
+ * | nom          | sur quelle balise | Description | Exemple de valeur | défaut / requis |
+ * | -------------------------------------------------------------------------------------- |
+ * | serviceURL   |Fetcher ou un de ses parents | URL de base des services. | http://la-billetterie.net/api/v2 | domain du site |
+ * | endpoint   |Fetcher | point d'accès d'un service | user/2 | valeur de l'attribut dataProvider |
+ * | dataProvider  |Fetcher ou un de ses parents | Identifiant d'un publisher qui stock les données, voir [subscriber](./?path=/docs/miscallenous-🔔-subscriber--page). | billetterie/user/2 | *REQUIS* |
+ * | key  |Fetcher  | extrait une sous propriété de la donnée chargée avant de l'assignée à son publisher | ma.data | null |
+ *
+ * *Si la données est `{ma:{data:{a:1,b:2}}}` et `key="ma.data"`, la données disponible dans le composant sera `{a:1, b:2}`*
+ 
+ #### Intégration auto de basic auth (pour tester une api qui nécessite une authentification)
+ 
+ * Fetch utilise le service pour générer le token et l'ajoute au header de l'appel qui récupère les données.
+
+ * | nom           | sur quelle balise | Description | Exemple de valeur | défaut / requis |
+ * | -------------------------------------------------------------------------------------- |
+ * | userName      | Fetcher ou un de ses parents | Nom de l'utilisateur | DjuDju | null |
+ * | password      | Fetcher ou un de ses parents | mot de passe | pom_549 | null |
+ * | tokenProvider | Fetcher ou un de ses parents | point d'accès du service fournissant le token | auth | null |
+ * | token | Fetcher ou un de ses parents | A fournir à la place des autres attributs si on le possède | q<d34gb | null |
+ 
+ #### Autres choses utiles
+ * * L'attribut *noLoader* du composant permet de désactiver l'affichage du loader par défaut.
+ * * On peut appeler la methode invalidate() sur le publisher associé au  composant pour declencher le rechargement des données.
  */
 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,20 +10,35 @@ 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.
- * * 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
+ * Extends mixins : Fetcher, [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page)
+ *
+ * #### Configuration via les attributs
+ *
+ * | nom          | sur quelle balise | Description | Exemple de valeur | défaut / requis |
+ * | -------------------------------------------------------------------------------------- |
+ * | serviceURL   |Fetcher ou un de ses parents | URL de base des services. | http://la-billetterie.net/api/v2 | domain du site |
+ * | endpoint   |Fetcher | point d'accès d'un service | user/2 | valeur de l'attribut dataProvider |
+ * | dataProvider  |Fetcher ou un de ses parents | Identifiant d'un publisher qui stock les données, voir [subscriber](./?path=/docs/miscallenous-🔔-subscriber--page). | billetterie/user/2 | *REQUIS* |
+ * | key  |Fetcher  | extrait une sous propriété de la donnée chargée avant de l'assignée à son publisher | ma.data | null |
+ *
+ * *Si la données est `{ma:{data:{a:1,b:2}}}` et `key="ma.data"`, la données disponible dans le composant sera `{a:1, b:2}`*
+ 
+ #### Intégration auto de basic auth (pour tester une api qui nécessite une authentification)
+ 
+ * Fetch utilise le service pour générer le token et l'ajoute au header de l'appel qui récupère les données.
+
+ * | nom           | sur quelle balise | Description | Exemple de valeur | défaut / requis |
+ * | -------------------------------------------------------------------------------------- |
+ * | userName      | Fetcher ou un de ses parents | Nom de l'utilisateur | DjuDju | null |
+ * | password      | Fetcher ou un de ses parents | mot de passe | pom_549 | null |
+ * | tokenProvider | Fetcher ou un de ses parents | point d'accès du service fournissant le token | auth | null |
+ * | token | Fetcher ou un de ses parents | A fournir à la place des autres attributs si on le possède | q<d34gb | null |
+ 
+ #### Autres choses utiles
+ * * L'attribut *noLoader* du composant permet de désactiver l'affichage du loader par défaut.
+ * * On peut appeler la methode invalidate() sur le publisher associé au  composant pour declencher le rechargement des données.
  */
 let Fetch = class Fetch extends Fetcher(Subscriber(LitElement)) {
-    constructor() {
-        super(...arguments);
-        this.noAutofill = true;
-    }
     render() {
         return html `<slot></slot>`;
     }

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

@@ -8,4 +8,5 @@ import "./submit/submit";
 import "./router/router";
 import "./router/redirect";
 import "./states/states";
+import "./sonic-scope/sonic-scope";
 import "./example/example";

package/core/components/functional/functional.js

@@ -8,4 +8,5 @@ import "./submit/submit";
 import "./router/router";
 import "./router/redirect";
 import "./states/states";
+import "./sonic-scope/sonic-scope";
 import "./example/example";

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

@@ -25,7 +25,6 @@ declare const List_base: {
         noShadowDom: string | null;
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
-        makeShadow(props: Record<string, any>, value: any): any;
         dispatchEvent(event: Event): void;
         setAttribute(name: string, value: string): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
@@ -41,16 +40,19 @@ 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*, 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-de-la-ligne-courante*
+* Extends mixins : Fetcher, [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page)
+ *
+ * * Si le composant possède un attribut *fetch*, il charge un contenu via un appel d'api web.<br>
+ * Voir [fetcher](./?path=/docs/core-components-functional-fetch--basic) pour la configuration des autres attributs.
+ * * Chaque élément créé est englobé dans un objet [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page).<br>
+ *  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 est un objet, il est imbriqué dans un tableau pour garantir le fonctionnement.
+ *  * Si le résultat de la requête est un objet, il est imbriqué dans un tableau pour garantir le fonctionnement.<br>
  * 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[];
@@ -65,6 +67,9 @@ export declare class List extends List_base {
      */
     idKey: string;
     connectedCallback(): void;
+    renderLoadingState(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/template-content").TemplateContentDirective>;
+    renderNoResultState(): import("lit-html").TemplateResult<1>;
+    formatProps(): any;
     render(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/template-content").TemplateContentDirective>;
 }
 export {};

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

@@ -18,16 +18,19 @@ 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*, 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-de-la-ligne-courante*
+* Extends mixins : Fetcher, [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page)
+ *
+ * * Si le composant possède un attribut *fetch*, il charge un contenu via un appel d'api web.<br>
+ * Voir [fetcher](./?path=/docs/core-components-functional-fetch--basic) pour la configuration des autres attributs.
+ * * Chaque élément créé est englobé dans un objet [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page).<br>
+ *  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 est un objet, il est imbriqué dans un tableau pour garantir le fonctionnement.
+ *  * Si le résultat de la requête est un objet, il est imbriqué dans un tableau pour garantir le fonctionnement.<br>
  * 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() {
@@ -52,22 +55,19 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
             this.isLoading = true;
         super.connectedCallback();
     }
-    render() {
-        if (this.isLoading && !Array.isArray(this.props))
-            return this.templateParts["skeleton"]
-                ? templateContent(this.templateParts["skeleton"])
-                : html `<sonic-loader mode="inline"></sonic-loader>`;
-        // si props est une string on considère qu'il n'y a pas de résultats
-        if (typeof this.props == "string") {
-            return html `<div class="sonic-no-result-container">
+    renderLoadingState() {
+        return this.templateParts["skeleton"]
+            ? templateContent(this.templateParts["skeleton"])
+            : html `<sonic-loader mode="inline"></sonic-loader>`;
+    }
+    renderNoResultState() {
+        return html `
+      <div class="sonic-no-result-container">
         <sonic-icon prefix="iconoir" name="emoji-think-left" size="lg"></sonic-icon
         ><span class="sonic-no-result-text">${this.props}</span>
       </div>`;
-        }
-        // si props est un objet mais qu'il n'y a pas de contenu on retourn une div vide (nécessaire pour le lazyload)
-        if (!Objects.isObject(this.props)) {
-            return html `<div></div>`;
-        }
+    }
+    formatProps() {
         let props = this.props;
         let extractValues = this.hasAttribute("extractValues");
         //si props n'est pas un tableau on l'adapte
@@ -79,13 +79,43 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
                 props = [props];
             }
         }
-        // On peut définir un template spécifique si le résultat est un tableau vide
+        return props;
+    }
+    render() {
+        /**
+         * Loading
+         */
+        const isLoadingState = this.isLoading && !Array.isArray(this.props);
+        if (isLoadingState)
+            return this.renderLoadingState();
+        /**
+         * Si props est une string on considère qu'il n'y a pas de résultats
+         */
+        const isString = typeof this.props === "string";
+        if (isString)
+            return this.renderNoResultState();
+        /**
+         * si props mal formé ou null on retourne une div vide (nécessaire pour le lazyload)
+         */
+        const propsIsBaddlyFormatted = !Objects.isObject(this.props);
+        if (propsIsBaddlyFormatted)
+            return html `<div></div>`;
+        /**
+         * On format les props pour les rendre compatibles avec le fonctionnement du rendu en fonction du paramétrage du composant (cf : "extractValues" )
+         */
+        let props = this.formatProps();
+        /**
+         *  On peut définir un template spécifique si le résultat est un tableau vide
+         */
         if (props.length == 0 && this.templateParts["no-item"]) {
             return templateContent(this.templateParts["no-item"]);
         }
-        // Resultats
+        /**
+         * Rendu des lignes
+         *  */
         let templateCount = this.templateList.length;
         let counter = -1;
+        let extractValues = this.hasAttribute("extractValues");
         return html `
       ${repeat(props, (item, index) => item[this.idKey] || index, (item, index) => {
             let templatePartName = item[this.templateKey];

package/core/components/functional/sonic-scope/sonic-scope.d.ts

@@ -0,0 +1,5 @@
+import { LitElement } from "lit";
+export declare class SonicScope extends LitElement {
+    protected createRenderRoot(): Element | ShadowRoot;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/core/components/functional/sonic-scope/sonic-scope.js

@@ -0,0 +1,20 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+let SonicScope = class SonicScope extends LitElement {
+    createRenderRoot() {
+        return this;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+SonicScope = __decorate([
+    customElement("sonic-scope")
+], SonicScope);
+export { SonicScope };

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

@@ -37,7 +37,6 @@ 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");
         }
@@ -65,7 +64,6 @@ 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,9 @@ declare const Submit_base: (new (...args: any[]) => import("@supersoniks/concord
  */
 export declare class Submit extends Submit_base {
     static styles: import("lit").CSSResult;
+    submitResultKey: string | null;
     disabled: boolean;
+    endPoint: string | null;
     api: API | null;
     connectedCallback(): void;
     submit(): Promise<void>;

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

@@ -20,6 +20,7 @@ import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import API from "@supersoniks/concorde/core/utils/api";
 import { Loader } from "@supersoniks/concorde/core/components/ui/loader/loader";
 import { css, html, LitElement } from "lit";
+import Objects from "@supersoniks/concorde/core/utils/Objects";
 /**
  * ###L'élément submit permet d'envoyer des données en rest
  * * Les données envoyées sont celles présentes dans le publisher dont l'adresse est renseignée via l'attribut *formDataProvider*.
@@ -34,17 +35,21 @@ import { css, html, LitElement } from "lit";
 let Submit = class Submit extends Subscriber(LitElement) {
     constructor() {
         super(...arguments);
+        this.submitResultKey = null;
         this.disabled = false;
+        this.endPoint = null;
         this.api = null;
     }
     connectedCallback() {
-        if (this.hasAttribute("onClick"))
+        if (this.hasAttribute("onClick")) {
             this.addEventListener("click", () => this.submit());
-        if (this.hasAttribute("onEnterKey"))
+        }
+        if (this.hasAttribute("onEnterKey")) {
             this.addEventListener("keydown", (e) => {
                 if (e.key === "Enter")
                     this.submit();
             });
+        }
         super.connectedCallback();
         this.api = new API(this.getApiConfiguration());
     }
@@ -55,20 +60,21 @@ let Submit = class Submit extends Subscriber(LitElement) {
             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;
-            let dp = this.getAncestorAttributeValue("dataProvider");
+            let dataProvider = this.getAncestorAttributeValue("dataProvider");
+            let endPoint = this.endPoint || dataProvider;
             Loader.show();
             switch (method) {
                 case "put":
-                    result = yield ((_b = this.api) === null || _b === void 0 ? void 0 : _b.put(dp, postData));
+                    result = yield ((_b = this.api) === null || _b === void 0 ? void 0 : _b.put(endPoint, postData));
                     break;
                 case "delete":
-                    result = yield ((_c = this.api) === null || _c === void 0 ? void 0 : _c.delete(dp, postData));
+                    result = yield ((_c = this.api) === null || _c === void 0 ? void 0 : _c.delete(endPoint, postData));
                     break;
                 case "get":
-                    result = yield ((_d = this.api) === null || _d === void 0 ? void 0 : _d.get(dp));
+                    result = yield ((_d = this.api) === null || _d === void 0 ? void 0 : _d.get(endPoint));
                     break;
                 default:
-                    result = yield ((_e = this.api) === null || _e === void 0 ? void 0 : _e.post(dp, postData));
+                    result = yield ((_e = this.api) === null || _e === void 0 ? void 0 : _e.post(endPoint, postData));
                     break;
             }
             Loader.hide();
@@ -76,7 +82,10 @@ let Submit = class Submit extends Subscriber(LitElement) {
                 result = { messages: [{ content: "Network Error", status: "error" }] };
             let clearedDataProvider = this.getAncestorAttributeValue("clearedDataOnSuccess");
             if (clearedDataProvider) {
-                clearedDataProvider.split(" ").forEach(dataProvider => PublisherManager.getInstance().get(dataProvider).set({}));
+                clearedDataProvider.split(" ").forEach(dataProvider => PublisherManager.get(dataProvider).set({}));
+            }
+            if (this.submitResultKey) {
+                result = Objects.traverse(result, this.submitResultKey.split("."), true);
             }
             PublisherManager.getInstance().get(this.getAncestorAttributeValue("submitResultDataProvider")).set(result);
             this.publisher.disabled = false;
@@ -93,9 +102,15 @@ Submit.styles = css `
       user-select: none;
     }
   `;
+__decorate([
+    property({ type: String })
+], Submit.prototype, "submitResultKey", void 0);
 __decorate([
     property({ type: Boolean })
 ], Submit.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], Submit.prototype, "endPoint", void 0);
 Submit = __decorate([
     customElement("sonic-submit")
 ], Submit);

package/core/components/ui/badge/badge.js

@@ -44,7 +44,6 @@ Badge.styles = [
         --sc-badge-py: 0.15em;
         --sc-badge-px: 0.66em;
         --sc-badge-fs: 1rem;
-        --sc-badge-fw: 1rem;
 
         --sc-badge-color: var(--sc-base-content, #1f2937);
         --sc-badge-bg: var(--sc-base-200, #e5e7eb);

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

@@ -35,7 +35,6 @@ declare const Button_base: {
         noShadowDom: string | null;
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
-        makeShadow(props: Record<string, any>, value: any): any;
         dispatchEvent(event: Event): void;
         setAttribute(name: string, value: string): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;

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

@@ -210,13 +210,13 @@ Button.styles = [
 
       :host a {
         display: contents;
+        color:unset;
       }
 
       :host button {
         display: flex;
         flex: 1;
         box-sizing: border-box;
-        flex-wrap: wrap;
         align-items: center;
         justify-content: center;
 

package/core/components/ui/card/card-footer.d.ts

@@ -0,0 +1,5 @@
+import { LitElement } from "lit";
+export declare class CardFooter extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/core/components/ui/card/card-footer.js

@@ -0,0 +1,27 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
+let CardFooter = class CardFooter extends LitElement {
+    render() {
+        return html `
+      <slot></slot>
+    `;
+    }
+};
+CardFooter.styles = [
+    css `
+      :host {
+     
+      }
+   
+    `
+];
+CardFooter = __decorate([
+    customElement("sonic-card-footer")
+], CardFooter);
+export { CardFooter };

package/core/components/ui/card/card-header-descripton.d.ts

@@ -0,0 +1,5 @@
+import { LitElement } from "lit";
+export declare class CardHeaderDescription extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/core/components/ui/card/card-header-descripton.js

@@ -0,0 +1,33 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
+let CardHeaderDescription = class CardHeaderDescription extends LitElement {
+    render() {
+        return html `
+      <div>
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+CardHeaderDescription.styles = [
+    css `
+
+      div {
+        margin-top: .1em;
+        font-family: var(--sc-font-family-base);
+        font-size: .7em;
+        font-weight: var(--sc-font-style-base);
+      }
+   
+    `
+];
+CardHeaderDescription = __decorate([
+    customElement("sonic-card-header-description")
+], CardHeaderDescription);
+export { CardHeaderDescription };

package/core/components/ui/card/card-header.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from "lit";
+import './card-header-descripton.ts';
+export declare class CardHeader extends LitElement {
+    static styles: import("lit").CSSResult[];
+    label: string;
+    description: string;
+    render(): import("lit-html").TemplateResult<1>;
+}