@supersoniks/concorde 1.1.42 → 1.1.43

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

@@ -5,21 +5,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 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';
+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);
         this.open = false;
-        this.toggle = 'true';
+        this.toggle = "true";
+        this.noToggle = false;
         this.inline = false;
         /**
          * Ombre
          */
-        this.shadow = 'lg';
-        this.placement = 'bottom';
+        this.shadow = "lg";
+        this.placement = "bottom";
         this.positioningRuns = false;
         this.lastContentX = Number.NaN;
         this.lastContentY = Number.NaN;
@@ -32,16 +33,17 @@ let Pop = Pop_1 = class Pop extends LitElement {
         window.requestAnimationFrame(() => this.runPositioning());
     }
     _toggle(e) {
-        if (this.open && this.toggle == 'false')
+        if (this.open && this.noToggle)
             return;
-        if (e.type == 'keydown' && (e.key != 'ArrowDown' || this.open))
+        const keyboardEvent = e;
+        if (e.type == "keydown" && (keyboardEvent.key != "ArrowDown" || this.open))
             return;
         this.open = !this.open;
         this.open ? this._show() : this._hide();
     }
     _show() {
         this.open = true;
-        this.popContent.setAttribute('tabindex', '0');
+        this.popContent.setAttribute("tabindex", "0");
         if (this.popBtn && this.popContent && !this.positioningRuns) {
             this.positioningRuns = true;
             this.lastContentX = Number.NaN;
@@ -51,7 +53,7 @@ let Pop = Pop_1 = class Pop extends LitElement {
     }
     _hide() {
         this.open = false;
-        this.popContent.setAttribute('tabindex', '-1');
+        this.popContent.setAttribute("tabindex", "-1");
         this.positioningRuns = false;
     }
     _handleClosePop(e) {
@@ -60,10 +62,10 @@ let Pop = Pop_1 = class Pop extends LitElement {
         Pop_1.pops.forEach((pop) => {
             const popContainsTarget = path.includes(pop);
             const popContentContainsTarget = path.includes(pop.querySelector('[slot="content"]'));
-            const isCloseManual = HTML.getAncestorAttributeValue(target, 'data-on-select') === 'keep';
-            if (e.type == 'pointerdown' && popContainsTarget)
+            const isCloseManual = HTML.getAncestorAttributeValue(target, "data-on-select") === "keep";
+            if (e.type == "pointerdown" && popContainsTarget)
                 return;
-            if (e.type == 'click' && ((popContainsTarget && isCloseManual) || !popContentContainsTarget))
+            if (e.type == "click" && ((popContainsTarget && isCloseManual) || !popContentContainsTarget))
                 return;
             pop._hide();
         });
@@ -71,8 +73,8 @@ let Pop = Pop_1 = class Pop extends LitElement {
     connectedCallback() {
         super.connectedCallback();
         if (Pop_1.pops.size == 0) {
-            document.addEventListener('pointerdown', this._handleClosePop);
-            document.addEventListener('click', this._handleClosePop);
+            document.addEventListener("pointerdown", this._handleClosePop);
+            document.addEventListener("click", this._handleClosePop);
         }
         Pop_1.pops.add(this);
     }
@@ -80,8 +82,8 @@ let Pop = Pop_1 = class Pop extends LitElement {
         super.disconnectedCallback();
         Pop_1.pops.delete(this);
         if (Pop_1.pops.size == 0) {
-            document.removeEventListener('pointerdown', this._handleClosePop);
-            document.removeEventListener('click', this._handleClosePop);
+            document.removeEventListener("pointerdown", this._handleClosePop);
+            document.removeEventListener("click", this._handleClosePop);
         }
     }
     _setUpMenu(placement) {
@@ -101,34 +103,34 @@ let Pop = Pop_1 = class Pop extends LitElement {
         let xRight = x0 + thisRect.width + 2 * padding;
         let yBottom = y0 + thisRect.height + padding;
         switch (placement) {
-            case 'bottom':
+            case "bottom":
                 y = yBottom;
                 break;
-            case 'top':
+            case "top":
                 y = yTop;
                 break;
-            case 'left':
+            case "left":
                 x = xLeft;
                 break;
-            case 'right':
+            case "right":
                 x = xRight;
                 break;
         }
         let dxRight = window.innerWidth - xRight - bodyRect.left - contentRect.width - shiftPadding;
-        if (dxRight < 0 && placement === 'right')
+        if (dxRight < 0 && placement === "right")
             x = xLeft;
-        if (dxRight < 0 && ['top', 'bottom'].includes(placement))
+        if (dxRight < 0 && ["top", "bottom"].includes(placement))
             x = Math.max(x + dxRight, xLeft + thisRect.width);
         let dxLeft = -bodyRect.left - xLeft;
-        if (dxLeft > shiftPadding && placement === 'left')
+        if (dxLeft > shiftPadding && placement === "left")
             x = xRight;
         let dyBottom = window.innerHeight - yBottom - bodyRect.top - contentRect.height - shiftPadding;
-        if (dyBottom < 0 && placement === 'bottom')
+        if (dyBottom < 0 && placement === "bottom")
             y = yTop;
-        if (dyBottom < 0 && ['left', 'right'].includes(placement))
+        if (dyBottom < 0 && ["left", "right"].includes(placement))
             y = Math.max(y + dyBottom, yTop + thisRect.height);
         let dyTop = -bodyRect.top - yTop;
-        if (dyTop > -shiftPadding && placement === 'top')
+        if (dyTop > -shiftPadding && placement === "top")
             y = yBottom;
         this.lastContentX = x;
         this.lastContentY = y;
@@ -145,7 +147,7 @@ let Pop = Pop_1 = class Pop extends LitElement {
         tabindex="-1"
         part="content"
         class="  
-          ${this.open ? 'is-open' : ''}"
+          ${this.open ? "is-open" : ""}"
       ></slot>
     `;
     }
@@ -157,7 +159,7 @@ Pop.styles = [
         display: inline-block;
         vertical-align: middle;
       }
-      slot[name='content'] {
+      slot[name="content"] {
         max-width: 80vw;
         background-color: var(--sc-base);
         position: absolute;
@@ -172,7 +174,7 @@ Pop.styles = [
         border-radius: min(calc(var(--sc-btn-rounded) * 2), 0.4em);
       }
 
-      slot[name='content'].is-open {
+      slot[name="content"].is-open {
         transform: translateY(0) scale(1);
         opacity: 1;
         pointer-events: auto;
@@ -181,21 +183,21 @@ Pop.styles = [
       }
 
       /*OMBRE*/
-      :host([shadow]) slot[name='content'],
-      :host([shadow='md']) slot[name='content'],
-      :host([shadow='true']) slot[name='content'] {
+      :host([shadow]) slot[name="content"],
+      :host([shadow="md"]) slot[name="content"],
+      :host([shadow="true"]) slot[name="content"] {
         box-shadow: var(--sc-shadow);
       }
 
-      :host([shadow='sm']) slot[name='content'] {
+      :host([shadow="sm"]) slot[name="content"] {
         box-shadow: var(--sc-shadow-sm);
       }
 
-      :host([shadow='none']) slot[name='content'] {
+      :host([shadow="none"]) slot[name="content"] {
         box-shadow: none;
       }
 
-      :host([shadow='lg']) slot[name='content'] {
+      :host([shadow="lg"]) slot[name="content"] {
         box-shadow: var(--sc-shadow-lg);
       }
 
@@ -208,14 +210,17 @@ __decorate([
     state()
 ], Pop.prototype, "open", void 0);
 __decorate([
-    query('slot:not([name=content])')
+    query("slot:not([name=content])")
 ], Pop.prototype, "popBtn", void 0);
 __decorate([
-    query('slot[name=content]')
+    query("slot[name=content]")
 ], Pop.prototype, "popContent", void 0);
 __decorate([
     property({ type: String })
 ], Pop.prototype, "toggle", void 0);
+__decorate([
+    property({ type: Boolean })
+], Pop.prototype, "noToggle", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Pop.prototype, "inline", void 0);
@@ -229,8 +234,3 @@ Pop = Pop_1 = __decorate([
     customElement(tagName)
 ], Pop);
 export { Pop };
-//Ajout pour la creation du cem notamment pour Storybook
-try {
-    customElements.define(tagName, Pop);
-}
-catch (e) { }

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

@@ -21,8 +21,8 @@ let Progress = class Progress extends LitElement {
         return html `
       <progress value=${ifDefined(this.value)} max=${this.max}></progress>
       <div class="slot-container">
-      <slot></slot>
-      <slot name="remaining"></slot>
+        <slot></slot>
+        <slot name="remaining"></slot>
       </div>
     `;
     }
@@ -33,15 +33,14 @@ Progress.styles = [
       :host {
         --sc-progress-bg: var(--sc-input-bg, var(--sc-base-100, #f5f5f5));
         --sc-progress-color: var(--sc-base-content, #1f2937);
-        --sc-progress-height: .6em;
+        --sc-progress-height: 0.6em;
         --sc-progress-fs: var(--sc-fs, 1rem);
         --sc-progress-fw: 500;
         --sc-progress-rounded: var(--sc-rounded-lg);
         display: block;
         line-height: 1.2;
-        font-weight:var(--sc-progress-fw);
-        font-size:var(--sc-progress-fs);
-        color:var(--sc-progress-color);
+        font-weight: var(--sc-progress-fw);
+        font-size: var(--sc-progress-fs);
       }
 
       progress {
@@ -50,7 +49,7 @@ Progress.styles = [
         -webkit-appearance: none;
         appearance: none;
         overflow: hidden;
-        border:none;
+        border: none;
         height: var(--sc-progress-height);
         border-radius: var(--sc-progress-rounded);
         background-color: var(--sc-progress-bg);
@@ -61,7 +60,7 @@ Progress.styles = [
         border-radius: var(--sc-progress-rounded);
       }
 
-      progress:not([value])::-moz-progress-bar  {
+      progress:not([value])::-moz-progress-bar {
         background-color: var(--sc-progress-bg);
       }
 
@@ -75,15 +74,15 @@ Progress.styles = [
 
       /* Indeterminate */
       progress:indeterminate:after {
-          background-color: var(--sc-progress-color);
-          content: "";
-          position: absolute;
-          top: 0;
-          bottom: 0;
-          left: -40%;
-          width: 33.333333%;
-          border-radius: var(--sc-progress-rounded);
-          animation: progress-loading 3s infinite ease-in-out;
+        background-color: var(--sc-progress-color);
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: -40%;
+        width: 33.333333%;
+        border-radius: var(--sc-progress-rounded);
+        animation: progress-loading 3s infinite ease-in-out;
       }
 
       @keyframes progress-loading {
@@ -91,7 +90,7 @@ Progress.styles = [
           left: 107%;
         }
       }
-   
+
       /* COLOR TYPES */
       :host([type="warning"]) {
         --sc-progress-color: var(--sc-warning);
@@ -107,26 +106,33 @@ Progress.styles = [
       }
 
       :host([invert]) {
-        --sc-progress-bg: var(--sc-base-700);
+        --sc-progress-bg: rgba(200, 200, 200, 0.1);
       }
+
       :host([type="default"][invert]) {
         --sc-progress-color: var(--sc-base);
       }
 
       slot[name="remaining"] {
-        font-weight:var(--sc-font-weight-base);
-        color:var(--sc-base-400);
-        font-size:.85em;
-        margin-top:.5em;
+        font-weight: var(--sc-font-weight-base);
+        font-size: 0.85em;
+        margin-top: 0.5em;
+      }
+      slot[name="remaining"]::slotted(*) {
+        margin-left: auto;
       }
-      
+
+      slot:not([name]) {
+        color: var(--sc-progress-color);
+      }
+
       .slot-container {
-        display:flex;
+        display: flex;
         justify-content: space-between;
-        gap:.5em;
-        margin-top:.15em;
+        gap: 0.5em;
+        margin-top: 0.15em;
       }
-    `
+    `,
 ];
 __decorate([
     property({ type: Number })
@@ -147,7 +153,3 @@ Progress = __decorate([
     customElement(tagName)
 ], Progress);
 export { Progress };
-try {
-    customElements.define(tagName, Progress);
-}
-catch (e) { }

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

@@ -15,19 +15,14 @@ let TableCaption = class TableCaption extends LitElement {
 TableCaption.styles = [
     css `
       :host {
-        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) );
+        display: table-caption;
+        font-size: 0.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(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

@@ -9,7 +9,9 @@ import { customElement } from "lit/decorators.js";
 const tagName = "sonic-tbody";
 let TableTbody = class TableTbody extends LitElement {
     render() {
-        return html `<tbody><slot></slot></tbody>`;
+        return html `<tbody>
+      <slot></slot>
+    </tbody>`;
     }
 };
 TableTbody.styles = [
@@ -18,26 +20,20 @@ TableTbody.styles = [
         display: table-row-group;
       }
 
-      ::slotted(sonic-tr:nth-child(odd)){
-        background:var(--sc-base-50);
+      ::slotted(sonic-tr:nth-child(odd)) {
+        background: var(--sc-table-accent-bg);
       }
-      
+
       ::slotted(sonic-tr:hover) {
-        background:var(--sc-base-100);
+        background: var(--sc-table-hover-bg);
       }
 
-      ::slotted(sonic-tr:not(:last-child)){
-        border-bottom:var(--sc-form-border-width) solid var(--sc-base-200) !important;
+      ::slotted(sonic-tr:not(:last-child)) {
+        border-bottom: var(--sc-form-border-width) solid var(--sc-base-200) !important;
       }
-
-    `
+    `,
 ];
 TableTbody = __decorate([
     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

@@ -6,5 +6,7 @@ export declare class TableTd extends LitElement {
     align?: string;
     vAlign?: string;
     minWidth?: string;
+    maxWidth?: string;
+    width?: string;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -16,6 +16,8 @@ let TableTd = class TableTd extends LitElement {
             textAlign: this.align,
             verticalAlign: this.vAlign,
             minWidth: this.minWidth,
+            maxWidth: this.maxWidth,
+            width: this.width,
         };
         return html `<td
       part="td"
@@ -55,12 +57,13 @@ __decorate([
 __decorate([
     property({ type: String })
 ], TableTd.prototype, "minWidth", void 0);
+__decorate([
+    property({ type: String })
+], TableTd.prototype, "maxWidth", void 0);
+__decorate([
+    property({ type: String })
+], TableTd.prototype, "width", void 0);
 TableTd = __decorate([
     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

@@ -9,21 +9,19 @@ import { customElement } from "lit/decorators.js";
 const tagName = "sonic-tfoot";
 let TableTfoot = class TableTfoot extends LitElement {
     render() {
-        return html `<tfoot><slot></slot></tfoot>`;
+        return html `<tfoot>
+      <slot></slot>
+    </tfoot>`;
     }
 };
 TableTfoot.styles = [
     css `
       :host {
         display: contents;
-      }`
+      }
+    `,
 ];
 TableTfoot = __decorate([
     customElement(tagName)
 ], TableTfoot);
 export { TableTfoot };
-//Ajout pour la creation du cem notamment pour Storybook
-try {
-    customElements.define(tagName, TableTfoot);
-}
-catch (e) { }

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

@@ -5,5 +5,7 @@ export declare class TableTh extends LitElement {
     rowSpan?: number;
     align?: string;
     minWidth?: string;
+    maxWidth?: string;
+    width?: string;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -15,6 +15,8 @@ let TableTh = class TableTh extends LitElement {
         const styles = {
             textAlign: this.align,
             minWidth: this.minWidth,
+            maxWidth: this.maxWidth,
+            width: this.width,
         };
         return html `<th
       part="th"
@@ -31,10 +33,10 @@ TableTh.styles = [
     css `
       :host {
         display: contents;
-        background:var(--sc-table-bg);
-        position:sticky;
-        top:0;
-        z-index:20;
+        background: var(--sc-table-bg);
+        position: sticky;
+        top: 0;
+        z-index: 20;
       }
 
       th {
@@ -60,12 +62,13 @@ __decorate([
 __decorate([
     property({ type: String })
 ], TableTh.prototype, "minWidth", void 0);
+__decorate([
+    property({ type: String })
+], TableTh.prototype, "maxWidth", void 0);
+__decorate([
+    property({ type: String })
+], TableTh.prototype, "width", void 0);
 TableTh = __decorate([
     customElement(tagName)
 ], TableTh);
 export { TableTh };
-//Ajout pour la creation du cem notamment pour Storybook
-try {
-    customElements.define(tagName, TableTh);
-}
-catch (e) { }

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

@@ -17,14 +17,9 @@ TableThead.styles = [
       :host {
         display: table-header-group;
       }
-    `
+    `,
 ];
 TableThead = __decorate([
     customElement(tagName)
 ], TableThead);
 export { TableThead };
-//Ajout pour la creation du cem notamment pour Storybook
-try {
-    customElements.define(tagName, TableThead);
-}
-catch (e) { }

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

@@ -20,14 +20,12 @@ TableTr.styles = [
         display: table-row;
       }
 
-    `
+      :host([odd]) {
+        background: var(--sc-table-accent-bg);
+      }
+    `,
 ];
 TableTr = __decorate([
     customElement(tagName)
 ], TableTr);
 export { TableTr };
-//Ajout pour la creation du cem notamment pour Storybook
-try {
-    customElements.define(tagName, TableTr);
-}
-catch (e) { }

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

@@ -9,10 +9,7 @@ import "@supersoniks/concorde/core/components/ui/table/table-caption";
 export declare class Table extends LitElement {
     static styles: import("lit").CSSResult[];
     size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
-    striped: boolean;
-    sticky: boolean;
     bordered: boolean;
-    hover: boolean;
     maxHeight?: string;
     render(): import("lit-html").TemplateResult<1>;
 }