@designsystem-se/af 38.0.1-beta.2 → 38.1.0

package/components/digi-form-file-upload.js

@@ -125,6 +125,7 @@ const FormFileUpload = /*@__PURE__*/ proxyCustomElement(class FormFileUpload ext
      * @en Import array with files without triggering upload event. A file object needs to contain an id, status and the file itself.
      */
     async afMImportFiles(files) {
+        this.resetErrors();
         if (files && files.length > 0) {
             for (const importedFile of files) {
                 this.validateFile(importedFile);
@@ -139,6 +140,14 @@ const FormFileUpload = /*@__PURE__*/ proxyCustomElement(class FormFileUpload ext
     async afMGetFormControlElement() {
         return this._input;
     }
+    /**
+     * Rensar komponentens fillista och eventuella felmeddelanden.
+     * @en Clears the component's file list and any error messages.
+     */
+    async afMClearFiles() {
+        this.files = [];
+        this.resetErrors();
+    }
     /**
      * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
      * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
@@ -186,7 +195,11 @@ const FormFileUpload = /*@__PURE__*/ proxyCustomElement(class FormFileUpload ext
         let exist = false;
         if (this.files.length > 0) {
             this.files.forEach((file) => {
-                if (file.name === fileToCheck.name) {
+                if (file['id'] === fileToCheck['id']) {
+                    exist = true;
+                    return;
+                }
+                else if (file.name === fileToCheck.name) {
                     exist = true;
                 }
             });
@@ -570,22 +583,22 @@ const FormFileUpload = /*@__PURE__*/ proxyCustomElement(class FormFileUpload ext
             } }, this.renderFiles())));
     }
     render() {
-        return (h(Fragment, { key: '1104991979216e10bd2e137de392134a9dd970f3' }, h("digi-util-breakpoint-observer", { key: '645a8f2849a39c068b77fa7c6ddfd726e834b3b2', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: 'c6b2785961f0e0b0cb2b2ccb7da42d663b9e9e3b', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: 'd51e788ee53461e075b0f73b600608646c70032f', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: '9df4b7deaca899f1c06bf615065a2fce7eea4bc0', class: {
+        return (h(Fragment, { key: 'bec280d44d534a720927ab737b34335600c3fe80' }, h("digi-util-breakpoint-observer", { key: '93983b718eda1869ff95f7a0abe8c6704395a1e0', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: '23f30473aa0dd681c6c4ea20138d3f13391bb070', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: 'c42a873187b3bf30ddfdb71561d6902a8b2f98fe', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: 'db1082e11bafb320c13a790d639d37ca821617ac', class: {
                 'digi-form-file-upload__upload-area': true,
                 'digi-form-file-upload__upload-area--hover': this.fileHover
             }, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), onDragEnter: (e) => this.handleOnDragEnterLeave(e), onDragLeave: (e) => this.handleOnDragEnterLeave(e), onClick: (e) => this.handleInputClick(e) }, this.fileHover &&
-            this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: '8c35b4e2523db4f4f892d2f615caedb8bb3a9ebe', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: '096b05c159ce7722687cdc0b1a0ff4889a5485e2', class: "digi-form-file-upload__text-area" }, h("button", { key: '97504d954e2f3a0e76d99fb4d5049ddea108a32f', type: "button", id: this.afId + '-button', ref: (el) => {
+            this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: 'f58d5f61b5568263e9b60b255f47e6ef418c78e5', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: 'c58c52f7e2c8aa8d17fe510ef90435d488844237', class: "digi-form-file-upload__text-area" }, h("button", { key: '1bb7fa84e0778702d0e77008f7d468d560ac8e17', type: "button", id: this.afId + '-button', ref: (el) => {
                 this._uploadButton = el;
             }, onClick: (e) => this.handleInputClick(e), class: "digi-form-file-upload__button hidden_mobile", style: {
                 margin: '0'
-            } }, h("digi-icon-paperclip", { key: 'e47597d6988db6a71c22fb9ab4cfa877be4a48fa', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
+            } }, h("digi-icon-paperclip", { key: 'a84b67ad055682b1c1b013ec948af0935c35ed0c', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
             ? this.afUploadBtnText
-            : _t.form.file_choose), h("input", { key: 'b21162f7873e21a8b3ed2d286ef154b66b95c8ec', ref: (el) => {
+            : _t.form.file_choose), h("input", { key: 'd0babe3bcbc5d03f2436c0f4a7ee23a93ecb0474', ref: (el) => {
                 this._input = el;
-            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), h("span", { key: 'c8e448ef96e9d4f292ec88606526e06935192308' }, this.afVariation !== FormFileUploadVariation.SMALL &&
-            _t.form.file_dropzone))), h("p", { key: '8c6f1b6190eb4f87bbcd9d50f4c4929cdcf4c026', class: "visually-hidden", role: this.errorMessageIsAlert ? 'alert' : null, "aria-atomic": "true", ref: (el) => {
+            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), h("span", { key: '20a4158d0462ee2f871bddb57b9e168d356573ed' }, this.afVariation !== FormFileUploadVariation.SMALL &&
+            _t.form.file_dropzone))), h("p", { key: 'ade6d22fde218536ce42daff285a1605ac16bdb1', class: "visually-hidden", role: this.errorMessageIsAlert ? 'alert' : null, "aria-atomic": "true", ref: (el) => {
                 this._srTextContainer = el;
-            } }), (this.files.length > 0 || this.error) && (h("div", { key: '7faefe886463ce493824665375b3b4ab0aec5753', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
+            } }), (this.files.length > 0 || this.error) && (h("div", { key: '06044ba8e2a5d7e76374af1dfa479c891554ab45', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
     }
     get hostElement() { return this; }
     static get watchers() { return {
@@ -626,7 +639,8 @@ const FormFileUpload = /*@__PURE__*/ proxyCustomElement(class FormFileUpload ext
         "afMGetAllFiles": [64],
         "afMGetValidationState": [64],
         "afMImportFiles": [64],
-        "afMGetFormControlElement": [64]
+        "afMGetFormControlElement": [64],
+        "afMClearFiles": [64]
     }, [[0, "focus", "focusOnInput"]], {
         "afValidationText": ["afValidationTextChange"]
     }]);