@supersoniks/concorde 1.1.41 → 1.1.43

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

@@ -1,4 +1,4 @@
-import { LitElement } from "lit";
+import { LitElement, PropertyValues } from "lit";
 declare const Input_base: {
     new (...args: any[]): {
         validateFormElement(): void;
@@ -13,26 +13,20 @@ declare const Input_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;
+        handleChange(e?: Event | undefined): void;
+        handleBlur(e?: Event | undefined): void;
         getValueForFormPublisher(): any;
+        focus?: (() => void) | undefined;
+        shadowRoot?: ShadowRoot | undefined;
         error: boolean;
         autofocus: boolean;
         required: boolean;
         disabled: true | null;
         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.
-         */
+        ariaLabelledby?: string | undefined;
+        ariaLabel?: string | undefined;
+        _value: string | null;
+        value: string | null;
         _name: string;
         name: string;
         props: any;
@@ -60,7 +54,7 @@ declare const Input_base: {
         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<any>) & typeof LitElement;
 export declare class Input extends Input_base {
     static styles: import("lit").CSSResult[];
     /**
@@ -78,6 +72,7 @@ export declare class Input extends Input_base {
     maxlength?: number;
     src?: string;
     inlineContent: boolean;
+    disableInlineContentFocus: boolean;
     slotLabelNodes: Array<Node>;
     slotDescriptionNodes: Array<Node>;
     slotSuffixNodes: Array<Node>;
@@ -87,13 +82,15 @@ export declare class Input extends Input_base {
     hasLabel: boolean;
     hasSuffix: boolean;
     hasPrefix: boolean;
-    updated(): void;
     sameValueAsHandle?: (v: string) => void;
     sameValueAsName?: string;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    onSlotChange(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    hasSlotOrProps(): void;
     inlineContentFocus(): void;
+    changeTimeoutId?: ReturnType<typeof setTimeout>;
+    handleChange(e?: Event): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

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

@@ -4,11 +4,11 @@ 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 } from "lit";
+import { html, LitElement, css } from "lit";
 import { customElement, property, queryAssignedNodes, state } from "lit/decorators.js";
 import { query } from "lit/decorators/query.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";
@@ -31,93 +31,130 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
         super(...arguments);
         this.readonly = false;
         this.inlineContent = false;
+        this.disableInlineContentFocus = false;
         this.hasDescription = false;
         this.hasLabel = false;
         this.hasSuffix = false;
         this.hasPrefix = false;
     }
-    updated() {
-        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;
-    }
     connectedCallback() {
         super.connectedCallback();
+        this.hasSlotOrProps();
         if (this.hasAttribute("sameValueAs")) {
             this.sameValueAsName = this.getAttribute("sameValueAs");
             this.sameValueAsHandle = (v) => (this.pattern = v);
-            this.getFormPublisher()[this.sameValueAsName].onAssign(this.sameValueAsHandle);
+            let formPublisher = this.getFormPublisher();
+            if (!formPublisher)
+                return;
+            formPublisher[this.sameValueAsName].onAssign(this.sameValueAsHandle);
         }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         if (this.hasAttribute("sameValueAs") && this.sameValueAsName) {
-            this.getFormPublisher()[this.sameValueAsName].offAssign(this.sameValueAsHandle);
+            let formPublisher = this.getFormPublisher();
+            if (!formPublisher)
+                return;
+            formPublisher[this.sameValueAsName].offAssign(this.sameValueAsHandle);
         }
     }
-    onSlotChange() {
-        this.requestUpdate();
+    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;
     }
     inlineContentFocus() {
         var _a;
-        if (!this.inlineContent)
+        if (!this.inlineContent || this.disableInlineContentFocus)
             return;
         (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
     }
+    handleChange(e) {
+        if (!this.hasAttribute("inputDelayMs")) {
+            super.handleChange(e);
+            return;
+        }
+        if (this.changeTimeoutId)
+            clearTimeout(this.changeTimeoutId);
+        this.changeTimeoutId = setTimeout(() => super.handleChange(e), parseInt(this.getAttribute("inputDelayMs")));
+    }
     render() {
         const slotClasses = {
             "has-prefix": this.hasPrefix,
             "has-suffix": this.hasSuffix,
         };
-        let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
+        //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
+        >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot
           name="label"
-          @slotchange=${this.onSlotChange}
+          @slotchange=${this.hasSlotOrProps}
         ></slot
       ></label>
 
       <div @click=${this.inlineContentFocus} class="form-control ${classMap(slotClasses)}">
-        <div class=" ${this.inlineContent ? "form-element form-element-wrapper" : "contents"}">
-          <slot name="prefix" @slotchange=${this.onSlotChange}></slot>
-          <input
-            id="form-element"
-            part="input"
-            class="form-element input"
-            @input=${this.handleChange}
-            @blur=${this.handleBlur}
-            type=${this.type}
-            disabled=${ifDefined(this.disabled)}
-            ?readonly=${this.readonly}
-            ?autofocus=${this.autofocus}
-            list=${ifDefined(this.list)}
-            tabindex=${ifDefined(this.tabindex)}
-            pattern=${ifDefined(this.pattern)}
-            min=${ifDefined(this.min)}
-            max=${ifDefined(this.max)}
-            step=${ifDefined(this.step)}
-            src=${ifDefined(this.src)}
-            minlength=${ifDefined(this.minlength)}
-            maxlength=${ifDefined(this.maxlength)}
-            placeholder=${ifDefined(this.placeholder)}
-            required=${ifDefined(this.required)}
-            autocomplete=${ifDefined(this.autocomplete)}
-            .name=${this.name}
-            .value=${this.value}
-          />
-          <slot name="suffix" @slotchange=${this.onSlotChange}></slot>
+        <div class="${this.inlineContent ? "form-element form-element-wrapper" : "contents"}">
+            <slot name="prefix" @slotchange=${this.hasSlotOrProps}></slot>
+            <input
+              id="form-element"
+              part="input"
+              class="form-element input"
+              @input=${this.handleChange}
+              @blur=${this.handleBlur}
+              type=${this.type}
+              disabled=${ifDefined(this.disabled)}
+              ?readonly=${this.readonly}
+              ?autofocus=${this.autofocus}
+              list=${ifDefined(this.list)}
+              tabindex=${ifDefined(this.tabindex)}
+              pattern=${ifDefined(this.pattern)}
+              min=${ifDefined(this.min)}
+              max=${ifDefined(this.max)}
+              step=${ifDefined(this.step)}
+              src=${ifDefined(this.src)}
+              minlength=${ifDefined(this.minlength)}
+              maxlength=${ifDefined(this.maxlength)}
+              placeholder=${ifDefined(this.placeholder)}
+              required=${ifDefined(this.required)}
+              autocomplete=${ifDefined(this.autocomplete)}
+              aria-label=${ifDefined(this.ariaLabel)}
+              aria-labelledby=${ifDefined(this.ariaLabelledby)}
+              .name=${this.name}
+              .value=${this.value}
+            />
+            <slot name="suffix" @slotchange=${this.hasSlotOrProps}></slot>
+          </div>
         </div>
+        <slot
+          name="description"
+          @slotchange=${this.hasSlotOrProps}
+          class="${this.hasDescription ? "form-description" : "hidden"}"
+        >
+          ${this.description ? html `${unsafeHTML(this.description)}` : ""}
+        </slot>
+        <slot name="list"></slot>
       </div>
-      <slot name="description" class="${this.hasDescription ? "form-description" : "hidden"}">
-        ${this.description ? html `${unsafeHTML(this.description)}` : ""}
-      </slot>
     `;
     }
 };
-Input.styles = [fontSize, formControl];
+Input.styles = [
+    fontSize,
+    formControl,
+    label,
+    description,
+    css `
+      :host([type="hidden"]) {
+        appearance: none !important;
+        display: none !important;
+      }
+    `,
+];
 __decorate([
     property({ type: String, reflect: true })
 ], Input.prototype, "size", void 0);
@@ -154,6 +191,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Input.prototype, "inlineContent", void 0);
+__decorate([
+    property({ type: Boolean })
+], Input.prototype, "disableInlineContentFocus", void 0);
 __decorate([
     queryAssignedNodes({ slot: "label" })
 ], Input.prototype, "slotLabelNodes", void 0);
@@ -185,8 +225,3 @@ Input = __decorate([
     customElement(tagName)
 ], Input);
 export { Input };
-//Ajout pour Storybook
-try {
-    customElements.define(tagName, Input);
-}
-catch (e) { }

package/core/components/ui/form/input/password-helper.d.ts

@@ -1,6 +1,6 @@
 import { LitElement, nothing } from "lit";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
-declare const SonicComponent_base: (new (...args: any[]) => import("../../../../mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+declare const SonicComponent_base: (new (...args: any[]) => import("../../../../mixins/Subscriber").SubscriberInterface<any>) & typeof LitElement;
 export declare class SonicComponent extends SonicComponent_base {
     name?: string;
     minChars: number;
@@ -10,6 +10,12 @@ export declare class SonicComponent extends SonicComponent_base {
     hasMajuscule: boolean;
     hasNumber: boolean;
     hasSpecialChar: boolean;
+    wording_password_helper_decription: string;
+    wording_password_helper_min_length: string;
+    wording_password_helper_lower_case: string;
+    wording_password_helper_upper_case: string;
+    wording_password_helper_number: string;
+    wording_password_helper_special_char: string;
     checkValue?: (v: string) => void;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/core/components/ui/form/input/password-helper.js

@@ -10,7 +10,6 @@ import { Subscriber } from "@supersoniks/concorde/mixins";
 import { PublisherManager } from "@supersoniks/concorde/utils";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
 const tagName = "sonic-password-helper"; // For Astro.build
-console.log("HEY");
 let SonicComponent = class SonicComponent extends Subscriber(LitElement) {
     constructor() {
         super(...arguments);
@@ -21,6 +20,12 @@ let SonicComponent = class SonicComponent extends Subscriber(LitElement) {
         this.hasMajuscule = false;
         this.hasNumber = false;
         this.hasSpecialChar = false;
+        this.wording_password_helper_decription = "Le mot de passe doit contenir au moins :";
+        this.wording_password_helper_min_length = "8 caractères";
+        this.wording_password_helper_lower_case = "1 minuscule";
+        this.wording_password_helper_upper_case = "1 majuscule";
+        this.wording_password_helper_number = "1 chiffre";
+        this.wording_password_helper_special_char = "1 caractère spécial";
     }
     connectedCallback() {
         super.connectedCallback();
@@ -46,23 +51,23 @@ let SonicComponent = class SonicComponent extends Subscriber(LitElement) {
         if (this.checkValue && this.name) {
             PublisherManager.get(this.getAncestorAttributeValue("formDataProvider"))[this.name].offAssign(this.checkValue);
         }
+        super.disconnectedCallback();
     }
     getIcon(test) {
         return test
-            ? html `<sonic-icon library="heroicons" , name="face-smile"></sonic-icon>`
-            : html `<sonic-icon library="heroicons" , name="x-circle"></sonic-icon>`;
+            ? html `<sonic-icon library="heroicons" name="face-smile"></sonic-icon>`
+            : html `<sonic-icon library="heroicons" name="x-mark"></sonic-icon>`;
     }
-    //TODO Multilangue
     render() {
         if (this.hasNoChar)
             return nothing;
         return html `
-      <div>Le mot de passe doit contenir au moins :</div>
-      <div>${this.getIcon(this.hasEnoughChars)} 8 caractères</div>
-      <div>${this.getIcon(this.hasMinuscule)} 1 minuscule</div>
-      <div>${this.getIcon(this.hasMajuscule)} 1 majuscule</div>
-      <div>${this.getIcon(this.hasNumber)} 1 chiffre</div>
-      <div>${this.getIcon(this.hasSpecialChar)} 1 caractère spécial parmi !"#$%&'()*+,-./:;<=>?@[]^_\`{|}~</div>
+      <div>${this.wording_password_helper_decription}</div>
+      <div>${this.getIcon(this.hasEnoughChars)} ${this.wording_password_helper_min_length}</div>
+      <div>${this.getIcon(this.hasMinuscule)} ${this.wording_password_helper_lower_case}</div>
+      <div>${this.getIcon(this.hasMajuscule)} ${this.wording_password_helper_upper_case}</div>
+      <div>${this.getIcon(this.hasNumber)} ${this.wording_password_helper_number}</div>
+      <div>${this.getIcon(this.hasSpecialChar)} ${this.wording_password_helper_special_char}</div>
     `;
     }
 };
@@ -90,6 +95,24 @@ __decorate([
 __decorate([
     state()
 ], SonicComponent.prototype, "hasSpecialChar", void 0);
+__decorate([
+    property()
+], SonicComponent.prototype, "wording_password_helper_decription", void 0);
+__decorate([
+    property()
+], SonicComponent.prototype, "wording_password_helper_min_length", void 0);
+__decorate([
+    property()
+], SonicComponent.prototype, "wording_password_helper_lower_case", void 0);
+__decorate([
+    property()
+], SonicComponent.prototype, "wording_password_helper_upper_case", void 0);
+__decorate([
+    property()
+], SonicComponent.prototype, "wording_password_helper_number", void 0);
+__decorate([
+    property()
+], SonicComponent.prototype, "wording_password_helper_special_char", void 0);
 SonicComponent = __decorate([
     customElement(tagName)
 ], SonicComponent);

package/core/components/ui/form/input/same-value-helper.d.ts

@@ -1,6 +1,6 @@
 import { LitElement, nothing } from "lit";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
-declare const SonicComponent_base: (new (...args: any[]) => import("../../../../mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+declare const SonicComponent_base: (new (...args: any[]) => import("../../../../mixins/Subscriber").SubscriberInterface<any>) & typeof LitElement;
 export declare class SonicComponent extends SonicComponent_base {
     name?: string;
     sameValueAs?: string;

package/core/components/ui/form/input/same-value-helper.js

@@ -42,6 +42,7 @@ let SonicComponent = class SonicComponent extends Subscriber(LitElement) {
             formDataProvider[this.name].offAssign(this.checkValue);
             formDataProvider[this.sameValueAs].offAssign(this.checkValue);
         }
+        super.disconnectedCallback();
     }
     //TODO Multilangue
     render() {

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

@@ -0,0 +1,34 @@
+import { LitElement } from "lit";
+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";
+import "@supersoniks/concorde/core/components/ui/menu/menu-item";
+declare const InputAutocomplete_base: (new (...args: any[]) => import("../../../../mixins/TemplatesContainer").TemplatesContainerInterface) & (new (...args: any[]) => import("../../../../mixins/Subscriber").SubscriberInterface<any>) & typeof LitElement;
+/**
+ * Input avec autocomplete. Propose des valeurs à partir d'un sonic-queue.
+ * L'input permet de filtrer les choix de valeurs dans le sonic-pop.
+ * La valeur de cet input est ensuite retransmit au premier via un dataProvider.
+ */
+export declare class InputAutocomplete extends InputAutocomplete_base {
+    static styles: import("lit").CSSResult[];
+    _name: string;
+    get name(): string;
+    set name(value: 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);
+    placeholder: string;
+    filteredFields: string;
+    readonly: boolean | null;
+    dataProviderExpression: string;
+    key: string;
+    value: string;
+    connectedCallback(): void;
+    formDataProvider: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

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

@@ -0,0 +1,133 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { 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";
+import "@supersoniks/concorde/core/components/ui/menu/menu-item";
+import { ifDefined } from "lit/directives/if-defined.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.
+ * La valeur de cet input est ensuite retransmit au premier via un dataProvider.
+ */
+let InputAutocomplete = class InputAutocomplete extends TemplatesContainer(Subscriber(LitElement)) {
+    constructor() {
+        super(...arguments);
+        // Filtering input
+        this._name = "";
+        this.forceAutoFill = false;
+        this.placeholder = "";
+        this.filteredFields = "";
+        this.readonly = null;
+        this.dataProviderExpression = "";
+        this.key = "";
+        this.value = "";
+        this.formDataProvider = "";
+    }
+    get name() {
+        return this._name;
+    }
+    set name(value) {
+        if (this.hasAttribute("name") && !this.forceAutoFill)
+            value = this.getAttribute("name");
+        this._name = value;
+        this.requestUpdate();
+    }
+    get description() {
+        return this._description;
+    }
+    set description(value) {
+        if (this.hasAttribute("description") && !this.forceAutoFill)
+            value = this.getAttribute("description");
+        this._description = value;
+        this.requestUpdate();
+    }
+    get label() {
+        return this._label;
+    }
+    set label(value) {
+        if (this.hasAttribute("label") && !this.forceAutoFill)
+            value = this.getAttribute("label");
+        this._label = value;
+        this.requestUpdate();
+    }
+    connectedCallback() {
+        this.formDataProvider = this.getAncestorAttributeValue("formDataProvider");
+        super.connectedCallback();
+    }
+    render() {
+        return html `
+      <sonic-pop toggle="false" style="display:block;">
+        <sonic-input
+          type="search"
+          data-keyboard-nav="nav-autocomplete"
+          label="${ifDefined(this.label)}"
+          description="${ifDefined(this.description)}"
+          name="${ifDefined(this.name)}"
+          value="${ifDefined(this.value)}"
+          autocomplete="off"
+          clearable
+        ></sonic-input>
+        <sonic-menu slot="content">
+          <sonic-queue
+            filteredFields=${this.filteredFields}
+            dataProviderExpression="${this.dataProviderExpression}"
+            dataFilterProvider="${this.formDataProvider}"
+            key="${this.key}"
+            .templates=${this.templateList}
+            displayContents
+          >
+          </sonic-queue>
+        </sonic-menu>
+      </sonic-pop>
+    `;
+    }
+};
+InputAutocomplete.styles = [
+    css `
+      :host {
+        display: block;
+      }
+    `,
+];
+__decorate([
+    property()
+], InputAutocomplete.prototype, "name", null);
+__decorate([
+    property()
+], InputAutocomplete.prototype, "forceAutoFill", void 0);
+__decorate([
+    property()
+], InputAutocomplete.prototype, "description", null);
+__decorate([
+    property()
+], InputAutocomplete.prototype, "label", null);
+__decorate([
+    property({ type: String })
+], InputAutocomplete.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], InputAutocomplete.prototype, "filteredFields", void 0);
+__decorate([
+    property({ type: Boolean })
+], InputAutocomplete.prototype, "readonly", void 0);
+__decorate([
+    property({ type: String })
+], InputAutocomplete.prototype, "dataProviderExpression", void 0);
+__decorate([
+    property({ type: String })
+], InputAutocomplete.prototype, "key", void 0);
+__decorate([
+    property({ type: String })
+], InputAutocomplete.prototype, "value", void 0);
+InputAutocomplete = __decorate([
+    customElement("sonic-input-autocomplete")
+], InputAutocomplete);
+export { InputAutocomplete };

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

@@ -1,4 +1,10 @@
 import { Checkbox } from "@supersoniks/concorde/core/components/ui/form/checkbox/checkbox";
+/**
+ * ### Le composant sonic-radio étend sonic-checkbox en assignant sa propriété radio à true.
+ *
+ * * Le type d'input html utilisé passe également de checkbox à radio.
+ * * Le comportement est donc similaire à un bouton radio classique mais avec les fonctionnalités de sonic-checkbox (ie : Subscriber / FormElement / FormCheckable).
+ */
 export declare class Radio extends Checkbox {
     static styles: (import("lit").CSSResult | import("lit").CSSResultGroup[])[];
     constructor();

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

@@ -7,13 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { css } from "lit";
 import { customElement } from "lit/decorators.js";
 import { Checkbox } from "@supersoniks/concorde/core/components/ui/form/checkbox/checkbox";
+const tagName = "sonic-radio";
 /**
  * ### Le composant sonic-radio étend sonic-checkbox en assignant sa propriété radio à true.
  *
  * * Le type d'input html utilisé passe également de checkbox à radio.
  * * Le comportement est donc similaire à un bouton radio classique mais avec les fonctionnalités de sonic-checkbox (ie : Subscriber / FormElement / FormCheckable).
  */
-const tagName = "sonic-radio";
 let Radio = class Radio extends Checkbox {
     constructor() {
         super();
@@ -35,12 +35,12 @@ Radio.styles = [
       :host sonic-icon {
         border-radius: 50%;
         overflow: hidden;
-        background-color:var(--sc-primary-content);
-        line-height:0;
-        display:block;
-        font-size:0;
-        height:10px;
-        width:10px;
+        background-color: var(--sc-primary-content);
+        line-height: 0;
+        display: block;
+        font-size: 1em;
+        height: 0.6em;
+        width: 0.6em;
       }
     `,
 ];
@@ -48,8 +48,3 @@ Radio = __decorate([
     customElement(tagName)
 ], Radio);
 export { Radio };
-//Ajout pour Storybook
-try {
-    customElements.define(tagName, Radio);
-}
-catch (e) { }