@supersoniks/concorde 1.1.31 → 1.1.35

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

@@ -1,5 +1,5 @@
 import { LitElement, nothing } from "lit";
-import '@supersoniks/concorde/core/components/functional/list/list';
+import "@supersoniks/concorde/core/components/functional/list/list";
 import { PublisherProxy } from "@supersoniks/concorde/core/utils/PublisherProxy.mjs";
 declare const Queue_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
 export default class Queue extends Queue_base {
@@ -14,6 +14,9 @@ export default class Queue extends Queue_base {
     limit: number;
     offset: number;
     filteredFields: string;
+    _displayContents: boolean;
+    set displayContents(value: boolean);
+    get displayContents(): boolean;
     static instanceCounter: number;
     connectedCallback(): void;
     filterPublisher: PublisherProxy | null;

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

@@ -8,10 +8,10 @@ var Queue_1;
 import { html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
-import { repeat } from 'lit/directives/repeat.js';
+import { repeat } from "lit/directives/repeat.js";
 import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy.mjs";
 import { ifDefined } from "lit/directives/if-defined.js";
-import '@supersoniks/concorde/core/components/functional/list/list';
+import "@supersoniks/concorde/core/components/functional/list/list";
 /**
  *### Une Queue charge du contenu par lot selon l'expression renseignée dans l'attribut *dataProviderExpression*.
  * * Chaque lot est chargé par un composant [List](./?path=/docs/core-components-functional-list-list--basic) dont le dataProvider créé à partir de l'attribut dataProviderExpression
@@ -39,6 +39,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
         this.limit = 5;
         this.offset = 0;
         this.filteredFields = "";
+        this._displayContents = false;
         this.filterPublisher = null;
         this.filterTimeoutId = undefined;
         /**
@@ -52,6 +53,12 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
         this.currentScrollPosition = undefined;
         this.listDataProviders = [];
     }
+    set displayContents(value) {
+        this._displayContents = value;
+    }
+    get displayContents() {
+        return this._displayContents;
+    }
     connectedCallback() {
         this.noShadowDom = "";
         this.defferedDebug = this.hasAttribute("debug") || null;
@@ -142,6 +149,8 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
         this.lastRequestTime = new Date().getTime();
     }
     render() {
+        let displayStyle = this.displayContents ? "contents" : "inline";
+        this.style.display = displayStyle;
         if (this.currentScrollPosition) {
             window.requestAnimationFrame(() => {
                 if (document.scrollingElement)
@@ -154,10 +163,11 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
         return html `
       ${repeat(this.props, (item) => item.id, (item, index) => {
             var _a;
-            let templates = index == 0 ? this.templates : (_a = this.templates) === null || _a === void 0 ? void 0 : _a.filter(elt => elt.getAttribute("data-value") != "no-item");
+            let templates = index == 0 ? this.templates : (_a = this.templates) === null || _a === void 0 ? void 0 : _a.filter((elt) => elt.getAttribute("data-value") != "no-item");
             return html `
             <sonic-list
               fetch
+              style=${displayStyle}
               .itemPropertyMap=${this.itemPropertyMap}
               debug=${ifDefined(this.defferedDebug)}
               @load=${this.next}
@@ -192,6 +202,9 @@ __decorate([
 __decorate([
     property()
 ], Queue.prototype, "filteredFields", void 0);
+__decorate([
+    property()
+], Queue.prototype, "displayContents", null);
 __decorate([
     property({ type: String })
 ], Queue.prototype, "dataProviderExpression", void 0);

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

@@ -55,7 +55,7 @@ let Submit = class Submit extends Subscriber(LitElement) {
         this.api = new API(this.getApiConfiguration());
     }
     submit() {
-        var _a;
+        var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function* () {
             const formPublisher = PublisherManager.getInstance().get(this.getAncestorAttributeValue("formDataProvider"));
             //
@@ -70,30 +70,37 @@ let Submit = class Submit extends Subscriber(LitElement) {
             //
             //Recup données
             let method = ((_a = this.getAttribute("method")) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) || "post";
-            let postData = formPublisher.get();
-            delete postData.isFormValid;
-            let headerData = PublisherManager.getInstance().get(this.getAncestorAttributeValue("headersDataProvider")).get();
+            let sendAsFormData = this.hasAttribute("sendAsFormData");
+            let formData = formPublisher.get();
+            delete formData.isFormValid;
+            const headerPublisher = PublisherManager.getInstance().get(this.getAncestorAttributeValue("headersDataProvider"));
+            let headerData = headerPublisher.get();
             let result = null;
             let dataProvider = this.getAncestorAttributeValue("dataProvider");
             let endPoint = this.endPoint || dataProvider;
             Loader.show();
             let sendData = () => __awaiter(this, void 0, void 0, function* () {
-                var _b, _c, _d, _e;
+                var _d, _e, _f, _g, _h;
                 //
                 //envoi données
-                switch (method) {
-                    case "put":
-                        result = yield ((_b = this.api) === null || _b === void 0 ? void 0 : _b.put(endPoint, postData, headerData));
-                        break;
-                    case "delete":
-                        result = yield ((_c = this.api) === null || _c === void 0 ? void 0 : _c.delete(endPoint, postData, headerData));
-                        break;
-                    case "get":
-                        result = yield ((_d = this.api) === null || _d === void 0 ? void 0 : _d.get(endPoint, headerData));
-                        break;
-                    default:
-                        result = yield ((_e = this.api) === null || _e === void 0 ? void 0 : _e.post(endPoint, postData, headerData));
-                        break;
+                if (sendAsFormData) {
+                    result = yield ((_d = this.api) === null || _d === void 0 ? void 0 : _d.submitFormData(endPoint, formData, headerData));
+                }
+                else {
+                    switch (method) {
+                        case "put":
+                            result = yield ((_e = this.api) === null || _e === void 0 ? void 0 : _e.put(endPoint, formData, headerData));
+                            break;
+                        case "delete":
+                            result = yield ((_f = this.api) === null || _f === void 0 ? void 0 : _f.delete(endPoint, formData, headerData));
+                            break;
+                        case "get":
+                            result = yield ((_g = this.api) === null || _g === void 0 ? void 0 : _g.get(endPoint, headerData));
+                            break;
+                        default:
+                            result = yield ((_h = this.api) === null || _h === void 0 ? void 0 : _h.post(endPoint, formData, headerData));
+                            break;
+                    }
                 }
                 Loader.hide();
                 //Je garde ça, mais normalement il y a toujours quelquechose
@@ -110,9 +117,16 @@ let Submit = class Submit extends Subscriber(LitElement) {
                 if (this.publisher)
                     this.publisher.disabled = false;
             });
-            if (formPublisher.needsCaptchaValidation.get()) {
-                formPublisher.captchaToken = "request_token";
-                formPublisher.captchaToken.onAssign((token) => {
+            let captchaPublisher = 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.captchaToken = "request_token";
+                captchaPublisher.captchaToken.onAssign((token) => {
                     if (token != "request_token")
                         sendData();
                 });

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

@@ -3,8 +3,7 @@ declare const Button_base: {
     new (...args: any[]): {
         _value: string | null;
         value: string | null;
-        _name: string;
-        name: string;
+        forceAutoFill: boolean;
         unique: true | null;
         radio: true | null;
         _checked: true | null;
@@ -23,6 +22,8 @@ declare const Button_base: {
         required: boolean;
         disabled: true | null;
         formDataProvider: string;
+        _name: string;
+        name: string;
         props: any;
         isConnected: boolean;
         getAncestorAttributeValue(attributeName: string): string;

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

@@ -8,6 +8,7 @@ declare const Captcha_base: (new (...args: any[]) => import("../../../mixins/Sub
  */
 export declare class Captcha extends Captcha_base {
     key: string;
+    action: string | null;
     formPublisher: any;
     connectedCallback(): void;
     requestToken(): void;

package/core/components/ui/captcha/captcha.js

@@ -19,13 +19,15 @@ let Captcha = class Captcha extends Subscriber(LitElement) {
     constructor() {
         super(...arguments);
         this.key = "";
+        this.action = null;
     }
     connectedCallback() {
+        var _a;
         const script = document.createElement("script");
         script.src = "https://www.google.com/recaptcha/api.js?render=" + this.key;
         document.head.appendChild(script);
         super.connectedCallback();
-        this.formPublisher = PublisherManager.get(this.getAncestorAttributeValue("formDataProvider"));
+        this.formPublisher = PublisherManager.get((_a = this.getAncestorAttributeValue("headersDataProvider")) !== null && _a !== void 0 ? _a : this.getAncestorAttributeValue("formDataProvider"));
         this.formPublisher.needsCaptchaValidation = true;
         this.formPublisher.captchaToken.onAssign((v) => {
             if (v == "request_token") {
@@ -34,9 +36,16 @@ let Captcha = class Captcha extends Subscriber(LitElement) {
         });
     }
     requestToken() {
+        var _a, _b, _c, _d;
         const win = window;
+        // On récupère l'action liée au recaptcha,
+        // et on vérifie qu'il ne contienne que des caractères alpha-numériques, underscore et slash
+        let action = ((_c = (_a = this.action) !== null && _a !== void 0 ? _a : (_b = this.formPublisher.captchaAction) === null || _b === void 0 ? void 0 : _b.get()) !== null && _c !== void 0 ? _c : "submit").replace(/[^\w_\/]/g, "_");
+        let method = ((_d = this.formPublisher.captchaMethod.get()) !== null && _d !== void 0 ? _d : "POST").toUpperCase();
+        delete this.formPublisher.captchaAction;
+        delete this.formPublisher.captchaMethod;
         win.grecaptcha.ready(() => {
-            win.grecaptcha.execute(this.key, { action: "submit" }).then((token) => {
+            win.grecaptcha.execute(this.key, { action: method + "//" + action }).then((token) => {
                 this.formPublisher.captchaToken = token;
             });
         });
@@ -48,6 +57,9 @@ let Captcha = class Captcha extends Subscriber(LitElement) {
 __decorate([
     property()
 ], Captcha.prototype, "key", void 0);
+__decorate([
+    property()
+], Captcha.prototype, "action", void 0);
 Captcha = __decorate([
     customElement(tagName)
 ], Captcha);

package/core/components/ui/form/checkbox/checkbox.d.ts

@@ -4,8 +4,7 @@ declare const Checkbox_base: {
     new (...args: any[]): {
         _value: string | null;
         value: string | null;
-        _name: string;
-        name: string;
+        forceAutoFill: boolean;
         unique: true | null;
         radio: true | null;
         _checked: true | null;
@@ -24,26 +23,9 @@ declare const Checkbox_base: {
         required: boolean;
         disabled: true | null;
         formDataProvider: string;
-        props: any; /**
-         * ### Le composent sonic-checkbox étend les mixins FormCheckable, FormInput, FormElement et Subscriber
-         * **FormElement :**
-         * * La propriété value est remplie automatiquement a l'aide de l'attribut name renseigné, ceci en prenant la valeur de la propriété du même nom dans les données du dataprovider associé.
-         * * Par défault lorsque modifie l'input, la valeur est également mise à jour via le même dataprovider
-         * * On peut cependant décider de mettre à jour la donnée à une autre adresse en renseigne l'attribut *formDataProvider*.
-         * * Par conséquent on peut par exemple le lier à un composant *queue* (via sa propriété *dataFilterProvider*) de manière à appeller en auto une api avec des filtres.
-         * * **FormInput **
-         * Uniquement des propriétés classiques d'un input HTML. La prise en compte est ici partielle, par exemple les propriétés *placeholder*, *readonly*, *pattern*, *min* et *max* n'ont pas de sens pour un checkbox.
-         * **FormCheckable :**
-         * * La propriété checked mise à true si la valeur de la propriété du même nom dans les données du dataprovider associé contient un propriété checked.
-         * **Comportements :**
-         * * multiple (par défaut):
-         * - on peut cocher plusieurs checkbox ayant le même *name*.
-         * - la valeur enregistrée dans la propriété nommé du même nom dans formDataProvider est un tableau avec les *value* des cases cochées ayant le même *name*.
-         * * unique (Ajouter l'attribute unique au composant a l'intégration):
-         * - on ne peut cocher qu'une seule checkbox ayant le même *name*.
-         * * radio (Ajouter l'attribute radio au composant a l'intégration):
-         * Comme unique, mais on ne peut pas décocher la case sauf en en cochant une autre, comme un bouton radio.
-         */
+        _name: string;
+        name: string;
+        props: any;
         isConnected: boolean;
         getAncestorAttributeValue(attributeName: string): string;
         hasAncestorAttribute(attributeName: string): boolean;
@@ -68,7 +50,13 @@ declare const Checkbox_base: {
 } & {
     new (...args: any[]): {
         validateFormElement(): void;
+        forceAutoFill: boolean;
+        _type: "number" | "search" | "file" | "button" | "password" | "url" | "color" | "hidden" | "time" | "image" | "text" | "reset" | "submit" | "month" | "week" | "checkbox" | "radio" | "range" | "tel" | "email" | "date" | "datetime-local";
         type: "number" | "search" | "file" | "button" | "password" | "url" | "color" | "hidden" | "time" | "image" | "text" | "reset" | "submit" | "month" | "week" | "checkbox" | "radio" | "range" | "tel" | "email" | "date" | "datetime-local";
+        _description?: string | undefined;
+        description: string | undefined;
+        _label?: string | undefined;
+        label: string | undefined;
         tabindex?: number | undefined;
         autocomplete?: "url" | "name" | "language" | "on" | "tel" | "email" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo" | undefined;
         getFormPublisher(): any;
@@ -85,26 +73,7 @@ declare const Checkbox_base: {
         value: any;
         _name: string;
         name: string;
-        props: any; /**
-         * ### Le composent sonic-checkbox étend les mixins FormCheckable, FormInput, FormElement et Subscriber
-         * **FormElement :**
-         * * La propriété value est remplie automatiquement a l'aide de l'attribut name renseigné, ceci en prenant la valeur de la propriété du même nom dans les données du dataprovider associé.
-         * * Par défault lorsque modifie l'input, la valeur est également mise à jour via le même dataprovider
-         * * On peut cependant décider de mettre à jour la donnée à une autre adresse en renseigne l'attribut *formDataProvider*.
-         * * Par conséquent on peut par exemple le lier à un composant *queue* (via sa propriété *dataFilterProvider*) de manière à appeller en auto une api avec des filtres.
-         * * **FormInput **
-         * Uniquement des propriétés classiques d'un input HTML. La prise en compte est ici partielle, par exemple les propriétés *placeholder*, *readonly*, *pattern*, *min* et *max* n'ont pas de sens pour un checkbox.
-         * **FormCheckable :**
-         * * La propriété checked mise à true si la valeur de la propriété du même nom dans les données du dataprovider associé contient un propriété checked.
-         * **Comportements :**
-         * * multiple (par défaut):
-         * - on peut cocher plusieurs checkbox ayant le même *name*.
-         * - la valeur enregistrée dans la propriété nommé du même nom dans formDataProvider est un tableau avec les *value* des cases cochées ayant le même *name*.
-         * * unique (Ajouter l'attribute unique au composant a l'intégration):
-         * - on ne peut cocher qu'une seule checkbox ayant le même *name*.
-         * * radio (Ajouter l'attribute radio au composant a l'intégration):
-         * Comme unique, mais on ne peut pas décocher la case sauf en en cochant une autre, comme un bouton radio.
-         */
+        props: any;
         isConnected: boolean;
         getAncestorAttributeValue(attributeName: string): string;
         hasAncestorAttribute(attributeName: string): boolean;
@@ -132,8 +101,6 @@ export declare class Checkbox extends Checkbox_base {
     static styles: CSSResultGroup[];
     touched: boolean;
     iconName: string;
-    description?: string;
-    label?: string;
     slotDescriptionNodes: Array<Node>;
     hasDescription: boolean;
     updated(): void;

package/core/components/ui/form/checkbox/checkbox.js

@@ -51,40 +51,38 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
     }
     render() {
         return html `
-          <label class="checkbox-container ${this.disabled ? "disabled" : ""}">
-          <span class="icon-container">
-            <input 
-              type="${this.type}"
-              @change=${this.handleChange}
-              @blur=${this.handleBlur}
-              ?required=${this.required}
-              .disabled=${ifDefined(this.disabled)}
-              .checked=${ifDefined(this.checked)}
-              .name=${this.name}
-              .value=${this.value}
-              ?autofocus=${this.autofocus}
-              
-           />
-            <sonic-icon 
-            name="${this.iconName}" class="sc-input-icon"></sonic-icon>
-          </span>
-          <div class="checkbox-text">
-                ${this.label ? this.label : ""}
-                <slot></slot>
-                <slot name="description" class="${this.hasDescription ? "description" : "hidden"} ">
-                  ${this.description ? html `${this.description}` : ""}
-                </slot>
-              </div>
-          </label>
+      <label class="checkbox-container ${this.disabled ? "disabled" : ""}">
+        <span class="icon-container">
+          <input
+            type="${this.type}"
+            @change=${this.handleChange}
+            @blur=${this.handleBlur}
+            ?required=${this.required}
+            .disabled=${ifDefined(this.disabled)}
+            .checked=${ifDefined(this.checked)}
+            .name=${this.name}
+            .value=${this.value}
+            ?autofocus=${this.autofocus}
+          />
+          <sonic-icon name="${this.iconName}" class="sc-input-icon"></sonic-icon>
+        </span>
+        <div class="checkbox-text">
+          ${this.label ? this.label : ""}
+          <slot></slot>
+          <slot name="description" class="${this.hasDescription ? "description" : "hidden"} ">
+            ${this.description ? html `${this.description}` : ""}
+          </slot>
+        </div>
+      </label>
     `;
     }
 };
 Checkbox.styles = [
     fontSize,
     css `
-      :host{
+      :host {
         --sc-checkbox-border-width: var(--sc-form-border-width);
-        --sc-checkbox-border-color:  transparent;
+        --sc-checkbox-border-color: transparent;
       }
 
       * {
@@ -119,7 +117,7 @@ Checkbox.styles = [
         outline: none;
         margin: 0;
         background-color: var(--sc-base-200);
-        border:var(--sc-checkbox-border-width) solid var(--sc-checkbox-border-color);
+        border: var(--sc-checkbox-border-width) solid var(--sc-checkbox-border-color);
       }
 
       input:focus,
@@ -188,13 +186,14 @@ Checkbox.styles = [
       }
 
       /*ERROR*/
+      /*
       :host([touched]) .checkbox-container:has(input:not(:focus):invalid) {
         --sc-checkbox-border-color:var(--sc-danger);
       }
       :host([touched]) .checkbox-container:has(input:not(:focus):invalid) .checkbox-text{
         color:var(--sc-danger);
       }
-
+      */
     `,
 ];
 __decorate([
@@ -203,12 +202,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Checkbox.prototype, "iconName", void 0);
-__decorate([
-    property({ type: String })
-], Checkbox.prototype, "description", void 0);
-__decorate([
-    property({ type: String })
-], Checkbox.prototype, "label", void 0);
 __decorate([
     queryAssignedNodes({ slot: "description" })
 ], Checkbox.prototype, "slotDescriptionNodes", void 0);

package/core/components/ui/form/fieldset/legend.d.ts

@@ -2,8 +2,13 @@ import { LitElement } from "lit";
 import "@supersoniks/concorde/core/components/ui/form/fieldset/legend-description";
 export declare class Legend extends LitElement {
     static styles: import("lit").CSSResult[];
-    description?: string;
-    label?: string;
+    forceAutoFill: boolean;
+    _description?: string;
+    get description(): string | undefined;
+    set description(value: string | undefined);
+    _label?: string;
+    get label(): string | undefined;
+    set label(value: string | undefined);
     iconName?: string;
     iconLibrary?: string;
     iconPrefix?: string;