@public-ui/hydrate 4.0.0-alpha.8 → 4.0.0-alpha.9
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 +89 -43
- package/dist/index.mjs +89 -43
- 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":"4.0.0-alpha.
|
|
149
|
+
const Env = /* kolibri */ {"kolibriVersion":"4.0.0-alpha.9"};
|
|
150
150
|
|
|
151
151
|
function getDefaultExportFromCjs (x) {
|
|
152
152
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
@@ -6480,10 +6480,11 @@ var locale_de = {
|
|
|
6480
6480
|
'open-link-in-tab': 'Öffnet in neuem Tab.',
|
|
6481
6481
|
'kolibri-logo': 'Logo von KoliBri',
|
|
6482
6482
|
'table-pagination-label': 'Paginierung für die Tabelle {{label}}',
|
|
6483
|
+
'table-sort-order': 'Priorität {{order}}',
|
|
6483
6484
|
'avatar-alt': 'Avatar von {{name}}',
|
|
6484
6485
|
'split-button-dropdown-label-open': 'Optionen anzeigen',
|
|
6485
6486
|
'split-button-dropdown-label-close': 'Optionen schließen',
|
|
6486
|
-
'toast-close-all': 'Alle schließen',
|
|
6487
|
+
'toast-close-all': 'Alle Benachrichtigungen schließen',
|
|
6487
6488
|
'error-list': 'Fehlerliste',
|
|
6488
6489
|
'error-list-message': 'Bitte korrigieren Sie folgende Fehler:',
|
|
6489
6490
|
version: 'Versionsnummer',
|
|
@@ -6551,10 +6552,11 @@ var locale_en = {
|
|
|
6551
6552
|
'open-link-in-tab': 'Opens in new tab.',
|
|
6552
6553
|
'kolibri-logo': 'KoliBri logo',
|
|
6553
6554
|
'table-pagination-label': 'Pagination for table {{label}}',
|
|
6555
|
+
'table-sort-order': 'Priority {{order}}',
|
|
6554
6556
|
'avatar-alt': 'Avatar of {{name}}',
|
|
6555
6557
|
'split-button-dropdown-label-open': 'Show options',
|
|
6556
6558
|
'split-button-dropdown-label-close': 'Hide options',
|
|
6557
|
-
'toast-close-all': 'Close all',
|
|
6559
|
+
'toast-close-all': 'Close all notifications',
|
|
6558
6560
|
'error-list': 'Error list',
|
|
6559
6561
|
'error-list-message': 'Please correct the following errors',
|
|
6560
6562
|
version: 'Version number',
|
|
@@ -9491,7 +9493,7 @@ const InputContainer$1 = (_a, children) => {
|
|
|
9491
9493
|
};
|
|
9492
9494
|
const KolFormFieldFc = (props, children) => {
|
|
9493
9495
|
var _a;
|
|
9494
|
-
const { component: Component = 'div', renderNoLabel, renderNoTooltip, renderNoHint, anotherChildren, id, required, alert, disabled, class: classNames, msg, hideMsg, hideLabel, label, hint, accessKey, shortKey, tooltipAlign, counter, readOnly, touched, maxLength, formFieldLabelProps, formFieldHintProps, formFieldTooltipProps, formFieldMsgProps, formFieldInputProps } = props, other = __rest(props, ["component", "renderNoLabel", "renderNoTooltip", "renderNoHint", "anotherChildren", "id", "required", "alert", "disabled", "class", "msg", "hideMsg", "hideLabel", "label", "hint", "accessKey", "shortKey", "tooltipAlign", "counter", "readOnly", "touched", "maxLength", "formFieldLabelProps", "formFieldHintProps", "formFieldTooltipProps", "formFieldMsgProps", "formFieldInputProps"]);
|
|
9496
|
+
const { component: Component = 'div', renderNoLabel, renderNoTooltip, renderNoHint, anotherChildren, id, required, alert, disabled, class: classNames, msg, hideMsg, hideLabel, label, hint, accessKey, shortKey, tooltipAlign, counter, readOnly, touched, maxLength, ariaDescribedBy, formFieldLabelProps, formFieldHintProps, formFieldTooltipProps, formFieldMsgProps, formFieldInputProps } = props, other = __rest(props, ["component", "renderNoLabel", "renderNoTooltip", "renderNoHint", "anotherChildren", "id", "required", "alert", "disabled", "class", "msg", "hideMsg", "hideLabel", "label", "hint", "accessKey", "shortKey", "tooltipAlign", "counter", "readOnly", "touched", "maxLength", "ariaDescribedBy", "formFieldLabelProps", "formFieldHintProps", "formFieldTooltipProps", "formFieldMsgProps", "formFieldInputProps"]);
|
|
9495
9497
|
const showLabel = !renderNoLabel;
|
|
9496
9498
|
const showHint = !renderNoHint;
|
|
9497
9499
|
const showTooltip = !renderNoTooltip;
|
|
@@ -9511,7 +9513,7 @@ const KolFormFieldFc = (props, children) => {
|
|
|
9511
9513
|
if (showMsg) {
|
|
9512
9514
|
stateCssClasses = Object.assign(Object.assign({}, stateCssClasses), { [`kol-form-field--${msgType || 'error'}`]: true, [`kol-form-field--${getModifierClassNameByMsgType({ type: msgType })}`]: true });
|
|
9513
9515
|
}
|
|
9514
|
-
return (hAsync(Component, Object.assign({ class: clsx('kol-form-field', stateCssClasses, classNames) }, other), showLabel && (hAsync(KolFormFieldLabelFc, Object.assign({}, (formFieldLabelProps || {}), { id: id, hasExpertSlot: hasExpertSlot, hideLabel: hideLabel, label: label, accessKey: accessKey, shortKey: shortKey, readOnly: readOnly }))), hAsync(InputContainer$1, Object.assign({}, formFieldInputProps), children, useTooltipInsteadOfLabel && hideLabel === true && (hAsync(FormFieldTooltipFc, Object.assign({}, (formFieldTooltipProps || {}), { id: id, label: label, align: tooltipAlign, badgeText: badgeText })))), counter ? hAsync(KolFormFieldCounterFc, Object.assign({ id: id }, counter)) : null, maxLength ? hAsync(KolFormFieldCharacterLimitHintFc, { id: id, maxLength: maxLength }) : null, showMsg && !hideMsg && hAsync(FormFieldMsgFc, Object.assign({}, (formFieldMsgProps || {}), { id: id, alert: alert, msg: msg })), showHint && hAsync(KolFormFieldHintFc, Object.assign({}, (formFieldHintProps || {}), { id: id, hint: hint })), anotherChildren));
|
|
9516
|
+
return (hAsync(Component, Object.assign({ class: clsx('kol-form-field', stateCssClasses, classNames), "aria-describedby": ariaDescribedBy }, other), showLabel && (hAsync(KolFormFieldLabelFc, Object.assign({}, (formFieldLabelProps || {}), { id: id, hasExpertSlot: hasExpertSlot, hideLabel: hideLabel, label: label, accessKey: accessKey, shortKey: shortKey, readOnly: readOnly }))), hAsync(InputContainer$1, Object.assign({}, formFieldInputProps), children, useTooltipInsteadOfLabel && hideLabel === true && (hAsync(FormFieldTooltipFc, Object.assign({}, (formFieldTooltipProps || {}), { id: id, label: label, align: tooltipAlign, badgeText: badgeText })))), counter ? hAsync(KolFormFieldCounterFc, Object.assign({ id: id }, counter)) : null, maxLength ? hAsync(KolFormFieldCharacterLimitHintFc, { id: id, maxLength: maxLength }) : null, showMsg && !hideMsg && hAsync(FormFieldMsgFc, Object.assign({}, (formFieldMsgProps || {}), { id: id, alert: alert, msg: msg })), showHint && hAsync(KolFormFieldHintFc, Object.assign({}, (formFieldHintProps || {}), { id: id, hint: hint })), anotherChildren));
|
|
9515
9517
|
};
|
|
9516
9518
|
|
|
9517
9519
|
const KolIconFc = (props) => {
|
|
@@ -18592,7 +18594,7 @@ class KolBadge {
|
|
|
18592
18594
|
};
|
|
18593
18595
|
}
|
|
18594
18596
|
renderSmartButton(props) {
|
|
18595
|
-
return (hAsync(KolButtonWcTag, { ref: this.catchSmartButtonRef, class: "kol-badge__smart-button", _ariaControls: this.id, _customClass: props._customClass, _disabled: props._disabled, _hideLabel: true, _icons: props._icons, _id: props._id, _label: props._label, _on: props._on, _tooltipAlign: props._tooltipAlign
|
|
18597
|
+
return (hAsync(KolButtonWcTag, { ref: this.catchSmartButtonRef, class: "kol-badge__smart-button", _ariaControls: this.id, _ariaDescription: props._ariaDescription, _buttonVariant: props._variant, _customClass: props._customClass, _disabled: props._disabled, _hideLabel: true, _icons: props._icons, _id: props._id, _label: props._label, _on: props._on, _tooltipAlign: props._tooltipAlign }));
|
|
18596
18598
|
}
|
|
18597
18599
|
async kolFocus() {
|
|
18598
18600
|
var _a;
|
|
@@ -18600,12 +18602,12 @@ class KolBadge {
|
|
|
18600
18602
|
}
|
|
18601
18603
|
render() {
|
|
18602
18604
|
const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;
|
|
18603
|
-
return (hAsync("span", { key: '
|
|
18605
|
+
return (hAsync("span", { key: '1783be722727cb3b05b54342718cc09a753f9470', class: clsx('kol-badge', {
|
|
18604
18606
|
'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
|
|
18605
18607
|
}), style: {
|
|
18606
18608
|
backgroundColor: this.bgColorStr,
|
|
18607
18609
|
color: this.colorStr,
|
|
18608
|
-
} }, hAsync(KolSpanFc, { key: '
|
|
18610
|
+
} }, hAsync(KolSpanFc, { key: '273924ed45d55804ef6a0636604b4f7a9fb7257c', class: "kol-badge__label", id: hasSmartButton ? this.id : undefined, allowMarkdown: true, icons: this.state._icons, label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton)));
|
|
18609
18611
|
}
|
|
18610
18612
|
validateIcons(value) {
|
|
18611
18613
|
validateIcons(this, value);
|
|
@@ -18796,7 +18798,7 @@ class KolButton {
|
|
|
18796
18798
|
}; }
|
|
18797
18799
|
}
|
|
18798
18800
|
|
|
18799
|
-
const defaultStyleCss$F = "/* 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: inline-block;\n }\n .kol-button {\n display: inline-flex;\n max-width: fit-content;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-button--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-button__text .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-button__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--inline {\n min-height: unset;\n }\n}";
|
|
18801
|
+
const defaultStyleCss$F = "/* 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: inline-block;\n }\n .kol-button {\n display: inline-flex;\n max-width: fit-content;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-button--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-button__text .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-button__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--inline {\n min-width: unset;\n min-height: unset;\n }\n}";
|
|
18800
18802
|
|
|
18801
18803
|
class KolButtonLink {
|
|
18802
18804
|
constructor(hostRef) {
|
|
@@ -19526,7 +19528,11 @@ function getFormFieldProps(state) {
|
|
|
19526
19528
|
}
|
|
19527
19529
|
const FormFieldStateWrapper = (_a, children) => {
|
|
19528
19530
|
var { state } = _a, other = __rest(_a, ["state"]);
|
|
19529
|
-
|
|
19531
|
+
const { ariaDescribedBy: ariaDescribedByArray } = getRenderStates(state);
|
|
19532
|
+
const isRadioVariant = other.component === 'fieldset' || ('_options' in state && '_orientation' in state);
|
|
19533
|
+
const ariaDescribedBy = isRadioVariant && ariaDescribedByArray.length > 0 ? ariaDescribedByArray.join(' ') : undefined;
|
|
19534
|
+
const baseProps = getFormFieldProps(state);
|
|
19535
|
+
return (hAsync(KolFormFieldFc, Object.assign({}, baseProps, other, { ariaDescribedBy: ariaDescribedBy }), children));
|
|
19530
19536
|
};
|
|
19531
19537
|
|
|
19532
19538
|
const KolButtonFc = (props) => {
|
|
@@ -19659,7 +19665,7 @@ const InputStateWrapper = (_a) => {
|
|
|
19659
19665
|
return hAsync(InputFc, Object.assign({}, getInputProps(state, other, customSuggestions)));
|
|
19660
19666
|
};
|
|
19661
19667
|
|
|
19662
|
-
const CustomSuggestionsOptionFc = ({ index, ref, selected, onClick, onMouseOver, onFocus, onKeyDown, option, searchTerm }) => {
|
|
19668
|
+
const CustomSuggestionsOptionFc = ({ disabled, index, ref, selected, onClick, onMouseOver, onFocus, onKeyDown, option, searchTerm, }) => {
|
|
19663
19669
|
const highlightSearchTerm = (text, searchTerm) => {
|
|
19664
19670
|
if (!(searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.trim()))
|
|
19665
19671
|
return text;
|
|
@@ -19667,7 +19673,7 @@ const CustomSuggestionsOptionFc = ({ index, ref, selected, onClick, onMouseOver,
|
|
|
19667
19673
|
const parts = text.split(regex);
|
|
19668
19674
|
return parts.map((part, partIndex) => (regex.test(part) ? hAsync("mark", { key: partIndex }, part) : part));
|
|
19669
19675
|
};
|
|
19670
|
-
return (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: ref, "data-index": index, tabIndex: -1, role: "option", "aria-selected": selected ? 'true' : undefined, onClick: onClick, onMouseOver: onMouseOver, onFocus: onFocus, class:
|
|
19676
|
+
return (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: ref, "data-index": index, tabIndex: -1, role: "option", "aria-selected": selected ? 'true' : undefined, "aria-disabled": disabled ? 'true' : undefined, onClick: onClick, onMouseOver: onMouseOver, onFocus: onFocus, class: clsx('kol-custom-suggestions-option', { 'kol-custom-suggestions-option--disabled': disabled }), onKeyDown: onKeyDown }, highlightSearchTerm(String(option), searchTerm || '')));
|
|
19671
19677
|
};
|
|
19672
19678
|
|
|
19673
19679
|
const CustomSuggestionsOptionsGroupFc = ({ blockSuggestionMouseOver, onKeyDown, style }, children) => {
|
|
@@ -19935,7 +19941,7 @@ class ComboboxController extends InputIconController {
|
|
|
19935
19941
|
}
|
|
19936
19942
|
}
|
|
19937
19943
|
|
|
19938
|
-
const defaultStyleCss$D = "/*\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-custom-suggestions-option {\n line-height: 1.5;\n white-space: normal;\n cursor: pointer;\n overflow-wrap: break-word;\n }\n .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n cursor: none !important;\n }\n .kol-custom-suggestions-options-group {\n background-color: white;\n display: block;\n position: absolute;\n z-index: 2;\n max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n overflow-y: auto;\n list-style-type: none;\n }\n .kol-custom-suggestions-toggle {\n display: flex;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: default;\n }\n .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n cursor: not-allowed;\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:not(:empty)) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\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-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-combobox__delete .kol-button {\n cursor: pointer;\n }\n .kol-combobox__delete--disabled .kol-button {\n cursor: not-allowed;\n }\n .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n cursor: pointer;\n }\n .kol-custom-suggestions-toggle--disabled {\n opacity: 0.5;\n }\n}";
|
|
19944
|
+
const defaultStyleCss$D = "/*\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-custom-suggestions-option {\n line-height: 1.5;\n white-space: normal;\n cursor: pointer;\n overflow-wrap: break-word;\n }\n .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n cursor: none !important;\n }\n .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n cursor: not-allowed;\n }\n .kol-custom-suggestions-options-group {\n background-color: white;\n display: block;\n position: absolute;\n z-index: 2;\n max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n overflow-y: auto;\n list-style-type: none;\n }\n .kol-custom-suggestions-toggle {\n display: flex;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: default;\n }\n .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n cursor: not-allowed;\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:not(:empty)) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\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-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-combobox__delete .kol-button {\n cursor: pointer;\n }\n .kol-combobox__delete--disabled .kol-button {\n cursor: not-allowed;\n }\n .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n cursor: pointer;\n }\n .kol-custom-suggestions-toggle--disabled {\n opacity: 0.5;\n }\n}";
|
|
19939
19945
|
|
|
19940
19946
|
class KolCombobox {
|
|
19941
19947
|
async getValue() {
|
|
@@ -20060,7 +20066,7 @@ class KolCombobox {
|
|
|
20060
20066
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
20061
20067
|
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: 'ffbaa34f6801783d5255b82d6df3df643b53913f', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
|
|
20062
20068
|
this._filteredSuggestions.length > 0 &&
|
|
20063
|
-
this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option, searchTerm: this.state._value, ref: (el) => {
|
|
20069
|
+
this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { disabled: false, index: index, option: option, searchTerm: this.state._value, ref: (el) => {
|
|
20064
20070
|
if (el)
|
|
20065
20071
|
this.refSuggestions[index] = el;
|
|
20066
20072
|
}, selected: this.state._value === option, onClick: () => {
|
|
@@ -21228,7 +21234,6 @@ class KolInputCheckbox {
|
|
|
21228
21234
|
[`kol-input-checkbox--label-align-${this.state._labelAlign || 'right'}`]: true,
|
|
21229
21235
|
}),
|
|
21230
21236
|
tooltipAlign: this._tooltipAlign,
|
|
21231
|
-
'data-role': this.state._variant === 'button' ? 'button' : undefined,
|
|
21232
21237
|
alert: this.showAsAlert(),
|
|
21233
21238
|
renderNoTooltip: true,
|
|
21234
21239
|
};
|
|
@@ -21266,7 +21271,7 @@ class KolInputCheckbox {
|
|
|
21266
21271
|
return this.state._icons.unchecked;
|
|
21267
21272
|
}
|
|
21268
21273
|
render() {
|
|
21269
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
21274
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'ea78897d3814398c2b65d1a345d910d874a08098' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(FieldControlStateWrapper, Object.assign({ key: '6b5bee7c4aa84f1a204f1ce6aafd5981e48d64b5' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(CheckboxStateWrapper, Object.assign({ key: '4f8275511a19f813c31ae714c448133588480339' }, this.getInputProps())))));
|
|
21270
21275
|
}
|
|
21271
21276
|
constructor(hostRef) {
|
|
21272
21277
|
registerInstance(this, hostRef);
|
|
@@ -23303,7 +23308,6 @@ const RadioFc = (_a) => {
|
|
|
23303
23308
|
};
|
|
23304
23309
|
|
|
23305
23310
|
function getRadioProps(state, inputProps = {}) {
|
|
23306
|
-
const { ariaDescribedBy } = getRenderStates(state);
|
|
23307
23311
|
const props = {
|
|
23308
23312
|
id: state._id,
|
|
23309
23313
|
hideLabel: state._hideLabel,
|
|
@@ -23311,7 +23315,6 @@ function getRadioProps(state, inputProps = {}) {
|
|
|
23311
23315
|
value: state._value,
|
|
23312
23316
|
disabled: state._disabled,
|
|
23313
23317
|
name: state._name,
|
|
23314
|
-
ariaDescribedBy,
|
|
23315
23318
|
};
|
|
23316
23319
|
if ('_required' in state)
|
|
23317
23320
|
props.required = state._required;
|
|
@@ -27939,7 +27942,7 @@ class SingleSelectController extends InputIconController {
|
|
|
27939
27942
|
}
|
|
27940
27943
|
}
|
|
27941
27944
|
|
|
27942
|
-
const defaultStyleCss$c = "/*\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-custom-suggestions-option {\n line-height: 1.5;\n white-space: normal;\n cursor: pointer;\n overflow-wrap: break-word;\n }\n .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n cursor: none !important;\n }\n .kol-custom-suggestions-options-group {\n background-color: white;\n display: block;\n position: absolute;\n z-index: 2;\n max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n overflow-y: auto;\n list-style-type: none;\n }\n .kol-custom-suggestions-toggle {\n display: flex;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: default;\n }\n .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n cursor: not-allowed;\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:not(:empty)) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\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-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-single-select__delete .kol-button {\n cursor: pointer;\n }\n .kol-single-select__delete--disabled .kol-button {\n cursor: not-allowed;\n }\n .kol-single-select__no-results-message {\n display: flex;\n min-height: calc(50 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n justify-content: center;\n cursor: default;\n }\n .kol-single-select .kol-custom-suggestions-options-group {\n max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * var(--visible-options, 5) + 2 * 1rem / var(--kolibri-root-font-size, 16)) !important;\n }\n .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n cursor: pointer;\n }\n .kol-custom-suggestions-toggle--disabled {\n opacity: 0.5;\n }\n}";
|
|
27945
|
+
const defaultStyleCss$c = "/*\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-custom-suggestions-option {\n line-height: 1.5;\n white-space: normal;\n cursor: pointer;\n overflow-wrap: break-word;\n }\n .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n cursor: none !important;\n }\n .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n cursor: not-allowed;\n }\n .kol-custom-suggestions-options-group {\n background-color: white;\n display: block;\n position: absolute;\n z-index: 2;\n max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n overflow-y: auto;\n list-style-type: none;\n }\n .kol-custom-suggestions-toggle {\n display: flex;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: default;\n }\n .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n cursor: not-allowed;\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:not(:empty)) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\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-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-single-select__delete .kol-button {\n cursor: pointer;\n }\n .kol-single-select__delete--disabled .kol-button {\n cursor: not-allowed;\n }\n .kol-single-select__no-results-message {\n display: flex;\n min-height: calc(50 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n justify-content: center;\n cursor: default;\n }\n .kol-single-select .kol-custom-suggestions-options-group {\n max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * var(--visible-options, 5) + 2 * 1rem / var(--kolibri-root-font-size, 16)) !important;\n }\n .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n cursor: pointer;\n }\n .kol-custom-suggestions-toggle--disabled {\n opacity: 0.5;\n }\n}";
|
|
27943
27946
|
|
|
27944
27947
|
class KolSingleSelect {
|
|
27945
27948
|
async getValue() {
|
|
@@ -28051,14 +28054,28 @@ class KolSingleSelect {
|
|
|
28051
28054
|
return;
|
|
28052
28055
|
}
|
|
28053
28056
|
let newIndex = this._focusedOptionIndex + delta;
|
|
28054
|
-
|
|
28055
|
-
|
|
28057
|
+
let iterations = 0;
|
|
28058
|
+
let foundEnabledOption = false;
|
|
28059
|
+
const maxIterations = this._filteredOptions.length;
|
|
28060
|
+
while (iterations < maxIterations) {
|
|
28061
|
+
if (newIndex >= this._filteredOptions.length) {
|
|
28062
|
+
newIndex = 0;
|
|
28063
|
+
}
|
|
28064
|
+
if (newIndex < 0) {
|
|
28065
|
+
newIndex = this._filteredOptions.length - 1;
|
|
28066
|
+
}
|
|
28067
|
+
const option = this._filteredOptions[newIndex];
|
|
28068
|
+
if (!option.disabled) {
|
|
28069
|
+
foundEnabledOption = true;
|
|
28070
|
+
break;
|
|
28071
|
+
}
|
|
28072
|
+
newIndex += delta;
|
|
28073
|
+
iterations++;
|
|
28056
28074
|
}
|
|
28057
|
-
if (
|
|
28058
|
-
|
|
28075
|
+
if (foundEnabledOption) {
|
|
28076
|
+
this._focusedOptionIndex = newIndex;
|
|
28077
|
+
this.focusOption(this._focusedOptionIndex);
|
|
28059
28078
|
}
|
|
28060
|
-
this._focusedOptionIndex = newIndex;
|
|
28061
|
-
this.focusOption(this._focusedOptionIndex);
|
|
28062
28079
|
}
|
|
28063
28080
|
focusOption(index) {
|
|
28064
28081
|
if (this.refOptions) {
|
|
@@ -28068,8 +28085,9 @@ class KolSingleSelect {
|
|
|
28068
28085
|
}
|
|
28069
28086
|
focusSuggestionStartingWith(char) {
|
|
28070
28087
|
const charLowerCase = char.toLowerCase();
|
|
28071
|
-
const index = Array.isArray(this._filteredOptions) &&
|
|
28072
|
-
|
|
28088
|
+
const index = Array.isArray(this._filteredOptions) &&
|
|
28089
|
+
this._filteredOptions.findIndex((option) => option.label.toLowerCase().startsWith(charLowerCase) && !option.disabled);
|
|
28090
|
+
if (typeof index === 'number' && index >= 0) {
|
|
28073
28091
|
this._focusedOptionIndex = index;
|
|
28074
28092
|
this.focusOption(index);
|
|
28075
28093
|
}
|
|
@@ -28096,7 +28114,7 @@ class KolSingleSelect {
|
|
|
28096
28114
|
render() {
|
|
28097
28115
|
var _a;
|
|
28098
28116
|
const isDisabled = this.state._disabled === true;
|
|
28099
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
28117
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '807788a04d6f892b815b102024e9226532a91e5f' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '295b55d3fa5a34815b5f93636e770350519b50af', state: this.state }, hAsync("div", { key: '775e8431a8637f1b3a3049602b82fd9e159a0918', class: "kol-single-select__group" }, hAsync(InputStateWrapper, Object.assign({ key: '9e5d1e31e1fc6c5e5536a820ddb8f8d89b94d798' }, this.getInputProps())), this._inputValue && !this.state._hideClearButton && (hAsync(KolButtonWcTag, { key: 'cf5a1f43f6461960b60d940cc4295603a37ea935', _icons: "codicon codicon-close", _label: this.translateDeleteSelection, _hideLabel: true, _buttonVariant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: clsx('kol-single-select__delete', {
|
|
28100
28118
|
'kol-single-select__delete--disabled': isDisabled,
|
|
28101
28119
|
}), _on: {
|
|
28102
28120
|
onClick: () => {
|
|
@@ -28104,13 +28122,16 @@ class KolSingleSelect {
|
|
|
28104
28122
|
this.clearSelection();
|
|
28105
28123
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
28106
28124
|
},
|
|
28107
|
-
} })), hAsync(KolIconTag, { key: '
|
|
28125
|
+
} })), hAsync(KolIconTag, { key: 'eac69712d9714f6236045ba1359d8c0d4b2df795', _icons: "codicon codicon-triangle-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
28108
28126
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
28109
|
-
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '
|
|
28127
|
+
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '1fedad1c5ded22357c315304dde58e46d18af7ff', 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) => {
|
|
28110
28128
|
if (el)
|
|
28111
28129
|
this.refOptions[index] = el;
|
|
28112
|
-
}, selected: this._value === option.value, onClick: (event) => {
|
|
28130
|
+
}, selected: this._value === option.value, disabled: option.disabled ? true : false, onClick: (event) => {
|
|
28113
28131
|
var _a;
|
|
28132
|
+
if (option.disabled) {
|
|
28133
|
+
return;
|
|
28134
|
+
}
|
|
28114
28135
|
this.selectOption(option);
|
|
28115
28136
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
28116
28137
|
this.toggleListbox(event);
|
|
@@ -28121,10 +28142,15 @@ class KolSingleSelect {
|
|
|
28121
28142
|
this.focusOption(index);
|
|
28122
28143
|
}
|
|
28123
28144
|
}, onFocus: () => {
|
|
28124
|
-
|
|
28125
|
-
|
|
28145
|
+
if (!option.disabled) {
|
|
28146
|
+
this._focusedOptionIndex = index;
|
|
28147
|
+
this.focusOption(index);
|
|
28148
|
+
}
|
|
28126
28149
|
}, onKeyDown: (e) => {
|
|
28127
28150
|
var _a;
|
|
28151
|
+
if (option.disabled) {
|
|
28152
|
+
return;
|
|
28153
|
+
}
|
|
28128
28154
|
if (e.key === 'Enter' || e.key === 'NumpadEnter') {
|
|
28129
28155
|
this.selectOption(option);
|
|
28130
28156
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
@@ -28798,7 +28824,7 @@ const validateTableSettings = (component, value) => {
|
|
|
28798
28824
|
watchValidator(component, `_tableSettings`, (value) => typeof value === 'object' && value !== null, new Set(['TableSettings']), value);
|
|
28799
28825
|
};
|
|
28800
28826
|
|
|
28801
|
-
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: flex;\n min-height: var(--a11y-min-size);\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 flex: 1 0 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}";
|
|
28827
|
+
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: flex;\n min-height: var(--a11y-min-size);\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 flex: 1 0 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__sort {\n display: inline-flex;\n gap: 0.25rem;\n align-items: center;\n }\n .kol-table__sort-order {\n display: inline-flex;\n align-items: center;\n justify-content: center;\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}";
|
|
28802
28828
|
|
|
28803
28829
|
const PAGINATION_OPTIONS = [10, 20, 50, 100];
|
|
28804
28830
|
const paginationValidator = (value) => value === true || value === '' || (typeof value === 'object' && value !== null);
|
|
@@ -29084,6 +29110,14 @@ class KolTableStateful {
|
|
|
29084
29110
|
return 'NOS';
|
|
29085
29111
|
}
|
|
29086
29112
|
}
|
|
29113
|
+
getHeaderCellSortOrder(headerCell) {
|
|
29114
|
+
if (!this.disableSort && this.state._allowMultiSort && typeof headerCell.compareFn === 'function' && headerCell.key) {
|
|
29115
|
+
const index = this.sortData.findIndex((value) => value.key === headerCell.key);
|
|
29116
|
+
if (index >= 0) {
|
|
29117
|
+
return index + 1;
|
|
29118
|
+
}
|
|
29119
|
+
}
|
|
29120
|
+
}
|
|
29087
29121
|
handleSort({ key }) {
|
|
29088
29122
|
const headerCell = [...(this.state._headers.horizontal || []).flat(), ...(this.state._headers.vertical || []).flat()].find((cell) => cell.key === key);
|
|
29089
29123
|
if (headerCell) {
|
|
@@ -29126,10 +29160,10 @@ class KolTableStateful {
|
|
|
29126
29160
|
const paginationTop = this._paginationPosition === 'top' || this._paginationPosition === 'both' ? this.renderPagination('top') : null;
|
|
29127
29161
|
const paginationBottom = this._paginationPosition === 'bottom' || this._paginationPosition === 'both' ? this.renderPagination('bottom') : null;
|
|
29128
29162
|
const headerCells = {
|
|
29129
|
-
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 : [],
|
|
29130
|
-
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 : [],
|
|
29163
|
+
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), sortOrder: this.getHeaderCellSortOrder(cell) }))))) !== null && _d !== void 0 ? _d : [],
|
|
29164
|
+
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), sortOrder: this.getHeaderCellSortOrder(cell) }))))) !== null && _f !== void 0 ? _f : [],
|
|
29131
29165
|
};
|
|
29132
|
-
return (hAsync(Host, { key: '
|
|
29166
|
+
return (hAsync(Host, { key: '5ac3cafebddd87710c6f8b73e812c520161ebd59', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: '6effb17c8cf01fc627fc5a349ca96304d5db1377', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
|
|
29133
29167
|
onSort: (_, payload) => {
|
|
29134
29168
|
this.handleSort(payload);
|
|
29135
29169
|
},
|
|
@@ -29181,7 +29215,7 @@ class KolTableStateful {
|
|
|
29181
29215
|
}; }
|
|
29182
29216
|
}
|
|
29183
29217
|
|
|
29184
|
-
const defaultStyleCss$7 = "@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: flex;\n min-height: var(--a11y-min-size);\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 flex: 1 0 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}";
|
|
29218
|
+
const defaultStyleCss$7 = "@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: flex;\n min-height: var(--a11y-min-size);\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 flex: 1 0 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__sort {\n display: inline-flex;\n gap: 0.25rem;\n align-items: center;\n }\n .kol-table__sort-order {\n display: inline-flex;\n align-items: center;\n justify-content: center;\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}";
|
|
29185
29219
|
|
|
29186
29220
|
let KolTableStateless$1 = class KolTableStateless {
|
|
29187
29221
|
constructor(hostRef) {
|
|
@@ -29237,6 +29271,7 @@ class KolTableStateless {
|
|
|
29237
29271
|
this.dataToKeyMap = new Map();
|
|
29238
29272
|
this.checkboxRefs = [];
|
|
29239
29273
|
this.translateSort = translate('kol-sort');
|
|
29274
|
+
this.translateSortOrder = translate('kol-table-sort-order');
|
|
29240
29275
|
this.tableDivElementHasScrollbar = false;
|
|
29241
29276
|
this.renderTableRow = (row, rowIndex, isVertical, isFooter = false) => {
|
|
29242
29277
|
var _a, _b;
|
|
@@ -29746,6 +29781,15 @@ class KolTableStateless {
|
|
|
29746
29781
|
this.state._headerCells.vertical.length > 0 &&
|
|
29747
29782
|
Array.isArray(this.state._headerCells.horizontal) && (hAsync("td", { "aria-hidden": "true", colSpan: this.state._headerCells.vertical.length, rowSpan: this.state._headerCells.horizontal.length }))));
|
|
29748
29783
|
}
|
|
29784
|
+
formatSortOrderDescription(order) {
|
|
29785
|
+
return this.translateSortOrder.replace('{{order}}', `${order}`);
|
|
29786
|
+
}
|
|
29787
|
+
getSortAriaDescription(order) {
|
|
29788
|
+
if (typeof order === 'number' && order > 0) {
|
|
29789
|
+
return `${this.translateSort} – ${this.formatSortOrderDescription(order)}`;
|
|
29790
|
+
}
|
|
29791
|
+
return this.translateSort;
|
|
29792
|
+
}
|
|
29749
29793
|
renderHeadingCell(cell, rowIndex, colIndex, isVertical) {
|
|
29750
29794
|
const columnSettings = this.getColumnSettings(cell);
|
|
29751
29795
|
if (columnSettings && !columnSettings.visible) {
|
|
@@ -29771,12 +29815,14 @@ class KolTableStateless {
|
|
|
29771
29815
|
}
|
|
29772
29816
|
}
|
|
29773
29817
|
const scope = isVertical ? 'row' : typeof cell.colSpan === 'number' && cell.colSpan > 1 ? 'colgroup' : 'col';
|
|
29818
|
+
const sortOrder = typeof cell.sortOrder === 'number' && cell.sortOrder > 0 ? cell.sortOrder : undefined;
|
|
29819
|
+
const sortDescription = this.getSortAriaDescription(sortOrder);
|
|
29774
29820
|
return (hAsync("th", { key: `${rowIndex}-${colIndex}-${cell.label}`, class: clsx('kol-table__cell kol-table__cell--header', {
|
|
29775
29821
|
[`kol-table__cell--align-${cell.textAlign}`]: cell.textAlign,
|
|
29776
29822
|
[`kol-table__cell--${ariaSort}`]: ariaSort,
|
|
29777
29823
|
}), scope: scope, colSpan: cell.colSpan, rowSpan: cell.rowSpan, style: {
|
|
29778
29824
|
width: (columnSettings === null || columnSettings === void 0 ? void 0 : columnSettings.width) ? `${columnSettings.width}ch` : cell.width,
|
|
29779
|
-
}, "aria-sort": ariaSort, "data-sort": canSort && cell.sortDirection ? `sort-${cell.sortDirection}` : undefined }, canSort && cell.sortDirection ? (hAsync(KolButtonWcTag, { class: "kol-table__sort-button", exportparts: "icon", _icons: { right: sortButtonIcon }, _label: cell.label, _ariaDescription:
|
|
29825
|
+
}, "aria-sort": ariaSort, "data-sort": canSort && cell.sortDirection ? `sort-${cell.sortDirection}` : undefined }, canSort && cell.sortDirection ? (hAsync("span", { class: "kol-table__sort" }, hAsync(KolButtonWcTag, { class: "kol-table__sort-button", exportparts: "icon", _icons: { right: sortButtonIcon }, _label: cell.label, _ariaDescription: sortDescription, _on: {
|
|
29780
29826
|
onClick: (event) => {
|
|
29781
29827
|
var _a;
|
|
29782
29828
|
if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onSort) === 'function' && cell.key && cell.sortDirection) {
|
|
@@ -29792,7 +29838,7 @@ class KolTableStateless {
|
|
|
29792
29838
|
});
|
|
29793
29839
|
}
|
|
29794
29840
|
},
|
|
29795
|
-
} })) : (cell.label)));
|
|
29841
|
+
} }), sortOrder && (hAsync("span", { "aria-hidden": "true", class: "kol-table__sort-order" }, sortOrder)))) : (cell.label)));
|
|
29796
29842
|
}
|
|
29797
29843
|
renderSpacer(variant, cellDefs) {
|
|
29798
29844
|
var _a, _b;
|
|
@@ -29816,12 +29862,12 @@ class KolTableStateless {
|
|
|
29816
29862
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
29817
29863
|
this.checkboxRefs = [];
|
|
29818
29864
|
const sortedHorizontalHeaders = (_a = this.state._headerCells.horizontal) === null || _a === void 0 ? void 0 : _a.map((row) => this.sortByColumnPosition(row));
|
|
29819
|
-
return (hAsync("div", { key: '
|
|
29865
|
+
return (hAsync("div", { key: '3e728e7da4e6e201a75b3f2392684839d49226b5', class: "kol-table" }, this.state._hasSettingsMenu && hAsync(KolTableSettingsWcTag, { key: 'bbd36c1269c7cf1e43f78fd1d469e4f5c68d28be', _tableSettings: this.state._tableSettings }), hAsync("div", { key: '737d877075c620c3edadbc2a0b6e9a3d163c51d8', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: 'bb30c814e78688924a1906144a51eae1669ab8e9', class: "kol-table__table", style: {
|
|
29820
29866
|
minWidth: this.getTableMinWidth(),
|
|
29821
|
-
} }, hAsync("caption", { key: '
|
|
29867
|
+
} }, hAsync("caption", { key: '508814a7d77353d0c95cccece94fe250c5b60d44', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(sortedHorizontalHeaders) && (hAsync("thead", { key: '0a486a0fe522586cd5e3ad17118dc5d9aff68a35', class: "kol-table__head" }, [
|
|
29822
29868
|
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))))),
|
|
29823
29869
|
this.renderSpacer('head', sortedHorizontalHeaders),
|
|
29824
|
-
])), hAsync("tbody", { key: '
|
|
29870
|
+
])), hAsync("tbody", { key: 'd08d034ea92ac500beb47489306a97e1813422b9', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
|
|
29825
29871
|
}
|
|
29826
29872
|
get host() { return getElement(this); }
|
|
29827
29873
|
static get watchers() { return {
|