@supersoniks/concorde 1.1.41 → 1.1.43

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;

package/core/mixins/FormElement.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy.mjs";
+import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
 import { property } from "lit/decorators.js";
 import Objects from "@supersoniks/concorde/core/utils/Objects";
 const keyboardLoops = new Map();
@@ -26,9 +26,6 @@ const Form = (superClass) => {
             this.required = false;
             this.forceAutoFill = false;
             this.disabled = null;
-            this.onValueAssign = null;
-            this.onFormValueAssign = null;
-            this.onFormDataInValidate = null;
             this.formDataProvider = "";
             /**
              * Le nom du champ avec des caractéristiques similaire à un input html classique.
@@ -46,7 +43,8 @@ const Form = (superClass) => {
                 this.setFormValueFromPublisher(value);
             };
             this.onFormDataInValidate = () => {
-                if (!this.getFormPublisher().isFormValid.get()) {
+                let formPublisher = this.getFormPublisher();
+                if (!(formPublisher && formPublisher.isFormValid.get())) {
                     return;
                 }
                 this.validateFormElement();
@@ -63,23 +61,23 @@ const Form = (superClass) => {
         }
         validateFormElement() { }
         updateDataValue() {
-            if (this._name) {
+            let name = this.getAttribute("name");
+            if (name) {
                 let formPublisher = this.getFormPublisher();
                 if (formPublisher) {
-                    formPublisher[this._name] = this.getValueForFormPublisher();
-                    this.setFormValueFromPublisher(formPublisher[this.name].get());
+                    formPublisher[name] = this.getValueForFormPublisher();
+                    this.setFormValueFromPublisher(formPublisher[name].get());
                 }
             }
         }
         getFormPublisher() {
-            if (!this.formDataProvider) {
+            if (!this.formDataProvider)
                 this.formDataProvider = this.getAncestorAttributeValue("formDataProvider");
-            }
             if (this.formDataProvider) {
                 return PublisherManager.get(this.formDataProvider);
             }
-            else
-                return this.publisher;
+            return null;
+            //else return this.publisher;
         }
         /**
          * Mise en forme de la valeur fournie au formPublisher associé au composant
@@ -106,10 +104,13 @@ const Form = (superClass) => {
             return this._value;
         }
         set value(value) {
-            if (Objects.isObject(value) && value.hasOwnProperty("__value") && value.value == undefined)
-                return;
+            if (this.name == "nom" && value && Objects.deepEqual(value, {})) {
+                console.trace(this);
+            }
             if (value == null)
-                return;
+                value = "";
+            if (Objects.isObject(value) && value.hasOwnProperty("__value") && value.value == undefined)
+                value = "";
             if (this._value == value)
                 return;
             this._value = value;
@@ -117,9 +118,12 @@ const Form = (superClass) => {
             this.requestUpdate();
         }
         initPublisher() {
+            let formPublisher = this.getFormPublisher();
+            let value = this.hasAncestorAttribute("initFromPublisher") && this._name && formPublisher[this._name].get()
+                ? formPublisher[this._name].get()
+                : this.getAttribute("value");
             if (this._name && this.publisher)
                 this.publisher[this._name].offAssign(this.onValueAssign);
-            let formPublisher = this.getFormPublisher();
             if (this._name && formPublisher)
                 formPublisher[this._name].offAssign(this.onFormValueAssign);
             super.initPublisher();
@@ -127,15 +131,17 @@ const Form = (superClass) => {
                 this._name = this.getAttribute("name");
             if (!this.value)
                 this._value = this.getAttribute("value");
-            this.updateDataValue();
             if (this.publisher && this._name) {
                 this.publisher[this._name].onAssign(this.onValueAssign);
             }
             formPublisher = this.getFormPublisher();
             if (this._name && formPublisher) {
                 formPublisher[this._name].onAssign(this.onFormValueAssign);
-                formPublisher.onInvalidate((this.onFormDataInValidate));
+                formPublisher.onInvalidate(this.onFormDataInValidate);
             }
+            this.updateDataValue();
+            if (value)
+                this.value = value;
         }
         handleBlur() {
             this.touched = true;
@@ -166,17 +172,20 @@ const Form = (superClass) => {
                     keyboardLoops.set(keyboardLoopId2, []);
                 }
                 let keyboardLoop = keyboardLoops.get(keyboardLoopId2);
-                if (keyboardLoop.indexOf(this) == -1) {
+                if ((keyboardLoop === null || keyboardLoop === void 0 ? void 0 : keyboardLoop.indexOf(this)) == -1) {
                     keyboardLoop.push(this);
                 }
             }
             let keyboardLoop = keyboardLoops.get(keyboardLoopId);
             this.addEventListener("keydown", (e) => {
-                if (!["ArrowDown", "ArrowUp"].includes(e.key))
+                var _a;
+                const keyboardEvent = e;
+                if (!["ArrowDown", "ArrowUp"].includes(keyboardEvent.key))
                     return;
                 let selector = "input:not([disabled]), button:not([disabled]), select:not([disabled]), textarea:not([disabled])";
-                let loop = keyboardLoop.filter((el) => {
-                    let child = el.shadowRoot.querySelector(selector);
+                let loop = keyboardLoop === null || keyboardLoop === void 0 ? void 0 : keyboardLoop.filter((el) => {
+                    var _a;
+                    let child = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(selector);
                     if (!child)
                         return false;
                     let cpStyle = window.getComputedStyle(child);
@@ -187,7 +196,7 @@ const Form = (superClass) => {
                         child.getBoundingClientRect().width > 0);
                 });
                 let next = null;
-                if (e.key == "ArrowDown") {
+                if (keyboardEvent.key == "ArrowDown" && loop) {
                     let index = loop.indexOf(this);
                     if (index == loop.length - 1) {
                         next = loop[0];
@@ -196,7 +205,7 @@ const Form = (superClass) => {
                         next = loop[index + 1];
                     }
                 }
-                else if (e.key == "ArrowUp") {
+                else if (keyboardEvent.key == "ArrowUp" && loop) {
                     let index = loop.indexOf(this);
                     if (index == 0) {
                         next = loop[loop.length - 1];
@@ -205,14 +214,15 @@ const Form = (superClass) => {
                         next = loop[index - 1];
                     }
                 }
-                let elt = next.shadowRoot.querySelector(selector);
-                if (elt) {
+                let elt = (_a = next === null || next === void 0 ? void 0 : next.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(selector);
+                if (elt && elt.focus) {
                     elt.focus();
                     e.preventDefault();
                 }
             });
         }
         connectedCallback() {
+            this.formDataProvider = this.getAncestorAttributeValue("formDataProvider");
             super.connectedCallback();
             this.addKeyboardNavigation();
         }
@@ -245,6 +255,12 @@ const Form = (superClass) => {
     __decorate([
         property({ type: Boolean })
     ], FormElement.prototype, "disabled", void 0);
+    __decorate([
+        property({ type: String, attribute: "data-aria-label" })
+    ], FormElement.prototype, "ariaLabel", void 0);
+    __decorate([
+        property({ type: String, attribute: "data-aria-labelledby" })
+    ], FormElement.prototype, "ariaLabelledby", void 0);
     __decorate([
         property()
     ], FormElement.prototype, "name", null);

package/core/mixins/FormInput.d.ts

@@ -19,16 +19,20 @@ declare const Form: <T extends Constructor<FormElementInterface>>(superClass: T)
         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;
+        handleChange(e?: Event | undefined): void;
+        handleBlur(e?: Event | undefined): void;
         getValueForFormPublisher(): any;
+        focus?: (() => void) | undefined;
+        shadowRoot?: ShadowRoot | undefined;
         error: boolean;
         autofocus: boolean;
         required: boolean;
         disabled: true | null;
         formDataProvider: string;
-        _value: any;
-        value: any;
+        ariaLabelledby?: string | undefined;
+        ariaLabel?: string | undefined;
+        _value: string | null;
+        value: string | null;
         _name: string;
         name: string;
         props: any;

package/core/mixins/FormInput.js

@@ -19,11 +19,12 @@ const Form = (superClass) => {
         }
         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;
-            this.getFormPublisher().isFormValid = false;
+            let formPublisher = this.getFormPublisher();
+            if (formPublisher)
+                formPublisher.isFormValid = false;
             input.reportValidity();
         }
         set type(value) {

package/core/mixins/Subscriber.d.ts

@@ -1,19 +1,21 @@
-import { LitElement } from "lit";
 import { APIConfiguration } from "@supersoniks/concorde/core/utils/api";
+import { LitElement } from "lit";
+import { PublisherInterface, TypeAndRecordOfType } from "@supersoniks/concorde/core/_types/types";
 declare type Constructor<T> = new (...args: any[]) => T;
-export interface SubscriberInterface {
-    props: any;
+export interface SubscriberInterface<PropsType = any> {
+    props: PropsType | null;
     propertyMap: Object;
     isConnected: boolean;
     getAncestorAttributeValue(attributeName: string): string;
     hasAncestorAttribute(attributeName: string): boolean;
     querySelectorAll(selector: string): NodeListOf<Element>;
-    publisher: any;
+    publisher: TypeAndRecordOfType<PublisherInterface<PropsType>>;
     dataProvider: string | null;
     noShadowDom: string | null;
     debug: HTMLElement | null;
     defferedDebug: boolean | null;
     displayContents: boolean;
+    shadowRoot?: ShadowRoot;
     dispatchEvent(event: Event): void;
     setAttribute(name: string, value: string): void;
     addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
@@ -27,5 +29,5 @@ export interface SubscriberInterface {
     hasAttribute(attributeName: String): boolean;
     disconnectedCallback(): void;
 }
-declare const Subscriber: <T extends Constructor<LitElement>>(superClass: T) => Constructor<SubscriberInterface> & T;
+declare const Subscriber: <PropsType = any, T extends Constructor<LitElement> = any>(superClass: T, type?: PropsType | undefined) => Constructor<SubscriberInterface<PropsType>> & T;
 export default Subscriber;