@ds-autonomie/web-components 2.15.0 → 2.17.0

package/dist/chunks/{chunk.L56KKTTB.js → chunk.QZC7F7NX.js}

@@ -1,18 +1,27 @@
 import {
   file_upload_styles_default
-} from "./chunk.KOGIJSJ2.js";
+} from "./chunk.LFCY7UUJ.js";
+import {
+  collectMultipleDroppedFiles
+} from "./chunk.U5AV7YAS.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
+import {
+  DSAErrorText
+} from "./chunk.5NSAEDEE.js";
 import {
   renderFormElementErrors
 } from "./chunk.6QDM5FUA.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
 import {
   FormControlController
 } from "./chunk.DJLJEQST.js";
 import {
-  HasSlotController
-} from "./chunk.YIY5RM53.js";
+  DSAAlert
+} from "./chunk.M5X6QE4H.js";
 import {
   a11yWarning
 } from "./chunk.PWL7QCVG.js";
@@ -21,20 +30,23 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.QY3AIGLE.js";
+} from "./chunk.WHHYA5VY.js";
+import {
+  DSAIcon
+} from "./chunk.CKJJ4MSU.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
 import {
   ShoelaceElement
-} from "./chunk.SL3DN4BD.js";
+} from "./chunk.SVWU6JW4.js";
 import {
   __decorateClass
 } from "./chunk.N3L4GIUO.js";
 
 // src/components/file-upload/file-upload.ts
 import { html } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 var DSAFileUpload = class extends ShoelaceElement {
@@ -52,8 +64,11 @@ var DSAFileUpload = class extends ShoelaceElement {
       "description"
     );
     this.localize = new LocalizeController(this);
+    this.storedFiles = [];
+    this.internalError = "";
     this.size = "medium";
     this.label = "";
+    this.type = "button";
     this.buttonLabel = "";
     this.description = "";
     this.helpText = "";
@@ -90,13 +105,26 @@ var DSAFileUpload = class extends ShoelaceElement {
   }
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
-    return this.fileUploadInput.reportValidity();
+    const isValid = this.fileUploadInput.reportValidity();
+    if (!isValid) {
+      this.fileUploadButton.focus();
+    }
+    return isValid;
   }
   /** Sets a custom validation message. Pass an empty string to restore validity. */
   setCustomValidity(message) {
     this.fileUploadInput.setCustomValidity(message);
     this.formControlController.updateValidity();
   }
+  /** 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.value = this.fileUploadInput.value;
+    this.emit("dsa-file-upload", { detail: { files: this.storedFiles } });
+  }
   connectedCallback() {
     super.connectedCallback();
     const allFiles = this.getAllFileElements();
@@ -105,17 +133,12 @@ var DSAFileUpload = class extends ShoelaceElement {
   firstUpdated() {
     this.formControlController.updateValidity();
   }
-  handleClick() {
+  handleClick(event) {
+    event.stopPropagation();
     this.fileUploadInput.click();
   }
-  handleChange() {
-    var _a;
-    const addedFiles = Array.from((_a = this.fileUploadInput.files) != null ? _a : []);
-    this.emit("dsa-file-upload", { detail: { files: addedFiles } });
-    this.value = this.fileUploadInput.value;
-    this.formControlController.updateValidity();
-  }
   handleInvalid(event) {
+    this.internalError = "";
     this.formControlController.setValidity(false);
     this.formControlController.emitInvalidEvent(event);
   }
@@ -135,6 +158,124 @@ var DSAFileUpload = class extends ShoelaceElement {
   handleFocus() {
     this.emit("dsa-focus");
   }
+  addFiles(newFiles) {
+    this.internalError = "";
+    const filteredFiles = this.filterValidFiles(newFiles);
+    if (this.multiple) {
+      this.storedFiles = [...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.value = this.fileUploadInput.value;
+    this.formControlController.updateValidity();
+    this.emit("dsa-file-upload", { detail: { files: this.storedFiles } });
+  }
+  isAcceptedFileType(file) {
+    var _a;
+    if (!this.accept) return true;
+    const acceptedTypes = this.accept.split(",").map((type) => type.trim());
+    const fileType = file.type;
+    const fileExtension = `.${(_a = file.name.split(".").pop()) != null ? _a : ""}`;
+    return acceptedTypes.some((type) => {
+      if (type.startsWith(".")) {
+        return fileExtension === type;
+      } else if (type.endsWith("/*")) {
+        const mainType = type.split("/")[0];
+        return fileType.startsWith(mainType + "/");
+      } else {
+        return fileType === type;
+      }
+    });
+  }
+  isAcceptedFileSize(file) {
+    if (!this.fileSizeLimit) return true;
+    return file.size <= this.fileSizeLimit;
+  }
+  filterValidFiles(files) {
+    const invalidFormatFiles = [];
+    const invalidSizeFiles = [];
+    const filteredFiles = files.filter((file) => {
+      const isAcceptedFormat = this.isAcceptedFileType(file);
+      if (!isAcceptedFormat) {
+        invalidFormatFiles.push(file.name);
+      }
+      const isAcceptedSize = this.isAcceptedFileSize(file);
+      if (!isAcceptedSize) {
+        invalidSizeFiles.push(file.name);
+      }
+      return isAcceptedFormat && isAcceptedSize;
+    });
+    if (invalidFormatFiles.length > 0 || invalidSizeFiles.length > 0) {
+      const errorBlocks = [];
+      if (invalidFormatFiles.length > 0) {
+        errorBlocks.push(
+          html`${this.localize.term("fileTypeNotAccepted", invalidFormatFiles)}
+            <ul>
+              ${invalidFormatFiles.map((name) => html`<li>${name}</li>`)}
+            </ul>`
+        );
+      }
+      if (invalidSizeFiles.length > 0) {
+        errorBlocks.push(
+          html`${this.localize.term("fileSizeExceeded", invalidSizeFiles)}
+            <ul>
+              ${invalidSizeFiles.map((name) => html`<li>${name}</li>`)}
+            </ul>`
+        );
+      }
+      this.internalError = html`${errorBlocks}`;
+    }
+    return filteredFiles;
+  }
+  handleChange() {
+    var _a;
+    const addedFiles = Array.from((_a = this.fileUploadInput.files) != null ? _a : []);
+    this.addFiles(addedFiles);
+  }
+  async handleDrop(e) {
+    e.preventDefault();
+    this.dropzone.classList.remove("dropzone--dragover");
+    const dt = e.dataTransfer;
+    if (!dt) return;
+    const items = dt.items;
+    const hasFolders = [...items].some(
+      (item) => {
+        var _a;
+        return (_a = item.webkitGetAsEntry()) == null ? void 0 : _a.isDirectory;
+      }
+    );
+    if (!this.multiple) {
+      if (items.length > 1 || hasFolders) {
+        this.internalError = this.localize.term("onlySingleFileAllowed");
+        return;
+      } else {
+        const addedFiles = Array.from(dt.files);
+        this.addFiles(addedFiles);
+        return;
+      }
+    }
+    const files = await collectMultipleDroppedFiles(dt);
+    if (!files.length) return;
+    this.addFiles(files);
+  }
+  handleDropzoneDragover(e) {
+    var _a;
+    e.preventDefault();
+    const draggedItems = (_a = e.dataTransfer) == null ? void 0 : _a.items;
+    if (!draggedItems) return;
+    if (this.multiple || draggedItems.length === 1) {
+      this.dropzone.classList.add("dropzone--dragover");
+    }
+  }
+  handleDropzoneDragleave() {
+    this.dropzone.classList.remove("dropzone--dragover");
+  }
+  handleInternalErrorHide() {
+    this.internalError = "";
+  }
   getDescriptionIds() {
     let ids = [];
     if (this.error) ids = ["error-text"];
@@ -158,6 +299,51 @@ var DSAFileUpload = class extends ShoelaceElement {
   blur() {
     this.fileUploadButton.blur();
   }
+  renderButtonAndInput() {
+    let buttonSize = this.size;
+    if (this.type === "drop" && this.size !== "small") {
+      buttonSize = this.size === "medium" ? "small" : "medium";
+    }
+    return html`
+      <button
+        part="file-upload-button"
+        id="button"
+        type="button"
+        class=${classMap({
+      button: true,
+      "button--small": buttonSize === "small",
+      "button--medium": buttonSize === "medium",
+      "button--large": buttonSize === "large",
+      "button--disabled": this.disabled
+    })}
+        ?disabled=${this.disabled}
+        aria-required=${ifDefined(this.required ? "true" : void 0)}
+        aria-invalid=${ifDefined(this.error ? "true" : void 0)}
+        aria-describedby=${this.getDescriptionIds()}
+        @click=${this.handleClick}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+      >
+        <slot name="button-label">
+          ${this.buttonLabel || this.localize.term("fileSelect", this.directory, this.multiple)}
+        </slot>
+      </button>
+      <input
+        part="input"
+        id="file"
+        type="file"
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        accept=${ifDefinedAndNotEmpty(this.accept)}
+        tabindex="-1"
+        aria-hidden="true"
+        ?multiple=${this.multiple}
+        ?webkitdirectory=${ifDefined(this.directory)}
+        @change=${this.handleChange}
+        @invalid=${this.handleInvalid}
+      />
+    `;
+  }
   render() {
     const hasLabelSlot = this.hasSlotController.test("label");
     const hasHelpTextSlot = this.hasSlotController.test("help-text");
@@ -167,7 +353,7 @@ var DSAFileUpload = class extends ShoelaceElement {
     const hasDescription = this.description || hasDescriptionSlot;
     if (!hasLabel) {
       a11yWarning(
-        "<dsa-file-upload> require a label attribute or a label slot for accessibility"
+        "<dsa-file-upload> requires a label attribute or a label slot for accessibility"
       );
     }
     if (this.error && !this.errorMessage) {
@@ -187,7 +373,8 @@ var DSAFileUpload = class extends ShoelaceElement {
       "form-control--large": this.size === "large",
       "form-control--has-label": hasLabel,
       "form-control--has-description": hasDescription,
-      "form-control--has-help-text": hasHelpText
+      "form-control--has-help-text": hasHelpText,
+      "form-control--internal-error": this.internalError !== ""
     })}
       >
         <legend
@@ -207,46 +394,29 @@ var DSAFileUpload = class extends ShoelaceElement {
           >${this.description}</slot
         >
         <div class="form-control__field">
-          <div class="button-container">
-            <button
-              part="file-upload-button"
-              id="button"
-              type="button"
-              class=${classMap({
-      button: true,
-      "button--small": this.size === "small",
-      "button--medium": this.size === "medium",
-      "button--large": this.size === "large",
-      "button--disabled": this.disabled
-    })}
-              ?disabled=${this.disabled}
-              aria-required=${ifDefined(this.required ? "true" : void 0)}
-              aria-invalid=${ifDefined(this.error ? "true" : void 0)}
-              tabindex=${this.disabled ? "-1" : "0"}
-              aria-describedby=${this.getDescriptionIds()}
-              @click=${this.handleClick}
-              @blur=${this.handleBlur}
-              @focus=${this.handleFocus}
-            >
-              <slot name="button-label">
-                ${this.buttonLabel || this.localize.term("fileSelect", this.directory, this.multiple)}
-              </slot>
-            </button>
-            <input
-              part="input"
-              id="file"
-              type="file"
-              ?disabled=${this.disabled}
-              ?required=${this.required}
-              accept=${ifDefinedAndNotEmpty(this.accept)}
-              tabindex="-1"
-              aria-hidden="true"
-              ?multiple=${this.multiple}
-              ?webkitdirectory=${ifDefined(this.directory)}
-              @change=${this.handleChange}
-              @invalid=${this.handleInvalid}
-            />
-          </div>
+          ${this.type === "drop" ? html` <div
+                class="dropzone "
+                @drop=${this.handleDrop}
+                @dragover=${this.handleDropzoneDragover}
+                @dragleave=${this.handleDropzoneDragleave}
+                @click=${this.handleClick}
+              >
+                <div class="dropzone__icon-container">
+                  <dsa-icon
+                    library="system"
+                    name="file_upload"
+                    class="dropzone__icon"
+                  ></dsa-icon>
+                </div>
+                <p class="dropzone__text">
+                  ${this.localize.term("fileDropHere", this.multiple)}
+                </p>
+                <div class="button-container">
+                  ${this.renderButtonAndInput()}
+                </div>
+              </div>` : html` <div class="button-container">
+                ${this.renderButtonAndInput()}
+              </div>`}
         </div>
 
         <slot
@@ -258,6 +428,15 @@ var DSAFileUpload = class extends ShoelaceElement {
           ${this.helpText}
         </slot>
         ${this.error && !this.disabled ? renderFormElementErrors(this.errorMessage) : ""}
+        <dsa-alert
+          variant="danger"
+          ?open=${this.internalError !== ""}
+          class="internal-error"
+          closable
+          size=${this.size === "large" ? "medium" : "small"}
+          @dsa-after-hide=${this.handleInternalErrorHide}
+          >${this.internalError}</dsa-alert
+        >
         <ul id="slot_files" part="slot_files">
           <slot @slotchange=${this.handleDefaultSlotChange}> </slot>
         </ul>
@@ -266,6 +445,11 @@ var DSAFileUpload = class extends ShoelaceElement {
   }
 };
 DSAFileUpload.styles = file_upload_styles_default;
+DSAFileUpload.dependencies = {
+  "dsa-icon": DSAIcon,
+  "dsa-error-text": DSAErrorText,
+  "dsa-alert": DSAAlert
+};
 __decorateClass([
   query("#file")
 ], DSAFileUpload.prototype, "fileUploadInput", 2);
@@ -273,14 +457,20 @@ __decorateClass([
   query("#button")
 ], DSAFileUpload.prototype, "fileUploadButton", 2);
 __decorateClass([
-  query(".drop-container")
-], DSAFileUpload.prototype, "dropContainer", 2);
+  query(".dropzone")
+], DSAFileUpload.prototype, "dropzone", 2);
+__decorateClass([
+  state()
+], DSAFileUpload.prototype, "internalError", 2);
 __decorateClass([
   property()
 ], DSAFileUpload.prototype, "size", 2);
 __decorateClass([
   property()
 ], DSAFileUpload.prototype, "label", 2);
+__decorateClass([
+  property()
+], DSAFileUpload.prototype, "type", 2);
 __decorateClass([
   property({ attribute: "button-label" })
 ], DSAFileUpload.prototype, "buttonLabel", 2);
@@ -332,6 +522,9 @@ __decorateClass([
     }
   })
 ], DSAFileUpload.prototype, "errorMessage", 2);
+__decorateClass([
+  property({ type: Number, attribute: "file-size-limit" })
+], DSAFileUpload.prototype, "fileSizeLimit", 2);
 __decorateClass([
   watch("size")
 ], DSAFileUpload.prototype, "handleSizeChange", 1);

package/dist/chunks/{chunk.3XTO3LV5.js → chunk.R3CYFIJA.js}

@@ -11,7 +11,7 @@ var card_nav_item_styles_default = css`
     display: block;
     --card-nav-item-border-width: 1px;
     --card-nav-item-padding: 0.75rem 0.5rem 0.75rem 1rem;
-    --card-nav-item-font: var(--dsa-font-medium-bold);
+    --card-nav-item-font: var(--dsa-font-body-m-bold);
   }
 
   .card-nav-item {

package/dist/chunks/{chunk.SO4EEDCJ.js → chunk.RDHPV744.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   ShoelaceElement
-} from "./chunk.SL3DN4BD.js";
+} from "./chunk.SVWU6JW4.js";
 import {
   __decorateClass
 } from "./chunk.N3L4GIUO.js";

package/dist/chunks/{chunk.VHKZOCPL.js → chunk.RIJIUMG2.js}

@@ -1,6 +1,6 @@
 import {
   card_nav_styles_default
-} from "./chunk.LYW7WENA.js";
+} from "./chunk.TION6YCJ.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   ShoelaceElement
-} from "./chunk.SL3DN4BD.js";
+} from "./chunk.SVWU6JW4.js";
 import {
   __decorateClass
 } from "./chunk.N3L4GIUO.js";

package/dist/chunks/{chunk.RYPGPHI7.js → chunk.RPPERQYB.js}

@@ -1,12 +1,12 @@
 import {
   badge_styles_default
-} from "./chunk.Q6SKCUWC.js";
+} from "./chunk.2RZJMNNG.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
 import {
   ShoelaceElement
-} from "./chunk.SL3DN4BD.js";
+} from "./chunk.SVWU6JW4.js";
 import {
   __decorateClass
 } from "./chunk.N3L4GIUO.js";

package/dist/chunks/{chunk.FB47DS6G.js → chunk.RU7L7OSM.js}

@@ -40,15 +40,15 @@ var file_upload_item_styles_default = css`
     text-overflow: ellipsis;
     overflow: hidden;
     border-radius: var(--dsa-wc-button-border-radius);
-    font: var(--dsa-font-medium-normal);
+    font: var(--dsa-font-body-m-normal);
   }
 
   .file-item-container--small [part~='label'] {
-    font: var(--dsa-font-small-normal);
+    font: var(--dsa-font-body-s-normal);
   }
 
   .file-item-container--large [part~='label'] {
-    font: var(--dsa-font-large-normal);
+    font: var(--dsa-font-label-l-normal);
   }
 
   /* Error Text */
@@ -67,6 +67,7 @@ var file_upload_item_styles_default = css`
 
   /* Clear Button */
   [part~='clear-button'] {
+    position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -79,6 +80,12 @@ var file_upload_item_styles_default = css`
     cursor: pointer;
     margin-inline-start: var(--dsa-wc-input-margin-inline);
   }
+  [part~='clear-button']::after {
+    content: '';
+    position: absolute;
+    inset: 0px;
+    margin: -0.625rem;
+  }
 
   .file-item-container--small [part~='clear-button'] > dsa-icon {
     height: var(--dsa-wc-file-upload-clear-icon-small-size);
@@ -98,7 +105,7 @@ var file_upload_item_styles_default = css`
   /* Progress Indicator */
   .upload-indicator {
     display: none;
-    font: var(--dsa-font-medium-normal);
+    font: var(--dsa-font-body-m-normal);
     color: var(--dsa-color-text-on-base-secondary);
   }
 
@@ -107,11 +114,11 @@ var file_upload_item_styles_default = css`
   }
 
   .file-item-container--small .upload-indicator {
-    font: var(--dsa-font-small-normal);
+    font: var(--dsa-font-body-s-normal);
   }
 
   .file-item-container--large .upload-indicator {
-    font: var(--dsa-font-large-normal);
+    font: var(--dsa-font-label-l-normal);
   }
 
   .file-item-container--error .upload-indicator,

package/dist/chunks/{chunk.XMRIXYIV.js → chunk.RVUUZ3KA.js}

@@ -1,3 +1,6 @@
+import {
+  DSAErrorText
+} from "./chunk.5NSAEDEE.js";
 import {
   renderFormElementErrors
 } from "./chunk.6QDM5FUA.js";
@@ -9,7 +12,7 @@ import {
 } from "./chunk.PWL7QCVG.js";
 import {
   ShoelaceElement
-} from "./chunk.SL3DN4BD.js";
+} from "./chunk.SVWU6JW4.js";
 import {
   __decorateClass
 } from "./chunk.N3L4GIUO.js";
@@ -137,6 +140,9 @@ var FormControlLayout = class extends ShoelaceElement {
       `;
   }
 };
+FormControlLayout.dependencies = {
+  "dsa-error-text": DSAErrorText
+};
 __decorateClass([
   property()
 ], FormControlLayout.prototype, "title", 2);

package/dist/chunks/{chunk.MSDVGZFG.js → chunk.S5FAXONJ.js}

@@ -49,7 +49,7 @@ var fieldset_styles_default = css`
     --dsa-wc-internal-icon-button-padding: var(--dsa-spacing-2);
   }
   .fieldset__legend-subtitle {
-    font: var(--dsa-font-small-normal);
+    font: var(--dsa-font-body-s-normal);
   }
 
   .fieldset__content {

package/dist/chunks/{chunk.TKIRVUSQ.js → chunk.SLXERY4H.js}

@@ -1,18 +1,21 @@
-import {
-  button_styles_default
-} from "./chunk.BIM3HNFI.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
+import {
+  button_styles_default
+} from "./chunk.KZFOOKD2.js";
 import {
   a11yWarning
 } from "./chunk.PWL7QCVG.js";
+import {
+  DSAIcon
+} from "./chunk.CKJJ4MSU.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
 import {
   ShoelaceElement
-} from "./chunk.SL3DN4BD.js";
+} from "./chunk.SVWU6JW4.js";
 import {
   __decorateClass
 } from "./chunk.N3L4GIUO.js";
@@ -262,6 +265,7 @@ var FormToggleButton = class extends ShoelaceElement {
   }
 };
 FormToggleButton.styles = form_toggle_button_styles_default;
+FormToggleButton.dependencies = { "dsa-icon": DSAIcon };
 __decorateClass([
   query(".button")
 ], FormToggleButton.prototype, "button", 2);

package/dist/chunks/{chunk.ZBVZPKHH.js → chunk.SN5JW345.js}

@@ -1,11 +1,19 @@
 import {
   DSATableRow
-} from "./chunk.NOH4G7Z3.js";
+} from "./chunk.7S4HUOC7.js";
+import {
+  DSATableHeaderCell
+} from "./chunk.XDW2FM6B.js";
 import {
   table_header_row_styles_default
 } from "./chunk.GI3JNOHH.js";
 import {
-  __decorateClass
+  DSAVisuallyHidden
+} from "./chunk.JIN6PGAK.js";
+import {
+  __decorateClass,
+  __spreadProps,
+  __spreadValues
 } from "./chunk.N3L4GIUO.js";
 
 // src/components/table-header-row/table-header-row.ts
@@ -52,6 +60,10 @@ var DSATableHeaderRow = class extends DSATableRow {
   }
 };
 DSATableHeaderRow.styles = table_header_row_styles_default;
+DSATableHeaderRow.dependencies = __spreadProps(__spreadValues({}, DSATableRow.dependencies), {
+  "dsa-table-header-cell": DSATableHeaderCell,
+  "dsa-visually-hidden": DSAVisuallyHidden
+});
 __decorateClass([
   query(".checkbox")
 ], DSATableHeaderRow.prototype, "selectAllCheckbox", 2);