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

package/hydrate/index.js

@@ -21122,6 +21122,7 @@ class FormFileUpload {
      * @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);
@@ -21136,6 +21137,14 @@ class FormFileUpload {
     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.
@@ -21183,7 +21192,11 @@ class FormFileUpload {
         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;
                 }
             });
@@ -21567,22 +21580,22 @@ class FormFileUpload {
             } }, this.renderFiles())));
     }
     render() {
-        return (hAsync(Fragment, { key: '1104991979216e10bd2e137de392134a9dd970f3' }, hAsync("digi-util-breakpoint-observer", { key: '645a8f2849a39c068b77fa7c6ddfd726e834b3b2', onAfOnChange: (e) => this.breakpointHandler(e) }), hAsync("div", { key: 'c6b2785961f0e0b0cb2b2ccb7da42d663b9e9e3b', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, hAsync("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 }), hAsync("div", { key: '9df4b7deaca899f1c06bf615065a2fce7eea4bc0', class: {
+        return (hAsync(Fragment, { key: 'bec280d44d534a720927ab737b34335600c3fe80' }, hAsync("digi-util-breakpoint-observer", { key: '93983b718eda1869ff95f7a0abe8c6704395a1e0', onAfOnChange: (e) => this.breakpointHandler(e) }), hAsync("div", { key: '23f30473aa0dd681c6c4ea20138d3f13391bb070', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, hAsync("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 }), hAsync("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 && (hAsync("div", { key: '8c35b4e2523db4f4f892d2f615caedb8bb3a9ebe', class: "digi-form-file-upload__upload-area-overlay" })), hAsync("div", { key: '096b05c159ce7722687cdc0b1a0ff4889a5485e2', class: "digi-form-file-upload__text-area" }, hAsync("button", { key: '97504d954e2f3a0e76d99fb4d5049ddea108a32f', type: "button", id: this.afId + '-button', ref: (el) => {
+            this.afVariation != FormFileUploadVariation.SMALL && (hAsync("div", { key: 'f58d5f61b5568263e9b60b255f47e6ef418c78e5', class: "digi-form-file-upload__upload-area-overlay" })), hAsync("div", { key: 'c58c52f7e2c8aa8d17fe510ef90435d488844237', class: "digi-form-file-upload__text-area" }, hAsync("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'
-            } }, hAsync("digi-icon-paperclip", { key: 'e47597d6988db6a71c22fb9ab4cfa877be4a48fa', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
+            } }, hAsync("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), hAsync("input", { key: 'b21162f7873e21a8b3ed2d286ef154b66b95c8ec', ref: (el) => {
+            : _t.form.file_choose), hAsync("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" }), hAsync("span", { key: 'c8e448ef96e9d4f292ec88606526e06935192308' }, this.afVariation !== FormFileUploadVariation.SMALL &&
-            _t.form.file_dropzone))), hAsync("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" }), hAsync("span", { key: '20a4158d0462ee2f871bddb57b9e168d356573ed' }, this.afVariation !== FormFileUploadVariation.SMALL &&
+            _t.form.file_dropzone))), hAsync("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) && (hAsync("div", { key: '7faefe886463ce493824665375b3b4ab0aec5753', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
+            } }), (this.files.length > 0 || this.error) && (hAsync("div", { key: '06044ba8e2a5d7e76374af1dfa479c891554ab45', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -21626,7 +21639,8 @@ class FormFileUpload {
             "afMGetAllFiles": [64],
             "afMGetValidationState": [64],
             "afMImportFiles": [64],
-            "afMGetFormControlElement": [64]
+            "afMGetFormControlElement": [64],
+            "afMClearFiles": [64]
         },
         "$listeners$": [[0, "focus", "focusOnInput"]],
         "$lazyBundleId$": "-",

package/hydrate/index.mjs

@@ -21118,6 +21118,7 @@ class FormFileUpload {
      * @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);
@@ -21132,6 +21133,14 @@ class FormFileUpload {
     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.
@@ -21179,7 +21188,11 @@ class FormFileUpload {
         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;
                 }
             });
@@ -21563,22 +21576,22 @@ class FormFileUpload {
             } }, this.renderFiles())));
     }
     render() {
-        return (hAsync(Fragment, { key: '1104991979216e10bd2e137de392134a9dd970f3' }, hAsync("digi-util-breakpoint-observer", { key: '645a8f2849a39c068b77fa7c6ddfd726e834b3b2', onAfOnChange: (e) => this.breakpointHandler(e) }), hAsync("div", { key: 'c6b2785961f0e0b0cb2b2ccb7da42d663b9e9e3b', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, hAsync("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 }), hAsync("div", { key: '9df4b7deaca899f1c06bf615065a2fce7eea4bc0', class: {
+        return (hAsync(Fragment, { key: 'bec280d44d534a720927ab737b34335600c3fe80' }, hAsync("digi-util-breakpoint-observer", { key: '93983b718eda1869ff95f7a0abe8c6704395a1e0', onAfOnChange: (e) => this.breakpointHandler(e) }), hAsync("div", { key: '23f30473aa0dd681c6c4ea20138d3f13391bb070', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, hAsync("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 }), hAsync("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 && (hAsync("div", { key: '8c35b4e2523db4f4f892d2f615caedb8bb3a9ebe', class: "digi-form-file-upload__upload-area-overlay" })), hAsync("div", { key: '096b05c159ce7722687cdc0b1a0ff4889a5485e2', class: "digi-form-file-upload__text-area" }, hAsync("button", { key: '97504d954e2f3a0e76d99fb4d5049ddea108a32f', type: "button", id: this.afId + '-button', ref: (el) => {
+            this.afVariation != FormFileUploadVariation.SMALL && (hAsync("div", { key: 'f58d5f61b5568263e9b60b255f47e6ef418c78e5', class: "digi-form-file-upload__upload-area-overlay" })), hAsync("div", { key: 'c58c52f7e2c8aa8d17fe510ef90435d488844237', class: "digi-form-file-upload__text-area" }, hAsync("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'
-            } }, hAsync("digi-icon-paperclip", { key: 'e47597d6988db6a71c22fb9ab4cfa877be4a48fa', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
+            } }, hAsync("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), hAsync("input", { key: 'b21162f7873e21a8b3ed2d286ef154b66b95c8ec', ref: (el) => {
+            : _t.form.file_choose), hAsync("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" }), hAsync("span", { key: 'c8e448ef96e9d4f292ec88606526e06935192308' }, this.afVariation !== FormFileUploadVariation.SMALL &&
-            _t.form.file_dropzone))), hAsync("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" }), hAsync("span", { key: '20a4158d0462ee2f871bddb57b9e168d356573ed' }, this.afVariation !== FormFileUploadVariation.SMALL &&
+            _t.form.file_dropzone))), hAsync("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) && (hAsync("div", { key: '7faefe886463ce493824665375b3b4ab0aec5753', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
+            } }), (this.files.length > 0 || this.error) && (hAsync("div", { key: '06044ba8e2a5d7e76374af1dfa479c891554ab45', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -21622,7 +21635,8 @@ class FormFileUpload {
             "afMGetAllFiles": [64],
             "afMGetValidationState": [64],
             "afMImportFiles": [64],
-            "afMGetFormControlElement": [64]
+            "afMGetFormControlElement": [64],
+            "afMClearFiles": [64]
         },
         "$listeners$": [[0, "focus", "focusOnInput"]],
         "$lazyBundleId$": "-",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designsystem-se/af",
   "author": "Arbetsförmedlingen",
-  "version": "38.0.1-beta.2",
+  "version": "38.1.0",
   "description": "Web Components for Digi Designsystem",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",

package/dist/digi-arbetsformedlingen/p-ba3c4861.entry.js

@@ -1 +0,0 @@
-import{r as i,c as o,h as e,F as r,g as d}from"./p-52e3bb32.js";import{_ as l}from"./p-903a27d9.js";import{r as a}from"./p-ffe5c0e8.js";import{b as n,a as t,F as f}from"./p-905ccb30.js";import{U as s}from"./p-cdcaf0eb.js";import{F as g}from"./p-7933b555.js";const m=class{constructor(e){i(this,e),this.afOnUploadFile=o(this,"afOnUploadFile",7),this.afOnRemoveFile=o(this,"afOnRemoveFile",7),this.afOnCancelFile=o(this,"afOnCancelFile",7),this.afOnReady=o(this,"afOnReady",3),this.afShowModal=o(this,"afShowModal",7),this.toBase64=i=>new Promise(((o,e)=>{const r=new FileReader;r.readAsDataURL(i),r.onload=()=>{const i=r.result.toString().replace(/^data:(.*,)?/,"");o(i)},r.onerror=i=>e(i)})),this._input=void 0,this._fileList=void 0,this._uploadButton=void 0,this._srTextContainer=void 0,this.files=[],this.error=!1,this.errorMessages=[],this.fileHover=!1,this.afLabel=l.form.file_upload,this.afLabelDescription=void 0,this.afVariation=n.SMALL,this.afId=a("digi-form-file-upload"),this.afFileTypes=void 0,this.afFileMaxSize=10,this.afMaxFiles=void 0,this.afName=void 0,this.afUploadBtnText=void 0,this.afRequired=void 0,this.afRequiredText=void 0,this.afAnnounceIfOptional=!1,this.afHeadingFiles=l.form.file_uploaded_files,this.afAnnounceIfOptionalText=void 0,this.afFileMaxSizeText=void 0,this.afShowThumbnail=!1,this.afEnablePreview=!1,this.afValidationText=void 0,this.afValidation=t.DISABLED,this.afHeadingLevel=f.H2,this.afErrorMessageIsAlert=!0}afValidationTextChange(){this.setValidationText()}get errorMessageIsAlert(){return!1!==this.afErrorMessageIsAlert&&"false"!==this.afErrorMessageIsAlert}breakpointHandler(i){i.detail.value&&(this.afVariation=i.detail.value===s.SMALL?n.SMALL:this.aforiginalVariation)}async afMValidateFile(i){if(this.fileExistInFiles(i))if(this.removeFileFromList(i.id),"error"!==i.status){const o=new File([i],i.name,{type:i.type});o.id=i.id,o.status=i.status,o.base64=await this.toBase64(i),this.files=[...this.files,o]}else this.validateFile(i)}async afMGetAllFiles(){return this.files}async afMGetValidationState(){return{isValid:!this.error,errorMessages:this.errorMessages}}async afMImportFiles(i){if(i&&i.length>0)for(const o of i)this.validateFile(o);const o=0===this.errorMessages.length?i:this.getFilesThatAreOK(i);0!==o.length&&(this.files=this.files.concat(o))}async afMGetFormControlElement(){return this._input}focusOnInput(){this._input.focus()}componentWillLoad(){this.aforiginalVariation=this.afVariation}componentDidLoad(){this.hostElement.setAttribute("tabindex","-1"),this.afOnReady.emit(),this.setValidationText()}get fileMaxSize(){return 1048576*this.afFileMaxSize}setValidationText(){if(this.afValidationText&&this.afValidationText.length>0){let i=!1;this.errorMessages.length>0&&this.errorMessages.forEach((o=>{o.message===this.afValidationText&&(i=!0)})),i||this.errorMessages.push({fileName:"",message:this.afValidationText}),this.error=!0}else this.resetErrors()}fileExistInFiles(i){let o=!1;return this.files.length>0&&this.files.forEach((e=>{e.name===i.name&&(o=!0)})),o}checkAcceptedTypes(i){const o=this.afFileTypes.replace(/\s/g,"").split(","),e=i.type,r=i.name.split(".").slice(-1).map((i=>"."+i.toLowerCase())).toString();return o.some((i=>i.includes("/*")?i.split("/").slice(0,1).toString()==e.split("/").slice(0,1).toString():i===e||i===r||"*"===i))}resetErrors(i=!1){this.error=!1,this._srTextContainer.textContent="",this.errorMessages=[],i&&setTimeout((()=>{this._uploadButton.focus()}),100)}addErrorMessage(i,o){this.errorMessages.push({fileName:i,message:o})}validateFileStatus(i){i.status&&i.status===g.ERROR&&this.addErrorMessage(i.name,i.error?i.error:l.form.file_error_unknown_error)}validateMaxSize(i){if(i.size>this.fileMaxSize){const o=this.afFileMaxSizeText?this.afFileMaxSizeText:l.form.file_error_too_large(i.name,this.afFileMaxSize);this.addErrorMessage(i.name,o)}}validateFileType(i){this.checkAcceptedTypes(i)||this.addErrorMessage(i.name,l.form.file_error_filetype_not_allowed(i.name,this.afFileTypes))}validateFile(i){this.validateIfFileIsAlreadyUploaded(i),this.validateFileStatus(i),this.validateMaxSize(i),this.validateFileType(i),this.error=this.errorMessages.length>0}onCancelFileHandler(i,o){i.preventDefault();const e=this.removeFileFromList(o);e.status="error",e.error=l.form.file_upload_canceled,this.afOnCancelFile.emit(e)}removeFileFromList(i){const o=this.getIndexOfFile(i);if(-1===o)return;const e=this.files[o];return this.files=[...this.files.slice(0,o),...this.files.slice(o+1)],e}getIndexOfFile(i){return this.files.findIndex((o=>o.id==i))}getFilesThatAreOK(i){const o=[];return i.forEach((i=>{let e=!0;this.errorMessages.forEach((o=>{o.fileName===i.name&&(e=!1)})),e&&o.push(i)})),o}validateIfFileIsAlreadyUploaded(i){for(const o of this.files)o.name===i.name&&this.addErrorMessage(i.name,l.form.file_error_exists(i.name))}handleFiles(i){var o,e;this.resetErrors();const r=i.dataTransfer?null===(o=i.dataTransfer)||void 0===o?void 0:o.files:null===(e=i.target)||void 0===e?void 0:e.files,d=[];if(Array.from(r).forEach((i=>{d.push(i)})),!d||0===d.length)return;if(d.length+this.files.length>this.afMaxFiles)return this.addErrorMessage("",l.form.file_error_too_many),void(this.error=!0);d.forEach((i=>{this.validateFile(i)}));const a=0===this.errorMessages.length?d:this.getFilesThatAreOK(d);if(0===a.length)return;const n=new FormData;a.forEach((i=>{n.append("file",i)}));for(const i of n.entries())this.addFileStatusAndEmitFiles(i[1]);this._input.value=""}onButtonUploadFileHandler(i){i.preventDefault(),i.target.files&&this.handleFiles(i)}onRemoveFileHandler(i,o){i.preventDefault(),this.resetErrors();const e=this.removeFileFromList(o);this.afOnRemoveFile.emit(e),this._input.value="",this.handleFocusAfterFileRemoved()}handleFocusAfterFileRemoved(){setTimeout((()=>{this.files.length>0?this._fileList.focus():this._uploadButton.focus()}),100)}emitFile(i){const o=this.getIndexOfFile(i.id);this.afValidation===t.ENABLED||(this.files[o].status="OK"),this.afOnUploadFile.emit(this.files[o])}async addFileStatusAndEmitFiles(i){i.id=a("file"),i.status="pending",i.base64=await this.toBase64(i),this.files=[...this.files,i],this.emitFile(i)}handleDrop(i){i.stopPropagation(),i.preventDefault(),this.fileHover=!1,i.dataTransfer.files&&this.handleFiles(i)}handleAllowDrop(i){this.afVariation!==n.SMALL&&(i.stopPropagation(),i.preventDefault())}handleOnDragEnterLeave(i){this.handleAllowDrop(i),this.fileHover=!this.fileHover}handleInputClick(i){i.stopPropagation(),this.afShowModal.emit(),this._input.click()}getFiletypeAndShortFileName(i){let o=null,e=i.name;const r=e.split(".").pop(),d=e.replace("."+r,""),l=window.innerWidth<769?6:e.length,a=window.innerWidth<769?14:e.length;return o="image"===String(i.type).split("/")[0]?"image":"pdf"===String(i.type).split("/")[1]?"pdf":"default",e=e.length>l?d.substring(0,l)+"..."+r:e.length>a?d.substring(0,6)+"..."+r:i.name,{type:o,name:e}}async viewUploadedFile(i,o){if(i.preventDefault(),"image"===this.getFiletypeAndShortFileName(o).type){const i=window.open();i.document.write(`<img src="data:${o.type};base64,${o.base64}" alt="${o.name}" />`),i.document.title=o.name}else if("pdf"===this.getFiletypeAndShortFileName(o).type)(async()=>{const i=await fetch(`data:application/pdf;base64,${o.base64}`),e=await i.blob(),r=new Blob([e],{type:"application/pdf"}),d=URL.createObjectURL(r);setTimeout((()=>{window.open(d,"_blank")}),30)})();else{const i=URL.createObjectURL(o),e=document.createElement("a");e.href=i,e.target="_blank",e.download=o.name,e.click()}}get cssModifiers(){return{"digi-form-file-upload--small":"small"==this.afVariation,"digi-form-file-upload--medium":"medium"==this.afVariation,"digi-form-file-upload--large":"large"==this.afVariation,"digi-form-file-upload--has-errors":this.errorMessages.length>0}}renderErrorMessage(){if(this.error)return this.readErrorMessagesToAssistiveTechnologies(),e("div",{class:"digi-form-file-upload__error-list-container "+(this.files.length>0?"with-files":"")},e("ul",{class:"digi-form-file-upload__error-list","aria-hidden":"true"},this.renderErrorMessages()),e("button",{type:"button","aria-label":l.form.file_upload_reset_errors_aria_label,class:"digi-form-file-upload__button clear-button hidden-mobile",onClick:()=>{this.resetErrors(!0)}},e("span",null,l.form.file_upload_reset_errors)),e("button",{type:"button",onClick:()=>{this.resetErrors(!0)},class:"digi-form-file-upload__button clear-button hidden-desktop","aria-label":l.form.file_upload_reset_errors_aria_label},e("digi-icon-x-button-outline",{class:"digi-form-file-upload__button-icon clear-icon","aria-hidden":"true"})))}readErrorMessagesToAssistiveTechnologies(){this._srTextContainer.textContent="";const i=this.errorMessages.map((i=>i.message+" "));setTimeout((()=>{this._srTextContainer.textContent=i.toString()}),200)}renderErrorMessages(){return this.errorMessages.map((i=>e("li",null,e("digi-form-validation-message",{id:"digi-form-file-upload__error",class:"digi-form-file-upload__error","af-variation":"error"},i.message))))}renderPendingFile(i){return e("div",{class:"digi-form-file-upload__item-pending-container"},e("span",{class:"info-wrapper"},e("digi-icon-spinner",{class:"digi-form-file-upload__spinner"}),e("span",{style:{margin:"0"}},l.form.file_upload_progress," ",e("span",{class:"hidden-mobile"},"|")),e("p",{class:"digi-form-file-upload__item-name-pending hidden-mobile"},this.getFiletypeAndShortFileName(i).name)),e("span",{class:"button-wrapper"},e("button",{type:"button",onClick:o=>this.onCancelFileHandler(o,i.id),class:"digi-form-file-upload__button digi-form-file-upload__button-abort hidden-mobile","aria-label":l.form.file_cancel_upload_long(i.name)},l.form.file_cancel_upload),e("button",{type:"button",onClick:o=>this.onCancelFileHandler(o,i.id),class:"digi-form-file-upload__button hidden-desktop","aria-label":l.form.file_cancel_upload_long(i.name)},e("digi-icon-x-button-outline",{class:"digi-form-file-upload__button-icon","aria-hidden":"true"}))))}renderImageThumbnail(i){return this.afShowThumbnail?e("figure",{class:"digi-form-file-upload__item-text-container-figure",style:{margin:"0"}},e("img",{"aria-hidden":"true",class:"thumbnail",src:`data:${i.type};base64,${i.base64}`}),e("figcaption",{class:"visually-hidden"},"Miniatyr av ",i.name)):this.renderCheckmark()}renderCheckmark(){return e("span",{class:"digi-form-file-upload__item-green-check"},e("digi-icon-check-circle-solid",null))}renderPDFThumbnail(i){return this.afShowThumbnail?e("span",{class:`${this.afShowThumbnail?"digi-form-file-upload__item-pdf-preview-bis":null}`,"aria-label":i.name},e("svg",{style:{scale:"1"},width:"23.76",height:"32",xmlns:"http://www.w3.org/2000/svg"},e("path",{d:"M22.888 6.124 17.696.88A2.955 2.955 0 0 0 15.6 0H2.97C1.33.006 0 1.35 0 3.006V29C0 30.657 1.33 32 2.97 32h17.82c1.64 0 2.97-1.343 2.97-3V8.249a3.03 3.03 0 0 0-.872-2.124Zm-2.34 1.88H15.84V3.25l4.709 4.756ZM2.97 29.002V3.006h9.9v6.498c0 .831.662 1.5 1.485 1.5h6.435v17.997H2.97Zm15.481-8.98c-.755-.75-2.908-.544-3.985-.406-1.064-.656-1.775-1.562-2.277-2.893.242-1.006.625-2.537.335-3.5-.26-1.637-2.34-1.474-2.636-.368-.273 1.006-.025 2.406.433 4.193-.619 1.493-1.54 3.499-2.19 4.649-1.238.643-2.909 1.637-3.156 2.887-.204.987 1.609 3.449 4.708-1.95 1.386-.462 2.896-1.031 4.233-1.256 1.17.637 2.537 1.062 3.452 1.062 1.578 0 1.733-1.762 1.083-2.418ZM6.194 24.883c.315-.856 1.516-1.844 1.88-2.187-1.175 1.893-1.88 2.23-1.88 2.187Zm5.049-11.91c.458 0 .414 2.005.111 2.549-.272-.869-.266-2.55-.111-2.55Zm-1.51 8.535c.6-1.056 1.114-2.312 1.528-3.418.514.944 1.17 1.7 1.863 2.219-1.287.268-2.407.818-3.391 1.2Zm8.143-.312s-.31.375-2.308-.488c2.172-.162 2.53.338 2.308.488Z",fill:"var(--digi--color--icon--cta)","fill-rule":"evenodd"}))):this.renderCheckmark()}renderThumbnail(i){switch(this.getFiletypeAndShortFileName(i).type){case"pdf":return this.renderPDFThumbnail(i);case"image":return this.renderImageThumbnail(i);default:return this.renderCheckmark()}}renderFileName(i){return this.afEnablePreview?e("a",{class:"digi-form-file-upload__item-name",href:"#",onClick:o=>{this.viewUploadedFile(o,i)}},i.name):e("span",{class:"digi-form-file-upload__item-name"},i.name)}renderOKFile(i){return e(r,null,e("span",{class:"digi-form-file-upload__item-text-and-thumbnail-container"},this.renderThumbnail(i),this.renderFileName(i)),e("button",{type:"button",onClick:o=>this.onRemoveFileHandler(o,i.id),class:"digi-form-file-upload__button digi-form-file-upload__button--mobile","aria-label":l.form.file_remove(i.name)},e("span",{class:"hidden-mobile"},l.form.file_remove()),e("digi-icon-trash",{class:"digi-form-file-upload__button-icon hidden-desktop"})))}renderFile(i){return"pending"===i.status?this.renderPendingFile(i):this.renderOKFile(i)}renderFiles(){return this.files.map(((i,o)=>e("li",{class:"digi-form-file-upload__item-container",key:"file-"+o},e("div",{class:"digi-form-file-upload__item"},e("div",{class:"digi-form-file-upload__item-text-container"},this.renderFile(i))))))}renderFileContainer(){if(0!==this.files.length)return e(r,null,e(this.afHeadingLevel,{class:{"digi-form-file-upload__files-heading":!0,"digi-form-file-upload__files-heading--and-errors":this.error}},this.afHeadingFiles),e("ul",{class:"digi-form-file-upload__files-list",tabindex:-1,ref:i=>{this._fileList=i}},this.renderFiles()))}render(){return e(r,{key:"1104991979216e10bd2e137de392134a9dd970f3"},e("digi-util-breakpoint-observer",{key:"645a8f2849a39c068b77fa7c6ddfd726e834b3b2",onAfOnChange:i=>this.breakpointHandler(i)}),e("div",{key:"c6b2785961f0e0b0cb2b2ccb7da42d663b9e9e3b",class:Object.assign({"digi-form-file-upload":!0},this.cssModifiers)},e("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}),e("div",{key:"9df4b7deaca899f1c06bf615065a2fce7eea4bc0",class:{"digi-form-file-upload__upload-area":!0,"digi-form-file-upload__upload-area--hover":this.fileHover},onDrop:i=>this.handleDrop(i),onDragOver:i=>this.handleAllowDrop(i),onDragEnter:i=>this.handleOnDragEnterLeave(i),onDragLeave:i=>this.handleOnDragEnterLeave(i),onClick:i=>this.handleInputClick(i)},this.fileHover&&this.afVariation!=n.SMALL&&e("div",{key:"8c35b4e2523db4f4f892d2f615caedb8bb3a9ebe",class:"digi-form-file-upload__upload-area-overlay"}),e("div",{key:"096b05c159ce7722687cdc0b1a0ff4889a5485e2",class:"digi-form-file-upload__text-area"},e("button",{key:"97504d954e2f3a0e76d99fb4d5049ddea108a32f",type:"button",id:this.afId+"-button",ref:i=>{this._uploadButton=i},onClick:i=>this.handleInputClick(i),class:"digi-form-file-upload__button hidden_mobile",style:{margin:"0"}},e("digi-icon-paperclip",{key:"e47597d6988db6a71c22fb9ab4cfa877be4a48fa","aria-hidden":"true",class:"digi-form-file-upload__button-icon paper-clip",slot:"icon"}),this.afUploadBtnText?this.afUploadBtnText:l.form.file_choose),e("input",{key:"b21162f7873e21a8b3ed2d286ef154b66b95c8ec",ref:i=>{this._input=i},onChange:i=>this.onButtonUploadFileHandler(i),class:"digi-form-file-upload__input",multiple:!0,type:"file",id:this.afId,accept:this.afFileTypes,name:this.afName?this.afName:null,required:this.afRequired?this.afRequired:null,onDrop:i=>this.handleDrop(i),onDragOver:i=>this.handleAllowDrop(i),"aria-errormessage":"digi-form-file-upload__error","aria-describedBy":"digi-form-file-upload__error"}),e("span",{key:"c8e448ef96e9d4f292ec88606526e06935192308"},this.afVariation!==n.SMALL&&l.form.file_dropzone))),e("p",{key:"8c6f1b6190eb4f87bbcd9d50f4c4929cdcf4c026",class:"visually-hidden",role:this.errorMessageIsAlert?"alert":null,"aria-atomic":"true",ref:i=>{this._srTextContainer=i}}),(this.files.length>0||this.error)&&e("div",{key:"7faefe886463ce493824665375b3b4ab0aec5753",class:"digi-form-file-upload__files"},this.renderErrorMessage(),this.renderFileContainer())))}get hostElement(){return d(this)}static get watchers(){return{afValidationText:["afValidationTextChange"]}}};m.style=".sc-digi-form-file-upload-h {\n  --digi--form-file-upload--color--background--small--default: var(--digi--color--background--interactive--default--quaternary);\n  --digi--form-file-upload--color--background--small--hover: var(--digi--color--background--interactive--hover--secondary);\n  --digi--form-file-upload--color--background--medium--default: var(--digi--color--background--interactive--default--quaternary);\n  --digi--form-file-upload--color--background--medium--hover: var(--digi--color--background--interactive--hover--secondary);\n  --digi--form-file-upload--color--background--large--default: var(--digi--color--background--interactive--default--quaternary);\n  --digi--form-file-upload--color--background--large--hover: var(--digi--color--background--interactive--hover--secondary);\n  --digi--form-file-upload--color--border--small--default: var(--digi--color--border--interactive--default--on-input-nuance);\n  --digi--form-file-upload--color--border--small--hover: var(--digi--color--border--interactive--hover--primary);\n  --digi--form-file-upload--color--border--medium--default: var(--digi--color--border--interactive--default--on-input-nuance);\n  --digi--form-file-upload--color--border--medium--hover: var(--digi--color--border--interactive--hover--primary);\n  --digi--form-file-upload--color--border--large--default: var(--digi--color--border--interactive--default--on-input-nuance);\n  --digi--form-file-upload--color--border--large--hover: var(--digi--color--border--interactive--hover--primary);\n  --digi--form-file-upload--border-width--small--default: var(--digi--border-width--secondary);\n  --digi--form-file-upload--border-width--small--hover: var(--digi--border-width--primary);\n  --digi--form-file-upload--border-width--medium--default: var(--digi--border-width--secondary);\n  --digi--form-file-upload--border-width--medium--hover: var(--digi--border-width--primary);\n  --digi--form-file-upload--border-width--large--default: var(--digi--border-width--secondary);\n  --digi--form-file-upload--border-width--large--hover: var(--digi--border-width--primary);\n  --digi--form-file-upload--border-style--small--default: var(--digi--global--border-style--none);\n  --digi--form-file-upload--border-style--medium--default: var(--digi--global--border-style--dashed);\n  --digi--form-file-upload--border-style--large--default: var(--digi--global--border-style--dashed);\n  --digi--form-file-upload--border-radius--small--default: var(--digi--border-radius--secondary);\n  --digi--form-file-upload--border-radius--medium--default: var(--digi--border-radius--secondary);\n  --digi--form-file-upload--border-radius--large--default: var(--digi--border-radius--secondary);\n  --digi--form-file-upload--padding--small: var(--digi--gutter--medium) var(--digi--gutter--largest);\n  --digi--form-file-upload--padding--medium: var(--digi--gutter--medium) var(--digi--gutter--medium) var(--digi--global--spacing--largest-2) var(--digi--gutter--medium);\n  --digi--form-file-upload--padding--large: var(--digi--gutter--medium) var(--digi--gutter--medium) var(--digi--global--spacing--largest-2) var(--digi--gutter--medium);\n  --digi--form-file-upload--font-size--small: var(--digi--global--typography--font-size--small);\n  --digi--form-file-upload--font-size--medium: var(--digi--global--typography--font-size--base);\n  --digi--form-file-upload--font-size--large: var(--digi--global--typography--font-size--large);\n  --digi--form-file-upload--heading--font-family: var(--digi--global--typography--font-family--default);\n  --digi--form-file-upload--heading--font-weight: var(--digi--typography--heading-4--font-weight--desktop);\n  --digi--form-file-upload--heading--font-size: var(--digi--typography--heading-4--font-size--desktop);\n  --digi--form-file-upload--heading--font-size--large: var(--digi--typography--heading-4--font-size--desktop-large);\n  --digi--form-file-upload--font-family: var(--digi--global--typography--font-family--default);\n  --digi--form-file-upload--font-weight: var(--digi--typography--form-file-upload--font-weight--desktop);\n  --digi--form-file-upload--button-text--color--default: var(--digi--color--text--interactive--primary);\n  --digi--form-file-upload--button-text--color--hover: var(--digi--color--text--interactive--primary);\n  --digi--form-file-upload--padding--small--icon: var(--digi--global--spacing--smaller) var(--digi--global--spacing--smallest-2);\n  --digi--form-file-upload--padding--medium--icon: var(--digi--global--spacing--base) var(--digi--global--spacing--smallest-2);\n  --digi--form-file-upload--width--small: 132px;\n  --digi--form-file-upload--width--medium: 304px;\n  --digi--form-file-upload--width--large: inherit;\n  --digi--form-file-upload--border--error: var(--digi--global--border-style--solid) solid;\n  --digi--form-file-upload--border-color--error: var(--digi--color--border--interactive--validation--error);\n  --digi--form-file-upload--border--error--width: var(--digi--border-width--secondary);\n  --digi--form-file-upload--background--error: var(--digi--color--background--interactive--validation--error);\n  container-type: inline-size;\n  display: block;\n  width: 100%;\n}\n.sc-digi-form-file-upload-h a.sc-digi-form-file-upload {\n  font-weight: var(--digi--global--typography--font-weight--semibold);\n  color: var(--digi--color--text--interactive--primary);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload.sc-digi-form-file-upload {\n  font-family: var(--digi--global--typography--font-family--default);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload--small.sc-digi-form-file-upload {\n  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);\n  --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--small--default);\n  --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--small--hover);\n  --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--small--default);\n  --COLOR--BORDER--HOVER: var(--digi--form-file-upload--color--border--small--hover);\n  --BORDER-STYLE--DEFAULT: var(--digi--form-file-upload--border-style--small--default);\n  --BORDER-RADIUS--DEFAULT: var(--digi--form-file-upload--border-radius--small--default);\n  --BORDER-WIDTH--DEFAULT: var(--digi--form-file-upload--border-width--small--default);\n  --WIDTH: var(--digi--form-file-upload--width--small);\n  --FONT-WEIGHT: var(--digi--form-file-upload--font-weight);\n  --PADDING: var(--digi--form-file-upload--padding--small);\n  --ICON--PADDING: var(--digi--form-file-upload--padding--small--icon);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload--medium.sc-digi-form-file-upload {\n  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);\n  --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--medium--default);\n  --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--medium--hover);\n  --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--medium--default);\n  --COLOR--BORDER--HOVER: var(--digi--form-file-upload--color--border--medium--hover);\n  --BORDER-STYLE--DEFAULT: var(--digi--form-file-upload--border-style--medium--default);\n  --BORDER-RADIUS--DEFAULT: var(--digi--form-file-upload--border-radius--medium--default);\n  --BORDER-WIDTH--DEFAULT: var(--digi--form-file-upload--border-width--medium--default);\n  --WIDTH: var(--digi--form-file-upload--width--medium);\n  --FONT-WEIGHT: var(--digi--form-file-upload--font-weight);\n  --PADDING: var(--digi--form-file-upload--padding--medium);\n  --ICON--PADDING: var(--digi--form-file-upload--padding--medium--icon);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload--large.sc-digi-form-file-upload {\n  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);\n  --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--large--default);\n  --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--large--hover);\n  --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--large--default);\n  --COLOR--BORDER--HOVER: var(--digi--form-file-upload--color--border--large--hover);\n  --BORDER-STYLE--DEFAULT: var(--digi--form-file-upload--border-style--large--default);\n  --BORDER-RADIUS--DEFAULT: var(--digi--form-file-upload--border-radius--large--default);\n  --BORDER-WIDTH--DEFAULT: var(--digi--form-file-upload--border-width--large--default);\n  --WIDTH: var(--digi--form-file-upload--width--large);\n  --FONT-WEIGHT: var(--digi--form-file-upload--font-weight);\n  --PADDING: var(--digi--form-file-upload--padding--large);\n  --ICON--PADDING: var(--digi--form-file-upload--padding--medium--icon);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload--has-errors.sc-digi-form-file-upload {\n  --BORDER-STYLE--DEFAULT: var(--digi--form-file-upload--border--error);\n  --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--border-color--error);\n  --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--border-color--error);\n  --BORDER-WIDTH--DEFAULT: var(--digi--form-file-upload--border--error--width);\n  --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--background--error);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__spinner.sc-digi-form-file-upload {\n  margin-right: 0.5rem;\n  animation: animation__rotation 3s infinite linear;\n  transform-origin: center;\n  --digi--icon--height: 1rem;\n}\n@media (prefers-reduced-motion) {\n  .sc-digi-form-file-upload-h .digi-form-file-upload__spinner.sc-digi-form-file-upload {\n    animation: none;\n  }\n}\n@keyframes animation__rotation {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(359deg);\n  }\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__input.sc-digi-form-file-upload {\n  display: none;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload {\n  margin: 0 0 auto 0.5rem;\n  text-align: center;\n  white-space: nowrap;\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-weight: var(--digi--typography--button--font-weight--desktop);\n  font-size: var(--digi--typography--body--font-size--desktop);\n  color: var(--digi--form-file-upload--button-text--color--default);\n  display: flex;\n  align-items: center;\n  font-family: var(--digi--global--typography--font-family--default);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:hover {\n  color: var(--digi--form-file-upload--button-text--color--hover);\n  text-decoration: underline;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:hover .digi-form-file-upload__button-icon.sc-digi-form-file-upload {\n  --digi--icon--color: var(--digi--form-file-upload--button-text--color--hover);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:focus-visible {\n  outline: 2px solid black;\n  outline-offset: 2px;\n  box-shadow: 0px 0px 0px 5px white;\n  text-decoration: underline;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button-icon.sc-digi-form-file-upload {\n  --digi--icon--height: 1.25rem;\n  --digi--icon--width: 1.25rem;\n  --digi--icon--color: var(--digi--color--text--interactive--primary);\n  margin-left: 5px;\n  padding: var(--ICON--PADDING);\n  padding-right: 0;\n  padding-left: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button-icon.sc-digi-form-file-upload:hover {\n  --digi--icon--color: var(--digi--form-file-upload--button-text--color--hover);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area.sc-digi-form-file-upload {\n  border-color: var(--COLOR--BORDER--DEFAULT);\n  border-radius: var(--BORDER-RADIUS--DEFAULT);\n  border-width: var(--BORDER-WIDTH--DEFAULT);\n  border-style: var(--BORDER-STYLE--DEFAULT);\n  max-width: var(--WIDTH);\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--COLOR--BACKGROUND--DEFAULT);\n  align-items: center;\n  padding: var(--PADDING);\n  margin-bottom: var(--digi--gutter--medium);\n  margin-top: var(--digi--gutter--button-block-small);\n  position: relative;\n  cursor: pointer;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area--hover.sc-digi-form-file-upload {\n  border-color: var(--COLOR--BORDER--HOVER);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area-overlay.sc-digi-form-file-upload {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background-color: var(--COLOR--BACKGROUND--HOVER);\n  opacity: 0.1;\n  top: 0;\n  left: 0;\n  z-index: 10;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__text-area.sc-digi-form-file-upload {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__text-area.sc-digi-form-file-upload .paper-clip.sc-digi-form-file-upload {\n  padding-right: 0.5rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__files-list.sc-digi-form-file-upload {\n  max-width: none;\n  padding: 0;\n  margin: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__files.sc-digi-form-file-upload {\n  border-radius: var(--BORDER-RADIUS--DEFAULT);\n  max-width: 100%;\n  width: 100%;\n  box-sizing: border-box;\n  background-color: var(--COLOR--BACKGROUND--FILE-LIST);\n  padding: var(--digi--gutter--largest-2) var(--digi--padding--large);\n  margin-bottom: var(--digi--gutter--medium);\n  margin-top: var(--digi--gutter--medium);\n  padding-bottom: var(--digi--padding--smaller);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__files-heading.sc-digi-form-file-upload {\n  font-family: var(--digi--form-file-upload--heading--font-family);\n  font-size: var(--digi--typography--label--font-size--desktop);\n  font-weight: var(--digi--form-file-upload--heading--font-weight);\n  color: var(--digi--color--text--primary);\n  margin: var(--digi--margin--small) 0 var(--digi--margin--medium) 0;\n  display: block;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__files-heading--and-errors.sc-digi-form-file-upload {\n  margin-top: var(--digi--margin--largest);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload {\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: 0.75rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.with-files.sc-digi-form-file-upload {\n  border-bottom: var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--primary);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload .clear-button.sc-digi-form-file-upload {\n  max-height: 1.5rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload .clear-button.sc-digi-form-file-upload .clear-icon.sc-digi-form-file-upload {\n  padding-right: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload {\n  margin: 0;\n  padding: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload li.sc-digi-form-file-upload {\n  list-style: none;\n  margin-bottom: 0.75rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload li.sc-digi-form-file-upload:last-of-type {\n  margin-bottom: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item.sc-digi-form-file-upload {\n  margin: var(--digi--margin--small) 0;\n  margin-bottom: var(--digi--margin--medium);\n  width: 100%;\n  box-sizing: border-box;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-container.sc-digi-form-file-upload {\n  list-style-type: none;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-container.sc-digi-form-file-upload:nth-child(n+2) {\n  border-top: var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--primary);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .info-wrapper.sc-digi-form-file-upload {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  height: auto;\n  min-width: 20%;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .button-wrapper.sc-digi-form-file-upload {\n  display: flex;\n  min-width: 20%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload p.sc-digi-form-file-upload {\n  margin: auto var(--digi--margin--small) !important;\n  font-weight: var(--digi--form-file-upload--font-weight);\n  font-size: var(--digi--typography--body--font-size--desktop);\n  white-space: nowrap;\n  height: max-content;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .digi-form-file-upload__button-abort.sc-digi-form-file-upload {\n  margin: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-and-thumbnail-container.sc-digi-form-file-upload {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  min-width: 20%;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-green-check.sc-digi-form-file-upload {\n  width: 1.375rem;\n  height: 1.375rem;\n  display: flex;\n  align-self: baseline;\n  position: relative;\n  top: 4px;\n  left: 0px;\n  margin-right: 4px;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-green-check.sc-digi-form-file-upload svg.sc-digi-form-file-upload {\n  --digi--icon--height: 16px;\n  --digi--icon--width: 16px;\n  --digi--icon--color: var(--digi--color--icon--validation--success);\n  background-color: var(--digi--color--background--primary);\n  border-radius: 50%;\n  align-self: flex-start;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload {\n  width: 100%;\n  margin: auto 0;\n  font-weight: var(--digi--typography--button--font-weight--desktop);\n  font-size: var(--digi--typography--body--font-size--desktop);\n  height: max-content;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-name--thumbnail.sc-digi-form-file-upload {\n  font-weight: var(--digi--typography--button--font-weight--desktop);\n  font-size: var(--digi--typography--body--font-size--desktop);\n  margin: auto 0 auto var(--digi--margin--small);\n  color: var(--digi--form-file-upload--button-text--color--default);\n}\n@media (max-width: 500px) {\n  .sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload {\n    max-width: 17.5rem;\n  }\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload:focus-visible {\n  outline: 2px solid black;\n  outline-offset: 2px;\n  box-shadow: 0px 0px 0px 5px white;\n}\n@container (max-width: 620px) {\n  .sc-digi-form-file-upload-h .digi-form-file-upload__item .digi-form-file-upload__item-name {\n    max-width: 17.5rem;\n  }\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload {\n  position: relative;\n  display: flex;\n  padding: 0;\n  margin: 0;\n  justify-content: space-between;\n  align-items: center;\n  overflow-wrap: break-word;\n  gap: 32px;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-inner.sc-digi-form-file-upload {\n  display: flex;\n  width: 100%;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-figure.sc-digi-form-file-upload {\n  margin: 0;\n  align-self: flex-start;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-figure.sc-digi-form-file-upload::after {\n  position: absolute;\n  content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFF' cx='8' cy='8' r='6'/%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.925 4.236L13.01 6.3a.516.516 0 0 0 0-.73l-.73-.73a.516.516 0 0 0-.73 0L6.71 9.682l-2.26-2.26a.516.516 0 0 0-.73 0l-.73.73a.516.516 0 0 0 0 .73l3.355 3.355a.516.516 0 0 0 .73 0Z' fill='%23009322'/%3E%3C/g%3E%3C/svg%3E\");\n  top: -6px;\n  left: 24px;\n  width: 18px;\n  height: 18px;\n  overflow: hidden;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload .thumbnail.sc-digi-form-file-upload {\n  width: 2rem;\n  height: 2rem;\n  object-fit: cover;\n  flex-grow: 0;\n  margin-right: 0.75rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload .hidden.sc-digi-form-file-upload {\n  margin-left: var(--digi--margin--larger);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pdf-preview-bis.sc-digi-form-file-upload {\n  position: relative;\n  top: 6px;\n  left: 5px;\n  margin-right: 1.25rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pdf-preview-bis.sc-digi-form-file-upload::after {\n  position: absolute;\n  content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFF' cx='8' cy='8' r='6'/%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.925 4.236L13.01 6.3a.516.516 0 0 0 0-.73l-.73-.73a.516.516 0 0 0-.73 0L6.71 9.682l-2.26-2.26a.516.516 0 0 0-.73 0l-.73.73a.516.516 0 0 0 0 .73l3.355 3.355a.516.516 0 0 0 .73 0Z' fill='%23009322'/%3E%3C/g%3E%3C/svg%3E\");\n  top: -7px;\n  left: 15px;\n  width: 18px;\n  height: 18px;\n  overflow: hidden;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-info.sc-digi-form-file-upload {\n  width: 100%;\n}\n@container (max-width: 500px) {\n  .sc-digi-form-file-upload-h .digi-form-file-upload__item .digi-form-file-upload__item span {\n    margin-left: 0;\n    margin-right: auto;\n  }\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error.sc-digi-form-file-upload {\n  color: var(--digi--color--icon--validation--error);\n}\n.sc-digi-form-file-upload-h .visually-hidden.sc-digi-form-file-upload {\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n  -webkit-clip-path: inset(50%);\n  clip-path: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n  white-space: nowrap;\n}\n@container (min-width: 500px) {\n  .sc-digi-form-file-upload-h .hidden-desktop {\n    display: none !important;\n  }\n}\n@container (max-width: 499px) {\n  .sc-digi-form-file-upload-h .hidden-mobile {\n    display: none !important;\n  }\n}";export{m as digi_form_file_upload}