@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.
- package/components/digi-calendar-datepicker.js +10 -6
- package/components/digi-form-checkbox.js +1 -1
- package/components/digi-form-error-list.js +33 -1
- package/components/digi-form-file-upload.js +23 -9
- package/components/digi-form-filter.js +1 -1
- package/components/{p-13c09880.js → p-f84f590e.js} +2 -2
- package/custom-elements.json +9 -1
- package/dist/cjs/digi-arbetsformedlingen.cjs.js +1 -1
- package/dist/cjs/digi-calendar-datepicker.cjs.entry.js +8 -6
- package/dist/cjs/digi-form-checkbox.cjs.entry.js +2 -2
- package/dist/cjs/digi-form-error-list.cjs.entry.js +33 -1
- package/dist/cjs/digi-form-file-upload.cjs.entry.js +21 -8
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/_calendar/calendar-datepicker/calendar-datepicker.js +53 -6
- package/dist/collection/components/_form/form-checkbox/form-checkbox.js +8 -5
- package/dist/collection/components/_form/form-error-list/form-error-list.js +20 -1
- package/dist/collection/components/_form/form-file-upload/form-file-upload.js +41 -8
- package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/{p-37c0ea9e.entry.js → p-2295239c.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/p-2788683e.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-42ae53aa.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-7f155bd5.entry.js +1 -0
- package/dist/esm/digi-arbetsformedlingen.js +1 -1
- package/dist/esm/digi-calendar-datepicker.entry.js +8 -6
- package/dist/esm/digi-form-checkbox.entry.js +2 -2
- package/dist/esm/digi-form-error-list.entry.js +33 -1
- package/dist/esm/digi-form-file-upload.entry.js +21 -8
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/_calendar/calendar-datepicker/calendar-datepicker.d.ts +10 -0
- package/dist/types/components/_form/form-checkbox/form-checkbox.d.ts +5 -2
- package/dist/types/components/_form/form-error-list/form-error-list.d.ts +3 -0
- package/dist/types/components/_form/form-file-upload/form-file-upload.d.ts +5 -0
- package/dist/types/components.d.ts +29 -4
- package/hydrate/index.js +68 -18
- package/hydrate/index.mjs +68 -18
- package/package.json +1 -1
- package/dist/digi-arbetsformedlingen/p-ba3c4861.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-ef689144.entry.js +0 -1
- 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: '
|
|
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: '
|
|
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: '
|
|
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: '
|
|
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: '
|
|
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: '
|
|
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: '
|
|
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": "
|
|
577
|
-
"text": "
|
|
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": "
|
|
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: '
|
|
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
|
|
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: '
|
|
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: '
|
|
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: '
|
|
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: '
|
|
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: '
|
|
573
|
-
_t.form.file_dropzone))), h("p", { key: '
|
|
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: '
|
|
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
|
}
|