@supersoniks/concorde 2.0.7 → 3.0.0

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

@@ -0,0 +1,237 @@
+import {html, LitElement, nothing} from "lit";
+import {customElement, property} from "lit/decorators.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";
+import {ifDefined} from "lit/directives/if-defined.js";
+import {unsafeHTML} from "lit/directives/unsafe-html.js";
+import {styleMap, StyleInfo} from "lit/directives/style-map.js";
+import "@supersoniks/concorde/core/components/ui/toast/toast-item";
+import {Toast} from "@supersoniks/concorde/core/components/ui/toast/types";
+import {ConcordeWindow} from "@supersoniks/concorde/core/_types/types";
+import {Theme} from "@supersoniks/concorde/core/components/ui/theme/theme";
+
+declare const window: ConcordeWindow;
+
+const tagName = "sonic-toast";
+
+@customElement(tagName)
+export class SonicToast extends LitElement {
+  @property({type: Array}) toasts: Toast[] = [];
+  static delegateToasts = false;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    const isIframe = !(window.parent == window);
+    let styles: Readonly<StyleInfo> = {
+      pointerEvents: "none",
+      gap: "1rem",
+      display: "flex",
+      margin: "1rem",
+    };
+
+    if (!isIframe) {
+      styles = {
+        ...styles,
+        margin: "0",
+        width: "calc(100% - 2.5rem)",
+        position: "fixed",
+        bottom: "1.25rem",
+        right: "1.25rem",
+        zIndex: "10000",
+        maxWidth: "64ch",
+        flexDirection: "column-reverse",
+      };
+    }
+
+    // ${window.parent == window ? "fixed-area" : ""}
+    SonicToast.handleExistingToastDelegation();
+    if (!this.toasts) return nothing;
+
+    return html`<div aria-live="polite" style=${styleMap(styles)}>
+      ${repeat(
+        this.toasts,
+        (item) => item.id,
+        (item) => html`
+          <sonic-toast-item
+            maxHeight=${isIframe ? "none" : "10rem"}
+            status=${ifDefined(item.status)}
+            title=${ifDefined(item.title)}
+            ?ghost=${item.ghost}
+            ?dismissForever=${item.dismissForever}
+            ?preserve=${item.preserve}
+            id=${ifDefined(item.id)}
+            @hide=${() => this.removeItem(item)}
+            ${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,
+            })}
+          >
+            <!-- Le texte est passé dans le slot et non pas en propriété pour contrer des problèmatiques de shadow-dom et d'appel exterieur (exemple: fancybox) -->
+            ${item.text ? unsafeHTML(item.text) : ""}
+          </sonic-toast-item>
+        `
+      )}
+    </div>`;
+  }
+
+  static removeAll() {
+    if (SonicToast.delegateToasts) {
+      SonicToast.handleExistingToastDelegation();
+      window.parent.postMessage({type: "removeAllToasts"}, "*");
+      return;
+    }
+    const toastComponent: SonicToast = SonicToast.getInstance();
+    if (!toastComponent) return;
+
+    toastComponent.toasts = toastComponent.toasts.filter((item) => item.ghost);
+  }
+
+  // ADD TOAST
+  static instance?: SonicToast;
+  static getInstance() {
+    if (SonicToast.instance) return SonicToast.instance;
+    SonicToast.instance = document.createElement("sonic-toast") as SonicToast;
+    Theme.getPopContainer().prepend(SonicToast.instance);
+    return SonicToast.instance;
+  }
+  static add(conf: Toast) {
+    if (SonicToast.delegateToasts) {
+      SonicToast.handleExistingToastDelegation();
+      window.parent.postMessage({type: "addToast", toast: conf}, "*");
+      return;
+    }
+    // Init toast area si absente (au <sonic-theme> ou <body< à défaut)
+    const toastComponent = SonicToast.getInstance();
+
+    // Ajoute le toast à la liste
+    const nextId = conf.id ?? new Date().valueOf();
+
+    const interactiveRegExp = new RegExp("</a>|</.*?button>|</.*?input>|</.*?textarea>|</.*?select>");
+    const hasInteractive = interactiveRegExp.test(conf.text);
+
+    const currentToast = {
+      id: nextId,
+      text: conf.text,
+      title: conf.title,
+      status: conf.status,
+      preserve: hasInteractive ? true : conf.preserve,
+      ghost: conf.ghost,
+      dismissForever: conf.dismissForever,
+    };
+
+    // check if the toast is dismissed
+    if (conf.dismissForever && conf.id) {
+      const dismissed = localStorage.getItem("sonic-toast-dismissed") || "{}";
+      const dismissedObj = JSON.parse(dismissed);
+      if (dismissedObj[conf.id]) {
+        return null;
+      }
+    }
+
+    if (toastComponent?.toasts.length) {
+      const toastA = {...currentToast};
+      for (const toast of toastComponent.toasts) {
+        const toastB = {...toast};
+        toastA.id = toastB.id = 0;
+        if (/*!currentToast.preserve && */ Objects.shallowEqual(toastA, toastB)) {
+          return null;
+        }
+      }
+    }
+    if (toastComponent) {
+      toastComponent.toasts = [...toastComponent.toasts, currentToast];
+    }
+
+    return currentToast;
+  }
+  static handleExistingToastDelegation() {
+    if (!this.delegateToasts) return;
+    const toastComponent: SonicToast = SonicToast.getInstance();
+    window.parent.postMessage({type: "addToasts", toasts: toastComponent.toasts}, "*");
+    toastComponent.toasts = [];
+  }
+
+  static removeItem(toastToRemove?: Toast) {
+    if (SonicToast.delegateToasts) {
+      SonicToast.handleExistingToastDelegation();
+      window.parent.postMessage({type: "removeToast", toast: toastToRemove}, "*");
+      return;
+    }
+    const toastComponent: SonicToast = SonicToast.getInstance();
+    if (!toastComponent) return;
+    toastComponent.removeItem(toastToRemove);
+  }
+  // Remove Toast
+  removeItem(toastToRemove?: Toast) {
+    if (!toastToRemove) return;
+    this.toasts = this.toasts.filter((toast) => {
+      toast = {...toast};
+      delete toast.id;
+      return !Objects.shallowEqual(toast, toastToRemove, false);
+    });
+  }
+}
+
+if (typeof window !== "undefined") {
+  window.SonicToast = SonicToast;
+}
+
+/**
+ * Handles the context of iframes and performs necessary actions based on received messages.
+ */
+function handleIframeContexts() {
+  const onPostMessage = (e: MessageEvent) => {
+    if (e.data.type == "querySonicToastAvailability") {
+      (e.source as Window).postMessage({type: "sonicToastAvailable"}, "*");
+    }
+    if (e.data.type == "sonicToastAvailable") {
+      SonicToast.delegateToasts = true;
+      SonicToast.handleExistingToastDelegation();
+    }
+    if (e.data.type == "addToasts") {
+      SonicToast.getInstance().toasts = [...SonicToast.getInstance().toasts, ...e.data.toasts];
+    }
+    if (e.data.type == "removeAllToasts") {
+      SonicToast.removeAll();
+    }
+    if (e.data.type == "removeToast") {
+      SonicToast.removeItem(e.data.toast);
+    }
+    if (e.data.type == "addToast") {
+      SonicToast.add(e.data.toast);
+    }
+  };
+
+  const isIframe = !(window.parent == window);
+  window.addEventListener("message", onPostMessage, false);
+
+  if (isIframe) {
+    window.parent.postMessage({type: "querySonicToastAvailability"}, "*");
+  }
+
+  // tell iframes that sonic-toast is available
+
+  if (!isIframe) {
+    for (const iframe of document.querySelectorAll("iframe")) {
+      iframe.contentWindow?.postMessage({type: "sonicToastAvailable"}, "*");
+    }
+  }
+}
+handleIframeContexts();

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

@@ -0,0 +1,14 @@
+import { Message } from "@supersoniks/concorde/core/_types/types";
+
+export type ToastStatus = Message["status"] | "" | "success";
+
+// Toast
+export type Toast = {
+  id?: string | number;
+  text: string;
+  title?: string;
+  status?: ToastStatus;
+  preserve?: boolean;
+  ghost?: boolean;
+  dismissForever?: boolean;
+};

package/src/core/components/ui/tooltip/tooltip.md

@@ -0,0 +1,37 @@
+# Tooltip
+
+<sonic-code>
+  <template>
+    <sonic-tooltip label="Tada : Text appears">hover me</sonic-tooltip>
+  </template>
+</sonic-code>
+
+## Placement
+
+<sonic-code>
+  <template>
+    <sonic-tooltip placement="top" label="Top text">
+      <sonic-button>Top</sonic-button>
+    </sonic-tooltip>
+    <sonic-tooltip placement="bottom" label="Bottom text">
+      <sonic-button>Bottom</sonic-button>
+    </sonic-tooltip>
+     <sonic-tooltip placement="right" label="Right text">
+      <sonic-button>Right</sonic-button>
+    </sonic-tooltip>
+    <sonic-tooltip placement="left" label="Left text">
+      <sonic-button>Left</sonic-button>
+    </sonic-tooltip>
+  </template>
+</sonic-code>
+
+## Disabled
+
+<sonic-code>
+  <template>
+    <sonic-tooltip disabled label="Disabled text">
+      <sonic-button>Tooltip disabled</sonic-button>
+    </sonic-tooltip>
+  </template>
+</sonic-code>
+

package/{core/components/ui/tooltip/tooltip.js → src/core/components/ui/tooltip/tooltip.ts}

@@ -1,34 +1,10 @@
-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 {html, LitElement, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
 const tagName = "sonic-tooltip";
-let Tooltip = class Tooltip extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.label = "";
-        this.disabled = false;
-        this.focusable = false;
-    }
-    connectedCallback() {
-        if (this.focusable) {
-            this.setAttribute("tabindex", "0");
-        }
-        super.connectedCallback();
-    }
-    render() {
-        const disabledClass = this.disabled || this.label == "" ? "disabled" : "";
-        return html `<div data-tooltip-text="${this.label.trim().replace("&nbsp;", " ")}" class="tooltip ${disabledClass}">
-      <slot></slot>
-    </div>`;
-    }
-};
-Tooltip.styles = [
-    css `
+@customElement(tagName)
+export class Tooltip extends LitElement {
+  static styles = [
+    css`
       :host {
         position: relative;
         display: inline-flex;
@@ -98,20 +74,23 @@ Tooltip.styles = [
         left: calc(100% + 0.25rem);
       }
     `,
-];
-__decorate([
-    property({ type: String })
-], Tooltip.prototype, "label", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], Tooltip.prototype, "placement", void 0);
-__decorate([
-    property({ type: Boolean })
-], Tooltip.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean })
-], Tooltip.prototype, "focusable", void 0);
-Tooltip = __decorate([
-    customElement(tagName)
-], Tooltip);
-export { Tooltip };
+  ];
+
+  @property({type: String}) label = "";
+  @property({type: String, reflect: true}) placement?: "top" | "top-start" | "top-end" | "bottom" | "left" | "right";
+  @property({type: Boolean}) disabled = false;
+  @property({type: Boolean}) focusable = false;
+
+  connectedCallback(): void {
+    if (this.focusable) {
+      this.setAttribute("tabindex", "0");
+    }
+    super.connectedCallback();
+  }
+  render() {
+    const disabledClass = this.disabled || this.label == "" ? "disabled" : "";
+    return html`<div data-tooltip-text="${this.label.trim().replace("&nbsp;", " ")}" class="tooltip ${disabledClass}">
+      <slot></slot>
+    </div>`;
+  }
+}

package/{core/components/ui/ui.js → src/core/components/ui/ui.ts}

@@ -19,12 +19,14 @@ import "./form/fieldset/legend";
 import "./form/form-layout/form-layout";
 import "./form/form-actions/form-actions";
 import "./group/group";
+
 // MISC
 import "./icon/icon";
 import "./image/image";
 import "./loader/loader";
 //Menu
 import "./menu/menu";
+
 // Misc
 import "./modal/modal";
 import "./alert/alert";

package/src/core/core.ts

@@ -0,0 +1,22 @@
+import "./components/functional/functional";
+import "./components/ui/ui";
+import "./mixins/mixins";
+import "./utils/url-pattern";
+import {PublisherManager} from "@supersoniks/concorde/core/utils/PublisherProxy";
+import DataBindObserver from "./utils/DataBindObserver";
+import {ConcordeWindow} from "./_types/types";
+
+declare const window: ConcordeWindow;
+if (!window.SonicPublisherManager) window.SonicPublisherManager = PublisherManager;
+if (!window.SonicDataBindObserver) window.SonicDataBindObserver = DataBindObserver;
+window.queueMicrotask =
+  window.queueMicrotask ||
+  function (callback) {
+    Promise.resolve()
+      .then(callback)
+      .catch((e) =>
+        setTimeout(() => {
+          throw e;
+        })
+      );
+  };

package/src/core/decorators/Subscriber.ts

@@ -0,0 +1,187 @@
+import {Objects} from "@supersoniks/concorde/utils";
+import {PublisherProxy, PublisherManager} from "../utils/PublisherProxy";
+
+type Callback = (...values: unknown[]) => void;
+type ConnectedComponent = Record<string, unknown> & {
+  __onConnected__: (callback: (component: ConnectedComponent) => void) => void;
+  __onDisconnected__: (callback: (component: ConnectedComponent) => void) => void;
+  __connectedCallbackCalls__?: Set<(component: ConnectedComponent) => void>;
+  __disconnectedCallbackCalls__?: Set<(component: ConnectedComponent) => void>;
+};
+type Configuration = {
+  callbacks: Set<Callback>;
+  publisher: PublisherProxy;
+  onAssign: (value: unknown) => void;
+};
+
+function onConnected(this: ConnectedComponent, callback: (component: ConnectedComponent) => void) {
+  if (!this.__connectedCallbackCalls__) this.__connectedCallbackCalls__ = new Set();
+  this.__connectedCallbackCalls__.add(callback);
+}
+function __onDisconnected__(this: ConnectedComponent, callback: (component: ConnectedComponent) => void) {
+  if (!this.__disconnectedCallbackCalls__) this.__disconnectedCallbackCalls__ = new Set();
+  this.__disconnectedCallbackCalls__.add(callback);
+}
+
+function setSubscribable(target: any) {
+  if (target.__is__setSubscribable__) return;
+  target.__is__setSubscribable__ = true;
+
+  target.__onConnected__ = onConnected;
+  target.__onDisconnected__ = __onDisconnected__;
+  // target.offConnected = onConnected;
+  // target.offDisconnected = __onDisconnected__;
+
+  const originalConnectedCallback = target.connectedCallback;
+  target.connectedCallback = function (this: any) {
+    originalConnectedCallback.call(this);
+    if (this.__connectedCallbackCalls__) {
+      this.__connectedCallbackCalls__.forEach((callback: (component: any) => void) => callback(this));
+    }
+  };
+  const originalDisconnectedCallback = target.disconnectedCallback;
+  target.disconnectedCallback = function (this: any) {
+    originalDisconnectedCallback.call(this);
+    if (this.__disconnectedCallbackCalls__) {
+      this.__disconnectedCallbackCalls__.forEach((callback: (component: any) => void) => callback(this));
+    }
+  };
+}
+
+export function bind(path: string) {
+  const split = path.split(".");
+  if (split.length == 0) {
+    return function () {
+      //Empty def function
+    };
+  }
+  const dataProvider: string = split.shift() || "";
+  let publisher = PublisherManager.get(dataProvider);
+  publisher = Objects.traverse(publisher, split);
+  return function (target: unknown, propertyKey: string) {
+    if (!target) return;
+    let onAssign: (value: unknown) => void;
+    setSubscribable(target);
+
+    (target as ConnectedComponent).__onConnected__((component) => {
+      onAssign = (value: unknown) => {
+        component[propertyKey] = value;
+      };
+      publisher.onAssign(onAssign);
+    });
+
+    (target as ConnectedComponent).__onDisconnected__(() => {
+      publisher.offAssign(onAssign);
+    });
+  };
+}
+
+export function onAssign(...values: Array<string>) {
+  const onAssignValues: unknown[] = [];
+  const confs: Configuration[] = [];
+  for (let i = 0; i < values.length; i++) {
+    const value = values[i];
+    const split = value.split(".");
+    if (split.length == 0) {
+      continue;
+    }
+    const dataProvider: string = split.shift() || "";
+
+    let publisher = PublisherManager.get(dataProvider);
+
+    publisher = Objects.traverse(publisher, split);
+    const callbacks: Set<Callback> = new Set();
+    const onAssign = (value: unknown) => {
+      onAssignValues[i] = value;
+      if (onAssignValues.filter((v) => v !== null).length == values.length) callbacks.forEach((callback) => callback(...onAssignValues));
+    };
+    confs.push({publisher, onAssign, callbacks});
+  }
+  return function (target: unknown, _propertyKey: string, descriptor: PropertyDescriptor) {
+    setSubscribable(target);
+    let callback: Callback;
+
+    (target as ConnectedComponent).__onConnected__((component) => {
+      for (const conf of confs) {
+        callback = descriptor.value.bind(component);
+        conf.callbacks.add(callback);
+        conf.publisher.onAssign(conf.onAssign);
+      }
+    });
+
+    (target as ConnectedComponent).__onDisconnected__(() => {
+      for (const conf of confs) {
+        conf.callbacks.delete(callback);
+        conf.publisher.offAssign(conf.onAssign);
+      }
+    });
+  };
+}
+
+export function autoSubscribe() {
+  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
+    let renderId = 0;
+
+    const originalMethod = descriptor.value;
+    const originalDC = target.constructor.prototype.disconnectedCallback;
+    target.constructor.prototype.disconnectedCallback = function () {
+      originalDC.apply(this);
+      this.__removeAutoSubscribe__();
+    };
+    const originalConnectedCallback = target.connectedCallback;
+    target.connectedCallback = function (this: any) {
+      originalConnectedCallback?.call(this);
+      this[propertyKey]();
+    };
+    descriptor.value = function (...args: unknown[]) {
+      let publishers: Set<PublisherProxy> = new Set();
+      const onAssign = () => {
+        renderId++;
+        const id = renderId;
+        window.queueMicrotask(() => {
+          if (id !== renderId) return;
+          (this as any)[propertyKey]();
+        });
+      };
+      //on désabone les publishers du rendu précédant
+      publishers.forEach((publisher: PublisherProxy) => {
+        publisher.offAssign(onAssign);
+      });
+      //on collecte les publisher modifiés pour s'abonner pour la prochaine modification
+      PublisherManager.collectModifiedPublisher();
+      const result = originalMethod.apply(this, args);
+      publishers = PublisherManager.getModifiedPublishers() || new Set<PublisherProxy>();
+      publishers.forEach((publisher: PublisherProxy) => {
+        publisher.onAssign(onAssign, false);
+      });
+      (this as typeof target.constructor.prototype.disconnectedCallback).__removeAutoSubscribe__ = () => {
+        publishers.forEach((publisher: PublisherProxy) => {
+          publisher.offAssign(onAssign);
+        });
+      };
+      return result;
+    };
+  };
+}
+export function autoFill(values: string[]) {
+  return function (target: unknown) {
+    setSubscribable(target);
+    for (const value of values) {
+      const split = value.split(".");
+      if (split.length == 0) {
+        continue;
+      }
+      const dataProvider: string = split.shift() || "";
+      let publisher = PublisherManager.get(dataProvider);
+      publisher = Objects.traverse(publisher, split);
+      (target as ConnectedComponent).__onConnected__((component: unknown) => {
+        publisher.startTemplateFilling(component);
+      });
+      (target as ConnectedComponent).__onDisconnected__(() => {
+        (component: unknown) => {
+          publisher.stopTemplateFilling(component);
+        };
+      });
+    }
+  };
+}