@designsystem-se/af 39.2.1-beta.2 → 39.2.1-beta.4

package/dist/cjs/digi-form-file-upload.cjs.entry.js

@@ -0,0 +1,633 @@
+'use strict';
+
+var index = require('./index-Cn1hHaSy.js');
+var text = require('./text-Cu3CaHGj.js');
+var randomIdGenerator_util = require('./randomIdGenerator.util-C8XR2Tn1.js');
+var formFileUploadVariation_enum = require('./form-file-upload-variation.enum-xcEOoggr.js');
+var utilBreakpointObserverBreakpoints_enum = require('./util-breakpoint-observer-breakpoints.enum-zoJiezkV.js');
+var formValidationMessageVariation_enum = require('./form-validation-message-variation.enum-BA5nmCiw.js');
+
+const formFileUploadCss = () => `.sc-digi-form-file-upload-h{--digi--form-file-upload--color--background--small--default:var(--digi--color--background--interactive--default--quaternary);--digi--form-file-upload--color--background--small--hover:var(--digi--color--background--interactive--hover--secondary);--digi--form-file-upload--color--background--medium--default:var(--digi--color--background--interactive--default--quaternary);--digi--form-file-upload--color--background--medium--hover:var(--digi--color--background--interactive--hover--secondary);--digi--form-file-upload--color--background--large--default:var(--digi--color--background--interactive--default--quaternary);--digi--form-file-upload--color--background--large--hover:var(--digi--color--background--interactive--hover--secondary);--digi--form-file-upload--color--border--small--default:var(--digi--color--border--interactive--default--on-input-nuance);--digi--form-file-upload--color--border--small--hover:var(--digi--color--border--interactive--hover--primary);--digi--form-file-upload--color--border--medium--default:var(--digi--color--border--interactive--default--on-input-nuance);--digi--form-file-upload--color--border--medium--hover:var(--digi--color--border--interactive--hover--primary);--digi--form-file-upload--color--border--large--default:var(--digi--color--border--interactive--default--on-input-nuance);--digi--form-file-upload--color--border--large--hover:var(--digi--color--border--interactive--hover--primary);--digi--form-file-upload--border-width--small--default:var(--digi--border-width--secondary);--digi--form-file-upload--border-width--small--hover:var(--digi--border-width--primary);--digi--form-file-upload--border-width--medium--default:var(--digi--border-width--secondary);--digi--form-file-upload--border-width--medium--hover:var(--digi--border-width--primary);--digi--form-file-upload--border-width--large--default:var(--digi--border-width--secondary);--digi--form-file-upload--border-width--large--hover:var(--digi--border-width--primary);--digi--form-file-upload--border-style--small--default:var(--digi--global--border-style--none);--digi--form-file-upload--border-style--medium--default:var(--digi--global--border-style--dashed);--digi--form-file-upload--border-style--large--default:var(--digi--global--border-style--dashed);--digi--form-file-upload--border-radius--small--default:var(--digi--border-radius--secondary);--digi--form-file-upload--border-radius--medium--default:var(--digi--border-radius--secondary);--digi--form-file-upload--border-radius--large--default:var(--digi--border-radius--secondary);--digi--form-file-upload--padding--small:var(--digi--gutter--medium) var(--digi--gutter--largest);--digi--form-file-upload--padding--medium:var(--digi--gutter--medium) var(--digi--gutter--medium) var(--digi--global--spacing--largest-2) var(--digi--gutter--medium);--digi--form-file-upload--padding--large:var(--digi--gutter--medium) var(--digi--gutter--medium) var(--digi--global--spacing--largest-2) var(--digi--gutter--medium);--digi--form-file-upload--font-size--small:var(--digi--global--typography--font-size--small);--digi--form-file-upload--font-size--medium:var(--digi--global--typography--font-size--base);--digi--form-file-upload--font-size--large:var(--digi--global--typography--font-size--large);--digi--form-file-upload--heading--font-family:var(--digi--global--typography--font-family--default);--digi--form-file-upload--heading--font-weight:var(--digi--typography--heading-4--font-weight--desktop);--digi--form-file-upload--heading--font-size:var(--digi--typography--heading-4--font-size--desktop);--digi--form-file-upload--heading--font-size--large:var(--digi--typography--heading-4--font-size--desktop-large);--digi--form-file-upload--font-family:var(--digi--global--typography--font-family--default);--digi--form-file-upload--font-weight:var(--digi--typography--form-file-upload--font-weight--desktop);--digi--form-file-upload--button-text--color--default:var(--digi--color--text--interactive--primary);--digi--form-file-upload--button-text--color--hover:var(--digi--color--text--interactive--primary);--digi--form-file-upload--padding--small--icon:var(--digi--global--spacing--smaller) var(--digi--global--spacing--smallest-2);--digi--form-file-upload--padding--medium--icon:var(--digi--global--spacing--base) var(--digi--global--spacing--smallest-2);--digi--form-file-upload--width--small:132px;--digi--form-file-upload--width--medium:304px;--digi--form-file-upload--width--large:inherit;--digi--form-file-upload--border--error:var(--digi--global--border-style--solid) solid;--digi--form-file-upload--border-color--error:var(--digi--color--border--interactive--validation--error);--digi--form-file-upload--border--error--width:var(--digi--border-width--secondary);--digi--form-file-upload--background--error:var(--digi--color--background--interactive--validation--error);container-type:inline-size;display:block;width:100%}.sc-digi-form-file-upload-h a.sc-digi-form-file-upload{font-weight:var(--digi--global--typography--font-weight--semibold);color:var(--digi--color--text--interactive--primary)}.sc-digi-form-file-upload-h .digi-form-file-upload.sc-digi-form-file-upload{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-form-file-upload-h .digi-form-file-upload--small.sc-digi-form-file-upload{--COLOR--BACKGROUND--FILE-LIST:var(--digi--form-file-upload--color--background--small--default);--COLOR--BACKGROUND--DEFAULT:var(--digi--form-file-upload--color--background--small--default);--COLOR--BACKGROUND--HOVER:var(--digi--form-file-upload--color--background--small--hover);--COLOR--BORDER--DEFAULT:var(--digi--form-file-upload--color--border--small--default);--COLOR--BORDER--HOVER:var(--digi--form-file-upload--color--border--small--hover);--BORDER-STYLE--DEFAULT:var(--digi--form-file-upload--border-style--small--default);--BORDER-RADIUS--DEFAULT:var(--digi--form-file-upload--border-radius--small--default);--BORDER-WIDTH--DEFAULT:var(--digi--form-file-upload--border-width--small--default);--WIDTH:var(--digi--form-file-upload--width--small);--FONT-WEIGHT:var(--digi--form-file-upload--font-weight);--PADDING:var(--digi--form-file-upload--padding--small);--ICON--PADDING:var(--digi--form-file-upload--padding--small--icon)}.sc-digi-form-file-upload-h .digi-form-file-upload--medium.sc-digi-form-file-upload{--COLOR--BACKGROUND--FILE-LIST:var(--digi--form-file-upload--color--background--small--default);--COLOR--BACKGROUND--DEFAULT:var(--digi--form-file-upload--color--background--medium--default);--COLOR--BACKGROUND--HOVER:var(--digi--form-file-upload--color--background--medium--hover);--COLOR--BORDER--DEFAULT:var(--digi--form-file-upload--color--border--medium--default);--COLOR--BORDER--HOVER:var(--digi--form-file-upload--color--border--medium--hover);--BORDER-STYLE--DEFAULT:var(--digi--form-file-upload--border-style--medium--default);--BORDER-RADIUS--DEFAULT:var(--digi--form-file-upload--border-radius--medium--default);--BORDER-WIDTH--DEFAULT:var(--digi--form-file-upload--border-width--medium--default);--WIDTH:var(--digi--form-file-upload--width--medium);--FONT-WEIGHT:var(--digi--form-file-upload--font-weight);--PADDING:var(--digi--form-file-upload--padding--medium);--ICON--PADDING:var(--digi--form-file-upload--padding--medium--icon)}.sc-digi-form-file-upload-h .digi-form-file-upload--large.sc-digi-form-file-upload{--COLOR--BACKGROUND--FILE-LIST:var(--digi--form-file-upload--color--background--small--default);--COLOR--BACKGROUND--DEFAULT:var(--digi--form-file-upload--color--background--large--default);--COLOR--BACKGROUND--HOVER:var(--digi--form-file-upload--color--background--large--hover);--COLOR--BORDER--DEFAULT:var(--digi--form-file-upload--color--border--large--default);--COLOR--BORDER--HOVER:var(--digi--form-file-upload--color--border--large--hover);--BORDER-STYLE--DEFAULT:var(--digi--form-file-upload--border-style--large--default);--BORDER-RADIUS--DEFAULT:var(--digi--form-file-upload--border-radius--large--default);--BORDER-WIDTH--DEFAULT:var(--digi--form-file-upload--border-width--large--default);--WIDTH:var(--digi--form-file-upload--width--large);--FONT-WEIGHT:var(--digi--form-file-upload--font-weight);--PADDING:var(--digi--form-file-upload--padding--large);--ICON--PADDING:var(--digi--form-file-upload--padding--medium--icon)}.sc-digi-form-file-upload-h .digi-form-file-upload--has-errors.sc-digi-form-file-upload{--BORDER-STYLE--DEFAULT:var(--digi--form-file-upload--border--error);--COLOR--BORDER--DEFAULT:var(--digi--form-file-upload--border-color--error);--COLOR--BACKGROUND--HOVER:var(--digi--form-file-upload--border-color--error);--BORDER-WIDTH--DEFAULT:var(--digi--form-file-upload--border--error--width);--COLOR--BACKGROUND--DEFAULT:var(--digi--form-file-upload--background--error)}.sc-digi-form-file-upload-h .digi-form-file-upload__spinner.sc-digi-form-file-upload{margin-right:0.5rem;animation:animation__rotation 3s infinite linear;transform-origin:center;--digi--icon--height:1rem}@media (prefers-reduced-motion){.sc-digi-form-file-upload-h .digi-form-file-upload__spinner.sc-digi-form-file-upload{animation:none}}@keyframes animation__rotation{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.sc-digi-form-file-upload-h .digi-form-file-upload__input.sc-digi-form-file-upload{display:none}.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload{margin:0 0 auto 0.5rem;text-align:center;white-space:nowrap;background:none;border:none;cursor:pointer;font-weight:var(--digi--typography--button--font-weight--desktop);font-size:var(--digi--typography--body--font-size--desktop);color:var(--digi--form-file-upload--button-text--color--default);display:flex;align-items:center;font-family:var(--digi--global--typography--font-family--default)}.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:hover{color:var(--digi--form-file-upload--button-text--color--hover);text-decoration:underline}.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{--digi--icon--color:var(--digi--form-file-upload--button-text--color--hover)}.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white;text-decoration:underline}.sc-digi-form-file-upload-h .digi-form-file-upload__button-icon.sc-digi-form-file-upload{--digi--icon--height:1.25rem;--digi--icon--width:1.25rem;--digi--icon--color:var(--digi--color--text--interactive--primary);margin-left:5px;padding:var(--ICON--PADDING);padding-right:0;padding-left:0}.sc-digi-form-file-upload-h .digi-form-file-upload__button-icon.sc-digi-form-file-upload:hover{--digi--icon--color:var(--digi--form-file-upload--button-text--color--hover)}.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area.sc-digi-form-file-upload{border-color:var(--COLOR--BORDER--DEFAULT);border-radius:var(--BORDER-RADIUS--DEFAULT);border-width:var(--BORDER-WIDTH--DEFAULT);border-style:var(--BORDER-STYLE--DEFAULT);max-width:var(--WIDTH);margin:0;display:flex;flex-direction:column;background-color:var(--COLOR--BACKGROUND--DEFAULT);align-items:center;padding:var(--PADDING);margin-bottom:var(--digi--gutter--medium);margin-top:var(--digi--gutter--button-block-small);position:relative;cursor:pointer}.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area--hover.sc-digi-form-file-upload{border-color:var(--COLOR--BORDER--HOVER)}.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area-overlay.sc-digi-form-file-upload{position:absolute;width:100%;height:100%;background-color:var(--COLOR--BACKGROUND--HOVER);opacity:0.1;top:0;left:0;z-index:10}.sc-digi-form-file-upload-h .digi-form-file-upload__text-area.sc-digi-form-file-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.sc-digi-form-file-upload-h .digi-form-file-upload__text-area.sc-digi-form-file-upload .paper-clip.sc-digi-form-file-upload{padding-right:0.5rem}.sc-digi-form-file-upload-h .digi-form-file-upload__files-list.sc-digi-form-file-upload{max-width:none;padding:0;margin:0}.sc-digi-form-file-upload-h .digi-form-file-upload__files.sc-digi-form-file-upload{border-radius:var(--BORDER-RADIUS--DEFAULT);max-width:100%;width:100%;box-sizing:border-box;background-color:var(--COLOR--BACKGROUND--FILE-LIST);padding:var(--digi--gutter--largest-2) var(--digi--padding--large);margin-bottom:var(--digi--gutter--medium);margin-top:var(--digi--gutter--medium);padding-bottom:var(--digi--padding--smaller)}.sc-digi-form-file-upload-h .digi-form-file-upload__files-heading.sc-digi-form-file-upload{font-family:var(--digi--form-file-upload--heading--font-family);font-size:var(--digi--typography--label--font-size--desktop);font-weight:var(--digi--form-file-upload--heading--font-weight);color:var(--digi--color--text--primary);margin:var(--digi--margin--small) 0 var(--digi--margin--medium) 0;display:block}.sc-digi-form-file-upload-h .digi-form-file-upload__files-heading--and-errors.sc-digi-form-file-upload{margin-top:var(--digi--margin--largest)}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload{display:flex;justify-content:space-between;padding-bottom:0.75rem}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.with-files.sc-digi-form-file-upload{border-bottom:var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--primary)}.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{max-height:1.5rem}.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{padding-right:0}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload{margin:0;padding:0}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload li.sc-digi-form-file-upload{list-style:none;margin-bottom:0.75rem}.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{margin-bottom:0}.sc-digi-form-file-upload-h .digi-form-file-upload__item.sc-digi-form-file-upload{margin:var(--digi--margin--small) 0;margin-bottom:var(--digi--margin--medium);width:100%;box-sizing:border-box}.sc-digi-form-file-upload-h .digi-form-file-upload__item-container.sc-digi-form-file-upload{list-style-type:none}.sc-digi-form-file-upload-h .digi-form-file-upload__item-container.sc-digi-form-file-upload:nth-child(n+2){border-top:var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--primary)}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload{display:flex;justify-content:space-between;align-items:center;width:100%}.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{display:flex;justify-content:flex-start;align-items:center;height:auto;min-width:20%}.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{display:flex;min-width:20%;justify-content:flex-end;align-items:center}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload p.sc-digi-form-file-upload{margin:auto var(--digi--margin--small) !important;font-weight:var(--digi--form-file-upload--font-weight);font-size:var(--digi--typography--body--font-size--desktop);white-space:nowrap;height:max-content;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.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{margin:0}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-and-thumbnail-container.sc-digi-form-file-upload{display:flex;align-items:center;justify-content:flex-start;width:100%;min-width:20%}.sc-digi-form-file-upload-h .digi-form-file-upload__item-green-check.sc-digi-form-file-upload{width:1.375rem;height:1.375rem;display:flex;align-self:baseline;position:relative;top:4px;left:0px;margin-right:4px}.sc-digi-form-file-upload-h .digi-form-file-upload__item-green-check-icon.sc-digi-form-file-upload{--digi--icon--height:16px;--digi--icon--width:16px;--digi--icon--color:var(--digi--color--icon--validation--success);min-height:0;width:16px;height:16px;background-color:var(--digi--color--background--primary);border-radius:50%;align-self:flex-start}.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload{width:100%;margin:auto 0;font-weight:var(--digi--typography--button--font-weight--desktop);font-size:var(--digi--typography--body--font-size--desktop);height:max-content}.sc-digi-form-file-upload-h .digi-form-file-upload__item-name--thumbnail.sc-digi-form-file-upload{font-weight:var(--digi--typography--button--font-weight--desktop);font-size:var(--digi--typography--body--font-size--desktop);margin:auto 0 auto var(--digi--margin--small);color:var(--digi--form-file-upload--button-text--color--default)}@media (max-width: 500px){.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload{max-width:17.5rem}}.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}@container (max-width: 620px){.sc-digi-form-file-upload-h .digi-form-file-upload__item .digi-form-file-upload__item-name{max-width:17.5rem}}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload{position:relative;display:flex;padding:0;margin:0;justify-content:space-between;align-items:center;overflow-wrap:break-word;gap:32px}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-inner.sc-digi-form-file-upload{display:flex;width:100%}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-figure.sc-digi-form-file-upload{margin:0;align-self:flex-start}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-figure.sc-digi-form-file-upload::after{position:absolute;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");top:-6px;left:24px;width:18px;height:18px;overflow:hidden}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload .thumbnail.sc-digi-form-file-upload{width:2rem;height:2rem;object-fit:cover;flex-grow:0;margin-right:0.75rem}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload .hidden.sc-digi-form-file-upload{margin-left:var(--digi--margin--larger)}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pdf-preview-bis.sc-digi-form-file-upload{position:relative;top:6px;left:5px;margin-right:1.25rem}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pdf-preview-bis.sc-digi-form-file-upload::after{position:absolute;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");top:-7px;left:15px;width:18px;height:18px;overflow:hidden}.sc-digi-form-file-upload-h .digi-form-file-upload__item-info.sc-digi-form-file-upload{width:100%}@container (max-width: 500px){.sc-digi-form-file-upload-h .digi-form-file-upload__item .digi-form-file-upload__item span{margin-left:0;margin-right:auto}}.sc-digi-form-file-upload-h .digi-form-file-upload__error.sc-digi-form-file-upload{color:var(--digi--color--icon--validation--error)}.sc-digi-form-file-upload-h .visually-hidden.sc-digi-form-file-upload{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}@container (min-width: 500px){.sc-digi-form-file-upload-h .hidden-desktop{display:none !important}}@container (max-width: 499px){.sc-digi-form-file-upload-h .hidden-mobile{display:none !important}}`;
+
+const FormFileUpload = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.afOnUploadFile = index.createEvent(this, "afOnUploadFile", 7);
+        this.afOnRemoveFile = index.createEvent(this, "afOnRemoveFile", 7);
+        this.afOnCancelFile = index.createEvent(this, "afOnCancelFile", 7);
+        this.afOnReady = index.createEvent(this, "afOnReady", 3);
+        this.afShowModal = index.createEvent(this, "afShowModal", 7);
+        this.files = [];
+        this.error = false;
+        this.errorMessages = [];
+        this.fileHover = false;
+        /**
+         * Texten till label-elementet. Obligatoriskt fält.
+         * @en The label text. Required field.
+         */
+        this.afLabel = text._t.form.file_upload;
+        /**
+         * Sätter variant. Kan vara 'small', 'medium' eller 'large'. Oberoende på satt storlek så kommer komponenten bli 'small' på mobilskärmar.
+         * @en Set input variation 'small', 'medium' or 'large'. On a mobile screen the variation will be automatically set to 'small'.
+         */
+        this.afVariation = formFileUploadVariation_enum.FormFileUploadVariation.SMALL;
+        /**
+         * Sätter attributet 'id'. Om inget väljs så skapas ett slumpmässigt id.
+         * @en Input id attribute. Defaults to random string.
+         */
+        this.afId = randomIdGenerator_util.randomIdGenerator('digi-form-file-upload');
+        /**
+         * Sätter en maximal filstorlek i MB, 10MB är standard.
+         * @en Set file max size in MB
+         */
+        this.afFileMaxSize = 10;
+        /**
+         * Sätt denna till true om formuläret innehåller fler obligatoriska fält än valfria.
+         * @en Set this to true if the form contains more required fields than optional fields.
+         */
+        this.afAnnounceIfOptional = false;
+        /**
+         * Sätt rubrik för uppladdade filer.
+         * @en Set heading for uploaded files.
+         */
+        this.afHeadingFiles = text._t.form.file_uploaded_files;
+        /**
+         * Visar miniatyrbild/ikon på uppladdade filer.
+         * @en Shows thumbnail.
+         */
+        this.afShowThumbnail = false;
+        /**
+         * Aktiverar förhandsgranskning.
+         * @en Activates preview of uploaded files.
+         */
+        this.afEnablePreview = false;
+        /**
+         * Sätter antivirus scan status. Kan vara 'enable' eller 'disabled'.
+         * @en Set antivirus scan status. Enable is default.
+         */
+        this.afValidation = formFileUploadVariation_enum.FormFileUploadValidation.DISABLED;
+        /**
+         * Sätt rubrikens vikt. 'h2' är förvalt.
+         * @en Set heading level. Default is 'h2'
+         */
+        this.afHeadingLevel = formFileUploadVariation_enum.FormFileUploadHeadingLevel.H2;
+        /**
+         * Om värdet är true får felmeddelandet attributet role="alert".
+         * Om felet visas tillsammans med flera andra fel (till exempel efter servervalidering) ska värdet sättas till false.
+         * @en If the value is true, the error message gets the attribute role="alert".
+         * If the error is shown together with multiple errors (for example after server-side validation), the value should be set to false.
+         */
+        this.afErrorMessageIsAlert = true;
+        this.toBase64 = (file) => new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                const encoded = reader.result.toString().replace(/^data:(.*,)?/, '');
+                resolve(encoded);
+            };
+            reader.onerror = (error) => reject(error);
+        });
+    }
+    afValidationTextChange() {
+        this.setValidationText();
+    }
+    get errorMessageIsAlert() {
+        return (this.afErrorMessageIsAlert !== false &&
+            this.afErrorMessageIsAlert !== 'false');
+    }
+    breakpointHandler(e) {
+        if (e.detail.value) {
+            if (e.detail.value === utilBreakpointObserverBreakpoints_enum.UtilBreakpointObserverBreakpoints.SMALL) {
+                this.afVariation = formFileUploadVariation_enum.FormFileUploadVariation.SMALL;
+            }
+            else {
+                this.afVariation = this.aforiginalVariation;
+            }
+        }
+    }
+    /**
+     * Används för att skicka in en validerad fil tillbaks till komponenten. Förväntar sig att filen redan finns i komponenten med status "pending".
+     * @en Send a validated file to the component. Expects file to exist in component with status "pending".
+     */
+    async afMValidateFile(file) {
+        if (!this.fileExistInFiles(file)) {
+            return;
+        }
+        this.removeFileFromList(file['id']);
+        if (file['status'] !== 'error') {
+            /* Måste göra en kopia av filen för att komponenten ska rendera om sig.
+             * Annars kan den peka på samma referens och förstår inte att statusen har ändrats.  */
+            const copiedFile = new File([file], file.name, { type: file.type });
+            copiedFile['id'] = file['id'];
+            copiedFile['status'] = file['status'];
+            copiedFile['base64'] = await this.toBase64(file);
+            this.files = [...this.files, copiedFile];
+        }
+        else {
+            this.validateFile(file);
+        }
+    }
+    /**
+     * Få ut alla uppladdade filer
+     * @en Get all uploaded files
+     */
+    async afMGetAllFiles() {
+        return this.files;
+    }
+    /**
+     * Hämta ut komponentens validitets-state och felmeddelanden
+     * @en Get component validity and error messages
+     */
+    async afMGetValidationState() {
+        return { isValid: !this.error, errorMessages: this.errorMessages };
+    }
+    /**
+     * Importera lista med filer utan att trigga uppladdningsevent. Ett objekt måste innehålla id, status och filen själv.
+     * @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);
+            }
+        }
+        const filesThatArOK = this.errorMessages.length === 0 ? files : this.getFilesThatAreOK(files);
+        if (filesThatArOK.length === 0) {
+            return;
+        }
+        this.files = this.files.concat(filesThatArOK);
+    }
+    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.
+     */
+    focusOnInput() {
+        this._input.focus();
+    }
+    componentWillLoad() {
+        this.aforiginalVariation = this.afVariation;
+    }
+    componentDidLoad() {
+        this.hostElement.setAttribute('tabindex', '-1');
+        this.afOnReady.emit();
+        /* Vid första renderingen så fungerar inte propertyn korrekt om vi inte kallar på setValidationText härifrån.
+         * Gissar att det är en tajmin-issue mellan prop och state, men hinner inte gräva i det mer nu.  */
+        this.setValidationText();
+    }
+    get fileMaxSize() {
+        const MEGABYTE = 1048576;
+        return this.afFileMaxSize * MEGABYTE;
+    }
+    setValidationText() {
+        if (this.afValidationText && this.afValidationText.length > 0) {
+            let isDuplicated = false;
+            if (this.errorMessages.length > 0) {
+                this.errorMessages.forEach((error) => {
+                    if (error.message === this.afValidationText) {
+                        isDuplicated = true;
+                    }
+                });
+            }
+            if (!isDuplicated) {
+                this.errorMessages.push({
+                    fileName: '',
+                    message: this.afValidationText
+                });
+            }
+            this.error = true;
+        }
+        else {
+            this.resetErrors();
+        }
+    }
+    fileExistInFiles(fileToCheck) {
+        let exist = false;
+        if (this.files.length > 0) {
+            this.files.forEach((file) => {
+                if (file['id'] === fileToCheck['id']) {
+                    exist = true;
+                    return;
+                }
+                else if (file.name === fileToCheck.name) {
+                    exist = true;
+                }
+            });
+        }
+        return exist;
+    }
+    checkAcceptedTypes(file) {
+        const acceptedTypes = this.afFileTypes.replace(/\s/g, '').split(',');
+        const fileMimeType = file.type;
+        const fileNameExtension = file.name
+            .split('.')
+            .slice(-1)
+            .map((item) => '.' + item.toLowerCase())
+            .toString();
+        return acceptedTypes.some((item) => {
+            // Checking against group of mime types
+            if (item.includes('/*')) {
+                const mimeTypeCategory = item.split('/').slice(0, 1).toString();
+                const fileMimeTypeCategory = fileMimeType
+                    .split('/')
+                    .slice(0, 1)
+                    .toString();
+                return mimeTypeCategory == fileMimeTypeCategory;
+            }
+            // Checking against mimetype and extension
+            return (item === fileMimeType || item === fileNameExtension || item === '*');
+        });
+    }
+    resetErrors(handleFocus = false) {
+        this.error = false;
+        this._srTextContainer.textContent = '';
+        this.errorMessages = [];
+        /* Timeouten behövs för att state och element ska hinna renderas om innan fokus flyttas.
+         Vi märkte att det blir problem för hjälpmedel om den inte är på plats.  */
+        if (handleFocus) {
+            setTimeout(() => {
+                this._uploadButton.focus();
+            }, 100);
+        }
+    }
+    addErrorMessage(fileName, message) {
+        this.errorMessages.push({
+            fileName: fileName,
+            message: message
+        });
+    }
+    validateFileStatus(file) {
+        if (file['status'] &&
+            file['status'] === formValidationMessageVariation_enum.FormValidationMessageVariation.ERROR) {
+            const message = file['error']
+                ? file['error']
+                : text._t.form.file_error_unknown_error;
+            this.addErrorMessage(file.name, message);
+        }
+    }
+    validateMaxSize(file) {
+        if (file.size > this.fileMaxSize) {
+            const message = this.afFileMaxSizeText
+                ? this.afFileMaxSizeText
+                : text._t.form.file_error_too_large(file.name, this.afFileMaxSize);
+            this.addErrorMessage(file.name, message);
+        }
+    }
+    validateFileType(file) {
+        if (!this.checkAcceptedTypes(file)) {
+            this.addErrorMessage(file.name, text._t.form.file_error_filetype_not_allowed(file.name, this.afFileTypes));
+        }
+    }
+    validateFile(file) {
+        this.validateIfFileIsAlreadyUploaded(file);
+        this.validateFileStatus(file);
+        this.validateMaxSize(file);
+        this.validateFileType(file);
+        this.error = this.errorMessages.length > 0;
+    }
+    onCancelFileHandler(e, id) {
+        e.preventDefault();
+        const fileFromList = this.removeFileFromList(id);
+        fileFromList['status'] = 'error';
+        fileFromList['error'] = text._t.form.file_upload_canceled;
+        this.afOnCancelFile.emit(fileFromList);
+    }
+    removeFileFromList(id) {
+        const index = this.getIndexOfFile(id);
+        if (index === -1) {
+            return;
+        }
+        const removedFile = this.files[index];
+        this.files = [
+            ...this.files.slice(0, index),
+            ...this.files.slice(index + 1)
+        ];
+        return removedFile;
+    }
+    getIndexOfFile(id) {
+        const index = this.files.findIndex((file) => file['id'] == id);
+        return index;
+    }
+    getFilesThatAreOK(files) {
+        const validFiles = [];
+        files.forEach((file) => {
+            let isValid = true;
+            this.errorMessages.forEach((message) => {
+                if (message.fileName === file.name) {
+                    isValid = false;
+                }
+            });
+            if (isValid) {
+                validFiles.push(file);
+            }
+        });
+        return validFiles;
+    }
+    validateIfFileIsAlreadyUploaded(file) {
+        for (const item of this.files) {
+            if (item.name === file.name) {
+                this.addErrorMessage(file.name, text._t.form.file_error_exists(file.name));
+            }
+        }
+    }
+    handleFiles(e) {
+        var _a, _b;
+        this.resetErrors();
+        const fileList = e.dataTransfer ? (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files : (_b = e.target) === null || _b === void 0 ? void 0 : _b.files;
+        const filesToValidate = [];
+        Array.from(fileList).forEach((file) => {
+            filesToValidate.push(file);
+        });
+        if (!filesToValidate || filesToValidate.length === 0) {
+            return;
+        }
+        const numberOfFiles = filesToValidate.length + this.files.length;
+        if (numberOfFiles > this.afMaxFiles) {
+            this.addErrorMessage('', text._t.form.file_error_too_many);
+            this.error = true;
+            return;
+        }
+        filesToValidate.forEach((file) => {
+            this.validateFile(file);
+        });
+        const filesThatArOK = this.errorMessages.length === 0
+            ? filesToValidate
+            : this.getFilesThatAreOK(filesToValidate);
+        if (filesThatArOK.length === 0) {
+            return;
+        }
+        const formData = new FormData();
+        filesThatArOK.forEach((file) => {
+            formData.append('file', file);
+        });
+        for (const obj of formData.entries()) {
+            this.addFileStatusAndEmitFiles(obj[1]);
+        }
+        this._input.value = '';
+    }
+    onButtonUploadFileHandler(e) {
+        e.preventDefault();
+        if (!e.target.files)
+            return;
+        this.handleFiles(e);
+    }
+    onRemoveFileHandler(e, id) {
+        e.preventDefault();
+        this.resetErrors();
+        const fileToRemove = this.removeFileFromList(id);
+        this.afOnRemoveFile.emit(fileToRemove);
+        this._input.value = '';
+        this.handleFocusAfterFileRemoved();
+    }
+    handleFocusAfterFileRemoved() {
+        /* Timeouten behövs för att state och element ska hinna renderas om innan fokus flyttas.
+           Vi märkte att det blir problem för hjälpmedel om den inte är på plats.  */
+        setTimeout(() => {
+            if (this.files.length > 0) {
+                this._fileList.focus();
+            }
+            else {
+                this._uploadButton.focus();
+            }
+        }, 100);
+    }
+    emitFile(file) {
+        const index = this.getIndexOfFile(file['id']);
+        if (this.afValidation === formFileUploadVariation_enum.FormFileUploadValidation.ENABLED) {
+            this.afOnUploadFile.emit(this.files[index]);
+        }
+        else {
+            this.files[index]['status'] = 'OK';
+            this.afOnUploadFile.emit(this.files[index]);
+        }
+    }
+    async addFileStatusAndEmitFiles(file) {
+        file['id'] = randomIdGenerator_util.randomIdGenerator('file');
+        file['status'] = 'pending';
+        file['base64'] = await this.toBase64(file);
+        this.files = [...this.files, file];
+        this.emitFile(file);
+    }
+    handleDrop(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.fileHover = false;
+        if (e.dataTransfer.files) {
+            this.handleFiles(e);
+        }
+    }
+    handleAllowDrop(e) {
+        if (this.afVariation === formFileUploadVariation_enum.FormFileUploadVariation.SMALL)
+            return;
+        e.stopPropagation();
+        e.preventDefault();
+    }
+    handleOnDragEnterLeave(e) {
+        this.handleAllowDrop(e);
+        this.fileHover = !this.fileHover;
+    }
+    handleInputClick(e) {
+        e.stopPropagation();
+        this.afShowModal.emit();
+        this._input.click();
+    }
+    getFiletypeAndShortFileName(file) {
+        let fileType = null;
+        let fileName = file.name;
+        const fileExtension = fileName.split('.').pop();
+        const fileWithoutExtension = fileName.replace('.' + fileExtension, '');
+        const minChars = window.innerWidth < 769 ? 6 : fileName.length;
+        const maxChars = window.innerWidth < 769 ? 14 : fileName.length;
+        if (String(file['type']).split('/')[0] === 'image') {
+            fileType = 'image';
+        }
+        else if (String(file['type']).split('/')[1] === 'pdf') {
+            fileType = 'pdf';
+        }
+        else {
+            fileType = 'default';
+        }
+        if (fileName.length > minChars) {
+            fileName =
+                fileWithoutExtension.substring(0, minChars) + '...' + fileExtension;
+        }
+        else if (fileName.length > maxChars) {
+            fileName = fileWithoutExtension.substring(0, 6) + '...' + fileExtension;
+        }
+        else {
+            fileName = file.name;
+        }
+        return { type: fileType, name: fileName };
+    }
+    // If its a pdf or an image the file is opened on another tab, any other file formats are downloaded
+    async viewUploadedFile(e, file) {
+        e.preventDefault();
+        if (this.getFiletypeAndShortFileName(file).type === 'image') {
+            const w = window.open();
+            w.document.write(`<img src="data:${file['type']};base64,${file['base64']}" alt="${file.name}" />`);
+            w.document.title = file['name'];
+        }
+        else if (this.getFiletypeAndShortFileName(file).type === 'pdf') {
+            (async () => {
+                const pdfstr = await fetch(`data:application/pdf;base64,${file['base64']}`);
+                const blobFromFetch = await pdfstr.blob();
+                const blob = new Blob([blobFromFetch], { type: 'application/pdf' });
+                const blobUrl = URL.createObjectURL(blob);
+                setTimeout(() => {
+                    window.open(blobUrl, '_blank');
+                }, 30);
+            })();
+        }
+        else {
+            const fileURL = URL.createObjectURL(file);
+            const a = document.createElement('a');
+            a.href = fileURL;
+            a.target = '_blank';
+            a.download = file.name;
+            a.click();
+        }
+    }
+    get cssModifiers() {
+        return {
+            'digi-form-file-upload--small': this.afVariation == 'small',
+            'digi-form-file-upload--medium': this.afVariation == 'medium',
+            'digi-form-file-upload--large': this.afVariation == 'large',
+            'digi-form-file-upload--has-errors': this.errorMessages.length > 0
+        };
+    }
+    renderErrorMessage() {
+        if (!this.error) {
+            return;
+        }
+        this.readErrorMessagesToAssistiveTechnologies();
+        const showBorder = this.files.length > 0 ? 'with-files' : '';
+        return (index.h("div", { class: 'digi-form-file-upload__error-list-container ' + showBorder }, index.h("ul", { class: "digi-form-file-upload__error-list", "aria-hidden": "true" }, this.renderErrorMessages()), index.h("button", { type: "button", "aria-label": text._t.form.file_upload_reset_errors_aria_label, class: "digi-form-file-upload__button clear-button hidden-mobile", onClick: () => {
+                this.resetErrors(true);
+            } }, index.h("span", null, text._t.form.file_upload_reset_errors)), index.h("button", { type: "button", onClick: () => {
+                this.resetErrors(true);
+            }, class: "digi-form-file-upload__button clear-button hidden-desktop", "aria-label": text._t.form.file_upload_reset_errors_aria_label }, index.h("digi-icon-x-button-outline", { class: "digi-form-file-upload__button-icon clear-icon", "aria-hidden": "true" }))));
+    }
+    readErrorMessagesToAssistiveTechnologies() {
+        this._srTextContainer.textContent = '';
+        const srTexts = this.errorMessages.map((error) => {
+            return error.message + ' ';
+        });
+        /* Timeouten behövs för att state och element ska hinna renderas om innan innehållet ändras.
+           Vi märkte att det blir problem för hjälpmedel om den inte är på plats.  */
+        setTimeout(() => {
+            this._srTextContainer.textContent = srTexts.toString();
+        }, 200);
+    }
+    renderErrorMessages() {
+        return this.errorMessages.map((error) => {
+            return (index.h("li", null, index.h("digi-form-validation-message", { id: "digi-form-file-upload__error", class: "digi-form-file-upload__error", "af-variation": "error" }, error.message)));
+        });
+    }
+    renderPendingFile(file) {
+        return (index.h("div", { class: "digi-form-file-upload__item-pending-container" }, index.h("span", { class: "info-wrapper" }, index.h("digi-icon-spinner", { class: "digi-form-file-upload__spinner" }), index.h("span", { style: { margin: '0' } }, text._t.form.file_upload_progress, " ", index.h("span", { class: "hidden-mobile" }, "|")), index.h("p", { class: "digi-form-file-upload__item-name-pending hidden-mobile" }, this.getFiletypeAndShortFileName(file).name)), index.h("span", { class: "button-wrapper" }, index.h("button", { type: "button", onClick: (e) => this.onCancelFileHandler(e, file['id']), class: "digi-form-file-upload__button digi-form-file-upload__button-abort hidden-mobile", "aria-label": text._t.form.file_cancel_upload_long(file.name) }, text._t.form.file_cancel_upload), index.h("button", { type: "button", onClick: (e) => this.onCancelFileHandler(e, file['id']), class: "digi-form-file-upload__button hidden-desktop", "aria-label": text._t.form.file_cancel_upload_long(file.name) }, index.h("digi-icon-x-button-outline", { class: "digi-form-file-upload__button-icon", "aria-hidden": "true" })))));
+    }
+    renderImageThumbnail(file) {
+        if (this.afShowThumbnail) {
+            return (index.h("figure", { class: "digi-form-file-upload__item-text-container-figure", style: { margin: '0' } }, index.h("img", { "aria-hidden": "true", class: "thumbnail", src: `data:${file['type']};base64,${file['base64']}` }), index.h("figcaption", { class: "visually-hidden" }, "Miniatyr av ", file.name)));
+        }
+        return this.renderCheckmark();
+    }
+    renderCheckmark() {
+        return (index.h("span", { class: "digi-form-file-upload__item-green-check" }, index.h("digi-icon-check-circle-solid", { class: "digi-form-file-upload__item-green-check-icon" })));
+    }
+    renderPDFThumbnail(file) {
+        if (this.afShowThumbnail) {
+            return (index.h("span", { class: `${this.afShowThumbnail ? 'digi-form-file-upload__item-pdf-preview-bis' : null}`, "aria-label": file.name }, index.h("svg", { style: { scale: '1' }, width: "23.76", height: "32", xmlns: "http://www.w3.org/2000/svg" }, index.h("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" }))));
+        }
+        return this.renderCheckmark();
+    }
+    renderThumbnail(file) {
+        const fileType = this.getFiletypeAndShortFileName(file).type;
+        switch (fileType) {
+            case 'pdf':
+                return this.renderPDFThumbnail(file);
+            case 'image':
+                return this.renderImageThumbnail(file);
+            default:
+                return this.renderCheckmark();
+        }
+    }
+    renderFileName(file) {
+        if (this.afEnablePreview) {
+            return (index.h("a", { class: "digi-form-file-upload__item-name", href: "#", onClick: (e) => {
+                    this.viewUploadedFile(e, file);
+                } }, file.name));
+        }
+        else {
+            return index.h("span", { class: "digi-form-file-upload__item-name" }, file.name);
+        }
+    }
+    renderOKFile(file) {
+        return (index.h(index.Fragment, null, index.h("span", { class: "digi-form-file-upload__item-text-and-thumbnail-container" }, this.renderThumbnail(file), this.renderFileName(file)), index.h("button", { type: "button", onClick: (e) => this.onRemoveFileHandler(e, file['id']), class: "digi-form-file-upload__button digi-form-file-upload__button--mobile", "aria-label": text._t.form.file_remove(file.name) }, index.h("span", { class: "hidden-mobile" }, text._t.form.file_remove()), index.h("digi-icon-trash", { class: "digi-form-file-upload__button-icon hidden-desktop" }))));
+    }
+    renderFile(file) {
+        switch (file['status']) {
+            case 'pending':
+                return this.renderPendingFile(file);
+            default:
+                return this.renderOKFile(file);
+        }
+    }
+    renderFiles() {
+        const filesMap = this.files.map((file, index$1) => {
+            {
+                return (index.h("li", { class: "digi-form-file-upload__item-container", key: 'file-' + index$1 }, index.h("div", { class: "digi-form-file-upload__item" }, index.h("div", { class: "digi-form-file-upload__item-text-container" }, this.renderFile(file)))));
+            }
+        });
+        return filesMap;
+    }
+    renderFileContainer() {
+        if (this.files.length === 0) {
+            return;
+        }
+        return (index.h(index.Fragment, null, index.h(this.afHeadingLevel, { class: {
+                'digi-form-file-upload__files-heading': true,
+                'digi-form-file-upload__files-heading--and-errors': this.error
+            } }, this.afHeadingFiles), index.h("ul", { class: "digi-form-file-upload__files-list", tabindex: -1, ref: (el) => {
+                this._fileList = el;
+            } }, this.renderFiles())));
+    }
+    render() {
+        return (index.h(index.Fragment, { key: 'ea0f5e831e4b91840870f13a0f765bddde7f2b3f' }, index.h("digi-util-breakpoint-observer", { key: 'fdba1fa892784d3bfaa437c14ca7fe4a2d6211d0', onAfOnChange: (e) => this.breakpointHandler(e) }), index.h("div", { key: 'cc6ffd28d1478bd5f1205bd3dfe4fa84c19e8f55', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, index.h("digi-form-label", { key: 'e341b099dceeadda16bb1b00c9f294b32eb619fa', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), index.h("div", { key: 'ddb216147c7463573e772bd25cd8ea1313c0be8d', 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_enum.FormFileUploadVariation.SMALL && (index.h("div", { key: 'b5ed1a44293012aa6bdcfc86937f04bf751fc642', class: "digi-form-file-upload__upload-area-overlay" })), index.h("div", { key: 'ec86494fd7299db8e3c5e9ad9940a633fc9e73a8', class: "digi-form-file-upload__text-area" }, index.h("button", { key: 'adcc823a998bce77bd83f2c0ee486f55d060204b', 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'
+            } }, index.h("digi-icon-paperclip", { key: 'ae23c375fcbbbf3e4b8b105d7e30d9c8316fc5f3', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
+            ? this.afUploadBtnText
+            : text._t.form.file_choose), index.h("input", { key: '5d2beb87d1565c478cfa280b9790fc25de90e958', 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" }), index.h("span", { key: 'c8e9e00250ab4cb9da92bd7695fb389ddd74428a' }, this.afVariation !== formFileUploadVariation_enum.FormFileUploadVariation.SMALL &&
+            text._t.form.file_dropzone))), index.h("p", { key: 'e54f8e9d99ddd6b39833c32f3080c6f7eef840a9', class: "visually-hidden", role: this.errorMessageIsAlert ? 'alert' : null, "aria-atomic": "true", ref: (el) => {
+                this._srTextContainer = el;
+            } }), (this.files.length > 0 || this.error) && (index.h("div", { key: '5f246f4669dc97e046855e46f25792da5325051c', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "afValidationText": [{
+                "afValidationTextChange": 0
+            }]
+    }; }
+};
+FormFileUpload.style = formFileUploadCss();
+
+exports.digi_form_file_upload = FormFileUpload;