@supersoniks/concorde 1.1.41 → 1.1.43

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

@@ -29,22 +29,23 @@ let SonicToast = class SonicToast extends LitElement {
             pointerEvents: "none",
             gap: "1rem",
             display: "flex",
-            margin: "1rem"
+            margin: "1rem",
         };
         if (!isIframe) {
-            styles = Object.assign(Object.assign({}, styles), { margin: "0", width: "calc(100% - 2.5rem)", position: "fixed", bottom: "1.25rem", right: "1.25rem", zIndex: "999", maxWidth: "64ch", flexDirection: "column-reverse" });
+            styles = Object.assign(Object.assign({}, styles), { margin: "0", width: "calc(100% - 2.5rem)", position: "fixed", bottom: "1.25rem", right: "1.25rem", zIndex: "10000", maxWidth: "64ch", flexDirection: "column-reverse" });
         }
         // ${window.parent == window ? "fixed-area" : ""}
         if (!this.toasts)
             return nothing;
         return html `<div aria-live="polite" style=${styleMap(styles)}>
       ${repeat(this.toasts, (item) => item.id, (item) => html `
-          <sonic-toast-item maxHeight=${isIframe ? 'none' : '10rem'}
+          <sonic-toast-item
+            maxHeight=${isIframe ? "none" : "10rem"}
             status=${ifDefined(item.status)}
             title=${ifDefined(item.title)}
             ?ghost=${item.ghost}
             ?dismissForever=${item.dismissForever}
-            ?preserve=${item.preserve} 
+            ?preserve=${item.preserve}
             id=${ifDefined(item.id)}
             @hide=${() => this.removeItem(item)}
             ${animate({
@@ -88,7 +89,7 @@ let SonicToast = class SonicToast extends LitElement {
         // Ajoute le toast à la liste
         let toastComponent = document.querySelector("sonic-toast");
         const nextId = (_a = conf.id) !== null && _a !== void 0 ? _a : new Date().valueOf();
-        const interactiveRegExp = new RegExp("</a>|</button>");
+        const interactiveRegExp = new RegExp("</a>|</.*?button>|</.*?input>|</.*?textarea>|</.*?select>");
         const hasInteractive = interactiveRegExp.test(conf.text);
         const currentToast = {
             id: nextId,
@@ -101,7 +102,7 @@ let SonicToast = class SonicToast extends LitElement {
         };
         // check if the toast is dismissed
         if (conf.dismissForever && conf.id) {
-            const dismissed = localStorage.getItem('sonic-toast-dismissed') || '{}';
+            const dismissed = localStorage.getItem("sonic-toast-dismissed") || "{}";
             const dismissedObj = JSON.parse(dismissed);
             if (dismissedObj[conf.id]) {
                 return null;
@@ -109,18 +110,33 @@ let SonicToast = class SonicToast extends LitElement {
         }
         if (toastComponent.toasts.length > 0) {
             let toastA = Object.assign({}, currentToast);
-            let toastB = Object.assign({}, toastComponent.toasts[toastComponent.toasts.length - 1]);
-            toastA.id = toastB.id = 0;
-            if (!currentToast.preserve && Objects.shallowEqual(toastA, toastB)) {
-                return null;
+            for (const toast of toastComponent.toasts) {
+                let toastB = Object.assign({}, toast);
+                toastA.id = toastB.id = 0;
+                if ( /*!currentToast.preserve && */Objects.shallowEqual(toastA, toastB)) {
+                    return null;
+                }
             }
         }
         toastComponent.toasts = [...toastComponent.toasts, currentToast];
         return currentToast;
     }
+    static removeItem(toastToRemove) {
+        let toastComponent = document.querySelector("sonic-toast");
+        if (!toastComponent)
+            return;
+        console.log(toastToRemove);
+        toastComponent.removeItem(toastToRemove);
+    }
     // Remove Toast
-    removeItem(item) {
-        this.toasts = this.toasts.filter((i) => i != item);
+    removeItem(toastToRemove) {
+        if (!toastToRemove)
+            return;
+        this.toasts = this.toasts.filter((toast) => {
+            toast = Object.assign({}, toast);
+            delete toast.id;
+            return !Objects.shallowEqual(toast, toastToRemove, false);
+        });
     }
 };
 __decorate([
@@ -131,6 +147,5 @@ SonicToast = __decorate([
 ], SonicToast);
 export { SonicToast };
 if (typeof window !== "undefined") {
-    let win = window;
-    win.SonicToast = SonicToast;
+    window.SonicToast = SonicToast;
 }

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

@@ -2,6 +2,7 @@ import { LitElement } from "lit";
 export declare class Tooltip extends LitElement {
     static styles: import("lit").CSSResult[];
     label: string;
+    placement?: "top" | "bottom";
     disabled: boolean;
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/tooltip/tooltip.js

@@ -15,22 +15,21 @@ let Tooltip = class Tooltip extends LitElement {
     }
     render() {
         let disabledClass = this.disabled || this.label == "" ? "disabled" : "";
-        return html `<div
-      data-tooltip-text="${this.label.trim().replace("&nbsp;", " ")}"
-      class="tooltip ${disabledClass}"
-    >
+        return html `<div data-tooltip-text="${this.label.trim().replace("&nbsp;", " ")}" class="tooltip ${disabledClass}">
       <slot></slot>
     </div>`;
     }
 };
 Tooltip.styles = [
     css `
-      .tooltip {
+      :host {
         position: relative;
-        display: flex;
+        display: inline-flex;
         align-items: center;
         text-align: center;
+        --sc-tooltip-fw: var(--sc-font-weight-base);
       }
+
       .tooltip:before {
         position: absolute;
         content: attr(data-tooltip-text);
@@ -38,9 +37,6 @@ Tooltip.styles = [
         display: block;
         opacity: 0;
         pointer-events: none;
-        bottom: calc(100% + 0.25rem);
-        left: 50%;
-        transform: translateX(-50%);
         background: var(--sc-base-content, #111827);
         padding: 0.25rem;
         border-radius: 0.25rem;
@@ -50,16 +46,46 @@ Tooltip.styles = [
         line-height: 1.1;
         width: max-content;
         max-width: 20rem;
+        white-space: pre-line;
+        font-weight: var(--sc-tooltip-fw);
       }
       .tooltip:not(.disabled):hover:before {
         opacity: 1;
         display: block;
       }
+
+      :host(:not([placement])) .tooltip:before,
+      :host([placement="top"]) .tooltip:before {
+        bottom: calc(100% + 0.25rem);
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      :host([placement="bottom"]) .tooltip:before {
+        top: calc(100% + 0.25rem);
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      :host([placement="left"]) .tooltip:before {
+        top: 50%;
+        right: calc(100% + 0.25rem);
+        transform: translateY(-50%);
+      }
+
+      :host([placement="right"]) .tooltip:before {
+        top: 50%;
+        transform: translateY(-50%);
+        left: calc(100% + 0.25rem);
+      }
     `,
 ];
 __decorate([
     property({ type: String })
 ], Tooltip.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Tooltip.prototype, "placement", void 0);
 __decorate([
     property({ type: Boolean })
 ], Tooltip.prototype, "disabled", void 0);
@@ -67,8 +93,3 @@ Tooltip = __decorate([
     customElement(tagName)
 ], Tooltip);
 export { Tooltip };
-//Ajout pour la creation du cem notamment pour Storybook
-try {
-    customElements.define(tagName, Tooltip);
-}
-catch (e) { }

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

@@ -4,6 +4,7 @@ import "./button/button";
 import "./link/link";
 import "./progress/progress";
 import "./form/input/input";
+import "./form/input-autocomplete/input-autocomplete";
 import "./form/input/password-helper";
 import "./form/input/same-value-helper";
 import "./form/checkbox/checkbox";

package/core/components/ui/ui.js

@@ -7,6 +7,7 @@ import "./link/link";
 import "./progress/progress";
 // FORMS
 import "./form/input/input";
+import "./form/input-autocomplete/input-autocomplete";
 import "./form/input/password-helper";
 import "./form/input/same-value-helper";
 import "./form/checkbox/checkbox";
@@ -25,9 +26,6 @@ import "./loader/loader";
 import "./taxonomy/taxonomy";
 //Menu
 import "./menu/menu";
-//Tabs
-// import "./tabs/tabs";
-// import "./tabs/tab";
 // Misc
 import "./modal/modal";
 import "./alert/alert";

package/core/core.js

@@ -1,10 +1,9 @@
 import "./components/functional/functional";
 import "./components/ui/ui";
 import "./mixins/mixins";
-import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy.mjs";
+import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
 import DataBindObserver from "./utils/DataBindObserver";
-let win = window;
-if (!win.SonicPublisherManager)
-    win.SonicPublisherManager = PublisherManager;
-if (!win.SonicDataBindObserver)
-    win.SonicDataBindObserver = DataBindObserver;
+if (!window.SonicPublisherManager)
+    window.SonicPublisherManager = PublisherManager;
+if (!window.SonicDataBindObserver)
+    window.SonicDataBindObserver = DataBindObserver;

package/core/mixins/Fetcher.d.ts

@@ -1,8 +1,9 @@
-import API from "@supersoniks/concorde/core/utils/api";
+/// <reference types="node" />
 import "@supersoniks/concorde/core/components/ui/button/button";
 import { SubscriberInterface } from "@supersoniks/concorde/core/mixins/Subscriber";
+import API from "@supersoniks/concorde/core/utils/api";
 declare type Constructor<T> = new (...args: any[]) => T;
-declare const Fetcher: <T extends Constructor<SubscriberInterface>>(superClass: T) => {
+declare const Fetcher: <PropsType = any, T extends Constructor<SubscriberInterface<PropsType>> = any>(superClass: T, propsType?: PropsType | undefined) => {
     new (...args: any[]): {
         api: API | null;
         /**
@@ -33,6 +34,9 @@ declare const Fetcher: <T extends Constructor<SubscriberInterface>>(superClass:
         isFetchEnabled: boolean;
         _endPoint: string;
         endPoint: string;
+        requestId: number;
+        refetchEveryMs: number;
+        refetchTimeOutId?: NodeJS.Timeout | undefined;
         /**
          *
          * C'est ici que les données sont chargées via l'utilitaire API
@@ -40,7 +44,7 @@ declare const Fetcher: <T extends Constructor<SubscriberInterface>>(superClass:
          * Un Toast est affiché si le chargement échoue
          */
         _fetchData(): Promise<void>;
-        onInvalidate: any;
+        onInvalidate?: (() => void) | undefined;
         disconnectedCallback(): void;
         connectedCallback(): void;
         /**
@@ -48,27 +52,32 @@ declare const Fetcher: <T extends Constructor<SubscriberInterface>>(superClass:
          */
         firstUpdated(): void;
         onIntersection(entries: IntersectionObserverEntry[]): void;
-        props: any;
+        props: PropsType | null;
         propertyMap: Object;
         isConnected: boolean;
-        getAncestorAttributeValue(attributeName: string): string; /**
-         * Après le chargement des données on traverse l'objet reçu en fonctione de la cible exprimées dans cette propriété avec la dot syntaxe.
-         * C'est cette donnée cible qui est injectée dans les pros et donc disponible via le publisher disponible globalement via PublisherManager.get(dataProvider)
-         */
+        getAncestorAttributeValue(attributeName: string): string;
         hasAncestorAttribute(attributeName: string): boolean;
         querySelectorAll(selector: string): NodeListOf<Element>;
         publisher: any;
         dataProvider: string | null;
-        noShadowDom: string | null;
+        noShadowDom: string | null; /**
+         * isFirstLoad vaut true jusqu'au premier chargement de données
+         */
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
         displayContents: boolean;
+        shadowRoot?: ShadowRoot | undefined; /**
+         * isLoading vaut true pendant le chargement des données
+         */
         dispatchEvent(event: Event): void;
         setAttribute(name: string, value: string): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
         removeAttribute(name: string): void;
-        initPublisher(): void;
+        initPublisher(): void; /**
+         * On peut désactiver le fetch programmatiquement via cette propriété.
+         * Cela est le cas pour le composant sonic-list qui ne fetch que si l'attribut fetch est renseigné
+         */
         getApiConfiguration(): import("@supersoniks/concorde/core/utils/api").APIConfiguration;
         requestUpdate(): void;
         getAttribute(name: string): string;

package/core/mixins/Fetcher.js

@@ -13,14 +13,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import "@supersoniks/concorde/core/components/ui/button/button";
 import { Loader } from "@supersoniks/concorde/core/components/ui/loader/loader";
 import { SonicToast } from "@supersoniks/concorde/core/components/ui/toast/toast";
 import API from "@supersoniks/concorde/core/utils/api";
-import "@supersoniks/concorde/core/components/ui/button/button";
-import { PublisherManager } from "@supersoniks/concorde/utils";
 import Objects from "@supersoniks/concorde/core/utils/Objects";
+import { PublisherManager } from "@supersoniks/concorde/utils";
 import { property } from "lit/decorators.js";
-const Fetcher = (superClass) => {
+const Fetcher = (superClass, propsType) => {
+    propsType;
     class FetcherElement extends superClass {
         constructor(...args) {
             super();
@@ -52,6 +53,8 @@ const Fetcher = (superClass) => {
              */
             this.isFetchEnabled = true;
             this._endPoint = "";
+            this.requestId = 0;
+            this.refetchEveryMs = 0;
             args;
             this.dataProvider = "";
         }
@@ -102,37 +105,44 @@ const Fetcher = (superClass) => {
                     Loader.hide();
                 if (this.key) {
                     let response = data._sonic_http_response_;
-                    data = Objects.traverse(data, this.key.split("."), false);
-                    if (data && Objects.isObject(data))
+                    /* preserveOtherKeys s'exprime lorsque le paramètre "key" est défini
+                     * Conserve les autres propriétés de l'objet reçu, en plus des propriétés définies sous "key"
+                     */
+                    data = Objects.traverse(data, this.key.split("."), this.hasAttribute("preserveOtherKeys"));
+                    if (data && Objects.isObject(data) && response)
                         data._sonic_http_response_ = response;
                 }
                 this.props = data;
                 this.dispatchEvent(new CustomEvent("load", { detail: this }));
                 this.isFirstLoad = false;
                 this.isLoading = false;
+                if (this.refetchEveryMs && this.isConnected) {
+                    this.refetchTimeOutId = setTimeout(() => this._fetchData(), this.refetchEveryMs);
+                }
             });
         }
         disconnectedCallback() {
             var _a;
             super.disconnectedCallback();
             (_a = this.publisher) === null || _a === void 0 ? void 0 : _a.offInvalidate(this.onInvalidate);
+            clearTimeout(this.refetchTimeOutId);
             this.isFirstLoad = false;
         }
         connectedCallback() {
             var _a;
-            this.noShadowDom = "";
+            // this.noShadowDom = "";
             if (!this.isFetchEnabled) {
                 super.connectedCallback();
                 return;
             }
             super.connectedCallback();
-            this.key = this.getAncestorAttributeValue("key");
+            this.key = this.getAttribute("key");
             if (this.props) {
                 this.publisher.set(this.props);
             }
             this.onInvalidate = () => this._fetchData();
             (_a = this.publisher) === null || _a === void 0 ? void 0 : _a.onInvalidate(this.onInvalidate);
-            const lazyLoad = this.getAncestorAttributeValue("lazyload");
+            const lazyLoad = this.getAttribute("lazyload");
             if (lazyLoad === null) {
                 this._fetchData();
             }
@@ -141,7 +151,7 @@ const Fetcher = (superClass) => {
          * Première update, le comportement de lazyload est géré ici a l'aide d'un intersection observer.
          */
         firstUpdated() {
-            const lazyLoad = this.getAncestorAttributeValue("lazyload");
+            const lazyLoad = this.getAttribute("lazyload");
             if (lazyLoad === null) {
                 return;
             }
@@ -151,7 +161,7 @@ const Fetcher = (superClass) => {
             };
             this.iObserver = new IntersectionObserver((entries) => this.onIntersection(entries), options);
             let that = this;
-            let elt = that.shadowRoot ? that.shadowRoot.children[0] : that.children[0];
+            let elt = this.shadowRoot ? this.shadowRoot.children[0] : that.children[0];
             if (elt && elt.nodeName.toLocaleLowerCase() == "slot")
                 elt = elt.children[0];
             if (!elt || elt.nodeName.toLocaleLowerCase() == "template") {
@@ -176,6 +186,12 @@ const Fetcher = (superClass) => {
     __decorate([
         property({ type: String })
     ], FetcherElement.prototype, "endPoint", null);
+    __decorate([
+        property()
+    ], FetcherElement.prototype, "requestId", void 0);
+    __decorate([
+        property({ type: Number })
+    ], FetcherElement.prototype, "refetchEveryMs", void 0);
     return FetcherElement; // as Constructor<SubscriberInterface> & T;
 };
 export default Fetcher;

package/core/mixins/FormCheckable.d.ts

@@ -16,13 +16,15 @@ declare const Form: <T extends Constructor<FormElementInterface>>(superClass: T)
           Active le mode radio
          */
         radio: true | null;
+        unCheckOnDisconnect: boolean;
         /**
          * propriété checked avec des caractéristiques similaire à un input html classique.
          */
-        _checked: true | null;
-        checked: true | null;
+        _checked: true | null | "indeterminate";
+        checked: true | "indeterminate" | null;
         validateFormElement(): void;
-        setCheckedValue(checked: true | null): void;
+        checksAll(): boolean;
+        setCheckedValue(checked: true | null | "indeterminate"): void;
         handleChange(): void;
         /**
          * Voir la mixin FormElement
@@ -34,16 +36,24 @@ declare const Form: <T extends Constructor<FormElementInterface>>(superClass: T)
          * Le comportement est modifié de la manière suivante :
          * L'état du composant (checked) est mis à jour en fonction de la valeur fournie par le publisher associé au composant / en fonction de sont mode (radio, unique)
          */
-        setFormValueFromPublisher(value: any): void;
-        initPublisher(): void;
+        setFormValueFromPublisher(value: string | Array<string | null> | null): void;
+        getCheckAllPublisher(): any;
+        updateAllChecked: () => void;
+        onChecksAllRequest: (value: string) => void;
+        disconnectedCallback(): void;
+        connectedCallback(): void;
         getFormPublisher(): any;
         updateDataValue(): void;
-        handleBlur(e?: any): void;
+        handleBlur(e?: Event | undefined): void;
+        focus?: (() => void) | undefined;
+        shadowRoot?: ShadowRoot | undefined;
         error: boolean;
         autofocus: boolean;
         required: boolean;
         disabled: true | null;
         formDataProvider: string;
+        ariaLabelledby?: string | undefined;
+        ariaLabel?: string | undefined;
         _name: string;
         name: string;
         props: any;
@@ -63,12 +73,11 @@ declare const Form: <T extends Constructor<FormElementInterface>>(superClass: T)
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
         removeAttribute(name: string): void;
+        initPublisher(): void;
         getApiConfiguration(): import("../utils/api").APIConfiguration;
-        connectedCallback(): void;
         requestUpdate(): void;
         getAttribute(name: string): string;
         hasAttribute(attributeName: String): boolean;
-        disconnectedCallback(): void;
     };
 } & T;
 export default Form;