'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-7a477838.js');
const text = require('./text-3157012b.js');
const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
const formFileUploadVariation_enum = require('./form-file-upload-variation.enum-634cfae8.js');
const utilBreakpointObserverBreakpoints_enum = require('./util-breakpoint-observer-breakpoints.enum-e96d3a84.js');
const formValidationMessageVariation_enum = require('./form-validation-message-variation.enum-855ae0be.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) {
        index.registerInstance(this, hostRef);
        this.afOnUploadFile = index.createEvent(this, "afOnUploadFile", 7);
        this.afOnRemoveFile = index.createEvent(this, "afOnRemoveFile", 7);
        this.afOnCancelFile = index.createEvent(this, "afOnCancelFile", 7);
        this.afOnReady = index.createEvent(this, "afOnReady", 3);
        this.afShowModal = index.createEvent(this, "afShowModal", 7);
        this.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 = text._t.form.file_upload;
        this.afLabelDescription = undefined;
        this.afVariation = formFileUploadVariation_enum.FormFileUploadVariation.SMALL;
        this.afId = randomIdGenerator_util.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 = text._t.form.file_uploaded_files;
        this.afAnnounceIfOptionalText = undefined;
        this.afFileMaxSizeText = undefined;
        this.afShowThumbnail = false;
        this.afEnablePreview = false;
        this.afValidationText = undefined;
        this.afValidation = formFileUploadVariation_enum.FormFileUploadValidation.DISABLED;
        this.afHeadingLevel = formFileUploadVariation_enum.FormFileUploadHeadingLevel.H2;
    }
    afValidationTextChange() {
        this.setValidationText();
    }
    breakpointHandler(e) {
        if (e.detail.value) {
            if (e.detail.value === utilBreakpointObserverBreakpoints_enum.UtilBreakpointObserverBreakpoints.SMALL) {
                this.afVariation = formFileUploadVariation_enum.FormFileUploadVariation.SMALL;
            }
            else {
                this.afVariation = this.aforiginalVariation;
            }
        }
    }
    /**
     * Används för att skicka in en validerad fil tillbaks till komponenten. Förväntar sig att filen redan finns i komponenten med status "pending".
     * @en Send a validated file to the component. Expects file to exist in component with status "pending".
     */
    async afMValidateFile(file) {
        if (!this.fileExistInFiles(file)) {
            return;
        }
        this.removeFileFromList(file['id']);
        if (file['status'] !== 'error') {
            /* Måste göra en kopia av filen för att komponenten ska rendera om sig.
             * Annars kan den peka på samma referens och förstår inte att statusen har ändrats.  */
            const copiedFile = new File([file], file.name, { type: file.type });
            copiedFile['id'] = file['id'];
            copiedFile['status'] = file['status'];
            copiedFile['base64'] = await this.toBase64(file);
            this.files = [...this.files, copiedFile];
        }
        else {
            this.validateFile(file);
        }
    }
    /**
     * Få ut alla uppladdade filer
     * @en Get all uploaded files
     */
    async afMGetAllFiles() {
        return this.files;
    }
    /**
     * Hämta ut komponentens validitets-state och felmeddelanden
     * @en Get component validity and error messages
     */
    async afMGetValidationState() {
        return { isValid: !this.error, errorMessages: this.errorMessages };
    }
    /**
     * Importera lista med filer utan att trigga uppladdningsevent. Ett objekt måste innehålla id, status och filen själv.
     * @en Import array with files without triggering upload event. A file object needs to contain an id, status and the file itself.
     */
    async afMImportFiles(files) {
        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;
    }
    componentWillLoad() {
        this.aforiginalVariation = this.afVariation;
    }
    componentDidLoad() {
        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_enum.FormValidationMessageVariation.ERROR) {
            const message = file['error']
                ? file['error']
                : text._t.form.file_error_unknown_error;
            this.addErrorMessage(file.name, message);
        }
    }
    validateMaxSize(file) {
        if (file.size > this.fileMaxSize) {
            const message = this.afFileMaxSizeText
                ? this.afFileMaxSizeText
                : text._t.form.file_error_too_large(file.name, this.afFileMaxSize);
            this.addErrorMessage(file.name, message);
        }
    }
    validateFileType(file) {
        if (!this.checkAcceptedTypes(file)) {
            this.addErrorMessage(file.name, text._t.form.file_error_filetype_not_allowed(file.name, this.afFileTypes));
        }
    }
    validateFile(file) {
        this.validateIfFileIsAlreadyUploaded(file);
        this.validateFileStatus(file);
        this.validateMaxSize(file);
        this.validateFileType(file);
        this.error = this.errorMessages.length > 0;
    }
    onCancelFileHandler(e, id) {
        e.preventDefault();
        const fileFromList = this.removeFileFromList(id);
        fileFromList['status'] = 'error';
        fileFromList['error'] = text._t.form.file_upload_canceled;
        this.afOnCancelFile.emit(fileFromList);
    }
    removeFileFromList(id) {
        const index = this.getIndexOfFile(id);
        if (index === -1) {
            return;
        }
        const removedFile = this.files[index];
        this.files = [
            ...this.files.slice(0, index),
            ...this.files.slice(index + 1)
        ];
        return removedFile;
    }
    getIndexOfFile(id) {
        const index = this.files.findIndex((file) => file['id'] == id);
        return index;
    }
    getFilesThatAreOK(files) {
        const validFiles = [];
        files.forEach((file) => {
            let isValid = true;
            this.errorMessages.forEach((message) => {
                if (message.fileName === file.name) {
                    isValid = false;
                }
            });
            if (isValid) {
                validFiles.push(file);
            }
        });
        return validFiles;
    }
    validateIfFileIsAlreadyUploaded(file) {
        for (const item of this.files) {
            if (item.name === file.name) {
                this.addErrorMessage(file.name, text._t.form.file_error_exists(file.name));
            }
        }
    }
    handleFiles(e) {
        var _a, _b;
        this.resetErrors();
        const fileList = e.dataTransfer ? (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files : (_b = e.target) === null || _b === void 0 ? void 0 : _b.files;
        const filesToValidate = [];
        Array.from(fileList).forEach((file) => {
            filesToValidate.push(file);
        });
        if (!filesToValidate || filesToValidate.length === 0) {
            return;
        }
        const numberOfFiles = filesToValidate.length + this.files.length;
        if (numberOfFiles > this.afMaxFiles) {
            this.addErrorMessage('', text._t.form.file_error_too_many);
            this.error = true;
            return;
        }
        filesToValidate.forEach((file) => {
            this.validateFile(file);
        });
        const filesThatArOK = this.errorMessages.length === 0
            ? filesToValidate
            : this.getFilesThatAreOK(filesToValidate);
        if (filesThatArOK.length === 0) {
            return;
        }
        const formData = new FormData();
        filesThatArOK.forEach((file) => {
            formData.append('file', file);
        });
        for (const obj of formData.entries()) {
            this.addFileStatusAndEmitFiles(obj[1]);
        }
        this._input.value = '';
    }
    onButtonUploadFileHandler(e) {
        e.preventDefault();
        if (!e.target.files)
            return;
        this.handleFiles(e);
    }
    onRemoveFileHandler(e, id) {
        e.preventDefault();
        this.resetErrors();
        const fileToRemove = this.removeFileFromList(id);
        this.afOnRemoveFile.emit(fileToRemove);
        this._input.value = '';
        this.handleFocusAfterFileRemoved();
    }
    handleFocusAfterFileRemoved() {
        /* Timeouten behövs för att state och element ska hinna renderas om innan fokus flyttas.
           Vi märkte att det blir problem för hjälpmedel om den inte är på plats.  */
        setTimeout(() => {
            if (this.files.length > 0) {
                this._fileList.focus();
            }
            else {
                this._uploadButton.focus();
            }
        }, 100);
    }
    emitFile(file) {
        const index = this.getIndexOfFile(file['id']);
        if (this.afValidation === formFileUploadVariation_enum.FormFileUploadValidation.ENABLED) {
            this.afOnUploadFile.emit(this.files[index]);
        }
        else {
            this.files[index]['status'] = 'OK';
            this.afOnUploadFile.emit(this.files[index]);
        }
    }
    async addFileStatusAndEmitFiles(file) {
        file['id'] = randomIdGenerator_util.randomIdGenerator('file');
        file['status'] = 'pending';
        file['base64'] = await this.toBase64(file);
        this.files = [...this.files, file];
        this.emitFile(file);
    }
    handleDrop(e) {
        e.stopPropagation();
        e.preventDefault();
        this.fileHover = false;
        if (e.dataTransfer.files) {
            this.handleFiles(e);
        }
    }
    handleAllowDrop(e) {
        if (this.afVariation === formFileUploadVariation_enum.FormFileUploadVariation.SMALL)
            return;
        e.stopPropagation();
        e.preventDefault();
    }
    handleOnDragEnterLeave(e) {
        this.handleAllowDrop(e);
        this.fileHover = !this.fileHover;
    }
    handleInputClick(e) {
        e.stopPropagation();
        this.afShowModal.emit();
        this._input.click();
    }
    getFiletypeAndShortFileName(file) {
        let fileType = null;
        let fileName = file.name;
        const fileExtension = fileName.split('.').pop();
        const fileWithoutExtension = fileName.replace('.' + fileExtension, '');
        const minChars = window.innerWidth < 769 ? 6 : fileName.length;
        const maxChars = window.innerWidth < 769 ? 14 : fileName.length;
        if (String(file['type']).split('/')[0] === 'image') {
            fileType = 'image';
        }
        else if (String(file['type']).split('/')[1] === 'pdf') {
            fileType = 'pdf';
        }
        else {
            fileType = 'default';
        }
        if (fileName.length > minChars) {
            fileName =
                fileWithoutExtension.substring(0, minChars) + '...' + fileExtension;
        }
        else if (fileName.length > maxChars) {
            fileName = fileWithoutExtension.substring(0, 6) + '...' + fileExtension;
        }
        else {
            fileName = file.name;
        }
        return { type: fileType, name: fileName };
    }
    // If its a pdf or an image the file is opened on another tab, any other file formats are downloaded
    async viewUploadedFile(e, file) {
        e.preventDefault();
        if (this.getFiletypeAndShortFileName(file).type === 'image') {
            const w = window.open();
            w.document.write(`<img src="data:${file['type']};base64,${file['base64']}" alt="${file.name}" />`);
            w.document.title = file['name'];
        }
        else if (this.getFiletypeAndShortFileName(file).type === 'pdf') {
            (async () => {
                const pdfstr = await fetch(`data:application/pdf;base64,${file['base64']}`);
                const blobFromFetch = await pdfstr.blob();
                const blob = new Blob([blobFromFetch], { type: 'application/pdf' });
                const blobUrl = URL.createObjectURL(blob);
                setTimeout(() => {
                    window.open(blobUrl, '_blank');
                }, 30);
            })();
        }
        else {
            const fileURL = URL.createObjectURL(file);
            const a = document.createElement('a');
            a.href = fileURL;
            a.target = '_blank';
            a.download = file.name;
            a.click();
        }
    }
    get cssModifiers() {
        return {
            'digi-form-file-upload--small': this.afVariation == 'small',
            'digi-form-file-upload--medium': this.afVariation == 'medium',
            'digi-form-file-upload--large': this.afVariation == 'large',
            'digi-form-file-upload--has-errors': this.errorMessages.length > 0
        };
    }
    renderErrorMessage() {
        if (!this.error) {
            return;
        }
        this.readErrorMessagesToAssistiveTechnologies();
        const showBorder = this.files.length > 0 ? 'with-files' : '';
        return (index.h("div", { class: 'digi-form-file-upload__error-list-container ' + showBorder }, index.h("ul", { class: "digi-form-file-upload__error-list", "aria-hidden": "true" }, this.renderErrorMessages()), index.h("button", { type: "button", "aria-label": text._t.form.file_upload_reset_errors_aria_label, class: "digi-form-file-upload__button clear-button hidden-mobile", onClick: () => {
                this.resetErrors(true);
            } }, index.h("span", null, text._t.form.file_upload_reset_errors)), index.h("button", { type: "button", onClick: () => {
                this.resetErrors(true);
            }, class: "digi-form-file-upload__button clear-button hidden-desktop", "aria-label": text._t.form.file_upload_reset_errors_aria_label }, index.h("digi-icon-x-button-outline", { class: "digi-form-file-upload__button-icon clear-icon", "aria-hidden": "true" }))));
    }
    readErrorMessagesToAssistiveTechnologies() {
        this._srTextContainer.textContent = '';
        const srTexts = this.errorMessages.map((error) => {
            return error.message + ' ';
        });
        /* Timeouten behövs för att state och element ska hinna renderas om innan innehållet ändras.
           Vi märkte att det blir problem för hjälpmedel om den inte är på plats.  */
        setTimeout(() => {
            this._srTextContainer.textContent = srTexts.toString();
        }, 200);
    }
    renderErrorMessages() {
        return this.errorMessages.map((error) => {
            return (index.h("li", null, index.h("digi-form-validation-message", { id: "digi-form-file-upload__error", class: "digi-form-file-upload__error", "af-variation": "error" }, error.message)));
        });
    }
    renderPendingFile(file) {
        return (index.h("div", { class: "digi-form-file-upload__item-pending-container" }, index.h("span", { class: "info-wrapper" }, index.h("digi-icon-spinner", { class: "digi-form-file-upload__spinner" }), index.h("span", { style: { margin: '0' } }, text._t.form.file_upload_progress, " ", index.h("span", { class: "hidden-mobile" }, "|")), index.h("p", { class: "digi-form-file-upload__item-name-pending hidden-mobile" }, this.getFiletypeAndShortFileName(file).name)), index.h("span", { class: "button-wrapper" }, index.h("button", { type: "button", onClick: (e) => this.onCancelFileHandler(e, file['id']), class: "digi-form-file-upload__button digi-form-file-upload__button-abort hidden-mobile", "aria-label": text._t.form.file_cancel_upload_long(file.name) }, text._t.form.file_cancel_upload), index.h("button", { type: "button", onClick: (e) => this.onCancelFileHandler(e, file['id']), class: "digi-form-file-upload__button hidden-desktop", "aria-label": text._t.form.file_cancel_upload_long(file.name) }, index.h("digi-icon-x-button-outline", { class: "digi-form-file-upload__button-icon", "aria-hidden": "true" })))));
    }
    renderImageThumbnail(file) {
        if (this.afShowThumbnail) {
            return (index.h("figure", { class: "digi-form-file-upload__item-text-container-figure", style: { margin: '0' } }, index.h("img", { "aria-hidden": "true", class: "thumbnail", src: `data:${file['type']};base64,${file['base64']}` }), index.h("figcaption", { class: "visually-hidden" }, "Miniatyr av ", file.name)));
        }
        return this.renderCheckmark();
    }
    renderCheckmark() {
        return (index.h("span", { class: "digi-form-file-upload__item-green-check" }, index.h("digi-icon-check-circle-solid", null)));
    }
    renderPDFThumbnail(file) {
        if (this.afShowThumbnail) {
            return (index.h("span", { class: `${this.afShowThumbnail ? 'digi-form-file-upload__item-pdf-preview-bis' : null}`, "aria-label": file.name }, index.h("svg", { style: { scale: '1' }, width: "23.76", height: "32", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M22.888 6.124 17.696.88A2.955 2.955 0 0 0 15.6 0H2.97C1.33.006 0 1.35 0 3.006V29C0 30.657 1.33 32 2.97 32h17.82c1.64 0 2.97-1.343 2.97-3V8.249a3.03 3.03 0 0 0-.872-2.124Zm-2.34 1.88H15.84V3.25l4.709 4.756ZM2.97 29.002V3.006h9.9v6.498c0 .831.662 1.5 1.485 1.5h6.435v17.997H2.97Zm15.481-8.98c-.755-.75-2.908-.544-3.985-.406-1.064-.656-1.775-1.562-2.277-2.893.242-1.006.625-2.537.335-3.5-.26-1.637-2.34-1.474-2.636-.368-.273 1.006-.025 2.406.433 4.193-.619 1.493-1.54 3.499-2.19 4.649-1.238.643-2.909 1.637-3.156 2.887-.204.987 1.609 3.449 4.708-1.95 1.386-.462 2.896-1.031 4.233-1.256 1.17.637 2.537 1.062 3.452 1.062 1.578 0 1.733-1.762 1.083-2.418ZM6.194 24.883c.315-.856 1.516-1.844 1.88-2.187-1.175 1.893-1.88 2.23-1.88 2.187Zm5.049-11.91c.458 0 .414 2.005.111 2.549-.272-.869-.266-2.55-.111-2.55Zm-1.51 8.535c.6-1.056 1.114-2.312 1.528-3.418.514.944 1.17 1.7 1.863 2.219-1.287.268-2.407.818-3.391 1.2Zm8.143-.312s-.31.375-2.308-.488c2.172-.162 2.53.338 2.308.488Z", fill: "var(--digi--color--icon--cta)", "fill-rule": "evenodd" }))));
        }
        return this.renderCheckmark();
    }
    renderThumbnail(file) {
        const fileType = this.getFiletypeAndShortFileName(file).type;
        switch (fileType) {
            case 'pdf':
                return this.renderPDFThumbnail(file);
            case 'image':
                return this.renderImageThumbnail(file);
            default:
                return this.renderCheckmark();
        }
    }
    renderFileName(file) {
        if (this.afEnablePreview) {
            return (index.h("a", { class: "digi-form-file-upload__item-name", href: "#", onClick: (e) => {
                    this.viewUploadedFile(e, file);
                } }, file.name));
        }
        else {
            return index.h("span", { class: "digi-form-file-upload__item-name" }, file.name);
        }
    }
    renderOKFile(file) {
        return (index.h(index.Fragment, null, index.h("span", { class: "digi-form-file-upload__item-text-and-thumbnail-container" }, this.renderThumbnail(file), this.renderFileName(file)), index.h("button", { type: "button", onClick: (e) => this.onRemoveFileHandler(e, file['id']), class: "digi-form-file-upload__button digi-form-file-upload__button--mobile", "aria-label": text._t.form.file_remove(file.name) }, index.h("span", { class: "hidden-mobile" }, text._t.form.file_remove()), index.h("digi-icon-trash", { class: "digi-form-file-upload__button-icon hidden-desktop" }))));
    }
    renderFile(file) {
        switch (file['status']) {
            case 'pending':
                return this.renderPendingFile(file);
            default:
                return this.renderOKFile(file);
        }
    }
    renderFiles() {
        const filesMap = this.files.map((file, index$1) => {
            {
                return (index.h("li", { class: "digi-form-file-upload__item-container", key: 'file-' + index$1 }, index.h("div", { class: "digi-form-file-upload__item" }, index.h("div", { class: "digi-form-file-upload__item-text-container" }, this.renderFile(file)))));
            }
        });
        return filesMap;
    }
    renderFileContainer() {
        if (this.files.length === 0) {
            return;
        }
        return (index.h(index.Fragment, null, index.h(this.afHeadingLevel, { class: {
                'digi-form-file-upload__files-heading': true,
                'digi-form-file-upload__files-heading--and-errors': this.error
            } }, this.afHeadingFiles), index.h("ul", { class: "digi-form-file-upload__files-list", tabindex: -1, ref: (el) => {
                this._fileList = el;
            } }, this.renderFiles())));
    }
    render() {
        return (index.h(index.Fragment, { key: '3c3b10acd16e7e8df33eb57139a4d841e576a4d6' }, index.h("digi-util-breakpoint-observer", { key: 'f0cfe2d2962ee2755757ceed6dc2e22c899677e0', onAfOnChange: (e) => this.breakpointHandler(e) }), index.h("div", { key: '1f356bc476148a1b387025877f7ce5107388b7c5', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, index.h("digi-form-label", { key: 'b881b2cbc54e3bb58e64874e71c8133bfb48b3d3', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), index.h("div", { key: 'ff17bfc6fa0a50352b3f37863f799e421dc51070', class: {
                'digi-form-file-upload__upload-area': true,
                'digi-form-file-upload__upload-area--hover': this.fileHover
            }, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), onDragEnter: (e) => this.handleOnDragEnterLeave(e), onDragLeave: (e) => this.handleOnDragEnterLeave(e), onClick: (e) => this.handleInputClick(e) }, this.fileHover &&
            this.afVariation != formFileUploadVariation_enum.FormFileUploadVariation.SMALL && (index.h("div", { key: '62df2861282318e64d22706e8ea3c8b6c0c1a21b', class: "digi-form-file-upload__upload-area-overlay" })), index.h("div", { key: '6a4ad53626f507b371a1279f77b8076eb09ed844', class: "digi-form-file-upload__text-area" }, index.h("button", { key: '581c5393e78277ff20a319c6e2da8da6383379e9', type: "button", ref: (el) => {
                this._uploadButton = el;
            }, onClick: (e) => this.handleInputClick(e), class: "digi-form-file-upload__button hidden_mobile", style: {
                margin: '0'
            } }, index.h("digi-icon-paperclip", { key: 'c636d31cfc7cd9723f7e0b0c1fda4055da43f7b3', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
            ? this.afUploadBtnText
            : text._t.form.file_choose), index.h("input", { key: '5588622cf835074d7dc0efa97a99d5e21a1ccfee', ref: (el) => {
                this._input = el;
            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), index.h("span", { key: 'c5d84449ecdd6a0ffacc044bcfdc68ee6eac1b05' }, this.afVariation !== formFileUploadVariation_enum.FormFileUploadVariation.SMALL &&
            text._t.form.file_dropzone))), index.h("p", { key: 'dc43de81b8217c4ce6befe4034adb950d0faf7b3', class: "visually-hidden", role: "alert", "aria-atomic": "true", ref: (el) => {
                this._srTextContainer = el;
            } }), (this.files.length > 0 || this.error) && (index.h("div", { key: '820daa5debbee48feb5236c125abb22352a8a707', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
    }
    get hostElement() { return index.getElement(this); }
    static get watchers() { return {
        "afValidationText": ["afValidationTextChange"]
    }; }
};
FormFileUpload.style = DigiFormFileUploadStyle0;

exports.digi_form_file_upload = FormFileUpload;
