@public-ui/hydrate 2.2.19-rc.0 → 2.2.19
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 +156 -65
- package/dist/index.mjs +156 -65
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -4523,7 +4523,7 @@ let KolLinkTag = 'kol-link';
|
|
|
4523
4523
|
let KolLinkWcTag = 'kol-link-wc';
|
|
4524
4524
|
let KolPaginationTag = 'kol-pagination';
|
|
4525
4525
|
let KolPopoverWcTag = 'kol-popover-wc';
|
|
4526
|
-
let
|
|
4526
|
+
let KolSelectWcTag = 'kol-select-wc';
|
|
4527
4527
|
let KolSpanWcTag = 'kol-span-wc';
|
|
4528
4528
|
let KolTableStatefulTag = 'kol-table-stateful';
|
|
4529
4529
|
let KolTableStatelessWcTag = 'kol-table-stateless-wc';
|
|
@@ -4824,7 +4824,7 @@ var locale_de = {
|
|
|
4824
4824
|
page: 'Seite',
|
|
4825
4825
|
'page-current': 'Seite {{page}}',
|
|
4826
4826
|
'page-selected': 'Seite {{page}} ist ausgewählt',
|
|
4827
|
-
'page-per-site': '
|
|
4827
|
+
'page-per-site': 'Einträge pro Seite',
|
|
4828
4828
|
'nav-maximize': 'Navigation maximieren',
|
|
4829
4829
|
'nav-minimize': 'Navigation minimieren',
|
|
4830
4830
|
'logo-description': 'Logo {{orgShort}}. Bundesadler mit Flaggenstab und Schriftzug {{orgLong}}',
|
|
@@ -4879,7 +4879,7 @@ var locale_en = {
|
|
|
4879
4879
|
page: 'Page',
|
|
4880
4880
|
'page-current': 'Page {{page}}',
|
|
4881
4881
|
'page-selected': 'Page {{page}} is selected',
|
|
4882
|
-
'page-per-site': '
|
|
4882
|
+
'page-per-site': 'Entries per page',
|
|
4883
4883
|
'nav-maximize': 'Maximize navigation',
|
|
4884
4884
|
'nav-minimize': 'Minimize navigation',
|
|
4885
4885
|
'logo-description': 'Logo {{orgShort}}. Federal eagle with flag staff and lettering {{orgLong}}',
|
|
@@ -6169,12 +6169,23 @@ class KolCard {
|
|
|
6169
6169
|
}
|
|
6170
6170
|
|
|
6171
6171
|
const getRenderStates = (state) => {
|
|
6172
|
-
var _a;
|
|
6173
|
-
const
|
|
6174
|
-
const
|
|
6172
|
+
var _a, _b, _c;
|
|
6173
|
+
const hasValidMsg = Boolean(state._msg && state._msg._description && ((_a = state._msg._description) === null || _a === void 0 ? void 0 : _a.length) > 0);
|
|
6174
|
+
const msgType = (_c = (_b = state._msg) === null || _b === void 0 ? void 0 : _b._type) !== null && _c !== void 0 ? _c : 'default';
|
|
6175
6175
|
const hasHint = typeof state._hint === 'string' && state._hint.length > 0;
|
|
6176
6176
|
const ariaDescribedBy = [];
|
|
6177
|
-
if (
|
|
6177
|
+
if (!hasValidMsg) {
|
|
6178
|
+
if (hasHint === true) {
|
|
6179
|
+
ariaDescribedBy.push(`${state._id}-hint`);
|
|
6180
|
+
}
|
|
6181
|
+
if (state._hasCounter) {
|
|
6182
|
+
ariaDescribedBy.push(`${state._id}-counter`);
|
|
6183
|
+
}
|
|
6184
|
+
return { hasError: false, hasHint, ariaDescribedBy };
|
|
6185
|
+
}
|
|
6186
|
+
const showMsg = msgType === 'error' ? state._touched === true : true;
|
|
6187
|
+
const hasError = showMsg && msgType === 'error';
|
|
6188
|
+
if (showMsg) {
|
|
6178
6189
|
ariaDescribedBy.push(`${state._id}-error`);
|
|
6179
6190
|
}
|
|
6180
6191
|
if (hasHint === true) {
|
|
@@ -7470,7 +7481,7 @@ class KolIndentedTextWc {
|
|
|
7470
7481
|
this.state = {};
|
|
7471
7482
|
}
|
|
7472
7483
|
render() {
|
|
7473
|
-
return (hAsync(Host, { key: '
|
|
7484
|
+
return (hAsync(Host, { key: 'c98f4371e64e74164bf2c78090f397f1163922b2', class: "kol-indented-text-wc" }, hAsync("div", { key: '5ca5b15edceb14262a35ab6d212d9f349f55105f' }, hAsync("slot", { key: 'a6f6a3a070f340fe5bab48c22e551bfd3f25df35' }))));
|
|
7474
7485
|
}
|
|
7475
7486
|
static get cmpMeta() { return {
|
|
7476
7487
|
"$flags$": 4,
|
|
@@ -10628,7 +10639,7 @@ class KolInputRange {
|
|
|
10628
10639
|
this.controller.onFacade.onBlur(event);
|
|
10629
10640
|
this.inputHasFocus = false;
|
|
10630
10641
|
} }))), hasSuggestions && [
|
|
10631
|
-
hAsync("datalist", { key: '05ab7a9b3a3f7c68f16db917cc057b635aacb25f', id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
|
|
10642
|
+
hAsync("datalist", { key: '05ab7a9b3a3f7c68f16db917cc057b635aacb25f', id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: JSON.stringify(option) })))),
|
|
10632
10643
|
]))));
|
|
10633
10644
|
}
|
|
10634
10645
|
constructor(hostRef) {
|
|
@@ -11187,7 +11198,7 @@ class KolInputWc {
|
|
|
11187
11198
|
input: true,
|
|
11188
11199
|
'icon-left': typeof ((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) === 'object',
|
|
11189
11200
|
'icon-right': typeof ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) === 'object',
|
|
11190
|
-
} }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: 'db617a34b5625bf385bce736898bf8b60b0362e2', _label: "", _icons: ((_h = this._icons) === null || _h === void 0 ? void 0 : _h.left).icon, style: this.getIconStyles((_j = this._icons) === null || _j === void 0 ? void 0 : _j.left) })), hAsync("div", { key: '5aef005fe5cf7b0c7414da238e003b24d9ec8b76', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { key: '2d4f58690c482754336c8433c616115c7b7a1dc1', _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_k = this._icons) === null || _k === void 0 ? void 0 : _k.right) && (hAsync(KolIconTag, { key: '0f71452a36701957777a83e5a127e1dd4eb2ac61', _label: "", _icons: ((_l = this._icons) === null || _l === void 0 ? void 0 : _l.right).icon, style: this.getIconStyles((_m = this._icons) === null || _m === void 0 ? void 0 : _m.right) }))), useTooltopInsteadOfLabel && (hAsync(KolTooltipWcTag, { key: '4211c78a773048d9e529a6c8b939d036cc2529b2', "aria-hidden": "true", class: "input-tooltip", _badgeText: this._accessKey || this._shortKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), showMsg && hAsync(FormFieldMsgFc, { key: '1bcc512281d678916a1b9b9297e3183ab268ac63', _alert: this._alert, _hideError: this._hideError, _msg: this._msg, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { key: '1973b589b4fb98d1bdd3623ad8a7b50c9701ba65', id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync(Fragment, null, hAsync("span", { key: '
|
|
11201
|
+
} }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: 'db617a34b5625bf385bce736898bf8b60b0362e2', _label: "", _icons: ((_h = this._icons) === null || _h === void 0 ? void 0 : _h.left).icon, style: this.getIconStyles((_j = this._icons) === null || _j === void 0 ? void 0 : _j.left) })), hAsync("div", { key: '5aef005fe5cf7b0c7414da238e003b24d9ec8b76', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { key: '2d4f58690c482754336c8433c616115c7b7a1dc1', _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_k = this._icons) === null || _k === void 0 ? void 0 : _k.right) && (hAsync(KolIconTag, { key: '0f71452a36701957777a83e5a127e1dd4eb2ac61', _label: "", _icons: ((_l = this._icons) === null || _l === void 0 ? void 0 : _l.right).icon, style: this.getIconStyles((_m = this._icons) === null || _m === void 0 ? void 0 : _m.right) }))), useTooltopInsteadOfLabel && (hAsync(KolTooltipWcTag, { key: '4211c78a773048d9e529a6c8b939d036cc2529b2', "aria-hidden": "true", class: "input-tooltip", _badgeText: this._accessKey || this._shortKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), showMsg && hAsync(FormFieldMsgFc, { key: '1bcc512281d678916a1b9b9297e3183ab268ac63', _alert: this._alert, _hideError: this._hideError, _msg: this._msg, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { key: '1973b589b4fb98d1bdd3623ad8a7b50c9701ba65', id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: JSON.stringify(option) }))))), this._hasCounter && (hAsync(Fragment, null, hAsync("span", { key: '5692122109ff8f8e4c67fb3b52dd0d6add55ea0b', class: "counter", "aria-hidden": "true", "data-testid": "input-counter" }, this._currentLength, this._maxLength && `/${this._maxLength}`, " ", translate('kol-characters')), hAsync("span", { key: '5de55b5b1e251a0f538d9cc9688f212d2e1309c3', id: `${this._id}-counter`, "aria-live": "polite", "aria-atomic": "true", class: "visually-hidden", "data-testid": "input-counter-aria" }, this._currentLengthDebounced, this._maxLength && ` ${translate('kol-of')} ${this._maxLength}`, " ", translate('kol-characters'))))));
|
|
11191
11202
|
}
|
|
11192
11203
|
getModifierClassNameByMsgType(showMsg) {
|
|
11193
11204
|
var _a, _b;
|
|
@@ -12324,7 +12335,7 @@ class KolNav {
|
|
|
12324
12335
|
}; }
|
|
12325
12336
|
}
|
|
12326
12337
|
|
|
12327
|
-
const defaultStyleCss$h = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\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 * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, unset);\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip-wc .tooltip-floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip-wc .tooltip-floating.show {\n animation-name: showTooltip;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n display: grid;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n .navigation-list {\n display: inline-flex;\n margin: 0;\n padding: 0;\n gap: 0.5em;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n }\n .separator:before {\n content: \"•••\";\n }\n}";
|
|
12338
|
+
const defaultStyleCss$h = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\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 * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, unset);\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip-wc .tooltip-floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip-wc .tooltip-floating.show {\n animation-name: showTooltip;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n option,\n select,\n textarea {\n background-color: transparent;\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n background-color: white;\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n button:not([role=link]) {\n min-height: auto;\n }\n .input > .kol-icon {\n display: grid;\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n option:checked::before {\n content: \"✓ \";\n }\n}\n@layer kol-component {\n :host {\n display: grid;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n .navigation-list {\n display: inline-flex;\n margin: 0;\n padding: 0;\n gap: 0.5em;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n }\n .separator:before {\n content: \"•••\";\n }\n .page-size {\n display: flex;\n gap: 0.5em;\n align-items: center;\n }\n}";
|
|
12328
12339
|
var KolPaginationDefaultStyle0 = defaultStyleCss$h;
|
|
12329
12340
|
|
|
12330
12341
|
const leftDoubleArrowIcon = {
|
|
@@ -12353,7 +12364,6 @@ const NUMBER_FORMATTER = new Intl.NumberFormat(userLanguage, {
|
|
|
12353
12364
|
class KolPagination {
|
|
12354
12365
|
constructor(hostRef) {
|
|
12355
12366
|
registerInstance(this, hostRef);
|
|
12356
|
-
this.nonce = nonce();
|
|
12357
12367
|
this.calcCount = (total, pageSize = 1) => Math.ceil(total / pageSize);
|
|
12358
12368
|
this.getCount = () => this.calcCount(this.state._max, this.state._pageSize);
|
|
12359
12369
|
this.onClick = (event, page) => {
|
|
@@ -12440,7 +12450,7 @@ class KolPagination {
|
|
|
12440
12450
|
for (const value of nextValue) {
|
|
12441
12451
|
if (typeof value === 'number') {
|
|
12442
12452
|
options.push({
|
|
12443
|
-
label:
|
|
12453
|
+
label: `${value}`,
|
|
12444
12454
|
value: value,
|
|
12445
12455
|
});
|
|
12446
12456
|
}
|
|
@@ -12505,9 +12515,9 @@ class KolPagination {
|
|
|
12505
12515
|
return null;
|
|
12506
12516
|
}
|
|
12507
12517
|
});
|
|
12508
|
-
return (hAsync(Host, { class: "kol-pagination" }, hAsync("nav", { "aria-label": this.state._label }, hAsync("ul", { class: "navigation-list" }, this.state._hasButtons.first && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "first", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftDoubleArrowIcon, _hideLabel: true, _label: translate('kol-page-first'), _on: this.onGoToFirst, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.previous && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "previous", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftSingleArrow, _hideLabel: true, _label: translate('kol-page-back'), _on: this.onGoBackward, _tooltipAlign: this.state._tooltipAlign }))), pageButtons, this.state._hasButtons.next && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "next", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightSingleArrowIcon, _hideLabel: true, _label: translate('kol-page-next'), _on: this.onGoForward, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.last && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "last", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightDoubleArrowIcon, _hideLabel: true, _label: translate('kol-page-last'), _on: this.onGoToEnd, _tooltipAlign: this.state._tooltipAlign }))))), ((_a = this.state._pageSizeOptions) === null || _a === void 0 ? void 0 : _a.length) > 0 && (hAsync(
|
|
12518
|
+
return (hAsync(Host, { class: "kol-pagination" }, hAsync("nav", { "aria-label": this.state._label }, hAsync("ul", { class: "navigation-list" }, this.state._hasButtons.first && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "first", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftDoubleArrowIcon, _hideLabel: true, _label: translate('kol-page-first'), _on: this.onGoToFirst, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.previous && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "previous", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftSingleArrow, _hideLabel: true, _label: translate('kol-page-back'), _on: this.onGoBackward, _tooltipAlign: this.state._tooltipAlign }))), pageButtons, this.state._hasButtons.next && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "next", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightSingleArrowIcon, _hideLabel: true, _label: translate('kol-page-next'), _on: this.onGoForward, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.last && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "last", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightDoubleArrowIcon, _hideLabel: true, _label: translate('kol-page-last'), _on: this.onGoToEnd, _tooltipAlign: this.state._tooltipAlign }))))), ((_a = this.state._pageSizeOptions) === null || _a === void 0 ? void 0 : _a.length) > 0 && (hAsync("div", { class: "page-size" }, hAsync(KolSelectWcTag, { _label: translate('kol-entries-per-site'), _options: this.state._pageSizeOptions, _on: {
|
|
12509
12519
|
onChange: this.onChangePageSize,
|
|
12510
|
-
}, _value: [this.state._pageSize] }))));
|
|
12520
|
+
}, _value: [this.state._pageSize] })))));
|
|
12511
12521
|
}
|
|
12512
12522
|
getUnselectedPageButton(page) {
|
|
12513
12523
|
const pageText = NUMBER_FORMATTER.format(page);
|
|
@@ -15246,20 +15256,107 @@ class KolQuote {
|
|
|
15246
15256
|
}; }
|
|
15247
15257
|
}
|
|
15248
15258
|
|
|
15259
|
+
const defaultStyleCss$d = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\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 * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, unset);\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip-wc .tooltip-floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip-wc .tooltip-floating.show {\n animation-name: showTooltip;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n option,\n select,\n textarea {\n background-color: transparent;\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n background-color: white;\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n button:not([role=link]) {\n min-height: auto;\n }\n .input > .kol-icon {\n display: grid;\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n option:checked::before {\n content: \"✓ \";\n }\n}";
|
|
15260
|
+
var KolSelectDefaultStyle0 = defaultStyleCss$d;
|
|
15261
|
+
|
|
15262
|
+
class KolSelect {
|
|
15263
|
+
constructor(hostRef) {
|
|
15264
|
+
registerInstance(this, hostRef);
|
|
15265
|
+
this.catchRef = (ref) => {
|
|
15266
|
+
this.selectWcRef = ref;
|
|
15267
|
+
};
|
|
15268
|
+
this._accessKey = undefined;
|
|
15269
|
+
this._alert = undefined;
|
|
15270
|
+
this._disabled = false;
|
|
15271
|
+
this._error = undefined;
|
|
15272
|
+
this._hideError = false;
|
|
15273
|
+
this._hideLabel = false;
|
|
15274
|
+
this._hint = '';
|
|
15275
|
+
this._icons = undefined;
|
|
15276
|
+
this._id = undefined;
|
|
15277
|
+
this._label = undefined;
|
|
15278
|
+
this._msg = undefined;
|
|
15279
|
+
this._multiple = false;
|
|
15280
|
+
this._name = undefined;
|
|
15281
|
+
this._on = undefined;
|
|
15282
|
+
this._options = undefined;
|
|
15283
|
+
this._required = false;
|
|
15284
|
+
this._shortKey = undefined;
|
|
15285
|
+
this._rows = undefined;
|
|
15286
|
+
this._syncValueBySelector = undefined;
|
|
15287
|
+
this._tabIndex = undefined;
|
|
15288
|
+
this._tooltipAlign = 'top';
|
|
15289
|
+
this._touched = false;
|
|
15290
|
+
this._value = undefined;
|
|
15291
|
+
}
|
|
15292
|
+
async getValue() {
|
|
15293
|
+
var _a;
|
|
15294
|
+
return (_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.getValue();
|
|
15295
|
+
}
|
|
15296
|
+
async focus() {
|
|
15297
|
+
await this.kolFocus();
|
|
15298
|
+
}
|
|
15299
|
+
async kolFocus() {
|
|
15300
|
+
var _a;
|
|
15301
|
+
await ((_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
15302
|
+
}
|
|
15303
|
+
render() {
|
|
15304
|
+
return (hAsync(Host, { key: '9cc63f5b7e127bf93174926609b541fa48a13d13', class: "kol-select" }, hAsync(KolSelectWcTag, { key: 'a3fe9555d9398ef493be9820c035abe07e86a4dc', ref: this.catchRef, _accessKey: this._accessKey, _alert: this._alert, _disabled: this._disabled, _error: this._error, _hideError: this._hideError, _hideLabel: this._hideLabel, _hint: this._hint, _icons: this._icons, _id: this._id, _label: this._label, _msg: this._msg, _multiple: this._multiple, _name: this._name, _on: this._on, _options: this._options, _required: this._required, _rows: this._rows, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _touched: this._touched, _value: this._value }, hAsync("slot", { key: '343f2420fb7d7df5aa315c609653d370a369290b', name: "expert", slot: "expert" }))));
|
|
15305
|
+
}
|
|
15306
|
+
static get style() { return {
|
|
15307
|
+
default: KolSelectDefaultStyle0
|
|
15308
|
+
}; }
|
|
15309
|
+
static get cmpMeta() { return {
|
|
15310
|
+
"$flags$": 41,
|
|
15311
|
+
"$tagName$": "kol-select",
|
|
15312
|
+
"$members$": {
|
|
15313
|
+
"_accessKey": [1, "_access-key"],
|
|
15314
|
+
"_alert": [1540],
|
|
15315
|
+
"_disabled": [4],
|
|
15316
|
+
"_error": [1],
|
|
15317
|
+
"_hideError": [1540, "_hide-error"],
|
|
15318
|
+
"_hideLabel": [4, "_hide-label"],
|
|
15319
|
+
"_hint": [1],
|
|
15320
|
+
"_icons": [1],
|
|
15321
|
+
"_id": [1],
|
|
15322
|
+
"_label": [1],
|
|
15323
|
+
"_msg": [1],
|
|
15324
|
+
"_multiple": [4],
|
|
15325
|
+
"_name": [1],
|
|
15326
|
+
"_on": [16],
|
|
15327
|
+
"_options": [1],
|
|
15328
|
+
"_required": [4],
|
|
15329
|
+
"_shortKey": [1, "_short-key"],
|
|
15330
|
+
"_rows": [2],
|
|
15331
|
+
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
15332
|
+
"_tabIndex": [2, "_tab-index"],
|
|
15333
|
+
"_tooltipAlign": [1, "_tooltip-align"],
|
|
15334
|
+
"_touched": [1540],
|
|
15335
|
+
"_value": [1025],
|
|
15336
|
+
"getValue": [64],
|
|
15337
|
+
"focus": [64],
|
|
15338
|
+
"kolFocus": [64]
|
|
15339
|
+
},
|
|
15340
|
+
"$listeners$": undefined,
|
|
15341
|
+
"$lazyBundleId$": "-",
|
|
15342
|
+
"$attrsToReflect$": [["_alert", "_alert"], ["_hideError", "_hide-error"], ["_touched", "_touched"]]
|
|
15343
|
+
}; }
|
|
15344
|
+
}
|
|
15345
|
+
|
|
15249
15346
|
class SelectController extends InputIconController {
|
|
15250
15347
|
constructor(component, name, host) {
|
|
15251
15348
|
super(component, name, host);
|
|
15252
15349
|
this.keyOptionMap = new Map();
|
|
15253
15350
|
this.getOptionByKey = (key) => this.keyOptionMap.get(key);
|
|
15254
15351
|
this.isValueInOptions = (value, options) => {
|
|
15255
|
-
return (options.find((option) =>
|
|
15256
|
-
?
|
|
15352
|
+
return (options.find((option) => option.value === value
|
|
15353
|
+
? true
|
|
15257
15354
|
: Array.isArray(option.options)
|
|
15258
15355
|
? this.isValueInOptions(value, option.options)
|
|
15259
15356
|
: false) !== undefined);
|
|
15260
15357
|
};
|
|
15261
15358
|
this.filterValuesInOptions = (values, options) => {
|
|
15262
|
-
return values.filter((value) => this.isValueInOptions(value, options)
|
|
15359
|
+
return values.filter((value) => this.isValueInOptions(value, options));
|
|
15263
15360
|
};
|
|
15264
15361
|
this.afterPatchOptions = (value, _state, _component, key) => {
|
|
15265
15362
|
if (key === '_value') {
|
|
@@ -15274,9 +15371,7 @@ class SelectController extends InputIconController {
|
|
|
15274
15371
|
const value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;
|
|
15275
15372
|
const selected = this.filterValuesInOptions(Array.isArray(value) && value.length > 0 ? value : [], options);
|
|
15276
15373
|
if (this.component._multiple === false && selected.length === 0) {
|
|
15277
|
-
nextState.set('_value', [
|
|
15278
|
-
options[0].value,
|
|
15279
|
-
]);
|
|
15374
|
+
nextState.set('_value', [options[0].value]);
|
|
15280
15375
|
}
|
|
15281
15376
|
else if (Array.isArray(value) && selected.length < value.length) {
|
|
15282
15377
|
nextState.set('_value', selected);
|
|
@@ -15308,7 +15403,7 @@ class SelectController extends InputIconController {
|
|
|
15308
15403
|
validateRows(this.component, value);
|
|
15309
15404
|
}
|
|
15310
15405
|
validateValue(value) {
|
|
15311
|
-
watchJsonArrayString(this.component, '_value', () =>
|
|
15406
|
+
watchJsonArrayString(this.component, '_value', (item) => typeof item !== 'undefined', value, undefined, {
|
|
15312
15407
|
hooks: {
|
|
15313
15408
|
afterPatch: this.afterPatchOptions,
|
|
15314
15409
|
beforePatch: this.beforePatchOptions,
|
|
@@ -15325,13 +15420,10 @@ class SelectController extends InputIconController {
|
|
|
15325
15420
|
}
|
|
15326
15421
|
}
|
|
15327
15422
|
|
|
15328
|
-
const defaultStyleCss$d = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\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 * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, unset);\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip-wc .tooltip-floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip-wc .tooltip-floating.show {\n animation-name: showTooltip;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n option,\n select,\n textarea {\n background-color: transparent;\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n background-color: white;\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n button:not([role=link]) {\n min-height: auto;\n }\n .input > .kol-icon {\n display: grid;\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n option:checked::before {\n content: \"✓ \";\n }\n}";
|
|
15329
|
-
var KolSelectDefaultStyle0 = defaultStyleCss$d;
|
|
15330
|
-
|
|
15331
15423
|
const isSelected = (valueList, optionValue) => {
|
|
15332
15424
|
return Array.isArray(valueList) && valueList.includes(optionValue);
|
|
15333
15425
|
};
|
|
15334
|
-
class
|
|
15426
|
+
class KolSelectWc {
|
|
15335
15427
|
async getValue() {
|
|
15336
15428
|
return this.state._value;
|
|
15337
15429
|
}
|
|
@@ -15357,16 +15449,16 @@ class KolSelect {
|
|
|
15357
15449
|
render() {
|
|
15358
15450
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
15359
15451
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
15360
|
-
return (hAsync(Host, { key: '
|
|
15452
|
+
return (hAsync(Host, { key: 'e288741d37fc2ca2e5c564a407131d8b5ecf2adc', class: { 'kol-select-wc': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'd3147a036af9eb978a60ee11d9d7cda8dc381014', class: {
|
|
15361
15453
|
'hide-label': !!this.state._hideLabel,
|
|
15362
15454
|
select: true,
|
|
15363
|
-
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '
|
|
15455
|
+
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'fb57e39e787ef8a7ee9bab245e577110c021a5fe', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'df6a0065a951a902b6853920f1d58e32fa64cf5c', slot: "input" }, hAsync("form", { key: '50d669aecf8b82849fcb8a1ba91ae2188388dc39', onSubmit: (event) => {
|
|
15364
15456
|
event.preventDefault();
|
|
15365
15457
|
propagateSubmitEventToForm({
|
|
15366
15458
|
form: this.host,
|
|
15367
15459
|
ref: this.selectRef,
|
|
15368
15460
|
});
|
|
15369
|
-
} }, hAsync("input", { key: '
|
|
15461
|
+
} }, hAsync("input", { key: 'ffabe700b7e7b0cf0b8f28fc44155ef47d3e2b56', type: "submit", hidden: true }), hAsync("select", Object.assign({ key: '24a253ce002d6ad9095c718a85dfdf56c84da58a', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onFocus: (event) => {
|
|
15370
15462
|
this.controller.onFacade.onFocus(event);
|
|
15371
15463
|
this.inputHasFocus = true;
|
|
15372
15464
|
}, onBlur: (event) => {
|
|
@@ -15504,7 +15596,8 @@ class KolSelect {
|
|
|
15504
15596
|
var _a, _b, _c;
|
|
15505
15597
|
this._value = Array.from(((_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.options) || [])
|
|
15506
15598
|
.filter((option) => option.selected === true)
|
|
15507
|
-
.map((option) => { var _a; return (_a = this.controller.getOptionByKey(option.value)) === null || _a === void 0 ? void 0 : _a.value; })
|
|
15599
|
+
.map((option) => { var _a; return (_a = this.controller.getOptionByKey(option.value)) === null || _a === void 0 ? void 0 : _a.value; })
|
|
15600
|
+
.filter((value) => value !== undefined);
|
|
15508
15601
|
tryToDispatchKoliBriEvent('input', this.host, this._value);
|
|
15509
15602
|
(_c = (_b = this.state._on) === null || _b === void 0 ? void 0 : _b.onInput) === null || _c === void 0 ? void 0 : _c.call(_b, event, this._value);
|
|
15510
15603
|
}
|
|
@@ -15540,12 +15633,9 @@ class KolSelect {
|
|
|
15540
15633
|
"_touched": ["validateTouched"],
|
|
15541
15634
|
"_value": ["validateValue"]
|
|
15542
15635
|
}; }
|
|
15543
|
-
static get style() { return {
|
|
15544
|
-
default: KolSelectDefaultStyle0
|
|
15545
|
-
}; }
|
|
15546
15636
|
static get cmpMeta() { return {
|
|
15547
|
-
"$flags$":
|
|
15548
|
-
"$tagName$": "kol-select",
|
|
15637
|
+
"$flags$": 4,
|
|
15638
|
+
"$tagName$": "kol-select-wc",
|
|
15549
15639
|
"$members$": {
|
|
15550
15640
|
"_accessKey": [1, "_access-key"],
|
|
15551
15641
|
"_alert": [1540],
|
|
@@ -15789,17 +15879,17 @@ class KolSingleSelect {
|
|
|
15789
15879
|
var _a;
|
|
15790
15880
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
15791
15881
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
15792
|
-
return (hAsync(Host, { key: '
|
|
15882
|
+
return (hAsync(Host, { key: '7180098d193a24c598e7a5d994e0faa7de779b40', class: "kol-single-select" }, hAsync("div", { key: '9fa7035c951a732dac6cf834b6d3a7fb210aa2e3', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputTag, { key: '7a387335c227a1c72112c05d052247f4122b3618', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, role: `presentation` }, hAsync("span", { key: '2f47e4f853340ab4710bebce19cc65b9234509c3', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '9d7cec91578868224a7a91198345f8d4da5f21fa', slot: "input" }, hAsync("div", { key: '14e28f986822de92d05622eae4d3b12f64168d89', class: "single-select__group" }, hAsync("input", Object.assign({ key: 'e4f8f97dc7212cb34ddccff893bbfd04743602e9', ref: this.catchRef, class: "single-select__input", "data-testid": "single-select-input", type: "text", "aria-autocomplete": "both", "aria-controls": "listbox", value: this._inputValue, accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", disabled: this.state._disabled, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onClick: this.toggleListbox.bind(this), onFocus: (event) => {
|
|
15793
15883
|
this.controller.onFacade.onFocus(event);
|
|
15794
15884
|
this.inputHasFocus = true;
|
|
15795
15885
|
}, onBlur: (event) => {
|
|
15796
15886
|
this.controller.onFacade.onBlur(event);
|
|
15797
15887
|
this.inputHasFocus = false;
|
|
15798
|
-
}, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: '
|
|
15888
|
+
}, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: '56f9c3f1ed3773092b83a8d025ebfa9ca6f71cd9', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
|
|
15799
15889
|
var _a;
|
|
15800
15890
|
this.clearSelection();
|
|
15801
15891
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
15802
|
-
}, class: "single-select__delete" })), hAsync("button", { key: '
|
|
15892
|
+
}, class: "single-select__delete" })), hAsync("button", { key: '120d09eccca8b3b8555e185ef2380edc7a402da1', tabindex: "-1", class: "single-select__button", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '59dff271a5219a84e3e8e0a18d3bf7e9e8b7fa5c', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: 'e4101ba05c1af934d188a1508c81cb14ef26d75e', role: "listbox", class: clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden'), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => {
|
|
15803
15893
|
var _a;
|
|
15804
15894
|
return (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
|
|
15805
15895
|
if (el)
|
|
@@ -16192,7 +16282,7 @@ class KolSkipNav {
|
|
|
16192
16282
|
};
|
|
16193
16283
|
}
|
|
16194
16284
|
render() {
|
|
16195
|
-
return (hAsync(Host, { key: '
|
|
16285
|
+
return (hAsync(Host, { key: '31dea69f183ae64b04d1d3c9f21a12dc67c460db', class: "kol-skip-nav" }, hAsync("nav", { key: '2ddbf00d7c97058942323af5bafa68fd5a5959dd', "aria-label": this.state._label }, hAsync("ul", { key: '80b9bb23de090f334dadde08ef95a0ffdf2d0dff' }, this.state._links.map((link, index) => {
|
|
16196
16286
|
return (hAsync("li", { key: index }, hAsync(KolLinkWcTag, Object.assign({}, link, { ref: index === 0 ? (el) => (this.firstLinkRef = el) : undefined }))));
|
|
16197
16287
|
})))));
|
|
16198
16288
|
}
|
|
@@ -24585,10 +24675,10 @@ class KolSpanWc {
|
|
|
24585
24675
|
render() {
|
|
24586
24676
|
var _a, _b, _c, _d, _e;
|
|
24587
24677
|
const hideExpertSlot = !showExpertSlot(this.state._label);
|
|
24588
|
-
return (hAsync(Host, { key: '
|
|
24678
|
+
return (hAsync(Host, { key: 'fdfd3a826efeaf6222f82807d1092ead54df42bc', class: {
|
|
24589
24679
|
'kol-span-wc': true,
|
|
24590
24680
|
'hide-label': !!this.state._hideLabel,
|
|
24591
|
-
} }, this.state._icons.top && (hAsync(KolIconTag, { key: '
|
|
24681
|
+
} }, this.state._icons.top && (hAsync(KolIconTag, { key: 'a850b2ce84c9fa0798ea66706b175f396423d538', 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: '0616d82985e38e46e3539bfbcf30cef782e04fbb' }, this.state._icons.left && (hAsync(KolIconTag, { key: '50dad540d78da59ed93d1cab8f4584a081a90e83', 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._badgeText && this.state._label.length ? (hAsync(InternalUnderlinedBadgeText, { label: this.state._label, badgeText: this.state._badgeText })) : (((_c = this.state._label) !== null && _c !== void 0 ? _c : ''))))) : (''), hAsync("span", { key: '7b2d56c97dab35aa6b504e755c68baf69cd73f66', "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { key: '05b5293ea3c92e2138aa8952f6b8ebd48a22ae04', name: "expert" })), this.state._badgeText && (hAsync("kbd", { key: '6807b33128c322c5ba01985e71b6779ebeec25cd', class: "badge-text-hint", "aria-hidden": "true" }, this.state._badgeText)), this.state._icons.right && (hAsync(KolIconTag, { key: 'a69dddc7f7009487146de09e315eb043db3eea42', 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: '55e888759d73d994b4988947da7b39710daff80a', 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 }))));
|
|
24592
24682
|
}
|
|
24593
24683
|
validateBadgeText(value) {
|
|
24594
24684
|
validateBadgeText(this, value);
|
|
@@ -24666,7 +24756,7 @@ class KolSpin {
|
|
|
24666
24756
|
};
|
|
24667
24757
|
}
|
|
24668
24758
|
render() {
|
|
24669
|
-
return (hAsync(Host, { key: '
|
|
24759
|
+
return (hAsync(Host, { key: '9980594780aef9155770d257bc71a329cdb43bcb', class: "kol-spin" }, this.state._show ? (hAsync("span", { "aria-busy": "true", "aria-label": translate('kol-action-running'), "aria-live": "polite", class: {
|
|
24670
24760
|
spin: true,
|
|
24671
24761
|
[this.state._variant]: true,
|
|
24672
24762
|
}, role: "alert" }, renderSpin(this.state._variant))) : (this.showToggled && hAsync("span", { "aria-label": translate('kol-action-done'), "aria-busy": "false", "aria-live": "polite", role: "alert" }))));
|
|
@@ -24751,10 +24841,10 @@ class KolSplitButton {
|
|
|
24751
24841
|
}
|
|
24752
24842
|
render() {
|
|
24753
24843
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
24754
|
-
return (hAsync(Host, { key: '
|
|
24844
|
+
return (hAsync(Host, { key: 'd747d36dee39a6dbba4dbee54f40fcae97a89df9', class: "kol-split-button" }, hAsync("div", { key: '4fe31843dc5166cfcf1c9fdbb50501e7603c41bf', class: "split-button-root" }, hAsync(KolButtonWcTag, { key: '8c751dce761c6f5b61162a4ae51645b7abc2224d', class: {
|
|
24755
24845
|
'main-button': true,
|
|
24756
24846
|
button: true,
|
|
24757
|
-
}, _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, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: '
|
|
24847
|
+
}, _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, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: '3bd199965fbb156f399de3558316be887272235e', class: "horizontal-line" }), hAsync(KolButtonWcTag, { key: '1a30acb4c71e787f264434c6feed5a534eb4a7f1', class: { 'secondary-button': true, [this._variant]: this._variant !== 'custom' }, _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler, _variant: this._variant })), hAsync(KolPopoverWcTag, { key: 'b12c89bb545f90b59d0a99d3d9bb2e1c2b50cf9b', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: '0be3889b87cdecc5f485b57ff6b1d47b26d7e636' }))));
|
|
24758
24848
|
}
|
|
24759
24849
|
async closePopup() {
|
|
24760
24850
|
this.handleOnClose();
|
|
@@ -24806,7 +24896,7 @@ class KolSymbol {
|
|
|
24806
24896
|
};
|
|
24807
24897
|
}
|
|
24808
24898
|
render() {
|
|
24809
|
-
return (hAsync(Host, { key: '
|
|
24899
|
+
return (hAsync(Host, { key: '90b470072c9a1933123d6cf1930e71dc91f93c26', class: "kol-symbol" }, hAsync("span", { key: '5b68c660c07085b545df10203a4d3f43814981c4', "aria-label": this.state._label, role: "term" }, this.state._symbol)));
|
|
24810
24900
|
}
|
|
24811
24901
|
validateLabel(value) {
|
|
24812
24902
|
validateLabel(this, value, {
|
|
@@ -24855,7 +24945,7 @@ class KolTable {
|
|
|
24855
24945
|
this._on = undefined;
|
|
24856
24946
|
}
|
|
24857
24947
|
render() {
|
|
24858
|
-
return (hAsync(KolTableStatefulTag, { key: '
|
|
24948
|
+
return (hAsync(KolTableStatefulTag, { key: 'b40171dcd9ce27f98ed2a23754e23df165a7515a', _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 }));
|
|
24859
24949
|
}
|
|
24860
24950
|
static get cmpMeta() { return {
|
|
24861
24951
|
"$flags$": 9,
|
|
@@ -25284,7 +25374,7 @@ class KolTableStateful {
|
|
|
25284
25374
|
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) })))),
|
|
25285
25375
|
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) })))),
|
|
25286
25376
|
};
|
|
25287
|
-
return (hAsync(Host, { key: '
|
|
25377
|
+
return (hAsync(Host, { key: '08f169e0520e974e018e987202a9af0ced93a19e', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: '86b50cb5b9d07ea8c137c54a51b92ec03b656dce', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
|
|
25288
25378
|
onSort: (_, payload) => {
|
|
25289
25379
|
this.handleSort(payload);
|
|
25290
25380
|
},
|
|
@@ -25347,7 +25437,7 @@ class KolTableStateless$1 {
|
|
|
25347
25437
|
this._selection = undefined;
|
|
25348
25438
|
}
|
|
25349
25439
|
render() {
|
|
25350
|
-
return (hAsync(Host, { key: '
|
|
25440
|
+
return (hAsync(Host, { key: '733796675ff193e4eab4354c4a3df3f3728df938', class: "kol-table-stateless" }, hAsync(KolTableStatelessWcTag, { key: '60f23e1dc04182d918b0211514b90a0c597419e5', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection })));
|
|
25351
25441
|
}
|
|
25352
25442
|
static get style() { return {
|
|
25353
25443
|
default: KolTableStatelessDefaultStyle0
|
|
@@ -25806,9 +25896,9 @@ class KolTableStateless {
|
|
|
25806
25896
|
render() {
|
|
25807
25897
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
25808
25898
|
this.checkboxRefs = [];
|
|
25809
|
-
return (hAsync(Host, { key: '
|
|
25899
|
+
return (hAsync(Host, { key: '4dc4852d25aa27bf6d9a3428adbe16abb1afb3c4', class: "kol-table-stateless-wc" }, hAsync("div", { key: '447073ebc05661e95f918990e6e4da2758d7df99', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '6c567cf91459742f1d9255cbca4f77a79f4b2a8f', style: {
|
|
25810
25900
|
minWidth: this.state._deprecatedMinWidth || this.state._minWidth,
|
|
25811
|
-
} }, hAsync("caption", { key: '
|
|
25901
|
+
} }, hAsync("caption", { key: 'f4e55364797dada9b790b91aad302955a9fd8941', id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: 'f2828ff867a80ad39d209640bb2b861d973c9730' }, [
|
|
25812
25902
|
this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) &&
|
|
25813
25903
|
cols.map((cell, colIndex) => {
|
|
25814
25904
|
if (cell.asTd === true) {
|
|
@@ -25834,7 +25924,7 @@ class KolTableStateless {
|
|
|
25834
25924
|
}
|
|
25835
25925
|
})))),
|
|
25836
25926
|
this.renderSpacer('head', this.state._headerCells.horizontal),
|
|
25837
|
-
])), hAsync("tbody", { key: '
|
|
25927
|
+
])), hAsync("tbody", { key: 'cf9963ac9b1883e37a924c493f019c67cb66932b' }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
|
|
25838
25928
|
}
|
|
25839
25929
|
get host() { return getElement(this); }
|
|
25840
25930
|
static get watchers() { return {
|
|
@@ -26072,11 +26162,11 @@ class KolTabs {
|
|
|
26072
26162
|
} }))));
|
|
26073
26163
|
}
|
|
26074
26164
|
render() {
|
|
26075
|
-
return (hAsync(Host, { key: '
|
|
26165
|
+
return (hAsync(Host, { key: 'a3968a8ef448170295b32cd87f99c38b6f0b2b23', class: "kol-tabs" }, hAsync("div", { key: '208a4c4daa5a68fd7bd3637ded3fa513b0e4f418', ref: (el) => {
|
|
26076
26166
|
this.tabPanelsElement = el;
|
|
26077
26167
|
}, class: {
|
|
26078
26168
|
[`tabs-align-${this.state._align}`]: true,
|
|
26079
|
-
} }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
26169
|
+
} }, this.renderButtonGroup(), hAsync("div", { key: 'b7455389653d13113ea488f361a32f7b0edcfa83', class: "tabs-content", ref: this.catchTabPanelHost }))));
|
|
26080
26170
|
}
|
|
26081
26171
|
validateAlign(value) {
|
|
26082
26172
|
validateAlign(this, value);
|
|
@@ -26293,7 +26383,7 @@ class KolTextarea {
|
|
|
26293
26383
|
render() {
|
|
26294
26384
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
26295
26385
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
26296
|
-
return (hAsync(Host, { key: '
|
|
26386
|
+
return (hAsync(Host, { key: '4521e94fa842252253c31ad6d38caa55ce4e87b0', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'b8d0fae4561631325e7c15e477247984732d7d40', class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _currentLengthDebounced: this.state._currentLengthDebounced, _disabled: this.state._disabled, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '7eb733a2b2bbe891a40ab079f6993a1622b309c4', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'a2d0026e436995ab17e5fdad9ae43f69fcd0719e', slot: "input" }, hAsync("textarea", Object.assign({ key: '5d998e4bd5290b4c549271338245867882150c51', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-keyshortcuts": this.state._shortKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, rows: this.state._rows, placeholder: this.state._placeholder, spellcheck: this.state._spellCheck }, this.controller.onFacade, { onInput: this.onInput, onFocus: (event) => {
|
|
26297
26387
|
this.controller.onFacade.onFocus(event);
|
|
26298
26388
|
this.inputHasFocus = true;
|
|
26299
26389
|
}, onBlur: (event) => {
|
|
@@ -26551,7 +26641,7 @@ const InternalToast = ({ key, onClose, onRef, toastState }) => {
|
|
|
26551
26641
|
hAsync("div", { ref: onRef }, typeof toastState.toast.description === 'string' ? toastState.toast.description : null))));
|
|
26552
26642
|
};
|
|
26553
26643
|
|
|
26554
|
-
const defaultStyleCss$4 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\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 * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, unset);\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip-wc .tooltip-floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip-wc .tooltip-floating.show {\n animation-name: showTooltip;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n :host {\n display: flex;\n position: fixed;\n z-index: 200;\n flex-direction: column;\n }\n .close-all {\n align-self: flex-end;\n }\n}";
|
|
26644
|
+
const defaultStyleCss$4 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\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 * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, unset);\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip-wc .tooltip-floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip-wc .tooltip-floating.show {\n animation-name: showTooltip;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n :host {\n display: flex;\n position: fixed;\n z-index: 200;\n max-width: 90vw;\n flex-direction: column;\n }\n .close-all {\n align-self: flex-end;\n }\n}";
|
|
26555
26645
|
var KolToastContainerDefaultStyle0 = defaultStyleCss$4;
|
|
26556
26646
|
|
|
26557
26647
|
const TRANSITION_TIMEOUT = 300;
|
|
@@ -26614,7 +26704,7 @@ class KolToastContainer {
|
|
|
26614
26704
|
}
|
|
26615
26705
|
}
|
|
26616
26706
|
render() {
|
|
26617
|
-
return (hAsync(Host, { key: '
|
|
26707
|
+
return (hAsync(Host, { key: '75bd108ec28225c3319a27f2181923d7d0a73fda', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: 'b4b27a44db0a85940c62e0eec06b623ffd0bc0cc', _label: translate('kol-toast-close-all'), class: "close-all", _on: {
|
|
26618
26708
|
onClick: () => {
|
|
26619
26709
|
void this.closeAll();
|
|
26620
26710
|
},
|
|
@@ -26672,7 +26762,7 @@ class KolToolbar {
|
|
|
26672
26762
|
return Object.assign(Object.assign({}, rest), { _icons, _disabled });
|
|
26673
26763
|
}
|
|
26674
26764
|
render() {
|
|
26675
|
-
return (hAsync(Host, { key: '
|
|
26765
|
+
return (hAsync(Host, { key: 'b3d64370b42779863c0bb7c631790c1c2057bbab', class: "kol-toolbar" }, hAsync("div", { key: 'c4fddaa528e345be91561aadb24e5c5f85404071', class: "toolbar", role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem))));
|
|
26676
26766
|
}
|
|
26677
26767
|
validateLabel(value) {
|
|
26678
26768
|
validateLabel(this, value);
|
|
@@ -26884,7 +26974,7 @@ class KolTooltipWc {
|
|
|
26884
26974
|
}
|
|
26885
26975
|
}
|
|
26886
26976
|
render() {
|
|
26887
|
-
return (hAsync(Host, { key: '
|
|
26977
|
+
return (hAsync(Host, { key: '9e4d556350fe633cbc4698acdab9af4137260144', class: "kol-tooltip-wc" }, this.state._label !== '' && (hAsync("div", { key: '80400a2fbb5da8e5e9318466fbdf1f63eb290320', class: "tooltip-floating", ref: this.catchTooltipElement }, hAsync("div", { key: '4c817d25203a649f778fa98c5c97e27a5259ad4f', class: "tooltip-area tooltip-arrow", ref: this.catchArrowElement }), hAsync(KolSpanWcTag, { key: '97dc74f5efc3841c338efe4ca61f9de9094195a3', class: "tooltip-area tooltip-content", id: this.state._id, _badgeText: this._badgeText, _label: this.state._label })))));
|
|
26888
26978
|
}
|
|
26889
26979
|
validateBadgeText(value) {
|
|
26890
26980
|
validateBadgeText(this, value);
|
|
@@ -26963,7 +27053,7 @@ class KolTree {
|
|
|
26963
27053
|
this._label = undefined;
|
|
26964
27054
|
}
|
|
26965
27055
|
render() {
|
|
26966
|
-
return (hAsync(Host, { key: '
|
|
27056
|
+
return (hAsync(Host, { key: 'f0df57f2e520474e25f95aafa76c3773e5d6f9ce', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: 'fdabfe7fd5ede28f1f09736db4ad692d3f7da3a1', _label: this._label }, hAsync("slot", { key: '0b82271f1158425b74a05f1007523e332528b400' }))));
|
|
26967
27057
|
}
|
|
26968
27058
|
static get style() { return {
|
|
26969
27059
|
default: KolTreeDefaultStyle0
|
|
@@ -27011,7 +27101,7 @@ class KolTreeItem {
|
|
|
27011
27101
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
27012
27102
|
}
|
|
27013
27103
|
render() {
|
|
27014
|
-
return (hAsync(KolTreeItemWcTag, { key: '
|
|
27104
|
+
return (hAsync(KolTreeItemWcTag, { key: '18d638b7de8b572b086a20f6dc9f0db7593ccfaa', class: "kol-tree-item", _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: '0bdb5a4432c57acb48d9418da052ed6242edd4b2' })));
|
|
27015
27105
|
}
|
|
27016
27106
|
static get style() { return {
|
|
27017
27107
|
default: KolTreeItemDefaultStyle0
|
|
@@ -27054,13 +27144,13 @@ class KolTreeItemWc {
|
|
|
27054
27144
|
}
|
|
27055
27145
|
render() {
|
|
27056
27146
|
const { _href, _active, _hasChildren, _open, _label } = this.state;
|
|
27057
|
-
return (hAsync(Host, { key: '
|
|
27147
|
+
return (hAsync(Host, { key: '1181be8d7250b750cf064480ef9941c2d99fe2d0', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-item-wc" }, hAsync("li", { key: '3349d65ca244c70fa6fa82403f45bb521f88d2d5', class: "tree-item", style: {
|
|
27058
27148
|
'--level': `${this.level}`,
|
|
27059
|
-
} }, hAsync(KolLinkWcTag, { key: '
|
|
27149
|
+
} }, hAsync(KolLinkWcTag, { key: '7387e1ffd5327583f1e9dc8733b0835c2248070e', class: {
|
|
27060
27150
|
'tree-link': true,
|
|
27061
27151
|
'first-level': this.level === 0,
|
|
27062
27152
|
active: Boolean(_active),
|
|
27063
|
-
}, _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: '
|
|
27153
|
+
}, _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: '456e0b79433f48e81811f6e4e635d2e1281b4e6b', class: "tree-link-inner", slot: "expert" }, _hasChildren ? (hAsync("span", { class: "toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, hAsync(KolIconTag, { class: "toggle-button-icon", _icons: `codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`, _label: '' }))) : (hAsync("span", { class: "toggle-button-placeholder" })), hAsync("span", { key: '074816a9371ebf5cb3a49b3460c5a368bc36465d', class: "text" }, _label))), hAsync("ul", { key: 'b073f00265bc39c0b44f38b6e48de75f57418ceb', hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: '79717d641b1cbf39ad956e19224ffed46ecee014' })))));
|
|
27064
27154
|
}
|
|
27065
27155
|
validateActive(value) {
|
|
27066
27156
|
validateActive(this, value || false);
|
|
@@ -27165,7 +27255,7 @@ class KolTreeWc {
|
|
|
27165
27255
|
validateLabel(this, value);
|
|
27166
27256
|
}
|
|
27167
27257
|
render() {
|
|
27168
|
-
return (hAsync(Host, { key: '
|
|
27258
|
+
return (hAsync(Host, { key: '1787e04f7c274d06626ba519287830ee0dfac428', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-wc" }, hAsync("nav", { key: '531cecb03fb89162726d16d21b422b623c3a274f', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: '8901ad4bbf1a08b301d1dba576f473c3189738e8', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: '2a1c6f38ad5a0ea45dbc28db982ccc354f3918d2' })))));
|
|
27169
27259
|
}
|
|
27170
27260
|
static isTreeItem(element) {
|
|
27171
27261
|
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
|
@@ -27363,7 +27453,7 @@ class KolVersion {
|
|
|
27363
27453
|
};
|
|
27364
27454
|
}
|
|
27365
27455
|
render() {
|
|
27366
|
-
return (hAsync(Host, { key: '
|
|
27456
|
+
return (hAsync(Host, { key: '00515e4ef2d1623035eb8a51b6d413df8c3d9de7', class: "kol-version" }, hAsync(KolBadgeTag, { key: '52fdfff5ee794e13bfb9622c5a4527ac725a4a54', _color: "#bec5c9", _icons: {
|
|
27367
27457
|
left: { icon: 'codicon codicon-versions', label: translate('kol-version') },
|
|
27368
27458
|
}, _label: this.state._label })));
|
|
27369
27459
|
}
|
|
@@ -27458,6 +27548,7 @@ registerComponents([
|
|
|
27458
27548
|
KolProgress,
|
|
27459
27549
|
KolQuote,
|
|
27460
27550
|
KolSelect,
|
|
27551
|
+
KolSelectWc,
|
|
27461
27552
|
KolSingleSelect,
|
|
27462
27553
|
KolSkipNav,
|
|
27463
27554
|
KolSpanWc,
|