@supersoniks/concorde 1.0.7 → 1.1.1

package/core/components/functional/states/states.js

@@ -0,0 +1,139 @@
+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 { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import { templateContent } from "lit/directives/template-content.js";
+import { repeat } from "lit/directives/repeat.js";
+import Objects from "@supersoniks/concorde/core/utils/Objects";
+import UrlPattern from "url-pattern";
+import TemplatesContainer from "@supersoniks/concorde/core/mixins/TemplatesContainer";
+/**
+ * ### sonic-states affiche des états différents en fonction de la valeur d'une sous propriété de son dataProvider (attribut data-path en dot notation):
+ * * Il boucle sur ses template enfants et test si la regexp contenue dans l'attribut *data-value* match la valeur de la propriété
+ * * Si oui le contenu du template correspontant est affiché comme état.
+ * * Si l'attribut dataProviderExpression est fourni le contenu est entouré d'une div :
+ * * L'attribut "dataProvider" de cette div est le resultat de l'appel à la fonction replace sur valeur de la propriété avec comme paramettres la regexp et dataproviderExpression.
+ * * Les subscribers/fetch... du template se réfèrerons à ce dataProvider
+ * * On peut également utiliser les des expressions du type url-pattern pour les paramètres de la route voir les exemples
+ *
+ * **Exemples**
+ * Avec ma.propriete= 2 :
+ * * RegExp data-value = (\d+) et dataproviderExpression = /user/$1 l'attribut dataProvider vaudra "/user/2"
+ * * url-pattern data-value = :id et dataproviderExpression = /user/:id l'attribut dataProvider vaudra "/user/2"
+ *
+ */
+let SonicStates = class SonicStates extends Subscriber(TemplatesContainer(LitElement)) {
+    constructor() {
+        super(...arguments);
+        this.state = "";
+        this.inverted = false;
+        this.statePath = "";
+        this.onAssign = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.hasAttribute("data-path")) {
+            this.statePath = this.getAttribute("data-path");
+        }
+        if (this.statePath) {
+            this.statePublisher = this.publisher;
+            let split = this.statePath.split(".");
+            for (let s of split) {
+                this.statePublisher = this.statePublisher[s];
+            }
+            this.onAssign = (value) => {
+                this.state = value;
+                this.requestUpdate();
+            };
+            this.statePublisher.onAssign(this.onAssign);
+        }
+    }
+    disconnectedCallback() {
+        if (this.statePath)
+            this.statePublisher.offAssign(this.onAssign);
+        super.disconnectedCallback();
+    }
+    render() {
+        let templates = [];
+        let state = this.state;
+        if ((!Array.isArray(state) && Objects.isObject(state)) || state === undefined) {
+            state = "";
+        }
+        for (let t of this.templatePartsList) {
+            let path = t.getAttribute(this.templateValueAttribute);
+            let stateToMatch = state;
+            if (this.inverted) {
+                stateToMatch = path;
+                path = state;
+            }
+            if (path == "")
+                path = this.inverted ? ".*?" : "^$";
+            let regexp = new RegExp(path);
+            if (regexp.test(stateToMatch)) {
+                templates.push(t);
+                t.removeAttribute("mode");
+            }
+            else {
+                let urlPattern = new UrlPattern(path);
+                if (urlPattern.names.length > 0 && urlPattern.match(stateToMatch)) {
+                    t.setAttribute("mode", "patternMatching");
+                    templates.push(t);
+                }
+            }
+        }
+        return html `${repeat(templates, (template, index) => {
+            template;
+            return index + new Date().getTime();
+        }, (template) => {
+            var _a;
+            if (template.title)
+                document.title = template.title;
+            if (template.hasAttribute("dataProviderExpression")) {
+                let dataProviderExpression = template.getAttribute("dataProviderExpression");
+                let dataProvider = "";
+                let stateToMatch = state;
+                let path = template.getAttribute(this.templateValueAttribute);
+                if (this.inverted) {
+                    stateToMatch = path;
+                    path = state;
+                }
+                if (path == "")
+                    path = this.inverted ? "*" : "^$";
+                if (template.getAttribute("mode") == "patternMatching") {
+                    const matcher = new UrlPattern(path);
+                    const filler = new UrlPattern(dataProviderExpression);
+                    dataProvider = filler.stringify(matcher.match(stateToMatch));
+                }
+                else {
+                    const regexp = new RegExp(path);
+                    let match = (stateToMatch + "").match(regexp);
+                    if (match) {
+                        dataProvider = (_a = match.shift()) === null || _a === void 0 ? void 0 : _a.replace(regexp, dataProviderExpression);
+                    }
+                }
+                return html `<div style="display:contents" dataProvider="${dataProvider}">${templateContent(template)}</div>`;
+            }
+            return templateContent(template);
+        })}`;
+    }
+};
+__decorate([
+    property()
+], SonicStates.prototype, "state", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SonicStates.prototype, "inverted", void 0);
+SonicStates = __decorate([
+    customElement("sonic-states")
+], SonicStates);
+export { SonicStates };
+//Ajout pour custom-elements-manifesy pour storybook notamment
+try {
+    customElements.define("sonic-states", SonicStates);
+}
+catch (e) { }

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

@@ -0,0 +1,24 @@
+import "@supersoniks/concorde/core/components/ui/button/button";
+import API from "@supersoniks/concorde/core/utils/api";
+import { LitElement } from "lit";
+declare const Submit_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+/**
+ * ###L'élément submit permet d'envoyer des données en rest
+ * * Les données envoyées sont celles présentes dans le publisher dont l'adresse est renseignée via l'attribut *formDataProvider*.
+ * Cet attribut est également utilisé par les éléments de form comme *sonic-input*, ou *sonic-select*, qui remplissent ce publisher avec leur attribut *value* en fonction de leur attribut *name*
+ * * L'api est configuré à la manière d'un fetcher.
+ * * L'attribut *method* permet de choisir la méthode d'envoie : *put/delete/post*, *post* étant la méthode par défaut.
+ * * Si l'attribut *onClick* est présent, les données sont envoyées quand on click dans son contenu
+ * * Si l'attribut *onEnterKey* est présent, les données sont envoyées quand on appuie sur la touche entrée d'un élément contenu dans le *sonic-submit* ayant le focus
+ * * Pendant l'envoi, les éléments *sonic-submit* ayant le même attribut *dataProvider* ont la propriété *disabled="disabled"* ce qui a pour effet de désactiver leur contenu
+ * * L'attribut *clearedDataOnSuccess* peut être utilisé pour vider les données des dataProvider correspondants lorsque l'appel à l'api a fourni un résultat.
+ */
+export declare class Submit extends Submit_base {
+    static styles: import("lit").CSSResult;
+    disabled: "disabled" | "" | null;
+    api: API | null;
+    connectedCallback(): void;
+    submit(): Promise<void>;
+    protected render(): unknown;
+}
+export {};

package/core/components/functional/submit/submit.js

@@ -0,0 +1,108 @@
+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 { customElement, property } from "lit/decorators.js";
+import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy.mjs";
+import "@supersoniks/concorde/core/components/ui/button/button";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import API from "@supersoniks/concorde/core/utils/api";
+import { Loader } from "@supersoniks/concorde/core/components/ui/loader/loader";
+import { css, html, LitElement } from "lit";
+/**
+ * ###L'élément submit permet d'envoyer des données en rest
+ * * Les données envoyées sont celles présentes dans le publisher dont l'adresse est renseignée via l'attribut *formDataProvider*.
+ * Cet attribut est également utilisé par les éléments de form comme *sonic-input*, ou *sonic-select*, qui remplissent ce publisher avec leur attribut *value* en fonction de leur attribut *name*
+ * * L'api est configuré à la manière d'un fetcher.
+ * * L'attribut *method* permet de choisir la méthode d'envoie : *put/delete/post*, *post* étant la méthode par défaut.
+ * * Si l'attribut *onClick* est présent, les données sont envoyées quand on click dans son contenu
+ * * Si l'attribut *onEnterKey* est présent, les données sont envoyées quand on appuie sur la touche entrée d'un élément contenu dans le *sonic-submit* ayant le focus
+ * * Pendant l'envoi, les éléments *sonic-submit* ayant le même attribut *dataProvider* ont la propriété *disabled="disabled"* ce qui a pour effet de désactiver leur contenu
+ * * L'attribut *clearedDataOnSuccess* peut être utilisé pour vider les données des dataProvider correspondants lorsque l'appel à l'api a fourni un résultat.
+ */
+let Submit = class Submit extends Subscriber(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.disabled = null;
+        this.api = null;
+    }
+    connectedCallback() {
+        if (this.hasAttribute("onClick"))
+            this.addEventListener("click", () => this.submit());
+        if (this.hasAttribute("onEnterKey"))
+            this.addEventListener("keydown", (e) => {
+                if (e.key === "Enter")
+                    this.submit();
+            });
+        super.connectedCallback();
+        this.api = new API(this.getApiConfiguration());
+    }
+    submit() {
+        var _a, _b, _c, _d, _e;
+        return __awaiter(this, void 0, void 0, function* () {
+            this.publisher.disabled = '';
+            let method = ((_a = this.getAttribute("method")) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) || "post";
+            let postData = PublisherManager.getInstance().get(this.getAncestorAttributeValue("formDataProvider")).get();
+            let result = null;
+            let dp = this.getAncestorAttributeValue("dataProvider");
+            Loader.show();
+            switch (method) {
+                case "put":
+                    result = yield ((_b = this.api) === null || _b === void 0 ? void 0 : _b.put(dp, postData));
+                    break;
+                case "delete":
+                    result = yield ((_c = this.api) === null || _c === void 0 ? void 0 : _c.delete(dp, postData));
+                    break;
+                case "get":
+                    result = yield ((_d = this.api) === null || _d === void 0 ? void 0 : _d.get(dp));
+                    break;
+                default:
+                    result = yield ((_e = this.api) === null || _e === void 0 ? void 0 : _e.post(dp, postData));
+                    break;
+            }
+            Loader.hide();
+            if (!result)
+                result = { messages: [{ content: "Network Error", status: "error" }] };
+            let clearedDataProvider = this.getAncestorAttributeValue("clearedDataOnSuccess");
+            if (clearedDataProvider) {
+                clearedDataProvider.split(" ").forEach(dataProvider => PublisherManager.getInstance().get(dataProvider).set({}));
+            }
+            PublisherManager.getInstance().get(this.getAncestorAttributeValue("submitResultDataProvider")).set(result);
+            this.publisher.disabled = null;
+        });
+    }
+    render() {
+        let disabled = this.disabled === "" || this.disabled === "disabled" ? "disabled" : "";
+        return html `<div class="${disabled}"><slot></slot></div>`;
+    }
+};
+Submit.styles = css `
+    .disabled {
+      opacity: 0.3;
+      pointer-events: none;
+      user-select: none;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], Submit.prototype, "disabled", void 0);
+Submit = __decorate([
+    customElement("sonic-submit")
+], Submit);
+export { Submit };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define("sonic-submit", Submit);
+}
+catch (e) { }

package/{types/core/components → core/components/functional/subscriber}/subscriber.d.ts

@@ -1,6 +1,10 @@
 import { LitElement } from "lit";
-declare const SonicSubscriber_base: (new (...args: any[]) => import("../mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+declare const SonicSubscriber_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+/**
+ * Voir la partie dédiée dans *MISCALLENOUS*
+ */
 export declare class SonicSubscriber extends SonicSubscriber_base {
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

package/core/components/functional/subscriber/subscriber.js

@@ -0,0 +1,30 @@
+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 } from "lit";
+import { customElement } from "lit/decorators.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+/**
+ * Voir la partie dédiée dans *MISCALLENOUS*
+ */
+let SonicSubscriber = class SonicSubscriber extends Subscriber(LitElement) {
+    connectedCallback() {
+        this.noShadowDom = "";
+        super.connectedCallback();
+    }
+    render() {
+        return html ` <slot></slot> `;
+    }
+};
+SonicSubscriber = __decorate([
+    customElement("sonic-subscriber")
+], SonicSubscriber);
+export { SonicSubscriber };
+//Ajout pour Storybook
+try {
+    customElements.define("sonic-subscriber", SonicSubscriber);
+}
+catch (e) { }

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

@@ -0,0 +1,20 @@
+import { LitElement } from "lit";
+/**
+ * Affiche un message en ligne.
+ * Soit par ses simples attributs "label" et "text", soit par son slot pour des messages plus complexes.
+ */
+export declare class Alert extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Titre du message d'erreur
+     */
+    label: string;
+    /**
+     * Peut être renseigné dans le slot pour créer des messages plus complexes
+     */
+    text: string;
+    size: "xs" | "sm" | "md" | "lg";
+    background: boolean;
+    status: "default" | "error" | "warning" | "primary" | "info";
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,150 @@
+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, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+const icon = {
+    warning: "warning-circled-outline",
+    success: "check-circled-outline",
+    error: "warning-circled-outline",
+    info: "info-empty",
+    default: "info-empty",
+};
+/**
+ * Affiche un message en ligne.
+ * Soit par ses simples attributs "label" et "text", soit par son slot pour des messages plus complexes.
+ */
+let Alert = class Alert extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Titre du message d'erreur
+         */
+        this.label = "";
+        /**
+         * Peut être renseigné dans le slot pour créer des messages plus complexes
+         */
+        this.text = "";
+        this.size = "md";
+        this.background = false;
+        this.status = "default";
+    }
+    render() {
+        return html `<div part="alert" class="alert">
+                  <div>
+                    ${this.status && html `<sonic-icon prefix="iconoir" name=${icon[this.status]}></sonic-icon>`}
+                  </div>
+                  <div >
+                    ${this.label ? html `<span class="alert-title">${this.label} :</span>` : nothing}
+                    ${this.text} <slot><slot>
+                  </div>
+                </div>`;
+    }
+};
+Alert.styles = [
+    css `
+      :host {
+        --sc-alert-color: inherit;
+        --sc-alert-rounded: var(--sc-rounded);
+        --sc-alert-fw: var(--sc-font-weight-base);
+        --sc-alert-fst: var(--sc-font-style-base);
+        --sc-alert-fs: 1rem;
+        --sc-alert-title-fw: bold;
+
+        display: block;
+        font-size: var(--sc-alert-fs);
+        font-weight: var(--sc-alert-fw);
+        font-style: var(--sc-alert-fst);
+      }
+
+      .alert {
+        color: var(--sc-alert-color);
+        position: relative;
+        display: flex;
+        gap: 0.4em;
+        line-height: 1.2;
+        border-radius: var(--sc-alert-rounded);
+      }
+
+      .alert-title {
+        font-weight: var(--sc-alert-title-fw);
+      }
+
+      :host([status="warning"]) .alert {
+        --sc-alert-color: var(--sc-warning);
+      }
+
+      :host([status="error"]) .alert {
+        --sc-alert-color: var(--sc-danger);
+      }
+      :host([status="info"]) .alert {
+        --sc-alert-color: var(--sc-info);
+      }
+      :host([status="success"]) .alert {
+        --sc-alert-color: var(--sc-success);
+      }
+
+      /*background*/
+      :host([background]) .alert {
+        background: var(--sc-base);
+        padding: 0.8em 1.15em;
+      }
+      :host([background]) .alert:before {
+        background-color: currentColor;
+        content: "";
+        display: block;
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        opacity: 0.08;
+        border-radius: var(--sc-alert-rounded);
+      }
+
+      /*SIZE*/
+      :host([size="xs"]) {
+        --sc-alert-fs: 0.75rem;
+      }
+      :host([size="sm"]) {
+        --sc-alert-fs: 0.85rem;
+      }
+      :host([size="lg"]) {
+        --sc-alert-fs: 1.2rem;
+      }
+
+      /*Rounded*/
+      :host([size="xs"]) .alert {
+        --sc-alert-rounded: var(--sc-rounded-sm);
+      }
+      :host([size="sm"]) .alert {
+        --sc-alert-rounded: var(--sc-rounded-sm);
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], Alert.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], Alert.prototype, "text", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Alert.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Alert.prototype, "background", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Alert.prototype, "status", void 0);
+Alert = __decorate([
+    customElement("sonic-alert")
+], Alert);
+export { Alert };
+try {
+    customElements.define("sonic-alert", Alert);
+}
+catch (e) { }

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

@@ -0,0 +1,24 @@
+import { LitElement } from "lit";
+/**
+ * Un badge simple avec deux slots, un nommé prefix et un nomé suffix de manière à pouvoir mettre (par exemple) une icone avant ou après le contenu.
+ * * Le badge est comparable au bouton car il possèdent tous les deux les propriétés *type* (primary...), *variant*(outline, ghost), size(xs...)...
+ * * Le badge n'est pas interactif contrairement au bouton
+ */
+export declare class Badge extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Le type change surtout la couleur composant
+     */
+    type: "default" | "primary" | "warning" | "danger" | "success" | "info";
+    /**
+     * Le composant par defaut sans se paramètre à forte afordance
+     * * gost : composant super léger visuellement
+     * * outline : composant légé avec une bordure
+     */
+    variant: "default" | "outline" | "ghost";
+    /**
+     * Taille du composant, implique notamment des modifications de typo et de marge interne
+     */
+    size: "xs" | "sm" | "md" | "lg" | "xl";
+    render(): import("lit-html").TemplateResult<1>;
+}