@public-ui/hydrate 4.0.2-rc.1 → 4.0.3-rc.0
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 +169 -164
- package/dist/index.mjs +169 -164
- package/package.json +2 -2
package/dist/index.mjs
CHANGED
|
@@ -144,7 +144,7 @@ function _mergeNamespaces(n, m) {
|
|
|
144
144
|
|
|
145
145
|
const NAMESPACE = 'kolibri';
|
|
146
146
|
const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
|
|
147
|
-
const Env = /* kolibri */ {"kolibriVersion":"4.0.
|
|
147
|
+
const Env = /* kolibri */ {"kolibriVersion":"4.0.3-rc.0"};
|
|
148
148
|
|
|
149
149
|
function getDefaultExportFromCjs (x) {
|
|
150
150
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
@@ -2082,7 +2082,7 @@ const validateButtonType = (component, value) => {
|
|
|
2082
2082
|
|
|
2083
2083
|
const buttonVariantPropTypeOptions = ['primary', 'secondary', 'normal', 'tertiary', 'danger', 'ghost', 'custom'];
|
|
2084
2084
|
const validateButtonVariant = (component, value) => {
|
|
2085
|
-
watchValidator(component, `
|
|
2085
|
+
watchValidator(component, `_variant`, (value) => typeof value === 'string' && buttonVariantPropTypeOptions.includes(value), new Set([`KoliBriButtonVariant {${buttonVariantPropTypeOptions.join(', ')}`]), value, {
|
|
2086
2086
|
defaultValue: 'normal',
|
|
2087
2087
|
});
|
|
2088
2088
|
};
|
|
@@ -18600,7 +18600,7 @@ class KolBadge {
|
|
|
18600
18600
|
};
|
|
18601
18601
|
}
|
|
18602
18602
|
renderSmartButton(props) {
|
|
18603
|
-
return (hAsync(KolButtonWcTag, { ref: this.catchSmartButtonRef, class: "kol-badge__smart-button", _ariaControls: this.id, _ariaDescription: props._ariaDescription,
|
|
18603
|
+
return (hAsync(KolButtonWcTag, { ref: this.catchSmartButtonRef, class: "kol-badge__smart-button", _ariaControls: this.id, _ariaDescription: props._ariaDescription, _variant: 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 }));
|
|
18604
18604
|
}
|
|
18605
18605
|
async focus() {
|
|
18606
18606
|
var _a;
|
|
@@ -18608,12 +18608,12 @@ class KolBadge {
|
|
|
18608
18608
|
}
|
|
18609
18609
|
render() {
|
|
18610
18610
|
const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;
|
|
18611
|
-
return (hAsync("span", { key: '
|
|
18611
|
+
return (hAsync("span", { key: '9cbe34bd551362c6f631d403b69387255d2725ee', class: clsx('kol-badge', {
|
|
18612
18612
|
'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
|
|
18613
18613
|
}), style: {
|
|
18614
18614
|
backgroundColor: this.bgColorStr,
|
|
18615
18615
|
color: this.colorStr,
|
|
18616
|
-
} }, hAsync(KolSpanFc, { key: '
|
|
18616
|
+
} }, hAsync(KolSpanFc, { key: '93b443c1d823a5e440814f05a4b7c7da054caff2', class: "kol-badge__label", id: hasSmartButton ? this.id : undefined, allowMarkdown: true, icons: this.state._icons, label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton)));
|
|
18617
18617
|
}
|
|
18618
18618
|
validateIcons(value) {
|
|
18619
18619
|
validateIcons(this, value);
|
|
@@ -18765,7 +18765,7 @@ class KolButton {
|
|
|
18765
18765
|
return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
18766
18766
|
}
|
|
18767
18767
|
render() {
|
|
18768
|
-
return (hAsync(KolButtonWcTag, { key: '
|
|
18768
|
+
return (hAsync(KolButtonWcTag, { key: 'da0026c93b776bb768294b66041779e638ee9d45', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: '53ac495c38ac5b4f799319cb4304662399b4eca6', name: "expert", slot: "expert" })));
|
|
18769
18769
|
}
|
|
18770
18770
|
static get style() { return {
|
|
18771
18771
|
default: defaultStyleCss$H
|
|
@@ -19139,14 +19139,14 @@ class KolButtonWc {
|
|
|
19139
19139
|
const badgeText = this.state._accessKey || this.state._shortKey;
|
|
19140
19140
|
const isDisabled = this.state._disabled === true;
|
|
19141
19141
|
const hideLabel = this.state._hideLabel === true;
|
|
19142
|
-
return (hAsync(Host, { key: '4acaf70bc26886e46e360e49035823cf343d89ef' }, hAsync("button", { key: '
|
|
19142
|
+
return (hAsync(Host, { key: '4acaf70bc26886e46e360e49035823cf343d89ef' }, hAsync("button", { key: '9d26032100b9d0c7a8e62c59975db64f42874fd6', ref: (ref) => (this.buttonRef = ref), accessKey: this.state._accessKey, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-haspopup": this._ariaHasPopup, "aria-keyshortcuts": this.state._shortKey, "aria-label": hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: clsx('kol-button', {
|
|
19143
19143
|
'kol-button--disabled': isDisabled,
|
|
19144
|
-
[`kol-button--${this.state.
|
|
19144
|
+
[`kol-button--${this.state._variant}`]: this.state._variant !== 'custom',
|
|
19145
19145
|
'kol-button--inline': this.state._inline === true,
|
|
19146
19146
|
'kol-button--standalone': this.state._inline === false,
|
|
19147
19147
|
'kol-button--hide-label': hideLabel,
|
|
19148
|
-
[this.state._customClass]: this.state.
|
|
19149
|
-
}), disabled: isDisabled, id: this.state._id, name: this.state._name, onClick: this.onClick, onMouseDown: this.onMouseDown, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }, hAsync(KolSpanFc, { key: '
|
|
19148
|
+
[this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
19149
|
+
}), disabled: isDisabled, id: this.state._id, name: this.state._name, onClick: this.onClick, onMouseDown: this.onMouseDown, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }, hAsync(KolSpanFc, { key: 'ab3e331576541fc15d399bd08add5668dec7ac29', class: "kol-button__text", badgeText: badgeText, icons: this.state._icons, hideLabel: hideLabel, label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: 'd92826212d0564e2e1a4b8d123f2a83630ed67ec', name: "expert", slot: "expert" }))), hideLabel && (hAsync(KolTooltipWcTag, { key: 'af783d14e3f4014591177acc6fb00b6e0d69b74b', ref: (ref) => (this.tooltipRef = ref), "aria-hidden": "true", hidden: hasExpertSlot, class: "kol-button__tooltip", _badgeText: badgeText, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' }))));
|
|
19150
19150
|
}
|
|
19151
19151
|
constructor(hostRef) {
|
|
19152
19152
|
registerInstance(this, hostRef);
|
|
@@ -19190,13 +19190,13 @@ class KolButtonWc {
|
|
|
19190
19190
|
this._inline = false;
|
|
19191
19191
|
this._tooltipAlign = 'top';
|
|
19192
19192
|
this._type = 'button';
|
|
19193
|
-
this.
|
|
19193
|
+
this._variant = 'normal';
|
|
19194
19194
|
this.state = {
|
|
19195
19195
|
_icons: {},
|
|
19196
19196
|
_label: '',
|
|
19197
19197
|
_on: {},
|
|
19198
19198
|
_type: 'button',
|
|
19199
|
-
|
|
19199
|
+
_variant: 'normal',
|
|
19200
19200
|
};
|
|
19201
19201
|
this.controller = new AssociatedInputController(this, 'button', this.host);
|
|
19202
19202
|
}
|
|
@@ -19295,7 +19295,7 @@ class KolButtonWc {
|
|
|
19295
19295
|
this.validateTooltipAlign(this._tooltipAlign);
|
|
19296
19296
|
this.validateType(this._type);
|
|
19297
19297
|
this.validateValue(this._value);
|
|
19298
|
-
this.validateButtonVariant(this.
|
|
19298
|
+
this.validateButtonVariant(this._variant);
|
|
19299
19299
|
validateAccessAndShortKey(this._accessKey, this._shortKey);
|
|
19300
19300
|
}
|
|
19301
19301
|
get host() { return getElement(this); }
|
|
@@ -19321,7 +19321,7 @@ class KolButtonWc {
|
|
|
19321
19321
|
"_tooltipAlign": ["validateTooltipAlign"],
|
|
19322
19322
|
"_type": ["validateType"],
|
|
19323
19323
|
"_value": ["validateValue"],
|
|
19324
|
-
"
|
|
19324
|
+
"_variant": ["validateButtonVariant"]
|
|
19325
19325
|
}; }
|
|
19326
19326
|
static get cmpMeta() { return {
|
|
19327
19327
|
"$flags$": 260,
|
|
@@ -19349,7 +19349,7 @@ class KolButtonWc {
|
|
|
19349
19349
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
19350
19350
|
"_type": [1],
|
|
19351
19351
|
"_value": [8],
|
|
19352
|
-
"
|
|
19352
|
+
"_variant": [1],
|
|
19353
19353
|
"state": [32],
|
|
19354
19354
|
"focus": [64]
|
|
19355
19355
|
},
|
|
@@ -19676,15 +19676,17 @@ const CustomSuggestionsOptionFc = ({ disabled, index, ref, selected, onClick, on
|
|
|
19676
19676
|
return text;
|
|
19677
19677
|
const regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
|
|
19678
19678
|
const parts = text.split(regex);
|
|
19679
|
-
|
|
19679
|
+
parts[1] = hAsync("mark", null, parts[1]);
|
|
19680
|
+
return parts;
|
|
19680
19681
|
};
|
|
19681
|
-
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 || '')));
|
|
19682
|
+
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 }, hAsync("span", null, highlightSearchTerm(String(option), searchTerm || ''))));
|
|
19682
19683
|
};
|
|
19683
19684
|
|
|
19684
|
-
const CustomSuggestionsOptionsGroupFc = ({ blockSuggestionMouseOver, onKeyDown, style }, children) => {
|
|
19685
|
+
const CustomSuggestionsOptionsGroupFc = ({ blockSuggestionMouseOver, onKeyDown, style, hidden }, children) => {
|
|
19685
19686
|
return (hAsync("ul", { role: "listbox", style: style, class: clsx('kol-custom-suggestions-options-group', {
|
|
19686
19687
|
'kol-custom-suggestions-options-group--cursor-hidden': blockSuggestionMouseOver,
|
|
19687
|
-
|
|
19688
|
+
'kol-custom-suggestions-options-group--open': !hidden,
|
|
19689
|
+
}), hidden: hidden, onKeyDown: onKeyDown }, children));
|
|
19688
19690
|
};
|
|
19689
19691
|
|
|
19690
19692
|
class ControlledInputController extends AssociatedInputController {
|
|
@@ -19946,7 +19948,7 @@ class ComboboxController extends InputIconController {
|
|
|
19946
19948
|
}
|
|
19947
19949
|
}
|
|
19948
19950
|
|
|
19949
|
-
const defaultStyleCss$E = "@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 .hastooltip {\n z-index: 900 !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 :host {\n display: inline-block;\n }\n .kol-alert .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-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-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 min-width: var(--a11y-min-size);\n min-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:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\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 min-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}";
|
|
19951
|
+
const defaultStyleCss$E = "@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 .hastooltip {\n z-index: 900 !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 :host {\n display: inline-block;\n }\n .kol-alert .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-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-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-input-container:has(.kol-custom-suggestions-options-group--open) {\n z-index: 10;\n }\n .kol-custom-suggestions-toggle {\n display: flex;\n min-width: var(--a11y-min-size);\n min-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:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\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 min-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 :host {\n display: inline-block;\n }\n .kol-combobox__delete .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-combobox__delete .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-combobox__delete .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-combobox__delete .kol-button {\n margin-top: -2px;\n margin-bottom: -2px;\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}";
|
|
19950
19952
|
|
|
19951
19953
|
class KolCombobox {
|
|
19952
19954
|
async getValue() {
|
|
@@ -20068,15 +20070,15 @@ class KolCombobox {
|
|
|
20068
20070
|
}
|
|
20069
20071
|
render() {
|
|
20070
20072
|
const isDisabled = this.state._disabled === true;
|
|
20071
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '9f475f1063af21278d7bf528f48e452e381698b5' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'd95db4eaffa977c1215a3fb5bbf9c144cdecc41a', state: this.state }, hAsync("div", { key: 'ede069e1f41dbc5e1ca2fe4d788f6768b34fed29', class: "kol-combobox__group" }, hAsync(InputStateWrapper, Object.assign({ key: '91cd146fd875ed6241c54d6284d206b18348d904' }, this.getInputProps())), this.state._value && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: '
|
|
20073
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '9f475f1063af21278d7bf528f48e452e381698b5' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'd95db4eaffa977c1215a3fb5bbf9c144cdecc41a', state: this.state }, hAsync("div", { key: 'ede069e1f41dbc5e1ca2fe4d788f6768b34fed29', class: "kol-combobox__group" }, hAsync(InputStateWrapper, Object.assign({ key: '91cd146fd875ed6241c54d6284d206b18348d904' }, this.getInputProps())), this.state._value && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: 'a8324c50d267ec3bc2f42d8408d86dbf30913ecf', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "combobox-delete", class: clsx('kol-combobox__delete', {
|
|
20072
20074
|
'kol-combobox__delete--disabled': isDisabled,
|
|
20073
20075
|
}), _on: {
|
|
20074
20076
|
onClick: () => {
|
|
20075
20077
|
this.clearSelection();
|
|
20076
20078
|
},
|
|
20077
|
-
} })), hAsync(KolIconTag, { key: '
|
|
20079
|
+
} })), hAsync(KolIconTag, { key: '3cb2036a8ddee0289391c5a53ffa0b0c9f0641f1', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
20078
20080
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
20079
|
-
}), onClick: this.toggleListbox.bind(this) })),
|
|
20081
|
+
}), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: 'fcd7efbffefb3fe128b043e722b98a7e0871ff42', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), hidden: !this._isOpen || isDisabled }, Array.isArray(this._filteredSuggestions) &&
|
|
20080
20082
|
this._filteredSuggestions.length > 0 &&
|
|
20081
20083
|
this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { disabled: false, index: index, option: option, searchTerm: this.state._value, ref: (el) => {
|
|
20082
20084
|
if (el)
|
|
@@ -20097,7 +20099,7 @@ class KolCombobox {
|
|
|
20097
20099
|
this.toggleListbox();
|
|
20098
20100
|
e.preventDefault();
|
|
20099
20101
|
}
|
|
20100
|
-
} })))))))
|
|
20102
|
+
} })))))));
|
|
20101
20103
|
}
|
|
20102
20104
|
handleKeyDown(event) {
|
|
20103
20105
|
var _a, _b;
|
|
@@ -20996,7 +20998,7 @@ const bem = c();
|
|
|
20996
20998
|
const BEM_CLASS_ICON = bem('kol-icon');
|
|
20997
20999
|
const BEM_CLASS_ICON__ICON = bem('kol-icon', 'icon');
|
|
20998
21000
|
|
|
20999
|
-
const defaultStyleCss$y = "/* forward the rem function */\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=
|
|
21001
|
+
const defaultStyleCss$y = "/* forward the rem function */\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1769855409632\"); /* IE9*/\n src: url(\"kolicons.eot?t=1769855409632#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1769855409632\") format(\"woff2\"), url(\"kolicons.woff?t=1769855409632\") format(\"woff\"), url(\"kolicons.ttf?t=1769855409632\") format(\"truetype\"), url(\"kolicons.svg?t=1769855409632#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-size: inherit;\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1a\";\n}\n\n@layer kol-component {\n /* :host implicitly inherits font-size, see below */\n :host {\n color: inherit;\n display: contents;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n}";
|
|
21000
21002
|
|
|
21001
21003
|
class KolIcon {
|
|
21002
21004
|
render() {
|
|
@@ -21987,7 +21989,7 @@ InputDateController.isoTimeRegex = /^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/;
|
|
|
21987
21989
|
InputDateController.isoWeekRegex = /^\d{4}-W(?:[0-4]\d|5[0-3])$/;
|
|
21988
21990
|
InputDateController.DEFAULT_MAX_DATE = new Date(9999, 11, 31, 23, 59, 59);
|
|
21989
21991
|
|
|
21990
|
-
const defaultStyleCss$u = "@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 .hastooltip {\n z-index: 900 !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 :host {\n display: inline-block;\n }\n .kol-alert .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-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\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 min-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 /**\n * Workaround for detecting focus state of the native date input's calendar icon.\n * The `:focus-visible` pseudo class does not work on the icon itself, but only on the input element.\n * By using the `content` property we can detect whether the icon is focused by inspecting the computed style in JS.\n * This should be replaced once native focus detection for the icon is available.\n */\n :host input[type=date],\n :host input[type=datetime-local],\n :host input[type=month],\n :host input[type=time],\n :host input[type=week] {\n content: \"native-icon-focused\";\n }\n :host input[type=date]:focus-visible,\n :host input[type=datetime-local]:focus-visible,\n :host input[type=month]:focus-visible,\n :host input[type=time]:focus-visible,\n :host input[type=week]:focus-visible {\n content: \"native-icon-not-focused\";\n }\n}";
|
|
21992
|
+
const defaultStyleCss$u = "@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 .hastooltip {\n z-index: 900 !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 :host {\n display: inline-block;\n }\n .kol-alert .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-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\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 min-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 /**\n * Workaround for detecting focus state of the native date input's calendar icon.\n * The `:focus-visible` pseudo class does not work on the icon itself, but only on the input element.\n * By using the `content` property we can detect whether the icon is focused by inspecting the computed style in JS.\n * This should be replaced once native focus detection for the icon is available.\n */\n :host input[type=date],\n :host input[type=datetime-local],\n :host input[type=month],\n :host input[type=time],\n :host input[type=week] {\n content: \"native-icon-focused\";\n }\n :host input[type=date]:focus-visible,\n :host input[type=datetime-local]:focus-visible,\n :host input[type=month]:focus-visible,\n :host input[type=time]:focus-visible,\n :host input[type=week]:focus-visible {\n content: \"native-icon-not-focused\";\n }\n .kol-input {\n cursor: text;\n }\n .kol-input::-webkit-calendar-picker-indicator {\n cursor: pointer;\n }\n}";
|
|
21991
21993
|
|
|
21992
21994
|
class KolInputDate {
|
|
21993
21995
|
async getValue() {
|
|
@@ -22675,7 +22677,7 @@ class KolInputFile {
|
|
|
22675
22677
|
} });
|
|
22676
22678
|
}
|
|
22677
22679
|
render() {
|
|
22678
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'cfbf75242e0e46066d0026803ab13f2b604a3643' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b5117f2d31a17029aea0e6ed654399566e54f7fe', state: this.state }, hAsync("span", { key: '92a4956b1f0176bc33fa0d91842efd72692a5517', class: clsx('kol-input-container__filename', { 'kol-input-container__filename--has-file': this.hasFileSelected }) }, this.filename), hAsync(InputStateWrapper, Object.assign({ key: 'ae5d084b5b681215ab64aaa3db39ecc3f9294d3b' }, this.getInputProps())), hAsync(KolButtonWcTag, { key: '
|
|
22680
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'cfbf75242e0e46066d0026803ab13f2b604a3643' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b5117f2d31a17029aea0e6ed654399566e54f7fe', state: this.state }, hAsync("span", { key: '92a4956b1f0176bc33fa0d91842efd72692a5517', class: clsx('kol-input-container__filename', { 'kol-input-container__filename--has-file': this.hasFileSelected }) }, this.filename), hAsync(InputStateWrapper, Object.assign({ key: 'ae5d084b5b681215ab64aaa3db39ecc3f9294d3b' }, this.getInputProps())), hAsync(KolButtonWcTag, { key: '93046b2fa5632567376dfad3c133fb9888b7c52f', class: "kol-input-container__button", _label: this.translateDataBrowseText, _variant: "primary", _disabled: this._disabled }))));
|
|
22679
22681
|
}
|
|
22680
22682
|
constructor(hostRef) {
|
|
22681
22683
|
registerInstance(this, hostRef);
|
|
@@ -24466,7 +24468,7 @@ class KolLinkButton {
|
|
|
24466
24468
|
return Promise.resolve((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
24467
24469
|
}
|
|
24468
24470
|
render() {
|
|
24469
|
-
return (hAsync(KolLinkWcTag, { key: '
|
|
24471
|
+
return (hAsync(KolLinkWcTag, { key: 'a18eadf5a3e2e865a1f07c1f03e2d22037b7cea9', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign, _variant: this._variant }, hAsync("slot", { key: 'f36186d7b72e738686e037fe3f70449338c1001e', name: "expert", slot: "expert" })));
|
|
24470
24472
|
}
|
|
24471
24473
|
static get style() { return {
|
|
24472
24474
|
default: defaultStyleCss$k
|
|
@@ -24552,7 +24554,7 @@ class KolLinkWc {
|
|
|
24552
24554
|
this._hideLabel = false;
|
|
24553
24555
|
this._inline = true;
|
|
24554
24556
|
this._tooltipAlign = 'right';
|
|
24555
|
-
this.
|
|
24557
|
+
this._variant = 'normal';
|
|
24556
24558
|
this.state = {
|
|
24557
24559
|
_ariaCurrentValue: 'page',
|
|
24558
24560
|
_href: '',
|
|
@@ -24568,17 +24570,17 @@ class KolLinkWc {
|
|
|
24568
24570
|
const { isExternal, tagAttrs } = this.getRenderValues();
|
|
24569
24571
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
24570
24572
|
const ariaDescription = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim();
|
|
24571
|
-
return (hAsync(Host, { key: '298b41cd96f03c37f968b5a44a996e820986e1a4' }, hAsync("a", Object.assign({ key: '
|
|
24573
|
+
return (hAsync(Host, { key: '298b41cd96f03c37f968b5a44a996e820986e1a4' }, hAsync("a", Object.assign({ key: '3b61582b6b27bc01e723d9305fad4a6e74b82c6b', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": typeof this.state._ariaExpanded === 'boolean' ? String(this.state._ariaExpanded) : undefined, "aria-owns": this.state._ariaOwns, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
|
|
24572
24574
|
? `${this.state._label}${isExternal ? ` (${this.translateOpenLinkInTab})` : ''}`
|
|
24573
24575
|
: undefined, "aria-keyshortcuts": this.state._shortKey, class: clsx('kol-link', {
|
|
24574
24576
|
'kol-link--disabled': this.state._disabled === true,
|
|
24575
24577
|
'kol-link--external-link': isExternal,
|
|
24576
24578
|
'kol-link--hide-label': this.state._hideLabel === true,
|
|
24577
|
-
[`kol-link--${this.state.
|
|
24579
|
+
[`kol-link--${this.state._variant}`]: this.state._variant !== 'custom',
|
|
24578
24580
|
'kol-link--inline': this.state._inline === true,
|
|
24579
24581
|
'kol-link--standalone': this.state._inline === false,
|
|
24580
|
-
[this.state._customClass]: this.state.
|
|
24581
|
-
}) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: '
|
|
24582
|
+
[this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
24583
|
+
}) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: '7bc4ceb150254062c925b9fb3ace49e62019e8cc', class: "kol-link__text", badgeText: this.state._accessKey || this.state._shortKey, icons: this.state._icons, hideLabel: this.state._hideLabel, label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: 'b2a5ef85b0e0efaf0b7009a356861fd36597b281', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '48f4f73fc0843db70cbb9652b328932d60938d06', class: "kol-link__icon", _label: this.state._hideLabel ? '' : this.translateOpenLinkInTab, _icons: 'kolicon-link-external', "aria-hidden": this.state._hideLabel }))), this.state._hideLabel === true && (hAsync(KolTooltipWcTag, { key: '56496c310828d905c04418d8e7c725f0e18b2be5', "aria-hidden": "true", class: "kol-link__tooltip", ref: (ref) => (this.tooltipRef = ref), hidden: hasExpertSlot, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href }))));
|
|
24582
24584
|
}
|
|
24583
24585
|
validateAccessKey(value) {
|
|
24584
24586
|
validateAccessKey(this, value);
|
|
@@ -24670,7 +24672,7 @@ class KolLinkWc {
|
|
|
24670
24672
|
this.validateTabIndex(this._tabIndex);
|
|
24671
24673
|
this.validateTarget(this._target);
|
|
24672
24674
|
this.validateTooltipAlign(this._tooltipAlign);
|
|
24673
|
-
this.validateButtonVariant(this.
|
|
24675
|
+
this.validateButtonVariant(this._variant);
|
|
24674
24676
|
this.unsubscribeOnLocationChange = onLocationChange();
|
|
24675
24677
|
validateAccessAndShortKey(this._accessKey, this._shortKey);
|
|
24676
24678
|
}
|
|
@@ -24701,7 +24703,7 @@ class KolLinkWc {
|
|
|
24701
24703
|
"_tabIndex": ["validateTabIndex"],
|
|
24702
24704
|
"_target": ["validateTarget"],
|
|
24703
24705
|
"_tooltipAlign": ["validateTooltipAlign"],
|
|
24704
|
-
"
|
|
24706
|
+
"_variant": ["validateButtonVariant"]
|
|
24705
24707
|
}; }
|
|
24706
24708
|
static get cmpMeta() { return {
|
|
24707
24709
|
"$flags$": 260,
|
|
@@ -24727,7 +24729,7 @@ class KolLinkWc {
|
|
|
24727
24729
|
"_tabIndex": [2, "_tab-index"],
|
|
24728
24730
|
"_target": [1],
|
|
24729
24731
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
24730
|
-
"
|
|
24732
|
+
"_variant": [1],
|
|
24731
24733
|
"state": [32],
|
|
24732
24734
|
"focus": [64]
|
|
24733
24735
|
},
|
|
@@ -25584,6 +25586,71 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
|
25584
25586
|
return coords;
|
|
25585
25587
|
}
|
|
25586
25588
|
|
|
25589
|
+
/**
|
|
25590
|
+
* Resolves with an object of overflow side offsets that determine how much the
|
|
25591
|
+
* element is overflowing a given clipping boundary on each side.
|
|
25592
|
+
* - positive = overflowing the boundary by that number of pixels
|
|
25593
|
+
* - negative = how many pixels left before it will overflow
|
|
25594
|
+
* - 0 = lies flush with the boundary
|
|
25595
|
+
* @see https://floating-ui.com/docs/detectOverflow
|
|
25596
|
+
*/
|
|
25597
|
+
async function detectOverflow(state, options) {
|
|
25598
|
+
var _await$platform$isEle;
|
|
25599
|
+
if (options === void 0) {
|
|
25600
|
+
options = {};
|
|
25601
|
+
}
|
|
25602
|
+
const {
|
|
25603
|
+
x,
|
|
25604
|
+
y,
|
|
25605
|
+
platform,
|
|
25606
|
+
rects,
|
|
25607
|
+
elements,
|
|
25608
|
+
strategy
|
|
25609
|
+
} = state;
|
|
25610
|
+
const {
|
|
25611
|
+
boundary = 'clippingAncestors',
|
|
25612
|
+
rootBoundary = 'viewport',
|
|
25613
|
+
elementContext = 'floating',
|
|
25614
|
+
altBoundary = false,
|
|
25615
|
+
padding = 0
|
|
25616
|
+
} = evaluate(options, state);
|
|
25617
|
+
const paddingObject = getPaddingObject(padding);
|
|
25618
|
+
const altContext = elementContext === 'floating' ? 'reference' : 'floating';
|
|
25619
|
+
const element = elements[altBoundary ? altContext : elementContext];
|
|
25620
|
+
const clippingClientRect = rectToClientRect(await platform.getClippingRect({
|
|
25621
|
+
element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
|
|
25622
|
+
boundary,
|
|
25623
|
+
rootBoundary,
|
|
25624
|
+
strategy
|
|
25625
|
+
}));
|
|
25626
|
+
const rect = elementContext === 'floating' ? {
|
|
25627
|
+
x,
|
|
25628
|
+
y,
|
|
25629
|
+
width: rects.floating.width,
|
|
25630
|
+
height: rects.floating.height
|
|
25631
|
+
} : rects.reference;
|
|
25632
|
+
const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
|
|
25633
|
+
const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
|
|
25634
|
+
x: 1,
|
|
25635
|
+
y: 1
|
|
25636
|
+
} : {
|
|
25637
|
+
x: 1,
|
|
25638
|
+
y: 1
|
|
25639
|
+
};
|
|
25640
|
+
const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
25641
|
+
elements,
|
|
25642
|
+
rect,
|
|
25643
|
+
offsetParent,
|
|
25644
|
+
strategy
|
|
25645
|
+
}) : rect);
|
|
25646
|
+
return {
|
|
25647
|
+
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
|
|
25648
|
+
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
|
|
25649
|
+
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
|
|
25650
|
+
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
25651
|
+
};
|
|
25652
|
+
}
|
|
25653
|
+
|
|
25587
25654
|
/**
|
|
25588
25655
|
* Computes the `x` and `y` coordinates that will place the floating element
|
|
25589
25656
|
* next to a given reference element.
|
|
@@ -25613,6 +25680,7 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
25613
25680
|
let middlewareData = {};
|
|
25614
25681
|
let resetCount = 0;
|
|
25615
25682
|
for (let i = 0; i < validMiddleware.length; i++) {
|
|
25683
|
+
var _platform$detectOverf;
|
|
25616
25684
|
const {
|
|
25617
25685
|
name,
|
|
25618
25686
|
fn
|
|
@@ -25630,7 +25698,10 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
25630
25698
|
strategy,
|
|
25631
25699
|
middlewareData,
|
|
25632
25700
|
rects,
|
|
25633
|
-
platform
|
|
25701
|
+
platform: {
|
|
25702
|
+
...platform,
|
|
25703
|
+
detectOverflow: (_platform$detectOverf = platform.detectOverflow) != null ? _platform$detectOverf : detectOverflow
|
|
25704
|
+
},
|
|
25634
25705
|
elements: {
|
|
25635
25706
|
reference,
|
|
25636
25707
|
floating
|
|
@@ -25675,71 +25746,6 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
25675
25746
|
};
|
|
25676
25747
|
};
|
|
25677
25748
|
|
|
25678
|
-
/**
|
|
25679
|
-
* Resolves with an object of overflow side offsets that determine how much the
|
|
25680
|
-
* element is overflowing a given clipping boundary on each side.
|
|
25681
|
-
* - positive = overflowing the boundary by that number of pixels
|
|
25682
|
-
* - negative = how many pixels left before it will overflow
|
|
25683
|
-
* - 0 = lies flush with the boundary
|
|
25684
|
-
* @see https://floating-ui.com/docs/detectOverflow
|
|
25685
|
-
*/
|
|
25686
|
-
async function detectOverflow(state, options) {
|
|
25687
|
-
var _await$platform$isEle;
|
|
25688
|
-
if (options === void 0) {
|
|
25689
|
-
options = {};
|
|
25690
|
-
}
|
|
25691
|
-
const {
|
|
25692
|
-
x,
|
|
25693
|
-
y,
|
|
25694
|
-
platform,
|
|
25695
|
-
rects,
|
|
25696
|
-
elements,
|
|
25697
|
-
strategy
|
|
25698
|
-
} = state;
|
|
25699
|
-
const {
|
|
25700
|
-
boundary = 'clippingAncestors',
|
|
25701
|
-
rootBoundary = 'viewport',
|
|
25702
|
-
elementContext = 'floating',
|
|
25703
|
-
altBoundary = false,
|
|
25704
|
-
padding = 0
|
|
25705
|
-
} = evaluate(options, state);
|
|
25706
|
-
const paddingObject = getPaddingObject(padding);
|
|
25707
|
-
const altContext = elementContext === 'floating' ? 'reference' : 'floating';
|
|
25708
|
-
const element = elements[altBoundary ? altContext : elementContext];
|
|
25709
|
-
const clippingClientRect = rectToClientRect(await platform.getClippingRect({
|
|
25710
|
-
element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
|
|
25711
|
-
boundary,
|
|
25712
|
-
rootBoundary,
|
|
25713
|
-
strategy
|
|
25714
|
-
}));
|
|
25715
|
-
const rect = elementContext === 'floating' ? {
|
|
25716
|
-
x,
|
|
25717
|
-
y,
|
|
25718
|
-
width: rects.floating.width,
|
|
25719
|
-
height: rects.floating.height
|
|
25720
|
-
} : rects.reference;
|
|
25721
|
-
const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
|
|
25722
|
-
const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
|
|
25723
|
-
x: 1,
|
|
25724
|
-
y: 1
|
|
25725
|
-
} : {
|
|
25726
|
-
x: 1,
|
|
25727
|
-
y: 1
|
|
25728
|
-
};
|
|
25729
|
-
const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
25730
|
-
elements,
|
|
25731
|
-
rect,
|
|
25732
|
-
offsetParent,
|
|
25733
|
-
strategy
|
|
25734
|
-
}) : rect);
|
|
25735
|
-
return {
|
|
25736
|
-
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
|
|
25737
|
-
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
|
|
25738
|
-
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
|
|
25739
|
-
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
25740
|
-
};
|
|
25741
|
-
}
|
|
25742
|
-
|
|
25743
25749
|
/**
|
|
25744
25750
|
* Provides data to position an inner element of the floating element so that it
|
|
25745
25751
|
* appears centered to the reference element.
|
|
@@ -25872,7 +25878,7 @@ const flip$1 = function (options) {
|
|
|
25872
25878
|
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
|
25873
25879
|
}
|
|
25874
25880
|
const placements = [initialPlacement, ...fallbackPlacements];
|
|
25875
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
25881
|
+
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
|
25876
25882
|
const overflows = [];
|
|
25877
25883
|
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
|
25878
25884
|
if (checkMainAxis) {
|
|
@@ -26056,7 +26062,8 @@ const shift$1 = function (options) {
|
|
|
26056
26062
|
const {
|
|
26057
26063
|
x,
|
|
26058
26064
|
y,
|
|
26059
|
-
placement
|
|
26065
|
+
placement,
|
|
26066
|
+
platform
|
|
26060
26067
|
} = state;
|
|
26061
26068
|
const {
|
|
26062
26069
|
mainAxis: checkMainAxis = true,
|
|
@@ -26079,7 +26086,7 @@ const shift$1 = function (options) {
|
|
|
26079
26086
|
x,
|
|
26080
26087
|
y
|
|
26081
26088
|
};
|
|
26082
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
26089
|
+
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
|
26083
26090
|
const crossAxis = getSideAxis(getSide(placement));
|
|
26084
26091
|
const mainAxis = getOppositeAxis(crossAxis);
|
|
26085
26092
|
let mainAxisCoord = coords[mainAxis];
|
|
@@ -27408,7 +27415,7 @@ class KolPopoverButton {
|
|
|
27408
27415
|
'kol-popover-button--open': this.popoverOpen,
|
|
27409
27416
|
'kol-popover-button--inline': this.state._inline === true,
|
|
27410
27417
|
'kol-popover-button--standalone': this.state._inline === false,
|
|
27411
|
-
}) }, hAsync(KolButtonWcTag, { key: '
|
|
27418
|
+
}) }, hAsync(KolButtonWcTag, { key: '8668f8c9574df5ab1a4a56107dac77f6181a9f76', _accessKey: this._accessKey, "_aria-controls": "popover", _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _ariaHasPopup: 'dialog', _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this.on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant, "data-testid": "popover-button", class: "kol-popover-button__button", ref: (element) => (this.refButton = element) }, hAsync("slot", { key: 'd6d0dee6d42dfe63e377083b2b948478d5ab850f', name: "expert", slot: "expert" })), hAsync("div", { key: '44304c30e01e933fdcc68df49ac967eccba158d5', ref: (element) => (this.refPopover = element), "data-testid": "popover-content", popover: "auto", id: "popover", class: "kol-popover-button__popover" }, hAsync("slot", { key: '0b319401e4a2254a3aa8eb053d3c1904ce9fdc3b' }))));
|
|
27412
27419
|
}
|
|
27413
27420
|
validateInline(value) {
|
|
27414
27421
|
validateInline(this, value, {
|
|
@@ -28150,7 +28157,7 @@ class SingleSelectController extends InputIconController {
|
|
|
28150
28157
|
}
|
|
28151
28158
|
}
|
|
28152
28159
|
|
|
28153
|
-
const defaultStyleCss$c = "@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 .hastooltip {\n z-index: 900 !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 :host {\n display: inline-block;\n }\n .kol-alert .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-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-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 min-width: var(--a11y-min-size);\n min-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:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\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 min-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}";
|
|
28160
|
+
const defaultStyleCss$c = "@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 .hastooltip {\n z-index: 900 !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 :host {\n display: inline-block;\n }\n .kol-alert .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-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-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-input-container:has(.kol-custom-suggestions-options-group--open) {\n z-index: 10;\n }\n .kol-custom-suggestions-toggle {\n display: flex;\n min-width: var(--a11y-min-size);\n min-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:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\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 min-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 :host {\n display: inline-block;\n }\n .kol-single-select__delete .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-single-select__delete .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-single-select__delete .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-single-select__delete .kol-button {\n margin-top: -2px;\n margin-bottom: -2px;\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}";
|
|
28154
28161
|
|
|
28155
28162
|
class KolSingleSelect {
|
|
28156
28163
|
async getValue() {
|
|
@@ -28320,7 +28327,7 @@ class KolSingleSelect {
|
|
|
28320
28327
|
getInputProps() {
|
|
28321
28328
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
28322
28329
|
const isDisabled = this.state._disabled === true;
|
|
28323
|
-
return Object.assign(Object.assign({ 'aria-activedescendant': this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, 'aria-autocomplete': 'both', 'aria-controls': 'listbox', 'aria-describedby': ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, 'aria-label': this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, 'aria-keyshortcuts': this.state._shortKey, accessKey: this.state._accessKey, autocapitalize: 'off', autocorrect: 'off', class: 'kol-single-select__input', disabled: isDisabled, name: this.state._name, placeholder: this.state._placeholder, ref: this.catchRef, required: this.state._required, state: this.state, type: 'text', value: this._inputValue }, this.controller.onFacade), { onChange: this.onChange.bind(this), onClick: this.onClick.bind(this), onInput: this.onInput.bind(this), onFocus: (event) => {
|
|
28330
|
+
return Object.assign(Object.assign({ 'aria-activedescendant': this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, 'aria-autocomplete': 'both', 'aria-controls': 'listbox', 'aria-describedby': ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, 'aria-label': this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, 'aria-keyshortcuts': this.state._shortKey, accessKey: this.state._accessKey, autocapitalize: 'off', autocorrect: 'off', class: 'kol-single-select__input', disabled: isDisabled, name: this.state._name, placeholder: this.state._placeholder, ref: this.catchRef, required: this.state._required, role: 'combobox', state: this.state, type: 'text', value: this._inputValue }, this.controller.onFacade), { onChange: this.onChange.bind(this), onClick: this.onClick.bind(this), onInput: this.onInput.bind(this), onFocus: (event) => {
|
|
28324
28331
|
this.controller.onFacade.onFocus(event);
|
|
28325
28332
|
this.inputHasFocus = true;
|
|
28326
28333
|
}, onBlur: (event) => {
|
|
@@ -28331,7 +28338,7 @@ class KolSingleSelect {
|
|
|
28331
28338
|
render() {
|
|
28332
28339
|
var _a;
|
|
28333
28340
|
const isDisabled = this.state._disabled === true;
|
|
28334
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
28341
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '73ea1344c5d4b02140e5ab603e3e02b9ab6f4127' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '1db8b71a813e584b3eba6fff6bef21019da4aad0', state: this.state }, hAsync("div", { key: 'fba09b0a58a5dbc9204eee8611161a605a7656c5', class: "kol-single-select__group" }, hAsync(InputStateWrapper, Object.assign({ key: 'df180cf73b7a4bf5514ba373c11257ac2106954b' }, this.getInputProps())), this._inputValue && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: 'a380a14ad068a60f5f3822d3182cd20cb8e21204', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: clsx('kol-single-select__delete', {
|
|
28335
28342
|
'kol-single-select__delete--disabled': isDisabled,
|
|
28336
28343
|
}), _on: {
|
|
28337
28344
|
onClick: () => {
|
|
@@ -28339,9 +28346,9 @@ class KolSingleSelect {
|
|
|
28339
28346
|
this.clearSelection();
|
|
28340
28347
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
28341
28348
|
},
|
|
28342
|
-
} })), hAsync(KolIconTag, { key: '
|
|
28349
|
+
} })), hAsync(KolIconTag, { key: '3dc2a1f77fcc30dd41702921331cfd4296f69c71', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
28343
28350
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
28344
|
-
}), onClick: this.toggleListbox.bind(this) })),
|
|
28351
|
+
}), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: '0c4db60bb72ed3325453b7b1626c0bde8b0e3cdc', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, hidden: !this._isOpen || isDisabled }, 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) => {
|
|
28345
28352
|
if (el)
|
|
28346
28353
|
this.refOptions[index] = el;
|
|
28347
28354
|
}, selected: this._value === option.value, disabled: option.disabled ? true : false, onClick: (event) => {
|
|
@@ -28374,7 +28381,7 @@ class KolSingleSelect {
|
|
|
28374
28381
|
this.toggleListbox(e);
|
|
28375
28382
|
e.preventDefault();
|
|
28376
28383
|
}
|
|
28377
|
-
} })))) : (hAsync("li", { class: "kol-single-select__no-results-message" }, this.translateNoResultsMessage,
|
|
28384
|
+
} })))) : (hAsync("li", { class: "kol-single-select__no-results-message", role: "alert" }, this.translateNoResultsMessage, ' '))))));
|
|
28378
28385
|
}
|
|
28379
28386
|
handleFocusOut(event) {
|
|
28380
28387
|
setTimeout(() => {
|
|
@@ -28862,10 +28869,10 @@ class KolSplitButton {
|
|
|
28862
28869
|
}
|
|
28863
28870
|
render() {
|
|
28864
28871
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
28865
|
-
return (hAsync("div", { key: '5a243be782c854c759a1e649624435137918b698', class: "kol-split-button" }, hAsync("div", { key: '98eae8fe12b95afa454c6b788020f7a56d592425', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: '
|
|
28872
|
+
return (hAsync("div", { key: '5a243be782c854c759a1e649624435137918b698', class: "kol-split-button" }, hAsync("div", { key: '98eae8fe12b95afa454c6b788020f7a56d592425', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: '95f25dfbd1205a7aed9a47871840627a9350bd0c', class: clsx('kol-split-button__button', {
|
|
28866
28873
|
[this._variant]: this._variant !== 'custom',
|
|
28867
28874
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
28868
|
-
}), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _id: this._id, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value,
|
|
28875
|
+
}), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _id: this._id, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: 'ca4441f753f5068f6dc766e7c4d4ae192a67e523', class: "kol-split-button__horizontal-line" }), hAsync(KolButtonWcTag, { key: 'e6607ad89e417102a9e9ad30ca678dc164b0b3d8', class: "kol-split-button__secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "kolicon-chevron-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler })), hAsync(KolPopoverWcTag, { key: '7641839a0d14c003f4f5134cd6b896d428ffb415', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: 'd5bca31e7c3ba5159565c9b59bd67efa0f136efd' }))));
|
|
28869
28876
|
}
|
|
28870
28877
|
async closePopup() {
|
|
28871
28878
|
this.handleOnClose();
|
|
@@ -29007,7 +29014,7 @@ class KolTableSettings {
|
|
|
29007
29014
|
}
|
|
29008
29015
|
render() {
|
|
29009
29016
|
const columns = this.getPrimaryRow();
|
|
29010
|
-
return (hAsync(KolPopoverButtonWcTag, { key: '65b350799d5422b6500b3ae983f9c7f3c925f3b0', ref: (el) => (this.popoverRef = el), class: "kol-table-settings", _icons: "kolicon-settings", _label: this.translateTableSettings, _popoverAlign: "top", _hideLabel: true }, hAsync("div", { key: '450200fa5d74f6ceb99c0ea589e12aefbfcdc23d', class: "kol-table-settings__content" }, hAsync(KolHeadingTag, { key: '8bd0456ba046beb7a819c978d32dd8e64c294be0', _label: this.translateTableSettings, _level: 0 }), this.errorMessage && hAsync(KolAlertWcTag, { key: 'e0d517d57e57c8e889997e18da3fb3badd0bcebe', _type: "error", _label: this.errorMessage, _variant: "msg", class: "kol-table-settings__error-message" }), hAsync("form", { key: '34785b3e839f8fcc59d7930c6d8bc1ca82e8d5a7', onSubmit: this.handleSubmit.bind(this) }, hAsync("div", { key: 'a28b130172a530644430aa4c9f52d6afa913522a', class: "kol-table-settings__columns-container" }, hAsync("div", { key: 'd18e531412556d173f9441c462bd3361f829d205', class: "kol-table-settings__columns" }, columns.map((column, index) => (hAsync("div", { key: column.key, class: "kol-table-settings__column" }, hAsync(KolInputCheckboxTag, { _checked: column.visible !== false, _label: `${column.label}${column.hidable === false ? ` (${this.translateColumnNotHidable})` : ''}`, _value: true, _hideLabel: true, _disabled: column.hidable === false, _on: { onInput: (_, value) => { var _a; return this.handleVisibilityChange((_a = column.key) !== null && _a !== void 0 ? _a : '', value); } } }), hAsync("span", { class: "kol-table-settings__column-label" }, column.label), hAsync(KolInputNumberTag, { _hideLabel: true, _value: parseColumnWidth(column.width), _label: translate('kol-table-settings-column-width', { placeholders: { column: column.label } }), _min: 1, _disabled: column.resizable === false, _on: { onInput: (_, value) => { var _a; return this.handleWidthChange((_a = column.key) !== null && _a !== void 0 ? _a : '', value); } } }), hAsync(KolButtonWcTag, { _icons: "kolicon-chevron-up", _label: translate('kol-table-settings-move-up', { placeholders: { column: column.label } }), _hideLabel: true,
|
|
29017
|
+
return (hAsync(KolPopoverButtonWcTag, { key: '65b350799d5422b6500b3ae983f9c7f3c925f3b0', ref: (el) => (this.popoverRef = el), class: "kol-table-settings", _icons: "kolicon-settings", _label: this.translateTableSettings, _popoverAlign: "top", _hideLabel: true }, hAsync("div", { key: '450200fa5d74f6ceb99c0ea589e12aefbfcdc23d', class: "kol-table-settings__content" }, hAsync(KolHeadingTag, { key: '8bd0456ba046beb7a819c978d32dd8e64c294be0', _label: this.translateTableSettings, _level: 0 }), this.errorMessage && hAsync(KolAlertWcTag, { key: 'e0d517d57e57c8e889997e18da3fb3badd0bcebe', _type: "error", _label: this.errorMessage, _variant: "msg", class: "kol-table-settings__error-message" }), hAsync("form", { key: '34785b3e839f8fcc59d7930c6d8bc1ca82e8d5a7', onSubmit: this.handleSubmit.bind(this) }, hAsync("div", { key: 'a28b130172a530644430aa4c9f52d6afa913522a', class: "kol-table-settings__columns-container" }, hAsync("div", { key: 'd18e531412556d173f9441c462bd3361f829d205', class: "kol-table-settings__columns" }, columns.map((column, index) => (hAsync("div", { key: column.key, class: "kol-table-settings__column" }, hAsync(KolInputCheckboxTag, { _checked: column.visible !== false, _label: `${column.label}${column.hidable === false ? ` (${this.translateColumnNotHidable})` : ''}`, _value: true, _hideLabel: true, _disabled: column.hidable === false, _on: { onInput: (_, value) => { var _a; return this.handleVisibilityChange((_a = column.key) !== null && _a !== void 0 ? _a : '', value); } } }), hAsync("span", { class: "kol-table-settings__column-label" }, column.label), hAsync(KolInputNumberTag, { _hideLabel: true, _value: parseColumnWidth(column.width), _label: translate('kol-table-settings-column-width', { placeholders: { column: column.label } }), _min: 1, _disabled: column.resizable === false, _on: { onInput: (_, value) => { var _a; return this.handleWidthChange((_a = column.key) !== null && _a !== void 0 ? _a : '', value); } } }), hAsync(KolButtonWcTag, { _icons: "kolicon-chevron-up", _label: translate('kol-table-settings-move-up', { placeholders: { column: column.label } }), _hideLabel: true, _variant: "ghost", _on: { onClick: () => { var _a; return this.moveColumn((_a = column.key) !== null && _a !== void 0 ? _a : '', 'up'); } }, _disabled: column.sortable === false || index === 0, "data-testid": "table-settings-move-up" }), hAsync(KolButtonWcTag, { _icons: "kolicon-chevron-down", _label: translate('kol-table-settings-move-down', { placeholders: { column: column.label } }), _hideLabel: true, _variant: "ghost", _on: { onClick: () => { var _a; return this.moveColumn((_a = column.key) !== null && _a !== void 0 ? _a : '', 'down'); } }, _disabled: column.sortable === false || index === columns.length - 1, "data-testid": "table-settings-move-down" })))))), hAsync("div", { key: '2d6942cc9f36857cd4299a57330131975e7f979f', class: "kol-table-settings__actions" }, hAsync(KolButtonWcTag, { key: 'bec8a8be3020bdc1dc2359899963871539bf4d00', _label: this.translateTableSettingsCancel, _variant: "secondary", _on: { onClick: () => this.handleCancel() }, "data-testid": "table-settings-cancel" }), hAsync(KolButtonWcTag, { key: '9c240d2efeab9b2a6341e5cf817ae84d74c9a667', _label: this.translateTableSettingsApply, _variant: "primary", _type: "submit", "data-testid": "table-settings-apply" }))))));
|
|
29011
29018
|
}
|
|
29012
29019
|
get host() { return getElement(this); }
|
|
29013
29020
|
static get watchers() { return {
|
|
@@ -29539,7 +29546,7 @@ class KolTableStateless {
|
|
|
29539
29546
|
return (hAsync("div", { class: "kol-table__cell-actions" }, actions.map((action, actionIndex) => {
|
|
29540
29547
|
if (action.type === 'button') {
|
|
29541
29548
|
const buttonProps = __rest(action, []);
|
|
29542
|
-
return hAsync(KolButtonWcTag, Object.assign({ key: `action-${key}-${actionIndex}` }, buttonProps, {
|
|
29549
|
+
return hAsync(KolButtonWcTag, Object.assign({ key: `action-${key}-${actionIndex}` }, buttonProps, { _variant: buttonProps._variant }));
|
|
29543
29550
|
}
|
|
29544
29551
|
else if (action.type === 'link') {
|
|
29545
29552
|
const linkProps = __rest(action, []);
|
|
@@ -30076,12 +30083,12 @@ class KolTableStateless {
|
|
|
30076
30083
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
30077
30084
|
this.checkboxRefs = [];
|
|
30078
30085
|
const horizontalHeaders = this.state._headerCells.horizontal;
|
|
30079
|
-
return (hAsync("div", { key: '
|
|
30086
|
+
return (hAsync("div", { key: 'cab30ac867bb4db9b327a55a32502e8015dab18e', class: "kol-table" }, this.state._hasSettingsMenu && hAsync(KolTableSettingsWcTag, { key: '251de21d5fd51742d5b5dad0079934c2b331a15a', _horizontalHeaderCells: horizontalHeaders !== null && horizontalHeaders !== void 0 ? horizontalHeaders : [] }), hAsync("div", { key: '564cb70c02254a73cbbc135a5028fe43c89cc010', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '09c37ff906628759bbee7435d00294af3aba2f49', class: "kol-table__table", style: {
|
|
30080
30087
|
minWidth: this.getTableMinWidth(),
|
|
30081
|
-
} }, hAsync("caption", { key: '
|
|
30088
|
+
} }, hAsync("caption", { key: '0b9bc17970b05bf4505662215356e3ef5e3585aa', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(horizontalHeaders) && (hAsync("thead", { key: '28b137cc33f935696ed984cd01cceab2b4fff3da', class: "kol-table__head" }, [
|
|
30082
30089
|
horizontalHeaders.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))))),
|
|
30083
30090
|
this.renderSpacer('head', horizontalHeaders),
|
|
30084
|
-
])), hAsync("tbody", { key: '
|
|
30091
|
+
])), hAsync("tbody", { key: '338ffd0ad158f70d1bd1236c86222b8860c321e1', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
|
|
30085
30092
|
}
|
|
30086
30093
|
get host() { return getElement(this); }
|
|
30087
30094
|
static get watchers() { return {
|
|
@@ -30314,14 +30321,14 @@ class KolTabs {
|
|
|
30314
30321
|
}
|
|
30315
30322
|
}
|
|
30316
30323
|
renderButtonGroup() {
|
|
30317
|
-
return (hAsync("div", { "aria-label": this.state._label, class: "kol-tabs__button-group", role: "tablist", onKeyDown: this.onKeyDown, onBlur: this.onBlur }, this.state._tabs.map((button, index) => (hAsync(KolButtonWcTag, { _disabled: button._disabled, _icons: button._icons, _hideLabel: button._hideLabel, _label: button._label, _on: this.callbacks, _tabIndex: this.state._selected === index ? 0 : -1, _tooltipAlign: button._tooltipAlign,
|
|
30324
|
+
return (hAsync("div", { "aria-label": this.state._label, class: "kol-tabs__button-group", role: "tablist", onKeyDown: this.onKeyDown, onBlur: this.onBlur }, this.state._tabs.map((button, index) => (hAsync(KolButtonWcTag, { _disabled: button._disabled, _icons: button._icons, _hideLabel: button._hideLabel, _label: button._label, _on: this.callbacks, _tabIndex: this.state._selected === index ? 0 : -1, _tooltipAlign: button._tooltipAlign, _variant: this.state._selected === index ? 'custom' : undefined, _customClass: this.state._selected === index ? 'selected' : undefined, _ariaControls: `tabpanel-${index}`, _ariaSelected: this.state._selected === index, _id: `${this.state._label.replace(/\s/g, '-')}-tab-${index}`, _role: "tab", _value: index }))), this.state._hasCreateButton && (hAsync(KolButtonWcTag, { class: "kol-tabs__button-create", _label: this.onCreateLabel, _on: {
|
|
30318
30325
|
onClick: this.onCreate,
|
|
30319
30326
|
}, _icons: "kolicon-plus", "data-testid": "tabs-create-button" }))));
|
|
30320
30327
|
}
|
|
30321
30328
|
render() {
|
|
30322
|
-
return (hAsync("div", { key: '
|
|
30329
|
+
return (hAsync("div", { key: '1ed884fdc131ed8ae0c84f09a360525ebb8d5541', ref: (el) => {
|
|
30323
30330
|
this.tabPanelsElement = el;
|
|
30324
|
-
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
30331
|
+
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '5f05e3de34277f36d6ddbf32811e72e9e6f9e15e', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
|
|
30325
30332
|
}
|
|
30326
30333
|
validateAlign(value) {
|
|
30327
30334
|
validateAlign(this, value);
|
|
@@ -31013,44 +31020,17 @@ class KolTooltipWc {
|
|
|
31013
31020
|
void this.hideTooltip();
|
|
31014
31021
|
}
|
|
31015
31022
|
};
|
|
31016
|
-
this.handleMouseEnter = () => {
|
|
31017
|
-
const isNewVisit = this.isNewVisit();
|
|
31018
|
-
this.hasMouseIn = true;
|
|
31019
|
-
if (isNewVisit) {
|
|
31020
|
-
this.isHiddenForCurrentVisit = false;
|
|
31021
|
-
}
|
|
31022
|
-
this.showOrHideTooltip();
|
|
31023
|
-
};
|
|
31024
|
-
this.handleMouseleave = (event) => {
|
|
31025
|
-
var _a, _b;
|
|
31026
|
-
this.hasMouseIn = (_b = (_a = this.tooltipElement) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)) !== null && _b !== void 0 ? _b : false;
|
|
31027
|
-
this.resetHideFlag();
|
|
31028
|
-
this.showOrHideTooltip();
|
|
31029
|
-
};
|
|
31030
|
-
this.handleFocusIn = () => {
|
|
31031
|
-
const isNewVisit = this.isNewVisit();
|
|
31032
|
-
this.hasFocusIn = true;
|
|
31033
|
-
if (isNewVisit) {
|
|
31034
|
-
this.isHiddenForCurrentVisit = false;
|
|
31035
|
-
}
|
|
31036
|
-
this.showOrHideTooltip();
|
|
31037
|
-
};
|
|
31038
|
-
this.handleFocusout = () => {
|
|
31039
|
-
this.hasFocusIn = false;
|
|
31040
|
-
this.resetHideFlag();
|
|
31041
|
-
this.showOrHideTooltip();
|
|
31042
|
-
};
|
|
31043
31023
|
this.addListeners = (el) => {
|
|
31044
|
-
el.addEventListener('mouseenter', this.handleMouseEnter);
|
|
31045
|
-
el.addEventListener('mouseleave', this.
|
|
31046
|
-
el.addEventListener('focusin', this.handleFocusIn);
|
|
31047
|
-
el.addEventListener('focusout', this.
|
|
31024
|
+
el.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
|
|
31025
|
+
el.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
|
|
31026
|
+
el.addEventListener('focusin', this.handleFocusIn.bind(this));
|
|
31027
|
+
el.addEventListener('focusout', this.handleFocusOut.bind(this));
|
|
31048
31028
|
};
|
|
31049
31029
|
this.removeListeners = (el) => {
|
|
31050
|
-
el.removeEventListener('mouseenter', this.handleMouseEnter);
|
|
31051
|
-
el.removeEventListener('mouseleave', this.
|
|
31052
|
-
el.removeEventListener('focusin', this.handleFocusIn);
|
|
31053
|
-
el.removeEventListener('focusout', this.
|
|
31030
|
+
el.removeEventListener('mouseenter', this.handleMouseEnter.bind(this));
|
|
31031
|
+
el.removeEventListener('mouseleave', this.handleMouseLeave.bind(this));
|
|
31032
|
+
el.removeEventListener('focusin', this.handleFocusIn.bind(this));
|
|
31033
|
+
el.removeEventListener('focusout', this.handleFocusOut.bind(this));
|
|
31054
31034
|
};
|
|
31055
31035
|
this.resyncListeners = (last, next, replacePreviousSibling = false) => {
|
|
31056
31036
|
if (last) {
|
|
@@ -31115,8 +31095,34 @@ class KolTooltipWc {
|
|
|
31115
31095
|
}
|
|
31116
31096
|
getDocument().removeEventListener('keyup', this.hideTooltipByEscape);
|
|
31117
31097
|
}
|
|
31098
|
+
handleMouseEnter() {
|
|
31099
|
+
const isNewVisit = this.isNewVisit();
|
|
31100
|
+
this.hasMouseIn = true;
|
|
31101
|
+
if (isNewVisit) {
|
|
31102
|
+
this.isHiddenForCurrentVisit = false;
|
|
31103
|
+
}
|
|
31104
|
+
this.showOrHideTooltip();
|
|
31105
|
+
}
|
|
31106
|
+
handleMouseLeave() {
|
|
31107
|
+
this.hasMouseIn = false;
|
|
31108
|
+
this.resetHideFlag();
|
|
31109
|
+
this.showOrHideTooltip();
|
|
31110
|
+
}
|
|
31111
|
+
handleFocusIn() {
|
|
31112
|
+
const isNewVisit = this.isNewVisit();
|
|
31113
|
+
this.hasFocusIn = true;
|
|
31114
|
+
if (isNewVisit) {
|
|
31115
|
+
this.isHiddenForCurrentVisit = false;
|
|
31116
|
+
}
|
|
31117
|
+
this.showOrHideTooltip();
|
|
31118
|
+
}
|
|
31119
|
+
handleFocusOut() {
|
|
31120
|
+
this.hasFocusIn = false;
|
|
31121
|
+
this.resetHideFlag();
|
|
31122
|
+
this.showOrHideTooltip();
|
|
31123
|
+
}
|
|
31118
31124
|
render() {
|
|
31119
|
-
return (hAsync(Host, { key: '
|
|
31125
|
+
return (hAsync(Host, { key: '3ab8a61452a2f1d20be4ecf83a9907e7bd151f6b', class: "kol-tooltip" }, hAsync("div", { key: 'fcb1857d1afd79b764a7d19820703905a3ef24b1', class: "kol-tooltip__floating", hidden: this.state._label.length === 0, ref: this.catchTooltipElement }, hAsync("div", { key: '43a21c5e5b13a0d2134699707d1c0960492343b4', class: "kol-tooltip__arrow", ref: this.catchArrowElement }), hAsync(KolSpanFc, { key: '9a49f246f58819e2fd1afd8db1d66b4c0dd434f9', class: "kol-tooltip__content", id: this.state._id, badgeText: this._badgeText, label: this.state._label }))));
|
|
31120
31126
|
}
|
|
31121
31127
|
validateBadgeText(value) {
|
|
31122
31128
|
validateBadgeText(this, value);
|
|
@@ -31139,15 +31145,14 @@ class KolTooltipWc {
|
|
|
31139
31145
|
this.validateLabel(this._label);
|
|
31140
31146
|
}
|
|
31141
31147
|
handleEventListeners() {
|
|
31142
|
-
var _a
|
|
31143
|
-
|
|
31144
|
-
this.resyncListeners(this.previousSibling, nextSibling, true);
|
|
31148
|
+
var _a;
|
|
31149
|
+
this.resyncListeners(this.previousSibling, (_a = this.host) === null || _a === void 0 ? void 0 : _a.previousElementSibling, true);
|
|
31145
31150
|
this.resyncListeners(this.tooltipElement, this.tooltipElement);
|
|
31146
31151
|
}
|
|
31147
31152
|
connectedCallback() {
|
|
31148
|
-
var _a, _b
|
|
31149
|
-
this.previousSibling = (
|
|
31150
|
-
this.parentElement = (
|
|
31153
|
+
var _a, _b;
|
|
31154
|
+
this.previousSibling = (_a = this.host) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
|
|
31155
|
+
this.parentElement = (_b = this.host) === null || _b === void 0 ? void 0 : _b.parentElement;
|
|
31151
31156
|
}
|
|
31152
31157
|
componentDidRender() {
|
|
31153
31158
|
this.handleEventListeners();
|