@supersoniks/concorde 1.1.49 → 2.0.0

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

@@ -4,18 +4,9 @@ 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;
 };
-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 Icons from "@supersoniks/concorde/core/components/ui/icon/icons";
 import { css, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 const tagName = "sonic-icon";
 /**
  * Afficher l'icone choisie parmis une liste prédéfinie dans icons.json
@@ -24,67 +15,39 @@ const tagName = "sonic-icon";
 let Icon = class Icon extends LitElement {
     constructor() {
         super(...arguments);
-        this.renderId = 0;
         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() {
-        if (!this.name)
-            return;
-        this.renderId++;
-        const frameRenderId = this.renderId;
-        (window.queueMicrotask || window.requestAnimationFrame)(() => __awaiter(this, void 0, void 0, function* () {
-            if (frameRenderId != this.renderId) {
-                return;
-            }
-            this.iconText = yield Icons.default.get({ name: this.name, prefix: this.prefix, library: this.library });
-            this.requestUpdate();
-        }));
-    }
-    get name() {
-        return this._name;
-    }
-    set name(newName) {
-        this._name = newName;
-        this.updateIcon();
+        this.library = "";
     }
-    get prefix() {
-        return this._prefix;
+    async updateIcon() {
+        this.iconText = await Icons.default.get({ name: this.name, prefix: this.prefix, library: this.library });
     }
-    set prefix(newPrefix) {
-        this._prefix = newPrefix;
-        this.updateIcon();
-    }
-    get library() {
-        return this._library;
-    }
-    set library(newLibrary) {
-        this._library = newLibrary;
-        this.updateIcon();
+    willUpdate(changedProperties) {
+        if (changedProperties.has("name") || changedProperties.has("prefix") || changedProperties.has("library")) {
+            this.updateIcon();
+        }
+        super.willUpdate(changedProperties);
     }
     render() {
-        if (!this.name) {
-            this.style.display = "none";
+        if (!this.iconText) {
             return nothing;
         }
-        this.style.removeProperty("display");
         return this.iconText;
     }
 };
 Icon.styles = css `
     :host {
-      line-height: 0;
+      line-height: 0.1em;
       width: fit-content;
       height: fit-content;
       vertical-align: -0.125em;
@@ -92,6 +55,7 @@ Icon.styles = css `
     svg {
       height: var(--sc-icon-size, 1em);
       width: var(--sc-icon-size, 1em);
+      overflow: visible;
     }
 
     svg:not([fill="none"]) {
@@ -130,15 +94,18 @@ Icon.styles = css `
       --sc-icon-size: 2.8em;
     }
   `;
+__decorate([
+    state()
+], Icon.prototype, "iconText", void 0);
 __decorate([
     property({ type: String })
-], Icon.prototype, "name", null);
+], Icon.prototype, "name", void 0);
 __decorate([
     property({ type: String })
-], Icon.prototype, "prefix", null);
+], Icon.prototype, "prefix", void 0);
 __decorate([
     property({ type: String })
-], Icon.prototype, "library", null);
+], Icon.prototype, "library", void 0);
 Icon = __decorate([
     customElement(tagName)
 ], Icon);

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

@@ -1,12 +1,3 @@
-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;
 // ici on désactive un regle de eslint exceptionnelement pour ce fichier
 /* eslint no-async-promise-executor: 0 */ // --> OFF
@@ -48,15 +39,16 @@ const libraries = {
 };
 let hasEnabledCustomLibrary = false;
 function enableCustomLibrary() {
-    var _b, _c;
     if (hasEnabledCustomLibrary)
         return;
     hasEnabledCustomLibrary = true;
-    libraries.custom.url = ((_b = document.querySelector("[customIconLibraryPath]")) === null || _b === void 0 ? void 0 : _b.getAttribute("customIconLibraryPath")) || "";
-    libraries.custom.defaultPrefix =
-        ((_c = document.querySelector("[customIconDefaultPrefix]")) === null || _c === void 0 ? void 0 : _c.getAttribute("customIconDefaultPrefix")) || "";
+    libraries.custom.url = document.querySelector("[customIconLibraryPath]")?.getAttribute("customIconLibraryPath") || "";
+    libraries.custom.defaultPrefix = document.querySelector("[customIconDefaultPrefix]")?.getAttribute("customIconDefaultPrefix") || "";
 }
-export default class Icons {
+const iconCachStr = sessionStorage.getItem("sonicIconsCache");
+const iconCache = iconCachStr ? JSON.parse(iconCachStr) : { icons: {}, names: [] };
+const iconCacheMaxSize = 100;
+class Icons {
     static registerIcons(newIcons) {
         const record = icons;
         for (const prefix in newIcons) {
@@ -71,7 +63,7 @@ export default class Icons {
 }
 _a = Icons;
 Icons.fontAwesomeNext = {
-    get: (params) => __awaiter(void 0, void 0, void 0, function* () {
+    get: async (params) => {
         const library = params.library;
         const name = params.name || "";
         const iconsAsRecord = icons;
@@ -94,38 +86,52 @@ Icons.fontAwesomeNext = {
             if (libIcons[libIconsKey])
                 return unsafeHTML(libIcons[libIconsKey]);
             const url = libraryItem.url.replace("$prefix", prefix).replace("$name", name);
+            /**
+             * MiniCache de session
+             */
+            if (iconCache.icons[url]) {
+                libIcons[libIconsKey] = iconCache.icons[url];
+                return unsafeHTML(iconCache.icons[url]);
+            }
             /**
              * on utilise une promise mutualisée pour ne pas faire plusieurs appels concurents d'une même icone
              */
             if (!loadingGetPromises.has(url)) {
-                const promise = new Promise((resolve) => __awaiter(void 0, void 0, void 0, function* () {
-                    const result = yield fetch(url);
+                const promise = new Promise(async (resolve) => {
+                    const result = await fetch(url);
                     if (!result.ok) {
                         resolve(`<b title="Erreur ${result.status}">😶</b>`);
                         return;
                     }
                     try {
-                        const text = yield result.text();
+                        const text = await result.text();
                         resolve(text);
                     }
                     catch (e) {
                         resolve(null);
                     }
-                }));
+                });
                 loadingGetPromises.set(url, promise);
             }
             /**
              * Chargement de l'icone.
              */
-            const result = yield loadingGetPromises.get(url);
+            const result = await loadingGetPromises.get(url);
             loadingGetPromises.delete(url);
             libIcons[libIconsKey] = result || "";
+            iconCache.icons[url] = result || "";
+            if (iconCache.names.length > iconCacheMaxSize) {
+                const key = iconCache.names.shift();
+                delete iconCache.icons[key];
+            }
+            sessionStorage.setItem("sonicIconsCache", JSON.stringify(iconCache));
             return unsafeHTML(result);
         }
         /**
          * svgs "locaux"
          */
         return unsafeHTML(iconsAsRecord["core"][params.name] || "");
-    }),
+    },
 };
-Icons.default = Icons.fontAwesomeNext;
+Icons.default = _a.fontAwesomeNext;
+export default Icons;

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

@@ -10,6 +10,6 @@ export declare class Image extends LitElement {
     objectPosition: string;
     imageRendering: string;
     cover: boolean;
-    firstUpdated(): void;
+    firstUpdated(changedProperties: Map<string | number | symbol, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -20,16 +20,16 @@ let Image = class Image extends LitElement {
         this.imageRendering = "auto";
         this.cover = false;
     }
-    firstUpdated() {
-        var _a;
+    firstUpdated(changedProperties) {
         if (this.transition) {
-            const img = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("img");
+            const img = this.shadowRoot?.querySelector("img");
             if (!img)
                 return;
             img.onload = function () {
                 img.classList.add("loaded");
             };
         }
+        super.firstUpdated(changedProperties);
     }
     render() {
         const imgStyles = {

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

@@ -43,8 +43,7 @@ let MenuItems = class MenuItems extends LitElement {
         };
     }
     checkIfMore() {
-        var _a;
-        this.hasMoreElements = !!((_a = this.moreElements) === null || _a === void 0 ? void 0 : _a.length);
+        this.hasMoreElements = !!this.moreElements?.length;
     }
     updated(_changedProperties) {
         const moreBtn = this.querySelector(".more-btn");
@@ -70,8 +69,7 @@ let MenuItems = class MenuItems extends LitElement {
         super.connectedCallback();
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.observer?.disconnect();
         super.disconnectedCallback();
     }
     initScrollable() {

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

@@ -2,6 +2,6 @@ import { LitElement } from "lit";
 export declare class ModalActions extends LitElement {
     static styles: import("lit").CSSResult[];
     buttons: Array<HTMLElement>;
-    firstUpdated(): void;
+    firstUpdated(changedProperties: Map<string | number | symbol, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -8,16 +8,16 @@ import { html, LitElement, css } from "lit";
 import { customElement, queryAssignedElements } from "lit/decorators.js";
 const tagName = "sonic-modal-actions";
 let ModalActions = class ModalActions extends LitElement {
-    firstUpdated() {
-        var _a;
-        (_a = this.buttons) === null || _a === void 0 ? void 0 : _a.forEach((btn) => {
+    firstUpdated(changedProperties) {
+        this.buttons?.forEach((btn) => {
             btn.addEventListener("click", () => {
                 if (btn.getAttribute("hideModal") != "false") {
                     const parentModal = this.closest("sonic-modal");
-                    parentModal === null || parentModal === void 0 ? void 0 : parentModal.hide();
+                    parentModal?.hide();
                 }
             });
         });
+        super.firstUpdated(changedProperties);
     }
     render() {
         return html `<slot></slot>`;

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

@@ -38,19 +38,19 @@ let Modal = class Modal extends Subscriber(LitElement) {
         if (options.removeOnHide === true)
             modal.setAttribute("removeOnHide", "true");
         if (options.maxWidth)
-            modal.maxWidth = options === null || options === void 0 ? void 0 : options.maxWidth;
+            modal.maxWidth = options?.maxWidth;
         if (options.width)
-            modal.width = options === null || options === void 0 ? void 0 : options.width;
+            modal.width = options?.width;
         if (options.maxHeight)
-            modal.maxHeight = options === null || options === void 0 ? void 0 : options.maxHeight;
+            modal.maxHeight = options?.maxHeight;
         if (options.height)
-            modal.height = options === null || options === void 0 ? void 0 : options.height;
+            modal.height = options?.height;
         if (options.paddingX)
-            modal.style.setProperty("--sc-modal-px", options === null || options === void 0 ? void 0 : options.paddingX);
+            modal.style.setProperty("--sc-modal-px", options?.paddingX);
         if (options.paddingY)
-            modal.style.setProperty("--sc-modal-py", options === null || options === void 0 ? void 0 : options.paddingY);
+            modal.style.setProperty("--sc-modal-py", options?.paddingY);
         if (options.zIndex)
-            modal.style.setProperty("--sc-modal-z-index", options === null || options === void 0 ? void 0 : options.zIndex);
+            modal.style.setProperty("--sc-modal-z-index", options?.zIndex);
         // inner content
         modal.innerHTML = `<sonic-modal-close></sonic-modal-close><sonic-modal-content>${options.content}</sonic-modal-content>` || "";
         const container = document.querySelector("sonic-theme") || document.body;
@@ -136,16 +136,14 @@ let Modal = class Modal extends Subscriber(LitElement) {
       ></div>`;
     }
     show() {
-        var _a, _b;
         this.visible = true;
-        (_a = this.modalElement) === null || _a === void 0 ? void 0 : _a.setAttribute("tabindex", "0");
-        (_b = this.modalElement) === null || _b === void 0 ? void 0 : _b.focus();
+        this.modalElement?.setAttribute("tabindex", "0");
+        this.modalElement?.focus();
         this.dispatchEvent(new CustomEvent("show"));
     }
     hide() {
-        var _a;
         this.visible = false;
-        (_a = this.modalElement) === null || _a === void 0 ? void 0 : _a.setAttribute("tabindex", "-1");
+        this.modalElement?.setAttribute("tabindex", "-1");
         this.dispatchEvent(new CustomEvent("hide"));
         if (this.hasAttribute("resetDataProviderOnHide")) {
             PublisherManager.get(this.getAttribute("resetDataProviderOnHide")).set({});

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

@@ -99,8 +99,7 @@ let Pop = Pop_1 = class Pop extends LitElement {
         this.resizeObserver.unobserve(this.popContent);
     }
     computePosition(placement) {
-        var _a, _b, _c;
-        let contentRect = (_a = this.popContent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        let contentRect = this.popContent?.getBoundingClientRect();
         const padding = 8;
         const shiftPadding = 5;
         const thisRect = this.getBoundingClientRect();
@@ -141,7 +140,7 @@ let Pop = Pop_1 = class Pop extends LitElement {
             left: `${this.lastContentX}px`,
             top: `${this.lastContentY}px`,
         });
-        contentRect = (_b = this.popContent) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+        contentRect = this.popContent?.getBoundingClientRect();
         if (contentRect.x < shiftPadding && placement == "left")
             x = xRight;
         if (contentRect.y < shiftPadding && placement == "top")
@@ -158,7 +157,7 @@ let Pop = Pop_1 = class Pop extends LitElement {
             left: `${this.lastContentX}px`,
             top: `${this.lastContentY}px`,
         });
-        contentRect = (_c = this.popContent) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+        contentRect = this.popContent?.getBoundingClientRect();
         if (contentRect.x < 0) {
             this.lastContentX += -contentRect.x;
         }

package/core/components/ui/table/table-td.js

@@ -19,12 +19,7 @@ let TableTd = class TableTd extends LitElement {
             maxWidth: this.maxWidth,
             width: this.width,
         };
-        return html `<td
-      part="td"
-      style=${styleMap(styles)}
-      colspan=${ifDefined(this.colSpan)}
-      rowspan=${ifDefined(this.rowSpan)}
-    >
+        return html `<td part="td" style=${styleMap(styles)} colspan=${ifDefined(this.colSpan)} rowspan=${ifDefined(this.rowSpan)}>
       <slot></slot>
     </td>`;
     }
@@ -39,6 +34,10 @@ TableTd.styles = [
         all: inherit;
         display: table-cell;
         padding: var(--sc-table-td-py) var(--sc-table-td-px);
+        border-top: var(--sc-table-td-border-t, none);
+        border-bottom: var(--sc-table-td-border-b, none);
+        border-right: var(--sc-table-td-border-r, none);
+        border-left: var(--sc-table-td-border-l, none);
       }
     `,
 ];

package/core/components/ui/table/table-th.js

@@ -18,12 +18,7 @@ let TableTh = class TableTh extends LitElement {
             maxWidth: this.maxWidth,
             width: this.width,
         };
-        return html `<th
-      part="th"
-      style=${styleMap(styles)}
-      colspan=${ifDefined(this.colSpan)}
-      rowspan=${ifDefined(this.rowSpan)}
-    >
+        return html `<th part="th" style=${styleMap(styles)} colspan=${ifDefined(this.colSpan)} rowspan=${ifDefined(this.rowSpan)}>
       <slot></slot>
     </th> `;
     }
@@ -48,6 +43,10 @@ TableTh.styles = [
         font-size: var(--sc-table-th-fs);
         padding: var(--sc-table-th-py) var(--sc-table-th-px);
       }
+
+      :host([noBorder]) th {
+        border-bottom: none;
+      }
     `,
 ];
 __decorate([

package/core/components/ui/table/table-tr.js

@@ -21,7 +21,14 @@ TableTr.styles = [
       }
 
       :host([odd]) {
-        background: var(--sc-table-accent-bg);
+        background: var(--sc-table-accent-bg) !important;
+      }
+      :host([even]) {
+        background: var(--sc-table-bg) !important;
+      }
+
+      :host(:hover) {
+        background: var(--sc-table-hover-bg) !important;
       }
     `,
 ];

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

@@ -10,6 +10,7 @@ export declare class Table extends LitElement {
     static styles: import("lit").CSSResult[];
     size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
     bordered: boolean;
+    noCustomScroll: boolean;
     maxHeight?: string;
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/table/table.js

@@ -21,13 +21,14 @@ let Table = class Table extends LitElement {
     constructor() {
         super(...arguments);
         this.bordered = false;
+        this.noCustomScroll = false;
     }
     render() {
         const containerStyles = {
             maxHeight: this.maxHeight,
         };
         return html `
-      <div class="table-container custom-scroll" style=${styleMap(containerStyles)}>
+      <div class="table-container ${!this.noCustomScroll ? "custom-scroll" : ""}" style=${styleMap(containerStyles)}>
         <div class="table">
           <slot></slot>
         </div>
@@ -63,6 +64,10 @@ Table.styles = [
         -webkit-overflow-scrolling: touch;
       }
 
+      :host(:not([maxHeight])) .table-container {
+        overflow: initial !important;
+      }
+
       .table {
         width: 100%;
         display: table;
@@ -80,6 +85,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Table.prototype, "bordered", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Table.prototype, "noCustomScroll", void 0);
 __decorate([
     property({ type: String })
 ], Table.prototype, "maxHeight", void 0);

package/core/components/ui/theme/theme.js

@@ -26,7 +26,6 @@ let Theme = Theme_1 = class Theme extends LitElement {
         this.postCSSVars();
     }
     postCSSVars() {
-        var _a;
         const stylesheets = document.styleSheets;
         const ssLength = stylesheets.length;
         const fontUrls = [];
@@ -40,11 +39,11 @@ let Theme = Theme_1 = class Theme extends LitElement {
             variables: this.getCssVariables(),
             fonts: fontUrls,
         };
-        (_a = PublisherManager.get("sonic-theme")) === null || _a === void 0 ? void 0 : _a.set(theme);
-        document.querySelectorAll("iframe").forEach((elt) => {
-            var _a;
-            return (_a = elt.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(Object.assign({ type: "SonicTheme" }, theme), "*");
-        });
+        PublisherManager.get("sonic-theme")?.set(theme);
+        document.querySelectorAll("iframe").forEach((elt) => elt.contentWindow?.postMessage({
+            type: "SonicTheme",
+            ...theme,
+        }, "*"));
     }
     receiveMessage(event) {
         const data = event.data;