@supersoniks/concorde 1.1.42 → 1.1.44

package/core/components/ui/form/css/form-control.js

@@ -1,35 +1,51 @@
 import { css } from "lit";
+export const label = css `
+  :host {
+    --sc-label-fs: var(--sc-fs, 1rem);
+    --sc-label-fw: var(--sc-label-font-weight);
+  }
+  label {
+    font-size: var(--sc-label-fs);
+    font-weight: var(--sc-label-fw);
+    line-height: 1.2;
+  }
+  .form-label {
+    margin-bottom: 0.22em;
+    display: block;
+  }
+`;
+export const description = css `
+  .form-description {
+    color: var(--sc-base-400);
+    font-size: 0.85em;
+    margin-top: 0.2em;
+    display: block;
+  }
+`;
 export const formControl = css `
-
   * {
     box-sizing: border-box;
   }
 
   :host {
     --sc-input-height: var(--sc-form-height);
-    --sc-input-border-width: var(--sc-form-border-width);
-    --sc-input-color: var(--sc-base-content);
+    --sc-input-c: var(--sc-input-color, var(--sc-base-content));
+    --sc-input-b-width: var(--sc-form-border-width);
+    --sc-input-b-color: var(--sc-input-border-color);
 
     --sc-item-rounded-tr: var(--sc-input-rounded);
     --sc-item-rounded-tl: var(--sc-input-rounded);
     --sc-item-rounded-bl: var(--sc-input-rounded);
     --sc-item-rounded-br: var(--sc-input-rounded);
 
-    --sc-input-fs: var(--sc-fs, 1rem) ;
+    --sc-input-fs: var(--sc-fs, 1rem);
     --sc-input-ff: inherit;
-    --sc-input-py: 0.6em;
-    --sc-input-px: 1.15em;
-
-    --sc-input-prefix-color: var(--sc-input-color);
-    --sc-input-prefix-bg: var(--sc-input-bg);
-    --sc-input-prefix-border-color: var(--sc-input-border-color);
-
-    --sc-input-suffix-color: var(--sc-input-color);
-    --sc-input-suffix-bg: var(--sc-input-bg);
-    --sc-input-suffix-border-color: var(--sc-input-border-color);
+    --sc-input-py: 0.55em;
+    --sc-input-px: clamp(0.3em, 8%, 1.1em);
 
-    --sc-label-fs: var(--sc-fs, 1rem);
-    --sc-label-fw: var(--sc-label-font-weight);
+    --sc-input-background: var(--sc-input-bg);
+    --sc-input-addon-c: var(--sc-input-addon-color, var(--sc-base));
+    --sc-input-addon-bg: var(--sc-input-c);
   }
 
   .form-element {
@@ -38,13 +54,13 @@ export const formControl = css `
     width: 100%;
 
     line-height: 1.1;
-    color: var(--sc-input-color);
+    color: var(--sc-input-c);
     border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr) var(--sc-item-rounded-br)
       var(--sc-item-rounded-bl);
 
     font-family: var(--sc-input-ff);
-    background-color: var(--sc-input-bg, var(--sc-base, #fff));
-    border: var(--sc-input-border-width) solid var(--sc-input-border-color, var(--sc-base-300, #aaa));
+    background-color: var(--sc-input-background);
+    border: var(--sc-input-b-width) solid var(--sc-input-b-color, var(--sc-base-300, #aaa));
     width: 100%;
     font-size: var(--sc-input-fs);
 
@@ -56,12 +72,6 @@ export const formControl = css `
     min-height: var(--sc-input-height);
   }
 
-  label {
-    font-size: var(--sc-label-fs);
-    font-weight: var(--sc-label-fw);
-    line-height: 1.2;
-  }
-
   .form-control {
     display: flex;
     width: 100%;
@@ -77,24 +87,24 @@ export const formControl = css `
     justify-content: center;
     line-height: 1.1;
     flex-shrink: 0;
-    padding-left: calc(-1 * var(--sc-input-px));
-    padding-right: calc(-1 * var(--sc-input-px));
+    padding-left: clamp(0.25em, 3%, calc(0.33 * var(--sc-input-px)));
+    padding-right: clamp(0.25em, 3%, calc(0.33 * var(--sc-input-px)));
   }
 
   :host(:not([inlineContent])) slot[name="prefix"] {
     border-radius: var(--sc-item-rounded-tl) 0 0 var(--sc-item-rounded-bl);
-    background-color: var(--sc-input-prefix-bg);
-    color: var(--sc-input-prefix-color);
-    border: var(--sc-input-border-width) solid var(--sc-input-prefix-border-color);
-    margin-right: calc(-1 * var(--sc-input-border-width));
+    background-color: var(--sc-input-addon-bg);
+    color: var(--sc-input-addon-c);
+    /*margin-right: calc(-1 * var(--sc-input-b-width));
+    border: none;*/
   }
 
   :host(:not([inlineContent])) slot[name="suffix"] {
     border-radius: 0 var(--sc-item-rounded-tr) var(--sc-item-rounded-br) 0;
-    background-color: var(--sc-input-suffix-bg);
-    color: var(--sc-input-suffix-color);
-    border: var(--sc-input-border-width) solid var(--sc-input-suffix-border-color);
-    margin-left: calc(-1 * var(--sc-input-border-width));
+    background-color: var(--sc-input-addon-bg);
+    color: var(--sc-input-addon-c);
+    /*margin-left: calc(-1 * var(--sc-input-b-width));
+    border: none;*/
   }
 
   :host(:not([inlineContent])) .has-prefix .form-element {
@@ -107,20 +117,62 @@ export const formControl = css `
     border-bottom-right-radius: 0;
   }
 
+  slot[name="suffix"]::slotted(sonic-icon),
+  slot[name="prefix"]::slotted(sonic-icon) {
+    font-size: 1.2em;
+  }
+
   /*InlineCONTENT */
-  :host([inlineContent]) {
-    --sc-input-py: 0;
+
+  .form-element > slot,
+  .form-element .form-element {
+    all: unset;
   }
+
   :host([inlineContent]) .form-element {
     display: flex;
-    flex-wrap: wrap;
     align-items: center;
     gap: 0.35em;
     min-height: var(--sc-form-height);
   }
 
+  :host([inlineContent]) .form-element .form-element {
+    appearance: none;
+    background: transparent;
+    border: none;
+    padding: 0;
+    display: block;
+    width: 50%;
+    min-width: 0;
+    flex: 1 1 auto;
+    height: auto;
+    min-height: auto;
+    border-radius: 0;
+  }
+  :host([inlineContent]) slot[name="prefix"]::slotted(*),
+  :host([inlineContent]) slot[name="suffix"]::slotted(*) {
+    display: block;
+    flex: 0 0 auto;
+    max-width: 100%;
+    max-width: 100%;
+  }
+
+  :host([inlineContent]) .has-suffix slot[name="suffix"] {
+    margin-right: calc(-0.5 * var(--sc-input-px));
+  }
+  :host([inlineContent]) .has-prefix slot[name="prefix"] {
+    margin-left: calc(-0.5 * var(--sc-input-px));
+  }
+
+  :host([inlineContent]) slot[name="suffix"]::slotted(*) {
+    margin-left: auto;
+  }
+
+  /* :host([inlineContent]) .input {
+
+  }*/
   /*Disabled */
-  :host([disabled]) .form-element-container {
+  :host([disabled]) .form-control {
     cursor: not-allowed;
   }
 
@@ -131,9 +183,12 @@ export const formControl = css `
   /*Disbaled*/
   :host([disabled]) .form-element {
     pointer-events: none;
-    background-color: var(--sc-base-100);
-    border-color: transparent;
-    color: var(--sc-base-400);
+    opacity: 0.5;
+    /* border-color: transparent;*/
+  }
+  :host([disabled]) .select-chevron {
+    display: none;
+    /* border-color: transparent;*/
   }
 
   /*PLACEHOLDER*/
@@ -142,8 +197,12 @@ export const formControl = css `
     opacity: 0.45;
   }
 
+  :host([placehoderAsLabel]) ::placeholder {
+    opacity: 1;
+  }
+
   :focus::placeholder {
-    opacity: 0;
+    opacity: 0 !important;
   }
 
   /*HOVER*/
@@ -166,11 +225,6 @@ export const formControl = css `
     display: block;
   }
 
-  .form-element > slot,
-  .form-element .form-element {
-    all: unset !important;
-  }
-
   /*Utilitaires*/
   .hidden {
     display: none;
@@ -179,33 +233,32 @@ export const formControl = css `
     display: contents;
   }
 
-
   /*ERROR*/
   :host([error]) {
-    --sc-input-border-color: var(--sc-danger);
+    --sc-input-b-color: var(--sc-danger);
   }
 
-  :host input:visited{
-    display:none;
+  :host input:visited {
+    display: none;
   }
 
   :host([touched][required]) :not(:focus):invalid {
-    --sc-input-border-color: var(--sc-danger);
-    --sc-input-color: var(--sc-danger);
+    --sc-input-b-color: var(--sc-danger);
+    --sc-input-c: var(--sc-danger);
   }
 
-  :host([touched][required]) :not(:focus):invalid + .select-chevron{
-    --sc-input-color: var(--sc-danger);
+  :host([touched][required]) :not(:focus):invalid + .select-chevron {
+    --sc-input-c: var(--sc-danger);
   }
 
   /*VALID*/
   :host([touched][required]) :not([value=""]):not(:focus):valid {
-    --sc-input-border-color: var(--sc-success);
-    --sc-input-color: var(--sc-success);
+    --sc-input-b-color: var(--sc-success);
+    --sc-input-c: var(--sc-success);
   }
 
-  :host([touched][required]) :not(:focus):valid + .select-chevron{
-    --sc-input-color: var(--sc-success);
+  :host([touched][required]) :not(:focus):valid + .select-chevron {
+    --sc-input-c: var(--sc-success);
   }
 
   /*Input COLOR*/
@@ -220,13 +273,13 @@ export const formControl = css `
   input[type="color"]::-webkit-color-swatch {
     border: none;
     border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr) var(--sc-item-rounded-br)
-    var(--sc-item-rounded-bl);
+      var(--sc-item-rounded-bl);
   }
 
   /*Input Image*/
   :host([type="image"]) .form-element {
     padding: 0;
-    border:none;
+    border: none;
   }
 
   /*Input reset & image*/
@@ -236,14 +289,39 @@ export const formControl = css `
   }
 
   /*Input search*/
+  :host([type="search"]) {
+    appearance: none !important;
+  }
+
   input[type="search"]::-webkit-search-cancel-button {
-    appearance:none;
-    cursor:pointer;
-    height: .65em;
-    width: .65em;
+    appearance: none;
+    cursor: pointer;
+    height: 0.65em;
+    width: 0.65em;
     background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjEyMy4wNXB4IiBoZWlnaHQ9IjEyMy4wNXB4IiB2aWV3Qm94PSIwIDAgMTIzLjA1IDEyMy4wNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIzLjA1IDEyMy4wNTsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTEyMS4zMjUsMTAuOTI1bC04LjUtOC4zOTljLTIuMy0yLjMtNi4xLTIuMy04LjUsMGwtNDIuNCw0Mi4zOTlMMTguNzI2LDEuNzI2Yy0yLjMwMS0yLjMwMS02LjEwMS0yLjMwMS04LjUsMGwtOC41LDguNQ0KCQljLTIuMzAxLDIuMy0yLjMwMSw2LjEsMCw4LjVsNDMuMSw0My4xbC00Mi4zLDQyLjVjLTIuMywyLjMtMi4zLDYuMSwwLDguNWw4LjUsOC41YzIuMywyLjMsNi4xLDIuMyw4LjUsMGw0Mi4zOTktNDIuNGw0Mi40LDQyLjQNCgkJYzIuMywyLjMsNi4xLDIuMyw4LjUsMGw4LjUtOC41YzIuMy0yLjMsMi4zLTYuMSwwLTguNWwtNDIuNS00Mi40bDQyLjQtNDIuMzk5QzEyMy42MjUsMTcuMTI1LDEyMy42MjUsMTMuMzI1LDEyMS4zMjUsMTAuOTI1eiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=);
     background-size: contain;
     background-repeat: no-repeat;
-   }
+  }
 
+  /* Text align */
+  :host([align="center"]) .form-element {
+    text-align: center;
+  }
+  :host([align="left"]) .form-element {
+    text-align: left;
+  }
+  :host([align="right"]) .form-element {
+    text-align: right;
+  }
+
+  /* No arrows ion input Number */
+  :host([noAppearance]) input[type="number"]::-webkit-outer-spin-button,
+  :host([noAppearance]) input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  :host([noAppearance]) input[type="number"] {
+    -moz-appearance: textfield !important;
+  }
 `;

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

@@ -1,5 +1,6 @@
 import { LitElement } from "lit";
-declare const Fieldset_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+import "./legend";
+declare const Fieldset_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<import("../../../../_types/types").CoreJSType>) & typeof LitElement;
 export declare class Fieldset extends Fieldset_base {
     static styles: import("lit").CSSResult[];
     /**
@@ -10,6 +11,12 @@ export declare class Fieldset extends Fieldset_base {
      * Lier à un formulaire qui ne serait pas parent du fieldset
      */
     form?: string;
+    label?: string;
+    description?: string;
+    iconName?: string;
+    iconLibrary?: string;
+    iconPrefix?: string;
+    variant: "default" | "ghost" | "shadow";
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

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

@@ -4,10 +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, css } from "lit";
+import { html, LitElement, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import "./legend";
 const tagName = "sonic-fieldset";
 let Fieldset = class Fieldset extends Subscriber(LitElement) {
     constructor() {
@@ -17,9 +18,19 @@ let Fieldset = class Fieldset extends Subscriber(LitElement) {
          * Désactiver le fieldset
          */
         this.disabled = false;
+        this.variant = "default";
     }
     render() {
         return html `<fieldset form="${ifDefined(this.form)}" ?disabled="${this.disabled}">
+      ${this.label
+            ? html ` <sonic-legend
+            label=${ifDefined(this.label)}
+            description=${ifDefined(this.description)}
+            iconName=${ifDefined(this.iconName)}
+            iconPrefix=${ifDefined(this.iconPrefix)}
+            iconLibrary=${ifDefined(this.iconLibrary)}
+          ></sonic-legend>`
+            : nothing}
       <slot></slot>
     </fieldset>`;
     }
@@ -29,7 +40,7 @@ Fieldset.styles = [
       :host {
         --sc-fieldset-mt: 0;
         --sc-fieldset-mb: 1rem;
-        --sc-fieldset-border-color: var(--sc-base-200);
+        --sc-fieldset-border-color: var(--sc-border-color);
         --sc-fieldset-border-width: var(--sc-form-border-width);
 
         margin-top: var(--sc-fieldset-mt);
@@ -44,11 +55,24 @@ Fieldset.styles = [
         all: unset;
         display: contents;
       }
-      
+      :host([variant="shadow"]),
+      :host([variant="ghost"]) {
+        --sc-fieldset-border-color: transparent;
+      }
+      :host([variant="shadow"]) {
+        --sc-fieldset-border-color: transparent;
+        box-shadow: var(--sc-shadow-lg);
+      }
+
+      sonic-legend,
       ::slotted(sonic-legend) {
         margin-bottom: 1.5rem;
         display: block;
       }
+
+      ::slotted(sonic-legend:last-child) {
+        margin-bottom: 0;
+      }
     `,
 ];
 __decorate([
@@ -57,12 +81,25 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Fieldset.prototype, "form", void 0);
+__decorate([
+    property({ type: String })
+], Fieldset.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], Fieldset.prototype, "description", void 0);
+__decorate([
+    property({ type: String })
+], Fieldset.prototype, "iconName", void 0);
+__decorate([
+    property({ type: String })
+], Fieldset.prototype, "iconLibrary", void 0);
+__decorate([
+    property({ type: String })
+], Fieldset.prototype, "iconPrefix", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Fieldset.prototype, "variant", void 0);
 Fieldset = __decorate([
     customElement(tagName)
 ], Fieldset);
 export { Fieldset };
-//Ajout pour la creation du cem notamment pour Storybook
-try {
-    customElements.define(tagName, Fieldset);
-}
-catch (e) { }

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

@@ -28,8 +28,3 @@ LegendDescription = __decorate([
     customElement("sonic-legend-description")
 ], LegendDescription);
 export { LegendDescription };
-//Ajout pour la creation du cem notamment pour Storybook
-try {
-    customElements.define("sonic-legend-description", LegendDescription);
-}
-catch (e) { }

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

@@ -59,11 +59,12 @@ let Legend = class Legend extends LitElement {
 Legend.styles = [
     css `
       :host {
-        --sc-legend-font-size: 1.75rem;
+        --sc-legend-font-size: 1.5rem;
         --sc-legend-font-weight: var(--sc-font-weight-base);
         --sc-legend-font-style: var(--sc-headings-font-style);
         --sc-legend-family: var(--sc-headings-font-family);
         --sc-legend-line-height: var(--sc-headings-line-height);
+        --sc-legend-color: var(--sc-base-content);
         display: flex;
         width: 100%;
       }
@@ -74,6 +75,7 @@ Legend.styles = [
         font-style: var(--sc-legend-font-style);
         font-family: var(--sc-legend-font-family);
         line-height: var(--sc-legend-line-height);
+        color: var(--sc-legend-color);
         padding: 0;
         display: flex;
         width: 100%;
@@ -114,8 +116,3 @@ Legend = __decorate([
     customElement(tagName)
 ], Legend);
 export { Legend };
-//Ajout pour la creation du cem notamment pour Storybook
-try {
-    customElements.define(tagName, Legend);
-}
-catch (e) { }

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

@@ -1,5 +1,7 @@
 import { LitElement } from "lit";
 export declare class FormActions extends LitElement {
     static styles: import("lit").CSSResult[];
+    direction: string;
+    justify: string;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -5,27 +5,42 @@ 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 { customElement, property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
 const tagName = "sonic-form-actions";
 let FormActions = class FormActions extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.direction = "row";
+        this.justify = "flex-start";
+    }
     render() {
-        return html `<slot></slot>`;
+        const styles = {
+            flexDirection: this.direction,
+            justifyContent: this.justify,
+        };
+        return html `<slot style=${styleMap(styles)}></slot>`;
     }
 };
 FormActions.styles = [
     css `
-      :host{
-        display:flex;
-        gap:.3rem;
+      :host {
+        display: block;
+      }
+      slot {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.3rem;
       }
-    `
+    `,
 ];
+__decorate([
+    property({ type: String })
+], FormActions.prototype, "direction", void 0);
+__decorate([
+    property({ type: String })
+], FormActions.prototype, "justify", void 0);
 FormActions = __decorate([
     customElement(tagName)
 ], FormActions);
 export { FormActions };
-//Ajout pour la creation du cem notamment pour Storybook
-try {
-    customElements.define(tagName, FormActions);
-}
-catch (e) { }

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

@@ -1,9 +1,12 @@
 import { LitElement } from "lit";
 import { ResizeController } from "@lit-labs/observers/resize_controller.js";
-declare const FormLayout_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+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[];
-    _resizeController: ResizeController;
+    _resizeController: ResizeController<unknown>;
+    slottedElements: HTMLElement[];
+    oneFormElement: boolean;
+    onSlotChange(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

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

@@ -5,17 +5,32 @@ 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 { customElement, property, queryAssignedElements } from "lit/decorators.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";
 let FormLayout = class FormLayout extends Subscriber(LitElement) {
     constructor() {
         super(...arguments);
         this._resizeController = new ResizeController(this, {});
+        this.oneFormElement = false;
+    }
+    onSlotChange() {
+        let elements = this.slottedElements;
+        const formElementColumns = ["sonic-input", "sonic-select", "sonic-input-autocomplete", ".form-item-container"];
+        // keep only form elements
+        elements = elements.filter((elt) => formElementColumns.includes(elt.nodeName.toLowerCase()));
+        this.oneFormElement = elements.length == 1;
     }
     render() {
-        return html `<div class=${this.offsetWidth > 440 ? "cq--md" : ""}><slot></slot></div>`;
+        const classes = {
+            "cq--md": this.offsetWidth > 440,
+            "one-form-element": this.oneFormElement,
+        };
+        return html `<div class=${classMap(classes)}>
+      <slot @slotchange=${this.onSlotChange}></slot>
+    </div>`;
     }
 };
 FormLayout.styles = [
@@ -34,13 +49,19 @@ FormLayout.styles = [
         grid-gap: 1.75rem;
         grid-template-columns: repeat(2, minmax(0, 1fr));
       }
-
-      ::slotted(sonic-radio),
+      .one-form-element {
+        grid-template-columns: 1fr;
+      }
+      /*::slotted(sonic-radio),
       ::slotted(sonic-checkbox),
       ::slotted(sonic-form-actions),
       ::slotted(sonic-divider),
       ::slotted(sonic-textarea) {
         grid-column: 1 / -1;
+      }*/
+
+      ::slotted(:not(sonic-input):not(sonic-select):not(sonic-input-autocomplete):not(.form-item-container)) {
+        grid-column: 1 / -1;
       }
 
       ::slotted(sonic-divider) {
@@ -48,12 +69,13 @@ FormLayout.styles = [
       }
     `,
 ];
+__decorate([
+    queryAssignedElements({ flatten: true })
+], FormLayout.prototype, "slottedElements", void 0);
+__decorate([
+    property({ type: Boolean })
+], FormLayout.prototype, "oneFormElement", void 0);
 FormLayout = __decorate([
     customElement(tagName)
 ], FormLayout);
 export { FormLayout };
-//Ajout pour la creation du cem notamment pour Storybook
-try {
-    customElements.define(tagName, FormLayout);
-}
-catch (e) { }