@supersoniks/concorde 1.0.5 → 1.0.8

package/{types → core}/components/ui/toast/toast.d.ts

@@ -1,4 +1,5 @@
-import { LitElement } from "lit";
+import { LitElement, nothing } from "lit";
+import "@supersoniks/concorde/core/components/ui/icon/icon";
 declare type ToastStatus = "success" | "error" | "info";
 declare type Toast = {
     id?: number;
@@ -6,22 +7,23 @@ declare type Toast = {
     title?: string;
     status?: ToastStatus;
     preserve?: boolean;
-    styled?: boolean;
+    ghost?: boolean;
+    marginTop?: string;
 };
-declare const SonicToast_base: (new (...args: any[]) => import("../../../core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
-export declare class SonicToast extends SonicToast_base {
+export declare class SonicToast extends LitElement {
     static styles: import("lit").CSSResult[];
     toasts: Toast[];
-    className: string;
-    styled: boolean;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    static removeAll(): void;
     static add(conf: Toast): {
         id: number;
         text: string;
         title: string | undefined;
         status: ToastStatus | undefined;
         preserve: boolean | undefined;
-    };
+        ghost: boolean | undefined;
+        marginTop: string | undefined;
+    } | null;
     removeItem(item: Toast): void;
     autoRemoveItem(item: Toast): void;
 }

package/core/components/ui/toast/toast.js

@@ -0,0 +1,260 @@
+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";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { repeat } from "lit/directives/repeat.js";
+import { animate } from "@lit-labs/motion";
+import Objects from "@supersoniks/concorde/core/utils/Objects";
+import "@supersoniks/concorde/core/components/ui/icon/icon";
+const icon = {
+    warning: "warning-circled-outline",
+    success: "check-circled-outline",
+    error: "warning-circled-outline",
+    info: "info-empty",
+};
+let SonicToast = class SonicToast extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.toasts = [];
+    }
+    render() {
+        var _a;
+        if (!this.toasts)
+            return nothing;
+        let marginTop = ((_a = this.toasts[0]) === null || _a === void 0 ? void 0 : _a.marginTop) || "0";
+        return html `<div
+      style=${"margin-top:" + marginTop}
+      class="sonic-toast-area ${window.parent == window ? "fixed-area" : ""}"
+    >
+      ${repeat(this.toasts, (item) => item.id, (item) => html `
+          <div
+            class="sonic-toast ${item.status} ${item.ghost ? "ghost" : ""}"
+            ${animate({
+            keyframeOptions: {
+                duration: 250,
+                easing: `cubic-bezier(0.250, 0.250, 0.420, 1.225)`,
+            },
+            in: [{ transform: "translateY(0) scale(1.25)", boxShadow: "0 0 0 rgba(0,0,0,0)", opacity: 0 }],
+            out: [
+                {
+                    transform: "scale(.90) ",
+                    opacity: 0,
+                    duration: 3000,
+                    easing: `ease-in-out`,
+                },
+            ],
+            stabilizeOut: true,
+        })}
+          >
+            ${item.status &&
+            html `<sonic-icon prefix="iconoir" name=${icon[item.status]} class="sonic-toast-icon" size="2xl"></sonic-icon>`}
+
+            <div class="sonic-toast-text">
+              ${item.title ? html `<div class="sonic-toast-title">${item.title}</div>` : ""}
+              ${item.text ? unsafeHTML(item.text) : ""}
+              <slot></slot>
+            </div>
+            
+            ${true //!item.ghost
+            ? html `<button class="sonic-toast-close" @click=${() => this.removeItem(item)}>
+                  <sonic-icon prefix="iconoir" name="cancel"></sonic-icon>
+                </button>`
+            : ""}
+            ${!item.preserve ? this.autoRemoveItem(item) : ""}
+          </div>
+        `)}
+    </div>`;
+    }
+    static removeAll() {
+        let toastComponent = document.querySelector("sonic-toast");
+        if (!toastComponent)
+            return;
+        toastComponent.toasts = toastComponent.toasts.filter((item) => item.ghost);
+    }
+    // ADD TOAST
+    static add(conf) {
+        // Init toast area si absente (au <sonic-theme> ou <body< à défaut)
+        if (!document.querySelector("sonic-toast")) {
+            let toastComponent = document.createElement("sonic-toast");
+            let container = document.querySelector("sonic-theme") || document.body;
+            container.prepend(toastComponent);
+        }
+        // Ajoute le toast à la liste
+        let toastComponent = document.querySelector("sonic-toast");
+        const nextId = new Date().valueOf();
+        const currentToast = {
+            id: nextId,
+            text: conf.text,
+            title: conf.title,
+            status: conf.status,
+            preserve: conf.preserve,
+            ghost: conf.ghost,
+            marginTop: conf.marginTop,
+        };
+        if (toastComponent.toasts.length > 0) {
+            let toastA = Object.assign({}, currentToast);
+            let toastB = Object.assign({}, toastComponent.toasts[toastComponent.toasts.length - 1]);
+            toastA.id = toastB.id = 0;
+            if (!currentToast.preserve && Objects.shallowEqual(toastA, toastB)) {
+                return null;
+            }
+        }
+        toastComponent.toasts = [...toastComponent.toasts, currentToast];
+        return currentToast;
+    }
+    // Remove Toast
+    removeItem(item) {
+        this.toasts = this.toasts.filter((i) => i != item);
+    }
+    autoRemoveItem(item) {
+        setTimeout(() => {
+            this.removeItem(item);
+        }, 4200);
+    }
+};
+SonicToast.styles = [
+    css `
+      * {
+        box-sizing: border-box;
+      }
+      :host {
+        display: contents;
+      }
+
+      .sonic-toast-area {
+        pointer-events: none;
+        width: calc(100% - 2.5rem);
+        max-width: 40ch;
+      }
+
+      .fixed-area {
+        position: fixed;
+        top: 1.25rem;
+        right: 1.25rem;
+        z-index: 999;
+      }
+
+      .sonic-toast {
+        --sc-toast-status-color: transparent;
+        position: relative;
+        pointer-events: auto;
+        background: var(--sc-base-800);
+        color: var(--sc-base);
+        box-shadow: var(--sc-shadow);
+        border-radius: var(--sc-rounded);
+        padding: 1em 2rem 1em 1em;
+        font-size: 0.85em;
+        line-height: 1.25;
+        display: flex;
+        gap: 0.5rem;
+        max-height: 10rem;
+        overflow: auto;
+      }
+
+      .sonic-toast + .sonic-toast {
+        margin-top: 1rem;
+      }
+
+      .sonic-toast-text {
+        align-self: center;
+        margin-top: auto;
+        margin-bottom: auto;
+      }
+
+      ::slotted(a),
+      .sonic-toast-text a {
+        color: inherit;
+        text-decoration: underline;
+      }
+
+      /*BUTTON CLOSE*/
+      .sonic-toast-close {
+        all: unset;
+        position: absolute;
+        pointer-events:initial;
+        right: 0.5em;
+        top: 0.5em;
+        width: 1.5rem;
+        height: 1.5rem;
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        text-align: center;
+        opacity: 0.5;
+        background: rgba(0, 0, 0, 0);
+      }
+
+      .sonic-toast-close:focus,
+      .sonic-toast-close:hover {
+        opacity: 1;
+        background: rgba(0, 0, 0, 0.075);
+      }
+
+      .sonic-toast-close svg {
+        width: 1rem;
+        height: 1rem;
+        object-fit: contain;
+        object-position: center center;
+      }
+
+      /*Title*/
+      .sonic-toast-title {
+        font-weight: bold;
+        margin-bottom: 0.25em;
+      }
+
+      /*STATUS*/
+      .success {
+        --sc-toast-status-color: var(--sc-success);
+      }
+
+      .error {
+        --sc-toast-status-color: var(--sc-danger);
+      }
+
+      .warning {
+        --sc-toast-status-color: var(--sc-warning);
+      }
+
+      .info {
+        --sc-toast-status-color: var(--sc-info);
+      }
+
+      .success,
+      .error,
+      .info,
+      .warning {
+        border-top: 2px solid var(--sc-toast-status-color, curentColor);
+      }
+
+      .info .sonic-toast-icon,
+      .error .sonic-toast-icon,
+      .success .sonic-toast-icon,
+      .warning .sonic-toast-icon {
+        color: var(--sc-toast-status-color, curentColor);
+      }
+
+      .ghost {
+        opacity: 0.85;
+        pointer-events: none;
+      }
+    `,
+];
+__decorate([
+    property({ type: Array })
+], SonicToast.prototype, "toasts", void 0);
+SonicToast = __decorate([
+    customElement("sonic-toast")
+], SonicToast);
+export { SonicToast };
+if (typeof window !== "undefined") {
+    let win = window;
+    win.SonicToast = SonicToast;
+}

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

@@ -0,0 +1,7 @@
+import { LitElement } from "lit";
+export declare class Tooltip extends LitElement {
+    static styles: import("lit").CSSResult[];
+    tooltipText: string;
+    disabled: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/core/components/ui/tooltip/tooltip.js

@@ -0,0 +1,68 @@
+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";
+let Tooltip = class Tooltip extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.tooltipText = "";
+        this.disabled = false;
+    }
+    render() {
+        let disabledClass = this.disabled || this.tooltipText == "" ? "disabled" : "";
+        return html `<div
+      data-tooltip-text="${this.tooltipText.trim().replace("&nbsp;", " ")}"
+      class="tooltip ${disabledClass}"
+    >
+      <slot></slot>
+    </div>`;
+    }
+};
+Tooltip.styles = [
+    css `
+      .tooltip {
+        position: relative;
+        display: flex;
+        align-items: center;
+        text-align: center;
+      }
+      .tooltip:before {
+        position: absolute;
+        content: attr(data-tooltip-text);
+        font-size: 0.85rem;
+        display: block;
+        opacity: 0;
+        pointer-events: none;
+        bottom: calc(100% + 0.25rem);
+        left: 50%;
+        transform: translateX(-50%);
+        background: var(--sc-base-content, #111827);
+        padding: 0.25rem;
+        border-radius: 0.25rem;
+        color: var(--sc-base, #fff);
+        z-index: 999;
+        display: none;
+        line-height: 1.1;
+        width: max-content;
+        max-width: 20rem;
+      }
+      .tooltip:not(.disabled):hover:before {
+        opacity: 1;
+        display: block;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], Tooltip.prototype, "tooltipText", void 0);
+__decorate([
+    property({ type: Boolean })
+], Tooltip.prototype, "disabled", void 0);
+Tooltip = __decorate([
+    customElement("sonic-tooltip")
+], Tooltip);
+export { Tooltip };

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

@@ -0,0 +1,27 @@
+import "./theme/theme";
+import "./badge/badge";
+import "./button/button";
+import "./link/link";
+import "./form/input/input";
+import "./form/checkbox/checkbox";
+import "./form/radio/radio";
+import "./form/select/select";
+import "./form/textarea/textarea";
+import "./form/fieldset/fieldset";
+import "./form/fieldset/legend";
+import "./form/form-layout/form-layout";
+import "./group/group";
+import "./icon/icon";
+import "./image/image";
+import "./loader/loader";
+import "./taxonomy/taxonomy";
+import "./menu/menu";
+import "./menu/menu-item";
+import "./tabs/tabs";
+import "./tabs/tab";
+import "./modal/modal";
+import "./alert/alert";
+import "./toast/toast";
+import "./tooltip/tooltip";
+import "./pop/pop";
+import "./divider/divider";

package/core/components/ui/ui.js

@@ -0,0 +1,34 @@
+// Theme
+import "./theme/theme";
+// Base
+import "./badge/badge";
+import "./button/button";
+import "./link/link";
+// FORMS
+import "./form/input/input";
+import "./form/checkbox/checkbox";
+import "./form/radio/radio";
+import "./form/select/select";
+import "./form/textarea/textarea";
+import "./form/fieldset/fieldset";
+import "./form/fieldset/legend";
+import "./form/form-layout/form-layout";
+import "./group/group";
+// MISC
+import "./icon/icon";
+import "./image/image";
+import "./loader/loader";
+import "./taxonomy/taxonomy";
+//Menu
+import "./menu/menu";
+import "./menu/menu-item";
+//Tabs
+import "./tabs/tabs";
+import "./tabs/tab";
+// Misc
+import "./modal/modal";
+import "./alert/alert";
+import "./toast/toast";
+import "./tooltip/tooltip";
+import "./pop/pop";
+import "./divider/divider";

package/core/core.d.ts

@@ -0,0 +1,3 @@
+import "./components/functional/functional";
+import "./components/ui/ui";
+import "./mixins/mixins";

package/core/core.js

@@ -0,0 +1,7 @@
+import "./components/functional/functional";
+import "./components/ui/ui";
+import "./mixins/mixins";
+import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy.mjs";
+let win = window;
+if (!win.PublisherManager)
+    win.SonicPublisherManager = PublisherManager;

package/core/mixins/Fetcher.d.ts

@@ -0,0 +1,69 @@
+import API from "@supersoniks/concorde/core/utils/api";
+import { SubscriberInterface } from "./Subscriber";
+declare type Constructor<T> = new (...args: any[]) => T;
+declare const Fetcher: <T extends Constructor<SubscriberInterface>>(superClass: T) => {
+    new (...args: any[]): {
+        api: API | null;
+        /**
+         * Après le chargement des données on traverse l'objet reçu en fonctione de la cible exprimées dans cette propriété avec la dot syntaxe.
+         * C'est cette donnée cible qui est injectée dans les pros et donc disponible via le publisher disponible globalement via PublisherManager.get(dataProvider)
+         */
+        key: String;
+        /**
+         * isFirstLoad vaut true jusqu'au premier chargement de données
+         */
+        isFirstLoad: boolean;
+        /**
+         * isLoading vaut true pendant le chargement des données
+         */
+        isLoading: boolean;
+        /**
+         * IObserver est l'intersection observer qui permet de charger les données au scroll si l'attribut lazyload est renseigné
+         */
+        iObserver: IntersectionObserver | null;
+        /**
+         * un loader est affiché par défaut si l'attribut noLoader n'est pas renseigné
+         */
+        isDefaultLoaderEnabled: boolean;
+        /**
+         * On peut désactiver le fetch programmatiquement via cette propriété.
+         * Cela est le cas pour le composant sonic-list qui ne fetch que si l'attribut fetch est renseigné
+         */
+        isFetchEnabled: boolean;
+        /**
+         *
+         * C'est ici que les données sont chargées via l'utilitaire API
+         * Elles sont ensuite injectées dans le publisher en accord avec la cible définie dans la propriété key
+         * Un Toast est affiché si le chargement échoue
+         */
+        _fetchEventData(): Promise<void>;
+        disconnectedCallback(): void;
+        connectedCallback(): void;
+        /**
+         * Première update, le comportement de lazyload est géré ici a l'aide d'un intersection observer.
+         */
+        firstUpdated(): void;
+        onIntersection(entries: IntersectionObserverEntry[]): void;
+        props: any;
+        getAncestorAttributeValue(attributeName: string): string;
+        hasAncestorAttribute(attributeName: string): boolean;
+        querySelectorAll(selector: string): NodeListOf<Element>;
+        publisher: any;
+        dataProvider: String;
+        noShadowDom: string | null;
+        debug: HTMLElement | null;
+        defferedDebug: boolean | null;
+        makeShadow(props: Record<string, any>, value: any): any;
+        dispatchEvent(event: Event): void;
+        setAttribute(name: string, value: string): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
+        removeAttribute(name: string): void;
+        initPublisher(): void;
+        getApiConfiguration(): import("@supersoniks/concorde/core/utils/api").APIConfiguration;
+        requestUpdate(): void;
+        getAttribute(name: string): string;
+        hasAttribute(attributeName: String): boolean;
+    };
+} & T;
+export default Fetcher;

package/core/mixins/Fetcher.js

@@ -0,0 +1,147 @@
+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 { Loader } from "../components/ui/loader/loader";
+import { SonicToast } from "../components/ui/toast/toast";
+import API from "@supersoniks/concorde/core/utils/api";
+import Objects from "../utils/Objects";
+const Fetcher = (superClass) => {
+    class FetcherElement extends superClass {
+        constructor(...args) {
+            super();
+            this.api = null;
+            /**
+             * Après le chargement des données on traverse l'objet reçu en fonctione de la cible exprimées dans cette propriété avec la dot syntaxe.
+             * C'est cette donnée cible qui est injectée dans les pros et donc disponible via le publisher disponible globalement via PublisherManager.get(dataProvider)
+             */
+            this.key = "";
+            /**
+             * isFirstLoad vaut true jusqu'au premier chargement de données
+             */
+            this.isFirstLoad = true;
+            /**
+             * isLoading vaut true pendant le chargement des données
+             */
+            this.isLoading = false;
+            /**
+             * IObserver est l'intersection observer qui permet de charger les données au scroll si l'attribut lazyload est renseigné
+             */
+            this.iObserver = null;
+            /**
+             * un loader est affiché par défaut si l'attribut noLoader n'est pas renseigné
+             */
+            this.isDefaultLoaderEnabled = true;
+            /**
+             * On peut désactiver le fetch programmatiquement via cette propriété.
+             * Cela est le cas pour le composant sonic-list qui ne fetch que si l'attribut fetch est renseigné
+             */
+            this.isFetchEnabled = true;
+            args;
+            this.dataProvider = "";
+        }
+        /**
+         *
+         * C'est ici que les données sont chargées via l'utilitaire API
+         * Elles sont ensuite injectées dans le publisher en accord avec la cible définie dans la propriété key
+         * Un Toast est affiché si le chargement échoue
+         */
+        _fetchEventData() {
+            return __awaiter(this, void 0, void 0, function* () {
+                if (!this.isFetchEnabled)
+                    return;
+                if (!this.api)
+                    return;
+                if (!this.dataProvider)
+                    return;
+                this.dispatchEvent(new CustomEvent("loading", { detail: this }));
+                this.isLoading = true;
+                this.requestUpdate();
+                let data;
+                let hasLoader = this.isDefaultLoaderEnabled && !this.hasAttribute("noLoader");
+                if (hasLoader)
+                    Loader.show();
+                data = yield this.api.get(this.getAttribute("endPoint") || this.dataProvider);
+                if (!data) {
+                    SonicToast.add({ text: "Network Error", status: "error" });
+                    this.isLoading = false;
+                    if (hasLoader)
+                        Loader.hide();
+                    return;
+                }
+                if (hasLoader)
+                    Loader.hide();
+                if (this.key) {
+                    data = Objects.traverse(data, this.key.split("."));
+                }
+                this.props = data;
+                this.dispatchEvent(new CustomEvent("load", { detail: this }));
+                this.isFirstLoad = false;
+                this.isLoading = false;
+            });
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.isFirstLoad = false;
+        }
+        connectedCallback() {
+            this.noShadowDom = "";
+            if (!this.isFetchEnabled) {
+                super.connectedCallback();
+                return;
+            }
+            super.connectedCallback();
+            this.key = this.getAncestorAttributeValue("key");
+            this.api = new API(this.getApiConfiguration());
+            if (this.props) {
+                this.publisher.set(this.props);
+            }
+            const lazyLoad = this.getAncestorAttributeValue("lazyload");
+            if (lazyLoad === null) {
+                this._fetchEventData();
+            }
+        }
+        /**
+         * Première update, le comportement de lazyload est géré ici a l'aide d'un intersection observer.
+         */
+        firstUpdated() {
+            const lazyLoad = this.getAncestorAttributeValue("lazyload");
+            if (lazyLoad === null) {
+                return;
+            }
+            let options = {
+                root: null,
+                rootMargin: Math.max(window.innerWidth, window.innerHeight) + "px",
+            };
+            this.iObserver = new IntersectionObserver((entries) => this.onIntersection(entries), options);
+            let that = this;
+            let elt = that.shadowRoot ? that.shadowRoot.children[0] : that.children[0];
+            if (elt && elt.nodeName.toLocaleLowerCase() == "slot")
+                elt = elt.children[0];
+            if (!elt || elt.nodeName.toLocaleLowerCase() == "template") {
+                elt = document.createElement("span");
+                that.appendChild(elt);
+            }
+            if (elt) {
+                this.iObserver.observe(elt);
+            }
+            else if (this.isFirstLoad) {
+                this._fetchEventData();
+            }
+        }
+        onIntersection(entries) {
+            for (const e of entries) {
+                if (e.isIntersecting && this.isFirstLoad) {
+                    this._fetchEventData();
+                }
+            }
+        }
+    }
+    return FetcherElement; // as Constructor<SubscriberInterface> & T;
+};
+export default Fetcher;