@designsystem-se/af 38.0.1-beta.2 → 38.2.0

package/dist/types/components/_form/form-checkbox/form-checkbox.d.ts

@@ -116,8 +116,11 @@ export declare class FormCheckbox {
      */
     afAutofocus: boolean;
     /**
-     * Tabindex
-     * @deprecated Denna prop kommer att tas bort i slutet av augusti
+     * @ignore
+     * Sätter specifikt tabindex för input. Används till vår komponent Multifiter
+     * där vi vill manipulera tabbordningen för att underlätta navigeringen för tangentbordsanvändare
+     * @en Set specific tabindex for input. Used in our component Multifilter
+     * where we want to manipulate the tab order to facilitate navigation for keyboard users.
      */
     afTabIndex: number;
     /**

package/dist/types/components/_form/form-error-list/form-error-list.d.ts

@@ -50,11 +50,14 @@ export declare class FormErrorList {
      * @en When the component and slots are loaded and initialized this event will trigger.
      */
     afOnReady: EventEmitter;
+    private observer;
     /**
      * Sätter fokus på rubriken.
      * @en Sets focus on the heading.
      */
     afMSetHeadingFocus(): Promise<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentDidLoad(): void;
     setHeadingFocus(): void;
     clickResponse(e: CustomEvent): void;

package/dist/types/components/_form/form-file-upload/form-file-upload.d.ts

@@ -179,6 +179,11 @@ export declare class FormFileUpload {
      */
     afMImportFiles(files: File[]): Promise<void>;
     afMGetFormControlElement(): Promise<HTMLInputElement>;
+    /**
+     * Rensar komponentens fillista och eventuella felmeddelanden.
+     * @en Clears the component's file list and any error messages.
+     */
+    afMClearFiles(): Promise<void>;
     /**
      * 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.

package/dist/types/components.d.ts

@@ -510,6 +510,16 @@ export namespace Components {
      * @valueAccessor TextValueAccessor
      */
     interface DigiCalendarDatepicker {
+        /**
+          * Sätt denna till true om formuläret innehåller fler obligatoriska fält än valfria.
+          * @en Set this to true if the form contains more required fields than optional fields.
+         */
+        "afAnnounceIfOptional": boolean;
+        /**
+          * Sätter text för afAnnounceIfOptional.
+          * @en Set text for afAnnounceIfOptional.
+         */
+        "afAnnounceIfOptionalText": string;
         /**
           * Aria-label till knappen som stänger kalendern
           * @en Aria-label for the button that closes the calendar
@@ -1122,8 +1132,8 @@ export namespace Components {
          */
         "afRequired": boolean;
         /**
-          * Tabindex
-          * @deprecated Denna prop kommer att tas bort i slutet av augusti
+          * @ignore Sätter specifikt tabindex för input. Används till vår komponent Multifiter där vi vill manipulera tabbordningen för att underlätta navigeringen för tangentbordsanvändare
+          * @en Set specific tabindex for input. Used in our component Multifilter  where we want to manipulate the tab order to facilitate navigation for keyboard users.
          */
         "afTabIndex": number;
         /**
@@ -1302,6 +1312,11 @@ export namespace Components {
           * @en A description text
          */
         "afLabelDescription": string;
+        /**
+          * Rensar komponentens fillista och eventuella felmeddelanden.
+          * @en Clears the component's file list and any error messages.
+         */
+        "afMClearFiles": () => Promise<void>;
         /**
           * Få ut alla uppladdade filer
           * @en Get all uploaded files
@@ -11936,6 +11951,16 @@ declare namespace LocalJSX {
      * @valueAccessor TextValueAccessor
      */
     interface DigiCalendarDatepicker {
+        /**
+          * Sätt denna till true om formuläret innehåller fler obligatoriska fält än valfria.
+          * @en Set this to true if the form contains more required fields than optional fields.
+         */
+        "afAnnounceIfOptional"?: boolean;
+        /**
+          * Sätter text för afAnnounceIfOptional.
+          * @en Set text for afAnnounceIfOptional.
+         */
+        "afAnnounceIfOptionalText"?: string;
         /**
           * Aria-label till knappen som stänger kalendern
           * @en Aria-label for the button that closes the calendar
@@ -12618,8 +12643,8 @@ declare namespace LocalJSX {
          */
         "afRequired"?: boolean;
         /**
-          * Tabindex
-          * @deprecated Denna prop kommer att tas bort i slutet av augusti
+          * @ignore Sätter specifikt tabindex för input. Används till vår komponent Multifiter där vi vill manipulera tabbordningen för att underlätta navigeringen för tangentbordsanvändare
+          * @en Set specific tabindex for input. Used in our component Multifilter  where we want to manipulate the tab order to facilitate navigation for keyboard users.
          */
         "afTabIndex"?: number;
         /**

package/hydrate/index.js

@@ -9446,6 +9446,8 @@ class CalendarDatepicker {
         this.afCloseOnSelect = false;
         this.afOpenCalendarTo = undefined;
         this.afErrorMessageIsAlert = true;
+        this.afAnnounceIfOptional = false;
+        this.afAnnounceIfOptionalText = undefined;
     }
     afDisableValidationChangeHandler(newVal) {
         if (!newVal) {
@@ -9777,9 +9779,9 @@ class CalendarDatepicker {
         return this.afSelectedDates;
     }
     render() {
-        return (hAsync(Host, { key: '6b080d933e012fe050aee0181f927c3252b0bb7e', tabindex: -1 }, hAsync("div", { key: 'ec59a7f209f7a5e06c62d4443fbca980b1030d12', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, hAsync("div", { key: '2bf3bd4f0a82c14c4fb04610dab19767fbba595d', class: "digi-calendar-datepicker__input-field" }, hAsync("digi-form-input", { key: 'ebde8123611c021b60104f75c2e4085e35fb4697', ref: (el) => (this._input = el), class: 'digi-calendar-datepicker__input-component', afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afName: this.afName, afValue: this.inputValue, afValidation: this.hasBuiltInValidationError()
+        return (hAsync(Host, { key: 'a22b366eece8bdf2a6d66ba7b4561093391ad16d', tabindex: -1 }, hAsync("div", { key: '5ec3557df78bb012f2e10f1852252e78e2470ee3', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, hAsync("div", { key: '1215a13021718ac98ad2a4a7a5bae3c456385124', class: "digi-calendar-datepicker__input-field" }, hAsync("digi-form-input", { key: '8794d312452fe11f0f9052bbdd238e5570ec55f0', ref: (el) => (this._input = el), class: 'digi-calendar-datepicker__input-component', afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afName: this.afName, afValue: this.inputValue, afValidation: this.hasBuiltInValidationError()
                 ? FormInputValidation.ERROR
-                : this.afValidation, afValidationText: this.getErrorText(), afId: this.afId, afAriaDescribedby: `${this.afId}--validation-message`, afRequired: this.afRequired, afRequiredText: this.afRequiredText, onAfOnChange: (evt) => {
+                : this.afValidation, afValidationText: this.getErrorText(), afId: this.afId, afAriaDescribedby: `${this.afId}--validation-message`, afRequired: this.afRequired, afRequiredText: this.afRequiredText, afAnnounceIfOptional: this.afAnnounceIfOptional, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText, onAfOnChange: (evt) => {
                 evt.stopImmediatePropagation();
                 this.parseInput(evt);
             }, onAfOnBlur: (evt) => {
@@ -9794,11 +9796,11 @@ class CalendarDatepicker {
                 e.preventDefault();
                 const focusableDateButton = this.hostElement.querySelector('.digi-calendar__date[tabindex="0"]');
                 focusableDateButton === null || focusableDateButton === void 0 ? void 0 : focusableDateButton.focus();
-            } }, hAsync("button", { key: '04df5ccb789271d7ba2f693b740f316301f9fae0', id: this.afId + '-button', class: "digi-calendar-datepicker__input-button", slot: "button", "aria-label": this.showCalendar
+            } }, hAsync("button", { key: 'c953ddf0c99cfd3b892941da7da4a887b342fd78', id: this.afId + '-button', class: "digi-calendar-datepicker__input-button", slot: "button", "aria-label": this.showCalendar
                 ? this.afCloseCalendarAriaLabel
-                : this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, hAsync("digi-icon-calendar-alt", { key: '65b9a472f629bbaa46a64c8a304f358da76b0830', class: "digi-calendar-datepicker__button-icon", slot: "icon" })))), hAsync("div", { key: 'd0df89ce680bb2a0ca7f311b2c0ead0f72dc30b6', class: "digi-calendar-datepicker__calendar", id: "calendar-popup" }, hAsync("p", { key: '9796876e15e88b1599d772863c29fc472da24c69', role: "alert", class: "digi-calendar-datepicker__sr-instructions" }, this.showCalendar
+                : this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, hAsync("digi-icon-calendar-alt", { key: '46c7387d404b77911b97f31c10e7147bd436c7e3', class: "digi-calendar-datepicker__button-icon", slot: "icon" })))), hAsync("div", { key: '91894a4219afa79d913f558f5d1cc6b410b535ce', class: "digi-calendar-datepicker__calendar", id: "calendar-popup" }, hAsync("p", { key: '989fc17ea7a95aa014a26e09f7db7f59fe53a36b', role: "alert", class: "digi-calendar-datepicker__sr-instructions" }, this.showCalendar
             ? `${_t.calendar.screenReaderInstructions}${this.screenReaderUpdateTrigger ? '\u200B' : ''}`
-            : ''), hAsync("digi-calendar", { key: 'bd5f34bcdbcb2276b5080c43479337c514861ba9', afActive: this.showCalendar, afShowWeekNumber: this.afShowWeekNumber, afMultipleDates: this.afMultipleDates, afYearSelect: this.afYearSelect, afSelectedDates: this.getSelectedDates, afMinDate: this.afMinDate, afMaxDate: this.afMaxDate, "aria-hidden": !this.showCalendar, afOpenCalendarTo: this.afOpenCalendarTo, onAfOnDateSelectedChange: (evt) => {
+            : ''), hAsync("digi-calendar", { key: '6e62fb845769eca0a9b8cb21e4a09a5620804d42', afActive: this.showCalendar, afShowWeekNumber: this.afShowWeekNumber, afMultipleDates: this.afMultipleDates, afYearSelect: this.afYearSelect, afSelectedDates: this.getSelectedDates, afMinDate: this.afMinDate, afMaxDate: this.afMaxDate, "aria-hidden": !this.showCalendar, afOpenCalendarTo: this.afOpenCalendarTo, onAfOnDateSelectedChange: (evt) => {
                 evt.stopImmediatePropagation();
                 this.parseCalendar(evt);
             }, onKeyDown: (e) => {
@@ -9809,7 +9811,7 @@ class CalendarDatepicker {
                     return;
                 e.preventDefault();
                 this.focusOnCalendarInput();
-            } })), this.afCloseOnSelect && !this.afMultipleDates && (hAsync("div", { key: 'fc150d20f14731e8f67f38c6042e8af4e24eae38', class: "digi-calendar-datepicker__selected-date-alert", role: this.errorMessageIsAlert ? 'alert' : null }, this.afSelectedDates.length > 0
+            } })), this.afCloseOnSelect && !this.afMultipleDates && (hAsync("div", { key: 'd9f3eb470b29a0ab96134f1e4666743efacd7448', class: "digi-calendar-datepicker__selected-date-alert", role: this.errorMessageIsAlert ? 'alert' : null }, this.afSelectedDates.length > 0
             ? `${_t.calendar.datepicker.selectedDate}: ${this.datesToInputString(this.afSelectedDates)}`
             : '')))));
     }
@@ -9850,6 +9852,8 @@ class CalendarDatepicker {
             "afCloseOnSelect": [4, "af-close-on-select"],
             "afOpenCalendarTo": [16],
             "afErrorMessageIsAlert": [8, "af-error-message-is-alert"],
+            "afAnnounceIfOptional": [4, "af-announce-if-optional"],
+            "afAnnounceIfOptionalText": [1, "af-announce-if-optional-text"],
             "showWrongFormatError": [32],
             "showDisabledDateError": [32],
             "showCalendar": [32],
@@ -20839,7 +20843,7 @@ class FormCheckbox {
         this.afOnInput.emit(e);
     }
     render() {
-        return (hAsync(Host, { key: '93a52532d5ee8e2b89982b3d06509c16b3656bce', tabindex: -1 }, hAsync("div", { key: '3f2fe30e35c36080d80fdec5c57abf8e310ae14b', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, hAsync("input", { key: 'a45c26da379bff48830f0b03ceebcf24b06c3b17', class: "digi-form-checkbox__input", ref: (el) => {
+        return (hAsync(Host, { key: 'e8ca1dfe96537dd438a4b6c206adfc7c9fd64d9c', tabindex: -1 }, hAsync("div", { key: '850911b7ffdcea222b12c2c883cf93b63f703b4f', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, hAsync("input", { key: '923a49d0402e6b3034d3e8e6d43033692695c830', class: "digi-form-checkbox__input", ref: (el) => {
                 var _a;
                 this._input = el;
                 (_a = this === null || this === void 0 ? void 0 : this.afInputRef) === null || _a === void 0 ? void 0 : _a.call(this, el);
@@ -20847,7 +20851,7 @@ class FormCheckbox {
                 ? null
                 : `${this.afAriaDescribedby ? `${this.afAriaDescribedby} ` : ''}${this.afDescription ? `${this.afId}-description` : ''}`, "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormCheckboxValidation.ERROR
                 ? 'true'
-                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "checkbox", checked: this.afChecked, value: this.afValue, indeterminate: this.afIndeterminate, autofocus: this.afAutofocus ? this.afAutofocus : null }), hAsync("label", { key: '54cd68f1c10fd023e9dd81bd0fabb2920b911c12', htmlFor: this.afId, class: "digi-form-checkbox__label" }, hAsync("span", { key: 'c7184f48868d38d04485a48f214cc3c37d862ba4', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (hAsync("p", { key: 'afc00a7de3cef740bdbf23607cd9247887752759', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription)))));
+                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "checkbox", checked: this.afChecked, value: this.afValue, indeterminate: this.afIndeterminate, autofocus: this.afAutofocus ? this.afAutofocus : null }), hAsync("label", { key: 'dccbd4e83dbc757483a18ac22d1539ef83dfb534', htmlFor: this.afId, class: "digi-form-checkbox__label" }, hAsync("span", { key: '1cbc88be9d74dab3e04472bc9462712377447d4a', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (hAsync("p", { key: 'bdab264d9d13520858c581d2664c0d53171a1415', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription)))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -20890,6 +20894,20 @@ class FormCheckbox {
     }; }
 }
 
+/**
+ * Small utility for adding Stencil component scope to dynamically inserted elements
+ * (e.g. svg for title logotypes)
+ */
+function applyStencilScope(host, root) {
+    const scopeClasses = [...host.classList].filter(c => c.startsWith('sc-'));
+    if (!scopeClasses.length)
+        return;
+    root.classList.add(...scopeClasses);
+    root.querySelectorAll('*').forEach(el => {
+        el.classList.add(...scopeClasses);
+    });
+}
+
 const formErrorListCss = ".sc-digi-form-error-list-h{--digi--form-error-list--list--padding:var(--digi--gutter--smaller) 0 0 0;--digi--form-error-list--list--margin:0;--digi--form-error-list--item--padding:var(--digi--padding--smaller) 0 0 0;--digi--form-error-list--item--margin:0}.sc-digi-form-error-list-h .digi-form-error-list.sc-digi-form-error-list ul.sc-digi-form-error-list{list-style:none;padding:var(--digi--form-error-list--list--padding);margin:var(--digi--form-error-list--list--margin)}.sc-digi-form-error-list-h .digi-form-error-list.sc-digi-form-error-list ul.sc-digi-form-error-list>li.sc-digi-form-error-list{list-style:none;padding:var(--digi--form-error-list--item--padding);margin:var(--digi--form-error-list--item--margin)}";
 var DigiFormErrorListStyle0 = formErrorListCss;
 
@@ -20916,6 +20934,24 @@ class FormErrorList {
     async afMSetHeadingFocus() {
         this.setHeadingFocus();
     }
+    connectedCallback() {
+        this.observer = new MutationObserver((mutations) => {
+            const hasChildChanges = mutations.some(mutation => mutation.type === 'childList');
+            if (hasChildChanges) {
+                const hostElement = this.hostElement.querySelector('.digi-form-error-list');
+                applyStencilScope(hostElement, hostElement);
+            }
+        });
+        this.observer.observe(this.hostElement, {
+            childList: true,
+            subtree: true
+        });
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
     componentDidLoad() {
         this.setHeadingFocus();
         this.afOnReady.emit();
@@ -20942,7 +20978,7 @@ class FormErrorList {
         this.afOnClickLink.emit({ id });
     }
     render() {
-        return (hAsync("div", { key: '59bc43d4b3dd0149647b50203cc1ae585d829006', class: "digi-form-error-list", id: this.afId }, hAsync("digi-notification-alert", { key: 'a2b034276ff7549c9c0711202020e3753da7808d', ref: (el) => (this._notificationAlert = el), "af-heading": this.afHeading, "af-heading-level": this.afHeadingLevel, "af-variation": NotificationAlertVariation.DANGER }, this.afDescription && (hAsync("digi-typography", { key: '3a61c65373b92a73694770f851c6727e27f853e7', "af-variation": TypographyVariation.SMALL }, hAsync("p", { key: 'a088b4d084f5a6db85cedcb4f469f4dff803f8f6', class: "digi-form-error-list__description" }, this.afDescription))), hAsync("slot", { key: '794c42cdece0d06945255b70a96a6992eb4dcd4c' }))));
+        return (hAsync("div", { key: '9471a904e95c6304644d884e15aac90d3b0fbad1', class: "digi-form-error-list", id: this.afId }, hAsync("digi-notification-alert", { key: '13a8bf3037570f929f470cc2a531156d552ca53a', ref: (el) => (this._notificationAlert = el), "af-heading": this.afHeading, "af-heading-level": this.afHeadingLevel, "af-variation": NotificationAlertVariation.DANGER }, this.afDescription && (hAsync("digi-typography", { key: '8e8ef106286f426b0cbcfd904407582e79e8ce24', "af-variation": TypographyVariation.SMALL }, hAsync("p", { key: '51175a8da94efe46a262ce365994aa3c23983f2e', class: "digi-form-error-list__description" }, this.afDescription))), hAsync("slot", { key: 'b9f5287d0e2c0326100a094a48fa5e7ab314b92f' }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return DigiFormErrorListStyle0; }
@@ -21122,6 +21158,7 @@ class FormFileUpload {
      * @en Import array with files without triggering upload event. A file object needs to contain an id, status and the file itself.
      */
     async afMImportFiles(files) {
+        this.resetErrors();
         if (files && files.length > 0) {
             for (const importedFile of files) {
                 this.validateFile(importedFile);
@@ -21136,6 +21173,14 @@ class FormFileUpload {
     async afMGetFormControlElement() {
         return this._input;
     }
+    /**
+     * Rensar komponentens fillista och eventuella felmeddelanden.
+     * @en Clears the component's file list and any error messages.
+     */
+    async afMClearFiles() {
+        this.files = [];
+        this.resetErrors();
+    }
     /**
      * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
      * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
@@ -21183,7 +21228,11 @@ class FormFileUpload {
         let exist = false;
         if (this.files.length > 0) {
             this.files.forEach((file) => {
-                if (file.name === fileToCheck.name) {
+                if (file['id'] === fileToCheck['id']) {
+                    exist = true;
+                    return;
+                }
+                else if (file.name === fileToCheck.name) {
                     exist = true;
                 }
             });
@@ -21567,22 +21616,22 @@ class FormFileUpload {
             } }, this.renderFiles())));
     }
     render() {
-        return (hAsync(Fragment, { key: '1104991979216e10bd2e137de392134a9dd970f3' }, hAsync("digi-util-breakpoint-observer", { key: '645a8f2849a39c068b77fa7c6ddfd726e834b3b2', onAfOnChange: (e) => this.breakpointHandler(e) }), hAsync("div", { key: 'c6b2785961f0e0b0cb2b2ccb7da42d663b9e9e3b', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, hAsync("digi-form-label", { key: 'd51e788ee53461e075b0f73b600608646c70032f', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), hAsync("div", { key: '9df4b7deaca899f1c06bf615065a2fce7eea4bc0', class: {
+        return (hAsync(Fragment, { key: 'bec280d44d534a720927ab737b34335600c3fe80' }, hAsync("digi-util-breakpoint-observer", { key: '93983b718eda1869ff95f7a0abe8c6704395a1e0', onAfOnChange: (e) => this.breakpointHandler(e) }), hAsync("div", { key: '23f30473aa0dd681c6c4ea20138d3f13391bb070', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, hAsync("digi-form-label", { key: 'c42a873187b3bf30ddfdb71561d6902a8b2f98fe', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), hAsync("div", { key: 'db1082e11bafb320c13a790d639d37ca821617ac', class: {
                 'digi-form-file-upload__upload-area': true,
                 'digi-form-file-upload__upload-area--hover': this.fileHover
             }, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), onDragEnter: (e) => this.handleOnDragEnterLeave(e), onDragLeave: (e) => this.handleOnDragEnterLeave(e), onClick: (e) => this.handleInputClick(e) }, this.fileHover &&
-            this.afVariation != FormFileUploadVariation.SMALL && (hAsync("div", { key: '8c35b4e2523db4f4f892d2f615caedb8bb3a9ebe', class: "digi-form-file-upload__upload-area-overlay" })), hAsync("div", { key: '096b05c159ce7722687cdc0b1a0ff4889a5485e2', class: "digi-form-file-upload__text-area" }, hAsync("button", { key: '97504d954e2f3a0e76d99fb4d5049ddea108a32f', type: "button", id: this.afId + '-button', ref: (el) => {
+            this.afVariation != FormFileUploadVariation.SMALL && (hAsync("div", { key: 'f58d5f61b5568263e9b60b255f47e6ef418c78e5', class: "digi-form-file-upload__upload-area-overlay" })), hAsync("div", { key: 'c58c52f7e2c8aa8d17fe510ef90435d488844237', class: "digi-form-file-upload__text-area" }, hAsync("button", { key: '1bb7fa84e0778702d0e77008f7d468d560ac8e17', type: "button", id: this.afId + '-button', ref: (el) => {
                 this._uploadButton = el;
             }, onClick: (e) => this.handleInputClick(e), class: "digi-form-file-upload__button hidden_mobile", style: {
                 margin: '0'
-            } }, hAsync("digi-icon-paperclip", { key: 'e47597d6988db6a71c22fb9ab4cfa877be4a48fa', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
+            } }, hAsync("digi-icon-paperclip", { key: 'a84b67ad055682b1c1b013ec948af0935c35ed0c', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
             ? this.afUploadBtnText
-            : _t.form.file_choose), hAsync("input", { key: 'b21162f7873e21a8b3ed2d286ef154b66b95c8ec', ref: (el) => {
+            : _t.form.file_choose), hAsync("input", { key: 'd0babe3bcbc5d03f2436c0f4a7ee23a93ecb0474', ref: (el) => {
                 this._input = el;
-            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), hAsync("span", { key: 'c8e448ef96e9d4f292ec88606526e06935192308' }, this.afVariation !== FormFileUploadVariation.SMALL &&
-            _t.form.file_dropzone))), hAsync("p", { key: '8c6f1b6190eb4f87bbcd9d50f4c4929cdcf4c026', class: "visually-hidden", role: this.errorMessageIsAlert ? 'alert' : null, "aria-atomic": "true", ref: (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" }), hAsync("span", { key: '20a4158d0462ee2f871bddb57b9e168d356573ed' }, this.afVariation !== FormFileUploadVariation.SMALL &&
+            _t.form.file_dropzone))), hAsync("p", { key: 'ade6d22fde218536ce42daff285a1605ac16bdb1', class: "visually-hidden", role: this.errorMessageIsAlert ? 'alert' : null, "aria-atomic": "true", ref: (el) => {
                 this._srTextContainer = el;
-            } }), (this.files.length > 0 || this.error) && (hAsync("div", { key: '7faefe886463ce493824665375b3b4ab0aec5753', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
+            } }), (this.files.length > 0 || this.error) && (hAsync("div", { key: '06044ba8e2a5d7e76374af1dfa479c891554ab45', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -21626,7 +21675,8 @@ class FormFileUpload {
             "afMGetAllFiles": [64],
             "afMGetValidationState": [64],
             "afMImportFiles": [64],
-            "afMGetFormControlElement": [64]
+            "afMGetFormControlElement": [64],
+            "afMClearFiles": [64]
         },
         "$listeners$": [[0, "focus", "focusOnInput"]],
         "$lazyBundleId$": "-",

package/hydrate/index.mjs

@@ -9442,6 +9442,8 @@ class CalendarDatepicker {
         this.afCloseOnSelect = false;
         this.afOpenCalendarTo = undefined;
         this.afErrorMessageIsAlert = true;
+        this.afAnnounceIfOptional = false;
+        this.afAnnounceIfOptionalText = undefined;
     }
     afDisableValidationChangeHandler(newVal) {
         if (!newVal) {
@@ -9773,9 +9775,9 @@ class CalendarDatepicker {
         return this.afSelectedDates;
     }
     render() {
-        return (hAsync(Host, { key: '6b080d933e012fe050aee0181f927c3252b0bb7e', tabindex: -1 }, hAsync("div", { key: 'ec59a7f209f7a5e06c62d4443fbca980b1030d12', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, hAsync("div", { key: '2bf3bd4f0a82c14c4fb04610dab19767fbba595d', class: "digi-calendar-datepicker__input-field" }, hAsync("digi-form-input", { key: 'ebde8123611c021b60104f75c2e4085e35fb4697', ref: (el) => (this._input = el), class: 'digi-calendar-datepicker__input-component', afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afName: this.afName, afValue: this.inputValue, afValidation: this.hasBuiltInValidationError()
+        return (hAsync(Host, { key: 'a22b366eece8bdf2a6d66ba7b4561093391ad16d', tabindex: -1 }, hAsync("div", { key: '5ec3557df78bb012f2e10f1852252e78e2470ee3', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, hAsync("div", { key: '1215a13021718ac98ad2a4a7a5bae3c456385124', class: "digi-calendar-datepicker__input-field" }, hAsync("digi-form-input", { key: '8794d312452fe11f0f9052bbdd238e5570ec55f0', ref: (el) => (this._input = el), class: 'digi-calendar-datepicker__input-component', afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afName: this.afName, afValue: this.inputValue, afValidation: this.hasBuiltInValidationError()
                 ? FormInputValidation.ERROR
-                : this.afValidation, afValidationText: this.getErrorText(), afId: this.afId, afAriaDescribedby: `${this.afId}--validation-message`, afRequired: this.afRequired, afRequiredText: this.afRequiredText, onAfOnChange: (evt) => {
+                : this.afValidation, afValidationText: this.getErrorText(), afId: this.afId, afAriaDescribedby: `${this.afId}--validation-message`, afRequired: this.afRequired, afRequiredText: this.afRequiredText, afAnnounceIfOptional: this.afAnnounceIfOptional, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText, onAfOnChange: (evt) => {
                 evt.stopImmediatePropagation();
                 this.parseInput(evt);
             }, onAfOnBlur: (evt) => {
@@ -9790,11 +9792,11 @@ class CalendarDatepicker {
                 e.preventDefault();
                 const focusableDateButton = this.hostElement.querySelector('.digi-calendar__date[tabindex="0"]');
                 focusableDateButton === null || focusableDateButton === void 0 ? void 0 : focusableDateButton.focus();
-            } }, hAsync("button", { key: '04df5ccb789271d7ba2f693b740f316301f9fae0', id: this.afId + '-button', class: "digi-calendar-datepicker__input-button", slot: "button", "aria-label": this.showCalendar
+            } }, hAsync("button", { key: 'c953ddf0c99cfd3b892941da7da4a887b342fd78', id: this.afId + '-button', class: "digi-calendar-datepicker__input-button", slot: "button", "aria-label": this.showCalendar
                 ? this.afCloseCalendarAriaLabel
-                : this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, hAsync("digi-icon-calendar-alt", { key: '65b9a472f629bbaa46a64c8a304f358da76b0830', class: "digi-calendar-datepicker__button-icon", slot: "icon" })))), hAsync("div", { key: 'd0df89ce680bb2a0ca7f311b2c0ead0f72dc30b6', class: "digi-calendar-datepicker__calendar", id: "calendar-popup" }, hAsync("p", { key: '9796876e15e88b1599d772863c29fc472da24c69', role: "alert", class: "digi-calendar-datepicker__sr-instructions" }, this.showCalendar
+                : this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, hAsync("digi-icon-calendar-alt", { key: '46c7387d404b77911b97f31c10e7147bd436c7e3', class: "digi-calendar-datepicker__button-icon", slot: "icon" })))), hAsync("div", { key: '91894a4219afa79d913f558f5d1cc6b410b535ce', class: "digi-calendar-datepicker__calendar", id: "calendar-popup" }, hAsync("p", { key: '989fc17ea7a95aa014a26e09f7db7f59fe53a36b', role: "alert", class: "digi-calendar-datepicker__sr-instructions" }, this.showCalendar
             ? `${_t.calendar.screenReaderInstructions}${this.screenReaderUpdateTrigger ? '\u200B' : ''}`
-            : ''), hAsync("digi-calendar", { key: 'bd5f34bcdbcb2276b5080c43479337c514861ba9', afActive: this.showCalendar, afShowWeekNumber: this.afShowWeekNumber, afMultipleDates: this.afMultipleDates, afYearSelect: this.afYearSelect, afSelectedDates: this.getSelectedDates, afMinDate: this.afMinDate, afMaxDate: this.afMaxDate, "aria-hidden": !this.showCalendar, afOpenCalendarTo: this.afOpenCalendarTo, onAfOnDateSelectedChange: (evt) => {
+            : ''), hAsync("digi-calendar", { key: '6e62fb845769eca0a9b8cb21e4a09a5620804d42', afActive: this.showCalendar, afShowWeekNumber: this.afShowWeekNumber, afMultipleDates: this.afMultipleDates, afYearSelect: this.afYearSelect, afSelectedDates: this.getSelectedDates, afMinDate: this.afMinDate, afMaxDate: this.afMaxDate, "aria-hidden": !this.showCalendar, afOpenCalendarTo: this.afOpenCalendarTo, onAfOnDateSelectedChange: (evt) => {
                 evt.stopImmediatePropagation();
                 this.parseCalendar(evt);
             }, onKeyDown: (e) => {
@@ -9805,7 +9807,7 @@ class CalendarDatepicker {
                     return;
                 e.preventDefault();
                 this.focusOnCalendarInput();
-            } })), this.afCloseOnSelect && !this.afMultipleDates && (hAsync("div", { key: 'fc150d20f14731e8f67f38c6042e8af4e24eae38', class: "digi-calendar-datepicker__selected-date-alert", role: this.errorMessageIsAlert ? 'alert' : null }, this.afSelectedDates.length > 0
+            } })), this.afCloseOnSelect && !this.afMultipleDates && (hAsync("div", { key: 'd9f3eb470b29a0ab96134f1e4666743efacd7448', class: "digi-calendar-datepicker__selected-date-alert", role: this.errorMessageIsAlert ? 'alert' : null }, this.afSelectedDates.length > 0
             ? `${_t.calendar.datepicker.selectedDate}: ${this.datesToInputString(this.afSelectedDates)}`
             : '')))));
     }
@@ -9846,6 +9848,8 @@ class CalendarDatepicker {
             "afCloseOnSelect": [4, "af-close-on-select"],
             "afOpenCalendarTo": [16],
             "afErrorMessageIsAlert": [8, "af-error-message-is-alert"],
+            "afAnnounceIfOptional": [4, "af-announce-if-optional"],
+            "afAnnounceIfOptionalText": [1, "af-announce-if-optional-text"],
             "showWrongFormatError": [32],
             "showDisabledDateError": [32],
             "showCalendar": [32],
@@ -20835,7 +20839,7 @@ class FormCheckbox {
         this.afOnInput.emit(e);
     }
     render() {
-        return (hAsync(Host, { key: '93a52532d5ee8e2b89982b3d06509c16b3656bce', tabindex: -1 }, hAsync("div", { key: '3f2fe30e35c36080d80fdec5c57abf8e310ae14b', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, hAsync("input", { key: 'a45c26da379bff48830f0b03ceebcf24b06c3b17', class: "digi-form-checkbox__input", ref: (el) => {
+        return (hAsync(Host, { key: 'e8ca1dfe96537dd438a4b6c206adfc7c9fd64d9c', tabindex: -1 }, hAsync("div", { key: '850911b7ffdcea222b12c2c883cf93b63f703b4f', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, hAsync("input", { key: '923a49d0402e6b3034d3e8e6d43033692695c830', class: "digi-form-checkbox__input", ref: (el) => {
                 var _a;
                 this._input = el;
                 (_a = this === null || this === void 0 ? void 0 : this.afInputRef) === null || _a === void 0 ? void 0 : _a.call(this, el);
@@ -20843,7 +20847,7 @@ class FormCheckbox {
                 ? null
                 : `${this.afAriaDescribedby ? `${this.afAriaDescribedby} ` : ''}${this.afDescription ? `${this.afId}-description` : ''}`, "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormCheckboxValidation.ERROR
                 ? 'true'
-                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "checkbox", checked: this.afChecked, value: this.afValue, indeterminate: this.afIndeterminate, autofocus: this.afAutofocus ? this.afAutofocus : null }), hAsync("label", { key: '54cd68f1c10fd023e9dd81bd0fabb2920b911c12', htmlFor: this.afId, class: "digi-form-checkbox__label" }, hAsync("span", { key: 'c7184f48868d38d04485a48f214cc3c37d862ba4', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (hAsync("p", { key: 'afc00a7de3cef740bdbf23607cd9247887752759', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription)))));
+                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "checkbox", checked: this.afChecked, value: this.afValue, indeterminate: this.afIndeterminate, autofocus: this.afAutofocus ? this.afAutofocus : null }), hAsync("label", { key: 'dccbd4e83dbc757483a18ac22d1539ef83dfb534', htmlFor: this.afId, class: "digi-form-checkbox__label" }, hAsync("span", { key: '1cbc88be9d74dab3e04472bc9462712377447d4a', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (hAsync("p", { key: 'bdab264d9d13520858c581d2664c0d53171a1415', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription)))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -20886,6 +20890,20 @@ class FormCheckbox {
     }; }
 }
 
+/**
+ * Small utility for adding Stencil component scope to dynamically inserted elements
+ * (e.g. svg for title logotypes)
+ */
+function applyStencilScope(host, root) {
+    const scopeClasses = [...host.classList].filter(c => c.startsWith('sc-'));
+    if (!scopeClasses.length)
+        return;
+    root.classList.add(...scopeClasses);
+    root.querySelectorAll('*').forEach(el => {
+        el.classList.add(...scopeClasses);
+    });
+}
+
 const formErrorListCss = ".sc-digi-form-error-list-h{--digi--form-error-list--list--padding:var(--digi--gutter--smaller) 0 0 0;--digi--form-error-list--list--margin:0;--digi--form-error-list--item--padding:var(--digi--padding--smaller) 0 0 0;--digi--form-error-list--item--margin:0}.sc-digi-form-error-list-h .digi-form-error-list.sc-digi-form-error-list ul.sc-digi-form-error-list{list-style:none;padding:var(--digi--form-error-list--list--padding);margin:var(--digi--form-error-list--list--margin)}.sc-digi-form-error-list-h .digi-form-error-list.sc-digi-form-error-list ul.sc-digi-form-error-list>li.sc-digi-form-error-list{list-style:none;padding:var(--digi--form-error-list--item--padding);margin:var(--digi--form-error-list--item--margin)}";
 var DigiFormErrorListStyle0 = formErrorListCss;
 
@@ -20912,6 +20930,24 @@ class FormErrorList {
     async afMSetHeadingFocus() {
         this.setHeadingFocus();
     }
+    connectedCallback() {
+        this.observer = new MutationObserver((mutations) => {
+            const hasChildChanges = mutations.some(mutation => mutation.type === 'childList');
+            if (hasChildChanges) {
+                const hostElement = this.hostElement.querySelector('.digi-form-error-list');
+                applyStencilScope(hostElement, hostElement);
+            }
+        });
+        this.observer.observe(this.hostElement, {
+            childList: true,
+            subtree: true
+        });
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
     componentDidLoad() {
         this.setHeadingFocus();
         this.afOnReady.emit();
@@ -20938,7 +20974,7 @@ class FormErrorList {
         this.afOnClickLink.emit({ id });
     }
     render() {
-        return (hAsync("div", { key: '59bc43d4b3dd0149647b50203cc1ae585d829006', class: "digi-form-error-list", id: this.afId }, hAsync("digi-notification-alert", { key: 'a2b034276ff7549c9c0711202020e3753da7808d', ref: (el) => (this._notificationAlert = el), "af-heading": this.afHeading, "af-heading-level": this.afHeadingLevel, "af-variation": NotificationAlertVariation.DANGER }, this.afDescription && (hAsync("digi-typography", { key: '3a61c65373b92a73694770f851c6727e27f853e7', "af-variation": TypographyVariation.SMALL }, hAsync("p", { key: 'a088b4d084f5a6db85cedcb4f469f4dff803f8f6', class: "digi-form-error-list__description" }, this.afDescription))), hAsync("slot", { key: '794c42cdece0d06945255b70a96a6992eb4dcd4c' }))));
+        return (hAsync("div", { key: '9471a904e95c6304644d884e15aac90d3b0fbad1', class: "digi-form-error-list", id: this.afId }, hAsync("digi-notification-alert", { key: '13a8bf3037570f929f470cc2a531156d552ca53a', ref: (el) => (this._notificationAlert = el), "af-heading": this.afHeading, "af-heading-level": this.afHeadingLevel, "af-variation": NotificationAlertVariation.DANGER }, this.afDescription && (hAsync("digi-typography", { key: '8e8ef106286f426b0cbcfd904407582e79e8ce24', "af-variation": TypographyVariation.SMALL }, hAsync("p", { key: '51175a8da94efe46a262ce365994aa3c23983f2e', class: "digi-form-error-list__description" }, this.afDescription))), hAsync("slot", { key: 'b9f5287d0e2c0326100a094a48fa5e7ab314b92f' }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return DigiFormErrorListStyle0; }
@@ -21118,6 +21154,7 @@ class FormFileUpload {
      * @en Import array with files without triggering upload event. A file object needs to contain an id, status and the file itself.
      */
     async afMImportFiles(files) {
+        this.resetErrors();
         if (files && files.length > 0) {
             for (const importedFile of files) {
                 this.validateFile(importedFile);
@@ -21132,6 +21169,14 @@ class FormFileUpload {
     async afMGetFormControlElement() {
         return this._input;
     }
+    /**
+     * Rensar komponentens fillista och eventuella felmeddelanden.
+     * @en Clears the component's file list and any error messages.
+     */
+    async afMClearFiles() {
+        this.files = [];
+        this.resetErrors();
+    }
     /**
      * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
      * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
@@ -21179,7 +21224,11 @@ class FormFileUpload {
         let exist = false;
         if (this.files.length > 0) {
             this.files.forEach((file) => {
-                if (file.name === fileToCheck.name) {
+                if (file['id'] === fileToCheck['id']) {
+                    exist = true;
+                    return;
+                }
+                else if (file.name === fileToCheck.name) {
                     exist = true;
                 }
             });
@@ -21563,22 +21612,22 @@ class FormFileUpload {
             } }, this.renderFiles())));
     }
     render() {
-        return (hAsync(Fragment, { key: '1104991979216e10bd2e137de392134a9dd970f3' }, hAsync("digi-util-breakpoint-observer", { key: '645a8f2849a39c068b77fa7c6ddfd726e834b3b2', onAfOnChange: (e) => this.breakpointHandler(e) }), hAsync("div", { key: 'c6b2785961f0e0b0cb2b2ccb7da42d663b9e9e3b', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, hAsync("digi-form-label", { key: 'd51e788ee53461e075b0f73b600608646c70032f', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), hAsync("div", { key: '9df4b7deaca899f1c06bf615065a2fce7eea4bc0', class: {
+        return (hAsync(Fragment, { key: 'bec280d44d534a720927ab737b34335600c3fe80' }, hAsync("digi-util-breakpoint-observer", { key: '93983b718eda1869ff95f7a0abe8c6704395a1e0', onAfOnChange: (e) => this.breakpointHandler(e) }), hAsync("div", { key: '23f30473aa0dd681c6c4ea20138d3f13391bb070', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, hAsync("digi-form-label", { key: 'c42a873187b3bf30ddfdb71561d6902a8b2f98fe', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), hAsync("div", { key: 'db1082e11bafb320c13a790d639d37ca821617ac', class: {
                 'digi-form-file-upload__upload-area': true,
                 'digi-form-file-upload__upload-area--hover': this.fileHover
             }, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), onDragEnter: (e) => this.handleOnDragEnterLeave(e), onDragLeave: (e) => this.handleOnDragEnterLeave(e), onClick: (e) => this.handleInputClick(e) }, this.fileHover &&
-            this.afVariation != FormFileUploadVariation.SMALL && (hAsync("div", { key: '8c35b4e2523db4f4f892d2f615caedb8bb3a9ebe', class: "digi-form-file-upload__upload-area-overlay" })), hAsync("div", { key: '096b05c159ce7722687cdc0b1a0ff4889a5485e2', class: "digi-form-file-upload__text-area" }, hAsync("button", { key: '97504d954e2f3a0e76d99fb4d5049ddea108a32f', type: "button", id: this.afId + '-button', ref: (el) => {
+            this.afVariation != FormFileUploadVariation.SMALL && (hAsync("div", { key: 'f58d5f61b5568263e9b60b255f47e6ef418c78e5', class: "digi-form-file-upload__upload-area-overlay" })), hAsync("div", { key: 'c58c52f7e2c8aa8d17fe510ef90435d488844237', class: "digi-form-file-upload__text-area" }, hAsync("button", { key: '1bb7fa84e0778702d0e77008f7d468d560ac8e17', type: "button", id: this.afId + '-button', ref: (el) => {
                 this._uploadButton = el;
             }, onClick: (e) => this.handleInputClick(e), class: "digi-form-file-upload__button hidden_mobile", style: {
                 margin: '0'
-            } }, hAsync("digi-icon-paperclip", { key: 'e47597d6988db6a71c22fb9ab4cfa877be4a48fa', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
+            } }, hAsync("digi-icon-paperclip", { key: 'a84b67ad055682b1c1b013ec948af0935c35ed0c', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
             ? this.afUploadBtnText
-            : _t.form.file_choose), hAsync("input", { key: 'b21162f7873e21a8b3ed2d286ef154b66b95c8ec', ref: (el) => {
+            : _t.form.file_choose), hAsync("input", { key: 'd0babe3bcbc5d03f2436c0f4a7ee23a93ecb0474', ref: (el) => {
                 this._input = el;
-            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), hAsync("span", { key: 'c8e448ef96e9d4f292ec88606526e06935192308' }, this.afVariation !== FormFileUploadVariation.SMALL &&
-            _t.form.file_dropzone))), hAsync("p", { key: '8c6f1b6190eb4f87bbcd9d50f4c4929cdcf4c026', class: "visually-hidden", role: this.errorMessageIsAlert ? 'alert' : null, "aria-atomic": "true", ref: (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" }), hAsync("span", { key: '20a4158d0462ee2f871bddb57b9e168d356573ed' }, this.afVariation !== FormFileUploadVariation.SMALL &&
+            _t.form.file_dropzone))), hAsync("p", { key: 'ade6d22fde218536ce42daff285a1605ac16bdb1', class: "visually-hidden", role: this.errorMessageIsAlert ? 'alert' : null, "aria-atomic": "true", ref: (el) => {
                 this._srTextContainer = el;
-            } }), (this.files.length > 0 || this.error) && (hAsync("div", { key: '7faefe886463ce493824665375b3b4ab0aec5753', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
+            } }), (this.files.length > 0 || this.error) && (hAsync("div", { key: '06044ba8e2a5d7e76374af1dfa479c891554ab45', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -21622,7 +21671,8 @@ class FormFileUpload {
             "afMGetAllFiles": [64],
             "afMGetValidationState": [64],
             "afMImportFiles": [64],
-            "afMGetFormControlElement": [64]
+            "afMGetFormControlElement": [64],
+            "afMClearFiles": [64]
         },
         "$listeners$": [[0, "focus", "focusOnInput"]],
         "$lazyBundleId$": "-",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designsystem-se/af",
   "author": "Arbetsförmedlingen",
-  "version": "38.0.1-beta.2",
+  "version": "38.2.0",
   "description": "Web Components for Digi Designsystem",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",