@supersoniks/concorde 3.1.4 → 3.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "3.1.4",
+  "version": "3.1.6",
   "license": "MIT",
   "type": "module",
   "main": "",

package/src/core/components/ui/_css/size.ts

@@ -32,4 +32,7 @@ export const fontSize = css`
   :host([size="2xl"]) {
     --sc-fs: 1.5rem;
   }
+  :host([size="inherit"]) {
+    --sc-fs: 1em;
+  }
 `;

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

@@ -1,7 +1,14 @@
-import {html, LitElement, css, PropertyValues} from "lit";
-import {styleMap} from "lit/directives/style-map.js";
-import {customElement, property, queryAssignedElements, state, query} from "lit/decorators.js";
+import { html, LitElement, css, PropertyValues } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+import {
+  customElement,
+  property,
+  queryAssignedElements,
+  state,
+  query,
+} from "lit/decorators.js";
 import "@supersoniks/concorde/core/components/ui/menu/menu-item";
+import { Size } from "../_css/size";
 const tagName = "sonic-menu";
 
 @customElement(tagName)
@@ -64,12 +71,28 @@ export class MenuItems extends LitElement {
         display: none !important;
       }
       :host([scrollable][direction="row"].shadow-right) {
-        -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
-        mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+        -webkit-mask-image: linear-gradient(
+          to left,
+          rgba(0, 0, 0, 0),
+          rgba(0, 0, 0, 1) 10%
+        );
+        mask-image: linear-gradient(
+          to left,
+          rgba(0, 0, 0, 0),
+          rgba(0, 0, 0, 1) 10%
+        );
       }
       :host([scrollable][direction="row"].shadow-left) {
-        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
-        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+        -webkit-mask-image: linear-gradient(
+          to right,
+          rgba(0, 0, 0, 0),
+          rgba(0, 0, 0, 1) 10%
+        );
+        mask-image: linear-gradient(
+          to right,
+          rgba(0, 0, 0, 0),
+          rgba(0, 0, 0, 1) 10%
+        );
       }
       :host([scrollable][direction="row"].shadow-left.shadow-right) {
         -webkit-mask-image: linear-gradient(
@@ -79,19 +102,53 @@ export class MenuItems extends LitElement {
           rgba(0, 0, 0, 1) 90%,
           rgba(0, 0, 0, 0) 100%
         );
-        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
+        mask-image: linear-gradient(
+          to right,
+          rgba(0, 0, 0, 0) 0%,
+          rgba(0, 0, 0, 1) 10%,
+          rgba(0, 0, 0, 1) 90%,
+          rgba(0, 0, 0, 0) 100%
+        );
       }
       :host([scrollable][direction="column"].shadow-top) {
-        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
-        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+        -webkit-mask-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0),
+          rgba(0, 0, 0, 1) 10%
+        );
+        mask-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0),
+          rgba(0, 0, 0, 1) 10%
+        );
       }
       :host([scrollable][direction="column"].shadow-bottom) {
-        -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
-        mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%);
+        -webkit-mask-image: linear-gradient(
+          to top,
+          rgba(0, 0, 0, 0),
+          rgba(0, 0, 0, 1) 10%
+        );
+        mask-image: linear-gradient(
+          to top,
+          rgba(0, 0, 0, 0),
+          rgba(0, 0, 0, 1) 10%
+        );
       }
       :host([scrollable][direction="column"].shadow-top.shadow-bottom) {
-        -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
-        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
+        -webkit-mask-image: linear-gradient(
+          to top,
+          rgba(0, 0, 0, 0) 0%,
+          rgba(0, 0, 0, 1) 10%,
+          rgba(0, 0, 0, 1) 90%,
+          rgba(0, 0, 0, 0) 100%
+        );
+        mask-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0) 0%,
+          rgba(0, 0, 0, 1) 10%,
+          rgba(0, 0, 0, 1) 90%,
+          rgba(0, 0, 0, 0) 100%
+        );
       }
     `,
   ];
@@ -100,36 +157,47 @@ export class MenuItems extends LitElement {
    * Taille du composant, peut avoir un effet sur ses composants enfants
    * tels que les dividers / boutons,... qui n'auraient pas d'attribut size précisés.
    */
-  @property({type: String, reflect: true}) size: "" | "xs" | "sm" | "lg" = "";
+  @property({ type: String, reflect: true }) size?: Size;
   /**
    * Direction
    */
-  @property({type: String, reflect: true}) direction: "row" | "column" = "column";
-  @property({type: String}) gap = "var(--sc-menu-gap)";
+  @property({ type: String, reflect: true }) direction: "row" | "column" =
+    "column";
+  @property({ type: String }) gap = "var(--sc-menu-gap)";
 
-  @property({type: String, reflect: true}) align: "center" | "left" | "right" = "left";
+  @property({ type: String, reflect: true }) align:
+    | "center"
+    | "left"
+    | "right" = "left";
 
   /**
    * Ombre
    */
-  @property({type: String, reflect: true}) shadow: "" | "sm" | "md" | "lg" | "xl" | "none" | null = null;
-
-  @property({type: String}) moreShape: "square" | "circle" = "circle";
-  @property({type: Boolean}) scrollable = false;
+  @property({ type: String, reflect: true }) shadow:
+    | ""
+    | "sm"
+    | "md"
+    | "lg"
+    | "xl"
+    | "none"
+    | null = null;
+
+  @property({ type: String }) moreShape: "square" | "circle" = "circle";
+  @property({ type: Boolean }) scrollable = false;
 
   observer: ResizeObserver | null = null;
 
   /**
    * Propriété min-width du bouton
    */
-  @property({type: String}) minWidth = "0";
+  @property({ type: String }) minWidth = "0";
 
   @query("menu") menu!: HTMLElement;
 
-  @queryAssignedElements({selector: "sonic-menu-item"})
+  @queryAssignedElements({ selector: "sonic-menu-item" })
   menuChildren!: Array<HTMLElement>;
 
-  @queryAssignedElements({slot: "more", selector: "*"})
+  @queryAssignedElements({ slot: "more", selector: "*" })
   moreElements!: Array<HTMLElement>;
   @state() hasMoreElements = false;
 
@@ -248,7 +316,10 @@ export class MenuItems extends LitElement {
       }
 
       if (this.align) {
-        if (elt.getAttribute("shape") != "square" && elt.getAttribute("shape") != "circle") {
+        if (
+          elt.getAttribute("shape") != "square" &&
+          elt.getAttribute("shape") != "circle"
+        ) {
           elt.setAttribute("align", this.align);
         }
       }
@@ -279,11 +350,26 @@ export class MenuItems extends LitElement {
       marginLeft: isMenuRow ? "" : ".55em",
     };
 
-    return html`<menu part="menu" class="shadowable" style=${styleMap(menuStyles)}>
+    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} align="center">
-          <sonic-icon size="xl" name=${isMenuRow ? "more-vert" : "more-horiz"}></sonic-icon>
+      <sonic-pop
+        style=${styleMap(popStyles)}
+        class=${!this.hasMoreElements ? "hidden" : ""}
+      >
+        <sonic-menu-item
+          style=${styleMap(popBtnStyles)}
+          class="more-btn"
+          shape=${this.moreShape}
+          align="center"
+        >
+          <sonic-icon
+            size="xl"
+            name=${isMenuRow ? "more-vert" : "more-horiz"}
+          ></sonic-icon>
         </sonic-menu-item>
         <slot name="more" @slotchange=${this.checkIfMore} slot="content"></slot>
       </sonic-pop>

package/src/core/utils/api.ts

@@ -2,8 +2,8 @@
 /* eslint no-async-promise-executor: 0 */ // --> OFF
 import HTML from "@supersoniks/concorde/core/utils/HTML";
 import Objects from "@supersoniks/concorde/core/utils/Objects";
-import {CoreJSType} from "@supersoniks/concorde/core/_types/types";
-import {PublisherManager} from "./PublisherProxy";
+import { CoreJSType } from "@supersoniks/concorde/core/_types/types";
+import { PublisherManager } from "./PublisherProxy";
 
 export type APIConfiguration = {
   serviceURL: string | null;
@@ -19,7 +19,10 @@ export type APIConfiguration = {
   cache?: RequestCache;
 };
 export type CallState = "loading" | "done" | "error" | undefined;
-export type ResultTypeInterface = CoreJSType & {_sonic_http_response_?: Response; text?: string};
+export type ResultTypeInterface = CoreJSType & {
+  _sonic_http_response_?: Response;
+  text?: string;
+};
 export type APICall = {
   apiMethod: "get" | "send" | "submitFormData";
   path: string;
@@ -66,7 +69,9 @@ class API {
   }
   get token() {
     // si le token est marqué invalide, on utilise utilise la dernière version valide connue du token pour ce serviceURL
-    return API.invalidTokens.includes(this._token) ? API.tokens.get(this.serviceURL) : this._token;
+    return API.invalidTokens.includes(this._token)
+      ? API.tokens.get(this.serviceURL)
+      : this._token;
   }
   /**
    * Le endPoint pour obtenir le bearer token qui sera concaténé à l'url du service
@@ -135,7 +140,10 @@ class API {
     this.credentials = config.credentials;
     this.cache = config.cache || "default";
   }
-  async handleResult(fetchResult: Response, lastCall: APICall): Promise<ResultTypeInterface> {
+  async handleResult(
+    fetchResult: Response,
+    lastCall: APICall
+  ): Promise<ResultTypeInterface> {
     API.firstCallDoneFlags.set(this.serviceURL, "done");
     this.lastResult = fetchResult;
     const contentType = fetchResult.headers.get("content-type")?.toLowerCase();
@@ -144,7 +152,7 @@ class API {
     let result: ResultTypeInterface = {};
     if (!contentType || contentType.indexOf("text/") == 0) {
       const str = await fetchResult.text();
-      result = {text: str} as typeof result;
+      result = { text: str } as typeof result;
     } else {
       try {
         result = await fetchResult.json();
@@ -159,9 +167,17 @@ class API {
     if (httpCode === 498 && !API.failledTokenUpdates.has(this.serviceURL)) {
       this.handleInvalidToken(this.token);
       if (lastCall.apiMethod === "get") {
-        result = await this[lastCall.apiMethod](lastCall.path, lastCall.additionalHeaders);
+        result = await this[lastCall.apiMethod](
+          lastCall.path,
+          lastCall.additionalHeaders
+        );
       } else {
-        result = await this[lastCall.apiMethod](lastCall.path, lastCall.data, lastCall.method, lastCall.additionalHeaders);
+        result = await this[lastCall.apiMethod](
+          lastCall.path,
+          lastCall.data,
+          lastCall.method,
+          lastCall.additionalHeaders
+        );
       }
     }
 
@@ -182,7 +198,11 @@ class API {
     let headers = {};
     if (this.userName && this.password) {
       headers = {
-        Authorization: "Basic " + window.btoa(unescape(encodeURIComponent(this.userName + ":" + this.password))),
+        Authorization:
+          "Basic " +
+          window.btoa(
+            unescape(encodeURIComponent(this.userName + ":" + this.password))
+          ),
       };
     } else if (this.authToken) {
       headers = {
@@ -192,10 +212,15 @@ class API {
 
     const serviceURL = new URL(this.serviceURL as string);
     const serviceHost = serviceURL.protocol + "//" + serviceURL.host;
-    const result = await fetch(this.computeURL(this.tokenProvider as string, {serviceHost: serviceHost}), {
-      headers: headers,
-      credentials: this.credentials,
-    });
+    const result = await fetch(
+      this.computeURL(this.tokenProvider as string, {
+        serviceHost: serviceHost,
+      }),
+      {
+        headers: headers,
+        credentials: this.credentials,
+      }
+    );
 
     try {
       const json = await result.json();
@@ -221,7 +246,6 @@ class API {
   async localGet<T>(dataProvider: string, searchString: string) {
     const publisher = PublisherManager.get(dataProvider);
 
-    console.log(publisher);
     const searchParams = new URLSearchParams(searchString.split("?")[1] || "");
     const dataObject = publisher.get();
     let data = [];
@@ -248,18 +272,21 @@ class API {
       searchParams.delete("limit");
       searchParams.delete("offset");
     }
-    if (searchParams.size === 0) return data.slice(offset, offset + limit) as T & ResultTypeInterface;
+    if (searchParams.size === 0)
+      return data.slice(offset, offset + limit) as T & ResultTypeInterface;
     for (const [key, value] of searchParams.entries()) {
       const values = value.split(",").map((s) => s.trim());
       for (const v of values) {
         for (const item of data) {
           //si l'item est une valeur primitive on regarde si vaue correspond à item simplement
           if (typeof item !== "object") {
-            if (!isNaN(+value)) {
-              if (item == value) {
+            if (!isNaN(+item)) {
+              if (item === value) {
                 result.push(item);
               }
-            } else if (item.toString().includes(value)) {
+            } else if (
+              item.toString().toLowerCase().includes(value.toLowerCase())
+            ) {
               result.push(item);
             }
           } else {
@@ -269,12 +296,14 @@ class API {
             if (!record[key]) continue;
 
             //si la valeur est un nombre, on compare les valeurs directement
-            if (!isNaN(+v)) {
-              if (record[key] == v) {
+            if (!isNaN(+(record[key] as string))) {
+              if (record[key] === v) {
                 result.push(item);
               }
             } else {
-              if (record[key]?.toString().toLowerCase().includes(v.toLowerCase())) {
+              if (
+                record[key]?.toString().toLowerCase().includes(v.toLowerCase())
+              ) {
                 result.push(item);
               }
             }
@@ -295,7 +324,11 @@ class API {
         resolve(true);
       } else {
         const loop = () => {
-          if (![undefined, "loading"].includes(API.firstCallDoneFlags.get(this.serviceURL))) {
+          if (
+            ![undefined, "loading"].includes(
+              API.firstCallDoneFlags.get(this.serviceURL)
+            )
+          ) {
             resolve(true);
           } else {
             window.requestAnimationFrame(loop);
@@ -331,7 +364,11 @@ class API {
     if (!API.loadingGetPromises.has(mapKey)) {
       const promise = new Promise(async (resolve) => {
         try {
-          const result = await fetch(url, {headers: headers, credentials: this.credentials, cache: this.cache});
+          const result = await fetch(url, {
+            headers: headers,
+            credentials: this.credentials,
+            cache: this.cache,
+          });
           const handledResult = await this.handleResult(result, lastCall);
           resolve(handledResult);
         } catch (e) {
@@ -380,7 +417,12 @@ class API {
   /*
    * Envoie des données au endPoint passé en paramètre. par défaut en POST
    */
-  async send<T, SendType = CoreJSType>(path: string, data: SendType, method = "POST", additionalHeaders?: HeadersInit) {
+  async send<T, SendType = CoreJSType>(
+    path: string,
+    data: SendType,
+    method = "POST",
+    additionalHeaders?: HeadersInit
+  ) {
     const lastCall: APICall = {
       apiMethod: "send",
       path: path,
@@ -398,13 +440,19 @@ class API {
       method: method,
       body: JSON.stringify(data),
     });
-    return (await this.handleResult(result, lastCall)) as T & ResultTypeInterface;
+    return (await this.handleResult(result, lastCall)) as T &
+      ResultTypeInterface;
   }
 
   /**
    * Agit comme une soumission de formulaire, mais attends un json en réponse
    */
-  async submitFormData<T, SendType = CoreJSType>(path: string, data: SendType, method = "POST", additionalHeaders?: HeadersInit) {
+  async submitFormData<T, SendType = CoreJSType>(
+    path: string,
+    data: SendType,
+    method = "POST",
+    additionalHeaders?: HeadersInit
+  ) {
     const lastCall: APICall = {
       apiMethod: "submitFormData",
       path: path,
@@ -415,7 +463,7 @@ class API {
     const headers = await this.createHeaders(additionalHeaders);
     headers["Accept"] = "application/json";
     const formData = new FormData();
-    const dynamicData = data as unknown as {[property: string]: string};
+    const dynamicData = data as unknown as { [property: string]: string };
     for (const z in dynamicData) formData.set(z, dynamicData[z]);
     const result = await fetch(this.computeURL(path), {
       headers: headers,
@@ -423,33 +471,50 @@ class API {
       method: method,
       body: formData,
     });
-    return (await this.handleResult(result, lastCall)) as T & ResultTypeInterface;
+    return (await this.handleResult(result, lastCall)) as T &
+      ResultTypeInterface;
   }
 
   /**
    * Appel send en utilisant le méthode PUT
    */
-  async put<T, SendType = CoreJSType>(path: string, data: SendType, additionalHeaders?: HeadersInit) {
+  async put<T, SendType = CoreJSType>(
+    path: string,
+    data: SendType,
+    additionalHeaders?: HeadersInit
+  ) {
     return this.send<T, SendType>(path, data, "PUT", additionalHeaders);
   }
 
   /**
    * Appel send en utilisant le méthode POST
    */
-  async post<T, SendType = CoreJSType>(path: string, data: SendType, additionalHeaders?: HeadersInit) {
+  async post<T, SendType = CoreJSType>(
+    path: string,
+    data: SendType,
+    additionalHeaders?: HeadersInit
+  ) {
     return this.send<T, SendType>(path, data, "POST", additionalHeaders);
   }
   /**
    * Appel send en utilisant le méthode PATCH
    */
-  async patch<T, SendType = CoreJSType>(path: string, data: SendType, additionalHeaders?: HeadersInit) {
+  async patch<T, SendType = CoreJSType>(
+    path: string,
+    data: SendType,
+    additionalHeaders?: HeadersInit
+  ) {
     return this.send<T, SendType>(path, data, "PATCH", additionalHeaders);
   }
 
   /**
    * Appel send en utilisant le méthode delete
    */
-  async delete<T, SendType = CoreJSType>(path: string, data: SendType, additionalHeaders?: HeadersInit) {
+  async delete<T, SendType = CoreJSType>(
+    path: string,
+    data: SendType,
+    additionalHeaders?: HeadersInit
+  ) {
     return this.send<T, SendType>(path, data, "delete", additionalHeaders);
   }
 }