@supersoniks/concorde 1.0.7 → 1.1.1

package/core/mixins/Subscriber.js

@@ -0,0 +1,379 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy.mjs";
+import { property } from "lit/decorators.js";
+import "@supersoniks/concorde/core/components/ui/icon/icon";
+import API from "@supersoniks/concorde/core/utils/api";
+import HTML from "@supersoniks/concorde/core/utils/HTML";
+import DataBindObserver from "@supersoniks/concorde/core/utils/DataBindObserver";
+import Objects from "../utils/Objects";
+let keepDebugOnMouseOut = false;
+let debugs = new Set();
+//Pour référence
+// export class Subscribable extends HTMLElement {
+//   constructor() {
+//     super();
+//   }
+//   requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void{name;oldValue;options;}
+//   protected updated(changedProperties: Map<string, PropertyDeclaration>): void {
+//     changedProperties;
+//   }
+//   connectedCallback(): void {}
+//   disconnectedCallback(): void {}
+//   protected createRenderRoot(): Element | ShadowRoot {
+//     return this.shadowRoot || this;
+//   }
+// }
+const Subscriber = (superClass) => {
+    /**
+     * La mixin Subscriber permet lier un composant à un publisher.
+     * La liaison à un publisher se fait via l'attribut *dataProvider* du composant qui représente ce que l'on obtient en appellant PublisherManager.get(dataProvider).
+     * les propriétés du composant sont automatiquement remplies avec les propriétés du même nom dans les données du publisher.
+     * Le composant est automatiquement mis à jour lorsque les données du publisher sont mises à jour.
+     */
+    class SubscriberElement extends superClass {
+        constructor(...args) {
+            super();
+            /**
+             * Par défaut on chée un shadow dom mais on peut demander à ne pas en avoir via cette propriété et un attribut associé.
+             * Cela se fait à l'initialisation uniquement et n'est pas modifiable lors de la vie du composant.
+             */
+            this.noShadowDom = null;
+            this.title = "";
+            /**
+             * L'id / l'adresse du publisher accessible via PublisherManager.get(dataProvider)
+             */
+            this.dataProvider = null;
+            /**
+             * On peut utiliser cette fonction pour lier un publisher spécifique au composant si besoin.
+             * voir l'utilisation dans list.ts
+             */
+            this.bindPublisher = null;
+            /**
+             * Les props du composant.
+             * Elles sont injectées en profondeur dans le publisher pour permettre la mutualisation des données entre les composants.
+             * Par conséquent l'assignation de ces propriété avec une chaine json (html classic), ou un objet / un tableaun remplie les données du publisher.
+             * Les propriétés des subscribers associés au même dataProvider sont donc "remplies" avec ces données, voir aussi le dataBinding à ce sujet.
+             */
+            this._props = null;
+            this.defferedDebug = null;
+            /**
+             * Ajoute un debugger au composant pour afficher en temps réel les données présentes dans sont publisher
+             */
+            this.debug = null;
+            /**
+             * On assign est enregistré car c'est un écouteur du publisher qui doit être délié lorsque l'objet est déconnecté du dom.
+             */
+            this.onAssign = null;
+            this.args = args;
+        }
+        /**
+         * retourn un objet contenant les propriétés de value + celle de props si elle ne sont pas déjà dans value.
+         */
+        makeShadow(props, value) {
+            if (typeof value == "object" && value !== null) {
+                let newValue = Array.isArray(value) ? [] : {};
+                Object.assign(newValue, value);
+                value = newValue;
+                for (let key in props) {
+                    if (!value[key])
+                        value[key] = props[key];
+                }
+            }
+            return value;
+        }
+        /**
+         * va de parent en parent pour trouver un attribut
+         * @param attributeName nom de l'attribut
+         * @returns true si l'attribut est trouvé
+         */
+        hasAncestorAttribute(attributeName) {
+            return this.getAncestorAttributeValue(attributeName) != null;
+        }
+        /**
+         * Va de parent en parent pour trouver un attribut
+         * @param attributeName nom de l'attribut
+         * @returns valeur de l'attribut ou null si l'attribut n'est pas trouvé
+         */
+        getAncestorAttributeValue(attributeName) {
+            let node = this;
+            return HTML.getAncestorAttributeValue(node, attributeName);
+        }
+        get props() {
+            if (!this.publisher)
+                return this._props;
+            return this.publisher.get();
+        }
+        set props(value) {
+            if (typeof value == "string" && ["{", "["].includes(value.trim().charAt(0))) {
+                value = JSON.parse(value);
+            }
+            if (value == null || value === "")
+                value = {};
+            if (!this.publisher)
+                this.initPublisher();
+            this._props = value;
+            if (this.publisher) {
+                this.publisher.set(value);
+            }
+            this.requestUpdate();
+        }
+        updated(_changedProperties) {
+            super.updated(_changedProperties);
+            if (this.shadowRoot) {
+                if (this.shadowRoot.children.length == 0)
+                    this.style.display = "none";
+                else
+                    this.style.removeProperty("display");
+            }
+            else {
+                if (this.children.length == 0)
+                    this.style.display = "none";
+                else
+                    this.style.removeProperty("display");
+            }
+        }
+        connectedCallback() {
+            if (this.hasAttribute("lazyRendering")) {
+                let options = {
+                    root: null,
+                    rootMargin: Math.max(window.innerWidth * 0.1, window.innerHeight * 0.1) + "px",
+                };
+                let firstView = true;
+                let iObserver = new IntersectionObserver((entries) => {
+                    for (const e of entries) {
+                        if (firstView && e.isIntersecting) {
+                            firstView = false;
+                            this.initWording();
+                            this.initPublisher();
+                        }
+                    }
+                }, options);
+                iObserver.observe(this);
+            }
+            else {
+                this.initWording();
+                this.initPublisher();
+            }
+            this.addDebugger();
+            super.connectedCallback();
+            SubscriberElement.instanceCounter++;
+        }
+        disconnectedCallback() {
+            this.removeDebugger();
+            super.disconnectedCallback();
+            if (this.publisher)
+                this.publisher.stopTemplateFilling(this);
+            if (this.onAssign)
+                this.publisher.offAssign(this.onAssign);
+        }
+        addDebugger() {
+            if (this.hasAttribute("debug") && !this.defferedDebug) {
+                if (!this.debug) {
+                    this.debug = document.createElement("div");
+                    let style = this.debug.style;
+                    style.position = "fixed";
+                    style.top = "0";
+                    style.right = "0";
+                    style.margin = "auto";
+                    style.borderRadius = ".7rem";
+                    style.backgroundColor = "#0f1729";
+                    style.color = "#c5d4f9";
+                    style.padding = "16px 16px";
+                    style.margin = "16px 16px";
+                    style.boxShadow = "0 10px 30px -18px rgba(0,0,0,.3)";
+                    style.overflowY = "auto";
+                    style.zIndex = "99999999";
+                    style.maxHeight = "calc(100vh - 32px)";
+                    style.fontFamily = "Consolas, monospace";
+                    style.maxWidth = "50vw";
+                    style.fontSize = "12px";
+                    style.minWidth = "300px";
+                    style.overflowWrap = "break-word";
+                }
+                this.addEventListener("click", (e) => {
+                    if (!e.ctrlKey)
+                        return;
+                    e.preventDefault();
+                    keepDebugOnMouseOut = !keepDebugOnMouseOut;
+                });
+                if (this.dataProvider) {
+                    let win = window;
+                    win[this.dataProvider] = this.publisher;
+                }
+                this.addEventListener("mouseover", () => {
+                    if (!keepDebugOnMouseOut)
+                        this.removeDebugger();
+                    document.body.appendChild(this.debug);
+                    debugs.add(this.debug);
+                });
+                this.addEventListener("mouseout", () => {
+                    if (!keepDebugOnMouseOut)
+                        this.removeDebugger();
+                });
+                this.publisher.onInternalMutation(() => {
+                    this.debug.innerHTML = `🤖 DataProvider : "<b style="font-weight:bold;color:#fff;">${this.dataProvider}</b>"<br>
+          <div style="font-size:10px;border-top:1px dashed;margin-top:5px;padding-left:23px;opacity:.6;padding-top:5px;">
+            Variable disponible dans la console<br>
+            ctrl + Clique : épingler / désépingler
+           </div>
+          <pre style="margin-top:10px;background:transparent;padding:0;font-size:inherit;color:inherit;">${JSON.stringify(this.publisher.get(), null, "  ")}</pre>`;
+                });
+            }
+        }
+        removeDebugger() {
+            debugs.forEach((debug) => {
+                if (document.body.contains(debug))
+                    document.body.removeChild(debug);
+            });
+            debugs = new Set();
+        }
+        /**
+         * Petite fonction utilitaire pour retourner la configuration a passer à l'utilitaire API
+         * Utilisée pour la configuration du wording / de la traduction ainsi que par le mixin fetcher par exemple
+         * A voir si on le bouge dans un utilitaire
+         */
+        getApiConfiguration() {
+            const token = this.getAncestorAttributeValue("token");
+            let serviceURL = this.getAncestorAttributeValue("serviceURL");
+            let userName = null;
+            let password = null;
+            let tokenProvider = null;
+            if (!token) {
+                userName = this.getAncestorAttributeValue("userName");
+                password = this.getAncestorAttributeValue("password");
+                tokenProvider = this.getAncestorAttributeValue("tokenProvider");
+            }
+            return { serviceURL, token, userName, password, tokenProvider };
+        }
+        /**
+         * Initialise le remplisage automatique des traductions / du wording
+         * Un publisher spécifique est créé pour le composant à l'adresse "sonic-wording"
+         * Le composant recherche la valeur de l'attribute "wordingProvider" que contient le point d'accès à l'api de traduction / libellés
+         * Il utilise ce service et le publisher créé pour remplir automatiquement toutes les propriétés préfixées avec "wording_".
+         */
+        initWording() {
+            return __awaiter(this, void 0, void 0, function* () {
+                let hasWording = false;
+                const propNames = Object.getOwnPropertyNames(this.constructor.prototype);
+                for (let p of propNames) {
+                    if (p.indexOf("wording_") == 0) {
+                        hasWording = true;
+                        break;
+                    }
+                }
+                if (!hasWording)
+                    return;
+                let publisher = PublisherManager.getInstance().get("sonic-wording");
+                let wordingProvider = this.getAncestorAttributeValue("wordingProvider");
+                const api = new API(this.getApiConfiguration());
+                if (wordingProvider) {
+                    let wordings = [];
+                    let wordingsAll = [];
+                    for (let p of propNames) {
+                        if (p.indexOf("wording_") == 0) {
+                            let p8 = p.substring(8);
+                            if (!publisher.get()[p]) {
+                                publisher[p] = "...";
+                                wordings.push(p8);
+                            }
+                            wordingsAll.push(p8);
+                        }
+                    }
+                    if (wordings.length > 0) {
+                        let result = yield api.post(wordingProvider, { labels: wordings });
+                        for (let elt in result) {
+                            publisher["wording_" + elt] = result[elt];
+                        }
+                    }
+                    publisher.startTemplateFilling(this);
+                }
+            });
+        }
+        /**
+         *
+         * Fonction native de lit surchargée pour la gestion du mode noShadowDom
+         * Le comportement de data binding est également créé ici va l'utilitaire DataBindObserver
+         */
+        createRenderRoot() {
+            if (this.noShadowDom === "" || this.getAttribute("noShadowDom") === "") {
+                return this;
+            }
+            let shadowRoot = super.createRenderRoot();
+            DataBindObserver.observe(shadowRoot);
+            return shadowRoot;
+        }
+        initPublisher() {
+            if (!document)
+                return;
+            if (this.publisher) {
+                this.publisher.stopTemplateFilling(this);
+                if (this.onAssign)
+                    this.publisher.offAssign(this.onAssign);
+            }
+            const mng = PublisherManager.getInstance();
+            if (!this.dataProvider)
+                this.dataProvider = this.getAncestorAttributeValue("dataProvider");
+            let publisherId = this.dataProvider;
+            if (!publisherId && this._props) {
+                this.dataProvider = publisherId = "__subscriber__" + SubscriberElement.instanceCounter;
+            }
+            if (publisherId) {
+                if (this.bindPublisher) {
+                    mng.set(publisherId, this.bindPublisher());
+                }
+                let pub = mng.get(publisherId);
+                this.dataProvider = publisherId;
+                if (this.hasAttribute("subDataProvider")) {
+                    let dataPath = this.getAttribute("subDataProvider");
+                    this.dataProvider = publisherId + "/" + dataPath;
+                    pub = Objects.traverse(pub, dataPath.split("."));
+                    this.publisher = pub;
+                }
+                this.publisher = pub;
+            }
+            // this.publisher = this.bindPublisher();
+            if (this.publisher) {
+                this.onAssign = () => {
+                    this.requestUpdate();
+                };
+                this.publisher.onAssign(this.onAssign);
+                this.publisher.startTemplateFilling(this);
+                if (this._props) {
+                    this.publisher.set(this._props);
+                }
+            }
+        }
+    }
+    SubscriberElement.instanceCounter = 0;
+    __decorate([
+        property({ type: String, attribute: "data-title" })
+    ], SubscriberElement.prototype, "title", void 0);
+    __decorate([
+        property({ reflect: true })
+    ], SubscriberElement.prototype, "dataProvider", void 0);
+    __decorate([
+        property()
+    ], SubscriberElement.prototype, "bindPublisher", void 0);
+    __decorate([
+        property()
+    ], SubscriberElement.prototype, "props", null);
+    return SubscriberElement;
+};
+export default Subscriber;
+let win = window;
+if (!win.SonicPublisherManager)
+    win.SonicPublisherManager = PublisherManager;

package/core/mixins/TemplatesContainer.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from "lit";
+declare type Constructor<T> = new (...args: any[]) => T;
+export declare class TemplatesContainerInterface extends LitElement {
+    connectedCallback(): void;
+    templateParts: Record<string, HTMLTemplateElement>;
+    templatePartsList: HTMLTemplateElement[];
+    templates: HTMLTemplateElement[];
+    templateList: HTMLTemplateElement[];
+    templateValueAttribute: string;
+}
+declare const TemplatesContainer: <T extends Constructor<LitElement>>(superClass: T) => Constructor<TemplatesContainerInterface> & T;
+export default TemplatesContainer;

package/core/mixins/TemplatesContainer.js

@@ -0,0 +1,60 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { property } from "lit/decorators.js";
+import { LitElement } from "lit";
+const TemplatesContainer = (superClass) => {
+    /**
+     * Mixin pour mutualiser la gestion des templates dans différents composants (list, router, date, states...)
+     * Les templates sont soit dans aus sein du composant dans la déclaration html, soit renseignés via l'attribut "templates"
+     */
+    class TemplatesContainerElement extends superClass {
+        constructor() {
+            super(...arguments);
+            /**
+             * On peut passer directement un tableu de template au composant via sont attribut.
+             * Voir utilisation dans le composant queue qui permet de ne pas doubler les balises templates à la déclaration.
+             */
+            this.templates = null;
+            /**
+             * C'est le nom de l'attribut qui permet de regrouper les templates possédant cet attributs dans templateParts et templatePartsList.
+             * Ceux qui n'ont pas cet attribut sont stockés dans templateList
+             */
+            this.templateValueAttribute = "data-value";
+            /**
+             * Tableau contenant tous les templates qui n'on pas d'attribut templateValueAttribute
+             */
+            this.templateList = [];
+            /**
+             * Objet contenant tous les templates qui ont un attribut templateValueAttribute.
+             * Les clefs sont la valeur de l'attribut du template dont le nom est la valeur de templateValueAttribute.
+             */
+            this.templateParts = {};
+            /**
+             * Comme template parts mais sous forme de tableau, sans les clefs.
+             */
+            this.templatePartsList = [];
+        }
+        connectedCallback() {
+            let templates = this.templates || [...this.querySelectorAll("template")];
+            for (let t of templates) {
+                if (t.hasAttribute(this.templateValueAttribute)) {
+                    this.templateParts[t.getAttribute(this.templateValueAttribute)] = t;
+                    this.templatePartsList.push(t);
+                }
+            }
+            this.templateList = templates.filter((t) => !t.getAttribute("data-value"));
+            if (this.templateList.length == 0)
+                this.templateList = templates;
+            super.connectedCallback();
+        }
+    }
+    __decorate([
+        property({ type: Array })
+    ], TemplatesContainerElement.prototype, "templates", void 0);
+    return TemplatesContainerElement;
+};
+export default TemplatesContainer;

package/core/mixins/mixins.d.ts

@@ -0,0 +1,6 @@
+import "./Fetcher";
+import "./FormCheckable";
+import "./FormElement";
+import "./FormInput";
+import "./Subscriber";
+import "./TemplatesContainer";

package/core/mixins/mixins.js

@@ -0,0 +1,6 @@
+import "./Fetcher";
+import "./FormCheckable";
+import "./FormElement";
+import "./FormInput";
+import "./Subscriber";
+import "./TemplatesContainer";

package/core/utils/Arrays.d.ts

@@ -0,0 +1,97 @@
+declare class Arrays {
+    /**
+     * Vérifie si les deux tableaux ont le même contenu
+     */
+    static areEqual(array1: Array<any>, array2: Array<any>): boolean;
+    /**
+     * Fournie une fonction to1D qui transforme un tableau 2D en un tableau 1D par concaténation
+     */
+    static from2d(source: Array<Array<Record<string, any>>>): {
+        to1D: () => {
+            /**Obtenir le tableau final*/
+            get: () => Record<string, any>[];
+            everyItem: () => {
+                has: () => {
+                    same: () => {
+                        value: () => {
+                            forKey: (key: string) => boolean;
+                        };
+                    };
+                };
+                value: () => {
+                    forKey: (key: string) => any;
+                };
+                copy: () => {
+                    fromKey: (atKey: string) => {
+                        toKey: (toKey: string) => void;
+                    };
+                };
+            };
+            map: (f: (elt: Record<string, any>) => any) => any;
+            filter: (f: (elt: Record<string, any>) => any) => any;
+            find: (f: (elt: Record<string, any>) => any) => Record<string, any> | undefined;
+            some: (f: (elt: Record<string, any>) => any) => boolean;
+            every: (f: (elt: Record<string, any>) => any) => boolean;
+            group: () => {
+                byKey: (key: string) => any;
+            };
+            without: () => {
+                duplicates: () => {
+                    forKey: (key: string) => any;
+                };
+                itemsIn: (toRemoveFromSource: Record<string, any>[]) => {
+                    havingSameValue: () => {
+                        forKey: (key: string) => any;
+                    };
+                };
+            };
+        };
+    };
+    /**
+     * Fournie des méthodes pour manipuler un tableau
+     * A l'écriture cela permet d'avoir des phrases du type:
+     * let data = Arrays.from(mon tableau)
+     * puis data.everyItem().has().same().value().forkey("key");
+     * Peu mieux faire. ou voir a remplacer un jour par loadHash par exemple.
+     **/
+    static from(source: Array<Record<string, any>>): {
+        /**Obtenir le tableau final*/
+        get: () => Record<string, any>[];
+        everyItem: () => {
+            has: () => {
+                same: () => {
+                    value: () => {
+                        forKey: (key: string) => boolean;
+                    };
+                };
+            };
+            value: () => {
+                forKey: (key: string) => any;
+            };
+            copy: () => {
+                fromKey: (atKey: string) => {
+                    toKey: (toKey: string) => void;
+                };
+            };
+        };
+        map: (f: (elt: Record<string, any>) => any) => any;
+        filter: (f: (elt: Record<string, any>) => any) => any;
+        find: (f: (elt: Record<string, any>) => any) => Record<string, any> | undefined;
+        some: (f: (elt: Record<string, any>) => any) => boolean;
+        every: (f: (elt: Record<string, any>) => any) => boolean;
+        group: () => {
+            byKey: (key: string) => any;
+        };
+        without: () => {
+            duplicates: () => {
+                forKey: (key: string) => any;
+            };
+            itemsIn: (toRemoveFromSource: Array<Record<string, any>>) => {
+                havingSameValue: () => {
+                    forKey: (key: string) => any;
+                };
+            };
+        };
+    };
+}
+export default Arrays;