@supersoniks/concorde 4.9.98-visual-stack.1 → 5.0.0

package/src/core/components/ui/form/radio/radio.ts

@@ -7,7 +7,7 @@ const tagName = "sonic-radio";
  * ### Le composant sonic-radio étend sonic-checkbox en assignant sa propriété radio à true.
  *
  * * Le type d'input html utilisé passe également de checkbox à radio.
- * * Le comportement est donc similaire à un bouton radio classique mais avec les fonctionnalités de sonic-checkbox (ie : Subscriber / FormElement / FormCheckable).
+ * * Le comportement est donc similaire à un bouton radio classique mais avec les fonctionnalités de sonic-checkbox (FormElement / FormCheckable).
  */
 
 @customElement(tagName)

package/src/core/components/ui/form/select/select.ts

@@ -15,7 +15,6 @@ import {
   description,
 } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
 
-import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
@@ -35,14 +34,12 @@ export type SelectOption = {
 const tagName = "sonic-select";
 /**
  * #### FormElement :
- * * La propriété value est remplie automatiquement a l'aide de l'attribut name renseigné, ceci en prenant la valeur de la propriété du même nom dans les données du dataprovider associé.
- * * Par défault lorsque l'on édite l'input, la valeur est également mise à jour via le même dataprovider
- * * On peut cependant décider de mettre à jour la donnée à une autre adresse en renseigne l'attribut *formDataProvider*.
- * * Par conséquent on peut par exemple le lier à un composant *queue* (via sa propriété *dataFilterProvider*) de manière à appeller en auto une api avec des filtres.
+ * Synchronise `value` via `formDataProvider` + `name`.
+ * Peut alimenter un `sonic-queue` via `dataFilterProvider` sur le même store.
  */
 
 @customElement(tagName)
-export class Select extends FormElement(Subscriber(LitElement)) {
+export class Select extends FormElement(LitElement) {
   static styles = [
     fontSize,
     formControl,

package/src/core/components/ui/form/textarea/textarea.ts

@@ -11,7 +11,6 @@ import {
   formControl,
   label,
 } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
-import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import FormInput from "@supersoniks/concorde/core/mixins/FormInput";
 import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
@@ -25,7 +24,7 @@ import { styleMap } from "lit/directives/style-map.js";
 const tagName = "sonic-textarea";
 
 @customElement(tagName)
-export class Textarea extends FormInput(FormElement(Subscriber(LitElement))) {
+export class Textarea extends FormInput(FormElement(LitElement)) {
   static styles = [
     fontSize,
     formControl,

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

@@ -133,6 +133,15 @@ export class Pop extends LitElement {
     this.dispatchEvent(new CustomEvent("hide"));
   }
 
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+    // Le template remet style="display:none" à chaque render —
+    // on le retire après coup quand le pop est ouvert.
+    if (this.open) {
+      this.popContent?.style?.removeProperty("display");
+    }
+  }
+
   /**
    * Remonte dans la structure html de parents en parents et si ils on une position relative ou absolute, on met leur z-index élévé
    */

package/src/core/components/ui/toast/render-content.ts

@@ -0,0 +1,13 @@
+import { nothing } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { ToastContent } from "@supersoniks/concorde/core/components/ui/toast/types";
+
+/**
+ * Renders toast title/text content: TemplateResult/DirectiveResult as-is,
+ * HTML strings via unsafeHTML (legacy).
+ */
+export function renderToastContent(content?: ToastContent) {
+  if (!content) return nothing;
+  if (content instanceof Object) return content;
+  return unsafeHTML(content);
+}

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

@@ -1,8 +1,13 @@
-import { html, LitElement, css, nothing } from "lit";
+import { html, LitElement, css, nothing, PropertyValues } 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 { ToastStatus } from "@supersoniks/concorde/core/components/ui/toast/types";
+import {
+  ToastContent,
+  ToastStatus,
+  ToastStyleSheetInput,
+} from "@supersoniks/concorde/core/components/ui/toast/types";
+import { renderToastContent } from "@supersoniks/concorde/core/components/ui/toast/render-content";
+import { normalizeStyleSheets } from "@supersoniks/concorde/core/components/ui/modal/modal-utils";
 import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
 import { HTML } from "@supersoniks/concorde/utils";
 
@@ -201,16 +206,19 @@ export class SonicToastItem extends LitElement {
     `,
   ];
 
-  @property({ type: String }) title = "";
+  @property() label: ToastContent = "";
   @property({ type: String }) id = "";
-  @property({ type: String }) text = "";
+  @property() text: ToastContent = "";
   @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";
+  @property({ type: Boolean }) useSlot = false;
+  @property({ attribute: false }) styleSheet?: ToastStyleSheetInput;
   @state() visible = true;
   @state() private _titleId: string = "";
+  private _adoptedStyleSheets: Array<CSSStyleSheet> = [];
 
   // @queryAssignedElements({flatten: true, slot: main"})
   // textSlot!: HTMLElement[];
@@ -276,17 +284,16 @@ export class SonicToastItem extends LitElement {
       return nothing;
     }
 
-    const titleId = this.title ? this.getTitleId() : undefined;
+    const titleId = this.label ? this.getTitleId() : undefined;
     // Extrait un label pour aria-label si pas de titre, en essayant de couper proprement
     const ariaLabel =
-      !this.title && this.text
+      !this.label && typeof this.text === "string"
         ? this.text.length > 100
           ? this.text.substring(0, 100).replace(/\s+\S*$/, "") + "..."
           : this.text
         : undefined;
 
     const ariaLive = this.getAriaLive();
-
     return html`<div
       class="sonic-toast ${this.status} ${this.ghost ? "ghost" : ""}"
       role=${this.getAriaRole()}
@@ -314,12 +321,12 @@ export class SonicToastItem extends LitElement {
         ></sonic-icon>`}
 
         <div class="sonic-toast-text">
-          ${this.title
+          ${this.label
             ? html`<div class="sonic-toast-title" id=${titleId}>
-                ${this.title}
+                ${renderToastContent(this.label)}
               </div>`
             : ""}
-          ${this.text ? unsafeHTML(this.text) : ""}
+          ${this.useSlot ? nothing : renderToastContent(this.text)}
           <slot></slot>
         </div>
 
@@ -328,6 +335,27 @@ export class SonicToastItem extends LitElement {
     </div>`;
   }
 
+  protected updated(_changedProperties: PropertyValues): void {
+    if (_changedProperties.has("styleSheet")) {
+      this.syncAdoptedStyleSheets();
+    }
+  }
+
+  syncAdoptedStyleSheets() {
+    if (!(this.renderRoot instanceof ShadowRoot)) return;
+
+    const nextStyleSheets = normalizeStyleSheets(this.styleSheet);
+    const currentStyleSheets = this.renderRoot.adoptedStyleSheets.filter(
+      (sheet) => !this._adoptedStyleSheets.includes(sheet),
+    );
+
+    this.renderRoot.adoptedStyleSheets = [
+      ...currentStyleSheets,
+      ...nextStyleSheets,
+    ];
+    this._adoptedStyleSheets = nextStyleSheets;
+  }
+
   hide() {
     if (!HTML.getClosestElement(this, "sonic-toast")) {
       this.visible = false;
@@ -340,7 +368,7 @@ export class SonicToastItem extends LitElement {
       dismissedObj[this.id] = true;
       localStorage.setItem(
         "sonic-toast-dismissed",
-        JSON.stringify(dismissedObj)
+        JSON.stringify(dismissedObj),
       );
     }
     this.dispatchEvent(new CustomEvent("hide", { bubbles: true }));

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

@@ -5,13 +5,32 @@ 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 { renderToastContent } from "@supersoniks/concorde/core/components/ui/toast/render-content";
 import {
   Toast,
+  ToastContent,
   ToastStatus,
 } from "@supersoniks/concorde/core/components/ui/toast/types";
+
+let deprecatedTitleWarned = false;
+
+function resolveToastLabel(
+  conf: Pick<Toast, "label" | "title">,
+): ToastContent | undefined {
+  if (conf.label !== undefined) return conf.label;
+  if (conf.title !== undefined) {
+    if (!deprecatedTitleWarned) {
+      deprecatedTitleWarned = true;
+      console.warn(
+        "[concorde] Toast.title est déprécié, utiliser Toast.label.",
+      );
+    }
+    return conf.title;
+  }
+  return undefined;
+}
 import { ConcordeWindow } from "@supersoniks/concorde/core/_types/types";
 import { Theme } from "@supersoniks/concorde/core/components/ui/theme/theme";
 import { sonicClassPrefix } from "@supersoniks/concorde/core/utils/Utils";
@@ -55,7 +74,6 @@ export class SonicToast extends LitElement {
     // ${window.parent == window ? "fixed-area" : ""}
     SonicToast.handleExistingToastDelegation();
     if (!this.toasts) return nothing;
-
     return html`<div style=${styleMap(styles)}>
       ${repeat(
         this.toasts,
@@ -64,7 +82,10 @@ export class SonicToast extends LitElement {
           <sonic-toast-item
             maxHeight=${isIframe ? "none" : "10rem"}
             status=${ifDefined(item.status)}
-            title=${ifDefined(item.title)}
+            .label=${resolveToastLabel(item)}
+            .text=${item.useSlot ? undefined : item.text}
+            .styleSheet=${item.styleSheet}
+            ?useSlot=${item.useSlot}
             ?ghost=${item.ghost}
             ?dismissForever=${item.dismissForever}
             ?preserve=${item.preserve}
@@ -93,10 +114,9 @@ export class SonicToast extends LitElement {
               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) : ""}
+            ${item.useSlot ? renderToastContent(item.text) : nothing}
           </sonic-toast-item>
-        `
+        `,
       )}
     </div>`;
   }
@@ -124,7 +144,21 @@ export class SonicToast extends LitElement {
 
     // Filtrer pour garder seulement les toasts qui ne correspondent pas au statut donné
     toastComponent.toasts = toastComponent.toasts.filter(
-      (toast) => toast.status !== status
+      (toast) => toast.status !== status,
+    );
+  }
+
+  static removeItemById(id: string | number) {
+    if (SonicToast.delegateToasts) {
+      SonicToast.handleExistingToastDelegation();
+      window.parent.postMessage({ type: "removeItemById", id }, "*");
+      return;
+    }
+    const toastComponent: SonicToast = SonicToast.getInstance();
+    if (!toastComponent) return;
+
+    toastComponent.toasts = toastComponent.toasts.filter(
+      (toast) => toast.id !== id,
     );
   }
 
@@ -139,7 +173,7 @@ export class SonicToast extends LitElement {
     if (!toastComponent) return;
 
     toastComponent.toasts = toastComponent.toasts.filter(
-      (item) => item.preserve
+      (item) => item.preserve,
     );
   }
 
@@ -159,23 +193,25 @@ export class SonicToast extends LitElement {
     }
     // 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>"
+      "</a>|</.*?button>|</.*?input>|</.*?textarea>|</.*?select>",
     );
-    const hasInteractive = interactiveRegExp.test(conf.text);
+    const hasInteractive =
+      typeof conf.text === "string" && interactiveRegExp.test(conf.text);
 
     const currentToast = {
       id: nextId,
       text: conf.text,
-      title: conf.title,
+      label: resolveToastLabel(conf),
       status: conf.status,
       preserve: hasInteractive ? true : conf.preserve,
       ghost: conf.ghost,
       dismissForever: conf.dismissForever,
+      styleSheet: conf.styleSheet,
+      useSlot: conf.useSlot,
     };
 
     // check if the toast is dismissed
@@ -210,7 +246,7 @@ export class SonicToast extends LitElement {
     const toastComponent: SonicToast = SonicToast.getInstance();
     window.parent.postMessage(
       { type: "addToasts", toasts: toastComponent.toasts },
-      "*"
+      "*",
     );
     toastComponent.toasts = [];
   }
@@ -220,7 +256,7 @@ export class SonicToast extends LitElement {
       SonicToast.handleExistingToastDelegation();
       window.parent.postMessage(
         { type: "removeToast", toast: toastToRemove },
-        "*"
+        "*",
       );
       return;
     }
@@ -257,6 +293,10 @@ function handleIframeContexts() {
       SonicToast.removeItemsByStatus(e.data.status);
     }
 
+    if (e.data.type == "removeItemById") {
+      SonicToast.removeItemById(e.data.id);
+    }
+
     if (e.data.type == "removeTemporaryItems") {
       SonicToast.removeTemporaryItems();
     }

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

@@ -1,14 +1,26 @@
 import { Message } from "@supersoniks/concorde/core/_types/types";
+import { TemplateResult } from "lit";
+import { DirectiveResult } from "lit/directive.js";
+import { ModalStyleSheetInput } from "@supersoniks/concorde/core/components/ui/modal/modal-utils";
 
 export type ToastStatus = Message["status"] | "" | "success";
 
+export type ToastContent = string | TemplateResult | DirectiveResult;
+
+export type ToastStyleSheetInput = ModalStyleSheetInput;
+
 // Toast
 export type Toast = {
   id?: string | number;
-  text: string;
-  title?: string;
+  text: ToastContent;
+  label?: ToastContent;
+  /** @deprecated Utiliser `label`. */
+  title?: ToastContent;
   status?: ToastStatus;
   preserve?: boolean;
   ghost?: boolean;
   dismissForever?: boolean;
+  styleSheet?: ToastStyleSheetInput;
+  /** Legacy: project text into the light DOM slot instead of the shadow root. */
+  useSlot?: boolean;
 };

package/src/core/decorators/subscriber/derive.ts

@@ -6,6 +6,7 @@ import {
   derive as deriveFn,
   type DeriveHandle,
 } from "../../utils/derive";
+import { compileJsonata } from "../../utils/jsonataRuntime";
 
 export type DeriveDecoratorOptions<
   I extends Record<string, unknown>,
@@ -60,9 +61,8 @@ export function deriveDecorator<
           if (!options.expr) {
             throw new Error("@derive : fournir `expr` ou `fn`.");
           }
-          const { compileJsonata } = await import(
-            "../../utils/jsonataRuntime"
-          );
+          // Static import: dynamic import() breaks consumer Vite builds
+          // (rewrites to \0vite/preload-helper → load-fallback null-byte error).
           const expr = compileJsonata(options.expr);
           return expr.evaluate({}, {
             ...(vars as Record<string, unknown>),

package/src/core/mixins/Fetcher.ts

@@ -160,7 +160,7 @@ const Fetcher = <
      * 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
      */
-    protected async _fetchData() {
+    async _fetchData() {
       this.requestUpdate();
       if (!this.isFetchEnabled) return;
       this.api = new API(this.getApiConfiguration());

package/src/core/mixins/FormCheckable.ts

@@ -118,11 +118,6 @@ const Form = <T extends Constructor<FormElementInterface>>(superClass: T) => {
       this.requestUpdate();
       setTimeout(() => this.updateAllChecked(), 1);
 
-      // Désactivation du checked sur le publisher
-      // Pas sur de l'utilité mais provoque un bug
-      // if (this.publisher && !this.radio && !this.unique) {
-      //   this.publisher.checked = this._checked;
-      // }
     }
 
     handleChange() {
@@ -300,9 +295,7 @@ const Form = <T extends Constructor<FormElementInterface>>(superClass: T) => {
       if (!this.hasAttribute("checked")) {
         return;
       }
-      if (!this.publisher || this.publisher.get().checked !== false) {
-        setTimeout(() => (this.checked = true), 1);
-      }
+      setTimeout(() => (this.checked = true), 1);
     }
   }
   return FormCheckable;