@designsystem-se/af 39.3.0 → 39.4.0-beta.darkmode.1

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

@@ -1,633 +0,0 @@
-'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;