@db-ux/wc-core-components 4.3.0 → 4.3.2-consolidation-7549d9f
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/CHANGELOG.md +6 -0
- package/dist/cjs/db-custom-select-dropdown_5.cjs.entry.js +10 -5
- package/dist/cjs/db-custom-select.cjs.entry.js +14 -6
- package/dist/cjs/db-drawer.cjs.entry.js +13 -9
- package/dist/cjs/db-select.cjs.entry.js +6 -3
- package/dist/cjs/db-textarea.cjs.entry.js +9 -4
- package/dist/collection/components/brand/brand.js +1 -1
- package/dist/collection/components/button/button.js +3 -3
- package/dist/collection/components/checkbox/checkbox.js +1 -1
- package/dist/collection/components/custom-select/custom-select.js +16 -8
- package/dist/collection/components/custom-select-list-item/custom-select-list-item.js +1 -1
- package/dist/collection/components/drawer/drawer.js +13 -9
- package/dist/collection/components/icon/icon.js +1 -1
- package/dist/collection/components/infotext/infotext.js +1 -1
- package/dist/collection/components/input/input.js +14 -9
- package/dist/collection/components/navigation-item/navigation-item.js +1 -1
- package/dist/collection/components/notification/notification.js +1 -1
- package/dist/collection/components/select/select.js +8 -5
- package/dist/collection/components/switch/switch.js +4 -4
- package/dist/collection/components/tab-item/tab-item.js +3 -3
- package/dist/collection/components/tag/tag.js +1 -1
- package/dist/collection/components/textarea/textarea.js +10 -5
- package/dist/custom-elements.json +4 -1
- package/dist/db-ux/db-ux.esm.js +1 -1
- package/dist/db-ux/p-39d22a0f.entry.js +1 -0
- package/dist/db-ux/p-44f2f09d.entry.js +1 -0
- package/dist/db-ux/p-75ae0fd9.entry.js +1 -0
- package/dist/db-ux/{p-40ce182c.entry.js → p-b729b29f.entry.js} +1 -1
- package/dist/db-ux/p-e7e35164.entry.js +1 -0
- package/dist/esm/db-custom-select-dropdown_5.entry.js +10 -5
- package/dist/esm/db-custom-select.entry.js +14 -6
- package/dist/esm/db-drawer.entry.js +13 -9
- package/dist/esm/db-select.entry.js +6 -3
- package/dist/esm/db-textarea.entry.js +9 -4
- package/dist/types/components/input/input.d.ts +1 -1
- package/dist/web-types.json +2 -2
- package/package.json +3 -3
- package/dist/db-ux/p-23834011.entry.js +0 -1
- package/dist/db-ux/p-3622f7e7.entry.js +0 -1
- package/dist/db-ux/p-5426dbd3.entry.js +0 -1
- package/dist/db-ux/p-86414acd.entry.js +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @db-ux/wc-core-components
|
|
2
2
|
|
|
3
|
+
## 4.3.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- fix(angular): issue with form-components not applying value changes because of [attr.value] instead of native [value] binding - [see commit 61ab4a3](https://github.com/db-ux-design-system/core-web/commit/61ab4a3e9a781459b829c74cf23624a23edd9e3f)
|
|
8
|
+
|
|
3
9
|
## 4.3.0
|
|
4
10
|
|
|
5
11
|
### Minor Changes
|
|
@@ -193,7 +193,7 @@ const DBInput = class {
|
|
|
193
193
|
this._invalidMessage = undefined;
|
|
194
194
|
this._dataListId = undefined;
|
|
195
195
|
this._descByIds = undefined;
|
|
196
|
-
this._value =
|
|
196
|
+
this._value = "";
|
|
197
197
|
this._voiceOverFallback = "";
|
|
198
198
|
this.abortController = undefined;
|
|
199
199
|
}
|
|
@@ -323,13 +323,18 @@ const DBInput = class {
|
|
|
323
323
|
this.watch1Fn();
|
|
324
324
|
}
|
|
325
325
|
watch2Fn() {
|
|
326
|
-
this.
|
|
326
|
+
if (this.value !== undefined) {
|
|
327
|
+
this._value = this.value;
|
|
328
|
+
}
|
|
327
329
|
}
|
|
328
330
|
watch2() {
|
|
329
331
|
this.watch2Fn();
|
|
330
332
|
}
|
|
331
333
|
watch3Fn() {
|
|
332
|
-
|
|
334
|
+
// If angular uses ngModel value and _value are null
|
|
335
|
+
// then the value will be set afterward and the _ref will be refreshed
|
|
336
|
+
const addResetListener = true;
|
|
337
|
+
if (this._ref && addResetListener) {
|
|
333
338
|
const defaultValue = undefined;
|
|
334
339
|
let controller = this.abortController;
|
|
335
340
|
if (!controller) {
|
|
@@ -369,7 +374,7 @@ const DBInput = class {
|
|
|
369
374
|
}
|
|
370
375
|
render() {
|
|
371
376
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
372
|
-
return (index.h("div", { key: '
|
|
377
|
+
return (index.h("div", { key: '2783a6e0005baac376a9cd75d0f468c3f55c5f0c', class: index$1.cls("db-input", this.className), "data-variant": this.variant, "data-hide-label": index$1.getHideProp(this.showLabel), "data-show-icon": index$1.getBooleanAsString((_a = this.showIconLeading) !== null && _a !== void 0 ? _a : this.showIcon), "data-icon": (_b = this.iconLeading) !== null && _b !== void 0 ? _b : this.icon, "data-icon-trailing": this.iconTrailing, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing) }, index.h("label", { key: '0a1b84ca8f479e931f7f2a3506fd158dfaeb5396', htmlFor: this._id }, (_c = this.label) !== null && _c !== void 0 ? _c : constants.DEFAULT_LABEL), index.h("input", { key: 'a30aadb4b840d8b31b9484a2401160469301b6cf', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
|
|
373
378
|
this._ref = el;
|
|
374
379
|
}, id: this._id, name: this.name, type: this.type || "text", multiple: index$1.getBoolean(this.multiple, "multiple"), placeholder: (_d = this.placeholder) !== null && _d !== void 0 ? _d : constants.DEFAULT_PLACEHOLDER, disabled: index$1.getBoolean(this.disabled, "disabled"), required: index$1.getBoolean(this.required, "required"), step: index$1.getStep(this.step), value: (_e = this.value) !== null && _e !== void 0 ? _e : this._value, maxLength: index$1.getNumber(this.maxLength, this.maxlength), minLength: index$1.getNumber(this.minLength, this.minlength), max: index$1.getInputValue(this.max, this.type), min: index$1.getInputValue(this.min, this.type), readOnly: index$1.getBoolean(this.readOnly, "readOnly") ||
|
|
375
380
|
index$1.getBoolean(this.readonly, "readonly"), form: this.form, pattern: this.pattern, size: this.size, autoComplete: this.autocomplete, autoFocus: index$1.getBoolean(this.autofocus, "autofocus"), enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), list: this.dataList && this._dataListId, "aria-describedby": (_f = this.ariaDescribedBy) !== null && _f !== void 0 ? _f : this._descByIds, role: [
|
|
@@ -381,7 +386,7 @@ const DBInput = class {
|
|
|
381
386
|
"color",
|
|
382
387
|
].includes((_g = this.type) !== null && _g !== void 0 ? _g : "") && index$1.isIOSSafari()
|
|
383
388
|
? "textbox"
|
|
384
|
-
: undefined }), this.dataList ? (index.h("datalist", { id: this._dataListId }, (_h = this.getDataList()) === null || _h === void 0 ? void 0 : _h.map((option) => (index.h("option", { key: this._dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null, index.h("slot", { key: '
|
|
389
|
+
: undefined }), this.dataList ? (index.h("datalist", { id: this._dataListId }, (_h = this.getDataList()) === null || _h === void 0 ? void 0 : _h.map((option) => (index.h("option", { key: this._dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null, index.h("slot", { key: '8a188730a5219b5611c55ce3527165223e080492' }), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: this.messageSize || "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { semantic: "successful", id: this._validMessageId, size: this.validMessageSize || "small" }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: 'f8782431777d7a7af3c6e6069ad87b5e933686ba', semantic: "critical", id: this._invalidMessageId, size: this.invalidMessageSize || "small" }, this._invalidMessage), index.h("span", { key: '651068b04f3f87c7129782c212eebbfca027cda6', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
|
|
385
390
|
}
|
|
386
391
|
static get watchers() { return {
|
|
387
392
|
"_ref": [{
|
|
@@ -286,7 +286,7 @@ const DBCustomSelect = class {
|
|
|
286
286
|
event.preventDefault();
|
|
287
287
|
}
|
|
288
288
|
handleKeyboardPress(event) {
|
|
289
|
-
var _a, _b;
|
|
289
|
+
var _a, _b, _c;
|
|
290
290
|
event.stopPropagation();
|
|
291
291
|
if (event.key === "Escape" && ((_a = this.detailsRef) === null || _a === void 0 ? void 0 : _a.open)) {
|
|
292
292
|
this.handleClose(undefined, true);
|
|
@@ -301,6 +301,14 @@ const DBCustomSelect = class {
|
|
|
301
301
|
activeElement.click();
|
|
302
302
|
event.preventDefault();
|
|
303
303
|
}
|
|
304
|
+
else if (activeElement.getAttribute("type") === "search") {
|
|
305
|
+
// When Enter is pressed in search field, select the first available option
|
|
306
|
+
const firstOption = (_c = this._options) === null || _c === void 0 ? void 0 : _c.find((opt) => !opt.isGroupTitle && !opt.disabled);
|
|
307
|
+
if (firstOption === null || firstOption === void 0 ? void 0 : firstOption.value) {
|
|
308
|
+
this.handleSelect(firstOption.value);
|
|
309
|
+
event.preventDefault();
|
|
310
|
+
}
|
|
311
|
+
}
|
|
304
312
|
}
|
|
305
313
|
}
|
|
306
314
|
else if (event.key === "ArrowDown" ||
|
|
@@ -765,19 +773,19 @@ const DBCustomSelect = class {
|
|
|
765
773
|
}
|
|
766
774
|
render() {
|
|
767
775
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
768
|
-
return (index.h("div", { key: '
|
|
776
|
+
return (index.h("div", { key: '5ab3c80f3af53b7795e709feaea160e4aa26f281', class: index$1.cls("db-custom-select", this.className), id: this._id, ref: (el) => {
|
|
769
777
|
this._ref = el;
|
|
770
778
|
}, "aria-invalid": this._validity === "invalid", "data-custom-validity": this._validity, "data-width": this.formFieldWidth, "data-variant": this.variant === "floating" &&
|
|
771
779
|
this.selectedType === "tag" &&
|
|
772
780
|
this.multiple
|
|
773
781
|
? "above"
|
|
774
|
-
: this.variant, "data-required": index$1.getBooleanAsString(this.required), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": index$1.getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIcon) }, index.h("label", { key: '
|
|
782
|
+
: this.variant, "data-required": index$1.getBooleanAsString(this.required), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": index$1.getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIcon) }, index.h("label", { key: '281d6b75a9ae62b6e2f59c04876603988366952d', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL, index.h("select", { key: '26029a01c106666155c40cac98a7f67739145491', role: "none", hidden: true, id: this._selectId, tabIndex: -1, ref: (el) => {
|
|
775
783
|
this.selectRef = el;
|
|
776
784
|
}, form: this.form, name: this.name, multiple: index$1.getBoolean(this.multiple, "multiple"), disabled: index$1.getBoolean(this.disabled, "disabled"), required: index$1.getBoolean(this.required, "required"), onChange: (event) => this.satisfyReact(event) }, ((_b = this.options) === null || _b === void 0 ? void 0 : _b.length)
|
|
777
785
|
? (_c = this.options) === null || _c === void 0 ? void 0 : _c.map((option) => (index.h("option", { disabled: option.disabled, value: option.value, key: undefined }, this.getOptionLabel(option))))
|
|
778
|
-
: null)), index.h("details", { key: '
|
|
786
|
+
: null)), index.h("details", { key: '60f50d851ebf3b180094bdbd1c9acb3c6e1069af', ref: (el) => {
|
|
779
787
|
this.detailsRef = el;
|
|
780
|
-
}, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, index.h("slot", { key: '
|
|
788
|
+
}, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, index.h("slot", { key: '369ba87529acc1e3b2d12869174eff0a824c0176' }), this.options ? (index.h(index.Fragment, null, index.h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-disabled": index$1.getBooleanAsString(this.disabled), "aria-labelledby": this._labelId }, ((_d = this._selectedLabels) === null || _d === void 0 ? void 0 : _d.length) ? (index.h("span", { "data-visually-hidden": index$1.getBooleanAsString(this.selectedType === "tag"), id: this._selectedLabelsId }, this.selectedPrefix ? (index.h("span", { "data-visually-hidden": "true" }, this.selectedPrefix)) : null, this._selectedLabels)) : null, this.selectedType === "tag" ? (index.h("div", null, (_e = this._selectedOptions) === null || _e === void 0 ? void 0 : _e.map((option, index$1) => (index.h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(option), onRemove: (event) => this.handleTagRemove(option, event), key: undefined }, this.getOptionLabel(option)))))) : null), index.h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (index.h("div", null, index.h("db-input", { type: "search", ref: (el) => {
|
|
781
789
|
this.searchInputRef = el;
|
|
782
790
|
}, name: this._id, form: this._id, showLabel: false, value: this._searchValue, label: (_f = this.searchLabel) !== null && _f !== void 0 ? _f : constants.DEFAULT_LABEL, placeholder: (_g = this.searchPlaceholder) !== null && _g !== void 0 ? _g : this.searchLabel, ariaDescribedBy: this._hasNoOptions || this.showLoading
|
|
783
791
|
? this._infoTextId
|
|
@@ -787,7 +795,7 @@ const DBCustomSelect = class {
|
|
|
787
795
|
this.selectAllRef = el;
|
|
788
796
|
}, form: this._id, checked: this.selectAllChecked, onChange: (event) => this.handleSelectAll(event) }), this.getSelectAllLabel())))) : null, index.h("db-custom-select-list", { multiple: index$1.getBoolean(this.multiple, "multiple"), label: (_k = (_j = this.listLabel) !== null && _j !== void 0 ? _j : this.label) !== null && _k !== void 0 ? _k : constants.DEFAULT_LABEL }, (_l = this._options) === null || _l === void 0 ? void 0 : _l.map((option) => (index.h("db-custom-select-list-item", { type: this.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: this.getOptionLabel(option), name: this._id, checked: this.getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: () => this.handleSelect(option.value), key: undefined }, !option.isGroupTitle
|
|
789
797
|
? this.getOptionLabel(option)
|
|
790
|
-
: null)))))), index.h("div", null, index.h("db-button", { variant: "ghost", width: "full", icon: "cross", size: "small", name: this._id, form: this._id, onClick: () => this.handleClose(undefined, true) }, (_m = this.mobileCloseButtonText) !== null && _m !== void 0 ? _m : constants.DEFAULT_CLOSE_BUTTON))))) : null), ((_o = this.showClearSelection) !== null && _o !== void 0 ? _o : true) && ((_p = this._values) === null || _p === void 0 ? void 0 : _p.length) ? (index.h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, index.h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, index.h("span", { key: '
|
|
798
|
+
: null)))))), index.h("div", null, index.h("db-button", { variant: "ghost", width: "full", icon: "cross", size: "small", name: this._id, form: this._id, onClick: () => this.handleClose(undefined, true) }, (_m = this.mobileCloseButtonText) !== null && _m !== void 0 ? _m : constants.DEFAULT_CLOSE_BUTTON))))) : null), ((_o = this.showClearSelection) !== null && _o !== void 0 ? _o : true) && ((_p = this._values) === null || _p === void 0 ? void 0 : _p.length) ? (index.h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, index.h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, index.h("span", { key: 'b4a9cebfe1db06422f428bac4d04d581bcadbb95', class: "db-custom-select-placeholder", "aria-hidden": index$1.getBooleanAsString(true), id: this._placeholderId }, (_q = this.placeholder) !== null && _q !== void 0 ? _q : this.label), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: 'a407a98afeecf7634770f34e2f427a09d657419a', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '4465c3745c21e5333c8498927416fd0f244673dd', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
|
|
791
799
|
}
|
|
792
800
|
static get watchers() { return {
|
|
793
801
|
"detailsRef": [{
|
|
@@ -43,7 +43,7 @@ const DBDrawer = class {
|
|
|
43
43
|
const open = Boolean(this.open);
|
|
44
44
|
if (open && !this._ref.open) {
|
|
45
45
|
if (this.dialogContainerRef) {
|
|
46
|
-
this.dialogContainerRef.
|
|
46
|
+
this.dialogContainerRef.removeAttribute("data-transition");
|
|
47
47
|
}
|
|
48
48
|
if (this.position === "absolute" ||
|
|
49
49
|
this.backdrop === "none" ||
|
|
@@ -53,16 +53,20 @@ const DBDrawer = class {
|
|
|
53
53
|
else {
|
|
54
54
|
this._ref.showModal();
|
|
55
55
|
}
|
|
56
|
+
void index$1.delay(() => {
|
|
57
|
+
if (this.dialogContainerRef) {
|
|
58
|
+
this.dialogContainerRef.dataset["transition"] =
|
|
59
|
+
"open";
|
|
60
|
+
}
|
|
61
|
+
}, 1);
|
|
56
62
|
}
|
|
57
63
|
if (!open && this._ref.open) {
|
|
58
64
|
if (this.dialogContainerRef) {
|
|
59
|
-
this.dialogContainerRef.
|
|
65
|
+
this.dialogContainerRef.dataset["transition"] =
|
|
66
|
+
"close";
|
|
60
67
|
}
|
|
61
|
-
index$1.delay(() => {
|
|
68
|
+
void index$1.delay(() => {
|
|
62
69
|
var _a;
|
|
63
|
-
if (this.dialogContainerRef) {
|
|
64
|
-
this.dialogContainerRef.hidden = false;
|
|
65
|
-
}
|
|
66
70
|
(_a = this._ref) === null || _a === void 0 ? void 0 : _a.close();
|
|
67
71
|
}, 401);
|
|
68
72
|
}
|
|
@@ -127,11 +131,11 @@ const DBDrawer = class {
|
|
|
127
131
|
}
|
|
128
132
|
render() {
|
|
129
133
|
var _a;
|
|
130
|
-
return (index.h("dialog", { key: '
|
|
134
|
+
return (index.h("dialog", { key: '171c5580c99bbe2d2ea0a6e8e5962e4132d9b07f', class: "db-drawer", id: this.id, ref: (el) => {
|
|
131
135
|
this._ref = el;
|
|
132
|
-
}, onClick: (event) => this.handleClose(event), onKeyDown: (event) => this.handleClose(event), "data-position": this.position, "data-backdrop": this.backdrop, "data-direction": this.direction, "data-variant": this.variant }, index.h("article", { key: '
|
|
136
|
+
}, onClick: (event) => this.handleClose(event), onKeyDown: (event) => this.handleClose(event), "data-position": this.position, "data-backdrop": this.backdrop, "data-direction": this.direction, "data-variant": this.variant }, index.h("article", { key: 'e9fad39beff3e642ad13be4950bb64fd15896f80', class: index$1.cls("db-drawer-container", this.className), ref: (el) => {
|
|
133
137
|
this.dialogContainerRef = el;
|
|
134
|
-
}, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": index$1.getBooleanAsString(this.rounded) }, index.h("header", { key: '
|
|
138
|
+
}, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": index$1.getBooleanAsString(this.rounded) }, index.h("header", { key: 'cb9f374f26ebca0f11d02081c28e856cc87107c3', class: "db-drawer-header" }, index.h("div", { key: '7fca8037c16e16d909bcede75e223f38ae019453', class: "db-drawer-header-text" }, index.h("slot", { key: '85159cc4d260fa992bfe8b933920ae286b9ab09c', name: "drawerHeader" })), index.h("db-button", { key: '4a9ad6ba576480b154614da72752421a8ff81df6', class: "button-close-drawer", icon: "cross", variant: "ghost", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event, true) }, (_a = this.closeButtonText) !== null && _a !== void 0 ? _a : constants.DEFAULT_CLOSE_BUTTON)), index.h("div", { key: '9dbbd6a3835dad60dea79a9b2fbed6a62dd6b837', class: "db-drawer-content" }, index.h("slot", { key: '1bc4b88266e6d7250d0075e2405b725ad38b950e' })))));
|
|
135
139
|
}
|
|
136
140
|
static get watchers() { return {
|
|
137
141
|
"open": [{
|
|
@@ -166,7 +166,10 @@ const DBSelect = class {
|
|
|
166
166
|
this.watch2Fn();
|
|
167
167
|
}
|
|
168
168
|
watch3Fn() {
|
|
169
|
-
|
|
169
|
+
// If angular uses ngModel value and _value are null
|
|
170
|
+
// then the value will be set afterward and the _ref will be refreshed
|
|
171
|
+
const addResetListener = true;
|
|
172
|
+
if (this._ref && addResetListener) {
|
|
170
173
|
const defaultValue = undefined;
|
|
171
174
|
let controller = this.abortController;
|
|
172
175
|
if (!controller) {
|
|
@@ -207,14 +210,14 @@ const DBSelect = class {
|
|
|
207
210
|
}
|
|
208
211
|
render() {
|
|
209
212
|
var _a, _b, _c, _d, _e;
|
|
210
|
-
return (index.h("div", { key: '
|
|
213
|
+
return (index.h("div", { key: '0139805ef7af1df0231794b1214fb861e6564247', class: index$1.cls("db-select", this.className), "data-variant": this.variant, "data-hide-label": index$1.getHideProp(this.showLabel), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-icon": this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIcon) }, index.h("label", { key: '32f2bbc5b919c3450c33f6e18a5da5826da7aa11', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL), index.h("select", { key: 'b5f973899ce6d4dd1d1de822a41dd4035cc08757', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
|
|
211
214
|
this._ref = el;
|
|
212
215
|
}, required: index$1.getBoolean(this.required, "required"), disabled: index$1.getBoolean(this.disabled, "disabled"), id: this._id, name: this.name, size: this.size,
|
|
213
216
|
/* @ts-ignore */
|
|
214
217
|
value: (_b = this.value) !== null && _b !== void 0 ? _b : this._value, autocomplete: this.autocomplete, multiple: this.multiple, onInput: (event) => this.handleInput(event), onClick: (event) => this.handleClick(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": (_c = this.ariaDescribedBy) !== null && _c !== void 0 ? _c : this._descByIds }, this.variant === "floating" || this.placeholder ? (index.h("option", { class: "placeholder", value: "" })) : null, ((_d = this.options) === null || _d === void 0 ? void 0 : _d.length) ? ((_e = this.options) === null || _e === void 0 ? void 0 : _e.map((option) => {
|
|
215
218
|
var _a;
|
|
216
219
|
return (index.h(index.Fragment, null, option.options ? (index.h("optgroup", { label: this.getOptionLabel(option), key: undefined }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (index.h("option", { value: optgroupOption.value, selected: optgroupOption.selected, disabled: optgroupOption.disabled, key: undefined }, this.getOptionLabel(optgroupOption)))))) : (index.h("option", { value: option.value, disabled: option.disabled, selected: option.selected, key: undefined }, this.getOptionLabel(option)))));
|
|
217
|
-
})) : (index.h("slot", null))), this.placeholder ? (index.h("span", { class: "db-select-placeholder", id: this._placeholderId }, this.placeholder)) : null, index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '
|
|
220
|
+
})) : (index.h("slot", null))), this.placeholder ? (index.h("span", { class: "db-select-placeholder", id: this._placeholderId }, this.placeholder)) : null, index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '8b6c170210a55708f2539f46bd599a47a9e81781', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '17de2c472570dce406b18eeac924c0c88446ce6d', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
|
|
218
221
|
}
|
|
219
222
|
static get watchers() { return {
|
|
220
223
|
"_ref": [{
|
|
@@ -136,13 +136,18 @@ const DBTextarea = class {
|
|
|
136
136
|
this.watch1Fn();
|
|
137
137
|
}
|
|
138
138
|
watch2Fn() {
|
|
139
|
-
this.
|
|
139
|
+
if (this.value !== undefined) {
|
|
140
|
+
this._value = this.value;
|
|
141
|
+
}
|
|
140
142
|
}
|
|
141
143
|
watch2() {
|
|
142
144
|
this.watch2Fn();
|
|
143
145
|
}
|
|
144
146
|
watch3Fn() {
|
|
145
|
-
|
|
147
|
+
// If angular uses ngModel value and _value are null
|
|
148
|
+
// then the value will be set afterward and the _ref will be refreshed
|
|
149
|
+
const addResetListener = true;
|
|
150
|
+
if (this._ref && addResetListener) {
|
|
146
151
|
const defaultValue = undefined;
|
|
147
152
|
let controller = this.abortController;
|
|
148
153
|
if (!controller) {
|
|
@@ -181,10 +186,10 @@ const DBTextarea = class {
|
|
|
181
186
|
}
|
|
182
187
|
render() {
|
|
183
188
|
var _a, _b, _c, _d, _e;
|
|
184
|
-
return (index.h("div", { key: '
|
|
189
|
+
return (index.h("div", { key: '3ac7e870ca2c9d8f366f07797fc15c238ddeab50', class: index$1.cls("db-textarea", this.className), "data-variant": this.variant, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-hide-label": index$1.getHideProp(this.showLabel) }, index.h("label", { key: 'd3d0e209d0a14a54975cce835e50e4f57d09d1bd', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL), index.h("textarea", { key: '7e7dce4db9a84230a9c736039eefd58022944cf8', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
|
|
185
190
|
this._ref = el;
|
|
186
191
|
}, id: this._id, "data-resize": this.resize, "data-hide-resizer": index$1.getHideProp((_b = this.showResizer) !== null && _b !== void 0 ? _b : true), disabled: index$1.getBoolean(this.disabled, "disabled"), required: index$1.getBoolean(this.required, "required"), readOnly: index$1.getBoolean(this.readOnly, "readOnly") ||
|
|
187
|
-
index$1.getBoolean(this.readonly, "readonly"), form: this.form, maxLength: index$1.getNumber(this.maxLength, this.maxlength), minLength: index$1.getNumber(this.minLength, this.minlength), name: this.name, wrap: this.wrap, spellcheck: this.spellCheck, autocomplete: this.autocomplete, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), value: (_c = this.value) !== null && _c !== void 0 ? _c : this._value, "aria-describedby": (_d = this.ariaDescribedBy) !== null && _d !== void 0 ? _d : this._descByIds, placeholder: (_e = this.placeholder) !== null && _e !== void 0 ? _e : constants.DEFAULT_PLACEHOLDER, rows: index$1.getNumber(this.rows, constants.DEFAULT_ROWS), cols: index$1.getNumber(this.cols) }), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '
|
|
192
|
+
index$1.getBoolean(this.readonly, "readonly"), form: this.form, maxLength: index$1.getNumber(this.maxLength, this.maxlength), minLength: index$1.getNumber(this.minLength, this.minlength), name: this.name, wrap: this.wrap, spellcheck: this.spellCheck, autocomplete: this.autocomplete, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), value: (_c = this.value) !== null && _c !== void 0 ? _c : this._value, "aria-describedby": (_d = this.ariaDescribedBy) !== null && _d !== void 0 ? _d : this._descByIds, placeholder: (_e = this.placeholder) !== null && _e !== void 0 ? _e : constants.DEFAULT_PLACEHOLDER, rows: index$1.getNumber(this.rows, constants.DEFAULT_ROWS), cols: index$1.getNumber(this.cols) }), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: 'dc153c224d3acafa0a8d7f3ad37317b76cba01b8', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '21cd2120d06ec2891979d7a7fc0f1041031dabf2', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
|
|
188
193
|
}
|
|
189
194
|
static get watchers() { return {
|
|
190
195
|
"_ref": [{
|
|
@@ -81,7 +81,7 @@ export class DBBrand {
|
|
|
81
81
|
"mutable": false,
|
|
82
82
|
"complexType": {
|
|
83
83
|
"original": "DBBrandProps[\"icon\"]",
|
|
84
|
-
"resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"
|
|
84
|
+
"resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
|
|
85
85
|
"references": {
|
|
86
86
|
"DBBrandProps": {
|
|
87
87
|
"location": "import",
|
|
@@ -167,7 +167,7 @@ export class DBButton {
|
|
|
167
167
|
"mutable": false,
|
|
168
168
|
"complexType": {
|
|
169
169
|
"original": "DBButtonProps[\"iconLeading\"]",
|
|
170
|
-
"resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"
|
|
170
|
+
"resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
|
|
171
171
|
"references": {
|
|
172
172
|
"DBButtonProps": {
|
|
173
173
|
"location": "import",
|
|
@@ -193,7 +193,7 @@ export class DBButton {
|
|
|
193
193
|
"mutable": false,
|
|
194
194
|
"complexType": {
|
|
195
195
|
"original": "DBButtonProps[\"icon\"]",
|
|
196
|
-
"resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"
|
|
196
|
+
"resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
|
|
197
197
|
"references": {
|
|
198
198
|
"DBButtonProps": {
|
|
199
199
|
"location": "import",
|
|
@@ -271,7 +271,7 @@ export class DBButton {
|
|
|
271
271
|
"mutable": false,
|
|
272
272
|
"complexType": {
|
|
273
273
|
"original": "DBButtonProps[\"iconTrailing\"]",
|
|
274
|
-
"resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"
|
|
274
|
+
"resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
|
|
275
275
|
"references": {
|
|
276
276
|
"DBButtonProps": {
|
|
277
277
|
"location": "import",
|
|
@@ -670,7 +670,7 @@ export class DBCheckbox {
|
|
|
670
670
|
"mutable": false,
|
|
671
671
|
"complexType": {
|
|
672
672
|
"original": "DBCheckboxProps[\"messageIcon\"]",
|
|
673
|
-
"resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"
|
|
673
|
+
"resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
|
|
674
674
|
"references": {
|
|
675
675
|
"DBCheckboxProps": {
|
|
676
676
|
"location": "import",
|
|
@@ -282,7 +282,7 @@ export class DBCustomSelect {
|
|
|
282
282
|
event.preventDefault();
|
|
283
283
|
}
|
|
284
284
|
handleKeyboardPress(event) {
|
|
285
|
-
var _a, _b;
|
|
285
|
+
var _a, _b, _c;
|
|
286
286
|
event.stopPropagation();
|
|
287
287
|
if (event.key === "Escape" && ((_a = this.detailsRef) === null || _a === void 0 ? void 0 : _a.open)) {
|
|
288
288
|
this.handleClose(undefined, true);
|
|
@@ -297,6 +297,14 @@ export class DBCustomSelect {
|
|
|
297
297
|
activeElement.click();
|
|
298
298
|
event.preventDefault();
|
|
299
299
|
}
|
|
300
|
+
else if (activeElement.getAttribute("type") === "search") {
|
|
301
|
+
// When Enter is pressed in search field, select the first available option
|
|
302
|
+
const firstOption = (_c = this._options) === null || _c === void 0 ? void 0 : _c.find((opt) => !opt.isGroupTitle && !opt.disabled);
|
|
303
|
+
if (firstOption === null || firstOption === void 0 ? void 0 : firstOption.value) {
|
|
304
|
+
this.handleSelect(firstOption.value);
|
|
305
|
+
event.preventDefault();
|
|
306
|
+
}
|
|
307
|
+
}
|
|
300
308
|
}
|
|
301
309
|
}
|
|
302
310
|
else if (event.key === "ArrowDown" ||
|
|
@@ -761,19 +769,19 @@ export class DBCustomSelect {
|
|
|
761
769
|
}
|
|
762
770
|
render() {
|
|
763
771
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
764
|
-
return (h("div", { key: '
|
|
772
|
+
return (h("div", { key: '5ab3c80f3af53b7795e709feaea160e4aa26f281', class: cls("db-custom-select", this.className), id: this._id, ref: (el) => {
|
|
765
773
|
this._ref = el;
|
|
766
774
|
}, "aria-invalid": this._validity === "invalid", "data-custom-validity": this._validity, "data-width": this.formFieldWidth, "data-variant": this.variant === "floating" &&
|
|
767
775
|
this.selectedType === "tag" &&
|
|
768
776
|
this.multiple
|
|
769
777
|
? "above"
|
|
770
|
-
: this.variant, "data-required": getBooleanAsString(this.required), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon) }, h("label", { key: '
|
|
778
|
+
: this.variant, "data-required": getBooleanAsString(this.required), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon) }, h("label", { key: '281d6b75a9ae62b6e2f59c04876603988366952d', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL, h("select", { key: '26029a01c106666155c40cac98a7f67739145491', role: "none", hidden: true, id: this._selectId, tabIndex: -1, ref: (el) => {
|
|
771
779
|
this.selectRef = el;
|
|
772
780
|
}, form: this.form, name: this.name, multiple: getBoolean(this.multiple, "multiple"), disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), onChange: (event) => this.satisfyReact(event) }, ((_b = this.options) === null || _b === void 0 ? void 0 : _b.length)
|
|
773
781
|
? (_c = this.options) === null || _c === void 0 ? void 0 : _c.map((option) => (h("option", { disabled: option.disabled, value: option.value, key: undefined }, this.getOptionLabel(option))))
|
|
774
|
-
: null)), h("details", { key: '
|
|
782
|
+
: null)), h("details", { key: '60f50d851ebf3b180094bdbd1c9acb3c6e1069af', ref: (el) => {
|
|
775
783
|
this.detailsRef = el;
|
|
776
|
-
}, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, h("slot", { key: '
|
|
784
|
+
}, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, h("slot", { key: '369ba87529acc1e3b2d12869174eff0a824c0176' }), this.options ? (h(Fragment, null, h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-disabled": getBooleanAsString(this.disabled), "aria-labelledby": this._labelId }, ((_d = this._selectedLabels) === null || _d === void 0 ? void 0 : _d.length) ? (h("span", { "data-visually-hidden": getBooleanAsString(this.selectedType === "tag"), id: this._selectedLabelsId }, this.selectedPrefix ? (h("span", { "data-visually-hidden": "true" }, this.selectedPrefix)) : null, this._selectedLabels)) : null, this.selectedType === "tag" ? (h("div", null, (_e = this._selectedOptions) === null || _e === void 0 ? void 0 : _e.map((option, index) => (h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(option), onRemove: (event) => this.handleTagRemove(option, event), key: undefined }, this.getOptionLabel(option)))))) : null), h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (h("div", null, h("db-input", { type: "search", ref: (el) => {
|
|
777
785
|
this.searchInputRef = el;
|
|
778
786
|
}, name: this._id, form: this._id, showLabel: false, value: this._searchValue, label: (_f = this.searchLabel) !== null && _f !== void 0 ? _f : DEFAULT_LABEL, placeholder: (_g = this.searchPlaceholder) !== null && _g !== void 0 ? _g : this.searchLabel, ariaDescribedBy: this._hasNoOptions || this.showLoading
|
|
779
787
|
? this._infoTextId
|
|
@@ -783,7 +791,7 @@ export class DBCustomSelect {
|
|
|
783
791
|
this.selectAllRef = el;
|
|
784
792
|
}, form: this._id, checked: this.selectAllChecked, onChange: (event) => this.handleSelectAll(event) }), this.getSelectAllLabel())))) : null, h("db-custom-select-list", { multiple: getBoolean(this.multiple, "multiple"), label: (_k = (_j = this.listLabel) !== null && _j !== void 0 ? _j : this.label) !== null && _k !== void 0 ? _k : DEFAULT_LABEL }, (_l = this._options) === null || _l === void 0 ? void 0 : _l.map((option) => (h("db-custom-select-list-item", { type: this.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: this.getOptionLabel(option), name: this._id, checked: this.getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: () => this.handleSelect(option.value), key: undefined }, !option.isGroupTitle
|
|
785
793
|
? this.getOptionLabel(option)
|
|
786
|
-
: null)))))), h("div", null, h("db-button", { variant: "ghost", width: "full", icon: "cross", size: "small", name: this._id, form: this._id, onClick: () => this.handleClose(undefined, true) }, (_m = this.mobileCloseButtonText) !== null && _m !== void 0 ? _m : DEFAULT_CLOSE_BUTTON))))) : null), ((_o = this.showClearSelection) !== null && _o !== void 0 ? _o : true) && ((_p = this._values) === null || _p === void 0 ? void 0 : _p.length) ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, h("span", { key: '
|
|
794
|
+
: null)))))), h("div", null, h("db-button", { variant: "ghost", width: "full", icon: "cross", size: "small", name: this._id, form: this._id, onClick: () => this.handleClose(undefined, true) }, (_m = this.mobileCloseButtonText) !== null && _m !== void 0 ? _m : DEFAULT_CLOSE_BUTTON))))) : null), ((_o = this.showClearSelection) !== null && _o !== void 0 ? _o : true) && ((_p = this._values) === null || _p === void 0 ? void 0 : _p.length) ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, h("span", { key: 'b4a9cebfe1db06422f428bac4d04d581bcadbb95', class: "db-custom-select-placeholder", "aria-hidden": getBooleanAsString(true), id: this._placeholderId }, (_q = this.placeholder) !== null && _q !== void 0 ? _q : this.label), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: 'a407a98afeecf7634770f34e2f427a09d657419a', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '4465c3745c21e5333c8498927416fd0f244673dd', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
|
|
787
795
|
}
|
|
788
796
|
static get is() { return "db-custom-select"; }
|
|
789
797
|
static get properties() {
|
|
@@ -1537,7 +1545,7 @@ export class DBCustomSelect {
|
|
|
1537
1545
|
"mutable": false,
|
|
1538
1546
|
"complexType": {
|
|
1539
1547
|
"original": "DBCustomSelectProps[\"icon\"]",
|
|
1540
|
-
"resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"
|
|
1548
|
+
"resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
|
|
1541
1549
|
"references": {
|
|
1542
1550
|
"DBCustomSelectProps": {
|
|
1543
1551
|
"location": "import",
|
|
@@ -2007,7 +2015,7 @@ export class DBCustomSelect {
|
|
|
2007
2015
|
"mutable": false,
|
|
2008
2016
|
"complexType": {
|
|
2009
2017
|
"original": "DBCustomSelectProps[\"messageIcon\"]",
|
|
2010
|
-
"resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"
|
|
2018
|
+
"resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
|
|
2011
2019
|
"references": {
|
|
2012
2020
|
"DBCustomSelectProps": {
|
|
2013
2021
|
"location": "import",
|
|
@@ -263,7 +263,7 @@ export class DBCustomSelectListItem {
|
|
|
263
263
|
"mutable": false,
|
|
264
264
|
"complexType": {
|
|
265
265
|
"original": "DBCustomSelectListItemProps[\"icon\"]",
|
|
266
|
-
"resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"
|
|
266
|
+
"resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
|
|
267
267
|
"references": {
|
|
268
268
|
"DBCustomSelectListItemProps": {
|
|
269
269
|
"location": "import",
|
|
@@ -42,7 +42,7 @@ export class DBDrawer {
|
|
|
42
42
|
const open = Boolean(this.open);
|
|
43
43
|
if (open && !this._ref.open) {
|
|
44
44
|
if (this.dialogContainerRef) {
|
|
45
|
-
this.dialogContainerRef.
|
|
45
|
+
this.dialogContainerRef.removeAttribute("data-transition");
|
|
46
46
|
}
|
|
47
47
|
if (this.position === "absolute" ||
|
|
48
48
|
this.backdrop === "none" ||
|
|
@@ -52,16 +52,20 @@ export class DBDrawer {
|
|
|
52
52
|
else {
|
|
53
53
|
this._ref.showModal();
|
|
54
54
|
}
|
|
55
|
+
void delay(() => {
|
|
56
|
+
if (this.dialogContainerRef) {
|
|
57
|
+
this.dialogContainerRef.dataset["transition"] =
|
|
58
|
+
"open";
|
|
59
|
+
}
|
|
60
|
+
}, 1);
|
|
55
61
|
}
|
|
56
62
|
if (!open && this._ref.open) {
|
|
57
63
|
if (this.dialogContainerRef) {
|
|
58
|
-
this.dialogContainerRef.
|
|
64
|
+
this.dialogContainerRef.dataset["transition"] =
|
|
65
|
+
"close";
|
|
59
66
|
}
|
|
60
|
-
delay(() => {
|
|
67
|
+
void delay(() => {
|
|
61
68
|
var _a;
|
|
62
|
-
if (this.dialogContainerRef) {
|
|
63
|
-
this.dialogContainerRef.hidden = false;
|
|
64
|
-
}
|
|
65
69
|
(_a = this._ref) === null || _a === void 0 ? void 0 : _a.close();
|
|
66
70
|
}, 401);
|
|
67
71
|
}
|
|
@@ -126,11 +130,11 @@ export class DBDrawer {
|
|
|
126
130
|
}
|
|
127
131
|
render() {
|
|
128
132
|
var _a;
|
|
129
|
-
return (h("dialog", { key: '
|
|
133
|
+
return (h("dialog", { key: '171c5580c99bbe2d2ea0a6e8e5962e4132d9b07f', class: "db-drawer", id: this.id, ref: (el) => {
|
|
130
134
|
this._ref = el;
|
|
131
|
-
}, onClick: (event) => this.handleClose(event), onKeyDown: (event) => this.handleClose(event), "data-position": this.position, "data-backdrop": this.backdrop, "data-direction": this.direction, "data-variant": this.variant }, h("article", { key: '
|
|
135
|
+
}, onClick: (event) => this.handleClose(event), onKeyDown: (event) => this.handleClose(event), "data-position": this.position, "data-backdrop": this.backdrop, "data-direction": this.direction, "data-variant": this.variant }, h("article", { key: 'e9fad39beff3e642ad13be4950bb64fd15896f80', class: cls("db-drawer-container", this.className), ref: (el) => {
|
|
132
136
|
this.dialogContainerRef = el;
|
|
133
|
-
}, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": getBooleanAsString(this.rounded) }, h("header", { key: '
|
|
137
|
+
}, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": getBooleanAsString(this.rounded) }, h("header", { key: 'cb9f374f26ebca0f11d02081c28e856cc87107c3', class: "db-drawer-header" }, h("div", { key: '7fca8037c16e16d909bcede75e223f38ae019453', class: "db-drawer-header-text" }, h("slot", { key: '85159cc4d260fa992bfe8b933920ae286b9ab09c', name: "drawerHeader" })), h("db-button", { key: '4a9ad6ba576480b154614da72752421a8ff81df6', class: "button-close-drawer", icon: "cross", variant: "ghost", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event, true) }, (_a = this.closeButtonText) !== null && _a !== void 0 ? _a : DEFAULT_CLOSE_BUTTON)), h("div", { key: '9dbbd6a3835dad60dea79a9b2fbed6a62dd6b837', class: "db-drawer-content" }, h("slot", { key: '1bc4b88266e6d7250d0075e2405b725ad38b950e' })))));
|
|
134
138
|
}
|
|
135
139
|
static get is() { return "db-drawer"; }
|
|
136
140
|
static get properties() {
|
|
@@ -105,7 +105,7 @@ export class DBIcon {
|
|
|
105
105
|
"mutable": false,
|
|
106
106
|
"complexType": {
|
|
107
107
|
"original": "DBIconProps[\"icon\"]",
|
|
108
|
-
"resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"
|
|
108
|
+
"resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
|
|
109
109
|
"references": {
|
|
110
110
|
"DBIconProps": {
|
|
111
111
|
"location": "import",
|
|
@@ -106,7 +106,7 @@ export class DBInfotext {
|
|
|
106
106
|
"mutable": false,
|
|
107
107
|
"complexType": {
|
|
108
108
|
"original": "DBInfotextProps[\"icon\"]",
|
|
109
|
-
"resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"
|
|
109
|
+
"resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
|
|
110
110
|
"references": {
|
|
111
111
|
"DBInfotextProps": {
|
|
112
112
|
"location": "import",
|