@supersoniks/concorde 1.1.23 → 1.1.25

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

@@ -14,14 +14,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { LitElement, css, nothing } from "lit";
-import { property } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 import Icons from "./icons";
 /**
  * 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
  */
-// @customElement("sonic-icon")
-export class Icon extends LitElement {
+const tagName = "sonic-icon";
+let Icon = class Icon extends LitElement {
     constructor() {
         super(...arguments);
         this.iconText = "";
@@ -75,7 +75,7 @@ export class Icon extends LitElement {
         this.style.removeProperty("display");
         return this.iconText;
     }
-}
+};
 Icon.styles = css `
     :host {
       line-height: 0;
@@ -129,8 +129,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Icon.prototype, "library", null);
+Icon = __decorate([
+    customElement(tagName)
+], Icon);
+export { Icon };
 //Ajout pour la creation du cem notamment pour Storybook
 try {
-    customElements.define("sonic-icon", Icon);
+    customElements.define(tagName, Icon);
 }
 catch (e) { }

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

@@ -21,12 +21,35 @@ const loadingGetPromises = new Map();
  * la propriété library de sonic-icon correspond à une clef de librairies.
  */
 const libraries = {
-    heroicons: "https://cdn.jsdelivr.net/npm/heroicons@2.0.4/24/$prefix/$name.svg",
-    iconoir: "https://cdnjs.cloudflare.com/ajax/libs/iconoir/5.1.4/icons/$name.svg",
-    feathers: "https://cdn.jsdelivr.net/npm/feather-icons@4.29.0/dist/icons/$name.svg",
-    material: "https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.5/svg/$name/$prefix.svg",
-    fontAwesome: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.1/svgs/$prefix/$name.svg",
+    heroicons: {
+        url: "https://cdn.jsdelivr.net/npm/heroicons@2.0.4/24/$prefix/$name.svg",
+        defaultPrefix: "outline",
+    },
+    iconoir: {
+        url: "https://cdnjs.cloudflare.com/ajax/libs/iconoir/5.1.4/icons/$name.svg",
+    },
+    feathers: {
+        url: "https://cdn.jsdelivr.net/npm/feather-icons@4.29.0/dist/icons/$name.svg",
+    },
+    material: {
+        url: "https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.5/svg/$name/$prefix.svg",
+        defaultPrefix: "regular",
+    },
+    fontAwesome: {
+        url: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.1/svgs/$prefix/$name.svg",
+        defaultPrefix: "regular",
+    },
 };
+let hasEnabledCustomLibrary = false;
+function enableCustomLibrary() {
+    var _b, _c;
+    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");
+}
 export default class Icons {
     static registerIcons(newIcons) {
         const record = icons;
@@ -43,29 +66,32 @@ export default class Icons {
 _a = Icons;
 Icons.fontAwesomeNext = {
     get: (params) => __awaiter(void 0, void 0, void 0, function* () {
-        var _b;
-        let prefix = ((_b = params.prefix) === null || _b === void 0 ? void 0 : _b.replace("far", "regular").replace("fas", "solid")) || "regular";
         let library = params.library;
         let name = params.name || "";
         const iconsAsRecord = icons;
         /**
          * SVGS en ligne
          */
+        if (library == "custom") {
+            enableCustomLibrary();
+        }
         if (library && libraries[library]) {
-            let libIcons = iconsAsRecord[library];
-            if (!libIcons)
-                libIcons = iconsAsRecord[library] = {};
+            let libraryItem = libraries[library];
+            let prefix = params.prefix || libraryItem.defaultPrefix;
+            let libIcons = iconsAsRecord[library] || {};
+            let libIconsKey = prefix + "-" + name;
+            // if(!libIcons )libIcons = iconsAsRecord[library] = {};
             /**
              * Si l'icone a déjà été chargée on ne la recharge pas
              */
-            if (libIcons[name])
-                return unsafeHTML(libIcons[name]);
-            let url = libraries[library].replace("$prefix", params.prefix).replace("$name", name);
+            if (libIcons[libIconsKey])
+                return unsafeHTML(libIcons[libIconsKey]);
+            let url = libraryItem.url.replace("$prefix", prefix).replace("$name", name);
             /**
              * on utilise une promise mutualisée pour ne pas faire plusieurs appels concurents d'une même icone
              */
-            if (libIcons[name])
-                return unsafeHTML(libIcons[name]);
+            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);
@@ -84,13 +110,13 @@ Icons.fontAwesomeNext = {
              */
             let result = yield loadingGetPromises.get(url);
             loadingGetPromises.delete(url);
-            libIcons[name] = result;
+            libIcons[libIconsKey] = result;
             return unsafeHTML(result);
         }
         /**
          * svgs "locaux"
          */
-        return unsafeHTML(iconsAsRecord[prefix][params.name] || "");
+        return unsafeHTML(iconsAsRecord["core"][params.name] || "");
     }),
 };
 Icons.default = Icons.fontAwesomeNext;

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

@@ -1 +1 @@
-{"iconoir":{"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-think-left":"<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=\"M10 15H7M2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M8.5 9C8.22386 9 8 8.77614 8 8.5C8 8.22386 8.22386 8 8.5 8C8.77614 8 9 8.22386 9 8.5C9 8.77614 8.77614 9 8.5 9Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M15.5 9C15.2239 9 15 8.77614 15 8.5C15 8.22386 15.2239 8 15.5 8C15.7761 8 16 8.22386 16 8.5C16 8.77614 15.7761 9 15.5 9Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","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":"","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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
+const tagName = "sonic-image";
 let Image = class Image extends LitElement {
     constructor() {
         super(...arguments);
@@ -142,11 +143,11 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], Image.prototype, "cover", void 0);
 Image = __decorate([
-    customElement("sonic-image")
+    customElement(tagName)
 ], Image);
 export { Image };
 //Ajout pour la creation du cem notamment pour Storybook
 try {
-    customElements.define("sonic-image", Image);
+    customElements.define(tagName, Image);
 }
 catch (e) { }

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

@@ -9,6 +9,7 @@ import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import Electron from "@supersoniks/concorde/core/utils/Electron";
+const tagName = "sonic-link";
 let Link = class Link extends LitElement {
     constructor() {
         super(...arguments);
@@ -89,6 +90,10 @@ __decorate([
     property({ type: Boolean })
 ], Link.prototype, "pushState", void 0);
 Link = __decorate([
-    customElement("sonic-link")
+    customElement(tagName)
 ], Link);
 export { Link };
+try {
+    customElements.define(tagName, Link);
+}
+catch (e) { }

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

@@ -9,6 +9,7 @@ import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { inline } from "./styles/inline";
 import { fixed } from "./styles/fixed";
+const tagName = "sonic-loader";
 let Loader = Loader_1 = class Loader extends LitElement {
     constructor() {
         super(...arguments);
@@ -84,11 +85,11 @@ __decorate([
     property({ type: String })
 ], Loader.prototype, "mode", void 0);
 Loader = Loader_1 = __decorate([
-    customElement("sonic-loader")
+    customElement(tagName)
 ], Loader);
 export { Loader };
 //Ajout pour la creation du cem notamment pour Storybook
 try {
-    customElements.define("sonic-loader", Loader);
+    customElements.define(tagName, Loader);
 }
 catch (e) { }

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

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from "lit/decorators.js";
 import { Button } from "../button/button";
+const tagName = "sonic-menu-item";
 let MenuItem = class MenuItem extends Button {
     constructor() {
         super();
@@ -20,18 +21,18 @@ let MenuItem = class MenuItem extends Button {
         if (!this.hasAttribute('shape')) {
             this.shape = "block";
         }
-        if (!this.hasAttribute('textAlign')) {
-            this.textAlign = "left";
+        if (!this.hasAttribute('align')) {
+            this.align = "left";
         }
         super.connectedCallback();
     }
 };
 MenuItem = __decorate([
-    customElement("sonic-menu-item")
+    customElement(tagName)
 ], MenuItem);
 export { MenuItem };
 //Ajout pour Storybook
 try {
-    customElements.define("sonic-menu-item", MenuItem);
+    customElements.define(tagName, MenuItem);
 }
 catch (e) { }

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

@@ -11,11 +11,12 @@ export declare class MenuItems extends LitElement {
      * Direction
      */
     direction: "row" | "column";
+    gap: string;
     align: "center" | "left" | "right";
     /**
      * Ombre
      */
-    shadow: "" | "none" | "sm" | "md" | 'lg' | "xl";
+    shadow: "" | "sm" | "md" | 'lg' | "xl" | "none" | null;
     moreShape: "square" | "circle";
     /**
      * Propriété min-width du bouton

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

@@ -8,6 +8,7 @@ import { html, LitElement, css } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
 import { customElement, property, queryAssignedElements, state } from "lit/decorators.js";
 import "./menu-item";
+const tagName = "sonic-menu";
 let MenuItems = class MenuItems extends LitElement {
     constructor() {
         super(...arguments);
@@ -20,11 +21,12 @@ let MenuItems = class MenuItems extends LitElement {
          * Direction
          */
         this.direction = "column";
+        this.gap = "var(--sc-menu-gap)";
         this.align = "left";
         /**
          * Ombre
          */
-        this.shadow = "none";
+        this.shadow = null;
         this.moreShape = "circle";
         /**
          * Propriété min-width du bouton
@@ -58,7 +60,7 @@ let MenuItems = class MenuItems extends LitElement {
                 elt.setAttribute("size", this.size);
             }
             if (this.align) {
-                elt.setAttribute("textAlign", this.align);
+                elt.setAttribute("align", this.align);
             }
             if (this.direction == "row") {
                 if (elt.getAttribute('shape') == "block") {
@@ -71,6 +73,7 @@ let MenuItems = class MenuItems extends LitElement {
         const menuStyles = {
             minWidth: this.minWidth,
             flexDirection: this.direction,
+            gap: this.gap
         };
         const isMenuRow = this.direction == "row";
         const popStyles = {
@@ -85,8 +88,8 @@ let MenuItems = class MenuItems extends LitElement {
         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} textAlign="center" >
-                    <sonic-icon prefix="iconoir" size="xl" name=${isMenuRow ? "more-vert" : "more-horiz"} ></sonic-icon>
+                  <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>
@@ -97,6 +100,7 @@ MenuItems.styles = [
     css `
       :host {
         display: block;
+        --sc-menu-gap:.15rem;
       }
 
       :host > menu {
@@ -104,7 +108,6 @@ MenuItems.styles = [
         border-radius: min(calc(var(--sc-btn-rounded) * 2), 0.4em);
         margin: 0;
         padding: 0.35em;
-        gap: 0.15rem;
       }
  
       .hidden {
@@ -113,23 +116,22 @@ MenuItems.styles = [
 
       /*OMBRE*/
       :host([shadow]) .shadowable,
-      :host([shadow="md"])  .shadowable,
-      :host([shadow="true"])  .shadowable {
+      :host([shadow="md"]) .shadowable,
+      :host([shadow="true"]) .shadowable {
         box-shadow: var(--sc-shadow);
       }
 
-      :host([shadow="sm"])  .shadowable {
+      :host([shadow="sm"]) .shadowable {
         box-shadow: var(--sc-shadow-sm);
       }
 
-      :host([shadow="lg"])  .shadowable {
+      :host([shadow="lg"]) .shadowable {
         box-shadow: var(--sc-shadow-lg);
       }
       
-      :host([shadow="none"])  .shadowable {
+      :host([shadow="none"]) .shadowable {
         box-shadow: none;
       }
-
     
     `,
 ];
@@ -139,6 +141,9 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], MenuItems.prototype, "direction", void 0);
+__decorate([
+    property({ type: String })
+], MenuItems.prototype, "gap", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], MenuItems.prototype, "align", void 0);
@@ -161,11 +166,11 @@ __decorate([
     state()
 ], MenuItems.prototype, "hasMoreElements", void 0);
 MenuItems = __decorate([
-    customElement("sonic-menu")
+    customElement(tagName)
 ], MenuItems);
 export { MenuItems };
 //Ajout pour la creation du cem notamment pour Storybook
 try {
-    customElements.define("sonic-menu", MenuItems);
+    customElements.define(tagName, MenuItems);
 }
 catch (e) { }

package/core/components/ui/modal/modal-actions.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement, queryAssignedElements } from "lit/decorators.js";
+const tagName = "sonic-modal-actions";
 let ModalActions = class ModalActions extends LitElement {
     firstUpdated() {
         var _a;
@@ -36,11 +37,11 @@ __decorate([
     queryAssignedElements({ selector: "sonic-button" })
 ], ModalActions.prototype, "buttons", void 0);
 ModalActions = __decorate([
-    customElement("sonic-modal-actions")
+    customElement(tagName)
 ], ModalActions);
 export { ModalActions };
 //Ajout pour Storybook
 try {
-    customElements.define("sonic-modal-actions", ModalActions);
+    customElements.define(tagName, ModalActions);
 }
 catch (e) { }

package/core/components/ui/modal/modal-close.js

@@ -6,10 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement } from "lit/decorators.js";
+const tagName = "sonic-modal-close";
 let ModalClose = class ModalClose extends LitElement {
     render() {
         return html `<sonic-button shape="circle" variant="ghost" @click=${this.handleClick}
-      ><sonic-icon prefix="iconoir" name="cancel" size="lg"></sonic-icon
+      ><sonic-icon name="cancel" size="lg"></sonic-icon
     ></sonic-button>`;
     }
     handleClick() {
@@ -28,11 +29,11 @@ ModalClose.styles = [
     `,
 ];
 ModalClose = __decorate([
-    customElement("sonic-modal-close")
+    customElement(tagName)
 ], ModalClose);
 export { ModalClose };
 //Ajout pour Storybook
 try {
-    customElements.define("sonic-modal-close", ModalClose);
+    customElements.define(tagName, ModalClose);
 }
 catch (e) { }

package/core/components/ui/modal/modal-content.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement } from "lit/decorators.js";
+const tagName = "sonic-modal-content";
 let ModalContent = class ModalContent extends LitElement {
     render() {
         return html `<slot></slot>`;
@@ -19,11 +20,11 @@ ModalContent.styles = [
     `,
 ];
 ModalContent = __decorate([
-    customElement("sonic-modal-content")
+    customElement(tagName)
 ], ModalContent);
 export { ModalContent };
 //Ajout pour Storybook
 try {
-    customElements.define("sonic-modal-content", ModalContent);
+    customElements.define(tagName, ModalContent);
 }
 catch (e) { }

package/core/components/ui/modal/modal-subtitle.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement } from "lit/decorators.js";
+const tagName = "sonic-modal-subtitle";
 let ModalSubTitle = class ModalSubTitle extends LitElement {
     render() {
         return html `<slot></slot>`;
@@ -23,11 +24,11 @@ ModalSubTitle.styles = [
     `,
 ];
 ModalSubTitle = __decorate([
-    customElement("sonic-modal-subtitle")
+    customElement(tagName)
 ], ModalSubTitle);
 export { ModalSubTitle };
 //Ajout pour Storybook
 try {
-    customElements.define("sonic-modal-subtitle", ModalSubTitle);
+    customElements.define(tagName, ModalSubTitle);
 }
 catch (e) { }

package/core/components/ui/modal/modal-title.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement } from "lit/decorators.js";
+const tagName = "sonic-modal-title";
 let ModalTitle = class ModalTitle extends LitElement {
     render() {
         return html `<slot></slot>`;
@@ -23,11 +24,11 @@ ModalTitle.styles = [
     `,
 ];
 ModalTitle = __decorate([
-    customElement("sonic-modal-title")
+    customElement(tagName)
 ], ModalTitle);
 export { ModalTitle };
 //Ajout pour Storybook
 try {
-    customElements.define("sonic-modal-title", ModalTitle);
+    customElements.define(tagName, ModalTitle);
 }
 catch (e) { }

package/core/components/ui/modal/modal.js

@@ -14,6 +14,7 @@ import "./modal-title";
 import "./modal-subtitle";
 import "./modal-content";
 import "./modal-close";
+const tagName = "sonic-modal";
 let Modal = class Modal extends Subscriber(LitElement) {
     constructor() {
         super(...arguments);
@@ -29,7 +30,7 @@ let Modal = class Modal extends Subscriber(LitElement) {
         this.visible = false;
     }
     static create(options) {
-        const modal = document.createElement("sonic-modal");
+        const modal = document.createElement(tagName);
         modal.innerHTML =
             `<sonic-modal-close></sonic-modal-close><sonic-modal-content>${options.content}</sonic-modal-content>` || "";
         let container = document.querySelector("sonic-theme") || document.body;
@@ -126,7 +127,7 @@ let Modal = class Modal extends Subscriber(LitElement) {
     }
     handleEscape(e) {
         if (e.key === "Escape") {
-            const modals = [...document.querySelectorAll("sonic-modal")];
+            const modals = [...document.querySelectorAll(tagName)];
             modals.forEach((item) => {
                 if (this.hideOnEscape == true) {
                     item.hide();
@@ -312,7 +313,7 @@ __decorate([
     queryAssignedElements({ selector: "sonic-modal-close" })
 ], Modal.prototype, "closeBtn", void 0);
 Modal = __decorate([
-    customElement("sonic-modal")
+    customElement(tagName)
 ], Modal);
 export { Modal };
 if (typeof window !== "undefined") {
@@ -320,6 +321,6 @@ if (typeof window !== "undefined") {
     win.SonicModal = Modal;
 }
 try {
-    customElements.define("sonic-modal", Modal);
+    customElements.define(tagName, Modal);
 }
 catch (e) { }

package/core/components/ui/pop/pop.js

@@ -8,6 +8,7 @@ var Pop_1;
 import { html, LitElement, css } from "lit";
 import { customElement, query, state, property } from "lit/decorators.js";
 import HTML from "@supersoniks/concorde/core/utils/HTML";
+const tagName = "sonic-pop";
 let Pop = Pop_1 = class Pop extends LitElement {
     constructor() {
         super(...arguments);
@@ -216,11 +217,11 @@ __decorate([
     property({ type: String })
 ], Pop.prototype, "placement", void 0);
 Pop = Pop_1 = __decorate([
-    customElement("sonic-pop")
+    customElement(tagName)
 ], Pop);
 export { Pop };
 //Ajout pour la creation du cem notamment pour Storybook
 try {
-    customElements.define("sonic-pop", Pop);
+    customElements.define(tagName, Pop);
 }
 catch (e) { }