@supersoniks/concorde 1.1.11 → 1.1.12

package/core/components/ui/alert/alert.js

@@ -73,17 +73,16 @@ Alert.styles = [
         font-weight: var(--sc-alert-title-fw);
       }
 
-      :host([status="warning"]) .alert {
+      :host([status="warning"]) {
         --sc-alert-color: var(--sc-warning);
       }
-
-      :host([status="error"]) .alert {
+      :host([status="error"]) {
         --sc-alert-color: var(--sc-danger);
       }
-      :host([status="info"]) .alert {
+      :host([status="info"]) {
         --sc-alert-color: var(--sc-info);
       }
-      :host([status="success"]) .alert {
+      :host([status="success"]) {
         --sc-alert-color: var(--sc-success);
       }
 

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

@@ -121,12 +121,13 @@ export declare class Button extends Button_base {
     private _href;
     set href(value: string);
     get href(): string;
+    goBack: string | null;
     /**
      * Si présent on passe en mode pushstate
      */
     pushState: null;
     active: boolean;
-    handlePushState(e: Event): void;
+    handleNavigation(e: Event): void;
     handleChange(e?: any): void;
     connectedCallback(): void;
     setCheckedValue(checked: true | null): void;

package/core/components/ui/button/button.js

@@ -81,6 +81,7 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
          * L'url
          */
         this._href = "";
+        this.goBack = null;
         /**
          * Si présent on passe en mode pushstate
          */
@@ -101,13 +102,13 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
     get href() {
         return this._href;
     }
-    handlePushState(e) {
+    handleNavigation(e) {
         e.preventDefault();
         LocationHandler.changeFromComponent(this);
     }
     handleChange(e) {
         super.handleChange(e);
-        if (this.pushState) {
+        if (this.pushState || this.goBack !== null) {
             e.preventDefault();
             e.stopPropagation();
             LocationHandler.changeFromComponent(this);
@@ -155,7 +156,7 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
       </button>
     `;
         return this.href
-            ? html `<a href="${this.href}" target=${ifDefined(this.target)} @click=${this.pushState ? this.handlePushState : null}>${btn}</a>`
+            ? html `<a href="${this.href}" target=${ifDefined(this.target)} @click=${this.pushState || this.goBack !== null ? this.handleNavigation : null}>${btn}</a>`
             : html `${btn}`;
     }
     onSlotChange() {
@@ -221,7 +222,7 @@ Button.styles = [
 
         cursor: pointer;
         text-align: center;
-        line-height: 1.2;
+        line-height: 1.1;
         border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr) var(--sc-item-rounded-br)
         var(--sc-item-rounded-bl);
 
@@ -399,6 +400,7 @@ Button.styles = [
         padding: 0;
         align-items: center;
         justify-content: 0;
+        text-align:center !important;
       }
 
       :host([shape="block"]),
@@ -549,6 +551,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Button.prototype, "href", null);
+__decorate([
+    property({ type: String })
+], Button.prototype, "goBack", void 0);
 __decorate([
     property({ type: Boolean })
 ], Button.prototype, "pushState", void 0);

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

@@ -14,7 +14,9 @@ export declare class Link extends LitElement {
     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,6 +8,7 @@ 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);
@@ -20,7 +21,7 @@ let Link = class Link extends LitElement {
          * - disabled : aucune activation / désactivation
         */
         this.autoActive = "partial";
-        this.target = null;
+        this._target = null;
         /**
          * Si présent on passe en mode pushstate
          */
@@ -44,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);
@@ -75,7 +84,7 @@ __decorate([
 ], Link.prototype, "autoActive", void 0);
 __decorate([
     property({ type: String })
-], Link.prototype, "target", void 0);
+], 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*/

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

@@ -1,7 +1,9 @@
 import { LitElement } from "lit";
 export declare class Progress extends LitElement {
     static styles: import("lit").CSSResult[];
-    value: number;
+    value?: number;
     max: number;
+    type: "default" | "primary" | "warning" | "danger" | "success" | "info";
+    size: "xs" | "sm" | "md" | "lg" | "xl";
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/progress/progress.js

@@ -6,14 +6,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 let Progress = class Progress extends LitElement {
     constructor() {
         super(...arguments);
         this.max = 100;
+        this.type = "default";
+        this.size = "md";
     }
     render() {
         return html `
-      <progress value=${this.value} max=${this.max}></progress>
+      <progress value=${ifDefined(this.value)} max=${this.max}></progress>
+      <slot></slot>
     `;
     }
 };
@@ -21,10 +25,18 @@ Progress.styles = [
     css `
 
       :host {
-        --sc-progress-bg: var(--sc-input-bg, var(--sc-base, #fff));
+        --sc-progress-bg: var(--sc-input-bg, var(--sc-base-100, #f5f5f5));
         --sc-progress-color: var(--sc-base-content, #1f2937);
         --sc-progress-height: .6rem;
+        --sc-progress-fs: 1rem;
+        --sc-progress-fw: 500;
+        --sc-progress-rounded: var(--sc-rounded-lg);
+        font-weight:var(--sc-progress-fw);
         display: flex;
+        flex-wrap: wrap;
+        line-height: 1.2;
+        font-size:var(--sc-progress-fs);
+        color:var(--sc-progress-color);
       }
 
       progress {
@@ -34,21 +46,78 @@ Progress.styles = [
         appearance: none;
         overflow: hidden;
         height: var(--sc-progress-height);
-        border-radius: var(--rounded-box,1rem);
+        border-radius: var(--sc-progress-rounded);
         background-color: var(--sc-progress-bg);
         color: var(--sc-progress-color);
         border:none;
       }
       progress::-moz-progress-bar {
         background-color: var(--sc-progress-color);
+        border-radius: var(--sc-progress-rounded);
       }
+
       progress::-webkit-progress-bar {
         background-color: var(--sc-progress-bg);
       }
       progress::-webkit-progress-value {
         background-color: var(--sc-progress-color);
+        border-radius: var(--sc-progress-rounded);
+      }
+
+      progress:indeterminate:after {
+          background-color: var(--sc-progress-color);
+          content: "";
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: -40%;
+          width: 33.333333%;
+          border-radius: var(--sc-progress-rounded);
+          animation: progress-loading 3s infinite ease-in-out;
+      }
+
+      @keyframes progress-loading {
+        50% {
+          left: 107%;
+        }
       }
    
+      /* COLOR TYPES */
+      :host([type="warning"]) {
+        --sc-progress-color: var(--sc-warning);
+      }
+      :host([type="danger"]) {
+        --sc-progress-color: var(--sc-danger);
+      }
+      :host([type="info"]) {
+        --sc-progress-color: var(--sc-info);
+      }
+      :host([type="success"]) {
+        --sc-progress-color: var(--sc-success);
+      }
+
+      /* SIZES */
+      :host([size="xs"]) {
+        --sc-progress-height:.25rem;
+        --sc-progress-fs: 0.68rem;
+      }
+
+      :host([size="sm"]) {
+        --sc-progress-height:.4rem;
+        --sc-progress-fs: 0.85rem;
+      }
+
+      :host([size="lg"]) {
+        --sc-progress-height:1rem;
+        --sc-progress-fs: 1.25rem;
+      }
+
+      :host([size="xl"]) {
+        --sc-progress-height:1.5rem;
+        --sc-progress-fs: 1.5rem;
+      }
+
+
     `
 ];
 __decorate([
@@ -57,6 +126,12 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], Progress.prototype, "max", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Progress.prototype, "type", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Progress.prototype, "size", void 0);
 Progress = __decorate([
     customElement("sonic-progress")
 ], Progress);

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

@@ -5,6 +5,7 @@ export declare class Tabs extends LitElement {
     size: "md" | "xs" | "sm" | "lg";
     direction: "" | "row" | "column";
     icon: boolean;
+    moreShape: "square" | "circle";
     menu: HTMLElement;
     _resizeController: ResizeController;
     updated(_changedProperties: PropertyValues): void;

package/core/components/ui/tabs/tabs.js

@@ -14,6 +14,7 @@ let Tabs = class Tabs extends LitElement {
         this.size = "md";
         this.direction = "column";
         this.icon = false;
+        this.moreShape = "circle";
         this._resizeController = new ResizeController(this, {});
     }
     updated(_changedProperties) {
@@ -62,9 +63,9 @@ let Tabs = class Tabs extends LitElement {
         return html `<menu part="tabs"
       ><slot></slot>
       <sonic-pop class="flex"  >
-        <sonic-tab >
+        <sonic-menu-item  shape="square">
           <sonic-icon prefix="iconoir" class="my-auto" size="xl" name="more-vert"></sonic-icon>
-        </sonic-tab>
+        </sonic-menu-item>
         <sonic-menu slot="content"></sonic-menu>
       <sonic-pop>
     </menu>`;
@@ -111,8 +112,11 @@ __decorate([
     property({ type: String, reflect: true })
 ], Tabs.prototype, "direction", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
+    property({ type: Boolean })
 ], Tabs.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], Tabs.prototype, "moreShape", void 0);
 __decorate([
     query("menu")
 ], Tabs.prototype, "menu", void 0);

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

@@ -17,9 +17,6 @@ import "./image/image";
 import "./loader/loader";
 import "./taxonomy/taxonomy";
 import "./menu/menu";
-import "./menu/menu-item";
-import "./tabs/tabs";
-import "./tabs/tab";
 import "./modal/modal";
 import "./alert/alert";
 import "./toast/toast";

package/core/components/ui/ui.js

@@ -22,10 +22,9 @@ import "./loader/loader";
 import "./taxonomy/taxonomy";
 //Menu
 import "./menu/menu";
-import "./menu/menu-item";
 //Tabs
-import "./tabs/tabs";
-import "./tabs/tab";
+// import "./tabs/tabs";
+// import "./tabs/tab";
 // Misc
 import "./modal/modal";
 import "./alert/alert";

package/core/utils/Electron.d.ts

@@ -0,0 +1,3 @@
+export default class Electron {
+    static fixBlankLink(link: any): void;
+}

package/core/utils/Electron.js

@@ -0,0 +1,8 @@
+export default class Electron {
+    static fixBlankLink(link) {
+        const electron = typeof require == 'undefined' ? null : require("electron");
+        if (typeof electron && link.target == "_blank") {
+            link.addEventListener("click", () => { electron === null || electron === void 0 ? void 0 : electron.shell.openExternal(link.href); });
+        }
+    }
+}

package/core/utils/LocationHandler.js

@@ -47,6 +47,21 @@ export default class LocationHandler {
      * Voir link et button pour les exemples d'implémentation
      **/
     static changeFromComponent(component) {
+        if (component.goBack !== null) {
+            const origin = document.location.origin;
+            let urlDest = component.goBack || origin;
+            if ((document.referrer.indexOf("http") != 0 || new URL(document.referrer).origin != origin) && urlDest != document.location.href) {
+                let state = history.state || {};
+                state.concorde = state.concorde || {};
+                state.concorde.hasDoneHistoryBack = true; // maybe for debugging
+                history.pushState(state, document.title);
+                history.back();
+                document.location.replace(urlDest);
+            }
+            else
+                history.back();
+            return;
+        }
         let to = component.getAttribute("to");
         if (!to)
             to = component.href;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "customElements": "custom-elements.json",
   "license": "MIT",
   "publishConfig": {
@@ -191,6 +191,8 @@
     "./utils/Arrays": "./core/utils/Arrays",
     "./core/utils/DataBindObserver": "./core/utils/DataBindObserver",
     "./utils/DataBindObserver": "./core/utils/DataBindObserver",
+    "./core/utils/Electron": "./core/utils/Electron",
+    "./utils/Electron": "./core/utils/Electron",
     "./core/utils/Format": "./core/utils/Format",
     "./utils/Format": "./core/utils/Format",
     "./core/utils/HTML": "./core/utils/HTML",