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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/components/digi-calendar-datepicker.js +10 -6
  2. package/components/digi-form-checkbox.js +1 -1
  3. package/components/digi-form-error-list.js +33 -1
  4. package/components/digi-form-file-upload.js +23 -9
  5. package/components/digi-form-filter.js +1 -1
  6. package/components/{p-13c09880.js → p-f84f590e.js} +2 -2
  7. package/custom-elements.json +9 -1
  8. package/dist/cjs/digi-arbetsformedlingen.cjs.js +1 -1
  9. package/dist/cjs/digi-calendar-datepicker.cjs.entry.js +8 -6
  10. package/dist/cjs/digi-form-checkbox.cjs.entry.js +2 -2
  11. package/dist/cjs/digi-form-error-list.cjs.entry.js +33 -1
  12. package/dist/cjs/digi-form-file-upload.cjs.entry.js +21 -8
  13. package/dist/cjs/loader.cjs.js +1 -1
  14. package/dist/collection/components/_calendar/calendar-datepicker/calendar-datepicker.js +53 -6
  15. package/dist/collection/components/_form/form-checkbox/form-checkbox.js +8 -5
  16. package/dist/collection/components/_form/form-error-list/form-error-list.js +20 -1
  17. package/dist/collection/components/_form/form-file-upload/form-file-upload.js +41 -8
  18. package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
  19. package/dist/digi-arbetsformedlingen/{p-37c0ea9e.entry.js → p-2295239c.entry.js} +1 -1
  20. package/dist/digi-arbetsformedlingen/p-2788683e.entry.js +1 -0
  21. package/dist/digi-arbetsformedlingen/p-42ae53aa.entry.js +1 -0
  22. package/dist/digi-arbetsformedlingen/p-7f155bd5.entry.js +1 -0
  23. package/dist/esm/digi-arbetsformedlingen.js +1 -1
  24. package/dist/esm/digi-calendar-datepicker.entry.js +8 -6
  25. package/dist/esm/digi-form-checkbox.entry.js +2 -2
  26. package/dist/esm/digi-form-error-list.entry.js +33 -1
  27. package/dist/esm/digi-form-file-upload.entry.js +21 -8
  28. package/dist/esm/loader.js +1 -1
  29. package/dist/types/components/_calendar/calendar-datepicker/calendar-datepicker.d.ts +10 -0
  30. package/dist/types/components/_form/form-checkbox/form-checkbox.d.ts +5 -2
  31. package/dist/types/components/_form/form-error-list/form-error-list.d.ts +3 -0
  32. package/dist/types/components/_form/form-file-upload/form-file-upload.d.ts +5 -0
  33. package/dist/types/components.d.ts +29 -4
  34. package/hydrate/index.js +68 -18
  35. package/hydrate/index.mjs +68 -18
  36. package/package.json +1 -1
  37. package/dist/digi-arbetsformedlingen/p-ba3c4861.entry.js +0 -1
  38. package/dist/digi-arbetsformedlingen/p-ef689144.entry.js +0 -1
  39. package/dist/digi-arbetsformedlingen/p-f0a405ca.entry.js +0 -1
@@ -41,6 +41,8 @@ export class CalendarDatepicker {
41
41
  this.afCloseOnSelect = false;
42
42
  this.afOpenCalendarTo = undefined;
43
43
  this.afErrorMessageIsAlert = true;
44
+ this.afAnnounceIfOptional = false;
45
+ this.afAnnounceIfOptionalText = undefined;
44
46
  }
45
47
  afDisableValidationChangeHandler(newVal) {
46
48
  if (!newVal) {
@@ -372,9 +374,9 @@ export class CalendarDatepicker {
372
374
  return this.afSelectedDates;
373
375
  }
374
376
  render() {
375
- return (h(Host, { key: '6b080d933e012fe050aee0181f927c3252b0bb7e', tabindex: -1 }, h("div", { key: 'ec59a7f209f7a5e06c62d4443fbca980b1030d12', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, h("div", { key: '2bf3bd4f0a82c14c4fb04610dab19767fbba595d', class: "digi-calendar-datepicker__input-field" }, h("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()
377
+ return (h(Host, { key: 'a22b366eece8bdf2a6d66ba7b4561093391ad16d', tabindex: -1 }, h("div", { key: '5ec3557df78bb012f2e10f1852252e78e2470ee3', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, h("div", { key: '1215a13021718ac98ad2a4a7a5bae3c456385124', class: "digi-calendar-datepicker__input-field" }, h("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()
376
378
  ? FormInputValidation.ERROR
377
- : this.afValidation, afValidationText: this.getErrorText(), afId: this.afId, afAriaDescribedby: `${this.afId}--validation-message`, afRequired: this.afRequired, afRequiredText: this.afRequiredText, onAfOnChange: (evt) => {
379
+ : 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) => {
378
380
  evt.stopImmediatePropagation();
379
381
  this.parseInput(evt);
380
382
  }, onAfOnBlur: (evt) => {
@@ -389,11 +391,11 @@ export class CalendarDatepicker {
389
391
  e.preventDefault();
390
392
  const focusableDateButton = this.hostElement.querySelector('.digi-calendar__date[tabindex="0"]');
391
393
  focusableDateButton === null || focusableDateButton === void 0 ? void 0 : focusableDateButton.focus();
392
- } }, h("button", { key: '04df5ccb789271d7ba2f693b740f316301f9fae0', id: this.afId + '-button', class: "digi-calendar-datepicker__input-button", slot: "button", "aria-label": this.showCalendar
394
+ } }, h("button", { key: 'c953ddf0c99cfd3b892941da7da4a887b342fd78', id: this.afId + '-button', class: "digi-calendar-datepicker__input-button", slot: "button", "aria-label": this.showCalendar
393
395
  ? this.afCloseCalendarAriaLabel
394
- : this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, h("digi-icon-calendar-alt", { key: '65b9a472f629bbaa46a64c8a304f358da76b0830', class: "digi-calendar-datepicker__button-icon", slot: "icon" })))), h("div", { key: 'd0df89ce680bb2a0ca7f311b2c0ead0f72dc30b6', class: "digi-calendar-datepicker__calendar", id: "calendar-popup" }, h("p", { key: '9796876e15e88b1599d772863c29fc472da24c69', role: "alert", class: "digi-calendar-datepicker__sr-instructions" }, this.showCalendar
396
+ : this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, h("digi-icon-calendar-alt", { key: '46c7387d404b77911b97f31c10e7147bd436c7e3', class: "digi-calendar-datepicker__button-icon", slot: "icon" })))), h("div", { key: '91894a4219afa79d913f558f5d1cc6b410b535ce', class: "digi-calendar-datepicker__calendar", id: "calendar-popup" }, h("p", { key: '989fc17ea7a95aa014a26e09f7db7f59fe53a36b', role: "alert", class: "digi-calendar-datepicker__sr-instructions" }, this.showCalendar
395
397
  ? `${_t.calendar.screenReaderInstructions}${this.screenReaderUpdateTrigger ? '\u200B' : ''}`
396
- : ''), h("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) => {
398
+ : ''), h("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) => {
397
399
  evt.stopImmediatePropagation();
398
400
  this.parseCalendar(evt);
399
401
  }, onKeyDown: (e) => {
@@ -404,7 +406,7 @@ export class CalendarDatepicker {
404
406
  return;
405
407
  e.preventDefault();
406
408
  this.focusOnCalendarInput();
407
- } })), this.afCloseOnSelect && !this.afMultipleDates && (h("div", { key: 'fc150d20f14731e8f67f38c6042e8af4e24eae38', class: "digi-calendar-datepicker__selected-date-alert", role: this.errorMessageIsAlert ? 'alert' : null }, this.afSelectedDates.length > 0
409
+ } })), this.afCloseOnSelect && !this.afMultipleDates && (h("div", { key: 'd9f3eb470b29a0ab96134f1e4666743efacd7448', class: "digi-calendar-datepicker__selected-date-alert", role: this.errorMessageIsAlert ? 'alert' : null }, this.afSelectedDates.length > 0
408
410
  ? `${_t.calendar.datepicker.selectedDate}: ${this.datesToInputString(this.afSelectedDates)}`
409
411
  : '')))));
410
412
  }
@@ -974,6 +976,51 @@ export class CalendarDatepicker {
974
976
  "attribute": "af-error-message-is-alert",
975
977
  "reflect": false,
976
978
  "defaultValue": "true"
979
+ },
980
+ "afAnnounceIfOptional": {
981
+ "type": "boolean",
982
+ "mutable": false,
983
+ "complexType": {
984
+ "original": "boolean",
985
+ "resolved": "boolean",
986
+ "references": {}
987
+ },
988
+ "required": false,
989
+ "optional": false,
990
+ "docs": {
991
+ "tags": [{
992
+ "name": "en",
993
+ "text": "Set this to true if the form contains more required fields than optional fields."
994
+ }],
995
+ "text": "S\u00E4tt denna till true om formul\u00E4ret inneh\u00E5ller fler obligatoriska f\u00E4lt \u00E4n valfria."
996
+ },
997
+ "getter": false,
998
+ "setter": false,
999
+ "attribute": "af-announce-if-optional",
1000
+ "reflect": false,
1001
+ "defaultValue": "false"
1002
+ },
1003
+ "afAnnounceIfOptionalText": {
1004
+ "type": "string",
1005
+ "mutable": false,
1006
+ "complexType": {
1007
+ "original": "string",
1008
+ "resolved": "string",
1009
+ "references": {}
1010
+ },
1011
+ "required": false,
1012
+ "optional": false,
1013
+ "docs": {
1014
+ "tags": [{
1015
+ "name": "en",
1016
+ "text": "Set text for afAnnounceIfOptional."
1017
+ }],
1018
+ "text": "S\u00E4tter text f\u00F6r afAnnounceIfOptional."
1019
+ },
1020
+ "getter": false,
1021
+ "setter": false,
1022
+ "attribute": "af-announce-if-optional-text",
1023
+ "reflect": false
977
1024
  }
978
1025
  };
979
1026
  }
@@ -110,7 +110,7 @@ export class FormCheckbox {
110
110
  this.afOnInput.emit(e);
111
111
  }
112
112
  render() {
113
- return (h(Host, { key: '93a52532d5ee8e2b89982b3d06509c16b3656bce', tabindex: -1 }, h("div", { key: '3f2fe30e35c36080d80fdec5c57abf8e310ae14b', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: 'a45c26da379bff48830f0b03ceebcf24b06c3b17', class: "digi-form-checkbox__input", ref: (el) => {
113
+ return (h(Host, { key: 'e8ca1dfe96537dd438a4b6c206adfc7c9fd64d9c', tabindex: -1 }, h("div", { key: '850911b7ffdcea222b12c2c883cf93b63f703b4f', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: '923a49d0402e6b3034d3e8e6d43033692695c830', class: "digi-form-checkbox__input", ref: (el) => {
114
114
  var _a;
115
115
  this._input = el;
116
116
  (_a = this === null || this === void 0 ? void 0 : this.afInputRef) === null || _a === void 0 ? void 0 : _a.call(this, el);
@@ -118,7 +118,7 @@ export class FormCheckbox {
118
118
  ? null
119
119
  : `${this.afAriaDescribedby ? `${this.afAriaDescribedby} ` : ''}${this.afDescription ? `${this.afId}-description` : ''}`, "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormCheckboxValidation.ERROR
120
120
  ? 'true'
121
- : '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 }), h("label", { key: '54cd68f1c10fd023e9dd81bd0fabb2920b911c12', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: 'c7184f48868d38d04485a48f214cc3c37d862ba4', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: 'afc00a7de3cef740bdbf23607cd9247887752759', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription)))));
121
+ : '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 }), h("label", { key: 'dccbd4e83dbc757483a18ac22d1539ef83dfb534', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: '1cbc88be9d74dab3e04472bc9462712377447d4a', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: 'bdab264d9d13520858c581d2664c0d53171a1415', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription)))));
122
122
  }
123
123
  static get is() { return "digi-form-checkbox"; }
124
124
  static get encapsulation() { return "scoped"; }
@@ -573,10 +573,13 @@ export class FormCheckbox {
573
573
  "optional": false,
574
574
  "docs": {
575
575
  "tags": [{
576
- "name": "deprecated",
577
- "text": "Denna prop kommer att tas bort i slutet av augusti"
576
+ "name": "ignore",
577
+ "text": "S\u00E4tter specifikt tabindex f\u00F6r input. Anv\u00E4nds till v\u00E5r komponent Multifiter\nd\u00E4r vi vill manipulera tabbordningen f\u00F6r att underl\u00E4tta navigeringen f\u00F6r tangentbordsanv\u00E4ndare"
578
+ }, {
579
+ "name": "en",
580
+ "text": "Set specific tabindex for input. Used in our component Multifilter \nwhere we want to manipulate the tab order to facilitate navigation for keyboard users."
578
581
  }],
579
- "text": "Tabindex"
582
+ "text": ""
580
583
  },
581
584
  "getter": false,
582
585
  "setter": false,
@@ -3,6 +3,7 @@ import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
3
3
  import { FormErrorListHeadingLevel } from "./form-error-list-heading-level.enum";
4
4
  import { TypographyVariation } from "../../../enums";
5
5
  import { NotificationAlertVariation } from "../../_notification/notification-alert/notification-alert-variation.enum";
6
+ import { applyStencilScope } from "../../../global/utils/applyStencilScope/applyStencilScope.util";
6
7
  /**
7
8
  * @enums FormErrorListHeadingLevel - form-error-list-heading-level.enum.ts
8
9
  * @swedishName Felmeddelandelista
@@ -23,6 +24,24 @@ export class FormErrorList {
23
24
  async afMSetHeadingFocus() {
24
25
  this.setHeadingFocus();
25
26
  }
27
+ connectedCallback() {
28
+ this.observer = new MutationObserver((mutations) => {
29
+ const hasChildChanges = mutations.some(mutation => mutation.type === 'childList');
30
+ if (hasChildChanges) {
31
+ const hostElement = this.hostElement.querySelector('.digi-form-error-list');
32
+ applyStencilScope(hostElement, hostElement);
33
+ }
34
+ });
35
+ this.observer.observe(this.hostElement, {
36
+ childList: true,
37
+ subtree: true
38
+ });
39
+ }
40
+ disconnectedCallback() {
41
+ if (this.observer) {
42
+ this.observer.disconnect();
43
+ }
44
+ }
26
45
  componentDidLoad() {
27
46
  this.setHeadingFocus();
28
47
  this.afOnReady.emit();
@@ -49,7 +68,7 @@ export class FormErrorList {
49
68
  this.afOnClickLink.emit({ id });
50
69
  }
51
70
  render() {
52
- return (h("div", { key: '59bc43d4b3dd0149647b50203cc1ae585d829006', class: "digi-form-error-list", id: this.afId }, h("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 && (h("digi-typography", { key: '3a61c65373b92a73694770f851c6727e27f853e7', "af-variation": TypographyVariation.SMALL }, h("p", { key: 'a088b4d084f5a6db85cedcb4f469f4dff803f8f6', class: "digi-form-error-list__description" }, this.afDescription))), h("slot", { key: '794c42cdece0d06945255b70a96a6992eb4dcd4c' }))));
71
+ return (h("div", { key: '9471a904e95c6304644d884e15aac90d3b0fbad1', class: "digi-form-error-list", id: this.afId }, h("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 && (h("digi-typography", { key: '8e8ef106286f426b0cbcfd904407582e79e8ce24', "af-variation": TypographyVariation.SMALL }, h("p", { key: '51175a8da94efe46a262ce365994aa3c23983f2e', class: "digi-form-error-list__description" }, this.afDescription))), h("slot", { key: 'b9f5287d0e2c0326100a094a48fa5e7ab314b92f' }))));
53
72
  }
54
73
  static get is() { return "digi-form-error-list"; }
55
74
  static get encapsulation() { return "scoped"; }
@@ -112,6 +112,7 @@ export class FormFileUpload {
112
112
  * @en Import array with files without triggering upload event. A file object needs to contain an id, status and the file itself.
113
113
  */
114
114
  async afMImportFiles(files) {
115
+ this.resetErrors();
115
116
  if (files && files.length > 0) {
116
117
  for (const importedFile of files) {
117
118
  this.validateFile(importedFile);
@@ -126,6 +127,14 @@ export class FormFileUpload {
126
127
  async afMGetFormControlElement() {
127
128
  return this._input;
128
129
  }
130
+ /**
131
+ * Rensar komponentens fillista och eventuella felmeddelanden.
132
+ * @en Clears the component's file list and any error messages.
133
+ */
134
+ async afMClearFiles() {
135
+ this.files = [];
136
+ this.resetErrors();
137
+ }
129
138
  /**
130
139
  * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
131
140
  * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
@@ -173,7 +182,11 @@ export class FormFileUpload {
173
182
  let exist = false;
174
183
  if (this.files.length > 0) {
175
184
  this.files.forEach((file) => {
176
- if (file.name === fileToCheck.name) {
185
+ if (file['id'] === fileToCheck['id']) {
186
+ exist = true;
187
+ return;
188
+ }
189
+ else if (file.name === fileToCheck.name) {
177
190
  exist = true;
178
191
  }
179
192
  });
@@ -557,22 +570,22 @@ export class FormFileUpload {
557
570
  } }, this.renderFiles())));
558
571
  }
559
572
  render() {
560
- return (h(Fragment, { key: '1104991979216e10bd2e137de392134a9dd970f3' }, h("digi-util-breakpoint-observer", { key: '645a8f2849a39c068b77fa7c6ddfd726e834b3b2', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: 'c6b2785961f0e0b0cb2b2ccb7da42d663b9e9e3b', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: 'd51e788ee53461e075b0f73b600608646c70032f', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: '9df4b7deaca899f1c06bf615065a2fce7eea4bc0', class: {
573
+ return (h(Fragment, { key: 'bec280d44d534a720927ab737b34335600c3fe80' }, h("digi-util-breakpoint-observer", { key: '93983b718eda1869ff95f7a0abe8c6704395a1e0', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: '23f30473aa0dd681c6c4ea20138d3f13391bb070', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("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 }), h("div", { key: 'db1082e11bafb320c13a790d639d37ca821617ac', class: {
561
574
  'digi-form-file-upload__upload-area': true,
562
575
  'digi-form-file-upload__upload-area--hover': this.fileHover
563
576
  }, 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 &&
564
- this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: '8c35b4e2523db4f4f892d2f615caedb8bb3a9ebe', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: '096b05c159ce7722687cdc0b1a0ff4889a5485e2', class: "digi-form-file-upload__text-area" }, h("button", { key: '97504d954e2f3a0e76d99fb4d5049ddea108a32f', type: "button", id: this.afId + '-button', ref: (el) => {
577
+ this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: 'f58d5f61b5568263e9b60b255f47e6ef418c78e5', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: 'c58c52f7e2c8aa8d17fe510ef90435d488844237', class: "digi-form-file-upload__text-area" }, h("button", { key: '1bb7fa84e0778702d0e77008f7d468d560ac8e17', type: "button", id: this.afId + '-button', ref: (el) => {
565
578
  this._uploadButton = el;
566
579
  }, onClick: (e) => this.handleInputClick(e), class: "digi-form-file-upload__button hidden_mobile", style: {
567
580
  margin: '0'
568
- } }, h("digi-icon-paperclip", { key: 'e47597d6988db6a71c22fb9ab4cfa877be4a48fa', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
581
+ } }, h("digi-icon-paperclip", { key: 'a84b67ad055682b1c1b013ec948af0935c35ed0c', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
569
582
  ? this.afUploadBtnText
570
- : _t.form.file_choose), h("input", { key: 'b21162f7873e21a8b3ed2d286ef154b66b95c8ec', ref: (el) => {
583
+ : _t.form.file_choose), h("input", { key: 'd0babe3bcbc5d03f2436c0f4a7ee23a93ecb0474', ref: (el) => {
571
584
  this._input = el;
572
- }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), h("span", { key: 'c8e448ef96e9d4f292ec88606526e06935192308' }, this.afVariation !== FormFileUploadVariation.SMALL &&
573
- _t.form.file_dropzone))), h("p", { key: '8c6f1b6190eb4f87bbcd9d50f4c4929cdcf4c026', class: "visually-hidden", role: this.errorMessageIsAlert ? 'alert' : null, "aria-atomic": "true", ref: (el) => {
585
+ }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), h("span", { key: '20a4158d0462ee2f871bddb57b9e168d356573ed' }, this.afVariation !== FormFileUploadVariation.SMALL &&
586
+ _t.form.file_dropzone))), h("p", { key: 'ade6d22fde218536ce42daff285a1605ac16bdb1', class: "visually-hidden", role: this.errorMessageIsAlert ? 'alert' : null, "aria-atomic": "true", ref: (el) => {
574
587
  this._srTextContainer = el;
575
- } }), (this.files.length > 0 || this.error) && (h("div", { key: '7faefe886463ce493824665375b3b4ab0aec5753', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
588
+ } }), (this.files.length > 0 || this.error) && (h("div", { key: '06044ba8e2a5d7e76374af1dfa479c891554ab45', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
576
589
  }
577
590
  static get is() { return "digi-form-file-upload"; }
578
591
  static get encapsulation() { return "scoped"; }
@@ -1317,6 +1330,26 @@ export class FormFileUpload {
1317
1330
  "text": "",
1318
1331
  "tags": []
1319
1332
  }
1333
+ },
1334
+ "afMClearFiles": {
1335
+ "complexType": {
1336
+ "signature": "() => Promise<void>",
1337
+ "parameters": [],
1338
+ "references": {
1339
+ "Promise": {
1340
+ "location": "global",
1341
+ "id": "global::Promise"
1342
+ }
1343
+ },
1344
+ "return": "Promise<void>"
1345
+ },
1346
+ "docs": {
1347
+ "text": "Rensar komponentens fillista och eventuella felmeddelanden.",
1348
+ "tags": [{
1349
+ "name": "en",
1350
+ "text": "Clears the component's file list and any error messages."
1351
+ }]
1352
+ }
1320
1353
  }
1321
1354
  };
1322
1355
  }