@ds-autonomie/web-components 2.9.1 → 2.11.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @ds-autonomie/web-components
 
+## 2.11.0
+
+### Minor Changes
+
+- 11fec02: `combobox`, `input`, `input-amount`, `input-date`, `input-mask`, `input-otp`, `input-phone`, `select`, `textarea` : ajout d'un attribut accessible-name à utiliser si aucun label n'est ajouté
+- ed800d7: `menu-navigation` : permettre l'utilisation de la touche espace pour activer les menu-items de type bouton; `menu-item` : ajout d'un attribut `expanded`
+
+### Patch Changes
+
+- 4c5f374: `alert` : dépréciation de l'attribut `duration` (non compatible avec l'accessibilité)
+- ca25e5e: `textarea`, `input-native` : modification du compteur afin de ne plus avoir d'erreur si la valeur est explicitement mise à null ou undefined.
+- ed85ed3: `copy-button` : suppression de l'attribut `feedback-duration` qui n'était pas compatible avec l'accessibilité
+- 84411df: Modification des modèles de pages suite aux retour de la DIPCOM
+- 273a1b7: `input-phone` : amélioration de la robustesse de mise à jour des valeurs.
+- 06179a4: `checkbox` : recopie de la valeur de accessible-name dans l'attribut title de la case à cocher
+
+## 2.10.0
+
+### Minor Changes
+
+- 4c7a297: `copy-button` : ajout du bouton copier; `tooltip` : (a11y) éviter la double annonce au lecteur d'écran lorsque le contenu est modifié
+- 91a7d53: `search` : ajout des attributs optionnels `accessible-name` et `placeholder`
+- a2fabac: `card`, `card-content`, `card-nav`, `checkbox-card`, `radio-card`, `fieldset` : ajout d'un attribut `contrasted-borders`
+
+### Patch Changes
+
+- 2fd486c: `combobox` : défilement de la liste de choix lors de la navigation au clavier
+- f6d5a17: `dialog`, `drawer` : amélioration du piège de focus
+- 8d70187: `tarteaucitron` : ajout d'une feuille de styles pouvant être utilisée pour tarteaucitron
+
 ## 2.9.1
 
 ### Patch Changes

package/cdn/chunks/chunk.26AMHY6M.js

@@ -0,0 +1,244 @@
+import {
+  copy_button_styles_default
+} from "./chunk.J22ZHZPW.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.CCDITBCR.js";
+import {
+  LocalizeController
+} from "./chunk.IUTJLFMA.js";
+import {
+  e2
+} from "./chunk.JY4LUWQC.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  r,
+  t
+} from "./chunk.TEKUWOCD.js";
+import {
+  x
+} from "./chunk.JXF4O366.js";
+import {
+  __decorateClass
+} from "./chunk.7WRNLPGX.js";
+
+// src/components/copy-button/copy-button.ts
+var DSACopyButton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.isCopying = false;
+    this.status = "rest";
+    this.value = "";
+    this.from = "";
+    this.disabled = false;
+    this.copyLabel = "";
+    this.successLabel = "";
+    this.errorLabel = "";
+    this.tooltipPlacement = "top";
+    this.hoist = false;
+    this.size = "medium";
+  }
+  async handleCopy() {
+    if (this.disabled || this.isCopying) {
+      return;
+    }
+    this.isCopying = true;
+    let valueToCopy = this.value;
+    if (this.from) {
+      const root = this.getRootNode();
+      const isProperty = this.from.includes(".");
+      const isAttribute = this.from.includes("[") && this.from.includes("]");
+      let id = this.from;
+      let field = "";
+      if (isProperty) {
+        [id, field] = this.from.trim().split(".");
+      } else if (isAttribute) {
+        [id, field] = this.from.trim().replace(/\]$/, "").split("[");
+      }
+      const target = "getElementById" in root ? root.getElementById(id) : null;
+      if (target) {
+        if (isAttribute) {
+          valueToCopy = target.getAttribute(field) || "";
+        } else if (isProperty) {
+          valueToCopy = target[field] || "";
+        } else {
+          valueToCopy = target.textContent || "";
+        }
+      } else {
+        this.showStatus("error");
+        this.emit("dsa-error");
+      }
+    }
+    if (!valueToCopy) {
+      this.showStatus("error");
+      this.emit("dsa-error");
+    } else {
+      try {
+        await navigator.clipboard.writeText(valueToCopy);
+        this.showStatus("success");
+        this.emit("dsa-copy", {
+          detail: {
+            value: valueToCopy
+          }
+        });
+      } catch (error) {
+        this.showStatus("error");
+        this.emit("dsa-error");
+      }
+    }
+  }
+  async showStatus(status) {
+    const successLabel = this.successLabel || this.localize.term("copied");
+    const errorLabel = this.errorLabel || this.localize.term("copyError");
+    const iconToShow = status === "success" ? this.successIcon : this.errorIcon;
+    const showAnimation = getAnimation(this, "copy.in", { dir: "ltr" });
+    const hideAnimation = getAnimation(this, "copy.out", { dir: "ltr" });
+    this.tooltip.content = status === "success" ? successLabel : errorLabel;
+    await this.copyIcon.animate(hideAnimation.keyframes, hideAnimation.options).finished;
+    this.copyIcon.hidden = true;
+    this.status = status;
+    iconToShow.hidden = false;
+    await iconToShow.animate(showAnimation.keyframes, showAnimation.options).finished;
+    this.isCopying = false;
+  }
+  async resetStatus() {
+    if (this.status !== "rest") {
+      const copyLabel = this.copyLabel || this.localize.term("copy");
+      const iconToShow = this.status === "success" ? this.successIcon : this.errorIcon;
+      const showAnimation = getAnimation(this, "copy.in", { dir: "ltr" });
+      const hideAnimation = getAnimation(this, "copy.out", { dir: "ltr" });
+      await iconToShow.animate(hideAnimation.keyframes, hideAnimation.options).finished;
+      iconToShow.hidden = true;
+      this.status = "rest";
+      this.copyIcon.hidden = false;
+      await this.copyIcon.animate(
+        showAnimation.keyframes,
+        showAnimation.options
+      ).finished;
+      this.tooltip.content = copyLabel;
+    }
+  }
+  render() {
+    const copyLabel = this.copyLabel || this.localize.term("copy");
+    return x`
+      <dsa-tooltip
+        class=${e2({
+      "copy-button": true,
+      "copy-button--success": this.status === "success",
+      "copy-button--error": this.status === "error",
+      "copy-button--disabled": this.disabled,
+      "copy-button--small": this.size === "small",
+      "copy-button--medium": this.size === "medium",
+      "copy-button--large": this.size === "large"
+    })}
+        content=${copyLabel}
+        placement=${this.tooltipPlacement}
+        ?disabled=${this.disabled}
+        ?hoist=${this.hoist}
+      >
+        <button
+          class="copy-button__button"
+          part="button"
+          type="button"
+          ?disabled=${this.disabled}
+          @click=${this.handleCopy}
+          aria-label=${copyLabel}
+          @mouseleave=${this.resetStatus}
+          @focusout=${this.resetStatus}
+        >
+          <dsa-icon
+            library="system"
+            name="copy"
+            class="copy-button__icon copy-icon"
+          ></dsa-icon>
+          <dsa-icon
+            library="system"
+            name="check"
+            hidden
+            class="copy-button__icon success-icon"
+          ></dsa-icon>
+          <dsa-icon
+            library="system"
+            name="close"
+            hidden
+            class="copy-button__icon error-icon"
+          ></dsa-icon>
+        </button>
+      </dsa-tooltip>
+    `;
+  }
+};
+DSACopyButton.styles = copy_button_styles_default;
+__decorateClass([
+  e(".copy-icon")
+], DSACopyButton.prototype, "copyIcon", 2);
+__decorateClass([
+  e(".success-icon")
+], DSACopyButton.prototype, "successIcon", 2);
+__decorateClass([
+  e(".error-icon")
+], DSACopyButton.prototype, "errorIcon", 2);
+__decorateClass([
+  e("dsa-tooltip")
+], DSACopyButton.prototype, "tooltip", 2);
+__decorateClass([
+  e(".copy-button__button")
+], DSACopyButton.prototype, "button", 2);
+__decorateClass([
+  r()
+], DSACopyButton.prototype, "isCopying", 2);
+__decorateClass([
+  r()
+], DSACopyButton.prototype, "status", 2);
+__decorateClass([
+  n()
+], DSACopyButton.prototype, "value", 2);
+__decorateClass([
+  n()
+], DSACopyButton.prototype, "from", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSACopyButton.prototype, "disabled", 2);
+__decorateClass([
+  n({ attribute: "copy-label" })
+], DSACopyButton.prototype, "copyLabel", 2);
+__decorateClass([
+  n({ attribute: "success-label" })
+], DSACopyButton.prototype, "successLabel", 2);
+__decorateClass([
+  n({ attribute: "error-label" })
+], DSACopyButton.prototype, "errorLabel", 2);
+__decorateClass([
+  n({ attribute: "tooltip-placement" })
+], DSACopyButton.prototype, "tooltipPlacement", 2);
+__decorateClass([
+  n({ type: Boolean })
+], DSACopyButton.prototype, "hoist", 2);
+__decorateClass([
+  n({ reflect: true })
+], DSACopyButton.prototype, "size", 2);
+DSACopyButton = __decorateClass([
+  t("dsa-copy-button")
+], DSACopyButton);
+setDefaultAnimation("copy.in", {
+  keyframes: [
+    { scale: ".25", opacity: ".25" },
+    { scale: "1", opacity: "1" }
+  ],
+  options: { duration: 100 }
+});
+setDefaultAnimation("copy.out", {
+  keyframes: [
+    { scale: "1", opacity: "1" },
+    { scale: ".25", opacity: "0" }
+  ],
+  options: { duration: 100 }
+});
+
+export {
+  DSACopyButton
+};

package/cdn/chunks/{chunk.LKPKCFRT.js → chunk.2FH4CXEK.js}

@@ -1,9 +1,9 @@
-import {
-  library_system_default
-} from "./chunk.CZ2EH5XR.js";
 import {
   library_default_default
 } from "./chunk.C2W7WMBY.js";
+import {
+  library_system_default
+} from "./chunk.RIKQNF2V.js";
 
 // src/components/icon/library.ts
 var registry = [library_default_default, library_system_default];

package/cdn/chunks/{chunk.QMXNHAS2.js → chunk.2OEMPACC.js}

@@ -6,25 +6,25 @@ import {
 } from "./chunk.DYQJRNYU.js";
 import {
   DSATableCell
-} from "./chunk.KGSBH5IG.js";
+} from "./chunk.4F45PKJH.js";
 import {
   e2
 } from "./chunk.JY4LUWQC.js";
 import {
   watch
-} from "./chunk.4FQJ3QJK.js";
+} from "./chunk.TKTCYZRK.js";
 import {
   e,
   n,
   r,
   t
-} from "./chunk.EW5LC4ZI.js";
+} from "./chunk.TEKUWOCD.js";
 import {
   x
 } from "./chunk.JXF4O366.js";
 import {
   __decorateClass
-} from "./chunk.4ZGVANML.js";
+} from "./chunk.7WRNLPGX.js";
 
 // src/components/table-header-cell/table-header-cell.ts
 var DSATableHeaderCell = class extends DSATableCell {

package/cdn/chunks/{chunk.CTPTY6W6.js → chunk.2WKNTHTE.js}

@@ -1,15 +1,15 @@
 import {
   FormSelectableCard
-} from "./chunk.HLQS67ES.js";
+} from "./chunk.COPSPY7Y.js";
 import {
   watch
-} from "./chunk.4FQJ3QJK.js";
+} from "./chunk.TKTCYZRK.js";
 import {
   t
-} from "./chunk.EW5LC4ZI.js";
+} from "./chunk.TEKUWOCD.js";
 import {
   __decorateClass
-} from "./chunk.4ZGVANML.js";
+} from "./chunk.7WRNLPGX.js";
 
 // src/components/checkbox-card/checkbox-card.ts
 var DSACheckboxCard = class extends FormSelectableCard {

package/cdn/chunks/{chunk.J5TZCAMD.js → chunk.34HTLNHP.js}

@@ -3,29 +3,29 @@ import {
 } from "./chunk.UMGPQSGY.js";
 import {
   LoadingStateElement
-} from "./chunk.PBUOYITV.js";
+} from "./chunk.BWYRMRTD.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.EUM3VSYY.js";
+} from "./chunk.IUTJLFMA.js";
 import {
   e2 as e
 } from "./chunk.JY4LUWQC.js";
 import {
   watch
-} from "./chunk.4FQJ3QJK.js";
+} from "./chunk.TKTCYZRK.js";
 import {
   n,
   t
-} from "./chunk.EW5LC4ZI.js";
+} from "./chunk.TEKUWOCD.js";
 import {
   x
 } from "./chunk.JXF4O366.js";
 import {
   __decorateClass
-} from "./chunk.4ZGVANML.js";
+} from "./chunk.7WRNLPGX.js";
 
 // src/components/table-container/table-container.ts
 var DSATableContainer = class extends LoadingStateElement {

package/cdn/chunks/{chunk.AE64AWJ3.js → chunk.3PMIWAYM.js}

@@ -1,6 +1,6 @@
 import {
   card_content_styles_default
-} from "./chunk.3TDZKT3U.js";
+} from "./chunk.PGCCZX7O.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -22,15 +22,15 @@ import {
 } from "./chunk.JY4LUWQC.js";
 import {
   watch
-} from "./chunk.4FQJ3QJK.js";
+} from "./chunk.TKTCYZRK.js";
 import {
   ShoelaceElement,
   n,
   t
-} from "./chunk.EW5LC4ZI.js";
+} from "./chunk.TEKUWOCD.js";
 import {
   __decorateClass
-} from "./chunk.4ZGVANML.js";
+} from "./chunk.7WRNLPGX.js";
 
 // src/components/card-content/card-content.ts
 var DSACardContent = class extends ShoelaceElement {
@@ -50,6 +50,7 @@ var DSACardContent = class extends ShoelaceElement {
     this.variant = "outlined";
     this.layout = "vertical";
     this.size = "large";
+    this.contrastedBorders = false;
   }
   isLink() {
     return this.href ? true : false;
@@ -87,7 +88,8 @@ var DSACardContent = class extends ShoelaceElement {
       "card-content--large": this.size === "large",
       "card-content--left-align": this.layout === "left-align",
       "card-content--right-align": this.layout === "right-align",
-      "card-content--filled": this.variant === "filled"
+      "card-content--filled": this.variant === "filled",
+      "card-content--contrasted-borders": this.contrastedBorders
     })}
       >
         <slot name="media" class=${ifDefinedAndNotEmpty(
@@ -186,6 +188,9 @@ __decorateClass([
 __decorateClass([
   n({ reflect: true })
 ], DSACardContent.prototype, "size", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true, attribute: "contrasted-borders" })
+], DSACardContent.prototype, "contrastedBorders", 2);
 __decorateClass([
   watch("size")
 ], DSACardContent.prototype, "handleSizeChange", 1);

package/cdn/chunks/{chunk.EQP4SFMR.js → chunk.3RUPWW4M.js}

@@ -8,32 +8,32 @@ import {
   animateTo,
   parseDuration,
   stopAnimations
-} from "./chunk.UBKKXGSV.js";
+} from "./chunk.PMYSGKZB.js";
 import {
   getAnimation,
   setDefaultAnimation
-} from "./chunk.2WRFDMKN.js";
+} from "./chunk.CCDITBCR.js";
 import {
   LocalizeController
-} from "./chunk.EUM3VSYY.js";
+} from "./chunk.IUTJLFMA.js";
 import {
   e2
 } from "./chunk.JY4LUWQC.js";
 import {
   watch
-} from "./chunk.4FQJ3QJK.js";
+} from "./chunk.TKTCYZRK.js";
 import {
   ShoelaceElement,
   e,
   n,
   t
-} from "./chunk.EW5LC4ZI.js";
+} from "./chunk.TEKUWOCD.js";
 import {
   x
 } from "./chunk.JXF4O366.js";
 import {
   __decorateClass
-} from "./chunk.4ZGVANML.js";
+} from "./chunk.7WRNLPGX.js";
 
 // src/components/tooltip/tooltip.ts
 var DSATooltip = class extends ShoelaceElement {
@@ -214,16 +214,11 @@ var DSATooltip = class extends ShoelaceElement {
       >
         <slot slot="anchor" @slotchange=${this.handleDefaultSlotChange}></slot>
 
-        <slot
-          name="content"
-          part="body"
-          id="tooltip"
-          class="tooltip__body"
-          role="tooltip"
-          aria-live=${this.open ? "polite" : "off"}
-        >
-          ${this.content}
-        </slot>
+        <div part="body" id="tooltip" class="tooltip__body" role="tooltip">
+          <slot name="content" aria-live=${this.open ? "polite" : "off"}
+            >${this.content}</slot
+          >
+        </div>
       </dsa-popup>
     `;
   }

package/cdn/chunks/{chunk.ZB3XYMYY.js → chunk.3YZ3B66O.js}

@@ -3,29 +3,29 @@ import {
 } from "./chunk.O2TTZGNP.js";
 import {
   LoadingStateElement
-} from "./chunk.PBUOYITV.js";
+} from "./chunk.BWYRMRTD.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.EUM3VSYY.js";
+} from "./chunk.IUTJLFMA.js";
 import {
   e2 as e
 } from "./chunk.JY4LUWQC.js";
 import {
   watch
-} from "./chunk.4FQJ3QJK.js";
+} from "./chunk.TKTCYZRK.js";
 import {
   n,
   t
-} from "./chunk.EW5LC4ZI.js";
+} from "./chunk.TEKUWOCD.js";
 import {
   x
 } from "./chunk.JXF4O366.js";
 import {
   __decorateClass
-} from "./chunk.4ZGVANML.js";
+} from "./chunk.7WRNLPGX.js";
 
 // src/components/table-caption/table-caption.ts
 var DSATableCaption = class extends LoadingStateElement {

package/cdn/chunks/{chunk.KGSBH5IG.js → chunk.4F45PKJH.js}

@@ -3,20 +3,20 @@ import {
 } from "./chunk.P4LDUKRH.js";
 import {
   LoadingStateElement
-} from "./chunk.PBUOYITV.js";
+} from "./chunk.BWYRMRTD.js";
 import {
   watch
-} from "./chunk.4FQJ3QJK.js";
+} from "./chunk.TKTCYZRK.js";
 import {
   n,
   t
-} from "./chunk.EW5LC4ZI.js";
+} from "./chunk.TEKUWOCD.js";
 import {
   x
 } from "./chunk.JXF4O366.js";
 import {
   __decorateClass
-} from "./chunk.4ZGVANML.js";
+} from "./chunk.7WRNLPGX.js";
 
 // src/components/table-cell/table-cell.ts
 var DSATableCell = class extends LoadingStateElement {

package/cdn/chunks/{chunk.5P5CNELU.js → chunk.4Q2WUHBV.js}

@@ -8,32 +8,32 @@ import {
   animateTo,
   shimKeyframesHeightAuto,
   stopAnimations
-} from "./chunk.UBKKXGSV.js";
+} from "./chunk.PMYSGKZB.js";
 import {
   getAnimation,
   setDefaultAnimation
-} from "./chunk.2WRFDMKN.js";
+} from "./chunk.CCDITBCR.js";
 import {
   a11yWarning
 } from "./chunk.PWL7QCVG.js";
 import {
   LocalizeController
-} from "./chunk.EUM3VSYY.js";
+} from "./chunk.IUTJLFMA.js";
 import {
   watch
-} from "./chunk.4FQJ3QJK.js";
+} from "./chunk.TKTCYZRK.js";
 import {
   ShoelaceElement,
   e,
   n,
   r
-} from "./chunk.EW5LC4ZI.js";
+} from "./chunk.TEKUWOCD.js";
 import {
   x
 } from "./chunk.JXF4O366.js";
 import {
   __decorateClass
-} from "./chunk.4ZGVANML.js";
+} from "./chunk.7WRNLPGX.js";
 
 // src/internal/components/filter-base/filter-base.ts
 var FilterBase = class extends ShoelaceElement {

package/cdn/chunks/{chunk.MQGQAGHT.js → chunk.4UH2GNFC.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.XHBGKXEK.js";
 import {
   LocalizeController
-} from "./chunk.EUM3VSYY.js";
+} from "./chunk.IUTJLFMA.js";
 import {
   o
 } from "./chunk.XED65RH5.js";
@@ -12,19 +12,19 @@ import {
 } from "./chunk.JY4LUWQC.js";
 import {
   watch
-} from "./chunk.4FQJ3QJK.js";
+} from "./chunk.TKTCYZRK.js";
 import {
   ShoelaceElement,
   e,
   n,
   t
-} from "./chunk.EW5LC4ZI.js";
+} from "./chunk.TEKUWOCD.js";
 import {
   x
 } from "./chunk.JXF4O366.js";
 import {
   __decorateClass
-} from "./chunk.4ZGVANML.js";
+} from "./chunk.7WRNLPGX.js";
 
 // src/components/tab/tab.ts
 var id = 0;

package/cdn/chunks/{chunk.XSFP2Q6B.js → chunk.4WZNGGVH.js}

@@ -4,13 +4,13 @@ import {
 import {
   ShoelaceElement,
   t
-} from "./chunk.EW5LC4ZI.js";
+} from "./chunk.TEKUWOCD.js";
 import {
   x
 } from "./chunk.JXF4O366.js";
 import {
   __decorateClass
-} from "./chunk.4ZGVANML.js";
+} from "./chunk.7WRNLPGX.js";
 
 // src/components/success-text/success-text.ts
 var DSASuccessText = class extends ShoelaceElement {

package/cdn/chunks/{chunk.GUM4ARDU.js → chunk.4ZYC455I.js}

@@ -6,13 +6,13 @@ import {
   e,
   n,
   t
-} from "./chunk.EW5LC4ZI.js";
+} from "./chunk.TEKUWOCD.js";
 import {
   x
 } from "./chunk.JXF4O366.js";
 import {
   __decorateClass
-} from "./chunk.4ZGVANML.js";
+} from "./chunk.7WRNLPGX.js";
 
 // src/components/skip-link-item/skip-link-item.ts
 var DSASkipLinkItem = class extends ShoelaceElement {

package/cdn/chunks/{chunk.B6JREA66.js → chunk.537VGPQJ.js}

@@ -6,19 +6,19 @@ import {
 } from "./chunk.JY4LUWQC.js";
 import {
   watch
-} from "./chunk.4FQJ3QJK.js";
+} from "./chunk.TKTCYZRK.js";
 import {
   ShoelaceElement,
   n,
   r,
   t
-} from "./chunk.EW5LC4ZI.js";
+} from "./chunk.TEKUWOCD.js";
 import {
   x
 } from "./chunk.JXF4O366.js";
 import {
   __decorateClass
-} from "./chunk.4ZGVANML.js";
+} from "./chunk.7WRNLPGX.js";
 
 // src/components/radio/radio.ts
 var DSARadio = class extends ShoelaceElement {