@supersoniks/concorde 1.1.30 → 1.1.34

package/core/components/functional/date/date.js

@@ -57,13 +57,17 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
      * Retourne un tableau des différentes parties de la date en fonction des options données, de la date de début et de fin.
      */
     getDatesParts(start_date, end_date, options) {
-        const format = new Intl.DateTimeFormat(this.language || this.pageLanguage, options);
         let start = this.startDateObject;
         start.setTime(start_date * 1000);
         let parts = null;
         if (end_date > 0) {
             let end = this.endDateObject;
             end.setTime(end_date * 1000);
+            if (start.toJSON().substring(0, 10) != end.toJSON().substring(0, 10)) {
+                delete options.hour;
+                delete options.minute;
+            }
+            let format = new Intl.DateTimeFormat(this.language || this.pageLanguage, options);
             parts = format.formatRangeToParts(start, end);
             if (this.designMode) {
                 for (let part of parts) {
@@ -85,8 +89,10 @@ let SonicDate = class SonicDate extends Subscriber(TemplatesContainer(LitElement
                     parts.unshift({ type: "from", value: this.duAu[0] + " ", source: "shared" });
             }
         }
-        else
+        else {
+            let format = new Intl.DateTimeFormat(this.language || this.pageLanguage, options);
             parts = format.formatToParts(start);
+        }
         parts[0].value = Format.ucFirst(parts[0].value);
         parts = parts.filter((p) => p.hidden !== true);
         return parts;

package/core/components/functional/list/list.js

@@ -4,7 +4,7 @@ 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, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import Fetcher from "@supersoniks/concorde/core/mixins/Fetcher";
@@ -18,7 +18,7 @@ import TemplatesContainer from "@supersoniks/concorde/core/mixins/TemplatesConta
 /**
  *  ### List boucle sur sa propriété "props" et crée des éléments a partir des données en bouclant également sur ses templates.
  *
-* Extends mixins : Fetcher, [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page)
+ * Extends mixins : Fetcher, [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page)
  *
  * * Si le composant possède un attribut *fetch*, il charge un contenu via un appel d'api web.<br>
  * Voir [fetcher](./?path=/docs/core-components-functional-fetch--basic) pour la configuration des autres attributs.
@@ -62,14 +62,13 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
             : html `<sonic-loader mode="inline"></sonic-loader>`;
     }
     renderNoResultState() {
-        return html `
-      <div class="sonic-no-result-container">
-        <sonic-icon name="emoji-puzzled" size="lg"></sonic-icon
-        ><span class="sonic-no-result-text">${this.props}</span>
-      </div>`;
+        return html ` <div class="sonic-no-result-container">
+      <sonic-icon name="emoji-puzzled" size="lg"></sonic-icon><span class="sonic-no-result-text">${this.props}</span>
+    </div>`;
     }
     formatProps() {
         let props = this.props;
+        let response = props._sonic_http_response_;
         let extractValues = this.hasAttribute("extractValues");
         //si props n'est pas un tableau on l'adapte
         if (!Array.isArray(props)) {
@@ -77,9 +76,14 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
                 props = Object.entries(props).map(([k, v]) => ({ key: k, value: v }));
             }
             else {
-                props = [props];
+                if (!response || response.ok)
+                    props = [props];
+                else {
+                    props = [];
+                }
             }
         }
+        props._sonic_http_response_ = response;
         return props;
     }
     render() {
@@ -121,12 +125,14 @@ let List = class List extends Fetcher(Subscriber(TemplatesContainer(LitElement))
       ${repeat(props, (item, index) => item[this.idKey] || index, (item, index) => {
             let templatePartName = item[this.templateKey];
             let hasCustomTemplate = templatePartName && this.templateParts[templatePartName];
-            counter++;
-            if (hasCustomTemplate)
-                counter = -1;
             let key = extractValues ? item.key : index;
+            if (key == "_sonic_http_response_")
+                return nothing;
             let pub = this.publisher[key];
             pub._key_ = key + "";
+            counter++;
+            if (hasCustomTemplate)
+                counter = -1;
             return (item &&
                 html `
               <sonic-subscriber

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

@@ -1,5 +1,5 @@
 import { LitElement, nothing } from "lit";
-import '@supersoniks/concorde/core/components/functional/list/list';
+import "@supersoniks/concorde/core/components/functional/list/list";
 import { PublisherProxy } from "@supersoniks/concorde/core/utils/PublisherProxy.mjs";
 declare const Queue_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
 export default class Queue extends Queue_base {
@@ -14,6 +14,9 @@ export default class Queue extends Queue_base {
     limit: number;
     offset: number;
     filteredFields: string;
+    _displayContents: boolean;
+    set displayContents(value: boolean);
+    get displayContents(): boolean;
     static instanceCounter: number;
     connectedCallback(): void;
     filterPublisher: PublisherProxy | null;

package/core/components/functional/queue/queue.js

@@ -8,10 +8,10 @@ var Queue_1;
 import { html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
-import { repeat } from 'lit/directives/repeat.js';
+import { repeat } from "lit/directives/repeat.js";
 import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy.mjs";
 import { ifDefined } from "lit/directives/if-defined.js";
-import '@supersoniks/concorde/core/components/functional/list/list';
+import "@supersoniks/concorde/core/components/functional/list/list";
 /**
  *### Une Queue charge du contenu par lot selon l'expression renseignée dans l'attribut *dataProviderExpression*.
  * * Chaque lot est chargé par un composant [List](./?path=/docs/core-components-functional-list-list--basic) dont le dataProvider créé à partir de l'attribut dataProviderExpression
@@ -39,6 +39,7 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
         this.limit = 5;
         this.offset = 0;
         this.filteredFields = "";
+        this._displayContents = false;
         this.filterPublisher = null;
         this.filterTimeoutId = undefined;
         /**
@@ -52,6 +53,12 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
         this.currentScrollPosition = undefined;
         this.listDataProviders = [];
     }
+    set displayContents(value) {
+        this._displayContents = value;
+    }
+    get displayContents() {
+        return this._displayContents;
+    }
     connectedCallback() {
         this.noShadowDom = "";
         this.defferedDebug = this.hasAttribute("debug") || null;
@@ -142,6 +149,8 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
         this.lastRequestTime = new Date().getTime();
     }
     render() {
+        let displayStyle = this.displayContents ? "contents" : "inline";
+        this.style.display = displayStyle;
         if (this.currentScrollPosition) {
             window.requestAnimationFrame(() => {
                 if (document.scrollingElement)
@@ -154,10 +163,11 @@ let Queue = Queue_1 = class Queue extends Subscriber(LitElement) {
         return html `
       ${repeat(this.props, (item) => item.id, (item, index) => {
             var _a;
-            let templates = index == 0 ? this.templates : (_a = this.templates) === null || _a === void 0 ? void 0 : _a.filter(elt => elt.getAttribute("data-value") != "no-item");
+            let templates = index == 0 ? this.templates : (_a = this.templates) === null || _a === void 0 ? void 0 : _a.filter((elt) => elt.getAttribute("data-value") != "no-item");
             return html `
             <sonic-list
               fetch
+              style=${displayStyle}
               .itemPropertyMap=${this.itemPropertyMap}
               debug=${ifDefined(this.defferedDebug)}
               @load=${this.next}
@@ -192,6 +202,9 @@ __decorate([
 __decorate([
     property()
 ], Queue.prototype, "filteredFields", void 0);
+__decorate([
+    property()
+], Queue.prototype, "displayContents", null);
 __decorate([
     property({ type: String })
 ], Queue.prototype, "dataProviderExpression", void 0);

package/core/components/functional/submit/submit.js

@@ -55,55 +55,84 @@ let Submit = class Submit extends Subscriber(LitElement) {
         this.api = new API(this.getApiConfiguration());
     }
     submit() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function* () {
             const formPublisher = PublisherManager.getInstance().get(this.getAncestorAttributeValue("formDataProvider"));
             //
-            // Validation du formulaire 
+            // Validation du formulaire
             formPublisher.isFormValid = true;
             formPublisher.invalidate();
             if (!formPublisher.isFormValid.get())
                 return;
-            this.publisher.disabled = true;
+            if (this.publisher)
+                this.publisher.disabled = true;
             formPublisher.isFormValid;
             //
             //Recup données
             let method = ((_a = this.getAttribute("method")) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) || "post";
-            let postData = formPublisher.get();
-            delete postData.isFormValid;
-            let headerData = PublisherManager.getInstance().get(this.getAncestorAttributeValue("headersDataProvider")).get();
+            let sendAsFormData = this.hasAttribute("sendAsFormData");
+            let formData = formPublisher.get();
+            delete formData.isFormValid;
+            const headerPublisher = PublisherManager.getInstance().get(this.getAncestorAttributeValue("headersDataProvider"));
+            let headerData = headerPublisher.get();
             let result = null;
             let dataProvider = this.getAncestorAttributeValue("dataProvider");
             let endPoint = this.endPoint || dataProvider;
             Loader.show();
-            //
-            //envoi données
-            switch (method) {
-                case "put":
-                    result = yield ((_b = this.api) === null || _b === void 0 ? void 0 : _b.put(endPoint, postData, headerData));
-                    break;
-                case "delete":
-                    result = yield ((_c = this.api) === null || _c === void 0 ? void 0 : _c.delete(endPoint, postData, headerData));
-                    break;
-                case "get":
-                    result = yield ((_d = this.api) === null || _d === void 0 ? void 0 : _d.get(endPoint));
-                    break;
-                default:
-                    result = yield ((_e = this.api) === null || _e === void 0 ? void 0 : _e.post(endPoint, postData, headerData));
-                    break;
-            }
-            Loader.hide();
-            if (!result)
-                result = { messages: [{ content: "Network Error", status: "error" }] };
-            let clearedDataProvider = this.getAncestorAttributeValue("clearedDataOnSuccess");
-            if (clearedDataProvider) {
-                clearedDataProvider.split(" ").forEach(dataProvider => PublisherManager.get(dataProvider).set({}));
+            let sendData = () => __awaiter(this, void 0, void 0, function* () {
+                var _d, _e, _f, _g, _h;
+                //
+                //envoi données
+                if (sendAsFormData) {
+                    result = yield ((_d = this.api) === null || _d === void 0 ? void 0 : _d.submitFormData(endPoint, formData, headerData));
+                }
+                else {
+                    switch (method) {
+                        case "put":
+                            result = yield ((_e = this.api) === null || _e === void 0 ? void 0 : _e.put(endPoint, formData, headerData));
+                            break;
+                        case "delete":
+                            result = yield ((_f = this.api) === null || _f === void 0 ? void 0 : _f.delete(endPoint, formData, headerData));
+                            break;
+                        case "get":
+                            result = yield ((_g = this.api) === null || _g === void 0 ? void 0 : _g.get(endPoint, headerData));
+                            break;
+                        default:
+                            result = yield ((_h = this.api) === null || _h === void 0 ? void 0 : _h.post(endPoint, formData, headerData));
+                            break;
+                    }
+                }
+                Loader.hide();
+                //Je garde ça, mais normalement il y a toujours quelquechose
+                if (!result)
+                    result = { messages: [{ content: "Network Error", status: "error" }] };
+                let clearedDataProvider = this.getAncestorAttributeValue("clearedDataOnSuccess");
+                if (clearedDataProvider) {
+                    clearedDataProvider.split(" ").forEach((dataProvider) => PublisherManager.get(dataProvider).set({}));
+                }
+                if (this.submitResultKey) {
+                    result = Objects.traverse(result, this.submitResultKey.split("."), true);
+                }
+                PublisherManager.getInstance().get(this.getAncestorAttributeValue("submitResultDataProvider")).set(result);
+                if (this.publisher)
+                    this.publisher.disabled = false;
+            });
+            let captchaPublisher = headerPublisher.needsCaptchaValidation.get()
+                ? headerPublisher
+                : formPublisher.needsCaptchaValidation.get()
+                    ? formPublisher
+                    : null;
+            if (captchaPublisher) {
+                captchaPublisher.action = method + "//" + ((_c = (_b = dataProvider === null || dataProvider === void 0 ? void 0 : dataProvider.split("?")[0]) !== null && _b !== void 0 ? _b : this.getAncestorAttributeValue("formDataProvider")) !== null && _c !== void 0 ? _c : "submit");
+                captchaPublisher.captchaToken = "request_token";
+                captchaPublisher.captchaToken.onAssign((token) => {
+                    if (token != "request_token")
+                        sendData();
+                });
             }
-            if (this.submitResultKey) {
-                result = Objects.traverse(result, this.submitResultKey.split("."), true);
+            else {
+                sendData();
             }
-            PublisherManager.getInstance().get(this.getAncestorAttributeValue("submitResultDataProvider")).set(result);
-            this.publisher.disabled = false;
         });
     }
     render() {
@@ -111,7 +140,7 @@ let Submit = class Submit extends Subscriber(LitElement) {
     }
 };
 Submit.styles = css `
-    [data-disabled]{
+    [data-disabled] {
       opacity: 0.3;
       pointer-events: none;
       user-select: none;

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

@@ -1,26 +1,26 @@
 import { css } from "lit";
-export const fontSize = css `
-  /*SIZES*/
-  :host {
-    --sc-fs: 1rem;
-    font-size: var(--sc-fs);
-  }
-  :host([size="2xs"]) {
-    --sc-fs: 0.68rem;
-  }
-  :host([size="xs"]) {
-    --sc-fs: 0.75rem;
-  }
-  :host([size="sm"]) {
-    --sc-fs: 0.875rem;
-  }
-  :host([size="lg"]) {
-    --sc-fs: 1.125rem;
-  }
-  :host([size="xl"]) {
-    --sc-fs: 1.25rem;
-  }
-  :host([size="2xl"]) {
-    --sc-fs: 1.5rem;
-  }
+export const fontSize = css `
+  /*SIZES*/
+  :host {
+    --sc-fs: 1rem;
+    font-size: var(--sc-fs);
+  }
+  :host([size="2xs"]) {
+    --sc-fs: 0.68rem;
+  }
+  :host([size="xs"]) {
+    --sc-fs: 0.75rem;
+  }
+  :host([size="sm"]) {
+    --sc-fs: 0.875rem;
+  }
+  :host([size="lg"]) {
+    --sc-fs: 1.125rem;
+  }
+  :host([size="xl"]) {
+    --sc-fs: 1.25rem;
+  }
+  :host([size="2xl"]) {
+    --sc-fs: 1.5rem;
+  }
 `;

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

@@ -67,7 +67,7 @@ Alert.styles = [
         line-height: 1.2;
         border-radius: var(--sc-alert-rounded);
       }
-
+z
       .label {
         font-weight: var(--sc-alert-label-fw);
       }

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

@@ -3,8 +3,7 @@ declare const Button_base: {
     new (...args: any[]): {
         _value: string | null;
         value: string | null;
-        _name: string;
-        name: string;
+        forceAutoFill: boolean;
         unique: true | null;
         radio: true | null;
         _checked: true | null;
@@ -23,6 +22,8 @@ declare const Button_base: {
         required: boolean;
         disabled: true | null;
         formDataProvider: string;
+        _name: string;
+        name: string;
         props: any;
         isConnected: boolean;
         getAncestorAttributeValue(attributeName: string): string;

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

@@ -0,0 +1,17 @@
+import { LitElement } from "lit";
+declare const Captcha_base: (new (...args: any[]) => import("../../../mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+/**
+ * Un bouton simple avec deux slots, un nommé préfix et un nomé suffix de manière à pouvoir mettre (par exemple) une icone avant ou après le contenu.
+ * * L'objet et ses slot sont en display flex avec direction / alignement et justifications configurables
+ * * Le bouton est comparable au badge car il possèdent tous les deux les propriétés *type* (primary...), *variant*(outline, ghost), size(xs...)...
+ * * Le bouton possède cependant et notamment une propriété href contrairement à un badge
+ */
+export declare class Captcha extends Captcha_base {
+    key: string;
+    action: string | null;
+    formPublisher: any;
+    connectedCallback(): void;
+    requestToken(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/core/components/ui/captcha/captcha.js

@@ -0,0 +1,64 @@
+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 { Subscriber } from "@supersoniks/concorde/mixins";
+import { PublisherManager } from "@supersoniks/concorde/utils";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+const tagName = "sonic-captcha";
+/**
+ * Un bouton simple avec deux slots, un nommé préfix et un nomé suffix de manière à pouvoir mettre (par exemple) une icone avant ou après le contenu.
+ * * L'objet et ses slot sont en display flex avec direction / alignement et justifications configurables
+ * * Le bouton est comparable au badge car il possèdent tous les deux les propriétés *type* (primary...), *variant*(outline, ghost), size(xs...)...
+ * * Le bouton possède cependant et notamment une propriété href contrairement à un badge
+ */
+let Captcha = class Captcha extends Subscriber(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.key = "";
+        this.action = null;
+    }
+    connectedCallback() {
+        var _a;
+        const script = document.createElement("script");
+        script.src = "https://www.google.com/recaptcha/api.js?render=" + this.key;
+        document.head.appendChild(script);
+        super.connectedCallback();
+        this.formPublisher = PublisherManager.get((_a = this.getAncestorAttributeValue("headersDataProvider")) !== null && _a !== void 0 ? _a : this.getAncestorAttributeValue("formDataProvider"));
+        this.formPublisher.needsCaptchaValidation = true;
+        this.formPublisher.captchaToken.onAssign((v) => {
+            if (v == "request_token") {
+                this.requestToken();
+            }
+        });
+    }
+    requestToken() {
+        var _a, _b, _c;
+        const win = window;
+        // On récupère l'action liée au recaptcha,
+        // et on vérifie qu'il ne contienne que des caractères alpha-numériques, underscore et slash
+        let action = ((_c = (_a = this.action) !== null && _a !== void 0 ? _a : (_b = this.formPublisher.action) === null || _b === void 0 ? void 0 : _b.get()) !== null && _c !== void 0 ? _c : "submit").replace(/[^\w_\/]/g, "_");
+        delete this.formPublisher.action;
+        win.grecaptcha.ready(() => {
+            win.grecaptcha.execute(this.key, { action: action }).then((token) => {
+                this.formPublisher.captchaToken = token;
+            });
+        });
+    }
+    render() {
+        return html ` <slot></slot> `;
+    }
+};
+__decorate([
+    property()
+], Captcha.prototype, "key", void 0);
+__decorate([
+    property()
+], Captcha.prototype, "action", void 0);
+Captcha = __decorate([
+    customElement(tagName)
+], Captcha);
+export { Captcha };

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

@@ -4,8 +4,7 @@ declare const Checkbox_base: {
     new (...args: any[]): {
         _value: string | null;
         value: string | null;
-        _name: string;
-        name: string;
+        forceAutoFill: boolean;
         unique: true | null;
         radio: true | null;
         _checked: true | null;
@@ -24,6 +23,8 @@ declare const Checkbox_base: {
         required: boolean;
         disabled: true | null;
         formDataProvider: string;
+        _name: string;
+        name: string;
         props: any;
         isConnected: boolean;
         getAncestorAttributeValue(attributeName: string): string;
@@ -49,7 +50,13 @@ declare const Checkbox_base: {
 } & {
     new (...args: any[]): {
         validateFormElement(): void;
+        forceAutoFill: boolean;
+        _type: "number" | "search" | "file" | "button" | "password" | "url" | "color" | "hidden" | "time" | "image" | "text" | "reset" | "submit" | "month" | "week" | "checkbox" | "radio" | "range" | "tel" | "email" | "date" | "datetime-local";
         type: "number" | "search" | "file" | "button" | "password" | "url" | "color" | "hidden" | "time" | "image" | "text" | "reset" | "submit" | "month" | "week" | "checkbox" | "radio" | "range" | "tel" | "email" | "date" | "datetime-local";
+        _description?: string | undefined;
+        description: string | undefined;
+        _label?: string | undefined;
+        label: string | undefined;
         tabindex?: number | undefined;
         autocomplete?: "url" | "name" | "language" | "on" | "tel" | "email" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo" | undefined;
         getFormPublisher(): any;
@@ -94,8 +101,6 @@ export declare class Checkbox extends Checkbox_base {
     static styles: CSSResultGroup[];
     touched: boolean;
     iconName: string;
-    description?: string;
-    label?: string;
     slotDescriptionNodes: Array<Node>;
     hasDescription: boolean;
     updated(): void;

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

@@ -51,40 +51,38 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
     }
     render() {
         return html `
-          <label class="checkbox-container ${this.disabled ? "disabled" : ""}">
-          <span class="icon-container">
-            <input 
-              type="${this.type}"
-              @change=${this.handleChange}
-              @blur=${this.handleBlur}
-              ?required=${this.required}
-              .disabled=${ifDefined(this.disabled)}
-              .checked=${ifDefined(this.checked)}
-              .name=${this.name}
-              .value=${this.value}
-              ?autofocus=${this.autofocus}
-              
-           />
-            <sonic-icon 
-            name="${this.iconName}" class="sc-input-icon"></sonic-icon>
-          </span>
-          <div class="checkbox-text">
-                ${this.label ? this.label : ""}
-                <slot></slot>
-                <slot name="description" class="${this.hasDescription ? "description" : "hidden"} ">
-                  ${this.description ? html `${this.description}` : ""}
-                </slot>
-              </div>
-          </label>
+      <label class="checkbox-container ${this.disabled ? "disabled" : ""}">
+        <span class="icon-container">
+          <input
+            type="${this.type}"
+            @change=${this.handleChange}
+            @blur=${this.handleBlur}
+            ?required=${this.required}
+            .disabled=${ifDefined(this.disabled)}
+            .checked=${ifDefined(this.checked)}
+            .name=${this.name}
+            .value=${this.value}
+            ?autofocus=${this.autofocus}
+          />
+          <sonic-icon name="${this.iconName}" class="sc-input-icon"></sonic-icon>
+        </span>
+        <div class="checkbox-text">
+          ${this.label ? this.label : ""}
+          <slot></slot>
+          <slot name="description" class="${this.hasDescription ? "description" : "hidden"} ">
+            ${this.description ? html `${this.description}` : ""}
+          </slot>
+        </div>
+      </label>
     `;
     }
 };
 Checkbox.styles = [
     fontSize,
     css `
-      :host{
+      :host {
         --sc-checkbox-border-width: var(--sc-form-border-width);
-        --sc-checkbox-border-color:  transparent;
+        --sc-checkbox-border-color: transparent;
       }
 
       * {
@@ -119,7 +117,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);
+        border: var(--sc-checkbox-border-width) solid var(--sc-checkbox-border-color);
       }
 
       input:focus,
@@ -188,13 +186,14 @@ Checkbox.styles = [
       }
 
       /*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([
@@ -203,12 +202,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Checkbox.prototype, "iconName", void 0);
-__decorate([
-    property({ type: String })
-], Checkbox.prototype, "description", void 0);
-__decorate([
-    property({ type: String })
-], Checkbox.prototype, "label", void 0);
 __decorate([
     queryAssignedNodes({ slot: "description" })
 ], Checkbox.prototype, "slotDescriptionNodes", void 0);

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

@@ -2,8 +2,13 @@ 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;
+    forceAutoFill: boolean;
+    _description?: string;
+    get description(): string | undefined;
+    set description(value: string | undefined);
+    _label?: string;
+    get label(): string | undefined;
+    set label(value: string | undefined);
     iconName?: string;
     iconLibrary?: string;
     iconPrefix?: string;