@designsystem-se/af 37.0.2-beta.1 → 38.0.0

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

@@ -0,0 +1,585 @@
+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) {
+        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;
+    }
+    /**
+     * 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.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: '1104991979216e10bd2e137de392134a9dd970f3' }, h("digi-util-breakpoint-observer", { key: '645a8f2849a39c068b77fa7c6ddfd726e834b3b2', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: 'c6b2785961f0e0b0cb2b2ccb7da42d663b9e9e3b', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: 'd51e788ee53461e075b0f73b600608646c70032f', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: '9df4b7deaca899f1c06bf615065a2fce7eea4bc0', class: {
+                'digi-form-file-upload__upload-area': true,
+                'digi-form-file-upload__upload-area--hover': this.fileHover
+            }, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), onDragEnter: (e) => this.handleOnDragEnterLeave(e), onDragLeave: (e) => this.handleOnDragEnterLeave(e), onClick: (e) => this.handleInputClick(e) }, this.fileHover &&
+            this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: '8c35b4e2523db4f4f892d2f615caedb8bb3a9ebe', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: '096b05c159ce7722687cdc0b1a0ff4889a5485e2', class: "digi-form-file-upload__text-area" }, h("button", { key: '97504d954e2f3a0e76d99fb4d5049ddea108a32f', type: "button", id: this.afId + '-button', ref: (el) => {
+                this._uploadButton = el;
+            }, onClick: (e) => this.handleInputClick(e), class: "digi-form-file-upload__button hidden_mobile", style: {
+                margin: '0'
+            } }, h("digi-icon-paperclip", { key: 'e47597d6988db6a71c22fb9ab4cfa877be4a48fa', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
+            ? this.afUploadBtnText
+            : _t.form.file_choose), h("input", { key: 'b21162f7873e21a8b3ed2d286ef154b66b95c8ec', ref: (el) => {
+                this._input = el;
+            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), h("span", { key: 'c8e448ef96e9d4f292ec88606526e06935192308' }, this.afVariation !== FormFileUploadVariation.SMALL &&
+            _t.form.file_dropzone))), h("p", { key: '8c6f1b6190eb4f87bbcd9d50f4c4929cdcf4c026', class: "visually-hidden", role: this.errorMessageIsAlert ? 'alert' : null, "aria-atomic": "true", ref: (el) => {
+                this._srTextContainer = el;
+            } }), (this.files.length > 0 || this.error) && (h("div", { key: '7faefe886463ce493824665375b3b4ab0aec5753', 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 };