@supersoniks/concorde 1.1.42 → 1.1.43

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

@@ -13,7 +13,8 @@ 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';
+import { PublisherManager } from "@supersoniks/concorde/utils";
+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.
  * * L'objet et ses slot sont en display flex avec direction / alignement et justifications configurables
@@ -54,15 +55,15 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
          */
         this.minWidth = "0";
         /**
-        * Si un bouton n'a qu'une icone pour contenu, agrandi l'icone pour des raisons d'équilibre
-        */
+         * 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
          * - partial : l'url courante match à gauche avec le href du bouton
          * - disabled : aucune activation / désactivation
-        */
+         */
         this.autoActive = "partial";
         /**
          * Laisse apparaitre un loader en remplacement du contenu du bouton.
@@ -103,23 +104,32 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
     handleChange(e) {
         super.handleChange(e);
         if (this.pushState || this.goBack !== null) {
-            e.preventDefault();
-            e.stopPropagation();
+            e === null || e === void 0 ? void 0 : e.preventDefault();
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
             LocationHandler.changeFromComponent(this);
         }
+        if (this.hasAttribute("reset")) {
+            /**
+             * On on veut pouvoir rest un autre form que celui qui contient le bouton
+             */
+            const resetDataProvider = this.getAttribute("reset");
+            let formPublisher = resetDataProvider ? PublisherManager.get(resetDataProvider) : this.getFormPublisher();
+            if (formPublisher)
+                formPublisher.set({});
+        }
     }
     connectedCallback() {
         super.connectedCallback();
     }
     setCheckedValue(checked) {
         if (this.name) {
-            if (checked == this._checked)
-                return;
-            super.setCheckedValue(checked);
-            if (this._checked)
+            if (checked)
                 this.setAttribute("active", "true");
             else
                 this.removeAttribute("active");
+            if (checked == this._checked)
+                return;
+            super.setCheckedValue(checked);
         }
     }
     disconnectedCallback() {
@@ -138,11 +148,18 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
             flexDirection: this.direction,
             alignItems: this.alignItems,
             justifyContent: this.justify,
-            textAlign: this.align,
+            align: this.align,
             minWidth: this.minWidth,
         };
         const btn = html `
-      <button part="button" class=${this.hasPrefix || this.hasSuffix ? 'has-prefix-or-suffix' : ''} style=${styleMap(btnStyles)} @click=${this.handleChange}>
+      <button
+        part="button"
+        class=${this.hasPrefix || this.hasSuffix ? "has-prefix-or-suffix" : ""}
+        style=${styleMap(btnStyles)}
+        aria-label=${ifDefined(this.ariaLabel)}
+        aria-labelledby=${ifDefined(this.ariaLabelledby)}
+        @click=${this.handleChange}
+      >
         <slot @slotchange=${this.onSlotChange} part="prefix" name="prefix"></slot>
         <slot part="main" class="main-slot"></slot>
         <slot @slotchange=${this.onSlotChange} part="suffix" name="suffix"></slot>
@@ -150,7 +167,14 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
       </button>
     `;
         return this.href
-            ? html `<a href="${this.href}" target=${ifDefined(this.target)} @click=${this.pushState || this.goBack !== null ? this.handleNavigation : null}>${btn}</a>`
+            ? html `<a
+          href="${this.href}"
+          target=${ifDefined(this.target)}
+          aria-label=${ifDefined(this.ariaLabel)}
+          aria-labelledby=${ifDefined(this.ariaLabelledby)}
+          @click=${this.pushState || this.goBack !== null ? this.handleNavigation : null}
+          >${btn}</a
+        >`
             : html `${btn}`;
     }
     onSlotChange() {
@@ -197,11 +221,12 @@ Button.styles = [
         display: inline-flex;
         vertical-align: middle;
         box-sizing: border-box;
+        -webkit-print-color-adjust: exact;
       }
 
       :host a {
         display: contents;
-        color:unset;
+        color: unset;
       }
 
       :host button {
@@ -219,7 +244,7 @@ Button.styles = [
         text-align: center;
         line-height: 1.1;
         border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr) var(--sc-item-rounded-br)
-        var(--sc-item-rounded-bl);
+          var(--sc-item-rounded-bl);
 
         background: var(--sc-btn-bg);
         color: var(--sc-btn-color);
@@ -277,13 +302,14 @@ Button.styles = [
         --sc-btn-bg: var(--sc-base-600);
       }
 
-
       /*UNSTYLED*/
-      :host([variant="unstyled"]),
+      :host([variant="unstyled"]) {
+        display: inline-block;
+      }
+
       :host([variant="unstyled"]) button {
         all: unset;
         display: contents;
-        transition: 0.1s;
         cursor: pointer;
         --sc-btn-height: auto;
         --sc-btn-width: auto;
@@ -343,8 +369,8 @@ Button.styles = [
       /*OUTLINE*/
       :host([variant="link"]:not([size])) {
         vertical-align: baseline;
-        margin-left:.25em;
-        margin-right:.25em;
+        margin-left: 0.25em;
+        margin-right: 0.25em;
       }
 
       :host([variant="link"]:not([size])) {
@@ -386,7 +412,7 @@ Button.styles = [
         padding: 0;
         align-items: center;
         justify-content: 0;
-        text-align:center !important;
+        text-align: center !important;
       }
 
       :host([shape="block"]),
@@ -401,29 +427,28 @@ Button.styles = [
       }
 
       /*ACTIVE*/
-      :host([active]:not([variant="ghost"])) button {
+
+      :host([active]:not([variant="ghost"]):not([variant="unstyled"])) button {
         background: var(--sc-btn-active-bg);
         color: var(--sc-btn-active-color);
         border-color: var(--sc-btn-active-bg);
       }
 
-      :host([textAlign="left"]) button {
+      :host([align="left"]) button {
         text-align: left;
       }
 
-      :host([textAlign="right"]) button {
+      :host([align="right"]) button {
         text-align: right;
       }
 
       .main-slot {
         flex-grow: 1;
         display: block;
-        /*align-items: center;
-        justify-content: center;*/
       }
 
       :host([minWidth]) .main-slot {
-        flex-grow:0;
+        flex-grow: 0;
       }
 
       slot[name="suffix"],
@@ -435,17 +460,15 @@ Button.styles = [
         permet de tous les avoir alignés dans un menu
       */
       ::slotted(sonic-icon) {
-        min-width: 1.28em;
+        min-width: 1em;
         text-align: center;
       }
 
-
-      /*BOUTON Avec icone seulement*/ 
+      /*BOUTON Avec icone seulement*/
       :host([icon]) ::slotted(sonic-icon) {
-        font-size: 1.35em;        
+        font-size: 1.2em;
       }
 
-
       /*Tooltip ne joue pas sur le layout*/
       sonic-tooltip {
         display: contents;
@@ -453,11 +476,11 @@ Button.styles = [
 
       /*OUTLINE*/
       :host(:not([active])) ::slotted([swap="on"]) {
-        display: none;
+        display: none !important;
       }
 
       :host([active]) ::slotted([swap="off"]) {
-        display: none;
+        display: none !important;
       }
 
       /*Loading*/
@@ -540,10 +563,10 @@ __decorate([
     state()
 ], Button.prototype, "hasSuffix", void 0);
 __decorate([
-    queryAssignedElements({ flatten: true, slot: 'prefix' })
+    queryAssignedElements({ flatten: true, slot: "prefix" })
 ], Button.prototype, "prefixes", void 0);
 __decorate([
-    queryAssignedElements({ flatten: true, slot: 'suffix' })
+    queryAssignedElements({ flatten: true, slot: "suffix" })
 ], Button.prototype, "suffixes", void 0);
 __decorate([
     property({ type: String })
@@ -564,9 +587,3 @@ Button = __decorate([
     customElement(tagName)
 ], Button);
 export { Button };
-//Ajout pour Storybook
-try {
-    customElements.define(tagName, Button);
-}
-catch (e) { }
-export const SonicButton = Button;

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

@@ -1,5 +1,8 @@
 import { LitElement } from "lit";
-declare const Captcha_base: (new (...args: any[]) => import("../../../mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+declare type AssignListener = {
+    onAssign: (listener: (value: string) => void) => void;
+};
+declare const Captcha_base: (new (...args: any[]) => import("../../../mixins/Subscriber").SubscriberInterface<any>) & 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
@@ -9,7 +12,16 @@ declare const Captcha_base: (new (...args: any[]) => import("../../../mixins/Sub
 export declare class Captcha extends Captcha_base {
     key: string;
     action: string | null;
-    formPublisher: any;
+    formPublisher?: {
+        needsCaptchaValidation: boolean;
+        captchaToken: string | AssignListener;
+        captchaMethod?: {
+            get: () => string;
+        };
+        captchaAction?: {
+            get: () => string;
+        };
+    };
     connectedCallback(): void;
     requestToken(): void;
     protected render(): import("lit-html").TemplateResult<1>;

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

@@ -28,25 +28,30 @@ let Captcha = class Captcha extends Subscriber(LitElement) {
         document.head.appendChild(script);
         super.connectedCallback();
         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") {
-                this.requestToken();
-            }
-        });
+        if (this.formPublisher) {
+            this.formPublisher.needsCaptchaValidation = true;
+            this.formPublisher.captchaToken.onAssign((v) => {
+                if (v == "request_token") {
+                    this.requestToken();
+                }
+            });
+        }
     }
     requestToken() {
-        var _a, _b, _c, _d;
-        const win = window;
+        var _a, _b, _c, _d, _e;
+        if (!this.formPublisher)
+            return;
         // 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();
+        let method = ((_e = (_d = this.formPublisher.captchaMethod) === null || _d === void 0 ? void 0 : _d.get()) !== null && _e !== void 0 ? _e : "POST").toUpperCase();
         delete this.formPublisher.captchaAction;
         delete this.formPublisher.captchaMethod;
-        win.grecaptcha.ready(() => {
-            win.grecaptcha.execute(this.key, { action: method + "//" + action }).then((token) => {
-                this.formPublisher.captchaToken = token;
+        window.grecaptcha.ready(() => {
+            window.grecaptcha.execute(this.key, { action: method + "//" + action }).then((token) => {
+                if (this.formPublisher) {
+                    this.formPublisher.captchaToken = token;
+                }
             });
         });
     }

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

@@ -15,17 +15,10 @@ let CardFooter = class CardFooter extends LitElement {
     //   `
     // ];
     render() {
-        return html `
-      <slot></slot>
-    `;
+        return html ` <slot></slot> `;
     }
 };
 CardFooter = __decorate([
     customElement(tagName)
 ], CardFooter);
 export { CardFooter };
-//Ajout pour Storybook
-try {
-    customElements.define(tagName, CardFooter);
-}
-catch (e) { }

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

@@ -18,21 +18,15 @@ let CardHeaderDescription = class CardHeaderDescription extends LitElement {
 };
 CardHeaderDescription.styles = [
     css `
-
       div {
-        margin-top: .1em;
+        margin-top: 0.1em;
         font-family: var(--sc-font-family-base);
-        font-size: .7em;
+        font-size: 0.7em;
         font-weight: var(--sc-font-style-base);
       }
-   
-    `
+    `,
 ];
 CardHeaderDescription = __decorate([
     customElement(tagName)
 ], CardHeaderDescription);
 export { CardHeaderDescription };
-try {
-    customElements.define(tagName, CardHeaderDescription);
-}
-catch (e) { }

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

@@ -28,7 +28,7 @@ let CardHeader = class CardHeader extends LitElement {
 CardHeader.styles = [
     css `
       :host {
-        --sc-card-header-mb: 1.25rem;
+        --sc-card-header-mb: 1.35rem;
         --sc-card-header-font-size: 1.875rem;
         --sc-card-header-font-weight: var(--sc-headings-font-weight);
         --sc-card-header-font-style: var(--sc-headings-font-style);
@@ -67,8 +67,3 @@ CardHeader = __decorate([
     customElement(tagName)
 ], CardHeader);
 export { CardHeader };
-//Ajout pour Storybook
-try {
-    customElements.define(tagName, CardHeader);
-}
-catch (e) { }

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

@@ -26,8 +26,3 @@ CardMain = __decorate([
     customElement(tagName)
 ], CardMain);
 export { CardMain };
-//Ajout pour Storybook
-try {
-    customElements.define(tagName, CardMain);
-}
-catch (e) { }

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

@@ -7,6 +7,6 @@ export declare class Card extends LitElement {
     /**
      * Le type change surtout la couleur composant
      */
-    type: "default" | "primary" | "warning" | "danger" | "success" | "info" | "neutral" | "invert";
+    type: "default" | "light" | "primary" | "warning" | "danger" | "success" | "info" | "neutral" | "invert";
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -34,6 +34,17 @@ Card.styles = [
         --sc-card-bg: var(--sc-base);
         --sc-card-rounded: var(--sc-rounded-lg);
         --sc-card-shadow: var(--sc-shadow-lg);
+        -webkit-print-color-adjust: exact;
+      }
+
+      @media print {
+        :host {
+          break-inside: avoid;
+        }
+      }
+
+      * {
+        box-sizing: border-box;
       }
 
       .card {
@@ -46,34 +57,44 @@ Card.styles = [
 
       /*TYPES*/
       :host([type="primary"]) {
+        --sc-card-bg: var(--sc-primary);
         --sc-card-color: var(--sc-primary-content);
-        --sc-badge-bg: var(--sc-primary);
+        --sc-border-color: var(--sc-primary-content);
+        --sc-divider-opacity: 0.2;
       }
       :host([type="warning"]) {
-        --sc-card-color: var(--sc-warning-content);
         --sc-card-bg: var(--sc-warning);
+        --sc-card-color: var(--sc-warning-content);
+        --sc-border-color: var(--sc-primary-content);
+        --sc-divider-opacity: 0.2;
       }
       :host([type="danger"]) {
-        --sc-card-color: var(--sc-danger-content);
         --sc-card-bg: var(--sc-danger);
+        --sc-card-color: var(--sc-danger-content);
+        --sc-border-color: var(--sc-primary-content);
+        --sc-divider-opacity: 0.2;
       }
       :host([type="info"]) {
-        --sc-card-color: var(--sc-info-content);
         --sc-card-bg: var(--sc-info);
+        --sc-card-color: var(--sc-info-content);
+        --sc-border-color: var(--sc-primary-content);
+        --sc-divider-opacity: 0.2;
       }
       :host([type="success"]) {
-        --sc-card-color: var(--sc-success-content);
         --sc-card-bg: var(--sc-success);
+        --sc-card-color: var(--sc-success-content);
+        --sc-border-color: var(--sc-primary-content);
+        --sc-divider-opacity: 0.2;
       }
 
       :host([type="light"]) {
-        --sc-card-color: var(--sc-base-content);
         --sc-card-bg: var(--sc-base-100);
+        --sc-card-color: var(--sc-base-content);
       }
 
       :host([type="neutral"]) {
-        --sc-card-color: var(--sc-base);
         --sc-card-bg: var(--sc-base-content);
+        --sc-card-color: var(--sc-base);
       }
 
       :host([type="invert"]) {
@@ -89,8 +110,3 @@ Card = __decorate([
     customElement(tagName)
 ], Card);
 export { Card };
-//Ajout pour Storybook
-try {
-    customElements.define(tagName, Card);
-}
-catch (e) { }

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

@@ -6,6 +6,8 @@ export declare class Divider extends LitElement {
     label: string;
     size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
     align: "left" | "right" | "center";
+    vertical: boolean;
+    noMargin: boolean;
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/divider/divider.js

@@ -13,6 +13,8 @@ let Divider = class Divider extends LitElement {
         super(...arguments);
         this.label = "";
         this.align = "center";
+        this.vertical = false;
+        this.noMargin = false;
     }
     firstUpdated() {
         var _a, _b;
@@ -31,10 +33,10 @@ Divider.styles = [
       :host {
         --sc-divider-my: 0.5rem;
         --sc-divider-mx: 0;
-        --sc-divider-border-width: min(2px, 0.15rem);
-        --sc-divider-border-color: var(--sc-base-200);
+        --sc-divider-border-width: max(1px, var(--sc-border-width));
+        --sc-divider-border-color: var(--sc-border-color);
         --sc-divider-border-style: solid;
-        --sc-divider-color: var(--sc-base-500);
+        --sc-divider-color: currentColor;
         --sc-divider-ff: var(--sc-font-family-base);
         --sc-divider-fs: 1rem;
         --sc-divider-fw: var(--sc-font-weight-base);
@@ -87,18 +89,13 @@ Divider.styles = [
         width: 100%;
       }
 
-      div:before {
-        content: "";
-        flex-grow: 1;
-        border-top: var(--sc-divider-border-width) var(--sc-divider-border-style) var(--sc-divider-border-color);
-        width: 100%;
-      }
-
-      div:after {
+      div::before,
+      div::after {
         content: "";
         flex-grow: 1;
         border-top: var(--sc-divider-border-width) var(--sc-divider-border-style) var(--sc-divider-border-color);
         width: 100%;
+        opacity: var(--sc-divider-opacity, 1);
       }
 
       /*ALIGNEMENT*/
@@ -110,9 +107,37 @@ Divider.styles = [
         display: none;
       }
 
+      :host([vertical]) {
+        margin: var(--sc-divider-mx) var(--sc-divider-my);
+      }
+
+      :host([vertical]) div {
+        flex-direction: column;
+        height: 100%;
+        min-height: var(--sc-form-height);
+      }
+
+      :host([vertical]) .has-text {
+        gap: 0.25rem;
+      }
+
+      :host([vertical]) div::before,
+      :host([vertical]) div::after {
+        border-top: none;
+        border-left: var(--sc-divider-border-width) var(--sc-divider-border-style) var(--sc-divider-border-color);
+        width: auto;
+        height: 100%;
+        opacity: var(--sc-divider-opacity, 1);
+      }
+
+      :host([noMargin]) {
+        margin: 0;
+      }
+
       /*TEXT*/
       .text {
         flex-shrink: 0;
+        line-height: 1.1;
         max-width: 80%;
       }
 
@@ -140,11 +165,13 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], Divider.prototype, "align", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Divider.prototype, "vertical", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Divider.prototype, "noMargin", void 0);
 Divider = __decorate([
-    customElement("sonic-divider")
+    customElement(tagName)
 ], Divider);
 export { Divider };
-try {
-    customElements.define(tagName, Divider);
-}
-catch (e) { }