@ds-autonomie/web-components 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @ds-autonomie/web-components
 
+## 2.2.0
+
+### Minor Changes
+
+- 647d6c9: `input-otp` : ajout de l'élément One Time Password
+
+### Patch Changes
+
+- 3ba5fee: `checkbox-group` : correction de la largeur maximale en mode horizontal
+- 1643cca: `checkbox-group': changement du timing de l'initialisation
+- 8503289: `input` : correction de la réinitialisation programmatique du type "date"
+- aad602d: `checkbox-group` : amélioration de la structure interne
+
 ## 2.1.0
 
 ### Minor Changes

package/cdn/chunks/{chunk.ZDLDKWEM.js → chunk.2APAO2OW.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.LCUVJAUT.js";
 import {
   FormControlLayout
-} from "./chunk.PMMQ5QVY.js";
+} from "./chunk.XQAKSW3W.js";
 import {
   getDateFromISO,
   getISOFormattedDate

package/cdn/chunks/{chunk.JTHUYIYP.js → chunk.2DJERWBI.js}

@@ -1,6 +1,9 @@
 import {
   DSASelect
-} from "./chunk.R6BGXKHX.js";
+} from "./chunk.LNBAAP45.js";
+import {
+  getPhoneConfig
+} from "./chunk.65HTBW2L.js";
 import {
   input_phone_styles_default
 } from "./chunk.77CWRZEL.js";
@@ -13,12 +16,9 @@ import {
   rawValueToMaskedValue,
   stripSpecialChars
 } from "./chunk.7OLEA3GQ.js";
-import {
-  getPhoneConfig
-} from "./chunk.65HTBW2L.js";
 import {
   FormControlLayout
-} from "./chunk.PMMQ5QVY.js";
+} from "./chunk.XQAKSW3W.js";
 import {
   l
 } from "./chunk.7PPSHHT2.js";

package/cdn/chunks/{chunk.QCSRN6TI.js → chunk.3JMBGIZN.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.QVX3F6W3.js";
 import {
   FormControlLayout
-} from "./chunk.PMMQ5QVY.js";
+} from "./chunk.XQAKSW3W.js";
 import {
   l
 } from "./chunk.7PPSHHT2.js";

package/cdn/chunks/{chunk.Z2IR3WWE.js → chunk.4NC4QO64.js}

@@ -89,7 +89,7 @@ var DSATab = class extends ShoelaceElement {
                 part="close-button"
                 exportparts="base:close-button__base"
                 name="close"
-                label=${this.closeButtonLabel !== "" ? this.closeButtonLabel : this.localize.term("close")}
+                label=${this.closeButtonLabel && this.closeButtonLabel !== "" ? this.closeButtonLabel : this.localize.term("close")}
                 class="tab__close-button"
                 @click=${this.handleCloseClick}
                 library="system"

package/cdn/chunks/{chunk.OZEY33RC.js → chunk.5LXQ3RKQ.js}

@@ -17,22 +17,6 @@ var checkbox_group_styles_default = i`
     display: block;
   }
 
-  .visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-
-  .checkbox-group__default-slot {
-    display: none;
-  }
-
   .checkbox-group__list-container {
     display: inline-block;
   }
@@ -40,18 +24,14 @@ var checkbox_group_styles_default = i`
     gap: var(--dsa-spacing-8);
   }
 
-  :not(.form-control--options-horizontal)
+  .form-control:not(.form-control--options-horizontal)
     .checkbox-group__list--checkbox-buttons {
     flex-wrap: wrap;
     min-width: 120px;
     max-width: 400px;
   }
 
-  .checkbox-group__listitem {
-    display: contents;
-  }
-
-  :not(form-control--options-horizontal) dsa-checkbox-button {
+  .form-control:not(.form-control--options-horizontal) dsa-checkbox-button {
     max-width: 400px;
   }
 `;

package/cdn/chunks/{chunk.JSVJ7J76.js → chunk.6QTMZJGH.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.57V66KCM.js";
 import {
   DSAInput
-} from "./chunk.QCSRN6TI.js";
+} from "./chunk.3JMBGIZN.js";
 import {
   FilterBase
 } from "./chunk.SW4US4PJ.js";

package/cdn/chunks/{chunk.6E6G25TQ.js → chunk.A33BZOMA.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.3CJGMKTJ.js";
 import {
   FormControlLayout
-} from "./chunk.PMMQ5QVY.js";
+} from "./chunk.XQAKSW3W.js";
 import {
   l
 } from "./chunk.7PPSHHT2.js";

package/cdn/chunks/{chunk.LRMXGBIU.js → chunk.ATHAYO6A.js}

@@ -1,9 +1,12 @@
+import {
+  radio_group_styles_default
+} from "./chunk.27YR5DC6.js";
 import {
   wrapIndex
 } from "./chunk.HV63L5BF.js";
 import {
-  radio_group_styles_default
-} from "./chunk.27YR5DC6.js";
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   renderFormElementErrors
 } from "./chunk.EY4WUNAJ.js";
@@ -19,6 +22,9 @@ import {
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.B6GVVW66.js";
 import {
   e as e2
 } from "./chunk.IKHG7XGO.js";
@@ -29,6 +35,12 @@ import {
   r,
   t
 } from "./chunk.DZB6XUZ7.js";
+import {
+  component_styles_default
+} from "./chunk.PSQJDSB2.js";
+import {
+  i
+} from "./chunk.4KHZQZ3M.js";
 import {
   x
 } from "./chunk.7HUC6BF3.js";
@@ -36,6 +48,145 @@ import {
   __decorateClass
 } from "./chunk.4ZGVANML.js";
 
+// src/internal/components/button-group/button-group.styles.ts
+var button_group_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: inline-block;
+  }
+
+  .button-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--dsa-spacing-8);
+  }
+
+  .button-group--squeezed {
+    gap: 0;
+  }
+
+  .button-group--vertical {
+    flex-direction: column;
+    min-width: 120px;
+    max-width: 400px;
+  }
+
+  .button-group--horizontal {
+    flex-direction: row;
+  }
+`;
+
+// src/internal/components/button-group/button-group.ts
+var DSAInternalButtonGroup = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.disableRole = false;
+    this.label = "";
+    this.squeezed = false;
+    this.horizontal = false;
+  }
+  handleFocus(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.add("dsa-button-group__button--focus");
+  }
+  handleBlur(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.remove("dsa-button-group__button--focus");
+  }
+  handleMouseOver(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.add("dsa-button-group__button--hover");
+  }
+  handleMouseOut(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.remove("dsa-button-group__button--hover");
+  }
+  handleSlotChange() {
+    const slottedElements = [
+      ...this.defaultSlot.assignedElements({ flatten: true })
+    ];
+    slottedElements.forEach((el) => {
+      const index = slottedElements.indexOf(el);
+      const button = findButton(el);
+      if (button !== null) {
+        button.classList.add("dsa-button-group__button");
+        if (this.squeezed) {
+          button.classList.toggle(
+            "dsa-button-group__button--first",
+            index === 0
+          );
+          button.classList.toggle(
+            "dsa-button-group__button--inner",
+            index > 0 && index < slottedElements.length - 1
+          );
+          button.classList.toggle(
+            "dsa-button-group__button--last",
+            index === slottedElements.length - 1
+          );
+        }
+        button.classList.toggle(
+          "dsa-button-group__button--radio",
+          button.tagName.toLowerCase() === "dsa-radio-button"
+        );
+        button.classList.toggle(
+          "dsa-button-group__button--checkbox",
+          button.tagName.toLowerCase() === "dsa-checkbox-button"
+        );
+        button.classList.toggle(
+          "dsa-button-group__button--vertical",
+          !this.horizontal
+        );
+      }
+    });
+  }
+  render() {
+    return x`
+      <div
+        part="base"
+        class=${e2({
+      "button-group": true,
+      "button-group--squeezed": this.squeezed,
+      "button-group--vertical": !this.horizontal,
+      "button-group--horizontal": this.horizontal
+    })}
+        role="${this.disableRole ? "presentation" : "group"}"
+        aria-label=${ifDefinedAndNotEmpty(this.label)}
+        @focusout=${this.handleBlur}
+        @focusin=${this.handleFocus}
+        @mouseover=${this.handleMouseOver}
+        @mouseout=${this.handleMouseOut}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+DSAInternalButtonGroup.styles = button_group_styles_default;
+__decorateClass([
+  e("slot")
+], DSAInternalButtonGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  r()
+], DSAInternalButtonGroup.prototype, "disableRole", 2);
+__decorateClass([
+  n()
+], DSAInternalButtonGroup.prototype, "label", 2);
+__decorateClass([
+  n({ type: Boolean })
+], DSAInternalButtonGroup.prototype, "squeezed", 2);
+__decorateClass([
+  n({ type: Boolean })
+], DSAInternalButtonGroup.prototype, "horizontal", 2);
+DSAInternalButtonGroup = __decorateClass([
+  t("dsa-internal-button-group")
+], DSAInternalButtonGroup);
+function findButton(el) {
+  var _a;
+  const selector = "dsa-button, dsa-radio-button, dsa-checkbox-button, dsa-pagination-button";
+  return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
+}
+
 // src/components/radio-group/radio-group.ts
 var DSARadioGroup = class extends ShoelaceElement {
   constructor() {
@@ -314,8 +465,8 @@ var DSARadioGroup = class extends ShoelaceElement {
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
     if (!hasLabel) {
-      console.warn(
-        "(a11y) <dsa-radio-group> requires a label attribute or a label slot for accessibility"
+      a11yWarning(
+        "<dsa-radio-group> requires a label attribute or a label slot for accessibility"
       );
     }
     return x`

package/cdn/chunks/{chunk.Z6DEWBVS.js → chunk.C62MMBV4.js}

@@ -1,6 +1,9 @@
 import {
   l
 } from "./chunk.7PPSHHT2.js";
+import {
+  DSACheckboxGroup
+} from "./chunk.YQQNMFZF.js";
 import {
   defaultValue
 } from "./chunk.YY5FKN3H.js";
@@ -74,6 +77,13 @@ var DSACheckbox = class extends ShoelaceElement {
   get validationMessage() {
     return this.input.validationMessage;
   }
+  connectedCallback() {
+    super.connectedCallback();
+    const parent = this.parentElement;
+    if (!this.hasAttribute("role") && parent instanceof DSACheckboxGroup) {
+      this.setAttribute("role", "listitem");
+    }
+  }
   firstUpdated() {
     this.formControlController.updateValidity();
   }

package/cdn/chunks/{chunk.5AFQZ4HE.js → chunk.CYMM2ZAV.js}

@@ -17,6 +17,12 @@ var DSACheckboxButton = class extends FormToggleButton {
     super(...arguments);
     this.type = "checkbox";
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "listitem");
+    }
+  }
   handleClick() {
     this.checked = !this.checked;
   }

package/cdn/chunks/chunk.F7NUIVDV.js

@@ -0,0 +1,10 @@
+// src/components/input-otp/input-otp.utils.ts
+var REGEXP_ONLY_DIGITS = "^\\d*$";
+var REGEXP_ONLY_LETTERS = "^[a-zA-Z]*$";
+var REGEXP_ONLY_DIGITS_AND_LETTERS = "^[a-zA-Z0-9]*$";
+
+export {
+  REGEXP_ONLY_DIGITS,
+  REGEXP_ONLY_LETTERS,
+  REGEXP_ONLY_DIGITS_AND_LETTERS
+};

package/cdn/chunks/{chunk.OVD3Q2LV.js → chunk.FHOCNAJ4.js}

@@ -4,6 +4,9 @@ import {
 import {
   getStepIcon
 } from "./chunk.CCTWXABH.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -97,8 +100,8 @@ var DSAStep = class extends ShoelaceElement {
     const isButton = this.clickable && !this.href;
     const tag = this.getTag();
     if (this.clickable && !hasTitle) {
-      console.warn(
-        "(DSA) When clickable, the `dsa-step` element must have either a `step-title` attribute or an elemennt in its `title` slot"
+      a11yWarning(
+        "When clickable, the `dsa-step` element must have either a `step-title` attribute or an elemennt in its `title` slot"
       );
     }
     return u`

package/cdn/chunks/{chunk.KTAPO27T.js → chunk.HYTYRM6S.js}

@@ -1,6 +1,6 @@
 import {
   DSARadioGroup
-} from "./chunk.LRMXGBIU.js";
+} from "./chunk.ATHAYO6A.js";
 import {
   FormToggleButton
 } from "./chunk.J3A7VDK5.js";

package/cdn/chunks/{chunk.S4BW7KNM.js → chunk.J73YJOU4.js}

@@ -23,7 +23,7 @@ var errorArgTypes = {
 };
 var errorMessageArgTypes = {
   name: "error-message",
-  description: 'An error message that is shown when `error` is set to true. If there are several messages, must be a string of messages separated by a pipe, e.g. "Error 1|Error 2|Error 3"',
+  description: 'The error message or messages that are shown when \u201Cerror\u201D is set to \u201Ctrue\u201D. To display several messages, they must be separated by a pipe character, e.g. "Error 1|Error 2|Error 3\u201D',
   table: {
     defaultValue: { summary: "''" },
     type: {

package/cdn/chunks/chunk.KELDA33H.js

@@ -0,0 +1,198 @@
+import {
+  form_control_styles_default
+} from "./chunk.NC6BC5GU.js";
+import {
+  component_styles_default
+} from "./chunk.PSQJDSB2.js";
+import {
+  i
+} from "./chunk.4KHZQZ3M.js";
+
+// src/components/input-otp/input-otp.styles.ts
+var input_otp_styles_default = i`
+  ${component_styles_default}
+  ${form_control_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  .input__wrapper {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .visible-input {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--dsa-wc-input-otp-single-fields-gap);
+  }
+
+  .hidden-input {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    z-index: -1;
+  }
+  .hidden-input:focus {
+    outline: none;
+  }
+
+  .input--focused:not(.input--disabled) {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+
+  .fake-caret {
+    position: absolute;
+    width: 1px;
+    height: var(--dsa-wc-input-otp-caret-height);
+    background-color: var(--dsa-color-input-cursor-background);
+    animation: caret-blink 1.2s ease-out infinite;
+  }
+  @keyframes caret-blink {
+    0%,
+    70%,
+    100% {
+      opacity: 1;
+    }
+    20%,
+    50% {
+      opacity: 0;
+    }
+  }
+
+  /* Single field */
+  .single-field {
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    vertical-align: middle;
+    font: var(--dsa-wc-input-text-field-font);
+    transition: var(--dsa-wc-transition-fast) color,
+      var(--dsa-wc-transition-fast) border,
+      var(--dsa-wc-transition-fast) box-shadow,
+      var(--dsa-wc-transition-fast) background-color;
+    border-radius: var(--dsa-wc-input-border-radius);
+    cursor: text;
+  }
+
+  .single-field__placeholder {
+    user-select: none;
+  }
+
+  .single-field__value {
+    display: flex;
+    justify-content: center;
+    width: var(--dsa-wc-input-otp-single-field-width);
+  }
+  .single-field--active .single-field__value {
+    background-color: var(
+      --dsa-wc-input-otp-single-field-active-value-background
+    );
+    border-radius: var(
+      --dsa-wc-input-otp-single-field-active-value-border-radius
+    );
+    color: var(--dsa-wc-input-otp-single-field-active-value-color);
+    padding-inline: var(--dsa-wc-input-otp-single-field-active-value-padding);
+  }
+
+  /* On Layer inputs */
+  .input--on-layer .single-field {
+    background-color: var(--dsa-wc-input-on-layer-background-color);
+    border: solid var(--dsa-wc-input-border-width)
+      var(--dsa-wc-input-on-layer-border-color);
+    color: var(--dsa-wc-input-on-layer-text-field-input-color);
+  }
+
+  .input--on-layer .single-field__placeholder {
+    color: var(--dsa-wc-input-on-layer-text-field-placeholder-color);
+  }
+
+  .input--on-layer:not(.input--disabled) .single-field:hover,
+  .input--on-layer .single-field--active {
+    border-color: var(--dsa-wc-input-on-layer-border-color-hover);
+  }
+
+  .input--on-layer.input--disabled .single-field {
+    background-color: var(--dsa-wc-input-on-layer-background-color-disabled);
+    border-color: var(--dsa-wc-input-on-layer-border-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+    color: var(--dsa-wc-input-on-layer-text-field-input-color-disabled);
+  }
+
+  .input--error.input--on-layer:not(.input--disabled) .single-field {
+    background-color: var(--dsa-wc-input-on-layer-background-color-error);
+    border-color: var(--dsa-wc-input-on-layer-border-color-error);
+  }
+
+  .input--error.input--on-layer:not(.input--disabled) .single-field:hover,
+  .input--error.input--on-layer:not(.input--disabled) .single-field--active {
+    border-color: var(--dsa-wc-input-on-layer-border-color-error-hover);
+  }
+
+  /* On Base inputs */
+
+  .input--on-base .single-field {
+    border: solid var(--dsa-wc-input-border-width)
+      var(--dsa-wc-input-on-base-border-color);
+    background-color: var(--dsa-wc-input-on-base-background-color);
+    color: var(--dsa-wc-input-on-base-text-field-input-color);
+  }
+
+  .input--on-base .single-field__placeholder {
+    color: var(--dsa-wc-input-on-base-text-field-placeholder-color);
+  }
+
+  .input--on-base:not(.input--disabled) .single-field:hover,
+  .input--on-base:not(.input--disabled) .single-field--active {
+    border-color: var(--dsa-wc-input-on-base-border-color-hover);
+  }
+
+  .input--on-base.input--disabled .single-field {
+    border-color: var(--dsa-wc-input-on-base-border-color-disabled);
+    background-color: var(--dsa-wc-input-on-base-background-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .input--error.input--on-base:not(.input--disabled) .single-field {
+    background-color: var(--dsa-wc-input-on-base-background-color-error);
+    border-color: var(--dsa-wc-input-on-base-border-color-error);
+  }
+  .input--error.input--on-base:not(.input--disabled) .single-field:hover,
+  .input--error.input--on-base:not(.input--disabled) .single-field--active {
+    border-color: var(--dsa-wc-input-on-base-border-color-error-hover);
+  }
+
+  /*
+   * Size modifiers
+   */
+
+  .input--small .single-field {
+    font: var(--dsa-wc-input-text-field-font-small);
+    height: var(--dsa-wc-form-input-height-small);
+    width: var(--dsa-wc-input-otp-single-field-width-small);
+  }
+
+  .input--medium .single-field {
+    height: var(--dsa-wc-form-input-height);
+    width: var(--dsa-wc-input-otp-single-field-width-medium);
+  }
+
+  .input--large {
+    padding: var(--dsa-spacing-4);
+  }
+  .input--large .single-field {
+    font: var(--dsa-wc-input-text-field-font-large);
+    height: var(--dsa-wc-form-input-height-large);
+    width: var(--dsa-wc-input-otp-single-field-width-large);
+  }
+`;
+
+export {
+  input_otp_styles_default
+};

package/cdn/chunks/{chunk.R6BGXKHX.js → chunk.LNBAAP45.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.FHTVGJJI.js";
 import {
   FormControlLayout
-} from "./chunk.PMMQ5QVY.js";
+} from "./chunk.XQAKSW3W.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";

package/cdn/chunks/{chunk.MEYHIAQ5.js → chunk.M7QHADJH.js}

@@ -343,7 +343,11 @@ var DSAInternalDateField = class extends ShoelaceElement {
     this.formControlController.setValidity(this.disabled);
   }
   async handleValueChange() {
-    if (this.value !== "") {
+    if (this.value === "") {
+      this.selectedDay = "";
+      this.selectedMonth = "";
+      this.selectedYear = "";
+    } else {
       this.selectedDay = `${new Date(this.value).getDate()}`.padStart(2, "0");
       this.selectedMonth = `${new Date(this.value).getMonth() + 1}`.padStart(
         2,