@ds-autonomie/web-components 2.19.0 → 2.21.0

package/dist/chunks/{chunk.IMZ2EJ3J.js → chunk.H5G2LRCX.js}

@@ -1,6 +1,9 @@
 import {
   DSASelect
-} from "./chunk.Q4BEX42U.js";
+} from "./chunk.XGEWLFBF.js";
+import {
+  input_phone_styles_default
+} from "./chunk.TJNOM7IR.js";
 import {
   frenchNumberPrefix,
   phonePrefixOptions
@@ -9,28 +12,27 @@ import {
   getPhoneConfig
 } from "./chunk.YKKP7YAT.js";
 import {
-  input_phone_styles_default
-} from "./chunk.2DYEXJNV.js";
-import {
+  buildValidityState,
   maskedValueToRawValue,
   rawValueToMaskedValue,
+  renderMaskOverlay,
   stripSpecialChars
-} from "./chunk.7OLEA3GQ.js";
+} from "./chunk.3D7AGBFQ.js";
 import {
   InputBase
-} from "./chunk.WMFEJDPX.js";
+} from "./chunk.7HMEK2ND.js";
 import {
   DSAOption
-} from "./chunk.SAQFLKP7.js";
+} from "./chunk.WEWJQ2AA.js";
 import {
   DSAIconButton
-} from "./chunk.WNESPUKK.js";
+} from "./chunk.2GTXVMMC.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.YPBLUIU7.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -47,12 +49,15 @@ import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { live } from "lit/directives/live.js";
 import { LocalizeController } from "@shoelace-style/localize";
+var defaultPhoneConfig = getPhoneConfig("+33");
 var DSAInputPhone = class extends InputBase {
   constructor() {
     super(...arguments);
     this.localize = new LocalizeController(this);
+    this.phonePattern = new RegExp(defaultPhoneConfig.pattern);
+    this.placeholderLength = stripSpecialChars(defaultPhoneConfig.placeholder).length;
     this.maskedNumber = "";
-    this.phoneConfig = getPhoneConfig("+33");
+    this.phoneConfig = defaultPhoneConfig;
     this.placeholder = this.phoneConfig.placeholder;
     this.pattern = this.phoneConfig.pattern;
     this._isSyncing = false;
@@ -64,34 +69,14 @@ var DSAInputPhone = class extends InputBase {
   }
   /** Gets the validity state object */
   get validity() {
-    let patternMatch = void 0;
-    if (this.phoneNumber.length > 0) {
-      const matches = this.value.match(this.pattern);
-      patternMatch = matches !== null;
-    }
-    const validityState = {
-      badInput: this.input.validity.badInput,
-      customError: this.input.validity.customError,
-      patternMismatch: !patternMatch,
-      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;
+    const patternMatch = this.phoneNumber.length > 0 ? this.phonePattern.test(this.value) : void 0;
+    return buildValidityState(this.input.validity, patternMatch);
   }
   connectedCallback() {
     super.connectedCallback();
     this.defaultValue = this.value;
     this.setPhoneFromValue(this.value);
-    this.maskedNumber = rawValueToMaskedValue(
-      this.phoneNumber,
-      this.placeholder
-    );
+    this.syncMaskedNumber();
   }
   willUpdate(changedProperties) {
     if (changedProperties.has("phonePrefix") && !frenchNumberPrefix.includes(this.phonePrefix)) {
@@ -101,16 +86,34 @@ var DSAInputPhone = class extends InputBase {
   /*
    * Event handlers
    */
-  handleDocumentKeyUp() {
-    const strippedValue = stripSpecialChars(this.input.value);
+  syncMaskedNumber() {
+    const maskedNumber = rawValueToMaskedValue(
+      this.phoneNumber,
+      this.placeholder
+    );
+    if (this.maskedNumber !== maskedNumber) {
+      this.maskedNumber = maskedNumber;
+    }
+    if (this.input && this.input.value !== maskedNumber) {
+      this.input.value = maskedNumber;
+    }
+  }
+  handleInputValueChange() {
+    const input = this.input;
+    const strippedValue = stripSpecialChars(input.value);
     const newValue = maskedValueToRawValue(
       strippedValue,
       this.phoneConfig.mask
     );
-    const maskedValue = rawValueToMaskedValue(newValue, this.placeholder);
+    const maskedNumber = rawValueToMaskedValue(newValue, this.placeholder);
+    if (this.phoneNumber === newValue && this.maskedNumber === maskedNumber && input.value === maskedNumber) {
+      return;
+    }
     this.phoneNumber = newValue;
-    this.maskedNumber = maskedValue;
-    this.input.value = maskedValue;
+    this.maskedNumber = maskedNumber;
+    if (input.value !== maskedNumber) {
+      input.value = maskedNumber;
+    }
     this.updateValue();
     this.formControlController.updateValidity();
     this.emit("dsa-input");
@@ -135,7 +138,13 @@ var DSAInputPhone = class extends InputBase {
   }
   handleClearIconClick(event) {
     this.phonePrefix = "+33";
+    this.applyPhoneConfig(this.phonePrefix);
     this.phoneNumber = "";
+    this.maskedNumber = "";
+    this.value = "";
+    if (this.input.value !== "") {
+      this.input.value = "";
+    }
     this.emit("dsa-clear");
     this.emit("dsa-input");
     this.emit("dsa-change");
@@ -151,34 +160,42 @@ var DSAInputPhone = class extends InputBase {
     if (this.phoneNumber.length === 0) {
       this.value = "";
     } else {
-      const placeholderLength = stripSpecialChars(this.placeholder).length;
       this.value = `${this.phonePrefix}${this.phoneNumber.substring(
         0,
-        placeholderLength
+        this.placeholderLength
       )}`;
     }
     this._isSyncing = false;
   }
-  updatePhoneConfig() {
-    this.phoneConfig = getPhoneConfig(this.phonePrefix);
+  applyPhoneConfig(phonePrefix) {
+    this.phoneConfig = getPhoneConfig(phonePrefix);
     this.placeholder = this.phoneConfig.placeholder;
     this.pattern = this.phoneConfig.pattern;
+    this.placeholderLength = stripSpecialChars(this.placeholder).length;
+    this.phonePattern = new RegExp(this.pattern);
+  }
+  getPhonePrefixFromValue(value) {
+    for (const prefix of frenchNumberPrefix) {
+      if (value.startsWith(prefix)) {
+        return prefix;
+      }
+    }
+    return "+33";
   }
   setPhoneFromValue(value) {
-    if (this.value === "") {
+    if (value === "") {
       this.phonePrefix = "+33";
+      this.applyPhoneConfig(this.phonePrefix);
       this.phoneNumber = "";
+      this.value = "";
+      return;
     }
-    const placeholderLength = stripSpecialChars(this.placeholder).length;
-    const prefixIndex = frenchNumberPrefix.findIndex(
-      (prefix) => value.startsWith(prefix)
-    );
-    if (prefixIndex >= 0) {
-      const prefix = frenchNumberPrefix[prefixIndex];
-      const number = value.replace(prefix, "").substring(0, placeholderLength);
-      this.phonePrefix = prefix;
-      this.phoneNumber = number;
-    }
+    const phonePrefix = this.getPhonePrefixFromValue(value);
+    const phoneConfig = getPhoneConfig(phonePrefix);
+    const placeholderLength = stripSpecialChars(phoneConfig.placeholder).length;
+    this.phonePrefix = phonePrefix;
+    this.applyPhoneConfig(phonePrefix);
+    this.phoneNumber = value.replace(phonePrefix, "").substring(0, placeholderLength);
   }
   getDescriptionIds() {
     let ids = ["input-phone"];
@@ -187,30 +204,27 @@ var DSAInputPhone = class extends InputBase {
     return ids.join(" ");
   }
   handleDisabledChange() {
-    if (this.disabled) {
-      this.phonePrefixEl.setAttribute("disabled", "");
-    } else {
-      this.phonePrefixEl.removeAttribute("disabled");
-    }
     this.formControlController.setValidity(this.disabled);
   }
   async handleValueChange() {
     if (this._isSyncing) return;
     this._isSyncing = true;
     this.setPhoneFromValue(this.value);
-    this.maskedNumber = rawValueToMaskedValue(
-      this.phoneNumber,
-      this.placeholder
-    );
+    this.syncMaskedNumber();
     await this.updateComplete;
     this.formControlController.updateValidity();
     this._isSyncing = false;
   }
   handlePhonePrefixChange() {
-    this.updatePhoneConfig();
+    this.applyPhoneConfig(this.phonePrefix);
+    if (this.phoneNumber.length > this.placeholderLength) {
+      this.phoneNumber = this.phoneNumber.substring(0, this.placeholderLength);
+    }
+    this.syncMaskedNumber();
     this.updateValue();
   }
   handlePhoneNumberChange() {
+    this.syncMaskedNumber();
     this.updateValue();
   }
   /*
@@ -222,9 +236,7 @@ var DSAInputPhone = class extends InputBase {
     if (this.phoneNumber.length === 0) {
       return isValidInput != null ? isValidInput : false;
     }
-    const matches = this.value.match(this.pattern);
-    const patternMatch = matches !== null;
-    return patternMatch;
+    return this.phonePattern.test(this.value);
   }
   reportValidity() {
     var _a;
@@ -232,18 +244,13 @@ var DSAInputPhone = class extends InputBase {
     if (this.phoneNumber.length === 0) {
       return isValidInput != null ? isValidInput : false;
     }
-    const matches = this.value.match(this.pattern);
-    const patternMatch = matches !== null;
-    return patternMatch;
+    return this.phonePattern.test(this.value);
   }
   renderInput() {
     var _a, _b, _c;
     const hasLabelSlot = this.hasSlotController.test("label");
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasClearIcon = this.clearable && !this.disabled && !this.readonly && (typeof this.phoneNumber === "number" || ((_a = this.phoneNumber) == null ? void 0 : _a.length) > 0);
-    const placeholder = this.placeholder.substring(
-      this.maskedNumber.length || 0
-    );
     return html`
       <div part="base" class="input-phone__input form-control__field">
         <dsa-select
@@ -299,18 +306,11 @@ var DSAInputPhone = class extends InputBase {
           <span>${this.inputPrefix}</span>
 
           <div class="input-phone__mask">
-            <div
-              class=${classMap({
-      "input-phone__placeholder": true
-    })}
-              aria-placeholder=${placeholder}
-              aria-hidden="true"
-            >
-              <span class="input-phone__value" aria-hidden="true">
-                ${this.maskedNumber}</span
-              >
-              ${placeholder}
-            </div>
+            ${renderMaskOverlay(
+      this.maskedNumber,
+      this.placeholder,
+      "input-phone"
+    )}
 
             <input
               part="input"
@@ -342,7 +342,7 @@ var DSAInputPhone = class extends InputBase {
               aria-describedby=${this.getDescriptionIds()}
               aria-invalid=${ifDefined(this.error ? "true" : void 0)}
               @change=${this.handleInputChange}
-              @keyup=${this.handleDocumentKeyUp}
+              @input=${this.handleInputValueChange}
               @keydown=${this.handleKeyDown}
               @focus=${this.handleFocus}
               @blur=${this.handleBlur}

package/dist/chunks/{chunk.4E2FKC3C.js → chunk.H7QHCUBR.js}

@@ -6,10 +6,10 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.YPBLUIU7.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";

package/dist/chunks/{chunk.LT44CVRV.js → chunk.H7TB3KTK.js}

@@ -1,9 +1,9 @@
+import {
+  DSAMenuItem
+} from "./chunk.5DVIZLXZ.js";
 import {
   menu_navigation_styles_default
 } from "./chunk.Z4R36OG7.js";
-import {
-  DSAMenuItem
-} from "./chunk.LYVWDO7O.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -31,13 +31,9 @@ var DSAMenuNavigation = class extends ShoelaceElement {
     if (this.level) {
       const menuItems = this.querySelectorAll("dsa-menu-item");
       menuItems.forEach((menuItem) => {
-        if (this.level === 1) {
-          menuItem.classList.remove("level-2");
-          menuItem.classList.add("level-1");
-        } else {
-          menuItem.classList.remove("level-1");
-          menuItem.classList.add("level-2");
-        }
+        const isLevelOne = this.level === 1;
+        menuItem.classList.toggle("level-1", isLevelOne);
+        menuItem.classList.toggle("level-2", !isLevelOne);
       });
     }
   }

package/dist/chunks/{chunk.LO42XUHN.js → chunk.HAWD2P5K.js}

@@ -59,36 +59,35 @@ var drawer_styles_default = css`
     outline: none;
   }
 
-  .drawer--top .drawer__panel {
+  .drawer--top .drawer__panel,
+  .drawer--start .drawer__panel {
     top: 0;
     inset-inline: 0 auto;
     bottom: auto;
+  }
+
+  .drawer--top .drawer__panel,
+  .drawer--bottom .drawer__panel {
     width: 100%;
     height: var(--size);
   }
 
+  .drawer--end .drawer__panel,
+  .drawer--start .drawer__panel {
+    width: var(--size);
+    height: 100%;
+  }
+
   .drawer--end .drawer__panel {
     top: 0;
     inset-inline: auto 0;
     bottom: auto;
-    width: var(--size);
-    height: 100%;
   }
 
   .drawer--bottom .drawer__panel {
     top: auto;
     inset-inline: 0 auto;
     bottom: 0;
-    width: 100%;
-    height: var(--size);
-  }
-
-  .drawer--start .drawer__panel {
-    top: 0;
-    inset-inline: 0 auto;
-    bottom: auto;
-    width: var(--size);
-    height: 100%;
   }
 
   .drawer__header {

package/dist/chunks/{chunk.WO56WJXU.js → chunk.HG526A44.js}

@@ -33,6 +33,7 @@ var tree_item_styles_default = css`
   }
 
   .tree-item__checkbox {
+    display: inline-flex;
     pointer-events: none;
     margin-inline-end: 0.5rem;
   }

package/dist/chunks/{chunk.6WPKFGU3.js → chunk.HIABUXVS.js}

@@ -57,11 +57,15 @@ var menu_accordion_styles_default = css`
     outline: none;
   }
 
-  .menu-accordion__prefix {
-    flex: 0 0 auto;
+  .menu-accordion__prefix,
+  .menu-accordion__summary {
     display: flex;
     align-items: center;
   }
+
+  .menu-accordion__prefix {
+    flex: 0 0 auto;
+  }
   .menu-accordion__prefix::slotted(*) {
     margin-inline-end: var(--dsa-wc-menu-item-margin-inline-end);
     display: flex;
@@ -71,8 +75,6 @@ var menu_accordion_styles_default = css`
 
   .menu-accordion__summary {
     flex: 0 1 auto;
-    display: flex;
-    align-items: center;
   }
 
   .menu-accordion__badge::slotted(*) {
@@ -115,9 +117,7 @@ var menu_accordion_styles_default = css`
     display: none;
   }
 
-  .menu-accordion--collapsed .menu-accordion__summary {
-    display: none;
-  }
+  .menu-accordion--collapsed .menu-accordion__summary,
   .menu-accordion--collapsed .menu-accordion__summary-icon {
     display: none;
   }
@@ -128,18 +128,18 @@ var menu_accordion_styles_default = css`
   }
   .menu-accordion--small.menu-accordion--collapsed
     .menu-accordion__badge::slotted(*) {
-    top: 0.125rem;
-    left: 1.5rem;
+    inset-block-start: 0.125rem;
+    inset-inline-start: 1.5rem;
   }
   .menu-accordion--medium.menu-accordion--collapsed
     .menu-accordion__badge::slotted(*) {
-    top: 0.25rem;
-    left: 1.625rem;
+    inset-block-start: 0.25rem;
+    inset-inline-start: 1.625rem;
   }
   .menu-accordion--large.menu-accordion--collapsed
     .menu-accordion__badge::slotted(*) {
-    top: 0.5rem;
-    left: 1.75rem;
+    inset-block-start: 0.5rem;
+    inset-inline-start: 1.75rem;
   }
 
   /*

package/dist/chunks/{chunk.2WW7OJZT.js → chunk.IDMG3YLC.js}

@@ -1,9 +1,9 @@
 import {
   spinner_styles_default
-} from "./chunk.XSXVVUKP.js";
+} from "./chunk.VILH76T7.js";
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";

package/dist/chunks/{chunk.JVIWPP43.js → chunk.IEYQPZRM.js}

@@ -27,6 +27,7 @@ var footer_sitemap_styles_default = css`
   .footer-sitemap--align-links-center [part~='list'] {
     justify-content: center;
   }
+
   .footer-sitemap--align-links-right [part~='list'] {
     justify-content: flex-end;
   }

package/dist/chunks/{chunk.SRLGPXHB.js → chunk.IJYHCSO5.js}

@@ -107,7 +107,7 @@ var filter_date_styles_default = css`
   }
 
   .filter-button--disabled .filter__trigger::part(base) {
-    color: var(-dsa-wc-filter-date-disabled-icon-button-color);
+    color: var(--dsa-wc-filter-date-disabled-icon-button-color);
   }
 
   .filter-button--readonly .filter__trigger::part(base) {

package/dist/chunks/{chunk.SP2SVH7K.js → chunk.IQY2ZVAV.js}

@@ -1,18 +1,18 @@
 import {
   DSAInput
-} from "./chunk.QUEYKUIS.js";
+} from "./chunk.C6BC46KV.js";
+import {
+  FilterBase
+} from "./chunk.KOO2JWHZ.js";
 import {
   filter_counter_styles_default
 } from "./chunk.YSCXTTQZ.js";
-import {
-  FilterBase
-} from "./chunk.4VSGAJJL.js";
 import {
   DSAButton
-} from "./chunk.SXFVCR7O.js";
+} from "./chunk.2G35OVLZ.js";
 import {
   DSAIconButton
-} from "./chunk.WNESPUKK.js";
+} from "./chunk.2GTXVMMC.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -31,6 +31,12 @@ var DSAFilterCounter = class extends FilterBase {
     this.value = "";
     this.defaultValue = "";
   }
+  get hasMinBound() {
+    return this.min !== void 0;
+  }
+  get hasMaxBound() {
+    return this.max !== void 0;
+  }
   connectedCallback() {
     super.connectedCallback();
     this.tempValue = this.value === "" ? this.defaultValue : this.value;
@@ -42,7 +48,7 @@ var DSAFilterCounter = class extends FilterBase {
   handleDecrease() {
     if (this.tempValue === "") {
       this.tempValue = this.defaultValue !== "" ? this.defaultValue : "0";
-    } else if (!this.min || parseFloat(this.tempValue) > this.min) {
+    } else if (!this.hasMinBound || parseFloat(this.tempValue) > this.min) {
       this.tempValue = `${parseFloat(this.tempValue) - 1}`;
       this.emit("dsa-input");
     }
@@ -50,7 +56,7 @@ var DSAFilterCounter = class extends FilterBase {
   handleIncrease() {
     if (this.tempValue === "") {
       this.tempValue = this.defaultValue !== "" ? this.defaultValue : "0";
-    } else if (!this.max || parseFloat(this.tempValue) < this.max) {
+    } else if (!this.hasMaxBound || parseFloat(this.tempValue) < this.max) {
       this.tempValue = `${parseFloat(this.tempValue) + 1}`;
       this.emit("dsa-input");
     }
@@ -90,7 +96,7 @@ var DSAFilterCounter = class extends FilterBase {
           size="xlarge"
           label=${this.localize.term("decrease")}
           @click=${this.handleDecrease}
-          ?disabled=${this.min && parseFloat(this.tempValue) <= this.min}
+          ?disabled=${this.hasMinBound && parseFloat(this.tempValue) <= this.min}
           class="filter__decrease"
           library="system"
         ></dsa-icon-button>
@@ -109,7 +115,7 @@ var DSAFilterCounter = class extends FilterBase {
           size="xlarge"
           label=${this.localize.term("increase")}
           @click=${this.handleIncrease}
-          ?disabled=${this.max && parseFloat(this.tempValue) >= this.max}
+          ?disabled=${this.hasMaxBound && parseFloat(this.tempValue) >= this.max}
           class="filter__increase"
           library="system"
         ></dsa-icon-button>
@@ -137,7 +143,7 @@ var DSAFilterCounter = class extends FilterBase {
                 size="small"
                 @click=${this.handleSubmit}
                 class="filter__submit"
-                ?disabled=${this.min && parseFloat(this.tempValue) < this.min || this.max && parseFloat(this.tempValue) > this.max}
+                ?disabled=${this.hasMinBound && parseFloat(this.tempValue) < this.min || this.hasMaxBound && parseFloat(this.tempValue) > this.max}
               >
                 ${this.localize.term("validate")}
               </dsa-button>