@supersoniks/concorde 1.1.48 → 2.0.0

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

@@ -69,38 +69,18 @@ declare const Checkbox_base: {
     new (...args: any[]): {
         validateFormElement(): void;
         forceAutoFill: boolean;
-        _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";
+        _type: "number" | "search" | "time" | "file" | "button" | "url" | "color" | "hidden" | "image" | "text" | "reset" | "submit" | "email" | "tel" | "month" | "week" | "checkbox" | "radio" | "range" | "date" | "datetime-local" | "password";
+        type: "number" | "search" | "time" | "file" | "button" | "url" | "color" | "hidden" | "image" | "text" | "reset" | "submit" | "email" | "tel" | "month" | "week" | "checkbox" | "radio" | "range" | "date" | "datetime-local" | "password";
         _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;
+        autocomplete?: "url" | "name" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "language" | "nickname" | "organization-title" | "cc-additional-name" | "bday" | "sex" | "impp" | "photo" | undefined;
         getFormPublisher(): any;
         updateDataValue(): void;
         handleChange(e?: Event | undefined): void;
         handleBlur(e?: Event | undefined): void;
-        /**
-         * ### Le composent sonic-checkbox étend les mixins FormCheckable, 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 modifie 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. La prise en compte est ici partielle, par exemple les propriétés *placeholder*, *readonly*, *pattern*, *min* et *max* n'ont pas de sens pour un checkbox.
-         * **FormCheckable :**
-         * * La propriété checked mise à true si la valeur de la propriété du même nom dans les données du dataprovider associé contient un propriété checked.
-         * **Comportements :**
-         * * multiple (par défaut):
-         * - on peut cocher plusieurs checkbox ayant le même *name*.
-         * - la valeur enregistrée dans la propriété nommé du même nom dans formDataProvider est un tableau avec les *value* des cases cochées ayant le même *name*.
-         * * unique (Ajouter l'attribute unique au composant a l'intégration):
-         * - on ne peut cocher qu'une seule checkbox ayant le même *name*.
-         * * radio (Ajouter l'attribute radio au composant a l'intégration):
-         * Comme unique, mais on ne peut pas décocher la case sauf en en cochant une autre, comme un bouton radio.
-         */
         getValueForFormPublisher(): string | object | string[] | null | undefined;
         focus?: (() => void) | undefined;
         shadowRoot?: ShadowRoot | undefined;

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

@@ -5,7 +5,7 @@ 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, property, queryAssignedNodes } from "lit/decorators.js";
+import { customElement, property, queryAssignedElements } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
@@ -55,10 +55,8 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
         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.hasLabel = this.label || this.slotLabelNodes?.length ? true : false;
+        this.hasDescription = this.description || this.slotDescriptionNodes?.length ? true : false;
     }
     render() {
         //let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
@@ -80,9 +78,7 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
             aria-label=${ifDefined(this.ariaLabel)}
             aria-labelledby=${ifDefined(this.ariaLabelledby)}
           />
-          <sonic-icon name="${this.checked == "indeterminate" || this.showAsIndeterminate
-            ? this.indeterminateIconName
-            : this.iconName}" class="sc-input-icon"></sonic-icon>
+          <sonic-icon name="${this.checked == "indeterminate" || this.showAsIndeterminate ? this.indeterminateIconName : this.iconName}" class="sc-input-icon"></sonic-icon>
         </span>
 
         <div class="checkbox-text ${!this.hasDescription && !this.hasLabel ? "hidden" : "checkbox-text"}">
@@ -139,8 +135,7 @@ Checkbox.styles = [
         outline: none;
         margin: 0;
         background-color: var(--sc-checkbox-bg);
-        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,
@@ -246,10 +241,10 @@ __decorate([
     property({ type: Boolean })
 ], Checkbox.prototype, "hasLabel", void 0);
 __decorate([
-    queryAssignedNodes()
+    queryAssignedElements({ flatten: true })
 ], Checkbox.prototype, "slotLabelNodes", void 0);
 __decorate([
-    queryAssignedNodes({ slot: "description" })
+    queryAssignedElements({ slot: "description", flatten: true })
 ], Checkbox.prototype, "slotDescriptionNodes", void 0);
 Checkbox = __decorate([
     customElement(tagName)

package/core/components/ui/form/form-layout/form-layout.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from "lit";
-import { ResizeController } from "@lit-labs/observers/resize_controller.js";
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
 declare const FormLayout_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<import("../../../../_types/types").CoreJSType>) & typeof LitElement;
 export declare class FormLayout extends FormLayout_base {
     static styles: import("lit").CSSResult[];

package/core/components/ui/form/form-layout/form-layout.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement, property, queryAssignedElements } from "lit/decorators.js";
-import { ResizeController } from "@lit-labs/observers/resize_controller.js";
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
 import { classMap } from "lit/directives/class-map.js";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 const tagName = "sonic-form-layout";

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

@@ -3,14 +3,14 @@ declare const Input_base: {
     new (...args: any[]): {
         validateFormElement(): void;
         forceAutoFill: boolean;
-        _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";
+        _type: "number" | "search" | "time" | "file" | "button" | "url" | "color" | "hidden" | "image" | "text" | "reset" | "submit" | "email" | "tel" | "month" | "week" | "checkbox" | "radio" | "range" | "date" | "datetime-local" | "password";
+        type: "number" | "search" | "time" | "file" | "button" | "url" | "color" | "hidden" | "image" | "text" | "reset" | "submit" | "email" | "tel" | "month" | "week" | "checkbox" | "radio" | "range" | "date" | "datetime-local" | "password";
         _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;
+        autocomplete?: "url" | "name" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "language" | "nickname" | "organization-title" | "cc-additional-name" | "bday" | "sex" | "impp" | "photo" | undefined;
         getFormPublisher(): any;
         updateDataValue(): void;
         handleChange(e?: Event | undefined): void;
@@ -54,9 +54,7 @@ declare const Input_base: {
         requestUpdate(): void;
         getAttribute(name: string): string;
         hasAttribute(attributeName: string): boolean;
-        disconnectedCallback(): void; /**
-         * Taille du composant, implique notamment des modifications de typo et de marge interne
-         */
+        disconnectedCallback(): void;
         getBoundingClientRect(): DOMRect;
         onConnected(callback: (component: any) => void): void;
         offConnected(callback: (component: any) => void): void;

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

@@ -5,10 +5,10 @@ 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, property, queryAssignedNodes, state, } from "lit/decorators.js";
+import { customElement, property, queryAssignedElements, state } from "lit/decorators.js";
 import { query } from "lit/decorators/query.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { formControl, label, description, passwordToggle, } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
+import { formControl, label, description, passwordToggle } 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";
@@ -73,18 +73,15 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
         this.input.setSelectionRange(start, end);
     }
     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;
+        this.hasLabel = this.label || this.slotLabelNodes?.length ? true : false;
+        this.hasDescription = this.description || this.slotDescriptionNodes?.length ? true : false;
+        this.hasSuffix = this.slotSuffixNodes?.length ? true : false;
+        this.hasPrefix = this.slotPrefixNodes?.length ? true : false;
     }
     inlineContentFocus() {
-        var _a;
         if (!this.inlineContent || this.disableInlineContentFocus)
             return;
-        (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
+        this.input?.focus();
     }
     handleChange(e) {
         if (!this.hasAttribute("inputDelayMs")) {
@@ -156,10 +153,7 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
                       aria-label="Toggle password visibility"
                       variant="unstyled"
                     >
-                      <sonic-icon
-                        library="heroicons"
-                        name=${this.isPassword ? "eye" : "eye-slash"}
-                      ></sonic-icon>
+                      <sonic-icon library="heroicons" name=${this.isPassword ? "eye" : "eye-slash"}></sonic-icon>
                     </sonic-button>`
             : ""}
             <slot name="suffix" @slotchange=${this.hasSlotOrProps}></slot>
@@ -236,16 +230,16 @@ __decorate([
     property({ type: Boolean })
 ], Input.prototype, "showPasswordToggle", void 0);
 __decorate([
-    queryAssignedNodes({ slot: "label" })
+    queryAssignedElements({ slot: "label", flatten: true })
 ], Input.prototype, "slotLabelNodes", void 0);
 __decorate([
-    queryAssignedNodes({ slot: "description" })
+    queryAssignedElements({ slot: "description", flatten: true })
 ], Input.prototype, "slotDescriptionNodes", void 0);
 __decorate([
-    queryAssignedNodes({ slot: "suffix" })
+    queryAssignedElements({ slot: "suffix", flatten: true })
 ], Input.prototype, "slotSuffixNodes", void 0);
 __decorate([
-    queryAssignedNodes({ slot: "prefix" })
+    queryAssignedElements({ slot: "prefix", flatten: true })
 ], Input.prototype, "slotPrefixNodes", void 0);
 __decorate([
     query("input")

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

@@ -4,20 +4,20 @@ import "@supersoniks/concorde/core/components/ui/pop/pop";
 import "@supersoniks/concorde/core/components/functional/queue/queue";
 import "@supersoniks/concorde/core/components/ui/menu/menu-item";
 import { Size } from "../../_css/size";
-import { ResizeController } from "@lit-labs/observers/resize_controller.js";
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
 type ListItem = Record<string, string>;
 declare const InputAutocomplete_base: (new (...args: any[]) => import("../../../../mixins/TemplatesContainer").TemplatesContainerInterface) & {
     new (...args: any[]): {
         validateFormElement(): void;
         forceAutoFill: boolean;
-        _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";
+        _type: "number" | "search" | "time" | "file" | "button" | "url" | "color" | "hidden" | "image" | "text" | "reset" | "submit" | "email" | "tel" | "month" | "week" | "checkbox" | "radio" | "range" | "date" | "datetime-local" | "password";
+        type: "number" | "search" | "time" | "file" | "button" | "url" | "color" | "hidden" | "image" | "text" | "reset" | "submit" | "email" | "tel" | "month" | "week" | "checkbox" | "radio" | "range" | "date" | "datetime-local" | "password";
         _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;
+        autocomplete?: "url" | "name" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "language" | "nickname" | "organization-title" | "cc-additional-name" | "bday" | "sex" | "impp" | "photo" | undefined;
         getFormPublisher(): any;
         updateDataValue(): void;
         handleChange(e?: Event | undefined): void;

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

@@ -5,8 +5,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement, css, nothing } from "lit";
-import { customElement, property, queryAssignedNodes, state, } from "lit/decorators.js";
-import { FormInput, FormElement, Subscriber, TemplatesContainer, } from "@supersoniks/concorde/mixins";
+import { customElement, property, queryAssignedElements, state } from "lit/decorators.js";
+import { FormInput, FormElement, Subscriber, TemplatesContainer } from "@supersoniks/concorde/mixins";
 import "@supersoniks/concorde/core/components/ui/form/input/input";
 import "@supersoniks/concorde/core/components/ui/pop/pop";
 import "@supersoniks/concorde/core/components/functional/queue/queue";
@@ -14,7 +14,7 @@ import "@supersoniks/concorde/core/components/ui/menu/menu-item";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { PublisherManager } from "@supersoniks/concorde/utils";
 import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
-import { ResizeController } from "@lit-labs/observers/resize_controller.js";
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
 /**
  * Input avec autocomplete. Propose des valeurs à partir d'un sonic-queue.
  * L'input permet de filtrer les choix de valeurs dans le sonic-pop.
@@ -54,29 +54,22 @@ let InputAutocomplete = class InputAutocomplete extends TemplatesContainer(FormI
             this.queryQueueListItem(this.initQueueDataProvider, this.findSelection, this.setSearchFromSelection);
         };
         this.selectListItem = (listItem) => {
-            var _a;
-            (_a = this.formValuePublisher) === null || _a === void 0 ? void 0 : _a.set(listItem[this.name]);
+            this.formValuePublisher?.set(listItem[this.name]);
         };
         this.findSearchedItem = (listItem) => {
-            var _a;
-            return (listItem[this.searchParameter || this.name] == ((_a = this.searchPublisher) === null || _a === void 0 ? void 0 : _a.get()));
+            return listItem[this.searchParameter || this.name] == this.searchPublisher?.get();
         };
         this.findSelection = (listItem) => {
             return listItem[this.name] == this.value;
         };
         this.setSearchFromSelection = (listItem) => {
-            var _a;
             this.lastValidSearch = listItem[this.searchParameter || this.name];
-            (_a = this.searchPublisher) === null || _a === void 0 ? void 0 : _a.set(this.lastValidSearch);
+            this.searchPublisher?.set(this.lastValidSearch);
         };
         this.updateActiveSelection = () => {
-            var _a, _b, _c;
             this.queryQueueListItem(this.queueDataProvider, this.findSearchedItem, this.selectListItem);
-            if (!this.select &&
-                this.lastValidSearch &&
-                this.lastValidSearch != ((_a = this.searchPublisher) === null || _a === void 0 ? void 0 : _a.get()) &&
-                ((_b = this.formValuePublisher) === null || _b === void 0 ? void 0 : _b.get())) {
-                (_c = this.formValuePublisher) === null || _c === void 0 ? void 0 : _c.set("");
+            if (!this.select && this.lastValidSearch && this.lastValidSearch != this.searchPublisher?.get() && this.formValuePublisher?.get()) {
+                this.formValuePublisher?.set("");
             }
         };
     }
@@ -84,11 +77,9 @@ let InputAutocomplete = class InputAutocomplete extends TemplatesContainer(FormI
      * Les fonctions de gestion
      */
     hasSlotOrProps() {
-        var _a;
-        this.hasInputPrefix = !!((_a = this.slotInputPrefixNodes) === null || _a === void 0 ? void 0 : _a.length);
+        this.hasInputPrefix = !!this.slotInputPrefixNodes?.length;
     }
     connectedCallback() {
-        var _a, _b, _c;
         super.connectedCallback();
         /**
          * Nom de la valeur de recherche
@@ -119,23 +110,22 @@ let InputAutocomplete = class InputAutocomplete extends TemplatesContainer(FormI
         if (this.value) {
             PublisherManager.get(this.initSearchDataProvider)[this.name] = this.value;
         }
-        (_a = this.initCountPublisher) === null || _a === void 0 ? void 0 : _a.onAssign(this.initSearchParameter);
+        this.initCountPublisher?.onAssign(this.initSearchParameter);
         /**
          * Lorsque la sélection change, on met à jour la valeur de recherche
          */
-        (_b = this.formValuePublisher) === null || _b === void 0 ? void 0 : _b.onAssign(this.updateSearchParameter);
+        this.formValuePublisher?.onAssign(this.updateSearchParameter);
         /**
          * Lorsque La valeur de recherche change, que le composant n'est pas en mode select
          * et qu'elle est différente de la derniere recherche valide on désactive la selection
          */
-        (_c = this.countPublisher) === null || _c === void 0 ? void 0 : _c.onAssign(this.updateActiveSelection);
+        this.countPublisher?.onAssign(this.updateActiveSelection);
     }
     disconnectedCallback() {
-        var _a, _b, _c;
         super.disconnectedCallback();
-        (_a = this.initCountPublisher) === null || _a === void 0 ? void 0 : _a.offAssign(this.initSearchParameter);
-        (_b = this.formValuePublisher) === null || _b === void 0 ? void 0 : _b.offAssign(this.updateSearchParameter);
-        (_c = this.countPublisher) === null || _c === void 0 ? void 0 : _c.offAssign(this.updateActiveSelection);
+        this.initCountPublisher?.offAssign(this.initSearchParameter);
+        this.formValuePublisher?.offAssign(this.updateSearchParameter);
+        this.countPublisher?.offAssign(this.updateActiveSelection);
         const getPublisher = PublisherManager.get;
         getPublisher(this.initSearchDataProvider).delete();
         getPublisher(this.initQueueDataProvider).delete();
@@ -162,19 +152,17 @@ let InputAutocomplete = class InputAutocomplete extends TemplatesContainer(FormI
         }
     }
     setSelectionRange(start, end) {
-        var _a;
-        (_a = this.querySelector("sonic-input")) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
+        this.querySelector("sonic-input")?.setSelectionRange(start, end);
     }
     handleHide() {
-        var _a, _b, _c;
         if (!this.select)
             return;
-        if (((_a = this.searchPublisher) === null || _a === void 0 ? void 0 : _a.get()) == "") {
+        if (this.searchPublisher?.get() == "") {
             this.lastValidSearch = "";
-            (_b = this.formValuePublisher) === null || _b === void 0 ? void 0 : _b.set("");
+            this.formValuePublisher?.set("");
             return;
         }
-        (_c = this.searchPublisher) === null || _c === void 0 ? void 0 : _c.set(this.lastValidSearch);
+        this.searchPublisher?.set(this.lastValidSearch);
     }
     render() {
         return html `
@@ -194,28 +182,13 @@ let InputAutocomplete = class InputAutocomplete extends TemplatesContainer(FormI
           inlineContent
           size=${this.size}
         >
-          <slot
-            name="prefix"
-            slot="prefix"
-            @slotchange=${this.hasSlotOrProps}
-          ></slot>
+          <slot name="prefix" slot="prefix" @slotchange=${this.hasSlotOrProps}></slot>
 
           ${this.select
-            ? html `
-                <sonic-icon
-                  slot="suffix"
-                  class="select-chevron"
-                  name="nav-arrow-down"
-                  .size=${this.size}
-                ></sonic-icon>
-              `
+            ? html ` <sonic-icon slot="suffix" class="select-chevron" name="nav-arrow-down" .size=${this.size}></sonic-icon> `
             : nothing}
         </sonic-input>
-        <sonic-menu
-          slot="content"
-          class="custom-scroll"
-          style="${this.offsetWidth ? `width: ${this.offsetWidth}px` : ""}"
-        >
+        <sonic-menu slot="content" class="custom-scroll" style="${this.offsetWidth ? `width: ${this.offsetWidth}px` : ""}">
           <sonic-queue
             dataProvider="${this.queueDataProvider}"
             filteredFields=${this.filteredFields}
@@ -281,7 +254,7 @@ __decorate([
     property({ type: String })
 ], InputAutocomplete.prototype, "searchParameter", void 0);
 __decorate([
-    queryAssignedNodes({ slot: "prefix" })
+    queryAssignedElements({ slot: "prefix", flatten: true })
 ], InputAutocomplete.prototype, "slotInputPrefixNodes", void 0);
 __decorate([
     state()

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

@@ -26,7 +26,7 @@ export declare class Select extends Select_base {
     set options(options: Array<SelectOption>);
     get options(): Array<SelectOption>;
     hasDoneFirstUpdate: boolean;
-    protected firstUpdated(): void;
+    protected firstUpdated(changedProperties: Map<string | number | symbol, unknown>): void;
     _value: string;
     set value(value: string);
     get value(): string;

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

@@ -5,7 +5,7 @@ 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, property, queryAssignedNodes, state } from "lit/decorators.js";
+import { customElement, property, queryAssignedElements, 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";
@@ -58,8 +58,9 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
     get options() {
         return this._options;
     }
-    firstUpdated() {
+    firstUpdated(changedProperties) {
         this.hasDoneFirstUpdate = true;
+        super.firstUpdated(changedProperties);
     }
     set value(value) {
         if (value == null && !this.hasDoneFirstUpdate)
@@ -118,15 +119,13 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
         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;
+        this.hasLabel = this.label || this.slotLabelNodes?.length ? true : false;
+        this.hasDescription = this.description || this.slotDescriptionNodes?.length ? true : false;
+        this.hasSuffix = this.slotSuffixNodes?.length ? true : false;
+        this.hasPrefix = this.slotPrefixNodes?.length ? true : false;
     }
     validateFormElement() {
-        var _a;
-        const select = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("select");
+        const select = this.shadowRoot?.querySelector("select");
         if (!select || select.checkValidity())
             return;
         const formPublisher = this.getFormPublisher();
@@ -143,10 +142,7 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
         //let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
         return html `
       <label for="form-element" class="${this.hasLabel ? "form-label" : "hidden"}"
-        >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot
-          name="label"
-          @slotchange=${this.hasSlotOrProps}
-        ></slot
+        >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot name="label" @slotchange=${this.hasSlotOrProps}></slot
       ></label>
 
       <div class="form-control ${classMap(slotClasses)}">
@@ -168,9 +164,7 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
           >
             ${repeat(this.options, (option) => option[this.valueKey], (option) => {
             const isSelected = this.value == option[this.valueKey] ? true : false;
-            return html `<option ?selected=${isSelected} value="${option[this.valueKey]}">
-                  ${option[this.wordingKey]}
-                </option>`;
+            return html `<option ?selected=${isSelected} value="${option[this.valueKey]}">${option[this.wordingKey]}</option>`;
         })}
             <slot></slot>
           </select>
@@ -179,11 +173,7 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
         <slot name="suffix" @slotchange=${this.hasSlotOrProps}></slot>
       </div>
 
-      <slot
-        name="description"
-        @slotchange=${this.hasSlotOrProps}
-        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>
     `;
@@ -272,16 +262,16 @@ __decorate([
     property()
 ], Select.prototype, "label", null);
 __decorate([
-    queryAssignedNodes({ slot: "label" })
+    queryAssignedElements({ slot: "label", flatten: true })
 ], Select.prototype, "slotLabelNodes", void 0);
 __decorate([
-    queryAssignedNodes({ slot: "description" })
+    queryAssignedElements({ slot: "description", flatten: true })
 ], Select.prototype, "slotDescriptionNodes", void 0);
 __decorate([
-    queryAssignedNodes({ slot: "suffix" })
+    queryAssignedElements({ slot: "suffix", flatten: true })
 ], Select.prototype, "slotSuffixNodes", void 0);
 __decorate([
-    queryAssignedNodes({ slot: "prefix" })
+    queryAssignedElements({ slot: "prefix", flatten: true })
 ], Select.prototype, "slotPrefixNodes", void 0);
 __decorate([
     state()

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

@@ -3,14 +3,14 @@ declare const Textarea_base: {
     new (...args: any[]): {
         validateFormElement(): void;
         forceAutoFill: boolean;
-        _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";
+        _type: "number" | "search" | "time" | "file" | "button" | "url" | "color" | "hidden" | "image" | "text" | "reset" | "submit" | "email" | "tel" | "month" | "week" | "checkbox" | "radio" | "range" | "date" | "datetime-local" | "password";
+        type: "number" | "search" | "time" | "file" | "button" | "url" | "color" | "hidden" | "image" | "text" | "reset" | "submit" | "email" | "tel" | "month" | "week" | "checkbox" | "radio" | "range" | "date" | "datetime-local" | "password";
         _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;
+        autocomplete?: "url" | "name" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "language" | "nickname" | "organization-title" | "cc-additional-name" | "bday" | "sex" | "impp" | "photo" | undefined;
         getFormPublisher(): any;
         updateDataValue(): void;
         handleChange(e?: Event | undefined): void;