@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.mjs
CHANGED
|
@@ -4210,6 +4210,10 @@ const validatePaginationPosition = (component, value) => {
|
|
|
4210
4210
|
});
|
|
4211
4211
|
};
|
|
4212
4212
|
|
|
4213
|
+
const validatePopoverCallbacks = (component, value) => {
|
|
4214
|
+
watchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['PopoverCallbacksPropType {Events.onClose}']), value);
|
|
4215
|
+
};
|
|
4216
|
+
|
|
4213
4217
|
const validateReadOnly = (component, value) => {
|
|
4214
4218
|
watchBoolean(component, '_readOnly', value);
|
|
4215
4219
|
};
|
|
@@ -4378,6 +4382,7 @@ let KolInputWcTag = 'kol-input';
|
|
|
4378
4382
|
let KolLinkTag = 'kol-link';
|
|
4379
4383
|
let KolLinkWcTag = 'kol-link-wc';
|
|
4380
4384
|
let KolPaginationTag = 'kol-pagination';
|
|
4385
|
+
let KolPopoverWcTag = 'kol-popover-wc';
|
|
4381
4386
|
let KolSelectTag = 'kol-select';
|
|
4382
4387
|
let KolSpanWcTag = 'kol-span-wc';
|
|
4383
4388
|
let KolTableStatefulTag = 'kol-table-stateful';
|
|
@@ -5628,13 +5633,13 @@ class KolButtonWc {
|
|
|
5628
5633
|
var _a, _b;
|
|
5629
5634
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
5630
5635
|
const hasAriaDescription = Boolean((_b = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length);
|
|
5631
|
-
return (hAsync(Host, { key: '
|
|
5636
|
+
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: {
|
|
5632
5637
|
button: true,
|
|
5633
5638
|
disabled: this.state._disabled === true,
|
|
5634
5639
|
[this.state._variant]: this.state._variant !== 'custom',
|
|
5635
5640
|
[this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
5636
5641
|
'hide-label': this.state._hideLabel === true,
|
|
5637
|
-
}, 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: '
|
|
5642
|
+
}, 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))));
|
|
5638
5643
|
}
|
|
5639
5644
|
constructor(hostRef) {
|
|
5640
5645
|
registerInstance(this, hostRef);
|
|
@@ -6278,7 +6283,7 @@ class KolCombobox {
|
|
|
6278
6283
|
render() {
|
|
6279
6284
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
6280
6285
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
6281
|
-
return (hAsync(Host, { key: '
|
|
6286
|
+
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) &&
|
|
6282
6287
|
this._filteredSuggestions.length > 0 &&
|
|
6283
6288
|
this._filteredSuggestions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
|
|
6284
6289
|
if (el)
|
|
@@ -7269,7 +7274,7 @@ class KolIndentedTextWc {
|
|
|
7269
7274
|
this.state = {};
|
|
7270
7275
|
}
|
|
7271
7276
|
render() {
|
|
7272
|
-
return (hAsync(Host, { key: '
|
|
7277
|
+
return (hAsync(Host, { key: '64921f12c416fdba4dec29db15cca84fc8277ae4', class: "kol-indented-text-wc" }, hAsync("div", { key: '6f201cf35b3d217e079087e306ae1679dc17ec75' }, hAsync("slot", { key: 'ad4a24a8f8755694b514ac378cee2ecb90ee2722' }))));
|
|
7273
7278
|
}
|
|
7274
7279
|
static get cmpMeta() { return {
|
|
7275
7280
|
"$flags$": 4,
|
|
@@ -10993,129 +10998,12 @@ class KolLogo {
|
|
|
10993
10998
|
}; }
|
|
10994
10999
|
}
|
|
10995
11000
|
|
|
10996
|
-
|
|
10997
|
-
constructor() {
|
|
10998
|
-
this.lockedElements = new Map();
|
|
10999
|
-
this.modalStack = new Map();
|
|
11000
|
-
}
|
|
11001
|
-
lockElement(htmlElement) {
|
|
11002
|
-
const tabIndex = htmlElement.getAttribute('tabindex');
|
|
11003
|
-
if (htmlElement instanceof HTMLAnchorElement ||
|
|
11004
|
-
htmlElement instanceof HTMLButtonElement ||
|
|
11005
|
-
htmlElement instanceof HTMLInputElement ||
|
|
11006
|
-
htmlElement instanceof HTMLSelectElement ||
|
|
11007
|
-
htmlElement instanceof HTMLTextAreaElement ||
|
|
11008
|
-
typeof tabIndex === 'string' ||
|
|
11009
|
-
htmlElement.dataset.kolModal !== undefined) {
|
|
11010
|
-
if (typeof tabIndex === 'string') {
|
|
11011
|
-
this.lockedElements.set(htmlElement, {
|
|
11012
|
-
tabIndex,
|
|
11013
|
-
});
|
|
11014
|
-
}
|
|
11015
|
-
else {
|
|
11016
|
-
this.lockedElements.set(htmlElement, {});
|
|
11017
|
-
}
|
|
11018
|
-
htmlElement.setAttribute('tabindex', '-1');
|
|
11019
|
-
htmlElement.setAttribute('aria-hidden', 'true');
|
|
11020
|
-
htmlElement.style.userSelect = 'none';
|
|
11021
|
-
}
|
|
11022
|
-
}
|
|
11023
|
-
unlockElement(value, htmlElement) {
|
|
11024
|
-
if (typeof value.tabIndex === 'string') {
|
|
11025
|
-
htmlElement.setAttribute('tabindex', value.tabIndex);
|
|
11026
|
-
}
|
|
11027
|
-
else {
|
|
11028
|
-
htmlElement.removeAttribute('tabindex');
|
|
11029
|
-
}
|
|
11030
|
-
htmlElement.removeAttribute('aria-hidden');
|
|
11031
|
-
htmlElement.style.userSelect = 'unset';
|
|
11032
|
-
this.lockedElements.delete(htmlElement);
|
|
11033
|
-
}
|
|
11034
|
-
unlockLockedElements(lockedElements) {
|
|
11035
|
-
lockedElements.forEach(this.unlockElement.bind(this));
|
|
11036
|
-
}
|
|
11037
|
-
lockFocus(hostElement, excludeElement) {
|
|
11038
|
-
try {
|
|
11039
|
-
if (hostElement !== excludeElement && (hostElement instanceof HTMLElement || hostElement instanceof ShadowRoot)) {
|
|
11040
|
-
if (hostElement instanceof HTMLElement) {
|
|
11041
|
-
this.lockElement(hostElement);
|
|
11042
|
-
this.lockFocus(hostElement.shadowRoot, excludeElement);
|
|
11043
|
-
}
|
|
11044
|
-
for (let i = 0; i < hostElement.children.length; i++) {
|
|
11045
|
-
this.lockFocus(hostElement.children[i], excludeElement);
|
|
11046
|
-
}
|
|
11047
|
-
}
|
|
11048
|
-
}
|
|
11049
|
-
catch (error) {
|
|
11050
|
-
}
|
|
11051
|
-
}
|
|
11052
|
-
renderModalIfExists(activeElement) {
|
|
11053
|
-
if (activeElement instanceof HTMLElement) {
|
|
11054
|
-
if (this.lockedElements.has(activeElement)) {
|
|
11055
|
-
this.unlockElement(this.lockedElements.get(activeElement), activeElement);
|
|
11056
|
-
}
|
|
11057
|
-
const timeout = setTimeout(() => {
|
|
11058
|
-
clearTimeout(timeout);
|
|
11059
|
-
activeElement.focus();
|
|
11060
|
-
}, 500);
|
|
11061
|
-
}
|
|
11062
|
-
this.unlockLockedElements(this.lockedElements);
|
|
11063
|
-
if (this.modalStack.size > 0) {
|
|
11064
|
-
const modalKeys = Array.from(this.modalStack.keys());
|
|
11065
|
-
const modalRef = modalKeys[modalKeys.length - 1];
|
|
11066
|
-
this.modalStack.forEach((_value, htmlElement) => {
|
|
11067
|
-
if (modalRef === htmlElement) {
|
|
11068
|
-
htmlElement.style.display = 'inline';
|
|
11069
|
-
}
|
|
11070
|
-
else {
|
|
11071
|
-
htmlElement.style.display = `none`;
|
|
11072
|
-
}
|
|
11073
|
-
});
|
|
11074
|
-
getDocument().body.style.maxHeight = '100vh';
|
|
11075
|
-
getDocument().body.style.overflow = 'hidden';
|
|
11076
|
-
this.lockFocus(getDocument().body, modalRef);
|
|
11077
|
-
}
|
|
11078
|
-
else {
|
|
11079
|
-
getDocument().body.style.maxHeight = 'unset';
|
|
11080
|
-
getDocument().body.style.overflow = 'unset';
|
|
11081
|
-
}
|
|
11082
|
-
}
|
|
11083
|
-
openModal(modalRef, activeElement) {
|
|
11084
|
-
if (modalRef instanceof HTMLElement === false) {
|
|
11085
|
-
Log.warn(`[KolModalService] The DOM reference of the modal is not valid.`);
|
|
11086
|
-
}
|
|
11087
|
-
else {
|
|
11088
|
-
this.modalStack.set(modalRef, {
|
|
11089
|
-
activeElement,
|
|
11090
|
-
});
|
|
11091
|
-
this.renderModalIfExists();
|
|
11092
|
-
}
|
|
11093
|
-
}
|
|
11094
|
-
closeModal(modalRef) {
|
|
11095
|
-
var _a;
|
|
11096
|
-
if (modalRef instanceof HTMLElement === false) {
|
|
11097
|
-
Log.warn(`[KolModalService] The DOM reference of the modal is not valid.`);
|
|
11098
|
-
}
|
|
11099
|
-
else {
|
|
11100
|
-
const activeElement = (_a = this.modalStack.get(modalRef)) === null || _a === void 0 ? void 0 : _a.activeElement;
|
|
11101
|
-
this.modalStack.delete(modalRef);
|
|
11102
|
-
this.renderModalIfExists(activeElement);
|
|
11103
|
-
}
|
|
11104
|
-
}
|
|
11105
|
-
}
|
|
11106
|
-
|
|
11107
|
-
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}";
|
|
11001
|
+
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}";
|
|
11108
11002
|
var KolModalDefaultStyle0 = defaultStyleCss$i;
|
|
11109
11003
|
|
|
11110
|
-
const modalService = new ModalService();
|
|
11111
11004
|
class KolModal {
|
|
11112
11005
|
constructor(hostRef) {
|
|
11113
11006
|
registerInstance(this, hostRef);
|
|
11114
|
-
this.onKeyDown = (event) => {
|
|
11115
|
-
if (event && event.code === 'Escape') {
|
|
11116
|
-
this._activeElement = null;
|
|
11117
|
-
}
|
|
11118
|
-
};
|
|
11119
11007
|
this._activeElement = undefined;
|
|
11120
11008
|
this._label = undefined;
|
|
11121
11009
|
this._on = undefined;
|
|
@@ -11127,40 +11015,44 @@ class KolModal {
|
|
|
11127
11015
|
};
|
|
11128
11016
|
}
|
|
11129
11017
|
componentDidRender() {
|
|
11130
|
-
|
|
11131
|
-
|
|
11132
|
-
|
|
11133
|
-
}
|
|
11134
|
-
else {
|
|
11135
|
-
modalService.closeModal(this.hostElement);
|
|
11136
|
-
}
|
|
11018
|
+
var _a;
|
|
11019
|
+
if (this.state._activeElement) {
|
|
11020
|
+
(_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.showModal();
|
|
11137
11021
|
}
|
|
11138
11022
|
}
|
|
11139
11023
|
disconnectedCallback() {
|
|
11140
|
-
|
|
11141
|
-
|
|
11142
|
-
|
|
11024
|
+
void this.closeModal();
|
|
11025
|
+
}
|
|
11026
|
+
handleNativeCloseEvent() {
|
|
11027
|
+
var _a, _b;
|
|
11028
|
+
(_b = (_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
11029
|
+
}
|
|
11030
|
+
async openModal() {
|
|
11031
|
+
var _a;
|
|
11032
|
+
(_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.showModal();
|
|
11033
|
+
}
|
|
11034
|
+
async closeModal() {
|
|
11035
|
+
var _a, _b;
|
|
11036
|
+
this._activeElement = null;
|
|
11037
|
+
(_b = (_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
11143
11038
|
}
|
|
11144
11039
|
render() {
|
|
11145
|
-
return (hAsync(
|
|
11146
|
-
this.
|
|
11147
|
-
}
|
|
11040
|
+
return (hAsync("dialog", { key: '5033fc2965dfda66c31938ba52d631f1b9ecc902', class: "kol-modal", ref: (el) => {
|
|
11041
|
+
this.refDialog = el;
|
|
11042
|
+
}, style: {
|
|
11148
11043
|
width: this.state._width,
|
|
11149
|
-
}, "aria-label": this.state._label,
|
|
11150
|
-
if (el) {
|
|
11151
|
-
el.setAttribute('tabindex', '0');
|
|
11152
|
-
setTimeout(() => el.focus(), 250);
|
|
11153
|
-
}
|
|
11154
|
-
} }, hAsync("slot", { key: '28be8eb18ffd21161fe29b6c56b972252ed172a9' }))))));
|
|
11044
|
+
}, "aria-label": this.state._label, onClose: this.handleNativeCloseEvent.bind(this) }, hAsync("div", { key: 'a891311e24e9946af4976e61f5c30de3c9403f5c' }, hAsync("slot", { key: '6f6f37bb1b8a723b0c1dafbc880989c153214fae' }))));
|
|
11155
11045
|
}
|
|
11156
11046
|
validateActiveElement(value) {
|
|
11157
11047
|
watchValidator(this, '_activeElement', (value) => typeof value === 'object' || value === null, new Set(['HTMLElement', 'null']), value, {
|
|
11158
11048
|
defaultValue: null,
|
|
11159
11049
|
hooks: {
|
|
11160
11050
|
afterPatch: () => {
|
|
11161
|
-
|
|
11162
|
-
|
|
11163
|
-
|
|
11051
|
+
if (this.state._activeElement) {
|
|
11052
|
+
void this.openModal();
|
|
11053
|
+
}
|
|
11054
|
+
else {
|
|
11055
|
+
void this.closeModal();
|
|
11164
11056
|
}
|
|
11165
11057
|
},
|
|
11166
11058
|
},
|
|
@@ -11173,7 +11065,6 @@ class KolModal {
|
|
|
11173
11065
|
}
|
|
11174
11066
|
validateOn(value) {
|
|
11175
11067
|
if (typeof value === 'object' && value !== null) {
|
|
11176
|
-
featureHint('[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.');
|
|
11177
11068
|
const callbacks = {};
|
|
11178
11069
|
if (typeof value.onClose === 'function' || value.onClose === true) {
|
|
11179
11070
|
callbacks.onClose = value.onClose;
|
|
@@ -11209,7 +11100,9 @@ class KolModal {
|
|
|
11209
11100
|
"_label": [1],
|
|
11210
11101
|
"_on": [16],
|
|
11211
11102
|
"_width": [1],
|
|
11212
|
-
"state": [32]
|
|
11103
|
+
"state": [32],
|
|
11104
|
+
"openModal": [64],
|
|
11105
|
+
"closeModal": [64]
|
|
11213
11106
|
},
|
|
11214
11107
|
"$listeners$": undefined,
|
|
11215
11108
|
"$lazyBundleId$": "-",
|
|
@@ -11326,11 +11219,11 @@ class KolNav {
|
|
|
11326
11219
|
const collapsible = this.state._collapsible === true;
|
|
11327
11220
|
const hideLabel = this.state._hideLabel === true;
|
|
11328
11221
|
const orientation = this.state._orientation;
|
|
11329
|
-
return (hAsync(Host, { key: '
|
|
11222
|
+
return (hAsync(Host, { key: 'e5df59a6b0f2955c7ffe0a1b8ae05828d089a03a', class: "kol-nav" }, hAsync("div", { key: '5d82a8a378240b280609a81899cb8252983ee0b9', class: {
|
|
11330
11223
|
nav: true,
|
|
11331
11224
|
[orientation]: true,
|
|
11332
11225
|
'is-compact': this.state._hideLabel,
|
|
11333
|
-
} }, hAsync("nav", { key: '
|
|
11226
|
+
} }, 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: {
|
|
11334
11227
|
onClick: () => {
|
|
11335
11228
|
this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel === false });
|
|
11336
11229
|
},
|
|
@@ -13797,11 +13690,11 @@ class KolPopover {
|
|
|
13797
13690
|
registerInstance(this, hostRef);
|
|
13798
13691
|
this.hidePopoverByEscape = (event) => {
|
|
13799
13692
|
if (event.key === 'Escape')
|
|
13800
|
-
this.hidePopover();
|
|
13693
|
+
this.hidePopover(event);
|
|
13801
13694
|
};
|
|
13802
13695
|
this.hidePopoverByClickOutside = (event) => {
|
|
13803
13696
|
if (this.host && !this.host.contains(event.target)) {
|
|
13804
|
-
this.hidePopover();
|
|
13697
|
+
this.hidePopover(event);
|
|
13805
13698
|
}
|
|
13806
13699
|
};
|
|
13807
13700
|
this.catchHostAndTriggerElement = (element) => {
|
|
@@ -13817,9 +13710,11 @@ class KolPopover {
|
|
|
13817
13710
|
this.arrowElement = element;
|
|
13818
13711
|
};
|
|
13819
13712
|
this._align = 'top';
|
|
13713
|
+
this._on = undefined;
|
|
13820
13714
|
this._show = false;
|
|
13821
13715
|
this.state = {
|
|
13822
13716
|
_align: 'top',
|
|
13717
|
+
_on: {},
|
|
13823
13718
|
_show: false,
|
|
13824
13719
|
_visible: false,
|
|
13825
13720
|
};
|
|
@@ -13836,12 +13731,13 @@ class KolPopover {
|
|
|
13836
13731
|
this.state = Object.assign(Object.assign({}, this.state), { _visible: true });
|
|
13837
13732
|
}
|
|
13838
13733
|
}
|
|
13839
|
-
hidePopover() {
|
|
13840
|
-
var _a;
|
|
13734
|
+
hidePopover(event) {
|
|
13735
|
+
var _a, _b, _c;
|
|
13841
13736
|
this.state = Object.assign(Object.assign({}, this.state), { _visible: false });
|
|
13842
13737
|
this._show = false;
|
|
13843
13738
|
(_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.focus();
|
|
13844
13739
|
this.removeListenersToBody();
|
|
13740
|
+
(_c = (_b = this.state._on) === null || _b === void 0 ? void 0 : _b.onClose) === null || _c === void 0 ? void 0 : _c.call(_b, event);
|
|
13845
13741
|
}
|
|
13846
13742
|
addListenersToBody() {
|
|
13847
13743
|
var _a;
|
|
@@ -13862,11 +13758,14 @@ class KolPopover {
|
|
|
13862
13758
|
});
|
|
13863
13759
|
}
|
|
13864
13760
|
render() {
|
|
13865
|
-
return (hAsync(Host, { key: '
|
|
13761
|
+
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' }))));
|
|
13866
13762
|
}
|
|
13867
13763
|
validateAlign(value) {
|
|
13868
13764
|
validateAlign(this, value);
|
|
13869
13765
|
}
|
|
13766
|
+
validateOn(value) {
|
|
13767
|
+
validatePopoverCallbacks(this, value);
|
|
13768
|
+
}
|
|
13870
13769
|
validateShow(value) {
|
|
13871
13770
|
validateShow(this, value);
|
|
13872
13771
|
if (value)
|
|
@@ -13878,6 +13777,7 @@ class KolPopover {
|
|
|
13878
13777
|
}
|
|
13879
13778
|
static get watchers() { return {
|
|
13880
13779
|
"_align": ["validateAlign"],
|
|
13780
|
+
"_on": ["validateOn"],
|
|
13881
13781
|
"_show": ["validateShow"]
|
|
13882
13782
|
}; }
|
|
13883
13783
|
static get style() { return KolPopoverWcStyle0; }
|
|
@@ -13886,6 +13786,7 @@ class KolPopover {
|
|
|
13886
13786
|
"$tagName$": "kol-popover-wc",
|
|
13887
13787
|
"$members$": {
|
|
13888
13788
|
"_align": [1],
|
|
13789
|
+
"_on": [16],
|
|
13889
13790
|
"_show": [1540],
|
|
13890
13791
|
"state": [32]
|
|
13891
13792
|
},
|
|
@@ -13938,7 +13839,7 @@ class KolProcess {
|
|
|
13938
13839
|
};
|
|
13939
13840
|
}
|
|
13940
13841
|
render() {
|
|
13941
|
-
return (hAsync(Host, { key: '
|
|
13842
|
+
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)));
|
|
13942
13843
|
}
|
|
13943
13844
|
validateLabel(value) {
|
|
13944
13845
|
validateLabel(this, value);
|
|
@@ -14047,9 +13948,9 @@ class KolQuote {
|
|
|
14047
13948
|
}
|
|
14048
13949
|
render() {
|
|
14049
13950
|
const hasExpertSlot = showExpertSlot(this.state._quote);
|
|
14050
|
-
return (hAsync(Host, { key: '
|
|
13951
|
+
return (hAsync(Host, { key: '08232b44e1ee7d5f3acfc4fcd846fa85a9731b0f', class: "kol-quote" }, hAsync("figure", { key: '23b315c6c5b6ca342fa0c88b08c8d335ffb032d6', class: {
|
|
14051
13952
|
[this.state._variant]: true,
|
|
14052
|
-
} }, 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: '
|
|
13953
|
+
} }, 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" })))))));
|
|
14053
13954
|
}
|
|
14054
13955
|
static get watchers() { return {
|
|
14055
13956
|
"_label": ["validateLabel"],
|
|
@@ -14187,16 +14088,16 @@ class KolSelect {
|
|
|
14187
14088
|
render() {
|
|
14188
14089
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
14189
14090
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
14190
|
-
return (hAsync(Host, { key: '
|
|
14091
|
+
return (hAsync(Host, { key: '5c65d97077bdf5a3d3464e1e99b1250ee73f5854', class: { 'kol-select': true, 'has-value': this.state._hasValue } }, hAsync(KolInputWcTag, { key: 'a25c65cad1afdb4af663dc4f1f1d59953cb5541d', class: {
|
|
14191
14092
|
'hide-label': !!this.state._hideLabel,
|
|
14192
14093
|
select: true,
|
|
14193
|
-
}, _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: '
|
|
14094
|
+
}, _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) => {
|
|
14194
14095
|
event.preventDefault();
|
|
14195
14096
|
propagateSubmitEventToForm({
|
|
14196
14097
|
form: this.host,
|
|
14197
14098
|
ref: this.selectRef,
|
|
14198
14099
|
});
|
|
14199
|
-
} }, hAsync("input", { key: '
|
|
14100
|
+
} }, 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) => {
|
|
14200
14101
|
const key = `-${index}`;
|
|
14201
14102
|
if (Array.isArray(option.options)) {
|
|
14202
14103
|
return this.renderOptgroup(option, key);
|
|
@@ -14535,11 +14436,11 @@ class KolSingleSelect {
|
|
|
14535
14436
|
render() {
|
|
14536
14437
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
14537
14438
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
14538
|
-
return (hAsync(Host, { key: '
|
|
14439
|
+
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: () => {
|
|
14539
14440
|
var _a;
|
|
14540
14441
|
this.clearSelection();
|
|
14541
14442
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
14542
|
-
}, class: "single-select__delete" })), hAsync("button", { key: '
|
|
14443
|
+
}, 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) => {
|
|
14543
14444
|
if (el)
|
|
14544
14445
|
this.refOptions[index] = el;
|
|
14545
14446
|
}, tabIndex: -1, role: "option", "aria-selected": this.state._value === option.value, onClick: (event) => {
|
|
@@ -14881,7 +14782,7 @@ class KolSkipNav {
|
|
|
14881
14782
|
};
|
|
14882
14783
|
}
|
|
14883
14784
|
render() {
|
|
14884
|
-
return (hAsync(Host, { key: '
|
|
14785
|
+
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) => {
|
|
14885
14786
|
return (hAsync("li", { key: index }, hAsync(KolLinkWcTag, Object.assign({}, link))));
|
|
14886
14787
|
})))));
|
|
14887
14788
|
}
|
|
@@ -23269,10 +23170,10 @@ class KolSpanWc {
|
|
|
23269
23170
|
render() {
|
|
23270
23171
|
var _a, _b, _c, _d, _e;
|
|
23271
23172
|
const hideExpertSlot = !showExpertSlot(this.state._label);
|
|
23272
|
-
return (hAsync(Host, { key: '
|
|
23173
|
+
return (hAsync(Host, { key: '0a15150866920a51833e591397e7ff1624c89fc7', class: {
|
|
23273
23174
|
'kol-span-wc': true,
|
|
23274
23175
|
'hide-label': !!this.state._hideLabel,
|
|
23275
|
-
} }, this.state._icons.top && (hAsync(KolIconTag, { key: '
|
|
23176
|
+
} }, 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 }))));
|
|
23276
23177
|
}
|
|
23277
23178
|
validateAccessKey(value) {
|
|
23278
23179
|
validateAccessKey(this, value);
|
|
@@ -23350,7 +23251,7 @@ class KolSpin {
|
|
|
23350
23251
|
};
|
|
23351
23252
|
}
|
|
23352
23253
|
render() {
|
|
23353
|
-
return (hAsync(Host, { key: '
|
|
23254
|
+
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: {
|
|
23354
23255
|
spin: true,
|
|
23355
23256
|
[this.state._variant]: true,
|
|
23356
23257
|
}, role: "alert" }, renderSpin(this.state._variant))) : (this.showToggled && hAsync("span", { "aria-label": translate('kol-action-done'), "aria-busy": "false", "aria-live": "polite", role: "alert" }))));
|
|
@@ -23387,7 +23288,7 @@ class KolSpin {
|
|
|
23387
23288
|
}; }
|
|
23388
23289
|
}
|
|
23389
23290
|
|
|
23390
|
-
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 .
|
|
23291
|
+
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}";
|
|
23391
23292
|
var KolSplitButtonDefaultStyle0 = defaultStyleCss$9;
|
|
23392
23293
|
|
|
23393
23294
|
class KolSplitButton {
|
|
@@ -23405,32 +23306,11 @@ class KolSplitButton {
|
|
|
23405
23306
|
},
|
|
23406
23307
|
};
|
|
23407
23308
|
this.clickToggleHandler = { onClick: () => this.toggleDropdown() };
|
|
23408
|
-
this.
|
|
23409
|
-
|
|
23410
|
-
this.dropdown.style.height = `${this.dropdownContent.clientHeight}px`;
|
|
23411
|
-
this.state = Object.assign(Object.assign({}, this.state), { _show: true });
|
|
23412
|
-
}
|
|
23309
|
+
this.toggleDropdown = () => {
|
|
23310
|
+
this.state = Object.assign(Object.assign({}, this.state), { _show: !this.state._show });
|
|
23413
23311
|
};
|
|
23414
|
-
this.
|
|
23415
|
-
|
|
23416
|
-
this.dropdown.style.height = ``;
|
|
23417
|
-
this.state = Object.assign(Object.assign({}, this.state), { _show: false });
|
|
23418
|
-
}
|
|
23419
|
-
};
|
|
23420
|
-
this.toggleDropdown = (value) => {
|
|
23421
|
-
const openIt = typeof value === 'boolean' ? value : !this.state._show;
|
|
23422
|
-
if (openIt)
|
|
23423
|
-
this.openDropdown();
|
|
23424
|
-
else
|
|
23425
|
-
this.closeDropdown();
|
|
23426
|
-
};
|
|
23427
|
-
this.catchDropdownElements = (e) => {
|
|
23428
|
-
if (e) {
|
|
23429
|
-
this.dropdown = e;
|
|
23430
|
-
setTimeout(() => {
|
|
23431
|
-
this.dropdownContent = e.firstChild;
|
|
23432
|
-
});
|
|
23433
|
-
}
|
|
23312
|
+
this.handleOnClose = () => {
|
|
23313
|
+
this.state = Object.assign(Object.assign({}, this.state), { _show: false });
|
|
23434
23314
|
};
|
|
23435
23315
|
this._ariaControls = undefined;
|
|
23436
23316
|
this._ariaExpanded = undefined;
|
|
@@ -23456,12 +23336,15 @@ class KolSplitButton {
|
|
|
23456
23336
|
}
|
|
23457
23337
|
render() {
|
|
23458
23338
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
23459
|
-
return (hAsync(Host, { key: '
|
|
23339
|
+
return (hAsync(Host, { key: '37ae6c094c635a1bc78d02370e730ccf1ec2cdc0', class: "kol-split-button" }, hAsync("div", { key: 'ed9ac9cc52557bc2387384da318969459239cb78', class: "split-button-root" }, hAsync(KolButtonWcTag, { key: 'a84ee1b2813033b3efbe3de9efff5580ecea9a10', class: {
|
|
23460
23340
|
'main-button': true,
|
|
23461
23341
|
button: true,
|
|
23462
23342
|
[this._variant]: this._variant !== 'custom',
|
|
23463
23343
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
23464
|
-
}, _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: '
|
|
23344
|
+
}, _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' }))));
|
|
23345
|
+
}
|
|
23346
|
+
closePopup() {
|
|
23347
|
+
this.handleOnClose();
|
|
23465
23348
|
}
|
|
23466
23349
|
static get style() { return {
|
|
23467
23350
|
default: KolSplitButtonDefaultStyle0
|
|
@@ -23488,7 +23371,8 @@ class KolSplitButton {
|
|
|
23488
23371
|
"_type": [1],
|
|
23489
23372
|
"_value": [8],
|
|
23490
23373
|
"_variant": [1],
|
|
23491
|
-
"state": [32]
|
|
23374
|
+
"state": [32],
|
|
23375
|
+
"closePopup": [64]
|
|
23492
23376
|
},
|
|
23493
23377
|
"$listeners$": undefined,
|
|
23494
23378
|
"$lazyBundleId$": "-",
|
|
@@ -23507,7 +23391,7 @@ class KolSymbol {
|
|
|
23507
23391
|
};
|
|
23508
23392
|
}
|
|
23509
23393
|
render() {
|
|
23510
|
-
return (hAsync(Host, { key: '
|
|
23394
|
+
return (hAsync(Host, { key: '0cf724ad64920f8a2a9818302ad4ec9d428c52b2', class: "kol-symbol" }, hAsync("span", { key: '46cacaa73fc9b86e9f008d69216dd4b14ca58210', "aria-label": this.state._label, role: "term" }, this.state._symbol)));
|
|
23511
23395
|
}
|
|
23512
23396
|
validateLabel(value) {
|
|
23513
23397
|
validateLabel(this, value, {
|
|
@@ -23556,7 +23440,7 @@ class KolTable {
|
|
|
23556
23440
|
this._on = undefined;
|
|
23557
23441
|
}
|
|
23558
23442
|
render() {
|
|
23559
|
-
return (hAsync(KolTableStatefulTag, { key: '
|
|
23443
|
+
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 }));
|
|
23560
23444
|
}
|
|
23561
23445
|
static get cmpMeta() { return {
|
|
23562
23446
|
"$flags$": 9,
|
|
@@ -23600,6 +23484,7 @@ var Events;
|
|
|
23600
23484
|
Events["onSort"] = "onSort";
|
|
23601
23485
|
Events["onSelectionChange"] = "onSelectionChange";
|
|
23602
23486
|
Events["onSubmit"] = "onSubmit";
|
|
23487
|
+
Events["onClose"] = "onClose";
|
|
23603
23488
|
})(Events || (Events = {}));
|
|
23604
23489
|
|
|
23605
23490
|
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}";
|
|
@@ -23969,7 +23854,7 @@ class KolTableStateful {
|
|
|
23969
23854
|
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) })))),
|
|
23970
23855
|
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) })))),
|
|
23971
23856
|
};
|
|
23972
|
-
return (hAsync(Host, { key: '
|
|
23857
|
+
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: {
|
|
23973
23858
|
onSort: (_, payload) => {
|
|
23974
23859
|
this.handleSort(payload);
|
|
23975
23860
|
},
|
|
@@ -24032,7 +23917,7 @@ class KolTableStateless$1 {
|
|
|
24032
23917
|
this._selection = undefined;
|
|
24033
23918
|
}
|
|
24034
23919
|
render() {
|
|
24035
|
-
return (hAsync(Host, { key: '
|
|
23920
|
+
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 })));
|
|
24036
23921
|
}
|
|
24037
23922
|
static get style() { return {
|
|
24038
23923
|
default: KolTableStatelessDefaultStyle0
|
|
@@ -24342,18 +24227,18 @@ class KolTableStateless {
|
|
|
24342
24227
|
this.validateSelection(this._selection);
|
|
24343
24228
|
}
|
|
24344
24229
|
renderSelectionCell(row, rowIndex) {
|
|
24345
|
-
var _a, _b;
|
|
24230
|
+
var _a, _b, _c;
|
|
24346
24231
|
const selection = this.state._selection;
|
|
24347
24232
|
if (!selection)
|
|
24348
24233
|
return '';
|
|
24349
24234
|
const keyPropertyName = (_a = selection.keyPropertyName) !== null && _a !== void 0 ? _a : 'id';
|
|
24350
|
-
const
|
|
24351
|
-
if (!
|
|
24235
|
+
const firstCellData = (_b = row[0]) === null || _b === void 0 ? void 0 : _b.data;
|
|
24236
|
+
if (!firstCellData)
|
|
24352
24237
|
return '';
|
|
24238
|
+
const keyProperty = firstCellData[keyPropertyName];
|
|
24353
24239
|
const isMultiple = selection.multiple || selection.multiple === undefined;
|
|
24354
|
-
const
|
|
24355
|
-
const
|
|
24356
|
-
const label = selection.label(keyCell.data);
|
|
24240
|
+
const selected = (_c = selection === null || selection === void 0 ? void 0 : selection.selectedKeys) === null || _c === void 0 ? void 0 : _c.includes(keyProperty);
|
|
24241
|
+
const label = selection.label(firstCellData);
|
|
24357
24242
|
const props = {
|
|
24358
24243
|
name: 'selection',
|
|
24359
24244
|
checked: selected,
|
|
@@ -24442,9 +24327,9 @@ class KolTableStateless {
|
|
|
24442
24327
|
}
|
|
24443
24328
|
render() {
|
|
24444
24329
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
24445
|
-
return (hAsync(Host, { key: '
|
|
24330
|
+
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: {
|
|
24446
24331
|
minWidth: this.state._minWidth,
|
|
24447
|
-
} }, hAsync("div", { key: '
|
|
24332
|
+
} }, 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) => {
|
|
24448
24333
|
if (cell.asTd === true) {
|
|
24449
24334
|
return (hAsync("td", { key: `thead-${rowIndex}-${colIndex}-${cell.label}`, class: {
|
|
24450
24335
|
[cell.textAlign]: typeof cell.textAlign === 'string' && cell.textAlign.length > 0,
|
|
@@ -24460,7 +24345,7 @@ class KolTableStateless {
|
|
|
24460
24345
|
else {
|
|
24461
24346
|
return this.renderHeadingCell(cell, rowIndex, colIndex);
|
|
24462
24347
|
}
|
|
24463
|
-
})))))), hAsync("tbody", { key: '
|
|
24348
|
+
})))))), hAsync("tbody", { key: '002e28758e482e0f3d7268066dbaff3974eabb2a' }, dataField.map(this.renderTableRow)), this.renderFoot()))));
|
|
24464
24349
|
}
|
|
24465
24350
|
get host() { return getElement(this); }
|
|
24466
24351
|
static get watchers() { return {
|
|
@@ -24651,11 +24536,11 @@ class KolTabs {
|
|
|
24651
24536
|
} }))));
|
|
24652
24537
|
}
|
|
24653
24538
|
render() {
|
|
24654
|
-
return (hAsync(Host, { key: '
|
|
24539
|
+
return (hAsync(Host, { key: '22ca75e66e106214c5c2217a6a0adab34eda3bae', class: "kol-tabs" }, hAsync("div", { key: '0e277a0bb2bec27aeb29ad0fec3d736936fb4269', ref: (el) => {
|
|
24655
24540
|
this.tabPanelsElement = el;
|
|
24656
24541
|
}, class: {
|
|
24657
24542
|
[`tabs-align-${this.state._align}`]: true,
|
|
24658
|
-
} }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
24543
|
+
} }, this.renderButtonGroup(), hAsync("div", { key: '9fa8c95bf70a8cb254818edb27864975979e5830', class: "tabs-content", ref: this.catchTabPanelHost }))));
|
|
24659
24544
|
}
|
|
24660
24545
|
validateAlign(value) {
|
|
24661
24546
|
validateAlign(this, value);
|
|
@@ -24867,7 +24752,7 @@ class KolTextarea {
|
|
|
24867
24752
|
render() {
|
|
24868
24753
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
24869
24754
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
24870
|
-
return (hAsync(Host, { key: '
|
|
24755
|
+
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: {
|
|
24871
24756
|
resize: this.state._resize,
|
|
24872
24757
|
}, value: this.state._value }))))));
|
|
24873
24758
|
}
|
|
@@ -25154,7 +25039,7 @@ class KolToastContainer {
|
|
|
25154
25039
|
}
|
|
25155
25040
|
}
|
|
25156
25041
|
render() {
|
|
25157
|
-
return (hAsync(Host, { key: '
|
|
25042
|
+
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: {
|
|
25158
25043
|
onClick: () => {
|
|
25159
25044
|
void this.closeAll();
|
|
25160
25045
|
},
|
|
@@ -25206,7 +25091,7 @@ class KolToolbar {
|
|
|
25206
25091
|
this._items = undefined;
|
|
25207
25092
|
}
|
|
25208
25093
|
render() {
|
|
25209
|
-
return (hAsync(Host, { key: '
|
|
25094
|
+
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))));
|
|
25210
25095
|
}
|
|
25211
25096
|
validateLabel(value) {
|
|
25212
25097
|
validateLabel(this, value);
|
|
@@ -25407,7 +25292,7 @@ class KolTooltipWc {
|
|
|
25407
25292
|
this.showOrHideTooltip();
|
|
25408
25293
|
}
|
|
25409
25294
|
render() {
|
|
25410
|
-
return (hAsync(Host, { key: '
|
|
25295
|
+
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 })))));
|
|
25411
25296
|
}
|
|
25412
25297
|
validateAccessKey(value) {
|
|
25413
25298
|
validateAccessKey(this, value);
|
|
@@ -25486,7 +25371,7 @@ class KolTree {
|
|
|
25486
25371
|
this._label = undefined;
|
|
25487
25372
|
}
|
|
25488
25373
|
render() {
|
|
25489
|
-
return (hAsync(Host, { key: '
|
|
25374
|
+
return (hAsync(Host, { key: '8429fa6589ac19c9e91cd8788a46066b239b19da', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: '62e9fbaa416ac2537bfb6609359f27364331ed67', _label: this._label }, hAsync("slot", { key: 'e3c3fbdc4df65a07c8c556b01c94e05056105df8' }))));
|
|
25490
25375
|
}
|
|
25491
25376
|
static get style() { return {
|
|
25492
25377
|
default: KolTreeDefaultStyle0
|
|
@@ -25534,7 +25419,7 @@ class KolTreeItem {
|
|
|
25534
25419
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
25535
25420
|
}
|
|
25536
25421
|
render() {
|
|
25537
|
-
return (hAsync(KolTreeItemWcTag, { key: '
|
|
25422
|
+
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' })));
|
|
25538
25423
|
}
|
|
25539
25424
|
static get style() { return {
|
|
25540
25425
|
default: KolTreeItemDefaultStyle0
|
|
@@ -25577,13 +25462,13 @@ class KolTreeItemWc {
|
|
|
25577
25462
|
}
|
|
25578
25463
|
render() {
|
|
25579
25464
|
const { _href, _active, _hasChildren, _open, _label } = this.state;
|
|
25580
|
-
return (hAsync(Host, { key: '
|
|
25465
|
+
return (hAsync(Host, { key: '80b4d8b5633b98cf7ebc12c3c9e50cd5a2617d4a', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-item-wc" }, hAsync("li", { key: '0dc520638d2452cc5687e192300192b22322dd25', class: "tree-item", style: {
|
|
25581
25466
|
'--level': `${this.level}`,
|
|
25582
|
-
} }, hAsync(KolLinkWcTag, { key: '
|
|
25467
|
+
} }, hAsync(KolLinkWcTag, { key: '6cf78c51ec92daaa5d29830eb1e6dd0147c12ee4', class: {
|
|
25583
25468
|
'tree-link': true,
|
|
25584
25469
|
'first-level': this.level === 0,
|
|
25585
25470
|
active: Boolean(_active),
|
|
25586
|
-
}, _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: '
|
|
25471
|
+
}, _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' })))));
|
|
25587
25472
|
}
|
|
25588
25473
|
validateActive(value) {
|
|
25589
25474
|
validateActive(this, value || false);
|
|
@@ -25688,7 +25573,7 @@ class KolTreeWc {
|
|
|
25688
25573
|
validateLabel(this, value);
|
|
25689
25574
|
}
|
|
25690
25575
|
render() {
|
|
25691
|
-
return (hAsync(Host, { key: '
|
|
25576
|
+
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' })))));
|
|
25692
25577
|
}
|
|
25693
25578
|
static isTreeItem(element) {
|
|
25694
25579
|
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
|
@@ -25883,7 +25768,7 @@ class KolVersion {
|
|
|
25883
25768
|
};
|
|
25884
25769
|
}
|
|
25885
25770
|
render() {
|
|
25886
|
-
return (hAsync(Host, { key: '
|
|
25771
|
+
return (hAsync(Host, { key: 'cf55dcd0e6bd1ba92ded64e876dcb98a31c0a549', class: "kol-version" }, hAsync(KolBadgeTag, { key: '0a38f83859051a625c416a50acc1a0ab40c69247', _color: "#bec5c9", _icons: {
|
|
25887
25772
|
left: { icon: 'codicon codicon-versions', label: translate('kol-version') },
|
|
25888
25773
|
}, _label: this.state._label })));
|
|
25889
25774
|
}
|