@supersoniks/concorde 1.1.24 → 1.1.26

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

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from "lit/decorators.js";
 import { Button } from "../button/button";
+const tagName = "sonic-menu-item";
 let MenuItem = class MenuItem extends Button {
     constructor() {
         super();
@@ -20,18 +21,18 @@ let MenuItem = class MenuItem extends Button {
         if (!this.hasAttribute('shape')) {
             this.shape = "block";
         }
-        if (!this.hasAttribute('textAlign')) {
-            this.textAlign = "left";
+        if (!this.hasAttribute('align')) {
+            this.align = "left";
         }
         super.connectedCallback();
     }
 };
 MenuItem = __decorate([
-    customElement("sonic-menu-item")
+    customElement(tagName)
 ], MenuItem);
 export { MenuItem };
 //Ajout pour Storybook
 try {
-    customElements.define("sonic-menu-item", MenuItem);
+    customElements.define(tagName, MenuItem);
 }
 catch (e) { }

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

@@ -11,11 +11,12 @@ export declare class MenuItems extends LitElement {
      * Direction
      */
     direction: "row" | "column";
+    gap: string;
     align: "center" | "left" | "right";
     /**
      * Ombre
      */
-    shadow: "" | "none" | "sm" | "md" | 'lg' | "xl";
+    shadow: "" | "sm" | "md" | 'lg' | "xl" | "none" | null;
     moreShape: "square" | "circle";
     /**
      * Propriété min-width du bouton

package/core/components/ui/menu/menu.js

@@ -8,6 +8,7 @@ import { html, LitElement, css } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
 import { customElement, property, queryAssignedElements, state } from "lit/decorators.js";
 import "./menu-item";
+const tagName = "sonic-menu";
 let MenuItems = class MenuItems extends LitElement {
     constructor() {
         super(...arguments);
@@ -20,11 +21,12 @@ let MenuItems = class MenuItems extends LitElement {
          * Direction
          */
         this.direction = "column";
+        this.gap = "var(--sc-menu-gap)";
         this.align = "left";
         /**
          * Ombre
          */
-        this.shadow = "none";
+        this.shadow = null;
         this.moreShape = "circle";
         /**
          * Propriété min-width du bouton
@@ -58,7 +60,7 @@ let MenuItems = class MenuItems extends LitElement {
                 elt.setAttribute("size", this.size);
             }
             if (this.align) {
-                elt.setAttribute("textAlign", this.align);
+                elt.setAttribute("align", this.align);
             }
             if (this.direction == "row") {
                 if (elt.getAttribute('shape') == "block") {
@@ -71,6 +73,7 @@ let MenuItems = class MenuItems extends LitElement {
         const menuStyles = {
             minWidth: this.minWidth,
             flexDirection: this.direction,
+            gap: this.gap
         };
         const isMenuRow = this.direction == "row";
         const popStyles = {
@@ -85,8 +88,8 @@ let MenuItems = class MenuItems extends LitElement {
         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} textAlign="center" >
-                    <sonic-icon prefix="iconoir" size="xl" name=${isMenuRow ? "more-vert" : "more-horiz"} ></sonic-icon>
+                  <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>
@@ -97,6 +100,7 @@ MenuItems.styles = [
     css `
       :host {
         display: block;
+        --sc-menu-gap:.15rem;
       }
 
       :host > menu {
@@ -104,7 +108,6 @@ MenuItems.styles = [
         border-radius: min(calc(var(--sc-btn-rounded) * 2), 0.4em);
         margin: 0;
         padding: 0.35em;
-        gap: 0.15rem;
       }
  
       .hidden {
@@ -113,23 +116,22 @@ MenuItems.styles = [
 
       /*OMBRE*/
       :host([shadow]) .shadowable,
-      :host([shadow="md"])  .shadowable,
-      :host([shadow="true"])  .shadowable {
+      :host([shadow="md"]) .shadowable,
+      :host([shadow="true"]) .shadowable {
         box-shadow: var(--sc-shadow);
       }
 
-      :host([shadow="sm"])  .shadowable {
+      :host([shadow="sm"]) .shadowable {
         box-shadow: var(--sc-shadow-sm);
       }
 
-      :host([shadow="lg"])  .shadowable {
+      :host([shadow="lg"]) .shadowable {
         box-shadow: var(--sc-shadow-lg);
       }
       
-      :host([shadow="none"])  .shadowable {
+      :host([shadow="none"]) .shadowable {
         box-shadow: none;
       }
-
     
     `,
 ];
@@ -139,6 +141,9 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], MenuItems.prototype, "direction", void 0);
+__decorate([
+    property({ type: String })
+], MenuItems.prototype, "gap", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], MenuItems.prototype, "align", void 0);
@@ -161,11 +166,11 @@ __decorate([
     state()
 ], MenuItems.prototype, "hasMoreElements", void 0);
 MenuItems = __decorate([
-    customElement("sonic-menu")
+    customElement(tagName)
 ], MenuItems);
 export { MenuItems };
 //Ajout pour la creation du cem notamment pour Storybook
 try {
-    customElements.define("sonic-menu", MenuItems);
+    customElements.define(tagName, MenuItems);
 }
 catch (e) { }

package/core/components/ui/modal/modal-actions.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement, queryAssignedElements } from "lit/decorators.js";
+const tagName = "sonic-modal-actions";
 let ModalActions = class ModalActions extends LitElement {
     firstUpdated() {
         var _a;
@@ -36,11 +37,11 @@ __decorate([
     queryAssignedElements({ selector: "sonic-button" })
 ], ModalActions.prototype, "buttons", void 0);
 ModalActions = __decorate([
-    customElement("sonic-modal-actions")
+    customElement(tagName)
 ], ModalActions);
 export { ModalActions };
 //Ajout pour Storybook
 try {
-    customElements.define("sonic-modal-actions", ModalActions);
+    customElements.define(tagName, ModalActions);
 }
 catch (e) { }

package/core/components/ui/modal/modal-close.js

@@ -6,10 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement } from "lit/decorators.js";
+const tagName = "sonic-modal-close";
 let ModalClose = class ModalClose extends LitElement {
     render() {
         return html `<sonic-button shape="circle" variant="ghost" @click=${this.handleClick}
-      ><sonic-icon prefix="iconoir" name="cancel" size="lg"></sonic-icon
+      ><sonic-icon name="cancel" size="lg"></sonic-icon
     ></sonic-button>`;
     }
     handleClick() {
@@ -28,11 +29,11 @@ ModalClose.styles = [
     `,
 ];
 ModalClose = __decorate([
-    customElement("sonic-modal-close")
+    customElement(tagName)
 ], ModalClose);
 export { ModalClose };
 //Ajout pour Storybook
 try {
-    customElements.define("sonic-modal-close", ModalClose);
+    customElements.define(tagName, ModalClose);
 }
 catch (e) { }

package/core/components/ui/modal/modal-content.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";
+const tagName = "sonic-modal-content";
 let ModalContent = class ModalContent extends LitElement {
     render() {
         return html `<slot></slot>`;
@@ -19,11 +20,11 @@ ModalContent.styles = [
     `,
 ];
 ModalContent = __decorate([
-    customElement("sonic-modal-content")
+    customElement(tagName)
 ], ModalContent);
 export { ModalContent };
 //Ajout pour Storybook
 try {
-    customElements.define("sonic-modal-content", ModalContent);
+    customElements.define(tagName, ModalContent);
 }
 catch (e) { }

package/core/components/ui/modal/modal-subtitle.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";
+const tagName = "sonic-modal-subtitle";
 let ModalSubTitle = class ModalSubTitle extends LitElement {
     render() {
         return html `<slot></slot>`;
@@ -23,11 +24,11 @@ ModalSubTitle.styles = [
     `,
 ];
 ModalSubTitle = __decorate([
-    customElement("sonic-modal-subtitle")
+    customElement(tagName)
 ], ModalSubTitle);
 export { ModalSubTitle };
 //Ajout pour Storybook
 try {
-    customElements.define("sonic-modal-subtitle", ModalSubTitle);
+    customElements.define(tagName, ModalSubTitle);
 }
 catch (e) { }

package/core/components/ui/modal/modal-title.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";
+const tagName = "sonic-modal-title";
 let ModalTitle = class ModalTitle extends LitElement {
     render() {
         return html `<slot></slot>`;
@@ -23,11 +24,11 @@ ModalTitle.styles = [
     `,
 ];
 ModalTitle = __decorate([
-    customElement("sonic-modal-title")
+    customElement(tagName)
 ], ModalTitle);
 export { ModalTitle };
 //Ajout pour Storybook
 try {
-    customElements.define("sonic-modal-title", ModalTitle);
+    customElements.define(tagName, ModalTitle);
 }
 catch (e) { }

package/core/components/ui/modal/modal.js

@@ -9,11 +9,13 @@ import { customElement, property, queryAssignedElements, query } from "lit/decor
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import { animate, fadeIn, fadeOut } from "@lit-labs/motion";
 import { styleMap } from "lit/directives/style-map.js";
+import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
 import "./modal-actions";
 import "./modal-title";
 import "./modal-subtitle";
 import "./modal-content";
 import "./modal-close";
+const tagName = "sonic-modal";
 let Modal = class Modal extends Subscriber(LitElement) {
     constructor() {
         super(...arguments);
@@ -29,7 +31,7 @@ let Modal = class Modal extends Subscriber(LitElement) {
         this.visible = false;
     }
     static create(options) {
-        const modal = document.createElement("sonic-modal");
+        const modal = document.createElement(tagName);
         modal.innerHTML =
             `<sonic-modal-close></sonic-modal-close><sonic-modal-content>${options.content}</sonic-modal-content>` || "";
         let container = document.querySelector("sonic-theme") || document.body;
@@ -78,7 +80,7 @@ let Modal = class Modal extends Subscriber(LitElement) {
       >
         <div
           part="modal"
-          class="modal"
+          class="modal custom-scroll"
           style=${styleMap(modalStyles)}
           ${animate({
             keyframeOptions: {
@@ -89,7 +91,7 @@ let Modal = class Modal extends Subscriber(LitElement) {
             out: [{ transform: "translateY(20%) scale(1)", boxShadow: "0 0 0 rgba(0,0,0,0)", opacity: 0 }],
         })}
         >
-          <div class="modal-content">
+          <div class="modal-content ">
             <slot></slot>
           </div>
         </div>
@@ -126,7 +128,7 @@ let Modal = class Modal extends Subscriber(LitElement) {
     }
     handleEscape(e) {
         if (e.key === "Escape") {
-            const modals = [...document.querySelectorAll("sonic-modal")];
+            const modals = [...document.querySelectorAll(tagName)];
             modals.forEach((item) => {
                 if (this.hideOnEscape == true) {
                     item.hide();
@@ -145,6 +147,7 @@ let Modal = class Modal extends Subscriber(LitElement) {
     }
 };
 Modal.styles = [
+    customScroll,
     css `
       :host {
         --sc-modal-py: 2.5rem;
@@ -175,23 +178,7 @@ Modal.styles = [
         pointer-events: none;
       }
 
-      /*SCROLLBAR*/
-      .modal-content::-webkit-scrollbar-track {
-        z-index: 20;
-        background-color: transparent;
-      }
-
-      .modal-content::-webkit-scrollbar {
-        width: 0.9rem;
-        background-color: transparent;
-      }
-
-      .modal-content::-webkit-scrollbar-thumb {
-        background-color: var(--sc-modal-scrollbar-bg);
-        border: 0.3rem solid rgba(0, 0, 0, 0);
-        background-clip: padding-box;
-        border-radius: var(--sc-modal-rounded);
-      }
+     
       .modal-content {
         overflow-y: auto;
         display: flex;
@@ -207,7 +194,7 @@ Modal.styles = [
         box-shadow: var(--sc-shadow-lg);
         border-radius: var(--sc-modal-rounded) var(--sc-modal-rounded) 0 0;
         pointer-events: auto;
-        overflow: hidden;
+        /*overflow: hidden;*/
         transform: translateZ(0);
       }
 
@@ -312,7 +299,7 @@ __decorate([
     queryAssignedElements({ selector: "sonic-modal-close" })
 ], Modal.prototype, "closeBtn", void 0);
 Modal = __decorate([
-    customElement("sonic-modal")
+    customElement(tagName)
 ], Modal);
 export { Modal };
 if (typeof window !== "undefined") {
@@ -320,6 +307,6 @@ if (typeof window !== "undefined") {
     win.SonicModal = Modal;
 }
 try {
-    customElements.define("sonic-modal", Modal);
+    customElements.define(tagName, Modal);
 }
 catch (e) { }

package/core/components/ui/pop/pop.js

@@ -8,6 +8,7 @@ var Pop_1;
 import { html, LitElement, css } from "lit";
 import { customElement, query, state, property } from "lit/decorators.js";
 import HTML from "@supersoniks/concorde/core/utils/HTML";
+const tagName = "sonic-pop";
 let Pop = Pop_1 = class Pop extends LitElement {
     constructor() {
         super(...arguments);
@@ -216,11 +217,11 @@ __decorate([
     property({ type: String })
 ], Pop.prototype, "placement", void 0);
 Pop = Pop_1 = __decorate([
-    customElement("sonic-pop")
+    customElement(tagName)
 ], Pop);
 export { Pop };
 //Ajout pour la creation du cem notamment pour Storybook
 try {
-    customElements.define("sonic-pop", Pop);
+    customElements.define(tagName, Pop);
 }
 catch (e) { }

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+const tagName = "sonic-progress";
 let Progress = class Progress extends LitElement {
     constructor() {
         super(...arguments);
@@ -17,13 +18,15 @@ let Progress = class Progress extends LitElement {
     render() {
         return html `
       <progress value=${ifDefined(this.value)} max=${this.max}></progress>
+      <div class="slot-container">
       <slot></slot>
+      <slot name="remaining"></slot>
+      </div>
     `;
     }
 };
 Progress.styles = [
     css `
-
       :host {
         --sc-progress-bg: var(--sc-input-bg, var(--sc-base-100, #f5f5f5));
         --sc-progress-color: var(--sc-base-content, #1f2937);
@@ -31,10 +34,9 @@ Progress.styles = [
         --sc-progress-fs: 1rem;
         --sc-progress-fw: 500;
         --sc-progress-rounded: var(--sc-rounded-lg);
-        font-weight:var(--sc-progress-fw);
-        display: flex;
-        flex-wrap: wrap;
+        display: block;
         line-height: 1.2;
+        font-weight:var(--sc-progress-fw);
         font-size:var(--sc-progress-fs);
         color:var(--sc-progress-color);
       }
@@ -45,17 +47,21 @@ Progress.styles = [
         -webkit-appearance: none;
         appearance: none;
         overflow: hidden;
+        border:none;
         height: var(--sc-progress-height);
         border-radius: var(--sc-progress-rounded);
         background-color: var(--sc-progress-bg);
         color: var(--sc-progress-color);
-        border:none;
       }
       progress::-moz-progress-bar {
         background-color: var(--sc-progress-color);
         border-radius: var(--sc-progress-rounded);
       }
 
+      progress:not([value])::-moz-progress-bar  {
+        background-color: var(--sc-progress-bg);
+      }
+
       progress::-webkit-progress-bar {
         background-color: var(--sc-progress-bg);
       }
@@ -64,6 +70,7 @@ Progress.styles = [
         border-radius: var(--sc-progress-rounded);
       }
 
+      /* Indeterminate */
       progress:indeterminate:after {
           background-color: var(--sc-progress-color);
           content: "";
@@ -117,7 +124,18 @@ Progress.styles = [
         --sc-progress-fs: 1.5rem;
       }
 
-
+      slot[name="remaining"] {
+        font-weight:var(--sc-font-weight-base);
+        color:var(--sc-base-400);
+        font-size:.85em;
+        margin-top:.5em;
+      }
+      
+      .slot-container {
+        display:flex;
+        justify-content: space-between;
+        gap:.5em;
+      }
     `
 ];
 __decorate([
@@ -133,6 +151,10 @@ __decorate([
     property({ type: String, reflect: true })
 ], Progress.prototype, "size", void 0);
 Progress = __decorate([
-    customElement("sonic-progress")
+    customElement(tagName)
 ], Progress);
 export { Progress };
+try {
+    customElements.define(tagName, Progress);
+}
+catch (e) { }

package/core/components/ui/table/table-caption.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";
+const tagName = "sonic-caption";
 let TableCaption = class TableCaption extends LitElement {
     render() {
         return html `<slot></slot>`;
@@ -14,11 +15,19 @@ let TableCaption = class TableCaption extends LitElement {
 TableCaption.styles = [
     css `
       :host {
-        display: table-caption;
+        display:table-caption;
+        font-size:.75rem;
+        color:var(--sc-table-caption-color);
+        padding: var(--sc-table-td-py) var(--sc-table-td-px) calc(2 * var(--sc-table-td-py) );
       }
     `
 ];
 TableCaption = __decorate([
-    customElement("sonic-caption")
+    customElement(tagName)
 ], TableCaption);
 export { TableCaption };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define(tagName, TableCaption);
+}
+catch (e) { }

package/core/components/ui/table/table-tbody.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";
+const tagName = "sonic-tbody";
 let TableTbody = class TableTbody extends LitElement {
     render() {
         return html `<tbody><slot></slot></tbody>`;
@@ -14,7 +15,7 @@ let TableTbody = class TableTbody extends LitElement {
 TableTbody.styles = [
     css `
       :host {
-        display: contents;
+        display: table-row-group;
       }
 
       ::slotted(sonic-tr:nth-child(odd)){
@@ -32,6 +33,11 @@ TableTbody.styles = [
     `
 ];
 TableTbody = __decorate([
-    customElement("sonic-tbody")
+    customElement(tagName)
 ], TableTbody);
 export { TableTbody };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define(tagName, TableTbody);
+}
+catch (e) { }

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

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

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

@@ -7,31 +7,37 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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";
+const tagName = "sonic-td";
+import { typesColor } from "@supersoniks/concorde/core/components/ui/_css/types";
 let TableTd = class TableTd extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.colSpan = null;
-        this.rowSpan = null;
-    }
     render() {
+        const styles = {
+            textAlign: this.align,
+            minWidth: this.minWidth,
+        };
         return html `<td
+      part="td"
+      style=${styleMap(styles)}
       colspan=${ifDefined(this.colSpan)}
       rowspan=${ifDefined(this.rowSpan)}
-      part="td"
-      ><slot></slot></td>`;
+    >
+      <slot></slot>
+    </td>`;
     }
 };
 TableTd.styles = [
+    typesColor,
     css `
       :host {
         display: contents;
       }
-
       td {
-        text-transform:var(--sc-th-tt);
-        text-align:inherit;
-        padding:.3em .5em;
-      }`
+        all: inherit;
+        display: table-cell;
+        padding: var(--sc-table-td-py) var(--sc-table-td-px);
+      }
+    `,
 ];
 __decorate([
     property({ type: Number })
@@ -39,7 +45,18 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], TableTd.prototype, "rowSpan", void 0);
+__decorate([
+    property({ type: String })
+], TableTd.prototype, "align", void 0);
+__decorate([
+    property({ type: String })
+], TableTd.prototype, "minWidth", void 0);
 TableTd = __decorate([
-    customElement("sonic-td")
+    customElement(tagName)
 ], TableTd);
 export { TableTd };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define(tagName, TableTd);
+}
+catch (e) { }

package/core/components/ui/table/table-tfoot.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";
+const tagName = "sonic-tfoot";
 let TableTfoot = class TableTfoot extends LitElement {
     render() {
         return html `<tfoot><slot></slot></tfoot>`;
@@ -18,6 +19,11 @@ TableTfoot.styles = [
       }`
 ];
 TableTfoot = __decorate([
-    customElement("sonic-tfoot")
+    customElement(tagName)
 ], TableTfoot);
 export { TableTfoot };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define(tagName, TableTfoot);
+}
+catch (e) { }