@supersoniks/concorde 1.1.28 → 1.1.31

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

@@ -57,13 +57,17 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
      * Retourne un tableau des différentes parties de la date en fonction des options données, de la date de début et de fin.
      */
     getDatesParts(start_date, end_date, options) {
-        const format = new Intl.DateTimeFormat(this.language || this.pageLanguage, options);
         let start = this.startDateObject;
         start.setTime(start_date * 1000);
         let parts = null;
         if (end_date > 0) {
             let end = this.endDateObject;
             end.setTime(end_date * 1000);
+            if (start.toJSON().substring(0, 10) != end.toJSON().substring(0, 10)) {
+                delete options.hour;
+                delete options.minute;
+            }
+            let format = new Intl.DateTimeFormat(this.language || this.pageLanguage, options);
             parts = format.formatRangeToParts(start, end);
             if (this.designMode) {
                 for (let part of parts) {
@@ -85,8 +89,10 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
                     parts.unshift({ type: "from", value: this.duAu[0] + " ", source: "shared" });
             }
         }
-        else
+        else {
+            let format = new Intl.DateTimeFormat(this.language || this.pageLanguage, options);
             parts = format.formatToParts(start);
+        }
         parts[0].value = Format.ucFirst(parts[0].value);
         parts = parts.filter((p) => p.hidden !== true);
         return parts;

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement, css } from "lit";
+import { html, LitElement, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import Fetcher from "@supersoniks/concorde/core/mixins/Fetcher";
@@ -18,7 +18,7 @@ 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.
  *
-* Extends mixins : Fetcher, [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page)
+ * 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.
@@ -62,14 +62,13 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
             : html `<sonic-loader mode="inline"></sonic-loader>`;
     }
     renderNoResultState() {
-        return html `
-      <div class="sonic-no-result-container">
-        <sonic-icon name="emoji-puzzled" size="lg"></sonic-icon
-        ><span class="sonic-no-result-text">${this.props}</span>
-      </div>`;
+        return html ` <div class="sonic-no-result-container">
+      <sonic-icon name="emoji-puzzled" size="lg"></sonic-icon><span class="sonic-no-result-text">${this.props}</span>
+    </div>`;
     }
     formatProps() {
         let props = this.props;
+        let response = props._sonic_http_response_;
         let extractValues = this.hasAttribute("extractValues");
         //si props n'est pas un tableau on l'adapte
         if (!Array.isArray(props)) {
@@ -77,9 +76,14 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
                 props = Object.entries(props).map(([k, v]) => ({ key: k, value: v }));
             }
             else {
-                props = [props];
+                if (!response || response.ok)
+                    props = [props];
+                else {
+                    props = [];
+                }
             }
         }
+        props._sonic_http_response_ = response;
         return props;
     }
     render() {
@@ -121,12 +125,14 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
       ${repeat(props, (item, index) => item[this.idKey] || index, (item, index) => {
             let templatePartName = item[this.templateKey];
             let hasCustomTemplate = templatePartName && this.templateParts[templatePartName];
-            counter++;
-            if (hasCustomTemplate)
-                counter = -1;
             let key = extractValues ? item.key : index;
+            if (key == "_sonic_http_response_")
+                return nothing;
             let pub = this.publisher[key];
             pub._key_ = key + "";
+            counter++;
+            if (hasCustomTemplate)
+                counter = -1;
             return (item &&
                 html `
               <sonic-subscriber

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

@@ -55,16 +55,17 @@ let Submit = class Submit extends Subscriber(LitElement) {
         this.api = new API(this.getApiConfiguration());
     }
     submit() {
-        var _a, _b, _c, _d, _e;
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             const formPublisher = PublisherManager.getInstance().get(this.getAncestorAttributeValue("formDataProvider"));
             //
-            // Validation du formulaire 
+            // Validation du formulaire
             formPublisher.isFormValid = true;
             formPublisher.invalidate();
             if (!formPublisher.isFormValid.get())
                 return;
-            this.publisher.disabled = true;
+            if (this.publisher)
+                this.publisher.disabled = true;
             formPublisher.isFormValid;
             //
             //Recup données
@@ -76,34 +77,49 @@ let Submit = class Submit extends Subscriber(LitElement) {
             let dataProvider = this.getAncestorAttributeValue("dataProvider");
             let endPoint = this.endPoint || dataProvider;
             Loader.show();
-            //
-            //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));
-                    break;
-                default:
-                    result = yield ((_e = this.api) === null || _e === void 0 ? void 0 : _e.post(endPoint, postData, headerData));
-                    break;
-            }
-            Loader.hide();
-            if (!result)
-                result = { messages: [{ content: "Network Error", status: "error" }] };
-            let clearedDataProvider = this.getAncestorAttributeValue("clearedDataOnSuccess");
-            if (clearedDataProvider) {
-                clearedDataProvider.split(" ").forEach(dataProvider => PublisherManager.get(dataProvider).set({}));
+            let sendData = () => __awaiter(this, void 0, void 0, function* () {
+                var _b, _c, _d, _e;
+                //
+                //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;
+                }
+                Loader.hide();
+                //Je garde ça, mais normalement il y a toujours quelquechose
+                if (!result)
+                    result = { messages: [{ content: "Network Error", status: "error" }] };
+                let clearedDataProvider = this.getAncestorAttributeValue("clearedDataOnSuccess");
+                if (clearedDataProvider) {
+                    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);
+                if (this.publisher)
+                    this.publisher.disabled = false;
+            });
+            if (formPublisher.needsCaptchaValidation.get()) {
+                formPublisher.captchaToken = "request_token";
+                formPublisher.captchaToken.onAssign((token) => {
+                    if (token != "request_token")
+                        sendData();
+                });
             }
-            if (this.submitResultKey) {
-                result = Objects.traverse(result, this.submitResultKey.split("."), true);
+            else {
+                sendData();
             }
-            PublisherManager.getInstance().get(this.getAncestorAttributeValue("submitResultDataProvider")).set(result);
-            this.publisher.disabled = false;
         });
     }
     render() {
@@ -111,7 +127,7 @@ let Submit = class Submit extends Subscriber(LitElement) {
     }
 };
 Submit.styles = css `
-    [data-disabled]{
+    [data-disabled] {
       opacity: 0.3;
       pointer-events: none;
       user-select: none;

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

@@ -1,8 +1,9 @@
-import { LitElement } from "lit";
+import { LitElement, PropertyValues } from "lit";
 declare const SonicSubscriber_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
 export declare class SonicSubscriber extends SonicSubscriber_base {
     noAutofill: boolean;
     connectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

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

@@ -20,6 +20,14 @@ let SonicSubscriber = class SonicSubscriber extends Subscriber(LitElement) {
         this.noShadowDom = "";
         super.connectedCallback();
     }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // Display contents, notamment pour les layout dans tableaux
+        if (this.children.length == 0)
+            this.style.display = "none";
+        else
+            this.style.display = "contents";
+    }
     render() {
         return html `<slot></slot> `;
     }

package/core/components/ui/_css/size.d.ts

@@ -0,0 +1 @@
+export declare const fontSize: import("lit").CSSResult;

package/core/components/ui/_css/size.js

@@ -0,0 +1,26 @@
+import { css } from "lit";
+export const fontSize = css `
+  /*SIZES*/
+  :host {
+    --sc-fs: 1rem;
+    font-size: var(--sc-fs);
+  }
+  :host([size="2xs"]) {
+    --sc-fs: 0.68rem;
+  }
+  :host([size="xs"]) {
+    --sc-fs: 0.75rem;
+  }
+  :host([size="sm"]) {
+    --sc-fs: 0.875rem;
+  }
+  :host([size="lg"]) {
+    --sc-fs: 1.125rem;
+  }
+  :host([size="xl"]) {
+    --sc-fs: 1.25rem;
+  }
+  :host([size="2xl"]) {
+    --sc-fs: 1.5rem;
+  }
+`;

package/core/components/ui/_css/type.d.ts

@@ -0,0 +1,2 @@
+export declare const typeColor: import("lit").CSSResult;
+export declare const typesBg: import("lit").CSSResult;

package/core/components/ui/_css/{types.js → type.js}

@@ -1,5 +1,5 @@
 import { css } from "lit";
-export const typesColor = css `
+export const typeColor = css `
   :host{
     --sc-color:inherit;
     color:var(--sc-color);

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

@@ -13,7 +13,7 @@ export declare class Alert extends LitElement {
      * Peut être renseigné dans le slot pour créer des messages plus complexes
      */
     text: string;
-    size: "xs" | "sm" | "md" | "lg";
+    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
     background: boolean;
     status: "default" | "error" | "warning" | "primary" | "info";
     render(): import("lit-html").TemplateResult<1>;

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

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
 const icon = {
     warning: "warning-circled-outline",
     success: "check-circled-outline",
@@ -29,7 +30,6 @@ let Alert = class Alert extends LitElement {
          * Peut être renseigné dans le slot pour créer des messages plus complexes
          */
         this.text = "";
-        this.size = "md";
         this.background = false;
         this.status = "default";
     }
@@ -39,24 +39,22 @@ let Alert = class Alert extends LitElement {
                     ${this.status && html `<sonic-icon name=${icon[this.status]}></sonic-icon>`}
                   </div>
                   <div >
-                    ${this.label ? html `<span class="label">${this.label} :</span>` : nothing}
-                    ${this.text} <slot></slot>
+                    ${this.label ? html `<span class="label">${this.label}</span>` : nothing}
+                    <slot>${this.text}</slot>
                   </div>
                 </div>`;
     }
 };
 Alert.styles = [
+    fontSize,
     css `
       :host {
         --sc-alert-color: inherit;
         --sc-alert-rounded: var(--sc-rounded);
         --sc-alert-fw: var(--sc-font-weight-base);
         --sc-alert-fst: var(--sc-font-style-base);
-        --sc-alert-fs: 1rem;
         --sc-alert-label-fw: bold;
-
         display: block;
-        font-size: var(--sc-alert-fs);
         font-weight: var(--sc-alert-fw);
         font-style: var(--sc-alert-fst);
       }
@@ -69,7 +67,7 @@ Alert.styles = [
         line-height: 1.2;
         border-radius: var(--sc-alert-rounded);
       }
-
+z
       .label {
         font-weight: var(--sc-alert-label-fw);
       }
@@ -110,15 +108,8 @@ Alert.styles = [
         position: relative;
       }
 
-      /*SIZE*/
-      :host([size="xs"]) {
-        --sc-alert-fs: 0.75rem;
-      }
-      :host([size="sm"]) {
-        --sc-alert-fs: 0.85rem;
-      }
-      :host([size="lg"]) {
-        --sc-alert-fs: 1.2rem;
+      slot {
+        display: block;
       }
 
       /*Rounded*/

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

@@ -19,6 +19,6 @@ export declare class Badge extends LitElement {
     /**
      * Taille du composant, implique notamment des modifications de typo et de marge interne
      */
-    size: "xs" | "sm" | "md" | "lg" | "xl";
+    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -25,10 +25,6 @@ let Badge = class Badge extends LitElement {
          * * outline : composant légé avec une bordure
          */
         this.variant = "default";
-        /**
-         * Taille du composant, implique notamment des modifications de typo et de marge interne
-         */
-        this.size = "md";
     }
     render() {
         return html `
@@ -42,7 +38,7 @@ Badge.styles = [
     css `
       :host {
         --sc-badge-gap: 0.3em;
-        --sc-badge-py: 0.15em;
+        --sc-badge-py: 0.16em;
         --sc-badge-px: 0.66em;
         --sc-badge-fs: 1rem;
 
@@ -53,7 +49,7 @@ Badge.styles = [
         --sc-badge-border-color: transparent;
         --sc-badge-border: var(--sc-badge-border-with) solid var(--sc-badge-border-color);
 
-        --sc-badge-rounded: 9999px;
+        --sc-badge-rounded: calc(var(--sc-rounded) * 1000);
         --sc-badge-line-height: 1.15;
         --sc-badge-fw: var(--sc-font-weight-base);
 
@@ -108,6 +104,11 @@ Badge.styles = [
         gap: var(--sc-badge-gap);
       }
 
+
+      :host([size="2xs"]) {
+        --sc-badge-fs: 0.58rem;
+        --sc-badge-gap: 0.3em;
+      }
       :host([size="xs"]) {
         --sc-badge-fs: 0.68rem;
         --sc-badge-gap: 0.35em;

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

@@ -17,10 +17,11 @@ declare const Button_base: {
         initPublisher(): void;
         getFormPublisher(): any;
         updateDataValue(): void;
-        error: true | null;
+        handleBlur(e?: any): void;
+        error: boolean;
         autofocus: boolean;
+        required: boolean;
         disabled: true | null;
-        required: true | null;
         formDataProvider: string;
         props: any;
         isConnected: boolean;
@@ -62,11 +63,11 @@ export declare class Button extends Button_base {
      * * gost : composant super léger visuellement
      * * outline : composant légé avec une bordure
      */
-    variant: "default" | "ghost" | "outline" | "unstyled";
+    variant: "default" | "ghost" | "outline" | "unstyled" | "link";
     /**
      * Taille du composant, implique notamment des modifications de typo et de marge interne
      */
-    size: "xs" | "sm" | "md" | "lg" | "xl";
+    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
     /**
      * Forme du bouton, permet de le forcer en carré ou cercle
      */
@@ -86,11 +87,15 @@ export declare class Button extends Button_base {
     /**
      * Propriété text-align du bouton
      */
-    align: "" | "right" | "left" | "center";
+    align?: "right" | "left" | "center";
     /**
      * Propriété min-width du bouton
      */
     minWidth: string;
+    /**
+    * Si un bouton n'a qu'une icone pour contenu, agrandi l'icone pour des raisons d'équilibre
+    */
+    icon: boolean;
     /**
      * mode d'activation du bouton :
      * - strict : l'url courante match exactement avec le href du bouton
@@ -121,7 +126,7 @@ export declare class Button extends Button_base {
     /**
      * Si présent on passe en mode pushstate
      */
-    pushState: null;
+    pushState: boolean;
     active: boolean;
     handleNavigation(e: Event): void;
     handleChange(e?: any): void;

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

@@ -12,6 +12,7 @@ import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import FormCheckable from "@supersoniks/concorde/core/mixins/FormCheckable";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
 const tagName = 'sonic-button';
 /**
  * Un bouton simple avec deux slots, un nommé préfix et un nomé suffix de manière à pouvoir mettre (par exemple) une icone avant ou après le contenu.
@@ -32,10 +33,6 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
          * * outline : composant légé avec une bordure
          */
         this.variant = "default";
-        /**
-         * Taille du composant, implique notamment des modifications de typo et de marge interne
-         */
-        this.size = "md";
         /**
          * Forme du bouton, permet de le forcer en carré ou cercle
          */
@@ -52,14 +49,14 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
          * Propriété justify-content de *flex* appliquée à l'élément contenant les *slots*
          */
         this.justify = "center";
-        /**
-         * Propriété text-align du bouton
-         */
-        this.align = "center";
         /**
          * Propriété min-width du bouton
          */
         this.minWidth = "0";
+        /**
+        * Si un bouton n'a qu'une icone pour contenu, agrandi l'icone pour des raisons d'équilibre
+        */
+        this.icon = false;
         /**
          * mode d'activation du bouton :
          * - strict : l'url courante match exactement avec le href du bouton
@@ -82,7 +79,7 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
         /**
          * Si présent on passe en mode pushstate
          */
-        this.pushState = null;
+        this.pushState = false;
         this.active = false;
         this._location = "";
     }
@@ -163,6 +160,7 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
     }
 };
 Button.styles = [
+    fontSize,
     css `
       * {
         box-sizing: border-box;
@@ -171,24 +169,24 @@ Button.styles = [
         --sc-btn-gap: 0.35em;
         --sc-btn-py: 0.25em;
         --sc-btn-px: 1.1em;
-        --sc-btn-fs: 1rem;
+        --sc-btn-fs: var(--sc-fs, 1rem);
         --sc-btn-fw: var(--sc-btn-font-weight);
         --sc-btn-ff: var(--sc-btn-font-family);
 
-        --sc-btn-height: var(--sc-form-height, 2.5em);
-        --sc-btn-color: var(--sc-base-content, #1f2937);
-        --sc-btn-bg: var(--sc-base-100, #e5e7eb);
+        --sc-btn-height: var(--sc-form-height);
+        --sc-btn-color: var(--sc-base-content);
+        --sc-btn-bg: var(--sc-base-100);
 
         --sc-btn-border-style: solid;
-        --sc-btn-border-with: var(--sc-form-border-width, 0.1rem);
+        --sc-btn-border-with: var(--sc-form-border-width);
         --sc-btn-border-color: transparent;
 
         --sc-btn-outline-bg-hover: var(--sc-base-100);
         --sc-btn-ghost-bg-hover: var(--sc-base-100);
 
         --sc-btn-active-color: var(--sc-base);
-        --sc-btn-hover-filter: brightness(0.97);
-        --sc-btn-active-filter: brightness(0.96);
+        --sc-btn-hover-filter: brightness(0.98);
+        --sc-btn-active-filter: brightness(0.97);
         --sc-btn-active-bg: var(--sc-base-content);
 
         --sc-item-rounded-tr: var(--sc-btn-rounded);
@@ -279,28 +277,13 @@ Button.styles = [
         --sc-btn-bg: var(--sc-base-600);
       }
 
-      /*SIZE*/
-      :host([size="2xs"]) {
-        --sc-btn-fs: 0.6rem;
-      }
-      :host([size="xs"]) {
-        --sc-btn-fs: 0.75rem;
-      }
-      :host([size="sm"]) {
-        --sc-btn-fs: 0.85rem;
-      }
-      :host([size="lg"]) {
-        --sc-btn-fs: 1.2rem;
-      }
-      :host([size="xl"]) {
-        --sc-btn-fs: 1.5rem;
-      }
 
       /*UNSTYLED*/
+      :host([variant="unstyled"]),
       :host([variant="unstyled"]) button {
         all: unset;
+        display: contents;
         transition: 0.1s;
-        display: inline-flex;
         cursor: pointer;
         --sc-btn-height: auto;
         --sc-btn-width: auto;
@@ -358,12 +341,16 @@ Button.styles = [
       }
 
       /*OUTLINE*/
-      :host([variant="link"]) {
+      :host([variant="link"]:not([size])) {
         vertical-align: baseline;
         margin-left:.25em;
         margin-right:.25em;
       }
 
+      :host([variant="link"]:not([size])) {
+        font-size: inherit;
+      }
+
       :host([variant="link"]) button {
         text-decoration: underline;
         padding: 0;
@@ -448,10 +435,17 @@ Button.styles = [
         permet de tous les avoir alignés dans un menu
       */
       ::slotted(sonic-icon) {
-        min-width: 1.3em;
+        min-width: 1.28em;
         text-align: center;
       }
 
+
+      /*BOUTON Avec icone seulement*/ 
+      :host([icon]) ::slotted(sonic-icon) {
+        font-size: 1.35em;        
+      }
+
+
       /*Tooltip ne joue pas sur le layout*/
       sonic-tooltip {
         display: contents;
@@ -530,6 +524,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Button.prototype, "minWidth", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Button.prototype, "icon", void 0);
 __decorate([
     property({ type: String })
 ], Button.prototype, "autoActive", void 0);

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

@@ -0,0 +1,16 @@
+import { LitElement } from "lit";
+declare const Captcha_base: (new (...args: any[]) => import("../../../mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+/**
+ * Un bouton simple avec deux slots, un nommé préfix et un nomé suffix de manière à pouvoir mettre (par exemple) une icone avant ou après le contenu.
+ * * L'objet et ses slot sont en display flex avec direction / alignement et justifications configurables
+ * * Le bouton est comparable au badge car il possèdent tous les deux les propriétés *type* (primary...), *variant*(outline, ghost), size(xs...)...
+ * * Le bouton possède cependant et notamment une propriété href contrairement à un badge
+ */
+export declare class Captcha extends Captcha_base {
+    key: string;
+    formPublisher: any;
+    connectedCallback(): void;
+    requestToken(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};