@ds-autonomie/web-components 1.20.0 → 1.21.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @ds-autonomie/web-components
 
+## 1.21.0
+
+### Minor Changes
+
+- 59f6850: `input`, `input-phone`, `input-mask`, `checkbox`, `checkbox-group`, `combobox`, `radio-group`, `select`, `textarea`, `file-upload`, `file-upload-item` : possibilité d'ajouter plusieurs messages d'erreur
+- a87a242: `step` : ajout de la possibilité de rendre une étape cliquable en tant que bouton ou lien href
+- 664c912: `menu-item` : ajout des types lien et bouton ; `menu-navigation` : possibilité d'ajouter des éléments `menu-item` en tant qu'enfants
+- 3d181ee: `header`, `footer` : possibilité d'ajuster les valeurs de max-width et padding
+- 81861d2: `quote`: ajout du composant citation
+- 2638b10: `filter-date` : utilisation dans un tiroir
+- 6d4d2cc: `profile-button`, `dropdown` : ajout du bouton profil
+
+### Patch Changes
+
+- 595d758: `alert` : changement de l'attribut title en alert-title, remplacement du role="alert" par aria-live="assertive" et aria-atomic="true"
+- 9dbf3e7: `link` : changement de la couleur des liens visités, uniformisation du comportement
+- 9823335: `input` : possibilité d'utiliser les slots avec le type date
+- ee04635: `radio-group` : les options readonly prennent le focus
+- 83620bb: `file-upload` : alignement de la taille de police de la description avec les maquettes
+- 47d1240: `table-header-cell` : affichage du prochain ordre de tri au focus (même comportement que pour le hover)
+- Updated dependencies [34a692a]
+- Updated dependencies [e15cf6f]
+  - @ds-autonomie/assets@1.4.3
+
 ## 1.20.0
 
 ### Minor Changes

package/dist/chunks/{chunk.HHFAWREW.js → chunk.2VU7NSY7.js}

@@ -38,7 +38,8 @@ var menu_navigation_styles_default = css`
   :host(.level-2) a {
     padding-inline-start: var(--dsa-spacing-48);
   }
-  a:hover {
+  a:hover,
+  a[aria-current='page']:hover {
     background-color: var(--dsa-wc-menu-item-hover-background-color);
     color: var(--dsa-wc-menu-item-hover-color);
   }

package/dist/chunks/{chunk.Q3EITOMR.js → chunk.2YJ4SOGI.js}

@@ -39,6 +39,7 @@ var card_styles_default = css`
     text-decoration: none;
     color: inherit;
   }
+
   .card.link a::after{
     position: absolute;
     left: 0;
@@ -46,11 +47,13 @@ var card_styles_default = css`
     top: 0;
     bottom: 0;
     content: '';
-    }
-    .card.link a:hover::after {
+  }
+
+  .card.link a:hover::after {
     bottom: -3px;
-    }
-    .card.link a:focus {
+  }
+    
+  .card.link a:focus {
     outline: none;
   }
 

package/dist/chunks/{chunk.T2DCZWWQ.js → chunk.2ZWEASQH.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.TSW2ZSHN.js";
 import {
   FilterBase
-} from "./chunk.EWT3XVAN.js";
+} from "./chunk.O4TH77FX.js";
 import {
   DSAOption
-} from "./chunk.G2PBKGYI.js";
+} from "./chunk.CYFF4SSJ.js";
 import {
   DSAInput
-} from "./chunk.T34EYGAF.js";
+} from "./chunk.V3HKSTWC.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";

package/dist/chunks/{chunk.Y7BIBKXU.js → chunk.32Q3N4FY.js}

@@ -1,37 +1,40 @@
 import {
   DSASelect
-} from "./chunk.3D63HEF5.js";
+} from "./chunk.5Y35HJBR.js";
+import {
+  maskedValueToRawValue,
+  rawValueToMaskedValue,
+  stripSpecialChars
+} from "./chunk.7OLEA3GQ.js";
 import {
   getPhoneConfig
 } from "./chunk.65HTBW2L.js";
 import {
   input_phone_styles_default
-} from "./chunk.HSLR5GY4.js";
+} from "./chunk.5KFYZRQZ.js";
 import {
   frenchFlagOption,
   frenchNumberPrefix,
   phonePrefixOptions
 } from "./chunk.ESYJVRG3.js";
-import {
-  maskedValueToRawValue,
-  rawValueToMaskedValue,
-  stripSpecialChars
-} from "./chunk.7OLEA3GQ.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
+import {
+  renderFormElementErrors
+} from "./chunk.IZBHR7GP.js";
 import {
   FormControlController
 } from "./chunk.KIFBWPW5.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
-import {
-  ifDefinedAndNotEmpty
-} from "./chunk.ZQJVCRB2.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -450,9 +453,7 @@ var DSAInputPhone = class extends ShoelaceElement {
       ${this.helpText}
     </slot>
 
-    ${this.error && !this.disabled ? html`<dsa-error-text id="error-text" class="form-control__error-text"
-            >${this.errorMessage}</dsa-error-text
-          >` : ""}
+        ${this.error && !this.disabled && this.errorMessage !== "" ? renderFormElementErrors(this.errorMessage) : ""}
     </div>
   </div>`;
   }
@@ -525,7 +526,19 @@ __decorateClass([
   property({ type: Boolean })
 ], DSAInputPhone.prototype, "error", 2);
 __decorateClass([
-  property({ attribute: "error-message" })
+  property({
+    attribute: "error-message",
+    converter: {
+      fromAttribute: (value) => value.split("|"),
+      toAttribute: (value) => {
+        if (typeof value === "string") {
+          return value;
+        } else {
+          return value.join("|");
+        }
+      }
+    }
+  })
 ], DSAInputPhone.prototype, "errorMessage", 2);
 __decorateClass([
   property({ reflect: true })

package/dist/chunks/{chunk.QGNUX2KV.js → chunk.3B2D7GEN.js}

@@ -1,6 +1,9 @@
 import {
   checkbox_group_styles_default
-} from "./chunk.QEVAFNHA.js";
+} from "./chunk.KVWD6T4L.js";
+import {
+  renderFormElementErrors
+} from "./chunk.IZBHR7GP.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -351,12 +354,7 @@ var DSACheckboxGroup = class extends ShoelaceElement {
           ${this.helpText}
         </slot>
 
-        ${this.error ? html`<dsa-error-text
-              id="error-text"
-              class="form-control__error-text"
-              aria-live="assertive"
-              >${this.errorMessage}</dsa-error-text
-            >` : ""}
+        ${this.error ? renderFormElementErrors(this.errorMessage) : ""}
       </fieldset>
     `;
   }
@@ -419,7 +417,19 @@ __decorateClass([
   property({ type: Boolean })
 ], DSACheckboxGroup.prototype, "error", 2);
 __decorateClass([
-  property({ attribute: "error-message" })
+  property({
+    attribute: "error-message",
+    converter: {
+      fromAttribute: (value) => value.split("|"),
+      toAttribute: (value) => {
+        if (typeof value === "string") {
+          return value;
+        } else {
+          return value.join("|");
+        }
+      }
+    }
+  })
 ], DSACheckboxGroup.prototype, "errorMessage", 2);
 __decorateClass([
   watch("value")

package/dist/chunks/{chunk.MVFQ3IXQ.js → chunk.3F32N525.js}

@@ -1,6 +1,6 @@
 import {
   FilterBase
-} from "./chunk.EWT3XVAN.js";
+} from "./chunk.O4TH77FX.js";
 import {
   filter_counter_styles_default
 } from "./chunk.GBE3NP7T.js";

package/dist/chunks/{chunk.BFVPPAWG.js → chunk.3KHOL2ZR.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.CFUNT7FK.js";
 import {
   LocalizeController
-} from "./chunk.G3MRVMJ4.js";
+} from "./chunk.IY4PPAPE.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.FOGBKOQM.js → chunk.42I2CPKY.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.3EPXMS3X.js";
+} from "./chunk.EOWQAIDU.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";

package/dist/chunks/{chunk.AV26MFR7.js → chunk.4KUK43KY.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.F6RRFM4P.js";
 import {
   LocalizeController
-} from "./chunk.G3MRVMJ4.js";
+} from "./chunk.IY4PPAPE.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.IANNJ3XQ.js → chunk.4VKIGF5Z.js}

@@ -1,6 +1,6 @@
 import {
   step_styles_default
-} from "./chunk.7FYXPV3G.js";
+} from "./chunk.Z3PCBFRD.js";
 import {
   getStepIcon
 } from "./chunk.CCTWXABH.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.G3MRVMJ4.js";
+} from "./chunk.IY4PPAPE.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -18,10 +18,10 @@ import {
 } from "./chunk.6M63UXML.js";
 
 // src/components/step/step.ts
-import { html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { html, literal } from "lit/static-html.js";
 var DSAStep = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
@@ -35,6 +35,27 @@ var DSAStep = class extends ShoelaceElement {
     this.stepTitle = "";
     this.content = "";
     this.vertical = false;
+    this.clickable = false;
+    this.href = "";
+    this.rel = "noreferrer noopener";
+  }
+  /** Simulates a click on the step. */
+  click() {
+    this.button.click();
+  }
+  /** Sets focus on the step. */
+  focus(options) {
+    this.button.focus(options);
+  }
+  /** Removes focus from the step. */
+  blur() {
+    this.button.blur();
+  }
+  getTag() {
+    if (!this.clickable) {
+      return literal`div`;
+    }
+    return this.href ? literal`a` : literal`button`;
   }
   getStepLabel() {
     switch (this.status) {
@@ -56,20 +77,24 @@ var DSAStep = class extends ShoelaceElement {
     const hasContentSlot = this.hasSlotController.test("content");
     const hasTitle = this.stepTitle ? true : !!hasTitleSlot;
     const hasContent = this.content ? true : !!hasContentSlot;
+    const isStaticStep = !this.clickable;
     const stepIconName = this.status !== "in-progress" && this.status !== "active" ? getStepIcon(this.status) : void 0;
     const stepLabel = this.getStepLabel();
+    const isLink = this.clickable && this.href;
+    const isButton = this.clickable && !this.href;
+    const tag = this.getTag();
     return html`
       <div
-        role="listitem"
         part="step"
         class=${classMap({
       "step-container": true,
+      "step-container--clickable": !isStaticStep,
       "step-container--has-title": hasTitle,
       "step-container--has-content": hasContent,
       "step-container__horizontal": !this.vertical,
       "step-container__vertical": this.vertical
     })}
-      >
+        role='listitem'>
         <div
           class=${classMap({
       step: true,
@@ -80,29 +105,51 @@ var DSAStep = class extends ShoelaceElement {
     })}
         >
           ${this.status === "in-progress" || this.status === "active" ? html`<span class="step-icon--in-progress"
-                ><dsa-visually-hidden>${stepLabel}</dsa-visually-hidden></span
-              >` : ""}
-          ${this.status === "complete" || this.status === "error" ? html`<dsa-icon
-                class="step-icon"
-                name="${ifDefined(stepIconName)}"
-                label=${ifDefined(stepLabel)}
-              ></dsa-icon>` : ""}
+                  ><dsa-visually-hidden>${stepLabel}</dsa-visually-hidden></span
+                >` : ""}
+          ${this.status === "complete" || this.status === "error" ? html`
+                  <dsa-icon
+                    class="step-icon"
+                    name="${ifDefined(stepIconName)}"
+                    label=${ifDefined(stepLabel)}
+                  >
+                  </dsa-icon>
+
+                  ${this.clickable ? html`</dsa-icon>
+                        <dsa-icon
+                          class="step-icon--edit"
+                          name="edit"
+                          label=${ifDefined(stepLabel)}
+                        >
+                        </dsa-icon>` : ""}
+                ` : ""}
         </div>
 
         <div class="step-content-container">
           ${this.index !== void 0 ? html`
-                <p class="step-index">
-                  ${this.localize.term("step")} ${this.index + 1}
-                </p>
-              ` : html``}
+                  <p class="step-index">
+                    ${this.localize.term("step")} ${this.index + 1}
+                  </p>
+                ` : html``}
 
           <div class="step-title-container">
-            <slot
-              name="title"
-              class="step-title"
-              aria-hidden=${hasTitle ? "false" : "true"}
-              >${this.stepTitle}</slot
-            >
+            <${tag}
+              class=${classMap({
+      "step-clickable": !isStaticStep,
+      "step-link": isLink,
+      "step-button": isButton
+    })}
+              type=${ifDefined(isButton ? "button" : void 0)}
+              href=${ifDefined(isLink ? this.href : void 0)}
+              target=${ifDefined(isLink ? this.target : void 0)}
+              rel=${ifDefined(isLink ? this.rel : void 0)}>
+              <slot
+                name="title"
+                class="step-title"
+                aria-hidden=${hasTitle ? "false" : "true"}
+                >${this.stepTitle}</slot
+              >
+            </${tag}>
             ${this.hasSlotController.test("tooltip") ? html` <slot name="tooltip" class="step-tooltip"></slot> ` : ""}
           </div>
           <slot name="content" class="step-content">${this.content}</slot>
@@ -112,6 +159,9 @@ var DSAStep = class extends ShoelaceElement {
   }
 };
 DSAStep.styles = step_styles_default;
+__decorateClass([
+  query(".button")
+], DSAStep.prototype, "button", 2);
 __decorateClass([
   property()
 ], DSAStep.prototype, "status", 2);
@@ -127,6 +177,18 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], DSAStep.prototype, "vertical", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAStep.prototype, "clickable", 2);
+__decorateClass([
+  property()
+], DSAStep.prototype, "href", 2);
+__decorateClass([
+  property()
+], DSAStep.prototype, "target", 2);
+__decorateClass([
+  property()
+], DSAStep.prototype, "rel", 2);
 DSAStep = __decorateClass([
   customElement("dsa-step")
 ], DSAStep);

package/dist/chunks/{chunk.HSLR5GY4.js → chunk.5KFYZRQZ.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.3EPXMS3X.js";
+} from "./chunk.EOWQAIDU.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";

package/dist/chunks/{chunk.3D63HEF5.js → chunk.5Y35HJBR.js}

@@ -1,21 +1,21 @@
 import {
   select_styles_default
-} from "./chunk.UZBA5RSV.js";
+} from "./chunk.OMS37ACU.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
+import {
+  renderFormElementErrors
+} from "./chunk.IZBHR7GP.js";
 import {
   FormControlController
 } from "./chunk.KIFBWPW5.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
-import {
-  ifDefinedAndNotEmpty
-} from "./chunk.ZQJVCRB2.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -29,10 +29,13 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.G3MRVMJ4.js";
+} from "./chunk.IY4PPAPE.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -679,12 +682,7 @@ var DSASelect = class extends ShoelaceElement {
           ${this.helpText}
         </slot>
 
-        ${this.error && !isDisabledOrReadonly ? html`<dsa-error-text
-              id="error-text"
-              part="form-control-error-text"
-              class="form-control__error-text"
-              >${this.errorMessage}</dsa-error-text
-            >` : ""}
+        ${this.error && !isDisabledOrReadonly ? renderFormElementErrors(this.errorMessage) : ""}
       </div>
     `;
   }
@@ -789,7 +787,19 @@ __decorateClass([
   property({ type: Boolean })
 ], DSASelect.prototype, "error", 2);
 __decorateClass([
-  property({ attribute: "error-message" })
+  property({
+    attribute: "error-message",
+    converter: {
+      fromAttribute: (value) => value.split("|"),
+      toAttribute: (value) => {
+        if (typeof value === "string") {
+          return value;
+        } else {
+          return value.join("|");
+        }
+      }
+    }
+  })
 ], DSASelect.prototype, "errorMessage", 2);
 __decorateClass([
   property({ attribute: "display-value", type: Boolean })

package/dist/chunks/{chunk.L6I3R7R4.js → chunk.5YV6H7CA.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.G3MRVMJ4.js";
+} from "./chunk.IY4PPAPE.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.ENMMYFHE.js → chunk.7YWQEKBT.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.G3MRVMJ4.js";
+} from "./chunk.IY4PPAPE.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.L46ATINF.js → chunk.ADXDCZF5.js}

@@ -5,7 +5,7 @@ import {
 } from "./chunk.WKBOF2UN.js";
 import {
   input_date_styles_default
-} from "./chunk.X6777XNN.js";
+} from "./chunk.Y3FYMACD.js";
 import {
   getDateFromISO,
   getISOFormattedDate
@@ -13,15 +13,15 @@ import {
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
+import {
+  renderFormElementErrors
+} from "./chunk.IZBHR7GP.js";
 import {
   FormControlController
 } from "./chunk.KIFBWPW5.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
-import {
-  ifDefinedAndNotEmpty
-} from "./chunk.ZQJVCRB2.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -35,10 +35,13 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.G3MRVMJ4.js";
+} from "./chunk.IY4PPAPE.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -535,11 +538,7 @@ var DSAInputDate = class extends ShoelaceElement {
           ${this.helpText}
         </slot>
 
-        ${this.error && !this.disabled && this.errorMessage !== "" ? html`<dsa-error-text
-                id="error-text"
-                class="form-control__error-text"
-                >${this.errorMessage}</dsa-error-text
-              >` : ""}
+        ${this.error && !this.disabled && this.errorMessage !== "" ? renderFormElementErrors(this.errorMessage) : ""}
         </div>
       </div>
     `;
@@ -616,7 +615,19 @@ __decorateClass([
   property({ type: Boolean })
 ], DSAInputDate.prototype, "error", 2);
 __decorateClass([
-  property({ attribute: "error-message" })
+  property({
+    attribute: "error-message",
+    converter: {
+      fromAttribute: (value) => value.split("|"),
+      toAttribute: (value) => {
+        if (typeof value === "string") {
+          return value;
+        } else {
+          return value.join("|");
+        }
+      }
+    }
+  })
 ], DSAInputDate.prototype, "errorMessage", 2);
 __decorateClass([
   property({ reflect: true })