@db-ux/wc-core-components 4.5.4-postcss-a42fe67 → 4.5.4-postcss2-6de35db
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/dist/cjs/db-custom-select-dropdown_5.cjs.entry.js +7 -9
- package/dist/cjs/db-select.cjs.entry.js +4 -4
- package/dist/cjs/db-textarea.cjs.entry.js +4 -6
- package/dist/collection/components/input/input.js +7 -9
- package/dist/collection/components/select/select.js +4 -4
- package/dist/collection/components/textarea/textarea.js +4 -6
- package/dist/collection/utils/form-components.js +25 -3
- package/dist/custom-elements.json +68 -68
- package/dist/db-ux/db-ux.esm.js +1 -1
- package/dist/db-ux/{p-4f519859.entry.js → p-af15c7c1.entry.js} +1 -1
- package/dist/db-ux/p-b5902b40.entry.js +1 -0
- package/dist/db-ux/{p-fc9fb7cd.entry.js → p-fa61a750.entry.js} +1 -1
- package/dist/esm/db-custom-select-dropdown_5.entry.js +7 -9
- package/dist/esm/db-select.entry.js +4 -4
- package/dist/esm/db-textarea.entry.js +4 -6
- package/dist/types/utils/form-components.d.ts +1 -1
- package/package.json +3 -3
- package/dist/db-ux/p-2c30a356.entry.js +0 -1
|
@@ -357,9 +357,7 @@ const DBInput = class {
|
|
|
357
357
|
this.watch2Fn();
|
|
358
358
|
}
|
|
359
359
|
watch3Fn() {
|
|
360
|
-
|
|
361
|
-
this._value = this.value;
|
|
362
|
-
}
|
|
360
|
+
this._value = this.value;
|
|
363
361
|
}
|
|
364
362
|
watch3() {
|
|
365
363
|
this.watch3Fn();
|
|
@@ -402,20 +400,20 @@ const DBInput = class {
|
|
|
402
400
|
(_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
|
|
403
401
|
}
|
|
404
402
|
render() {
|
|
405
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
406
|
-
return (index.h("div", { key: '
|
|
403
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
404
|
+
return (index.h("div", { key: 'ec887e9cfe4cbbe0783364d6e2f76990273b522e', 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: 'da8836b5b06c992ea7e18aad485254c07ad22e79', htmlFor: this._id }, (_c = this.label) !== null && _c !== void 0 ? _c : constants.DEFAULT_LABEL), index.h("input", { key: '53bfc910e26783193bb881466bb637d67cafa4e7', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
|
|
407
405
|
this._ref = el;
|
|
408
|
-
}, id: this._id, name: this.name, type: this.type || "text", multiple: index$1.getBoolean(this.multiple, "multiple"), accept: this.accept, 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") ||
|
|
409
|
-
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": (
|
|
406
|
+
}, id: this._id, name: this.name, type: this.type || "text", multiple: index$1.getBoolean(this.multiple, "multiple"), accept: this.accept, 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: (_f = (_e = this.value) !== null && _e !== void 0 ? _e : this._value) !== null && _f !== void 0 ? _f : "", 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") ||
|
|
407
|
+
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": (_g = this.ariaDescribedBy) !== null && _g !== void 0 ? _g : this._descByIds, role: [
|
|
410
408
|
"datetime-local",
|
|
411
409
|
"date",
|
|
412
410
|
"time",
|
|
413
411
|
"week",
|
|
414
412
|
"month",
|
|
415
413
|
"color",
|
|
416
|
-
].includes((
|
|
414
|
+
].includes((_h = this.type) !== null && _h !== void 0 ? _h : "") && index$1.isIOSSafari()
|
|
417
415
|
? "textbox"
|
|
418
|
-
: undefined }), this.dataList ? (index.h("datalist", { id: this._dataListId }, (
|
|
416
|
+
: undefined }), this.dataList ? (index.h("datalist", { id: this._dataListId }, (_j = this.getDataList()) === null || _j === void 0 ? void 0 : _j.map((option) => (index.h("option", { key: this._dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null, index.h("slot", { key: '1d08d96e457929a1d7381b5cb6f6c693865d1104' }), 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: '81adecdd0714f3f16e55a8aa32de42342cab14c6', semantic: "critical", id: this._invalidMessageId, size: this.invalidMessageSize || "small" }, this._invalidMessage), index.h("span", { key: 'f83fc13cc844367810c86739bc5554e6dd212dae', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
|
|
419
417
|
}
|
|
420
418
|
static get watchers() { return {
|
|
421
419
|
"id": [{
|
|
@@ -237,15 +237,15 @@ const DBSelect = class {
|
|
|
237
237
|
(_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
|
|
238
238
|
}
|
|
239
239
|
render() {
|
|
240
|
-
var _a, _b, _c, _d, _e;
|
|
241
|
-
return (index.h("div", { key: 'e083b3de98c929310348ef084f614b6115cc79cb', 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: 'f2dab8efe5a3c299268da1f5c58d09752b6b8ca5', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL), index.h("select", { key: '
|
|
240
|
+
var _a, _b, _c, _d, _e, _f;
|
|
241
|
+
return (index.h("div", { key: 'e083b3de98c929310348ef084f614b6115cc79cb', 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: 'f2dab8efe5a3c299268da1f5c58d09752b6b8ca5', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL), index.h("select", { key: '610327eb481b3806f99a8d123452bcf8e7e2ca58', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
|
|
242
242
|
this._ref = el;
|
|
243
243
|
}, required: index$1.getBoolean(this.required, "required"), disabled: index$1.getBoolean(this.disabled, "disabled"), id: this._id, name: this.name, size: this.size,
|
|
244
244
|
/* @ts-ignore */
|
|
245
|
-
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": (
|
|
245
|
+
value: (_c = (_b = this.value) !== null && _b !== void 0 ? _b : this._value) !== null && _c !== void 0 ? _c : undefined, 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": (_d = this.ariaDescribedBy) !== null && _d !== void 0 ? _d : this._descByIds }, this.variant === "floating" || !!this.placeholder ? (index.h("option", { class: "placeholder", value: "", "data-show-empty-option": index$1.getBooleanAsString(this.shouldShowEmptyOption()) })) : null, ((_e = this.options) === null || _e === void 0 ? void 0 : _e.length) ? ((_f = this.options) === null || _f === void 0 ? void 0 : _f.map((option) => {
|
|
246
246
|
var _a;
|
|
247
247
|
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)))));
|
|
248
|
-
})) : (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: '
|
|
248
|
+
})) : (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: '946099b7eaab7da894f46400e1f428de137492ba', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '723768ffcad5add62979635d354280686145ca31', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
|
|
249
249
|
}
|
|
250
250
|
static get watchers() { return {
|
|
251
251
|
"id": [{
|
|
@@ -157,9 +157,7 @@ const DBTextarea = class {
|
|
|
157
157
|
this.watch2Fn();
|
|
158
158
|
}
|
|
159
159
|
watch3Fn() {
|
|
160
|
-
|
|
161
|
-
this._value = this.value;
|
|
162
|
-
}
|
|
160
|
+
this._value = this.value;
|
|
163
161
|
}
|
|
164
162
|
watch3() {
|
|
165
163
|
this.watch3Fn();
|
|
@@ -202,11 +200,11 @@ const DBTextarea = class {
|
|
|
202
200
|
(_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
|
|
203
201
|
}
|
|
204
202
|
render() {
|
|
205
|
-
var _a, _b, _c, _d, _e;
|
|
206
|
-
return (index.h("div", { key: '
|
|
203
|
+
var _a, _b, _c, _d, _e, _f;
|
|
204
|
+
return (index.h("div", { key: 'e6c64857826bf80558d0b402594a66418e62ef57', 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: '38f6ce12d40275dd6fa5cfa64c6d2ca4c17fab8f', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL), index.h("textarea", { key: '6d11324a4cfce9eeed9e1bcafe0a7edb1ee6c8ce', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
|
|
207
205
|
this._ref = el;
|
|
208
206
|
}, 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") ||
|
|
209
|
-
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": (
|
|
207
|
+
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: (_d = (_c = this.value) !== null && _c !== void 0 ? _c : this._value) !== null && _d !== void 0 ? _d : "", "aria-describedby": (_e = this.ariaDescribedBy) !== null && _e !== void 0 ? _e : this._descByIds, placeholder: (_f = this.placeholder) !== null && _f !== void 0 ? _f : 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: '16d43aeea87f6e3597c95847c037faa194875b94', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '8b407f9a60c61ac4af26d6ec5a9571d5f37ae915', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
|
|
210
208
|
}
|
|
211
209
|
static get watchers() { return {
|
|
212
210
|
"id": [{
|
|
@@ -167,9 +167,7 @@ export class DBInput {
|
|
|
167
167
|
this.watch2Fn();
|
|
168
168
|
}
|
|
169
169
|
watch3Fn() {
|
|
170
|
-
|
|
171
|
-
this._value = this.value;
|
|
172
|
-
}
|
|
170
|
+
this._value = this.value;
|
|
173
171
|
}
|
|
174
172
|
watch3() {
|
|
175
173
|
this.watch3Fn();
|
|
@@ -212,20 +210,20 @@ export class DBInput {
|
|
|
212
210
|
(_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
|
|
213
211
|
}
|
|
214
212
|
render() {
|
|
215
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
216
|
-
return (h("div", { key: '
|
|
213
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
214
|
+
return (h("div", { key: 'ec887e9cfe4cbbe0783364d6e2f76990273b522e', class: cls("db-input", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-show-icon": 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": getHideProp(this.showRequiredAsterisk), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing) }, h("label", { key: 'da8836b5b06c992ea7e18aad485254c07ad22e79', htmlFor: this._id }, (_c = this.label) !== null && _c !== void 0 ? _c : DEFAULT_LABEL), h("input", { key: '53bfc910e26783193bb881466bb637d67cafa4e7', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
|
|
217
215
|
this._ref = el;
|
|
218
|
-
}, id: this._id, name: this.name, type: this.type || "text", multiple: getBoolean(this.multiple, "multiple"), accept: this.accept, placeholder: (_d = this.placeholder) !== null && _d !== void 0 ? _d : DEFAULT_PLACEHOLDER, disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), step: getStep(this.step), value: (_e = this.value) !== null && _e !== void 0 ? _e : this._value, maxLength: getNumber(this.maxLength, this.maxlength), minLength: getNumber(this.minLength, this.minlength), max: getInputValue(this.max, this.type), min: getInputValue(this.min, this.type), readOnly: getBoolean(this.readOnly, "readOnly") ||
|
|
219
|
-
getBoolean(this.readonly, "readonly"), form: this.form, pattern: this.pattern, size: this.size, autoComplete: this.autocomplete, autoFocus: 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": (
|
|
216
|
+
}, id: this._id, name: this.name, type: this.type || "text", multiple: getBoolean(this.multiple, "multiple"), accept: this.accept, placeholder: (_d = this.placeholder) !== null && _d !== void 0 ? _d : DEFAULT_PLACEHOLDER, disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), step: getStep(this.step), value: (_f = (_e = this.value) !== null && _e !== void 0 ? _e : this._value) !== null && _f !== void 0 ? _f : "", maxLength: getNumber(this.maxLength, this.maxlength), minLength: getNumber(this.minLength, this.minlength), max: getInputValue(this.max, this.type), min: getInputValue(this.min, this.type), readOnly: getBoolean(this.readOnly, "readOnly") ||
|
|
217
|
+
getBoolean(this.readonly, "readonly"), form: this.form, pattern: this.pattern, size: this.size, autoComplete: this.autocomplete, autoFocus: 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": (_g = this.ariaDescribedBy) !== null && _g !== void 0 ? _g : this._descByIds, role: [
|
|
220
218
|
"datetime-local",
|
|
221
219
|
"date",
|
|
222
220
|
"time",
|
|
223
221
|
"week",
|
|
224
222
|
"month",
|
|
225
223
|
"color",
|
|
226
|
-
].includes((
|
|
224
|
+
].includes((_h = this.type) !== null && _h !== void 0 ? _h : "") && isIOSSafari()
|
|
227
225
|
? "textbox"
|
|
228
|
-
: undefined }), this.dataList ? (h("datalist", { id: this._dataListId }, (
|
|
226
|
+
: undefined }), this.dataList ? (h("datalist", { id: this._dataListId }, (_j = this.getDataList()) === null || _j === void 0 ? void 0 : _j.map((option) => (h("option", { key: this._dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null, h("slot", { key: '1d08d96e457929a1d7381b5cb6f6c693865d1104' }), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: this.messageSize || "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { semantic: "successful", id: this._validMessageId, size: this.validMessageSize || "small" }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '81adecdd0714f3f16e55a8aa32de42342cab14c6', semantic: "critical", id: this._invalidMessageId, size: this.invalidMessageSize || "small" }, this._invalidMessage), h("span", { key: 'f83fc13cc844367810c86739bc5554e6dd212dae', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
|
|
229
227
|
}
|
|
230
228
|
static get is() { return "db-input"; }
|
|
231
229
|
static get properties() {
|
|
@@ -232,15 +232,15 @@ export class DBSelect {
|
|
|
232
232
|
(_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
|
|
233
233
|
}
|
|
234
234
|
render() {
|
|
235
|
-
var _a, _b, _c, _d, _e;
|
|
236
|
-
return (h("div", { key: 'e083b3de98c929310348ef084f614b6115cc79cb', class: cls("db-select", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon) }, h("label", { key: 'f2dab8efe5a3c299268da1f5c58d09752b6b8ca5', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("select", { key: '
|
|
235
|
+
var _a, _b, _c, _d, _e, _f;
|
|
236
|
+
return (h("div", { key: 'e083b3de98c929310348ef084f614b6115cc79cb', class: cls("db-select", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon) }, h("label", { key: 'f2dab8efe5a3c299268da1f5c58d09752b6b8ca5', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("select", { key: '610327eb481b3806f99a8d123452bcf8e7e2ca58', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
|
|
237
237
|
this._ref = el;
|
|
238
238
|
}, required: getBoolean(this.required, "required"), disabled: getBoolean(this.disabled, "disabled"), id: this._id, name: this.name, size: this.size,
|
|
239
239
|
/* @ts-ignore */
|
|
240
|
-
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": (
|
|
240
|
+
value: (_c = (_b = this.value) !== null && _b !== void 0 ? _b : this._value) !== null && _c !== void 0 ? _c : undefined, 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": (_d = this.ariaDescribedBy) !== null && _d !== void 0 ? _d : this._descByIds }, this.variant === "floating" || !!this.placeholder ? (h("option", { class: "placeholder", value: "", "data-show-empty-option": getBooleanAsString(this.shouldShowEmptyOption()) })) : null, ((_e = this.options) === null || _e === void 0 ? void 0 : _e.length) ? ((_f = this.options) === null || _f === void 0 ? void 0 : _f.map((option) => {
|
|
241
241
|
var _a;
|
|
242
242
|
return (h(Fragment, null, option.options ? (h("optgroup", { label: this.getOptionLabel(option), key: undefined }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (h("option", { value: optgroupOption.value, selected: optgroupOption.selected, disabled: optgroupOption.disabled, key: undefined }, this.getOptionLabel(optgroupOption)))))) : (h("option", { value: option.value, disabled: option.disabled, selected: option.selected, key: undefined }, this.getOptionLabel(option)))));
|
|
243
|
-
})) : (h("slot", null))), this.placeholder ? (h("span", { class: "db-select-placeholder", id: this._placeholderId }, this.placeholder)) : null, 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: '
|
|
243
|
+
})) : (h("slot", null))), this.placeholder ? (h("span", { class: "db-select-placeholder", id: this._placeholderId }, this.placeholder)) : null, 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: '946099b7eaab7da894f46400e1f428de137492ba', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '723768ffcad5add62979635d354280686145ca31', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
|
|
244
244
|
}
|
|
245
245
|
static get is() { return "db-select"; }
|
|
246
246
|
static get properties() {
|
|
@@ -153,9 +153,7 @@ export class DBTextarea {
|
|
|
153
153
|
this.watch2Fn();
|
|
154
154
|
}
|
|
155
155
|
watch3Fn() {
|
|
156
|
-
|
|
157
|
-
this._value = this.value;
|
|
158
|
-
}
|
|
156
|
+
this._value = this.value;
|
|
159
157
|
}
|
|
160
158
|
watch3() {
|
|
161
159
|
this.watch3Fn();
|
|
@@ -198,11 +196,11 @@ export class DBTextarea {
|
|
|
198
196
|
(_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
|
|
199
197
|
}
|
|
200
198
|
render() {
|
|
201
|
-
var _a, _b, _c, _d, _e;
|
|
202
|
-
return (h("div", { key: '
|
|
199
|
+
var _a, _b, _c, _d, _e, _f;
|
|
200
|
+
return (h("div", { key: 'e6c64857826bf80558d0b402594a66418e62ef57', class: cls("db-textarea", this.className), "data-variant": this.variant, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-hide-label": getHideProp(this.showLabel) }, h("label", { key: '38f6ce12d40275dd6fa5cfa64c6d2ca4c17fab8f', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("textarea", { key: '6d11324a4cfce9eeed9e1bcafe0a7edb1ee6c8ce', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
|
|
203
201
|
this._ref = el;
|
|
204
202
|
}, id: this._id, "data-resize": this.resize, "data-hide-resizer": getHideProp((_b = this.showResizer) !== null && _b !== void 0 ? _b : true), disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), readOnly: getBoolean(this.readOnly, "readOnly") ||
|
|
205
|
-
getBoolean(this.readonly, "readonly"), form: this.form, maxLength: getNumber(this.maxLength, this.maxlength), minLength: 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": (
|
|
203
|
+
getBoolean(this.readonly, "readonly"), form: this.form, maxLength: getNumber(this.maxLength, this.maxlength), minLength: 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: (_d = (_c = this.value) !== null && _c !== void 0 ? _c : this._value) !== null && _d !== void 0 ? _d : "", "aria-describedby": (_e = this.ariaDescribedBy) !== null && _e !== void 0 ? _e : this._descByIds, placeholder: (_f = this.placeholder) !== null && _f !== void 0 ? _f : DEFAULT_PLACEHOLDER, rows: getNumber(this.rows, DEFAULT_ROWS), cols: getNumber(this.cols) }), 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: '16d43aeea87f6e3597c95847c037faa194875b94', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '8b407f9a60c61ac4af26d6ec5a9571d5f37ae915', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
|
|
206
204
|
}
|
|
207
205
|
static get is() { return "db-textarea"; }
|
|
208
206
|
static get properties() {
|
|
@@ -1,8 +1,30 @@
|
|
|
1
1
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
2
2
|
import { delay } from "./index";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
const specialNumberCharacters = ['.', ',', 'e', 'E', '+', '-'];
|
|
4
|
+
export const handleFrameworkEventAngular = (component, event, modelValue = 'value', lastValue) => {
|
|
5
|
+
var _a;
|
|
6
|
+
const value = event.target[modelValue];
|
|
7
|
+
const type = (_a = event.target) === null || _a === void 0 ? void 0 : _a.type;
|
|
8
|
+
if (!value && value !== '' && ['date', 'time', 'week', 'month', 'datetime-local'].includes(type)) {
|
|
9
|
+
// If value is empty and type date we skip `writingValue` function
|
|
10
|
+
return;
|
|
11
|
+
}
|
|
12
|
+
if (type === 'number') {
|
|
13
|
+
if (event.type === 'input') {
|
|
14
|
+
if (specialNumberCharacters.includes(event.data) || specialNumberCharacters.some(specialCharacter => lastValue === null || lastValue === void 0 ? void 0 : lastValue.toString().includes(specialCharacter)) && event.inputType === 'deleteContentBackward') {
|
|
15
|
+
// Skip `writingValue` function if number type and input event
|
|
16
|
+
// and `.` or `,` or 'e', 'E', '+', '-' was typed
|
|
17
|
+
// or content was deleted but last number had a `.`
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
else if (event.type === 'change') {
|
|
22
|
+
// Skip `writingValue` function if number type and change event
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
component.propagateChange(value);
|
|
27
|
+
component.writeValue(value);
|
|
6
28
|
};
|
|
7
29
|
export const handleFrameworkEventVue = (emit, event, modelValue = 'value') => {
|
|
8
30
|
// TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
|