@designsystem-se/af 37.0.2-beta.0 → 37.0.2

package/dist/esm/digi-form-category-filter.entry.js

@@ -0,0 +1,117 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-148a7577.js';
+
+const formCategoryFilterCss = ".sc-digi-form-category-filter-h{--digi--form-category-filter--gap:var(--digi--padding--small)}.sc-digi-form-category-filter-h .digi-form-category-filter.sc-digi-form-category-filter{display:flex;flex-wrap:wrap;gap:var(--digi--form-category-filter--gap)}.sc-digi-form-category-filter-h .digi-form-category-filter--category.sc-digi-form-category-filter{--digi--button--icon--spacing:0px}.sc-digi-form-category-filter-h .digi-form-category-filter--category--not-selected.sc-digi-form-category-filter{--digi--button--color--background--primary--default:var(--digi--color--background--interactive--default--quaternary);--digi--button--color--text--primary--default:var(--digi--color--text--interactive--brand-primary);--digi--button--color--border--primary--default:var(--digi--color--background--interactive--default--quaternary)}.sc-digi-form-category-filter-h .digi-form-category-filter--category--thin-text.sc-digi-form-category-filter{font-weight:400}";
+const DigiFormCategoryFilterStyle0 = formCategoryFilterCss;
+
+const FormCategoryFilter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.afOnSelectedCategoryChange = createEvent(this, "afOnSelectedCategoryChange", 7);
+        this.afCategories = [];
+        this.afAllCategories = true;
+        this.afAllCategoriesSelected = true;
+        this.afAllCategoriesText = 'Alla kategorier';
+        this.afVisibleCollapsed = 0;
+        this.afStartCollapsed = false;
+        this.afMultiselect = true;
+        this.afHideToggle = false;
+        this.selectedCategories = [];
+        this.collapsed = false;
+    }
+    afCategoriesChangeHandler() {
+        this.selectedCategories = this.afCategories
+            .filter((category) => category.selected)
+            .map((category) => category.name);
+        if (this.selectedCategories.length === 0 &&
+            this.afAllCategories &&
+            this.afAllCategoriesSelected)
+            this.selectedCategories = [this.afAllCategoriesText];
+    }
+    componentDidLoad() {
+        this.afCategoriesChangeHandler();
+        this.collapsed = this.afStartCollapsed;
+    }
+    displayCategories() {
+        if (this.afHideToggle) {
+            return [{ name: this.afAllCategoriesText }, ...this.afCategories];
+        }
+        if (this.afAllCategories) {
+            if (this.collapsed &&
+                this.afCategories.length + 1 > this.afVisibleCollapsed)
+                return [
+                    { name: this.afAllCategoriesText },
+                    ...this.afCategories.slice(0, this.afVisibleCollapsed - 1)
+                ];
+            return [{ name: this.afAllCategoriesText }, ...this.afCategories];
+        }
+        if (this.collapsed && this.afCategories.length > this.afVisibleCollapsed)
+            return this.afCategories.slice(0, this.afVisibleCollapsed);
+        return this.afCategories;
+    }
+    toggleCategory(category) {
+        if (!this.afMultiselect) {
+            if (this.afAllCategories && category.name === this.afAllCategoriesText) {
+                if (this.selectedCategories.includes(this.afAllCategoriesText)) {
+                    this.selectedCategories = [];
+                    this.afOnSelectedCategoryChange.emit([]);
+                }
+                else {
+                    this.selectedCategories = [this.afAllCategoriesText];
+                    this.afOnSelectedCategoryChange.emit(this.afCategories.map((category) => category.name));
+                }
+            }
+            // Not allCategories
+            this.selectedCategories = [category.name];
+            this.afOnSelectedCategoryChange.emit(this.selectedCategories);
+            return;
+        }
+        if (this.afAllCategories && category.name === this.afAllCategoriesText) {
+            if (this.selectedCategories.includes(this.afAllCategoriesText)) {
+                this.selectedCategories = [];
+                this.afOnSelectedCategoryChange.emit([]);
+            }
+            else {
+                this.selectedCategories = [this.afAllCategoriesText];
+                this.afOnSelectedCategoryChange.emit(this.afCategories.map((category) => category.name));
+            }
+        }
+        else {
+            if (this.selectedCategories.findIndex((name) => name === category.name) >= 0)
+                this.selectedCategories = this.selectedCategories.filter((name) => name !== category.name);
+            else if (this.afAllCategories)
+                this.selectedCategories = [
+                    ...this.selectedCategories.filter((name) => name !== this.afAllCategoriesText),
+                    category.name
+                ];
+            else
+                this.selectedCategories = [...this.selectedCategories, category.name];
+            this.afOnSelectedCategoryChange.emit(this.selectedCategories);
+        }
+    }
+    toggleCollapsed() {
+        this.collapsed = !this.collapsed;
+    }
+    toggleHidden() {
+        this.afHideToggle = !this.toggleHidden;
+    }
+    render() {
+        return (h(Host, { key: '74f5f06035832ce1cebf26ab089e404a649f9240' }, h("div", { key: '7e71bbdf539632985c56ba33ecba9e57b64d271e', class: {
+                'digi-form-category-filter': true
+            } }, this.displayCategories().map((category) => (h("digi-button", { class: {
+                'digi-form-category-filter--category': true,
+                'digi-form-category-filter--category--not-selected': !this.selectedCategories.includes(category.name)
+            }, afVariation: "primary", afAriaPressed: this.selectedCategories.includes(category.name), onAfOnClick: () => {
+                this.toggleCategory(category);
+            } }, typeof category.hits === 'undefined' && category.name, typeof category.hits !== 'undefined' && (h("span", null, category.name, ' ', h("span", { class: "digi-form-category-filter--category--thin-text" }, "(", category.hits, ")")))))), this.afHideToggle === false &&
+            this.afCategories.length > this.afVisibleCollapsed && (h("div", { key: '415f044908497e9def159aeda3eeebd597ba1a6d' }, h("digi-button", { key: '176c0a91996e9134fbceaea2916344962cbb9561', afVariation: "function", afAriaExpanded: !this.collapsed, onClick: () => {
+                this.toggleCollapsed();
+            } }, this.collapsed ? 'Visa alla' : 'Visa färre', this.collapsed ? (h("digi-icon-plus", { slot: "icon", "aria-hidden": "true" })) : (h("digi-icon-minus", { slot: "icon", "aria-hidden": "true" }))))))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "afCategories": ["afCategoriesChangeHandler"]
+    }; }
+};
+FormCategoryFilter.style = DigiFormCategoryFilterStyle0;
+
+export { FormCategoryFilter as digi_form_category_filter };

package/dist/esm/digi-form-error-list.entry.js

@@ -1,21 +1,31 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-148a7577.js';
 import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
-import { h as FormErrorListHeadingLevel, M as NotificationAlertVariation, Z as TypographyVariation } from './typography-variation.enum-b07f76c9.js';
+import { d as FormErrorListHeadingLevel, q as NotificationAlertVariation, u as TypographyVariation } from './typography-variation.enum-8c3ff25c.js';
 import './badge-notification-shape.enum-e15a6245.js';
 import './badge-status-variation.enum-8d6370ff.js';
-import './code-example-variation.enum-e656d235.js';
-import './form-input-type.enum-a6bba983.js';
+import './button-size.enum-d5ff6ff3.js';
+import './button-type.enum-5250ae0b.js';
 import './button-variation.enum-94fffdd6.js';
 import './calendar-week-view-heading-level.enum-6774297c.js';
 import './bar-chart-variation.enum-97c0b47f.js';
+import './code-example-variation.enum-e9f9fced.js';
 import './code-variation.enum-1eee7c7a.js';
 import './expandable-accordion-header-level.enum-85681e2f.js';
+import './expandable-faq-item-variation.enum-a8cb225b.js';
 import './expandable-faq-variation.enum-6934c367.js';
 import './footer-card-variation.enum-cc732148.js';
-import './form-validation-message-variation.enum-f7835fc5.js';
+import './form-checkbox-variation.enum-83e906fc.js';
+import './form-file-upload-variation.enum-9c49ec5e.js';
+import './form-input-search-variation.enum-f9d669f2.js';
+import './form-input-type.enum-3da3db27.js';
+import './form-input-variation.enum-64d9450f.js';
+import './form-radiogroup-validation.enum-d790fc66.js';
+import './form-select-variation.enum-f2f6098d.js';
 import './form-textarea-variation.enum-05017e8e.js';
+import './form-validation-message-variation.enum-bcef8a9d.js';
 import './info-card-multi-type.enum-07ee124f.js';
 import './info-card-variation.enum-2ccc52c1.js';
+import './layout-container-max-width.enum-c40018ac.js';
 import './layout-block-variation.enum-b7a20db4.js';
 import './layout-columns-variation.enum-34f7754e.js';
 import './link-button-variation.enum-84d4976f.js';
@@ -25,6 +35,8 @@ import './loader-spinner-size.enum-0b246fa0.js';
 import './logo-variation.enum-5b68b79f.js';
 import './media-figure-alignment.enum-a1d36567.js';
 import './navigation-sidebar-variation.enum-8fead764.js';
+import './navigation-vertical-menu-variation.enum-c30b0ea9.js';
+import './progress-indicator-variation.enum-b12ba50a.js';
 import './progress-list-item-variation.enum-384b9a3a.js';
 import './progress-list-variation.enum-300bd89d.js';
 import './progressbar-variation.enum-40adaab4.js';
@@ -34,6 +46,8 @@ import './tag-media-icon.enum-fefa191c.js';
 import './tag-size.enum-403e0cd8.js';
 import './tools-feedback-banner-type.enum-74b4e580.js';
 import './tools-feedback-rating-variation.enum-29058ff2.js';
+import './tools-theme-provider.brand.enum-8c5a98c9.js';
+import './typography-heading-jumbo-variation.enum-eb737f1b.js';
 import './typography-meta-variation.enum-1f7c2878.js';
 import './typography-time-variation.enum-34c830ef.js';
 import './util-breakpoint-observer-breakpoints.enum-6d004731.js';

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

@@ -1,10 +1,11 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-148a7577.js';
 import { _ as _t } from './text-8f88c0f6.js';
 import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
-import { b as FormFileUploadVariation, a as FormFileUploadValidation, F as FormFileUploadHeadingLevel, c as FormValidationMessageVariation } from './form-validation-message-variation.enum-f7835fc5.js';
+import { b as FormFileUploadVariation, a as FormFileUploadValidation, F as FormFileUploadHeadingLevel } from './form-file-upload-variation.enum-9c49ec5e.js';
 import { U as UtilBreakpointObserverBreakpoints } from './util-breakpoint-observer-breakpoints.enum-6d004731.js';
+import { F as FormValidationMessageVariation } from './form-validation-message-variation.enum-bcef8a9d.js';
 
-const formFileUploadCss = ".sc-digi-form-file-upload-h {\n  --digi--form-file-upload--color--background--small--default: var(--digi--color--background--interactive--default--quaternary);\n  --digi--form-file-upload--color--background--small--hover: var(--digi--color--background--interactive--hover--secondary);\n  --digi--form-file-upload--color--background--medium--default: var(--digi--color--background--interactive--default--quaternary);\n  --digi--form-file-upload--color--background--medium--hover: var(--digi--color--background--interactive--hover--secondary);\n  --digi--form-file-upload--color--background--large--default: var(--digi--color--background--interactive--default--quaternary);\n  --digi--form-file-upload--color--background--large--hover: var(--digi--color--background--interactive--hover--secondary);\n  --digi--form-file-upload--color--background--uploaded-files: var(--digi--color--background--secondary-elevated);\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--uploaded-files);\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--uploaded-files);\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--uploaded-files);\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 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 {

package/dist/esm/digi-form-input-search.entry.js

@@ -1,6 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-148a7577.js';
 import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
-import { b as FormInputType, a as FormInputButtonVariation, F as FormInputSearchVariation, B as ButtonType } from './form-input-type.enum-a6bba983.js';
+import { F as FormInputSearchVariation } from './form-input-search-variation.enum-f9d669f2.js';
+import { a as FormInputType, F as FormInputButtonVariation } from './form-input-type.enum-3da3db27.js';
+import { B as ButtonType } from './button-type.enum-5250ae0b.js';
 import { d as detectClickOutside } from './detectClickOutside.util-72594957.js';
 import { d as detectFocusOutside } from './detectFocusOutside.util-a8676bee.js';
 import './detectClosest.util-58a7504f.js';

package/dist/esm/digi-form-input.entry.js

@@ -0,0 +1,190 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-148a7577.js';
+import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
+import { a as FormInputType, F as FormInputButtonVariation } from './form-input-type.enum-3da3db27.js';
+import { F as FormInputMode, b as FormInputVariation, a as FormInputValidation } from './form-input-variation.enum-64d9450f.js';
+
+const formInputCss = ".sc-digi-form-input-h{--digi--form-input--height--small:var(--digi--input-height--small);--digi--form-input--height--medium:var(--digi--input-height--medium);--digi--form-input--height--large:var(--digi--input-height--large);--digi--form-input--border-radius:var(--digi--border-radius--input);--digi--form-input--padding:0 var(--digi--gutter--medium);--digi--form-input--background--empty:var(--digi--color--background--interactive--default--input-elements);--digi--form-input--background--neutral:var(--digi--color--background--interactive--default--input-elements);--digi--form-input--background--success:var(--digi--color--background--interactive--validation--success);--digi--form-input--background--warning:var(--digi--color--background--interactive--validation--warning);--digi--form-input--background--error:var(--digi--color--background--interactive--validation--error);--digi--form-input--border--neutral:var(--digi--border-width--input-regular) solid;--digi--form-input--border--error:var(--digi--border-width--input-validation) solid;--digi--form-input--border--success:var(--digi--border-width--input-validation) solid;--digi--form-input--border--warning:var(--digi--border-width--input-validation) solid;--digi--form-input--border-color--neutral:var(--digi--color--border--interactive--default--on-input);--digi--form-input--border-color--success:var(--digi--color--border--interactive--validation--success);--digi--form-input--border-color--warning:var(--digi--color--border--interactive--validation--warning);--digi--form-input--border-color--error:var(--digi--color--border--interactive--validation--error)}.sc-digi-form-input-h .digi-form-input.sc-digi-form-input{display:flex;flex-direction:column;gap:0.4em}.sc-digi-form-input-h .digi-form-input--small.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--small)}.sc-digi-form-input-h .digi-form-input--medium.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--medium)}.sc-digi-form-input-h .digi-form-input--large.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--large)}.sc-digi-form-input-h .digi-form-input--neutral.sc-digi-form-input{--BORDER:var(--digi--form-input--border--neutral);--BORDER-COLOR:var(--digi--form-input--border-color--neutral);--BACKGROUND:var(--digi--form-input--background--neutral)}.sc-digi-form-input-h .digi-form-input--empty.sc-digi-form-input:not(:focus-within){--BACKGROUND:var(--digi--form-input--background--empty)}.sc-digi-form-input-h .digi-form-input--success.sc-digi-form-input{--BORDER:var(--digi--form-input--border--success);--BORDER-COLOR:var(--digi--form-input--border-color--success);--BACKGROUND:var(--digi--form-input--background--success)}.sc-digi-form-input-h .digi-form-input--warning.sc-digi-form-input{--BORDER:var(--digi--form-input--border--warning);--BORDER-COLOR:var(--digi--form-input--border-color--warning);--BACKGROUND:var(--digi--form-input--background--warning)}.sc-digi-form-input-h .digi-form-input--error.sc-digi-form-input{--BORDER:var(--digi--form-input--border--error);--BORDER-COLOR:var(--digi--form-input--border-color--error);--BACKGROUND:var(--digi--form-input--background--error)}.digi-form-input__input-wrapper.sc-digi-form-input{position:relative;display:flex}.digi-form-input__input-wrapper.sc-digi-form-input-s>[slot^=button] button,.digi-form-input__input-wrapper .sc-digi-form-input-s>[slot^=button] button{--MIN-HEIGHT:100%}.digi-form-input--button-variation-primary .digi-form-input__input-wrapper.sc-digi-form-input-s>[slot^=button] button,.digi-form-input__input-wrapper .sc-digi-form-input-s>[slot^=button] button{border-start-start-radius:0;border-end-start-radius:0}.digi-form-input--button-variation-secondary.digi-form-input--has-button-true.sc-digi-form-input .digi-form-input__input-wrapper.sc-digi-form-input{gap:var(--digi--gutter--medium);flex-wrap:wrap}.digi-form-input__input.sc-digi-form-input{flex:1;height:var(--HEIGHT);font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--body--font-size--desktop);padding:var(--digi--form-input--padding);color:var(--digi--color--text--primary);background:var(--BACKGROUND);border:var(--BORDER);border-color:var(--BORDER-COLOR);border-radius:var(--digi--form-input--border-radius);box-sizing:border-box}.digi-form-input__input.sc-digi-form-input:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.digi-form-input--button-variation-primary.digi-form-input--has-button-true.sc-digi-form-input .digi-form-input__input.sc-digi-form-input{border-end-end-radius:0;border-start-end-radius:0}";
+const DigiFormInputStyle0 = formInputCss;
+
+const FormInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.afOnChange = createEvent(this, "afOnChange", 7);
+        this.afOnBlur = createEvent(this, "afOnBlur", 7);
+        this.afOnKeyup = createEvent(this, "afOnKeyup", 7);
+        this.afOnFocus = createEvent(this, "afOnFocus", 7);
+        this.afOnFocusout = createEvent(this, "afOnFocusout", 7);
+        this.afOnInput = createEvent(this, "afOnInput", 7);
+        this.afOnDirty = createEvent(this, "afOnDirty", 7);
+        this.afOnTouched = createEvent(this, "afOnTouched", 7);
+        this.afOnReady = createEvent(this, "afOnReady", 3);
+        this.hasActiveValidationMessage = false;
+        this.hasButton = undefined;
+        this.dirty = false;
+        this.touched = false;
+        this.afLabel = undefined;
+        this.afLabelDescription = undefined;
+        this.afType = FormInputType.TEXT;
+        this.afInputmode = FormInputMode.DEFAULT;
+        this.afButtonVariation = FormInputButtonVariation.PRIMARY;
+        this.afAutofocus = undefined;
+        this.afVariation = FormInputVariation.MEDIUM;
+        this.afName = undefined;
+        this.afId = randomIdGenerator('digi-form-input');
+        this.afMaxlength = undefined;
+        this.afMinlength = undefined;
+        this.afRequired = undefined;
+        this.afRequiredText = undefined;
+        this.afAnnounceIfOptional = false;
+        this.afAnnounceIfOptionalText = undefined;
+        this.value = undefined;
+        this.afValue = undefined;
+        this.afValidation = FormInputValidation.NEUTRAL;
+        this.afValidationText = undefined;
+        this.afRole = undefined;
+        this.afAutocomplete = undefined;
+        this.afMin = undefined;
+        this.afMax = undefined;
+        this.afList = undefined;
+        this.afStep = undefined;
+        this.afDirname = undefined;
+        this.afAriaAutocomplete = undefined;
+        this.afAriaActivedescendant = undefined;
+        this.afAriaLabelledby = undefined;
+        this.afAriaDescribedby = undefined;
+        this.afAriaControls = undefined;
+        this.afTrimValue = undefined;
+        this.afErrorMessageIsAlert = true;
+    }
+    onValueChanged(value) {
+        this.afValue = value;
+    }
+    onAfValueChanged(value) {
+        this.value = value;
+        if (this._input && this._input.value !== String(value !== null && value !== void 0 ? value : '')) {
+            this._input.value = String(value !== null && value !== void 0 ? value : '');
+        }
+    }
+    get errorMessageIsAlert() {
+        return (this.afErrorMessageIsAlert !== false &&
+            this.afErrorMessageIsAlert !== 'false');
+    }
+    afValidationTextWatch() {
+        this.setActiveValidationMessage();
+    }
+    /**
+     * Hämtar en referens till inputelementet. Bra för att t.ex. sätta fokus programmatiskt.
+     * @en Returns a reference to the input element. Handy for setting focus programmatically.
+     */
+    async afMGetFormControlElement() {
+        return this._input;
+    }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
+     */
+    focusOnInput() {
+        this._input.focus();
+    }
+    componentWillLoad() {
+        this.afValue ? (this.value = this.afValue) : (this.afValue = this.value);
+        this.setActiveValidationMessage();
+        this.setHasButton();
+    }
+    componentWillUpdate() {
+        this.setHasButton();
+    }
+    componentDidLoad() {
+        this.afOnReady.emit();
+    }
+    setActiveValidationMessage() {
+        this.hasActiveValidationMessage = !!this.afValidationText;
+    }
+    get cssModifiers() {
+        return {
+            'digi-form-input--small': this.afVariation === FormInputVariation.SMALL,
+            'digi-form-input--medium': this.afVariation === FormInputVariation.MEDIUM,
+            'digi-form-input--large': this.afVariation === FormInputVariation.LARGE,
+            'digi-form-input--neutral': this.afValidation === FormInputValidation.NEUTRAL,
+            'digi-form-input--success': this.afValidation === FormInputValidation.SUCCESS,
+            'digi-form-input--error': this.afValidation === FormInputValidation.ERROR,
+            'digi-form-input--warning': this.afValidation === FormInputValidation.WARNING,
+            [`digi-form-input--button-variation-${this.afButtonVariation}`]: !!this.afButtonVariation,
+            [`digi-form-input--has-button-${this.hasButton}`]: true,
+            'digi-form-input--empty': !this.afValue &&
+                (!this.afValidation ||
+                    this.afValidation === FormInputValidation.NEUTRAL)
+        };
+    }
+    blurHandler(e) {
+        const trimableTypes = [
+            FormInputType.TEXT,
+            FormInputType.EMAIL,
+            FormInputType.SEARCH,
+            FormInputType.TEL,
+            FormInputType.URL
+        ];
+        const shouldTrim = this.afTrimValue && trimableTypes.includes(this.afType);
+        if (shouldTrim && typeof e.target.value === 'string') {
+            const trimmedValue = e.target.value.trim();
+            if (trimmedValue !== e.target.value) {
+                this.afValue = this.value = trimmedValue;
+                if (this._input) {
+                    this._input.value = trimmedValue;
+                }
+                // Emittar afOnInput så Angulars value accessor får det trimmade värdet
+                this.afOnInput.emit(e);
+            }
+        }
+        if (!this.touched) {
+            this.afOnTouched.emit(e);
+            this.touched = true;
+        }
+        this.afOnBlur.emit(e);
+    }
+    changeHandler(e) {
+        this.setActiveValidationMessage();
+        this.afOnChange.emit(e);
+    }
+    focusHandler(e) {
+        this.afOnFocus.emit(e);
+    }
+    focusoutHandler(e) {
+        this.afOnFocusout.emit(e);
+    }
+    keyupHandler(e) {
+        this.afOnKeyup.emit(e);
+    }
+    inputHandler(e) {
+        this.afValue = this.value =
+            this.afType === FormInputType.NUMBER
+                ? parseFloat(e.target.value)
+                : e.target.value;
+        if (!this.dirty) {
+            this.afOnDirty.emit(e);
+            this.dirty = true;
+        }
+        this.setActiveValidationMessage();
+        this.afOnInput.emit(e);
+    }
+    setHasButton() {
+        this.hasButton = !!this.hostElement.querySelector('[slot="button"]');
+    }
+    render() {
+        return (h(Host, { key: 'bd32d602a4fa625394c8bcf3b7a8916092c91aae', tabindex: -1 }, h("div", { key: '25ded0f93bd3078bec0aab16242c960487fd657f', class: Object.assign({ 'digi-form-input': true }, this.cssModifiers) }, h("digi-form-label", { key: '0fa8b13f155a3acd0bf23691c156f34e8a0aa214', class: "digi-form-input__label", afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: '4b001af998878a6dadbaada1e56d4ef64f71da9a', class: "digi-form-input__input-wrapper" }, h("input", Object.assign({ key: 'b0082240f8d3b59ed36ad1d9ed8bec6aab536b54', class: "digi-form-input__input", ref: (el) => (this._input = el), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onKeyUp: (e) => this.keyupHandler(e), onInput: (e) => this.inputHandler(e), "aria-activedescendant": this.afAriaActivedescendant, "aria-describedby": `${this.afAriaDescribedby} ${this.afId}--validation-message`, "aria-labelledby": this.afAriaLabelledby, "aria-autocomplete": this.afAriaAutocomplete, "aria-invalid": this.afValidation === FormInputValidation.ERROR
+                ? 'true'
+                : 'false', "aria-controls": this.afAriaControls, autocomplete: this.afAutocomplete, autofocus: this.afAutofocus ? this.afAutofocus : null, maxLength: this.afMaxlength, minLength: this.afMinlength, max: this.afMax, min: this.afMin, step: this.afStep, list: this.afList, role: this.afRole, dirName: this.afDirname, required: this.afRequired, id: this.afId, name: this.afName, type: this.afType, value: this.afValue }, (this.afInputmode == FormInputMode.DEFAULT
+            ? {}
+            : { inputmode: this.afInputmode }))), h("slot", { key: '46eef3d0ba7c02517ef3824410a1c0cfc74baaa7', name: "button" })), h("div", { key: '4024a3bcab31173d947bfe70e9064e31b2a23a8f', class: "digi-form-input__footer" }, h("div", { key: '55455e4bd8de053c35f1ca727b5e41f71f47a295', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
+            this.afValidation != FormInputValidation.NEUTRAL && (h("digi-form-validation-message", { key: 'c8c0c2d8468b09076a513c70e068c956386c64a5', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["onValueChanged"],
+        "afValue": ["onAfValueChanged"],
+        "afValidationText": ["afValidationTextWatch"]
+    }; }
+};
+FormInput.style = DigiFormInputStyle0;
+
+export { FormInput as digi_form_input };

package/dist/esm/digi-form-label_3.entry.js

@@ -0,0 +1,123 @@
+import { r as registerInstance, h, g as getElement } from './index-148a7577.js';
+import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
+import { l as logger } from './logger.util-ede3c48a.js';
+import { _ as _t } from './text-8f88c0f6.js';
+import { F as FormValidationMessageVariation } from './form-validation-message-variation.enum-bcef8a9d.js';
+
+const formLabelCss = ".sc-digi-form-label-h .digi-form-label.sc-digi-form-label{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--label--font-size--desktop);color:var(--digi--color--text--primary);display:flex;flex-direction:column}.sc-digi-form-label-h .digi-form-label__label--label.sc-digi-form-label{font-weight:var(--digi--typography--label--font-weight--desktop)}.sc-digi-form-label-h .digi-form-label__label--label.sc-digi-form-label,.sc-digi-form-label-h .digi-form-label__label--description.sc-digi-form-label{line-height:var(--digi--typography--label--line-height--desktop);cursor:pointer;display:block}.sc-digi-form-label-h .digi-form-label__label-group.sc-digi-form-label{display:inline-flex;align-items:center;gap:var(--digi--gutter--icon)}.sc-digi-form-label-h .digi-form-label__description.sc-digi-form-label{max-width:var(--digi--paragraph-width--medium);line-height:var(--digi--typography--label-description--line-height--desktop);font-size:var(--digi--typography--label-description--font-size--desktop)}";
+const DigiFormLabelStyle0 = formLabelCss;
+
+const FormLabel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.labelText = undefined;
+        this.hasActionSlot = undefined;
+        this.afLabel = undefined;
+        this.afId = randomIdGenerator('digi-form-label');
+        this.afFor = undefined;
+        this.afDescription = undefined;
+        this.afRequired = undefined;
+        this.afAnnounceIfOptional = false;
+        this.afRequiredText = _t.required.toLowerCase();
+        this.afAnnounceIfOptionalText = _t.optional.toLowerCase();
+    }
+    componentWillLoad() {
+        this.setLabelText();
+        this.validateFor();
+        this.handleSlotVisibility();
+    }
+    validateFor() {
+        if (this.afFor == null) {
+            logger.warn(`digi-form-label must have a for attribute. Please add a for attribute using af-for`, this.hostElement);
+        }
+    }
+    setLabelText() {
+        this.labelText = `${this.afLabel} ${this.requiredText}`;
+        if (!this.afLabel) {
+            logger.warn(`digi-form-label must have a label. Please add a label using af-label`, this.hostElement);
+        }
+    }
+    handleSlotVisibility() {
+        this.hasActionSlot = !!this.hostElement.querySelector('[slot="actions"]');
+    }
+    get requiredText() {
+        if (this.afRequired && !this.afAnnounceIfOptional) {
+            return this.afRequiredText ? ` (${this.afRequiredText})` : '';
+        }
+        else if (!this.afRequired && this.afAnnounceIfOptional) {
+            return this.afAnnounceIfOptionalText
+                ? ` (${this.afAnnounceIfOptionalText})`
+                : '';
+        }
+        else {
+            return '';
+        }
+    }
+    render() {
+        return (h("div", { key: '24ae333ab5edc928ce4d26e6e4da0f642617792a', class: "digi-form-label" }, h("div", { key: 'b1a5073a7c9883b13a86f741b865c3b368c1d02b', class: "digi-form-label__label-group" }, this.afFor && this.afLabel && (h("label", { key: '4dd98d11699d82e0e6b5f1127ca0e97382dc45d1', class: "digi-form-label__label", htmlFor: this.afFor, id: this.afId }, h("span", { key: 'a8c1b2cf89d24625e3c13a93bac5fd144d95a3cb', class: "digi-form-label__label--label" }, this.labelText), this.afDescription && (h("span", { key: '4a82c714e6b4f3189772d44bd5748c830252a8d5', class: "digi-form-label__label--description" }, this.afDescription)))), this.hasActionSlot && (h("div", { key: 'd07f90e8e0a8ba9061686bf7cc331480091fbb33', class: "digi-form-label__actions" }, h("slot", { key: '7c5f1750217d9666a6543044e6dbb29ee4839940', name: "actions" }))))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "afFor": ["validateFor"],
+        "afLabel": ["setLabelText"],
+        "afRequired": ["setLabelText"],
+        "afAnnounceIfOptional": ["setLabelText"]
+    }; }
+};
+FormLabel.style = DigiFormLabelStyle0;
+
+const formValidationMessageCss = ".sc-digi-form-validation-message-h{--digi--form-validation-message--icon-color--success:var(--digi--color--icon--validation--success);--digi--form-validation-message--icon-color--warning:var(--digi--color--icon--validation--warning);--digi--form-validation-message--icon-color--error:var(--digi--color--icon--validation--error)}.sc-digi-form-validation-message-h .digi-form-validation-message.sc-digi-form-validation-message{display:flex;flex-wrap:wrap;align-items:center}.sc-digi-form-validation-message-h .digi-form-validation-message--success.sc-digi-form-validation-message{--ICON-COLOR:var(--digi--form-validation-message--icon-color--success)}.sc-digi-form-validation-message-h .digi-form-validation-message--warning.sc-digi-form-validation-message{--ICON-COLOR:var(--digi--form-validation-message--icon-color--warning)}.sc-digi-form-validation-message-h .digi-form-validation-message--error.sc-digi-form-validation-message{--ICON-COLOR:var(--digi--form-validation-message--icon-color--error)}.sc-digi-form-validation-message-h .digi-form-validation-message__icon.sc-digi-form-validation-message{color:var(--ICON-COLOR);margin-inline-end:var(--digi--gutter--icon)}.sc-digi-form-validation-message-h .digi-form-validation-message__icon.sc-digi-form-validation-message>*.sc-digi-form-validation-message{--digi--icon--width:1.25em;--digi--icon--height:1.25em;--digi--icon--color:var(--ICON-COLOR);display:flex}.sc-digi-form-validation-message-h .digi-form-validation-message__icon.sc-digi-form-validation-message .warning.sc-digi-form-validation-message{top:3px;position:relative}.sc-digi-form-validation-message-h .digi-form-validation-message__text.sc-digi-form-validation-message{flex:1;font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--tag--font-size--desktop);color:var(--digi--color--text--primary)}";
+const DigiFormValidationMessageStyle0 = formValidationMessageCss;
+
+const FormValidationMessage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.afVariation = FormValidationMessageVariation.SUCCESS;
+    }
+    get cssModifiers() {
+        return {
+            'digi-form-validation-message--success': this.afVariation === FormValidationMessageVariation.SUCCESS,
+            'digi-form-validation-message--error': this.afVariation === FormValidationMessageVariation.ERROR,
+            'digi-form-validation-message--warning': this.afVariation === FormValidationMessageVariation.WARNING
+        };
+    }
+    get icon() {
+        switch (this.afVariation) {
+            case FormValidationMessageVariation.SUCCESS:
+                return h("digi-icon-validation-success", null);
+            case FormValidationMessageVariation.ERROR:
+                return h("digi-icon-validation-error", null);
+            case FormValidationMessageVariation.WARNING:
+                return h("digi-icon-validation-warning", { class: "warning" });
+        }
+    }
+    render() {
+        return (h("div", { key: 'b15c3cca06f4e015c7006bae470876b246b6ce06', class: Object.assign({ 'digi-form-validation-message': true }, this.cssModifiers) }, h("div", { key: '1e9378eb8b193c35e24e700ef865fb44ae4fb28b', class: "digi-form-validation-message__icon", "aria-hidden": "true" }, this.icon), h("span", { key: '6e72b4f07b641d63603914a33720d6b09a5bd44f', class: "digi-form-validation-message__text" }, h("slot", { key: '74cfa597bf12b19fb2dbef039eac148358ff2635' }))));
+    }
+    get hostElement() { return getElement(this); }
+};
+FormValidationMessage.style = DigiFormValidationMessageStyle0;
+
+const iconValidationSuccessCss = ".sc-digi-icon-validation-success-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-validation-success-h svg.sc-digi-icon-validation-success{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 DigiIconValidationSuccessStyle0 = iconValidationSuccessCss;
+
+const IconCheckCircle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.afTitle = undefined;
+        this.afDesc = undefined;
+        this.afSvgAriaHidden = true;
+        this.afSvgAriaLabelledby = undefined;
+        this.titleId = randomIdGenerator('icontitle');
+    }
+    render() {
+        return (h("svg", { key: '8e17bc8da17af20998fb67b64fc24b40461b176c', class: "digi-icon-validation-success", width: "25", height: "25", viewBox: "0 0 25 25", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+                ? this.afSvgAriaLabelledby
+                : this.afTitle
+                    ? this.titleId
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: '6f56caf229cfb9e2d8f6f54eaeaa4f86c9881eaf', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: 'f7fa4c25a72c4ef312a8f6daedf31ce199979bc2' }, this.afDesc), h("path", { key: 'f90d6e4c93085c88e81ef6935289f437a6a26aa6', class: "digi-icon-validation-success__shape", d: "M25 12.5C25 19.404 19.404 25 12.5 25S0 19.404 0 12.5 5.596 0 12.5 0 25 5.596 25 12.5zm-13.946 6.619l9.274-9.275a.806.806 0 000-1.14l-1.14-1.14a.806.806 0 00-1.14 0l-7.564 7.563-3.531-3.531a.807.807 0 00-1.14 0l-1.141 1.14a.806.806 0 000 1.14l5.242 5.243a.806.806 0 001.14 0z", fill: "currentColor", "fill-rule": "nonzero" })));
+    }
+};
+IconCheckCircle.style = DigiIconValidationSuccessStyle0;
+
+export { FormLabel as digi_form_label, FormValidationMessage as digi_form_validation_message, IconCheckCircle as digi_icon_validation_success };