@supersoniks/concorde 1.1.9 → 1.1.10

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

@@ -0,0 +1,67 @@
+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 './card-header-descripton.ts';
+let CardHeader = class CardHeader extends LitElement {
+    render() {
+        return html `
+      <div class="header">
+        <div class="header-content">
+          ${this.label}
+          ${this.description ? html `<sonic-card-header-description>${this.description}</sonic-card-header-description>` : ""} 
+          <slot></slot>
+        </div>
+        <slot name="suffix"></slot>   
+      </div>
+    `;
+    }
+};
+CardHeader.styles = [
+    css `
+
+      :host {
+        --sc-card-header-mb: 1rem;
+        --sc-card-header-font-size: 1.875rem;
+        --sc-card-header-font-weight: var(--sc-headings-font-weight);
+        --sc-card-header-font-style: var(--sc-headings-font-style);
+        --sc-card-header-family: var(--sc-headings-font-family);
+        --sc-card-header-line-height: var(--sc-headings-line-height);
+      }
+      
+      .header {
+        display: flex;
+        align-items: flex-start;
+        gap: .5em 1em;
+        margin-bottom: var(--sc-card-header-mb);
+        line-height: var(--sc-card-header-line-height);
+        font-family: var(--sc-card-header-font-family);
+        font-size: var(--sc-card-header-font-size);
+        font-style: var(--sc-card-header-font-style);
+        font-weight: var(--sc-card-header-font-weight);
+      }
+      
+      .header-content {
+        flex-grow: 1;
+      }
+
+      slot[name="suffix"] {
+        flex-shrink: 0;
+      }
+
+    `
+];
+__decorate([
+    property()
+], CardHeader.prototype, "label", void 0);
+__decorate([
+    property()
+], CardHeader.prototype, "description", void 0);
+CardHeader = __decorate([
+    customElement("sonic-card-header")
+], CardHeader);
+export { CardHeader };

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,29 @@
+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 CardMain = class CardMain extends LitElement {
+    render() {
+        return html `
+      <div>
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+CardMain.styles = [
+    css `
+      :host {
+     
+      }
+   
+    `
+];
+CardMain = __decorate([
+    customElement("sonic-card-main")
+], CardMain);
+export { CardMain };

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

@@ -0,0 +1,12 @@
+import { LitElement } from "lit";
+import "./card-header.ts";
+import "./card-main.ts";
+import "./card-footer.ts";
+export declare class Card extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Le type change surtout la couleur composant
+     */
+    type: "default" | "primary" | "warning" | "danger" | "success" | "info" | "neutral" | "invert";
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,90 @@
+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 "./card-header.ts";
+import "./card-main.ts";
+import "./card-footer.ts";
+let Card = class Card extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Le type change surtout la couleur composant
+         */
+        this.type = "default";
+    }
+    render() {
+        return html `
+      <div part="card" class="card">
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+Card.styles = [
+    css `
+      :host {
+        --sc-card-padding: 1.5rem;
+        --sc-card-color: var(--sc-base-content);
+        --sc-card-bg: var(--sc-base);
+        --sc-card-rounded: var(--sc-rounded-lg);
+        --sc-card-shadow: var(--sc-shadow-lg);
+      }
+
+      .card {
+        padding: var(--sc-card-padding);
+        background-color: var(--sc-card-bg);
+        border-radius: var(--sc-card-rounded);
+        box-shadow: var(--sc-card-shadow);
+        color: var(--sc-card-color);
+      }
+
+      /*TYPES*/
+      :host([type="primary"]) {
+        --sc-card-color: var(--sc-primary-content);
+        --sc-badge-bg: var(--sc-primary);
+      }
+      :host([type="warning"]) {
+        --sc-card-color: var(--sc-warning-content);
+        --sc-card-bg: var(--sc-warning);
+      }
+      :host([type="danger"]) {
+        --sc-card-color: var(--sc-danger-content);
+        --sc-card-bg: var(--sc-danger);
+      }
+      :host([type="info"]) {
+        --sc-card-color: var(--sc-info-content);
+        --sc-card-bg: var(--sc-info);
+      }
+      :host([type="success"]) {
+        --sc-card-color: var(--sc-success-content);
+        --sc-card-bg: var(--sc-success);
+      }
+
+      :host([type="light"]) {
+        --sc-card-color: var(--sc-base-content);
+        --sc-card-bg: var(--sc-base-100);
+      }
+
+      :host([type="neutral"]) {
+        --sc-card-color: var(--sc-base);
+        --sc-card-bg: var(--sc-base-content);
+      }
+
+      :host([type="invert"]) {
+        --sc-card-color: var(--sc-base);
+        --sc-card-bg: var(--sc-base-900);
+      }
+    `,
+];
+__decorate([
+    property({ type: String, reflect: true })
+], Card.prototype, "type", void 0);
+Card = __decorate([
+    customElement("sonic-card")
+], Card);
+export { Card };

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

@@ -31,7 +31,6 @@ declare const Checkbox_base: {
         noShadowDom: string | null;
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
-        makeShadow(props: Record<string, any>, value: any): any;
         dispatchEvent(event: Event): void;
         setAttribute(name: string, value: string): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
@@ -71,7 +70,6 @@ declare const Checkbox_base: {
         noShadowDom: string | null;
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
-        makeShadow(props: Record<string, any>, value: any): any;
         dispatchEvent(event: Event): void;
         setAttribute(name: string, value: string): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;

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

@@ -55,9 +55,9 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
             <input 
               type="${this.type}"
               @change=${this.handleChange}
-              disabled="${ifDefined(this.disabled)}"
-              .checked="${ifDefined(this.checked)}"
-              required=${ifDefined(this.required)}
+              ?disabled=${this.disabled}
+              ?required=${this.required}
+              ?checked=${this.checked}
               .name=${this.name}
               .value=${this.value}
               autofocus=${ifDefined(this.autofocus)}

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

@@ -27,6 +27,7 @@ export const formControl = css `
     --sc-input-suffix-bg: var(--sc-input-bg);
     --sc-input-suffix-border-color: var(--sc-input-border-color);
     --sc-label-fs: var(--sc-input-fs);
+    --sc-label-fw: normal;
   }
 
   .form-element {
@@ -55,6 +56,7 @@ export const formControl = css `
 
   label {
     font-size: var(--sc-label-fs);
+    font-weight: var(--sc-label-fw);
     line-height: 1.2;
   }
 

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

@@ -39,7 +39,7 @@ Fieldset.styles = [
         margin-bottom: var(--sc-fieldset-mb);
         display: block;
         border: var(--sc-fieldset-border-width) solid var(--sc-fieldset-border-color) !important;
-        padding: 1.25rem;
+        padding: 1.8rem 1.25rem;
         border-radius: var(--sc-rounded-lg);
       }
 

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

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

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

@@ -0,0 +1,35 @@
+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 LegendDescription = class LegendDescription extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+LegendDescription.styles = [
+    css `
+      :host {
+        color: var(--sc-neutral-500);
+        font-size: 1.25rem;
+        line-height: 1.2;
+        display: block;
+        font-weight: var(--sc-font-weight-base);
+        font-style: var(--sc-font-style-base);
+        margin-top: 0.25em;
+      }
+    `,
+];
+LegendDescription = __decorate([
+    customElement("sonic-legend-description")
+], LegendDescription);
+export { LegendDescription };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define("sonic-legend-description", LegendDescription);
+}
+catch (e) { }

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

@@ -1,11 +1,10 @@
 import { LitElement } from "lit";
-declare const Legend_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
-export declare class Legend extends Legend_base {
+import './legend-description.ts';
+export declare class Legend extends LitElement {
     static styles: import("lit").CSSResult[];
-    iconName: string;
-    iconPrefix: string;
     description: string;
     label: string;
+    iconName: string;
+    iconPrefix: string;
     render(): import("lit-html").TemplateResult<1>;
 }
-export {};

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

@@ -6,23 +6,27 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
-let Legend = class Legend extends Subscriber(LitElement) {
+import './legend-description.ts';
+let Legend = class Legend extends LitElement {
     constructor() {
         super(...arguments);
-        this.iconName = "check";
-        this.iconPrefix = "";
         this.description = "";
         this.label = "";
+        this.iconName = "";
+        this.iconPrefix = "";
     }
     render() {
         return html `<legend part="legend">
-      <div class="legend-content">
-        ${this.label}<slot></slot>
-        <slot name="description" class="description"> ${this.description ? html `${this.description}` : ""}</slot>
-      </div>
-      <slot name="suffix"></slot>
-    </legend>`;
+    
+                  ${this.iconName ? html `<div class="icon"><sonic-icon name=${this.iconName} prefix=${this.iconPrefix}></sonic-icon></div>` : ""}
+
+                  <div class="legend-content">
+                    ${this.label}
+                    ${this.description ? html `<sonic-legend-description>${this.description}</sonic-legend-description>` : ""}
+                    <slot></slot>
+                  </div>
+                  <slot name="suffix"></slot>
+                </legend>`;
     }
 };
 Legend.styles = [
@@ -46,24 +50,16 @@ Legend.styles = [
         padding: 0;
         display: flex;
         width: 100%;
-        align-items: center;
+        align-items: flex-start;
+        gap: 0.5em;
       }
 
-      slot[name="suffix"]:not(:empty) {
+      slot[name="suffix"] {
         display: block;
         margin-left: auto;
         flex-shrink: 0;
       }
 
-      .description {
-        color: var(--sc-neutral-500);
-        font-size: 1.25rem;
-        line-height: 1.2;
-        display: block;
-        font-weight: normal;
-        font-style: normal;
-        margin-top: 0.25eem;
-      }
       .legend-content {
         flex-grow: 1;
       }
@@ -71,16 +67,16 @@ Legend.styles = [
 ];
 __decorate([
     property({ type: String })
-], Legend.prototype, "iconName", void 0);
+], Legend.prototype, "description", void 0);
 __decorate([
     property({ type: String })
-], Legend.prototype, "iconPrefix", void 0);
+], Legend.prototype, "label", void 0);
 __decorate([
     property({ type: String })
-], Legend.prototype, "description", void 0);
+], Legend.prototype, "iconName", void 0);
 __decorate([
     property({ type: String })
-], Legend.prototype, "label", void 0);
+], Legend.prototype, "iconPrefix", void 0);
 Legend = __decorate([
     customElement("sonic-legend")
 ], Legend);

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

@@ -26,7 +26,6 @@ declare const Input_base: {
         noShadowDom: string | null;
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
-        makeShadow(props: Record<string, any>, value: any): any;
         dispatchEvent(event: Event): void;
         setAttribute(name: string, value: string): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
@@ -59,7 +58,7 @@ export declare class Input extends Input_base {
     size: "" | "xs" | "sm" | "lg";
     list: "" | null;
     placeholder: string;
-    readonly: boolean | null;
+    readonly: boolean;
     pattern: string | null;
     min: string | null;
     max: string | null;

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

@@ -31,7 +31,7 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
         this.size = "";
         this.list = null;
         this.placeholder = "";
-        this.readonly = null;
+        this.readonly = false;
         this.pattern = null;
         this.min = null;
         this.max = null;
@@ -79,9 +79,9 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
             class="form-element input"
             type=${this.type}
             @input=${this.handleChange}
-            disabled="${ifDefined(this.disabled)}"
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
             list=${ifDefined(this.list)}
-            readonly=${ifDefined(this.readonly)}
             autofocus=${ifDefined(this.autofocus)}
             required=${ifDefined(this.required)}
             tabindex=${ifDefined(this.tabindex)}

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

@@ -26,7 +26,6 @@ declare const Textarea_base: {
         noShadowDom: string | null;
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
-        makeShadow(props: Record<string, any>, value: any): any;
         dispatchEvent(event: Event): void;
         setAttribute(name: string, value: string): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;

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

@@ -56,14 +56,14 @@ let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElemen
       <div class="form-control">
         <textarea
           @input=${this.handleChange}
-          disabled=${ifDefined(this.disabled)}
+          ?disabled=${this.disabled}
           autocomplete=${ifDefined(this.autocomplete)}
           autofocus=${ifDefined(this.autofocus)}
           rows=${ifDefined(this.rows)}
           cols=${ifDefined(this.cols)}
           maxlength=${ifDefined(this.maxlength)}
           minlength=${ifDefined(this.minlength)}
-          readonly=${ifDefined(this.readonly)}
+          ?readonly=${this.readonly}
           spellcheck=${ifDefined(this.spellcheck)}
           wrap=${ifDefined(this.wrap)}
           class="form-element textarea"

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

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

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>;
+}