@ds-autonomie/web-components 2.5.0 → 2.5.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @ds-autonomie/web-components
 
+## 2.5.1
+
+### Patch Changes
+
+- 20ad518: `input`, `input-phone`, `input-otp` : communalisation du code
+- 5e7de2a: `checkbox`: correction d'un bug empechant l'utilisation de liens dans le label
+- 0258fb3: `tab-group`: retrait du focus sur les flèches de scroll et le groupe
+- b163af1: `checkbox-group`: attente du chargement des composants enfants
+  `tab-group`: attente du chargement des composants enfants
+  `tree`: attente du chargement des composants enfants
+- 7387de1: `table-header-cell`: restriction de l'effet de survol aux tableaux triables, élargissement du bouton de tri
+
 ## 2.5.0
 
 ### Minor Changes

package/cdn/chunks/{chunk.J5KWVZHL.js → chunk.2BQQJKFU.js}

@@ -17,17 +17,11 @@ import {
   stripSpecialChars
 } from "./chunk.7OLEA3GQ.js";
 import {
-  FormControlLayout
-} from "./chunk.E73QKLNL.js";
+  InputBase
+} from "./chunk.YGJ3KERC.js";
 import {
   l
 } from "./chunk.7PPSHHT2.js";
-import {
-  defaultValue
-} from "./chunk.YY5FKN3H.js";
-import {
-  FormControlController
-} from "./chunk.3NWILHZZ.js";
 import {
   LocalizeController
 } from "./chunk.CAMVBH5H.js";
@@ -57,14 +51,10 @@ import {
 } from "./chunk.4ZGVANML.js";
 
 // src/components/input-phone/input-phone.ts
-var DSAInputPhone = class extends FormControlLayout {
+var DSAInputPhone = class extends InputBase {
   constructor() {
     super(...arguments);
-    this.formControlController = new FormControlController(this, {
-      assumeInteractionOn: ["dsa-blur", "dsa-input"]
-    });
     this.localize = new LocalizeController(this);
-    this.hasFocus = false;
     this.maskedNumber = "";
     this.phoneConfig = getPhoneConfig("+33");
     this.placeholder = this.phoneConfig.placeholder;
@@ -72,8 +62,6 @@ var DSAInputPhone = class extends FormControlLayout {
     this.value = "";
     this.phonePrefix = "+33";
     this.phoneNumber = "";
-    this.defaultValue = "";
-    this.clearable = false;
     this.inputPrefix = "";
     this.placement = "bottom-start";
   }
@@ -85,27 +73,20 @@ var DSAInputPhone = class extends FormControlLayout {
       patternMatch = matches !== null;
     }
     const validityState = {
-      badInput: this.inputEl.validity.badInput,
-      customError: this.inputEl.validity.customError,
+      badInput: this.input.validity.badInput,
+      customError: this.input.validity.customError,
       patternMismatch: !patternMatch,
-      rangeOverflow: this.inputEl.validity.rangeOverflow,
-      rangeUnderflow: this.inputEl.validity.rangeUnderflow,
-      stepMismatch: this.inputEl.validity.stepMismatch,
-      tooLong: this.inputEl.validity.tooLong,
-      tooShort: this.inputEl.validity.tooShort,
-      typeMismatch: this.inputEl.validity.typeMismatch,
-      valid: patternMatch !== void 0 ? patternMatch : this.inputEl.validity.valid,
-      valueMissing: this.inputEl.validity.valueMissing
+      rangeOverflow: this.input.validity.rangeOverflow,
+      rangeUnderflow: this.input.validity.rangeUnderflow,
+      stepMismatch: this.input.validity.stepMismatch,
+      tooLong: this.input.validity.tooLong,
+      tooShort: this.input.validity.tooShort,
+      typeMismatch: this.input.validity.typeMismatch,
+      valid: patternMatch !== void 0 ? patternMatch : this.input.validity.valid,
+      valueMissing: this.input.validity.valueMissing
     };
     return validityState;
   }
-  /** Gets the validation message */
-  get validationMessage() {
-    return this.inputEl.validationMessage;
-  }
-  firstUpdated() {
-    this.formControlController.updateValidity();
-  }
   connectedCallback() {
     super.connectedCallback();
     this.defaultValue = this.value;
@@ -116,7 +97,7 @@ var DSAInputPhone = class extends FormControlLayout {
     );
   }
   handleDocumentKeyUp() {
-    const strippedValue = stripSpecialChars(this.inputEl.value);
+    const strippedValue = stripSpecialChars(this.input.value);
     const newValue = maskedValueToRawValue(
       strippedValue,
       this.phoneConfig.mask
@@ -124,7 +105,7 @@ var DSAInputPhone = class extends FormControlLayout {
     const maskedValue = rawValueToMaskedValue(newValue, this.placeholder);
     this.phoneNumber = newValue;
     this.maskedNumber = maskedValue;
-    this.inputEl.value = maskedValue;
+    this.input.value = maskedValue;
     this.updateValue();
     this.formControlController.updateValidity();
     this.emit("dsa-input");
@@ -177,28 +158,6 @@ var DSAInputPhone = class extends FormControlLayout {
       this.emit("dsa-change");
     }
   }
-  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();
-        }
-      });
-    }
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.emit("dsa-focus");
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.emit("dsa-blur");
-  }
-  handleInvalid(event) {
-    this.formControlController.setValidity(false);
-    this.formControlController.emitInvalidEvent(event);
-  }
   // Clear Icon handlers
   handleClearIconClick(event) {
     this.phonePrefix = "+33";
@@ -206,7 +165,7 @@ var DSAInputPhone = class extends FormControlLayout {
     this.emit("dsa-clear");
     this.emit("dsa-input");
     this.emit("dsa-change");
-    this.inputEl.focus();
+    this.input.focus();
     event.stopPropagation();
   }
   getDescriptionIds() {
@@ -240,37 +199,10 @@ var DSAInputPhone = class extends FormControlLayout {
   handlePhoneChange() {
     this.updateValue();
   }
-  /** Sets focus on the input. */
-  focus(options) {
-    this.inputEl.focus(options);
-  }
-  /** Removes focus from the input. */
-  blur() {
-    this.inputEl.blur();
-  }
-  /** Selects all the text in the input. */
-  select() {
-    this.inputEl.select();
-  }
-  /** Sets the start and end positions of the text selection (0-based). */
-  setSelectionRange(selectionStart, selectionEnd, selectionDirection = "none") {
-    this.inputEl.setSelectionRange(
-      selectionStart,
-      selectionEnd,
-      selectionDirection
-    );
-  }
-  /** Replaces a range of text with a new string. */
-  setRangeText(replacement, start, end, selectMode) {
-    this.inputEl.setRangeText(replacement, start, end, selectMode);
-    if (this.phoneNumber !== this.inputEl.value) {
-      this.phoneNumber = this.inputEl.value;
-    }
-  }
   /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
   checkValidity() {
     var _a;
-    const isValidInput = (_a = this.inputEl) == null ? void 0 : _a.checkValidity();
+    const isValidInput = (_a = this.input) == null ? void 0 : _a.checkValidity();
     if (this.phoneNumber.length === 0) {
       return isValidInput != null ? isValidInput : false;
     }
@@ -278,14 +210,10 @@ var DSAInputPhone = class extends FormControlLayout {
     const patternMatch = matches !== null;
     return patternMatch;
   }
-  /** 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() {
     var _a;
-    const isValidInput = (_a = this.inputEl) == null ? void 0 : _a.reportValidity();
+    const isValidInput = (_a = this.input) == null ? void 0 : _a.reportValidity();
     if (this.phoneNumber.length === 0) {
       return isValidInput != null ? isValidInput : false;
     }
@@ -293,11 +221,6 @@ var DSAInputPhone = class extends FormControlLayout {
     const patternMatch = matches !== null;
     return patternMatch;
   }
-  /** Sets a custom validation message. Pass an empty string to restore validity. */
-  setCustomValidity(message) {
-    this.inputEl.setCustomValidity(message);
-    this.formControlController.updateValidity();
-  }
   renderInput() {
     var _a;
     const hasLabelSlot = this.hasSlotController.test("label");
@@ -426,13 +349,10 @@ var DSAInputPhone = class extends FormControlLayout {
 DSAInputPhone.styles = input_phone_styles_default;
 __decorateClass([
   e(".input-phone__control")
-], DSAInputPhone.prototype, "inputEl", 2);
+], DSAInputPhone.prototype, "input", 2);
 __decorateClass([
   e(".input-phone__select")
 ], DSAInputPhone.prototype, "phonePrefixEl", 2);
-__decorateClass([
-  r()
-], DSAInputPhone.prototype, "hasFocus", 2);
 __decorateClass([
   r()
 ], DSAInputPhone.prototype, "maskedNumber", 2);
@@ -454,21 +374,9 @@ __decorateClass([
 __decorateClass([
   n({ attribute: false })
 ], DSAInputPhone.prototype, "phoneNumber", 2);
-__decorateClass([
-  defaultValue()
-], DSAInputPhone.prototype, "defaultValue", 2);
-__decorateClass([
-  n({ type: Boolean })
-], DSAInputPhone.prototype, "clearable", 2);
 __decorateClass([
   n({ attribute: "input-prefix" })
 ], DSAInputPhone.prototype, "inputPrefix", 2);
-__decorateClass([
-  n({ type: Boolean })
-], DSAInputPhone.prototype, "autofocus", 2);
-__decorateClass([
-  n()
-], DSAInputPhone.prototype, "enterkeyhint", 2);
 __decorateClass([
   n({ reflect: true })
 ], DSAInputPhone.prototype, "placement", 2);

package/cdn/chunks/{chunk.A5QRPK4Q.js → chunk.3XJTVFZ2.js}

@@ -1,6 +1,6 @@
 import {
   table_styles_default
-} from "./chunk.5BQ2BGS6.js";
+} from "./chunk.6KSC4CRL.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.3OSWL542.js → chunk.53DHJKYL.js}

@@ -22,12 +22,6 @@ var radio_icon_styles_default = i`
     display: contents;
   }
 
-  :host::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-  }
-
   .radio__control--small {
     --toggle-size: var(--dsa-wc-radio-size-small);
     --toggle-inner-size: var(--dsa-wc-radio-inner-size-small);

package/cdn/chunks/{chunk.5BQ2BGS6.js → chunk.6KSC4CRL.js}

@@ -12,6 +12,7 @@ var table_styles_default = i`
   :host {
     display: table;
     width: 100%;
+    height: 100%;
   }
 `;
 

package/cdn/chunks/{chunk.HG4TPK7J.js → chunk.7CBNLWGC.js}

@@ -1,26 +1,20 @@
+import {
+  input_time_styles_default
+} from "./chunk.WWI5IYQY.js";
 import {
   compareTimeStrings,
   setTimeStringValue,
   timeStringToObject
 } from "./chunk.IONY2GZF.js";
 import {
-  input_time_styles_default
-} from "./chunk.2FF44G4Y.js";
-import {
-  FormControlLayout
-} from "./chunk.E73QKLNL.js";
+  InputBase
+} from "./chunk.YGJ3KERC.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
 import {
   l
 } from "./chunk.7PPSHHT2.js";
-import {
-  defaultValue
-} from "./chunk.YY5FKN3H.js";
-import {
-  FormControlController
-} from "./chunk.3NWILHZZ.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -61,40 +55,21 @@ import {
 } from "./chunk.4ZGVANML.js";
 
 // src/components/input-time/input-time.ts
-var DSAInputTime = class extends FormControlLayout {
+var DSAInputTime = class extends InputBase {
   constructor() {
     super(...arguments);
-    this.formControlController = new FormControlController(this, {
-      assumeInteractionOn: ["dsa-blur", "dsa-input"]
-    });
     this.localize = new LocalizeController(this);
     this.isTimePickerOpen = false;
-    this.hasFocus = false;
-    this.value = "";
-    this.defaultValue = "";
-    this.clearable = false;
     this.min = "00:00";
     this.max = "23:59";
     this.step = 60;
   }
-  /** Gets the validity state object */
-  get validity() {
-    return this.nativeInput.validity;
-  }
-  /** Gets the validation message */
-  get validationMessage() {
-    return this.nativeInput.validationMessage;
-  }
   connectedCallback() {
     super.connectedCallback();
     this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
   }
-  async firstUpdated() {
-    await this.updateComplete;
-    this.formControlController.updateValidity();
-  }
   //Adds opened dropdown event listeners
   addOpenListeners() {
     document.addEventListener("focusin", this.handleDocumentFocusIn);
@@ -141,43 +116,8 @@ var DSAInputTime = class extends FormControlLayout {
       this.toggleTimePicker();
     }
   }
-  handleInputBlur() {
-    this.hasFocus = false;
-    this.emit("dsa-blur");
-  }
-  handleInputChange() {
-    this.emit("dsa-change");
-  }
-  handleInputClearClick(event) {
-    this.value = "";
-    this.emit("dsa-clear");
-    this.emit("dsa-input");
-    this.emit("dsa-change");
-    this.nativeInput.focus();
-    event.stopPropagation();
-  }
-  handleInputFocus() {
-    this.hasFocus = true;
-    this.emit("dsa-focus");
-  }
-  handleInputInput() {
-    this.value = this.nativeInput.value;
-    this.formControlController.updateValidity();
-    this.emit("dsa-input");
-  }
-  handleInputInvalid(event) {
-    this.formControlController.setValidity(false);
-    this.formControlController.emitInvalidEvent(event);
-  }
-  handleInputKeyDown(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();
-        }
-      });
-    }
+  handleKeyDown(event) {
+    super.handleKeyDown(event);
     if (event.key === " ") {
       event.preventDefault();
       this.showTimePicker();
@@ -189,13 +129,6 @@ var DSAInputTime = class extends FormControlLayout {
     ids = [...ids, "selected-value", "help-text", "description"];
     return ids.join(" ");
   }
-  handleDisabledChange() {
-    this.formControlController.setValidity(this.disabled);
-  }
-  handleStepChange() {
-    this.nativeInput.step = String(this.step);
-    this.formControlController.updateValidity();
-  }
   async handleValueChange() {
     await this.updateComplete;
     this.formControlController.updateValidity();
@@ -232,20 +165,6 @@ var DSAInputTime = class extends FormControlLayout {
       this.emit("dsa-after-hide");
     }
   }
-  /** Sets focus on the input. */
-  focus(options) {
-    this.nativeInput.focus(options);
-  }
-  /** Removes focus from the input. */
-  blur() {
-    this.nativeInput.blur();
-  }
-  /** Selects all the text in the input. */
-  select() {
-    if (this.nativeInput instanceof HTMLInputElement) {
-      this.nativeInput.select();
-    }
-  }
   /** Shows or hides the time picker */
   toggleTimePicker() {
     if (!this.isTimePickerOpen) {
@@ -272,33 +191,6 @@ var DSAInputTime = class extends FormControlLayout {
     this.isTimePickerOpen = false;
     return await waitForEvent(this, "dsa-after-hide");
   }
-  /** Passes the stepUp method to the native input element */
-  stepUp(stepNumber) {
-    this.nativeInput.stepUp(stepNumber);
-    this.value = this.nativeInput.value;
-  }
-  /** Passes the stepDown method to the native input element */
-  stepDown(stepNumber) {
-    this.nativeInput.stepDown(stepNumber);
-    this.value = this.nativeInput.value;
-  }
-  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
-  checkValidity() {
-    return this.nativeInput.checkValidity();
-  }
-  /** 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.nativeInput.reportValidity();
-  }
-  /** Sets a custom validation message. Pass an empty string to restore validity. */
-  setCustomValidity(message) {
-    this.nativeInput.setCustomValidity(message);
-    this.formControlController.updateValidity();
-  }
   scrollSelectedTimeUnitsIntoView() {
     const selectedTimeUnits = this.popup.querySelectorAll(
       '[aria-selected="true"]'
@@ -545,12 +437,12 @@ var DSAInputTime = class extends FormControlLayout {
           aria-label=${ifDefinedAndNotEmpty(hasLabel ? void 0 : this.title)}
           aria-describedby=${this.getDescriptionIds()}
           aria-invalid=${o(this.error ? "true" : void 0)}
-          @change=${this.handleInputChange}
-          @input=${this.handleInputInput}
-          @invalid=${this.handleInputInvalid}
-          @keydown=${this.handleInputKeyDown}
-          @focus=${this.handleInputFocus}
-          @blur=${this.handleInputBlur}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+          @invalid=${this.handleInvalid}
+          @keydown=${this.handleKeyDown}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
         />
 
         ${hasSuffixIcon ? x`<slot
@@ -564,7 +456,7 @@ var DSAInputTime = class extends FormControlLayout {
                 class="input__action-button"
                 name="clear"
                 label=${this.localize.term("clearEntry")}
-                @click=${this.handleInputClearClick}
+                @click=${this.handleClearClick}
                 library="system"
               ></dsa-icon-button>
             ` : ""}
@@ -613,9 +505,6 @@ var DSAInputTime = class extends FormControlLayout {
   }
 };
 DSAInputTime.styles = input_time_styles_default;
-__decorateClass([
-  e("input")
-], DSAInputTime.prototype, "nativeInput", 2);
 __decorateClass([
   e(".icon-button--time")
 ], DSAInputTime.prototype, "timePickerButton", 2);
@@ -625,18 +514,6 @@ __decorateClass([
 __decorateClass([
   r()
 ], DSAInputTime.prototype, "isTimePickerOpen", 2);
-__decorateClass([
-  r()
-], DSAInputTime.prototype, "hasFocus", 2);
-__decorateClass([
-  n()
-], DSAInputTime.prototype, "value", 2);
-__decorateClass([
-  defaultValue()
-], DSAInputTime.prototype, "defaultValue", 2);
-__decorateClass([
-  n({ type: Boolean })
-], DSAInputTime.prototype, "clearable", 2);
 __decorateClass([
   n()
 ], DSAInputTime.prototype, "min", 2);
@@ -653,21 +530,6 @@ __decorateClass([
     }
   })
 ], DSAInputTime.prototype, "step", 2);
-__decorateClass([
-  n()
-], DSAInputTime.prototype, "autocomplete", 2);
-__decorateClass([
-  n({ type: Boolean })
-], DSAInputTime.prototype, "autofocus", 2);
-__decorateClass([
-  n()
-], DSAInputTime.prototype, "enterkeyhint", 2);
-__decorateClass([
-  watch("disabled", { waitUntilFirstUpdate: true })
-], DSAInputTime.prototype, "handleDisabledChange", 1);
-__decorateClass([
-  watch("step", { waitUntilFirstUpdate: true })
-], DSAInputTime.prototype, "handleStepChange", 1);
 __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], DSAInputTime.prototype, "handleValueChange", 1);

package/cdn/chunks/{chunk.5UVKMYSG.js → chunk.BQX4GGIU.js}

@@ -154,18 +154,24 @@ var DSACheckboxGroup = class extends ShoelaceElement {
     }
   }
   handleSlotChange() {
-    const allCheckboxes = this.getAllCheckboxes();
-    allCheckboxes.forEach((checkbox) => {
-      checkbox.checked = this.value.includes(checkbox.value);
-      checkbox.parentDisabled = this.disabled;
-      checkbox.parentReadonly = this.readonly;
-    });
-    this.hasCheckboxButtons = allCheckboxes.some(
-      (checkbox) => checkbox.tagName.toLowerCase() === "dsa-checkbox-button"
-    );
-    this.hasCheckboxCards = allCheckboxes.some(
-      (checkbox) => checkbox.tagName.toLowerCase() === "dsa-checkbox-card"
-    );
+    if (customElements.get("dsa-checkbox") || customElements.get("dsa-checkbox-button") || customElements.get("dsa-checkbox-card")) {
+      const allCheckboxes = this.getAllCheckboxes();
+      allCheckboxes.forEach((checkbox) => {
+        checkbox.checked = this.value.includes(checkbox.value);
+        checkbox.parentDisabled = this.disabled;
+        checkbox.parentReadonly = this.readonly;
+      });
+      this.hasCheckboxButtons = allCheckboxes.some(
+        (checkbox) => checkbox.tagName.toLowerCase() === "dsa-checkbox-button"
+      );
+      this.hasCheckboxCards = allCheckboxes.some(
+        (checkbox) => checkbox.tagName.toLowerCase() === "dsa-checkbox-card"
+      );
+    } else {
+      customElements.whenDefined("dsa-checkbox").then(() => this.handleSlotChange());
+      customElements.whenDefined("dsa-checkbox-button").then(() => this.handleSlotChange());
+      customElements.whenDefined("dsa-checkbox-card").then(() => this.handleSlotChange());
+    }
   }
   handleInvalid(event) {
     this.formControlController.setValidity(false);

package/cdn/chunks/{chunk.H2OEFMQC.js → chunk.BWYI3OOJ.js}

@@ -22,12 +22,6 @@ var checkbox_box_styles_default = i`
     display: contents;
   }
 
-  :host::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-  }
-
   .checkbox__control--small {
     --toggle-size: var(--dsa-wc-checkbox-size-small);
   }