@designsystem-se/af 34.2.1-beta.1 → 34.2.1-beta.3

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

@@ -5,8 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-81fc5a97.js');
 const text = require('./text-3157012b.js');
 const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
-const formValidationMessageVariation_enum = require('./form-validation-message-variation.enum-c5ec3e2d.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}\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: 500px) {\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}\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: 0.75rem;\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;
@@ -38,7 +39,7 @@ const FormFileUpload = class {
         this.fileHover = false;
         this.afLabel = text._t.form.file_upload;
         this.afLabelDescription = undefined;
-        this.afVariation = formValidationMessageVariation_enum.FormFileUploadVariation.SMALL;
+        this.afVariation = formFileUploadVariation_enum.FormFileUploadVariation.SMALL;
         this.afId = randomIdGenerator_util.randomIdGenerator('digi-form-file-upload');
         this.afFileTypes = undefined;
         this.afFileMaxSize = 10;
@@ -54,8 +55,8 @@ const FormFileUpload = class {
         this.afShowThumbnail = false;
         this.afEnablePreview = false;
         this.afValidationText = undefined;
-        this.afValidation = formValidationMessageVariation_enum.FormFileUploadValidation.DISABLED;
-        this.afHeadingLevel = formValidationMessageVariation_enum.FormFileUploadHeadingLevel.H2;
+        this.afValidation = formFileUploadVariation_enum.FormFileUploadValidation.DISABLED;
+        this.afHeadingLevel = formFileUploadVariation_enum.FormFileUploadHeadingLevel.H2;
     }
     afValidationTextChange() {
         this.setValidationText();
@@ -63,7 +64,7 @@ const FormFileUpload = class {
     breakpointHandler(e) {
         if (e.detail.value) {
             if (e.detail.value === utilBreakpointObserverBreakpoints_enum.UtilBreakpointObserverBreakpoints.SMALL) {
-                this.afVariation = formValidationMessageVariation_enum.FormFileUploadVariation.SMALL;
+                this.afVariation = formFileUploadVariation_enum.FormFileUploadVariation.SMALL;
             }
             else {
                 this.afVariation = this.aforiginalVariation;
@@ -348,7 +349,7 @@ const FormFileUpload = class {
     }
     emitFile(file) {
         const index = this.getIndexOfFile(file['id']);
-        if (this.afValidation === formValidationMessageVariation_enum.FormFileUploadValidation.ENABLED) {
+        if (this.afValidation === formFileUploadVariation_enum.FormFileUploadValidation.ENABLED) {
             this.afOnUploadFile.emit(this.files[index]);
         }
         else {
@@ -372,7 +373,7 @@ const FormFileUpload = class {
         }
     }
     handleAllowDrop(e) {
-        if (this.afVariation === formValidationMessageVariation_enum.FormFileUploadVariation.SMALL)
+        if (this.afVariation === formFileUploadVariation_enum.FormFileUploadVariation.SMALL)
             return;
         e.stopPropagation();
         e.preventDefault();
@@ -552,7 +553,7 @@ const FormFileUpload = 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 != formValidationMessageVariation_enum.FormFileUploadVariation.SMALL && (index.h("div", { key: '399686fe6632683bd001d76a49c2b80acc50efec', class: "digi-form-file-upload__upload-area-overlay" })), index.h("div", { key: 'b7a8c341f7a1aba732b838647eaf3cd77f63d305', class: "digi-form-file-upload__text-area" }, index.h("button", { key: '856a304b06c0985506e09d58db7679d997957936', type: "button", ref: (el) => {
+            this.afVariation != formFileUploadVariation_enum.FormFileUploadVariation.SMALL && (index.h("div", { key: '399686fe6632683bd001d76a49c2b80acc50efec', class: "digi-form-file-upload__upload-area-overlay" })), index.h("div", { key: 'b7a8c341f7a1aba732b838647eaf3cd77f63d305', class: "digi-form-file-upload__text-area" }, index.h("button", { key: '856a304b06c0985506e09d58db7679d997957936', type: "button", ref: (el) => {
                 this._uploadButton = el;
             }, onClick: (e) => this.handleInputClick(e), class: "digi-form-file-upload__button hidden_mobile", style: {
                 margin: '0'
@@ -560,7 +561,7 @@ const FormFileUpload = class {
             ? this.afUploadBtnText
             : text._t.form.file_choose), index.h("input", { key: '6b1328107138c170dc25f3ee1af811520e2ab2ca', 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: 'ae398d7a43bbec39ec7c9171bbcdd5dc93d23f32' }, this.afVariation !== formValidationMessageVariation_enum.FormFileUploadVariation.SMALL &&
+            }, 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: 'ae398d7a43bbec39ec7c9171bbcdd5dc93d23f32' }, this.afVariation !== formFileUploadVariation_enum.FormFileUploadVariation.SMALL &&
             text._t.form.file_dropzone))), index.h("p", { key: 'a90e1d67f2b97736a67b4efff8a16c1d5c229e16', class: "visually-hidden", role: "alert", "aria-atomic": "true", ref: (el) => {
                 this._srTextContainer = el;
             } }), (this.files.length > 0 || this.error) && (index.h("div", { key: 'f8e442023f38b9e5c4cc8320ccd96896bbcfd606', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));

package/dist/cjs/digi-form-receipt.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-81fc5a97.js');
-const typographyVariation_enum = require('./typography-variation.enum-2cf77231.js');
+const typographyVariation_enum = require('./typography-variation.enum-d6a04b47.js');
 require('./badge-notification-shape.enum-ff802554.js');
 require('./badge-status-variation.enum-0a5adc21.js');
 require('./button-size.enum-1fd86b9e.js');
-require('./button-type.enum-406723db.js');
+require('./form-input-variation.enum-d8228d73.js');
 require('./button-variation.enum-bc521499.js');
 require('./calendar-week-view-heading-level.enum-fd0c841b.js');
 require('./bar-chart-variation.enum-a4e866b6.js');
@@ -18,9 +18,10 @@ require('./expandable-faq-item-variation.enum-89427195.js');
 require('./expandable-faq-variation.enum-af923f49.js');
 require('./footer-card-variation.enum-99555edc.js');
 require('./form-checkbox-variation.enum-d2ca879e.js');
-require('./form-validation-message-variation.enum-c5ec3e2d.js');
-require('./form-input-type.enum-daf781ba.js');
+require('./form-file-upload-variation.enum-634cfae8.js');
+require('./form-select-variation.enum-528c1bf0.js');
 require('./form-textarea-variation.enum-9c90d40f.js');
+require('./form-validation-message-variation.enum-855ae0be.js');
 require('./info-card-multi-type.enum-14746572.js');
 require('./info-card-variation.enum-64cef637.js');
 require('./layout-container-max-width.enum-7e637f44.js');

package/dist/cjs/digi-form-select-filter.cjs.entry.js

@@ -9,10 +9,10 @@ const detectClickOutside_util = require('./detectClickOutside.util-3e764eb3.js')
 const detectFocusOutside_util = require('./detectFocusOutside.util-03c62976.js');
 const text = require('./text-3157012b.js');
 require('./badge-notification-shape.enum-ff802554.js');
-const typographyVariation_enum = require('./typography-variation.enum-2cf77231.js');
+const typographyVariation_enum = require('./typography-variation.enum-d6a04b47.js');
 require('./badge-status-variation.enum-0a5adc21.js');
 require('./button-size.enum-1fd86b9e.js');
-require('./button-type.enum-406723db.js');
+const formInputVariation_enum = require('./form-input-variation.enum-d8228d73.js');
 require('./button-variation.enum-bc521499.js');
 require('./calendar-week-view-heading-level.enum-fd0c841b.js');
 require('./bar-chart-variation.enum-a4e866b6.js');
@@ -23,9 +23,10 @@ require('./expandable-faq-item-variation.enum-89427195.js');
 require('./expandable-faq-variation.enum-af923f49.js');
 require('./footer-card-variation.enum-99555edc.js');
 require('./form-checkbox-variation.enum-d2ca879e.js');
-require('./form-validation-message-variation.enum-c5ec3e2d.js');
-const formInputType_enum = require('./form-input-type.enum-daf781ba.js');
+require('./form-file-upload-variation.enum-634cfae8.js');
+require('./form-select-variation.enum-528c1bf0.js');
 require('./form-textarea-variation.enum-9c90d40f.js');
+require('./form-validation-message-variation.enum-855ae0be.js');
 require('./info-card-multi-type.enum-14746572.js');
 require('./info-card-variation.enum-64cef637.js');
 require('./layout-container-max-width.enum-7e637f44.js');
@@ -504,7 +505,7 @@ const FormSelectFilter = class {
                 'digi-form-select-filter__dropdown': true,
                 'digi-form-select-filter__dropdown--right': this.afAlignRight,
                 'digi-form-select-filter__dropdown--hidden': !this.isOpen
-            } }, index.h("fieldset", { key: 'f85b2c145d88e1ddc341756688b26b01278655c8' }, index.h("div", { key: 'b7ac99419b2b6b23a97a9c4894d22af21a34cf68', class: "digi-form-select-filter__header" }, index.h("legend", { key: 'decbffa5b7181147d8194145c335135035c0fc0f', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), index.h("digi-form-input", { key: '86f5e662b1aedbfb18d12b80a7ff10608f04ffe0', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: typographyVariation_enum.FormInputVariation.MEDIUM, afType: formInputType_enum.FormInputType.SEARCH, afValidation: typographyVariation_enum.FormInputValidation.NEUTRAL, onAfOnFocus: () => {
+            } }, index.h("fieldset", { key: 'f85b2c145d88e1ddc341756688b26b01278655c8' }, index.h("div", { key: 'b7ac99419b2b6b23a97a9c4894d22af21a34cf68', class: "digi-form-select-filter__header" }, index.h("legend", { key: 'decbffa5b7181147d8194145c335135035c0fc0f', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), index.h("digi-form-input", { key: '86f5e662b1aedbfb18d12b80a7ff10608f04ffe0', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: formInputVariation_enum.FormInputVariation.MEDIUM, afType: formInputVariation_enum.FormInputType.SEARCH, afValidation: formInputVariation_enum.FormInputValidation.NEUTRAL, onAfOnFocus: () => {
                 this.focusListItemIndex = 0;
             }, onAfOnKeyup: (e) => {
                 this.inputSearchKeyboardHandler(e.detail);

package/dist/cjs/digi-form-select_2.cjs.entry.js

@@ -0,0 +1,176 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-81fc5a97.js');
+const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
+const logger_util = require('./logger.util-fdafc086.js');
+const formSelectVariation_enum = require('./form-select-variation.enum-528c1bf0.js');
+
+const formSelectCss = ".sc-digi-form-select-h{--digi--form-select--background--empty:var(--digi--color--background--interactive--default--secondary);--digi--form-select--background--neutral:var(--digi--color--background--interactive--default--secondary);--digi--form-select--background--success:var(--digi--color--background--interactive--validation--success);--digi--form-select--background--warning:var(--digi--color--background--interactive--validation--warning);--digi--form-select--background--error:var(--digi--color--background--interactive--validation--error);--digi--form-select--border-color--neutral:var(--digi--color--border--interactive--default--on-input);--digi--form-select--border-color--success:var(--digi--color--border--interactive--validation--success);--digi--form-select--border-color--warning:var(--digi--color--border--interactive--validation--warning);--digi--form-select--border-color--error:var(--digi--color--border--interactive--validation--error);--digi--form-select--select-wrapper--position:relative;--digi--form-select--select--height--small:var(--digi--input-height--small);--digi--form-select--select--height--medium:var(--digi--input-height--medium);--digi--form-select--select--height--large:var(--digi--input-height--large);--digi--form-select--select--border-radius:var(--digi--border-radius--input);--digi--form-select--select--padding:0 var(--digi--gutter--medium);--digi--form-select--select--padding--inline-end:var(--digi--padding--large);--digi--form-select--select--border-width--neutral:var(--digi--border-width--input-regular);--digi--form-select--select--border-width--success:var(--digi--border-width--input-validation);--digi--form-select--select--border-width--error:var(--digi--border-width--input-validation);--digi--form-select--select--border-width--warning:var(--digi--border-width--input-validation);--digi--form-select--select--width:100%;--digi--form-select--select--font-size:var(--digi--typography--body--font-size--desktop);--digi--form-select--select-option--font-size:var(--digi--typography--body--font-size--desktop);--digi--form-select--label--margin-bottom:var(--digi--gutter--medium);--digi--form-select--icon--inline-end:0.75rem;--digi--form-select--icon--top:50%;--digi--form-select--icon--transform:translateY(-50%);--digi--form-select--icon--color:var(--digi--color--icon--primary);--digi--form-select--footer--margin-top:var(--digi--gutter--medium)}.sc-digi-form-select-h .digi-form-select.sc-digi-form-select{display:flex;flex-direction:column;gap:0.4em}.sc-digi-form-select-h .digi-form-select--neutral.sc-digi-form-select{--BORDER-WIDTH:var(--digi--form-select--select--border-width--neutral);--BORDER-COLOR:var(--digi--form-select--border-color--neutral);--BACKGROUND:var(--digi--form-select--background--neutral)}.sc-digi-form-select-h .digi-form-select--success.sc-digi-form-select{--BORDER-WIDTH:var(--digi--form-select--select--border-width--success);--BORDER-COLOR:var(--digi--form-select--border-color--success);--BACKGROUND:var(--digi--form-select--background--success)}.sc-digi-form-select-h .digi-form-select--warning.sc-digi-form-select{--BORDER-WIDTH:var(--digi--form-select--select--border-width--warning);--BORDER-COLOR:var(--digi--form-select--border-color--warning);--BACKGROUND:var(--digi--form-select--background--warning)}.sc-digi-form-select-h .digi-form-select--error.sc-digi-form-select{--BORDER-WIDTH:var(--digi--form-select--select--border-width--error);--BORDER-COLOR:var(--digi--form-select--border-color--error);--BACKGROUND:var(--digi--form-select--background--error)}.sc-digi-form-select-h .digi-form-select--small.sc-digi-form-select{--HEIGHT:var(--digi--form-select--select--height--small)}.sc-digi-form-select-h .digi-form-select--medium.sc-digi-form-select{--HEIGHT:var(--digi--form-select--select--height--medium)}.sc-digi-form-select-h .digi-form-select--large.sc-digi-form-select{--HEIGHT:var(--digi--form-select--select--height--large)}.sc-digi-form-select-h .digi-form-select--empty.sc-digi-form-select:not(:focus-within){--BACKGROUND:var(--digi--form-select--background--empty)}.sc-digi-form-select-h .digi-form-select__select.sc-digi-form-select{appearance:none;width:var(--digi--form-select--select--width);padding:var(--digi--form-select--select--padding);padding-inline-end:var(--digi--form-select--select--padding--inline-end);height:var(--HEIGHT);border:var(--BORDER-WIDTH) solid;border-radius:var(--digi--form-select--select--border-radius);border-color:var(--BORDER-COLOR);cursor:pointer;font-size:var(--digi--form-select--select--font-size);color:var(--digi--color--text--primary);background:var(--BACKGROUND);font-family:var(--digi--global--typography--font-family--default)}.sc-digi-form-select-h .digi-form-select__select-wrapper.sc-digi-form-select{position:var(--digi--form-select--select-wrapper--position)}.sc-digi-form-select-h .digi-form-select__select-option.sc-digi-form-select{font-size:var(--digi--form-select--select-option--font-size)}@media (min-width: 48rem){.sc-digi-form-select-h .digi-form-select__select-option.sc-digi-form-select{--digi--form-select--select-option--font-size:var(--digi--typography--font-size--l)}}.sc-digi-form-select-h .digi-form-select__select.sc-digi-form-select::-ms-expand{display:none}.sc-digi-form-select-h .digi-form-select__select.sc-digi-form-select:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.sc-digi-form-select-h .digi-form-select__icon.sc-digi-form-select{position:absolute;inset-inline-end:var(--digi--form-select--icon--inline-end);inset-block-start:var(--digi--form-select--icon--top);transform:var(--digi--form-select--icon--transform);pointer-events:none;color:var(--digi--form-select--icon--color)}.digi-form-select--neutral.sc-digi-form-select .digi-form-select__footer.sc-digi-form-select{position:absolute}";
+const DigiFormSelectStyle0 = formSelectCss;
+
+const FormSelect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.afOnChange = index.createEvent(this, "afOnChange", 7);
+        this.afOnSelect = index.createEvent(this, "afOnSelect", 7);
+        this.afOnFocus = index.createEvent(this, "afOnFocus", 7);
+        this.afOnFocusout = index.createEvent(this, "afOnFocusout", 7);
+        this.afOnBlur = index.createEvent(this, "afOnBlur", 7);
+        this.afOnDirty = index.createEvent(this, "afOnDirty", 7);
+        this.afOnReady = index.createEvent(this, "afOnReady", 3);
+        this.optionItems = [];
+        this.dirty = false;
+        this.touched = false;
+        this.hasPlaceholder = false;
+        this.afLabel = undefined;
+        this.afAriaLabel = undefined;
+        this.afRequired = undefined;
+        this.afRequiredText = undefined;
+        this.afPlaceholder = undefined;
+        this.afAnnounceIfOptional = false;
+        this.afAnnounceIfOptionalText = undefined;
+        this.afId = randomIdGenerator_util.randomIdGenerator('digi-form-select');
+        this.afName = undefined;
+        this.afDescription = undefined;
+        this.value = undefined;
+        this.afValue = undefined;
+        this.afDisableValidation = undefined;
+        this.afVariation = formSelectVariation_enum.FormSelectVariation.MEDIUM;
+        this.afValidation = formSelectVariation_enum.FormSelectValidation.NEUTRAL;
+        this.afValidationText = undefined;
+        this.afStartSelected = undefined;
+        this.afAutofocus = undefined;
+    }
+    onValueChanged(value) {
+        this.afValue = value;
+    }
+    onAfValueChanged(value) {
+        this.value = value;
+    }
+    getOptions() {
+        this.checkIfPlaceholder();
+        const options = this._observer.children;
+        if (!options || options.length <= 0) {
+            logger_util.logger.warn(`The slot contains no option elements.`, this.hostElement);
+            return;
+        }
+        this.optionItems = [...Array.from(options)]
+            .filter((el) => el.tagName.toLowerCase() === 'option')
+            .map((el) => {
+            return {
+                value: el['value'],
+                text: el['text']
+            };
+        });
+    }
+    checkIfPlaceholder() {
+        this.hasPlaceholder = !!this.afPlaceholder;
+    }
+    componentWillLoad() {
+        this.afValue ? (this.value = this.afValue) : (this.afValue = this.value);
+    }
+    componentDidLoad() {
+        this.getOptions();
+        this.afStartSelected &&
+            (this.afValue = this.optionItems[this.afStartSelected].value);
+        this.afOnReady.emit();
+    }
+    /**
+     * Returnerar en referens till formulärkontrollelementet.
+     * @en Returns a reference to the form control element.
+     */
+    async afMGetFormControlElement() {
+        return this._select;
+    }
+    get cssModifiers() {
+        return {
+            'digi-form-select--small': this.afVariation === formSelectVariation_enum.FormSelectVariation.SMALL,
+            'digi-form-select--medium': this.afVariation === formSelectVariation_enum.FormSelectVariation.MEDIUM,
+            'digi-form-select--large': this.afVariation === formSelectVariation_enum.FormSelectVariation.LARGE,
+            'digi-form-select--neutral': this.afValidation === formSelectVariation_enum.FormSelectValidation.NEUTRAL,
+            'digi-form-select--success': this.afValidation === formSelectVariation_enum.FormSelectValidation.SUCCESS,
+            'digi-form-select--warning': this.afValidation === formSelectVariation_enum.FormSelectValidation.WARNING,
+            'digi-form-select--error': this.afValidation === formSelectVariation_enum.FormSelectValidation.ERROR,
+            'digi-form-select--empty': !this.afValue &&
+                (!this.afValidation ||
+                    this.afValidation === formSelectVariation_enum.FormSelectValidation.NEUTRAL)
+        };
+    }
+    changeHandler(e) {
+        if (!this.dirty) {
+            this.afOnDirty.emit(e);
+            this.dirty = true;
+        }
+        this.value = this.afValue = e.target.value;
+        this.afOnChange.emit(e);
+    }
+    selectHandler(e) {
+        this.value = this.afValue = e.target.value;
+        this.afOnSelect.emit(e);
+    }
+    focusHandler(e) {
+        this.afOnFocus.emit(e);
+    }
+    focusoutHandler(e) {
+        this.afOnFocusout.emit(e);
+    }
+    blurHandler(e) {
+        this.afOnBlur.emit(e);
+    }
+    getSelectedItem(option) {
+        return this.afValue == option.value;
+    }
+    showValidation() {
+        return !this.afDisableValidation &&
+            this.afValidation !== formSelectVariation_enum.FormSelectValidation.NEUTRAL &&
+            this.afValidationText
+            ? true
+            : false;
+    }
+    render() {
+        return (index.h("div", { key: '49f40c92117bbce3728e70e863b1a4216413ab29', class: Object.assign({ 'digi-form-select': true }, this.cssModifiers) }, index.h("div", { key: 'aa0ab7690d810299489ffaf00cccf038ff5672d3', class: "digi-form-select__label-group" }, index.h("digi-form-label", { key: 'b6b7e0638e5a2b01701b8e23d3ae2bc4abe15cf5', afFor: this.afId, afLabel: this.afLabel, afId: `${this.afId}-label`, afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), index.h("div", { key: 'be4fe8473e1014c2a5b3dc7074234df79f281ff4', class: "digi-form-select__select-wrapper" }, index.h("select", { key: '71a7828e7675d0062f8b2fc2db48809cc7ef41fc', class: "digi-form-select__select", name: this.afName, id: this.afId, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === formSelectVariation_enum.FormSelectValidation.ERROR
+                ? 'true'
+                : 'false', ref: (el) => (this._select = el), required: this.afRequired ? this.afRequired : null, onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onInput: (e) => this.selectHandler(e), autoFocus: this.afAutofocus ? this.afAutofocus : null }, this.hasPlaceholder && (index.h("option", { key: 'f24aa09189501c39a31289d62a7fd18d8722b9b3', class: {
+                'digi-form-select__select-option': true,
+                'digi-form-select__select-option--initial-value': true
+            }, disabled: true, selected: !this.afValue, value: "" }, this.afPlaceholder)), this.optionItems.map((option, index$1) => {
+            return (index.h("option", { key: index$1, class: "digi-form-select__select-option", value: option.value, selected: this.getSelectedItem(option) }, option.text));
+        })), index.h("digi-icon-input-select-marker", { key: '8b9fd9d1affea7fe6febb7a144fffa205c8ab2b5', class: "digi-form-select__icon", slot: "icon" })), index.h("digi-util-mutation-observer", { key: '3f5b110b0a296597cb25963d885e881c0fc4657a', hidden: true, ref: (el) => (this._observer = el), onAfOnChange: (e) => {
+                e.stopImmediatePropagation();
+                this.getOptions();
+            } }, index.h("slot", { key: '4d39e4eb08050272d097e1f302fd09c71e1210d7' })), index.h("div", { key: '63717b4931c6ef6d79c3f7e9807b3f9621a4da43', class: "digi-form-select__footer" }, index.h("div", { key: '612a4029c893ae0355620ce8ff8530127c1bd65e', "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.showValidation() && (index.h("digi-form-validation-message", { key: 'da30bfd2f237363b4d061d3e83d9f0c3509978bb', "af-variation": this.afValidation }, this.afValidationText))))));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["onValueChanged"],
+        "afValue": ["onAfValueChanged"]
+    }; }
+};
+FormSelect.style = DigiFormSelectStyle0;
+
+const iconInputSelectMarkerCss = ".sc-digi-icon-input-select-marker-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-input-select-marker-h svg.sc-digi-icon-input-select-marker{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
+const DigiIconInputSelectMarkerStyle0 = iconInputSelectMarkerCss;
+
+const IconInputSelectMarker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.afTitle = undefined;
+        this.afDesc = undefined;
+        this.afSvgAriaHidden = true;
+        this.afSvgAriaLabelledby = undefined;
+        this.titleId = randomIdGenerator_util.randomIdGenerator('icon-input-select-marker');
+    }
+    render() {
+        return (index.h("svg", { key: '4a1bd4a8b07d23c4188a34c6b6acdbf331cc4fe3', class: "digi-icon-input-select-marker", width: "14", height: "8", viewBox: "0 0 14 8", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+                ? this.afSvgAriaLabelledby
+                : this.afTitle
+                    ? this.titleId
+                    : undefined }, this.afTitle && index.h("title", { key: '83ec1298782db2e5a8756908d2f1d6f7e7258606', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'b91499649f9e835920188a5bcd16a9f31c635f3e' }, this.afDesc), index.h("path", { key: 'a536e8da9e92c77e97835e9de0be8545a90ecef0', d: "M1 1l6.074 6L13 1.147", stroke: "currentColor", "stroke-width": "2", fill: "none", "fill-rule": "evenodd" })));
+    }
+};
+IconInputSelectMarker.style = DigiIconInputSelectMarkerStyle0;
+
+exports.digi_form_select = FormSelect;
+exports.digi_icon_input_select_marker = IconInputSelectMarker;

package/dist/cjs/digi-header-navigation.cjs.entry.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-81fc5a97.js');
 require('./badge-notification-shape.enum-ff802554.js');
-const typographyVariation_enum = require('./typography-variation.enum-2cf77231.js');
+const typographyVariation_enum = require('./typography-variation.enum-d6a04b47.js');
 require('./badge-status-variation.enum-0a5adc21.js');
 require('./button-size.enum-1fd86b9e.js');
-require('./button-type.enum-406723db.js');
+require('./form-input-variation.enum-d8228d73.js');
 require('./button-variation.enum-bc521499.js');
 require('./calendar-week-view-heading-level.enum-fd0c841b.js');
 require('./bar-chart-variation.enum-a4e866b6.js');
@@ -18,9 +18,10 @@ require('./expandable-faq-item-variation.enum-89427195.js');
 require('./expandable-faq-variation.enum-af923f49.js');
 require('./footer-card-variation.enum-99555edc.js');
 require('./form-checkbox-variation.enum-d2ca879e.js');
-require('./form-validation-message-variation.enum-c5ec3e2d.js');
-require('./form-input-type.enum-daf781ba.js');
+require('./form-file-upload-variation.enum-634cfae8.js');
+require('./form-select-variation.enum-528c1bf0.js');
 require('./form-textarea-variation.enum-9c90d40f.js');
+require('./form-validation-message-variation.enum-855ae0be.js');
 require('./info-card-multi-type.enum-14746572.js');
 require('./info-card-variation.enum-64cef637.js');
 require('./layout-container-max-width.enum-7e637f44.js');

package/dist/cjs/digi-header.cjs.entry.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-81fc5a97.js');
 require('./badge-notification-shape.enum-ff802554.js');
-const typographyVariation_enum = require('./typography-variation.enum-2cf77231.js');
+const typographyVariation_enum = require('./typography-variation.enum-d6a04b47.js');
 require('./badge-status-variation.enum-0a5adc21.js');
 require('./button-size.enum-1fd86b9e.js');
-require('./button-type.enum-406723db.js');
+require('./form-input-variation.enum-d8228d73.js');
 require('./button-variation.enum-bc521499.js');
 require('./calendar-week-view-heading-level.enum-fd0c841b.js');
 require('./bar-chart-variation.enum-a4e866b6.js');
@@ -18,9 +18,10 @@ require('./expandable-faq-item-variation.enum-89427195.js');
 require('./expandable-faq-variation.enum-af923f49.js');
 require('./footer-card-variation.enum-99555edc.js');
 require('./form-checkbox-variation.enum-d2ca879e.js');
-require('./form-validation-message-variation.enum-c5ec3e2d.js');
-require('./form-input-type.enum-daf781ba.js');
+require('./form-file-upload-variation.enum-634cfae8.js');
+require('./form-select-variation.enum-528c1bf0.js');
 require('./form-textarea-variation.enum-9c90d40f.js');
+require('./form-validation-message-variation.enum-855ae0be.js');
 require('./info-card-multi-type.enum-14746572.js');
 require('./info-card-variation.enum-64cef637.js');
 const layoutContainerMaxWidth_enum = require('./layout-container-max-width.enum-7e637f44.js');

package/dist/cjs/digi-icon-chevron-left.cjs.entry.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-81fc5a97.js');
+const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
+
+const iconChevronLeftCss = ".sc-digi-icon-chevron-left-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-chevron-left-h svg.sc-digi-icon-chevron-left{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
+const DigiIconChevronLeftStyle0 = iconChevronLeftCss;
+
+const IconChevronLeft = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.afTitle = undefined;
+        this.afDesc = undefined;
+        this.afSvgAriaHidden = true;
+        this.afSvgAriaLabelledby = undefined;
+        this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
+    }
+    render() {
+        return (index.h("svg", { key: '0cba00535eb75441e29bd290eadabf25a856ec19', class: "digi-icon-chevron-left", width: "9", height: "14", viewBox: "0 0 9 14", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+                ? this.afSvgAriaLabelledby
+                : this.afTitle
+                    ? this.titleId
+                    : undefined }, this.afTitle && index.h("title", { key: 'a8f7e00e11e34ceb6c8d647e99591dcd6eb24a2b', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '7306e404cb1fb3e3663cd0abfbe3cbebb96267cb' }, this.afDesc), index.h("path", { key: '28a948bb95512a52ed6f60e417a08b8651b49473', class: "digi-icon-chevron-left__shape", d: "M8 13L2 6.926 7.853 1", stroke: "currentColor", "stroke-width": "2", fill: "none", "fill-rule": "evenodd" })));
+    }
+};
+IconChevronLeft.style = DigiIconChevronLeftStyle0;
+
+exports.digi_icon_chevron_left = IconChevronLeft;

package/dist/cjs/digi-icon-chevron-right.cjs.entry.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-81fc5a97.js');
+const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
+
+const iconChevronRightCss = ".sc-digi-icon-chevron-right-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-chevron-right-h svg.sc-digi-icon-chevron-right{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
+const DigiIconChevronRightStyle0 = iconChevronRightCss;
+
+const IconChevronRight = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.afTitle = undefined;
+        this.afDesc = undefined;
+        this.afSvgAriaHidden = true;
+        this.afSvgAriaLabelledby = undefined;
+        this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
+    }
+    render() {
+        return (index.h("svg", { key: '5483795e9b268b2381068e1c9a295e12e0e394ab', class: "digi-icon-chevron-right", width: "9", height: "14", viewBox: "0 0 9 14", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+                ? this.afSvgAriaLabelledby
+                : this.afTitle
+                    ? this.titleId
+                    : undefined }, this.afTitle && index.h("title", { key: 'cd62bf4682b3e3263af97d533387b93b0f255f59', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '40c407614a27285bd6acaac7742254de6cc76d6e' }, this.afDesc), index.h("path", { key: 'fe569a6a16607825ada16a5227b43bfc1776c2f3', class: "digi-icon-chevron-right__shape", d: "M1 13l6-6.074L1.147 1", stroke: "currentColor", "stroke-width": "2", fill: "none", "fill-rule": "evenodd" })));
+    }
+};
+IconChevronRight.style = DigiIconChevronRightStyle0;
+
+exports.digi_icon_chevron_right = IconChevronRight;

package/dist/cjs/digi-navigation-pagination.cjs.entry.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-81fc5a97.js');
 const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
 require('./badge-notification-shape.enum-ff802554.js');
-require('./typography-variation.enum-2cf77231.js');
+require('./typography-variation.enum-d6a04b47.js');
 require('./badge-status-variation.enum-0a5adc21.js');
 require('./button-size.enum-1fd86b9e.js');
-require('./button-type.enum-406723db.js');
+require('./form-input-variation.enum-d8228d73.js');
 const buttonVariation_enum = require('./button-variation.enum-bc521499.js');
 require('./calendar-week-view-heading-level.enum-fd0c841b.js');
 require('./bar-chart-variation.enum-a4e866b6.js');
@@ -19,9 +19,10 @@ require('./expandable-faq-item-variation.enum-89427195.js');
 require('./expandable-faq-variation.enum-af923f49.js');
 require('./footer-card-variation.enum-99555edc.js');
 require('./form-checkbox-variation.enum-d2ca879e.js');
-require('./form-validation-message-variation.enum-c5ec3e2d.js');
-require('./form-input-type.enum-daf781ba.js');
+require('./form-file-upload-variation.enum-634cfae8.js');
+require('./form-select-variation.enum-528c1bf0.js');
 require('./form-textarea-variation.enum-9c90d40f.js');
+require('./form-validation-message-variation.enum-855ae0be.js');
 require('./info-card-multi-type.enum-14746572.js');
 require('./info-card-variation.enum-64cef637.js');
 require('./layout-container-max-width.enum-7e637f44.js');

package/dist/cjs/digi-notification-alert.cjs.entry.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-81fc5a97.js');
 const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
-const typographyVariation_enum = require('./typography-variation.enum-2cf77231.js');
+const typographyVariation_enum = require('./typography-variation.enum-d6a04b47.js');
 require('./badge-notification-shape.enum-ff802554.js');
 require('./badge-status-variation.enum-0a5adc21.js');
 require('./button-size.enum-1fd86b9e.js');
-require('./button-type.enum-406723db.js');
+require('./form-input-variation.enum-d8228d73.js');
 const buttonVariation_enum = require('./button-variation.enum-bc521499.js');
 require('./calendar-week-view-heading-level.enum-fd0c841b.js');
 require('./bar-chart-variation.enum-a4e866b6.js');
@@ -19,9 +19,10 @@ require('./expandable-faq-item-variation.enum-89427195.js');
 require('./expandable-faq-variation.enum-af923f49.js');
 require('./footer-card-variation.enum-99555edc.js');
 require('./form-checkbox-variation.enum-d2ca879e.js');
-require('./form-validation-message-variation.enum-c5ec3e2d.js');
-require('./form-input-type.enum-daf781ba.js');
+require('./form-file-upload-variation.enum-634cfae8.js');
+require('./form-select-variation.enum-528c1bf0.js');
 require('./form-textarea-variation.enum-9c90d40f.js');
+require('./form-validation-message-variation.enum-855ae0be.js');
 require('./info-card-multi-type.enum-14746572.js');
 require('./info-card-variation.enum-64cef637.js');
 require('./layout-container-max-width.enum-7e637f44.js');

package/dist/cjs/digi-notification-error-page.cjs.entry.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-81fc5a97.js');
-const typographyVariation_enum = require('./typography-variation.enum-2cf77231.js');
+const typographyVariation_enum = require('./typography-variation.enum-d6a04b47.js');
 const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
 require('./badge-notification-shape.enum-ff802554.js');
 require('./badge-status-variation.enum-0a5adc21.js');
 require('./button-size.enum-1fd86b9e.js');
-require('./button-type.enum-406723db.js');
+require('./form-input-variation.enum-d8228d73.js');
 require('./button-variation.enum-bc521499.js');
 require('./calendar-week-view-heading-level.enum-fd0c841b.js');
 require('./bar-chart-variation.enum-a4e866b6.js');
@@ -19,9 +19,10 @@ require('./expandable-faq-item-variation.enum-89427195.js');
 require('./expandable-faq-variation.enum-af923f49.js');
 require('./footer-card-variation.enum-99555edc.js');
 require('./form-checkbox-variation.enum-d2ca879e.js');
-require('./form-validation-message-variation.enum-c5ec3e2d.js');
-require('./form-input-type.enum-daf781ba.js');
+require('./form-file-upload-variation.enum-634cfae8.js');
+require('./form-select-variation.enum-528c1bf0.js');
 require('./form-textarea-variation.enum-9c90d40f.js');
+require('./form-validation-message-variation.enum-855ae0be.js');
 require('./info-card-multi-type.enum-14746572.js');
 require('./info-card-variation.enum-64cef637.js');
 require('./layout-container-max-width.enum-7e637f44.js');

package/dist/cjs/digi-tools-feedback.cjs.entry.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-81fc5a97.js');
 const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
-const typographyVariation_enum = require('./typography-variation.enum-2cf77231.js');
+const typographyVariation_enum = require('./typography-variation.enum-d6a04b47.js');
 const layoutBlockVariation_enum = require('./layout-block-variation.enum-f6102119.js');
 require('./badge-notification-shape.enum-ff802554.js');
 require('./badge-status-variation.enum-0a5adc21.js');
 const buttonSize_enum = require('./button-size.enum-1fd86b9e.js');
-require('./button-type.enum-406723db.js');
+require('./form-input-variation.enum-d8228d73.js');
 const buttonVariation_enum = require('./button-variation.enum-bc521499.js');
 require('./calendar-week-view-heading-level.enum-fd0c841b.js');
 require('./bar-chart-variation.enum-a4e866b6.js');
@@ -20,9 +20,10 @@ require('./expandable-faq-item-variation.enum-89427195.js');
 require('./expandable-faq-variation.enum-af923f49.js');
 require('./footer-card-variation.enum-99555edc.js');
 require('./form-checkbox-variation.enum-d2ca879e.js');
-require('./form-validation-message-variation.enum-c5ec3e2d.js');
-require('./form-input-type.enum-daf781ba.js');
+require('./form-file-upload-variation.enum-634cfae8.js');
+require('./form-select-variation.enum-528c1bf0.js');
 require('./form-textarea-variation.enum-9c90d40f.js');
+require('./form-validation-message-variation.enum-855ae0be.js');
 require('./info-card-multi-type.enum-14746572.js');
 require('./info-card-variation.enum-64cef637.js');
 require('./layout-container-max-width.enum-7e637f44.js');