@supersoniks/concorde 1.1.9 → 1.1.12

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

@@ -31,7 +31,7 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
         this.size = "";
         this.list = null;
         this.placeholder = "";
-        this.readonly = null;
+        this.readonly = false;
         this.pattern = null;
         this.min = null;
         this.max = null;
@@ -79,9 +79,9 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
             class="form-element input"
             type=${this.type}
             @input=${this.handleChange}
-            disabled="${ifDefined(this.disabled)}"
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
             list=${ifDefined(this.list)}
-            readonly=${ifDefined(this.readonly)}
             autofocus=${ifDefined(this.autofocus)}
             required=${ifDefined(this.required)}
             tabindex=${ifDefined(this.tabindex)}

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

@@ -18,15 +18,15 @@ declare const Textarea_base: {
         _name: string;
         name: string;
         props: any;
+        isConnected: boolean;
         getAncestorAttributeValue(attributeName: string): string;
         hasAncestorAttribute(attributeName: string): boolean;
         querySelectorAll(selector: string): NodeListOf<Element>;
         publisher: any;
-        dataProvider: String;
+        dataProvider: string | null;
         noShadowDom: string | null;
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
-        makeShadow(props: Record<string, any>, value: any): any;
         dispatchEvent(event: Event): void;
         setAttribute(name: string, value: string): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;

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

@@ -56,14 +56,14 @@ let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElemen
       <div class="form-control">
         <textarea
           @input=${this.handleChange}
-          disabled=${ifDefined(this.disabled)}
+          ?disabled=${this.disabled}
           autocomplete=${ifDefined(this.autocomplete)}
           autofocus=${ifDefined(this.autofocus)}
           rows=${ifDefined(this.rows)}
           cols=${ifDefined(this.cols)}
           maxlength=${ifDefined(this.maxlength)}
           minlength=${ifDefined(this.minlength)}
-          readonly=${ifDefined(this.readonly)}
+          ?readonly=${this.readonly}
           spellcheck=${ifDefined(this.spellcheck)}
           wrap=${ifDefined(this.wrap)}
           class="form-element textarea"

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

@@ -1,17 +1,29 @@
-import { LitElement, nothing } from "lit";
+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>;
+    iconText: any;
     /**
      * Nom identifiant l'icone ex : *info*
      */
-    name: string;
+    private _name;
+    get name(): string;
+    set name(newName: string);
     /**
      * prefix de l'icone si nécessaire ex: *solid*. La valeur par défaut est "" qui est mappée sur *regular*
      */
-    prefix: string;
-    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    private _prefix;
+    get prefix(): string;
+    set prefix(newPrefix: string);
+    /**
+     * library de l'icone url vers un dossier en lign conenant des icônes
+     */
+    private _library;
+    get library(): string;
+    set library(newLibrary: string);
+    render(): any;
 }

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

@@ -4,7 +4,16 @@ 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, css, nothing } from "lit";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { LitElement, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import Icons from "./icons";
 /**
@@ -14,14 +23,48 @@ import Icons from "./icons";
 let Icon = class Icon extends LitElement {
     constructor() {
         super(...arguments);
+        this.iconText = "";
         /**
          * Nom identifiant l'icone ex : *info*
          */
-        this.name = "";
+        this._name = "";
         /**
          * prefix de l'icone si nécessaire ex: *solid*. La valeur par défaut est "" qui est mappée sur *regular*
          */
-        this.prefix = "";
+        this._prefix = "";
+        /**
+         * library de l'icone url vers un dossier en lign conenant des icônes
+         */
+        this._library = "";
+    }
+    updateIcon() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.name)
+                return;
+            this.iconText = yield Icons.default.get({ name: this.name, prefix: this.prefix, library: this.library });
+            this.requestUpdate();
+        });
+    }
+    get name() {
+        return this._name;
+    }
+    set name(newName) {
+        this._name = newName;
+        this.updateIcon();
+    }
+    get prefix() {
+        return this._prefix;
+    }
+    set prefix(newPrefix) {
+        this._prefix = newPrefix;
+        this.updateIcon();
+    }
+    get library() {
+        return this._library;
+    }
+    set library(newLibrary) {
+        this._library = newLibrary;
+        this.updateIcon();
     }
     render() {
         if (!this.name) {
@@ -29,7 +72,7 @@ let Icon = class Icon extends LitElement {
             return nothing;
         }
         this.style.removeProperty("display");
-        return html `${Icons.default.get({ name: this.name, prefix: this.prefix })}`;
+        return this.iconText;
     }
 };
 Icon.styles = css `
@@ -78,10 +121,13 @@ Icon.styles = css `
   `;
 __decorate([
     property({ type: String })
-], Icon.prototype, "name", void 0);
+], Icon.prototype, "name", null);
+__decorate([
+    property({ type: String })
+], Icon.prototype, "prefix", null);
 __decorate([
     property({ type: String })
-], Icon.prototype, "prefix", void 0);
+], Icon.prototype, "library", null);
 Icon = __decorate([
     customElement("sonic-icon")
 ], Icon);

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

@@ -1,13 +1,14 @@
 export declare type IconConf = {
     name: string;
     prefix?: string;
+    library?: string;
 };
 export default class Icons {
     static fontAwesomeNext: {
-        get: (params: IconConf) => import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/unsafe-html").UnsafeHTMLDirective>;
+        get: (params: IconConf) => Promise<import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/unsafe-html").UnsafeHTMLDirective>>;
     };
     static registerIcons(newIcons: Record<string, Record<string, string>>): void;
     static default: {
-        get: (params: IconConf) => import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/unsafe-html").UnsafeHTMLDirective>;
+        get: (params: IconConf) => Promise<import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/unsafe-html").UnsafeHTMLDirective>>;
     };
 }

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

@@ -1,6 +1,32 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var _a;
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import icons from "./icons.json";
-;
+/**
+ * Ce tableau static permet de ne pas appeler plusieurs fois le même service lors d'appel concurrents en GET.
+ */
+const loadingGetPromises = new Map();
+/**
+ * Les librairies en ligne.
+ * Pour chaque identifiant de librairie a une template d'url de chargement
+ * Les propriétés name et prefix de sonic-icon servent à remplir le template.
+ * 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",
+};
 export default class Icons {
     static registerIcons(newIcons) {
         const record = icons;
@@ -14,12 +40,57 @@ export default class Icons {
         }
     }
 }
+_a = Icons;
 Icons.fontAwesomeNext = {
-    get: (params) => {
-        var _a;
-        let prefix = ((_a = params.prefix) === null || _a === void 0 ? void 0 : _a.replace("far", "regular").replace("fas", "solid")) || "regular";
-        let record = icons;
-        return unsafeHTML(record[prefix][params.name] || "");
-    },
+    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 && libraries[library]) {
+            let libIcons = iconsAsRecord[library];
+            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);
+            /**
+             * 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 (!loadingGetPromises.has(url)) {
+                let promise = new Promise((resolve) => __awaiter(void 0, void 0, void 0, function* () {
+                    let result = yield fetch(url);
+                    try {
+                        let text = yield result.text();
+                        resolve(text);
+                    }
+                    catch (e) {
+                        resolve(null);
+                    }
+                }));
+                loadingGetPromises.set(url, promise);
+            }
+            /**
+             * Chargement de l'icone.
+             */
+            let result = yield loadingGetPromises.get(url);
+            loadingGetPromises.delete(url);
+            libIcons[name] = result;
+            return unsafeHTML(result);
+        }
+        /**
+         * svgs "locaux"
+         */
+        return unsafeHTML(iconsAsRecord[prefix][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-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"}}
+{"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/link/link.d.ts

@@ -5,9 +5,18 @@ export declare class Link extends LitElement {
     private _location;
     get location(): string;
     set location(value: string);
+    /**
+     * mode d'activation du bouton :
+     * - 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;
-    target: null;
+    private _target;
+    set target(newTarget: string | null);
+    get target(): string | null;
     /**
      * Si présent on passe en mode pushstate
      */

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

@@ -8,12 +8,20 @@ import LocationHandler from "@supersoniks/concorde/core/utils/LocationHandler";
 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";
 let Link = class Link extends LitElement {
     constructor() {
         super(...arguments);
         this.href = "";
         this._location = "";
-        this.target = null;
+        /**
+         * mode d'activation du bouton :
+         * - 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;
         /**
          * Si présent on passe en mode pushstate
          */
@@ -37,6 +45,14 @@ let Link = class Link extends LitElement {
         LocationHandler.offChange(this);
         super.disconnectedCallback();
     }
+    set target(newTarget) {
+        this._target = newTarget;
+        Electron.fixBlankLink(this);
+        this.requestUpdate();
+    }
+    get target() {
+        return this._target;
+    }
     handlePushState(e) {
         e.preventDefault();
         LocationHandler.changeFromComponent(this);
@@ -65,7 +81,10 @@ __decorate([
 ], Link.prototype, "href", void 0);
 __decorate([
     property({ type: String })
-], Link.prototype, "target", void 0);
+], Link.prototype, "autoActive", void 0);
+__decorate([
+    property({ type: String })
+], Link.prototype, "target", null);
 __decorate([
     property({ type: Boolean })
 ], Link.prototype, "pushState", void 0);

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

@@ -1,4 +1,5 @@
 import { LitElement, PropertyValues } from "lit";
+import "./menu-item";
 export declare class MenuItems extends LitElement {
     static styles: import("lit").CSSResult[];
     /**
@@ -7,20 +8,25 @@ export declare class MenuItems extends LitElement {
      */
     size: "" | "xs" | "sm" | "lg";
     /**
-     * Direction // todo
+     * Direction
      */
-    direction: "" | "row" | "column";
+    direction: "row" | "column";
+    align: "center" | "left" | "right";
     /**
      * Ombre
      */
-    shadow: "" | "none" | "sm" | "md";
+    shadow: "" | "none" | "sm" | "md" | 'lg' | "xl";
+    moreShape: "square" | "circle";
     /**
      * Propriété min-width du bouton
      */
     minWidth: string;
     menuChildren: Array<HTMLElement>;
-    menuNodes: Array<Node>;
+    moreElements: Array<HTMLElement>;
+    hasMoreElements: boolean;
+    checkIfMore(): void;
     updated(_changedProperties: PropertyValues): void;
-    _setChildrenSize(): void;
+    mainSlotChange(): void;
+    setChildrenSize(menuItems: Array<HTMLElement>): void;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -6,7 +6,8 @@ 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, queryAssignedNodes } from "lit/decorators.js";
+import { customElement, property, queryAssignedElements, state } from "lit/decorators.js";
+import "./menu-item";
 let MenuItems = class MenuItems extends LitElement {
     constructor() {
         super(...arguments);
@@ -16,50 +17,80 @@ let MenuItems = class MenuItems extends LitElement {
          */
         this.size = "";
         /**
-         * Direction // todo
+         * Direction
          */
         this.direction = "column";
+        this.align = "left";
         /**
          * Ombre
          */
         this.shadow = "none";
+        this.moreShape = "circle";
         /**
          * Propriété min-width du bouton
          */
         this.minWidth = "0";
+        this.hasMoreElements = false;
     }
-    // connectedCallback(): void {
-    //   super.connectedCallback();
-    // }
-    updated(_changedProperties) {
-        super.updated(_changedProperties);
-        this._setChildrenSize();
+    checkIfMore() {
+        var _a;
+        this.hasMoreElements = !!((_a = this.moreElements) === null || _a === void 0 ? void 0 : _a.length);
     }
-    _setChildrenSize() {
-        if (this.size) {
-            const children = this.querySelectorAll("sonic-button, sonic-menu-item");
-            children.forEach((elt) => {
-                if (!elt.hasAttribute("size")) {
-                    elt.setAttribute("size", this.size);
-                }
-            });
+    updated(_changedProperties) {
+        const moreBtn = this.querySelector('.more-btn');
+        if (this.size && moreBtn) {
+            moreBtn.setAttribute("size", this.size);
         }
-        const children = this.querySelectorAll("sonic-divider");
-        children.forEach((elt) => {
+        const dividers = this.querySelectorAll("sonic-divider");
+        dividers.forEach((elt) => {
             if (!elt.hasAttribute("size")) {
                 elt.setAttribute("size", "xs");
             }
         });
-        // const isSmall = ["sm", "xs"].some((value) => {
-        //   return value === this.size;
-        // });
-        // console.log(isSmall);
+        super.updated(_changedProperties);
+    }
+    mainSlotChange() {
+        this.setChildrenSize(this.menuChildren);
+    }
+    setChildrenSize(menuItems) {
+        menuItems.forEach((elt) => {
+            if (this.size) {
+                elt.setAttribute("size", this.size);
+            }
+            if (this.align) {
+                elt.setAttribute("textAlign", this.align);
+            }
+            if (this.direction == "row") {
+                if (elt.getAttribute('shape') == "block") {
+                    elt.setAttribute("shape", "default");
+                }
+            }
+        });
     }
     render() {
         const menuStyles = {
             minWidth: this.minWidth,
+            flexDirection: this.direction,
+        };
+        const isMenuRow = this.direction == "row";
+        const popStyles = {
+            display: 'block',
+            alignSelf: isMenuRow ? 'center' : 'flex-start',
+            justifySelf: 'center',
+            flexDirection: this.direction
         };
-        return html `<menu part="menu" style=${styleMap(menuStyles)}> <slot></slot></menu>`;
+        const popBtnStyles = {
+            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} textAlign="center" >
+                    <sonic-icon prefix="iconoir" 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 = [
@@ -67,33 +98,39 @@ MenuItems.styles = [
       :host {
         display: block;
       }
+
       :host > menu {
         display: flex;
-        flex-direction: column;
         border-radius: min(calc(var(--sc-btn-rounded) * 2), 0.4em);
         margin: 0;
         padding: 0.35em;
         gap: 0.15rem;
       }
+ 
+      .hidden {
+        display:none !important;
+      }
 
       /*OMBRE*/
-      :host([shadow]) > :not(slot),
-      :host([shadow="md"]) > :not(slot),
-      :host([shadow="true"]) > :not(slot) {
+      :host([shadow]) .shadowable,
+      :host([shadow="md"])  .shadowable,
+      :host([shadow="true"])  .shadowable {
         box-shadow: var(--sc-shadow);
       }
 
-      :host([shadow="sm"]) > :not(slot) {
+      :host([shadow="sm"])  .shadowable {
         box-shadow: var(--sc-shadow-sm);
       }
 
-      :host([shadow="none"]) > :not(slot) {
+      :host([shadow="lg"])  .shadowable {
+        box-shadow: var(--sc-shadow-lg);
+      }
+      
+      :host([shadow="none"])  .shadowable {
         box-shadow: none;
       }
 
-      :host([shadow="lg"]) > :not(slot) {
-        box-shadow: var(--sc-shadow-lg);
-      }
+    
     `,
 ];
 __decorate([
@@ -102,18 +139,27 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], MenuItems.prototype, "direction", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], MenuItems.prototype, "align", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], MenuItems.prototype, "shadow", void 0);
+__decorate([
+    property({ type: String })
+], MenuItems.prototype, "moreShape", void 0);
 __decorate([
     property({ type: String })
 ], MenuItems.prototype, "minWidth", void 0);
 __decorate([
-    queryAssignedElements({ slot: "main", selector: "*" })
+    queryAssignedElements({ selector: "sonic-menu-item" })
 ], MenuItems.prototype, "menuChildren", void 0);
 __decorate([
-    queryAssignedNodes({ slot: "main", flatten: true })
-], MenuItems.prototype, "menuNodes", void 0);
+    queryAssignedElements({ slot: "more", selector: "*" })
+], MenuItems.prototype, "moreElements", void 0);
+__decorate([
+    state()
+], MenuItems.prototype, "hasMoreElements", void 0);
 MenuItems = __decorate([
     customElement("sonic-menu")
 ], MenuItems);

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

@@ -163,7 +163,9 @@ Pop.styles = [
         transform: translateY(1rem) scale(0.95);
         opacity: 0;
         pointer-events: none;
-        transition: 0.2s ease;
+        transition-duration: 0.15s ;
+        transition-timing-function: ease;
+        transition-property:all;
         border-radius: min(calc(var(--sc-btn-rounded) * 2), 0.4em);
       }
 
@@ -171,7 +173,8 @@ Pop.styles = [
         transform: translateY(0) scale(1);
         opacity: 1;
         pointer-events: auto;
-        transition: 0.2s cubic-bezier(0.25, 0.25, 0.42, 1.225);
+        transition-property:scale, opacity;
+        transition-timing-function: cubic-bezier(0.25, 0.25, 0.42, 1.225);
       }
 
       /*OMBRE*/