@supersoniks/concorde 1.1.42 → 1.1.44

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,9 +53,17 @@ const Fetcher = (superClass) => {
              */
             this.isFetchEnabled = true;
             this._endPoint = "";
+            this.requestId = 0;
+            this.refetchEveryMs = 0;
             args;
             this.dataProvider = "";
         }
+        get props() {
+            return super.props;
+        }
+        set props(value) {
+            super.props = value;
+        }
         set endPoint(value) {
             this._endPoint = value;
             if (this.isConnected)
@@ -80,12 +89,13 @@ const Fetcher = (superClass) => {
                 this.dispatchEvent(new CustomEvent("loading", { detail: this }));
                 this.isLoading = true;
                 this.requestUpdate();
-                let data;
-                let hasLoader = this.isDefaultLoaderEnabled && !this.hasAttribute("noLoader");
+                const hasLoader = this.isDefaultLoaderEnabled && !this.hasAttribute("noLoader");
                 if (hasLoader)
                     Loader.show();
-                let headerData = PublisherManager.getInstance().get(this.getAncestorAttributeValue("headersDataProvider")).get();
-                data = yield this.api.get(this.endPoint || this.dataProvider || "", headerData);
+                const headerData = PublisherManager.getInstance()
+                    .get(this.getAncestorAttributeValue("headersDataProvider"))
+                    .get();
+                let 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" });
@@ -101,38 +111,45 @@ 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 && Objects.isObject(data))
+                    const response = data._sonic_http_response_;
+                    /* 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,22 +158,21 @@ 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;
             }
-            let options = {
+            const options = {
                 root: null,
                 rootMargin: Math.max(window.innerWidth, window.innerHeight) + "px",
             };
             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] : this.children[0];
             if (elt && elt.nodeName.toLocaleLowerCase() == "slot")
                 elt = elt.children[0];
             if (!elt || elt.nodeName.toLocaleLowerCase() == "template") {
                 elt = document.createElement("span");
-                that.appendChild(elt);
+                this.appendChild(elt);
             }
             if (elt) {
                 this.iObserver.observe(elt);
@@ -173,9 +189,18 @@ const Fetcher = (superClass) => {
             }
         }
     }
+    __decorate([
+        property()
+    ], FetcherElement.prototype, "props", null);
     __decorate([
         property({ type: String })
     ], FetcherElement.prototype, "endPoint", null);
-    return FetcherElement; // as Constructor<SubscriberInterface> & T;
+    __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

@@ -1,7 +1,8 @@
 import { FormElementInterface } from "@supersoniks/concorde/core/mixins/FormElement";
-declare type Constructor<T> = new (...args: any[]) => T;
+import { MixinArgsType } from "../_types/types";
+type Constructor<T> = new (...args: MixinArgsType[]) => T;
 declare const Form: <T extends Constructor<FormElementInterface>>(superClass: T) => {
-    new (...args: any[]): {
+    new (...args: MixinArgsType[]): {
         /**
          *  Voir  la mixin FormElement.
          */
@@ -16,13 +17,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,21 +37,31 @@ 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;
-        propertyMap: Object;
+        props: import("../_types/types").CoreJSType;
+        propertyMap: object;
         isConnected: boolean;
+        children: HTMLCollection;
+        appendChild(node: Node): Node;
         getAncestorAttributeValue(attributeName: string): string;
         hasAncestorAttribute(attributeName: string): boolean;
         querySelectorAll(selector: string): NodeListOf<Element>;
@@ -63,12 +76,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;
+        hasAttribute(attributeName: string): boolean;
     };
 } & 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 = () => {
+                const name = this.getAttribute("name");
+                const checkAllPublisher = this.getCheckAllPublisher();
+                const 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";
+                    }
+                    const currentValues = formPublisher[name].get();
+                    const allValues = checkAllPublisher.values.get();
+                    if (allValues && allValues.length) {
+                        let checkedCount = allValues.length;
+                        for (const 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
+            const 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()) {
+                const checkAllPublisher = this.getCheckAllPublisher();
+                if (checkAllPublisher) {
+                    if (this.checked === true)
+                        checkAllPublisher.checkMode = "allChecked";
+                    else if (this.checked === null) {
+                        checkAllPublisher.checkMode = "noneChecked";
+                        const 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();
+            const formPublisher = this.getFormPublisher();
+            if (formPublisher) {
+                const 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();
+            const 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)
+            const idx = currentValue.indexOf(this.value);
+            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,66 @@ 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;
+            const name = this.getAttribute("name");
+            if (!formDataProvider || !name) {
+                return null;
+            }
+            return PublisherManager.get(formDataProvider + "/" + name + "/_available_values_");
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            const checkAllPublisher = this.getCheckAllPublisher();
+            if (checkAllPublisher) {
+                checkAllPublisher.checkMode.offAssign(this.onChecksAllRequest);
+                if (!this.checksAll()) {
+                    const 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) {
+                const publisherValueForName = formPublisher[this.name].get();
+                if (publisherValueForName &&
+                    Array.isArray(publisherValueForName) &&
+                    publisherValueForName.indexOf(this.value) !== -1) {
+                    this.checked = true;
+                }
+            }
+            const 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 +296,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,30 @@
 import { SubscriberInterface } from "@supersoniks/concorde/core/mixins/Subscriber";
-declare type Constructor<T> = new (...args: any[]) => T;
+import { PublisherInterface, CoreJSType } from "../_types/types";
+import { MixinArgsType } from "../_types/types";
+type Constructor<T> = new (...args: MixinArgsType[]) => T;
+type FormElementValue = string | string[] | object | null | undefined;
 export interface FormElementInterface extends SubscriberInterface {
-    getFormPublisher(): any;
+    getFormPublisher(): PublisherInterface;
     updateDataValue(): void;
-    handleChange(e?: any): void;
-    handleBlur(e?: any): void;
-    getValueForFormPublisher(): any;
+    handleChange(e?: Event): void;
+    handleBlur(e?: Event): void;
+    getValueForFormPublisher(): FormElementValue;
+    validateFormElement(): void;
+    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: FormElementValue;
+    get value(): FormElementValue;
+    set value(value: FormElementValue);
     _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<CoreJSType>>>(superClass: T) => Constructor<FormElementInterface> & T;
 export default Form;