@public-ui/hydrate 2.1.7-rc.2 → 2.1.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 +105 -220
- package/dist/index.mjs +105 -220
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -4214,6 +4214,10 @@ const validatePaginationPosition = (component, value) => {
|
|
|
4214
4214
|
});
|
|
4215
4215
|
};
|
|
4216
4216
|
|
|
4217
|
+
const validatePopoverCallbacks = (component, value) => {
|
|
4218
|
+
watchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['PopoverCallbacksPropType {Events.onClose}']), value);
|
|
4219
|
+
};
|
|
4220
|
+
|
|
4217
4221
|
const validateReadOnly = (component, value) => {
|
|
4218
4222
|
watchBoolean(component, '_readOnly', value);
|
|
4219
4223
|
};
|
|
@@ -4382,6 +4386,7 @@ let KolInputWcTag = 'kol-input';
|
|
|
4382
4386
|
let KolLinkTag = 'kol-link';
|
|
4383
4387
|
let KolLinkWcTag = 'kol-link-wc';
|
|
4384
4388
|
let KolPaginationTag = 'kol-pagination';
|
|
4389
|
+
let KolPopoverWcTag = 'kol-popover-wc';
|
|
4385
4390
|
let KolSelectTag = 'kol-select';
|
|
4386
4391
|
let KolSpanWcTag = 'kol-span-wc';
|
|
4387
4392
|
let KolTableStatefulTag = 'kol-table-stateful';
|
|
@@ -5632,13 +5637,13 @@ class KolButtonWc {
|
|
|
5632
5637
|
var _a, _b;
|
|
5633
5638
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
5634
5639
|
const hasAriaDescription = Boolean((_b = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length);
|
|
5635
|
-
return (hAsync(Host, { key: '
|
|
5640
|
+
return (hAsync(Host, { key: '5516bef539eb9262e669fe92f72dc243d8920bd0', class: "kol-button-wc" }, hAsync("button", Object.assign({ key: '1d3eb3a7720f306a3c186feedfd365bf5331c86c', ref: this.catchRef, accessKey: this.state._accessKey || undefined, "aria-controls": this.state._ariaControls, "aria-describedby": hasAriaDescription ? this.internalDescriptionById : undefined, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: {
|
|
5636
5641
|
button: true,
|
|
5637
5642
|
disabled: this.state._disabled === true,
|
|
5638
5643
|
[this.state._variant]: this.state._variant !== 'custom',
|
|
5639
5644
|
[this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
5640
5645
|
'hide-label': this.state._hideLabel === true,
|
|
5641
|
-
}, disabled: this.state._disabled, id: this.state._id, name: this.state._name }, this.state._on, { onClick: this.onClick, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }), hAsync(KolSpanWcTag, { key: '
|
|
5646
|
+
}, disabled: this.state._disabled, id: this.state._id, name: this.state._name }, this.state._on, { onClick: this.onClick, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }), hAsync(KolSpanWcTag, { key: '3ba922687287ba66ce958e13b98802e62f333079', class: "button-inner", _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: '9ee6d1239e3012f306e0b3ae8fc984db25225507', name: "expert", slot: "expert" }))), hAsync(KolTooltipWcTag, { key: '8ece133d5b3f4f3832e60e26b804c58244c8b364', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this._accessKey, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' }), hasAriaDescription && (hAsync("span", { key: 'f2a460b10f336b17add6fd3663c0f4ceef91ddb5', class: "visually-hidden", id: this.internalDescriptionById }, this.state._ariaDescription))));
|
|
5642
5647
|
}
|
|
5643
5648
|
constructor(hostRef) {
|
|
5644
5649
|
registerInstance(this, hostRef);
|
|
@@ -6282,7 +6287,7 @@ class KolCombobox {
|
|
|
6282
6287
|
render() {
|
|
6283
6288
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
6284
6289
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
6285
|
-
return (hAsync(Host, { key: '
|
|
6290
|
+
return (hAsync(Host, { key: '520b90a5b17719f0acd633ca8a9a3b313b8fef41', class: "kol-combobox" }, hAsync("div", { key: '7e5a3ec03dcd6769a16d181cd1b26beb26af2a9a', class: clsx('combobox', this.state._disabled && 'combobox--disabled') }, hAsync(KolInputWcTag, { key: '5501454ee81df1d0811d0835409126506a334983', _accessKey: this.state._accessKey, _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, _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: 'e9dd3f2cf17eaf4e5d295f0bd9fc37aa9085b8b9', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'afba7d4ff0b569da313797721270311242e34734', slot: "input" }, hAsync("div", { key: 'f5f1db833f8695b125a834b884b4673121a0dc1e', class: "combobox__group" }, hAsync("input", Object.assign({ key: 'caa86d47cf25063b487b62d78fdc2e7010da5e0a', 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, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), placeholder: this.state._placeholder })), hAsync("button", { key: '0cd5a3bcf6b5ad52e86795465dadbaeee2604c80', tabindex: "-1", class: "combobox__icon", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '2ad19cc55158c2016008fd362d86eae5772d4e18', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: 'd9e2426f5780921c805644d56c51e4d9e554ec3d', role: "listbox", class: clsx('combobox__listbox', this.blockSuggestionMouseOver && 'combobox__listbox--cursor-hidden'), onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
|
|
6286
6291
|
this._filteredSuggestions.length > 0 &&
|
|
6287
6292
|
this._filteredSuggestions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
|
|
6288
6293
|
if (el)
|
|
@@ -7273,7 +7278,7 @@ class KolIndentedTextWc {
|
|
|
7273
7278
|
this.state = {};
|
|
7274
7279
|
}
|
|
7275
7280
|
render() {
|
|
7276
|
-
return (hAsync(Host, { key: '
|
|
7281
|
+
return (hAsync(Host, { key: '64921f12c416fdba4dec29db15cca84fc8277ae4', class: "kol-indented-text-wc" }, hAsync("div", { key: '6f201cf35b3d217e079087e306ae1679dc17ec75' }, hAsync("slot", { key: 'ad4a24a8f8755694b514ac378cee2ecb90ee2722' }))));
|
|
7277
7282
|
}
|
|
7278
7283
|
static get cmpMeta() { return {
|
|
7279
7284
|
"$flags$": 4,
|
|
@@ -10997,129 +11002,12 @@ class KolLogo {
|
|
|
10997
11002
|
}; }
|
|
10998
11003
|
}
|
|
10999
11004
|
|
|
11000
|
-
|
|
11001
|
-
constructor() {
|
|
11002
|
-
this.lockedElements = new Map();
|
|
11003
|
-
this.modalStack = new Map();
|
|
11004
|
-
}
|
|
11005
|
-
lockElement(htmlElement) {
|
|
11006
|
-
const tabIndex = htmlElement.getAttribute('tabindex');
|
|
11007
|
-
if (htmlElement instanceof HTMLAnchorElement ||
|
|
11008
|
-
htmlElement instanceof HTMLButtonElement ||
|
|
11009
|
-
htmlElement instanceof HTMLInputElement ||
|
|
11010
|
-
htmlElement instanceof HTMLSelectElement ||
|
|
11011
|
-
htmlElement instanceof HTMLTextAreaElement ||
|
|
11012
|
-
typeof tabIndex === 'string' ||
|
|
11013
|
-
htmlElement.dataset.kolModal !== undefined) {
|
|
11014
|
-
if (typeof tabIndex === 'string') {
|
|
11015
|
-
this.lockedElements.set(htmlElement, {
|
|
11016
|
-
tabIndex,
|
|
11017
|
-
});
|
|
11018
|
-
}
|
|
11019
|
-
else {
|
|
11020
|
-
this.lockedElements.set(htmlElement, {});
|
|
11021
|
-
}
|
|
11022
|
-
htmlElement.setAttribute('tabindex', '-1');
|
|
11023
|
-
htmlElement.setAttribute('aria-hidden', 'true');
|
|
11024
|
-
htmlElement.style.userSelect = 'none';
|
|
11025
|
-
}
|
|
11026
|
-
}
|
|
11027
|
-
unlockElement(value, htmlElement) {
|
|
11028
|
-
if (typeof value.tabIndex === 'string') {
|
|
11029
|
-
htmlElement.setAttribute('tabindex', value.tabIndex);
|
|
11030
|
-
}
|
|
11031
|
-
else {
|
|
11032
|
-
htmlElement.removeAttribute('tabindex');
|
|
11033
|
-
}
|
|
11034
|
-
htmlElement.removeAttribute('aria-hidden');
|
|
11035
|
-
htmlElement.style.userSelect = 'unset';
|
|
11036
|
-
this.lockedElements.delete(htmlElement);
|
|
11037
|
-
}
|
|
11038
|
-
unlockLockedElements(lockedElements) {
|
|
11039
|
-
lockedElements.forEach(this.unlockElement.bind(this));
|
|
11040
|
-
}
|
|
11041
|
-
lockFocus(hostElement, excludeElement) {
|
|
11042
|
-
try {
|
|
11043
|
-
if (hostElement !== excludeElement && (hostElement instanceof HTMLElement || hostElement instanceof ShadowRoot)) {
|
|
11044
|
-
if (hostElement instanceof HTMLElement) {
|
|
11045
|
-
this.lockElement(hostElement);
|
|
11046
|
-
this.lockFocus(hostElement.shadowRoot, excludeElement);
|
|
11047
|
-
}
|
|
11048
|
-
for (let i = 0; i < hostElement.children.length; i++) {
|
|
11049
|
-
this.lockFocus(hostElement.children[i], excludeElement);
|
|
11050
|
-
}
|
|
11051
|
-
}
|
|
11052
|
-
}
|
|
11053
|
-
catch (error) {
|
|
11054
|
-
}
|
|
11055
|
-
}
|
|
11056
|
-
renderModalIfExists(activeElement) {
|
|
11057
|
-
if (activeElement instanceof HTMLElement) {
|
|
11058
|
-
if (this.lockedElements.has(activeElement)) {
|
|
11059
|
-
this.unlockElement(this.lockedElements.get(activeElement), activeElement);
|
|
11060
|
-
}
|
|
11061
|
-
const timeout = setTimeout(() => {
|
|
11062
|
-
clearTimeout(timeout);
|
|
11063
|
-
activeElement.focus();
|
|
11064
|
-
}, 500);
|
|
11065
|
-
}
|
|
11066
|
-
this.unlockLockedElements(this.lockedElements);
|
|
11067
|
-
if (this.modalStack.size > 0) {
|
|
11068
|
-
const modalKeys = Array.from(this.modalStack.keys());
|
|
11069
|
-
const modalRef = modalKeys[modalKeys.length - 1];
|
|
11070
|
-
this.modalStack.forEach((_value, htmlElement) => {
|
|
11071
|
-
if (modalRef === htmlElement) {
|
|
11072
|
-
htmlElement.style.display = 'inline';
|
|
11073
|
-
}
|
|
11074
|
-
else {
|
|
11075
|
-
htmlElement.style.display = `none`;
|
|
11076
|
-
}
|
|
11077
|
-
});
|
|
11078
|
-
getDocument().body.style.maxHeight = '100vh';
|
|
11079
|
-
getDocument().body.style.overflow = 'hidden';
|
|
11080
|
-
this.lockFocus(getDocument().body, modalRef);
|
|
11081
|
-
}
|
|
11082
|
-
else {
|
|
11083
|
-
getDocument().body.style.maxHeight = 'unset';
|
|
11084
|
-
getDocument().body.style.overflow = 'unset';
|
|
11085
|
-
}
|
|
11086
|
-
}
|
|
11087
|
-
openModal(modalRef, activeElement) {
|
|
11088
|
-
if (modalRef instanceof HTMLElement === false) {
|
|
11089
|
-
Log.warn(`[KolModalService] The DOM reference of the modal is not valid.`);
|
|
11090
|
-
}
|
|
11091
|
-
else {
|
|
11092
|
-
this.modalStack.set(modalRef, {
|
|
11093
|
-
activeElement,
|
|
11094
|
-
});
|
|
11095
|
-
this.renderModalIfExists();
|
|
11096
|
-
}
|
|
11097
|
-
}
|
|
11098
|
-
closeModal(modalRef) {
|
|
11099
|
-
var _a;
|
|
11100
|
-
if (modalRef instanceof HTMLElement === false) {
|
|
11101
|
-
Log.warn(`[KolModalService] The DOM reference of the modal is not valid.`);
|
|
11102
|
-
}
|
|
11103
|
-
else {
|
|
11104
|
-
const activeElement = (_a = this.modalStack.get(modalRef)) === null || _a === void 0 ? void 0 : _a.activeElement;
|
|
11105
|
-
this.modalStack.delete(modalRef);
|
|
11106
|
-
this.renderModalIfExists(activeElement);
|
|
11107
|
-
}
|
|
11108
|
-
}
|
|
11109
|
-
}
|
|
11110
|
-
|
|
11111
|
-
const defaultStyleCss$i = "@layer kol-global {\n .sc-kol-modal-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-modal-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-modal-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-modal-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .overlay {\n background-color: rgba(0, 0, 0, 0.33);\n display: flex;\n height: 100%;\n inset: 0;\n position: fixed;\n width: 100%;\n z-index: 100;\n }\n .modal {\n margin: auto;\n max-height: 100%;\n max-width: 100%;\n }\n}";
|
|
11005
|
+
const defaultStyleCss$i = "@layer kol-global {\n .sc-kol-modal-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-modal-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-modal-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-modal-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-modal {\n border: 0;\n padding: 0;\n }\n .kol-modal::backdrop {\n background-color: rgba(0, 0, 0, 0.33);\n }\n}";
|
|
11112
11006
|
var KolModalDefaultStyle0 = defaultStyleCss$i;
|
|
11113
11007
|
|
|
11114
|
-
const modalService = new ModalService();
|
|
11115
11008
|
class KolModal {
|
|
11116
11009
|
constructor(hostRef) {
|
|
11117
11010
|
registerInstance(this, hostRef);
|
|
11118
|
-
this.onKeyDown = (event) => {
|
|
11119
|
-
if (event && event.code === 'Escape') {
|
|
11120
|
-
this._activeElement = null;
|
|
11121
|
-
}
|
|
11122
|
-
};
|
|
11123
11011
|
this._activeElement = undefined;
|
|
11124
11012
|
this._label = undefined;
|
|
11125
11013
|
this._on = undefined;
|
|
@@ -11131,40 +11019,44 @@ class KolModal {
|
|
|
11131
11019
|
};
|
|
11132
11020
|
}
|
|
11133
11021
|
componentDidRender() {
|
|
11134
|
-
|
|
11135
|
-
|
|
11136
|
-
|
|
11137
|
-
}
|
|
11138
|
-
else {
|
|
11139
|
-
modalService.closeModal(this.hostElement);
|
|
11140
|
-
}
|
|
11022
|
+
var _a;
|
|
11023
|
+
if (this.state._activeElement) {
|
|
11024
|
+
(_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.showModal();
|
|
11141
11025
|
}
|
|
11142
11026
|
}
|
|
11143
11027
|
disconnectedCallback() {
|
|
11144
|
-
|
|
11145
|
-
|
|
11146
|
-
|
|
11028
|
+
void this.closeModal();
|
|
11029
|
+
}
|
|
11030
|
+
handleNativeCloseEvent() {
|
|
11031
|
+
var _a, _b;
|
|
11032
|
+
(_b = (_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
11033
|
+
}
|
|
11034
|
+
async openModal() {
|
|
11035
|
+
var _a;
|
|
11036
|
+
(_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.showModal();
|
|
11037
|
+
}
|
|
11038
|
+
async closeModal() {
|
|
11039
|
+
var _a, _b;
|
|
11040
|
+
this._activeElement = null;
|
|
11041
|
+
(_b = (_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
11147
11042
|
}
|
|
11148
11043
|
render() {
|
|
11149
|
-
return (hAsync(
|
|
11150
|
-
this.
|
|
11151
|
-
}
|
|
11044
|
+
return (hAsync("dialog", { key: '5033fc2965dfda66c31938ba52d631f1b9ecc902', class: "kol-modal", ref: (el) => {
|
|
11045
|
+
this.refDialog = el;
|
|
11046
|
+
}, style: {
|
|
11152
11047
|
width: this.state._width,
|
|
11153
|
-
}, "aria-label": this.state._label,
|
|
11154
|
-
if (el) {
|
|
11155
|
-
el.setAttribute('tabindex', '0');
|
|
11156
|
-
setTimeout(() => el.focus(), 250);
|
|
11157
|
-
}
|
|
11158
|
-
} }, hAsync("slot", { key: '28be8eb18ffd21161fe29b6c56b972252ed172a9' }))))));
|
|
11048
|
+
}, "aria-label": this.state._label, onClose: this.handleNativeCloseEvent.bind(this) }, hAsync("div", { key: 'a891311e24e9946af4976e61f5c30de3c9403f5c' }, hAsync("slot", { key: '6f6f37bb1b8a723b0c1dafbc880989c153214fae' }))));
|
|
11159
11049
|
}
|
|
11160
11050
|
validateActiveElement(value) {
|
|
11161
11051
|
watchValidator(this, '_activeElement', (value) => typeof value === 'object' || value === null, new Set(['HTMLElement', 'null']), value, {
|
|
11162
11052
|
defaultValue: null,
|
|
11163
11053
|
hooks: {
|
|
11164
11054
|
afterPatch: () => {
|
|
11165
|
-
|
|
11166
|
-
|
|
11167
|
-
|
|
11055
|
+
if (this.state._activeElement) {
|
|
11056
|
+
void this.openModal();
|
|
11057
|
+
}
|
|
11058
|
+
else {
|
|
11059
|
+
void this.closeModal();
|
|
11168
11060
|
}
|
|
11169
11061
|
},
|
|
11170
11062
|
},
|
|
@@ -11177,7 +11069,6 @@ class KolModal {
|
|
|
11177
11069
|
}
|
|
11178
11070
|
validateOn(value) {
|
|
11179
11071
|
if (typeof value === 'object' && value !== null) {
|
|
11180
|
-
featureHint('[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.');
|
|
11181
11072
|
const callbacks = {};
|
|
11182
11073
|
if (typeof value.onClose === 'function' || value.onClose === true) {
|
|
11183
11074
|
callbacks.onClose = value.onClose;
|
|
@@ -11213,7 +11104,9 @@ class KolModal {
|
|
|
11213
11104
|
"_label": [1],
|
|
11214
11105
|
"_on": [16],
|
|
11215
11106
|
"_width": [1],
|
|
11216
|
-
"state": [32]
|
|
11107
|
+
"state": [32],
|
|
11108
|
+
"openModal": [64],
|
|
11109
|
+
"closeModal": [64]
|
|
11217
11110
|
},
|
|
11218
11111
|
"$listeners$": undefined,
|
|
11219
11112
|
"$lazyBundleId$": "-",
|
|
@@ -11330,11 +11223,11 @@ class KolNav {
|
|
|
11330
11223
|
const collapsible = this.state._collapsible === true;
|
|
11331
11224
|
const hideLabel = this.state._hideLabel === true;
|
|
11332
11225
|
const orientation = this.state._orientation;
|
|
11333
|
-
return (hAsync(Host, { key: '
|
|
11226
|
+
return (hAsync(Host, { key: 'e5df59a6b0f2955c7ffe0a1b8ae05828d089a03a', class: "kol-nav" }, hAsync("div", { key: '5d82a8a378240b280609a81899cb8252983ee0b9', class: {
|
|
11334
11227
|
nav: true,
|
|
11335
11228
|
[orientation]: true,
|
|
11336
11229
|
'is-compact': this.state._hideLabel,
|
|
11337
|
-
} }, hAsync("nav", { key: '
|
|
11230
|
+
} }, hAsync("nav", { key: '10ccef9a51a0c52f74edeacca8c484cded85ccdd', "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: '64913625fc3f3d8ffd61edd3cb6c720b816e1d79', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })), hasCompactButton && (hAsync("div", { key: 'e6578b70620b8039bc1b9ec85eb994eac960d675', class: "compact" }, hAsync(KolButtonTag, { key: '9fa2d5bb11c1ae77020d7329cb0fd70050b4e58d', _ariaControls: "nav", _ariaExpanded: !hideLabel, _icons: hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
|
|
11338
11231
|
onClick: () => {
|
|
11339
11232
|
this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel === false });
|
|
11340
11233
|
},
|
|
@@ -13801,11 +13694,11 @@ class KolPopover {
|
|
|
13801
13694
|
registerInstance(this, hostRef);
|
|
13802
13695
|
this.hidePopoverByEscape = (event) => {
|
|
13803
13696
|
if (event.key === 'Escape')
|
|
13804
|
-
this.hidePopover();
|
|
13697
|
+
this.hidePopover(event);
|
|
13805
13698
|
};
|
|
13806
13699
|
this.hidePopoverByClickOutside = (event) => {
|
|
13807
13700
|
if (this.host && !this.host.contains(event.target)) {
|
|
13808
|
-
this.hidePopover();
|
|
13701
|
+
this.hidePopover(event);
|
|
13809
13702
|
}
|
|
13810
13703
|
};
|
|
13811
13704
|
this.catchHostAndTriggerElement = (element) => {
|
|
@@ -13821,9 +13714,11 @@ class KolPopover {
|
|
|
13821
13714
|
this.arrowElement = element;
|
|
13822
13715
|
};
|
|
13823
13716
|
this._align = 'top';
|
|
13717
|
+
this._on = undefined;
|
|
13824
13718
|
this._show = false;
|
|
13825
13719
|
this.state = {
|
|
13826
13720
|
_align: 'top',
|
|
13721
|
+
_on: {},
|
|
13827
13722
|
_show: false,
|
|
13828
13723
|
_visible: false,
|
|
13829
13724
|
};
|
|
@@ -13840,12 +13735,13 @@ class KolPopover {
|
|
|
13840
13735
|
this.state = Object.assign(Object.assign({}, this.state), { _visible: true });
|
|
13841
13736
|
}
|
|
13842
13737
|
}
|
|
13843
|
-
hidePopover() {
|
|
13844
|
-
var _a;
|
|
13738
|
+
hidePopover(event) {
|
|
13739
|
+
var _a, _b, _c;
|
|
13845
13740
|
this.state = Object.assign(Object.assign({}, this.state), { _visible: false });
|
|
13846
13741
|
this._show = false;
|
|
13847
13742
|
(_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.focus();
|
|
13848
13743
|
this.removeListenersToBody();
|
|
13744
|
+
(_c = (_b = this.state._on) === null || _b === void 0 ? void 0 : _b.onClose) === null || _c === void 0 ? void 0 : _c.call(_b, event);
|
|
13849
13745
|
}
|
|
13850
13746
|
addListenersToBody() {
|
|
13851
13747
|
var _a;
|
|
@@ -13866,11 +13762,14 @@ class KolPopover {
|
|
|
13866
13762
|
});
|
|
13867
13763
|
}
|
|
13868
13764
|
render() {
|
|
13869
|
-
return (hAsync(Host, { key: '
|
|
13765
|
+
return (hAsync(Host, { key: '08aee53cfe44cbf919c23ead27450c60503f3ae9', ref: this.catchHostAndTriggerElement, class: "kol-popover" }, hAsync("div", { key: '2d9e3ca85b144564023029ef1cd89d78059bea4b', class: { popover: true, show: this.state._visible }, ref: this.catchPopoverElement, hidden: !this.state._show }, hAsync("div", { key: '5174ee3c34a5ab1b130f0a2412cb595dd312fe9b', class: `arrow ${this.state._align}`, ref: this.catchArrowElement }), hAsync("slot", { key: 'a1756190c8f58cfbb7f318a1f93b494843f4c3db' }))));
|
|
13870
13766
|
}
|
|
13871
13767
|
validateAlign(value) {
|
|
13872
13768
|
validateAlign(this, value);
|
|
13873
13769
|
}
|
|
13770
|
+
validateOn(value) {
|
|
13771
|
+
validatePopoverCallbacks(this, value);
|
|
13772
|
+
}
|
|
13874
13773
|
validateShow(value) {
|
|
13875
13774
|
validateShow(this, value);
|
|
13876
13775
|
if (value)
|
|
@@ -13882,6 +13781,7 @@ class KolPopover {
|
|
|
13882
13781
|
}
|
|
13883
13782
|
static get watchers() { return {
|
|
13884
13783
|
"_align": ["validateAlign"],
|
|
13784
|
+
"_on": ["validateOn"],
|
|
13885
13785
|
"_show": ["validateShow"]
|
|
13886
13786
|
}; }
|
|
13887
13787
|
static get style() { return KolPopoverWcStyle0; }
|
|
@@ -13890,6 +13790,7 @@ class KolPopover {
|
|
|
13890
13790
|
"$tagName$": "kol-popover-wc",
|
|
13891
13791
|
"$members$": {
|
|
13892
13792
|
"_align": [1],
|
|
13793
|
+
"_on": [16],
|
|
13893
13794
|
"_show": [1540],
|
|
13894
13795
|
"state": [32]
|
|
13895
13796
|
},
|
|
@@ -13942,7 +13843,7 @@ class KolProcess {
|
|
|
13942
13843
|
};
|
|
13943
13844
|
}
|
|
13944
13845
|
render() {
|
|
13945
|
-
return (hAsync(Host, { key: '
|
|
13846
|
+
return (hAsync(Host, { key: 'dd9bd33793492d68c12244d65bc496b3854a5ff8', class: "kol-progress" }, createProgressSVG(this.state), hAsync("progress", { key: '11bcc7740948e6cda74526ad8941166834771cde', "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: '6bbf5a8e7dc9ac05f7e64f5a4e67241a48aa44b2', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, this.state._liveValue, " von ", this.state._max, " ", this.state._unit)));
|
|
13946
13847
|
}
|
|
13947
13848
|
validateLabel(value) {
|
|
13948
13849
|
validateLabel(this, value);
|
|
@@ -14051,9 +13952,9 @@ class KolQuote {
|
|
|
14051
13952
|
}
|
|
14052
13953
|
render() {
|
|
14053
13954
|
const hasExpertSlot = showExpertSlot(this.state._quote);
|
|
14054
|
-
return (hAsync(Host, { key: '
|
|
13955
|
+
return (hAsync(Host, { key: '08232b44e1ee7d5f3acfc4fcd846fa85a9731b0f', class: "kol-quote" }, hAsync("figure", { key: '23b315c6c5b6ca342fa0c88b08c8d335ffb032d6', class: {
|
|
14055
13956
|
[this.state._variant]: true,
|
|
14056
|
-
} }, this.state._variant === 'block' ? (hAsync("blockquote", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))), typeof this.state._label === 'string' && this.state._label.length > 0 && (hAsync("figcaption", { key: '
|
|
13957
|
+
} }, this.state._variant === 'block' ? (hAsync("blockquote", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))), typeof this.state._label === 'string' && this.state._label.length > 0 && (hAsync("figcaption", { key: '5c5b876fb1ec7230f478e3283e056ae72dfba220' }, hAsync("cite", { key: 'b264ba94846f2b895d6d400b7d4f642445111cbf' }, hAsync(KolLinkTag, { key: 'b32b9d1716549f5a3b3d9b96ac74e534eb03cf60', _href: this.state._href, _label: this.state._label, _target: "_blank" })))))));
|
|
14057
13958
|
}
|
|
14058
13959
|
static get watchers() { return {
|
|
14059
13960
|
"_label": ["validateLabel"],
|
|
@@ -14191,16 +14092,16 @@ class KolSelect {
|
|
|
14191
14092
|
render() {
|
|
14192
14093
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
14193
14094
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
14194
|
-
return (hAsync(Host, { key: '
|
|
14095
|
+
return (hAsync(Host, { key: '5c65d97077bdf5a3d3464e1e99b1250ee73f5854', class: { 'kol-select': true, 'has-value': this.state._hasValue } }, hAsync(KolInputWcTag, { key: 'a25c65cad1afdb4af663dc4f1f1d59953cb5541d', class: {
|
|
14195
14096
|
'hide-label': !!this.state._hideLabel,
|
|
14196
14097
|
select: true,
|
|
14197
|
-
}, _accessKey: this.state._accessKey, _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, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '
|
|
14098
|
+
}, _accessKey: this.state._accessKey, _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, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'e17163aa892c06a4cb4cc436646a9a6987426ba4', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '6bb946f289f25dfb3eae4d59d090d6d087f90cce', slot: "input" }, hAsync("form", { key: '3779103b74a973a67e5c20f0882a78c3c0a84a01', onSubmit: (event) => {
|
|
14198
14099
|
event.preventDefault();
|
|
14199
14100
|
propagateSubmitEventToForm({
|
|
14200
14101
|
form: this.host,
|
|
14201
14102
|
ref: this.selectRef,
|
|
14202
14103
|
});
|
|
14203
|
-
} }, hAsync("input", { key: '
|
|
14104
|
+
} }, hAsync("input", { key: '77a378acca5561f63e8ae062e0de4e068fd50b96', type: "submit", hidden: true }), hAsync("select", Object.assign({ key: '89d75cef3db8e79fdb8a29948a23b88c4225eac5', 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, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this) }), this.state._options.map((option, index) => {
|
|
14204
14105
|
const key = `-${index}`;
|
|
14205
14106
|
if (Array.isArray(option.options)) {
|
|
14206
14107
|
return this.renderOptgroup(option, key);
|
|
@@ -14539,11 +14440,11 @@ class KolSingleSelect {
|
|
|
14539
14440
|
render() {
|
|
14540
14441
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
14541
14442
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
14542
|
-
return (hAsync(Host, { key: '
|
|
14443
|
+
return (hAsync(Host, { key: '6632738ce79fd7abfc1b0bc067904d544cde10ba', class: "kol-single-select" }, hAsync("div", { key: '36a27b4a40e8852831420282a0cb85f3edc3d60a', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputWcTag, { key: 'afa776c0f013c322fb2a19a7ca305bb58a2701ef', _accessKey: this.state._accessKey, _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, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, role: `presentation` }, hAsync("span", { key: 'ab137cc937967e4c69e1cb38078f2f7d906c0cf2', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '9e6f4178c2000d3c858fca7e8a782b255d739fdb', slot: "input" }, hAsync("div", { key: '363af0c87cafb931c104aa6645dfb4b394149cc2', class: "single-select__group" }, hAsync("input", Object.assign({ key: '19117c459f3879cf93bf0b83daae0b5d2135319f', 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, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), placeholder: this.state._placeholder, onClick: this.toggleListbox.bind(this) })), this._inputValue && (hAsync(KolIconTag, { key: '3d7d302de15eb18d75c0576fefd97a95bb1f845f', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
|
|
14543
14444
|
var _a;
|
|
14544
14445
|
this.clearSelection();
|
|
14545
14446
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
14546
|
-
}, class: "single-select__delete" })), hAsync("button", { key: '
|
|
14447
|
+
}, class: "single-select__delete" })), hAsync("button", { key: '19bc6add00f14fe17e1592ede5d2f57888c6f24d', tabindex: "-1", class: "single-select__button", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '4ff71a635386b7c68e2b4e941fd49d2410d6d973', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: 'dfd6401798800cd78eb68a1b42d969a6b098b058', 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) => {
|
|
14547
14448
|
if (el)
|
|
14548
14449
|
this.refOptions[index] = el;
|
|
14549
14450
|
}, tabIndex: -1, role: "option", "aria-selected": this.state._value === option.value, onClick: (event) => {
|
|
@@ -14885,7 +14786,7 @@ class KolSkipNav {
|
|
|
14885
14786
|
};
|
|
14886
14787
|
}
|
|
14887
14788
|
render() {
|
|
14888
|
-
return (hAsync(Host, { key: '
|
|
14789
|
+
return (hAsync(Host, { key: '4e6cc58e69b97bfdafd1f342755908836984e6c0', class: "kol-skip-nav" }, hAsync("nav", { key: '436a02841a32b66e829b2f80021a0530cd404f68', "aria-label": this.state._label }, hAsync("ul", { key: 'f3475e1b8c53cb26b3cd00b21c1ce5eac570bc61' }, this.state._links.map((link, index) => {
|
|
14889
14790
|
return (hAsync("li", { key: index }, hAsync(KolLinkWcTag, Object.assign({}, link))));
|
|
14890
14791
|
})))));
|
|
14891
14792
|
}
|
|
@@ -23273,10 +23174,10 @@ class KolSpanWc {
|
|
|
23273
23174
|
render() {
|
|
23274
23175
|
var _a, _b, _c, _d, _e;
|
|
23275
23176
|
const hideExpertSlot = !showExpertSlot(this.state._label);
|
|
23276
|
-
return (hAsync(Host, { key: '
|
|
23177
|
+
return (hAsync(Host, { key: '0a15150866920a51833e591397e7ff1624c89fc7', class: {
|
|
23277
23178
|
'kol-span-wc': true,
|
|
23278
23179
|
'hide-label': !!this.state._hideLabel,
|
|
23279
|
-
} }, this.state._icons.top && (hAsync(KolIconTag, { key: '
|
|
23180
|
+
} }, this.state._icons.top && (hAsync(KolIconTag, { key: 'a13817ec7df7d39bbe765123bd36bbb1f58aa237', class: "icon top", style: this.state._icons.top.style, _label: (_a = this.state._icons.top.label) !== null && _a !== void 0 ? _a : '', _icons: this.state._icons.top.icon })), hAsync("span", { key: '6f86eba44456d1ab64d17a679c5c6e124dc1e66c' }, this.state._icons.left && (hAsync(KolIconTag, { key: 'd08648696cbde3838c671d1166bd216faf4a5bd4', class: "icon left", style: this.state._icons.left.style, _label: (_b = this.state._icons.left.label) !== null && _b !== void 0 ? _b : '', _icons: this.state._icons.left.icon })), !this.state._hideLabel && hideExpertSlot ? (this.state._allowMarkdown && typeof this.state._label === 'string' && this.state._label.length > 0 ? (hAsync("span", { class: "span-label md", innerHTML: md(this.state._label) })) : (hAsync("span", { class: "span-label" }, this.state._accessKey && this.state._label.length ? (hAsync(InternalUnderlinedAccessKey, { label: this.state._label, accessKey: this.state._accessKey })) : (((_c = this.state._label) !== null && _c !== void 0 ? _c : ''))))) : (''), hAsync("span", { key: 'f39592d70030926a72ab412e4c57cee3e3ff61ce', "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { key: 'c5db531a6ffa0c7f57b2b519a639243b18e80f21', name: "expert" })), this.state._accessKey && (hAsync("span", { key: '2c95c5bef57088bf228232a3ee4b1c8ecaa733e0', class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey)), this.state._icons.right && (hAsync(KolIconTag, { key: 'e308c7c357ce1877d0ab1d41fca33ba829c21b81', class: "icon right", style: this.state._icons.right.style, _label: (_d = this.state._icons.right.label) !== null && _d !== void 0 ? _d : '', _icons: this.state._icons.right.icon }))), this.state._icons.bottom && (hAsync(KolIconTag, { key: 'c2712ceb758105651d8164daf8cd558b29c2e2ab', class: "icon bottom", style: this.state._icons.bottom.style, _label: (_e = this.state._icons.bottom.label) !== null && _e !== void 0 ? _e : '', _icons: this.state._icons.bottom.icon }))));
|
|
23280
23181
|
}
|
|
23281
23182
|
validateAccessKey(value) {
|
|
23282
23183
|
validateAccessKey(this, value);
|
|
@@ -23354,7 +23255,7 @@ class KolSpin {
|
|
|
23354
23255
|
};
|
|
23355
23256
|
}
|
|
23356
23257
|
render() {
|
|
23357
|
-
return (hAsync(Host, { key: '
|
|
23258
|
+
return (hAsync(Host, { key: '1341f6f7b72ff1c95f3a73f163364342172d5cad', class: "kol-spin" }, this.state._show ? (hAsync("span", { "aria-busy": "true", "aria-label": translate('kol-action-running'), "aria-live": "polite", class: {
|
|
23358
23259
|
spin: true,
|
|
23359
23260
|
[this.state._variant]: true,
|
|
23360
23261
|
}, role: "alert" }, renderSpin(this.state._variant))) : (this.showToggled && hAsync("span", { "aria-label": translate('kol-action-done'), "aria-busy": "false", "aria-live": "polite", role: "alert" }))));
|
|
@@ -23391,7 +23292,7 @@ class KolSpin {
|
|
|
23391
23292
|
}; }
|
|
23392
23293
|
}
|
|
23393
23294
|
|
|
23394
|
-
const defaultStyleCss$9 = "@layer kol-global {\n .sc-kol-split-button-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-split-button-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-split-button-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-split-button-default-h {\n display: flex;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .
|
|
23295
|
+
const defaultStyleCss$9 = "@layer kol-global {\n .sc-kol-split-button-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-split-button-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-split-button-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-split-button-default-h {\n display: flex;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .split-button-root {\n display: flex;\n position: relative;\n }\n .main-button {\n flex-grow: 1;\n text-align: left;\n }\n .kol-popover .popover {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-popover .arrow {\n display: none;\n }\n}";
|
|
23395
23296
|
var KolSplitButtonDefaultStyle0 = defaultStyleCss$9;
|
|
23396
23297
|
|
|
23397
23298
|
class KolSplitButton {
|
|
@@ -23409,32 +23310,11 @@ class KolSplitButton {
|
|
|
23409
23310
|
},
|
|
23410
23311
|
};
|
|
23411
23312
|
this.clickToggleHandler = { onClick: () => this.toggleDropdown() };
|
|
23412
|
-
this.
|
|
23413
|
-
|
|
23414
|
-
this.dropdown.style.height = `${this.dropdownContent.clientHeight}px`;
|
|
23415
|
-
this.state = Object.assign(Object.assign({}, this.state), { _show: true });
|
|
23416
|
-
}
|
|
23313
|
+
this.toggleDropdown = () => {
|
|
23314
|
+
this.state = Object.assign(Object.assign({}, this.state), { _show: !this.state._show });
|
|
23417
23315
|
};
|
|
23418
|
-
this.
|
|
23419
|
-
|
|
23420
|
-
this.dropdown.style.height = ``;
|
|
23421
|
-
this.state = Object.assign(Object.assign({}, this.state), { _show: false });
|
|
23422
|
-
}
|
|
23423
|
-
};
|
|
23424
|
-
this.toggleDropdown = (value) => {
|
|
23425
|
-
const openIt = typeof value === 'boolean' ? value : !this.state._show;
|
|
23426
|
-
if (openIt)
|
|
23427
|
-
this.openDropdown();
|
|
23428
|
-
else
|
|
23429
|
-
this.closeDropdown();
|
|
23430
|
-
};
|
|
23431
|
-
this.catchDropdownElements = (e) => {
|
|
23432
|
-
if (e) {
|
|
23433
|
-
this.dropdown = e;
|
|
23434
|
-
setTimeout(() => {
|
|
23435
|
-
this.dropdownContent = e.firstChild;
|
|
23436
|
-
});
|
|
23437
|
-
}
|
|
23316
|
+
this.handleOnClose = () => {
|
|
23317
|
+
this.state = Object.assign(Object.assign({}, this.state), { _show: false });
|
|
23438
23318
|
};
|
|
23439
23319
|
this._ariaControls = undefined;
|
|
23440
23320
|
this._ariaExpanded = undefined;
|
|
@@ -23460,12 +23340,15 @@ class KolSplitButton {
|
|
|
23460
23340
|
}
|
|
23461
23341
|
render() {
|
|
23462
23342
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
23463
|
-
return (hAsync(Host, { key: '
|
|
23343
|
+
return (hAsync(Host, { key: '37ae6c094c635a1bc78d02370e730ccf1ec2cdc0', class: "kol-split-button" }, hAsync("div", { key: 'ed9ac9cc52557bc2387384da318969459239cb78', class: "split-button-root" }, hAsync(KolButtonWcTag, { key: 'a84ee1b2813033b3efbe3de9efff5580ecea9a10', class: {
|
|
23464
23344
|
'main-button': true,
|
|
23465
23345
|
button: true,
|
|
23466
23346
|
[this._variant]: this._variant !== 'custom',
|
|
23467
23347
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
23468
|
-
}, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: '
|
|
23348
|
+
}, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: 'f9339fd48f7356ae13778c0106b5a5df9eacbaaa', class: "horizontal-line" }), hAsync(KolButtonWcTag, { key: '7094c820ed1d5310d7c64c3c1fbe31b8be9c56d6', class: "secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler })), hAsync(KolPopoverWcTag, { key: '826390e11aea4835fe3b1e44902901b915d740d6', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: '8156ebb3e9cc9b7171e566b15511114348e38ebb' }))));
|
|
23349
|
+
}
|
|
23350
|
+
closePopup() {
|
|
23351
|
+
this.handleOnClose();
|
|
23469
23352
|
}
|
|
23470
23353
|
static get style() { return {
|
|
23471
23354
|
default: KolSplitButtonDefaultStyle0
|
|
@@ -23492,7 +23375,8 @@ class KolSplitButton {
|
|
|
23492
23375
|
"_type": [1],
|
|
23493
23376
|
"_value": [8],
|
|
23494
23377
|
"_variant": [1],
|
|
23495
|
-
"state": [32]
|
|
23378
|
+
"state": [32],
|
|
23379
|
+
"closePopup": [64]
|
|
23496
23380
|
},
|
|
23497
23381
|
"$listeners$": undefined,
|
|
23498
23382
|
"$lazyBundleId$": "-",
|
|
@@ -23511,7 +23395,7 @@ class KolSymbol {
|
|
|
23511
23395
|
};
|
|
23512
23396
|
}
|
|
23513
23397
|
render() {
|
|
23514
|
-
return (hAsync(Host, { key: '
|
|
23398
|
+
return (hAsync(Host, { key: '0cf724ad64920f8a2a9818302ad4ec9d428c52b2', class: "kol-symbol" }, hAsync("span", { key: '46cacaa73fc9b86e9f008d69216dd4b14ca58210', "aria-label": this.state._label, role: "term" }, this.state._symbol)));
|
|
23515
23399
|
}
|
|
23516
23400
|
validateLabel(value) {
|
|
23517
23401
|
validateLabel(this, value, {
|
|
@@ -23560,7 +23444,7 @@ class KolTable {
|
|
|
23560
23444
|
this._on = undefined;
|
|
23561
23445
|
}
|
|
23562
23446
|
render() {
|
|
23563
|
-
return (hAsync(KolTableStatefulTag, { key: '
|
|
23447
|
+
return (hAsync(KolTableStatefulTag, { key: '6c05308ac2b733a308a73068d193f1cec829406a', _allowMultiSort: this._allowMultiSort, _data: this._data, _dataFoot: this._dataFoot, _headers: this._headers, _label: this._label, _minWidth: this._minWidth, _pagination: this._pagination, _paginationPosition: this._paginationPosition, _selection: this._selection, _on: this._on }));
|
|
23564
23448
|
}
|
|
23565
23449
|
static get cmpMeta() { return {
|
|
23566
23450
|
"$flags$": 9,
|
|
@@ -23604,6 +23488,7 @@ var Events;
|
|
|
23604
23488
|
Events["onSort"] = "onSort";
|
|
23605
23489
|
Events["onSelectionChange"] = "onSelectionChange";
|
|
23606
23490
|
Events["onSubmit"] = "onSubmit";
|
|
23491
|
+
Events["onClose"] = "onClose";
|
|
23607
23492
|
})(Events || (Events = {}));
|
|
23608
23493
|
|
|
23609
23494
|
const defaultStyleCss$8 = "@layer kol-global {\n .sc-kol-table-stateful-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-table-stateful-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-table-stateful-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-table-stateful-default-h {\n display: block;\n }\n}\n@layer kol-component {\n :root {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n div.pagination .kol-pagination {\n display: flex;\n flex-wrap: wrap;\n }\n div.pagination,\n div.pagination > div:last-child {\n display: grid;\n place-items: center;\n }\n @media (max-width: 1024px) {\n div.pagination .kol-pagination {\n flex-direction: column;\n }\n }\n @media (min-width: 1024px) {\n div.pagination,\n div.pagination > div:last-child {\n grid-auto-flow: column;\n }\n div.pagination .kol-pagination {\n display: flex;\n }\n }\n}\n@layer kol-component {\n .sc-kol-table-stateful-default-h,\n .kol-table-stateless-wc {\n display: block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .table {\n max-width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n }\n table {\n width: 100%;\n }\n caption {\n text-align: start;\n }\n .focus-element {\n font-size: 0;\n }\n .focus-element:focus {\n outline: 0 !important;\n }\n .table:has(.focus-element:focus) {\n \n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n .table-sort-button .button {\n color: inherit;\n }\n tbody th,\n th.align-left {\n text-align: left;\n }\n tbody th .table-sort-button .button-inner,\n th.align-left .table-sort-button .button-inner {\n justify-items: start;\n }\n th.align-center {\n text-align: center;\n }\n th.align-center .table-sort-button .button-inner {\n justify-items: center;\n }\n th.align-right {\n text-align: right;\n }\n th.align-right .table-sort-button .button-inner {\n justify-items: end;\n }\n .selection-header-cell {\n width: 0;\n }\n .selection-cell {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .input label {\n align-items: center;\n cursor: pointer;\n display: flex;\n height: var(--a11y-min-size);\n justify-content: center;\n position: relative;\n width: var(--a11y-min-size);\n }\n .input .icon {\n display: block;\n inset: auto;\n position: absolute;\n z-index: 1;\n }\n .input input {\n appearance: none;\n border-style: solid;\n cursor: pointer;\n margin: 0;\n }\n .input input:before {\n content: \"\";\n }\n .input input[type=checkbox] {\n position: relative;\n display: flex;\n height: calc(var(--a11y-min-size) / 2);\n width: calc(var(--a11y-min-size) / 2);\n align-items: center;\n justify-content: center;\n background-color: rgb(255, 255, 255);\n border-width: 2px;\n line-height: 24px;\n transition: all 0.5s ease 0s;\n }\n .input input[type=radio] {\n display: flex;\n border-width: 2px;\n border-radius: 100%;\n height: 1.5em;\n min-height: 1.5em;\n min-width: 1.5em;\n padding: 0;\n width: 1.5em;\n }\n .input input[type=radio]:before {\n border-radius: 100%;\n margin: auto;\n height: 0.75em;\n width: 0.75em;\n }\n .input input[type=radio]:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .input input[type=radio]:checked:before {\n \n background: selectedItem !important;\n }\n }\n}";
|
|
@@ -23973,7 +23858,7 @@ class KolTableStateful {
|
|
|
23973
23858
|
horizontal: (_c = this.state._headers.horizontal) === null || _c === void 0 ? void 0 : _c.map((row) => row.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) })))),
|
|
23974
23859
|
vertical: (_d = this.state._headers.vertical) === null || _d === void 0 ? void 0 : _d.map((column) => column.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) })))),
|
|
23975
23860
|
};
|
|
23976
|
-
return (hAsync(Host, { key: '
|
|
23861
|
+
return (hAsync(Host, { key: '06dd5f12e9182fe2db630dcdd0f2645d4867b8e5', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: '565eef88ba587eb4aa76b629c01c1d9e1ccf5d98', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
|
|
23977
23862
|
onSort: (_, payload) => {
|
|
23978
23863
|
this.handleSort(payload);
|
|
23979
23864
|
},
|
|
@@ -24036,7 +23921,7 @@ class KolTableStateless$1 {
|
|
|
24036
23921
|
this._selection = undefined;
|
|
24037
23922
|
}
|
|
24038
23923
|
render() {
|
|
24039
|
-
return (hAsync(Host, { key: '
|
|
23924
|
+
return (hAsync(Host, { key: 'bc31faa17c1bc6a0140e1bf45809f7ec68d3f4e2', class: "kol-table-stateless" }, hAsync(KolTableStatelessWcTag, { key: '5266f761e857f72bfc92a5621df322b294e97e17', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection })));
|
|
24040
23925
|
}
|
|
24041
23926
|
static get style() { return {
|
|
24042
23927
|
default: KolTableStatelessDefaultStyle0
|
|
@@ -24346,18 +24231,18 @@ class KolTableStateless {
|
|
|
24346
24231
|
this.validateSelection(this._selection);
|
|
24347
24232
|
}
|
|
24348
24233
|
renderSelectionCell(row, rowIndex) {
|
|
24349
|
-
var _a, _b;
|
|
24234
|
+
var _a, _b, _c;
|
|
24350
24235
|
const selection = this.state._selection;
|
|
24351
24236
|
if (!selection)
|
|
24352
24237
|
return '';
|
|
24353
24238
|
const keyPropertyName = (_a = selection.keyPropertyName) !== null && _a !== void 0 ? _a : 'id';
|
|
24354
|
-
const
|
|
24355
|
-
if (!
|
|
24239
|
+
const firstCellData = (_b = row[0]) === null || _b === void 0 ? void 0 : _b.data;
|
|
24240
|
+
if (!firstCellData)
|
|
24356
24241
|
return '';
|
|
24242
|
+
const keyProperty = firstCellData[keyPropertyName];
|
|
24357
24243
|
const isMultiple = selection.multiple || selection.multiple === undefined;
|
|
24358
|
-
const
|
|
24359
|
-
const
|
|
24360
|
-
const label = selection.label(keyCell.data);
|
|
24244
|
+
const selected = (_c = selection === null || selection === void 0 ? void 0 : selection.selectedKeys) === null || _c === void 0 ? void 0 : _c.includes(keyProperty);
|
|
24245
|
+
const label = selection.label(firstCellData);
|
|
24361
24246
|
const props = {
|
|
24362
24247
|
name: 'selection',
|
|
24363
24248
|
checked: selected,
|
|
@@ -24446,9 +24331,9 @@ class KolTableStateless {
|
|
|
24446
24331
|
}
|
|
24447
24332
|
render() {
|
|
24448
24333
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
24449
|
-
return (hAsync(Host, { key: '
|
|
24334
|
+
return (hAsync(Host, { key: 'f85ebbd2b4eec795d4964c70a7a7f8a198cb869d', class: "kol-table-stateless-wc" }, hAsync("div", { key: 'c52014d109db7569fae4c0973e0e34477841766c', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: 'b4a41732a9ec6000838e8288e3ccff3ccf04be5f', style: {
|
|
24450
24335
|
minWidth: this.state._minWidth,
|
|
24451
|
-
} }, hAsync("div", { key: '
|
|
24336
|
+
} }, hAsync("div", { key: '8a32442c4a628c954ac7c3d7760305ba9888beff', class: "focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: 'befbf4e6dffc310bcac6f03e9f8e1ffc085a874c', id: "caption" }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: 'fff15522007732fb25994abbdcb495cf12c16ac8' }, this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), cols.map((cell, colIndex) => {
|
|
24452
24337
|
if (cell.asTd === true) {
|
|
24453
24338
|
return (hAsync("td", { key: `thead-${rowIndex}-${colIndex}-${cell.label}`, class: {
|
|
24454
24339
|
[cell.textAlign]: typeof cell.textAlign === 'string' && cell.textAlign.length > 0,
|
|
@@ -24464,7 +24349,7 @@ class KolTableStateless {
|
|
|
24464
24349
|
else {
|
|
24465
24350
|
return this.renderHeadingCell(cell, rowIndex, colIndex);
|
|
24466
24351
|
}
|
|
24467
|
-
})))))), hAsync("tbody", { key: '
|
|
24352
|
+
})))))), hAsync("tbody", { key: '002e28758e482e0f3d7268066dbaff3974eabb2a' }, dataField.map(this.renderTableRow)), this.renderFoot()))));
|
|
24468
24353
|
}
|
|
24469
24354
|
get host() { return getElement(this); }
|
|
24470
24355
|
static get watchers() { return {
|
|
@@ -24655,11 +24540,11 @@ class KolTabs {
|
|
|
24655
24540
|
} }))));
|
|
24656
24541
|
}
|
|
24657
24542
|
render() {
|
|
24658
|
-
return (hAsync(Host, { key: '
|
|
24543
|
+
return (hAsync(Host, { key: '22ca75e66e106214c5c2217a6a0adab34eda3bae', class: "kol-tabs" }, hAsync("div", { key: '0e277a0bb2bec27aeb29ad0fec3d736936fb4269', ref: (el) => {
|
|
24659
24544
|
this.tabPanelsElement = el;
|
|
24660
24545
|
}, class: {
|
|
24661
24546
|
[`tabs-align-${this.state._align}`]: true,
|
|
24662
|
-
} }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
24547
|
+
} }, this.renderButtonGroup(), hAsync("div", { key: '9fa8c95bf70a8cb254818edb27864975979e5830', class: "tabs-content", ref: this.catchTabPanelHost }))));
|
|
24663
24548
|
}
|
|
24664
24549
|
validateAlign(value) {
|
|
24665
24550
|
validateAlign(this, value);
|
|
@@ -24871,7 +24756,7 @@ class KolTextarea {
|
|
|
24871
24756
|
render() {
|
|
24872
24757
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
24873
24758
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
24874
|
-
return (hAsync(Host, { key: '
|
|
24759
|
+
return (hAsync(Host, { key: '1acff0b5b2cd42f3ac647cc5e417c2e9c255b0bf', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync(KolInputWcTag, { key: '87ed73dbc8ea546bb02acafe72b59f5baf66f577', class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.state._alert, _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, _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: '181700f6d9d2c3579ccec39b7879426469bdd9e2', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '00acee7946e4d3a53827b7a5c8172ccfec49f8c2', slot: "input" }, hAsync("textarea", Object.assign({ key: '044957d12fd0edef8d2d68a492bd2a21f6997fe5', 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: "false" }, this.controller.onFacade, { onInput: this.onInput, style: {
|
|
24875
24760
|
resize: this.state._resize,
|
|
24876
24761
|
}, value: this.state._value }))))));
|
|
24877
24762
|
}
|
|
@@ -25158,7 +25043,7 @@ class KolToastContainer {
|
|
|
25158
25043
|
}
|
|
25159
25044
|
}
|
|
25160
25045
|
render() {
|
|
25161
|
-
return (hAsync(Host, { key: '
|
|
25046
|
+
return (hAsync(Host, { key: '69ede64a0d0e5bfcd817e943d5a7cb4512c4deb4', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: 'a05a1e8f4e8f3609ea815dfce9110f59791fa82e', _label: translate('kol-toast-close-all'), class: "close-all", _on: {
|
|
25162
25047
|
onClick: () => {
|
|
25163
25048
|
void this.closeAll();
|
|
25164
25049
|
},
|
|
@@ -25210,7 +25095,7 @@ class KolToolbar {
|
|
|
25210
25095
|
this._items = undefined;
|
|
25211
25096
|
}
|
|
25212
25097
|
render() {
|
|
25213
|
-
return (hAsync(Host, { key: '
|
|
25098
|
+
return (hAsync(Host, { key: '7b35047b6a4b216bc65b19c4d61551a78bf18649', class: "kol-toolbar" }, hAsync("div", { key: '5862588a0e355d5eb844283ab4e9a152a0773b7a', class: "toolbar", role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem))));
|
|
25214
25099
|
}
|
|
25215
25100
|
validateLabel(value) {
|
|
25216
25101
|
validateLabel(this, value);
|
|
@@ -25411,7 +25296,7 @@ class KolTooltipWc {
|
|
|
25411
25296
|
this.showOrHideTooltip();
|
|
25412
25297
|
}
|
|
25413
25298
|
render() {
|
|
25414
|
-
return (hAsync(Host, { key: '
|
|
25299
|
+
return (hAsync(Host, { key: 'bff5943ece35d93b5c8ea604af0171e9b0044fbc', class: "kol-tooltip-wc" }, this.state._label !== '' && (hAsync("div", { key: '11a90c4acfa2dbe2ffe61e1d10f0fe2cc30e6e99', class: "tooltip-floating", ref: this.catchTooltipElement }, hAsync("div", { key: 'faef6b2e53cb2e8fa90ab559dc08a3a77cd607e8', class: "tooltip-area tooltip-arrow", ref: this.catchArrowElement }), hAsync(KolSpanWcTag, { key: 'b89fbc1f793a6952886e6b9f8e1671645194e18f', class: "tooltip-area tooltip-content", id: this.state._id, _accessKey: this._accessKey, _label: this.state._label })))));
|
|
25415
25300
|
}
|
|
25416
25301
|
validateAccessKey(value) {
|
|
25417
25302
|
validateAccessKey(this, value);
|
|
@@ -25490,7 +25375,7 @@ class KolTree {
|
|
|
25490
25375
|
this._label = undefined;
|
|
25491
25376
|
}
|
|
25492
25377
|
render() {
|
|
25493
|
-
return (hAsync(Host, { key: '
|
|
25378
|
+
return (hAsync(Host, { key: '8429fa6589ac19c9e91cd8788a46066b239b19da', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: '62e9fbaa416ac2537bfb6609359f27364331ed67', _label: this._label }, hAsync("slot", { key: 'e3c3fbdc4df65a07c8c556b01c94e05056105df8' }))));
|
|
25494
25379
|
}
|
|
25495
25380
|
static get style() { return {
|
|
25496
25381
|
default: KolTreeDefaultStyle0
|
|
@@ -25538,7 +25423,7 @@ class KolTreeItem {
|
|
|
25538
25423
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
25539
25424
|
}
|
|
25540
25425
|
render() {
|
|
25541
|
-
return (hAsync(KolTreeItemWcTag, { key: '
|
|
25426
|
+
return (hAsync(KolTreeItemWcTag, { key: '3a1302f63ebb3210cb2bcd499036b6c07a9e8dfa', class: "kol-tree-item", _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: 'dd9f9d77adbf0bb012d76f0e0faa67f918fe8cc1' })));
|
|
25542
25427
|
}
|
|
25543
25428
|
static get style() { return {
|
|
25544
25429
|
default: KolTreeItemDefaultStyle0
|
|
@@ -25581,13 +25466,13 @@ class KolTreeItemWc {
|
|
|
25581
25466
|
}
|
|
25582
25467
|
render() {
|
|
25583
25468
|
const { _href, _active, _hasChildren, _open, _label } = this.state;
|
|
25584
|
-
return (hAsync(Host, { key: '
|
|
25469
|
+
return (hAsync(Host, { key: '80b4d8b5633b98cf7ebc12c3c9e50cd5a2617d4a', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-item-wc" }, hAsync("li", { key: '0dc520638d2452cc5687e192300192b22322dd25', class: "tree-item", style: {
|
|
25585
25470
|
'--level': `${this.level}`,
|
|
25586
|
-
} }, hAsync(KolLinkWcTag, { key: '
|
|
25471
|
+
} }, hAsync(KolLinkWcTag, { key: '6cf78c51ec92daaa5d29830eb1e6dd0147c12ee4', class: {
|
|
25587
25472
|
'tree-link': true,
|
|
25588
25473
|
'first-level': this.level === 0,
|
|
25589
25474
|
active: Boolean(_active),
|
|
25590
|
-
}, _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, hAsync("span", { key: '
|
|
25475
|
+
}, _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, hAsync("span", { key: '7681b6f5f59dc63fc025c2e6bf589478cd8e8db2', slot: "expert" }, _hasChildren && (hAsync("span", { key: 'e2504c3cd286758f562bad3238ded934ef4482f2', class: "toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, hAsync(KolIconTag, { key: '892da807da1e116a0c6c6b1566f7db6e087886ff', class: "toggle-button-icon", _icons: `codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`, _label: '' }))), ' ', _label)), hAsync("ul", { key: '45db8c2f2dd4681e7ec0c130df25b0f97c3553ac', hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: '3052b7252e4188563fb2253a738421a3238da9a3' })))));
|
|
25591
25476
|
}
|
|
25592
25477
|
validateActive(value) {
|
|
25593
25478
|
validateActive(this, value || false);
|
|
@@ -25692,7 +25577,7 @@ class KolTreeWc {
|
|
|
25692
25577
|
validateLabel(this, value);
|
|
25693
25578
|
}
|
|
25694
25579
|
render() {
|
|
25695
|
-
return (hAsync(Host, { key: '
|
|
25580
|
+
return (hAsync(Host, { key: '82bb52022bfdb49097211e6c467e470f83ec0556', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-wc" }, hAsync("nav", { key: 'ac29f20bba3f93dca3929f0eded5d99a3f2d7073', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: 'f5c927ab966ebf1c5d5a6b325f1321fee59eb816', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: '05ebe01c9fb3ec3293f7a45bf96aff8ebf9e8f0e' })))));
|
|
25696
25581
|
}
|
|
25697
25582
|
static isTreeItem(element) {
|
|
25698
25583
|
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
|
@@ -25887,7 +25772,7 @@ class KolVersion {
|
|
|
25887
25772
|
};
|
|
25888
25773
|
}
|
|
25889
25774
|
render() {
|
|
25890
|
-
return (hAsync(Host, { key: '
|
|
25775
|
+
return (hAsync(Host, { key: 'cf55dcd0e6bd1ba92ded64e876dcb98a31c0a549', class: "kol-version" }, hAsync(KolBadgeTag, { key: '0a38f83859051a625c416a50acc1a0ab40c69247', _color: "#bec5c9", _icons: {
|
|
25891
25776
|
left: { icon: 'codicon codicon-versions', label: translate('kol-version') },
|
|
25892
25777
|
}, _label: this.state._label })));
|
|
25893
25778
|
}
|