@supersoniks/concorde 1.1.42 → 1.1.44

package/core/components/functional/sdui/sdui.js

@@ -13,12 +13,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import default_library from "@supersoniks/concorde/core/components/functional/sdui/default-library.json";
+import SDUIDescriptorTransformer from "@supersoniks/concorde/core/components/functional/sdui/SDUIDescriptorTransformer";
 import { Fetcher, Subscriber } from "@supersoniks/concorde/mixins";
 import { HTML, Objects } from "@supersoniks/concorde/utils";
+import { LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
 const tagName = "sonic-sdui"; // For Astro.build
-import SDUIDescriptorTransformer from "@supersoniks/concorde/core/components/functional/sdui/SDUIDescriptorTransformer";
 /**
  *  ### sonic-sdui (Server Driven User Interface) est un fetcher chargant un JSON décrivant une interface utilisateur
  *
@@ -37,6 +38,10 @@ import SDUIDescriptorTransformer from "@supersoniks/concorde/core/components/fun
  * *
  */
 let SonicSDUI = class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
+    constructor() {
+        super(...arguments);
+        this.sduiDescriptor = {};
+    }
     connectedCallback() {
         this.noShadowDom = "";
         this.displayContents = true;
@@ -46,22 +51,32 @@ let SonicSDUI = class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
     /**
      * On peut passer la description sous form de props, sinon il faut utiliser l'attribut fetch
      */
-    get props() {
-        return super.props;
-    }
-    set props(value) {
-        super.props = value;
-        this.updateContents();
+    willUpdate(changedProperties) {
+        if (this.props == null) {
+            this.sduiDescriptor = {};
+        }
+        {
+            const newSduiDescriptor = this.sduiKey
+                ? this.props[this.sduiKey]
+                : this.props;
+            if (this.sduiDescriptor == newSduiDescriptor)
+                return;
+            this.sduiDescriptor = newSduiDescriptor;
+            this.updateContents();
+        }
+        super.willUpdate(changedProperties);
     }
     /**
-     * updateContents est déclenché quand les props sont renseignées
+     * updateContents est déclenché quand les sduiDescriptor sont renseignées
      * Le contenu du composant est regénéré en fonction du descripteur fourni
      */
     updateContents() {
         return __awaiter(this, void 0, void 0, function* () {
-            this.removeChildren();
-            if (!this.props)
+            if (!this.sduiDescriptor)
                 return;
+            const library = {};
+            Object.assign(library, default_library, this.sduiDescriptor.library);
+            this.sduiDescriptor.library = library;
             this.loadAssets();
             yield this.loadLibrary();
             yield this.transformSDUIDescriptor();
@@ -80,28 +95,28 @@ let SonicSDUI = class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
      * Chargement de fichiers js et css associés si besoin
      **/
     loadAssets() {
-        if (!this.props)
+        if (!this.sduiDescriptor)
             return;
-        if (this.props.js) {
-            for (const src of this.props.js)
+        if (this.sduiDescriptor.js) {
+            for (const src of this.sduiDescriptor.js)
                 HTML.loadJS(src);
         }
-        if (this.props.css) {
-            for (const src of this.props.css)
+        if (this.sduiDescriptor.css) {
+            for (const src of this.sduiDescriptor.css)
                 HTML.loadCSS(src);
         }
     }
     /**
-     * Transformation de la data fournie via props si il y a un attribut transformation
+     * Transformation de la data fournie via sduiDescriptor si il y a un attribut transformation
      * */
     transformSDUIDescriptor() {
         return __awaiter(this, void 0, void 0, function* () {
             if (!this.hasAttribute("transformation"))
                 return;
-            let result = yield fetch(this.getAttribute("transformation"));
-            let json = yield result.json();
-            let transformer = new SDUIDescriptorTransformer();
-            yield transformer.transform(this.props, json);
+            const result = yield fetch(this.getAttribute("transformation"));
+            const json = yield result.json();
+            const transformer = new SDUIDescriptorTransformer();
+            yield transformer.transform(this.sduiDescriptor, json);
         });
     }
     /**
@@ -111,27 +126,33 @@ let SonicSDUI = class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
         return __awaiter(this, void 0, void 0, function* () {
             if (!this.hasAttribute("library"))
                 return;
-            let result = yield fetch(this.getAttribute("library"));
-            let json = yield result.json();
-            this.props.library = json;
+            const result = yield fetch(this.getAttribute("library"));
+            const json = yield result.json();
+            this.sduiDescriptor.library = json;
         });
     }
     /**
      * Point d'entrée : transformation des noeuds fournis en éléments graphiques
      **/
     parseRootNodes() {
-        if (!this.props)
+        this.removeChildren();
+        if (!this.sduiDescriptor)
             return;
-        let nodes = this.props.nodes;
+        let nodes = this.sduiDescriptor.nodes;
         if (!nodes)
-            return;
+            nodes = [];
+        const messageProvider = { tagName: "sonic-toast-message-subscriber", attributes: {} };
+        if (this.messagesKey) {
+            messageProvider.attributes = { subDataProvider: this.messagesKey };
+        }
+        nodes.push(messageProvider);
         nodes.forEach((node) => this.appendChild(this.parseChild(node)));
     }
     /**
      * On parse un noeud ce qui crée un éléments graphique et ses enfants par recursivité via `handleChildNodes`
      */
     parseChild(node) {
-        let tagName = node.tagName || "div";
+        const tagName = node.tagName || "div";
         let { element, contentElement } = this.handleLibrary(node, tagName);
         this.handleAttributes(node, element);
         element = this.handleMarkup(node, element);
@@ -146,7 +167,7 @@ let SonicSDUI = class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
         return element;
     }
     /**
-     * Si le noeud courant a des propriétés prefix et ou suffix il est entouré des markups fournis dans ces props.
+     * Si le noeud courant a des propriétés prefix et ou suffix il est entouré des markups fournis dans ces sduiDescriptor.
      * Le tout est inclu dans une div en display contents
      */
     handlePrefixSuffix(node, element) {
@@ -161,15 +182,19 @@ let SonicSDUI = class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
      */
     handleChildNodes(node, contentElement, element) {
         if (node.nodes) {
-            let children = node.nodes;
-            for (let child of children) {
-                let childElement = this.parseChild(child);
+            const children = node.nodes;
+            for (const child of children) {
+                const childElement = this.parseChild(child);
                 let nodeToAppendOn = contentElement;
                 if (child.parentElementSelector) {
                     nodeToAppendOn = element.querySelector(child.parentElementSelector) || contentElement;
                 }
                 if (nodeToAppendOn.shadowRoot)
                     nodeToAppendOn.shadowRoot.appendChild(childElement);
+                else if (nodeToAppendOn.tagName.toLocaleLowerCase() == "template") {
+                    const template = nodeToAppendOn;
+                    template.content.appendChild(childElement);
+                }
                 else
                     nodeToAppendOn.appendChild(childElement);
             }
@@ -185,9 +210,9 @@ let SonicSDUI = class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
     handleLibrary(node, tagName) {
         let element;
         let contentElement;
-        if (node.libraryKey && this.props.library) {
-            element = this.parseChild(this.props.library[node.libraryKey] || { tagName: "div" });
-            let selector = (this.props.library[node.libraryKey] || {}).contentElementSelector;
+        if (node.libraryKey && this.sduiDescriptor.library) {
+            element = this.parseChild(this.sduiDescriptor.library[node.libraryKey] || { tagName: "div" });
+            const selector = (this.sduiDescriptor.library[node.libraryKey] || {}).contentElementSelector;
             if (selector)
                 contentElement = element.querySelector(selector);
         }
@@ -199,12 +224,10 @@ let SonicSDUI = class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
      * Remplissage des attributs html avec les attributs fournis dans le noeud
      */
     handleAttributes(node, element) {
-        let attributes = node.attributes;
-        for (let k in attributes) {
-            let attr = attributes[k];
-            if (Objects.isObject(attr)) {
-                attr = JSON.stringify(attr);
-            }
+        const attributes = node.attributes;
+        for (const k in attributes) {
+            const attrData = attributes[k];
+            const attr = Objects.isObject(attrData) ? JSON.stringify(attrData) : attrData;
             element.setAttribute(k, attr);
         }
     }
@@ -227,7 +250,7 @@ let SonicSDUI = class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
         if (!node.innerHTML)
             return;
         if (node.innerHTML.indexOf("wording_") != -1) {
-            let wordingProvider = this.getAncestorAttributeValue("wordingProvider");
+            const wordingProvider = this.getAncestorAttributeValue("wordingProvider");
             (_a = this.api) === null || _a === void 0 ? void 0 : _a.post(wordingProvider, { labels: [node.innerHTML.substring(8)] }).then((value) => {
                 if (contentElement)
                     contentElement.innerHTML += value;
@@ -240,7 +263,10 @@ let SonicSDUI = class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
 };
 __decorate([
     property()
-], SonicSDUI.prototype, "props", null);
+], SonicSDUI.prototype, "sduiKey", void 0);
+__decorate([
+    property()
+], SonicSDUI.prototype, "messagesKey", void 0);
 SonicSDUI = __decorate([
     customElement(tagName)
 ], SonicSDUI);

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

@@ -1,14 +1,14 @@
-export declare type SDUIDescriptor = {
+export type SDUIDescriptor = {
     js?: Array<string>;
     css?: Array<string>;
     library?: Record<string, SDUINode>;
     nodes?: Array<SDUINode>;
 };
-export declare type SDUINode = {
+export type SDUINode = {
     libraryKey?: string;
     markup?: string;
     tagName?: string;
-    attributes: Record<string, string>;
+    attributes?: Record<string, string>;
     nodes?: Array<SDUINode>;
     innerHTML?: string;
     prefix?: string;
@@ -16,19 +16,21 @@ export declare type SDUINode = {
     contentElementSelector?: string;
     parentElementSelector?: string;
 };
-export declare type SDUITransformDescription = {
+export type SDUITransformDescription = {
     library?: Record<string, SDUINode>;
     transforms: Array<SDUITransformAction>;
 };
-export declare type SDUITransformAction = {
-    action: "remap" | "unwrap" | "wrap" | "delete" | "insert" | "move";
+export type SDUITransformActionName = "remap" | "unwrap" | "wrap" | "delete" | "insert" | "move";
+export type SDUITransformActionFunction = (transformAction: SDUITransformAction, list: SDUITransformList) => void;
+export type SDUITransformAction = {
+    action: SDUITransformActionName;
     patterns?: Array<SDUINode>;
     after?: SDUINode;
     before?: SDUINode;
     in?: SDUINode;
-    ui?: string;
+    ui?: SDUINode;
 };
-export declare type SDUITransformList = Array<{
+export type SDUITransformList = Array<{
     parent: SDUINode;
     child: SDUINode;
     index: number;

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

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

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

@@ -12,6 +12,7 @@ import { repeat } from "lit/directives/repeat.js";
 import Objects from "@supersoniks/concorde/core/utils/Objects";
 import UrlPattern from "url-pattern";
 import TemplatesContainer from "@supersoniks/concorde/core/mixins/TemplatesContainer";
+const tagName = "sonic-states";
 /**
  * ### sonic-states affiche des états différents en fonction de la valeur d'une sous propriété de son dataProvider (attribut data-path en dot notation):
  * * Il boucle sur ses template enfants et test si la regexp contenue dans l'attribut *data-value* match la valeur de la propriété
@@ -27,14 +28,16 @@ import TemplatesContainer from "@supersoniks/concorde/core/mixins/TemplatesConta
  * * url-pattern data-value = :id et dataproviderExpression = /user/:id l'attribut dataProvider vaudra "/user/2"
  *
  */
-const tagName = "sonic-states";
 let SonicStates = class SonicStates extends Subscriber(TemplatesContainer(LitElement)) {
     constructor() {
         super(...arguments);
         this.state = "";
         this.inverted = false;
         this.statePath = "";
-        this.onAssign = null;
+        this.onAssign = (value) => {
+            this.state = value;
+            this.requestUpdate();
+        };
     }
     connectedCallback() {
         super.connectedCallback();
@@ -43,29 +46,26 @@ let SonicStates = class SonicStates extends Subscriber(TemplatesContainer(LitEle
         }
         if (this.statePath) {
             this.statePublisher = this.publisher;
-            let split = this.statePath.split(".");
-            for (let s of split) {
+            const split = this.statePath.split(".");
+            for (const s of split) {
                 this.statePublisher = this.statePublisher[s];
             }
-            this.onAssign = (value) => {
-                this.state = value;
-                this.requestUpdate();
-            };
             this.statePublisher.onAssign(this.onAssign);
         }
     }
     disconnectedCallback() {
+        var _a;
         if (this.statePath)
-            this.statePublisher.offAssign(this.onAssign);
+            (_a = this.statePublisher) === null || _a === void 0 ? void 0 : _a.offAssign(this.onAssign);
         super.disconnectedCallback();
     }
     render() {
-        let templates = [];
+        const templates = [];
         let state = this.state;
         if ((!Array.isArray(state) && Objects.isObject(state)) || state === undefined) {
             state = "";
         }
-        for (let t of this.templatePartsList) {
+        for (const t of this.templatePartsList) {
             let path = t.getAttribute(this.templateValueAttribute);
             let stateToMatch = state;
             if (this.inverted) {
@@ -74,13 +74,13 @@ let SonicStates = class SonicStates extends Subscriber(TemplatesContainer(LitEle
             }
             if (path == "")
                 path = this.inverted ? ".*?" : "^$";
-            let regexp = new RegExp(path);
+            const regexp = new RegExp(path);
             if (regexp.test(stateToMatch)) {
                 templates.push(t);
                 t.removeAttribute("mode");
             }
             else {
-                let urlPattern = new UrlPattern(path);
+                const urlPattern = new UrlPattern(path);
                 if (urlPattern.names.length > 0 && urlPattern.match(stateToMatch)) {
                     t.setAttribute("mode", "patternMatching");
                     templates.push(t);
@@ -95,7 +95,7 @@ let SonicStates = class SonicStates extends Subscriber(TemplatesContainer(LitEle
             if (template.title)
                 document.title = template.title;
             if (template.hasAttribute("dataProviderExpression")) {
-                let dataProviderExpression = template.getAttribute("dataProviderExpression");
+                const dataProviderExpression = template.getAttribute("dataProviderExpression");
                 let dataProvider = "";
                 let stateToMatch = state;
                 let path = template.getAttribute(this.templateValueAttribute);
@@ -112,7 +112,7 @@ let SonicStates = class SonicStates extends Subscriber(TemplatesContainer(LitEle
                 }
                 else {
                     const regexp = new RegExp(path);
-                    let match = (stateToMatch + "").match(regexp);
+                    const match = (stateToMatch + "").match(regexp);
                     if (match) {
                         dataProvider = (_a = match.shift()) === null || _a === void 0 ? void 0 : _a.replace(regexp, dataProviderExpression);
                     }
@@ -133,8 +133,3 @@ SonicStates = __decorate([
     customElement(tagName)
 ], SonicStates);
 export { SonicStates };
-//Ajout pour custom-elements-manifesy pour storybook notamment
-try {
-    customElements.define(tagName, SonicStates);
-}
-catch (e) { }

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

@@ -1,15 +1,30 @@
 import "@supersoniks/concorde/core/components/ui/button/button";
 import API from "@supersoniks/concorde/core/utils/api";
 import { LitElement } from "lit";
-declare const Submit_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+declare const Submit_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<import("@supersoniks/concorde/core/_types/types").CoreJSType>) & typeof LitElement;
+/**
+ * ###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*.
+ * Cet attribut est également utilisé par les éléments de form comme *sonic-input*, ou *sonic-select*, qui remplissent ce publisher avec leur attribut *value* en fonction de leur attribut *name*
+ * * L'api est configuré à la manière d'un fetcher.
+ * * L'attribut *method* permet de choisir la méthode d'envoie : *put/delete/post*, *post* étant la méthode par défaut.
+ * * Si l'attribut *onClick* est présent, les données sont envoyées quand on click dans son contenu
+ * * Si l'attribut *onEnterKey* est présent, les données sont envoyées quand on appuie sur la touche entrée d'un élément contenu dans le *sonic-submit* ayant le focus
+ * * Pendant l'envoi, les éléments *sonic-submit* ayant le même attribut *dataProvider* ont la propriété *disabled="disabled"* ce qui a pour effet de désactiver leur contenu
+ * * L'attribut *clearedDataOnSuccess* peut être utilisé pour vider les données des dataProvider correspondants lorsque l'appel à l'api a fourni un résultat.
+ */
 export declare class Submit extends Submit_base {
     static styles: import("lit").CSSResult;
     submitResultKey: string | null;
     disabled: boolean;
     endPoint: string | null;
+    name: string;
+    value: string;
     api: API | null;
     connectedCallback(): void;
+    submitNativeForm(): void;
     submit(): Promise<void>;
+    saveCredentials(username: string, password: string): Promise<void>;
     protected render(): unknown;
 }
 export {};

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

@@ -13,14 +13,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { customElement, property } from "lit/decorators.js";
-import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy.mjs";
 import "@supersoniks/concorde/core/components/ui/button/button";
+import { Loader } from "@supersoniks/concorde/core/components/ui/loader/loader";
 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";
+import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
+import { HTML } from "@supersoniks/concorde/utils";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+const tagName = "sonic-submit";
 /**
  * ###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*.
@@ -32,13 +34,14 @@ import Objects from "@supersoniks/concorde/core/utils/Objects";
  * * Pendant l'envoi, les éléments *sonic-submit* ayant le même attribut *dataProvider* ont la propriété *disabled="disabled"* ce qui a pour effet de désactiver leur contenu
  * * L'attribut *clearedDataOnSuccess* peut être utilisé pour vider les données des dataProvider correspondants lorsque l'appel à l'api a fourni un résultat.
  */
-const tagName = "sonic-submit";
 let Submit = class Submit extends Subscriber(LitElement) {
     constructor() {
         super(...arguments);
         this.submitResultKey = null;
         this.disabled = false;
         this.endPoint = null;
+        this.name = "";
+        this.value = "";
         this.api = null;
     }
     connectedCallback() {
@@ -54,6 +57,42 @@ let Submit = class Submit extends Subscriber(LitElement) {
         super.connectedCallback();
         this.api = new API(this.getApiConfiguration());
     }
+    submitNativeForm() {
+        const form = HTML.getClosestForm(this);
+        if (!form)
+            return;
+        const formDataProvider = this.getAncestorAttributeValue("formDataProvider");
+        const formData = PublisherManager.get(formDataProvider).get();
+        for (const name in formData) {
+            if (name == "isFormValid")
+                continue;
+            let control = form.querySelector('input[name="' + name + '"], select[name="' + name + '"], textarea[name="' + name + '"]');
+            if (!control) {
+                control = document.createElement("input");
+                control.type = "hidden";
+                control.name = name;
+                form.appendChild(control);
+            }
+            let value = formData[name];
+            if (Array.isArray(value))
+                value = value.join(",");
+            if (control.type === "checkbox" || control.type === "radio") {
+                if (value)
+                    control.checked = true;
+            }
+            else {
+                control.value = value;
+            }
+        }
+        const submitButton = document.createElement("input");
+        submitButton.name = this.name;
+        submitButton.style.display = "none";
+        submitButton.value = this.value;
+        submitButton.type = "submit";
+        form.appendChild(submitButton);
+        if (submitButton)
+            submitButton.click();
+    }
     submit() {
         var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function* () {
@@ -67,24 +106,33 @@ let Submit = class Submit extends Subscriber(LitElement) {
             if (this.publisher)
                 this.publisher.disabled = true;
             formPublisher.isFormValid;
+            // support native html form
+            const native = this.hasAttribute("native");
+            if (native) {
+                this.submitNativeForm();
+                return;
+            }
             //
             //Recup données
-            let method = ((_a = this.getAttribute("method")) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) || "post";
-            let sendAsFormData = this.hasAttribute("sendAsFormData");
-            let formData = formPublisher.get();
+            const method = ((_a = this.getAttribute("method")) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) || "post";
+            const sendAsFormData = this.hasAttribute("sendAsFormData");
+            const formData = formPublisher.get();
             delete formData.isFormValid;
-            const headerPublisher = PublisherManager.getInstance().get(this.getAncestorAttributeValue("headersDataProvider"));
-            let headerData = headerPublisher.get();
+            const headesDataProvider = this.getAncestorAttributeValue("headersDataProvider");
+            const headerPublisher = headesDataProvider ? PublisherManager.getInstance().get(headesDataProvider) : null;
+            let headerData = {};
+            if (headerPublisher)
+                headerData = headerPublisher.get();
             let result = null;
-            let dataProvider = this.getAncestorAttributeValue("dataProvider");
-            let endPoint = this.endPoint || dataProvider;
+            const dataProvider = this.getAncestorAttributeValue("dataProvider");
+            const endPoint = this.endPoint || dataProvider;
             Loader.show();
-            let sendData = () => __awaiter(this, void 0, void 0, function* () {
-                var _d, _e, _f, _g, _h;
+            const sendData = () => __awaiter(this, void 0, void 0, function* () {
+                var _d, _e, _f, _g, _h, _j, _k;
                 //
                 //envoi données
                 if (sendAsFormData) {
-                    result = yield ((_d = this.api) === null || _d === void 0 ? void 0 : _d.submitFormData(endPoint, formData, headerData));
+                    result = yield ((_d = this.api) === null || _d === void 0 ? void 0 : _d.submitFormData(endPoint, formData, method, headerData));
                 }
                 else {
                     switch (method) {
@@ -108,27 +156,35 @@ let Submit = class Submit extends Subscriber(LitElement) {
                 // Si result ne contient que la réponse HTTP, avec un status not ok, on ajoute un message
                 else if (result._sonic_http_response_ && !result._sonic_http_response_.ok && Object.keys(result).length === 1)
                     result.messages = [{ content: "Network Error", status: "error" }];
-                let clearedDataProvider = this.getAncestorAttributeValue("clearedDataOnSuccess");
+                const clearedDataProvider = this.getAncestorAttributeValue("clearedDataOnSuccess");
                 if (clearedDataProvider) {
                     clearedDataProvider.split(" ").forEach((dataProvider) => PublisherManager.get(dataProvider).set({}));
                 }
+                const username_key = this.hasAttribute("usernameKey") ? this.getAttribute("usernameKey") : "username";
+                const password_key = this.hasAttribute("passwordKey") ? this.getAttribute("passwordKey") : "password";
+                if (((_k = (_j = this.api) === null || _j === void 0 ? void 0 : _j.lastResult) === null || _k === void 0 ? void 0 : _k.ok) && formData[username_key] && formData[password_key]) {
+                    this.saveCredentials(formData[username_key], formData[password_key]);
+                }
                 if (this.submitResultKey) {
                     result = Objects.traverse(result, this.submitResultKey.split("."), true);
                 }
-                PublisherManager.getInstance().get(this.getAncestorAttributeValue("submitResultDataProvider")).set(result);
+                const submitResultDataProvider = this.getAncestorAttributeValue("submitResultDataProvider");
+                if (submitResultDataProvider)
+                    PublisherManager.get(submitResultDataProvider).set(result);
                 if (this.publisher)
                     this.publisher.disabled = null;
             });
-            let captchaPublisher = headerPublisher.needsCaptchaValidation.get()
+            const captchaPublisher = (headerPublisher === null || headerPublisher === void 0 ? void 0 : headerPublisher.needsCaptchaValidation.get())
                 ? headerPublisher
                 : formPublisher.needsCaptchaValidation.get()
                     ? formPublisher
                     : null;
             if (captchaPublisher) {
                 captchaPublisher.captchaMethod = method;
-                captchaPublisher.captchaAction = (_c = (_b = dataProvider === null || dataProvider === void 0 ? void 0 : dataProvider.split("?")[0]) !== null && _b !== void 0 ? _b : this.getAncestorAttributeValue("formDataProvider")) !== null && _c !== void 0 ? _c : "submit";
+                captchaPublisher.captchaAction =
+                    (_c = (_b = dataProvider === null || dataProvider === void 0 ? void 0 : dataProvider.split("?")[0]) !== null && _b !== void 0 ? _b : this.getAncestorAttributeValue("formDataProvider")) !== null && _c !== void 0 ? _c : "submit";
                 captchaPublisher.captchaToken = "request_token";
-                let captchaAssign = (token) => {
+                const captchaAssign = (token) => {
                     if (token != "request_token") {
                         sendData();
                         // Après l'envoie des données, on supprime ce onAssign.
@@ -143,6 +199,19 @@ let Submit = class Submit extends Subscriber(LitElement) {
             }
         });
     }
+    saveCredentials(username, password) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Check if the browser supports password credentials (and the Credential Management API)
+            if ("PasswordCredential" in window) {
+                const credential = new window.PasswordCredential({
+                    id: username,
+                    // name: "Carina Anand", // In case of a login, the name comes from the server.
+                    password: password,
+                });
+                yield navigator.credentials.store(credential);
+            }
+        });
+    }
     render() {
         return html `<div ?data-disabled=${this.disabled}><slot></slot></div>`;
     }
@@ -163,12 +232,13 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Submit.prototype, "endPoint", void 0);
+__decorate([
+    property()
+], Submit.prototype, "name", void 0);
+__decorate([
+    property()
+], Submit.prototype, "value", void 0);
 Submit = __decorate([
     customElement(tagName)
 ], Submit);
 export { Submit };
-//Ajout pour la creation du cem notamment pour Storybook
-try {
-    customElements.define(tagName, Submit);
-}
-catch (e) { }