@supersoniks/concorde 2.0.6 → 3.0.0

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

@@ -1,13 +1,8 @@
-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 { styleMap } from "lit/directives/style-map.js";
-import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
+import {html, LitElement, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {styleMap} from "lit/directives/style-map.js";
+import {customScroll} from "@supersoniks/concorde/core/components/ui/_css/scroll";
+
 import "@supersoniks/concorde/core/components/ui/table/table-tr";
 import "@supersoniks/concorde/core/components/ui/table/table-th";
 import "@supersoniks/concorde/core/components/ui/table/table-td";
@@ -15,32 +10,15 @@ import "@supersoniks/concorde/core/components/ui/table/table-thead";
 import "@supersoniks/concorde/core/components/ui/table/table-tbody";
 import "@supersoniks/concorde/core/components/ui/table/table-tfoot";
 import "@supersoniks/concorde/core/components/ui/table/table-caption";
-import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
+import {fontSize} from "@supersoniks/concorde/core/components/ui/_css/size";
+
 const tagName = "sonic-table";
-let Table = class Table extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.bordered = false;
-        this.rounded = false;
-        this.noCustomScroll = false;
-    }
-    render() {
-        const containerStyles = {
-            maxHeight: this.maxHeight,
-        };
-        return html `
-      <div class="table-container ${!this.noCustomScroll ? "custom-scroll" : ""}" style=${styleMap(containerStyles)}>
-        <div class="table">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-    }
-};
-Table.styles = [
+@customElement(tagName)
+export class Table extends LitElement {
+  static styles = [
     customScroll,
     fontSize,
-    css `
+    css`
       :host {
         --sc-table-fw: var(--sc-font-weight-base);
         --sc-table-fst: var(--sc-font-style-base);
@@ -81,23 +59,24 @@ Table.styles = [
         --sc-table-td-border-b: var(--sc-border-width) solid var(--sc-table-border-color);
       }
     `,
-];
-__decorate([
-    property({ type: String, reflect: true })
-], Table.prototype, "size", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Table.prototype, "bordered", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Table.prototype, "rounded", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Table.prototype, "noCustomScroll", void 0);
-__decorate([
-    property({ type: String })
-], Table.prototype, "maxHeight", void 0);
-Table = __decorate([
-    customElement(tagName)
-], Table);
-export { Table };
+  ];
+
+  @property({type: String, reflect: true}) size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+  @property({type: Boolean, reflect: true}) bordered = false;
+  @property({type: Boolean, reflect: true}) rounded = false;
+  @property({type: Boolean, reflect: true}) noCustomScroll = false;
+  @property({type: String}) maxHeight?: string;
+
+  render() {
+    const containerStyles = {
+      maxHeight: this.maxHeight,
+    };
+    return html`
+      <div class="table-container ${!this.noCustomScroll ? "custom-scroll" : ""}" style=${styleMap(containerStyles)}>
+        <div class="table">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}

package/{core/components/ui/theme/theme-collection/core-variables.js → src/core/components/ui/theme/theme-collection/core-variables.ts}

@@ -1,5 +1,6 @@
-import { css } from "lit";
-export const coreVariables = css `
+import {css} from "lit";
+
+export const coreVariables = css`
   :host {
     /* polices*/
     --sc-font-family-base: "Inter var", "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,

package/{core/components/ui/theme/theme-collection/dark.js → src/core/components/ui/theme/theme-collection/dark.ts}

@@ -1,5 +1,6 @@
-import { css } from "lit";
-const darkCss = css `
+import {css} from "lit";
+
+const darkCss = css`
   --sc-primary: var(--sc-dark-primary, var(--sc-base-700));
   --sc-info: var(--sc-dark-info, #3abff8);
   --sc-danger: var(--sc-dark-danger, #f87272);
@@ -25,7 +26,8 @@ const darkCss = css `
   --sc-base-900: var(--sc-dark-base-900, #e5e7eb);
   --sc-base-content: var(--sc-dark-base-content, #e5e7eb);
 `;
-export const dark = css `
+
+export const dark = css`
   :host([theme="dark"]) {
     ${darkCss}
   }

package/{core/components/ui/theme/theme-collection/light.js → src/core/components/ui/theme/theme-collection/light.ts}

@@ -1,5 +1,6 @@
-import { css } from "lit";
-export const light = css `
+import {css} from "lit";
+
+export const light = css`
   :host {
     /*Boutons*/
     --sc-primary: var(--sc-base-800);

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

@@ -0,0 +1,118 @@
+import {html, LitElement, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {coreVariables} from "@supersoniks/concorde/core/components/ui/theme/theme-collection/core-variables";
+import {light} from "@supersoniks/concorde/core/components/ui/theme/theme-collection/light";
+import {dark} from "@supersoniks/concorde/core/components/ui/theme/theme-collection/dark";
+import {PublisherManager} from "@supersoniks/concorde/utils";
+
+const tagName = "sonic-theme";
+
+@customElement(tagName)
+export class Theme extends LitElement {
+  static styles = [
+    light,
+    dark,
+    coreVariables,
+    css`
+      :host([color]) {
+        color: var(--sc-base-content);
+      }
+
+      :host([font]) {
+        font-family: var(--sc-font-family-base), sans-serif;
+        font-weight: var(--sc-font-weight-base);
+        font-style: var(--sc-font-style-base);
+      }
+    `,
+  ];
+
+  static instance: Theme | undefined;
+
+  constructor() {
+    super();
+    Theme.instance = this;
+  }
+
+  /**
+   * retourne le conteneur de tout ce qui pop : popups / modale / tooltip? / dropdown / ...
+   */
+  public static getPopContainer() {
+    return Theme.instance || document.body;
+  }
+
+  @property({type: String, reflect: true})
+  theme = "light";
+
+  @property({type: Boolean, reflect: true}) background = false;
+  @property({type: Boolean, reflect: true}) color = false;
+  @property({type: Boolean, reflect: true}) font = false;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    window.addEventListener("message", (e) => this.receiveMessage(e), false);
+    window.dispatchEvent(new CustomEvent("SonicThemeReady"));
+    this.postCSSVars();
+  }
+
+  postCSSVars() {
+    const stylesheets = document.styleSheets;
+    const ssLength = stylesheets.length;
+    const fontUrls: string[] = [];
+    for (let i = 0; i < ssLength; i++) {
+      const ss = stylesheets[i];
+      if (ss.href && (ss.href.includes("googleapis") || ss.href.includes("typekit.net"))) fontUrls.push(ss.href);
+    }
+    const theme = {
+      variables: this.getCssVariables(),
+      fonts: fontUrls,
+    };
+    PublisherManager.get("sonic-theme")?.set(theme);
+    document.querySelectorAll("iframe").forEach(
+      (elt) =>
+        elt.contentWindow?.postMessage(
+          {
+            type: "SonicTheme",
+            ...theme,
+          },
+          "*"
+        )
+    );
+  }
+
+  receiveMessage(event: MessageEvent) {
+    const data = event.data;
+    if (!data.type || data.type != "GetSonicTheme") return;
+    this.postCSSVars();
+  }
+
+  getCssVariables() {
+    const names: Array<string> = [];
+    const stylesheets = [...Theme.styles.map((s) => s.styleSheet), ...Array.from(document.styleSheets)] as {
+      cssRules: {style: string[]}[] | CSSRuleList;
+    }[];
+    for (const stylesheet of stylesheets) {
+      try {
+        if (!stylesheet) continue;
+        const rules = stylesheet.cssRules;
+        for (const rule of rules) {
+          if (!("style" in rule)) continue;
+          const style = rule.style;
+          for (const name of style) {
+            if (names.includes(name) || name.indexOf("--sc") !== 0) continue;
+            names.push(name);
+          }
+        }
+      } catch (e) {
+        console.log("Erreur lors de la récupération des variables CSS");
+      }
+    }
+    const style = window.getComputedStyle(this);
+    const result: Record<string, string> = {};
+    names.forEach((name) => (result[name] = style.getPropertyValue(name)));
+    return result;
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

package/src/core/components/ui/toast/message-subscriber.stories.ts

@@ -0,0 +1,43 @@
+import {SonicToast} from "./toast";
+import "./message-subscriber";
+import "@supersoniks/concorde/core/components/ui/button/button";
+import {PublisherManager} from "@supersoniks/concorde/core/utils/PublisherProxy";
+import {html} from "lit";
+
+// More on default export: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
+export default {
+  component: "sonic-toast-message-subscriber",
+  title: "core/components/ui/MessageSubscriber",
+  argTypes: {
+    status: {control: "select", options: ["success", "error", "warning", "info"]},
+  },
+};
+
+const Template: any = (conf: any) => {
+  setTimeout(() => {
+    SonicToast.removeAll();
+    PublisherManager.get("toast-message-exemple").messages = [
+      {content: "Chargé via un message", status: conf.status, type: "public"},
+    ];
+  }, 1);
+  return html`
+    <sonic-toast-message-subscriber dataProvider="toast-message-exemple"></sonic-toast-message-subscriber>
+    <!--
+  Cet exemple éxécute : 
+  PublisherManager.get("toast-message-exemple").messages=
+  [
+    {
+      content:"Chargé via un message", 
+      status:conf.status, 
+      type:"public"
+    }
+  ]
+-->
+  `;
+};
+
+export const Example = Template.bind({
+  title: "SonicToast",
+  text: "The modern web is here!",
+  status: "success",
+});

package/src/core/components/ui/toast/message-subscriber.ts

@@ -0,0 +1,37 @@
+import { LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import { SonicToast } from "@supersoniks/concorde/core/components/ui/toast/toast";
+import { Message } from "@supersoniks/concorde/core/_types/types";
+
+type APIResult = {
+  data?: object | string;
+  message?: string;
+  public_message?: string;
+  success?: boolean;
+  messages?: Message[];
+  status?: boolean;
+};
+
+const tagName = "sonic-toast-message-subscriber";
+
+//Superbe mix de multples versions d'api.
+@customElement(tagName)
+export class MessageSubscriber extends Subscriber(LitElement, {} as APIResult) {
+  _messages: Array<Message> = [];
+  @property({ type: Array }) get messages() {
+    return this._messages;
+  }
+  set messages(value) {
+    this._messages = value;
+    if (!this.messages) return;
+    value.forEach((message) => {
+      if (message.type == "public")
+        SonicToast.add({ text: message.content || "", status: message.status });
+    });
+  }
+
+  render() {
+    return nothing;
+  }
+}

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

@@ -1,89 +1,23 @@
-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 {html, LitElement, css, nothing} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {unsafeHTML} from "lit/directives/unsafe-html.js";
 import "@supersoniks/concorde/core/components/ui/toast/types";
-import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
-const icon = {
-    warning: "warning-circled-outline",
-    success: "check-circled-outline",
-    error: "warning-circled-outline",
-    info: "info-empty",
+import {ToastStatus} from "@supersoniks/concorde/core/components/ui/toast/types";
+import {customScroll} from "@supersoniks/concorde/core/components/ui/_css/scroll";
+
+const icon: Record<string, string> = {
+  warning: "warning-circled-outline",
+  success: "check-circled-outline",
+  error: "warning-circled-outline",
+  info: "info-empty",
 };
 const tagName = "sonic-toast-item";
-let SonicToastItem = class SonicToastItem extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.title = "";
-        this.id = "";
-        this.text = "";
-        this.status = "";
-        this.ghost = false;
-        this.preserve = false;
-        this.dismissForever = false;
-        this.maxHeight = "10rem";
-        this.visible = true;
-    }
-    // @queryAssignedElements({flatten: true, slot: main"})
-    // textSlot!: HTMLElement[];
-    render() {
-        // check if the toast is dismissed
-        if (this.dismissForever) {
-            const dismissed = localStorage.getItem("sonic-toast-dismissed") || "{}";
-            const dismissedObj = JSON.parse(dismissed);
-            if (dismissedObj[this.id]) {
-                return nothing;
-            }
-        }
-        if (!this.visible) {
-            return nothing;
-        }
-        return html `<div class="sonic-toast ${this.status} ${this.ghost ? "ghost" : ""}">
-      <button aria-label="Close" class="sonic-toast-close" @click=${() => this.hide()}>
-        <sonic-icon name="cancel" size="lg"></sonic-icon>
-      </button>
-      <div class="sonic-toast-content custom-scroll" style="max-height: ${this.maxHeight} ;">
-        ${this.status && html `<sonic-icon name=${icon[this.status]} class="sonic-toast-icon" size="2xl"></sonic-icon>`}
-
-        <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>
-    </div>`;
-    }
-    hide() {
-        if (!this.closest("sonic-toast")) {
-            this.visible = false;
-        }
-        if (this.dismissForever) {
-            // set in local Storage an Object with the id as key and if it's dismissed as value
-            const dismissed = localStorage.getItem("sonic-toast-dismissed") || "{}";
-            const dismissedObj = JSON.parse(dismissed);
-            dismissedObj[this.id] = true;
-            localStorage.setItem("sonic-toast-dismissed", JSON.stringify(dismissedObj));
-        }
-        this.dispatchEvent(new CustomEvent("hide", { bubbles: true }));
-    }
-    show() {
-        this.visible = true;
-    }
-    autoHide() {
-        setTimeout(() => {
-            this.hide();
-        }, 6000);
-    }
-};
-SonicToastItem.styles = [
+@customElement(tagName)
+export class SonicToastItem extends LitElement {
+  static styles = [
     customScroll,
-    css `
+    css`
       * {
         box-sizing: border-box;
       }
@@ -261,35 +195,74 @@ SonicToastItem.styles = [
         pointer-events: none;
       }
     `,
-];
-__decorate([
-    property({ type: String })
-], SonicToastItem.prototype, "title", void 0);
-__decorate([
-    property({ type: String })
-], SonicToastItem.prototype, "id", 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([
-    property({ type: Boolean })
-], SonicToastItem.prototype, "dismissForever", void 0);
-__decorate([
-    property({ type: String })
-], SonicToastItem.prototype, "maxHeight", void 0);
-__decorate([
-    state()
-], SonicToastItem.prototype, "visible", void 0);
-SonicToastItem = __decorate([
-    customElement(tagName)
-], SonicToastItem);
-export { SonicToastItem };
+  ];
+
+  @property({type: String}) title = "";
+  @property({type: String}) id = "";
+  @property({type: String}) text = "";
+  @property({type: String}) status: ToastStatus = "";
+  @property({type: Boolean}) ghost = false;
+  @property({type: Boolean}) preserve = false;
+  @property({type: Boolean}) dismissForever = false;
+  @property({type: String}) maxHeight = "10rem";
+  @state() visible = true;
+
+  // @queryAssignedElements({flatten: true, slot: main"})
+  // textSlot!: HTMLElement[];
+
+  render() {
+    // check if the toast is dismissed
+    if (this.dismissForever) {
+      const dismissed = localStorage.getItem("sonic-toast-dismissed") || "{}";
+      const dismissedObj = JSON.parse(dismissed);
+      if (dismissedObj[this.id]) {
+        return nothing;
+      }
+    }
+
+    if (!this.visible) {
+      return nothing;
+    }
+
+    return html`<div class="sonic-toast ${this.status} ${this.ghost ? "ghost" : ""}">
+      <button aria-label="Close" class="sonic-toast-close" @click=${() => this.hide()}>
+        <sonic-icon name="cancel" size="lg"></sonic-icon>
+      </button>
+      <div class="sonic-toast-content custom-scroll" style="max-height: ${this.maxHeight} ;">
+        ${this.status && html`<sonic-icon name=${icon[this.status]} class="sonic-toast-icon" size="2xl"></sonic-icon>`}
+
+        <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>
+    </div>`;
+  }
+
+  hide() {
+    if (!this.closest("sonic-toast")) {
+      this.visible = false;
+    }
+
+    if (this.dismissForever) {
+      // set in local Storage an Object with the id as key and if it's dismissed as value
+      const dismissed = localStorage.getItem("sonic-toast-dismissed") || "{}";
+      const dismissedObj = JSON.parse(dismissed);
+      dismissedObj[this.id] = true;
+      localStorage.setItem("sonic-toast-dismissed", JSON.stringify(dismissedObj));
+    }
+    this.dispatchEvent(new CustomEvent("hide", {bubbles: true}));
+  }
+
+  show() {
+    this.visible = true;
+  }
+
+  autoHide() {
+    setTimeout(() => {
+      this.hide();
+    }, 6000);
+  }
+}