@ds-autonomie/web-components 2.1.0 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @ds-autonomie/web-components
 
+## 2.3.0
+
+### Minor Changes
+
+- 81ebb10: `checkbox` ajout des attributs parentDisabled et parentReadonly
+  `checkbox-button` ajout des attributs parentDisabled et parentReadonly
+  `checkbox-group` modification de la gestion des attributs readonly et disabled
+  `radio` ajout des attributs parentDisabled et parentReadonly
+  `radio-button` ajout des attributs parentDisabled et parentReadonly
+  `radio-group` modification de la gestion des attributs readonly et disabled
+- 2afaa9a: `switch` : ajout du composant
+- 23bc7f7: `input` : harmonisation du comportement du type time sur les différents navigateurs
+- 7b8f634: `radio-card` : ajout du composant carte radio
+  `checkbox-card` : ajout du composant carte checkbox
+- c72b2c6: `dialog`: ajout d'un attribut permettant de retirer le bouton de fermeture
+
+### Patch Changes
+
+- 1795414: `input` : correction de l'état de validité du type date
+- bfa9182: `button` : ajout de la variante `tertiary-with-outline`
+- 80a235e: `dialog`: ajustements graphiques
+- bdd4606: `radio-button` : amélioration de la visibilité de l'état coché en mode contraste élevé
+  `radio-group` : possibilité de tabuler sur la première option si la valeur du groupe n'est pas valide
+- 9db287c: `input-date` : focus sur le champ au clic sur le label
+- Updated dependencies [33ff2b9]
+  - @ds-autonomie/assets@1.4.4
+
+## 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.CZHOLGSR.js → chunk.27YOIDOY.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.NC6BC5GU.js";
+} from "./chunk.W2B6WXUI.js";
 import {
   component_styles_default
 } from "./chunk.PSQJDSB2.js";

package/cdn/chunks/{chunk.YD6XEMWC.js → chunk.2Q6V7LT2.js}

@@ -1,6 +1,6 @@
 import {
   button_styles_default
-} from "./chunk.FA2HQBM6.js";
+} from "./chunk.TENBZ64C.js";
 import {
   i
 } from "./chunk.4KHZQZ3M.js";

package/cdn/chunks/{chunk.Y5CXRULD.js → chunk.2QGLZHHF.js}

@@ -1,6 +1,6 @@
 import {
   input_mask_styles_default
-} from "./chunk.P5N74W74.js";
+} from "./chunk.THMGZ3JS.js";
 import {
   maskedValueToRawValue,
   rawValueToMaskedValue,
@@ -8,7 +8,7 @@ import {
 } from "./chunk.7OLEA3GQ.js";
 import {
   FormControlLayout
-} from "./chunk.PMMQ5QVY.js";
+} from "./chunk.SF3YU6PZ.js";
 import {
   l
 } from "./chunk.7PPSHHT2.js";
@@ -20,7 +20,7 @@ import {
 } from "./chunk.3NWILHZZ.js";
 import {
   LocalizeController
-} from "./chunk.ZLWLHLBC.js";
+} from "./chunk.LICWCBKN.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/chunk.2T2ABKP4.js

@@ -0,0 +1,348 @@
+import {
+  input_otp_styles_default
+} from "./chunk.ZTXQFGQX.js";
+import {
+  FormControlLayout
+} from "./chunk.SF3YU6PZ.js";
+import {
+  l
+} from "./chunk.7PPSHHT2.js";
+import {
+  defaultValue
+} from "./chunk.YY5FKN3H.js";
+import {
+  FormControlController
+} from "./chunk.3NWILHZZ.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.B6GVVW66.js";
+import {
+  o
+} from "./chunk.YQLIIKLI.js";
+import {
+  e as e2
+} from "./chunk.IKHG7XGO.js";
+import {
+  e,
+  n,
+  r,
+  t
+} from "./chunk.DZB6XUZ7.js";
+import {
+  x
+} from "./chunk.7HUC6BF3.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/input-otp/input-otp.ts
+var DSAInputOTP = class extends FormControlLayout {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      assumeInteractionOn: ["dsa-blur", "dsa-input"]
+    });
+    this.hasFocus = false;
+    this.currentIndex = 0;
+    this.value = "";
+    this.defaultValue = "";
+    this.length = 6;
+  }
+  /** Gets the validity state object */
+  get validity() {
+    return this.input.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+  async firstUpdated() {
+    await this.updateComplete;
+    this.formControlController.updateValidity();
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("dsa-blur");
+  }
+  handleChange() {
+    this.value = this.input.value;
+    this.emit("dsa-change");
+  }
+  handleFocus() {
+    this.currentIndex = this.value ? -1 : 0;
+    this.hasFocus = true;
+    this.emit("dsa-focus");
+  }
+  handleInput(event) {
+    var _a;
+    if (this.patternRegexp && !this.patternRegexp.test(this.input.value)) {
+      this.input.value = this.value;
+      this.handleCurrentIndexChange();
+      return;
+    }
+    if (this.input.value.length > this.length) {
+      this.input.value = this.input.value.slice(0, this.length);
+    } else {
+      this.value = this.input.value;
+      if (!event.data) {
+        if (this.currentIndex === 0) {
+          this.handleCurrentIndexChange();
+        } else if (this.currentIndex === -1) {
+          this.currentIndex = 0;
+        } else {
+          this.currentIndex -= 1;
+        }
+      } else {
+        if (((_a = event.data) == null ? void 0 : _a.length) === 1) {
+          this.currentIndex = this.currentIndex < this.length ? this.currentIndex + 1 : this.length - 1;
+        } else {
+          this.currentIndex = this.getLastIndex();
+        }
+      }
+      this.formControlController.updateValidity();
+      this.emit("dsa-input");
+    }
+  }
+  handleSelect() {
+    if (this.input.value.length > 1 && this.input.selectionStart === 0 && this.input.selectionEnd === this.input.value.length) {
+      this.currentIndex = -1;
+    }
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  handleKeyDown(event) {
+    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+    if (event.key === "Enter" && !hasModifier) {
+      setTimeout(() => {
+        if (!event.defaultPrevented && !event.isComposing) {
+          this.formControlController.submit();
+        }
+      });
+    }
+    if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) {
+      event.preventDefault();
+      switch (event.key) {
+        case "ArrowLeft":
+          this.currentIndex = this.currentIndex > 0 ? this.currentIndex - 1 : 0;
+          break;
+        case "ArrowRight":
+          if (this.currentIndex === -1) {
+            this.currentIndex = this.getLastIndex();
+          } else if (this.currentIndex < this.value.length && this.currentIndex < this.length - 1) {
+            this.currentIndex += 1;
+          }
+          break;
+        case "ArrowUp":
+          this.currentIndex = 0;
+          break;
+        case "ArrowDown":
+          this.currentIndex = this.getLastIndex();
+          break;
+      }
+    }
+  }
+  handleSingleFieldClick(event) {
+    this.focus();
+    if (event.currentTarget instanceof HTMLElement) {
+      const clickedIndex = Number(event.currentTarget.dataset.fieldIndex);
+      this.currentIndex = clickedIndex < this.value.length ? clickedIndex : this.getLastIndex();
+    }
+  }
+  getLastIndex() {
+    return this.value.length > 0 ? Math.min(this.value.length, this.length - 1) : 0;
+  }
+  getDescriptionIds() {
+    const ids = [...this.error ? ["error-text"] : [], "help-text"];
+    return ids.join(" ");
+  }
+  handleCurrentIndexChange() {
+    if (this.currentIndex === -1) {
+      this.input.setSelectionRange(0, this.input.value.length);
+    } else {
+      this.input.setSelectionRange(this.currentIndex, this.currentIndex + 1);
+    }
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(this.disabled);
+  }
+  async handleValueChange() {
+    await this.updateComplete;
+    this.formControlController.updateValidity();
+  }
+  handlePatterChange() {
+    this.patternRegexp = new RegExp(this.pattern);
+  }
+  /** Removes focus from the input. */
+  blur() {
+    this.input.blur();
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+  /** Sets focus on the input. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.input.reportValidity();
+  }
+  /** Selects all the text in the input. */
+  select() {
+    if (this.input instanceof HTMLInputElement) {
+      this.input.select();
+    }
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  async getUpdateComplete() {
+    const result = await super.getUpdateComplete();
+    return result;
+  }
+  renderSingleField(index) {
+    const charValue = this.value.split("")[index];
+    const isCurrentField = this.currentIndex === index || this.currentIndex === -1 && charValue;
+    const inputClasses = e2({
+      "single-field": true,
+      "single-field--active": this.hasFocus && isCurrentField
+    });
+    return x`
+      <div
+        class=${inputClasses}
+        data-field-index=${index}
+        aria-hidden="true"
+        @click=${this.handleSingleFieldClick}
+      >
+        ${charValue || this.hasFocus && isCurrentField ? x`<span class="single-field__value">${charValue}</span>` : x`
+              <span class="single-field__placeholder"
+                >${this.placeholder.charAt(0)}</span
+              >
+            `}
+        ${this.hasFocus && isCurrentField && !charValue ? x` <div class="fake-caret"></div> ` : ""}
+      </div>
+    `;
+  }
+  renderInput() {
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    return x`
+      <div part="base" class="input__wrapper">
+        <div
+          class=${e2({
+      "visible-input": true,
+      "input--focused": this.hasFocus,
+      // Sizes
+      "input--small": this.size === "small",
+      "input--medium": this.size === "medium",
+      "input--large": this.size === "large",
+      // States
+      "input--error": this.error,
+      "input--on-layer": this.variant === "layer",
+      "input--on-base": this.variant === "base",
+      "input--disabled": this.disabled
+    })}
+        >
+          ${Array.from(Array(this.length)).map(
+      (_, index) => this.renderSingleField(index)
+    )}
+        </div>
+        <input
+          part="input"
+          id="input"
+          class="hidden-input"
+          type="text"
+          name=${ifDefinedAndNotEmpty(this.name)}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          minlength=${this.length}
+          maxlength=${this.length}
+          .value=${l(this.value)}
+          autocomplete="one-time-code"
+          ?autofocus=${this.autofocus}
+          pattern=${o(this.pattern)}
+          enterkeyhint=${o(this.enterkeyhint)}
+          inputmode=${o(this.inputmode)}
+          aria-label=${ifDefinedAndNotEmpty(hasLabel ? void 0 : this.title)}
+          aria-describedby=${this.getDescriptionIds()}
+          aria-invalid=${o(this.error ? "true" : void 0)}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+          @invalid=${this.handleInvalid}
+          @keydown=${this.handleKeyDown}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+          @select=${this.handleSelect}
+        />
+      </div>
+    `;
+  }
+};
+DSAInputOTP.styles = input_otp_styles_default;
+__decorateClass([
+  e("input")
+], DSAInputOTP.prototype, "input", 2);
+__decorateClass([
+  r()
+], DSAInputOTP.prototype, "hasFocus", 2);
+__decorateClass([
+  r()
+], DSAInputOTP.prototype, "currentIndex", 2);
+__decorateClass([
+  r()
+], DSAInputOTP.prototype, "patternRegexp", 2);
+__decorateClass([
+  n()
+], DSAInputOTP.prototype, "value", 2);
+__decorateClass([
+  defaultValue()
+], DSAInputOTP.prototype, "defaultValue", 2);
+__decorateClass([
+  n()
+], DSAInputOTP.prototype, "pattern", 2);
+__decorateClass([
+  n({ type: Number })
+], DSAInputOTP.prototype, "length", 2);
+__decorateClass([
+  n()
+], DSAInputOTP.prototype, "autocapitalize", 2);
+__decorateClass([
+  n({ type: Boolean })
+], DSAInputOTP.prototype, "autofocus", 2);
+__decorateClass([
+  n()
+], DSAInputOTP.prototype, "enterkeyhint", 2);
+__decorateClass([
+  n()
+], DSAInputOTP.prototype, "inputmode", 2);
+__decorateClass([
+  watch("currentIndex", { waitUntilFirstUpdate: true })
+], DSAInputOTP.prototype, "handleCurrentIndexChange", 1);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], DSAInputOTP.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("value", { waitUntilFirstUpdate: true })
+], DSAInputOTP.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch("pattern")
+], DSAInputOTP.prototype, "handlePatterChange", 1);
+DSAInputOTP = __decorateClass([
+  t("dsa-input-otp")
+], DSAInputOTP);
+
+export {
+  DSAInputOTP
+};

package/cdn/chunks/chunk.35PPY25N.js

@@ -0,0 +1,92 @@
+import {
+  component_styles_default
+} from "./chunk.PSQJDSB2.js";
+import {
+  i
+} from "./chunk.4KHZQZ3M.js";
+
+// src/components/radio/radio.styles.ts
+var radio_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  :host(:focus-visible) {
+    outline: 0px;
+  }
+
+  .radio {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    font: var(--dsa-wc-radio-label-font);
+    color: var(--dsa-wc-radio-label-color);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .radio--small {
+    --toggle-size: var(--dsa-wc-radio-size-small);
+    font: var(--dsa-wc-radio-label-font-small);
+  }
+
+  .radio--medium {
+    --toggle-size: var(--dsa-wc-radio-size);
+    font: var(--dsa-wc-radio-label-font);
+  }
+
+  .radio--large {
+    --toggle-size: var(--dsa-wc-radio-size-large);
+    font: var(--dsa-wc-radio-label-font-large);
+  }
+
+  .radio__input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  /* Checked + focus */
+  :host(:focus-visible) dsa-internal-radio-icon::part(control) {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+
+  .radio__label {
+    display: inline-flex;
+    color: var(--dsa-wc-radio-label-color);
+    line-height: var(--toggle-size);
+    justify-content: center;
+    align-items: center;
+    margin-inline-start: 0.5em;
+    user-select: none;
+  }
+
+  /* Disabled */
+
+  .radio--disabled {
+    cursor: not-allowed;
+  }
+
+  .radio--disabled .radio__label {
+    color: var(--dsa-wc-radio-label-color-disabled);
+  }
+
+  /* Error */
+  .radio__label.radio__label--error {
+    color: var(--dsa-wc-input-label-color-error) !important;
+  }
+
+  /* Readonly */
+  .radio--readonly {
+    cursor: not-allowed;
+  }
+`;
+
+export {
+  radio_styles_default
+};

package/cdn/chunks/{chunk.EARU4CHS.js → chunk.3AT66TOX.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.7M6TBOTT.js";
 import {
   DSAIcon
-} from "./chunk.BE7PKTJW.js";
+} from "./chunk.D5IL5KN6.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.WJ2QJ5NF.js → chunk.3CRRJ74Q.js}

@@ -1,15 +1,15 @@
-import {
-  footer_styles_default
-} from "./chunk.XSXBXWVS.js";
 import {
   footerLogoSvg
 } from "./chunk.SSQ53AGL.js";
+import {
+  footer_styles_default
+} from "./chunk.QFP2EIRS.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.ZLWLHLBC.js";
+} from "./chunk.LICWCBKN.js";
 import {
   e
 } from "./chunk.IKHG7XGO.js";

package/cdn/chunks/{chunk.SW4US4PJ.js → chunk.4AMHKT45.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.ZLWLHLBC.js";
+} from "./chunk.LICWCBKN.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.PGT2WHXR.js → chunk.4VWDJUDJ.js}

@@ -1,9 +1,9 @@
+import {
+  DSATableRow
+} from "./chunk.U5Q3HCRP.js";
 import {
   table_header_row_styles_default
 } from "./chunk.JEWSMUZM.js";
-import {
-  DSATableRow
-} from "./chunk.6CF6SXDF.js";
 import {
   t
 } from "./chunk.DZB6XUZ7.js";

package/cdn/chunks/{chunk.6H5KLQNT.js → chunk.57JBB4UL.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.DTSCRQ4P.js";
 import {
   LocalizeController
-} from "./chunk.ZLWLHLBC.js";
+} from "./chunk.LICWCBKN.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.THD27VRI.js → chunk.57UCUSPU.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.MML6GY5Y.js";
 import {
   LocalizeController
-} from "./chunk.ZLWLHLBC.js";
+} from "./chunk.LICWCBKN.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.E4GNTJPS.js → chunk.5AKIIMXP.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk.O4MZVDWB.js";
 import {
   FormControlLayout
-} from "./chunk.PMMQ5QVY.js";
+} from "./chunk.SF3YU6PZ.js";
 import {
   combobox_styles_default
-} from "./chunk.I7XP2UMV.js";
+} from "./chunk.7FRA5H32.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -29,7 +29,7 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.ZLWLHLBC.js";
+} from "./chunk.LICWCBKN.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.7CIXFYLV.js → chunk.5EYEXU6M.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.ZLWLHLBC.js";
+} from "./chunk.LICWCBKN.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";