@supersoniks/concorde 1.1.42 → 1.1.44

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

@@ -4,17 +4,18 @@ 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 { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy.mjs";
 import { html, LitElement, css } from "lit";
 import { customElement, property, queryAssignedNodes, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.js";
-import { formControl } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
+import { formControl, label, description } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
 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";
+import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
+const tagName = "sonic-select";
 /**
  * #### 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é.
@@ -22,7 +23,6 @@ import { unsafeHTML } from "lit/directives/unsafe-html.js";
  * * 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.
  */
-const tagName = "sonic-select";
 let Select = class Select extends FormElement(Subscriber(LitElement)) {
     constructor() {
         super(...arguments);
@@ -30,6 +30,7 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
         this.wordingKey = "wording";
         this.multiple = false;
         this._options = [];
+        this.hasDoneFirstUpdate = false;
         this._value = "";
         /*
          * TODO
@@ -41,9 +42,15 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
         this.hasSuffix = false;
         this.hasPrefix = false;
     }
-    set options(value) {
-        this._options = value;
-        if (!this.value && this._options.length > 0) {
+    set options(options) {
+        this._options = options;
+        for (const option of options) {
+            if (option.selected) {
+                this.value = option.value || "";
+            }
+        }
+        const value = this.value || this.getAttribute("value");
+        if (!value && this._options.length > 0) {
             this.value = this._options[0][this.valueKey];
         }
         this.requestUpdate();
@@ -51,32 +58,39 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
     get options() {
         return this._options;
     }
-    get value() {
-        return this._value;
+    firstUpdated() {
+        this.hasDoneFirstUpdate = true;
     }
     set value(value) {
-        if (!value)
+        if (value == null && !this.hasDoneFirstUpdate)
             return;
+        if (!value)
+            value = "";
         if (this._value == value)
             return;
         this._value = value;
-        if (!this.formDataProvider)
-            this.formDataProvider = this.getAncestorAttributeValue("formDataProvider");
-        if (this.formDataProvider) {
-            PublisherManager.getInstance().get(this.formDataProvider)[this._name] = value;
-        }
-        else if (this.publisher)
-            this.publisher[this._name] = value;
+        this.updateFormPublisherValue();
         this.requestUpdate();
     }
+    get value() {
+        return this._value;
+    }
+    updateFormPublisherValue() {
+        const formPublisher = this.getFormPublisher();
+        if (formPublisher) {
+            formPublisher[this.name] = this.value;
+        }
+    }
     connectedCallback() {
         super.connectedCallback();
-        let options = this.querySelectorAll("option");
+        this.hasSlotOrProps();
+        const options = this.querySelectorAll("option");
         if (options.length > 0) {
             this.options = Array.from(options).map((option) => {
                 return {
                     value: option.value,
                     wording: option.text,
+                    selected: option.hasAttribute("selected"),
                 };
             });
         }
@@ -99,23 +113,26 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
         this._label = value;
         this.requestUpdate();
     }
-    updated() {
+    willUpdate(changedProperties) {
+        this.hasSlotOrProps();
+        super.willUpdate(changedProperties);
+    }
+    hasSlotOrProps() {
         var _a, _b, _c, _d;
         this.hasLabel = this.label || ((_a = this.slotLabelNodes) === null || _a === void 0 ? void 0 : _a.length) ? true : false;
         this.hasDescription = this.description || ((_b = this.slotDescriptionNodes) === null || _b === void 0 ? void 0 : _b.length) ? true : false;
         this.hasSuffix = ((_c = this.slotSuffixNodes) === null || _c === void 0 ? void 0 : _c.length) ? true : false;
         this.hasPrefix = ((_d = this.slotPrefixNodes) === null || _d === void 0 ? void 0 : _d.length) ? true : false;
     }
-    onSlotChange() {
-        this.requestUpdate();
-    }
     validateFormElement() {
         var _a;
-        const that = this;
-        const select = (_a = that.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("select");
+        const select = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("select");
         if (!select || select.checkValidity())
             return;
-        this.getFormPublisher().isFormValid = false;
+        const formPublisher = this.getFormPublisher();
+        if (formPublisher) {
+            formPublisher.isFormValid = false;
+        }
         select.reportValidity();
     }
     render() {
@@ -128,50 +145,69 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
       <label for="form-element" class="${this.hasLabel ? "form-label" : "hidden"}"
         >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot
           name="label"
-          @slotchange=${this.onSlotChange}
+          @slotchange=${this.hasSlotOrProps}
         ></slot
       ></label>
 
       <div class="form-control ${classMap(slotClasses)}">
-        <slot name="prefix" @slotchange=${this.onSlotChange}></slot>
+        <slot name="prefix" @slotchange=${this.hasSlotOrProps}></slot>
         <div class="form-select-wrapper">
           <select
+            id="form-element"
             @change=${this.handleChange}
             @blur=${this.handleBlur}
-            disabled=${ifDefined(this.disabled)}
+            ?disabled=${this.disabled}
             ?required=${this.required}
             ?multiple=${this.multiple}
             size=${ifDefined(this.selectSize)}
             ?autofocus=${this.autofocus}
             .value="${this.value}"
             class="form-element"
+            aria-label=${ifDefined(this.ariaLabel)}
+            aria-labelledby=${ifDefined(this.ariaLabelledby)}
           >
             ${repeat(this.options, (option) => option[this.valueKey], (option) => {
-            const isSelected = this.value == option[this.valueKey] ? "selected" : null;
-            return html `<option selected=${ifDefined(isSelected)} value="${option[this.valueKey]}">
+            const isSelected = this.value == option[this.valueKey] ? true : false;
+            return html `<option ?selected=${isSelected} value="${option[this.valueKey]}">
                   ${option[this.wordingKey]}
                 </option>`;
         })}
             <slot></slot>
           </select>
-          <sonic-icon class="select-chevron" 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>
+        <slot name="suffix" @slotchange=${this.hasSlotOrProps}></slot>
       </div>
 
-      <slot name="description" class=" ${this.hasDescription ? "form-description" : "hidden"}">
+      <slot
+        name="description"
+        @slotchange=${this.hasSlotOrProps}
+        class="${this.hasDescription ? "form-description" : "hidden"}"
+      >
         ${this.description ? html `${unsafeHTML(this.description)}` : ""}
       </slot>
     `;
     }
 };
 Select.styles = [
+    fontSize,
     formControl,
+    label,
+    description,
     css `
       .form-element {
         appearance: none;
-        padding-right: 2.5em;
       }
+
+      :host([disabled]) sonic-icon {
+        opacity: 0;
+      }
+
+      /* Désactive padding right pour les sélecteur désactivé avec une option*/
+      :host(:not([disabled])) .form-element:not(:has(option:only-child)) {
+        padding-right: max(1em, calc(0.8 * var(--sc-input-px)));
+      }
+
       .form-select-wrapper {
         position: relative;
         width: 100%;
@@ -179,11 +215,11 @@ Select.styles = [
 
       sonic-icon {
         position: absolute;
-        right: 1em;
+        right: calc(0.8 * var(--sc-input-px));
         top: 50%;
         pointer-events: none;
         transform: translateY(-50%);
-        color: var(--sc-input-color);
+        color: var(--sc-input-c);
       }
 
       option {
@@ -212,7 +248,7 @@ __decorate([
     property({ type: Array })
 ], Select.prototype, "options", null);
 __decorate([
-    property()
+    property({ reflect: true })
 ], Select.prototype, "value", null);
 __decorate([
     property({ type: Boolean })
@@ -251,8 +287,3 @@ Select = __decorate([
     customElement(tagName)
 ], Select);
 export { Select };
-//Ajout pour Storybook
-try {
-    customElements.define(tagName, Select);
-}
-catch (e) { }

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

@@ -1,10 +1,10 @@
-import { LitElement } from "lit";
+import { LitElement, PropertyValues } from "lit";
 declare const Textarea_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";
+        _type: "number" | "search" | "file" | "button" | "url" | "color" | "hidden" | "time" | "image" | "text" | "reset" | "submit" | "month" | "week" | "checkbox" | "radio" | "range" | "tel" | "email" | "date" | "datetime-local" | "password";
+        type: "number" | "search" | "file" | "button" | "url" | "color" | "hidden" | "time" | "image" | "text" | "reset" | "submit" | "month" | "week" | "checkbox" | "radio" | "range" | "tel" | "email" | "date" | "datetime-local" | "password";
         _description?: string | undefined;
         description: string | undefined;
         _label?: string | undefined;
@@ -13,21 +13,27 @@ declare const Textarea_base: {
         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;
         updateDataValue(): void;
-        handleChange(e?: any): void;
-        handleBlur(e?: any): void;
-        getValueForFormPublisher(): any;
+        handleChange(e?: Event | undefined): void;
+        handleBlur(e?: Event | undefined): void;
+        getValueForFormPublisher(): string | object | string[] | null | undefined;
+        focus?: (() => void) | undefined;
+        shadowRoot?: ShadowRoot | undefined;
         error: boolean;
         autofocus: boolean;
         required: boolean;
         disabled: true | null;
         formDataProvider: string;
-        _value: any;
-        value: any;
+        ariaLabelledby?: string | undefined;
+        ariaLabel?: string | undefined;
+        _value: string | object | string[] | null | undefined;
+        value: string | object | string[] | null | undefined;
         _name: string;
         name: string;
-        props: any;
-        propertyMap: Object;
+        props: import("../../../../_types/types").CoreJSType;
+        propertyMap: object;
         isConnected: boolean;
+        children: HTMLCollection;
+        appendChild(node: Node): Node;
         getAncestorAttributeValue(attributeName: string): string;
         hasAncestorAttribute(attributeName: string): boolean;
         querySelectorAll(selector: string): NodeListOf<Element>;
@@ -47,10 +53,10 @@ declare const Textarea_base: {
         connectedCallback(): void;
         requestUpdate(): void;
         getAttribute(name: string): string;
-        hasAttribute(attributeName: String): boolean;
+        hasAttribute(attributeName: string): boolean;
         disconnectedCallback(): void;
     };
-} & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+} & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<import("../../../../_types/types").CoreJSType>) & typeof LitElement;
 export declare class Textarea extends Textarea_base {
     static styles: import("lit").CSSResult[];
     size: "" | "xs" | "sm" | "lg";
@@ -63,15 +69,11 @@ export declare class Textarea extends Textarea_base {
     placeholder?: string;
     slotLabelNodes: Array<Node>;
     slotDescriptionNodes: Array<Node>;
-    slotSuffixNodes: Array<Node>;
-    slotPrefixNodes: Array<Node>;
     hasDescription: boolean;
     hasLabel: boolean;
-    hasSuffix: boolean;
-    hasPrefix: boolean;
-    slotClasses: {};
-    updated(): void;
-    onSlotChange(): void;
+    connectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    hasSlotOrProps(): void;
     validateFormElement(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -7,12 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement, css } from "lit";
 import { customElement, property, state, queryAssignedNodes } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { formControl } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
+import { formControl, label, description } from "@supersoniks/concorde/core/components/ui/form/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";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
 const tagName = "sonic-textarea";
 let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElement))) {
     constructor() {
@@ -24,27 +25,29 @@ let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElemen
         this.readonly = false;
         this.hasDescription = false;
         this.hasLabel = false;
-        this.hasSuffix = false;
-        this.hasPrefix = false;
-        this.slotClasses = {};
     }
-    updated() {
-        var _a, _b, _c, _d;
+    connectedCallback() {
+        super.connectedCallback();
+        this.hasSlotOrProps();
+    }
+    willUpdate(changedProperties) {
+        this.hasSlotOrProps();
+        super.willUpdate(changedProperties);
+    }
+    hasSlotOrProps() {
+        var _a, _b;
         this.hasLabel = this.label || ((_a = this.slotLabelNodes) === null || _a === void 0 ? void 0 : _a.length) ? true : false;
         this.hasDescription = this.description || ((_b = this.slotDescriptionNodes) === null || _b === void 0 ? void 0 : _b.length) ? true : false;
-        this.hasSuffix = ((_c = this.slotSuffixNodes) === null || _c === void 0 ? void 0 : _c.length) ? true : false;
-        this.hasPrefix = ((_d = this.slotPrefixNodes) === null || _d === void 0 ? void 0 : _d.length) ? true : false;
-    }
-    onSlotChange() {
-        this.requestUpdate();
     }
     validateFormElement() {
         var _a;
-        const that = this;
-        const textarea = (_a = that.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("textarea");
+        const textarea = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("textarea");
         if (!textarea || textarea.checkValidity())
             return;
-        this.getFormPublisher().isFormValid = false;
+        const formPublisher = this.getFormPublisher();
+        if (formPublisher) {
+            formPublisher.isFormValid = false;
+        }
         textarea.reportValidity();
     }
     render() {
@@ -53,12 +56,13 @@ let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElemen
       <label for="form-element" class="${this.hasLabel ? "form-label" : "hidden"}"
         >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot
           name="label"
-          @slotchange=${this.onSlotChange}
+          @slotchange=${this.hasSlotOrProps}
         ></slot
       ></label>
 
       <div class="form-control">
         <textarea
+          id="form-element"
           @input=${this.handleChange}
           @blur=${this.handleBlur}
           disabled=${ifDefined(this.disabled)}
@@ -75,19 +79,28 @@ let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElemen
           wrap=${ifDefined(this.wrap)}
           placeholder="${this.placeholder}"
           class="form-element textarea custom-scroll"
+          aria-label=${ifDefined(this.ariaLabel)}
+          aria-labelledby=${ifDefined(this.ariaLabelledby)}
         >
 ${this.value}</textarea
         >
       </div>
 
-      <slot name="description" class=" ${this.hasDescription ? "form-description" : "hidden"}">
+      <slot
+        name="description"
+        @slotchange=${this.hasSlotOrProps}
+        class="${this.hasDescription ? "form-description" : "hidden"}"
+      >
         ${this.description ? html `${unsafeHTML(this.description)}` : ""}
       </slot>
     `;
     }
 };
 Textarea.styles = [
+    fontSize,
     formControl,
+    label,
+    description,
     customScroll,
     css `
       textarea {
@@ -125,33 +138,13 @@ __decorate([
 __decorate([
     queryAssignedNodes({ slot: "description" })
 ], Textarea.prototype, "slotDescriptionNodes", void 0);
-__decorate([
-    queryAssignedNodes({ slot: "suffix" })
-], Textarea.prototype, "slotSuffixNodes", void 0);
-__decorate([
-    queryAssignedNodes({ slot: "prefix" })
-], Textarea.prototype, "slotPrefixNodes", void 0);
 __decorate([
     state()
 ], Textarea.prototype, "hasDescription", void 0);
 __decorate([
     state()
 ], Textarea.prototype, "hasLabel", void 0);
-__decorate([
-    state()
-], Textarea.prototype, "hasSuffix", void 0);
-__decorate([
-    state()
-], Textarea.prototype, "hasPrefix", void 0);
-__decorate([
-    property()
-], Textarea.prototype, "slotClasses", void 0);
 Textarea = __decorate([
     customElement(tagName)
 ], Textarea);
 export { Textarea };
-//Ajout pour Storybook
-try {
-    customElements.define(tagName, Textarea);
-}
-catch (e) { }

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

@@ -1,6 +1,16 @@
-import { LitElement } from "lit";
+import { LitElement, PropertyValues } from "lit";
 export declare class Group extends LitElement {
+    alignItems: string;
+    label?: string;
+    description?: string;
+    slotLabelNodes: Array<Node>;
+    slotDescriptionNodes: Array<Node>;
+    hasDescription: boolean;
+    hasLabel: boolean;
     static styles: import("lit").CSSResult[];
     updated(): void;
+    connectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    hasSlotOrProps(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/group/group.js

@@ -5,54 +5,116 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement, css } from "lit";
-import { customElement } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { customElement, property, state, queryAssignedNodes } from "lit/decorators.js";
+import { label, description } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
+import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 const tagName = "sonic-group";
 let Group = class Group extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.alignItems = "center";
+        this.hasDescription = false;
+        this.hasLabel = false;
+    }
     updated() {
         const children = this.querySelectorAll("sonic-input, sonic-button");
         const nbChildren = children.length;
         if (nbChildren > 1) {
             children.forEach((item, index) => {
+                const htmlElement = item;
                 if (index === 0) {
-                    item.style.setProperty("--sc-item-rounded-tr", "0");
-                    item.style.setProperty("--sc-item-rounded-br", "0");
+                    htmlElement.style.setProperty("--sc-item-rounded-tr", "0");
+                    htmlElement.style.setProperty("--sc-item-rounded-br", "0");
                 }
                 else if (index === nbChildren - 1) {
-                    item.style.setProperty("--sc-item-rounded-tl", "0");
-                    item.style.setProperty("--sc-item-rounded-bl", "0");
+                    htmlElement.style.setProperty("--sc-item-rounded-tl", "0");
+                    htmlElement.style.setProperty("--sc-item-rounded-bl", "0");
                 }
                 else {
-                    item.style.setProperty("--sc-item-rounded-tr", "0");
-                    item.style.setProperty("--sc-item-rounded-br", "0");
-                    item.style.setProperty("--sc-item-rounded-tl", "0");
-                    item.style.setProperty("--sc-item-rounded-bl", "0");
+                    htmlElement.style.setProperty("--sc-item-rounded-tr", "0");
+                    htmlElement.style.setProperty("--sc-item-rounded-br", "0");
+                    htmlElement.style.setProperty("--sc-item-rounded-tl", "0");
+                    htmlElement.style.setProperty("--sc-item-rounded-bl", "0");
                 }
             });
         }
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.hasSlotOrProps();
+    }
+    willUpdate(changedProperties) {
+        this.hasSlotOrProps();
+        super.willUpdate(changedProperties);
+    }
+    hasSlotOrProps() {
+        var _a, _b;
+        this.hasLabel = this.label || ((_a = this.slotLabelNodes) === null || _a === void 0 ? void 0 : _a.length) ? true : false;
+        this.hasDescription = this.description || ((_b = this.slotDescriptionNodes) === null || _b === void 0 ? void 0 : _b.length) ? true : false;
+    }
     render() {
-        return html `<slot></slot>`;
+        const slotStyle = {
+            alignItems: this.alignItems,
+        };
+        return html `<span class="${this.hasLabel ? "form-label" : "hidden"}"
+        >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot
+          name="label"
+          @slotchange=${this.hasSlotOrProps}
+        ></slot
+      ></span>
+      <slot class="main-slot" style=${styleMap(slotStyle)}></slot>
+      <slot
+        name="description"
+        @slotchange=${this.hasSlotOrProps}
+        class="${this.hasDescription ? "form-description" : "hidden"}"
+      >
+        ${this.description ? html `${unsafeHTML(this.description)}` : ""}
+      </slot>`;
     }
 };
 Group.styles = [
+    fontSize,
+    label,
+    description,
     css `
       :host {
-        display: inline-flex;
+        display: inline-block;
         vertical-align: middle;
       }
 
-      slot {
+      .main-slot {
         width: 100%;
         display: flex;
-        align-items: flex-end;
+      }
+      .hidden {
+        display: none;
       }
     `,
 ];
+__decorate([
+    property({ type: String })
+], Group.prototype, "alignItems", void 0);
+__decorate([
+    property({ type: String })
+], Group.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], Group.prototype, "description", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "label" })
+], Group.prototype, "slotLabelNodes", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "description" })
+], Group.prototype, "slotDescriptionNodes", void 0);
+__decorate([
+    state()
+], Group.prototype, "hasDescription", void 0);
+__decorate([
+    state()
+], Group.prototype, "hasLabel", void 0);
 Group = __decorate([
     customElement(tagName)
 ], Group);
 export { Group };
-try {
-    customElements.define(tagName, Group);
-}
-catch (e) { }

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

@@ -1,8 +1,15 @@
 import { LitElement } from "lit";
+import { DirectiveResult } from "lit/directive";
+import { UnsafeHTMLDirective } from "lit/directives/unsafe-html";
+/**
+ * Afficher l'icone choisie parmis une liste prédéfinie dans icons.json
+ * les tailles suivantes sont disponible via l'attribut *size* : 2xs,xs,sm,"",lg,xl,2xl
+ */
 export declare class Icon extends LitElement {
     static styles: import("lit").CSSResult;
-    updateIcon(): Promise<void>;
-    iconText: any;
+    renderId: number;
+    updateIcon(): void;
+    iconText: DirectiveResult<typeof UnsafeHTMLDirective> | string;
     /**
      * Nom identifiant l'icone ex : *info*
      */
@@ -21,5 +28,5 @@ export declare class Icon extends LitElement {
     private _library;
     get library(): string;
     set library(newLibrary: string);
-    render(): any;
+    render(): DirectiveResult<typeof UnsafeHTMLDirective>;
 }