@public-ui/hydrate 2.2.7-rc.0 → 2.2.7
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 +54 -47
- package/dist/index.mjs +54 -47
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -6405,10 +6405,10 @@ class KolCombobox {
|
|
|
6405
6405
|
var _a;
|
|
6406
6406
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
6407
6407
|
}
|
|
6408
|
-
selectOption(
|
|
6408
|
+
selectOption(option) {
|
|
6409
6409
|
var _a;
|
|
6410
|
-
this.controller.onFacade.onInput(
|
|
6411
|
-
this.controller.onFacade.onChange(
|
|
6410
|
+
this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: option } }), true, option);
|
|
6411
|
+
this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: option } }), option);
|
|
6412
6412
|
this.controller.setFormAssociatedValue(option);
|
|
6413
6413
|
this.state._value = option;
|
|
6414
6414
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
@@ -6471,19 +6471,19 @@ class KolCombobox {
|
|
|
6471
6471
|
render() {
|
|
6472
6472
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
6473
6473
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
6474
|
-
return (hAsync(Host, { key: '
|
|
6474
|
+
return (hAsync(Host, { key: 'aeae0f80d5d0984f79d7c515b8d1b23071b3753a', class: "kol-combobox" }, hAsync("div", { key: '834ea16433edabb1695ef758e3f6a956787541af', class: clsx('combobox', this.state._disabled && 'combobox--disabled') }, hAsync(KolInputTag, { key: 'ccad8c6c8672eb60a6805c342354ff6ca1059166', _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: 'c637779a81e7f23a9431fbf965f12f0bd262194b', 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: '144216a5a86064c95eaaece70ae9fcd067b592ac', slot: "input" }, hAsync("div", { key: 'd826389b1117e607a6173adbe68a5a06025247ec', class: "combobox__group" }, hAsync("input", Object.assign({ key: 'aba60527b1c3bb4c2ff230005828c8e16d6234c7', 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) => {
|
|
6475
6475
|
this.controller.onFacade.onFocus(event);
|
|
6476
6476
|
this.inputHasFocus = true;
|
|
6477
6477
|
}, onBlur: (event) => {
|
|
6478
6478
|
this.controller.onFacade.onBlur(event);
|
|
6479
6479
|
this.inputHasFocus = false;
|
|
6480
|
-
}, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder })), hAsync("button", { key: '
|
|
6480
|
+
}, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder })), hAsync("button", { key: 'c8999c415729370a8d0204351ab6517f684e3a20', tabindex: "-1", class: "combobox__icon", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: 'bb7e3dea4b34215294182c55aceb42e4207167dc', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: 'bc789e16902e1895fcecaa9b0d16a4d0b3ae283c', role: "listbox", class: clsx('combobox__listbox', this.blockSuggestionMouseOver && 'combobox__listbox--cursor-hidden'), onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
|
|
6481
6481
|
this._filteredSuggestions.length > 0 &&
|
|
6482
6482
|
this._filteredSuggestions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
|
|
6483
6483
|
if (el)
|
|
6484
6484
|
this.refSuggestions[index] = el;
|
|
6485
|
-
}, "data-index": index, tabIndex: -1, role: "option", "aria-selected": this.state._value === option ? 'true' : undefined, onClick: (
|
|
6486
|
-
this.selectOption(
|
|
6485
|
+
}, "data-index": index, tabIndex: -1, role: "option", "aria-selected": this.state._value === option ? 'true' : undefined, onClick: () => {
|
|
6486
|
+
this.selectOption(option);
|
|
6487
6487
|
this.toggleListbox();
|
|
6488
6488
|
}, onMouseOver: () => {
|
|
6489
6489
|
if (!this.blockSuggestionMouseOver) {
|
|
@@ -6493,7 +6493,7 @@ class KolCombobox {
|
|
|
6493
6493
|
this.focusOption(index);
|
|
6494
6494
|
}, class: "combobox__item", onKeyDown: (e) => {
|
|
6495
6495
|
if (e.key === 'Enter' || e.key === 'NumpadEnter') {
|
|
6496
|
-
this.selectOption(
|
|
6496
|
+
this.selectOption(option);
|
|
6497
6497
|
this.toggleListbox();
|
|
6498
6498
|
e.preventDefault();
|
|
6499
6499
|
}
|
|
@@ -14478,7 +14478,7 @@ class KolProgress {
|
|
|
14478
14478
|
return (hAsync(Host, { key: 'c7038d1d330d5c4bdf6960549ae7c6d952553e51', class: "kol-progress" }, hAsync("div", { key: '15be68272d0e03b68443739aab91ae6daeb465d8', "aria-hidden": "true", class: {
|
|
14479
14479
|
cycle: this.state._variant === 'cycle',
|
|
14480
14480
|
bar: this.state._variant === 'bar',
|
|
14481
|
-
} }, this.state._variant === 'bar' && this.state._label && hAsync("div", { key: '05c419229cff39beefc7005694cdc1d748234b46', class: "label" }, this.state._label), createProgressSVG(this.state), this.state._variant == 'cycle' && (hAsync("div", { key: '0188b544292da04562cee304698a59dd12e1346f', class: "text" }, this.state._label && hAsync("div", { key: 'f6628e38358433f61545f766d6bb538201e78d2f', class: "label" }, this.state._label), hAsync("div", { key: '7f01889c9b5ca9235857dd9b5012a21459754e4b', class: "value" }, `${displayValue} ${this.state._unit}`))), this.state._variant == 'bar' && (hAsync("div", { key: '
|
|
14481
|
+
} }, this.state._variant === 'bar' && this.state._label && hAsync("div", { key: '05c419229cff39beefc7005694cdc1d748234b46', class: "label" }, this.state._label), createProgressSVG(this.state), this.state._variant == 'cycle' && (hAsync("div", { key: '0188b544292da04562cee304698a59dd12e1346f', class: "text" }, this.state._label && hAsync("div", { key: 'f6628e38358433f61545f766d6bb538201e78d2f', class: "label" }, this.state._label), hAsync("div", { key: '7f01889c9b5ca9235857dd9b5012a21459754e4b', class: "value" }, `${displayValue} ${this.state._unit}`))), this.state._variant == 'bar' && (hAsync("div", { key: '8de6b13e3e4cf31e84617175a20cf4eca343852c', class: "value", style: { width: `${`${(isPercentage ? 100 : this.state._max) + 1}`.length}ch` } }, displayValue)), this.state._variant == 'bar' && hAsync("div", { key: 'cce7b2b6db10b7c488806775bbe033ca10b488dd', class: "unit" }, this.state._unit)), hAsync("progress", { key: '9db3ba73f90ad8eb16ce35b7fc76b15f8b255c95', "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: 'a349064adebe8f230c4c288ab72eb4a4a7eb8865', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, isPercentage ? `${liveProgressValue} %` : `${liveProgressValue} von ${this.state._max} ${this.state._unit}`)));
|
|
14482
14482
|
}
|
|
14483
14483
|
validateLabel(value) {
|
|
14484
14484
|
validateLabel(this, value);
|
|
@@ -15029,15 +15029,15 @@ class KolSingleSelect {
|
|
|
15029
15029
|
this.state._value = emptyValue;
|
|
15030
15030
|
this._inputValue = emptyValue;
|
|
15031
15031
|
this._filteredOptions = [...this.state._options];
|
|
15032
|
-
this.controller.onFacade.onInput(new
|
|
15033
|
-
this.controller.onFacade.onChange(new
|
|
15032
|
+
this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: emptyValue } }), true, emptyValue);
|
|
15033
|
+
this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: emptyValue } }), emptyValue);
|
|
15034
15034
|
}
|
|
15035
15035
|
}
|
|
15036
|
-
selectOption(
|
|
15036
|
+
selectOption(option) {
|
|
15037
15037
|
this.state._value = option.value;
|
|
15038
15038
|
this._inputValue = option.label;
|
|
15039
|
-
this.controller.onFacade.onInput(
|
|
15040
|
-
this.controller.onFacade.onChange(
|
|
15039
|
+
this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: option.value } }), false, option.value);
|
|
15040
|
+
this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: option.value } }), option.value);
|
|
15041
15041
|
this._filteredOptions = [...this.state._options];
|
|
15042
15042
|
this.controller.setFormAssociatedValue(this.state._value);
|
|
15043
15043
|
}
|
|
@@ -15097,22 +15097,22 @@ class KolSingleSelect {
|
|
|
15097
15097
|
render() {
|
|
15098
15098
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
15099
15099
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
15100
|
-
return (hAsync(Host, { key: '
|
|
15100
|
+
return (hAsync(Host, { key: '614d7f980087bb405882e2b013b03222c90acf33', class: "kol-single-select" }, hAsync("div", { key: '660826eebe22950c87d2c0f751e04a118650f750', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputTag, { key: 'da350721d7435ce274df54ce7151bad3c633889e', _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: '3408038013691dcb2d63d0a5b7d301f16b21130c', 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: '2ce6b43e7ce49133720481feca9499d87755af65', slot: "input" }, hAsync("div", { key: '24fa3b80f60e293ccd57a76fb03c907a7954cb40', class: "single-select__group" }, hAsync("input", Object.assign({ key: '07d9d6606cbd2096c486bcf8480f54738c40ddc5', 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) => {
|
|
15101
15101
|
this.controller.onFacade.onFocus(event);
|
|
15102
15102
|
this.inputHasFocus = true;
|
|
15103
15103
|
}, onBlur: (event) => {
|
|
15104
15104
|
this.controller.onFacade.onBlur(event);
|
|
15105
15105
|
this.inputHasFocus = false;
|
|
15106
|
-
}, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: '
|
|
15106
|
+
}, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: '665a8854a2e5962c3c813c6ac61d7cd440fe6254', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
|
|
15107
15107
|
var _a;
|
|
15108
15108
|
this.clearSelection();
|
|
15109
15109
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
15110
|
-
}, class: "single-select__delete" })), hAsync("button", { key: '
|
|
15110
|
+
}, class: "single-select__delete" })), hAsync("button", { key: 'ce78bafc2b82fb47e988b4cde571f246b74d292c', tabindex: "-1", class: "single-select__button", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '8dcf348ec430db455b42d4de9eb08413a7340df8', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: '7c1c94fbb82ffc53015248987a088b32dd83f14f', 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) => {
|
|
15111
15111
|
if (el)
|
|
15112
15112
|
this.refOptions[index] = el;
|
|
15113
15113
|
}, tabIndex: -1, role: "option", "aria-selected": this.state._value === option.value ? 'true' : undefined, onClick: (event) => {
|
|
15114
15114
|
var _a;
|
|
15115
|
-
this.selectOption(
|
|
15115
|
+
this.selectOption(option);
|
|
15116
15116
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
15117
15117
|
this.toggleListbox(event);
|
|
15118
15118
|
}, onMouseOver: () => {
|
|
@@ -15126,7 +15126,7 @@ class KolSingleSelect {
|
|
|
15126
15126
|
}, class: "single-select__item", onKeyDown: (e) => {
|
|
15127
15127
|
var _a;
|
|
15128
15128
|
if (e.key === 'Enter' || e.key === 'NumpadEnter') {
|
|
15129
|
-
this.selectOption(
|
|
15129
|
+
this.selectOption(option);
|
|
15130
15130
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
15131
15131
|
this.toggleListbox(e);
|
|
15132
15132
|
e.preventDefault();
|
|
@@ -15184,7 +15184,7 @@ class KolSingleSelect {
|
|
|
15184
15184
|
case ' ': {
|
|
15185
15185
|
if (this._isOpen) {
|
|
15186
15186
|
if (Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0) {
|
|
15187
|
-
this.selectOption(
|
|
15187
|
+
this.selectOption(this._filteredOptions[this._focusedOptionIndex]);
|
|
15188
15188
|
(_b = this.refInput) === null || _b === void 0 ? void 0 : _b.focus();
|
|
15189
15189
|
handleEvent(false);
|
|
15190
15190
|
}
|
|
@@ -25232,24 +25232,40 @@ class KolTabs {
|
|
|
25232
25232
|
nextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));
|
|
25233
25233
|
}
|
|
25234
25234
|
};
|
|
25235
|
-
this.
|
|
25236
|
-
var _a, _b, _c;
|
|
25237
|
-
if (this.tabPanelHost
|
|
25238
|
-
|
|
25239
|
-
|
|
25240
|
-
|
|
25241
|
-
|
|
25242
|
-
|
|
25243
|
-
|
|
25244
|
-
|
|
25245
|
-
|
|
25246
|
-
|
|
25247
|
-
|
|
25248
|
-
|
|
25249
|
-
|
|
25250
|
-
|
|
25235
|
+
this.refreshTabPanels = () => {
|
|
25236
|
+
var _a, _b, _c, _d;
|
|
25237
|
+
if (!this.tabPanelHost)
|
|
25238
|
+
return;
|
|
25239
|
+
while (this.tabPanelHost.firstChild) {
|
|
25240
|
+
this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);
|
|
25241
|
+
}
|
|
25242
|
+
for (let i = 0; i < ((_a = this.state._tabs) === null || _a === void 0 ? void 0 : _a.length); i++) {
|
|
25243
|
+
const div = document.createElement('div');
|
|
25244
|
+
div.setAttribute('aria-labelledby', `${this.state._label.replace(/\s/g, '-')}-tab-${i}`);
|
|
25245
|
+
div.setAttribute('id', `tabpanel-${i}`);
|
|
25246
|
+
div.setAttribute('role', 'tabpanel');
|
|
25247
|
+
div.setAttribute('hidden', '');
|
|
25248
|
+
const slot = document.createElement('slot');
|
|
25249
|
+
slot.setAttribute('name', `tabpanel-slot-${i}`);
|
|
25250
|
+
div.appendChild(slot);
|
|
25251
|
+
(_b = this.tabPanelHost) === null || _b === void 0 ? void 0 : _b.appendChild(div);
|
|
25252
|
+
if (typeof HTMLCollection !== 'undefined' && ((_c = this.host) === null || _c === void 0 ? void 0 : _c.children) instanceof HTMLCollection && ((_d = this.host) === null || _d === void 0 ? void 0 : _d.children[i])) {
|
|
25253
|
+
this.host.children[i].setAttribute('slot', `tabpanel-slot-${i}`);
|
|
25251
25254
|
}
|
|
25252
25255
|
}
|
|
25256
|
+
this.updateVisiblePanel();
|
|
25257
|
+
};
|
|
25258
|
+
this.updateVisiblePanel = () => {
|
|
25259
|
+
if (!this.tabPanelHost)
|
|
25260
|
+
return;
|
|
25261
|
+
Array.from(this.tabPanelHost.children).forEach((child, i) => {
|
|
25262
|
+
if (i === this.state._selected) {
|
|
25263
|
+
child.removeAttribute('hidden');
|
|
25264
|
+
}
|
|
25265
|
+
else {
|
|
25266
|
+
child.setAttribute('hidden', '');
|
|
25267
|
+
}
|
|
25268
|
+
});
|
|
25253
25269
|
};
|
|
25254
25270
|
this.onCreate = (event) => {
|
|
25255
25271
|
var _a, _b;
|
|
@@ -25385,6 +25401,7 @@ class KolTabs {
|
|
|
25385
25401
|
watchJsonArrayString(this, '_tabs', (item) => typeof item === 'object' && item !== null && typeof item._label === 'string' && item._label.length > 0, value, undefined, {
|
|
25386
25402
|
hooks: {
|
|
25387
25403
|
beforePatch: this.syncSelectedAndTabs,
|
|
25404
|
+
afterPatch: this.refreshTabPanels,
|
|
25388
25405
|
},
|
|
25389
25406
|
});
|
|
25390
25407
|
uiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);
|
|
@@ -25398,17 +25415,7 @@ class KolTabs {
|
|
|
25398
25415
|
this.validateBehavior(this._behavior);
|
|
25399
25416
|
}
|
|
25400
25417
|
componentDidRender() {
|
|
25401
|
-
this.
|
|
25402
|
-
if (this.tabPanelHost instanceof HTMLDivElement) {
|
|
25403
|
-
for (let i = 0; i < this.tabPanelHost.children.length; i++) {
|
|
25404
|
-
if (i !== this.state._selected) {
|
|
25405
|
-
this.tabPanelHost.children[i].setAttribute('hidden', '');
|
|
25406
|
-
}
|
|
25407
|
-
else {
|
|
25408
|
-
this.tabPanelHost.children[i].removeAttribute('hidden');
|
|
25409
|
-
}
|
|
25410
|
-
}
|
|
25411
|
-
}
|
|
25418
|
+
this.refreshTabPanels();
|
|
25412
25419
|
}
|
|
25413
25420
|
focusTabById(index) {
|
|
25414
25421
|
if (this.tabPanelsElement) {
|
package/dist/index.mjs
CHANGED
|
@@ -6401,10 +6401,10 @@ class KolCombobox {
|
|
|
6401
6401
|
var _a;
|
|
6402
6402
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
6403
6403
|
}
|
|
6404
|
-
selectOption(
|
|
6404
|
+
selectOption(option) {
|
|
6405
6405
|
var _a;
|
|
6406
|
-
this.controller.onFacade.onInput(
|
|
6407
|
-
this.controller.onFacade.onChange(
|
|
6406
|
+
this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: option } }), true, option);
|
|
6407
|
+
this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: option } }), option);
|
|
6408
6408
|
this.controller.setFormAssociatedValue(option);
|
|
6409
6409
|
this.state._value = option;
|
|
6410
6410
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
@@ -6467,19 +6467,19 @@ class KolCombobox {
|
|
|
6467
6467
|
render() {
|
|
6468
6468
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
6469
6469
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
6470
|
-
return (hAsync(Host, { key: '
|
|
6470
|
+
return (hAsync(Host, { key: 'aeae0f80d5d0984f79d7c515b8d1b23071b3753a', class: "kol-combobox" }, hAsync("div", { key: '834ea16433edabb1695ef758e3f6a956787541af', class: clsx('combobox', this.state._disabled && 'combobox--disabled') }, hAsync(KolInputTag, { key: 'ccad8c6c8672eb60a6805c342354ff6ca1059166', _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: 'c637779a81e7f23a9431fbf965f12f0bd262194b', 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: '144216a5a86064c95eaaece70ae9fcd067b592ac', slot: "input" }, hAsync("div", { key: 'd826389b1117e607a6173adbe68a5a06025247ec', class: "combobox__group" }, hAsync("input", Object.assign({ key: 'aba60527b1c3bb4c2ff230005828c8e16d6234c7', 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) => {
|
|
6471
6471
|
this.controller.onFacade.onFocus(event);
|
|
6472
6472
|
this.inputHasFocus = true;
|
|
6473
6473
|
}, onBlur: (event) => {
|
|
6474
6474
|
this.controller.onFacade.onBlur(event);
|
|
6475
6475
|
this.inputHasFocus = false;
|
|
6476
|
-
}, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder })), hAsync("button", { key: '
|
|
6476
|
+
}, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder })), hAsync("button", { key: 'c8999c415729370a8d0204351ab6517f684e3a20', tabindex: "-1", class: "combobox__icon", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: 'bb7e3dea4b34215294182c55aceb42e4207167dc', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: 'bc789e16902e1895fcecaa9b0d16a4d0b3ae283c', role: "listbox", class: clsx('combobox__listbox', this.blockSuggestionMouseOver && 'combobox__listbox--cursor-hidden'), onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
|
|
6477
6477
|
this._filteredSuggestions.length > 0 &&
|
|
6478
6478
|
this._filteredSuggestions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
|
|
6479
6479
|
if (el)
|
|
6480
6480
|
this.refSuggestions[index] = el;
|
|
6481
|
-
}, "data-index": index, tabIndex: -1, role: "option", "aria-selected": this.state._value === option ? 'true' : undefined, onClick: (
|
|
6482
|
-
this.selectOption(
|
|
6481
|
+
}, "data-index": index, tabIndex: -1, role: "option", "aria-selected": this.state._value === option ? 'true' : undefined, onClick: () => {
|
|
6482
|
+
this.selectOption(option);
|
|
6483
6483
|
this.toggleListbox();
|
|
6484
6484
|
}, onMouseOver: () => {
|
|
6485
6485
|
if (!this.blockSuggestionMouseOver) {
|
|
@@ -6489,7 +6489,7 @@ class KolCombobox {
|
|
|
6489
6489
|
this.focusOption(index);
|
|
6490
6490
|
}, class: "combobox__item", onKeyDown: (e) => {
|
|
6491
6491
|
if (e.key === 'Enter' || e.key === 'NumpadEnter') {
|
|
6492
|
-
this.selectOption(
|
|
6492
|
+
this.selectOption(option);
|
|
6493
6493
|
this.toggleListbox();
|
|
6494
6494
|
e.preventDefault();
|
|
6495
6495
|
}
|
|
@@ -14474,7 +14474,7 @@ class KolProgress {
|
|
|
14474
14474
|
return (hAsync(Host, { key: 'c7038d1d330d5c4bdf6960549ae7c6d952553e51', class: "kol-progress" }, hAsync("div", { key: '15be68272d0e03b68443739aab91ae6daeb465d8', "aria-hidden": "true", class: {
|
|
14475
14475
|
cycle: this.state._variant === 'cycle',
|
|
14476
14476
|
bar: this.state._variant === 'bar',
|
|
14477
|
-
} }, this.state._variant === 'bar' && this.state._label && hAsync("div", { key: '05c419229cff39beefc7005694cdc1d748234b46', class: "label" }, this.state._label), createProgressSVG(this.state), this.state._variant == 'cycle' && (hAsync("div", { key: '0188b544292da04562cee304698a59dd12e1346f', class: "text" }, this.state._label && hAsync("div", { key: 'f6628e38358433f61545f766d6bb538201e78d2f', class: "label" }, this.state._label), hAsync("div", { key: '7f01889c9b5ca9235857dd9b5012a21459754e4b', class: "value" }, `${displayValue} ${this.state._unit}`))), this.state._variant == 'bar' && (hAsync("div", { key: '
|
|
14477
|
+
} }, this.state._variant === 'bar' && this.state._label && hAsync("div", { key: '05c419229cff39beefc7005694cdc1d748234b46', class: "label" }, this.state._label), createProgressSVG(this.state), this.state._variant == 'cycle' && (hAsync("div", { key: '0188b544292da04562cee304698a59dd12e1346f', class: "text" }, this.state._label && hAsync("div", { key: 'f6628e38358433f61545f766d6bb538201e78d2f', class: "label" }, this.state._label), hAsync("div", { key: '7f01889c9b5ca9235857dd9b5012a21459754e4b', class: "value" }, `${displayValue} ${this.state._unit}`))), this.state._variant == 'bar' && (hAsync("div", { key: '8de6b13e3e4cf31e84617175a20cf4eca343852c', class: "value", style: { width: `${`${(isPercentage ? 100 : this.state._max) + 1}`.length}ch` } }, displayValue)), this.state._variant == 'bar' && hAsync("div", { key: 'cce7b2b6db10b7c488806775bbe033ca10b488dd', class: "unit" }, this.state._unit)), hAsync("progress", { key: '9db3ba73f90ad8eb16ce35b7fc76b15f8b255c95', "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: 'a349064adebe8f230c4c288ab72eb4a4a7eb8865', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, isPercentage ? `${liveProgressValue} %` : `${liveProgressValue} von ${this.state._max} ${this.state._unit}`)));
|
|
14478
14478
|
}
|
|
14479
14479
|
validateLabel(value) {
|
|
14480
14480
|
validateLabel(this, value);
|
|
@@ -15025,15 +15025,15 @@ class KolSingleSelect {
|
|
|
15025
15025
|
this.state._value = emptyValue;
|
|
15026
15026
|
this._inputValue = emptyValue;
|
|
15027
15027
|
this._filteredOptions = [...this.state._options];
|
|
15028
|
-
this.controller.onFacade.onInput(new
|
|
15029
|
-
this.controller.onFacade.onChange(new
|
|
15028
|
+
this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: emptyValue } }), true, emptyValue);
|
|
15029
|
+
this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: emptyValue } }), emptyValue);
|
|
15030
15030
|
}
|
|
15031
15031
|
}
|
|
15032
|
-
selectOption(
|
|
15032
|
+
selectOption(option) {
|
|
15033
15033
|
this.state._value = option.value;
|
|
15034
15034
|
this._inputValue = option.label;
|
|
15035
|
-
this.controller.onFacade.onInput(
|
|
15036
|
-
this.controller.onFacade.onChange(
|
|
15035
|
+
this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: option.value } }), false, option.value);
|
|
15036
|
+
this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: option.value } }), option.value);
|
|
15037
15037
|
this._filteredOptions = [...this.state._options];
|
|
15038
15038
|
this.controller.setFormAssociatedValue(this.state._value);
|
|
15039
15039
|
}
|
|
@@ -15093,22 +15093,22 @@ class KolSingleSelect {
|
|
|
15093
15093
|
render() {
|
|
15094
15094
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
15095
15095
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
15096
|
-
return (hAsync(Host, { key: '
|
|
15096
|
+
return (hAsync(Host, { key: '614d7f980087bb405882e2b013b03222c90acf33', class: "kol-single-select" }, hAsync("div", { key: '660826eebe22950c87d2c0f751e04a118650f750', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputTag, { key: 'da350721d7435ce274df54ce7151bad3c633889e', _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: '3408038013691dcb2d63d0a5b7d301f16b21130c', 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: '2ce6b43e7ce49133720481feca9499d87755af65', slot: "input" }, hAsync("div", { key: '24fa3b80f60e293ccd57a76fb03c907a7954cb40', class: "single-select__group" }, hAsync("input", Object.assign({ key: '07d9d6606cbd2096c486bcf8480f54738c40ddc5', 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) => {
|
|
15097
15097
|
this.controller.onFacade.onFocus(event);
|
|
15098
15098
|
this.inputHasFocus = true;
|
|
15099
15099
|
}, onBlur: (event) => {
|
|
15100
15100
|
this.controller.onFacade.onBlur(event);
|
|
15101
15101
|
this.inputHasFocus = false;
|
|
15102
|
-
}, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: '
|
|
15102
|
+
}, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: '665a8854a2e5962c3c813c6ac61d7cd440fe6254', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
|
|
15103
15103
|
var _a;
|
|
15104
15104
|
this.clearSelection();
|
|
15105
15105
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
15106
|
-
}, class: "single-select__delete" })), hAsync("button", { key: '
|
|
15106
|
+
}, class: "single-select__delete" })), hAsync("button", { key: 'ce78bafc2b82fb47e988b4cde571f246b74d292c', tabindex: "-1", class: "single-select__button", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '8dcf348ec430db455b42d4de9eb08413a7340df8', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: '7c1c94fbb82ffc53015248987a088b32dd83f14f', 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) => {
|
|
15107
15107
|
if (el)
|
|
15108
15108
|
this.refOptions[index] = el;
|
|
15109
15109
|
}, tabIndex: -1, role: "option", "aria-selected": this.state._value === option.value ? 'true' : undefined, onClick: (event) => {
|
|
15110
15110
|
var _a;
|
|
15111
|
-
this.selectOption(
|
|
15111
|
+
this.selectOption(option);
|
|
15112
15112
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
15113
15113
|
this.toggleListbox(event);
|
|
15114
15114
|
}, onMouseOver: () => {
|
|
@@ -15122,7 +15122,7 @@ class KolSingleSelect {
|
|
|
15122
15122
|
}, class: "single-select__item", onKeyDown: (e) => {
|
|
15123
15123
|
var _a;
|
|
15124
15124
|
if (e.key === 'Enter' || e.key === 'NumpadEnter') {
|
|
15125
|
-
this.selectOption(
|
|
15125
|
+
this.selectOption(option);
|
|
15126
15126
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
15127
15127
|
this.toggleListbox(e);
|
|
15128
15128
|
e.preventDefault();
|
|
@@ -15180,7 +15180,7 @@ class KolSingleSelect {
|
|
|
15180
15180
|
case ' ': {
|
|
15181
15181
|
if (this._isOpen) {
|
|
15182
15182
|
if (Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0) {
|
|
15183
|
-
this.selectOption(
|
|
15183
|
+
this.selectOption(this._filteredOptions[this._focusedOptionIndex]);
|
|
15184
15184
|
(_b = this.refInput) === null || _b === void 0 ? void 0 : _b.focus();
|
|
15185
15185
|
handleEvent(false);
|
|
15186
15186
|
}
|
|
@@ -25228,24 +25228,40 @@ class KolTabs {
|
|
|
25228
25228
|
nextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));
|
|
25229
25229
|
}
|
|
25230
25230
|
};
|
|
25231
|
-
this.
|
|
25232
|
-
var _a, _b, _c;
|
|
25233
|
-
if (this.tabPanelHost
|
|
25234
|
-
|
|
25235
|
-
|
|
25236
|
-
|
|
25237
|
-
|
|
25238
|
-
|
|
25239
|
-
|
|
25240
|
-
|
|
25241
|
-
|
|
25242
|
-
|
|
25243
|
-
|
|
25244
|
-
|
|
25245
|
-
|
|
25246
|
-
|
|
25231
|
+
this.refreshTabPanels = () => {
|
|
25232
|
+
var _a, _b, _c, _d;
|
|
25233
|
+
if (!this.tabPanelHost)
|
|
25234
|
+
return;
|
|
25235
|
+
while (this.tabPanelHost.firstChild) {
|
|
25236
|
+
this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);
|
|
25237
|
+
}
|
|
25238
|
+
for (let i = 0; i < ((_a = this.state._tabs) === null || _a === void 0 ? void 0 : _a.length); i++) {
|
|
25239
|
+
const div = document.createElement('div');
|
|
25240
|
+
div.setAttribute('aria-labelledby', `${this.state._label.replace(/\s/g, '-')}-tab-${i}`);
|
|
25241
|
+
div.setAttribute('id', `tabpanel-${i}`);
|
|
25242
|
+
div.setAttribute('role', 'tabpanel');
|
|
25243
|
+
div.setAttribute('hidden', '');
|
|
25244
|
+
const slot = document.createElement('slot');
|
|
25245
|
+
slot.setAttribute('name', `tabpanel-slot-${i}`);
|
|
25246
|
+
div.appendChild(slot);
|
|
25247
|
+
(_b = this.tabPanelHost) === null || _b === void 0 ? void 0 : _b.appendChild(div);
|
|
25248
|
+
if (typeof HTMLCollection !== 'undefined' && ((_c = this.host) === null || _c === void 0 ? void 0 : _c.children) instanceof HTMLCollection && ((_d = this.host) === null || _d === void 0 ? void 0 : _d.children[i])) {
|
|
25249
|
+
this.host.children[i].setAttribute('slot', `tabpanel-slot-${i}`);
|
|
25247
25250
|
}
|
|
25248
25251
|
}
|
|
25252
|
+
this.updateVisiblePanel();
|
|
25253
|
+
};
|
|
25254
|
+
this.updateVisiblePanel = () => {
|
|
25255
|
+
if (!this.tabPanelHost)
|
|
25256
|
+
return;
|
|
25257
|
+
Array.from(this.tabPanelHost.children).forEach((child, i) => {
|
|
25258
|
+
if (i === this.state._selected) {
|
|
25259
|
+
child.removeAttribute('hidden');
|
|
25260
|
+
}
|
|
25261
|
+
else {
|
|
25262
|
+
child.setAttribute('hidden', '');
|
|
25263
|
+
}
|
|
25264
|
+
});
|
|
25249
25265
|
};
|
|
25250
25266
|
this.onCreate = (event) => {
|
|
25251
25267
|
var _a, _b;
|
|
@@ -25381,6 +25397,7 @@ class KolTabs {
|
|
|
25381
25397
|
watchJsonArrayString(this, '_tabs', (item) => typeof item === 'object' && item !== null && typeof item._label === 'string' && item._label.length > 0, value, undefined, {
|
|
25382
25398
|
hooks: {
|
|
25383
25399
|
beforePatch: this.syncSelectedAndTabs,
|
|
25400
|
+
afterPatch: this.refreshTabPanels,
|
|
25384
25401
|
},
|
|
25385
25402
|
});
|
|
25386
25403
|
uiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);
|
|
@@ -25394,17 +25411,7 @@ class KolTabs {
|
|
|
25394
25411
|
this.validateBehavior(this._behavior);
|
|
25395
25412
|
}
|
|
25396
25413
|
componentDidRender() {
|
|
25397
|
-
this.
|
|
25398
|
-
if (this.tabPanelHost instanceof HTMLDivElement) {
|
|
25399
|
-
for (let i = 0; i < this.tabPanelHost.children.length; i++) {
|
|
25400
|
-
if (i !== this.state._selected) {
|
|
25401
|
-
this.tabPanelHost.children[i].setAttribute('hidden', '');
|
|
25402
|
-
}
|
|
25403
|
-
else {
|
|
25404
|
-
this.tabPanelHost.children[i].removeAttribute('hidden');
|
|
25405
|
-
}
|
|
25406
|
-
}
|
|
25407
|
-
}
|
|
25414
|
+
this.refreshTabPanels();
|
|
25408
25415
|
}
|
|
25409
25416
|
focusTabById(index) {
|
|
25410
25417
|
if (this.tabPanelsElement) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/hydrate",
|
|
3
|
-
"version": "2.2.7
|
|
3
|
+
"version": "2.2.7",
|
|
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.7
|
|
49
|
+
"@public-ui/components": "2.2.7"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
|
-
"@public-ui/components": "2.2.7
|
|
52
|
+
"@public-ui/components": "2.2.7"
|
|
53
53
|
},
|
|
54
54
|
"sideEffects": false,
|
|
55
55
|
"type": "commonjs",
|