@ds-autonomie/web-components 2.19.0 → 2.21.0

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

@@ -1,15 +1,15 @@
-import {
-  file_upload_styles_default
-} from "./chunk.LFCY7UUJ.js";
 import {
   collectMultipleDroppedFiles
 } from "./chunk.U5AV7YAS.js";
+import {
+  file_upload_styles_default
+} from "./chunk.JZAQYPUX.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
 import {
   DSAErrorText
-} from "./chunk.5NSAEDEE.js";
+} from "./chunk.5NGXTSAJ.js";
 import {
   renderFormElementErrors
 } from "./chunk.6QDM5FUA.js";
@@ -21,7 +21,7 @@ import {
 } from "./chunk.DJLJEQST.js";
 import {
   DSAAlert
-} from "./chunk.ERMNNF77.js";
+} from "./chunk.ORAH2BHK.js";
 import {
   a11yWarning
 } from "./chunk.PWL7QCVG.js";
@@ -30,10 +30,10 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.YPBLUIU7.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.TURUUPFG.js → chunk.ITD5BZEA.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.BASV2VAI.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.YPBLUIU7.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.PSWGNIVT.js → chunk.ITFYDUMM.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.GMHRN23H.js";
 import {
   DSAErrorText
-} from "./chunk.5NSAEDEE.js";
+} from "./chunk.5NGXTSAJ.js";
 import {
   renderFormElementErrors
 } from "./chunk.6QDM5FUA.js";
@@ -12,13 +12,13 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   DSAIconButton
-} from "./chunk.WNESPUKK.js";
+} from "./chunk.2GTXVMMC.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.34HS7ICN.js";
+} from "./chunk.DVIHNMQQ.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";

package/dist/chunks/{chunk.R3PD3TNK.js → chunk.IWCSAXJN.js}

@@ -19,9 +19,9 @@ var footer_sitemap_item_styles_default = css`
   }
 
   ::slotted(*:hover) {
-    border-bottom-style: solid;
-    border-bottom-width: var(--dsa-wc-link-underline-thickness);
     color: var(--dsa-color-text-on-layer-primary);
+    border-bottom: var(--dsa-wc-link-underline-thickness) solid
+      var(--dsa-color-text-on-layer-primary);
   }
 
   ::slotted(*:visited) {

package/dist/chunks/{chunk.5R7OHVIP.js → chunk.IYGSQFGQ.js}

@@ -3,28 +3,28 @@ import {
 } from "./chunk.UKOZXT7U.js";
 import {
   DSARangeSlider
-} from "./chunk.WFACPRM5.js";
+} from "./chunk.K64V2XZO.js";
 import {
   filter_range_styles_default
 } from "./chunk.VGW52PNG.js";
 import {
   DSAInput
-} from "./chunk.QUEYKUIS.js";
+} from "./chunk.C6BC46KV.js";
 import {
   FilterBase
-} from "./chunk.4VSGAJJL.js";
+} from "./chunk.KOO2JWHZ.js";
 import {
   DSADivider
 } from "./chunk.QGI766JC.js";
 import {
   DSAButton
-} from "./chunk.SXFVCR7O.js";
+} from "./chunk.2G35OVLZ.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.YPBLUIU7.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.4NY2E4AU.js → chunk.JBFJWJUF.js}

@@ -1,21 +1,21 @@
 import {
   DSASearch
-} from "./chunk.PSWGNIVT.js";
+} from "./chunk.ITFYDUMM.js";
 import {
   header_search_styles_default
 } from "./chunk.FGDQSQXE.js";
 import {
   DSAButton
-} from "./chunk.SXFVCR7O.js";
+} from "./chunk.2G35OVLZ.js";
 import {
   DSAIconButton
-} from "./chunk.WNESPUKK.js";
+} from "./chunk.2GTXVMMC.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.UC5S2IUH.js → chunk.JLAQUWWF.js}

@@ -16,7 +16,7 @@ var navbar_styles_default = css`
   :host([mobile]) .navbar__list {
     flex-direction: column;
   }
-  :host([mobile]) nav,
+
   :host([mobile]) ::slotted(*) {
     width: 100%;
   }

package/dist/chunks/{chunk.WSQ2ZYD4.js → chunk.JMA3VRB4.js}

@@ -1,9 +1,9 @@
 import {
   FormToggleButton
-} from "./chunk.4535HZ7L.js";
+} from "./chunk.5ESJXERV.js";
 import {
   DSACheckboxGroup
-} from "./chunk.SGPAUD26.js";
+} from "./chunk.SYZVBVOX.js";
 import {
   removeAttributeIfPresent,
   setAttributeIfDifferent

package/dist/chunks/{chunk.LFCY7UUJ.js → chunk.JZAQYPUX.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.CKEB7DWU.js";
+} from "./chunk.T43D4ETK.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";
@@ -30,19 +30,20 @@ var file_upload_styles_default = css`
   }
 
   /* Label */
-  .form-control--has-label.form-control--medium .form-control__label {
-    font: var(--dsa-wc-file-upload-label-font-medium);
-    padding-bottom: var(--dsa-spacing-16);
+  .file-upload.form-control--has-label .form-control__label {
+    padding-bottom: var(--dsa-spacing-8);
   }
 
   .form-control--has-label.form-control--small .form-control__label {
     font: var(--dsa-wc-file-upload-label-font-small);
-    padding-bottom: var(--dsa-spacing-16);
+  }
+
+  .form-control--has-label.form-control--medium .form-control__label {
+    font: var(--dsa-wc-file-upload-label-font-medium);
   }
 
   .form-control--has-label.form-control--large .form-control__label {
     font: var(--dsa-wc-file-upload-label-font-large);
-    padding-bottom: var(--dsa-spacing-16);
   }
 
   /* Description */
@@ -60,55 +61,55 @@ var file_upload_styles_default = css`
     font: var(--dsa-wc-file-upload-description-font-small);
   }
 
-  .form-control.form-control--small .form-control__description {
-    padding-bottom: var(--dsa-spacing-16);
-  }
-
   .form-control--medium .form-control__description {
     font: var(--dsa-wc-file-upload-description-font-medium);
   }
 
-  .form-control.form-control--medium .form-control__description {
-    padding-bottom: var(--dsa-spacing-16);
-  }
-
   .form-control--large .form-control__description {
     font: var(--dsa-wc-file-upload-description-font-large);
   }
 
-  .form-control.form-control--large .form-control__description {
+  .form-control--small .form-control__description,
+  .form-control--medium .form-control__description,
+  .form-control--large .form-control__description {
     padding-bottom: var(--dsa-spacing-16);
   }
 
   /* Help Text */
-  .form-control.form-control--small .form-control__help-text {
+  .form-control--small .form-control__help-text {
     font: var(--dsa-wc-file-upload-help-text-font-small);
-    padding-top: var(--dsa-spacing-16);
   }
 
-  .form-control.form-control--medium .form-control__help-text {
+  .form-control--medium .form-control__help-text {
     font: var(--dsa-wc-file-upload-help-text-font-medium);
-    padding-top: var(--dsa-spacing-16);
   }
 
-  .form-control.form-control--large .form-control__help-text {
+  .form-control--large .form-control__help-text {
     font: var(--dsa-wc-file-upload-help-text-font-large);
+  }
+
+  .file-upload.form-control--small .form-control__help-text,
+  .file-upload.form-control--medium .form-control__help-text,
+  .file-upload.form-control--large .form-control__help-text {
     padding-top: var(--dsa-spacing-16);
   }
 
   /* Error Text */
-  .form-control.form-control--small .form-control__error-text {
+  .form-control--small .form-control__error-text {
     font: var(--dsa-wc-file-upload-error-text-font-small);
-    padding-top: var(--dsa-spacing-16);
   }
 
-  .form-control.form-control--medium .form-control__error-text {
+  .form-control--medium .form-control__error-text {
     font: var(--dsa-wc-file-upload-error-text-font-medium);
-    padding-top: var(--dsa-spacing-16);
   }
 
-  .form-control.form-control--large .form-control__error-text {
+  .form-control--large .form-control__error-text {
     font: var(--dsa-wc-file-upload-error-text-font-large);
+  }
+
+  .file-upload.form-control--small .form-control__error-text,
+  .file-upload.form-control--medium .form-control__error-text,
+  .file-upload.form-control--large .form-control__error-text {
     padding-top: var(--dsa-spacing-16);
   }
 
@@ -147,8 +148,8 @@ var file_upload_styles_default = css`
     align-items: stretch;
     justify-content: center;
     width: auto;
-    border-style: solid;
-    border-width: var(--dsa-wc-button-border-width);
+    border: var(--dsa-wc-button-border-width) solid
+      var(--dsa-wc-button-secondary-on-base-color);
     border-radius: var(--dsa-wc-button-border-radius);
     text-decoration: none;
     user-select: none;
@@ -162,7 +163,6 @@ var file_upload_styles_default = css`
       var(--dsa-wc-transition-x-fast) box-shadow;
     cursor: pointer;
     background-color: var(--dsa-wc-button-secondary-on-base-color);
-    border-color: var(--dsa-wc-button-secondary-on-base-color);
     color: var(--dsa-wc-button-secondary-on-base-font-color);
   }
 
@@ -205,21 +205,18 @@ var file_upload_styles_default = css`
 
   .button--small {
     font: var(--dsa-wc-button-font-small);
-    border-radius: var(--dsa-wc-button-border-radius);
     padding-top: var(--dsa-spacing-8);
     padding-bottom: var(--dsa-spacing-8);
   }
 
   .button--medium {
     font: var(--dsa-wc-button-font);
-    border-radius: var(--dsa-wc-button-border-radius);
     padding-top: var(--dsa-spacing-12);
     padding-bottom: var(--dsa-spacing-12);
   }
 
   .button--large {
     font: var(--dsa-wc-button-font-large);
-    border-radius: var(--dsa-wc-button-border-radius);
     padding-top: var(--dsa-spacing-16);
     padding-bottom: var(--dsa-spacing-16);
   }
@@ -227,8 +224,7 @@ var file_upload_styles_default = css`
   /* Input */
   #file {
     position: absolute;
-    top: 0;
-    left: 0;
+    inset: 0;
     width: 100%;
     height: 100%;
     padding: 0;
@@ -294,7 +290,7 @@ var file_upload_styles_default = css`
   }
 
   .dropzone--dragover .dropzone__icon {
-    transform: translate(0px, -4px);
+    transform: translateY(-4px);
   }
 
   /* Active */
@@ -310,7 +306,7 @@ var file_upload_styles_default = css`
   }
 
   .form-control--large .dropzone--dragover .dropzone__icon {
-    transform: translate(0px, -6px);
+    transform: translateY(-6px);
   }
 
   /* Disabled */

package/dist/chunks/{chunk.WFACPRM5.js → chunk.K64V2XZO.js}

@@ -39,10 +39,14 @@ var DSARangeSlider = class extends ShoelaceElement {
     this.updateSliderBackground(this.fromSlider, this.toSlider);
     this.setToSliderThumbInReach();
   }
+  getRangeDistance() {
+    const rangeDistance = Number(this.max) - Number(this.min);
+    return rangeDistance === 0 ? 1 : rangeDistance;
+  }
   updateSliderBackground(from, to) {
     const sliderColor = "var(--dsa-wc-range-slider-background)";
     const rangeColor = this.disabled ? "var(--dsa-wc-range-slider-disabled-background)" : "var(--dsa-wc-range-slider-selected-background)";
-    const rangeDistance = Number(this.max) - Number(this.min);
+    const rangeDistance = this.getRangeDistance();
     const fromPosition = (Number(from.value) - Number(this.min)) / rangeDistance * 100;
     const toPosition = (Number(to.value) - Number(this.min)) / rangeDistance * 100;
     to.style.background = `linear-gradient(

package/dist/chunks/{chunk.WAEFCPAX.js → chunk.KC2ZHNPC.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.CKEB7DWU.js";
+} from "./chunk.T43D4ETK.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";