@supersoniks/concorde 1.1.40 → 1.1.41

package/core/components/functional/sdui/sdui.js

@@ -16,88 +16,177 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { Fetcher, Subscriber } from "@supersoniks/concorde/mixins";
-import { Objects } from "@supersoniks/concorde/utils";
+import { HTML, Objects } from "@supersoniks/concorde/utils";
 const tagName = "sonic-sdui"; // For Astro.build
-let SonicComponent = class SonicComponent extends Fetcher(Subscriber(LitElement)) {
+import SDUIDescriptorTransformer from "@supersoniks/concorde/core/components/functional/sdui/SDUIDescriptorTransformer";
+/**
+ *  ### sonic-sdui (Server Driven User Interface) est un fetcher chargant un JSON décrivant une interface utilisateur
+ *
+ * Extends mixins : Fetcher, [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page)
+ *
+ * * Si le composant possède un attribut *fetch*, il charge un contenu via un appel d'api web.<br>
+ * Voir [fetcher](./?path=/docs/core-components-functional-fetch--basic) pour la configuration des autres attributs.
+ * * Le format du JSON est décrit par le type SDUIDescriptor
+ * * Un attribut supplémentaire `transformation` permet de transformer le json reçu avant la générationd e l'interface utilisateur<br>
+ * Son format est décrit par le type SDUITransformDescription
+ *
+ *  * Si le résultat de la requête est un objet, il est imbriqué dans un tableau pour garantir le fonctionnement.<br>
+ * Cependant, si l'attribut `extractValues` est présent, les valeurs des propriétés de l'objet sont mises dans  dans un tableau pour le rendu.
+ * * La propriété _key_ est ajoutés à la donnée de chaque item. Elle contient l'index dans le cas d'un liste simple ou la clés associée à la valeur si `extractValues` est définit.
+ * * On peut appler la methode invalidate() sur son publishe pour declencher le rechargement des données
+ * *
+ */
+let SonicSDUI = class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
     connectedCallback() {
         this.noShadowDom = "";
+        this.displayContents = true;
         this.isFetchEnabled = this.hasAttribute("fetch");
         super.connectedCallback();
     }
+    /**
+     * On peut passer la description sous form de props, sinon il faut utiliser l'attribut fetch
+     */
     get props() {
         return super.props;
     }
-    loadJS(src) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const p = new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
-                let script = document.createElement("script");
-                script.src = src;
-                script.onload = () => resolve(true);
-                script.onerror = () => resolve(true);
-                document.head.appendChild(script);
-            }));
-            return p;
-        });
-    }
-    loadCSS(src) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const p = new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
-                var cssnode = document.createElement("link");
-                cssnode.type = "text/css";
-                cssnode.rel = "stylesheet";
-                cssnode.href = src;
-                cssnode.onload = () => resolve(true);
-                cssnode.onerror = () => resolve(true);
-                document.head.appendChild(cssnode);
-            }));
-            return p;
-        });
-    }
     set props(value) {
         super.props = value;
         this.updateContents();
     }
+    /**
+     * updateContents est déclenché quand les props sont renseignées
+     * Le contenu du composant est regénéré en fonction du descripteur fourni
+     */
     updateContents() {
         return __awaiter(this, void 0, void 0, function* () {
-            while ([...this.children].filter((elt) => elt.nodeName != "SLOT").length > 0) {
-                this.removeChild(this.children[0]);
-            }
+            this.removeChildren();
             if (!this.props)
                 return;
-            try {
-                if (this.props.js) {
-                    for (const src of this.props.js)
-                        this.loadJS(src);
-                }
-                if (this.props.css) {
-                    for (const src of this.props.css)
-                        this.loadCSS(src);
-                }
-            }
-            catch (e) { }
-            let children = this.props.nodes;
-            if (!children)
+            this.loadAssets();
+            yield this.transformSDUIDescriptor();
+            this.parseRootNodes();
+        });
+    }
+    /**
+     * Suppressiond du contenu du composant avant le génération de la nouvelle ui
+     */
+    removeChildren() {
+        while ([...this.children].filter((elt) => elt.nodeName != "SLOT").length > 0) {
+            this.removeChild(this.children[0]);
+        }
+    }
+    /**
+     * Chargement de fichiers js et css associés si besoin
+     **/
+    loadAssets() {
+        if (!this.props)
+            return;
+        if (this.props.js) {
+            for (const src of this.props.js)
+                HTML.loadJS(src);
+        }
+        if (this.props.css) {
+            for (const src of this.props.css)
+                HTML.loadCSS(src);
+        }
+    }
+    /**
+     * Transformation de la data fournie via props si il y a un attribut transformation
+     * */
+    transformSDUIDescriptor() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.hasAttribute("transformation"))
                 return;
+            let result = yield fetch(this.getAttribute("transformation"));
+            let json = yield result.json();
+            let transformer = new SDUIDescriptorTransformer();
+            yield transformer.transform(this.props, json);
+        });
+    }
+    /**
+     * Point d'entrée : transformation des noeuds fournis en éléments graphiques
+     **/
+    parseRootNodes() {
+        if (!this.props)
+            return;
+        let nodes = this.props.nodes;
+        if (!nodes)
+            return;
+        nodes.forEach((node) => this.appendChild(this.parseChild(node)));
+    }
+    /**
+     * On parse un noeud ce qui crée un éléments graphique et ses enfants par recursivité via `handleChildNodes`
+     */
+    parseChild(node) {
+        let tagName = node.tagName || "div";
+        let { element, contentElement } = this.handleLibrary(node, tagName);
+        this.handleAttributes(node, element);
+        element = this.handleMarkup(node, element);
+        if (!contentElement)
+            contentElement = element;
+        this.handleChildNodes(node, contentElement, element);
+        this.handleInnerHTML(node, contentElement);
+        if (node.prefix || node.suffix) {
+            const container = this.handlePrefixSuffix(node, element);
+            return container;
+        }
+        return element;
+    }
+    /**
+     * Si le noeud courant a des propriétés prefix et ou suffix il est entouré des markups fournis dans ces props.
+     * Le tout est inclu dans une div en display contents
+     */
+    handlePrefixSuffix(node, element) {
+        const container = document.createElement("div");
+        container.innerHTML = (node.prefix || "") + element.outerHTML + (node.suffix || "");
+        container.style.display = "contents";
+        return container;
+    }
+    /**
+     * Création des enfants du noeud courant
+     * Si l'enfant à un attribut parentElementSelector, il est ajouté dans le noeud correspondant au sélecteur css associé et non pas dans l'élément directement.
+     */
+    handleChildNodes(node, contentElement, element) {
+        if (node.nodes) {
+            let children = node.nodes;
             for (let child of children) {
-                this.appendChild(this.parseChild(child));
+                let childElement = this.parseChild(child);
+                let nodeToAppendOn = contentElement;
+                if (child.parentElementSelector) {
+                    nodeToAppendOn = element.querySelector(child.parentElementSelector) || contentElement;
+                }
+                if (nodeToAppendOn.shadowRoot)
+                    nodeToAppendOn.shadowRoot.appendChild(childElement);
+                else
+                    nodeToAppendOn.appendChild(childElement);
             }
-        });
+        }
     }
-    parseChild(props) {
-        let type = props.type || "div";
+    /**
+     * Gestion de librarie :
+     * * Si l'élément référence un élément de la librairie, on se sert de cet élément comme model pour créer le composant graphique.
+     * * Sa propriété contentElement retournée vaut element par défaut.
+     * * Si contentElementSelector est definit, alors contentElement correspond à l'élément obtenu par selection css d'après la valeurs de contentElementSelector
+     * * Les éléments enfants seront ensuite ajoutés dans contentElement
+     */
+    handleLibrary(node, tagName) {
         let element;
-        if (props.markup) {
-            element = document.createElement("div");
-            element.style.display = "contents";
-            element.innerHTML = props.markup;
-            return element;
-        }
-        if (props.library && this.props.library) {
-            element = this.parseChild(this.props.library[props.library] || { type: "div" });
+        let contentElement;
+        if (node.libraryKey && this.props.library) {
+            element = this.parseChild(this.props.library[node.libraryKey] || { tagName: "div" });
+            let selector = (this.props.library[node.libraryKey] || {}).contentElementSelector;
+            if (selector)
+                contentElement = element.querySelector(selector);
         }
         else
-            element = document.createElement(type);
-        let attributes = props.attributes;
+            element = document.createElement(tagName);
+        return { element, contentElement };
+    }
+    /**
+     * Remplissage des attributs html avec les attributs fournis dans le noeud
+     */
+    handleAttributes(node, element) {
+        let attributes = node.attributes;
         for (let k in attributes) {
             let attr = attributes[k];
             if (Objects.isObject(attr)) {
@@ -105,31 +194,41 @@ let SonicComponent = class SonicComponent extends Fetcher(Subscriber(LitElement)
             }
             element.setAttribute(k, attr);
         }
-        if (props.innerHTML) {
-            element.innerHTML = props.innerHTML;
+    }
+    /**
+     * Si une propriété markup est fournie, l'élément est créé à partir de la chaine html fournie avant d'être configuré
+     */
+    handleMarkup(node, element) {
+        if (node.markup) {
+            element = document.createElement("div");
+            element.style.display = "contents";
+            element.innerHTML = node.markup;
         }
-        if (props.nodes) {
-            let children = props.nodes;
-            for (let child of children) {
-                if (element.shadowRoot)
-                    element.shadowRoot.appendChild(this.parseChild(child));
-                else
-                    element.appendChild(this.parseChild(child));
-            }
+        return element;
+    }
+    /**
+     * si le noeud à une propriété innerHTML, on l'ajout ay innerHTML de l'élément html en cours de création
+     */
+    handleInnerHTML(node, contentElement) {
+        var _a;
+        if (!node.innerHTML)
+            return;
+        if (node.innerHTML.indexOf("wording_") != -1) {
+            let wordingProvider = this.getAncestorAttributeValue("wordingProvider");
+            (_a = this.api) === null || _a === void 0 ? void 0 : _a.post(wordingProvider, { labels: [node.innerHTML.substring(8)] }).then((value) => {
+                if (contentElement)
+                    contentElement.innerHTML += value;
+            });
         }
-        if (props.prefix || props.suffix) {
-            const container = document.createElement("div");
-            container.innerHTML = (props.prefix || "") + element.outerHTML + (props.suffix || "");
-            container.style.display = "contents";
-            return container;
+        else if (contentElement) {
+            contentElement.innerHTML += node.innerHTML;
         }
-        return element;
     }
 };
 __decorate([
     property()
-], SonicComponent.prototype, "props", null);
-SonicComponent = __decorate([
+], SonicSDUI.prototype, "props", null);
+SonicSDUI = __decorate([
     customElement(tagName)
-], SonicComponent);
-export { SonicComponent };
+], SonicSDUI);
+export { SonicSDUI };

package/core/components/functional/sdui/types.d.ts

@@ -0,0 +1,35 @@
+export declare type SDUIDescriptor = {
+    js?: Array<string>;
+    css?: Array<string>;
+    library?: Record<string, SDUINode>;
+    nodes?: Array<SDUINode>;
+};
+export declare type SDUINode = {
+    libraryKey?: string;
+    markup?: string;
+    tagName?: string;
+    attributes: Record<string, string>;
+    nodes?: Array<SDUINode>;
+    innerHTML?: string;
+    prefix?: string;
+    suffix?: string;
+    contentElementSelector?: string;
+    parentElementSelector?: string;
+};
+export declare type SDUITransformDescription = {
+    library?: Record<string, SDUINode>;
+    transforms: Array<SDUITransformAction>;
+};
+export declare type SDUITransformAction = {
+    action: "remap" | "unwrap" | "wrap" | "delete" | "insert" | "move";
+    patterns?: Array<SDUINode>;
+    after?: SDUINode;
+    before?: SDUINode;
+    in?: SDUINode;
+    ui?: string;
+};
+export declare type SDUITransformList = Array<{
+    parent: SDUINode;
+    child: SDUINode;
+    index: number;
+}>;

package/core/components/functional/sdui/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -13,8 +13,8 @@ export declare class Alert extends LitElement {
      * Peut être renseigné dans le slot pour créer des messages plus complexes
      */
     text: string;
-    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     background: boolean;
-    status: "default" | "error" | "warning" | "primary" | "info";
+    status: 'default' | 'error' | 'warning' | 'primary' | 'info';
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/alert/alert.js

@@ -26,13 +26,13 @@ let Alert = class Alert extends LitElement {
         /**
          * Titre du message d'erreur
          */
-        this.label = "";
+        this.label = '';
         /**
          * Peut être renseigné dans le slot pour créer des messages plus complexes
          */
-        this.text = "";
+        this.text = '';
         this.background = false;
-        this.status = "default";
+        this.status = 'default';
     }
     render() {
         return html `<div part="alert" class="alert">
@@ -66,20 +66,21 @@ Alert.styles = [
         line-height: 1.2;
         border-radius: var(--sc-alert-rounded);
       }
-      z .label {
+
+      .label {
         font-weight: var(--sc-alert-label-fw);
       }
 
-      :host([status="warning"]) {
+      :host([status='warning']) {
         --sc-alert-color: var(--sc-warning);
       }
-      :host([status="error"]) {
+      :host([status='error']) {
         --sc-alert-color: var(--sc-danger);
       }
-      :host([status="info"]) {
+      :host([status='info']) {
         --sc-alert-color: var(--sc-info);
       }
-      :host([status="success"]) {
+      :host([status='success']) {
         --sc-alert-color: var(--sc-success);
       }
 
@@ -90,7 +91,7 @@ Alert.styles = [
       }
       :host([background]) .alert:before {
         background-color: currentColor;
-        content: "";
+        content: '';
         display: block;
         position: absolute;
         left: 0;
@@ -111,10 +112,10 @@ Alert.styles = [
       }
 
       /*Rounded*/
-      :host([size="xs"]) .alert {
+      :host([size='xs']) .alert {
         --sc-alert-rounded: var(--sc-rounded-sm);
       }
-      :host([size="sm"]) .alert {
+      :host([size='sm']) .alert {
         --sc-alert-rounded: var(--sc-rounded-sm);
       }
     `,

package/core/components/ui/form/checkbox/checkbox.js

@@ -51,6 +51,7 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
         super.connectedCallback();
     }
     render() {
+        let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
         return html `
       <label class="checkbox-container ${this.disabled ? "disabled" : ""}">
         <span class="icon-container">
@@ -68,7 +69,7 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
           <sonic-icon name="${this.iconName}" class="sc-input-icon"></sonic-icon>
         </span>
         <div class="checkbox-text">
-          ${this.label ? unsafeHTML(this.label) : ""}
+          ${this.label ? unsafeHTML(this.label + labelStarSuffix) : ""}
           <slot></slot>
           <slot name="description" class="${this.hasDescription ? "description" : "hidden"} ">
             ${this.description ? html `${unsafeHTML(this.description)}` : ""}

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

@@ -88,6 +88,10 @@ export declare class Input extends Input_base {
     hasSuffix: boolean;
     hasPrefix: boolean;
     updated(): void;
+    sameValueAsHandle?: (v: string) => void;
+    sameValueAsName?: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     onSlotChange(): void;
     inlineContentFocus(): void;
     render(): import("lit-html").TemplateResult<1>;

package/core/components/ui/form/input/input.js

@@ -43,6 +43,20 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
         this.hasSuffix = ((_c = this.slotSuffixNodes) === null || _c === void 0 ? void 0 : _c.length) ? true : false;
         this.hasPrefix = ((_d = this.slotPrefixNodes) === null || _d === void 0 ? void 0 : _d.length) ? true : false;
     }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.hasAttribute("sameValueAs")) {
+            this.sameValueAsName = this.getAttribute("sameValueAs");
+            this.sameValueAsHandle = (v) => (this.pattern = v);
+            this.getFormPublisher()[this.sameValueAsName].onAssign(this.sameValueAsHandle);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.hasAttribute("sameValueAs") && this.sameValueAsName) {
+            this.getFormPublisher()[this.sameValueAsName].offAssign(this.sameValueAsHandle);
+        }
+    }
     onSlotChange() {
         this.requestUpdate();
     }
@@ -50,7 +64,6 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
         var _a;
         if (!this.inlineContent)
             return;
-        console.log("oypouaze");
         (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
@@ -58,9 +71,13 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
             "has-prefix": this.hasPrefix,
             "has-suffix": this.hasSuffix,
         };
+        let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
         return html `
       <label for="form-element" class="${this.hasLabel ? "form-label" : "hidden"}"
-        >${this.label ? unsafeHTML(this.label) : ""}<slot name="label" @slotchange=${this.onSlotChange}></slot
+        >${this.label ? unsafeHTML(this.label + labelStarSuffix) : ""}<slot
+          name="label"
+          @slotchange=${this.onSlotChange}
+        ></slot
       ></label>
 
       <div @click=${this.inlineContentFocus} class="form-control ${classMap(slotClasses)}">
@@ -94,7 +111,7 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
           <slot name="suffix" @slotchange=${this.onSlotChange}></slot>
         </div>
       </div>
-      <slot name="description" class=" ${this.hasDescription ? "form-description" : "hidden"}">
+      <slot name="description" class="${this.hasDescription ? "form-description" : "hidden"}">
         ${this.description ? html `${unsafeHTML(this.description)}` : ""}
       </slot>
     `;

package/core/components/ui/form/input/password-helper.d.ts

@@ -0,0 +1,19 @@
+import { LitElement, nothing } from "lit";
+import "@supersoniks/concorde/core/components/ui/icon/icon";
+declare const SonicComponent_base: (new (...args: any[]) => import("../../../../mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+export declare class SonicComponent extends SonicComponent_base {
+    name?: string;
+    minChars: number;
+    hasNoChar: boolean;
+    hasEnoughChars: boolean;
+    hasMinuscule: boolean;
+    hasMajuscule: boolean;
+    hasNumber: boolean;
+    hasSpecialChar: boolean;
+    checkValue?: (v: string) => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    getIcon(test: boolean): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+export {};