@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.mjs
CHANGED
|
@@ -4519,7 +4519,7 @@ let KolLinkTag = 'kol-link';
|
|
|
4519
4519
|
let KolLinkWcTag = 'kol-link-wc';
|
|
4520
4520
|
let KolPaginationTag = 'kol-pagination';
|
|
4521
4521
|
let KolPopoverWcTag = 'kol-popover-wc';
|
|
4522
|
-
let
|
|
4522
|
+
let KolSelectWcTag = 'kol-select-wc';
|
|
4523
4523
|
let KolSpanWcTag = 'kol-span-wc';
|
|
4524
4524
|
let KolTableStatefulTag = 'kol-table-stateful';
|
|
4525
4525
|
let KolTableStatelessWcTag = 'kol-table-stateless-wc';
|
|
@@ -4820,7 +4820,7 @@ var locale_de = {
|
|
|
4820
4820
|
page: 'Seite',
|
|
4821
4821
|
'page-current': 'Seite {{page}}',
|
|
4822
4822
|
'page-selected': 'Seite {{page}} ist ausgewählt',
|
|
4823
|
-
'page-per-site': '
|
|
4823
|
+
'page-per-site': 'Einträge pro Seite',
|
|
4824
4824
|
'nav-maximize': 'Navigation maximieren',
|
|
4825
4825
|
'nav-minimize': 'Navigation minimieren',
|
|
4826
4826
|
'logo-description': 'Logo {{orgShort}}. Bundesadler mit Flaggenstab und Schriftzug {{orgLong}}',
|
|
@@ -4875,7 +4875,7 @@ var locale_en = {
|
|
|
4875
4875
|
page: 'Page',
|
|
4876
4876
|
'page-current': 'Page {{page}}',
|
|
4877
4877
|
'page-selected': 'Page {{page}} is selected',
|
|
4878
|
-
'page-per-site': '
|
|
4878
|
+
'page-per-site': 'Entries per page',
|
|
4879
4879
|
'nav-maximize': 'Maximize navigation',
|
|
4880
4880
|
'nav-minimize': 'Minimize navigation',
|
|
4881
4881
|
'logo-description': 'Logo {{orgShort}}. Federal eagle with flag staff and lettering {{orgLong}}',
|
|
@@ -6165,12 +6165,23 @@ class KolCard {
|
|
|
6165
6165
|
}
|
|
6166
6166
|
|
|
6167
6167
|
const getRenderStates = (state) => {
|
|
6168
|
-
var _a;
|
|
6169
|
-
const
|
|
6170
|
-
const
|
|
6168
|
+
var _a, _b, _c;
|
|
6169
|
+
const hasValidMsg = Boolean(state._msg && state._msg._description && ((_a = state._msg._description) === null || _a === void 0 ? void 0 : _a.length) > 0);
|
|
6170
|
+
const msgType = (_c = (_b = state._msg) === null || _b === void 0 ? void 0 : _b._type) !== null && _c !== void 0 ? _c : 'default';
|
|
6171
6171
|
const hasHint = typeof state._hint === 'string' && state._hint.length > 0;
|
|
6172
6172
|
const ariaDescribedBy = [];
|
|
6173
|
-
if (
|
|
6173
|
+
if (!hasValidMsg) {
|
|
6174
|
+
if (hasHint === true) {
|
|
6175
|
+
ariaDescribedBy.push(`${state._id}-hint`);
|
|
6176
|
+
}
|
|
6177
|
+
if (state._hasCounter) {
|
|
6178
|
+
ariaDescribedBy.push(`${state._id}-counter`);
|
|
6179
|
+
}
|
|
6180
|
+
return { hasError: false, hasHint, ariaDescribedBy };
|
|
6181
|
+
}
|
|
6182
|
+
const showMsg = msgType === 'error' ? state._touched === true : true;
|
|
6183
|
+
const hasError = showMsg && msgType === 'error';
|
|
6184
|
+
if (showMsg) {
|
|
6174
6185
|
ariaDescribedBy.push(`${state._id}-error`);
|
|
6175
6186
|
}
|
|
6176
6187
|
if (hasHint === true) {
|
|
@@ -7466,7 +7477,7 @@ class KolIndentedTextWc {
|
|
|
7466
7477
|
this.state = {};
|
|
7467
7478
|
}
|
|
7468
7479
|
render() {
|
|
7469
|
-
return (hAsync(Host, { key: '
|
|
7480
|
+
return (hAsync(Host, { key: 'c98f4371e64e74164bf2c78090f397f1163922b2', class: "kol-indented-text-wc" }, hAsync("div", { key: '5ca5b15edceb14262a35ab6d212d9f349f55105f' }, hAsync("slot", { key: 'a6f6a3a070f340fe5bab48c22e551bfd3f25df35' }))));
|
|
7470
7481
|
}
|
|
7471
7482
|
static get cmpMeta() { return {
|
|
7472
7483
|
"$flags$": 4,
|
|
@@ -10624,7 +10635,7 @@ class KolInputRange {
|
|
|
10624
10635
|
this.controller.onFacade.onBlur(event);
|
|
10625
10636
|
this.inputHasFocus = false;
|
|
10626
10637
|
} }))), hasSuggestions && [
|
|
10627
|
-
hAsync("datalist", { key: '05ab7a9b3a3f7c68f16db917cc057b635aacb25f', id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
|
|
10638
|
+
hAsync("datalist", { key: '05ab7a9b3a3f7c68f16db917cc057b635aacb25f', id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: JSON.stringify(option) })))),
|
|
10628
10639
|
]))));
|
|
10629
10640
|
}
|
|
10630
10641
|
constructor(hostRef) {
|
|
@@ -11183,7 +11194,7 @@ class KolInputWc {
|
|
|
11183
11194
|
input: true,
|
|
11184
11195
|
'icon-left': typeof ((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) === 'object',
|
|
11185
11196
|
'icon-right': typeof ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) === 'object',
|
|
11186
|
-
} }, ((_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: '
|
|
11197
|
+
} }, ((_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'))))));
|
|
11187
11198
|
}
|
|
11188
11199
|
getModifierClassNameByMsgType(showMsg) {
|
|
11189
11200
|
var _a, _b;
|
|
@@ -12320,7 +12331,7 @@ class KolNav {
|
|
|
12320
12331
|
}; }
|
|
12321
12332
|
}
|
|
12322
12333
|
|
|
12323
|
-
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}";
|
|
12334
|
+
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}";
|
|
12324
12335
|
var KolPaginationDefaultStyle0 = defaultStyleCss$h;
|
|
12325
12336
|
|
|
12326
12337
|
const leftDoubleArrowIcon = {
|
|
@@ -12349,7 +12360,6 @@ const NUMBER_FORMATTER = new Intl.NumberFormat(userLanguage, {
|
|
|
12349
12360
|
class KolPagination {
|
|
12350
12361
|
constructor(hostRef) {
|
|
12351
12362
|
registerInstance(this, hostRef);
|
|
12352
|
-
this.nonce = nonce();
|
|
12353
12363
|
this.calcCount = (total, pageSize = 1) => Math.ceil(total / pageSize);
|
|
12354
12364
|
this.getCount = () => this.calcCount(this.state._max, this.state._pageSize);
|
|
12355
12365
|
this.onClick = (event, page) => {
|
|
@@ -12436,7 +12446,7 @@ class KolPagination {
|
|
|
12436
12446
|
for (const value of nextValue) {
|
|
12437
12447
|
if (typeof value === 'number') {
|
|
12438
12448
|
options.push({
|
|
12439
|
-
label:
|
|
12449
|
+
label: `${value}`,
|
|
12440
12450
|
value: value,
|
|
12441
12451
|
});
|
|
12442
12452
|
}
|
|
@@ -12501,9 +12511,9 @@ class KolPagination {
|
|
|
12501
12511
|
return null;
|
|
12502
12512
|
}
|
|
12503
12513
|
});
|
|
12504
|
-
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(
|
|
12514
|
+
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: {
|
|
12505
12515
|
onChange: this.onChangePageSize,
|
|
12506
|
-
}, _value: [this.state._pageSize] }))));
|
|
12516
|
+
}, _value: [this.state._pageSize] })))));
|
|
12507
12517
|
}
|
|
12508
12518
|
getUnselectedPageButton(page) {
|
|
12509
12519
|
const pageText = NUMBER_FORMATTER.format(page);
|
|
@@ -15242,20 +15252,107 @@ class KolQuote {
|
|
|
15242
15252
|
}; }
|
|
15243
15253
|
}
|
|
15244
15254
|
|
|
15255
|
+
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}";
|
|
15256
|
+
var KolSelectDefaultStyle0 = defaultStyleCss$d;
|
|
15257
|
+
|
|
15258
|
+
class KolSelect {
|
|
15259
|
+
constructor(hostRef) {
|
|
15260
|
+
registerInstance(this, hostRef);
|
|
15261
|
+
this.catchRef = (ref) => {
|
|
15262
|
+
this.selectWcRef = ref;
|
|
15263
|
+
};
|
|
15264
|
+
this._accessKey = undefined;
|
|
15265
|
+
this._alert = undefined;
|
|
15266
|
+
this._disabled = false;
|
|
15267
|
+
this._error = undefined;
|
|
15268
|
+
this._hideError = false;
|
|
15269
|
+
this._hideLabel = false;
|
|
15270
|
+
this._hint = '';
|
|
15271
|
+
this._icons = undefined;
|
|
15272
|
+
this._id = undefined;
|
|
15273
|
+
this._label = undefined;
|
|
15274
|
+
this._msg = undefined;
|
|
15275
|
+
this._multiple = false;
|
|
15276
|
+
this._name = undefined;
|
|
15277
|
+
this._on = undefined;
|
|
15278
|
+
this._options = undefined;
|
|
15279
|
+
this._required = false;
|
|
15280
|
+
this._shortKey = undefined;
|
|
15281
|
+
this._rows = undefined;
|
|
15282
|
+
this._syncValueBySelector = undefined;
|
|
15283
|
+
this._tabIndex = undefined;
|
|
15284
|
+
this._tooltipAlign = 'top';
|
|
15285
|
+
this._touched = false;
|
|
15286
|
+
this._value = undefined;
|
|
15287
|
+
}
|
|
15288
|
+
async getValue() {
|
|
15289
|
+
var _a;
|
|
15290
|
+
return (_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.getValue();
|
|
15291
|
+
}
|
|
15292
|
+
async focus() {
|
|
15293
|
+
await this.kolFocus();
|
|
15294
|
+
}
|
|
15295
|
+
async kolFocus() {
|
|
15296
|
+
var _a;
|
|
15297
|
+
await ((_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
15298
|
+
}
|
|
15299
|
+
render() {
|
|
15300
|
+
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" }))));
|
|
15301
|
+
}
|
|
15302
|
+
static get style() { return {
|
|
15303
|
+
default: KolSelectDefaultStyle0
|
|
15304
|
+
}; }
|
|
15305
|
+
static get cmpMeta() { return {
|
|
15306
|
+
"$flags$": 41,
|
|
15307
|
+
"$tagName$": "kol-select",
|
|
15308
|
+
"$members$": {
|
|
15309
|
+
"_accessKey": [1, "_access-key"],
|
|
15310
|
+
"_alert": [1540],
|
|
15311
|
+
"_disabled": [4],
|
|
15312
|
+
"_error": [1],
|
|
15313
|
+
"_hideError": [1540, "_hide-error"],
|
|
15314
|
+
"_hideLabel": [4, "_hide-label"],
|
|
15315
|
+
"_hint": [1],
|
|
15316
|
+
"_icons": [1],
|
|
15317
|
+
"_id": [1],
|
|
15318
|
+
"_label": [1],
|
|
15319
|
+
"_msg": [1],
|
|
15320
|
+
"_multiple": [4],
|
|
15321
|
+
"_name": [1],
|
|
15322
|
+
"_on": [16],
|
|
15323
|
+
"_options": [1],
|
|
15324
|
+
"_required": [4],
|
|
15325
|
+
"_shortKey": [1, "_short-key"],
|
|
15326
|
+
"_rows": [2],
|
|
15327
|
+
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
15328
|
+
"_tabIndex": [2, "_tab-index"],
|
|
15329
|
+
"_tooltipAlign": [1, "_tooltip-align"],
|
|
15330
|
+
"_touched": [1540],
|
|
15331
|
+
"_value": [1025],
|
|
15332
|
+
"getValue": [64],
|
|
15333
|
+
"focus": [64],
|
|
15334
|
+
"kolFocus": [64]
|
|
15335
|
+
},
|
|
15336
|
+
"$listeners$": undefined,
|
|
15337
|
+
"$lazyBundleId$": "-",
|
|
15338
|
+
"$attrsToReflect$": [["_alert", "_alert"], ["_hideError", "_hide-error"], ["_touched", "_touched"]]
|
|
15339
|
+
}; }
|
|
15340
|
+
}
|
|
15341
|
+
|
|
15245
15342
|
class SelectController extends InputIconController {
|
|
15246
15343
|
constructor(component, name, host) {
|
|
15247
15344
|
super(component, name, host);
|
|
15248
15345
|
this.keyOptionMap = new Map();
|
|
15249
15346
|
this.getOptionByKey = (key) => this.keyOptionMap.get(key);
|
|
15250
15347
|
this.isValueInOptions = (value, options) => {
|
|
15251
|
-
return (options.find((option) =>
|
|
15252
|
-
?
|
|
15348
|
+
return (options.find((option) => option.value === value
|
|
15349
|
+
? true
|
|
15253
15350
|
: Array.isArray(option.options)
|
|
15254
15351
|
? this.isValueInOptions(value, option.options)
|
|
15255
15352
|
: false) !== undefined);
|
|
15256
15353
|
};
|
|
15257
15354
|
this.filterValuesInOptions = (values, options) => {
|
|
15258
|
-
return values.filter((value) => this.isValueInOptions(value, options)
|
|
15355
|
+
return values.filter((value) => this.isValueInOptions(value, options));
|
|
15259
15356
|
};
|
|
15260
15357
|
this.afterPatchOptions = (value, _state, _component, key) => {
|
|
15261
15358
|
if (key === '_value') {
|
|
@@ -15270,9 +15367,7 @@ class SelectController extends InputIconController {
|
|
|
15270
15367
|
const value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;
|
|
15271
15368
|
const selected = this.filterValuesInOptions(Array.isArray(value) && value.length > 0 ? value : [], options);
|
|
15272
15369
|
if (this.component._multiple === false && selected.length === 0) {
|
|
15273
|
-
nextState.set('_value', [
|
|
15274
|
-
options[0].value,
|
|
15275
|
-
]);
|
|
15370
|
+
nextState.set('_value', [options[0].value]);
|
|
15276
15371
|
}
|
|
15277
15372
|
else if (Array.isArray(value) && selected.length < value.length) {
|
|
15278
15373
|
nextState.set('_value', selected);
|
|
@@ -15304,7 +15399,7 @@ class SelectController extends InputIconController {
|
|
|
15304
15399
|
validateRows(this.component, value);
|
|
15305
15400
|
}
|
|
15306
15401
|
validateValue(value) {
|
|
15307
|
-
watchJsonArrayString(this.component, '_value', () =>
|
|
15402
|
+
watchJsonArrayString(this.component, '_value', (item) => typeof item !== 'undefined', value, undefined, {
|
|
15308
15403
|
hooks: {
|
|
15309
15404
|
afterPatch: this.afterPatchOptions,
|
|
15310
15405
|
beforePatch: this.beforePatchOptions,
|
|
@@ -15321,13 +15416,10 @@ class SelectController extends InputIconController {
|
|
|
15321
15416
|
}
|
|
15322
15417
|
}
|
|
15323
15418
|
|
|
15324
|
-
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}";
|
|
15325
|
-
var KolSelectDefaultStyle0 = defaultStyleCss$d;
|
|
15326
|
-
|
|
15327
15419
|
const isSelected = (valueList, optionValue) => {
|
|
15328
15420
|
return Array.isArray(valueList) && valueList.includes(optionValue);
|
|
15329
15421
|
};
|
|
15330
|
-
class
|
|
15422
|
+
class KolSelectWc {
|
|
15331
15423
|
async getValue() {
|
|
15332
15424
|
return this.state._value;
|
|
15333
15425
|
}
|
|
@@ -15353,16 +15445,16 @@ class KolSelect {
|
|
|
15353
15445
|
render() {
|
|
15354
15446
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
15355
15447
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
15356
|
-
return (hAsync(Host, { key: '
|
|
15448
|
+
return (hAsync(Host, { key: 'e288741d37fc2ca2e5c564a407131d8b5ecf2adc', class: { 'kol-select-wc': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'd3147a036af9eb978a60ee11d9d7cda8dc381014', class: {
|
|
15357
15449
|
'hide-label': !!this.state._hideLabel,
|
|
15358
15450
|
select: true,
|
|
15359
|
-
}, _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: '
|
|
15451
|
+
}, _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) => {
|
|
15360
15452
|
event.preventDefault();
|
|
15361
15453
|
propagateSubmitEventToForm({
|
|
15362
15454
|
form: this.host,
|
|
15363
15455
|
ref: this.selectRef,
|
|
15364
15456
|
});
|
|
15365
|
-
} }, hAsync("input", { key: '
|
|
15457
|
+
} }, 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) => {
|
|
15366
15458
|
this.controller.onFacade.onFocus(event);
|
|
15367
15459
|
this.inputHasFocus = true;
|
|
15368
15460
|
}, onBlur: (event) => {
|
|
@@ -15500,7 +15592,8 @@ class KolSelect {
|
|
|
15500
15592
|
var _a, _b, _c;
|
|
15501
15593
|
this._value = Array.from(((_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.options) || [])
|
|
15502
15594
|
.filter((option) => option.selected === true)
|
|
15503
|
-
.map((option) => { var _a; return (_a = this.controller.getOptionByKey(option.value)) === null || _a === void 0 ? void 0 : _a.value; })
|
|
15595
|
+
.map((option) => { var _a; return (_a = this.controller.getOptionByKey(option.value)) === null || _a === void 0 ? void 0 : _a.value; })
|
|
15596
|
+
.filter((value) => value !== undefined);
|
|
15504
15597
|
tryToDispatchKoliBriEvent('input', this.host, this._value);
|
|
15505
15598
|
(_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);
|
|
15506
15599
|
}
|
|
@@ -15536,12 +15629,9 @@ class KolSelect {
|
|
|
15536
15629
|
"_touched": ["validateTouched"],
|
|
15537
15630
|
"_value": ["validateValue"]
|
|
15538
15631
|
}; }
|
|
15539
|
-
static get style() { return {
|
|
15540
|
-
default: KolSelectDefaultStyle0
|
|
15541
|
-
}; }
|
|
15542
15632
|
static get cmpMeta() { return {
|
|
15543
|
-
"$flags$":
|
|
15544
|
-
"$tagName$": "kol-select",
|
|
15633
|
+
"$flags$": 4,
|
|
15634
|
+
"$tagName$": "kol-select-wc",
|
|
15545
15635
|
"$members$": {
|
|
15546
15636
|
"_accessKey": [1, "_access-key"],
|
|
15547
15637
|
"_alert": [1540],
|
|
@@ -15785,17 +15875,17 @@ class KolSingleSelect {
|
|
|
15785
15875
|
var _a;
|
|
15786
15876
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
15787
15877
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
15788
|
-
return (hAsync(Host, { key: '
|
|
15878
|
+
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) => {
|
|
15789
15879
|
this.controller.onFacade.onFocus(event);
|
|
15790
15880
|
this.inputHasFocus = true;
|
|
15791
15881
|
}, onBlur: (event) => {
|
|
15792
15882
|
this.controller.onFacade.onBlur(event);
|
|
15793
15883
|
this.inputHasFocus = false;
|
|
15794
|
-
}, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: '
|
|
15884
|
+
}, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: '56f9c3f1ed3773092b83a8d025ebfa9ca6f71cd9', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
|
|
15795
15885
|
var _a;
|
|
15796
15886
|
this.clearSelection();
|
|
15797
15887
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
15798
|
-
}, class: "single-select__delete" })), hAsync("button", { key: '
|
|
15888
|
+
}, 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) => {
|
|
15799
15889
|
var _a;
|
|
15800
15890
|
return (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
|
|
15801
15891
|
if (el)
|
|
@@ -16188,7 +16278,7 @@ class KolSkipNav {
|
|
|
16188
16278
|
};
|
|
16189
16279
|
}
|
|
16190
16280
|
render() {
|
|
16191
|
-
return (hAsync(Host, { key: '
|
|
16281
|
+
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) => {
|
|
16192
16282
|
return (hAsync("li", { key: index }, hAsync(KolLinkWcTag, Object.assign({}, link, { ref: index === 0 ? (el) => (this.firstLinkRef = el) : undefined }))));
|
|
16193
16283
|
})))));
|
|
16194
16284
|
}
|
|
@@ -24581,10 +24671,10 @@ class KolSpanWc {
|
|
|
24581
24671
|
render() {
|
|
24582
24672
|
var _a, _b, _c, _d, _e;
|
|
24583
24673
|
const hideExpertSlot = !showExpertSlot(this.state._label);
|
|
24584
|
-
return (hAsync(Host, { key: '
|
|
24674
|
+
return (hAsync(Host, { key: 'fdfd3a826efeaf6222f82807d1092ead54df42bc', class: {
|
|
24585
24675
|
'kol-span-wc': true,
|
|
24586
24676
|
'hide-label': !!this.state._hideLabel,
|
|
24587
|
-
} }, this.state._icons.top && (hAsync(KolIconTag, { key: '
|
|
24677
|
+
} }, 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 }))));
|
|
24588
24678
|
}
|
|
24589
24679
|
validateBadgeText(value) {
|
|
24590
24680
|
validateBadgeText(this, value);
|
|
@@ -24662,7 +24752,7 @@ class KolSpin {
|
|
|
24662
24752
|
};
|
|
24663
24753
|
}
|
|
24664
24754
|
render() {
|
|
24665
|
-
return (hAsync(Host, { key: '
|
|
24755
|
+
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: {
|
|
24666
24756
|
spin: true,
|
|
24667
24757
|
[this.state._variant]: true,
|
|
24668
24758
|
}, role: "alert" }, renderSpin(this.state._variant))) : (this.showToggled && hAsync("span", { "aria-label": translate('kol-action-done'), "aria-busy": "false", "aria-live": "polite", role: "alert" }))));
|
|
@@ -24747,10 +24837,10 @@ class KolSplitButton {
|
|
|
24747
24837
|
}
|
|
24748
24838
|
render() {
|
|
24749
24839
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
24750
|
-
return (hAsync(Host, { key: '
|
|
24840
|
+
return (hAsync(Host, { key: 'd747d36dee39a6dbba4dbee54f40fcae97a89df9', class: "kol-split-button" }, hAsync("div", { key: '4fe31843dc5166cfcf1c9fdbb50501e7603c41bf', class: "split-button-root" }, hAsync(KolButtonWcTag, { key: '8c751dce761c6f5b61162a4ae51645b7abc2224d', class: {
|
|
24751
24841
|
'main-button': true,
|
|
24752
24842
|
button: true,
|
|
24753
|
-
}, _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: '
|
|
24843
|
+
}, _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' }))));
|
|
24754
24844
|
}
|
|
24755
24845
|
async closePopup() {
|
|
24756
24846
|
this.handleOnClose();
|
|
@@ -24802,7 +24892,7 @@ class KolSymbol {
|
|
|
24802
24892
|
};
|
|
24803
24893
|
}
|
|
24804
24894
|
render() {
|
|
24805
|
-
return (hAsync(Host, { key: '
|
|
24895
|
+
return (hAsync(Host, { key: '90b470072c9a1933123d6cf1930e71dc91f93c26', class: "kol-symbol" }, hAsync("span", { key: '5b68c660c07085b545df10203a4d3f43814981c4', "aria-label": this.state._label, role: "term" }, this.state._symbol)));
|
|
24806
24896
|
}
|
|
24807
24897
|
validateLabel(value) {
|
|
24808
24898
|
validateLabel(this, value, {
|
|
@@ -24851,7 +24941,7 @@ class KolTable {
|
|
|
24851
24941
|
this._on = undefined;
|
|
24852
24942
|
}
|
|
24853
24943
|
render() {
|
|
24854
|
-
return (hAsync(KolTableStatefulTag, { key: '
|
|
24944
|
+
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 }));
|
|
24855
24945
|
}
|
|
24856
24946
|
static get cmpMeta() { return {
|
|
24857
24947
|
"$flags$": 9,
|
|
@@ -25280,7 +25370,7 @@ class KolTableStateful {
|
|
|
25280
25370
|
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) })))),
|
|
25281
25371
|
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) })))),
|
|
25282
25372
|
};
|
|
25283
|
-
return (hAsync(Host, { key: '
|
|
25373
|
+
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: {
|
|
25284
25374
|
onSort: (_, payload) => {
|
|
25285
25375
|
this.handleSort(payload);
|
|
25286
25376
|
},
|
|
@@ -25343,7 +25433,7 @@ class KolTableStateless$1 {
|
|
|
25343
25433
|
this._selection = undefined;
|
|
25344
25434
|
}
|
|
25345
25435
|
render() {
|
|
25346
|
-
return (hAsync(Host, { key: '
|
|
25436
|
+
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 })));
|
|
25347
25437
|
}
|
|
25348
25438
|
static get style() { return {
|
|
25349
25439
|
default: KolTableStatelessDefaultStyle0
|
|
@@ -25802,9 +25892,9 @@ class KolTableStateless {
|
|
|
25802
25892
|
render() {
|
|
25803
25893
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
25804
25894
|
this.checkboxRefs = [];
|
|
25805
|
-
return (hAsync(Host, { key: '
|
|
25895
|
+
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: {
|
|
25806
25896
|
minWidth: this.state._deprecatedMinWidth || this.state._minWidth,
|
|
25807
|
-
} }, hAsync("caption", { key: '
|
|
25897
|
+
} }, hAsync("caption", { key: 'f4e55364797dada9b790b91aad302955a9fd8941', id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: 'f2828ff867a80ad39d209640bb2b861d973c9730' }, [
|
|
25808
25898
|
this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) &&
|
|
25809
25899
|
cols.map((cell, colIndex) => {
|
|
25810
25900
|
if (cell.asTd === true) {
|
|
@@ -25830,7 +25920,7 @@ class KolTableStateless {
|
|
|
25830
25920
|
}
|
|
25831
25921
|
})))),
|
|
25832
25922
|
this.renderSpacer('head', this.state._headerCells.horizontal),
|
|
25833
|
-
])), hAsync("tbody", { key: '
|
|
25923
|
+
])), hAsync("tbody", { key: 'cf9963ac9b1883e37a924c493f019c67cb66932b' }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
|
|
25834
25924
|
}
|
|
25835
25925
|
get host() { return getElement(this); }
|
|
25836
25926
|
static get watchers() { return {
|
|
@@ -26068,11 +26158,11 @@ class KolTabs {
|
|
|
26068
26158
|
} }))));
|
|
26069
26159
|
}
|
|
26070
26160
|
render() {
|
|
26071
|
-
return (hAsync(Host, { key: '
|
|
26161
|
+
return (hAsync(Host, { key: 'a3968a8ef448170295b32cd87f99c38b6f0b2b23', class: "kol-tabs" }, hAsync("div", { key: '208a4c4daa5a68fd7bd3637ded3fa513b0e4f418', ref: (el) => {
|
|
26072
26162
|
this.tabPanelsElement = el;
|
|
26073
26163
|
}, class: {
|
|
26074
26164
|
[`tabs-align-${this.state._align}`]: true,
|
|
26075
|
-
} }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
26165
|
+
} }, this.renderButtonGroup(), hAsync("div", { key: 'b7455389653d13113ea488f361a32f7b0edcfa83', class: "tabs-content", ref: this.catchTabPanelHost }))));
|
|
26076
26166
|
}
|
|
26077
26167
|
validateAlign(value) {
|
|
26078
26168
|
validateAlign(this, value);
|
|
@@ -26289,7 +26379,7 @@ class KolTextarea {
|
|
|
26289
26379
|
render() {
|
|
26290
26380
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
26291
26381
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
26292
|
-
return (hAsync(Host, { key: '
|
|
26382
|
+
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) => {
|
|
26293
26383
|
this.controller.onFacade.onFocus(event);
|
|
26294
26384
|
this.inputHasFocus = true;
|
|
26295
26385
|
}, onBlur: (event) => {
|
|
@@ -26547,7 +26637,7 @@ const InternalToast = ({ key, onClose, onRef, toastState }) => {
|
|
|
26547
26637
|
hAsync("div", { ref: onRef }, typeof toastState.toast.description === 'string' ? toastState.toast.description : null))));
|
|
26548
26638
|
};
|
|
26549
26639
|
|
|
26550
|
-
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}";
|
|
26640
|
+
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}";
|
|
26551
26641
|
var KolToastContainerDefaultStyle0 = defaultStyleCss$4;
|
|
26552
26642
|
|
|
26553
26643
|
const TRANSITION_TIMEOUT = 300;
|
|
@@ -26610,7 +26700,7 @@ class KolToastContainer {
|
|
|
26610
26700
|
}
|
|
26611
26701
|
}
|
|
26612
26702
|
render() {
|
|
26613
|
-
return (hAsync(Host, { key: '
|
|
26703
|
+
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: {
|
|
26614
26704
|
onClick: () => {
|
|
26615
26705
|
void this.closeAll();
|
|
26616
26706
|
},
|
|
@@ -26668,7 +26758,7 @@ class KolToolbar {
|
|
|
26668
26758
|
return Object.assign(Object.assign({}, rest), { _icons, _disabled });
|
|
26669
26759
|
}
|
|
26670
26760
|
render() {
|
|
26671
|
-
return (hAsync(Host, { key: '
|
|
26761
|
+
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))));
|
|
26672
26762
|
}
|
|
26673
26763
|
validateLabel(value) {
|
|
26674
26764
|
validateLabel(this, value);
|
|
@@ -26880,7 +26970,7 @@ class KolTooltipWc {
|
|
|
26880
26970
|
}
|
|
26881
26971
|
}
|
|
26882
26972
|
render() {
|
|
26883
|
-
return (hAsync(Host, { key: '
|
|
26973
|
+
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 })))));
|
|
26884
26974
|
}
|
|
26885
26975
|
validateBadgeText(value) {
|
|
26886
26976
|
validateBadgeText(this, value);
|
|
@@ -26959,7 +27049,7 @@ class KolTree {
|
|
|
26959
27049
|
this._label = undefined;
|
|
26960
27050
|
}
|
|
26961
27051
|
render() {
|
|
26962
|
-
return (hAsync(Host, { key: '
|
|
27052
|
+
return (hAsync(Host, { key: 'f0df57f2e520474e25f95aafa76c3773e5d6f9ce', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: 'fdabfe7fd5ede28f1f09736db4ad692d3f7da3a1', _label: this._label }, hAsync("slot", { key: '0b82271f1158425b74a05f1007523e332528b400' }))));
|
|
26963
27053
|
}
|
|
26964
27054
|
static get style() { return {
|
|
26965
27055
|
default: KolTreeDefaultStyle0
|
|
@@ -27007,7 +27097,7 @@ class KolTreeItem {
|
|
|
27007
27097
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
27008
27098
|
}
|
|
27009
27099
|
render() {
|
|
27010
|
-
return (hAsync(KolTreeItemWcTag, { key: '
|
|
27100
|
+
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' })));
|
|
27011
27101
|
}
|
|
27012
27102
|
static get style() { return {
|
|
27013
27103
|
default: KolTreeItemDefaultStyle0
|
|
@@ -27050,13 +27140,13 @@ class KolTreeItemWc {
|
|
|
27050
27140
|
}
|
|
27051
27141
|
render() {
|
|
27052
27142
|
const { _href, _active, _hasChildren, _open, _label } = this.state;
|
|
27053
|
-
return (hAsync(Host, { key: '
|
|
27143
|
+
return (hAsync(Host, { key: '1181be8d7250b750cf064480ef9941c2d99fe2d0', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-item-wc" }, hAsync("li", { key: '3349d65ca244c70fa6fa82403f45bb521f88d2d5', class: "tree-item", style: {
|
|
27054
27144
|
'--level': `${this.level}`,
|
|
27055
|
-
} }, hAsync(KolLinkWcTag, { key: '
|
|
27145
|
+
} }, hAsync(KolLinkWcTag, { key: '7387e1ffd5327583f1e9dc8733b0835c2248070e', class: {
|
|
27056
27146
|
'tree-link': true,
|
|
27057
27147
|
'first-level': this.level === 0,
|
|
27058
27148
|
active: Boolean(_active),
|
|
27059
|
-
}, _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: '
|
|
27149
|
+
}, _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' })))));
|
|
27060
27150
|
}
|
|
27061
27151
|
validateActive(value) {
|
|
27062
27152
|
validateActive(this, value || false);
|
|
@@ -27161,7 +27251,7 @@ class KolTreeWc {
|
|
|
27161
27251
|
validateLabel(this, value);
|
|
27162
27252
|
}
|
|
27163
27253
|
render() {
|
|
27164
|
-
return (hAsync(Host, { key: '
|
|
27254
|
+
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' })))));
|
|
27165
27255
|
}
|
|
27166
27256
|
static isTreeItem(element) {
|
|
27167
27257
|
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
|
@@ -27359,7 +27449,7 @@ class KolVersion {
|
|
|
27359
27449
|
};
|
|
27360
27450
|
}
|
|
27361
27451
|
render() {
|
|
27362
|
-
return (hAsync(Host, { key: '
|
|
27452
|
+
return (hAsync(Host, { key: '00515e4ef2d1623035eb8a51b6d413df8c3d9de7', class: "kol-version" }, hAsync(KolBadgeTag, { key: '52fdfff5ee794e13bfb9622c5a4527ac725a4a54', _color: "#bec5c9", _icons: {
|
|
27363
27453
|
left: { icon: 'codicon codicon-versions', label: translate('kol-version') },
|
|
27364
27454
|
}, _label: this.state._label })));
|
|
27365
27455
|
}
|
|
@@ -27454,6 +27544,7 @@ registerComponents([
|
|
|
27454
27544
|
KolProgress,
|
|
27455
27545
|
KolQuote,
|
|
27456
27546
|
KolSelect,
|
|
27547
|
+
KolSelectWc,
|
|
27457
27548
|
KolSingleSelect,
|
|
27458
27549
|
KolSkipNav,
|
|
27459
27550
|
KolSpanWc,
|