@supersoniks/concorde 1.1.25 → 1.1.26

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

@@ -16,6 +16,9 @@ declare const List_base: {
         onInvalidate: any;
         disconnectedCallback(): void;
         connectedCallback(): void;
+        /**
+         * Loading
+         */
         firstUpdated(): void;
         onIntersection(entries: IntersectionObserverEntry[]): void;
         props: any;

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

@@ -0,0 +1 @@
+export declare const customScroll: import("lit").CSSResult;

package/core/components/ui/_css/scroll.js

@@ -0,0 +1,22 @@
+import { css } from "lit";
+export const customScroll = css `
+
+  .custom-scroll {
+    overflow:auto !important;
+  }
+  
+  .custom-scroll::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+    border: solid .15rem transparent;
+    border-radius: var(--sc-rounded);
+    background:transparent;
+  }
+
+  .custom-scroll::-webkit-scrollbar-thumb {
+    box-shadow: inset 0 0 2rem 2rem var(--sc-scrollbar-bg);
+    border-radius: var(--sc-rounded);
+    border: solid .15rem transparent;
+  }
+
+`;

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

@@ -0,0 +1,2 @@
+export declare const typesColor: import("lit").CSSResult;
+export declare const typesBg: import("lit").CSSResult;

package/core/components/ui/_css/types.js

@@ -0,0 +1,60 @@
+import { css } from "lit";
+export const typesColor = css `
+  :host{
+    --sc-color:inherit;
+    color:var(--sc-color);
+  }
+
+  :host([type="primary"]) {
+    --sc-color: var(--sc-primary);
+  }
+  :host([type="warning"]) {
+    --sc-color: var(--sc-warning);
+  }
+  :host([type="danger"]) {
+    --sc-color: var(--sc-danger);
+  }
+  :host([type="info"]) {
+    --sc-color: var(--sc-info);
+  }
+  :host([type="success"]) {
+    --sc-color: var(--sc-success);
+  }
+
+  .inherit-color{
+    color:var(--sc-color);
+  }
+`;
+export const typesBg = css `
+  :host{
+    --sc-color:inherit;
+    --sc-bg:inherit;
+    color:var(--sc-color);
+    background:var(--sc-bg);
+  }
+
+  :host([type="primary"]) {
+    --sc-color: var(--sc-primary-content);
+    --sc-bg: var(--sc-primary);
+  }
+  :host([type="warning"]) {
+    --sc-color: var(--sc-warning-content);
+    --sc-bg: var(--sc-warning);
+  }
+  :host([type="danger"]) {
+    --sc-color: var(--sc-danger-content);
+    --sc-bg: var(--sc-danger);
+  }
+  :host([type="info"]) {
+    --sc-color: var(--sc-info-content);
+    --sc-bg: var(--sc-info);
+  }
+  :host([type="success"]) {
+    --sc-color: var(--sc-success-content);
+    --sc-bg: var(--sc-success);
+  }
+
+  .inherit-bg{
+    color:inherit;
+  }
+`;

package/core/components/ui/alert/alert.js

@@ -40,7 +40,7 @@ let Alert = class Alert extends LitElement {
                   </div>
                   <div >
                     ${this.label ? html `<span class="label">${this.label} :</span>` : nothing}
-                    ${this.text} <slot><slot>
+                    ${this.text} <slot></slot>
                   </div>
                 </div>`;
     }

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

@@ -110,7 +110,7 @@ export declare class Button extends Button_base {
     /**
      * target
      */
-    target: "_self" | "_blank" | null;
+    target?: "_self" | "_blank" | "_parent" | "_top";
     /**
      * L'url
      */

package/core/components/ui/button/button.js

@@ -74,10 +74,6 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
         this.loading = false;
         this.hasPrefix = false;
         this.hasSuffix = false;
-        /**
-         * target
-         */
-        this.target = null;
         /**
          * L'url
          */

package/core/components/ui/card/card-footer.d.ts

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

package/core/components/ui/card/card-footer.js

@@ -4,24 +4,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
 const tagName = "sonic-card-footer";
 let CardFooter = class CardFooter extends LitElement {
+    // static styles = [
+    //   css`
+    //     :host {
+    //     }
+    //   `
+    // ];
     render() {
         return html `
       <slot></slot>
     `;
     }
 };
-CardFooter.styles = [
-    css `
-      :host {
-     
-      }
-   
-    `
-];
 CardFooter = __decorate([
     customElement(tagName)
 ], CardFooter);

package/core/components/ui/card/card-main.d.ts

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

package/core/components/ui/card/card-main.js

@@ -4,10 +4,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
 const tagName = "sonic-card-main";
 let CardMain = class CardMain extends LitElement {
+    // static styles = [
+    //   css`
+    //     :host {
+    //     }
+    //   `
+    // ];
     render() {
         return html `
       <div>
@@ -16,14 +22,6 @@ let CardMain = class CardMain extends LitElement {
     `;
     }
 };
-CardMain.styles = [
-    css `
-      :host {
-     
-      }
-   
-    `
-];
 CardMain = __decorate([
     customElement(tagName)
 ], CardMain);

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

@@ -90,6 +90,7 @@ declare const Checkbox_base: {
 } & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
 export declare class Checkbox extends Checkbox_base {
     static styles: CSSResultGroup[];
+    touched: boolean;
     iconName: string;
     description: string;
     label: string;

package/core/components/ui/form/checkbox/checkbox.js

@@ -36,6 +36,7 @@ const tagName = "sonic-checkbox";
 let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscriber(LitElement)))) {
     constructor() {
         super(...arguments);
+        this.touched = false;
         this.iconName = "check";
         this.description = "";
         this.label = "";
@@ -80,6 +81,11 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
 };
 Checkbox.styles = [
     css `
+
+      :host{
+        --sc-checkbox-border-width: var(--sc-form-border-width);
+        --sc-checkbox-border-color:  transparent;
+      }
       * {
         box-sizing: border-box;
       }
@@ -109,6 +115,7 @@ Checkbox.styles = [
         outline: none;
         margin: 0;
         background-color: var(--sc-base-200);
+        border:var(--sc-checkbox-border-width) solid var(--sc-checkbox-border-color);
       }
 
       input:focus,
@@ -175,8 +182,20 @@ Checkbox.styles = [
       .hidden {
         display: none;
       }
+
+      /*ERROR*/
+      :host([touched]) .checkbox-container:has(input:not(:focus):invalid) {
+        --sc-checkbox-border-color:var(--sc-danger);
+      }
+      :host([touched]) .checkbox-container:has(input:not(:focus):invalid) .checkbox-text{
+        color:var(--sc-danger);
+      }
+
     `,
 ];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Checkbox.prototype, "touched", void 0);
 __decorate([
     property({ type: String })
 ], Checkbox.prototype, "iconName", void 0);

package/core/components/ui/form/css/form-control.js

@@ -6,8 +6,7 @@ export const formControl = css `
 
   :host {
     --sc-input-height: var(--sc-form-height, 2.5em);
-    --sc-input-border-with: var(--sc-form-border-width, 0.1rem);
-    --sc-input-border: var(--sc-input-border-with) solid var(--sc-input-border-color, var(--sc-base-300, #aaa));
+    --sc-input-border-width: var(--sc-form-border-width, 0.1rem);
     --sc-input-color: var(--sc-base-content, #1f2937);
 
     --sc-item-rounded-tr: var(--sc-input-rounded, var(--sc-rounded));
@@ -42,7 +41,7 @@ export const formControl = css `
 
     font-family: var(--sc-input-ff);
     background-color: var(--sc-input-bg, var(--sc-base, #fff));
-    border: var(--sc-input-border);
+    border: var(--sc-input-border-width) solid var(--sc-input-border-color, var(--sc-base-300, #aaa));
     width: 100%;
     font-size: var(--sc-input-fs);
 
@@ -83,16 +82,16 @@ export const formControl = css `
     border-radius: var(--sc-item-rounded-tl) 0 0 var(--sc-item-rounded-bl);
     background-color: var(--sc-input-prefix-bg);
     color: var(--sc-input-prefix-color);
-    border: var(--sc-input-border-with) solid var(--sc-input-prefix-border-color);
-    margin-right: calc(-1 * var(--sc-input-border-with));
+    border: var(--sc-input-border-width) solid var(--sc-input-prefix-border-color);
+    margin-right: calc(-1 * var(--sc-input-border-width));
   }
 
   :host(:not([inlineContent])) slot[name="suffix"] {
     border-radius: 0 var(--sc-item-rounded-tr) var(--sc-item-rounded-br) 0;
     background-color: var(--sc-input-suffix-bg);
     color: var(--sc-input-suffix-color);
-    border: var(--sc-input-border-with) solid var(--sc-input-suffix-border-color);
-    margin-left: calc(-1 * var(--sc-input-border-with));
+    border: var(--sc-input-border-width) solid var(--sc-input-suffix-border-color);
+    margin-left: calc(-1 * var(--sc-input-border-width));
   }
 
   :host(:not([inlineContent])) .has-prefix .form-element {
@@ -140,14 +139,7 @@ export const formControl = css `
     --sc-input-bg: transparent;
   }
 
-  /*ERROR*/
-  :host([error]) {
-    --sc-input-border-color: var(--sc-danger);
-  }
-
-  :host :not(select):not(textarea):not([value=""]):not(:focus):invalid {
-    --sc-input-color: var(--sc-danger);
-  }
+ 
 
   /*Disbaled*/
   :host([disabled]) .form-element {
@@ -192,30 +184,41 @@ export const formControl = css `
     all: unset !important;
   }
 
-  /*Textarea scrollbar*/
-  textarea::-webkit-scrollbar {
-    width: 0.4rem;
+  /*Utilitaires*/
+  .hidden {
+    display: none;
   }
-  textarea::-webkit-scrollbar-track {
-    width: 0.4rem;
+  .contents {
+    display: contents;
   }
-  textarea::-webkit-scrollbar-thumb {
-    background-color: var(--sc-base-500);
-    width: 0.4rem;
-    border-radius: var(--sc-rounded);
+
+
+  /*ERROR*/
+  :host([error]) {
+    --sc-input-border-color: var(--sc-danger);
   }
-  textarea::-webkit-scrollbar {
-    width: 0.4rem;
+
+  :host input:visited{
+    display:none;
   }
-  textarea::-webkit-scrollbar-track {
-    width: 0.4rem;
+
+  :host([touched]) :not(:focus):invalid {
+    --sc-input-border-color: var(--sc-danger);
+    --sc-input-color: var(--sc-danger);
   }
 
-  /*Utilitaires*/
-  .hidden {
-    display: none;
+  :host([touched]) :not(:focus):invalid + .select-chevron{
+    --sc-input-color: var(--sc-danger);
   }
-  .contents {
-    display: contents;
+
+  /*VALID*/
+  :host([touched]) :not([value=""]):not(:focus):valid {
+    --sc-input-border-color: var(--sc-success);
+    --sc-input-color: var(--sc-success);
   }
+
+  :host([touched]) :not(:focus):valid + .select-chevron{
+    --sc-input-color: var(--sc-success);
+  }
+
 `;

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

@@ -9,7 +9,7 @@ export declare class Fieldset extends Fieldset_base {
     /**
      * Lier à un formulaire qui ne serait pas parent du fieldset
      */
-    form: string;
+    form?: string;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

package/core/components/ui/form/fieldset/fieldset.js

@@ -17,10 +17,6 @@ let Fieldset = class Fieldset extends Subscriber(LitElement) {
          * Désactiver le fieldset
          */
         this.disabled = false;
-        /**
-         * Lier à un formulaire qui ne serait pas parent du fieldset
-         */
-        this.form = "";
     }
     render() {
         return html `<fieldset form="${ifDefined(this.form)}" ?disabled="${this.disabled}">

package/core/components/ui/form/fieldset/legend.d.ts

@@ -2,10 +2,10 @@ import { LitElement } from "lit";
 import "@supersoniks/concorde/core/components/ui/form/fieldset/legend-description";
 export declare class Legend extends LitElement {
     static styles: import("lit").CSSResult[];
-    description: string;
-    label: string;
+    description?: string;
+    label?: string;
     iconName?: string;
+    iconLibrary?: string;
     iconPrefix?: string;
-    iconLibray?: string;
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/form/fieldset/legend.js

@@ -10,11 +10,6 @@ import "@supersoniks/concorde/core/components/ui/form/fieldset/legend-descriptio
 import { ifDefined } from "lit/directives/if-defined.js";
 const tagName = "sonic-legend";
 let Legend = class Legend extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.description = "";
-        this.label = "";
-    }
     render() {
         return html `<legend part="legend">
       ${this.iconName
@@ -22,7 +17,7 @@ let Legend = class Legend extends LitElement {
             <sonic-icon 
             name=${this.iconName} 
             prefix=${ifDefined(this.iconPrefix)}
-            library=${ifDefined(this.iconLibray)}></sonic-icon>
+            library=${ifDefined(this.iconLibrary)}></sonic-icon>
           </div>`
             : ""}
 
@@ -82,10 +77,10 @@ __decorate([
 ], Legend.prototype, "iconName", void 0);
 __decorate([
     property({ type: String })
-], Legend.prototype, "iconPrefix", void 0);
+], Legend.prototype, "iconLibrary", void 0);
 __decorate([
     property({ type: String })
-], Legend.prototype, "iconLibray", void 0);
+], Legend.prototype, "iconPrefix", void 0);
 Legend = __decorate([
     customElement(tagName)
 ], Legend);

package/core/components/ui/form/select/select.js

@@ -132,7 +132,7 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
         })}
             <slot></slot>
           </select>
-          <sonic-icon  name="nav-arrow-down" size="${this.size}"></sonic-icon>
+          <sonic-icon  class="select-chevron" name="nav-arrow-down" size="${this.size}"></sonic-icon>
         </div>
         <slot name="suffix" @slotchange=${this.onSlotChange}></slot>
       </div>
@@ -154,12 +154,14 @@ Select.styles = [
         position: relative;
         width: 100%;
       }
+
       sonic-icon {
         position: absolute;
         right: 1em;
         top: 50%;
         pointer-events: none;
         transform: translateY(-50%);
+        color:var(--sc-input-color);
       }
 
       option {
@@ -167,7 +169,6 @@ Select.styles = [
         color: var(--sc-base-content);
         background: var(--sc-base);
       }
-
       
     `,
 ];

package/core/components/ui/form/textarea/textarea.js

@@ -11,6 +11,7 @@ import { formControl } from "../css/form-control";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import FormInput from "@supersoniks/concorde/core/mixins/FormInput";
+import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
 const tagName = "sonic-textarea";
 let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElement))) {
     constructor() {
@@ -77,7 +78,7 @@ let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElemen
           ?readonly=${this.readonly}
           spellcheck=${ifDefined(this.spellcheck)}
           wrap=${ifDefined(this.wrap)}
-          class="form-element textarea"
+          class="form-element textarea custom-scroll"
           placeholder="${this.placeholder}"
         >
 ${this.value}</textarea
@@ -92,6 +93,7 @@ ${this.value}</textarea
 };
 Textarea.styles = [
     formControl,
+    customScroll,
     css `
       textarea {
         font-size: inherit;

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

@@ -9,6 +9,7 @@ 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";
@@ -79,7 +80,7 @@ let Modal = class Modal extends Subscriber(LitElement) {
       >
         <div
           part="modal"
-          class="modal"
+          class="modal custom-scroll"
           style=${styleMap(modalStyles)}
           ${animate({
             keyframeOptions: {
@@ -90,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>
@@ -146,6 +147,7 @@ let Modal = class Modal extends Subscriber(LitElement) {
     }
 };
 Modal.styles = [
+    customScroll,
     css `
       :host {
         --sc-modal-py: 2.5rem;
@@ -176,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;
@@ -208,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);
       }
 

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

@@ -17,17 +17,8 @@ TableCaption.styles = [
       :host {
         display:table-caption;
         font-size:.75rem;
-        color:var(--sc-base-400);
-        text-align:center;
-      }
-
-      :host:before{
-        content:"—";
-        margin-right:.25em;
-      }
-      :host:after{
-        content:"—";
-        margin-left:.25em;
+        color:var(--sc-table-caption-color);
+        padding: var(--sc-table-td-py) var(--sc-table-td-px) calc(2 * var(--sc-table-td-py) );
       }
     `
 ];

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

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

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

@@ -9,29 +9,35 @@ 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 {
     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)}
-      ><slot></slot></td>`;
+    >
+      <slot></slot>
+    </td>`;
     }
 };
 TableTd.styles = [
+    typesColor,
     css `
       :host {
         display: contents;
       }
       td {
-        all:inherit;
-        display:table-cell;
+        all: inherit;
+        display: table-cell;
         padding: var(--sc-table-td-py) var(--sc-table-td-px);
-      }`
+      }
+    `,
 ];
 __decorate([
     property({ type: Number })
@@ -42,6 +48,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], TableTd.prototype, "align", void 0);
+__decorate([
+    property({ type: String })
+], TableTd.prototype, "minWidth", void 0);
 TableTd = __decorate([
     customElement(tagName)
 ], TableTd);

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

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