@supersoniks/concorde 1.1.24 → 1.1.26

package/core/components/ui/form/fieldset/fieldset.js

@@ -8,6 +8,7 @@ import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+const tagName = "sonic-fieldset";
 let Fieldset = class Fieldset extends Subscriber(LitElement) {
     constructor() {
         super(...arguments);
@@ -16,10 +17,6 @@ let Fieldset = class Fieldset extends Subscriber(LitElement) {
          * Désactiver le fieldset
          */
         this.disabled = false;
-        /**
-         * Lier à un formulaire qui ne serait pas parent du fieldset
-         */
-        this.form = "";
     }
     render() {
         return html `<fieldset form="${ifDefined(this.form)}" ?disabled="${this.disabled}">
@@ -31,7 +28,7 @@ Fieldset.styles = [
     css `
       :host {
         --sc-fieldset-mt: 0;
-        --sc-fieldset-mb: 2rem;
+        --sc-fieldset-mb: 1rem;
         --sc-fieldset-border-color: var(--sc-base-200);
         --sc-fieldset-border-width: var(--sc-form-border-width);
 
@@ -47,6 +44,7 @@ Fieldset.styles = [
         all: unset;
         display: contents;
       }
+      
       ::slotted(sonic-legend) {
         margin-bottom: 1.5rem;
         display: block;
@@ -60,11 +58,11 @@ __decorate([
     property({ type: String })
 ], Fieldset.prototype, "form", void 0);
 Fieldset = __decorate([
-    customElement("sonic-fieldset")
+    customElement(tagName)
 ], Fieldset);
 export { Fieldset };
 //Ajout pour la creation du cem notamment pour Storybook
 try {
-    customElements.define("sonic-fieldset", Fieldset);
+    customElements.define(tagName, Fieldset);
 }
 catch (e) { }

package/core/components/ui/form/fieldset/legend.d.ts

@@ -2,9 +2,10 @@ import { LitElement } from "lit";
 import "@supersoniks/concorde/core/components/ui/form/fieldset/legend-description";
 export declare class Legend extends LitElement {
     static styles: import("lit").CSSResult[];
-    description: string;
-    label: string;
-    iconName: string;
-    iconPrefix: string;
+    description?: string;
+    label?: string;
+    iconName?: string;
+    iconLibrary?: string;
+    iconPrefix?: string;
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/form/fieldset/legend.js

@@ -7,33 +7,34 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import "@supersoniks/concorde/core/components/ui/form/fieldset/legend-description";
+import { ifDefined } from "lit/directives/if-defined.js";
+const tagName = "sonic-legend";
 let Legend = class Legend extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.description = "";
-        this.label = "";
-        this.iconName = "";
-        this.iconPrefix = "";
-    }
     render() {
         return html `<legend part="legend">
-    
-                  ${this.iconName ? html `<div class="icon"><sonic-icon name=${this.iconName} prefix=${this.iconPrefix}></sonic-icon></div>` : ""}
+      ${this.iconName
+            ? html `<div class="icon">
+            <sonic-icon 
+            name=${this.iconName} 
+            prefix=${ifDefined(this.iconPrefix)}
+            library=${ifDefined(this.iconLibrary)}></sonic-icon>
+          </div>`
+            : ""}
 
-                  <div class="legend-content">
-                    ${this.label}
-                    ${this.description ? html `<sonic-legend-description>${this.description}</sonic-legend-description>` : ""}
-                    <slot></slot>
-                  </div>
-                  <slot name="suffix"></slot>
-                </legend>`;
+      <div class="legend-content">
+        ${this.label}
+        ${this.description ? html `<sonic-legend-description>${this.description}</sonic-legend-description>` : ""}
+        <slot></slot>
+      </div>
+      <slot name="suffix"></slot>
+    </legend>`;
     }
 };
 Legend.styles = [
     css `
       :host {
-        --sc-legend-font-size: 1.875rem;
-        --sc-legend-font-weight: var(--sc-headings-font-weight);
+        --sc-legend-font-size: 1.75rem;
+        --sc-legend-font-weight: var(--sc-font-weight-base);
         --sc-legend-font-style: var(--sc-headings-font-style);
         --sc-legend-family: var(--sc-headings-font-family);
         --sc-legend-line-height: var(--sc-headings-line-height);
@@ -74,15 +75,18 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Legend.prototype, "iconName", void 0);
+__decorate([
+    property({ type: String })
+], Legend.prototype, "iconLibrary", void 0);
 __decorate([
     property({ type: String })
 ], Legend.prototype, "iconPrefix", void 0);
 Legend = __decorate([
-    customElement("sonic-legend")
+    customElement(tagName)
 ], Legend);
 export { Legend };
 //Ajout pour la creation du cem notamment pour Storybook
 try {
-    customElements.define("sonic-legend", Legend);
+    customElements.define(tagName, Legend);
 }
 catch (e) { }

package/core/components/ui/form/form-actions/form-actions.d.ts

@@ -0,0 +1,5 @@
+import { LitElement } from "lit";
+export declare class FormActions extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/core/components/ui/form/{form-layout → form-actions}/form-actions.js

@@ -4,20 +4,28 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement } from "lit";
+import { html, LitElement, css } from "lit";
 import { customElement } from "lit/decorators.js";
-import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
-let FormActions = class FormActions extends Subscriber(LitElement) {
+const tagName = "sonic-form-actions";
+let FormActions = class FormActions extends LitElement {
     render() {
         return html `<slot></slot>`;
     }
 };
+FormActions.styles = [
+    css `
+      :host{
+        display:flex;
+        gap:.3rem;
+      }
+    `
+];
 FormActions = __decorate([
-    customElement("sonic-form-actions")
+    customElement(tagName)
 ], FormActions);
 export { FormActions };
 //Ajout pour la creation du cem notamment pour Storybook
 try {
-    customElements.define("sonic-form-actions", FormActions);
+    customElements.define(tagName, FormActions);
 }
 catch (e) { }

package/core/components/ui/form/form-layout/form-layout.js

@@ -8,6 +8,7 @@ import { html, LitElement, css } from "lit";
 import { customElement } from "lit/decorators.js";
 import { ResizeController } from "@lit-labs/observers/resize_controller.js";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+const tagName = "sonic-form-layout";
 let FormLayout = class FormLayout extends Subscriber(LitElement) {
     constructor() {
         super(...arguments);
@@ -48,11 +49,11 @@ FormLayout.styles = [
     `,
 ];
 FormLayout = __decorate([
-    customElement("sonic-form-layout")
+    customElement(tagName)
 ], FormLayout);
 export { FormLayout };
 //Ajout pour la creation du cem notamment pour Storybook
 try {
-    customElements.define("sonic-form-layout", FormLayout);
+    customElements.define(tagName, FormLayout);
 }
 catch (e) { }

package/core/components/ui/form/input/input.d.ts

@@ -35,6 +35,9 @@ declare const Input_base: {
         removeAttribute(name: string): void;
         initPublisher(): void;
         getApiConfiguration(): import("../../../../utils/api").APIConfiguration;
+        /**
+         * Taille du composant, implique notamment des modifications de typo et de marge interne
+         */
         connectedCallback(): void;
         requestUpdate(): void;
         getAttribute(name: string): string;
@@ -42,16 +45,6 @@ declare const Input_base: {
         disconnectedCallback(): void;
     };
 } & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
-/**
- * ### Le composent sonic-input étend les mixins FormInput, FormElement et Subscriber
- * **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.
- * **FormInput :**
- * Uniquement des propriétés classiques d'un input HTML.
- */
 export declare class Input extends Input_base {
     static styles: import("lit").CSSResult[];
     /**

package/core/components/ui/form/input/input.js

@@ -22,6 +22,7 @@ import { classMap } from "lit/directives/class-map.js";
  * **FormInput :**
  * Uniquement des propriétés classiques d'un input HTML.
  */
+const tagName = "sonic-input";
 let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
     constructor() {
         super(...arguments);
@@ -170,11 +171,11 @@ __decorate([
     state()
 ], Input.prototype, "hasPrefix", void 0);
 Input = __decorate([
-    customElement("sonic-input")
+    customElement(tagName)
 ], Input);
 export { Input };
 //Ajout pour Storybook
 try {
-    customElements.define("sonic-input", Input);
+    customElements.define(tagName, Input);
 }
 catch (e) { }

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

@@ -1,10 +1,4 @@
 import { Checkbox } from "../checkbox/checkbox";
-/**
- * ### 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).
- */
 export declare class Radio extends Checkbox {
     static styles: (import("lit").CSSResult | import("lit").CSSResultGroup[])[];
     constructor();

package/core/components/ui/form/radio/radio.js

@@ -13,6 +13,7 @@ import { Checkbox } from "../checkbox/checkbox";
  * * 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).
  */
+const tagName = "sonic-radio";
 let Radio = class Radio extends Checkbox {
     constructor() {
         super();
@@ -45,11 +46,11 @@ Radio.styles = [
     `,
 ];
 Radio = __decorate([
-    customElement("sonic-radio")
+    customElement(tagName)
 ], Radio);
 export { Radio };
 //Ajout pour Storybook
 try {
-    customElements.define("sonic-radio", Radio);
+    customElements.define(tagName, Radio);
 }
 catch (e) { }

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

@@ -1,13 +1,6 @@
 import { LitElement } from "lit";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
 declare const Select_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
-/**
- * #### 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.
- */
 export declare class Select extends Select_base {
     static styles: import("lit").CSSResult[];
     valueKey: string;

package/core/components/ui/form/select/select.js

@@ -21,6 +21,7 @@ import "@supersoniks/concorde/core/components/ui/icon/icon";
  * * 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.
  */
+const tagName = "sonic-select";
 let Select = class Select extends FormElement(Subscriber(LitElement)) {
     constructor() {
         super(...arguments);
@@ -131,7 +132,7 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
         })}
             <slot></slot>
           </select>
-          <sonic-icon prefix="iconoir" name="nav-arrow-down" size="${this.size}"></sonic-icon>
+          <sonic-icon  class="select-chevron" name="nav-arrow-down" size="${this.size}"></sonic-icon>
         </div>
         <slot name="suffix" @slotchange=${this.onSlotChange}></slot>
       </div>
@@ -153,12 +154,14 @@ Select.styles = [
         position: relative;
         width: 100%;
       }
+
       sonic-icon {
         position: absolute;
         right: 1em;
         top: 50%;
         pointer-events: none;
         transform: translateY(-50%);
+        color:var(--sc-input-color);
       }
 
       option {
@@ -166,7 +169,6 @@ Select.styles = [
         color: var(--sc-base-content);
         background: var(--sc-base);
       }
-
       
     `,
 ];
@@ -222,11 +224,11 @@ __decorate([
     state()
 ], Select.prototype, "hasPrefix", void 0);
 Select = __decorate([
-    customElement("sonic-select")
+    customElement(tagName)
 ], Select);
 export { Select };
 //Ajout pour Storybook
 try {
-    customElements.define("sonic-select", Select);
+    customElements.define(tagName, Select);
 }
 catch (e) { }

package/core/components/ui/form/textarea/textarea.js

@@ -11,6 +11,8 @@ import { formControl } from "../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";
+const tagName = "sonic-textarea";
 let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElement))) {
     constructor() {
         super(...arguments);
@@ -76,7 +78,7 @@ let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElemen
           ?readonly=${this.readonly}
           spellcheck=${ifDefined(this.spellcheck)}
           wrap=${ifDefined(this.wrap)}
-          class="form-element textarea"
+          class="form-element textarea custom-scroll"
           placeholder="${this.placeholder}"
         >
 ${this.value}</textarea
@@ -91,6 +93,7 @@ ${this.value}</textarea
 };
 Textarea.styles = [
     formControl,
+    customScroll,
     css `
       textarea {
         font-size: inherit;
@@ -155,6 +158,11 @@ __decorate([
     property()
 ], Textarea.prototype, "slotClasses", void 0);
 Textarea = __decorate([
-    customElement("sonic-textarea")
+    customElement(tagName)
 ], Textarea);
 export { Textarea };
+//Ajout pour Storybook
+try {
+    customElements.define(tagName, Textarea);
+}
+catch (e) { }

package/core/components/ui/group/group.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-group";
 let Group = class Group extends LitElement {
     updated() {
         const children = this.querySelectorAll("sonic-input, sonic-button");
@@ -48,10 +49,10 @@ Group.styles = [
     `,
 ];
 Group = __decorate([
-    customElement("sonic-group")
+    customElement(tagName)
 ], Group);
 export { Group };
 try {
-    customElements.define("sonic-group", Group);
+    customElements.define(tagName, Group);
 }
 catch (e) { }

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

@@ -1,8 +1,4 @@
 import { LitElement } from "lit";
-/**
- * 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>;

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) { }