@supersoniks/concorde 1.1.25 → 1.1.26

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

@@ -8,31 +8,42 @@ import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
+import { typesColor } from "@supersoniks/concorde/core/components/ui/_css/types";
 const tagName = "sonic-th";
 let TableTh = class TableTh extends LitElement {
     render() {
         const styles = {
             textAlign: this.align,
+            minWidth: this.minWidth,
         };
-        return html `<th part="th" 
-    style=${styleMap(styles)}
-    colspan=${ifDefined(this.colSpan)}
-    rowspan=${ifDefined(this.rowSpan)}
-    ><slot></slot></th> `;
+        return html `<th
+      part="th"
+      style=${styleMap(styles)}
+      colspan=${ifDefined(this.colSpan)}
+      rowspan=${ifDefined(this.rowSpan)}
+    >
+      <slot></slot>
+    </th> `;
     }
 };
 TableTh.styles = [
+    typesColor,
     css `
       :host {
         display: contents;
+        background:var(--sc-table-bg);
+        position:sticky;
+        top:0;
+        z-index:20;
       }
 
       th {
-        all:inherit;
-        display:table-cell;
+        all: inherit;
+        display: table-cell;
+        border-bottom: calc(var(--sc-border-width) * 1.5) solid var(--sc-table-border-color);
         text-transform: var(--sc-table-th-tt);
-        font-weight:var(--sc-table-th-fw);
-        font-size:var(--sc-table-th-fs);
+        font-weight: var(--sc-table-th-fw);
+        font-size: var(--sc-table-th-fs);
         padding: var(--sc-table-th-py) var(--sc-table-th-px);
       }
     `,
@@ -46,6 +57,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], TableTh.prototype, "align", void 0);
+__decorate([
+    property({ type: String })
+], TableTh.prototype, "minWidth", void 0);
 TableTh = __decorate([
     customElement(tagName)
 ], TableTh);

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

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement } from "lit/decorators.js";
+import { typesColor } from "@supersoniks/concorde/core/components/ui/_css/types";
 const tagName = "sonic-tr";
 let TableTr = class TableTr extends LitElement {
     render() {
@@ -13,6 +14,7 @@ let TableTr = class TableTr extends LitElement {
     }
 };
 TableTr.styles = [
+    typesColor,
     css `
       :host {
         display: table-row;

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

@@ -11,6 +11,8 @@ export declare class Table extends LitElement {
     size: "xs" | "sm" | "md" | "lg" | "xl";
     striped: boolean;
     sticky: boolean;
+    bordered: boolean;
     hover: boolean;
+    maxHeight?: string;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -6,6 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
 import "./table-tr";
 import "./table-th";
 import "./table-td";
@@ -20,11 +22,16 @@ let Table = class Table extends LitElement {
         this.size = "md";
         this.striped = false;
         this.sticky = false;
+        this.bordered = false;
         this.hover = false;
     }
     render() {
+        const containerStyles = {
+            maxHeight: this.maxHeight,
+        };
         return html `
-      <div class="table-container">
+      
+      <div class="table-container custom-scroll" style=${styleMap(containerStyles)} >
         <div class="table" ?striped=${this.striped} ?hover=${this.hover} ?sticky=${this.sticky}>
           <slot></slot>
         </div>
@@ -33,18 +40,23 @@ let Table = class Table extends LitElement {
     }
 };
 Table.styles = [
+    customScroll,
     css `
       :host {
         --sc-table-fw: var(--sc-font-weight-base);
         --sc-table-fst: var(--sc-font-style-base);
         --sc-table-fs: 1rem;
+        --sc-table-border-color: var(--sc-base-200);
+        --sc-table-caption-color: var(--sc-base-400);
+        --sc-table-bg: var(--sc-base);
         --sc-table-th-fs: .85em;
         --sc-table-th-fw: bold;
         --sc-table-th-tt: uppercase;
         --sc-table-th-px: var(--sc-table-td-px);
-        --sc-table-th-py: var(--sc-table-td-py);
-        --sc-table-td-px: .5rem;
-        --sc-table-td-py: .3rem;
+        --sc-table-th-py: calc(1.8 * var(--sc-table-td-py) );
+        --sc-table-td-px: .5em;
+        --sc-table-td-py: .5em;
+
         display:block;
       }
 
@@ -57,6 +69,7 @@ Table.styles = [
         width: 100%;
         font-size: var(--sc-table-fs);
         display: table;
+        box-sizing:border-box;
       }
 
       /*SIZES*/
@@ -75,6 +88,9 @@ Table.styles = [
       :host([size="xl"]) {
         --sc-table-fs: 1.5rem;
       }
+      :host([bordered]) .table-container {
+        border:var(--sc-border-width) solid var(--sc-table-border-color) !important;
+      }
 
     `,
 ];
@@ -87,9 +103,15 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Table.prototype, "sticky", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Table.prototype, "bordered", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Table.prototype, "hover", void 0);
+__decorate([
+    property({ type: String })
+], Table.prototype, "maxHeight", void 0);
 Table = __decorate([
     customElement(tagName)
 ], Table);

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

@@ -67,7 +67,7 @@ let Tabs = class Tabs extends LitElement {
           <sonic-icon class="my-auto" size="xl" name="more-vert"></sonic-icon>
         </sonic-menu-item>
         <sonic-menu slot="content"></sonic-menu>
-      <sonic-pop>
+  </sonic-pop>
     </menu>`;
     }
 };

package/core/components/ui/theme/theme-collection/core-variables.js

@@ -38,7 +38,7 @@ export const coreVariables = css `
     --sc-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 
     /* formulaires*/
-    --sc-border-width: max(1px, 0.1rem);
+    --sc-border-width: max(1px, 0.085rem);
     --sc-form-border-width: var(--sc-border-width);
     --sc-input-bg: var(--sc-base-100);
     --sc-input-border-color: var(--sc-input-bg);
@@ -47,5 +47,8 @@ export const coreVariables = css `
     /*Couleurs -- textes sur images*/
     --sc-contrast-content: #fff;
     --sc-contrast: #0f172a;
+
+    /*Scrollbar*/
+    --sc-scrollbar-bg : var(--sc-base-400);
   }
 `;

package/core/components/ui/toast/toast-item.js

@@ -8,6 +8,7 @@ import { html, LitElement, css, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import "./types";
+import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
 const icon = {
     warning: "warning-circled-outline",
     success: "check-circled-outline",
@@ -69,6 +70,7 @@ let SonicToastItem = class SonicToastItem extends LitElement {
     }
 };
 SonicToastItem.styles = [
+    customScroll,
     css `
       * {
         box-sizing: border-box;
@@ -230,19 +232,7 @@ SonicToastItem.styles = [
         pointer-events: none;
       }
 
-      /*TODO :: mutualiser le scroll */
-      .custom-scroll::-webkit-scrollbar {
-        width: 0.8rem;
-        border: solid 3px transparent;
-        border-radius: var(--sc-rounded);
-        background:transparent;
-      }
-
-      .custom-scroll::-webkit-scrollbar-thumb {
-        box-shadow: inset 0 0 2rem 2rem var(--sc-base-500);
-        border-radius: var(--sc-rounded);
-        border: solid 3px transparent;
-      }
+    
 
     `,
 ];

package/core/mixins/Fetcher.d.ts

@@ -60,7 +60,9 @@ declare const Fetcher: <T extends Constructor<SubscriberInterface>>(superClass:
         defferedDebug: boolean | null;
         dispatchEvent(event: Event): void;
         setAttribute(name: string, value: string): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void; /**
+         * IObserver est l'intersection observer qui permet de charger les données au scroll si l'attribut lazyload est renseigné
+         */
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
         removeAttribute(name: string): void;
         initPublisher(): void;

package/core/mixins/Fetcher.js

@@ -17,6 +17,7 @@ import { Loader } from "../components/ui/loader/loader";
 import { SonicToast } from "../components/ui/toast/toast";
 import API from "@supersoniks/concorde/core/utils/api";
 import "../components/ui/button/button";
+import { PublisherManager } from "@supersoniks/concorde/utils";
 import Objects from "../utils/Objects";
 import { property } from "lit/decorators.js";
 const Fetcher = (superClass) => {
@@ -83,7 +84,8 @@ const Fetcher = (superClass) => {
                 let hasLoader = this.isDefaultLoaderEnabled && !this.hasAttribute("noLoader");
                 if (hasLoader)
                     Loader.show();
-                data = yield this.api.get(this.endPoint || this.dataProvider || "");
+                let headerData = PublisherManager.getInstance().get(this.getAncestorAttributeValue("headersDataProvider")).get();
+                data = yield this.api.get(this.endPoint || this.dataProvider || "", headerData);
                 if (!data) {
                     SonicToast.add({ text: "Network Error", status: "error" });
                     this.isLoading = false;

package/core/mixins/FormElement.js

@@ -20,6 +20,7 @@ const Form = (superClass) => {
     class FormElement extends superClass {
         constructor(...args) {
             super();
+            this.touched = false;
             this.error = null;
             this.autofocus = null;
             this.disabled = null;
@@ -218,6 +219,9 @@ const Form = (superClass) => {
             }
         }
     }
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], FormElement.prototype, "touched", void 0);
     __decorate([
         property({ type: Boolean })
     ], FormElement.prototype, "error", void 0);

package/core/utils/api.d.ts

@@ -39,12 +39,12 @@ declare class API {
      * Basic auth
      */
     auth(): Promise<void>;
-    get(path: String): Promise<any>;
+    get(path: String, additionalHeaders?: HeadersInit): Promise<any>;
     /**
      * Création du header, avec authentification si besoin
      * ajout du language via le header accept-language qui contient le langue du navigateur
      */
-    createHeaders(): Promise<Record<string, string>>;
+    createHeaders(additionalHeaders?: HeadersInit): Promise<Record<string, string>>;
     /**
      * Concatène le serviceURL et le endpoint donné en paramètre
      */

package/core/utils/api.js

@@ -43,9 +43,9 @@ class API {
             catch (e) { }
         });
     }
-    get(path) {
+    get(path, additionalHeaders) {
         return __awaiter(this, void 0, void 0, function* () {
-            let headers = yield this.createHeaders();
+            let headers = yield this.createHeaders(additionalHeaders);
             const url = this.computeURL(path);
             if (!API.loadingGetPromises.has(url)) {
                 let promise = new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
@@ -69,7 +69,7 @@ class API {
      * Création du header, avec authentification si besoin
      * ajout du language via le header accept-language qui contient le langue du navigateur
      */
-    createHeaders() {
+    createHeaders(additionalHeaders) {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.auth();
             let headers = {};
@@ -77,6 +77,9 @@ class API {
                 headers.Authorization = "Bearer " + this.token;
             headers.credentials = "include";
             headers["Accept-Language"] = HTML.getLanguage();
+            if (additionalHeaders) {
+                Object.assign(headers, additionalHeaders);
+            }
             return headers;
         });
     }
@@ -92,12 +95,9 @@ class API {
     send(path, data, method = "POST", additionalHeaders) {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.auth();
-            let headers = yield this.createHeaders();
+            let headers = yield this.createHeaders(additionalHeaders);
             headers["Accept"] = "application/json";
             headers["Content-Type"] = "application/json";
-            if (additionalHeaders) {
-                Object.assign(headers, additionalHeaders);
-            }
             let result = yield fetch(this.computeURL(path), {
                 headers: headers,
                 method: method,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "1.1.25",
+  "version": "1.1.26",
   "customElements": "custom-elements.json",
   "license": "MIT",
   "publishConfig": {
@@ -54,6 +54,10 @@
     "./functional/submit": "./core/components/functional/submit/submit",
     "./core/components/functional/subscriber/subscriber": "./core/components/functional/subscriber/subscriber",
     "./functional/subscriber": "./core/components/functional/subscriber/subscriber",
+    "./core/components/ui/_css/scroll": "./core/components/ui/_css/scroll",
+    "./ui/_css/scroll": "./core/components/ui/_css/scroll",
+    "./core/components/ui/_css/types": "./core/components/ui/_css/types",
+    "./ui/_css/types": "./core/components/ui/_css/types",
     "./core/components/ui/alert/alert": "./core/components/ui/alert/alert",
     "./ui/alert": "./core/components/ui/alert/alert",
     "./core/components/ui/badge/badge": "./core/components/ui/badge/badge",