@designsystem-se/af 36.0.1 → 36.0.3
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 +8 -8
- package/components/digi-calendar.js +1 -1
- package/components/digi-code-example.js +1 -1
- package/components/digi-form-checkbox.js +1 -1
- package/components/digi-form-filter.js +1 -1
- package/components/digi-form-input-search.js +3 -3
- package/components/digi-form-input.js +1 -1
- package/components/digi-form-radiobutton.js +1 -1
- package/components/digi-form-radiogroup.js +2 -2
- package/components/digi-form-select-filter.js +8 -8
- package/components/digi-form-select.js +1 -1
- package/components/digi-form-textarea.js +3 -3
- package/components/digi-logo.js +1 -1
- package/components/digi-title-logo.js +1 -1
- package/components/{p-ad4aaaaf.js → p-2ac136a0.js} +1 -1
- package/components/{p-fb2fd84c.js → p-44f143ea.js} +8 -8
- package/components/{p-f18dbbea.js → p-5fd00d55.js} +2 -2
- package/components/{p-779eecac.js → p-9466c4e0.js} +4 -4
- package/components/{p-bb0ffb59.js → p-dedeb670.js} +3 -3
- package/components/{p-c236a69d.js → p-f22b488a.js} +2 -2
- package/dist/cjs/digi-button_9.cjs.entry.js +4 -4
- package/dist/cjs/digi-calendar-datepicker.cjs.entry.js +5 -5
- package/dist/cjs/digi-calendar_2.cjs.entry.js +7 -7
- package/dist/cjs/digi-code-block_3.cjs.entry.js +2 -2
- package/dist/cjs/digi-form-checkbox.cjs.entry.js +2 -2
- package/dist/cjs/digi-form-input-search.cjs.entry.js +2 -2
- package/dist/cjs/digi-form-input.cjs.entry.js +3 -3
- package/dist/cjs/digi-form-radiogroup.cjs.entry.js +2 -2
- package/dist/cjs/digi-form-select-filter.cjs.entry.js +7 -7
- package/dist/cjs/digi-form-textarea.cjs.entry.js +3 -3
- package/dist/cjs/digi-title-logo.cjs.entry.js +1 -1
- package/dist/collection/components/_calendar/calendar/calendar.js +7 -7
- package/dist/collection/components/_calendar/calendar-datepicker/calendar-datepicker.js +6 -5
- package/dist/collection/components/_form/form-checkbox/form-checkbox.js +3 -2
- package/dist/collection/components/_form/form-input/form-input.js +4 -3
- package/dist/collection/components/_form/form-input-search/form-input-search.js +3 -2
- package/dist/collection/components/_form/form-radiobutton/form-radiobutton.js +3 -2
- package/dist/collection/components/_form/form-radiogroup/form-radiogroup.js +3 -2
- package/dist/collection/components/_form/form-select/form-select.js +5 -4
- package/dist/collection/components/_form/form-select-filter/form-select-filter.js +8 -7
- package/dist/collection/components/_form/form-textarea/form-textarea.js +4 -3
- package/dist/collection/components/_logo/title-logo/title-logo.js +1 -1
- package/dist/collection/design-tokens/components/_logo.variables.scss +19 -16
- package/dist/digi-arbetsformedlingen/design-tokens/components/_logo.variables.scss +19 -16
- package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/{p-b6048dc7.entry.js → p-19c30198.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/p-2b7b69cd.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-011d5a78.entry.js → p-5d3383f9.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/p-6bd60ab6.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-3d0c3803.entry.js → p-750ff498.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/{p-9dcedec5.entry.js → p-76022084.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/{p-04413bed.entry.js → p-832cbd71.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/{p-67d28f76.entry.js → p-c24aab43.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/{p-43178277.entry.js → p-c8e29e68.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/{p-864542b1.entry.js → p-cc9a96ff.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/{p-98eece1b.entry.js → p-e6b65415.entry.js} +1 -1
- package/dist/esm/digi-button_9.entry.js +4 -4
- package/dist/esm/digi-calendar-datepicker.entry.js +5 -5
- package/dist/esm/digi-calendar_2.entry.js +7 -7
- package/dist/esm/digi-code-block_3.entry.js +2 -2
- package/dist/esm/digi-form-checkbox.entry.js +2 -2
- package/dist/esm/digi-form-input-search.entry.js +2 -2
- package/dist/esm/digi-form-input.entry.js +3 -3
- package/dist/esm/digi-form-radiogroup.entry.js +2 -2
- package/dist/esm/digi-form-select-filter.entry.js +7 -7
- package/dist/esm/digi-form-textarea.entry.js +3 -3
- package/dist/esm/digi-title-logo.entry.js +1 -1
- package/dist/types/components/_calendar/calendar/calendar.d.ts +1 -1
- package/dist/types/components/_calendar/calendar-datepicker/calendar-datepicker.d.ts +1 -0
- package/dist/types/components/_form/form-checkbox/form-checkbox.d.ts +1 -0
- package/dist/types/components/_form/form-input/form-input.d.ts +1 -0
- package/dist/types/components/_form/form-input-search/form-input-search.d.ts +1 -0
- package/dist/types/components/_form/form-radiobutton/form-radiobutton.d.ts +1 -0
- package/dist/types/components/_form/form-radiogroup/form-radiogroup.d.ts +1 -0
- package/dist/types/components/_form/form-select/form-select.d.ts +1 -0
- package/dist/types/components/_form/form-select-filter/form-select-filter.d.ts +1 -0
- package/dist/types/components/_form/form-textarea/form-textarea.d.ts +1 -0
- package/dist/types/components.d.ts +36 -0
- package/hydrate/index.js +47 -38
- package/hydrate/index.mjs +47 -38
- package/package.json +1 -1
- package/dist/digi-arbetsformedlingen/p-0461e19a.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-6efa0bd8.entry.js +0 -1
|
@@ -400,18 +400,18 @@ const Calendar = class {
|
|
|
400
400
|
};
|
|
401
401
|
}
|
|
402
402
|
render() {
|
|
403
|
-
return (index.h("div", { key: '
|
|
403
|
+
return (index.h("div", { key: '1077a770af823d9e0c0f59cdc6f1fef2a49d761a', class: {
|
|
404
404
|
'digi-calendar': true,
|
|
405
405
|
'digi-calendar--hide': !this.afActive
|
|
406
|
-
}, id: `${this.afId}-calendar` }, this.afYearSelect && (index.h("div", { key: '
|
|
406
|
+
}, id: `${this.afId}-calendar` }, this.afYearSelect && (index.h("div", { key: 'cd7dfa8e20efd08afa590cd4e177ddb4c41455d8', class: "digi-calendar__header" }, index.h("div", { key: 'd1e6e956713de7fe417253be0fc1ec3aea9748b0', class: "digi-calendar__header--year-select" }, index.h("digi-form-select", { key: 'cf34feec9ed25e0251effe86b3ce393918a32eda', afLabel: text._t.calendar.month, "af-variation": "small", afValue: this.focusedDate.getMonth().toString(), onAfOnSelect: (evt) => {
|
|
407
407
|
this.selectMonth(evt);
|
|
408
408
|
} }, text._t.calendar.months.map((month, index$1) => {
|
|
409
409
|
return index.h("option", { value: index$1 }, month);
|
|
410
|
-
})), index.h("digi-form-select", { key: '
|
|
410
|
+
})), index.h("digi-form-select", { key: 'ddcd90917d6dba315f8018c4311c852f3471d3c0', afLabel: text._t.calendar.year, "af-variation": "small", afValue: this.focusedDate.getFullYear().toString(), onAfOnSelect: (evt) => {
|
|
411
411
|
this.selectYear(evt);
|
|
412
|
-
} }, this.allSelectableYears().map((year) => (index.h("option", { value: year.toString() }, year))))))), !this.afYearSelect && (index.h("div", { key: '
|
|
413
|
-
', ' + text._t.calendar.previousMonth, onClick: () => this.subtractMonth() }, index.h("digi-icon-chevron-left", { key: '
|
|
414
|
-
', ' + text._t.calendar.nextMonth, onClick: () => this.addMonth() }, index.h("span", { key: '
|
|
412
|
+
} }, this.allSelectableYears().map((year) => (index.h("option", { value: year.toString() }, year))))))), !this.afYearSelect && (index.h("div", { key: '814648caa21619240a5904a809c95024398e9741', class: "digi-calendar__header" }, index.h("div", { key: 'd3dc54a4d0172d503bff66e5171846f433755c4b', class: "digi-calendar__header--month-step" }, index.h("button", { key: '7725160aab267e5cdd70618613b2f485d5b7dd7f', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() - 1) +
|
|
413
|
+
', ' + text._t.calendar.previousMonth, onClick: () => this.subtractMonth() }, index.h("digi-icon-chevron-left", { key: 'e8d1dc80011cb7e79ce6af893df2fd4601d92c74', slot: "icon", "aria-hidden": "true" }), index.h("span", { key: 'ae56dadf565d819f8e89804596dbe38119fb592e', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() - 1))), index.h("div", { key: '257ac7d346e084390aba658eb7329cab913e3463', class: "digi-calendar__month" }, this.getFullMonthName(this.focusedDate.getMonth())), index.h("button", { key: '0c483763c0420f1c172c78364d2ce931ffcd116d', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() + 1) +
|
|
414
|
+
', ' + text._t.calendar.nextMonth, onClick: () => this.addMonth() }, index.h("span", { key: 'de4617285a713bd9baa375a99f81bb027768c947', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() + 1)), index.h("digi-icon-chevron-right", { key: '8d6252fcdd7a035ce8fe4e6f4cb468ce7935aeba', slot: "icon", "aria-hidden": "true" }))))), index.h("digi-util-keydown-handler", { key: '5080246278db71745444dcd40d0722a64e8c80b5', onAfOnDown: (e) => this.navigateHandler(e, 7), onAfOnUp: (e) => this.navigateHandler(e, -7), onAfOnLeft: (e) => this.navigateHandler(e, -1), onAfOnRight: (e) => this.navigateHandler(e, 1) }, index.h("table", { key: '9052f9c8135d95110f927c6a5a949fbd63daec7a', role: "grid", class: "digi-calendar__table" }, index.h("thead", { key: '428467866c49e65d348db796a006611542aabc02' }, index.h("tr", { key: '260024069438dadff553bc3391a37bbb533b5d11', role: "row" }, this.afShowWeekNumber && (index.h("th", { key: '2c22102011ade9125e61416ac78eaed16dec2e26', role: "columnheader", abbr: text._t.calendar.week, class: "digi-calendar__table-header-week" }, text._t.calendar.week.toLowerCase())), Object.keys(text._t.calendar.weekdays).map((day) => (index.h("th", { role: "columnheader", "aria-label": text._t.calendar.weekdays[day], abbr: text._t.calendar.weekdays[day], class: "digi-calendar__table-header" }, text._t.calendar.weekdays_short[day].toLowerCase()))))), index.h("tbody", { key: 'cbe3d290919c35ad27799c17e6b6236557dbe126', ref: (el) => (this._tbody = el) }, this.activeCalendar.map((week) => {
|
|
415
415
|
return (index.h("tr", null, week.map((day, i) => {
|
|
416
416
|
if (this.afShowWeekNumber && i === 0) {
|
|
417
417
|
return (index.h("th", { role: "rowheader", "aria-label": text._t.calendar.week + ' ' + day, class: "digi-calendar__td-week digi-calendar__date--week-number", id: 'digi-calendar__week-' + day }, day));
|
|
@@ -426,7 +426,7 @@ const Calendar = class {
|
|
|
426
426
|
: null }, index.h("span", { "aria-hidden": "true" }, day.getDate()))));
|
|
427
427
|
}
|
|
428
428
|
})));
|
|
429
|
-
})))), index.h("slot", { key: '
|
|
429
|
+
})))), index.h("slot", { key: 'e97e8147fc91a3b401665eeeb8db6be7036f678b', name: "calendar-footer" })));
|
|
430
430
|
}
|
|
431
431
|
static get watchers() { return {
|
|
432
432
|
"focusedDate": ["focusedDateChanged"],
|
|
@@ -214,9 +214,9 @@ const FormRadiobutton = class {
|
|
|
214
214
|
this.afOnInput.emit(e);
|
|
215
215
|
}
|
|
216
216
|
render() {
|
|
217
|
-
return (index.h(index.Host, { key: '
|
|
217
|
+
return (index.h(index.Host, { key: 'c219f20c710f23829a44887396b31f03860b5071', tabindex: -1 }, index.h("div", { key: '8a79373d73a6a2285694738d15e735dffa06f058', class: Object.assign({ 'digi-form-radiobutton': true }, this.cssModifiers) }, index.h("input", { key: 'eaf8472603390c55b3857f1918094494b0ff38f9', class: "digi-form-radiobutton__input", ref: (el) => (this._input = el), onInput: (e) => this.inputHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), "aria-describedby": this.afAriaDescribedby, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === typographyVariation_enum.FormRadiobuttonValidation.ERROR
|
|
218
218
|
? 'true'
|
|
219
|
-
: 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "radio", checked: this.afChecked, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null }), index.h("label", { key: '
|
|
219
|
+
: 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "radio", checked: this.afChecked, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null }), index.h("label", { key: 'f3049d0f425c3f756f6e157a0a9f243541dbd468', htmlFor: this.afId, class: "digi-form-radiobutton__label" }, index.h("span", { key: '3114e3bc85e870e916dd642a448bd4016e7b648e', class: "digi-form-radiobutton__circle" }), this.afLabel))));
|
|
220
220
|
}
|
|
221
221
|
get hostElement() { return index.getElement(this); }
|
|
222
222
|
static get watchers() { return {
|
|
@@ -106,7 +106,7 @@ const FormCheckbox = class {
|
|
|
106
106
|
this.afOnInput.emit(e);
|
|
107
107
|
}
|
|
108
108
|
render() {
|
|
109
|
-
return (index.h(index.Host, { key: '
|
|
109
|
+
return (index.h(index.Host, { key: '119dd4d2bd465e027f4d5c79f8334b0bb9491048', tabindex: -1 }, index.h("div", { key: '4bb8e86d4323bfe5f079f3c082bf64b6f7eec750', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, index.h("input", { key: '5c780e58b7df31cd9c13563b920b5e06ea74022c', class: "digi-form-checkbox__input", ref: (el) => {
|
|
110
110
|
var _a;
|
|
111
111
|
this._input = el;
|
|
112
112
|
(_a = this === null || this === void 0 ? void 0 : this.afInputRef) === null || _a === void 0 ? void 0 : _a.call(this, el);
|
|
@@ -114,7 +114,7 @@ const FormCheckbox = class {
|
|
|
114
114
|
? null
|
|
115
115
|
: `${this.afAriaDescribedby ? `${this.afAriaDescribedby} ` : ''}${this.afDescription ? `${this.afId}-description` : ''}`, "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === formCheckboxVariation_enum.FormCheckboxValidation.ERROR
|
|
116
116
|
? 'true'
|
|
117
|
-
: '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 }), index.h("label", { key: '
|
|
117
|
+
: '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 }), index.h("label", { key: '71599f05c3436521e96f2210606ad3c71f6d341e', htmlFor: this.afId, class: "digi-form-checkbox__label" }, index.h("span", { key: '6f2ecde62ef62aa8a286aa2e64b1932d1d605e0a', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (index.h("p", { key: '2ca8d8ddfb9578b236712cbb761348fb1c456f18', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription)))));
|
|
118
118
|
}
|
|
119
119
|
get hostElement() { return index.getElement(this); }
|
|
120
120
|
static get watchers() { return {
|
|
@@ -135,10 +135,10 @@ const FormInputSearch = class {
|
|
|
135
135
|
};
|
|
136
136
|
}
|
|
137
137
|
render() {
|
|
138
|
-
return (index.h(index.Host, { key: '
|
|
138
|
+
return (index.h(index.Host, { key: '5502afd53a378b67ffaed787a84ffd0e154c6a75', tabindex: -1 }, index.h("div", { key: '9d76ceba2e057efe2029cb600ce43e3e2d39ebfb', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, index.h("digi-form-input", { key: 'fbee883f2df35b697093aa7fcdd134704583b350', class: {
|
|
139
139
|
'digi-form-input-search__input': true,
|
|
140
140
|
'digi-form-input-search__input--no-button': this.afHideButton
|
|
141
|
-
}, ref: (el) => (this._input = el), onAfOnBlur: (e) => this.blurHandler(e), onAfOnChange: (e) => this.changeHandler(e), onAfOnFocus: (e) => this.focusHandler(e), onAfOnFocusout: (e) => this.focusoutHandler(e), onAfOnKeyup: (e) => this.keyupHandler(e), onAfOnInput: (e) => this.inputHandler(e), afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afAriaActivedescendant: this.afAriaActivedescendant, afAriaDescribedby: this.afAriaDescribedby, afAriaLabelledby: this.afAriaLabelledby, afAriaAutocomplete: this.afAriaAutocomplete, afAutocomplete: this.afAutocomplete, afName: this.afName, afType: this.afType, afValue: this.afValue, afVariation: this.afVariation, afAutofocus: this.afAutofocus ? this.afAutofocus : null, afButtonVariation: this.afButtonVariation, afId: this.afId }, !this.afHideButton && (index.h("digi-button", { key: '
|
|
141
|
+
}, ref: (el) => (this._input = el), onAfOnBlur: (e) => this.blurHandler(e), onAfOnChange: (e) => this.changeHandler(e), onAfOnFocus: (e) => this.focusHandler(e), onAfOnFocusout: (e) => this.focusoutHandler(e), onAfOnKeyup: (e) => this.keyupHandler(e), onAfOnInput: (e) => this.inputHandler(e), afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afAriaActivedescendant: this.afAriaActivedescendant, afAriaDescribedby: this.afAriaDescribedby, afAriaLabelledby: this.afAriaLabelledby, afAriaAutocomplete: this.afAriaAutocomplete, afAutocomplete: this.afAutocomplete, afName: this.afName, afType: this.afType, afValue: this.afValue, afVariation: this.afVariation, afAutofocus: this.afAutofocus ? this.afAutofocus : null, afButtonVariation: this.afButtonVariation, afId: this.afId }, !this.afHideButton && (index.h("digi-button", { key: '45ca4cd2086bf49f53781bd11919ea8cbee9d9fa', class: "digi-form-input-search__button", onAfOnClick: (e) => this.clickHandler(e), onAfOnFocus: (e) => e.stopPropagation(), afType: this.afButtonType, afAriaLabel: this.afButtonAriaLabel, afAriaLabelledby: this.afButtonAriaLabelledby, afSize: this.afVariation, slot: "button" }, index.h("digi-icon-search", { key: '1860c4ec6f386c16552d959c0b8091e4e88060cb', slot: "icon" }), this.afButtonText))))));
|
|
142
142
|
}
|
|
143
143
|
get hostElement() { return index.getElement(this); }
|
|
144
144
|
static get watchers() { return {
|
|
@@ -175,12 +175,12 @@ const FormInput = class {
|
|
|
175
175
|
this.hasButton = !!this.hostElement.querySelector('[slot="button"]');
|
|
176
176
|
}
|
|
177
177
|
render() {
|
|
178
|
-
return (index.h(index.Host, { key: '
|
|
178
|
+
return (index.h(index.Host, { key: 'bd32d602a4fa625394c8bcf3b7a8916092c91aae', tabindex: -1 }, index.h("div", { key: '25ded0f93bd3078bec0aab16242c960487fd657f', class: Object.assign({ 'digi-form-input': true }, this.cssModifiers) }, index.h("digi-form-label", { key: '0fa8b13f155a3acd0bf23691c156f34e8a0aa214', class: "digi-form-input__label", afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), index.h("div", { key: '4b001af998878a6dadbaada1e56d4ef64f71da9a', class: "digi-form-input__input-wrapper" }, index.h("input", Object.assign({ key: 'b0082240f8d3b59ed36ad1d9ed8bec6aab536b54', class: "digi-form-input__input", ref: (el) => (this._input = el), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onKeyUp: (e) => this.keyupHandler(e), onInput: (e) => this.inputHandler(e), "aria-activedescendant": this.afAriaActivedescendant, "aria-describedby": `${this.afAriaDescribedby} ${this.afId}--validation-message`, "aria-labelledby": this.afAriaLabelledby, "aria-autocomplete": this.afAriaAutocomplete, "aria-invalid": this.afValidation === formInputVariation_enum.FormInputValidation.ERROR
|
|
179
179
|
? 'true'
|
|
180
180
|
: 'false', "aria-controls": this.afAriaControls, autocomplete: this.afAutocomplete, autofocus: this.afAutofocus ? this.afAutofocus : null, maxLength: this.afMaxlength, minLength: this.afMinlength, max: this.afMax, min: this.afMin, step: this.afStep, list: this.afList, role: this.afRole, dirName: this.afDirname, required: this.afRequired, id: this.afId, name: this.afName, type: this.afType, value: this.afValue }, (this.afInputmode == formInputVariation_enum.FormInputMode.DEFAULT
|
|
181
181
|
? {}
|
|
182
|
-
: { inputmode: this.afInputmode }))), index.h("slot", { key: '
|
|
183
|
-
this.afValidation != formInputVariation_enum.FormInputValidation.NEUTRAL && (index.h("digi-form-validation-message", { key: '
|
|
182
|
+
: { inputmode: this.afInputmode }))), index.h("slot", { key: '46eef3d0ba7c02517ef3824410a1c0cfc74baaa7', name: "button" })), index.h("div", { key: '4024a3bcab31173d947bfe70e9064e31b2a23a8f', class: "digi-form-input__footer" }, index.h("div", { key: '55455e4bd8de053c35f1ca727b5e41f71f47a295', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
|
|
183
|
+
this.afValidation != formInputVariation_enum.FormInputValidation.NEUTRAL && (index.h("digi-form-validation-message", { key: 'c8c0c2d8468b09076a513c70e068c956386c64a5', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))))));
|
|
184
184
|
}
|
|
185
185
|
get hostElement() { return index.getElement(this); }
|
|
186
186
|
static get watchers() { return {
|
|
@@ -65,9 +65,9 @@ const FormRadiogroup = class {
|
|
|
65
65
|
});
|
|
66
66
|
}
|
|
67
67
|
render() {
|
|
68
|
-
return (index.h(index.Host, { key: '
|
|
68
|
+
return (index.h(index.Host, { key: '0b03e0ccdc03d2f06466f9a2527f68b937637e6f', tabindex: -1 }, index.h("div", { key: '02b0862fc0645ba6c5b12480279078d0b796f5ef', id: this.afId, class: {
|
|
69
69
|
'digi-form-radiogroup': true
|
|
70
|
-
} }, index.h("digi-util-mutation-observer", { key: '
|
|
70
|
+
} }, index.h("digi-util-mutation-observer", { key: 'ed9e1a034e5d5221c4c004e12db780077277876e', onAfOnChange: (e) => this.radiobuttonChangeListener(e) }, index.h("slot", { key: '5572449dc6ad235472c92e8524d26688d56e1b10' }))), index.h("div", { key: 'b0696ddf7c218434fded2380f41bca17e407a797', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-text` }, this.afValidation != formRadiogroupValidation_enum.FormRadiogroupValidation.NEUTRAL && (index.h("digi-form-validation-message", { key: '63cde6f36e3064bd421c7d162e72ab414f5584cf', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))));
|
|
71
71
|
}
|
|
72
72
|
get hostElement() { return index.getElement(this); }
|
|
73
73
|
static get watchers() { return {
|
|
@@ -516,15 +516,15 @@ const FormSelectFilter = class {
|
|
|
516
516
|
} }, index.h("slot", { name: "empty-search-result" })))));
|
|
517
517
|
}
|
|
518
518
|
render() {
|
|
519
|
-
return (index.h(index.Host, { key: '
|
|
519
|
+
return (index.h(index.Host, { key: '232ad0fdb8164fb6ed04d1d2fdcdc778a197ae43', tabindex: -1 }, index.h("div", { key: 'bd384c56a99f54deef5cb2e325bae1e65c53696c', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, index.h("digi-form-label", { key: 'af3ad60e123ffe072af3590230975d6cb4b08db9', afLabel: this.afFilterButtonTextLabel, afFor: `${this.afId}`, afId: `${this.afId}-label`, class: "digi-form-select-filter__label", afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), index.h("digi-util-keydown-handler", { key: '06cb88227494648eb5e9861022830562b20fbbb2', onAfOnEsc: () => this.escHandler() }, index.h("button", { key: '8f829b158f487b9b671066f18b6948d24bd7724c', type: "button", id: `${this.afId}`, class: "digi-form-select-filter__toggle-button", onClick: () => this.toggleDropdown(), ref: (el) => (this._toggleButton = el), "aria-haspopup": "true", "aria-label": this.ariaLabel, "aria-describedby": `${this.afFilterButtonAriaDescribedby} ${this.afId}--validation-message`, "aria-controls": `${this.afId}-dropdown-menu`, "aria-expanded": this.isOpen }, index.h("div", { key: '6b28930875126efeea6e011d17567b2de4bf7635', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, index.h("digi-icon-check", { key: 'afde185a6027a96c0fd75a80bfbf9a462839cd32', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), index.h("span", { key: '8b846d513be35ffec07b6f1073b24c4fad8b09d0', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), index.h("digi-icon-chevron-down", { key: '795ac4c5d2cf7e7ddff801cc8224215b8c0f4492', class: "digi-form-select-filter__toggle-icon" })), index.h("div", { key: '1952bcb6c880cc79263c348067c8e76ee4b2c54d', id: `${this.afId}-dropdown-menu`, tabindex: this.isOpen ? '-1' : undefined, class: {
|
|
520
520
|
'digi-form-select-filter__dropdown': true,
|
|
521
521
|
'digi-form-select-filter__dropdown--right': this.afAlignRight,
|
|
522
522
|
'digi-form-select-filter__dropdown--hidden': !this.isOpen
|
|
523
|
-
} }, index.h("fieldset", { key: '
|
|
523
|
+
} }, index.h("fieldset", { key: '67c787d57885455dc6018b14ee77c5cf8f889269' }, index.h("div", { key: 'f04990f47e0c842447503c0c669fad9f075e1800', class: "digi-form-select-filter__header" }, index.h("legend", { key: 'a555f7e77fd3fc35badec8261676746ad0d07a96', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), index.h("digi-form-input", { key: 'dbbe1895e3f36e9103429510bdaa669839c1509b', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: formInputVariation_enum.FormInputVariation.MEDIUM, afType: formInputType_enum.FormInputType.SEARCH, afValidation: formInputVariation_enum.FormInputValidation.NEUTRAL, onAfOnFocus: () => {
|
|
524
524
|
this.focusListItemIndex = 0;
|
|
525
525
|
}, onAfOnKeyup: (e) => {
|
|
526
526
|
this.inputSearchKeyboardHandler(e.detail);
|
|
527
|
-
}, onAfOnInput: (e) => this.inputSearchInputHandler(e.detail), afValue: this._searchQuery, class: "digi-form-select-filter__search-input", afAriaControls: `${this.afId}-select-filter-list`, afAutocomplete: "off", afAriaAutocomplete: "none" }), this.renderEmptyStateBox()), index.h("div", { key: '
|
|
527
|
+
}, onAfOnInput: (e) => this.inputSearchInputHandler(e.detail), afValue: this._searchQuery, class: "digi-form-select-filter__search-input", afAriaControls: `${this.afId}-select-filter-list`, afAutocomplete: "off", afAriaAutocomplete: "none" }), this.renderEmptyStateBox()), index.h("div", { key: '7a1b963b624783f76d6b938aef4b54b5539a8b19', class: "digi-form-select-filter__scroll" }, index.h("digi-util-keydown-handler", { key: '210bdb0e2937132b68378a770edfb6c93e7b831e', onAfOnDown: (e) => this.downHandler(e), onAfOnRight: (e) => this.downHandler(e), onAfOnUp: (e) => this.upHandler(e), onAfOnLeft: (e) => this.upHandler(e), onAfOnHome: (e) => this.homeHandler(e), onAfOnEnd: (e) => this.endHandler(e), onAfOnEnter: (e) => this.enterHandler(e), onAfOnSpace: (e) => this.spaceHandler(e), onAfOnTab: () => this.tabHandler(), onAfOnShiftTab: () => this.shiftHandler() }, index.h("ul", { key: 'bdf8431ce2a39cdb9c23c8419eb12518ca20e3dd', class: "digi-form-select-filter__list", "aria-labelledby": `${this.afId}`, id: `${this.afId}-select-filter-list`, role: this.afMultipleItems ? '' : 'radiogroup', "aria-invalid": this.afMultipleItems
|
|
528
528
|
? 'false'
|
|
529
529
|
: this.afValidation ===
|
|
530
530
|
typographyVariation_enum.FormSelectFilterValidation.ERROR
|
|
@@ -533,11 +533,11 @@ const FormSelectFilter = class {
|
|
|
533
533
|
? false
|
|
534
534
|
: this.afRequired
|
|
535
535
|
? 'true'
|
|
536
|
-
: 'false' }, this.showNeutralValue && (index.h("li", { key: '
|
|
536
|
+
: 'false' }, this.showNeutralValue && (index.h("li", { key: '4d97c4be7a31dbe830181eefc37929b3bb2f9234', class: "digi-form-select-filter__item", role: "radio", "aria-required": this.afMultipleItems
|
|
537
537
|
? 'false'
|
|
538
538
|
: this.afRequired
|
|
539
539
|
? 'true'
|
|
540
|
-
: 'false', "aria-checked": this._selectedItems.length === 0 ? 'true' : 'false', onClick: () => this.resetSelectItems(true), tabIndex: 0, "aria-label": this.afFilterButtonText }, this._selectedItems.length === 0 && (index.h("digi-icon-check", { key: '
|
|
540
|
+
: 'false', "aria-checked": this._selectedItems.length === 0 ? 'true' : 'false', onClick: () => this.resetSelectItems(true), tabIndex: 0, "aria-label": this.afFilterButtonText }, this._selectedItems.length === 0 && (index.h("digi-icon-check", { key: 'c1af26327f9bab4456a3770698cb08e8f0b0be95', class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), this.afFilterButtonText)), this._filteredResult &&
|
|
541
541
|
this._filteredResult.map((item, index$1) => {
|
|
542
542
|
return (index.h("li", { class: "digi-form-select-filter__item", key: index$1, dir: item.dir, lang: item.lang, "aria-checked": this.isSelected(item.value) ? 'true' : 'false', role: this.afMultipleItems ? 'checkbox' : 'radio', "aria-required": this.afMultipleItems
|
|
543
543
|
? 'false'
|
|
@@ -553,9 +553,9 @@ const FormSelectFilter = class {
|
|
|
553
553
|
: index$1 === 0
|
|
554
554
|
? 0
|
|
555
555
|
: -1 }, this.isSelected(item.value) && (index.h("digi-icon-check", { class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), item.label));
|
|
556
|
-
}))))), this.afMultipleItems && (index.h("div", { key: '
|
|
556
|
+
}))))), this.afMultipleItems && (index.h("div", { key: 'e9617bc3097f670582c1ad9fe9dcc3cdd5a56f5b', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (index.h("digi-button", { key: 'b4899966b541b5d67a32f07a01631509075a7106', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.resetSelectItems(), class: "digi-form-select-filter__reset-button" }, this.afResetButtonText)), index.h("digi-util-keydown-handler", { key: '5662e817b03fb9d04b5a01d726863dca84e23f88', onAfOnUp: () => this.setFocusItem() }, index.h("digi-button", { key: 'bc7cb5ef64aa7a5f0e3ce29f416fa9995ef2f7c8', ref: (el) => (this._submitButton = el), "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => {
|
|
557
557
|
this.setClosed(true);
|
|
558
|
-
}, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), index.h("div", { key: '
|
|
558
|
+
}, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), index.h("div", { key: '724a4171df75af688ddc34312db71d8c0ddc882e', class: "digi-form-select__footer" }, index.h("div", { key: 'e6e83f72fa04ff87cc30868dc7b125ad1289e6f2', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (index.h("digi-form-validation-message", { key: 'ed8426f025854a09aa445734e239dae8574daec4', "af-variation": this.afValidation }, this.afValidationText)))))));
|
|
559
559
|
}
|
|
560
560
|
get hostElement() { return index.getElement(this); }
|
|
561
561
|
static get watchers() { return {
|
|
@@ -129,10 +129,10 @@ const FormTextarea = class {
|
|
|
129
129
|
this.afOnInput.emit(e);
|
|
130
130
|
}
|
|
131
131
|
render() {
|
|
132
|
-
return (index.h(index.Host, { key: '
|
|
132
|
+
return (index.h(index.Host, { key: '8fc80d345a10b05e22b3dcd5adb63449d50b07e1', tabindex: -1 }, index.h("div", { key: '049576151b60c94d55711e696af1262ac6701f34', class: Object.assign({ 'digi-form-textarea': true }, this.cssModifiers) }, index.h("div", { key: 'a18d782506a20eb687bd8792a3fb0da3db159d4f', class: "digi-form-textarea__label" }, index.h("digi-form-label", { key: '1574be92b63e16034a5690a9d217da8e63ca7470', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), index.h("div", { key: 'c3258fb29058a14abae464e8e7f22074675e0115', class: "digi-form-textarea__content" }, index.h("textarea", { key: '5273fb0ea8d7c1345bfc37df0214f1ceb497f2ae', class: "digi-form-textarea__textarea", ref: (el) => (this._textarea = el), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onKeyUp: (e) => this.keyupHandler(e), onInput: (e) => this.inputHandler(e), "aria-activedescendant": this.afAriaActivedescendant, "aria-describedby": `${this.afAriaDescribedby} ${this.afId}--validation-message`, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === formTextareaVariation_enum.FormTextareaValidation.ERROR
|
|
133
133
|
? 'true'
|
|
134
|
-
: 'false', maxLength: this.afMaxlength, minLength: this.afMinlength, role: this.afRole, required: this.afRequired, id: this.afId, name: this.afName, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null })), index.h("div", { key: '
|
|
135
|
-
this.afValidation != formTextareaVariation_enum.FormTextareaValidation.NEUTRAL && (index.h("digi-form-validation-message", { key: '
|
|
134
|
+
: 'false', maxLength: this.afMaxlength, minLength: this.afMinlength, role: this.afRole, required: this.afRequired, id: this.afId, name: this.afName, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null })), index.h("div", { key: '38ade9720142b05d65248291749635e061681bad', class: "digi-form-textarea__footer" }, index.h("div", { key: 'fbe8041652cc9c1bc72bffc98582c5312b9c020b', class: "digi-form-textarea__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
|
|
135
|
+
this.afValidation != formTextareaVariation_enum.FormTextareaValidation.NEUTRAL && (index.h("digi-form-validation-message", { key: 'baea13a3e9d6c7a762cce0f0296ee0dcb267ff9f', class: "digi-form-textarea__validation-message", "af-variation": this.afValidation }, this.afValidationText)))))));
|
|
136
136
|
}
|
|
137
137
|
get hostElement() { return index.getElement(this); }
|
|
138
138
|
static get watchers() { return {
|
|
@@ -126,7 +126,7 @@ const TitleLogo = class {
|
|
|
126
126
|
};
|
|
127
127
|
}
|
|
128
128
|
render() {
|
|
129
|
-
return (index.h("div", { key: 'f2d92667466100ff385d2918a8396c95d32cb22c', class: Object.assign({ 'digi-title-logo': true }, this.cssModifiers) }, index.h("digi-util-breakpoint-observer", { key: 'd0a0692c5386725c0ce2fca5c4a6913b8710fa1c', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), index.h("div", { key: 'a0a36fd875d4fc2d6874f53ae49ac2e9f17e273f', class: "digi-title-logo-symbol" }, index.h("svg", { key: '
|
|
129
|
+
return (index.h("div", { key: 'f2d92667466100ff385d2918a8396c95d32cb22c', class: Object.assign({ 'digi-title-logo': true }, this.cssModifiers) }, index.h("digi-util-breakpoint-observer", { key: 'd0a0692c5386725c0ce2fca5c4a6913b8710fa1c', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), index.h("div", { key: 'a0a36fd875d4fc2d6874f53ae49ac2e9f17e273f', class: "digi-title-logo-symbol" }, index.h("svg", { key: '489404f99e4b411bd66cc274b60a7fc83bffa126', height: "44px", width: "44px", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, index.h("path", { key: '78e7bcc761c014a83be23fa3845b1564e1f89bcc', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.0076 6.97426V0C31.0194 0 44 12.9056 44 28.8261C44 34.3951 42.4073 39.5923 39.6561 44L33.8019 40.1595C35.822 36.8551 36.9855 32.9758 36.9855 28.8261C36.9855 16.7575 27.1458 6.97426 15.0076 6.97426ZM6.99059 28.8257C6.99059 33.2284 10.5795 36.7972 15.0076 36.7972C19.4356 36.7972 23.0245 33.2284 23.0245 28.8257C23.0245 24.4235 19.4356 20.8548 15.0076 20.8548C10.5795 20.8548 6.99059 24.4235 6.99059 28.8257ZM0 28.8257C0 20.5853 6.71916 13.9047 15.0076 13.9047C23.296 13.9047 30.0151 20.5853 30.0151 28.8257C30.0151 37.0666 23.296 43.7472 15.0076 43.7472C6.71916 43.7472 0 37.0666 0 28.8257Z", class: "main-symbol" }))), index.h("div", { key: '46a1b7b8fd35718591d29093da200d1f79fab483', class: "digi-title-logo-name-wrapper" }, index.h("slot", { key: 'ec09ce755fcb0bf00045c947199c7c9cda9de689', name: "logo-one-row" }), index.h("slot", { key: '27eca2b9520cee673f0042d729c4d20a31406a72', name: "logo-two-rows" }))));
|
|
130
130
|
}
|
|
131
131
|
get hostElement() { return index.getElement(this); }
|
|
132
132
|
};
|
|
@@ -388,18 +388,18 @@ export class Calendar {
|
|
|
388
388
|
};
|
|
389
389
|
}
|
|
390
390
|
render() {
|
|
391
|
-
return (h("div", { key: '
|
|
391
|
+
return (h("div", { key: '1077a770af823d9e0c0f59cdc6f1fef2a49d761a', class: {
|
|
392
392
|
'digi-calendar': true,
|
|
393
393
|
'digi-calendar--hide': !this.afActive
|
|
394
|
-
}, id: `${this.afId}-calendar` }, this.afYearSelect && (h("div", { key: '
|
|
394
|
+
}, id: `${this.afId}-calendar` }, this.afYearSelect && (h("div", { key: 'cd7dfa8e20efd08afa590cd4e177ddb4c41455d8', class: "digi-calendar__header" }, h("div", { key: 'd1e6e956713de7fe417253be0fc1ec3aea9748b0', class: "digi-calendar__header--year-select" }, h("digi-form-select", { key: 'cf34feec9ed25e0251effe86b3ce393918a32eda', afLabel: _t.calendar.month, "af-variation": "small", afValue: this.focusedDate.getMonth().toString(), onAfOnSelect: (evt) => {
|
|
395
395
|
this.selectMonth(evt);
|
|
396
396
|
} }, _t.calendar.months.map((month, index) => {
|
|
397
397
|
return h("option", { value: index }, month);
|
|
398
|
-
})), h("digi-form-select", { key: '
|
|
398
|
+
})), h("digi-form-select", { key: 'ddcd90917d6dba315f8018c4311c852f3471d3c0', afLabel: _t.calendar.year, "af-variation": "small", afValue: this.focusedDate.getFullYear().toString(), onAfOnSelect: (evt) => {
|
|
399
399
|
this.selectYear(evt);
|
|
400
|
-
} }, this.allSelectableYears().map((year) => (h("option", { value: year.toString() }, year))))))), !this.afYearSelect && (h("div", { key: '
|
|
401
|
-
', ' + _t.calendar.previousMonth, onClick: () => this.subtractMonth() }, h("digi-icon-chevron-left", { key: '
|
|
402
|
-
', ' + _t.calendar.nextMonth, onClick: () => this.addMonth() }, h("span", { key: '
|
|
400
|
+
} }, this.allSelectableYears().map((year) => (h("option", { value: year.toString() }, year))))))), !this.afYearSelect && (h("div", { key: '814648caa21619240a5904a809c95024398e9741', class: "digi-calendar__header" }, h("div", { key: 'd3dc54a4d0172d503bff66e5171846f433755c4b', class: "digi-calendar__header--month-step" }, h("button", { key: '7725160aab267e5cdd70618613b2f485d5b7dd7f', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() - 1) +
|
|
401
|
+
', ' + _t.calendar.previousMonth, onClick: () => this.subtractMonth() }, h("digi-icon-chevron-left", { key: 'e8d1dc80011cb7e79ce6af893df2fd4601d92c74', slot: "icon", "aria-hidden": "true" }), h("span", { key: 'ae56dadf565d819f8e89804596dbe38119fb592e', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() - 1))), h("div", { key: '257ac7d346e084390aba658eb7329cab913e3463', class: "digi-calendar__month" }, this.getFullMonthName(this.focusedDate.getMonth())), h("button", { key: '0c483763c0420f1c172c78364d2ce931ffcd116d', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() + 1) +
|
|
402
|
+
', ' + _t.calendar.nextMonth, onClick: () => this.addMonth() }, h("span", { key: 'de4617285a713bd9baa375a99f81bb027768c947', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() + 1)), h("digi-icon-chevron-right", { key: '8d6252fcdd7a035ce8fe4e6f4cb468ce7935aeba', slot: "icon", "aria-hidden": "true" }))))), h("digi-util-keydown-handler", { key: '5080246278db71745444dcd40d0722a64e8c80b5', onAfOnDown: (e) => this.navigateHandler(e, 7), onAfOnUp: (e) => this.navigateHandler(e, -7), onAfOnLeft: (e) => this.navigateHandler(e, -1), onAfOnRight: (e) => this.navigateHandler(e, 1) }, h("table", { key: '9052f9c8135d95110f927c6a5a949fbd63daec7a', role: "grid", class: "digi-calendar__table" }, h("thead", { key: '428467866c49e65d348db796a006611542aabc02' }, h("tr", { key: '260024069438dadff553bc3391a37bbb533b5d11', role: "row" }, this.afShowWeekNumber && (h("th", { key: '2c22102011ade9125e61416ac78eaed16dec2e26', role: "columnheader", abbr: _t.calendar.week, class: "digi-calendar__table-header-week" }, _t.calendar.week.toLowerCase())), Object.keys(_t.calendar.weekdays).map((day) => (h("th", { role: "columnheader", "aria-label": _t.calendar.weekdays[day], abbr: _t.calendar.weekdays[day], class: "digi-calendar__table-header" }, _t.calendar.weekdays_short[day].toLowerCase()))))), h("tbody", { key: 'cbe3d290919c35ad27799c17e6b6236557dbe126', ref: (el) => (this._tbody = el) }, this.activeCalendar.map((week) => {
|
|
403
403
|
return (h("tr", null, week.map((day, i) => {
|
|
404
404
|
if (this.afShowWeekNumber && i === 0) {
|
|
405
405
|
return (h("th", { role: "rowheader", "aria-label": _t.calendar.week + ' ' + day, class: "digi-calendar__td-week digi-calendar__date--week-number", id: 'digi-calendar__week-' + day }, day));
|
|
@@ -414,7 +414,7 @@ export class Calendar {
|
|
|
414
414
|
: null }, h("span", { "aria-hidden": "true" }, day.getDate()))));
|
|
415
415
|
}
|
|
416
416
|
})));
|
|
417
|
-
})))), h("slot", { key: '
|
|
417
|
+
})))), h("slot", { key: 'e97e8147fc91a3b401665eeeb8db6be7036f678b', name: "calendar-footer" })));
|
|
418
418
|
}
|
|
419
419
|
static get is() { return "digi-calendar"; }
|
|
420
420
|
static get encapsulation() { return "scoped"; }
|
|
@@ -8,6 +8,7 @@ import { detectClickOutside } from "../../../global/utils/detectClickOutside";
|
|
|
8
8
|
/**
|
|
9
9
|
* @swedishName Datumväljare
|
|
10
10
|
* @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet
|
|
11
|
+
* @valueAccessor TextValueAccessor
|
|
11
12
|
*/
|
|
12
13
|
export class CalendarDatepicker {
|
|
13
14
|
constructor() {
|
|
@@ -371,7 +372,7 @@ export class CalendarDatepicker {
|
|
|
371
372
|
return this.afSelectedDates;
|
|
372
373
|
}
|
|
373
374
|
render() {
|
|
374
|
-
return (h(Host, { key: '
|
|
375
|
+
return (h(Host, { key: 'e6dcf21e94a0cf58081b2cc351291a9489eadcb6', tabindex: -1 }, h("div", { key: '4040e430dd3c55e9ed0a0e6ed5aa69dea906e7c3', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, h("div", { key: '823f9480cb8a77c1e3cecdc1f3982e426ab2e658', class: "digi-calendar-datepicker__input-field" }, h("digi-form-input", { key: '454ca3d0a8d489826891da25bba8d9e0359c1df0', 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()
|
|
375
376
|
? FormInputValidation.ERROR
|
|
376
377
|
: this.afValidation, afValidationText: this.getErrorText(), afId: this.afId, afAriaDescribedby: `${this.afId}--validation-message`, afRequired: this.afRequired, afRequiredText: this.afRequiredText, onAfOnChange: (evt) => {
|
|
377
378
|
evt.stopImmediatePropagation();
|
|
@@ -388,11 +389,11 @@ export class CalendarDatepicker {
|
|
|
388
389
|
e.preventDefault();
|
|
389
390
|
const focusableDateButton = this.hostElement.querySelector('.digi-calendar__date[tabindex="0"]');
|
|
390
391
|
focusableDateButton === null || focusableDateButton === void 0 ? void 0 : focusableDateButton.focus();
|
|
391
|
-
} }, h("button", { key: '
|
|
392
|
+
} }, h("button", { key: '0ea8d3a9092c41f96a0cf24a2cdc4aa764e40bce', id: this.afId + '-button', class: "digi-calendar-datepicker__input-button", slot: "button", "aria-label": this.showCalendar
|
|
392
393
|
? this.afCloseCalendarAriaLabel
|
|
393
|
-
: this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, h("digi-icon-calendar-alt", { key: '
|
|
394
|
+
: this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, h("digi-icon-calendar-alt", { key: '31ceefc7f2be65159840b1ba6d998a71ba0c5543', class: "digi-calendar-datepicker__button-icon", slot: "icon" })))), h("div", { key: 'f8105569c6065a353300f87d1eabd88a10227081', class: "digi-calendar-datepicker__calendar", id: "calendar-popup" }, h("p", { key: 'b7e3556711de8ddb43a17874dada58193341ffcc', role: "alert", class: "digi-calendar-datepicker__sr-instructions" }, this.showCalendar
|
|
394
395
|
? `${_t.calendar.screenReaderInstructions}${this.screenReaderUpdateTrigger ? '\u200B' : ''}`
|
|
395
|
-
: ''), h("digi-calendar", { key: '
|
|
396
|
+
: ''), h("digi-calendar", { key: '55286f75c9ff74bb5f11a5098d06aac6f5120017', 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) => {
|
|
396
397
|
evt.stopImmediatePropagation();
|
|
397
398
|
this.parseCalendar(evt);
|
|
398
399
|
}, onKeyDown: (e) => {
|
|
@@ -403,7 +404,7 @@ export class CalendarDatepicker {
|
|
|
403
404
|
return;
|
|
404
405
|
e.preventDefault();
|
|
405
406
|
this.focusOnCalendarInput();
|
|
406
|
-
} })), this.afCloseOnSelect && !this.afMultipleDates && (h("div", { key: '
|
|
407
|
+
} })), this.afCloseOnSelect && !this.afMultipleDates && (h("div", { key: 'f3d56c38d789cb0874ef1510e9ddd3e618255a76', class: "digi-calendar-datepicker__selected-date-alert", role: this.errorMessageIsAlert ? 'alert' : null }, this.afSelectedDates.length > 0
|
|
407
408
|
? `${_t.calendar.datepicker.selectedDate}: ${this.datesToInputString(this.afSelectedDates)}`
|
|
408
409
|
: '')))));
|
|
409
410
|
}
|
|
@@ -8,6 +8,7 @@ import { FormCheckboxLayout } from "./form-checkbox-layout.enum";
|
|
|
8
8
|
* @enums FormCheckboxVariation - form-checkbox-variation.enum.ts
|
|
9
9
|
* @swedishName Kryssruta
|
|
10
10
|
* @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet
|
|
11
|
+
* @valueAccessor BooleanValueAccessor
|
|
11
12
|
*/
|
|
12
13
|
export class FormCheckbox {
|
|
13
14
|
constructor() {
|
|
@@ -97,7 +98,7 @@ export class FormCheckbox {
|
|
|
97
98
|
this.afOnInput.emit(e);
|
|
98
99
|
}
|
|
99
100
|
render() {
|
|
100
|
-
return (h(Host, { key: '
|
|
101
|
+
return (h(Host, { key: '119dd4d2bd465e027f4d5c79f8334b0bb9491048', tabindex: -1 }, h("div", { key: '4bb8e86d4323bfe5f079f3c082bf64b6f7eec750', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: '5c780e58b7df31cd9c13563b920b5e06ea74022c', class: "digi-form-checkbox__input", ref: (el) => {
|
|
101
102
|
var _a;
|
|
102
103
|
this._input = el;
|
|
103
104
|
(_a = this === null || this === void 0 ? void 0 : this.afInputRef) === null || _a === void 0 ? void 0 : _a.call(this, el);
|
|
@@ -105,7 +106,7 @@ export class FormCheckbox {
|
|
|
105
106
|
? null
|
|
106
107
|
: `${this.afAriaDescribedby ? `${this.afAriaDescribedby} ` : ''}${this.afDescription ? `${this.afId}-description` : ''}`, "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormCheckboxValidation.ERROR
|
|
107
108
|
? 'true'
|
|
108
|
-
: '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: '
|
|
109
|
+
: '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: '71599f05c3436521e96f2210606ad3c71f6d341e', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: '6f2ecde62ef62aa8a286aa2e64b1932d1d605e0a', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: '2ca8d8ddfb9578b236712cbb761348fb1c456f18', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription)))));
|
|
109
110
|
}
|
|
110
111
|
static get is() { return "digi-form-checkbox"; }
|
|
111
112
|
static get encapsulation() { return "scoped"; }
|
|
@@ -12,6 +12,7 @@ import { FormInputVariation } from "./form-input-variation.enum";
|
|
|
12
12
|
* @enums FormInputVariation - form-input-variation.enum.ts
|
|
13
13
|
* @swedishName Inmatningsfält
|
|
14
14
|
* @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet
|
|
15
|
+
* @valueAccessor NumericValueAccessor TextValueAccessor
|
|
15
16
|
*/
|
|
16
17
|
export class FormInput {
|
|
17
18
|
constructor() {
|
|
@@ -168,12 +169,12 @@ export class FormInput {
|
|
|
168
169
|
this.hasButton = !!this.hostElement.querySelector('[slot="button"]');
|
|
169
170
|
}
|
|
170
171
|
render() {
|
|
171
|
-
return (h(Host, { key: '
|
|
172
|
+
return (h(Host, { key: 'bd32d602a4fa625394c8bcf3b7a8916092c91aae', tabindex: -1 }, h("div", { key: '25ded0f93bd3078bec0aab16242c960487fd657f', class: Object.assign({ 'digi-form-input': true }, this.cssModifiers) }, h("digi-form-label", { key: '0fa8b13f155a3acd0bf23691c156f34e8a0aa214', class: "digi-form-input__label", afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: '4b001af998878a6dadbaada1e56d4ef64f71da9a', class: "digi-form-input__input-wrapper" }, h("input", Object.assign({ key: 'b0082240f8d3b59ed36ad1d9ed8bec6aab536b54', class: "digi-form-input__input", ref: (el) => (this._input = el), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onKeyUp: (e) => this.keyupHandler(e), onInput: (e) => this.inputHandler(e), "aria-activedescendant": this.afAriaActivedescendant, "aria-describedby": `${this.afAriaDescribedby} ${this.afId}--validation-message`, "aria-labelledby": this.afAriaLabelledby, "aria-autocomplete": this.afAriaAutocomplete, "aria-invalid": this.afValidation === FormInputValidation.ERROR
|
|
172
173
|
? 'true'
|
|
173
174
|
: 'false', "aria-controls": this.afAriaControls, autocomplete: this.afAutocomplete, autofocus: this.afAutofocus ? this.afAutofocus : null, maxLength: this.afMaxlength, minLength: this.afMinlength, max: this.afMax, min: this.afMin, step: this.afStep, list: this.afList, role: this.afRole, dirName: this.afDirname, required: this.afRequired, id: this.afId, name: this.afName, type: this.afType, value: this.afValue }, (this.afInputmode == FormInputMode.DEFAULT
|
|
174
175
|
? {}
|
|
175
|
-
: { inputmode: this.afInputmode }))), h("slot", { key: '
|
|
176
|
-
this.afValidation != FormInputValidation.NEUTRAL && (h("digi-form-validation-message", { key: '
|
|
176
|
+
: { inputmode: this.afInputmode }))), h("slot", { key: '46eef3d0ba7c02517ef3824410a1c0cfc74baaa7', name: "button" })), h("div", { key: '4024a3bcab31173d947bfe70e9064e31b2a23a8f', class: "digi-form-input__footer" }, h("div", { key: '55455e4bd8de053c35f1ca727b5e41f71f47a295', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
|
|
177
|
+
this.afValidation != FormInputValidation.NEUTRAL && (h("digi-form-validation-message", { key: 'c8c0c2d8468b09076a513c70e068c956386c64a5', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))))));
|
|
177
178
|
}
|
|
178
179
|
static get is() { return "digi-form-input"; }
|
|
179
180
|
static get encapsulation() { return "scoped"; }
|
|
@@ -10,6 +10,7 @@ import { FormInputButtonVariation } from "../form-input/form-input-button-variat
|
|
|
10
10
|
* @enums FormInputSearchVariation - form-input-search-variation.enum.ts
|
|
11
11
|
* @swedishName Sökfält
|
|
12
12
|
* @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet
|
|
13
|
+
* @valueAccessor TextValueAccessor
|
|
13
14
|
*/
|
|
14
15
|
export class FormInputSearch {
|
|
15
16
|
constructor() {
|
|
@@ -118,10 +119,10 @@ export class FormInputSearch {
|
|
|
118
119
|
};
|
|
119
120
|
}
|
|
120
121
|
render() {
|
|
121
|
-
return (h(Host, { key: '
|
|
122
|
+
return (h(Host, { key: '5502afd53a378b67ffaed787a84ffd0e154c6a75', tabindex: -1 }, h("div", { key: '9d76ceba2e057efe2029cb600ce43e3e2d39ebfb', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, h("digi-form-input", { key: 'fbee883f2df35b697093aa7fcdd134704583b350', class: {
|
|
122
123
|
'digi-form-input-search__input': true,
|
|
123
124
|
'digi-form-input-search__input--no-button': this.afHideButton
|
|
124
|
-
}, ref: (el) => (this._input = el), onAfOnBlur: (e) => this.blurHandler(e), onAfOnChange: (e) => this.changeHandler(e), onAfOnFocus: (e) => this.focusHandler(e), onAfOnFocusout: (e) => this.focusoutHandler(e), onAfOnKeyup: (e) => this.keyupHandler(e), onAfOnInput: (e) => this.inputHandler(e), afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afAriaActivedescendant: this.afAriaActivedescendant, afAriaDescribedby: this.afAriaDescribedby, afAriaLabelledby: this.afAriaLabelledby, afAriaAutocomplete: this.afAriaAutocomplete, afAutocomplete: this.afAutocomplete, afName: this.afName, afType: this.afType, afValue: this.afValue, afVariation: this.afVariation, afAutofocus: this.afAutofocus ? this.afAutofocus : null, afButtonVariation: this.afButtonVariation, afId: this.afId }, !this.afHideButton && (h("digi-button", { key: '
|
|
125
|
+
}, ref: (el) => (this._input = el), onAfOnBlur: (e) => this.blurHandler(e), onAfOnChange: (e) => this.changeHandler(e), onAfOnFocus: (e) => this.focusHandler(e), onAfOnFocusout: (e) => this.focusoutHandler(e), onAfOnKeyup: (e) => this.keyupHandler(e), onAfOnInput: (e) => this.inputHandler(e), afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afAriaActivedescendant: this.afAriaActivedescendant, afAriaDescribedby: this.afAriaDescribedby, afAriaLabelledby: this.afAriaLabelledby, afAriaAutocomplete: this.afAriaAutocomplete, afAutocomplete: this.afAutocomplete, afName: this.afName, afType: this.afType, afValue: this.afValue, afVariation: this.afVariation, afAutofocus: this.afAutofocus ? this.afAutofocus : null, afButtonVariation: this.afButtonVariation, afId: this.afId }, !this.afHideButton && (h("digi-button", { key: '45ca4cd2086bf49f53781bd11919ea8cbee9d9fa', class: "digi-form-input-search__button", onAfOnClick: (e) => this.clickHandler(e), onAfOnFocus: (e) => e.stopPropagation(), afType: this.afButtonType, afAriaLabel: this.afButtonAriaLabel, afAriaLabelledby: this.afButtonAriaLabelledby, afSize: this.afVariation, slot: "button" }, h("digi-icon-search", { key: '1860c4ec6f386c16552d959c0b8091e4e88060cb', slot: "icon" }), this.afButtonText))))));
|
|
125
126
|
}
|
|
126
127
|
static get is() { return "digi-form-input-search"; }
|
|
127
128
|
static get encapsulation() { return "scoped"; }
|
|
@@ -6,6 +6,7 @@ import { FormRadiobuttonLayout } from "./form-radiobutton-layout.enum";
|
|
|
6
6
|
/**
|
|
7
7
|
* @enums FormRadiobuttonValidation - form-radiobutton-validation.enum.ts
|
|
8
8
|
* @enums FormRadiobuttonVariation - form-radiobutton-variation.enum.ts
|
|
9
|
+
* @valueAccessor RadioValueAccessor
|
|
9
10
|
* @swedishName Radioknapp
|
|
10
11
|
* @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
|
|
11
12
|
*/
|
|
@@ -86,9 +87,9 @@ export class FormRadiobutton {
|
|
|
86
87
|
this.afOnInput.emit(e);
|
|
87
88
|
}
|
|
88
89
|
render() {
|
|
89
|
-
return (h(Host, { key: '
|
|
90
|
+
return (h(Host, { key: 'c219f20c710f23829a44887396b31f03860b5071', tabindex: -1 }, h("div", { key: '8a79373d73a6a2285694738d15e735dffa06f058', class: Object.assign({ 'digi-form-radiobutton': true }, this.cssModifiers) }, h("input", { key: 'eaf8472603390c55b3857f1918094494b0ff38f9', class: "digi-form-radiobutton__input", ref: (el) => (this._input = el), onInput: (e) => this.inputHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), "aria-describedby": this.afAriaDescribedby, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === FormRadiobuttonValidation.ERROR
|
|
90
91
|
? 'true'
|
|
91
|
-
: 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "radio", checked: this.afChecked, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null }), h("label", { key: '
|
|
92
|
+
: 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "radio", checked: this.afChecked, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null }), h("label", { key: 'f3049d0f425c3f756f6e157a0a9f243541dbd468', htmlFor: this.afId, class: "digi-form-radiobutton__label" }, h("span", { key: '3114e3bc85e870e916dd642a448bd4016e7b648e', class: "digi-form-radiobutton__circle" }), this.afLabel))));
|
|
92
93
|
}
|
|
93
94
|
static get is() { return "digi-form-radiobutton"; }
|
|
94
95
|
static get encapsulation() { return "scoped"; }
|
|
@@ -5,6 +5,7 @@ import { FormRadiogroupValidation } from "./form-radiogroup-validation.enum";
|
|
|
5
5
|
* @slot radiobuttons
|
|
6
6
|
*
|
|
7
7
|
* @swedishName Radiogrupp
|
|
8
|
+
* @valueAccessor TextValueAccessor
|
|
8
9
|
*
|
|
9
10
|
* @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till den första radioknappen i gruppen
|
|
10
11
|
*/
|
|
@@ -62,9 +63,9 @@ export class FormRadiogroup {
|
|
|
62
63
|
});
|
|
63
64
|
}
|
|
64
65
|
render() {
|
|
65
|
-
return (h(Host, { key: '
|
|
66
|
+
return (h(Host, { key: '0b03e0ccdc03d2f06466f9a2527f68b937637e6f', tabindex: -1 }, h("div", { key: '02b0862fc0645ba6c5b12480279078d0b796f5ef', id: this.afId, class: {
|
|
66
67
|
'digi-form-radiogroup': true
|
|
67
|
-
} }, h("digi-util-mutation-observer", { key: '
|
|
68
|
+
} }, h("digi-util-mutation-observer", { key: 'ed9e1a034e5d5221c4c004e12db780077277876e', onAfOnChange: (e) => this.radiobuttonChangeListener(e) }, h("slot", { key: '5572449dc6ad235472c92e8524d26688d56e1b10' }))), h("div", { key: 'b0696ddf7c218434fded2380f41bca17e407a797', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-text` }, this.afValidation != FormRadiogroupValidation.NEUTRAL && (h("digi-form-validation-message", { key: '63cde6f36e3064bd421c7d162e72ab414f5584cf', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))));
|
|
68
69
|
}
|
|
69
70
|
static get is() { return "digi-form-radiogroup"; }
|
|
70
71
|
static get encapsulation() { return "scoped"; }
|
|
@@ -10,6 +10,7 @@ import { FormSelectVariation } from "./form-select-variation.enum";
|
|
|
10
10
|
* @enums FormSelectVariation - form-select-variation.enum
|
|
11
11
|
* @swedishName Väljare
|
|
12
12
|
* @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva select-elementet
|
|
13
|
+
* @valueAccessor SelectValueAccessor
|
|
13
14
|
*/
|
|
14
15
|
export class FormSelect {
|
|
15
16
|
constructor() {
|
|
@@ -133,17 +134,17 @@ export class FormSelect {
|
|
|
133
134
|
: false;
|
|
134
135
|
}
|
|
135
136
|
render() {
|
|
136
|
-
return (h(Host, { key: '
|
|
137
|
+
return (h(Host, { key: 'd0422f1a779704cd2e9192f81199c58738c6f4db', tabindex: -1 }, h("div", { key: 'f6a49628a7d5d3d2d633e816aaf260242478fc4c', class: Object.assign({ 'digi-form-select': true }, this.cssModifiers) }, h("div", { key: '755b1b576bb8847570426d982d1a3445fb44edff', class: "digi-form-select__label-group" }, h("digi-form-label", { key: 'eda13cccb65792193b318bf9c21bd0b52384dbc5', afFor: this.afId, afLabel: this.afLabel, afId: `${this.afId}-label`, afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: '0ae5338fd5aa2b7fffe60935ddae9fec0cbaf379', class: "digi-form-select__select-wrapper" }, h("select", { key: 'bd758e92e3fb977be5bad8530062d9b5c71f7e11', class: "digi-form-select__select", name: this.afName, id: this.afId, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormSelectValidation.ERROR
|
|
137
138
|
? 'true'
|
|
138
|
-
: 'false', "aria-describedby": `${this.afId}--validation-message`, ref: (el) => (this._select = el), required: this.afRequired ? this.afRequired : null, onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onInput: (e) => this.selectHandler(e), autoFocus: this.afAutofocus ? this.afAutofocus : null }, this.hasPlaceholder && (h("option", { key: '
|
|
139
|
+
: 'false', "aria-describedby": `${this.afId}--validation-message`, ref: (el) => (this._select = el), required: this.afRequired ? this.afRequired : null, onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onInput: (e) => this.selectHandler(e), autoFocus: this.afAutofocus ? this.afAutofocus : null }, this.hasPlaceholder && (h("option", { key: '85d60c1b04d3a48773d7a25e79d6e6896abc4334', class: {
|
|
139
140
|
'digi-form-select__select-option': true,
|
|
140
141
|
'digi-form-select__select-option--initial-value': true
|
|
141
142
|
}, disabled: true, selected: !this.afValue, value: "" }, this.afPlaceholder)), this.optionItems.map((option, index) => {
|
|
142
143
|
return (h("option", { key: index, class: "digi-form-select__select-option", value: option.value, selected: this.getSelectedItem(option) }, option.text));
|
|
143
|
-
})), h("digi-icon-input-select-marker", { key: '
|
|
144
|
+
})), h("digi-icon-input-select-marker", { key: 'e9ab4ef12562679223aaa7f60e20936d2a1e078e', class: "digi-form-select__icon", slot: "icon" })), h("digi-util-mutation-observer", { key: '188b27eb0a27f9bb81eb8211e67df8d8c54b7485', hidden: true, ref: (el) => (this._observer = el), onAfOnChange: (e) => {
|
|
144
145
|
e.stopImmediatePropagation();
|
|
145
146
|
this.getOptions();
|
|
146
|
-
} }, h("slot", { key: '
|
|
147
|
+
} }, h("slot", { key: '70b2eeb015a08bfc2379f30eb4cf7e6281066d56' })), h("div", { key: 'd8aa1c5d5de3e847136d29b14a236d6cf73ecad4', class: "digi-form-select__footer" }, h("div", { key: '27f8450662d599b55aa22a3a82f268de8ecd7cbc', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: 'e7f512be5ea01c8bb2c6a1e20bacafd43acf2770', "af-variation": this.afValidation }, this.afValidationText)))))));
|
|
147
148
|
}
|
|
148
149
|
static get is() { return "digi-form-select"; }
|
|
149
150
|
static get encapsulation() { return "scoped"; }
|