@supersoniks/concorde 1.1.42 → 1.1.43

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;

package/core/mixins/FormCheckable.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { property } from "lit/decorators.js";
+import { PublisherManager } from "@supersoniks/concorde/utils";
 const Form = (superClass) => {
     /**
      * FormCheckable ajoute un comportement de sélection (checked) a tout FormElement qui utilise cette mixin.
@@ -30,21 +31,98 @@ const Form = (superClass) => {
               Active le mode radio
              */
             this.radio = null;
+            this.unCheckOnDisconnect = false;
             /**
              * propriété checked avec des caractéristiques similaire à un input html classique.
              */
             this._checked = null;
+            this.updateAllChecked = () => {
+                let name = this.getAttribute("name");
+                let checkAllPublisher = this.getCheckAllPublisher();
+                let formPublisher = this.getFormPublisher();
+                if (!(checkAllPublisher === null || checkAllPublisher === void 0 ? void 0 : checkAllPublisher.hasCheckAll.get())) {
+                    return;
+                }
+                if (!this.checksAll() && checkAllPublisher && formPublisher && name) {
+                    if (!formPublisher[this.name].get().length) {
+                        checkAllPublisher.checkMode = "noneChecked";
+                        return;
+                    }
+                    else if (this.checked === null) {
+                        checkAllPublisher.checkMode = "someUnchecked";
+                    }
+                    else if (checkAllPublisher.checkMode.get() == "noneChecked" || checkAllPublisher.checkMode.get() == null) {
+                        checkAllPublisher.checkMode = "someUnchecked";
+                    }
+                    let currentValues = formPublisher[name].get();
+                    let allValues = checkAllPublisher.values.get();
+                    if (allValues && allValues.length) {
+                        let checkedCount = allValues.length;
+                        for (let p of allValues) {
+                            if (currentValues.indexOf(p) == -1) {
+                                checkedCount -= 1;
+                            }
+                        }
+                        if (checkedCount == allValues.length) {
+                            checkAllPublisher.checkMode = "allChecked";
+                        }
+                        if (checkedCount == 0) {
+                            checkAllPublisher.checkMode = "noneChecked";
+                        }
+                    }
+                    if (allValues.indexOf(this.value) == -1) {
+                        this.checked = null;
+                    }
+                }
+            };
+            this.onChecksAllRequest = (value) => {
+                this.removeAttribute("allChecked");
+                this.removeAttribute("indeterminate");
+                if (value == "allChecked") {
+                    this.checked = true;
+                    this.setAttribute("allChecked", "");
+                }
+                if (value == "noneChecked") {
+                    this.checked = null;
+                }
+                if (value == "someUnchecked") {
+                    if (this.checksAll())
+                        this.checked = "indeterminate";
+                    this.setAttribute("indeterminate", "");
+                }
+            };
         }
         get value() {
             return this._value;
         }
-        set value(value) {
+        set value(newValue) {
+            if (this.value == newValue)
+                return;
             if (this.hasAttribute("value") && !this.forceAutoFill)
-                value = this.getAttribute("value");
-            if (this._value == value)
+                newValue = this.getAttribute("value");
+            if (this._value == newValue)
                 return;
-            this._value = value;
-            this.updateDataValue();
+            if (newValue == null)
+                return;
+            this._value = newValue;
+            if (!this.value)
+                return;
+            // On check l'élément si il est cheched dans le formPublisher
+            let formPublisher = this.getFormPublisher();
+            if (formPublisher && this.name) {
+                let currentValue = formPublisher[this.name].get();
+                if (this.radio || this.unique) {
+                    this.checked = currentValue == newValue ? true : null;
+                }
+                if (!Array.isArray(currentValue)) {
+                    currentValue = [];
+                }
+                if (currentValue.indexOf(newValue) != -1)
+                    this.checked = true;
+            }
+            //On mets à jour la valeur dans la donnée si l'élément est checked
+            if (this.checked == true)
+                this.updateDataValue();
             this.requestUpdate();
         }
         get checked() {
@@ -52,18 +130,38 @@ const Form = (superClass) => {
         }
         set checked(checked) {
             this.setCheckedValue(checked);
+            if (this.checksAll()) {
+                let checkAllPublisher = this.getCheckAllPublisher();
+                if (checkAllPublisher) {
+                    if (this.checked === true)
+                        checkAllPublisher.checkMode = "allChecked";
+                    else if (this.checked === null) {
+                        checkAllPublisher.checkMode = "noneChecked";
+                        let formPublisher = this.getFormPublisher();
+                        if (formPublisher) {
+                            formPublisher[this.name] = [];
+                        }
+                    }
+                }
+            }
+            this.requestUpdate();
         }
         validateFormElement() {
             var _a;
-            const that = this;
-            const input = (_a = that.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("input");
+            const input = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("input");
             if (!input || input.checkValidity())
                 return;
-            let value = this.getFormPublisher()[this.name].get();
-            if ((this.unique || this.radio) && value !== null && value.toString().length > 0)
-                return;
-            this.getFormPublisher().isFormValid = false;
-            input.reportValidity();
+            let formPublisher = this.getFormPublisher();
+            if (formPublisher) {
+                let value = formPublisher[this.name].get();
+                if ((this.unique || this.radio) && value !== null && value.toString().length > 0)
+                    return;
+                formPublisher.isFormValid = false;
+                input.reportValidity();
+            }
+        }
+        checksAll() {
+            return this.hasAttribute("checksAll");
         }
         setCheckedValue(checked) {
             if (this._checked == checked)
@@ -71,6 +169,7 @@ const Form = (superClass) => {
             this._checked = checked;
             this.updateDataValue();
             this.requestUpdate();
+            setTimeout(() => this.updateAllChecked(), 1);
             // Désactivation du checked sur le publisher
             // Pas sur de l'utilité mais provoque un bug
             // if (this.publisher && !this.radio && !this.unique) {
@@ -78,7 +177,8 @@ const Form = (superClass) => {
             // }
         }
         handleChange() {
-            this.checked = this.checked ? (!this.radio ? null : true) : true;
+            const newCheckedValue = this.checked === true ? (!this.radio ? null : true) : true;
+            this.checked = newCheckedValue;
             const event = new Event("change");
             this.dispatchEvent(event);
         }
@@ -87,23 +187,26 @@ const Form = (superClass) => {
          * Le comportement est ici modifié fonction de son mode (checkbox, radio, unique)
          */
         getValueForFormPublisher() {
-            let publisher = this.getFormPublisher();
-            let currentValue = publisher[this.name].get();
+            let formPublisher = this.getFormPublisher();
+            if (!formPublisher)
+                return null;
+            let currentValue = formPublisher[this.name].get();
             if (this.radio) {
-                return this.checked && this.value != null ? this.value : currentValue;
+                return this.checked === true && this.value != null ? this.value : currentValue;
             }
             if (this.unique) {
-                return this.checked && this.value != null ? this.value : null;
+                return this.checked === true && this.value != null ? this.value : null;
             }
             if (!Array.isArray(currentValue)) {
                 currentValue = [];
             }
             currentValue = currentValue.slice(0);
             let idx = currentValue.indexOf(this.value);
-            if (this.checked === true && idx === -1)
+            if (this.checked === true && idx === -1 && !this.checksAll())
                 currentValue.push(this.value);
-            if (this.checked === null && idx !== -1)
+            if (this.checked === null && idx !== -1) {
                 currentValue.splice(idx, 1);
+            }
             return currentValue;
         }
         /**
@@ -118,15 +221,64 @@ const Form = (superClass) => {
             }
             if (!Array.isArray(value))
                 value = [];
+            if (this.checksAll()) {
+                return;
+            }
             this.checked = value.indexOf(this.value) !== -1 ? true : null;
         }
-        initPublisher() {
-            super.initPublisher();
+        getCheckAllPublisher() {
+            if (!this.formDataProvider)
+                this.formDataProvider = this.getAncestorAttributeValue("formDataProvider");
+            const formDataProvider = this.formDataProvider;
+            let name = this.getAttribute("name");
+            if (!formDataProvider || !name) {
+                return null;
+            }
+            return PublisherManager.get(formDataProvider + "/" + name + "/_available_values_");
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            let checkAllPublisher = this.getCheckAllPublisher();
+            if (checkAllPublisher) {
+                checkAllPublisher.checkMode.offAssign(this.onChecksAllRequest);
+                if (!this.checksAll()) {
+                    let values = checkAllPublisher.values.get().slice(0);
+                    const idx = values.indexOf(this.value);
+                    if (idx != -1) {
+                        values.splice(idx, 1);
+                        checkAllPublisher.values = values;
+                    }
+                }
+            }
+            setTimeout(() => this.updateAllChecked(), 1);
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            const formPublisher = this.getFormPublisher();
+            if (formPublisher && this.name) {
+                let publisherValueForName = formPublisher[this.name].get();
+                if (publisherValueForName && publisherValueForName.indexOf(this.value) !== -1) {
+                    this.checked = true;
+                }
+            }
+            let checkAllPublisher = this.getCheckAllPublisher();
+            if (checkAllPublisher) {
+                checkAllPublisher.checkMode.onAssign(this.onChecksAllRequest);
+                if (this.checksAll()) {
+                    checkAllPublisher.hasCheckAll = true;
+                }
+                if (!checkAllPublisher.values.get()) {
+                    checkAllPublisher.values = [];
+                }
+                if (!this.checksAll()) {
+                    checkAllPublisher.values = [...checkAllPublisher.values.get(), this.value];
+                }
+            }
             if (!this.hasAttribute("checked")) {
                 return;
             }
             if (!this.publisher || this.publisher.get().checked !== false) {
-                this.checked = true;
+                setTimeout(() => (this.checked = true), 1);
             }
         }
     }
@@ -142,6 +294,9 @@ const Form = (superClass) => {
     __decorate([
         property({ type: Boolean })
     ], FormCheckable.prototype, "radio", void 0);
+    __decorate([
+        property({ type: Boolean })
+    ], FormCheckable.prototype, "unCheckOnDisconnect", void 0);
     __decorate([
         property()
     ], FormCheckable.prototype, "checked", null);

package/core/mixins/FormElement.d.ts

@@ -1,22 +1,27 @@
 import { SubscriberInterface } from "@supersoniks/concorde/core/mixins/Subscriber";
+import { PublisherInterface } from "../_types/types";
 declare type Constructor<T> = new (...args: any[]) => T;
 export interface FormElementInterface extends SubscriberInterface {
-    getFormPublisher(): any;
+    getFormPublisher(): PublisherInterface;
     updateDataValue(): void;
-    handleChange(e?: any): void;
-    handleBlur(e?: any): void;
+    handleChange(e?: Event): void;
+    handleBlur(e?: Event): void;
     getValueForFormPublisher(): any;
+    focus?: () => void;
+    shadowRoot?: ShadowRoot;
     error: boolean;
     autofocus: boolean;
     required: boolean;
     disabled: true | null;
     formDataProvider: string;
-    _value: any;
-    get value(): any;
-    set value(value: any);
+    ariaLabelledby?: string;
+    ariaLabel?: string;
+    _value: string | null;
+    get value(): string | null;
+    set value(value: string | null);
     _name: string;
     get name(): string;
     set name(value: string);
 }
-declare const Form: <T extends Constructor<SubscriberInterface>>(superClass: T) => Constructor<FormElementInterface> & T;
+declare const Form: <T extends Constructor<SubscriberInterface<any>>>(superClass: T) => Constructor<FormElementInterface> & T;
 export default Form;