@supersoniks/concorde 1.1.8 → 1.1.11

package/core/components/ui/progress/progress.js

@@ -0,0 +1,63 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+import { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+let Progress = class Progress extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.max = 100;
+    }
+    render() {
+        return html `
+      <progress value=${this.value} max=${this.max}></progress>
+    `;
+    }
+};
+Progress.styles = [
+    css `
+
+      :host {
+        --sc-progress-bg: var(--sc-input-bg, var(--sc-base, #fff));
+        --sc-progress-color: var(--sc-base-content, #1f2937);
+        --sc-progress-height: .6rem;
+        display: flex;
+      }
+
+      progress {
+        position: relative;
+        width: 100%;
+        -webkit-appearance: none;
+        appearance: none;
+        overflow: hidden;
+        height: var(--sc-progress-height);
+        border-radius: var(--rounded-box,1rem);
+        background-color: var(--sc-progress-bg);
+        color: var(--sc-progress-color);
+        border:none;
+      }
+      progress::-moz-progress-bar {
+        background-color: var(--sc-progress-color);
+      }
+      progress::-webkit-progress-bar {
+        background-color: var(--sc-progress-bg);
+      }
+      progress::-webkit-progress-value {
+        background-color: var(--sc-progress-color);
+      }
+   
+    `
+];
+__decorate([
+    property({ type: Number })
+], Progress.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], Progress.prototype, "max", void 0);
+Progress = __decorate([
+    customElement("sonic-progress")
+], Progress);
+export { Progress };

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

@@ -0,0 +1,5 @@
+import { LitElement } from "lit";
+export declare class TableCaption extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,24 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+import { html, LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
+let TableCaption = class TableCaption extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+TableCaption.styles = [
+    css `
+      :host {
+        display: table-caption;
+      }
+    `
+];
+TableCaption = __decorate([
+    customElement("sonic-caption")
+], TableCaption);
+export { TableCaption };

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

@@ -0,0 +1,5 @@
+import { LitElement } from "lit";
+export declare class TableTbody extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,37 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+import { html, LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
+let TableTbody = class TableTbody extends LitElement {
+    render() {
+        return html `<tbody><slot></slot></tbody>`;
+    }
+};
+TableTbody.styles = [
+    css `
+      :host {
+        display: contents;
+      }
+
+      ::slotted(sonic-tr:nth-child(odd)){
+        background:var(--sc-base-50);
+      }
+      
+      ::slotted(sonic-tr:hover) {
+        background:var(--sc-base-100);
+      }
+
+      ::slotted(sonic-tr:not(:last-child)){
+        border-bottom:var(--sc-form-border-width) solid var(--sc-base-200) !important;
+      }
+
+    `
+];
+TableTbody = __decorate([
+    customElement("sonic-tbody")
+], TableTbody);
+export { TableTbody };

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

@@ -0,0 +1,7 @@
+import { LitElement } from "lit";
+export declare class TableTd extends LitElement {
+    static styles: import("lit").CSSResult[];
+    colSpan: number | null;
+    rowSpan: number | null;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,45 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+import { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+let TableTd = class TableTd extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.colSpan = null;
+        this.rowSpan = null;
+    }
+    render() {
+        return html `<td
+      colspan=${ifDefined(this.colSpan)}
+      rowspan=${ifDefined(this.rowSpan)}
+      part="td"
+      ><slot></slot></td>`;
+    }
+};
+TableTd.styles = [
+    css `
+      :host {
+        display: contents;
+      }
+
+      td {
+        text-transform:var(--sc-th-tt);
+        text-align:inherit;
+        padding:.3em .5em;
+      }`
+];
+__decorate([
+    property({ type: Number })
+], TableTd.prototype, "colSpan", void 0);
+__decorate([
+    property({ type: Number })
+], TableTd.prototype, "rowSpan", void 0);
+TableTd = __decorate([
+    customElement("sonic-td")
+], TableTd);
+export { TableTd };

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

@@ -0,0 +1,5 @@
+import { LitElement } from "lit";
+export declare class TableTfoot extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,23 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+import { html, LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
+let TableTfoot = class TableTfoot extends LitElement {
+    render() {
+        return html `<tfoot><slot></slot></tfoot>`;
+    }
+};
+TableTfoot.styles = [
+    css `
+      :host {
+        display: contents;
+      }`
+];
+TableTfoot = __decorate([
+    customElement("sonic-tfoot")
+], TableTfoot);
+export { TableTfoot };

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

@@ -0,0 +1,6 @@
+import { LitElement } from "lit";
+export declare class TableTh extends LitElement {
+    static styles: import("lit").CSSResult[];
+    align: "left" | "right" | "left" | "center";
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,43 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+import { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+let TableTh = class TableTh extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.align = "left";
+    }
+    render() {
+        const styles = {
+            textAlign: this.align,
+        };
+        return html `<th part="th" style=${styleMap(styles)} ><slot></slot></th>
+    `;
+    }
+};
+TableTh.styles = [
+    css `
+      :host {
+        display: contents;
+        --sc-th-tt:uppercase;
+      }
+
+      th {
+        text-transform:var(--sc-th-tt);
+        text-align:inherit;
+        padding:.3em .5em;
+      }
+    `
+];
+__decorate([
+    property({ type: String, reflect: true })
+], TableTh.prototype, "align", void 0);
+TableTh = __decorate([
+    customElement("sonic-th")
+], TableTh);
+export { TableTh };

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

@@ -0,0 +1,5 @@
+import { LitElement } from "lit";
+export declare class TableThead extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,24 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+import { html, LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
+let TableThead = class TableThead extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+TableThead.styles = [
+    css `
+      :host {
+        display: table-row-group;
+      }
+    `
+];
+TableThead = __decorate([
+    customElement("sonic-thead")
+], TableThead);
+export { TableThead };

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

@@ -0,0 +1,5 @@
+import { LitElement } from "lit";
+export declare class TableTr extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,24 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+import { html, LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
+let TableTr = class TableTr extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+TableTr.styles = [
+    css `
+      :host {
+        display: table-row;
+      }
+    `
+];
+TableTr = __decorate([
+    customElement("sonic-tr")
+], TableTr);
+export { TableTr };

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

@@ -0,0 +1,16 @@
+import { LitElement } from "lit";
+import "./table-tr.ts";
+import "./table-th.ts";
+import "./table-td.ts";
+import "./table-thead.ts";
+import "./table-tbody.ts";
+import "./table-tfoot.ts";
+import "./table-caption.ts";
+export declare class Table extends LitElement {
+    static styles: import("lit").CSSResult[];
+    size: "xs" | "sm" | "md" | "lg" | "xl";
+    striped: boolean;
+    sticky: boolean;
+    hover: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,88 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+import { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "./table-tr.ts";
+import "./table-th.ts";
+import "./table-td.ts";
+import "./table-thead.ts";
+import "./table-tbody.ts";
+import "./table-tfoot.ts";
+import "./table-caption.ts";
+let Table = class Table extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.size = "md";
+        this.striped = false;
+        this.sticky = false;
+        this.hover = false;
+    }
+    render() {
+        return html `
+      <div class="table-container">
+        <div class="table" ?striped=${this.striped} ?hover=${this.hover} ?sticky=${this.sticky}>
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+Table.styles = [
+    css `
+      :host {
+        --sc-table-fw: var(--sc-font-weight-base);
+        --sc-table-fst: var(--sc-font-style-base);
+        --sc-table-fs: 1rem;
+        --sc-table-th-fw: bold;
+      }
+
+      .table-container {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+      }
+      
+      .table {
+        width: 100%;
+        font-size: var(--sc-table-fs);
+        display: table;
+      }
+
+      /*SIZE*/
+      :host([size="2xs"]) {
+        --sc-table-fs: 0.6rem;
+      }
+      :host([size="xs"]) {
+        --sc-table-fs: 0.75rem;
+      }
+      :host([size="sm"]) {
+        --sc-table-fs: 0.85rem;
+      }
+      :host([size="lg"]) {
+        --sc-table-fs: 1.2rem;
+      }
+      :host([size="xl"]) {
+        --sc-table-fs: 1.5rem;
+      }
+
+    `,
+];
+__decorate([
+    property({ type: String, reflect: true })
+], Table.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Table.prototype, "striped", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Table.prototype, "sticky", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Table.prototype, "hover", void 0);
+Table = __decorate([
+    customElement("sonic-table")
+], Table);
+export { Table };

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

@@ -7,7 +7,7 @@ export const coreVariables = css `
     --sc-font-family-base: "Inter var", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
       "Helvetica Neue", Arial, sans-serif;
     --sc-font-weight-base: 400;
-    --sc-font-style-base: inherit;
+    --sc-font-style-base: normal;
 
     --sc-headings-font-family: var(--sc-font-family-base);
     --sc-headings-font-style: var(--sc-font-family-base);

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

@@ -12,8 +12,9 @@ const darkCss = css `
   --sc-warning-content: var(--sc-dark-warning-content, #382800);
   --sc-success-content: var(--sc-dark-success-content, #003320);
 
-  --sc-base: var(--sc-dark-base, #1f2937);
-  --sc-base-100: var(--sc-dark-base-100, #262f3d);
+  --sc-base: var(--sc-dark-base, #1d2634);
+  --sc-base-50: var(--sc-dark-base-50, #1f2937);
+  --sc-base-100: var(--sc-dark-base-100, #252C36);
   --sc-base-200: var(--sc-dark-base-200, #2c3543);
   --sc-base-300: var(--sc-dark-base-300, #38414e);
   --sc-base-400: var(--sc-dark-base-400, #515964);

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

@@ -16,6 +16,7 @@ export const light = css `
 
     /*Bases*/
     --sc-base: #fff;
+    --sc-base-50: #f8fafc;
     --sc-base-100: #f1f5f9;
     --sc-base-200: #e2e8f0;
     --sc-base-300: #cbd5e1;

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

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 export declare class Tooltip extends LitElement {
     static styles: import("lit").CSSResult[];
-    tooltipText: string;
+    label: string;
     disabled: boolean;
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/tooltip/tooltip.js

@@ -9,13 +9,13 @@ import { customElement, property } from "lit/decorators.js";
 let Tooltip = class Tooltip extends LitElement {
     constructor() {
         super(...arguments);
-        this.tooltipText = "";
+        this.label = "";
         this.disabled = false;
     }
     render() {
-        let disabledClass = this.disabled || this.tooltipText == "" ? "disabled" : "";
+        let disabledClass = this.disabled || this.label == "" ? "disabled" : "";
         return html `<div
-      data-tooltip-text="${this.tooltipText.trim().replace("&nbsp;", " ")}"
+      data-tooltip-text="${this.label.trim().replace("&nbsp;", " ")}"
       class="tooltip ${disabledClass}"
     >
       <slot></slot>
@@ -58,7 +58,7 @@ Tooltip.styles = [
 ];
 __decorate([
     property({ type: String })
-], Tooltip.prototype, "tooltipText", void 0);
+], Tooltip.prototype, "label", void 0);
 __decorate([
     property({ type: Boolean })
 ], Tooltip.prototype, "disabled", void 0);

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

@@ -2,6 +2,7 @@ import "./theme/theme";
 import "./badge/badge";
 import "./button/button";
 import "./link/link";
+import "./progress/progress";
 import "./form/input/input";
 import "./form/checkbox/checkbox";
 import "./form/radio/radio";
@@ -25,3 +26,5 @@ import "./toast/toast";
 import "./tooltip/tooltip";
 import "./pop/pop";
 import "./divider/divider";
+import "./card/card";
+import "./table/table";

package/core/components/ui/ui.js

@@ -4,6 +4,7 @@ import "./theme/theme";
 import "./badge/badge";
 import "./button/button";
 import "./link/link";
+import "./progress/progress";
 // FORMS
 import "./form/input/input";
 import "./form/checkbox/checkbox";
@@ -32,3 +33,5 @@ import "./toast/toast";
 import "./tooltip/tooltip";
 import "./pop/pop";
 import "./divider/divider";
+import "./card/card";
+import "./table/table";

package/core/mixins/Fetcher.d.ts

@@ -31,6 +31,8 @@ declare const Fetcher: <T extends Constructor<SubscriberInterface>>(superClass:
          * Cela est le cas pour le composant sonic-list qui ne fetch que si l'attribut fetch est renseigné
          */
         isFetchEnabled: boolean;
+        _endPoint: string;
+        endPoint: string;
         /**
          *
          * C'est ici que les données sont chargées via l'utilitaire API
@@ -47,26 +49,26 @@ declare const Fetcher: <T extends Constructor<SubscriberInterface>>(superClass:
         firstUpdated(): void;
         onIntersection(entries: IntersectionObserverEntry[]): void;
         props: any;
+        isConnected: boolean;
         getAncestorAttributeValue(attributeName: string): string;
         hasAncestorAttribute(attributeName: string): boolean;
         querySelectorAll(selector: string): NodeListOf<Element>;
-        /**
-         * isFirstLoad vaut true jusqu'au premier chargement de données
-         */
         publisher: any;
-        dataProvider: String;
+        dataProvider: string | null;
         noShadowDom: string | null;
         debug: HTMLElement | null;
-        defferedDebug: boolean | null;
-        makeShadow(props: Record<string, any>, value: any): any;
-        dispatchEvent(event: Event): void; /**
-         * IObserver est l'intersection observer qui permet de charger les données au scroll si l'attribut lazyload est renseigné
+        defferedDebug: boolean | null; /**
+         * isLoading vaut true pendant le chargement des données
          */
+        dispatchEvent(event: Event): void;
         setAttribute(name: string, value: string): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
         removeAttribute(name: string): void;
-        initPublisher(): void;
+        initPublisher(): void; /**
+         * On peut désactiver le fetch programmatiquement via cette propriété.
+         * Cela est le cas pour le composant sonic-list qui ne fetch que si l'attribut fetch est renseigné
+         */
         getApiConfiguration(): import("@supersoniks/concorde/core/utils/api").APIConfiguration;
         requestUpdate(): void;
         getAttribute(name: string): string;