@supersoniks/concorde 1.1.41 → 1.1.42

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

@@ -82,6 +82,10 @@ export declare class SonicSDUI extends SonicSDUI_base {
      * Transformation de la data fournie via props si il y a un attribut transformation
      * */
     private transformSDUIDescriptor;
+    /**
+     * Charge la library à utiliser
+     * */
+    private loadLibrary;
     /**
      * Point d'entrée : transformation des noeuds fournis en éléments graphiques
      **/

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

@@ -63,6 +63,7 @@ let SonicSDUI = class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
             if (!this.props)
                 return;
             this.loadAssets();
+            yield this.loadLibrary();
             yield this.transformSDUIDescriptor();
             this.parseRootNodes();
         });
@@ -103,6 +104,18 @@ let SonicSDUI = class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
             yield transformer.transform(this.props, json);
         });
     }
+    /**
+     * Charge la library à utiliser
+     * */
+    loadLibrary() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.hasAttribute("library"))
+                return;
+            let result = yield fetch(this.getAttribute("library"));
+            let json = yield result.json();
+            this.props.library = json;
+        });
+    }
     /**
      * Point d'entrée : transformation des noeuds fournis en éléments graphiques
      **/

package/core/components/ui/divider/divider.js

@@ -22,7 +22,7 @@ let Divider = class Divider extends LitElement {
     }
     render() {
         return html `<div part="divider">
-      <span class="text">${unsafeHTML(this.label)}<slot></slot></span>
+      <span class="text">${unsafeHTML(this.label ? this.label : "")}<slot></slot></span>
     </div>`;
     }
 };

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

@@ -51,7 +51,7 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
         super.connectedCallback();
     }
     render() {
-        let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
+        //let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
         return html `
       <label class="checkbox-container ${this.disabled ? "disabled" : ""}">
         <span class="icon-container">
@@ -69,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 + labelStarSuffix) : ""}
+          ${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/fieldset/legend.js

@@ -46,7 +46,7 @@ let Legend = class Legend extends LitElement {
             : ""}
 
       <div class="legend-content">
-        ${unsafeHTML(this.label)}
+        ${unsafeHTML(this.label ? this.label : "")}
         ${this.description
             ? html `<sonic-legend-description>${unsafeHTML(this.description)}</sonic-legend-description>`
             : ""}

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

@@ -71,10 +71,10 @@ 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 ? " *" : "";
+        //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 + labelStarSuffix) : ""}<slot
+        >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot
           name="label"
           @slotchange=${this.onSlotChange}
         ></slot

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

@@ -10,6 +10,12 @@ export declare class SonicComponent extends SonicComponent_base {
     hasMajuscule: boolean;
     hasNumber: boolean;
     hasSpecialChar: boolean;
+    wording_password_helper_decription: string;
+    wording_password_helper_min_length: string;
+    wording_password_helper_lower_case: string;
+    wording_password_helper_upper_case: string;
+    wording_password_helper_number: string;
+    wording_password_helper_special_char: string;
     checkValue?: (v: string) => void;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/core/components/ui/form/input/password-helper.js

@@ -10,7 +10,6 @@ import { Subscriber } from "@supersoniks/concorde/mixins";
 import { PublisherManager } from "@supersoniks/concorde/utils";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
 const tagName = "sonic-password-helper"; // For Astro.build
-console.log("HEY");
 let SonicComponent = class SonicComponent extends Subscriber(LitElement) {
     constructor() {
         super(...arguments);
@@ -21,6 +20,12 @@ let SonicComponent = class SonicComponent extends Subscriber(LitElement) {
         this.hasMajuscule = false;
         this.hasNumber = false;
         this.hasSpecialChar = false;
+        this.wording_password_helper_decription = "Le mot de passe doit contenir au moins :";
+        this.wording_password_helper_min_length = "8 caractères";
+        this.wording_password_helper_lower_case = "1 minuscule";
+        this.wording_password_helper_upper_case = "1 majuscule";
+        this.wording_password_helper_number = "1 chiffre";
+        this.wording_password_helper_special_char = "1 caractère spécial";
     }
     connectedCallback() {
         super.connectedCallback();
@@ -52,17 +57,16 @@ let SonicComponent = class SonicComponent extends Subscriber(LitElement) {
             ? html `<sonic-icon library="heroicons" , name="face-smile"></sonic-icon>`
             : html `<sonic-icon library="heroicons" , name="x-circle"></sonic-icon>`;
     }
-    //TODO Multilangue
     render() {
         if (this.hasNoChar)
             return nothing;
         return html `
-      <div>Le mot de passe doit contenir au moins :</div>
-      <div>${this.getIcon(this.hasEnoughChars)} 8 caractères</div>
-      <div>${this.getIcon(this.hasMinuscule)} 1 minuscule</div>
-      <div>${this.getIcon(this.hasMajuscule)} 1 majuscule</div>
-      <div>${this.getIcon(this.hasNumber)} 1 chiffre</div>
-      <div>${this.getIcon(this.hasSpecialChar)} 1 caractère spécial parmi !"#$%&'()*+,-./:;<=>?@[]^_\`{|}~</div>
+      <div>${this.wording_password_helper_decription}</div>
+      <div>${this.getIcon(this.hasEnoughChars)} ${this.wording_password_helper_min_length}</div>
+      <div>${this.getIcon(this.hasMinuscule)} ${this.wording_password_helper_lower_case}</div>
+      <div>${this.getIcon(this.hasMajuscule)} ${this.wording_password_helper_upper_case}</div>
+      <div>${this.getIcon(this.hasNumber)} ${this.wording_password_helper_number}</div>
+      <div>${this.getIcon(this.hasSpecialChar)} ${this.wording_password_helper_special_char}</div>
     `;
     }
 };
@@ -90,6 +94,24 @@ __decorate([
 __decorate([
     state()
 ], SonicComponent.prototype, "hasSpecialChar", void 0);
+__decorate([
+    property()
+], SonicComponent.prototype, "wording_password_helper_decription", void 0);
+__decorate([
+    property()
+], SonicComponent.prototype, "wording_password_helper_min_length", void 0);
+__decorate([
+    property()
+], SonicComponent.prototype, "wording_password_helper_lower_case", void 0);
+__decorate([
+    property()
+], SonicComponent.prototype, "wording_password_helper_upper_case", void 0);
+__decorate([
+    property()
+], SonicComponent.prototype, "wording_password_helper_number", void 0);
+__decorate([
+    property()
+], SonicComponent.prototype, "wording_password_helper_special_char", void 0);
 SonicComponent = __decorate([
     customElement(tagName)
 ], SonicComponent);

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

@@ -0,0 +1,35 @@
+import { LitElement } from "lit";
+import "@supersoniks/concorde/core/components/ui/form/input/input";
+import "@supersoniks/concorde/core/components/ui/pop/pop";
+import "@supersoniks/concorde/core/components/functional/queue/queue";
+import "@supersoniks/concorde/core/components/ui/menu/menu-item";
+declare const InputAutocomplete_base: (new (...args: any[]) => import("../../../../mixins/TemplatesContainer").TemplatesContainerInterface) & (new (...args: any[]) => import("../../../../mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+/**
+ * TODO Améliorer et valider le fonctionnement avec JB et Julien. Puis possiblement merger sur concorde
+ * Input avec autocomplete. Propose des valeurs à partir d'un sonic-queue.
+ * L'input permet de filtrer les choix de valeurs dans le sonic-pop.
+ * La valeur de cet input est ensuite retransmit au premier via un dataProvider.
+ */
+export declare class InputAutocomplete extends InputAutocomplete_base {
+    static styles: import("lit").CSSResult[];
+    _name: string;
+    get name(): string;
+    set name(value: string);
+    forceAutoFill: boolean;
+    _description?: string;
+    get description(): string | undefined;
+    set description(value: string | undefined);
+    _label?: string;
+    get label(): string | undefined;
+    set label(value: string | undefined);
+    placeholder: string;
+    filteredFields: string;
+    readonly: boolean | null;
+    dataProviderExpression: string;
+    key: string;
+    value: string;
+    formDataProvider: string;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

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

@@ -0,0 +1,137 @@
+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 { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { Subscriber, TemplatesContainer } from "@supersoniks/concorde/mixins";
+import "@supersoniks/concorde/core/components/ui/form/input/input";
+import "@supersoniks/concorde/core/components/ui/pop/pop";
+import "@supersoniks/concorde/core/components/functional/queue/queue";
+import "@supersoniks/concorde/core/components/ui/menu/menu-item";
+import { ifDefined } from "lit/directives/if-defined.js";
+/**
+ * TODO Améliorer et valider le fonctionnement avec JB et Julien. Puis possiblement merger sur concorde
+ * Input avec autocomplete. Propose des valeurs à partir d'un sonic-queue.
+ * L'input permet de filtrer les choix de valeurs dans le sonic-pop.
+ * La valeur de cet input est ensuite retransmit au premier via un dataProvider.
+ */
+let InputAutocomplete = class InputAutocomplete extends TemplatesContainer(Subscriber(LitElement)) {
+    constructor() {
+        super(...arguments);
+        // Filtering input
+        this._name = "";
+        this.forceAutoFill = false;
+        this.placeholder = "";
+        this.filteredFields = "";
+        this.readonly = null;
+        this.dataProviderExpression = "";
+        this.key = "";
+        this.value = "";
+        this.formDataProvider = "";
+    }
+    get name() {
+        return this._name;
+    }
+    set name(value) {
+        if (this.hasAttribute("name") && !this.forceAutoFill)
+            value = this.getAttribute("name");
+        this._name = value;
+        this.requestUpdate();
+    }
+    get description() {
+        return this._description;
+    }
+    set description(value) {
+        if (this.hasAttribute("description") && !this.forceAutoFill)
+            value = this.getAttribute("description");
+        this._description = value;
+        this.requestUpdate();
+    }
+    get label() {
+        return this._label;
+    }
+    set label(value) {
+        if (this.hasAttribute("label") && !this.forceAutoFill)
+            value = this.getAttribute("label");
+        this._label = value;
+        this.requestUpdate();
+    }
+    connectedCallback() {
+        this.formDataProvider = this.getAncestorAttributeValue("formDataProvider");
+        super.connectedCallback();
+    }
+    render() {
+        return html `
+      <sonic-pop toggle="false" style="display:block;">
+        <sonic-input
+          type="text"
+          data-keyboard-nav="nav-autocomplete"
+          label="${ifDefined(this.label)}"
+          description="${ifDefined(this.description)}"
+          name="${ifDefined(this.name)}"
+          value="${ifDefined(this.value)}"
+          clearable
+        ></sonic-input>
+        <sonic-menu slot="content">
+          <sonic-queue
+            filteredFields=${this.filteredFields}
+            dataProviderExpression="${this.dataProviderExpression}"
+            dataFilterProvider="${this.formDataProvider}"
+            key="${this.key}"
+            .templates=${this.templateList}
+            displayContents
+          >
+          </sonic-queue>
+        </sonic-menu>
+      </sonic-pop>
+    `;
+    }
+};
+InputAutocomplete.styles = [
+    css `
+      :host {
+        display: block;
+      }
+    `,
+];
+__decorate([
+    property()
+], InputAutocomplete.prototype, "name", null);
+__decorate([
+    property()
+], InputAutocomplete.prototype, "forceAutoFill", void 0);
+__decorate([
+    property()
+], InputAutocomplete.prototype, "description", null);
+__decorate([
+    property()
+], InputAutocomplete.prototype, "label", null);
+__decorate([
+    property({ type: String })
+], InputAutocomplete.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], InputAutocomplete.prototype, "filteredFields", void 0);
+__decorate([
+    property({ type: Boolean })
+], InputAutocomplete.prototype, "readonly", void 0);
+__decorate([
+    property({ type: String })
+], InputAutocomplete.prototype, "dataProviderExpression", void 0);
+__decorate([
+    property({ type: String })
+], InputAutocomplete.prototype, "key", void 0);
+__decorate([
+    property({ type: String })
+], InputAutocomplete.prototype, "value", void 0);
+InputAutocomplete = __decorate([
+    customElement("sonic-input-autocomplete")
+], InputAutocomplete);
+export { InputAutocomplete };
+// //Ajout pour custom-elements-manifest pour storybook notamment
+// try {
+// 	customElements.define("sonic-input-autocomplete", InputAutocomplete);
+// } catch (e) {}

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

@@ -123,10 +123,10 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
             "has-prefix": this.hasPrefix,
             "has-suffix": this.hasSuffix,
         };
-        let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
+        //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 + labelStarSuffix) : ""}<slot
+        >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot
           name="label"
           @slotchange=${this.onSlotChange}
         ></slot

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

@@ -48,10 +48,10 @@ let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElemen
         textarea.reportValidity();
     }
     render() {
-        let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
+        // 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 + labelStarSuffix) : ""}<slot
+        >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot
           name="label"
           @slotchange=${this.onSlotChange}
         ></slot