@public-ui/hydrate 2.2.1-e6bb4064f6c9eed624b5929636c056bc0384b2af.0 → 2.2.1
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/index.js +113 -79
- package/dist/index.mjs +113 -79
- package/package.json +3 -3
package/dist/index.mjs
CHANGED
|
@@ -4235,7 +4235,12 @@ const validateMsg = (component, value) => {
|
|
|
4235
4235
|
}
|
|
4236
4236
|
catch (e) {
|
|
4237
4237
|
}
|
|
4238
|
-
watchValidator(component, `_msg`, (value) => isObject$1(value), new Set(['MsgPropType']), value
|
|
4238
|
+
watchValidator(component, `_msg`, (value) => isObject$1(value) && typeof (value === null || value === void 0 ? void 0 : value._description) === 'string', new Set(['MsgPropType']), value, {
|
|
4239
|
+
defaultValue: {
|
|
4240
|
+
_description: '',
|
|
4241
|
+
_type: 'error',
|
|
4242
|
+
},
|
|
4243
|
+
});
|
|
4239
4244
|
});
|
|
4240
4245
|
};
|
|
4241
4246
|
|
|
@@ -4289,6 +4294,12 @@ const validateShow = (component, value, hooks) => {
|
|
|
4289
4294
|
watchBoolean(component, '_show', value, hooks);
|
|
4290
4295
|
};
|
|
4291
4296
|
|
|
4297
|
+
const validateSpellCheck = (component, value) => {
|
|
4298
|
+
watchBoolean(component, '_spellCheck', value, {
|
|
4299
|
+
defaultValue: undefined,
|
|
4300
|
+
});
|
|
4301
|
+
};
|
|
4302
|
+
|
|
4292
4303
|
const validateSuggestions = (component, value) => {
|
|
4293
4304
|
watchJsonArrayString(component, '_suggestions', (item) => typeof item === 'string' || typeof item === 'number', value, undefined, {
|
|
4294
4305
|
hooks: {
|
|
@@ -6140,7 +6151,7 @@ class InputController extends ControlledInputController {
|
|
|
6140
6151
|
});
|
|
6141
6152
|
}
|
|
6142
6153
|
else {
|
|
6143
|
-
this.validateMsg();
|
|
6154
|
+
this.validateMsg(undefined);
|
|
6144
6155
|
}
|
|
6145
6156
|
}
|
|
6146
6157
|
validateHideError(value) {
|
|
@@ -6180,12 +6191,6 @@ class InputController extends ControlledInputController {
|
|
|
6180
6191
|
});
|
|
6181
6192
|
}
|
|
6182
6193
|
validateMsg(value) {
|
|
6183
|
-
if (value === undefined) {
|
|
6184
|
-
value = {
|
|
6185
|
-
_description: '',
|
|
6186
|
-
_type: 'error',
|
|
6187
|
-
};
|
|
6188
|
-
}
|
|
6189
6194
|
validateMsg(this.component, value);
|
|
6190
6195
|
}
|
|
6191
6196
|
validateOn(value) {
|
|
@@ -6215,7 +6220,9 @@ class InputController extends ControlledInputController {
|
|
|
6215
6220
|
this.validateAccessKey(this.component._accessKey);
|
|
6216
6221
|
this.validateAdjustHeight(this.component._adjustHeight);
|
|
6217
6222
|
this.validateError(this.component._error);
|
|
6218
|
-
|
|
6223
|
+
if (this.component._msg) {
|
|
6224
|
+
this.validateMsg(this.component._msg);
|
|
6225
|
+
}
|
|
6219
6226
|
this.validateDisabled(this.component._disabled);
|
|
6220
6227
|
this.validateHideError(this.component._hideError);
|
|
6221
6228
|
this.validateHideLabel(this.component._hideLabel);
|
|
@@ -6455,18 +6462,18 @@ class KolCombobox {
|
|
|
6455
6462
|
render() {
|
|
6456
6463
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
6457
6464
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
6458
|
-
return (hAsync(Host, { key: 'c3278c2069dbca97941ec443ad0facc36db203d8', class: "kol-combobox" }, hAsync("div", { key: '248c0d3e8d08db48834a704a3c5cf2178a92730d', class: clsx('combobox', this.state._disabled && 'combobox--disabled') }, hAsync(KolInputTag, { key: '5d8af20e02c638b8f631bb9ebef6bbefcd035f45', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'bdb1fc5448a1b2c2b728fe52e3044507fb12720e', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '7bf99311858263462241bee3bf5d024ba194f5e9', slot: "input" }, hAsync("div", { key: '9d3b73ddbfed9e8326c6b99d141acaf27dbba58f', class: "combobox__group" }, hAsync("input", Object.assign({ key: '
|
|
6465
|
+
return (hAsync(Host, { key: 'c3278c2069dbca97941ec443ad0facc36db203d8', class: "kol-combobox" }, hAsync("div", { key: '248c0d3e8d08db48834a704a3c5cf2178a92730d', class: clsx('combobox', this.state._disabled && 'combobox--disabled') }, hAsync(KolInputTag, { key: '5d8af20e02c638b8f631bb9ebef6bbefcd035f45', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'bdb1fc5448a1b2c2b728fe52e3044507fb12720e', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '7bf99311858263462241bee3bf5d024ba194f5e9', slot: "input" }, hAsync("div", { key: '9d3b73ddbfed9e8326c6b99d141acaf27dbba58f', class: "combobox__group" }, hAsync("input", Object.assign({ key: 'a1d739b73b806459f28b9b44c795d383545d23c9', ref: this.catchRef, class: "combobox__input", type: "text", role: "combobox", "aria-autocomplete": "both", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-controls": "listbox", value: this.state._value, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-labelledby": this.state._id, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onFocus: (event) => {
|
|
6459
6466
|
this.controller.onFacade.onFocus(event);
|
|
6460
6467
|
this.inputHasFocus = true;
|
|
6461
6468
|
}, onBlur: (event) => {
|
|
6462
6469
|
this.controller.onFacade.onBlur(event);
|
|
6463
6470
|
this.inputHasFocus = false;
|
|
6464
|
-
}, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder })), hAsync("button", { key: '
|
|
6471
|
+
}, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder })), hAsync("button", { key: '8a224c4f264cae4581cc66adec944460feaf89c6', tabindex: "-1", class: "combobox__icon", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '622583975eb2d9a0f3dbb4d72d3eb1f421a3d5a1', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: '8e7e8cd1f3e1cbcd99faf4b0060b108c85faefcc', role: "listbox", class: clsx('combobox__listbox', this.blockSuggestionMouseOver && 'combobox__listbox--cursor-hidden'), onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
|
|
6465
6472
|
this._filteredSuggestions.length > 0 &&
|
|
6466
6473
|
this._filteredSuggestions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
|
|
6467
6474
|
if (el)
|
|
6468
6475
|
this.refSuggestions[index] = el;
|
|
6469
|
-
}, "data-index": index, tabIndex: -1, role: "option", "aria-selected": this.state._value === option, onClick: (e) => {
|
|
6476
|
+
}, "data-index": index, tabIndex: -1, role: "option", "aria-selected": this.state._value === option ? 'true' : undefined, onClick: (e) => {
|
|
6470
6477
|
this.selectOption(e, option);
|
|
6471
6478
|
this.toggleListbox();
|
|
6472
6479
|
}, onMouseOver: () => {
|
|
@@ -7846,7 +7853,7 @@ class KolInputColor {
|
|
|
7846
7853
|
return (hAsync(Host, { key: '267d32979240084675613c62100026e9c887ec99', class: "kol-input-color" }, hAsync(KolInputTag, { key: '9b0bb20397e411dca2d205beef02ce115a60977f', class: {
|
|
7847
7854
|
color: true,
|
|
7848
7855
|
'hide-label': !!this.state._hideLabel,
|
|
7849
|
-
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _hideError: this.state._hideError, _id: this.state._id, _label: this.state._label, _shortKey: this.state._shortKey, _suggestions: this.state._suggestions, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '7f0501edad65f345d2c3a6641093db2cdf5c0e63', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'f1318bbdd622361e3b819bb90921079dbfc0575a', slot: "input" }, hAsync("input", Object.assign({ key: '
|
|
7856
|
+
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _hideError: this.state._hideError, _id: this.state._id, _label: this.state._label, _shortKey: this.state._shortKey, _suggestions: this.state._suggestions, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '7f0501edad65f345d2c3a6641093db2cdf5c0e63', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'f1318bbdd622361e3b819bb90921079dbfc0575a', slot: "input" }, hAsync("input", Object.assign({ key: 'fcf10809a84c0d1c7e276480d6ccf38f85b8e261', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, name: this.state._name, slot: "input", type: "color", value: this.state._value }, this.controller.onFacade, { onFocus: (event) => {
|
|
7850
7857
|
this.controller.onFacade.onFocus(event);
|
|
7851
7858
|
this.inputHasFocus = true;
|
|
7852
7859
|
}, onBlur: (event) => {
|
|
@@ -8222,7 +8229,7 @@ class KolInputDate {
|
|
|
8222
8229
|
return (hAsync(Host, { key: '023c36b654230fa048f8a42c481af8d66d719ff2', class: { 'kol-input-date': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: '8c62e80c2fb1d5d7556abf81c096973cb689c431', class: {
|
|
8223
8230
|
[this.state._type]: true,
|
|
8224
8231
|
'hide-label': !!this.state._hideLabel,
|
|
8225
|
-
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '5ddac8288007ae72d9a2c9d4232454fcf8ced485', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '93501ba3e4b31203b9eaa8710e00052a4a44b4f8', slot: "input" }, hAsync("input", Object.assign({ key: '
|
|
8232
|
+
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '5ddac8288007ae72d9a2c9d4232454fcf8ced485', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '93501ba3e4b31203b9eaa8710e00052a4a44b4f8', slot: "input" }, hAsync("input", Object.assign({ key: '975399701d3067bfaf1b273d0758dd2035730561', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, step: this.state._step, type: this.state._type, value: this.state._value || undefined }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onBlur: (event) => {
|
|
8226
8233
|
this.controller.onFacade.onBlur(event);
|
|
8227
8234
|
this.inputHasFocus = false;
|
|
8228
8235
|
}, onFocus: (event) => {
|
|
@@ -8563,13 +8570,16 @@ class InputTextController extends InputTextEmailController {
|
|
|
8563
8570
|
this.hasError = false;
|
|
8564
8571
|
this.component = component;
|
|
8565
8572
|
}
|
|
8573
|
+
validateSpellCheck(value) {
|
|
8574
|
+
validateSpellCheck(this.component, value);
|
|
8575
|
+
}
|
|
8566
8576
|
validateType(value) {
|
|
8567
8577
|
watchValidator(this.component, '_type', (value) => typeof value === 'string' && inputTextTypeOptions.includes(value), new Set([`String {${inputTextTypeOptions.join(', ')}`]), value);
|
|
8568
8578
|
}
|
|
8569
8579
|
componentWillLoad() {
|
|
8570
8580
|
super.componentWillLoad();
|
|
8581
|
+
this.validateSpellCheck(this.component._spellCheck);
|
|
8571
8582
|
this.validateType(this.component._type);
|
|
8572
|
-
this.validateHasCounter(this.component._hasCounter);
|
|
8573
8583
|
}
|
|
8574
8584
|
}
|
|
8575
8585
|
|
|
@@ -8609,7 +8619,7 @@ class KolInputEmail {
|
|
|
8609
8619
|
return (hAsync(Host, { key: '0a6dae92f7eceb1477c24f41f975e5554cf88ea9', class: {
|
|
8610
8620
|
'kol-input-email': true,
|
|
8611
8621
|
'has-value': this.state._hasValue,
|
|
8612
|
-
} }, hAsync(KolInputTag, { key: '0924c898848ac3aef5f738761bd3b62a681548eb', class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'd64b8718e6f2e5bd518601ecee7617249e063dbe', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '636e58b8611da6aaf134e94ead11934406bc44b4', slot: "input" }, hAsync("input", Object.assign({ key: '
|
|
8622
|
+
} }, hAsync(KolInputTag, { key: '0924c898848ac3aef5f738761bd3b62a681548eb', class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'd64b8718e6f2e5bd518601ecee7617249e063dbe', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '636e58b8611da6aaf134e94ead11934406bc44b4', slot: "input" }, hAsync("input", Object.assign({ key: '395b8ac51cb57f363548891fa6e0d49de33cbc17', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, multiple: this.state._multiple, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, type: "email", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput, onFocus: (event) => {
|
|
8613
8623
|
this.controller.onFacade.onFocus(event);
|
|
8614
8624
|
this.inputHasFocus = true;
|
|
8615
8625
|
}, onBlur: (event) => {
|
|
@@ -8899,7 +8909,7 @@ class KolInputFile {
|
|
|
8899
8909
|
return (hAsync(Host, { key: 'e5a5bf2cb09d060fa8558b234e03a8a3772ab394', class: "kol-input-file" }, hAsync(KolInputTag, { key: '306dd041fd374663109d6e0e1354d3e334dd3652', class: {
|
|
8900
8910
|
file: true,
|
|
8901
8911
|
'hide-label': !!this.state._hideLabel,
|
|
8902
|
-
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '943463859848736c8d2c43a3a02de8e99c660904', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'f0aa210f2d890e689994256cd87321f484162179', slot: "input" }, hAsync("input", Object.assign({ key: '
|
|
8912
|
+
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '943463859848736c8d2c43a3a02de8e99c660904', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'f0aa210f2d890e689994256cd87321f484162179', slot: "input" }, hAsync("input", Object.assign({ key: 'ae3ed46e21125c7c77335e8248882c0d6b84be79', ref: this.catchRef, title: "", accept: this.state._accept, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, type: "file", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput, onFocus: (event) => {
|
|
8903
8913
|
this.controller.onFacade.onFocus(event);
|
|
8904
8914
|
this.inputHasFocus = true;
|
|
8905
8915
|
}, onBlur: (event) => {
|
|
@@ -9207,7 +9217,7 @@ class KolInputNumber {
|
|
|
9207
9217
|
} }, hAsync(KolInputTag, { key: 'cca3c8727c315de0af6d0bfb46476b0ece3a590c', class: {
|
|
9208
9218
|
number: true,
|
|
9209
9219
|
'hide-label': !!this.state._hideLabel,
|
|
9210
|
-
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '77e22ae9678676a8f3db1a4c31ccf445af311d75', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '6b717a3b135d57ffaccee69534077169ef8ba3f6', slot: "input" }, hAsync("input", Object.assign({ key: '
|
|
9220
|
+
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '77e22ae9678676a8f3db1a4c31ccf445af311d75', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '6b717a3b135d57ffaccee69534077169ef8ba3f6', slot: "input" }, hAsync("input", Object.assign({ key: 'ec0c34b9fd6bb3da27f94541903201599d841ff5', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, placeholder: this.state._placeholder, step: this.state._step, type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onFocus: (event) => {
|
|
9211
9221
|
this.controller.onFacade.onFocus(event);
|
|
9212
9222
|
this.inputHasFocus = true;
|
|
9213
9223
|
}, onBlur: (event) => {
|
|
@@ -9458,7 +9468,6 @@ class KolInputPassword {
|
|
|
9458
9468
|
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
9459
9469
|
}
|
|
9460
9470
|
render() {
|
|
9461
|
-
var _a;
|
|
9462
9471
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
9463
9472
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
9464
9473
|
return (hAsync(Host, { key: 'e4bbac1ce3dd4e5d3f22168588a8932403474775', class: {
|
|
@@ -9467,17 +9476,17 @@ class KolInputPassword {
|
|
|
9467
9476
|
} }, hAsync(KolInputTag, { key: 'ea8e123c738e56d384e323e8896bae2d46fb39df', class: {
|
|
9468
9477
|
'hide-label': !!this.state._hideLabel,
|
|
9469
9478
|
password: true,
|
|
9470
|
-
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '8b3ea92e78b33d8e2d715cd175db73d783f9dc29', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'a531257549c04c2787ce78511af4cb50e3d4013e', slot: "input" }, hAsync("input", Object.assign({ key: '
|
|
9479
|
+
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '8b3ea92e78b33d8e2d715cd175db73d783f9dc29', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'a531257549c04c2787ce78511af4cb50e3d4013e', slot: "input" }, hAsync("input", Object.assign({ key: '84bf423a5e3ee87cdf094124b064869f020b17a3', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, type: this._passwordVisible ? 'text' : 'password', value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput, onFocus: (event) => {
|
|
9471
9480
|
this.controller.onFacade.onFocus(event);
|
|
9472
9481
|
this.inputHasFocus = true;
|
|
9473
9482
|
}, onBlur: (event) => {
|
|
9474
9483
|
this.controller.onFacade.onBlur(event);
|
|
9475
9484
|
this.inputHasFocus = false;
|
|
9476
|
-
} })), this._variant === 'visibility-toggle'
|
|
9485
|
+
} })), this._variant === 'visibility-toggle' ? (hAsync(KolButtonWcTag, { class: "password-toggle-button", _label: this._passwordVisible ? translate('kol-hide-password') : translate('kol-show-password'), _variant: "ghost", _disabled: this._disabled, _on: {
|
|
9477
9486
|
onClick: () => {
|
|
9478
9487
|
this._passwordVisible = !this._passwordVisible;
|
|
9479
9488
|
},
|
|
9480
|
-
}, _hideLabel: true, _icons: this._passwordVisible ? 'codicon codicon-eye-closed' : 'codicon codicon-eye-watch' })) :
|
|
9489
|
+
}, _hideLabel: true, _icons: this._passwordVisible ? 'codicon codicon-eye-closed' : 'codicon codicon-eye-watch' })) : null))));
|
|
9481
9490
|
}
|
|
9482
9491
|
constructor(hostRef) {
|
|
9483
9492
|
registerInstance(this, hostRef);
|
|
@@ -10051,20 +10060,20 @@ class KolInputRange {
|
|
|
10051
10060
|
'hide-label': !!this.state._hideLabel,
|
|
10052
10061
|
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '5ff97f4eadb9d0268a86336bb1ec3c33220e9448', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '9caa68963d809d85651a3711d6e00750c02012cf', slot: "input" }, hAsync("div", { key: '707405cdaa4fa35c2202af6566c00b5b18176a4a', class: "inputs-wrapper", style: {
|
|
10053
10062
|
'--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',
|
|
10054
|
-
} }, hAsync("input", Object.assign({ key: '
|
|
10063
|
+
} }, hAsync("input", Object.assign({ key: '086f4e66a08820af1d83e352ace068d00f6b77c3', ref: this.catchInputRangeRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-hidden": "true", autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-range` : undefined, step: this.state._step, tabIndex: -1, type: "range", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onFocus: (event) => {
|
|
10055
10064
|
this.controller.onFacade.onFocus(event);
|
|
10056
10065
|
this.inputHasFocus = true;
|
|
10057
10066
|
}, onBlur: (event) => {
|
|
10058
10067
|
this.controller.onFacade.onBlur(event);
|
|
10059
10068
|
this.inputHasFocus = false;
|
|
10060
|
-
} })), hAsync("input", Object.assign({ key: '
|
|
10069
|
+
} })), hAsync("input", Object.assign({ key: '044b5512f8a5f38ff8042408a1e40a7e042a93a9', ref: this.catchInputNumberRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-number` : undefined, step: this.state._step, type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onChange: this.onChange, onFocus: (event) => {
|
|
10061
10070
|
this.controller.onFacade.onFocus(event);
|
|
10062
10071
|
this.inputHasFocus = true;
|
|
10063
10072
|
}, onBlur: (event) => {
|
|
10064
10073
|
this.controller.onFacade.onBlur(event);
|
|
10065
10074
|
this.inputHasFocus = false;
|
|
10066
10075
|
} }))), hasSuggestions && [
|
|
10067
|
-
hAsync("datalist", { key: '
|
|
10076
|
+
hAsync("datalist", { key: '9ac1ec64cf00ea72f0df8562b5951693c77953f1', id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
|
|
10068
10077
|
]))));
|
|
10069
10078
|
}
|
|
10070
10079
|
constructor(hostRef) {
|
|
@@ -10302,13 +10311,13 @@ class KolInputText {
|
|
|
10302
10311
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
10303
10312
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
10304
10313
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
10305
|
-
return (hAsync(Host, { key: '
|
|
10314
|
+
return (hAsync(Host, { key: 'dfff639f5219d9a6b70417050414ae1114c3e426', class: {
|
|
10306
10315
|
'has-value': this.state._hasValue,
|
|
10307
10316
|
'kol-input-text': true,
|
|
10308
|
-
} }, hAsync(KolInputTag, { key: '
|
|
10317
|
+
} }, hAsync(KolInputTag, { key: 'b0b460bd253ce8e6b7b0c64167cf7b04914aa7ce', class: {
|
|
10309
10318
|
[this.state._type]: true,
|
|
10310
10319
|
'hide-label': !!this.state._hideLabel,
|
|
10311
|
-
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _suggestions: this.state._suggestions, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '
|
|
10320
|
+
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _suggestions: this.state._suggestions, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '9fa94f23db0961dd372863f6c4f32ad1a63c5152', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'a7d63ed3ba033b473eb7b7e22a24eabce9b6e8c2', slot: "input" }, hAsync("input", Object.assign({ key: 'dfc93edf65abe84c68878643827eca0ab0f505ba', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: this.state._spellCheck, type: this.state._type, value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput, onKeyDown: this.onKeyDown, onFocus: (event) => {
|
|
10312
10321
|
this.controller.onFacade.onFocus(event);
|
|
10313
10322
|
this.inputHasFocus = true;
|
|
10314
10323
|
}, onBlur: (event) => {
|
|
@@ -10361,6 +10370,7 @@ class KolInputText {
|
|
|
10361
10370
|
this._readOnly = false;
|
|
10362
10371
|
this._required = false;
|
|
10363
10372
|
this._shortKey = undefined;
|
|
10373
|
+
this._spellCheck = undefined;
|
|
10364
10374
|
this._suggestions = undefined;
|
|
10365
10375
|
this._smartButton = undefined;
|
|
10366
10376
|
this._syncValueBySelector = undefined;
|
|
@@ -10451,6 +10461,9 @@ class KolInputText {
|
|
|
10451
10461
|
validateShortKey(value) {
|
|
10452
10462
|
this.controller.validateShortKey(value);
|
|
10453
10463
|
}
|
|
10464
|
+
validateSpellCheck(value) {
|
|
10465
|
+
this.controller.validateSpellCheck(value);
|
|
10466
|
+
}
|
|
10454
10467
|
validateSuggestions(value) {
|
|
10455
10468
|
this.controller.validateSuggestions(value);
|
|
10456
10469
|
}
|
|
@@ -10504,6 +10517,7 @@ class KolInputText {
|
|
|
10504
10517
|
"_readOnly": ["validateReadOnly"],
|
|
10505
10518
|
"_required": ["validateRequired"],
|
|
10506
10519
|
"_shortKey": ["validateShortKey"],
|
|
10520
|
+
"_spellCheck": ["validateSpellCheck"],
|
|
10507
10521
|
"_suggestions": ["validateSuggestions"],
|
|
10508
10522
|
"_smartButton": ["validateSmartButton"],
|
|
10509
10523
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
@@ -10540,6 +10554,7 @@ class KolInputText {
|
|
|
10540
10554
|
"_readOnly": [4, "_read-only"],
|
|
10541
10555
|
"_required": [4],
|
|
10542
10556
|
"_shortKey": [1, "_short-key"],
|
|
10557
|
+
"_spellCheck": [4, "_spell-check"],
|
|
10543
10558
|
"_suggestions": [1],
|
|
10544
10559
|
"_smartButton": [1, "_smart-button"],
|
|
10545
10560
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
@@ -10598,28 +10613,27 @@ class KolInputWc {
|
|
|
10598
10613
|
}
|
|
10599
10614
|
render() {
|
|
10600
10615
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
10601
|
-
const
|
|
10602
|
-
const
|
|
10603
|
-
const showFormFieldMsg = Boolean(hasError || (((_c = this._msg) === null || _c === void 0 ? void 0 : _c._type) !== 'error' && ((_d = this._msg) === null || _d === void 0 ? void 0 : _d._description)));
|
|
10616
|
+
const hasValidMsg = typeof this._msg === 'object' && this._msg !== null && typeof ((_a = this._msg) === null || _a === void 0 ? void 0 : _a._description) === 'string' && ((_b = this._msg) === null || _b === void 0 ? void 0 : _b._description.length) > 0;
|
|
10617
|
+
const showMsg = hasValidMsg && (this._touched === true || ((_c = this._msg) === null || _c === void 0 ? void 0 : _c._type) !== 'error');
|
|
10604
10618
|
const hasExpertSlot = showExpertSlot(this._label);
|
|
10605
10619
|
const hasHint = typeof this._hint === 'string' && this._hint.length > 0;
|
|
10606
10620
|
const useTooltopInsteadOfLabel = !hasExpertSlot && this._hideLabel;
|
|
10607
|
-
return (hAsync(Host, { key: '
|
|
10621
|
+
return (hAsync(Host, { key: 'f387b8c961abba887df0af3acdc992fdc780bf67', class: clsx('kol-input', this.getModifierClassNameByMsgType(showMsg), {
|
|
10608
10622
|
disabled: this._disabled === true,
|
|
10609
|
-
error:
|
|
10623
|
+
[((_d = this._msg) === null || _d === void 0 ? void 0 : _d._type) || 'error']: showMsg === true,
|
|
10610
10624
|
'read-only': this._readOnly === true,
|
|
10611
10625
|
required: this._required === true,
|
|
10612
10626
|
touched: this._touched === true,
|
|
10613
10627
|
'hidden-error': this._hideError === true,
|
|
10614
|
-
}) }, hAsync("label", { key: '
|
|
10628
|
+
}) }, hAsync("label", { key: '46d5a787dc011c63d78b23f5041d3bddd4bf35b9', class: "input-label", id: !useTooltopInsteadOfLabel ? `${this._id}-label` : undefined, hidden: useTooltopInsteadOfLabel, htmlFor: this._id }, hAsync("span", { key: 'd704939fe7f625fa71fcced90cfc57ad88f9d3f5', class: "input-label-span" }, hAsync("slot", { key: '717a440a4755fa1cc878ccc697a2339a236cc2ca', name: "label" }))), hasHint && (hAsync("span", { key: 'cf2a32a4850aa36c47640044ee8131cd039437f3', class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { key: '908ad6c86b9f897a203babfa6a647482fd963ee7', class: {
|
|
10615
10629
|
input: true,
|
|
10616
10630
|
'icon-left': typeof ((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) === 'object',
|
|
10617
10631
|
'icon-right': typeof ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) === 'object',
|
|
10618
|
-
} }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: '
|
|
10632
|
+
} }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: '8d34322e538ef59f93ea0d91c18865c09acdc806', _label: "", _icons: ((_h = this._icons) === null || _h === void 0 ? void 0 : _h.left).icon, style: this.getIconStyles((_j = this._icons) === null || _j === void 0 ? void 0 : _j.left) })), hAsync("div", { key: '63e0601882b3b4708004514ee16eea9d10eaa79e', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { key: '90e62c7fd3205e54abeaf277ff6cb84cc9f808e2', _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_k = this._icons) === null || _k === void 0 ? void 0 : _k.right) && (hAsync(KolIconTag, { key: '78820371cd0eea944bba2249fa206dfa1f7ea9a8', _label: "", _icons: ((_l = this._icons) === null || _l === void 0 ? void 0 : _l.right).icon, style: this.getIconStyles((_m = this._icons) === null || _m === void 0 ? void 0 : _m.right) }))), useTooltopInsteadOfLabel && (hAsync(KolTooltipWcTag, { key: '23f8131f06b0ade72a2ac6de4bc45d87c537ecf8', "aria-hidden": "true", class: "input-tooltip", _badgeText: this._accessKey || this._shortKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), showMsg && hAsync(KolFormFieldMsgFc, { key: 'd7913257b81e5b0ad00da22c589cf22e31ba809f', _alert: this._alert, _hideError: this._hideError, _msg: this._msg, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { key: '3d900634935d030abd1d25b62bce6872989488b6', id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync("span", { key: '72ffb636b35c38cae343fda5e00ad2726d23009c', class: "counter", "aria-atomic": "true", "aria-live": "polite", "data-testid": "input-counter" }, this._currentLength, this._maxLength && (hAsync(Fragment, null, hAsync("span", { key: '5316e7ddca828a22191faabf95d762261cd3e7e0', "aria-label": translate('kol-of'), role: "img" }, "/"), this._maxLength)), ' ', hAsync("span", { key: '2ec4c8bb02a35daffbea7a9d58d15a5e487b9652' }, translate('kol-characters'))))));
|
|
10619
10633
|
}
|
|
10620
|
-
getModifierClassNameByMsgType() {
|
|
10634
|
+
getModifierClassNameByMsgType(showMsg) {
|
|
10621
10635
|
var _a, _b;
|
|
10622
|
-
if ((_a = this._msg) === null || _a === void 0 ? void 0 : _a._type) {
|
|
10636
|
+
if (showMsg && ((_a = this._msg) === null || _a === void 0 ? void 0 : _a._type)) {
|
|
10623
10637
|
return {
|
|
10624
10638
|
default: 'msg-type-default',
|
|
10625
10639
|
info: 'msg-type-info',
|
|
@@ -14573,7 +14587,7 @@ class KolSelect {
|
|
|
14573
14587
|
form: this.host,
|
|
14574
14588
|
ref: this.selectRef,
|
|
14575
14589
|
});
|
|
14576
|
-
} }, hAsync("input", { key: '146ff341cfd1297a88aa014c307ba776807d1afd', type: "submit", hidden: true }), hAsync("select", Object.assign({ key: '
|
|
14590
|
+
} }, hAsync("input", { key: '146ff341cfd1297a88aa014c307ba776807d1afd', type: "submit", hidden: true }), hAsync("select", Object.assign({ key: '666ff4c9635d4779f06df8f1ab0bae0163fa449f', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onFocus: (event) => {
|
|
14577
14591
|
this.controller.onFacade.onFocus(event);
|
|
14578
14592
|
this.inputHasFocus = true;
|
|
14579
14593
|
}, onBlur: (event) => {
|
|
@@ -14928,20 +14942,20 @@ class KolSingleSelect {
|
|
|
14928
14942
|
render() {
|
|
14929
14943
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
14930
14944
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
14931
|
-
return (hAsync(Host, { key: 'ec78d6ba606de5a637558504d9b8d389991bd5d1', class: "kol-single-select" }, hAsync("div", { key: 'ba04220b3ac54ff6b8497948854df6d884ec152c', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputTag, { key: 'c5ba4a1ee8facce73b47cdece06df4623b718be8', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, role: `presentation` }, hAsync("span", { key: '103578ebf9a841970388a5c3969218f981897e6c', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '191bf5b70972f84dc1359082b6538617986a0383', slot: "input" }, hAsync("div", { key: '50d8b9e371af7679ae853d2001b95c9bb8383398', class: "single-select__group" }, hAsync("input", Object.assign({ key: '
|
|
14945
|
+
return (hAsync(Host, { key: 'ec78d6ba606de5a637558504d9b8d389991bd5d1', class: "kol-single-select" }, hAsync("div", { key: 'ba04220b3ac54ff6b8497948854df6d884ec152c', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputTag, { key: 'c5ba4a1ee8facce73b47cdece06df4623b718be8', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, role: `presentation` }, hAsync("span", { key: '103578ebf9a841970388a5c3969218f981897e6c', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '191bf5b70972f84dc1359082b6538617986a0383', slot: "input" }, hAsync("div", { key: '50d8b9e371af7679ae853d2001b95c9bb8383398', class: "single-select__group" }, hAsync("input", Object.assign({ key: '46d194911f251412811fc2f41989aa8a48f98c36', ref: this.catchRef, class: "single-select__input", type: "text", "aria-autocomplete": "both", "aria-controls": "listbox", value: this._inputValue, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onClick: this.toggleListbox.bind(this), onFocus: (event) => {
|
|
14932
14946
|
this.controller.onFacade.onFocus(event);
|
|
14933
14947
|
this.inputHasFocus = true;
|
|
14934
14948
|
}, onBlur: (event) => {
|
|
14935
14949
|
this.controller.onFacade.onBlur(event);
|
|
14936
14950
|
this.inputHasFocus = false;
|
|
14937
|
-
}, placeholder: this.state._placeholder })), this._inputValue && (hAsync(KolIconTag, { key: '
|
|
14951
|
+
}, placeholder: this.state._placeholder })), this._inputValue && (hAsync(KolIconTag, { key: '8cff7aaaa6727a1cface8ba6ff14b2f46c4f379d', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
|
|
14938
14952
|
var _a;
|
|
14939
14953
|
this.clearSelection();
|
|
14940
14954
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
14941
|
-
}, class: "single-select__delete" })), hAsync("button", { key: '
|
|
14955
|
+
}, class: "single-select__delete" })), hAsync("button", { key: '6f04499addadb0afb347c4c9f59d9f96b5e949fd', tabindex: "-1", class: "single-select__button", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: 'b90af9338c0039ecd8802aba4e0b9a5a1b43437e', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: '2625d07e9fabd15eb99ab6bd3321259d9f9f3720', role: "listbox", class: clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden'), onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
|
|
14942
14956
|
if (el)
|
|
14943
14957
|
this.refOptions[index] = el;
|
|
14944
|
-
}, tabIndex: -1, role: "option", "aria-selected": this.state._value === option.value, onClick: (event) => {
|
|
14958
|
+
}, tabIndex: -1, role: "option", "aria-selected": this.state._value === option.value ? 'true' : undefined, onClick: (event) => {
|
|
14945
14959
|
var _a;
|
|
14946
14960
|
this.selectOption(event, option);
|
|
14947
14961
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
@@ -24622,7 +24636,7 @@ class KolTableStateless {
|
|
|
24622
24636
|
let max = 0;
|
|
24623
24637
|
horizontalHeaders.forEach((row) => {
|
|
24624
24638
|
let count = 0;
|
|
24625
|
-
row.forEach((col) => { var _a; return (count += (_a = col.colSpan) !== null && _a !== void 0 ? _a : 1); });
|
|
24639
|
+
Array.isArray(row) && row.forEach((col) => { var _a; return (count += (_a = col.colSpan) !== null && _a !== void 0 ? _a : 1); });
|
|
24626
24640
|
if (max < count) {
|
|
24627
24641
|
max = count;
|
|
24628
24642
|
}
|
|
@@ -24637,7 +24651,7 @@ class KolTableStateless {
|
|
|
24637
24651
|
let max = 0;
|
|
24638
24652
|
verticalHeaders.forEach((col) => {
|
|
24639
24653
|
let count = 0;
|
|
24640
|
-
col.forEach((row) => { var _a; return (count += (_a = row.rowSpan) !== null && _a !== void 0 ? _a : 1); });
|
|
24654
|
+
Array.isArray(col) && col.forEach((row) => { var _a; return (count += (_a = row.rowSpan) !== null && _a !== void 0 ? _a : 1); });
|
|
24641
24655
|
if (max < count) {
|
|
24642
24656
|
max = count;
|
|
24643
24657
|
}
|
|
@@ -24650,34 +24664,34 @@ class KolTableStateless {
|
|
|
24650
24664
|
}
|
|
24651
24665
|
return max;
|
|
24652
24666
|
}
|
|
24653
|
-
|
|
24654
|
-
const
|
|
24667
|
+
getThePrimaryHeadersWithKeysIfExists(headers) {
|
|
24668
|
+
const primaryHeadersWithKeys = [];
|
|
24655
24669
|
headers.forEach((cells) => {
|
|
24656
24670
|
cells.forEach((cell) => {
|
|
24657
24671
|
if (typeof cell.key === 'string') {
|
|
24658
|
-
|
|
24672
|
+
primaryHeadersWithKeys.push(cell);
|
|
24659
24673
|
}
|
|
24660
24674
|
});
|
|
24661
24675
|
});
|
|
24662
|
-
return
|
|
24676
|
+
return primaryHeadersWithKeys;
|
|
24663
24677
|
}
|
|
24664
|
-
|
|
24678
|
+
getPrimaryHeaders(headers) {
|
|
24665
24679
|
var _a, _b;
|
|
24666
|
-
let
|
|
24680
|
+
let primaryHeadersWithKeys = this.getThePrimaryHeadersWithKeysIfExists((_a = headers.horizontal) !== null && _a !== void 0 ? _a : []);
|
|
24667
24681
|
this.horizontal = true;
|
|
24668
|
-
if (
|
|
24669
|
-
|
|
24670
|
-
if (
|
|
24682
|
+
if (primaryHeadersWithKeys.length === 0) {
|
|
24683
|
+
primaryHeadersWithKeys = this.getThePrimaryHeadersWithKeysIfExists((_b = headers.vertical) !== null && _b !== void 0 ? _b : []);
|
|
24684
|
+
if (primaryHeadersWithKeys.length > 0) {
|
|
24671
24685
|
this.horizontal = false;
|
|
24672
24686
|
}
|
|
24673
24687
|
}
|
|
24674
|
-
return
|
|
24688
|
+
return primaryHeadersWithKeys;
|
|
24675
24689
|
}
|
|
24676
24690
|
createDataField(data, headers, isFoot) {
|
|
24677
24691
|
var _a;
|
|
24678
24692
|
headers.horizontal = Array.isArray(headers === null || headers === void 0 ? void 0 : headers.horizontal) ? headers.horizontal : [];
|
|
24679
24693
|
headers.vertical = Array.isArray(headers === null || headers === void 0 ? void 0 : headers.vertical) ? headers.vertical : [];
|
|
24680
|
-
const primaryHeader = this.
|
|
24694
|
+
const primaryHeader = this.getPrimaryHeaders(headers);
|
|
24681
24695
|
const maxCols = this.getNumberOfCols(headers.horizontal, data);
|
|
24682
24696
|
let maxRows = this.getNumberOfRows(headers.vertical, data);
|
|
24683
24697
|
let startRow = 0;
|
|
@@ -24839,6 +24853,13 @@ class KolTableStateless {
|
|
|
24839
24853
|
}
|
|
24840
24854
|
} })), hAsync(KolTooltipWcTag, { "aria-hidden": "true", class: "input-tooltip", _align: "right", _id: `${translationKey}-label`, _label: label }))));
|
|
24841
24855
|
}
|
|
24856
|
+
renderHeaderTdCell() {
|
|
24857
|
+
return (hAsync(Fragment, null, Array.isArray(this.state._headerCells.horizontal) &&
|
|
24858
|
+
this.state._headerCells.horizontal.length > 0 &&
|
|
24859
|
+
Array.isArray(this.state._headerCells.vertical) &&
|
|
24860
|
+
this.state._headerCells.vertical.length > 0 &&
|
|
24861
|
+
Array.isArray(this.state._headerCells.horizontal) && (hAsync("td", { "aria-hidden": "true", colSpan: this.state._headerCells.vertical.length, rowSpan: this.state._headerCells.horizontal.length }))));
|
|
24862
|
+
}
|
|
24842
24863
|
renderHeadingCell(cell, rowIndex, colIndex, isVertical) {
|
|
24843
24864
|
let ariaSort = undefined;
|
|
24844
24865
|
let sortButtonIcon = 'codicon codicon-fold';
|
|
@@ -24870,9 +24891,11 @@ class KolTableStateless {
|
|
|
24870
24891
|
} })) : (cell.label)));
|
|
24871
24892
|
}
|
|
24872
24893
|
renderSpacer(variant, cellDefs) {
|
|
24873
|
-
var _a;
|
|
24874
|
-
const
|
|
24875
|
-
|
|
24894
|
+
var _a, _b;
|
|
24895
|
+
const verticalHeaderColpan = ((_a = this.state._headerCells.vertical) === null || _a === void 0 ? void 0 : _a.length) || 0;
|
|
24896
|
+
const colspan = (_b = cellDefs === null || cellDefs === void 0 ? void 0 : cellDefs[0]) === null || _b === void 0 ? void 0 : _b.reduce((acc, row) => acc + (row.colSpan || 1), 0);
|
|
24897
|
+
const selectionCell = this.state._selection ? 1 : 0;
|
|
24898
|
+
return (hAsync("tr", { "aria-hidden": "true", class: `${variant}-spacer` }, hAsync("td", { colSpan: verticalHeaderColpan + colspan + selectionCell })));
|
|
24876
24899
|
}
|
|
24877
24900
|
renderFoot() {
|
|
24878
24901
|
if (!this.state._dataFoot || this.state._dataFoot.length === 0) {
|
|
@@ -24887,28 +24910,29 @@ class KolTableStateless {
|
|
|
24887
24910
|
render() {
|
|
24888
24911
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
24889
24912
|
this.checkboxRefs = [];
|
|
24890
|
-
return (hAsync(Host, { key: '
|
|
24913
|
+
return (hAsync(Host, { key: '482e452bd3bd6dd800bd0bd277618d543b932511', class: "kol-table-stateless-wc" }, hAsync("div", { key: 'd237bc287eb2dbb4c423857807f4ce2aa079f4d4', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: 'a4f3435eb7f8ebb7bea738fded143d2fd5ee1261', style: {
|
|
24891
24914
|
minWidth: this.state._minWidth,
|
|
24892
|
-
} }, hAsync("div", { key: '
|
|
24893
|
-
this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(),
|
|
24894
|
-
|
|
24895
|
-
|
|
24896
|
-
|
|
24897
|
-
|
|
24898
|
-
|
|
24899
|
-
|
|
24900
|
-
|
|
24901
|
-
|
|
24902
|
-
|
|
24903
|
-
|
|
24904
|
-
|
|
24905
|
-
|
|
24906
|
-
|
|
24907
|
-
|
|
24908
|
-
|
|
24909
|
-
|
|
24915
|
+
} }, hAsync("div", { key: 'ad3995862452de82107201bca3cc1b0aadd0cf36', class: "focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: 'c18a326a251676d7abea34f20c47187461d91748', id: "caption" }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: '770b33b2bfd99cfb6693700cc77a919675101eb9' }, [
|
|
24916
|
+
this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) &&
|
|
24917
|
+
cols.map((cell, colIndex) => {
|
|
24918
|
+
if (cell.asTd === true) {
|
|
24919
|
+
return (hAsync("td", { key: `thead-${rowIndex}-${colIndex}-${cell.label}`, class: {
|
|
24920
|
+
[cell.textAlign]: typeof cell.textAlign === 'string' && cell.textAlign.length > 0,
|
|
24921
|
+
}, colSpan: cell.colSpan, rowSpan: cell.rowSpan, style: {
|
|
24922
|
+
textAlign: cell.textAlign,
|
|
24923
|
+
width: cell.width,
|
|
24924
|
+
}, ref: typeof cell.render === 'function'
|
|
24925
|
+
? (el) => {
|
|
24926
|
+
this.cellRender(cell, el);
|
|
24927
|
+
}
|
|
24928
|
+
: undefined }, typeof cell.render !== 'function' ? cell.label : ''));
|
|
24929
|
+
}
|
|
24930
|
+
else {
|
|
24931
|
+
return this.renderHeadingCell(cell, rowIndex, colIndex, false);
|
|
24932
|
+
}
|
|
24933
|
+
})))),
|
|
24910
24934
|
this.renderSpacer('head', this.state._headerCells.horizontal),
|
|
24911
|
-
])), hAsync("tbody", { key: '
|
|
24935
|
+
])), hAsync("tbody", { key: 'f0de4de3fd33fced22b3c29062357795409589be' }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
|
|
24912
24936
|
}
|
|
24913
24937
|
get host() { return getElement(this); }
|
|
24914
24938
|
static get watchers() { return {
|
|
@@ -25304,6 +25328,9 @@ class TextareaController extends InputIconController {
|
|
|
25304
25328
|
validateRows(value) {
|
|
25305
25329
|
validateRows(this.component, value);
|
|
25306
25330
|
}
|
|
25331
|
+
validateSpellCheck(value) {
|
|
25332
|
+
validateSpellCheck(this.component, value);
|
|
25333
|
+
}
|
|
25307
25334
|
validateValue(value) {
|
|
25308
25335
|
watchString(this.component, '_value', value, {
|
|
25309
25336
|
hooks: {
|
|
@@ -25321,6 +25348,7 @@ class TextareaController extends InputIconController {
|
|
|
25321
25348
|
this.validateResize(this.component._resize);
|
|
25322
25349
|
this.validateRequired(this.component._required);
|
|
25323
25350
|
this.validateRows(this.component._rows);
|
|
25351
|
+
this.validateSpellCheck(this.component._spellCheck);
|
|
25324
25352
|
this.validateValue(this.component._value);
|
|
25325
25353
|
}
|
|
25326
25354
|
}
|
|
@@ -25352,7 +25380,7 @@ class KolTextarea {
|
|
|
25352
25380
|
render() {
|
|
25353
25381
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
25354
25382
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
25355
|
-
return (hAsync(Host, { key: '
|
|
25383
|
+
return (hAsync(Host, { key: '9770edffb4be5cea8a71c9a4bd75f24b5102c5bf', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: '33005094032fe05acb36aa4fb6265400ebf94c92', class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'e061a13f3b3d7b111feb2a252f91f9a5a2696bd5', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '2b9c5e0fff5a6d27f044b5521277cb23ca0797b9', slot: "input" }, hAsync("textarea", Object.assign({ key: 'c03589fa5a0f9f26d71e8bc3d7c2af0990388968', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, rows: this.state._rows, placeholder: this.state._placeholder, spellcheck: this.state._spellCheck }, this.controller.onFacade, { onInput: this.onInput, onFocus: (event) => {
|
|
25356
25384
|
this.controller.onFacade.onFocus(event);
|
|
25357
25385
|
this.inputHasFocus = true;
|
|
25358
25386
|
}, onBlur: (event) => {
|
|
@@ -25398,6 +25426,7 @@ class KolTextarea {
|
|
|
25398
25426
|
this._required = false;
|
|
25399
25427
|
this._rows = undefined;
|
|
25400
25428
|
this._shortKey = undefined;
|
|
25429
|
+
this._spellCheck = undefined;
|
|
25401
25430
|
this._syncValueBySelector = undefined;
|
|
25402
25431
|
this._tabIndex = undefined;
|
|
25403
25432
|
this._tooltipAlign = 'top';
|
|
@@ -25490,6 +25519,9 @@ class KolTextarea {
|
|
|
25490
25519
|
validateShortKey(value) {
|
|
25491
25520
|
this.controller.validateShortKey(value);
|
|
25492
25521
|
}
|
|
25522
|
+
validateSpellCheck(value) {
|
|
25523
|
+
this.controller.validateSpellCheck(value);
|
|
25524
|
+
}
|
|
25493
25525
|
validateSyncValueBySelector(value) {
|
|
25494
25526
|
this.controller.validateSyncValueBySelector(value);
|
|
25495
25527
|
}
|
|
@@ -25545,6 +25577,7 @@ class KolTextarea {
|
|
|
25545
25577
|
"_required": ["validateRequired"],
|
|
25546
25578
|
"_rows": ["validateRows"],
|
|
25547
25579
|
"_shortKey": ["validateShortKey"],
|
|
25580
|
+
"_spellCheck": ["validateSpellCheck"],
|
|
25548
25581
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
25549
25582
|
"_tabIndex": ["validateTabIndex"],
|
|
25550
25583
|
"_touched": ["validateTouched"],
|
|
@@ -25579,6 +25612,7 @@ class KolTextarea {
|
|
|
25579
25612
|
"_required": [4],
|
|
25580
25613
|
"_rows": [1026],
|
|
25581
25614
|
"_shortKey": [1, "_short-key"],
|
|
25615
|
+
"_spellCheck": [4, "_spell-check"],
|
|
25582
25616
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
25583
25617
|
"_tabIndex": [2, "_tab-index"],
|
|
25584
25618
|
"_tooltipAlign": [1, "_tooltip-align"],
|