@public-ui/hydrate 3.0.9-rc.2 → 3.0.9-rc.3
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 +111 -50
- package/dist/index.mjs +111 -50
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -146,7 +146,7 @@ function _mergeNamespaces(n, m) {
|
|
|
146
146
|
|
|
147
147
|
const NAMESPACE = 'kolibri';
|
|
148
148
|
const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
|
|
149
|
-
const Env = /* kolibri */ {"kolibriVersion":"3.0.9-rc.
|
|
149
|
+
const Env = /* kolibri */ {"kolibriVersion":"3.0.9-rc.3"};
|
|
150
150
|
|
|
151
151
|
function getDefaultExportFromCjs (x) {
|
|
152
152
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
@@ -6079,7 +6079,7 @@ let KolLinkWcTag = 'kol-link-wc';
|
|
|
6079
6079
|
let KolPaginationWcTag = 'kol-pagination-wc';
|
|
6080
6080
|
let KolPopoverWcTag = 'kol-popover-wc';
|
|
6081
6081
|
let KolPopoverButtonWcTag = 'kol-popover-button-wc';
|
|
6082
|
-
let
|
|
6082
|
+
let KolSelectWcTag = 'kol-select-wc';
|
|
6083
6083
|
let KolTableSettingsWcTag = 'kol-table-settings-wc';
|
|
6084
6084
|
let KolTableStatelessWcTag = 'kol-table-stateless-wc';
|
|
6085
6085
|
let KolTooltipWcTag = 'kol-tooltip-wc';
|
|
@@ -6473,7 +6473,7 @@ var locale_de = {
|
|
|
6473
6473
|
page: 'Seite',
|
|
6474
6474
|
'page-current': 'Seite {{page}}',
|
|
6475
6475
|
'page-selected': 'Seite {{page}} ist ausgewählt',
|
|
6476
|
-
'page-per-site': '
|
|
6476
|
+
'page-per-site': 'Einträge pro Seite',
|
|
6477
6477
|
'nav-maximize': 'Navigation maximieren',
|
|
6478
6478
|
'nav-minimize': 'Navigation minimieren',
|
|
6479
6479
|
'logo-description': 'Logo {{orgShort}}. Bundesadler mit Flaggenstab und Schriftzug {{orgLong}}',
|
|
@@ -6544,7 +6544,7 @@ var locale_en = {
|
|
|
6544
6544
|
page: 'Page',
|
|
6545
6545
|
'page-current': 'Page {{page}}',
|
|
6546
6546
|
'page-selected': 'Page {{page}} is selected',
|
|
6547
|
-
'page-per-site': '
|
|
6547
|
+
'page-per-site': 'Entries per page',
|
|
6548
6548
|
'nav-maximize': 'Maximize navigation',
|
|
6549
6549
|
'nav-minimize': 'Minimize navigation',
|
|
6550
6550
|
'logo-description': 'Logo {{orgShort}}. Federal eagle with flag staff and lettering {{orgLong}}',
|
|
@@ -19407,7 +19407,7 @@ class KolCardWc {
|
|
|
19407
19407
|
this.validateOnValue = (value) => typeof value === 'object' && value !== null && typeof value.onClose === 'function';
|
|
19408
19408
|
}
|
|
19409
19409
|
render() {
|
|
19410
|
-
return (hAsync(Host, { key: '
|
|
19410
|
+
return (hAsync(Host, { key: '31a21a7dd16b81042127406bc4cd091f16f230d4' }, hAsync("div", { key: '22001ed9c1f73d9b6445b0b6e36109c9cc8ef608', "aria-labelledby": this.nonce, class: "kol-card", role: "group" }, hAsync(KolHeadingFc, { key: '5b6760cafee75437ba6ef208d35e05e96ec3f76a', class: "kol-card__header", id: this.nonce, level: this.state._level }, this.state._label), hAsync("div", { key: '9b780b199200df0ce78ad4f3d2f1ad746f838a8e', class: "kol-card__content" }, hAsync("slot", { key: 'cdf53c951f6980b6827db3bf37ea7ad216037c69' })), this.state._hasCloser && (hAsync(KolButtonWcTag, { key: 'a228fd3f5ace0033ae7eb47b98c6b4d18fcb3ff5', class: "kol-card__close-button", "data-testid": "card-close-button", _hideLabel: true, _icons: {
|
|
19411
19411
|
left: {
|
|
19412
19412
|
icon: 'codicon codicon-close',
|
|
19413
19413
|
},
|
|
@@ -24883,7 +24883,7 @@ class KolNav {
|
|
|
24883
24883
|
}; }
|
|
24884
24884
|
}
|
|
24885
24885
|
|
|
24886
|
-
const defaultStyleCss$h = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\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(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\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 * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\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 to-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 text color from his parent element.\n */\n color: inherit;\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%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\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 .badge-text-hint {\n color: black;\n background-color: lightgray;\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(16 * 1rem / 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 .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-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, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\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__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\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-pagination {\n display: grid;\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n .kol-pagination__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 .kol-pagination__separator:before {\n content: \"•••\";\n }\n}";
|
|
24886
|
+
const defaultStyleCss$h = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\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(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\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 * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\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 to-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 text color from his parent element.\n */\n color: inherit;\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%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\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 .badge-text-hint {\n color: black;\n background-color: lightgray;\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(16 * 1rem / 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 .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-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, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\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__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\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: block;\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-select {\n background-color: transparent;\n width: 100%;\n }\n .kol-select:not(:disabled) {\n cursor: pointer;\n }\n .kol-select:not([multiple], [size]) {\n height: 2.75em;\n }\n .kol-select:focus {\n outline: none;\n }\n .kol-select__option:checked::before {\n content: \"✓ \";\n }\n .kol-select {\n /* needed hack for vertical alignment */\n }\n .kol-select[multiple] option {\n padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n }\n .kol-pagination {\n display: grid;\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n .kol-pagination__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 .kol-pagination__separator:before {\n content: \"•••\";\n }\n .kol-pagination__page-size-select .kol-form-field-select {\n align-items: center;\n grid-template-columns: 1fr max-content;\n }\n}";
|
|
24887
24887
|
|
|
24888
24888
|
class KolPagination {
|
|
24889
24889
|
constructor(hostRef) {
|
|
@@ -25076,7 +25076,7 @@ class KolPaginationWc {
|
|
|
25076
25076
|
for (const value of nextValue) {
|
|
25077
25077
|
if (typeof value === 'number') {
|
|
25078
25078
|
options.push({
|
|
25079
|
-
label:
|
|
25079
|
+
label: `${value}`,
|
|
25080
25080
|
value: value,
|
|
25081
25081
|
});
|
|
25082
25082
|
}
|
|
@@ -25112,9 +25112,9 @@ class KolPaginationWc {
|
|
|
25112
25112
|
return null;
|
|
25113
25113
|
}
|
|
25114
25114
|
});
|
|
25115
|
-
return (hAsync(Host, { class: "kol-pagination" }, hAsync("nav", { class: "kol-pagination__navigation", "aria-label": this.state._label }, hAsync("ul", { class: "kol-pagination__navigation-list" }, this.state._hasButtons.first && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--first", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftDoubleArrowIcon, _hideLabel: true, _label: this.translatePageFirst, _on: this.onGoToFirst, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.previous && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--previous", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftSingleArrow, _hideLabel: true, _label: this.translatePageBack, _on: this.onGoBackward, _tooltipAlign: this.state._tooltipAlign }))), pageButtons, this.state._hasButtons.next && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--next", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightSingleArrowIcon, _hideLabel: true, _label: this.translatePageNext, _on: this.onGoForward, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.last && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--last", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightDoubleArrowIcon, _hideLabel: true, _label: this.translatePageLast, _on: this.onGoToEnd, _tooltipAlign: this.state._tooltipAlign }))))), ((_a = this.state._pageSizeOptions) === null || _a === void 0 ? void 0 : _a.length) > 0 && (hAsync(
|
|
25115
|
+
return (hAsync(Host, { class: "kol-pagination" }, hAsync("nav", { class: "kol-pagination__navigation", "aria-label": this.state._label }, hAsync("ul", { class: "kol-pagination__navigation-list" }, this.state._hasButtons.first && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--first", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftDoubleArrowIcon, _hideLabel: true, _label: this.translatePageFirst, _on: this.onGoToFirst, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.previous && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--previous", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftSingleArrow, _hideLabel: true, _label: this.translatePageBack, _on: this.onGoBackward, _tooltipAlign: this.state._tooltipAlign }))), pageButtons, this.state._hasButtons.next && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--next", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightSingleArrowIcon, _hideLabel: true, _label: this.translatePageNext, _on: this.onGoForward, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.last && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--last", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightDoubleArrowIcon, _hideLabel: true, _label: this.translatePageLast, _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, { class: "kol-pagination__page-size-select", _id: `pagination-size-${this.nonce}`, _label: this.translateEntriesPerSite, _options: this.state._pageSizeOptions, _on: {
|
|
25116
25116
|
onChange: this.onChangePageSize,
|
|
25117
|
-
}, _value: this.state._pageSize }))));
|
|
25117
|
+
}, _value: this.state._pageSize })))));
|
|
25118
25118
|
}
|
|
25119
25119
|
getUnselectedPageButton(page) {
|
|
25120
25120
|
const pageText = NUMBER_FORMATTER.format(page);
|
|
@@ -27293,11 +27293,11 @@ class KolPopoverButton {
|
|
|
27293
27293
|
(_c = this.cleanupAutoPositioning) === null || _c === void 0 ? void 0 : _c.call(this);
|
|
27294
27294
|
}
|
|
27295
27295
|
render() {
|
|
27296
|
-
return (hAsync("div", { key: '
|
|
27296
|
+
return (hAsync("div", { key: '874282cd81b305d92a155d8c848a5004e128db80', class: clsx('kol-popover-button', {
|
|
27297
27297
|
'kol-popover-button--open': this.popoverOpen,
|
|
27298
27298
|
'kol-popover-button--inline': this.state._inline === true,
|
|
27299
27299
|
'kol-popover-button--standalone': this.state._inline === false,
|
|
27300
|
-
}) }, hAsync(KolButtonWcTag, { key: '
|
|
27300
|
+
}) }, hAsync(KolButtonWcTag, { key: 'ae45f6997d3dac685229bfec19111fe3f63df687', _accessKey: this._accessKey, "_aria-controls": "popover", _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _ariaHasPopup: 'dialog', _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _role: this._role, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _buttonVariant: this._variant, "data-testid": "popover-button", class: "kol-popover-button__button", ref: (element) => (this.refButton = element), onClick: this.handleButtonClick.bind(this) }, hAsync("slot", { key: '5fdf299465dc56f94bfb739a6d66b03353687e1f', name: "expert", slot: "expert" })), hAsync("div", { key: 'f3e492c4f3a403b36b8e073599377c56823d0d7b', ref: (element) => (this.refPopover = element), "data-testid": "popover-content", popover: "auto", id: "popover", class: "kol-popover-button__popover" }, hAsync("slot", { key: '26ce33d67f396c08acdbc3782e4395344b37da8f' }))));
|
|
27301
27301
|
}
|
|
27302
27302
|
validateInline(value) {
|
|
27303
27303
|
validateInline(this, value, {
|
|
@@ -27524,6 +27524,71 @@ class KolQuote {
|
|
|
27524
27524
|
}; }
|
|
27525
27525
|
}
|
|
27526
27526
|
|
|
27527
|
+
const defaultStyleCss$d = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\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(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\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 * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\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 to-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 text color from his parent element.\n */\n color: inherit;\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%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\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 .badge-text-hint {\n color: black;\n background-color: lightgray;\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(16 * 1rem / 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 .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-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, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\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__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\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 {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-select {\n background-color: transparent;\n width: 100%;\n }\n .kol-select:not(:disabled) {\n cursor: pointer;\n }\n .kol-select:not([multiple], [size]) {\n height: 2.75em;\n }\n .kol-select:focus {\n outline: none;\n }\n .kol-select__option:checked::before {\n content: \"✓ \";\n }\n .kol-select {\n /* needed hack for vertical alignment */\n }\n .kol-select[multiple] option {\n padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n }\n}";
|
|
27528
|
+
|
|
27529
|
+
class KolSelect {
|
|
27530
|
+
constructor(hostRef) {
|
|
27531
|
+
registerInstance(this, hostRef);
|
|
27532
|
+
this.catchRef = (ref) => {
|
|
27533
|
+
this.selectWcRef = ref;
|
|
27534
|
+
};
|
|
27535
|
+
this._disabled = false;
|
|
27536
|
+
this._hideMsg = false;
|
|
27537
|
+
this._hideLabel = false;
|
|
27538
|
+
this._hint = '';
|
|
27539
|
+
this._multiple = false;
|
|
27540
|
+
this._required = false;
|
|
27541
|
+
this._tooltipAlign = 'top';
|
|
27542
|
+
this._touched = false;
|
|
27543
|
+
}
|
|
27544
|
+
async getValue() {
|
|
27545
|
+
var _a;
|
|
27546
|
+
return (_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.getValue();
|
|
27547
|
+
}
|
|
27548
|
+
async kolFocus() {
|
|
27549
|
+
var _a;
|
|
27550
|
+
await ((_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
27551
|
+
}
|
|
27552
|
+
render() {
|
|
27553
|
+
return (hAsync(Host, { key: '0d395dee2532c2a584f3bea2296e2c683e7e5acc', class: "kol-select" }, hAsync(KolSelectWcTag, { key: '86d7ddcc1bc8df6adc4e56266182fb6162015076', ref: this.catchRef, _accessKey: this._accessKey, _disabled: this._disabled, _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: 'f33ffa61e68105f707d945c9fc75f462e3f7d57d', name: "expert", slot: "expert" }))));
|
|
27554
|
+
}
|
|
27555
|
+
static get style() { return {
|
|
27556
|
+
default: defaultStyleCss$d
|
|
27557
|
+
}; }
|
|
27558
|
+
static get cmpMeta() { return {
|
|
27559
|
+
"$flags$": 297,
|
|
27560
|
+
"$tagName$": "kol-select",
|
|
27561
|
+
"$members$": {
|
|
27562
|
+
"_accessKey": [1, "_access-key"],
|
|
27563
|
+
"_disabled": [4],
|
|
27564
|
+
"_hideMsg": [4, "_hide-msg"],
|
|
27565
|
+
"_hideLabel": [4, "_hide-label"],
|
|
27566
|
+
"_hint": [1],
|
|
27567
|
+
"_icons": [1],
|
|
27568
|
+
"_id": [1],
|
|
27569
|
+
"_label": [1],
|
|
27570
|
+
"_msg": [1],
|
|
27571
|
+
"_multiple": [4],
|
|
27572
|
+
"_name": [1],
|
|
27573
|
+
"_on": [16],
|
|
27574
|
+
"_options": [1],
|
|
27575
|
+
"_required": [4],
|
|
27576
|
+
"_shortKey": [1, "_short-key"],
|
|
27577
|
+
"_rows": [2],
|
|
27578
|
+
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
27579
|
+
"_tabIndex": [2, "_tab-index"],
|
|
27580
|
+
"_tooltipAlign": [1, "_tooltip-align"],
|
|
27581
|
+
"_touched": [1540],
|
|
27582
|
+
"_value": [1544],
|
|
27583
|
+
"getValue": [64],
|
|
27584
|
+
"kolFocus": [64]
|
|
27585
|
+
},
|
|
27586
|
+
"$listeners$": undefined,
|
|
27587
|
+
"$lazyBundleId$": "-",
|
|
27588
|
+
"$attrsToReflect$": [["_touched", "_touched"], ["_value", "_value"]]
|
|
27589
|
+
}; }
|
|
27590
|
+
}
|
|
27591
|
+
|
|
27527
27592
|
const NativeOptionFc = (_a) => {
|
|
27528
27593
|
var { baseClassName = 'kol-select', class: classNames, index, selectedValue, selected, value, label, disabled } = _a, other = __rest(_a, ["baseClassName", "class", "index", "selectedValue", "selected", "value", "label", "disabled"]);
|
|
27529
27594
|
if (selectedValue === undefined) {
|
|
@@ -27712,9 +27777,7 @@ class SelectController extends InputIconController {
|
|
|
27712
27777
|
}
|
|
27713
27778
|
}
|
|
27714
27779
|
|
|
27715
|
-
|
|
27716
|
-
|
|
27717
|
-
class KolSelect {
|
|
27780
|
+
class KolSelectWc {
|
|
27718
27781
|
async getValue() {
|
|
27719
27782
|
if (this._multiple) {
|
|
27720
27783
|
return this.state._value;
|
|
@@ -27748,11 +27811,11 @@ class KolSelect {
|
|
|
27748
27811
|
} });
|
|
27749
27812
|
}
|
|
27750
27813
|
render() {
|
|
27751
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
27814
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '149de6c2a2a155d9869e4d09118d7b511058b606' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '84abd564f808296ad32ea68165780862e7808fd0', state: this.state }, hAsync("form", { key: '3d143d2d857793ef6e744def1eada9346983f4d5', onSubmit: (event) => {
|
|
27752
27815
|
event.preventDefault();
|
|
27753
27816
|
propagateSubmitEventToForm({
|
|
27754
27817
|
form: this.host});
|
|
27755
|
-
} }, hAsync("input", { key: '
|
|
27818
|
+
} }, hAsync("input", { key: '4f654dceadd96f6074e22a56aefec34944ab2faa', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: 'e576920b9756ed1f8fce70c13c070749d463e839' }, this.getSelectProps()))))));
|
|
27756
27819
|
}
|
|
27757
27820
|
constructor(hostRef) {
|
|
27758
27821
|
registerInstance(this, hostRef);
|
|
@@ -27894,12 +27957,9 @@ class KolSelect {
|
|
|
27894
27957
|
"_touched": ["validateTouched"],
|
|
27895
27958
|
"_value": ["validateValue"]
|
|
27896
27959
|
}; }
|
|
27897
|
-
static get style() { return {
|
|
27898
|
-
default: defaultStyleCss$d
|
|
27899
|
-
}; }
|
|
27900
27960
|
static get cmpMeta() { return {
|
|
27901
|
-
"$flags$":
|
|
27902
|
-
"$tagName$": "kol-select",
|
|
27961
|
+
"$flags$": 256,
|
|
27962
|
+
"$tagName$": "kol-select-wc",
|
|
27903
27963
|
"$members$": {
|
|
27904
27964
|
"_accessKey": [1, "_access-key"],
|
|
27905
27965
|
"_disabled": [4],
|
|
@@ -28157,7 +28217,7 @@ class KolSingleSelect {
|
|
|
28157
28217
|
render() {
|
|
28158
28218
|
var _a;
|
|
28159
28219
|
const isDisabled = this.state._disabled === true;
|
|
28160
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
28220
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '022bd32dfdbc965f0311456da17cf56032cdbb4e' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '65092ea7e9b0a6a6beab48b75cb2129a5240e94e', state: this.state }, hAsync("div", { key: 'aa18c4f22ac372d12d21d3098666630874f35d9a', class: "kol-single-select__group" }, hAsync(InputStateWrapper, Object.assign({ key: '357c2dd70789f13cc3d6f6f71503a4f588eadde4' }, this.getInputProps())), this._inputValue && !this.state._hideClearButton && (hAsync(KolButtonWcTag, { key: '36713c8e322d38ff76f3fa4d8eddc52995dd1551', _icons: "codicon codicon-close", _label: this.translateDeleteSelection, _hideLabel: true, _buttonVariant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: clsx('kol-single-select__delete', {
|
|
28161
28221
|
'kol-single-select__delete--disabled': isDisabled,
|
|
28162
28222
|
}), _on: {
|
|
28163
28223
|
onClick: () => {
|
|
@@ -28165,9 +28225,9 @@ class KolSingleSelect {
|
|
|
28165
28225
|
this.clearSelection();
|
|
28166
28226
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
28167
28227
|
},
|
|
28168
|
-
} })), hAsync(KolIconTag, { key: '
|
|
28228
|
+
} })), hAsync(KolIconTag, { key: '9edf8cc32fcd57b8dc1b6c5c2bb848e5331b4c84', _icons: "codicon codicon-triangle-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
28169
28229
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
28170
|
-
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '
|
|
28230
|
+
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '2d6d172165735e5a9f9dae7b5c11839ffe6a76eb', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` } }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option.label, searchTerm: this._inputValue, ref: (el) => {
|
|
28171
28231
|
if (el)
|
|
28172
28232
|
this.refOptions[index] = el;
|
|
28173
28233
|
}, selected: this._value === option.value, disabled: option.disabled ? true : false, onClick: (event) => {
|
|
@@ -28473,7 +28533,7 @@ class KolSingleSelect {
|
|
|
28473
28533
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
28474
28534
|
"_touched": ["validateTouched"],
|
|
28475
28535
|
"_value": ["validateValue"],
|
|
28476
|
-
"_hideClearButton
|
|
28536
|
+
"_hideClearButton": ["validateHideClearButton"],
|
|
28477
28537
|
"_rows": ["validateRows"]
|
|
28478
28538
|
}; }
|
|
28479
28539
|
static get style() { return {
|
|
@@ -28530,7 +28590,7 @@ class KolSkipNav {
|
|
|
28530
28590
|
};
|
|
28531
28591
|
}
|
|
28532
28592
|
render() {
|
|
28533
|
-
return (hAsync("nav", { key: '
|
|
28593
|
+
return (hAsync("nav", { key: 'b9adacaa5cb5b79456d375f35a4be7e18aa47a32', class: "kol-skip-nav", "aria-label": this.state._label }, hAsync("ul", { key: '015db44ad9a7489ef6e5b000f1bebadb153ff2df', class: "kol-skip-nav__list" }, this.state._links.map((link, index) => {
|
|
28534
28594
|
return (hAsync("li", { class: "kol-skip-nav__list-item", key: index }, hAsync(KolLinkWcTag, Object.assign({}, link, { ref: index === 0 ? (el) => (this.firstLinkRef = el) : undefined }))));
|
|
28535
28595
|
}))));
|
|
28536
28596
|
}
|
|
@@ -28606,7 +28666,7 @@ class KolSpin {
|
|
|
28606
28666
|
}
|
|
28607
28667
|
render() {
|
|
28608
28668
|
var _a, _b;
|
|
28609
|
-
return (hAsync(Host, { key: '
|
|
28669
|
+
return (hAsync(Host, { key: 'e9c150c633c0a718053c4aa1aeb737d88b7b4183', class: "kol-spin" }, this.state._show ? (hAsync(Fragment, null, hAsync("span", { class: clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`) }, renderSpin(this.state._variant)), hAsync("span", { "aria-busy": "true", class: "visually-hidden", role: "alert" }, (_a = this.state._label) !== null && _a !== void 0 ? _a : this.translateActionRunning))) : (this.showToggled && (hAsync("span", { "aria-busy": "false", class: "visually-hidden", role: "alert" }, (_b = this.state._label) !== null && _b !== void 0 ? _b : this.translateActionDone)))));
|
|
28610
28670
|
}
|
|
28611
28671
|
validateShow(value) {
|
|
28612
28672
|
this.showToggled = this.state._show === true && this._show === false;
|
|
@@ -28693,10 +28753,10 @@ class KolSplitButton {
|
|
|
28693
28753
|
}
|
|
28694
28754
|
render() {
|
|
28695
28755
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
28696
|
-
return (hAsync("div", { key: '
|
|
28756
|
+
return (hAsync("div", { key: '156668962e6ff2011625d1128a20a9dba6e24a9b', class: "kol-split-button" }, hAsync("div", { key: 'a273dc653d3c0a1efb5e3c83bd0e5f2ee2478e79', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: '88f61eecb6fdce911538179e721eae5af2c41c0f', class: clsx('kol-split-button__button', {
|
|
28697
28757
|
[this._variant]: this._variant !== 'custom',
|
|
28698
28758
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
28699
|
-
}), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _id: this._id, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _buttonVariant: this._variant }), hAsync("div", { key: '
|
|
28759
|
+
}), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _id: this._id, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _buttonVariant: this._variant }), hAsync("div", { key: '609e38bd0f8c2c80e831b0f933cec91d8d590d93', class: "kol-split-button__horizontal-line" }), hAsync(KolButtonWcTag, { key: '95da68081863776d4ea3ae7f67cc4752b6299d72', class: "kol-split-button__secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler })), hAsync(KolPopoverWcTag, { key: 'b8ca42df85abdfbd34c9df79c416b78aada35a56', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: '3af62ecf99ccdd770b926535d51f875426408103' }))));
|
|
28700
28760
|
}
|
|
28701
28761
|
async closePopup() {
|
|
28702
28762
|
this.handleOnClose();
|
|
@@ -28803,10 +28863,10 @@ class KolTableSettings {
|
|
|
28803
28863
|
}
|
|
28804
28864
|
render() {
|
|
28805
28865
|
const sortedColumns = this.tableSettings.columns;
|
|
28806
|
-
return (hAsync(KolPopoverButtonWcTag, { key: '
|
|
28866
|
+
return (hAsync(KolPopoverButtonWcTag, { key: '77db05412c9011fe8e0e2dfc7499dbcadede5521', ref: (el) => (this.popoverRef = el), class: "kol-table-settings", _icons: "codicon codicon-settings-gear", _label: this.translateTableSettings, _popoverAlign: "top", _hideLabel: true }, hAsync("div", { key: '1ad57a28bceee8b4c10c8c818b4fd6f0001809c4', class: "kol-table-settings__content" }, hAsync(KolHeadingTag, { key: 'd019a6cbe836283c6c2ccdf319c92090802382be', _label: this.translateTableSettings, _level: 0 }), this.errorMessage && hAsync(KolAlertWcTag, { key: '3c53e407297bd21a00bb94ac9cec1e913728f246', _type: "error", _label: this.errorMessage, _variant: "msg", class: "kol-table-settings__error-message" }), hAsync("form", { key: '14e649882dc3c590ab1431837ca1e9223e332ebc', onSubmit: this.handleSubmit.bind(this) }, hAsync("div", { key: '3546aca5566c7148effa4ac3b6c6c6c80df499c4', class: "kol-table-settings__columns-container" }, hAsync("div", { key: 'e5ba799f10556c2ff15321984bf06d26474162d1', class: "kol-table-settings__columns" }, sortedColumns.map((column, index) => {
|
|
28807
28867
|
var _a, _b;
|
|
28808
28868
|
return (hAsync("div", { key: column.key, class: "kol-table-settings__column" }, hAsync(KolInputCheckboxTag, { _checked: column.visible, _label: `${column.label}${column.hidable === false ? ` (${this.translateColumnNotHidable})` : ''}`, _value: true, _hideLabel: true, _disabled: column.hidable === false, _on: { onInput: (_, value) => this.handleVisibilityChange(column.key, value) }, "data-testid": `table-settings-visible-${column.key}` }), hAsync("span", { class: "kol-table-settings__column-label" }, column.label), hAsync(KolInputNumberTag, { _hideLabel: true, _value: column.width, _label: translate('kol-table-settings-column-width', { placeholders: { column: column.label } }), _min: 1, _disabled: column.resizable === false, _on: { onInput: (_, value) => this.handleWidthChange(column.key, value) } }), hAsync(KolButtonWcTag, { _icons: "codicon codicon-arrow-up", _label: translate('kol-table-settings-move-up', { placeholders: { column: column.label } }), _hideLabel: true, _buttonVariant: "ghost", _on: { onClick: () => this.moveColumn(column.key, 'up') }, _disabled: index === 0 || column.sortable === false || ((_a = sortedColumns[index - 1]) === null || _a === void 0 ? void 0 : _a.sortable) === false, "data-testid": "table-settings-move-up" }), hAsync(KolButtonWcTag, { _icons: "codicon codicon-arrow-down", _label: translate('kol-table-settings-move-down', { placeholders: { column: column.label } }), _hideLabel: true, _buttonVariant: "ghost", _on: { onClick: () => this.moveColumn(column.key, 'down') }, _disabled: index === sortedColumns.length - 1 || column.sortable === false || ((_b = sortedColumns[index + 1]) === null || _b === void 0 ? void 0 : _b.sortable) === false, "data-testid": "table-settings-move-down" })));
|
|
28809
|
-
}))), hAsync("div", { key: '
|
|
28869
|
+
}))), hAsync("div", { key: 'b31183c5e2b855b21944864e0897c632c30bd55e', class: "kol-table-settings__actions" }, hAsync(KolButtonWcTag, { key: '9a741d4fe161684a31a335877ed81bd1e200848a', _label: this.translateTableSettingsCancel, _buttonVariant: "secondary", _on: { onClick: () => this.handleCancel() }, "data-testid": "table-settings-cancel" }), hAsync(KolButtonWcTag, { key: '67ebec227e4a82cec363431b1b755d757974f50c', _label: this.translateTableSettingsApply, _buttonVariant: "primary", _type: "submit", "data-testid": "table-settings-apply" }))))));
|
|
28810
28870
|
}
|
|
28811
28871
|
get host() { return getElement(this); }
|
|
28812
28872
|
static get watchers() { return {
|
|
@@ -28867,7 +28927,7 @@ const validateTableSettings = (component, value) => {
|
|
|
28867
28927
|
watchValidator(component, `_tableSettings`, (value) => typeof value === 'object' && value !== null, new Set(['TableSettings']), value);
|
|
28868
28928
|
};
|
|
28869
28929
|
|
|
28870
|
-
const defaultStyleCss$8 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\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(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\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 * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\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 to-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 text color from his parent element.\n */\n color: inherit;\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%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\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 .badge-text-hint {\n color: black;\n background-color: lightgray;\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(16 * 1rem / 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 .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-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, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\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__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\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 {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n :host {\n display: inline-block;\n }\n .kol-button {\n display: inline-flex;\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-button__text {\n width: 100%;\n }\n .kol-popover-button__button {\n display: inline-block;\n }\n .kol-popover-button__popover {\n margin: 0;\n padding: 0;\n border: 0;\n }\n .kol-popover-button--inline .kol-popover-button__button {\n display: inline;\n }\n .kol-table-settings {\n background: #fff;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n }\n .kol-table-settings .kol-popover-button__popover {\n background: #fff;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border: 1px solid #d1d5db;\n }\n .kol-table-settings__columns-container {\n max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n overflow: auto;\n }\n .kol-table-settings__columns {\n display: grid;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-auto-rows: min-content;\n grid-template-columns: min-content minmax(max-content, 1fr) calc(100 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n }\n .kol-table-settings__column {\n display: contents;\n }\n .kol-table {\n display: block;\n position: relative;\n max-width: 100%;\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n .kol-table__scroll-container {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .kol-table__table {\n width: 100%;\n }\n .kol-table__caption {\n min-height: var(--a11y-min-size);\n padding-right: var(--a11y-min-size);\n text-align: start;\n }\n .kol-table__sort-button .kol-button {\n color: inherit;\n }\n .kol-table__body {\n text-align: left;\n }\n .kol-table__body .kol-button__text {\n justify-items: start;\n }\n .kol-table__cell--align-left {\n text-align: left;\n }\n .kol-table__cell--align-left .kol-button__text {\n align-items: start;\n }\n .kol-table__cell--align-center {\n text-align: center;\n }\n .kol-table__cell--align-center .kol-button__text {\n align-items: center;\n }\n .kol-table__cell--align-right {\n text-align: right;\n }\n .kol-table__cell--align-right .kol-button__text {\n align-items: end;\n }\n .kol-table__cell--selection {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection-label {\n display: flex;\n position: relative;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n .kol-table__selection-label--disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-icon {\n display: block;\n position: absolute;\n inset: auto;\n z-index: 1;\n }\n .kol-table__selection-input {\n border-style: solid;\n margin: 0;\n appearance: none;\n cursor: pointer;\n }\n .kol-table__selection-input:disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-input:before {\n content: \"\";\n }\n .kol-table__selection-input--checkbox {\n background-color: rgb(255, 255, 255);\n display: flex;\n position: relative;\n width: calc(var(--a11y-min-size) / 2);\n height: calc(var(--a11y-min-size) / 2);\n border-width: 2px;\n align-items: center;\n justify-content: center;\n line-height: 1.5;\n }\n .kol-table__selection-input--radio {\n border-radius: 100%;\n display: flex;\n width: 1.5em;\n min-width: 1.5em;\n height: 1.5em;\n min-height: 1.5em;\n padding: 0;\n border-width: 2px;\n }\n .kol-table__selection-input--radio:before {\n border-radius: 100%;\n width: 0.75em;\n height: 0.75em;\n margin: auto;\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .kol-table__selection-input--radio:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n .kol-pagination {\n display: grid;\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n .kol-pagination__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 .kol-pagination__separator:before {\n content: \"•••\";\n }\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n display: grid;\n place-items: center;\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n grid-auto-flow: column;\n }\n }\n .kol-pagination {\n display: flex;\n flex-wrap: wrap;\n }\n @media (min-width: 1024px) {\n .kol-pagination {\n display: flex;\n }\n }\n @media (max-width: 1024px) {\n .kol-pagination {\n flex-direction: column;\n }\n }\n}";
|
|
28930
|
+
const defaultStyleCss$8 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\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(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\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 * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\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 to-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 text color from his parent element.\n */\n color: inherit;\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%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\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 .badge-text-hint {\n color: black;\n background-color: lightgray;\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(16 * 1rem / 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 .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\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,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-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, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\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__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\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 {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n :host {\n display: inline-block;\n }\n .kol-button {\n display: inline-flex;\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-button__text {\n width: 100%;\n }\n .kol-popover-button__button {\n display: inline-block;\n }\n .kol-popover-button__popover {\n margin: 0;\n padding: 0;\n border: 0;\n }\n .kol-popover-button--inline .kol-popover-button__button {\n display: inline;\n }\n .kol-table-settings {\n background: #fff;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n }\n .kol-table-settings .kol-popover-button__popover {\n background: #fff;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border: 1px solid #d1d5db;\n }\n .kol-table-settings__columns-container {\n max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n overflow: auto;\n }\n .kol-table-settings__columns {\n display: grid;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-auto-rows: min-content;\n grid-template-columns: min-content minmax(max-content, 1fr) calc(100 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n }\n .kol-table-settings__column {\n display: contents;\n }\n .kol-table {\n display: block;\n position: relative;\n max-width: 100%;\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n .kol-table__scroll-container {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .kol-table__table {\n width: 100%;\n }\n .kol-table__caption {\n min-height: var(--a11y-min-size);\n padding-right: var(--a11y-min-size);\n text-align: start;\n }\n .kol-table__sort-button .kol-button {\n color: inherit;\n }\n .kol-table__body {\n text-align: left;\n }\n .kol-table__body .kol-button__text {\n justify-items: start;\n }\n .kol-table__cell--align-left {\n text-align: left;\n }\n .kol-table__cell--align-left .kol-button__text {\n align-items: start;\n }\n .kol-table__cell--align-center {\n text-align: center;\n }\n .kol-table__cell--align-center .kol-button__text {\n align-items: center;\n }\n .kol-table__cell--align-right {\n text-align: right;\n }\n .kol-table__cell--align-right .kol-button__text {\n align-items: end;\n }\n .kol-table__cell--selection {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection-label {\n display: flex;\n position: relative;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n .kol-table__selection-label--disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-icon {\n display: block;\n position: absolute;\n inset: auto;\n z-index: 1;\n }\n .kol-table__selection-input {\n border-style: solid;\n margin: 0;\n appearance: none;\n cursor: pointer;\n }\n .kol-table__selection-input:disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-input:before {\n content: \"\";\n }\n .kol-table__selection-input--checkbox {\n background-color: rgb(255, 255, 255);\n display: flex;\n position: relative;\n width: calc(var(--a11y-min-size) / 2);\n height: calc(var(--a11y-min-size) / 2);\n border-width: 2px;\n align-items: center;\n justify-content: center;\n line-height: 1.5;\n }\n .kol-table__selection-input--radio {\n border-radius: 100%;\n display: flex;\n width: 1.5em;\n min-width: 1.5em;\n height: 1.5em;\n min-height: 1.5em;\n padding: 0;\n border-width: 2px;\n }\n .kol-table__selection-input--radio:before {\n border-radius: 100%;\n width: 0.75em;\n height: 0.75em;\n margin: auto;\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .kol-table__selection-input--radio:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-select {\n background-color: transparent;\n width: 100%;\n }\n .kol-select:not(:disabled) {\n cursor: pointer;\n }\n .kol-select:not([multiple], [size]) {\n height: 2.75em;\n }\n .kol-select:focus {\n outline: none;\n }\n .kol-select__option:checked::before {\n content: \"✓ \";\n }\n .kol-select {\n /* needed hack for vertical alignment */\n }\n .kol-select[multiple] option {\n padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n }\n .kol-pagination {\n display: grid;\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n .kol-pagination__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 .kol-pagination__separator:before {\n content: \"•••\";\n }\n .kol-pagination__page-size-select .kol-form-field-select {\n align-items: center;\n grid-template-columns: 1fr max-content;\n }\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n display: grid;\n place-items: center;\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n grid-auto-flow: column;\n }\n }\n .kol-pagination {\n display: flex;\n flex-wrap: wrap;\n }\n @media (min-width: 1024px) {\n .kol-pagination {\n display: flex;\n }\n }\n @media (max-width: 1024px) {\n .kol-pagination {\n flex-direction: column;\n }\n }\n}";
|
|
28871
28931
|
|
|
28872
28932
|
const PAGINATION_OPTIONS = [10, 20, 50, 100];
|
|
28873
28933
|
const paginationValidator = (value) => value === true || value === '' || (typeof value === 'object' && value !== null);
|
|
@@ -29202,7 +29262,7 @@ class KolTableStateful {
|
|
|
29202
29262
|
horizontal: (_d = (_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) }))))) !== null && _d !== void 0 ? _d : [],
|
|
29203
29263
|
vertical: (_f = (_e = this.state._headers.vertical) === null || _e === void 0 ? void 0 : _e.map((column) => column.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) }))))) !== null && _f !== void 0 ? _f : [],
|
|
29204
29264
|
};
|
|
29205
|
-
return (hAsync(Host, { key: '
|
|
29265
|
+
return (hAsync(Host, { key: '5ab8ff5b83647e809cddeccf2245696887bd12b4', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: 'a508c9984294f4be4f37b43ea4b8d5f7417c0818', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
|
|
29206
29266
|
onSort: (_, payload) => {
|
|
29207
29267
|
this.handleSort(payload);
|
|
29208
29268
|
},
|
|
@@ -29261,7 +29321,7 @@ let KolTableStateless$1 = class KolTableStateless {
|
|
|
29261
29321
|
registerInstance(this, hostRef);
|
|
29262
29322
|
}
|
|
29263
29323
|
render() {
|
|
29264
|
-
return (hAsync(KolTableStatelessWcTag, { key: '
|
|
29324
|
+
return (hAsync(KolTableStatelessWcTag, { key: '0bb344f2ce9af4bfcfe4f075b4a86343b33f275f', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection, _tableSettings: this._tableSettings, _hasSettingsMenu: this._hasSettingsMenu }));
|
|
29265
29325
|
}
|
|
29266
29326
|
static get style() { return {
|
|
29267
29327
|
default: defaultStyleCss$7
|
|
@@ -29889,12 +29949,12 @@ class KolTableStateless {
|
|
|
29889
29949
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
29890
29950
|
this.checkboxRefs = [];
|
|
29891
29951
|
const sortedHorizontalHeaders = (_a = this.state._headerCells.horizontal) === null || _a === void 0 ? void 0 : _a.map((row) => this.sortByColumnPosition(row));
|
|
29892
|
-
return (hAsync("div", { key: '
|
|
29952
|
+
return (hAsync("div", { key: 'a66eb9f22e8267d1bfcc00b2429b8234e07beb51', class: "kol-table" }, this.state._hasSettingsMenu && hAsync(KolTableSettingsWcTag, { key: '8c5bfcc3f01813773d07912fcf2fa78455efac06', _tableSettings: this.state._tableSettings }), hAsync("div", { key: '6f9ac777bae4c27c80052aeeae5678ddff56a6bc', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '89710649cdcd7fcca523656de8f8b13fc3d9509f', class: "kol-table__table", style: {
|
|
29893
29953
|
minWidth: this.getTableMinWidth(),
|
|
29894
|
-
} }, hAsync("caption", { key: '
|
|
29954
|
+
} }, hAsync("caption", { key: '0f5550f8377daed2043a18de8c2cdb5b6e45f554', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(sortedHorizontalHeaders) && (hAsync("thead", { key: '83577b101b26b8ee80bc81ccd12526fb78f576c4', class: "kol-table__head" }, [
|
|
29895
29955
|
sortedHorizontalHeaders.map((cols, rowIndex) => (hAsync("tr", { class: "kol-table__head-row", key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) && cols.map((cell, colIndex) => this.renderHeadingCell(cell, rowIndex, colIndex, false))))),
|
|
29896
29956
|
this.renderSpacer('head', sortedHorizontalHeaders),
|
|
29897
|
-
])), hAsync("tbody", { key: '
|
|
29957
|
+
])), hAsync("tbody", { key: '6fe763adb26ca11ebea14f035200df42c970d5cd', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
|
|
29898
29958
|
}
|
|
29899
29959
|
get host() { return getElement(this); }
|
|
29900
29960
|
static get watchers() { return {
|
|
@@ -30135,9 +30195,9 @@ class KolTabs {
|
|
|
30135
30195
|
}, _icons: "codicon codicon-plus", "data-testid": "tabs-create-button" }))));
|
|
30136
30196
|
}
|
|
30137
30197
|
render() {
|
|
30138
|
-
return (hAsync("div", { key: '
|
|
30198
|
+
return (hAsync("div", { key: '5ff105f158763851589016d153653f9082038b09', ref: (el) => {
|
|
30139
30199
|
this.tabPanelsElement = el;
|
|
30140
|
-
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
30200
|
+
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: 'f474721466208ada0a986ba4e00863b025195fb4', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
|
|
30141
30201
|
}
|
|
30142
30202
|
validateAlign(value) {
|
|
30143
30203
|
validateAlign(this, value);
|
|
@@ -30363,7 +30423,7 @@ class KolTextarea {
|
|
|
30363
30423
|
} });
|
|
30364
30424
|
}
|
|
30365
30425
|
render() {
|
|
30366
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
30426
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '2c2f033030f99e33507c059de0820cc72de7a599' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b64d16f3b7484d98ef5c85f0a2fd41a90bc2469a', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: 'dec62bcfd41aaf9af259d7c40bb194d5dd157e8b' }, this.getTextAreaProps())))));
|
|
30367
30427
|
}
|
|
30368
30428
|
constructor(hostRef) {
|
|
30369
30429
|
registerInstance(this, hostRef);
|
|
@@ -30635,7 +30695,7 @@ class KolToastContainer {
|
|
|
30635
30695
|
}
|
|
30636
30696
|
}
|
|
30637
30697
|
render() {
|
|
30638
|
-
return (hAsync(Host, { key: '
|
|
30698
|
+
return (hAsync(Host, { key: '05182cc920080f5bc3c06bb647a1bf59c58fae8d', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: 'e4e196489dd617e994ba8c11c38893dd505db1e1', _label: this.translateToastCloseAll, class: "kol-toast-container__button-close-all", _on: {
|
|
30639
30699
|
onClick: () => {
|
|
30640
30700
|
void this.closeAll();
|
|
30641
30701
|
},
|
|
@@ -30689,7 +30749,7 @@ class KolToolbar {
|
|
|
30689
30749
|
return Object.assign(Object.assign({}, rest), { _icons, _disabled });
|
|
30690
30750
|
}
|
|
30691
30751
|
render() {
|
|
30692
|
-
return (hAsync("div", { key: '
|
|
30752
|
+
return (hAsync("div", { key: '9dd677a500fea840ccbfca4ee4d1eca92a06a903', class: `kol-toolbar kol-toolbar--orientation-${this.state._orientation}`, role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem)));
|
|
30693
30753
|
}
|
|
30694
30754
|
validateLabel(value) {
|
|
30695
30755
|
validateLabel(this, value);
|
|
@@ -30928,7 +30988,7 @@ class KolTooltipWc {
|
|
|
30928
30988
|
getDocument().removeEventListener('keyup', this.hideTooltipByEscape);
|
|
30929
30989
|
}
|
|
30930
30990
|
render() {
|
|
30931
|
-
return (hAsync(Host, { key: '
|
|
30991
|
+
return (hAsync(Host, { key: 'a2f5eaf3bdde31f05706c525fb3382d04449877d', class: "kol-tooltip" }, this.state._label !== '' && (hAsync("div", { key: 'd29670e80057f25e00c3826a093d5baef0106ce6', class: "kol-tooltip__floating", ref: this.catchTooltipElement }, hAsync("div", { key: '5ea823469aa2fcb1c3dbf56b628445814f4fc8d0', class: "kol-tooltip__arrow", ref: this.catchArrowElement }), hAsync(KolSpanFc, { key: '49c40bebd3067ede516b5f7edc9749f52a08cf80', class: "kol-tooltip__content", id: this.state._id, badgeText: this._badgeText, label: this.state._label })))));
|
|
30932
30992
|
}
|
|
30933
30993
|
validateBadgeText(value) {
|
|
30934
30994
|
validateBadgeText(this, value);
|
|
@@ -31006,7 +31066,7 @@ class KolTree {
|
|
|
31006
31066
|
registerInstance(this, hostRef);
|
|
31007
31067
|
}
|
|
31008
31068
|
render() {
|
|
31009
|
-
return (hAsync(KolTreeWcTag, { key: '
|
|
31069
|
+
return (hAsync(KolTreeWcTag, { key: 'c9729dc44fcf465925dc6a866d399e62413cf9e1', _label: this._label }, hAsync("slot", { key: 'ff341bf2e8b093cedea4f62ee4c9f54403aa1e7c' })));
|
|
31010
31070
|
}
|
|
31011
31071
|
static get style() { return {
|
|
31012
31072
|
default: defaultStyleCss$2
|
|
@@ -31049,7 +31109,7 @@ class KolTreeItem {
|
|
|
31049
31109
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
31050
31110
|
}
|
|
31051
31111
|
render() {
|
|
31052
|
-
return (hAsync(KolTreeItemWcTag, { key: '
|
|
31112
|
+
return (hAsync(KolTreeItemWcTag, { key: '87d60840b65ed567e5e6075f362e33933563c5c9', _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: 'b0b1d7110cc70ee74fe026e0bedd2620fc423c1d' })));
|
|
31053
31113
|
}
|
|
31054
31114
|
static get style() { return {
|
|
31055
31115
|
default: defaultStyleCss$1
|
|
@@ -31087,12 +31147,12 @@ class KolTreeItemWc {
|
|
|
31087
31147
|
}
|
|
31088
31148
|
render() {
|
|
31089
31149
|
const { _href, _active, _hasChildren, _open, _label } = this.state;
|
|
31090
|
-
return (hAsync(Host, { key: '
|
|
31150
|
+
return (hAsync(Host, { key: '442889bb000355873e79c2df59cce348ed0afb0c', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { key: 'ab695fb7c3857e493631704e56f86b6c6211ad9f', class: "kol-tree-item", style: {
|
|
31091
31151
|
'--level': `${this.level}`,
|
|
31092
|
-
} }, hAsync(KolLinkWcTag, { key: '
|
|
31152
|
+
} }, hAsync(KolLinkWcTag, { key: 'ac9855976707c3665cb09f90af3a6ecd490bb653', class: clsx('kol-tree-item__link', {
|
|
31093
31153
|
'kol-tree-item__link--first-level': this.level === 0,
|
|
31094
31154
|
'kol-tree-item__link--active': _active,
|
|
31095
|
-
}), _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: '
|
|
31155
|
+
}), _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: '9122a46258722d8df6bc5423cf8ee8b9412c763b', class: "kol-tree-item__link-inner", slot: "expert" }, _hasChildren ? (hAsync("span", { class: "kol-tree-item__toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, hAsync(KolIconTag, { class: "kol-tree-item__toggle-button-icon", _icons: `codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`, _label: '' }))) : (hAsync("span", { class: "kol-tree-item__toggle-button-placeholder" })), hAsync("span", { key: 'b6108f314822588593d7426ad43f3bddaf42ae3c', class: "kol-tree-item__text" }, _label))), hAsync("ul", { key: '2ca328f5ca9dfc25264ac1cf5a05ebf9b8a47eb8', class: "kol-tree-item__children", hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: '756437d12f6ea52ef666a5813221d84b6b29c575' })))));
|
|
31096
31156
|
}
|
|
31097
31157
|
validateActive(value) {
|
|
31098
31158
|
validateActive(this, value || false);
|
|
@@ -31196,7 +31256,7 @@ class KolTreeWc {
|
|
|
31196
31256
|
validateLabel(this, value);
|
|
31197
31257
|
}
|
|
31198
31258
|
render() {
|
|
31199
|
-
return (hAsync(Host, { key: '
|
|
31259
|
+
return (hAsync(Host, { key: 'c491bc228b1db3a9707ee892a6c307ce675bde4e', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("nav", { key: '50bbc945f1302a0ddd8376076e61823a0b123aa3', class: "kol-tree", "aria-label": this.state._label }, hAsync("ul", { key: '3d915f2ef9fe71b126b2778cc093e91a7907f010', class: "kol-tree__treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: 'a97a01e4eb25a47c667531d99db716d47e404779' })))));
|
|
31200
31260
|
}
|
|
31201
31261
|
static isTreeItem(element) {
|
|
31202
31262
|
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
|
@@ -31393,7 +31453,7 @@ class KolVersion {
|
|
|
31393
31453
|
};
|
|
31394
31454
|
}
|
|
31395
31455
|
render() {
|
|
31396
|
-
return (hAsync(Host, { key: '
|
|
31456
|
+
return (hAsync(Host, { key: 'e510fa48ba288ec02a12f779576f8b5044bffbb3', class: "kol-version" }, hAsync(KolBadgeTag, { key: 'c51ecb43bea94a9b609035916ff21e1fcd4be1fa', _color: "#bec5c9", _icons: {
|
|
31397
31457
|
left: { icon: 'codicon codicon-versions', label: this.translateVersion },
|
|
31398
31458
|
}, _label: this.state._label })));
|
|
31399
31459
|
}
|
|
@@ -31483,6 +31543,7 @@ registerComponents([
|
|
|
31483
31543
|
KolProgress,
|
|
31484
31544
|
KolQuote,
|
|
31485
31545
|
KolSelect,
|
|
31546
|
+
KolSelectWc,
|
|
31486
31547
|
KolSingleSelect,
|
|
31487
31548
|
KolSkipNav,
|
|
31488
31549
|
KolSpin,
|