@supersoniks/concorde 3.1.3 → 3.1.5

package/package.json

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

package/src/core/components/ui/form/css/form-control.ts

@@ -1,4 +1,4 @@
-import {css} from "lit";
+import { css } from "lit";
 
 export const passwordToggle = css`
   .password-toggle {
@@ -71,11 +71,13 @@ export const formControl = css`
 
     line-height: 1.1;
     color: var(--sc-input-c);
-    border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr) var(--sc-item-rounded-br) var(--sc-item-rounded-bl);
+    border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr)
+      var(--sc-item-rounded-br) var(--sc-item-rounded-bl);
 
     font-family: var(--sc-input-ff);
     background-color: var(--sc-input-background);
-    border: var(--sc-input-b-width) solid var(--sc-input-b-color, var(--sc-base-300, #aaa));
+    border: var(--sc-input-b-width) solid
+      var(--sc-input-b-color, var(--sc-base-300, #aaa));
     width: 100%;
     font-size: var(--sc-input-fs);
 
@@ -84,9 +86,7 @@ export const formControl = css`
     padding-left: var(--sc-input-px);
     padding-right: var(--sc-input-px);
 
-    transition:
-      border-color 0.15s ease-in-out,
-      color 0.15s ease-in-out,
+    transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out,
       box-shadow 0.15s ease-in-out;
     min-height: var(--sc-input-height);
   }
@@ -303,7 +303,8 @@ export const formControl = css`
   }
   input[type="color"]::-webkit-color-swatch {
     border: none;
-    border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr) var(--sc-item-rounded-br) var(--sc-item-rounded-bl);
+    border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr)
+      var(--sc-item-rounded-br) var(--sc-item-rounded-bl);
   }
 
   /*Input Image*/
@@ -380,4 +381,10 @@ export const formControl = css`
     --sc-input-addon-bg: var(--sc-info);
     --sc-input-addon-color: var(--sc-info-content);
   }
+  :host([status="primary"]) {
+    --sc-input-b-color: var(--sc-primary);
+    --sc-input-c: var(--sc-primary);
+    --sc-input-addon-bg: var(--sc-primary);
+    --sc-input-addon-color: var(--sc-primary-content);
+  }
 `;

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

@@ -106,6 +106,7 @@ export class Select extends FormElement(Subscriber(LitElement)) {
     | "success"
     | "error"
     | "warning"
+    | "primary"
     | "info" = "default";
 
   private _options: Array<SelectOption> = [];

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

@@ -1,6 +1,7 @@
-import {html, LitElement, css} from "lit";
-import {customElement, queryAssignedElements} from "lit/decorators.js";
-import {Modal} from "@supersoniks/concorde/core/components/ui/modal/modal";
+import { html, LitElement, css } from "lit";
+import { customElement, queryAssignedElements } from "lit/decorators.js";
+import { Modal } from "@supersoniks/concorde/core/components/ui/modal/modal";
+import { HTML } from "@supersoniks/concorde/utils";
 const tagName = "sonic-modal-actions";
 @customElement(tagName)
 export class ModalActions extends LitElement {
@@ -15,14 +16,17 @@ export class ModalActions extends LitElement {
     `,
   ];
 
-  @queryAssignedElements({selector: "sonic-button"})
+  @queryAssignedElements({ selector: "sonic-button" })
   buttons!: Array<HTMLElement>;
 
   firstUpdated(changedProperties: Map<string | number | symbol, unknown>) {
     this.buttons?.forEach((btn) => {
       btn.addEventListener("click", () => {
         if (btn.getAttribute("hideModal") != "false") {
-          const parentModal = this.closest("sonic-modal") as Modal;
+          const parentModal = HTML.getClosestElement(
+            this,
+            "sonic-modal"
+          ) as Modal;
           parentModal?.hide();
         }
       });

package/src/core/components/ui/toast/toast-item.ts

@@ -1,9 +1,10 @@
-import {html, LitElement, css, nothing} from "lit";
-import {customElement, property, state} from "lit/decorators.js";
-import {unsafeHTML} from "lit/directives/unsafe-html.js";
+import { html, LitElement, css, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import "@supersoniks/concorde/core/components/ui/toast/types";
-import {ToastStatus} from "@supersoniks/concorde/core/components/ui/toast/types";
-import {customScroll} from "@supersoniks/concorde/core/components/ui/_css/scroll";
+import { ToastStatus } from "@supersoniks/concorde/core/components/ui/toast/types";
+import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
+import { HTML } from "@supersoniks/concorde/utils";
 
 const icon: Record<string, string> = {
   warning: "warning-circled-outline",
@@ -86,7 +87,8 @@ export class SonicToastItem extends LitElement {
       }
 
       ::slotted(:is(p, ul, ol, hr, h1, h2, h3, h4, h5, h6):last-child),
-      .sonic-toast-text > :is(p, ul, ol, hr, h1, h2, h3, h4, h5, h6):last-child {
+      .sonic-toast-text
+        > :is(p, ul, ol, hr, h1, h2, h3, h4, h5, h6):last-child {
         margin-bottom: 0 !important;
       }
 
@@ -197,14 +199,14 @@ export class SonicToastItem extends LitElement {
     `,
   ];
 
-  @property({type: String}) title = "";
-  @property({type: String}) id = "";
-  @property({type: String}) text = "";
-  @property({type: String}) status: ToastStatus = "";
-  @property({type: Boolean}) ghost = false;
-  @property({type: Boolean}) preserve = false;
-  @property({type: Boolean}) dismissForever = false;
-  @property({type: String}) maxHeight = "10rem";
+  @property({ type: String }) title = "";
+  @property({ type: String }) id = "";
+  @property({ type: String }) text = "";
+  @property({ type: String }) status: ToastStatus = "";
+  @property({ type: Boolean }) ghost = false;
+  @property({ type: Boolean }) preserve = false;
+  @property({ type: Boolean }) dismissForever = false;
+  @property({ type: String }) maxHeight = "10rem";
   @state() visible = true;
 
   // @queryAssignedElements({flatten: true, slot: main"})
@@ -224,15 +226,32 @@ export class SonicToastItem extends LitElement {
       return nothing;
     }
 
-    return html`<div class="sonic-toast ${this.status} ${this.ghost ? "ghost" : ""}">
-      <button aria-label="Close" class="sonic-toast-close" @click=${() => this.hide()}>
+    return html`<div
+      class="sonic-toast ${this.status} ${this.ghost ? "ghost" : ""}"
+    >
+      <button
+        aria-label="Close"
+        class="sonic-toast-close"
+        @click=${() => this.hide()}
+      >
         <sonic-icon name="cancel" size="lg"></sonic-icon>
       </button>
-      <div class="sonic-toast-content custom-scroll" style="max-height: ${this.maxHeight} ;">
-        ${this.status && html`<sonic-icon name=${icon[this.status]} class="sonic-toast-icon" size="2xl"></sonic-icon>`}
+      <div
+        class="sonic-toast-content custom-scroll"
+        style="max-height: ${this.maxHeight} ;"
+      >
+        ${this.status &&
+        html`<sonic-icon
+          name=${icon[this.status]}
+          class="sonic-toast-icon"
+          size="2xl"
+        ></sonic-icon>`}
 
         <div class="sonic-toast-text">
-          ${this.title ? html`<div class="sonic-toast-title">${this.title}</div>` : ""} ${this.text ? unsafeHTML(this.text) : ""}
+          ${this.title
+            ? html`<div class="sonic-toast-title">${this.title}</div>`
+            : ""}
+          ${this.text ? unsafeHTML(this.text) : ""}
           <slot></slot>
         </div>
 
@@ -242,7 +261,7 @@ export class SonicToastItem extends LitElement {
   }
 
   hide() {
-    if (!this.closest("sonic-toast")) {
+    if (!HTML.getClosestElement(this, "sonic-toast")) {
       this.visible = false;
     }
 
@@ -251,9 +270,12 @@ export class SonicToastItem extends LitElement {
       const dismissed = localStorage.getItem("sonic-toast-dismissed") || "{}";
       const dismissedObj = JSON.parse(dismissed);
       dismissedObj[this.id] = true;
-      localStorage.setItem("sonic-toast-dismissed", JSON.stringify(dismissedObj));
+      localStorage.setItem(
+        "sonic-toast-dismissed",
+        JSON.stringify(dismissedObj)
+      );
     }
-    this.dispatchEvent(new CustomEvent("hide", {bubbles: true}));
+    this.dispatchEvent(new CustomEvent("hide", { bubbles: true }));
   }
 
   show() {

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