@supersoniks/concorde 1.1.41 → 1.1.43

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

@@ -1,8 +1,15 @@
 import { LitElement } from "lit";
+import { DirectiveResult } from "lit/directive";
+import { UnsafeHTMLDirective } from "lit/directives/unsafe-html";
+/**
+ * Afficher l'icone choisie parmis une liste prédéfinie dans icons.json
+ * les tailles suivantes sont disponible via l'attribut *size* : 2xs,xs,sm,"",lg,xl,2xl
+ */
 export declare class Icon extends LitElement {
     static styles: import("lit").CSSResult;
-    updateIcon(): Promise<void>;
-    iconText: any;
+    renderId: number;
+    updateIcon(): void;
+    iconText: DirectiveResult<typeof UnsafeHTMLDirective> | string;
     /**
      * Nom identifiant l'icone ex : *info*
      */
@@ -21,5 +28,5 @@ export declare class Icon extends LitElement {
     private _library;
     get library(): string;
     set library(newLibrary: string);
-    render(): any;
+    render(): DirectiveResult<typeof UnsafeHTMLDirective>;
 }

package/core/components/ui/icon/icon.js

@@ -13,17 +13,18 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { LitElement, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
 import Icons from "@supersoniks/concorde/core/components/ui/icon/icons";
+import { css, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+const tagName = "sonic-icon";
 /**
  * Afficher l'icone choisie parmis une liste prédéfinie dans icons.json
  * les tailles suivantes sont disponible via l'attribut *size* : 2xs,xs,sm,"",lg,xl,2xl
  */
-const tagName = "sonic-icon";
 let Icon = class Icon extends LitElement {
     constructor() {
         super(...arguments);
+        this.renderId = 0;
         this.iconText = "";
         /**
          * Nom identifiant l'icone ex : *info*
@@ -39,12 +40,17 @@ let Icon = class Icon extends LitElement {
         this._library = "";
     }
     updateIcon() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.name)
+        if (!this.name)
+            return;
+        this.renderId++;
+        const frameRenderId = this.renderId;
+        window.requestAnimationFrame(() => __awaiter(this, void 0, void 0, function* () {
+            if (frameRenderId != this.renderId) {
                 return;
+            }
             this.iconText = yield Icons.default.get({ name: this.name, prefix: this.prefix, library: this.library });
             this.requestUpdate();
-        });
+        }));
     }
     get name() {
         return this._name;
@@ -88,14 +94,14 @@ Icon.styles = css `
       width: var(--sc-icon-size, 1em);
     }
 
-    svg:not([fill="none"]){
+    svg:not([fill="none"]) {
       fill: currentColor;
     }
 
-    svg[fill="none"]{
+    svg[fill="none"] {
       stroke-width: 2;
     }
-    
+
     :host([size="2xs"]) svg {
       --sc-icon-size: 0.625em;
     }
@@ -122,7 +128,7 @@ Icon.styles = css `
 
     :host([size="3xl"]) svg {
       --sc-icon-size: 2.8em;
-    
+    }
   `;
 __decorate([
     property({ type: String })
@@ -137,8 +143,3 @@ Icon = __decorate([
     customElement(tagName)
 ], Icon);
 export { Icon };
-//Ajout pour la creation du cem notamment pour Storybook
-try {
-    customElements.define(tagName, Icon);
-}
-catch (e) { }

package/core/components/ui/icon/icons.js

@@ -8,8 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var _a;
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import icons from "@supersoniks/concorde/core/components/ui/icon/icons.json";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 /**
  * Ce tableau static permet de ne pas appeler plusieurs fois le même service lors d'appel concurrents en GET.
  */
@@ -31,6 +31,9 @@ const libraries = {
     feathers: {
         url: "https://cdn.jsdelivr.net/npm/feather-icons@4.29.0/dist/icons/$name.svg",
     },
+    lucide: {
+        url: "https://cdn.jsdelivr.net/npm/lucide-static@0.16.29/icons/$name.svg",
+    },
     material: {
         url: "https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.5/svg/$name/$prefix.svg",
         defaultPrefix: "regular",
@@ -39,6 +42,7 @@ const libraries = {
         url: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.1/svgs/$prefix/$name.svg",
         defaultPrefix: "regular",
     },
+    custom: { url: "", defaultPrefix: "" },
 };
 let hasEnabledCustomLibrary = false;
 function enableCustomLibrary() {
@@ -46,9 +50,9 @@ function enableCustomLibrary() {
     if (hasEnabledCustomLibrary)
         return;
     hasEnabledCustomLibrary = true;
-    libraries.custom = {};
-    libraries.custom.url = (_b = document.querySelector("[customIconLibraryPath]")) === null || _b === void 0 ? void 0 : _b.getAttribute("customIconLibraryPath");
-    libraries.custom.defaultPrefix = (_c = document.querySelector("[customIconDefaultPrefix]")) === null || _c === void 0 ? void 0 : _c.getAttribute("customIconDefaultPrefix");
+    libraries.custom.url = ((_b = document.querySelector("[customIconLibraryPath]")) === null || _b === void 0 ? void 0 : _b.getAttribute("customIconLibraryPath")) || "";
+    libraries.custom.defaultPrefix =
+        ((_c = document.querySelector("[customIconDefaultPrefix]")) === null || _c === void 0 ? void 0 : _c.getAttribute("customIconDefaultPrefix")) || "";
 }
 export default class Icons {
     static registerIcons(newIcons) {
@@ -77,8 +81,9 @@ Icons.fontAwesomeNext = {
         }
         if (library && libraries[library]) {
             let libraryItem = libraries[library];
-            let prefix = params.prefix || libraryItem.defaultPrefix;
+            let prefix = params.prefix || libraryItem.defaultPrefix || "";
             let libIcons = iconsAsRecord[library] || {};
+            iconsAsRecord[library] = libIcons;
             let libIconsKey = prefix + "-" + name;
             // if(!libIcons )libIcons = iconsAsRecord[library] = {};
             /**
@@ -90,8 +95,6 @@ Icons.fontAwesomeNext = {
             /**
              * on utilise une promise mutualisée pour ne pas faire plusieurs appels concurents d'une même icone
              */
-            if (libIcons[libIconsKey])
-                return unsafeHTML(libIcons[libIconsKey]);
             if (!loadingGetPromises.has(url)) {
                 let promise = new Promise((resolve) => __awaiter(void 0, void 0, void 0, function* () {
                     let result = yield fetch(url);
@@ -114,7 +117,7 @@ Icons.fontAwesomeNext = {
              */
             let result = yield loadingGetPromises.get(url);
             loadingGetPromises.delete(url);
-            libIcons[libIconsKey] = result;
+            libIcons[libIconsKey] = result || "";
             return unsafeHTML(result);
         }
         /**

package/core/components/ui/icon/icons.json

@@ -1 +1 @@
-{ "core": { "cancel": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", "check-circled-outline": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7 12.5L10 15.5L17 8.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", "check": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5 13L9 17L19 7\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", "emoji-puzzled": "<?xml version=\"1.0\" encoding=\"UTF-8\"?><svg width=\"24px\" height=\"24px\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" color=\"#000000\"><path d=\"M2 12c0 5.523 4.477 10 10 10s10-4.477 10-10S17.523 2 12 2\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M11.5 15.5s1.5-2 4.5-2 4.5 2 4.5 2M3 4c0-2.754 4-2.754 4 0 0 1.967-2 1.64-2 4M5 11.01l.01-.011\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M17.5 9a.5.5 0 110-1 .5.5 0 010 1zM10.5 9a.5.5 0 110-1 .5.5 0 010 1z\" fill=\"#000\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>", "info-empty": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 11.5V16.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 7.51L12.01 7.49889\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", "loader": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-loader\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>", "more-horiz": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M18 12.5C18.2761 12.5 18.5 12.2761 18.5 12C18.5 11.7239 18.2761 11.5 18 11.5C17.7239 11.5 17.5 11.7239 17.5 12C17.5 12.2761 17.7239 12.5 18 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M6 12.5C6.27614 12.5 6.5 12.2761 6.5 12C6.5 11.7239 6.27614 11.5 6 11.5C5.72386 11.5 5.5 11.7239 5.5 12C5.5 12.2761 5.72386 12.5 6 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", "more-vert": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 18.5C12.2761 18.5 12.5 18.2761 12.5 18C12.5 17.7239 12.2761 17.5 12 17.5C11.7239 17.5 11.5 17.7239 11.5 18C11.5 18.2761 11.7239 18.5 12 18.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 6.5C12.2761 6.5 12.5 6.27614 12.5 6C12.5 5.72386 12.2761 5.5 12 5.5C11.7239 5.5 11.5 5.72386 11.5 6C11.5 6.27614 11.7239 6.5 12 6.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", "nav-arrow-down": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", "warning-circled-outline": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 7L12 13\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 17.01L12.01 16.9989\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n" } }
+{ "core": { "cancel": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", "check-circled-outline": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7 12.5L10 15.5L17 8.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", "check": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5 13L9 17L19 7\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", "emoji-puzzled": "<svg width=\"24px\" height=\"24px\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" ><path d=\"M2 12c0 5.523 4.477 10 10 10s10-4.477 10-10S17.523 2 12 2\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M11.5 15.5s1.5-2 4.5-2 4.5 2 4.5 2M3 4c0-2.754 4-2.754 4 0 0 1.967-2 1.64-2 4M5 11.01l.01-.011\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M17.5 9a.5.5 0 110-1 .5.5 0 010 1zM10.5 9a.5.5 0 110-1 .5.5 0 010 1z\" fill=\"#000\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>", "info-empty": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 11.5V16.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 7.51L12.01 7.49889\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", "loader": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-loader\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>", "minus-small": "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M18 12H6\" />\n</svg>\n", "more-horiz": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M18 12.5C18.2761 12.5 18.5 12.2761 18.5 12C18.5 11.7239 18.2761 11.5 18 11.5C17.7239 11.5 17.5 11.7239 17.5 12C17.5 12.2761 17.7239 12.5 18 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M6 12.5C6.27614 12.5 6.5 12.2761 6.5 12C6.5 11.7239 6.27614 11.5 6 11.5C5.72386 11.5 5.5 11.7239 5.5 12C5.5 12.2761 5.72386 12.5 6 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", "more-vert": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 18.5C12.2761 18.5 12.5 18.2761 12.5 18C12.5 17.7239 12.2761 17.5 12 17.5C11.7239 17.5 11.5 17.7239 11.5 18C11.5 18.2761 11.7239 18.5 12 18.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 6.5C12.2761 6.5 12.5 6.27614 12.5 6C12.5 5.72386 12.2761 5.5 12 5.5C11.7239 5.5 11.5 5.72386 11.5 6C11.5 6.27614 11.7239 6.5 12 6.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", "nav-arrow-down": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", "warning-circled-outline": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 7L12 13\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 17.01L12.01 16.9989\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n" } }

package/core/components/ui/image/image.js

@@ -123,8 +123,3 @@ Image = __decorate([
     customElement(tagName)
 ], Image);
 export { Image };
-//Ajout pour la creation du cem notamment pour Storybook
-try {
-    customElements.define(tagName, Image);
-}
-catch (e) { }

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

@@ -10,7 +10,7 @@ export declare class Link extends LitElement {
      * - strict : l'url courante match exactement avec le href du bouton
      * - partial : l'url courante match à gauche avec le href du bouton
      * - disabled : aucune activation / désactivation
-    */
+     */
     autoActive: "strict" | "partial" | "disabled";
     connectedCallback(): void;
     disconnectedCallback(): void;

package/core/components/ui/link/link.js

@@ -20,7 +20,7 @@ let Link = class Link extends LitElement {
          * - strict : l'url courante match exactement avec le href du bouton
          * - partial : l'url courante match à gauche avec le href du bouton
          * - disabled : aucune activation / désactivation
-        */
+         */
         this.autoActive = "partial";
         this._target = null;
         /**
@@ -73,7 +73,7 @@ Link.styles = [
       a {
         color: inherit;
         text-decoration: none;
-        display:contents;
+        display: contents;
       }
     `,
 ];
@@ -93,7 +93,3 @@ Link = __decorate([
     customElement(tagName)
 ], Link);
 export { Link };
-try {
-    customElements.define(tagName, Link);
-}
-catch (e) { }

package/core/components/ui/loader/loader.js

@@ -26,9 +26,8 @@ let Loader = Loader_1 = class Loader extends LitElement {
         let loader = Loader_1.loader;
         if (!conf)
             conf = {};
-        let v = conf;
-        for (let z in v)
-            loader.setAttribute(z, v[z]);
+        if (conf.mode)
+            loader.setAttribute("mode", conf.mode);
         if (!conf.container) {
             conf.container = document.querySelector("sonic-theme") || document.body;
             conf.mode = "fixed";
@@ -88,8 +87,3 @@ Loader = Loader_1 = __decorate([
     customElement(tagName)
 ], Loader);
 export { Loader };
-//Ajout pour la creation du cem notamment pour Storybook
-try {
-    customElements.define(tagName, Loader);
-}
-catch (e) { }

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

@@ -12,16 +12,16 @@ let MenuItem = class MenuItem extends Button {
         super();
     }
     connectedCallback() {
-        if (!this.hasAttribute('variant')) {
+        if (!this.hasAttribute("variant")) {
             this.variant = "ghost";
         }
-        if (!this.hasAttribute('type')) {
+        if (!this.hasAttribute("type")) {
             this.type = "primary";
         }
-        if (!this.hasAttribute('shape')) {
+        if (!this.hasAttribute("shape")) {
             this.shape = "block";
         }
-        if (!this.hasAttribute('align')) {
+        if (!this.hasAttribute("align")) {
             this.align = "left";
         }
         super.connectedCallback();
@@ -31,8 +31,3 @@ MenuItem = __decorate([
     customElement(tagName)
 ], MenuItem);
 export { MenuItem };
-//Ajout pour Storybook
-try {
-    customElements.define(tagName, MenuItem);
-}
-catch (e) { }

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

@@ -16,18 +16,26 @@ export declare class MenuItems extends LitElement {
     /**
      * Ombre
      */
-    shadow: "" | "sm" | "md" | 'lg' | "xl" | "none" | null;
+    shadow: "" | "sm" | "md" | "lg" | "xl" | "none" | null;
     moreShape: "square" | "circle";
+    scrollable: boolean;
+    observer: ResizeObserver | null;
     /**
      * Propriété min-width du bouton
      */
     minWidth: string;
+    menu: HTMLElement;
     menuChildren: Array<HTMLElement>;
     moreElements: Array<HTMLElement>;
     hasMoreElements: boolean;
     checkIfMore(): void;
     updated(_changedProperties: PropertyValues): void;
     mainSlotChange(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updateIsScollable: () => void;
+    initScrollable(): void;
+    setScrollShadow(target: HTMLElement, direction: string): void;
     setChildrenSize(menuItems: Array<HTMLElement>): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/menu/menu.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
-import { customElement, property, queryAssignedElements, state } from "lit/decorators.js";
+import { customElement, property, queryAssignedElements, state, query } from "lit/decorators.js";
 import "@supersoniks/concorde/core/components/ui/menu/menu-item";
 const tagName = "sonic-menu";
 let MenuItems = class MenuItems extends LitElement {
@@ -28,18 +28,26 @@ let MenuItems = class MenuItems extends LitElement {
          */
         this.shadow = null;
         this.moreShape = "circle";
+        this.scrollable = false;
+        this.observer = null;
         /**
          * Propriété min-width du bouton
          */
         this.minWidth = "0";
         this.hasMoreElements = false;
+        this.updateIsScollable = () => {
+            if (this.scrollable) {
+                this.initScrollable();
+                this.setScrollShadow(this, this.direction);
+            }
+        };
     }
     checkIfMore() {
         var _a;
         this.hasMoreElements = !!((_a = this.moreElements) === null || _a === void 0 ? void 0 : _a.length);
     }
     updated(_changedProperties) {
-        const moreBtn = this.querySelector('.more-btn');
+        const moreBtn = this.querySelector(".more-btn");
         if (this.size && moreBtn) {
             moreBtn.setAttribute("size", this.size);
         }
@@ -53,6 +61,85 @@ let MenuItems = class MenuItems extends LitElement {
     }
     mainSlotChange() {
         this.setChildrenSize(this.menuChildren);
+        this.updateIsScollable();
+    }
+    connectedCallback() {
+        this.observer = new ResizeObserver(this.updateIsScollable);
+        // observe if menu elements are overflowing and initiate scrollable
+        this.observer.observe(this);
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        super.disconnectedCallback();
+    }
+    initScrollable() {
+        const tabsMenu = this;
+        let isDown = false;
+        let startX;
+        let scrollLeft;
+        if (this.scrollable) {
+            tabsMenu.addEventListener("mousedown", (e) => {
+                isDown = true;
+                tabsMenu.classList.add("active");
+                startX = e.pageX - tabsMenu.offsetLeft;
+                scrollLeft = tabsMenu.scrollLeft;
+            });
+            tabsMenu.addEventListener("mouseleave", () => {
+                isDown = false;
+                tabsMenu.classList.remove("active");
+            });
+            tabsMenu.addEventListener("mouseup", () => {
+                isDown = false;
+                tabsMenu.classList.remove("active");
+            });
+            tabsMenu.addEventListener("mousemove", (e) => {
+                if (!isDown)
+                    return;
+                e.preventDefault();
+                const x = e.pageX - tabsMenu.offsetLeft;
+                const walk = (x - startX) * 1.5; //scroll-fast
+                tabsMenu.scrollLeft = scrollLeft - walk;
+                this.setScrollShadow(tabsMenu, this.direction);
+            });
+            tabsMenu.addEventListener("scroll", (e) => {
+                e.preventDefault();
+                // const delta = Math.sign(e.deltaY);
+                // tabsMenu.scrollLeft += delta * 50;
+                this.setScrollShadow(tabsMenu, this.direction);
+            });
+        }
+    }
+    setScrollShadow(target, direction) {
+        if (direction == "row") {
+            if (target.scrollLeft > 0) {
+                this.classList.add("shadow-left");
+            }
+            else {
+                this.classList.remove("shadow-left");
+            }
+            if (target.scrollLeft < target.scrollWidth - target.offsetWidth) {
+                this.classList.add("shadow-right");
+            }
+            else {
+                this.classList.remove("shadow-right");
+            }
+        }
+        else if (direction == "column") {
+            if (target.scrollTop > 0) {
+                this.classList.add("shadow-top");
+            }
+            else {
+                this.classList.remove("shadow-top");
+            }
+            if (target.scrollTop < target.scrollHeight - (target.offsetHeight + 1)) {
+                this.classList.add("shadow-bottom");
+            }
+            else {
+                this.classList.remove("shadow-bottom");
+            }
+        }
     }
     setChildrenSize(menuItems) {
         menuItems.forEach((elt) => {
@@ -63,7 +150,7 @@ let MenuItems = class MenuItems extends LitElement {
                 elt.setAttribute("align", this.align);
             }
             if (this.direction == "row") {
-                if (elt.getAttribute('shape') == "block") {
+                if (elt.getAttribute("shape") == "block") {
                     elt.setAttribute("shape", "default");
                 }
             }
@@ -73,34 +160,34 @@ let MenuItems = class MenuItems extends LitElement {
         const menuStyles = {
             minWidth: this.minWidth,
             flexDirection: this.direction,
-            gap: this.gap
+            gap: this.gap,
         };
         const isMenuRow = this.direction == "row";
         const popStyles = {
-            display: 'block',
-            alignSelf: isMenuRow ? 'center' : 'flex-start',
-            justifySelf: 'center',
-            flexDirection: this.direction
+            display: "block",
+            alignSelf: isMenuRow ? "center" : "flex-start",
+            justifySelf: "center",
+            flexDirection: this.direction,
         };
         const popBtnStyles = {
-            marginLeft: isMenuRow ? '' : '.55em'
+            marginLeft: isMenuRow ? "" : ".55em",
         };
         return html `<menu part="menu" class="shadowable" style=${styleMap(menuStyles)}>
-                <slot @slotchange=${this.mainSlotChange}></slot>
-                <sonic-pop style=${styleMap(popStyles)}  class=${!this.hasMoreElements ? 'hidden' : ''}>
-                  <sonic-menu-item  style=${styleMap(popBtnStyles)} class="more-btn" shape=${this.moreShape} align="center" >
-                    <sonic-icon size="xl" name=${isMenuRow ? "more-vert" : "more-horiz"} ></sonic-icon>
-                  </sonic-menu-item>
-                  <slot name="more"  @slotchange=${this.checkIfMore} slot="content"></slot>
-                </sonic-pop>
-              </menu>`;
+      <slot @slotchange=${this.mainSlotChange}></slot>
+      <sonic-pop style=${styleMap(popStyles)} class=${!this.hasMoreElements ? "hidden" : ""}>
+        <sonic-menu-item style=${styleMap(popBtnStyles)} class="more-btn" shape=${this.moreShape} align="center">
+          <sonic-icon size="xl" name=${isMenuRow ? "more-vert" : "more-horiz"}></sonic-icon>
+        </sonic-menu-item>
+        <slot name="more" @slotchange=${this.checkIfMore} slot="content"></slot>
+      </sonic-pop>
+    </menu>`;
     }
 };
 MenuItems.styles = [
     css `
       :host {
         display: block;
-        --sc-menu-gap:.15rem;
+        --sc-menu-gap: 0.15rem;
       }
 
       :host > menu {
@@ -109,9 +196,9 @@ MenuItems.styles = [
         margin: 0;
         padding: 0.35em;
       }
- 
+
       .hidden {
-        display:none !important;
+        display: none !important;
       }
 
       /*OMBRE*/
@@ -128,11 +215,79 @@ MenuItems.styles = [
       :host([shadow="lg"]) .shadowable {
         box-shadow: var(--sc-shadow-lg);
       }
-      
+
       :host([shadow="none"]) .shadowable {
         box-shadow: none;
       }
-    
+
+      /* SCROLLABLE*/
+      :host([scrollable]) {
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+      }
+      :host([scrollable]) menu > * {
+        scroll-snap-align: start;
+        white-space: nowrap;
+      }
+      :host([scrollable][direction="row"]) {
+        overflow-x: scroll;
+        scroll-snap-type: x mandatory;
+      }
+      :host([scrollable][direction="column"]) {
+        overflow-y: scroll;
+        scroll-snap-type: y mandatory;
+      }
+      :host([scrollable])::-webkit-scrollbar {
+        display: none !important;
+      }
+      :host([scrollable][direction="row"].shadow-right) {
+        -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+        mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+      }
+      :host([scrollable][direction="row"].shadow-left) {
+        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+      }
+      :host([scrollable][direction="row"].shadow-left.shadow-right) {
+        -webkit-mask-image: linear-gradient(
+          to right,
+          rgba(0, 0, 0, 0) 0%,
+          rgba(0, 0, 0, 1) 10%,
+          rgba(0, 0, 0, 1) 90%,
+          rgba(0, 0, 0, 0) 100%
+        );
+        mask-image: linear-gradient(
+          to right,
+          rgba(0, 0, 0, 0) 0%,
+          rgba(0, 0, 0, 1) 10%,
+          rgba(0, 0, 0, 1) 90%,
+          rgba(0, 0, 0, 0) 100%
+        );
+      }
+      :host([scrollable][direction="column"].shadow-top) {
+        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+      }
+      :host([scrollable][direction="column"].shadow-bottom) {
+        -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+        mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+      }
+      :host([scrollable][direction="column"].shadow-top.shadow-bottom) {
+        -webkit-mask-image: linear-gradient(
+          to top,
+          rgba(0, 0, 0, 0) 0%,
+          rgba(0, 0, 0, 1) 10%,
+          rgba(0, 0, 0, 1) 90%,
+          rgba(0, 0, 0, 0) 100%
+        );
+        mask-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0) 0%,
+          rgba(0, 0, 0, 1) 10%,
+          rgba(0, 0, 0, 1) 90%,
+          rgba(0, 0, 0, 0) 100%
+        );
+      }
     `,
 ];
 __decorate([
@@ -153,9 +308,15 @@ __decorate([
 __decorate([
     property({ type: String })
 ], MenuItems.prototype, "moreShape", void 0);
+__decorate([
+    property({ type: Boolean })
+], MenuItems.prototype, "scrollable", void 0);
 __decorate([
     property({ type: String })
 ], MenuItems.prototype, "minWidth", void 0);
+__decorate([
+    query("menu")
+], MenuItems.prototype, "menu", void 0);
 __decorate([
     queryAssignedElements({ selector: "sonic-menu-item" })
 ], MenuItems.prototype, "menuChildren", void 0);
@@ -169,8 +330,3 @@ MenuItems = __decorate([
     customElement(tagName)
 ], MenuItems);
 export { MenuItems };
-//Ajout pour la creation du cem notamment pour Storybook
-try {
-    customElements.define(tagName, MenuItems);
-}
-catch (e) { }