@designsystem-se/af 38.2.0 → 38.2.1-beta.dark-mode

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

@@ -1,598 +0,0 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-148a7577.js';
-import { _ as _t } from './text-8f88c0f6.js';
-import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
-import { b as FormFileUploadVariation, a as FormFileUploadValidation, F as FormFileUploadHeadingLevel } from './form-file-upload-variation.enum-9c49ec5e.js';
-import { U as UtilBreakpointObserverBreakpoints } from './util-breakpoint-observer-breakpoints.enum-6d004731.js';
-import { F as FormValidationMessageVariation } from './form-validation-message-variation.enum-bcef8a9d.js';
-
-const formFileUploadCss = ".sc-digi-form-file-upload-h {\n  --digi--form-file-upload--color--background--small--default: var(--digi--color--background--interactive--default--quaternary);\n  --digi--form-file-upload--color--background--small--hover: var(--digi--color--background--interactive--hover--secondary);\n  --digi--form-file-upload--color--background--medium--default: var(--digi--color--background--interactive--default--quaternary);\n  --digi--form-file-upload--color--background--medium--hover: var(--digi--color--background--interactive--hover--secondary);\n  --digi--form-file-upload--color--background--large--default: var(--digi--color--background--interactive--default--quaternary);\n  --digi--form-file-upload--color--background--large--hover: var(--digi--color--background--interactive--hover--secondary);\n  --digi--form-file-upload--color--border--small--default: var(--digi--color--border--interactive--default--on-input-nuance);\n  --digi--form-file-upload--color--border--small--hover: var(--digi--color--border--interactive--hover--primary);\n  --digi--form-file-upload--color--border--medium--default: var(--digi--color--border--interactive--default--on-input-nuance);\n  --digi--form-file-upload--color--border--medium--hover: var(--digi--color--border--interactive--hover--primary);\n  --digi--form-file-upload--color--border--large--default: var(--digi--color--border--interactive--default--on-input-nuance);\n  --digi--form-file-upload--color--border--large--hover: var(--digi--color--border--interactive--hover--primary);\n  --digi--form-file-upload--border-width--small--default: var(--digi--border-width--secondary);\n  --digi--form-file-upload--border-width--small--hover: var(--digi--border-width--primary);\n  --digi--form-file-upload--border-width--medium--default: var(--digi--border-width--secondary);\n  --digi--form-file-upload--border-width--medium--hover: var(--digi--border-width--primary);\n  --digi--form-file-upload--border-width--large--default: var(--digi--border-width--secondary);\n  --digi--form-file-upload--border-width--large--hover: var(--digi--border-width--primary);\n  --digi--form-file-upload--border-style--small--default: var(--digi--global--border-style--none);\n  --digi--form-file-upload--border-style--medium--default: var(--digi--global--border-style--dashed);\n  --digi--form-file-upload--border-style--large--default: var(--digi--global--border-style--dashed);\n  --digi--form-file-upload--border-radius--small--default: var(--digi--border-radius--secondary);\n  --digi--form-file-upload--border-radius--medium--default: var(--digi--border-radius--secondary);\n  --digi--form-file-upload--border-radius--large--default: var(--digi--border-radius--secondary);\n  --digi--form-file-upload--padding--small: var(--digi--gutter--medium) var(--digi--gutter--largest);\n  --digi--form-file-upload--padding--medium: var(--digi--gutter--medium) var(--digi--gutter--medium) var(--digi--global--spacing--largest-2) var(--digi--gutter--medium);\n  --digi--form-file-upload--padding--large: var(--digi--gutter--medium) var(--digi--gutter--medium) var(--digi--global--spacing--largest-2) var(--digi--gutter--medium);\n  --digi--form-file-upload--font-size--small: var(--digi--global--typography--font-size--small);\n  --digi--form-file-upload--font-size--medium: var(--digi--global--typography--font-size--base);\n  --digi--form-file-upload--font-size--large: var(--digi--global--typography--font-size--large);\n  --digi--form-file-upload--heading--font-family: var(--digi--global--typography--font-family--default);\n  --digi--form-file-upload--heading--font-weight: var(--digi--typography--heading-4--font-weight--desktop);\n  --digi--form-file-upload--heading--font-size: var(--digi--typography--heading-4--font-size--desktop);\n  --digi--form-file-upload--heading--font-size--large: var(--digi--typography--heading-4--font-size--desktop-large);\n  --digi--form-file-upload--font-family: var(--digi--global--typography--font-family--default);\n  --digi--form-file-upload--font-weight: var(--digi--typography--form-file-upload--font-weight--desktop);\n  --digi--form-file-upload--button-text--color--default: var(--digi--color--text--interactive--primary);\n  --digi--form-file-upload--button-text--color--hover: var(--digi--color--text--interactive--primary);\n  --digi--form-file-upload--padding--small--icon: var(--digi--global--spacing--smaller) var(--digi--global--spacing--smallest-2);\n  --digi--form-file-upload--padding--medium--icon: var(--digi--global--spacing--base) var(--digi--global--spacing--smallest-2);\n  --digi--form-file-upload--width--small: 132px;\n  --digi--form-file-upload--width--medium: 304px;\n  --digi--form-file-upload--width--large: inherit;\n  --digi--form-file-upload--border--error: var(--digi--global--border-style--solid) solid;\n  --digi--form-file-upload--border-color--error: var(--digi--color--border--interactive--validation--error);\n  --digi--form-file-upload--border--error--width: var(--digi--border-width--secondary);\n  --digi--form-file-upload--background--error: var(--digi--color--background--interactive--validation--error);\n  container-type: inline-size;\n  display: block;\n  width: 100%;\n}\n.sc-digi-form-file-upload-h a.sc-digi-form-file-upload {\n  font-weight: var(--digi--global--typography--font-weight--semibold);\n  color: var(--digi--color--text--interactive--primary);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload.sc-digi-form-file-upload {\n  font-family: var(--digi--global--typography--font-family--default);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload--small.sc-digi-form-file-upload {\n  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);\n  --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--small--default);\n  --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--small--hover);\n  --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--small--default);\n  --COLOR--BORDER--HOVER: var(--digi--form-file-upload--color--border--small--hover);\n  --BORDER-STYLE--DEFAULT: var(--digi--form-file-upload--border-style--small--default);\n  --BORDER-RADIUS--DEFAULT: var(--digi--form-file-upload--border-radius--small--default);\n  --BORDER-WIDTH--DEFAULT: var(--digi--form-file-upload--border-width--small--default);\n  --WIDTH: var(--digi--form-file-upload--width--small);\n  --FONT-WEIGHT: var(--digi--form-file-upload--font-weight);\n  --PADDING: var(--digi--form-file-upload--padding--small);\n  --ICON--PADDING: var(--digi--form-file-upload--padding--small--icon);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload--medium.sc-digi-form-file-upload {\n  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);\n  --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--medium--default);\n  --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--medium--hover);\n  --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--medium--default);\n  --COLOR--BORDER--HOVER: var(--digi--form-file-upload--color--border--medium--hover);\n  --BORDER-STYLE--DEFAULT: var(--digi--form-file-upload--border-style--medium--default);\n  --BORDER-RADIUS--DEFAULT: var(--digi--form-file-upload--border-radius--medium--default);\n  --BORDER-WIDTH--DEFAULT: var(--digi--form-file-upload--border-width--medium--default);\n  --WIDTH: var(--digi--form-file-upload--width--medium);\n  --FONT-WEIGHT: var(--digi--form-file-upload--font-weight);\n  --PADDING: var(--digi--form-file-upload--padding--medium);\n  --ICON--PADDING: var(--digi--form-file-upload--padding--medium--icon);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload--large.sc-digi-form-file-upload {\n  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);\n  --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--large--default);\n  --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--large--hover);\n  --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--large--default);\n  --COLOR--BORDER--HOVER: var(--digi--form-file-upload--color--border--large--hover);\n  --BORDER-STYLE--DEFAULT: var(--digi--form-file-upload--border-style--large--default);\n  --BORDER-RADIUS--DEFAULT: var(--digi--form-file-upload--border-radius--large--default);\n  --BORDER-WIDTH--DEFAULT: var(--digi--form-file-upload--border-width--large--default);\n  --WIDTH: var(--digi--form-file-upload--width--large);\n  --FONT-WEIGHT: var(--digi--form-file-upload--font-weight);\n  --PADDING: var(--digi--form-file-upload--padding--large);\n  --ICON--PADDING: var(--digi--form-file-upload--padding--medium--icon);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload--has-errors.sc-digi-form-file-upload {\n  --BORDER-STYLE--DEFAULT: var(--digi--form-file-upload--border--error);\n  --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--border-color--error);\n  --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--border-color--error);\n  --BORDER-WIDTH--DEFAULT: var(--digi--form-file-upload--border--error--width);\n  --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--background--error);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__spinner.sc-digi-form-file-upload {\n  margin-right: 0.5rem;\n  animation: animation__rotation 3s infinite linear;\n  transform-origin: center;\n  --digi--icon--height: 1rem;\n}\n@media (prefers-reduced-motion) {\n  .sc-digi-form-file-upload-h .digi-form-file-upload__spinner.sc-digi-form-file-upload {\n    animation: none;\n  }\n}\n@keyframes animation__rotation {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(359deg);\n  }\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__input.sc-digi-form-file-upload {\n  display: none;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload {\n  margin: 0 0 auto 0.5rem;\n  text-align: center;\n  white-space: nowrap;\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-weight: var(--digi--typography--button--font-weight--desktop);\n  font-size: var(--digi--typography--body--font-size--desktop);\n  color: var(--digi--form-file-upload--button-text--color--default);\n  display: flex;\n  align-items: center;\n  font-family: var(--digi--global--typography--font-family--default);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:hover {\n  color: var(--digi--form-file-upload--button-text--color--hover);\n  text-decoration: underline;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:hover .digi-form-file-upload__button-icon.sc-digi-form-file-upload {\n  --digi--icon--color: var(--digi--form-file-upload--button-text--color--hover);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:focus-visible {\n  outline: 2px solid black;\n  outline-offset: 2px;\n  box-shadow: 0px 0px 0px 5px white;\n  text-decoration: underline;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button-icon.sc-digi-form-file-upload {\n  --digi--icon--height: 1.25rem;\n  --digi--icon--width: 1.25rem;\n  --digi--icon--color: var(--digi--color--text--interactive--primary);\n  margin-left: 5px;\n  padding: var(--ICON--PADDING);\n  padding-right: 0;\n  padding-left: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button-icon.sc-digi-form-file-upload:hover {\n  --digi--icon--color: var(--digi--form-file-upload--button-text--color--hover);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area.sc-digi-form-file-upload {\n  border-color: var(--COLOR--BORDER--DEFAULT);\n  border-radius: var(--BORDER-RADIUS--DEFAULT);\n  border-width: var(--BORDER-WIDTH--DEFAULT);\n  border-style: var(--BORDER-STYLE--DEFAULT);\n  max-width: var(--WIDTH);\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--COLOR--BACKGROUND--DEFAULT);\n  align-items: center;\n  padding: var(--PADDING);\n  margin-bottom: var(--digi--gutter--medium);\n  margin-top: var(--digi--gutter--button-block-small);\n  position: relative;\n  cursor: pointer;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area--hover.sc-digi-form-file-upload {\n  border-color: var(--COLOR--BORDER--HOVER);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area-overlay.sc-digi-form-file-upload {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background-color: var(--COLOR--BACKGROUND--HOVER);\n  opacity: 0.1;\n  top: 0;\n  left: 0;\n  z-index: 10;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__text-area.sc-digi-form-file-upload {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__text-area.sc-digi-form-file-upload .paper-clip.sc-digi-form-file-upload {\n  padding-right: 0.5rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__files-list.sc-digi-form-file-upload {\n  max-width: none;\n  padding: 0;\n  margin: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__files.sc-digi-form-file-upload {\n  border-radius: var(--BORDER-RADIUS--DEFAULT);\n  max-width: 100%;\n  width: 100%;\n  box-sizing: border-box;\n  background-color: var(--COLOR--BACKGROUND--FILE-LIST);\n  padding: var(--digi--gutter--largest-2) var(--digi--padding--large);\n  margin-bottom: var(--digi--gutter--medium);\n  margin-top: var(--digi--gutter--medium);\n  padding-bottom: var(--digi--padding--smaller);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__files-heading.sc-digi-form-file-upload {\n  font-family: var(--digi--form-file-upload--heading--font-family);\n  font-size: var(--digi--typography--label--font-size--desktop);\n  font-weight: var(--digi--form-file-upload--heading--font-weight);\n  color: var(--digi--color--text--primary);\n  margin: var(--digi--margin--small) 0 var(--digi--margin--medium) 0;\n  display: block;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__files-heading--and-errors.sc-digi-form-file-upload {\n  margin-top: var(--digi--margin--largest);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload {\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: 0.75rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.with-files.sc-digi-form-file-upload {\n  border-bottom: var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--primary);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload .clear-button.sc-digi-form-file-upload {\n  max-height: 1.5rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload .clear-button.sc-digi-form-file-upload .clear-icon.sc-digi-form-file-upload {\n  padding-right: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload {\n  margin: 0;\n  padding: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload li.sc-digi-form-file-upload {\n  list-style: none;\n  margin-bottom: 0.75rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload li.sc-digi-form-file-upload:last-of-type {\n  margin-bottom: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item.sc-digi-form-file-upload {\n  margin: var(--digi--margin--small) 0;\n  margin-bottom: var(--digi--margin--medium);\n  width: 100%;\n  box-sizing: border-box;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-container.sc-digi-form-file-upload {\n  list-style-type: none;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-container.sc-digi-form-file-upload:nth-child(n+2) {\n  border-top: var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--primary);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .info-wrapper.sc-digi-form-file-upload {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  height: auto;\n  min-width: 20%;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .button-wrapper.sc-digi-form-file-upload {\n  display: flex;\n  min-width: 20%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload p.sc-digi-form-file-upload {\n  margin: auto var(--digi--margin--small) !important;\n  font-weight: var(--digi--form-file-upload--font-weight);\n  font-size: var(--digi--typography--body--font-size--desktop);\n  white-space: nowrap;\n  height: max-content;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .digi-form-file-upload__button-abort.sc-digi-form-file-upload {\n  margin: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-and-thumbnail-container.sc-digi-form-file-upload {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  min-width: 20%;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-green-check.sc-digi-form-file-upload {\n  width: 1.375rem;\n  height: 1.375rem;\n  display: flex;\n  align-self: baseline;\n  position: relative;\n  top: 4px;\n  left: 0px;\n  margin-right: 4px;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-green-check.sc-digi-form-file-upload svg.sc-digi-form-file-upload {\n  --digi--icon--height: 16px;\n  --digi--icon--width: 16px;\n  --digi--icon--color: var(--digi--color--icon--validation--success);\n  background-color: var(--digi--color--background--primary);\n  border-radius: 50%;\n  align-self: flex-start;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload {\n  width: 100%;\n  margin: auto 0;\n  font-weight: var(--digi--typography--button--font-weight--desktop);\n  font-size: var(--digi--typography--body--font-size--desktop);\n  height: max-content;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-name--thumbnail.sc-digi-form-file-upload {\n  font-weight: var(--digi--typography--button--font-weight--desktop);\n  font-size: var(--digi--typography--body--font-size--desktop);\n  margin: auto 0 auto var(--digi--margin--small);\n  color: var(--digi--form-file-upload--button-text--color--default);\n}\n@media (max-width: 500px) {\n  .sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload {\n    max-width: 17.5rem;\n  }\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload:focus-visible {\n  outline: 2px solid black;\n  outline-offset: 2px;\n  box-shadow: 0px 0px 0px 5px white;\n}\n@container (max-width: 620px) {\n  .sc-digi-form-file-upload-h .digi-form-file-upload__item .digi-form-file-upload__item-name {\n    max-width: 17.5rem;\n  }\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload {\n  position: relative;\n  display: flex;\n  padding: 0;\n  margin: 0;\n  justify-content: space-between;\n  align-items: center;\n  overflow-wrap: break-word;\n  gap: 32px;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-inner.sc-digi-form-file-upload {\n  display: flex;\n  width: 100%;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-figure.sc-digi-form-file-upload {\n  margin: 0;\n  align-self: flex-start;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-figure.sc-digi-form-file-upload::after {\n  position: absolute;\n  content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFF' cx='8' cy='8' r='6'/%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.925 4.236L13.01 6.3a.516.516 0 0 0 0-.73l-.73-.73a.516.516 0 0 0-.73 0L6.71 9.682l-2.26-2.26a.516.516 0 0 0-.73 0l-.73.73a.516.516 0 0 0 0 .73l3.355 3.355a.516.516 0 0 0 .73 0Z' fill='%23009322'/%3E%3C/g%3E%3C/svg%3E\");\n  top: -6px;\n  left: 24px;\n  width: 18px;\n  height: 18px;\n  overflow: hidden;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload .thumbnail.sc-digi-form-file-upload {\n  width: 2rem;\n  height: 2rem;\n  object-fit: cover;\n  flex-grow: 0;\n  margin-right: 0.75rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload .hidden.sc-digi-form-file-upload {\n  margin-left: var(--digi--margin--larger);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pdf-preview-bis.sc-digi-form-file-upload {\n  position: relative;\n  top: 6px;\n  left: 5px;\n  margin-right: 1.25rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pdf-preview-bis.sc-digi-form-file-upload::after {\n  position: absolute;\n  content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFF' cx='8' cy='8' r='6'/%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.925 4.236L13.01 6.3a.516.516 0 0 0 0-.73l-.73-.73a.516.516 0 0 0-.73 0L6.71 9.682l-2.26-2.26a.516.516 0 0 0-.73 0l-.73.73a.516.516 0 0 0 0 .73l3.355 3.355a.516.516 0 0 0 .73 0Z' fill='%23009322'/%3E%3C/g%3E%3C/svg%3E\");\n  top: -7px;\n  left: 15px;\n  width: 18px;\n  height: 18px;\n  overflow: hidden;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-info.sc-digi-form-file-upload {\n  width: 100%;\n}\n@container (max-width: 500px) {\n  .sc-digi-form-file-upload-h .digi-form-file-upload__item .digi-form-file-upload__item span {\n    margin-left: 0;\n    margin-right: auto;\n  }\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error.sc-digi-form-file-upload {\n  color: var(--digi--color--icon--validation--error);\n}\n.sc-digi-form-file-upload-h .visually-hidden.sc-digi-form-file-upload {\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n  -webkit-clip-path: inset(50%);\n  clip-path: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n  white-space: nowrap;\n}\n@container (min-width: 500px) {\n  .sc-digi-form-file-upload-h .hidden-desktop {\n    display: none !important;\n  }\n}\n@container (max-width: 499px) {\n  .sc-digi-form-file-upload-h .hidden-mobile {\n    display: none !important;\n  }\n}";
-const DigiFormFileUploadStyle0 = formFileUploadCss;
-
-const FormFileUpload = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.afOnUploadFile = createEvent(this, "afOnUploadFile", 7);
-        this.afOnRemoveFile = createEvent(this, "afOnRemoveFile", 7);
-        this.afOnCancelFile = createEvent(this, "afOnCancelFile", 7);
-        this.afOnReady = createEvent(this, "afOnReady", 3);
-        this.afShowModal = createEvent(this, "afShowModal", 7);
-        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);
-        });
-        this._input = undefined;
-        this._fileList = undefined;
-        this._uploadButton = undefined;
-        this._srTextContainer = undefined;
-        this.files = [];
-        this.error = false;
-        this.errorMessages = [];
-        this.fileHover = false;
-        this.afLabel = _t.form.file_upload;
-        this.afLabelDescription = undefined;
-        this.afVariation = FormFileUploadVariation.SMALL;
-        this.afId = randomIdGenerator('digi-form-file-upload');
-        this.afFileTypes = undefined;
-        this.afFileMaxSize = 10;
-        this.afMaxFiles = undefined;
-        this.afName = undefined;
-        this.afUploadBtnText = undefined;
-        this.afRequired = undefined;
-        this.afRequiredText = undefined;
-        this.afAnnounceIfOptional = false;
-        this.afHeadingFiles = _t.form.file_uploaded_files;
-        this.afAnnounceIfOptionalText = undefined;
-        this.afFileMaxSizeText = undefined;
-        this.afShowThumbnail = false;
-        this.afEnablePreview = false;
-        this.afValidationText = undefined;
-        this.afValidation = FormFileUploadValidation.DISABLED;
-        this.afHeadingLevel = FormFileUploadHeadingLevel.H2;
-        this.afErrorMessageIsAlert = true;
-    }
-    afValidationTextChange() {
-        this.setValidationText();
-    }
-    get errorMessageIsAlert() {
-        return (this.afErrorMessageIsAlert !== false &&
-            this.afErrorMessageIsAlert !== 'false');
-    }
-    breakpointHandler(e) {
-        if (e.detail.value) {
-            if (e.detail.value === UtilBreakpointObserverBreakpoints.SMALL) {
-                this.afVariation = 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.ERROR) {
-            const message = file['error']
-                ? file['error']
-                : _t.form.file_error_unknown_error;
-            this.addErrorMessage(file.name, message);
-        }
-    }
-    validateMaxSize(file) {
-        if (file.size > this.fileMaxSize) {
-            const message = this.afFileMaxSizeText
-                ? this.afFileMaxSizeText
-                : _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, _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'] = _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, _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('', _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 === 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('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.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 (h("div", { class: 'digi-form-file-upload__error-list-container ' + showBorder }, h("ul", { class: "digi-form-file-upload__error-list", "aria-hidden": "true" }, this.renderErrorMessages()), h("button", { type: "button", "aria-label": _t.form.file_upload_reset_errors_aria_label, class: "digi-form-file-upload__button clear-button hidden-mobile", onClick: () => {
-                this.resetErrors(true);
-            } }, h("span", null, _t.form.file_upload_reset_errors)), h("button", { type: "button", onClick: () => {
-                this.resetErrors(true);
-            }, class: "digi-form-file-upload__button clear-button hidden-desktop", "aria-label": _t.form.file_upload_reset_errors_aria_label }, 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 (h("li", null, 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 (h("div", { class: "digi-form-file-upload__item-pending-container" }, h("span", { class: "info-wrapper" }, h("digi-icon-spinner", { class: "digi-form-file-upload__spinner" }), h("span", { style: { margin: '0' } }, _t.form.file_upload_progress, " ", h("span", { class: "hidden-mobile" }, "|")), h("p", { class: "digi-form-file-upload__item-name-pending hidden-mobile" }, this.getFiletypeAndShortFileName(file).name)), h("span", { class: "button-wrapper" }, 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": _t.form.file_cancel_upload_long(file.name) }, _t.form.file_cancel_upload), h("button", { type: "button", onClick: (e) => this.onCancelFileHandler(e, file['id']), class: "digi-form-file-upload__button hidden-desktop", "aria-label": _t.form.file_cancel_upload_long(file.name) }, h("digi-icon-x-button-outline", { class: "digi-form-file-upload__button-icon", "aria-hidden": "true" })))));
-    }
-    renderImageThumbnail(file) {
-        if (this.afShowThumbnail) {
-            return (h("figure", { class: "digi-form-file-upload__item-text-container-figure", style: { margin: '0' } }, h("img", { "aria-hidden": "true", class: "thumbnail", src: `data:${file['type']};base64,${file['base64']}` }), h("figcaption", { class: "visually-hidden" }, "Miniatyr av ", file.name)));
-        }
-        return this.renderCheckmark();
-    }
-    renderCheckmark() {
-        return (h("span", { class: "digi-form-file-upload__item-green-check" }, h("digi-icon-check-circle-solid", null)));
-    }
-    renderPDFThumbnail(file) {
-        if (this.afShowThumbnail) {
-            return (h("span", { class: `${this.afShowThumbnail ? 'digi-form-file-upload__item-pdf-preview-bis' : null}`, "aria-label": file.name }, h("svg", { style: { scale: '1' }, width: "23.76", height: "32", xmlns: "http://www.w3.org/2000/svg" }, 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 (h("a", { class: "digi-form-file-upload__item-name", href: "#", onClick: (e) => {
-                    this.viewUploadedFile(e, file);
-                } }, file.name));
-        }
-        else {
-            return h("span", { class: "digi-form-file-upload__item-name" }, file.name);
-        }
-    }
-    renderOKFile(file) {
-        return (h(Fragment, null, h("span", { class: "digi-form-file-upload__item-text-and-thumbnail-container" }, this.renderThumbnail(file), this.renderFileName(file)), 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": _t.form.file_remove(file.name) }, h("span", { class: "hidden-mobile" }, _t.form.file_remove()), 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) => {
-            {
-                return (h("li", { class: "digi-form-file-upload__item-container", key: 'file-' + index }, h("div", { class: "digi-form-file-upload__item" }, h("div", { class: "digi-form-file-upload__item-text-container" }, this.renderFile(file)))));
-            }
-        });
-        return filesMap;
-    }
-    renderFileContainer() {
-        if (this.files.length === 0) {
-            return;
-        }
-        return (h(Fragment, null, h(this.afHeadingLevel, { class: {
-                'digi-form-file-upload__files-heading': true,
-                'digi-form-file-upload__files-heading--and-errors': this.error
-            } }, this.afHeadingFiles), h("ul", { class: "digi-form-file-upload__files-list", tabindex: -1, ref: (el) => {
-                this._fileList = el;
-            } }, this.renderFiles())));
-    }
-    render() {
-        return (h(Fragment, { key: 'bec280d44d534a720927ab737b34335600c3fe80' }, h("digi-util-breakpoint-observer", { key: '93983b718eda1869ff95f7a0abe8c6704395a1e0', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: '23f30473aa0dd681c6c4ea20138d3f13391bb070', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: 'c42a873187b3bf30ddfdb71561d6902a8b2f98fe', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: 'db1082e11bafb320c13a790d639d37ca821617ac', class: {
-                'digi-form-file-upload__upload-area': true,
-                'digi-form-file-upload__upload-area--hover': this.fileHover
-            }, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), onDragEnter: (e) => this.handleOnDragEnterLeave(e), onDragLeave: (e) => this.handleOnDragEnterLeave(e), onClick: (e) => this.handleInputClick(e) }, this.fileHover &&
-            this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: 'f58d5f61b5568263e9b60b255f47e6ef418c78e5', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: 'c58c52f7e2c8aa8d17fe510ef90435d488844237', class: "digi-form-file-upload__text-area" }, h("button", { key: '1bb7fa84e0778702d0e77008f7d468d560ac8e17', type: "button", id: this.afId + '-button', ref: (el) => {
-                this._uploadButton = el;
-            }, onClick: (e) => this.handleInputClick(e), class: "digi-form-file-upload__button hidden_mobile", style: {
-                margin: '0'
-            } }, h("digi-icon-paperclip", { key: 'a84b67ad055682b1c1b013ec948af0935c35ed0c', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
-            ? this.afUploadBtnText
-            : _t.form.file_choose), h("input", { key: 'd0babe3bcbc5d03f2436c0f4a7ee23a93ecb0474', ref: (el) => {
-                this._input = el;
-            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), h("span", { key: '20a4158d0462ee2f871bddb57b9e168d356573ed' }, this.afVariation !== FormFileUploadVariation.SMALL &&
-            _t.form.file_dropzone))), h("p", { key: 'ade6d22fde218536ce42daff285a1605ac16bdb1', class: "visually-hidden", role: this.errorMessageIsAlert ? 'alert' : null, "aria-atomic": "true", ref: (el) => {
-                this._srTextContainer = el;
-            } }), (this.files.length > 0 || this.error) && (h("div", { key: '06044ba8e2a5d7e76374af1dfa479c891554ab45', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
-    }
-    get hostElement() { return getElement(this); }
-    static get watchers() { return {
-        "afValidationText": ["afValidationTextChange"]
-    }; }
-};
-FormFileUpload.style = DigiFormFileUploadStyle0;
-
-export { FormFileUpload as digi_form_file_upload };