@supersoniks/concorde 1.1.28 → 1.1.31

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

@@ -1,10 +1,18 @@
 import { LitElement } from "lit";
+export declare const tailwind: import("lit").CSSResult;
 export declare class Theme extends LitElement {
     static styles: import("lit").CSSResult[];
+    theme: string;
+    background: boolean;
+    color: boolean;
+    font: boolean;
+    contrastDarkMode: boolean;
     connectedCallback(): void;
+    updated(): void;
     postCSSVars(): void;
     receiveMessage(event: any): void;
-    theme: string;
     getCssVariables(): Record<string, string>;
+    contrast(color: string, percent: number): string;
+    contrastBg(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/theme/theme.js

@@ -5,22 +5,33 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var Theme_1;
-import { html, LitElement, css } from "lit";
+import { html, LitElement, css, unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { coreVariables } from "@supersoniks/concorde/core/components/ui/theme/theme-collection/core-variables";
 import { light } from "@supersoniks/concorde/core/components/ui/theme/theme-collection/light";
 import { dark } from "@supersoniks/concorde/core/components/ui/theme/theme-collection/dark";
+import tailwindImport from "./css/tailwind.css?inline";
+export const tailwind = css `
+  ${unsafeCSS(tailwindImport)}
+`;
 const tagName = "sonic-theme";
 let Theme = Theme_1 = class Theme extends LitElement {
     constructor() {
         super(...arguments);
         this.theme = "light";
+        this.background = false;
+        this.color = false;
+        this.font = false;
+        this.contrastDarkMode = false;
     }
     connectedCallback() {
         super.connectedCallback();
         window.addEventListener("message", (e) => this.receiveMessage(e), false);
         this.postCSSVars();
     }
+    updated() {
+        this.contrastBg();
+    }
     postCSSVars() {
         const stylesheets = document.styleSheets;
         const ssLength = stylesheets.length;
@@ -68,6 +79,24 @@ let Theme = Theme_1 = class Theme extends LitElement {
         names.forEach((name) => (result[name] = style.getPropertyValue(name)));
         return result;
     }
+    // function to darken a color based on an hexa value
+    contrast(color, percent) {
+        let num = parseInt(color.replace("#", ""), 16), amt = Math.round(2.55 * percent), R = (num >> 16) + amt, B = ((num >> 8) & 0x00ff) + amt, G = (num & 0x0000ff) + amt;
+        return ("#" +
+            (0x1000000 +
+                (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
+                (B < 255 ? (B < 1 ? 0 : B) : 255) * 0x100 +
+                (G < 255 ? (G < 1 ? 0 : G) : 255))
+                .toString(16)
+                .slice(1));
+    }
+    // get de computed value of --sc-base and darken it
+    contrastBg() {
+        if (this.theme === "dark" && this.contrastDarkMode && this.background) {
+            let baseColor = window.getComputedStyle(this).getPropertyValue("--sc-base");
+            this.style.setProperty("--sc-body-bg", this.contrast(baseColor, -2.5));
+        }
+    }
     render() {
         return html `<slot></slot>`;
     }
@@ -79,7 +108,11 @@ Theme.styles = [
     css `
       :host([background]) {
         display: block !important;
-        background: var(--sc-base) !important;
+        background: var(--sc-body-bg) !important;
+        min-height: 100vh;
+      }
+      :host([contrastDarkMode]) {
+        transition: background-color 2.5s ease;
       }
 
       :host([color]) {
@@ -96,6 +129,18 @@ Theme.styles = [
 __decorate([
     property({ type: String, reflect: true })
 ], Theme.prototype, "theme", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Theme.prototype, "background", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Theme.prototype, "color", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Theme.prototype, "font", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Theme.prototype, "contrastDarkMode", void 0);
 Theme = Theme_1 = __decorate([
     customElement(tagName)
 ], Theme);

package/core/components/ui/toast/toast-item.js

@@ -46,7 +46,7 @@ let SonicToastItem = class SonicToastItem extends LitElement {
     >
     
     <button aria-label="Close" class="sonic-toast-close" @click=${() => this.hide()}>
-    <sonic-icon  name="cancel" size="lg"></sonic-icon>
+      <sonic-icon  name="cancel" size="lg"></sonic-icon>
     </button>
     <div class="sonic-toast-content custom-scroll"  style="max-height: ${this.maxHeight} ;">
       
@@ -55,8 +55,8 @@ let SonicToastItem = class SonicToastItem extends LitElement {
         
           
           <div class="sonic-toast-text">
-          ${this.title ? html `<div class="sonic-toast-title">${this.title}</div>` : ""}
-          ${this.text ? unsafeHTML(this.text) : ""}
+            ${this.title ? html `<div class="sonic-toast-title">${this.title}</div>` : ""}
+            ${this.text ? unsafeHTML(this.text) : ""}
           <slot></slot>
           </div>
           
@@ -124,7 +124,7 @@ SonicToastItem.styles = [
       }
 
       .sonic-toast-content {
-        padding: 1em 2rem 1em 1em;
+        padding: 1em 2.5rem 1em 1em;
         display: flex;
         gap: 0.5rem;
         overflow: auto;
@@ -136,15 +136,32 @@ SonicToastItem.styles = [
         margin-top: auto;
         margin-bottom: auto;
         max-width:70ch;
+        line-height: 1.2;
       }
 
-      ::slotted(a),
+      ::slotted(a:not(.btn)),
       .sonic-toast-text a {
-        color: inherit;
-        text-decoration: underline;
+        color: inherit !important;
+        text-decoration: underline !important;
         text-underline-offset: 0.15rem;
       }
 
+      ::slotted(:is(p, ul, ol, hr, h1, h2, h3, h4, h5, h6)),
+      .sonic-toast-text :is(p, ul, ol, hr, h1, h2, h3, h4, h5, h6) {
+        margin: 0 0 0.3em !important;
+      }
+
+      ::slotted(li),
+      .sonic-toast-text li {
+        margin-bottom: .15em !important;
+      }
+
+      ::slotted( :is(p, ul, ol, hr, h1, h2, h3, h4, h5, h6):last-child),
+      .sonic-toast-text > :is(p, ul, ol, hr, h1, h2, h3, h4, h5, h6):last-child {
+        margin-bottom: 0 !important;
+      } 
+
+
       /*BUTTON CLOSE*/
       .sonic-toast-close {
         all: unset;
@@ -183,6 +200,7 @@ SonicToastItem.styles = [
         font-weight: bold;
         font-size: 1.15rem;
         margin: 0.15em 0 0.25em;
+        line-height: 1.2;
       }
 
       /*STATUS*/

package/core/components/ui/toast/toast.js

@@ -10,6 +10,7 @@ import { repeat } from "lit/directives/repeat.js";
 import { animate } from "@lit-labs/motion";
 import Objects from "@supersoniks/concorde/core/utils/Objects";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { styleMap } from "lit/directives/style-map.js";
 import "@supersoniks/concorde/core/components/ui/toast/toast-item";
@@ -39,10 +40,12 @@ let SonicToast = class SonicToast extends LitElement {
         return html `<div aria-live="polite" style=${styleMap(styles)}>
       ${repeat(this.toasts, (item) => item.id, (item) => html `
           <sonic-toast-item maxHeight=${isIframe ? 'none' : '10rem'}
-            status=${item.status}
+            status=${ifDefined(item.status)}
+            title=${ifDefined(item.title)}
             ?ghost=${item.ghost}
             ?dismissForever=${item.dismissForever}
-            ?preserve=${item.preserve} id=${item.id}
+            ?preserve=${item.preserve} 
+            id=${ifDefined(item.id)}
             @hide=${() => this.removeItem(item)}
             ${animate({
             keyframeOptions: {
@@ -61,6 +64,7 @@ let SonicToast = class SonicToast extends LitElement {
             stabilizeOut: true,
         })}
           >
+            <!-- Le texte est passé dans le slot et non pas en propriété pour contrer des problèmatiques de shadow-dom et d'appel exterieur (exemple: fancybox) -->
             ${item.text ? unsafeHTML(item.text) : ""}
           </sonic-toast-item>
         `)}

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

@@ -27,3 +27,4 @@ import "./pop/pop";
 import "./divider/divider";
 import "./card/card";
 import "./table/table";
+import "./captcha/captcha";

package/core/components/ui/ui.js

@@ -36,3 +36,4 @@ import "./pop/pop";
 import "./divider/divider";
 import "./card/card";
 import "./table/table";
+import "./captcha/captcha";

package/core/mixins/Fetcher.js

@@ -86,6 +86,7 @@ const Fetcher = (superClass) => {
                     Loader.show();
                 let headerData = PublisherManager.getInstance().get(this.getAncestorAttributeValue("headersDataProvider")).get();
                 data = yield this.api.get(this.endPoint || this.dataProvider || "", headerData);
+                // Je garde ça mais normalement ça n'arrive jamais
                 if (!data) {
                     SonicToast.add({ text: "Network Error", status: "error" });
                     this.isLoading = false;
@@ -96,7 +97,10 @@ const Fetcher = (superClass) => {
                 if (hasLoader)
                     Loader.hide();
                 if (this.key) {
+                    let response = data._sonic_http_response_;
                     data = Objects.traverse(data, this.key.split("."), false);
+                    if (data)
+                        data._sonic_http_response_ = response;
                 }
                 this.props = data;
                 this.dispatchEvent(new CustomEvent("load", { detail: this }));

package/core/mixins/FormCheckable.d.ts

@@ -42,10 +42,11 @@ declare const Form: <T extends Constructor<FormElementInterface>>(superClass: T)
         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;
@@ -67,9 +68,6 @@ declare const Form: <T extends Constructor<FormElementInterface>>(superClass: T)
         requestUpdate(): void;
         getAttribute(name: string): string;
         hasAttribute(attributeName: String): boolean;
-        /**
-         * comme radio,mais peut être désélectionné après sélection
-         */
         disconnectedCallback(): void;
     };
 } & T;

package/core/mixins/FormCheckable.js

@@ -97,10 +97,13 @@ const Form = (superClass) => {
          */
         getValueForFormPublisher() {
             let publisher = this.getFormPublisher();
-            if (this.unique || this.radio) {
+            let currentValue = publisher[this.name].get();
+            if (this.radio) {
+                return this.checked && this.value != null ? this.value : currentValue;
+            }
+            if (this.unique) {
                 return this.checked && this.value != null ? this.value : null;
             }
-            let currentValue = publisher[this.name].get();
             if (!Array.isArray(currentValue)) {
                 currentValue = [];
             }

package/core/mixins/FormElement.d.ts

@@ -4,11 +4,12 @@ export interface FormElementInterface extends SubscriberInterface {
     getFormPublisher(): any;
     updateDataValue(): void;
     handleChange(e?: any): void;
+    handleBlur(e?: any): void;
     getValueForFormPublisher(): any;
-    error: true | null;
+    error: boolean;
     autofocus: boolean;
+    required: boolean;
     disabled: true | null;
-    required: true | null;
     formDataProvider: string;
     _value: any;
     get value(): any;

package/core/mixins/FormElement.js

@@ -21,10 +21,10 @@ const Form = (superClass) => {
         constructor(...args) {
             super();
             this.touched = false;
-            this.error = null;
+            this.error = false;
             this.autofocus = false;
+            this.required = false;
             this.disabled = null;
-            this.required = null;
             this.onValueAssign = null;
             this.onFormValueAssign = null;
             this.onFormDataInValidate = null;
@@ -133,6 +133,10 @@ const Form = (superClass) => {
                 formPublisher.onInvalidate((this.onFormDataInValidate));
             }
         }
+        handleBlur() {
+            this.touched = true;
+            // this.validateFormElement();
+        }
         handleChange(e) {
             this.value = e.target.value;
             const event = new Event("change");
@@ -230,10 +234,10 @@ const Form = (superClass) => {
     ], FormElement.prototype, "autofocus", void 0);
     __decorate([
         property({ type: Boolean })
-    ], FormElement.prototype, "disabled", void 0);
+    ], FormElement.prototype, "required", void 0);
     __decorate([
         property({ type: Boolean })
-    ], FormElement.prototype, "required", void 0);
+    ], FormElement.prototype, "disabled", void 0);
     __decorate([
         property()
     ], FormElement.prototype, "name", null);

package/core/mixins/FormInput.d.ts

@@ -8,31 +8,28 @@ declare const Form: <T extends Constructor<FormElementInterface>>(superClass: T)
          * On peut essayer text, date, color, email par exemple, mais pas radio/checkbox/range a priori
          */
         type: "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week";
-        tabindex: string | null;
-        autocomplete: "on" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "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" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo" | null;
+        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;
         updateDataValue(): void;
         handleChange(e?: any): void;
+        handleBlur(e?: any): void;
         getValueForFormPublisher(): any;
-        error: true | null;
+        error: boolean;
         autofocus: boolean;
+        required: boolean;
         disabled: true | null;
-        required: true | null;
         formDataProvider: string;
-        _value: any;
         /**
          * Le type De l'input, comme en html cependant tous les types ne sont pas actuellements compatibles en raison du style en vigueur
          * On peut essayer text, date, color, email par exemple, mais pas radio/checkbox/range a priori
          */
+        _value: any;
         value: any;
         _name: string;
         name: string;
         props: any;
         isConnected: boolean;
-        /**
-         * Le type De l'input, comme en html cependant tous les types ne sont pas actuellements compatibles en raison du style en vigueur
-         * On peut essayer text, date, color, email par exemple, mais pas radio/checkbox/range a priori
-         */
         getAncestorAttributeValue(attributeName: string): string;
         hasAncestorAttribute(attributeName: string): boolean;
         querySelectorAll(selector: string): NodeListOf<Element>;

package/core/mixins/FormInput.js

@@ -14,8 +14,6 @@ const Form = (superClass) => {
              * On peut essayer text, date, color, email par exemple, mais pas radio/checkbox/range a priori
              */
             this.type = "text";
-            this.tabindex = null;
-            this.autocomplete = null;
             args;
         }
         validateFormElement() {
@@ -32,7 +30,7 @@ const Form = (superClass) => {
         property({ type: String })
     ], FormInput.prototype, "type", void 0);
     __decorate([
-        property({ type: String })
+        property({ type: Number })
     ], FormInput.prototype, "tabindex", void 0);
     __decorate([
         property({ type: String })

package/core/utils/PublisherProxy.d.mts

@@ -85,7 +85,7 @@ export class PublisherProxy {
  * Utilitaires de gestion des Publisher
  * Obtenir, replacer ou supprimer un Publisher
  *
-*/
+ */
 export class PublisherManager {
     static instance: null;
     /**

package/core/utils/PublisherProxy.mjs

@@ -199,7 +199,7 @@ export class PublisherProxy {
          * Si il s'agit d'une valeur primitive (un entier, une chaine ) la valeure en renseignée par un objet contenant la vaeur {__value}
          * On publie juste et on sen va.
          */
-        const isPrimitiveValue = (this._value_.hasOwnProperty("__value"));
+        const isPrimitiveValue = this._value_.hasOwnProperty("__value");
         if (isPrimitiveValue) {
             this._publishAssignement_(lockInternalMutationsTransmission);
             return true;
@@ -222,7 +222,7 @@ export class PublisherProxy {
          * Si la donnée est complexe (objet, tableau)
          * on crée les proxys pour les sous-éléments qui n'en on pas
          * On renseigne les nouvelles valeurs internes des proxies
-        */
+         */
         if (isComplex(this._value_)) {
             for (let key in this._value_) {
                 let v = newValue[key];
@@ -258,7 +258,7 @@ export class PublisherProxy {
  * Utilitaires de gestion des Publisher
  * Obtenir, replacer ou supprimer un Publisher
  *
-*/
+ */
 export class PublisherManager {
     constructor() {
         if (PublisherManager.instance != null)

package/core/utils/api.js

@@ -52,10 +52,11 @@ class API {
                     let result = yield fetch(url, { headers: headers });
                     try {
                         let json = yield result.json();
+                        json._sonic_http_response_ = result;
                         resolve(json);
                     }
                     catch (e) {
-                        resolve(null);
+                        resolve({ _sonic_http_response_: result });
                     }
                 }));
                 API.loadingGetPromises.set(url, promise);
@@ -105,10 +106,11 @@ class API {
             });
             try {
                 let json = yield result.json();
+                json._sonic_http_response_ = result;
                 return json;
             }
             catch (e) {
-                return null;
+                return { _sonic_http_response_: result };
             }
         });
     }

package/mixins.d.ts

@@ -55,10 +55,11 @@ export declare const FormCheckable: <T extends new (...args: any[]) => myFormEle
         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;
@@ -89,16 +90,17 @@ export declare const FormInput: <T extends new (...args: any[]) => myFormElement
     new (...args: any[]): {
         validateFormElement(): void;
         type: "number" | "search" | "file" | "button" | "password" | "url" | "color" | "hidden" | "time" | "image" | "text" | "reset" | "submit" | "month" | "week" | "checkbox" | "radio" | "range" | "tel" | "email" | "date" | "datetime-local";
-        tabindex: string | null;
-        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" | null;
+        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;
         updateDataValue(): void;
         handleChange(e?: any): void;
+        handleBlur(e?: any): void;
         getValueForFormPublisher(): any;
-        error: true | null;
+        error: boolean;
         autofocus: boolean;
+        required: boolean;
         disabled: true | null;
-        required: true | null;
         formDataProvider: string;
         _value: any;
         value: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "1.1.28",
+  "version": "1.1.31",
   "customElements": "custom-elements.json",
   "license": "MIT",
   "publishConfig": {
@@ -56,14 +56,18 @@
     "./functional/subscriber": "./core/components/functional/subscriber/subscriber.js",
     "./core/components/ui/_css/scroll": "./core/components/ui/_css/scroll.js",
     "./ui/_css/scroll": "./core/components/ui/_css/scroll.js",
-    "./core/components/ui/_css/types": "./core/components/ui/_css/types.js",
-    "./ui/_css/types": "./core/components/ui/_css/types.js",
+    "./core/components/ui/_css/size": "./core/components/ui/_css/size.js",
+    "./ui/_css/size": "./core/components/ui/_css/size.js",
+    "./core/components/ui/_css/type": "./core/components/ui/_css/type.js",
+    "./ui/_css/type": "./core/components/ui/_css/type.js",
     "./core/components/ui/alert/alert": "./core/components/ui/alert/alert.js",
     "./ui/alert": "./core/components/ui/alert/alert.js",
     "./core/components/ui/badge/badge": "./core/components/ui/badge/badge.js",
     "./ui/badge": "./core/components/ui/badge/badge.js",
     "./core/components/ui/button/button": "./core/components/ui/button/button.js",
     "./ui/button": "./core/components/ui/button/button.js",
+    "./core/components/ui/captcha/captcha": "./core/components/ui/captcha/captcha.js",
+    "./ui/captcha": "./core/components/ui/captcha/captcha.js",
     "./core/components/ui/card/card-footer": "./core/components/ui/card/card-footer.js",
     "./ui/card/card-footer": "./core/components/ui/card/card-footer.js",
     "./core/components/ui/card/card-header-descripton": "./core/components/ui/card/card-header-descripton.js",

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

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