@supersoniks/concorde 3.1.56 → 3.1.58

package/docs/svg/regular/plane.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M576 256C576 305 502.1 336 464.2 336H382.2L282.4 496C276.4 506 266.4 512 254.4 512H189.5C179.5 512 169.5 508 163.5 500C157.6 492 155.6 480.1 158.6 471L201.5 336H152.5L113.6 388C107.6 396 98.61 400 88.62 400H31.7C22.72 400 12.73 396 6.74 388C.7485 380-1.248 370 1.747 360L31.7 256L.7488 152C-1.248 143 .7488 133 6.74 125C12.73 117 22.72 112 31.7 112H88.62C98.61 112 107.6 117 113.6 125L152.5 176H201.5L158.6 41C155.6 32 157.6 21 163.5 13C169.5 5 179.5 0 189.5 0H254.4C265.4 0 277.4 7 281.4 16L381.2 176H463.2C502.1 176 576 208 576 256H576zM527.1 256C525.1 246 489.1 224 463.2 224H355.3L245.4 48H211.5L266.4 224H128.6L80.63 160H53.67L81.63 256L53.67 352H80.63L128.6 288H266.4L211.5 464H245.4L355.3 288H463.2C490.1 288 526.1 267 527.1 256V256z"/></svg>

package/docs/svg/solid/plane.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z"/></svg>

package/package.json

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

package/php/get-challenge.php

@@ -0,0 +1,34 @@
+<?php
+/* *
+ * Call get-challenge on auto-hosted latcha service at  https://altcha.supersoniks.org
+ * */
+
+// Autoriser toutes les origines
+header("Access-Control-Allow-Origin: *");
+
+// Autoriser les méthodes HTTP spécifiques
+header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
+
+// Autoriser certains en-têtes spécifiques
+header("Access-Control-Allow-Headers: Content-Type, Authorization");
+
+// Si la méthode est OPTIONS, terminer la requête ici
+if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
+    http_response_code(200);
+    exit();
+}
+
+function getChallenge($key){
+    $maxNumber=20000;
+    $queryString = $params = [
+        'key' => $key,
+        'maxNumber' => $maxNumber
+    ];
+    // Générer la chaîne de requête
+    $queryString = http_build_query($params);
+    $url = "https://altcha.supersoniks.org/get-challenge?key=".$queryString;
+    $response = file_get_contents($url);
+    return $response;
+}
+
+echo getChallenge($_GET['key']);

package/php/some-service.php

@@ -0,0 +1,42 @@
+<?php
+/* *
+ * Call verify-solution on auto-hosted latcha service at  https://altcha.supersoniks.org
+ * */ 
+
+
+// Autoriser toutes les origines
+header("Access-Control-Allow-Origin: *");
+
+// Autoriser les méthodes HTTP spécifiques
+header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
+
+// Autoriser certains en-têtes spécifiques
+header("Access-Control-Allow-Headers: Content-Type, Authorization, x-altcha-spam-filter");
+
+// Si la méthode est OPTIONS, terminer la requête ici
+if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
+    http_response_code(200);
+    exit();
+}
+
+function verifySolution($key, $solution){
+    $queryString = $params = [
+        'key' => $key,
+        'altcha' => $solution
+    ];
+    // Générer la chaîne de requête
+    $queryString = http_build_query($params);
+    $url = "https://altcha.supersoniks.org/verify-solution?".$queryString;
+    $response = file_get_contents($url);
+    return $response;
+}
+
+/**
+ * Get json posted data
+ */
+
+// Get the posted data
+
+$data = json_decode(file_get_contents("php://input"));
+
+echo verifySolution($data->captchakey, $data->captchatoken);

package/src/core/components/functional/list/list.ts

@@ -1,4 +1,4 @@
-import { html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import Fetcher from "@supersoniks/concorde/core/mixins/Fetcher";
@@ -70,6 +70,7 @@ export class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
     if (this.isFetchEnabled) this.isLoading = true;
     super.connectedCallback();
   }
+
   disconnectedCallback(): void {
     super.disconnectedCallback();
   }
@@ -91,7 +92,7 @@ export class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
   renderLoadingState():
     | DirectiveResult<typeof TemplateContentDirective>
     | TemplateResult {
-    return html`${this.renderSkeleton()} ${this.renderLoader()}`;
+    return html`${this.renderSkeleton()} ${this.renderLoader()} `;
   }
   renderNoResultState() {
     return html` <div
@@ -136,8 +137,77 @@ export class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
     if (response) props._sonic_http_response_ = response;
     return props;
   }
+  protected updated(_changedProperties: PropertyValues): void {
+    window.requestAnimationFrame(() => {
+      if (!this.isLoading) {
+        this.style.setProperty("--list-loader-height-display", "none");
+        return;
+      }
+
+      this.style.setProperty("--list-loader-height-display", "block");
+      this.loadingSize = this.getDisplayContentsSize(this);
+    });
+
+    super.updated(_changedProperties);
+  }
+
+  getAllRenderableElements(root: any) {
+    let elements: any[] = [];
+
+    function collectElements(node: any) {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        // Vérifier si l'élément a une boîte de rendu
+        const rect = node.getBoundingClientRect();
+        if (rect.width > 0 || rect.height > 0) {
+          elements.push(node);
+        }
+
+        // Parcourir les enfants
+        node.childNodes.forEach(collectElements);
 
+        // Vérifier le Shadow DOM
+        if (node.shadowRoot) {
+          node.shadowRoot.childNodes.forEach(collectElements);
+        }
+      }
+    }
+
+    collectElements(root);
+    return elements;
+  }
+
+  getDisplayContentsSize(element: any) {
+    const elements = this.getAllRenderableElements(element);
+
+    if (elements.length === 0) return { width: 0, height: 0 };
+
+    const rects = elements.map((el) => el.getBoundingClientRect());
+
+    const minX = Math.min(...rects.map((r) => r.left));
+    const maxX = Math.max(...rects.map((r) => r.right));
+    const minY = Math.min(...rects.map((r) => r.top));
+    const maxY = Math.max(...rects.map((r) => r.bottom));
+
+    return { width: maxX - minX, height: maxY - minY };
+  }
+
+  /**
+   * loadingsize is computed after rendering a loading / doesnt require one but will be used on other renderings
+   */
+  loadingSize = { width: 0, height: 0 };
   render() {
+    return html`
+      ${this.renderContent()}
+      <div
+        style="grid-column: 1 / -1;min-height:${this.isLoading
+          ? 0
+          : this.loadingSize
+              .height}px; width:0;float:left;display: var(--list-loader-height-display);"
+      ></div>
+    `;
+  }
+
+  renderContent() {
     /**
      * Loading
      */

package/src/core/components/functional/queue/queue.ts

@@ -171,7 +171,6 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
     clearTimeout(this.filterTimeoutId);
     this.filterTimeoutId = setTimeout(
       async () => {
-        this.storeScrollPosition();
         const count = this.resultCount;
         this.props = null;
         //On garde le décompte au cas ou il n'y aurait pas rechargement
@@ -186,26 +185,35 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
   };
 
   storeScrollPosition() {
+    if (!this.isSafari()) {
+      return;
+    }
     this.storedScrollX = window.scrollX;
     this.storedScrollY = window.scrollY;
   }
 
+  isSafari() {
+    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+  }
+
   protected updated(_changedProperties: PropertyValues): void {
-    if (
-      Math.abs(this.storedScrollX - window.scrollX) > 10 ||
-      Math.abs(this.storedScrollY - window.scrollY) > 10
-    ) {
-      window.scrollTo(this.storedScrollX, this.storedScrollY);
-    }
-    //Hack pour éviter que le scroll ne retourne en haut si safari
-    window.requestAnimationFrame(() => {
+    if (this.isSafari()) {
       if (
         Math.abs(this.storedScrollX - window.scrollX) > 10 ||
         Math.abs(this.storedScrollY - window.scrollY) > 10
       ) {
         window.scrollTo(this.storedScrollX, this.storedScrollY);
       }
-    });
+      //Hack pour éviter que le scroll ne retourne en haut si safari
+      window.requestAnimationFrame(() => {
+        if (
+          Math.abs(this.storedScrollX - window.scrollX) > 10 ||
+          Math.abs(this.storedScrollY - window.scrollY) > 10
+        ) {
+          window.scrollTo(this.storedScrollX, this.storedScrollY);
+        }
+      });
+    }
 
     super.updated(_changedProperties);
   }
@@ -318,10 +326,10 @@ export default class Queue extends Subscriber(LitElement, {} as QueueProps) {
   storedScrollX = 0;
 
   render() {
+    this.storeScrollPosition();
     if (!Array.isArray(this.props)) {
       return nothing;
     }
-    this.storeScrollPosition();
 
     let lazyload = !this.noLazyload;
     if (this.props.length == 1) {

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

@@ -287,6 +287,14 @@ export const formControl = css`
   :host([touched][required]) :not(:focus):valid + .select-chevron {
     --sc-input-c: var(--sc-success, var(--sc-base-content, #000));
   }
+  /*active*/
+  :host([active]) {
+    --sc-input-b-color: var(--sc-primary, var(--sc-base-content, #000));
+    --sc-input-c: var(--sc-primary, var(--sc-base-content, #000));
+  }
+  :host([active]) .select-chevron {
+    --sc-input-c: var(--sc-primary, var(--sc-base-content, #000));
+  }
 
   /*Input COLOR*/
   :host([type="color"]) .form-element {

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

@@ -78,6 +78,9 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
   @property({ type: Boolean }) disableInlineContentFocus = false;
   @property({ type: Boolean }) showPasswordToggle = false;
 
+  @property({ type: Boolean }) autoActive = false;
+  @property({ type: Boolean, reflect: true }) active = false;
+
   @queryAssignedNodes({ slot: "label", flatten: true })
   slotLabelNodes!: Array<Node>;
 
@@ -133,6 +136,10 @@ export class Input extends FormInput(FormElement(Subscriber(LitElement))) {
 
   willUpdate(changedProperties: PropertyValues) {
     this.hasSlotOrProps();
+    if (this.autoActive && changedProperties.has("value")) {
+      this.active = !!this.value;
+    }
+
     super.willUpdate(changedProperties);
   }
 

package/src/core/mixins/Fetcher.ts

@@ -39,20 +39,19 @@ const dispatchFetchError = (apiResponse: Response) => {
   }
 };
 
-const fetchComponents = new Set<{_fetchData:()=>void}>();
+const fetchComponents = new Set<{ _fetchData: () => void }>();
 let languageChangeRequestId = 0;
-detecHTMLLanguageChange(async ()=>{
+detecHTMLLanguageChange(async () => {
   //relaunch 4 fetchs then wait the result before launching the next 4 fetchs
   languageChangeRequestId++;
   const currentRequestId = languageChangeRequestId;
   const fetchers = Array.from(fetchComponents);
-  while(fetchers.length>0){
-    if(currentRequestId!=languageChangeRequestId) return;
-    const fourFetchers = fetchers.splice(0,4);
-    await Promise.all(fourFetchers.map((fetcher)=>fetcher._fetchData()));
+  while (fetchers.length > 0) {
+    if (currentRequestId != languageChangeRequestId) return;
+    const fourFetchers = fetchers.splice(0, 4);
+    await Promise.all(fourFetchers.map((fetcher) => fetcher._fetchData()));
   }
-} 
-);
+});
 
 const Fetcher = <
   T extends Constructor<SubscriberInterface<PropsType>>,
@@ -63,7 +62,6 @@ const Fetcher = <
 ) => {
   propsType;
   class FetcherElement extends superClass {
-
     api: API | null = null;
     /**
      * Après le chargement des données on traverse l'objet reçu en fonctione de la cible exprimées dans cette propriété avec la dot syntaxe.
@@ -259,21 +257,26 @@ const Fetcher = <
     /**
      * Première update, le comportement de lazyload est géré ici a l'aide d'un intersection observer.
      */
-    lazyLoadSpan?: HTMLSpanElement;
+    lazyLoadPlaceHolder?: HTMLSpanElement;
     handleLazyLoad() {
       if (!this.lazyLoad) {
         return;
       }
-      const rect = this.getBoundingClientRect();
-      if (
-        rect.x < window.innerWidth &&
-        rect.right > 0 &&
-        rect.y < window.innerHeight &&
-        rect.right > 0
-      ) {
-        this._fetchData();
-        return;
-      }
+      /**
+       * Should not be required
+       * Todo :  remove after success
+       * creates forced reflow
+       */
+      // const rect = this.getBoundingClientRect();
+      // if (
+      //   rect.x < window.innerWidth &&
+      //   rect.right > 0 &&
+      //   rect.y < window.innerHeight &&
+      //   rect.right > 0
+      // ) {
+      //   this._fetchData();
+      //   return;
+      // }
 
       const boundsRatio = parseFloat(
         this.getAttribute("lazyBoundsRatio") || "1"
@@ -302,14 +305,17 @@ const Fetcher = <
           (e) => e.nodeName.toLowerCase() != "style"
         )[0] as HTMLElement;
       if (!elt || elt.nodeName.toLocaleLowerCase() == "template") {
-        elt = document.createElement("span");
+        elt = document.createElement("div");
         const style = elt.style;
         /**
          * !!! Pas de position absolute ici si on veut que le composant soit au bon endroit dans la page pour l'intersection observer
          * En effest sinon il vpeut remonter en congugaison avec le style display="contents"
          */
         style.pointerEvents = "none";
-        this.lazyLoadSpan = elt;
+        style.width = "1px";
+        style.height = "1px";
+        this.lazyLoadPlaceHolder = elt;
+
         this.appendChild(elt);
       }
       if (elt) {
@@ -322,8 +328,8 @@ const Fetcher = <
       for (const e of entries) {
         if (e.isIntersecting && this.isFirstLoad) {
           this._fetchData();
-          this.lazyLoadSpan?.remove();
-          this.lazyLoadSpan = undefined;
+          this.lazyLoadPlaceHolder?.remove();
+          this.lazyLoadPlaceHolder = undefined;
           this.iObserver?.disconnect();
           break;
         }