@supersoniks/concorde 1.1.2 → 1.1.5

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

@@ -0,0 +1,243 @@
+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, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import "./types";
+const icon = {
+    warning: "warning-circled-outline",
+    success: "check-circled-outline",
+    error: "warning-circled-outline",
+    info: "info-empty",
+};
+let SonicToastItem = class SonicToastItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.title = "";
+        this.text = "";
+        this.status = "";
+        this.ghost = false;
+        this.preserve = false;
+        this.visible = true;
+    }
+    render() {
+        if (!this.visible) {
+            return nothing;
+        }
+        return html `<div
+      class="sonic-toast ${this.status} ${this.ghost ? "ghost" : ""}"
+      
+    >
+      ${this.status &&
+            html `<sonic-icon prefix="iconoir" name=${icon[this.status]} class="sonic-toast-icon" size="2xl"></sonic-icon>`}
+      
+      <button aria-label="Close" class="sonic-toast-close" @click=${() => this.hide()}>
+        <sonic-icon prefix="iconoir" name="cancel" size="lg"></sonic-icon>
+      </button>
+      
+      <div class="sonic-toast-text">
+        ${this.title ? html `<div class="sonic-toast-title">${this.title}</div>` : ""}
+        ${this.text ? unsafeHTML(this.text) : ""}
+        <slot></slot>
+      </div>
+
+      ${!this.preserve ? this.autoHide() : ""}
+    </div>`;
+    }
+    hide() {
+        if (!this.closest('sonic-toast')) {
+            this.visible = false;
+        }
+        this.dispatchEvent(new CustomEvent("hide", { bubbles: true }));
+    }
+    show() {
+        this.visible = true;
+    }
+    autoHide() {
+        setTimeout(() => {
+            this.hide();
+        }, 4200);
+    }
+};
+SonicToastItem.styles = [
+    css `
+      * {
+        box-sizing: border-box;
+      }
+      :host {
+        display: block;
+        pointer-events: auto;
+        --sc-toast-status-color: transparent;
+        --sc-toast-color: var(--sc-base-content);
+        --sc-toast-bg: var(--sc-base);
+        --sc-toast-rounded: var(--sc-rounded-md);
+        --sc-toast-shadow: var(--sc-shadow-lg);
+      }
+
+      .sonic-toast-area {
+        pointer-events: none;
+        width: calc(100% - 2.5rem);
+        max-width: 64ch;
+        gap: 1rem;
+      }
+
+      .fixed-area {
+        position: fixed;
+        bottom: 1.25rem;
+        right: 1.25rem;
+        z-index: 999;
+        display: flex;
+        flex-direction: column-reverse;
+      }
+
+      .sonic-toast {
+        position: relative;
+        pointer-events: auto;
+        background: var(--sc-toast-bg);
+        color: var(--sc-toast-color);
+        box-shadow: var(--sc-toast-shadow);
+        border-radius: var(--sc-toast-rounded);
+        padding: 1em 2.5rem 1em 1em;
+        line-height: 1.25;
+        display: flex;
+        gap: 0.5rem;
+        max-height: 10rem;
+        overflow: auto;
+      }
+
+      .sonic-toast-text {
+        align-self: center;
+        margin-top: auto;
+        margin-bottom: auto;
+      }
+
+      ::slotted(a),
+      .sonic-toast-text a {
+        color: inherit;
+        text-decoration: underline;
+        text-underline-offset: 0.15rem;
+      }
+
+      /*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;
+        font-size: 1.15rem;
+        margin: 0.15em 0 0.25em;
+      }
+
+      /*STATUS*/
+      .success {
+        --sc-toast-status-color: var(--sc-success);
+        --sc-toast-title-color: var(--sc-toast-status-color);
+      }
+
+      .error {
+        --sc-toast-status-color: var(--sc-danger);
+        --sc-toast-title-color: var(--sc-toast-status-color);
+      }
+
+      .warning {
+        --sc-toast-status-color: var(--sc-warning);
+        --sc-toast-title-color: var(--sc-toast-status-color);
+      }
+
+      .info {
+        --sc-toast-status-color: var(--sc-info);
+        --sc-toast-title-color: var(--sc-toast-status-color);
+      }
+
+      .success,
+      .error,
+      .info,
+      .warning {
+        border-top: 3px solid var(--sc-toast-status-color, curentColor);
+      }
+
+      .sonic-toast:before {
+        background-color: var(--sc-toast-status-color);
+        content: "";
+        display: block;
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        opacity: 0.05;
+        pointer-events: none;
+        transition: 0.2s;
+        border-radius: var(--sc-toast-status-color);
+      }
+      .sonic-toast:hover:before {
+        opacity: 0.025;
+      }
+      .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: String })
+], SonicToastItem.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], SonicToastItem.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], SonicToastItem.prototype, "status", void 0);
+__decorate([
+    property({ type: Boolean })
+], SonicToastItem.prototype, "ghost", void 0);
+__decorate([
+    property({ type: Boolean })
+], SonicToastItem.prototype, "preserve", void 0);
+__decorate([
+    state()
+], SonicToastItem.prototype, "visible", void 0);
+SonicToastItem = __decorate([
+    customElement("sonic-toast-item")
+], SonicToastItem);
+export { SonicToastItem };

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

@@ -1,30 +1,19 @@
 import { LitElement, nothing } from "lit";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
-declare type ToastStatus = "success" | "error" | "info";
-declare type Toast = {
-    id?: number;
-    text: string;
-    title?: string;
-    status?: ToastStatus;
-    preserve?: boolean;
-    ghost?: boolean;
-    marginTop?: string;
-};
+import "./toast-item";
+import { Toast } from "./types";
 export declare class SonicToast extends LitElement {
-    static styles: import("lit").CSSResult[];
     toasts: Toast[];
+    createRenderRoot(): this;
     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;
+        status: import("./types").ToastStatus | undefined;
         preserve: boolean | undefined;
         ghost: boolean | undefined;
-        marginTop: string | undefined;
     } | null;
     removeItem(item: Toast): void;
-    autoRemoveItem(item: Toast): void;
 }
-export {};

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

@@ -4,36 +4,41 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { html, LitElement, 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",
-};
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { styleMap } from "lit/directives/style-map.js";
+import "./toast-item";
 let SonicToast = class SonicToast extends LitElement {
     constructor() {
         super(...arguments);
         this.toasts = [];
     }
+    createRenderRoot() {
+        return this;
+    }
     render() {
-        var _a;
+        let styles = {
+            pointerEvents: "none",
+            width: "calc(100% - 2.5rem)",
+            maxWidth: "64ch",
+            gap: "1rem",
+            display: "flex",
+        };
+        if (window.parent == window) {
+            styles = Object.assign(Object.assign({}, styles), { position: "fixed", bottom: "1.25rem", right: "1.25rem", zIndex: "999", flexDirection: "column-reverse" });
+        }
+        // ${window.parent == window ? "fixed-area" : ""}
         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" : ""}"
-    >
+        return html `<div aria-live="polite" style=${styleMap(styles)}>
       ${repeat(this.toasts, (item) => item.id, (item) => html `
-          <div
-            class="sonic-toast ${item.status} ${item.ghost ? "ghost" : ""}"
+          <sonic-toast-item status=${item.status} ?ghost=${item.ghost} ?preserve=${item.preserve} id=${item.id}
+            @hide=${() => this.removeItem(item)}
             ${animate({
             keyframeOptions: {
                 duration: 250,
@@ -51,22 +56,8 @@ let SonicToast = class SonicToast extends LitElement {
             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>
+            ${item.text ? unsafeHTML(item.text) : ""}
+          </sonic-toast-item>
         `)}
     </div>`;
     }
@@ -87,7 +78,7 @@ let SonicToast = class SonicToast extends LitElement {
         // Ajoute le toast à la liste
         let toastComponent = document.querySelector("sonic-toast");
         const nextId = new Date().valueOf();
-        const interactiveRegExp = new RegExp('<\/a>|<\/button>');
+        const interactiveRegExp = new RegExp("</a>|</button>");
         const hasInteractive = interactiveRegExp.test(conf.text);
         const currentToast = {
             id: nextId,
@@ -96,7 +87,6 @@ let SonicToast = class SonicToast extends LitElement {
             status: conf.status,
             preserve: hasInteractive ? true : conf.preserve,
             ghost: conf.ghost,
-            marginTop: conf.marginTop,
         };
         if (toastComponent.toasts.length > 0) {
             let toastA = Object.assign({}, currentToast);
@@ -113,142 +103,7 @@ let SonicToast = class SonicToast extends LitElement {
     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);

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

@@ -0,0 +1,9 @@
+export declare type ToastStatus = "" | "success" | "error" | "info";
+export declare type Toast = {
+    id?: number;
+    text: string;
+    title?: string;
+    status?: ToastStatus;
+    preserve?: boolean;
+    ghost?: boolean;
+};

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

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

package/core/mixins/Fetcher.d.ts

@@ -1,4 +1,5 @@
 import API from "@supersoniks/concorde/core/utils/api";
+import "../components/ui/button/button";
 import { SubscriberInterface } from "./Subscriber";
 declare type Constructor<T> = new (...args: any[]) => T;
 declare const Fetcher: <T extends Constructor<SubscriberInterface>>(superClass: T) => {
@@ -36,7 +37,7 @@ declare const Fetcher: <T extends Constructor<SubscriberInterface>>(superClass:
          * 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>;
+        _fetchData(): Promise<void>;
         disconnectedCallback(): void;
         connectedCallback(): void;
         /**
@@ -48,13 +49,18 @@ declare const Fetcher: <T extends Constructor<SubscriberInterface>>(superClass:
         getAncestorAttributeValue(attributeName: string): string;
         hasAncestorAttribute(attributeName: string): boolean;
         querySelectorAll(selector: string): NodeListOf<Element>;
+        /**
+         * isFirstLoad vaut true jusqu'au premier chargement de données
+         */
         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;
+        dispatchEvent(event: Event): void; /**
+         * IObserver est l'intersection observer qui permet de charger les données au scroll si l'attribut lazyload est renseigné
+         */
         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;

package/core/mixins/Fetcher.js

@@ -10,6 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { Loader } from "../components/ui/loader/loader";
 import { SonicToast } from "../components/ui/toast/toast";
 import API from "@supersoniks/concorde/core/utils/api";
+import "../components/ui/button/button";
 import Objects from "../utils/Objects";
 const Fetcher = (superClass) => {
     class FetcherElement extends superClass {
@@ -51,7 +52,7 @@ const Fetcher = (superClass) => {
          * 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() {
+        _fetchData() {
             return __awaiter(this, void 0, void 0, function* () {
                 if (!this.isFetchEnabled)
                     return;
@@ -86,10 +87,13 @@ const Fetcher = (superClass) => {
             });
         }
         disconnectedCallback() {
+            var _a;
             super.disconnectedCallback();
+            (_a = this.publisher) === null || _a === void 0 ? void 0 : _a.offInvalidate(() => this._fetchData());
             this.isFirstLoad = false;
         }
         connectedCallback() {
+            var _a;
             this.noShadowDom = "";
             if (!this.isFetchEnabled) {
                 super.connectedCallback();
@@ -101,9 +105,10 @@ const Fetcher = (superClass) => {
             if (this.props) {
                 this.publisher.set(this.props);
             }
+            (_a = this.publisher) === null || _a === void 0 ? void 0 : _a.onInvalidate(() => this._fetchData());
             const lazyLoad = this.getAncestorAttributeValue("lazyload");
             if (lazyLoad === null) {
-                this._fetchEventData();
+                this._fetchData();
             }
         }
         /**
@@ -131,13 +136,13 @@ const Fetcher = (superClass) => {
                 this.iObserver.observe(elt);
             }
             else if (this.isFirstLoad) {
-                this._fetchEventData();
+                this._fetchData();
             }
         }
         onIntersection(entries) {
             for (const e of entries) {
                 if (e.isIntersecting && this.isFirstLoad) {
-                    this._fetchEventData();
+                    this._fetchData();
                 }
             }
         }

package/core/mixins/Subscriber.js

@@ -52,6 +52,9 @@ const Subscriber = (superClass) => {
              * Cela se fait à l'initialisation uniquement et n'est pas modifiable lors de la vie du composant.
              */
             this.noShadowDom = null;
+            /**
+             * Permet de mapper un nom de propriété de donnée source vars une propriété du subscriber à la volée
+             */
             this.propertyMap = null;
             this.title = "";
             /**
@@ -82,7 +85,7 @@ const Subscriber = (superClass) => {
             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.
+         * retourne 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) {

package/core/utils/DataBindObserver.js

@@ -1,4 +1,3 @@
-import Objects from "@supersoniks/concorde/core/utils/Objects";
 import Format from "@supersoniks/concorde/core/utils/Format";
 import HTML from "@supersoniks/concorde/core/utils/HTML";
 import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy.mjs";
@@ -189,9 +188,12 @@ export default class DataBindObserver {
                          */
                         if (values.length == 1 && bindedVariablesDescriptor.variables[0].join(".") == expression.substring(1)) {
                             let value = values[0];
-                            if (Objects.isObject(value) &&
-                                value.hasOwnProperty("__value") &&
-                                (Objects.isUndefindOrNull(value.__value) || value.__value === "")) {
+                            if (value === null
+                            // ||
+                            // ( Objects.isObject(value) &&
+                            // value.hasOwnProperty("__value") &&
+                            // (Objects.isUndefindOrNull(value.__value) || value.__value === "") )
+                            ) {
                                 value = "";
                             }
                             rec[propertyToUpdate] = value;
@@ -203,9 +205,11 @@ export default class DataBindObserver {
                         for (let i = 0; i < values.length; i++) {
                             let value = values[i];
                             let variable = bindedVariablesDescriptor.variables[i];
-                            if (Objects.isObject(value) &&
-                                value.hasOwnProperty("__value") &&
-                                Objects.isUndefindOrNull(value.__value)) {
+                            if (value === null
+                            // Objects.isObject(value) &&
+                            // value.hasOwnProperty("__value") &&
+                            // Objects.isUndefindOrNull(value.__value)
+                            ) {
                                 hasUndeterminatedValue = true;
                                 value = undefined;
                             }