@public-ui/hydrate 2.2.13-rc.1 → 2.2.13-rc.2
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 +18 -14
- package/dist/index.mjs +18 -14
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -6509,13 +6509,13 @@ class KolCombobox {
|
|
|
6509
6509
|
render() {
|
|
6510
6510
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
6511
6511
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
6512
|
-
return (hAsync(Host, { key: 'cf7083a921cfc2e9d888e92475ec43b5ad0d976f', class: "kol-combobox" }, hAsync("div", { key: '917e314a61bedb601cf02437f7041c7fcbb54995', class: clsx('combobox', this.state._disabled && 'combobox--disabled') }, hAsync(KolInputTag, { key: '2ddc4e2327d66e32290ea22a8c051eedfdf543f3', _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: 'b598b5ed2c21fd212b231c79bf9ee2cff24b96cd', 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: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'a2ac90571622a9c093018ff83be3469f26d66592', slot: "input" }, hAsync("div", { key: '5eb0f614f2b433081181e29917398eeb6c358e3a', class: "combobox__group" }, hAsync("input", Object.assign({ key: '
|
|
6512
|
+
return (hAsync(Host, { key: 'cf7083a921cfc2e9d888e92475ec43b5ad0d976f', class: "kol-combobox" }, hAsync("div", { key: '917e314a61bedb601cf02437f7041c7fcbb54995', class: clsx('combobox', this.state._disabled && 'combobox--disabled') }, hAsync(KolInputTag, { key: '2ddc4e2327d66e32290ea22a8c051eedfdf543f3', _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: 'b598b5ed2c21fd212b231c79bf9ee2cff24b96cd', 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: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'a2ac90571622a9c093018ff83be3469f26d66592', slot: "input" }, hAsync("div", { key: '5eb0f614f2b433081181e29917398eeb6c358e3a', class: "combobox__group" }, hAsync("input", Object.assign({ key: '6d6d57e07299e5fbd4b64135ee1364087d1112e3', 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", autoComplete: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onFocus: (event) => {
|
|
6513
6513
|
this.controller.onFacade.onFocus(event);
|
|
6514
6514
|
this.inputHasFocus = true;
|
|
6515
6515
|
}, onBlur: (event) => {
|
|
6516
6516
|
this.controller.onFacade.onBlur(event);
|
|
6517
6517
|
this.inputHasFocus = false;
|
|
6518
|
-
}, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder })), hAsync("button", { key: '
|
|
6518
|
+
}, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder })), hAsync("button", { key: '7377de41e82a84d309e09cf962bc7a35b8edb7c9', tabindex: "-1", class: "combobox__icon", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '1b3210da573ae33e86e91c9d18c56c1f3b1ad255', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: '9f56e7ced7caadb47658754f04fed6779fad0fe6', role: "listbox", class: clsx('combobox__listbox', this.blockSuggestionMouseOver && 'combobox__listbox--cursor-hidden'), onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
|
|
6519
6519
|
this._filteredSuggestions.length > 0 &&
|
|
6520
6520
|
this._filteredSuggestions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
|
|
6521
6521
|
if (el)
|
|
@@ -7137,11 +7137,11 @@ class KolForm {
|
|
|
7137
7137
|
return (hAsync(KolAlertFc, { ref: this.setBlockElement, type: "error", variant: "card", label: translate('kol-error-list-message') }, hAsync("nav", { "aria-label": translate('kol-error-list') }, hAsync("ul", null, errorList === null || errorList === void 0 ? void 0 : errorList.map((error, index) => (hAsync("li", { key: index }, hAsync(KolLinkWcTag, { _href: "", _label: error.message, _on: { onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector)) : error.selector }, ref: index === 0 ? this.setFirstLinkElement : undefined }))))))));
|
|
7138
7138
|
}
|
|
7139
7139
|
renderFormElement() {
|
|
7140
|
-
return (hAsync("form", { method: "post", onSubmit: this.onSubmit, onReset: this.onReset,
|
|
7140
|
+
return (hAsync("form", { autoComplete: "off", method: "post", onSubmit: this.onSubmit, onReset: this.onReset, noValidate: true }, this.state._requiredText === true ? (hAsync("p", null, hAsync("div", { class: "mandatory-fields-hint" }, translate('kol-form-description')))) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (hAsync("p", null, hAsync("div", { class: "mandatory-fields-hint" }, this.state._requiredText))) : null, hAsync("slot", null)));
|
|
7141
7141
|
}
|
|
7142
7142
|
render() {
|
|
7143
7143
|
const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
|
|
7144
|
-
return (hAsync(Host, { key: '
|
|
7144
|
+
return (hAsync(Host, { key: 'f8faff3a737be164f14bc26a0efbf081399c73f0', class: "kol-form" }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
|
|
7145
7145
|
}
|
|
7146
7146
|
scrollToErrorList() {
|
|
7147
7147
|
var _a;
|
|
@@ -15587,9 +15587,13 @@ class KolSingleSelect {
|
|
|
15587
15587
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
15588
15588
|
}
|
|
15589
15589
|
onBlur() {
|
|
15590
|
-
var _a;
|
|
15591
|
-
|
|
15592
|
-
|
|
15590
|
+
var _a, _b, _c;
|
|
15591
|
+
const matchingOption = (_a = this.state._options) === null || _a === void 0 ? void 0 : _a.find((option) => { var _a, _b; return ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = this._inputValue) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
|
|
15592
|
+
if (matchingOption) {
|
|
15593
|
+
this.selectOption(matchingOption);
|
|
15594
|
+
}
|
|
15595
|
+
else {
|
|
15596
|
+
this._inputValue = (_c = (_b = this.state._options) === null || _b === void 0 ? void 0 : _b.find((option) => option.value === this._value)) === null || _c === void 0 ? void 0 : _c.label;
|
|
15593
15597
|
this._filteredOptions = [...this.state._options];
|
|
15594
15598
|
}
|
|
15595
15599
|
this._isOpen = false;
|
|
@@ -15600,13 +15604,13 @@ class KolSingleSelect {
|
|
|
15600
15604
|
return;
|
|
15601
15605
|
}
|
|
15602
15606
|
else {
|
|
15603
|
-
const emptyValue =
|
|
15607
|
+
const emptyValue = null;
|
|
15604
15608
|
this._focusedOptionIndex = -1;
|
|
15605
15609
|
this._value = emptyValue;
|
|
15606
|
-
this._inputValue =
|
|
15610
|
+
this._inputValue = '';
|
|
15607
15611
|
this._filteredOptions = [...this.state._options];
|
|
15608
|
-
this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: emptyValue } }), true, emptyValue);
|
|
15609
|
-
this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: emptyValue } }), emptyValue);
|
|
15612
|
+
this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: emptyValue } }), true, { value: emptyValue });
|
|
15613
|
+
this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: emptyValue } }), { value: emptyValue });
|
|
15610
15614
|
}
|
|
15611
15615
|
}
|
|
15612
15616
|
selectOption(option) {
|
|
@@ -15674,17 +15678,17 @@ class KolSingleSelect {
|
|
|
15674
15678
|
var _a;
|
|
15675
15679
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
15676
15680
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
15677
|
-
return (hAsync(Host, { key: '
|
|
15681
|
+
return (hAsync(Host, { key: 'cc1f3cfb10d9a89336dd37f635eb9494874206bd', class: "kol-single-select" }, hAsync("div", { key: '760f7abe608a369d289cf7a5728763cd74a9bc91', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputTag, { key: 'a61e64e8f57ae222c2ea6833ea6bd21c547a64c3', _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: 'ac6c289b2091cea9cadc3ebb588536cb0c721af0', 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: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'c22e2c4f84de347b5c295dc9e50f0ff9d14e251b', slot: "input" }, hAsync("div", { key: '89906c776e1b7b6b7c05b6b23c6987f28fb44b86', class: "single-select__group" }, hAsync("input", Object.assign({ key: '9cbe8cabf6b89a408292dcf1ed8717db2a4b971e', ref: this.catchRef, class: "single-select__input", "data-testid": "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", autoComplete: "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) => {
|
|
15678
15682
|
this.controller.onFacade.onFocus(event);
|
|
15679
15683
|
this.inputHasFocus = true;
|
|
15680
15684
|
}, onBlur: (event) => {
|
|
15681
15685
|
this.controller.onFacade.onBlur(event);
|
|
15682
15686
|
this.inputHasFocus = false;
|
|
15683
|
-
}, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: '
|
|
15687
|
+
}, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: 'bb693e6367410321d3039f1e51bd6e330906e713', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
|
|
15684
15688
|
var _a;
|
|
15685
15689
|
this.clearSelection();
|
|
15686
15690
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
15687
|
-
}, class: "single-select__delete" })), hAsync("button", { key: '
|
|
15691
|
+
}, class: "single-select__delete" })), hAsync("button", { key: 'baf27c00461f39ce7fa736f1ae67345c54a20387', tabindex: "-1", class: "single-select__button", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '03b9d8c1e091a389736fc5aa1c4dd3d101cbf53f', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: 'd5c7591ecdb8409f7cdcdb6f0ac78d088cc04a9a', role: "listbox", class: clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden'), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, 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) => {
|
|
15688
15692
|
if (el)
|
|
15689
15693
|
this.refOptions[index] = el;
|
|
15690
15694
|
}, tabIndex: -1, role: "option", "aria-selected": this._value === option.value ? 'true' : undefined, onClick: (event) => {
|
package/dist/index.mjs
CHANGED
|
@@ -6505,13 +6505,13 @@ class KolCombobox {
|
|
|
6505
6505
|
render() {
|
|
6506
6506
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
6507
6507
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
6508
|
-
return (hAsync(Host, { key: 'cf7083a921cfc2e9d888e92475ec43b5ad0d976f', class: "kol-combobox" }, hAsync("div", { key: '917e314a61bedb601cf02437f7041c7fcbb54995', class: clsx('combobox', this.state._disabled && 'combobox--disabled') }, hAsync(KolInputTag, { key: '2ddc4e2327d66e32290ea22a8c051eedfdf543f3', _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: 'b598b5ed2c21fd212b231c79bf9ee2cff24b96cd', 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: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'a2ac90571622a9c093018ff83be3469f26d66592', slot: "input" }, hAsync("div", { key: '5eb0f614f2b433081181e29917398eeb6c358e3a', class: "combobox__group" }, hAsync("input", Object.assign({ key: '
|
|
6508
|
+
return (hAsync(Host, { key: 'cf7083a921cfc2e9d888e92475ec43b5ad0d976f', class: "kol-combobox" }, hAsync("div", { key: '917e314a61bedb601cf02437f7041c7fcbb54995', class: clsx('combobox', this.state._disabled && 'combobox--disabled') }, hAsync(KolInputTag, { key: '2ddc4e2327d66e32290ea22a8c051eedfdf543f3', _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: 'b598b5ed2c21fd212b231c79bf9ee2cff24b96cd', 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: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'a2ac90571622a9c093018ff83be3469f26d66592', slot: "input" }, hAsync("div", { key: '5eb0f614f2b433081181e29917398eeb6c358e3a', class: "combobox__group" }, hAsync("input", Object.assign({ key: '6d6d57e07299e5fbd4b64135ee1364087d1112e3', 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", autoComplete: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onFocus: (event) => {
|
|
6509
6509
|
this.controller.onFacade.onFocus(event);
|
|
6510
6510
|
this.inputHasFocus = true;
|
|
6511
6511
|
}, onBlur: (event) => {
|
|
6512
6512
|
this.controller.onFacade.onBlur(event);
|
|
6513
6513
|
this.inputHasFocus = false;
|
|
6514
|
-
}, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder })), hAsync("button", { key: '
|
|
6514
|
+
}, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder })), hAsync("button", { key: '7377de41e82a84d309e09cf962bc7a35b8edb7c9', tabindex: "-1", class: "combobox__icon", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '1b3210da573ae33e86e91c9d18c56c1f3b1ad255', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: '9f56e7ced7caadb47658754f04fed6779fad0fe6', role: "listbox", class: clsx('combobox__listbox', this.blockSuggestionMouseOver && 'combobox__listbox--cursor-hidden'), onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
|
|
6515
6515
|
this._filteredSuggestions.length > 0 &&
|
|
6516
6516
|
this._filteredSuggestions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
|
|
6517
6517
|
if (el)
|
|
@@ -7133,11 +7133,11 @@ class KolForm {
|
|
|
7133
7133
|
return (hAsync(KolAlertFc, { ref: this.setBlockElement, type: "error", variant: "card", label: translate('kol-error-list-message') }, hAsync("nav", { "aria-label": translate('kol-error-list') }, hAsync("ul", null, errorList === null || errorList === void 0 ? void 0 : errorList.map((error, index) => (hAsync("li", { key: index }, hAsync(KolLinkWcTag, { _href: "", _label: error.message, _on: { onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector)) : error.selector }, ref: index === 0 ? this.setFirstLinkElement : undefined }))))))));
|
|
7134
7134
|
}
|
|
7135
7135
|
renderFormElement() {
|
|
7136
|
-
return (hAsync("form", { method: "post", onSubmit: this.onSubmit, onReset: this.onReset,
|
|
7136
|
+
return (hAsync("form", { autoComplete: "off", method: "post", onSubmit: this.onSubmit, onReset: this.onReset, noValidate: true }, this.state._requiredText === true ? (hAsync("p", null, hAsync("div", { class: "mandatory-fields-hint" }, translate('kol-form-description')))) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (hAsync("p", null, hAsync("div", { class: "mandatory-fields-hint" }, this.state._requiredText))) : null, hAsync("slot", null)));
|
|
7137
7137
|
}
|
|
7138
7138
|
render() {
|
|
7139
7139
|
const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
|
|
7140
|
-
return (hAsync(Host, { key: '
|
|
7140
|
+
return (hAsync(Host, { key: 'f8faff3a737be164f14bc26a0efbf081399c73f0', class: "kol-form" }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
|
|
7141
7141
|
}
|
|
7142
7142
|
scrollToErrorList() {
|
|
7143
7143
|
var _a;
|
|
@@ -15583,9 +15583,13 @@ class KolSingleSelect {
|
|
|
15583
15583
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
15584
15584
|
}
|
|
15585
15585
|
onBlur() {
|
|
15586
|
-
var _a;
|
|
15587
|
-
|
|
15588
|
-
|
|
15586
|
+
var _a, _b, _c;
|
|
15587
|
+
const matchingOption = (_a = this.state._options) === null || _a === void 0 ? void 0 : _a.find((option) => { var _a, _b; return ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = this._inputValue) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
|
|
15588
|
+
if (matchingOption) {
|
|
15589
|
+
this.selectOption(matchingOption);
|
|
15590
|
+
}
|
|
15591
|
+
else {
|
|
15592
|
+
this._inputValue = (_c = (_b = this.state._options) === null || _b === void 0 ? void 0 : _b.find((option) => option.value === this._value)) === null || _c === void 0 ? void 0 : _c.label;
|
|
15589
15593
|
this._filteredOptions = [...this.state._options];
|
|
15590
15594
|
}
|
|
15591
15595
|
this._isOpen = false;
|
|
@@ -15596,13 +15600,13 @@ class KolSingleSelect {
|
|
|
15596
15600
|
return;
|
|
15597
15601
|
}
|
|
15598
15602
|
else {
|
|
15599
|
-
const emptyValue =
|
|
15603
|
+
const emptyValue = null;
|
|
15600
15604
|
this._focusedOptionIndex = -1;
|
|
15601
15605
|
this._value = emptyValue;
|
|
15602
|
-
this._inputValue =
|
|
15606
|
+
this._inputValue = '';
|
|
15603
15607
|
this._filteredOptions = [...this.state._options];
|
|
15604
|
-
this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: emptyValue } }), true, emptyValue);
|
|
15605
|
-
this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: emptyValue } }), emptyValue);
|
|
15608
|
+
this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: emptyValue } }), true, { value: emptyValue });
|
|
15609
|
+
this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: emptyValue } }), { value: emptyValue });
|
|
15606
15610
|
}
|
|
15607
15611
|
}
|
|
15608
15612
|
selectOption(option) {
|
|
@@ -15670,17 +15674,17 @@ class KolSingleSelect {
|
|
|
15670
15674
|
var _a;
|
|
15671
15675
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
15672
15676
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
15673
|
-
return (hAsync(Host, { key: '
|
|
15677
|
+
return (hAsync(Host, { key: 'cc1f3cfb10d9a89336dd37f635eb9494874206bd', class: "kol-single-select" }, hAsync("div", { key: '760f7abe608a369d289cf7a5728763cd74a9bc91', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputTag, { key: 'a61e64e8f57ae222c2ea6833ea6bd21c547a64c3', _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: 'ac6c289b2091cea9cadc3ebb588536cb0c721af0', 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: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'c22e2c4f84de347b5c295dc9e50f0ff9d14e251b', slot: "input" }, hAsync("div", { key: '89906c776e1b7b6b7c05b6b23c6987f28fb44b86', class: "single-select__group" }, hAsync("input", Object.assign({ key: '9cbe8cabf6b89a408292dcf1ed8717db2a4b971e', ref: this.catchRef, class: "single-select__input", "data-testid": "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", autoComplete: "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) => {
|
|
15674
15678
|
this.controller.onFacade.onFocus(event);
|
|
15675
15679
|
this.inputHasFocus = true;
|
|
15676
15680
|
}, onBlur: (event) => {
|
|
15677
15681
|
this.controller.onFacade.onBlur(event);
|
|
15678
15682
|
this.inputHasFocus = false;
|
|
15679
|
-
}, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: '
|
|
15683
|
+
}, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: 'bb693e6367410321d3039f1e51bd6e330906e713', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
|
|
15680
15684
|
var _a;
|
|
15681
15685
|
this.clearSelection();
|
|
15682
15686
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
15683
|
-
}, class: "single-select__delete" })), hAsync("button", { key: '
|
|
15687
|
+
}, class: "single-select__delete" })), hAsync("button", { key: 'baf27c00461f39ce7fa736f1ae67345c54a20387', tabindex: "-1", class: "single-select__button", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '03b9d8c1e091a389736fc5aa1c4dd3d101cbf53f', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: 'd5c7591ecdb8409f7cdcdb6f0ac78d088cc04a9a', role: "listbox", class: clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden'), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, 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) => {
|
|
15684
15688
|
if (el)
|
|
15685
15689
|
this.refOptions[index] = el;
|
|
15686
15690
|
}, tabIndex: -1, role: "option", "aria-selected": this._value === option.value ? 'true' : undefined, onClick: (event) => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/hydrate",
|
|
3
|
-
"version": "2.2.13-rc.
|
|
3
|
+
"version": "2.2.13-rc.2",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"homepage": "https://public-ui.github.io",
|
|
6
6
|
"repository": {
|
|
@@ -46,10 +46,10 @@
|
|
|
46
46
|
],
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"rimraf": "6.0.1",
|
|
49
|
-
"@public-ui/components": "2.2.13-rc.
|
|
49
|
+
"@public-ui/components": "2.2.13-rc.2"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
|
-
"@public-ui/components": "2.2.13-rc.
|
|
52
|
+
"@public-ui/components": "2.2.13-rc.2"
|
|
53
53
|
},
|
|
54
54
|
"sideEffects": false,
|
|
55
55
|
"type": "commonjs",
|