@ds-autonomie/web-components 2.19.0 → 2.20.0

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

@@ -1,6 +1,6 @@
 import {
   DSASelect
-} from "./chunk.Q4BEX42U.js";
+} from "./chunk.ZKBTNXGE.js";
 import {
   frenchNumberPrefix,
   phonePrefixOptions
@@ -10,27 +10,29 @@ import {
 } from "./chunk.YKKP7YAT.js";
 import {
   input_phone_styles_default
-} from "./chunk.2DYEXJNV.js";
+} from "./chunk.AI3RKI3P.js";
 import {
+  buildValidityState,
   maskedValueToRawValue,
   rawValueToMaskedValue,
+  renderMaskOverlay,
   stripSpecialChars
-} from "./chunk.7OLEA3GQ.js";
+} from "./chunk.3D7AGBFQ.js";
 import {
   InputBase
-} from "./chunk.WMFEJDPX.js";
+} from "./chunk.DE3HY2DW.js";
 import {
   DSAOption
-} from "./chunk.SAQFLKP7.js";
+} from "./chunk.NPMNFNR7.js";
 import {
   DSAIconButton
-} from "./chunk.WNESPUKK.js";
+} from "./chunk.MWPOWC6N.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.NJQ6BFQQ.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.4XPBWICF.js → chunk.TNWA2A3X.js}

@@ -1,6 +1,6 @@
 import {
   footer_sitemap_item_styles_default
-} from "./chunk.R3PD3TNK.js";
+} from "./chunk.IWCSAXJN.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";

package/dist/chunks/{chunk.SAKI57GG.js → chunk.TTV3MIRK.js}

@@ -1,6 +1,6 @@
 import {
   file_upload_styles_default
-} from "./chunk.LFCY7UUJ.js";
+} from "./chunk.ZKCBJ5YM.js";
 import {
   collectMultipleDroppedFiles
 } from "./chunk.U5AV7YAS.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.CMJ2SRTL.js";
 import {
   DSAErrorText
-} from "./chunk.5NSAEDEE.js";
+} from "./chunk.M2QIFDAP.js";
 import {
   renderFormElementErrors
 } from "./chunk.6QDM5FUA.js";
@@ -21,7 +21,7 @@ import {
 } from "./chunk.DJLJEQST.js";
 import {
   DSAAlert
-} from "./chunk.ERMNNF77.js";
+} from "./chunk.7I4SBUOE.js";
 import {
   a11yWarning
 } from "./chunk.PWL7QCVG.js";
@@ -33,7 +33,7 @@ import {
 } from "./chunk.34HS7ICN.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.NJQ6BFQQ.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -65,6 +65,7 @@ var DSAFileUpload = class extends ShoelaceElement {
     );
     this.localize = new LocalizeController(this);
     this.storedFiles = [];
+    this.acceptedTypesCache = [];
     this.internalError = "";
     this.size = "medium";
     this.label = "";
@@ -76,6 +77,7 @@ var DSAFileUpload = class extends ShoelaceElement {
     this.required = false;
     this.accept = "";
     this.multiple = false;
+    this.appendFiles = false;
     this.error = false;
     this.directory = false;
     this.name = "";
@@ -119,16 +121,14 @@ var DSAFileUpload = class extends ShoelaceElement {
   /** Remove a previously selected file */
   removeFile(index) {
     this.storedFiles.splice(index, 1);
-    const dt = new DataTransfer();
-    this.storedFiles.forEach((f) => dt.items.add(f));
-    this.fileUploadInput.files = dt.files;
+    this.syncInputFilesFromStore();
     this.value = this.fileUploadInput.value;
     this.emit("dsa-file-upload", { detail: { files: this.storedFiles } });
   }
   connectedCallback() {
     super.connectedCallback();
-    const allFiles = this.getAllFileElements();
-    allFiles.forEach((el) => el.setAttribute("size", this.size));
+    this.acceptedTypesCache = this.accept ? this.accept.split(",").map((type) => type.trim()) : [];
+    this.updateFileItemsSize();
   }
   firstUpdated() {
     this.formControlController.updateValidity();
@@ -148,9 +148,18 @@ var DSAFileUpload = class extends ShoelaceElement {
       ...this.querySelectorAll("dsa-file-upload-item")
     ];
   }
+  updateFileItemsSize() {
+    this.getAllFileElements().forEach(
+      (el) => el.setAttribute("size", this.size)
+    );
+  }
+  syncInputFilesFromStore() {
+    const dataTransfer = new DataTransfer();
+    this.storedFiles.forEach((file) => dataTransfer.items.add(file));
+    this.fileUploadInput.files = dataTransfer.files;
+  }
   handleDefaultSlotChange() {
-    const allFiles = this.getAllFileElements();
-    allFiles.forEach((el) => el.setAttribute("size", this.size));
+    this.updateFileItemsSize();
   }
   handleBlur() {
     this.emit("dsa-blur");
@@ -162,13 +171,15 @@ var DSAFileUpload = class extends ShoelaceElement {
     this.internalError = "";
     const filteredFiles = this.filterValidFiles(newFiles);
     if (this.multiple) {
-      this.storedFiles = [...this.storedFiles, ...filteredFiles];
+      if (this.appendFiles) {
+        this.storedFiles = [...this.storedFiles, ...filteredFiles];
+      } else {
+        this.storedFiles = filteredFiles;
+      }
     } else {
       this.storedFiles = filteredFiles;
     }
-    const dataTransfer = new DataTransfer();
-    this.storedFiles.forEach((file) => dataTransfer.items.add(file));
-    this.fileUploadInput.files = dataTransfer.files;
+    this.syncInputFilesFromStore();
     this.value = this.fileUploadInput.value;
     this.formControlController.updateValidity();
     this.emit("dsa-file-upload", { detail: { files: this.storedFiles } });
@@ -176,7 +187,7 @@ var DSAFileUpload = class extends ShoelaceElement {
   isAcceptedFileType(file) {
     var _a;
     if (!this.accept) return true;
-    const acceptedTypes = this.accept.split(",").map((type) => type.trim());
+    const acceptedTypes = this.acceptedTypesCache;
     const fileType = file.type;
     const fileExtension = `.${(_a = file.name.split(".").pop()) != null ? _a : ""}`;
     return acceptedTypes.some((type) => {
@@ -237,7 +248,9 @@ var DSAFileUpload = class extends ShoelaceElement {
   }
   async handleDrop(e) {
     e.preventDefault();
-    this.dropzone.classList.remove("dropzone--dragover");
+    if (this.dropzone.classList.contains("dropzone--dragover")) {
+      this.dropzone.classList.remove("dropzone--dragover");
+    }
     const dt = e.dataTransfer;
     if (!dt) return;
     const items = dt.items;
@@ -266,12 +279,14 @@ var DSAFileUpload = class extends ShoelaceElement {
     e.preventDefault();
     const draggedItems = (_a = e.dataTransfer) == null ? void 0 : _a.items;
     if (!draggedItems) return;
-    if (this.multiple || draggedItems.length === 1) {
+    if ((this.multiple || draggedItems.length === 1) && !this.dropzone.classList.contains("dropzone--dragover")) {
       this.dropzone.classList.add("dropzone--dragover");
     }
   }
   handleDropzoneDragleave() {
-    this.dropzone.classList.remove("dropzone--dragover");
+    if (this.dropzone.classList.contains("dropzone--dragover")) {
+      this.dropzone.classList.remove("dropzone--dragover");
+    }
   }
   handleInternalErrorHide() {
     this.internalError = "";
@@ -282,9 +297,11 @@ var DSAFileUpload = class extends ShoelaceElement {
     ids = [...ids, "description", "help-text", "slot_files"];
     return ids.join(" ");
   }
+  handleAcceptChange() {
+    this.acceptedTypesCache = this.accept ? this.accept.split(",").map((type) => type.trim()) : [];
+  }
   handleSizeChange() {
-    const allFiles = this.getAllFileElements();
-    allFiles.forEach((el) => el.setAttribute("size", this.size));
+    this.updateFileItemsSize();
   }
   handleValueChange() {
     if (this.value === "" && this.fileUploadInput) {
@@ -365,6 +382,7 @@ var DSAFileUpload = class extends ShoelaceElement {
       <fieldset
         part="base"
         class=${classMap({
+      "file-upload": true,
       "form-control": true,
       "form-control--error": this.error && !this.disabled,
       "form-control--disabled": this.disabled,
@@ -492,6 +510,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSAFileUpload.prototype, "multiple", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "append-files" })
+], DSAFileUpload.prototype, "appendFiles", 2);
 __decorateClass([
   property({ type: Boolean })
 ], DSAFileUpload.prototype, "error", 2);
@@ -525,6 +546,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Number, attribute: "file-size-limit" })
 ], DSAFileUpload.prototype, "fileSizeLimit", 2);
+__decorateClass([
+  watch("accept")
+], DSAFileUpload.prototype, "handleAcceptChange", 1);
 __decorateClass([
   watch("size")
 ], DSAFileUpload.prototype, "handleSizeChange", 1);

package/dist/chunks/{chunk.CFUNT7FK.js → chunk.TXX2YIZA.js}

@@ -37,9 +37,7 @@ var split_panel_styles_default = css`
     outline: none;
   }
 
-  :host(:not([disabled])) .divider:focus-visible {
-    outline: var(--dsa-wc-focus-ring);
-  }
+  :host(:not([disabled])) .divider:focus-visible,
   :host(:not([disabled])) .divider:focus-visible .drag-icon {
     outline: var(--dsa-wc-focus-ring);
   }
@@ -53,10 +51,13 @@ var split_panel_styles_default = css`
     cursor: col-resize;
   }
 
-  :host(:not([vertical])) .divider::after {
-    display: flex;
+  .divider::after {
     content: '';
     position: absolute;
+  }
+
+  :host(:not([vertical])) .divider::after {
+    display: flex;
     height: 100%;
     left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
     width: var(--divider-hit-area);
@@ -76,8 +77,6 @@ var split_panel_styles_default = css`
   }
 
   :host([vertical]) .divider::after {
-    content: '';
-    position: absolute;
     width: 100%;
     top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
     height: var(--divider-hit-area);