@supersoniks/concorde 1.1.38 → 1.1.40

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

@@ -6,25 +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 '@supersoniks/concorde/core/components/ui/card/card-header-descripton';
+import "@supersoniks/concorde/core/components/ui/card/card-header-descripton";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 const tagName = "sonic-card-header";
 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>` : ""} 
+          ${unsafeHTML(this.label)}
+          ${this.description
+            ? html `<sonic-card-header-description>${unsafeHTML(this.description)}</sonic-card-header-description>`
+            : ""}
           <slot></slot>
         </div>
-        <slot name="suffix"></slot>   
+        <slot name="suffix"></slot>
       </div>
     `;
     }
 };
 CardHeader.styles = [
     css `
-
       :host {
         --sc-card-header-mb: 1.25rem;
         --sc-card-header-font-size: 1.875rem;
@@ -33,11 +35,11 @@ CardHeader.styles = [
         --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;
+        gap: 0.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);
@@ -45,7 +47,7 @@ CardHeader.styles = [
         font-style: var(--sc-card-header-font-style);
         font-weight: var(--sc-card-header-font-weight);
       }
-      
+
       .header-content {
         flex-grow: 1;
       }
@@ -53,8 +55,7 @@ CardHeader.styles = [
       slot[name="suffix"] {
         flex-shrink: 0;
       }
-
-    `
+    `,
 ];
 __decorate([
     property()

package/core/components/ui/divider/divider.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement, property, queryAssignedNodes, query } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 const tagName = "sonic-divider";
 let Divider = class Divider extends LitElement {
     constructor() {
@@ -21,7 +22,7 @@ let Divider = class Divider extends LitElement {
     }
     render() {
         return html `<div part="divider">
-      <span class="text">${this.label}<slot></slot></span>
+      <span class="text">${unsafeHTML(this.label)}<slot></slot></span>
     </div>`;
     }
 };
@@ -53,7 +54,7 @@ Divider.styles = [
         --sc-divider-my: 0.35rem;
         --sc-divider-fs: 0.68rem;
       }
-      
+
       :host([size="xs"]) {
         --sc-divider-my: 0.5rem;
         --sc-divider-fs: 0.75rem;

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

@@ -36,6 +36,7 @@ declare const Checkbox_base: {
         noShadowDom: string | null;
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
+        displayContents: boolean;
         dispatchEvent(event: Event): void;
         setAttribute(name: string, value: string): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
@@ -85,6 +86,7 @@ declare const Checkbox_base: {
         noShadowDom: string | null;
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
+        displayContents: boolean;
         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

@@ -12,6 +12,7 @@ import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import FormInput from "@supersoniks/concorde/core/mixins/FormInput";
 import FormCheckable from "@supersoniks/concorde/core/mixins/FormCheckable";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
 /**
  * ### Le composent sonic-checkbox étend les mixins FormCheckable, FormInput, FormElement et Subscriber
@@ -67,10 +68,10 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
           <sonic-icon name="${this.iconName}" class="sc-input-icon"></sonic-icon>
         </span>
         <div class="checkbox-text">
-          ${this.label ? this.label : ""}
+          ${this.label ? unsafeHTML(this.label) : ""}
           <slot></slot>
           <slot name="description" class="${this.hasDescription ? "description" : "hidden"} ">
-            ${this.description ? html `${this.description}` : ""}
+            ${this.description ? html `${unsafeHTML(this.description)}` : ""}
           </slot>
         </div>
       </label>

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import "@supersoniks/concorde/core/components/ui/form/fieldset/legend-description";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 const tagName = "sonic-legend";
 let Legend = class Legend extends LitElement {
@@ -45,8 +46,10 @@ let Legend = class Legend extends LitElement {
             : ""}
 
       <div class="legend-content">
-        ${this.label}
-        ${this.description ? html `<sonic-legend-description>${this.description}</sonic-legend-description>` : ""}
+        ${unsafeHTML(this.label)}
+        ${this.description
+            ? html `<sonic-legend-description>${unsafeHTML(this.description)}</sonic-legend-description>`
+            : ""}
         <slot></slot>
       </div>
       <slot name="suffix"></slot>

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

@@ -23,6 +23,16 @@ declare const Input_base: {
         formDataProvider: string;
         _value: any;
         value: any;
+        /**
+         * ### Le composent sonic-input étend les mixins FormInput, FormElement et Subscriber
+         * **FormElement :**
+         * * La propriété value est remplie automatiquement a l'aide de l'attribut name renseigné, ceci en prenant la valeur de la propriété du même nom dans les données du dataprovider associé.
+         * * Par défault lorsque l'on édite l'input, la valeur est également mise à jour via le même dataprovider
+         * * On peut cependant décider de mettre à jour la donnée à une autre adresse en renseigne l'attribut *formDataProvider*.
+         * * Par conséquent on peut par exemple le lier à un composant *queue* (via sa propriété *dataFilterProvider*) de manière à appeller en auto une api avec des filtres.
+         * **FormInput :**
+         * Uniquement des propriétés classiques d'un input HTML.
+         */
         _name: string;
         name: string;
         props: any;
@@ -36,6 +46,7 @@ declare const Input_base: {
         noShadowDom: string | null;
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
+        displayContents: boolean;
         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/input/input.js

@@ -14,6 +14,7 @@ import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import FormInput from "@supersoniks/concorde/core/mixins/FormInput";
 import { classMap } from "lit/directives/class-map.js";
 import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 /**
  * ### Le composent sonic-input étend les mixins FormInput, FormElement et Subscriber
  * **FormElement :**
@@ -59,7 +60,7 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
         };
         return html `
       <label for="form-element" class="${this.hasLabel ? "form-label" : "hidden"}"
-        >${this.label ? this.label : ""}<slot name="label" @slotchange=${this.onSlotChange}></slot
+        >${this.label ? unsafeHTML(this.label) : ""}<slot name="label" @slotchange=${this.onSlotChange}></slot
       ></label>
 
       <div @click=${this.inlineContentFocus} class="form-control ${classMap(slotClasses)}">
@@ -94,7 +95,7 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
         </div>
       </div>
       <slot name="description" class=" ${this.hasDescription ? "form-description" : "hidden"}">
-        ${this.description ? html `${this.description}` : ""}
+        ${this.description ? html `${unsafeHTML(this.description)}` : ""}
       </slot>
     `;
     }

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

@@ -14,6 +14,7 @@ import { formControl } from "@supersoniks/concorde/core/components/ui/form/css/f
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 /**
  * #### FormElement :
  * * La propriété value est remplie automatiquement a l'aide de l'attribut name renseigné, ceci en prenant la valeur de la propriété du même nom dans les données du dataprovider associé.
@@ -124,7 +125,7 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
         };
         return html `
       <label for="form-element" class="${this.hasLabel ? "form-label" : "hidden"}"
-        >${this.label ? this.label : ""}<slot name="label" @slotchange=${this.onSlotChange}></slot
+        >${this.label ? unsafeHTML(this.label) : ""}<slot name="label" @slotchange=${this.onSlotChange}></slot
       ></label>
 
       <div class="form-control ${classMap(slotClasses)}">
@@ -155,7 +156,7 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
       </div>
 
       <slot name="description" class=" ${this.hasDescription ? "form-description" : "hidden"}">
-        ${this.description ? html `${this.description}` : ""}
+        ${this.description ? html `${unsafeHTML(this.description)}` : ""}
       </slot>
     `;
     }

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

@@ -36,6 +36,7 @@ declare const Textarea_base: {
         noShadowDom: string | null;
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
+        displayContents: boolean;
         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

@@ -12,6 +12,7 @@ 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";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 const tagName = "sonic-textarea";
 let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElement))) {
     constructor() {
@@ -49,7 +50,7 @@ let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElemen
     render() {
         return html `
       <label for="form-element" class="${this.hasLabel ? "form-label" : "hidden"}"
-        >${this.label ? this.label : ""}<slot name="label" @slotchange=${this.onSlotChange}></slot
+        >${this.label ? unsafeHTML(this.label) : ""}<slot name="label" @slotchange=${this.onSlotChange}></slot
       ></label>
 
       <div class="form-control">
@@ -76,7 +77,7 @@ ${this.value}</textarea
       </div>
 
       <slot name="description" class=" ${this.hasDescription ? "form-description" : "hidden"}">
-        ${this.description ? html `${this.description}` : ""}
+        ${this.description ? html `${unsafeHTML(this.description)}` : ""}
       </slot>
     `;
     }

package/core/mixins/Fetcher.d.ts

@@ -62,6 +62,7 @@ declare const Fetcher: <T extends Constructor<SubscriberInterface>>(superClass:
         noShadowDom: string | null;
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
+        displayContents: boolean;
         dispatchEvent(event: Event): void;
         setAttribute(name: string, value: string): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;

package/core/mixins/Fetcher.js

@@ -86,8 +86,8 @@ const Fetcher = (superClass) => {
                     Loader.show();
                 let headerData = PublisherManager.getInstance().get(this.getAncestorAttributeValue("headersDataProvider")).get();
                 data = yield this.api.get(this.endPoint || this.dataProvider || "", headerData);
-                // Je garde ça mais normalement ça n'arrive jamais
-                if (!data) {
+                // Si data est vide OU si data ne contient que la réponse HTTP, avec un statut not ok, on affiche un message
+                if (!data || (data._sonic_http_response_ && !data._sonic_http_response_.ok && Object.keys(data).length === 1)) {
                     SonicToast.add({ text: "Network Error", status: "error" });
                     this.isLoading = false;
                     if (hasLoader)

package/core/mixins/FormCheckable.d.ts

@@ -57,6 +57,7 @@ declare const Form: <T extends Constructor<FormElementInterface>>(superClass: T)
         noShadowDom: string | null;
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
+        displayContents: boolean;
         dispatchEvent(event: Event): void;
         setAttribute(name: string, value: string): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
@@ -64,9 +65,7 @@ declare const Form: <T extends Constructor<FormElementInterface>>(superClass: T)
         removeAttribute(name: string): void;
         getApiConfiguration(): import("../utils/api").APIConfiguration;
         connectedCallback(): void;
-        requestUpdate(): void; /**
-          Active le mode radio
-         */
+        requestUpdate(): void;
         getAttribute(name: string): string;
         hasAttribute(attributeName: String): boolean;
         disconnectedCallback(): void;

package/core/mixins/FormInput.d.ts

@@ -42,6 +42,7 @@ declare const Form: <T extends Constructor<FormElementInterface>>(superClass: T)
         noShadowDom: string | null;
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
+        displayContents: boolean;
         dispatchEvent(event: Event): void;
         setAttribute(name: string, value: string): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;

package/core/mixins/Subscriber.d.ts

@@ -13,6 +13,7 @@ export interface SubscriberInterface {
     noShadowDom: string | null;
     debug: HTMLElement | null;
     defferedDebug: boolean | null;
+    displayContents: boolean;
     dispatchEvent(event: Event): void;
     setAttribute(name: string, value: string): void;
     addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

package/core/mixins/Subscriber.js

@@ -46,6 +46,7 @@ const Subscriber = (superClass) => {
     class SubscriberElement extends superClass {
         constructor(...args) {
             super();
+            this.displayContents = false;
             /**
              * noAutoFill permet de désactiver le remplissage automatique des propriétés par le publisher dans le cas ou on utilise "props" seulement ou le dataBinding par exemple
              */
@@ -130,18 +131,12 @@ const Subscriber = (superClass) => {
         }
         updated(_changedProperties) {
             super.updated(_changedProperties);
-            if (this.shadowRoot) {
-                if (this.shadowRoot.children.length == 0)
-                    this.style.display = "none";
-                else
-                    this.style.removeProperty("display");
-            }
-            else {
-                if (this.children.length == 0)
-                    this.style.display = "none";
-                else
-                    this.style.removeProperty("display");
-            }
+            let ref = this.shadowRoot || this;
+            let display = this.displayContents ? "contents" : ref.children.length == 0 ? "none" : null;
+            if (display)
+                this.style.display = display;
+            else
+                this.style.removeProperty("display");
         }
         connectedCallback() {
             if (this.hasAttribute("lazyRendering")) {
@@ -359,6 +354,9 @@ const Subscriber = (superClass) => {
         }
     }
     SubscriberElement.instanceCounter = 0;
+    __decorate([
+        property({ type: Boolean })
+    ], SubscriberElement.prototype, "displayContents", void 0);
     __decorate([
         property({ type: Boolean })
     ], SubscriberElement.prototype, "noAutoFill", void 0);

package/mixins.d.ts

@@ -26,6 +26,7 @@ export declare const Fetcher: <T extends new (...args: any[]) => mySubscriber.Su
         noShadowDom: string | null;
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
+        displayContents: boolean;
         dispatchEvent(event: Event): void;
         setAttribute(name: string, value: string): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
@@ -74,6 +75,7 @@ export declare const FormCheckable: <T extends new (...args: any[]) => myFormEle
         noShadowDom: string | null;
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
+        displayContents: boolean;
         dispatchEvent(event: Event): void;
         setAttribute(name: string, value: string): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
@@ -126,6 +128,7 @@ export declare const FormInput: <T extends new (...args: any[]) => myFormElement
         noShadowDom: string | null;
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
+        displayContents: boolean;
         dispatchEvent(event: Event): void;
         setAttribute(name: string, value: string): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "1.1.38",
+  "version": "1.1.40",
   "customElements": "custom-elements.json",
   "license": "MIT",
   "publishConfig": {