@supersoniks/concorde 3.2.6 → 3.3.2

package/src/core/components/functional/queue/queue.demo.ts

@@ -22,17 +22,14 @@ export class QueueDemo extends LitElement {
 
   render() {
     return html`
-      <div class="p-4">
-        <h2 class="text-xl font-medium mb-4">Liste des communes</h2>
-        <sonic-queue
-          class="grid grid-cols-3 gap-3"
-          serviceurl="https://geo.api.gouv.fr/"
-          dataproviderexpression="communes?limit=$limit"
-          limit="30"
-          .items=${this.items}
-          .noItems=${this.noItems}
-        ></sonic-queue>
-      </div>
+      <sonic-queue
+        class="grid grid-cols-3 gap-3"
+        serviceurl="https://geo.api.gouv.fr/"
+        dataproviderexpression="communes?limit=$limit"
+        limit="30"
+        .items=${this.items}
+        .noItems=${this.noItems}
+      ></sonic-queue>
     `;
   }
 }

package/src/core/components/functional/sdui/sdui.ts

@@ -5,11 +5,11 @@ import {
   SDUINode,
   SDUITransformDescription,
 } from "@supersoniks/concorde/core/components/functional/sdui/types";
-import {Fetcher, Subscriber} from "@supersoniks/concorde/mixins";
+import { Fetcher, Subscriber } from "@supersoniks/concorde/mixins";
 
-import {HTML, Objects} from "@supersoniks/concorde/utils";
-import {LitElement, PropertyValues} from "lit";
-import {customElement, property} from "lit/decorators.js";
+import { HTML, Objects } from "@supersoniks/concorde/utils";
+import { LitElement, PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators.js";
 const tagName = "sonic-sdui"; // For Astro.build
 /**
  *  ### sonic-sdui (Server Driven User Interface) est un fetcher chargant un JSON décrivant une interface utilisateur
@@ -75,7 +75,9 @@ export class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
    * Suppressiond du contenu du composant avant le génération de la nouvelle ui
    */
   private removeChildren() {
-    while ([...this.children].filter((elt) => elt.nodeName != "SLOT").length > 0) {
+    while (
+      [...this.children].filter((elt) => elt.nodeName != "SLOT").length > 0
+    ) {
       this.removeChild(this.children[0]);
     }
   }
@@ -118,9 +120,12 @@ export class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
     if (!this.sduiDescriptor) return;
     let nodes = this.sduiDescriptor.nodes;
     if (!nodes) nodes = [];
-    const messageProvider = {tagName: "sonic-toast-message-subscriber", attributes: {}};
+    const messageProvider = {
+      tagName: "sonic-toast-message-subscriber",
+      attributes: {},
+    };
     if (this.messagesKey) {
-      messageProvider.attributes = {subDataProvider: this.messagesKey};
+      messageProvider.attributes = { subDataProvider: this.messagesKey };
     }
     nodes.push(messageProvider);
     nodes.forEach((node) => this.appendChild(this.parseChild(node)));
@@ -130,7 +135,7 @@ export class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
    */
   private parseChild(node: SDUINode) {
     const tagName = node.tagName || "div";
-    let {element, contentElement} = this.handleLibrary(node, tagName);
+    let { element, contentElement } = this.handleLibrary(node, tagName);
     this.handleAttributes(node, element);
     element = this.handleMarkup(node, element);
     if (!contentElement) contentElement = element;
@@ -148,7 +153,8 @@ export class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
    */
   private handlePrefixSuffix(node: SDUINode, element: HTMLElement) {
     const container = document.createElement("div");
-    container.innerHTML = (node.prefix || "") + element.outerHTML + (node.suffix || "");
+    container.innerHTML =
+      (node.prefix || "") + element.outerHTML + (node.suffix || "");
     container.style.display = "contents";
     return container;
   }
@@ -156,18 +162,26 @@ export class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
    * Création des enfants du noeud courant
    * Si l'enfant à un attribut parentElementSelector, il est ajouté dans le noeud correspondant au sélecteur css associé et non pas dans l'élément directement.
    */
-  private handleChildNodes(node: SDUINode, contentElement: HTMLElement, element: HTMLElement) {
+  private handleChildNodes(
+    node: SDUINode,
+    contentElement: HTMLElement,
+    element: HTMLElement
+  ) {
     if (node.nodes) {
       const children: Array<SDUINode> = node.nodes;
       for (const child of children) {
         const childElement = this.parseChild(child);
         let nodeToAppendOn = contentElement;
         if (child.parentElementSelector) {
-          nodeToAppendOn = element.querySelector(child.parentElementSelector) || contentElement;
+          nodeToAppendOn =
+            element.querySelector(child.parentElementSelector) ||
+            contentElement;
         }
-        if (nodeToAppendOn.shadowRoot) nodeToAppendOn.shadowRoot.appendChild(childElement);
+        if (nodeToAppendOn.shadowRoot)
+          nodeToAppendOn.shadowRoot.appendChild(childElement);
         else if (nodeToAppendOn.tagName.toLocaleLowerCase() == "template") {
-          const template: HTMLTemplateElement = nodeToAppendOn as HTMLTemplateElement;
+          const template: HTMLTemplateElement =
+            nodeToAppendOn as HTMLTemplateElement;
           template.content.appendChild(childElement);
         } else nodeToAppendOn.appendChild(childElement);
       }
@@ -184,11 +198,15 @@ export class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
     let element: HTMLElement;
     let contentElement: HTMLElement | undefined;
     if (node.libraryKey && this.sduiDescriptor.library) {
-      element = this.parseChild(this.sduiDescriptor.library[node.libraryKey] || {tagName: "div"});
-      const selector = (this.sduiDescriptor.library[node.libraryKey] || {}).contentElementSelector;
-      if (selector) contentElement = element.querySelector(selector) as HTMLElement;
+      element = this.parseChild(
+        this.sduiDescriptor.library[node.libraryKey] || { tagName: "div" }
+      );
+      const selector = (this.sduiDescriptor.library[node.libraryKey] || {})
+        .contentElementSelector;
+      if (selector)
+        contentElement = element.querySelector(selector) as HTMLElement;
     } else element = document.createElement(tagName) as HTMLElement;
-    return {element, contentElement};
+    return { element, contentElement };
   }
   /**
    * Remplissage des attributs html avec les attributs fournis dans le noeud
@@ -197,7 +215,9 @@ export class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
     const attributes = node.attributes;
     for (const k in attributes) {
       const attrData: object | string = attributes[k];
-      const attr: string = Objects.isObject(attrData) ? JSON.stringify(attrData) : attrData;
+      const attr: string = Objects.isObject(attrData)
+        ? JSON.stringify(attrData)
+        : attrData;
       element.setAttribute(k, attr);
     }
   }
@@ -216,13 +236,18 @@ export class SonicSDUI extends Fetcher(Subscriber(LitElement)) {
   /**
    * si le noeud à une propriété innerHTML, on l'ajout ay innerHTML de l'élément html en cours de création
    */
-  private handleInnerHTML(node: SDUINode, contentElement: HTMLElement | undefined) {
+  private handleInnerHTML(
+    node: SDUINode,
+    contentElement: HTMLElement | undefined
+  ) {
     if (!node.innerHTML) return;
     if (node.innerHTML.indexOf("wording_") != -1) {
       const wordingProvider = this.getAncestorAttributeValue("wordingProvider");
-      this.api?.post(wordingProvider, {labels: [node.innerHTML.substring(8)]}).then((value) => {
-        if (contentElement) contentElement.innerHTML += value;
-      });
+      this.api
+        ?.post(wordingProvider, { labels: [node.innerHTML.substring(8)] })
+        .then((value) => {
+          if (contentElement) contentElement.innerHTML += value;
+        });
     } else if (contentElement) {
       contentElement.innerHTML += node.innerHTML;
     }

package/src/core/components/ui/form/input-autocomplete/input-autocomplete.ts

@@ -4,6 +4,7 @@ import {
   property,
   queryAssignedNodes,
   state,
+  query,
 } from "lit/decorators.js";
 import {
   FormInput,
@@ -23,6 +24,7 @@ import { Input } from "@supersoniks/concorde/core/components/ui/form/input/input
 import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
 import { ResizeController } from "@lit-labs/observers/resize-controller.js";
 import { traverseDotNotation } from "@supersoniks/concorde/core/utils/Objects";
+import { Pop } from "../../pop/pop";
 
 type ListItem = Record<string, string>;
 
@@ -82,6 +84,7 @@ export class InputAutocomplete extends TemplatesContainer(
   slotInputPrefixNodes!: Array<Node>;
 
   @state() hasInputPrefix = false;
+  @query("sonic-pop") popElement!: Pop;
   _resizeController = new ResizeController(this, {});
 
   @state() isPopVisible = false;
@@ -324,9 +327,13 @@ export class InputAutocomplete extends TemplatesContainer(
     return this.searchPublisher?.get();
   }
 
+  handleFocus(): void {
+    this.popElement.show();
+  }
+
   render() {
     return html`
-      <sonic-pop noToggle style="display:block;" @hide=${this.handleHide}>
+      <sonic-pop manual style="display:block;" @hide=${this.handleHide}>
         <sonic-input
           class="form-element"
           dataProvider="${this.initSearchDataProvider + Math.random()}"
@@ -344,6 +351,7 @@ export class InputAutocomplete extends TemplatesContainer(
           clearable
           inlineContent
           size=${this.size}
+          @focus=${this.handleFocus}
           value=${ifDefined(this.getInputValue())}
         >
           <slot

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

@@ -36,9 +36,8 @@ export class Tooltip extends LitElement {
         will-change: opacity, transform;
       }
 
-      /* désactive au focus-within cause persistance du tooltip au clic */
-      /* :host(:focus-within) .tooltip:before, */
       :host(:focus-visible) .tooltip:before,
+      :host(.keyboard-focus) .tooltip:before,
       .tooltip:hover:before {
         opacity: 1;
         scale: 1;
@@ -132,12 +131,78 @@ export class Tooltip extends LitElement {
   @property({ type: Boolean }) disabled = false;
   @property({ type: Boolean }) focusable = false;
 
+  private lastKeyWasTab = false;
+  private boundHandleKeyDown: (e: KeyboardEvent) => void;
+  private boundHandleMouseDown: () => void;
+
+  constructor() {
+    super();
+    this.boundHandleKeyDown = this.handleKeyDown.bind(this);
+    this.boundHandleMouseDown = this.handleMouseDown.bind(this);
+  }
+
+  private handleKeyDown = (e: KeyboardEvent) => {
+    // Détecter si Tab ou Shift+Tab a été pressé
+    if (e.key === "Tab") {
+      this.lastKeyWasTab = true;
+    }
+  };
+
+  private handleMouseDown = () => {
+    // Réinitialiser le flag si la souris est utilisée
+    this.lastKeyWasTab = false;
+    // Retirer la classe si elle existe (au cas où)
+    this.classList.remove("keyboard-focus");
+  };
+
+  private handleFocusIn = () => {
+    // Ajouter la classe seulement si le focus est venu du clavier (Tab)
+    if (this.lastKeyWasTab) {
+      this.classList.add("keyboard-focus");
+    }
+    this.lastKeyWasTab = false;
+  };
+
+  private handleFocusOut = () => {
+    this.classList.remove("keyboard-focus");
+    this.lastKeyWasTab = false;
+  };
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("focusin", this.handleFocusIn);
+    this.addEventListener("focusout", this.handleFocusOut);
+    // Écouter les événements au niveau du document avec capture pour détecter Tab
+    document.addEventListener("keydown", this.boundHandleKeyDown, true);
+    document.addEventListener("mousedown", this.boundHandleMouseDown, true);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("focusin", this.handleFocusIn);
+    this.removeEventListener("focusout", this.handleFocusOut);
+    document.removeEventListener("keydown", this.boundHandleKeyDown, true);
+    document.removeEventListener("mousedown", this.boundHandleMouseDown, true);
+  }
+
   protected willUpdate(_changedProperties: PropertyValues): void {
     if (_changedProperties.has("disabled")) {
       const wasDisabledBefore = _changedProperties.get("disabled") === true;
       if (this.disabled) {
         this.setAttribute("tabindex", "-1");
+        this.classList.remove("keyboard-focus");
       } else if (!this.disabled && wasDisabledBefore) {
+        if (this.focusable) {
+          this.setAttribute("tabindex", "0");
+        } else {
+          this.removeAttribute("tabindex");
+        }
+      }
+    }
+    if (_changedProperties.has("focusable")) {
+      if (this.focusable && !this.disabled) {
+        this.setAttribute("tabindex", "0");
+      } else if (!this.focusable && !this.disabled) {
         this.removeAttribute("tabindex");
       }
     }

package/src/core/decorators/Subscriber.ts

@@ -1,187 +1,5 @@
-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);
-        };
-      });
-    }
-  };
-}
+export { bind } from "./subscriber/bind";
+export { onAssign } from "./subscriber/onAssign";
+export { autoSubscribe } from "./subscriber/autoSubscribe";
+export { autoFill } from "./subscriber/autoFill";
+export { ancestorAttribute } from "./subscriber/ancestorAttribute";

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

@@ -0,0 +1,17 @@
+import HTML from "../../utils/HTML";
+import { ConnectedComponent, setSubscribable } from "./common";
+
+export function ancestorAttribute(attributeName: string) {
+  return function (target: unknown, propertyKey: string) {
+    if (!target) return;
+    setSubscribable(target);
+
+    (target as ConnectedComponent).__onConnected__((component) => {
+      const value = HTML.getAncestorAttributeValue(
+        component as any,
+        attributeName
+      );
+      component[propertyKey] = value;
+    });
+  };
+}

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

@@ -0,0 +1,28 @@
+import { Objects } from "@supersoniks/concorde/utils";
+
+import { PublisherManager } from "../../utils/PublisherProxy";
+import { ConnectedComponent, setSubscribable } from "./common";
+
+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);
+        };
+      });
+    }
+  };
+}
+

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

@@ -0,0 +1,54 @@
+import { PublisherProxy, PublisherManager } from "../../utils/PublisherProxy";
+
+export function autoSubscribe() {
+  return function (
+    target: any,
+    propertyKey: string,
+    descriptor: PropertyDescriptor
+  ) {
+    let renderId = 0;
+
+    const originalMethod = descriptor.value;
+    const originalDisconnectedCallback =
+      target.constructor.prototype.disconnectedCallback;
+    target.constructor.prototype.disconnectedCallback = function () {
+      originalDisconnectedCallback?.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]();
+        });
+      };
+      publishers.forEach((publisher: PublisherProxy) => {
+        publisher.offAssign(onAssign);
+      });
+      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;
+    };
+  };
+}