@public-ui/hydrate 4.0.2 → 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.js
CHANGED
|
@@ -146,7 +146,7 @@ function _mergeNamespaces(n, m) {
|
|
|
146
146
|
|
|
147
147
|
const NAMESPACE = 'kolibri';
|
|
148
148
|
const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
|
|
149
|
-
const Env = /* kolibri */ {"kolibriVersion":"4.0.
|
|
149
|
+
const Env = /* kolibri */ {"kolibriVersion":"4.0.3-rc.0"};
|
|
150
150
|
|
|
151
151
|
function getDefaultExportFromCjs (x) {
|
|
152
152
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
@@ -2084,7 +2084,7 @@ const validateButtonType = (component, value) => {
|
|
|
2084
2084
|
|
|
2085
2085
|
const buttonVariantPropTypeOptions = ['primary', 'secondary', 'normal', 'tertiary', 'danger', 'ghost', 'custom'];
|
|
2086
2086
|
const validateButtonVariant = (component, value) => {
|
|
2087
|
-
watchValidator(component, `
|
|
2087
|
+
watchValidator(component, `_variant`, (value) => typeof value === 'string' && buttonVariantPropTypeOptions.includes(value), new Set([`KoliBriButtonVariant {${buttonVariantPropTypeOptions.join(', ')}`]), value, {
|
|
2088
2088
|
defaultValue: 'normal',
|
|
2089
2089
|
});
|
|
2090
2090
|
};
|
|
@@ -18602,7 +18602,7 @@ class KolBadge {
|
|
|
18602
18602
|
};
|
|
18603
18603
|
}
|
|
18604
18604
|
renderSmartButton(props) {
|
|
18605
|
-
return (hAsync(KolButtonWcTag, { ref: this.catchSmartButtonRef, class: "kol-badge__smart-button", _ariaControls: this.id, _ariaDescription: props._ariaDescription,
|
|
18605
|
+
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 }));
|
|
18606
18606
|
}
|
|
18607
18607
|
async focus() {
|
|
18608
18608
|
var _a;
|
|
@@ -18610,12 +18610,12 @@ class KolBadge {
|
|
|
18610
18610
|
}
|
|
18611
18611
|
render() {
|
|
18612
18612
|
const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;
|
|
18613
|
-
return (hAsync("span", { key: '
|
|
18613
|
+
return (hAsync("span", { key: '9cbe34bd551362c6f631d403b69387255d2725ee', class: clsx('kol-badge', {
|
|
18614
18614
|
'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
|
|
18615
18615
|
}), style: {
|
|
18616
18616
|
backgroundColor: this.bgColorStr,
|
|
18617
18617
|
color: this.colorStr,
|
|
18618
|
-
} }, hAsync(KolSpanFc, { key: '
|
|
18618
|
+
} }, 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)));
|
|
18619
18619
|
}
|
|
18620
18620
|
validateIcons(value) {
|
|
18621
18621
|
validateIcons(this, value);
|
|
@@ -18767,7 +18767,7 @@ class KolButton {
|
|
|
18767
18767
|
return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
18768
18768
|
}
|
|
18769
18769
|
render() {
|
|
18770
|
-
return (hAsync(KolButtonWcTag, { key: '
|
|
18770
|
+
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" })));
|
|
18771
18771
|
}
|
|
18772
18772
|
static get style() { return {
|
|
18773
18773
|
default: defaultStyleCss$H
|
|
@@ -19141,14 +19141,14 @@ class KolButtonWc {
|
|
|
19141
19141
|
const badgeText = this.state._accessKey || this.state._shortKey;
|
|
19142
19142
|
const isDisabled = this.state._disabled === true;
|
|
19143
19143
|
const hideLabel = this.state._hideLabel === true;
|
|
19144
|
-
return (hAsync(Host, { key: '4acaf70bc26886e46e360e49035823cf343d89ef' }, hAsync("button", { key: '
|
|
19144
|
+
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', {
|
|
19145
19145
|
'kol-button--disabled': isDisabled,
|
|
19146
|
-
[`kol-button--${this.state.
|
|
19146
|
+
[`kol-button--${this.state._variant}`]: this.state._variant !== 'custom',
|
|
19147
19147
|
'kol-button--inline': this.state._inline === true,
|
|
19148
19148
|
'kol-button--standalone': this.state._inline === false,
|
|
19149
19149
|
'kol-button--hide-label': hideLabel,
|
|
19150
|
-
[this.state._customClass]: this.state.
|
|
19151
|
-
}), 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: '
|
|
19150
|
+
[this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
19151
|
+
}), 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 : '' }))));
|
|
19152
19152
|
}
|
|
19153
19153
|
constructor(hostRef) {
|
|
19154
19154
|
registerInstance(this, hostRef);
|
|
@@ -19192,13 +19192,13 @@ class KolButtonWc {
|
|
|
19192
19192
|
this._inline = false;
|
|
19193
19193
|
this._tooltipAlign = 'top';
|
|
19194
19194
|
this._type = 'button';
|
|
19195
|
-
this.
|
|
19195
|
+
this._variant = 'normal';
|
|
19196
19196
|
this.state = {
|
|
19197
19197
|
_icons: {},
|
|
19198
19198
|
_label: '',
|
|
19199
19199
|
_on: {},
|
|
19200
19200
|
_type: 'button',
|
|
19201
|
-
|
|
19201
|
+
_variant: 'normal',
|
|
19202
19202
|
};
|
|
19203
19203
|
this.controller = new AssociatedInputController(this, 'button', this.host);
|
|
19204
19204
|
}
|
|
@@ -19297,7 +19297,7 @@ class KolButtonWc {
|
|
|
19297
19297
|
this.validateTooltipAlign(this._tooltipAlign);
|
|
19298
19298
|
this.validateType(this._type);
|
|
19299
19299
|
this.validateValue(this._value);
|
|
19300
|
-
this.validateButtonVariant(this.
|
|
19300
|
+
this.validateButtonVariant(this._variant);
|
|
19301
19301
|
validateAccessAndShortKey(this._accessKey, this._shortKey);
|
|
19302
19302
|
}
|
|
19303
19303
|
get host() { return getElement(this); }
|
|
@@ -19323,7 +19323,7 @@ class KolButtonWc {
|
|
|
19323
19323
|
"_tooltipAlign": ["validateTooltipAlign"],
|
|
19324
19324
|
"_type": ["validateType"],
|
|
19325
19325
|
"_value": ["validateValue"],
|
|
19326
|
-
"
|
|
19326
|
+
"_variant": ["validateButtonVariant"]
|
|
19327
19327
|
}; }
|
|
19328
19328
|
static get cmpMeta() { return {
|
|
19329
19329
|
"$flags$": 260,
|
|
@@ -19351,7 +19351,7 @@ class KolButtonWc {
|
|
|
19351
19351
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
19352
19352
|
"_type": [1],
|
|
19353
19353
|
"_value": [8],
|
|
19354
|
-
"
|
|
19354
|
+
"_variant": [1],
|
|
19355
19355
|
"state": [32],
|
|
19356
19356
|
"focus": [64]
|
|
19357
19357
|
},
|
|
@@ -19678,15 +19678,17 @@ const CustomSuggestionsOptionFc = ({ disabled, index, ref, selected, onClick, on
|
|
|
19678
19678
|
return text;
|
|
19679
19679
|
const regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
|
|
19680
19680
|
const parts = text.split(regex);
|
|
19681
|
-
|
|
19681
|
+
parts[1] = hAsync("mark", null, parts[1]);
|
|
19682
|
+
return parts;
|
|
19682
19683
|
};
|
|
19683
|
-
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 || '')));
|
|
19684
|
+
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 || ''))));
|
|
19684
19685
|
};
|
|
19685
19686
|
|
|
19686
|
-
const CustomSuggestionsOptionsGroupFc = ({ blockSuggestionMouseOver, onKeyDown, style }, children) => {
|
|
19687
|
+
const CustomSuggestionsOptionsGroupFc = ({ blockSuggestionMouseOver, onKeyDown, style, hidden }, children) => {
|
|
19687
19688
|
return (hAsync("ul", { role: "listbox", style: style, class: clsx('kol-custom-suggestions-options-group', {
|
|
19688
19689
|
'kol-custom-suggestions-options-group--cursor-hidden': blockSuggestionMouseOver,
|
|
19689
|
-
|
|
19690
|
+
'kol-custom-suggestions-options-group--open': !hidden,
|
|
19691
|
+
}), hidden: hidden, onKeyDown: onKeyDown }, children));
|
|
19690
19692
|
};
|
|
19691
19693
|
|
|
19692
19694
|
class ControlledInputController extends AssociatedInputController {
|
|
@@ -19948,7 +19950,7 @@ class ComboboxController extends InputIconController {
|
|
|
19948
19950
|
}
|
|
19949
19951
|
}
|
|
19950
19952
|
|
|
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-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}";
|
|
19953
|
+
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}";
|
|
19952
19954
|
|
|
19953
19955
|
class KolCombobox {
|
|
19954
19956
|
async getValue() {
|
|
@@ -20070,15 +20072,15 @@ class KolCombobox {
|
|
|
20070
20072
|
}
|
|
20071
20073
|
render() {
|
|
20072
20074
|
const isDisabled = this.state._disabled === true;
|
|
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: '
|
|
20075
|
+
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', {
|
|
20074
20076
|
'kol-combobox__delete--disabled': isDisabled,
|
|
20075
20077
|
}), _on: {
|
|
20076
20078
|
onClick: () => {
|
|
20077
20079
|
this.clearSelection();
|
|
20078
20080
|
},
|
|
20079
|
-
} })), hAsync(KolIconTag, { key: '
|
|
20081
|
+
} })), hAsync(KolIconTag, { key: '3cb2036a8ddee0289391c5a53ffa0b0c9f0641f1', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
20080
20082
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
20081
|
-
}), onClick: this.toggleListbox.bind(this) })),
|
|
20083
|
+
}), 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) &&
|
|
20082
20084
|
this._filteredSuggestions.length > 0 &&
|
|
20083
20085
|
this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { disabled: false, index: index, option: option, searchTerm: this.state._value, ref: (el) => {
|
|
20084
20086
|
if (el)
|
|
@@ -20099,7 +20101,7 @@ class KolCombobox {
|
|
|
20099
20101
|
this.toggleListbox();
|
|
20100
20102
|
e.preventDefault();
|
|
20101
20103
|
}
|
|
20102
|
-
} })))))))
|
|
20104
|
+
} })))))));
|
|
20103
20105
|
}
|
|
20104
20106
|
handleKeyDown(event) {
|
|
20105
20107
|
var _a, _b;
|
|
@@ -20998,7 +21000,7 @@ const bem = c();
|
|
|
20998
21000
|
const BEM_CLASS_ICON = bem('kol-icon');
|
|
20999
21001
|
const BEM_CLASS_ICON__ICON = bem('kol-icon', 'icon');
|
|
21000
21002
|
|
|
21001
|
-
const defaultStyleCss$y = "/* forward the rem function */\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=
|
|
21003
|
+
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}";
|
|
21002
21004
|
|
|
21003
21005
|
class KolIcon {
|
|
21004
21006
|
render() {
|
|
@@ -21989,7 +21991,7 @@ InputDateController.isoTimeRegex = /^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/;
|
|
|
21989
21991
|
InputDateController.isoWeekRegex = /^\d{4}-W(?:[0-4]\d|5[0-3])$/;
|
|
21990
21992
|
InputDateController.DEFAULT_MAX_DATE = new Date(9999, 11, 31, 23, 59, 59);
|
|
21991
21993
|
|
|
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}";
|
|
21994
|
+
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}";
|
|
21993
21995
|
|
|
21994
21996
|
class KolInputDate {
|
|
21995
21997
|
async getValue() {
|
|
@@ -22677,7 +22679,7 @@ class KolInputFile {
|
|
|
22677
22679
|
} });
|
|
22678
22680
|
}
|
|
22679
22681
|
render() {
|
|
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: '
|
|
22682
|
+
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 }))));
|
|
22681
22683
|
}
|
|
22682
22684
|
constructor(hostRef) {
|
|
22683
22685
|
registerInstance(this, hostRef);
|
|
@@ -24468,7 +24470,7 @@ class KolLinkButton {
|
|
|
24468
24470
|
return Promise.resolve((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
24469
24471
|
}
|
|
24470
24472
|
render() {
|
|
24471
|
-
return (hAsync(KolLinkWcTag, { key: '
|
|
24473
|
+
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" })));
|
|
24472
24474
|
}
|
|
24473
24475
|
static get style() { return {
|
|
24474
24476
|
default: defaultStyleCss$k
|
|
@@ -24554,7 +24556,7 @@ class KolLinkWc {
|
|
|
24554
24556
|
this._hideLabel = false;
|
|
24555
24557
|
this._inline = true;
|
|
24556
24558
|
this._tooltipAlign = 'right';
|
|
24557
|
-
this.
|
|
24559
|
+
this._variant = 'normal';
|
|
24558
24560
|
this.state = {
|
|
24559
24561
|
_ariaCurrentValue: 'page',
|
|
24560
24562
|
_href: '',
|
|
@@ -24570,17 +24572,17 @@ class KolLinkWc {
|
|
|
24570
24572
|
const { isExternal, tagAttrs } = this.getRenderValues();
|
|
24571
24573
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
24572
24574
|
const ariaDescription = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim();
|
|
24573
|
-
return (hAsync(Host, { key: '298b41cd96f03c37f968b5a44a996e820986e1a4' }, hAsync("a", Object.assign({ key: '
|
|
24575
|
+
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'
|
|
24574
24576
|
? `${this.state._label}${isExternal ? ` (${this.translateOpenLinkInTab})` : ''}`
|
|
24575
24577
|
: undefined, "aria-keyshortcuts": this.state._shortKey, class: clsx('kol-link', {
|
|
24576
24578
|
'kol-link--disabled': this.state._disabled === true,
|
|
24577
24579
|
'kol-link--external-link': isExternal,
|
|
24578
24580
|
'kol-link--hide-label': this.state._hideLabel === true,
|
|
24579
|
-
[`kol-link--${this.state.
|
|
24581
|
+
[`kol-link--${this.state._variant}`]: this.state._variant !== 'custom',
|
|
24580
24582
|
'kol-link--inline': this.state._inline === true,
|
|
24581
24583
|
'kol-link--standalone': this.state._inline === false,
|
|
24582
|
-
[this.state._customClass]: this.state.
|
|
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: '
|
|
24584
|
+
[this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
24585
|
+
}) }, 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 }))));
|
|
24584
24586
|
}
|
|
24585
24587
|
validateAccessKey(value) {
|
|
24586
24588
|
validateAccessKey(this, value);
|
|
@@ -24672,7 +24674,7 @@ class KolLinkWc {
|
|
|
24672
24674
|
this.validateTabIndex(this._tabIndex);
|
|
24673
24675
|
this.validateTarget(this._target);
|
|
24674
24676
|
this.validateTooltipAlign(this._tooltipAlign);
|
|
24675
|
-
this.validateButtonVariant(this.
|
|
24677
|
+
this.validateButtonVariant(this._variant);
|
|
24676
24678
|
this.unsubscribeOnLocationChange = onLocationChange();
|
|
24677
24679
|
validateAccessAndShortKey(this._accessKey, this._shortKey);
|
|
24678
24680
|
}
|
|
@@ -24703,7 +24705,7 @@ class KolLinkWc {
|
|
|
24703
24705
|
"_tabIndex": ["validateTabIndex"],
|
|
24704
24706
|
"_target": ["validateTarget"],
|
|
24705
24707
|
"_tooltipAlign": ["validateTooltipAlign"],
|
|
24706
|
-
"
|
|
24708
|
+
"_variant": ["validateButtonVariant"]
|
|
24707
24709
|
}; }
|
|
24708
24710
|
static get cmpMeta() { return {
|
|
24709
24711
|
"$flags$": 260,
|
|
@@ -24729,7 +24731,7 @@ class KolLinkWc {
|
|
|
24729
24731
|
"_tabIndex": [2, "_tab-index"],
|
|
24730
24732
|
"_target": [1],
|
|
24731
24733
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
24732
|
-
"
|
|
24734
|
+
"_variant": [1],
|
|
24733
24735
|
"state": [32],
|
|
24734
24736
|
"focus": [64]
|
|
24735
24737
|
},
|
|
@@ -25586,6 +25588,71 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
|
25586
25588
|
return coords;
|
|
25587
25589
|
}
|
|
25588
25590
|
|
|
25591
|
+
/**
|
|
25592
|
+
* Resolves with an object of overflow side offsets that determine how much the
|
|
25593
|
+
* element is overflowing a given clipping boundary on each side.
|
|
25594
|
+
* - positive = overflowing the boundary by that number of pixels
|
|
25595
|
+
* - negative = how many pixels left before it will overflow
|
|
25596
|
+
* - 0 = lies flush with the boundary
|
|
25597
|
+
* @see https://floating-ui.com/docs/detectOverflow
|
|
25598
|
+
*/
|
|
25599
|
+
async function detectOverflow(state, options) {
|
|
25600
|
+
var _await$platform$isEle;
|
|
25601
|
+
if (options === void 0) {
|
|
25602
|
+
options = {};
|
|
25603
|
+
}
|
|
25604
|
+
const {
|
|
25605
|
+
x,
|
|
25606
|
+
y,
|
|
25607
|
+
platform,
|
|
25608
|
+
rects,
|
|
25609
|
+
elements,
|
|
25610
|
+
strategy
|
|
25611
|
+
} = state;
|
|
25612
|
+
const {
|
|
25613
|
+
boundary = 'clippingAncestors',
|
|
25614
|
+
rootBoundary = 'viewport',
|
|
25615
|
+
elementContext = 'floating',
|
|
25616
|
+
altBoundary = false,
|
|
25617
|
+
padding = 0
|
|
25618
|
+
} = evaluate(options, state);
|
|
25619
|
+
const paddingObject = getPaddingObject(padding);
|
|
25620
|
+
const altContext = elementContext === 'floating' ? 'reference' : 'floating';
|
|
25621
|
+
const element = elements[altBoundary ? altContext : elementContext];
|
|
25622
|
+
const clippingClientRect = rectToClientRect(await platform.getClippingRect({
|
|
25623
|
+
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))),
|
|
25624
|
+
boundary,
|
|
25625
|
+
rootBoundary,
|
|
25626
|
+
strategy
|
|
25627
|
+
}));
|
|
25628
|
+
const rect = elementContext === 'floating' ? {
|
|
25629
|
+
x,
|
|
25630
|
+
y,
|
|
25631
|
+
width: rects.floating.width,
|
|
25632
|
+
height: rects.floating.height
|
|
25633
|
+
} : rects.reference;
|
|
25634
|
+
const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
|
|
25635
|
+
const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
|
|
25636
|
+
x: 1,
|
|
25637
|
+
y: 1
|
|
25638
|
+
} : {
|
|
25639
|
+
x: 1,
|
|
25640
|
+
y: 1
|
|
25641
|
+
};
|
|
25642
|
+
const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
25643
|
+
elements,
|
|
25644
|
+
rect,
|
|
25645
|
+
offsetParent,
|
|
25646
|
+
strategy
|
|
25647
|
+
}) : rect);
|
|
25648
|
+
return {
|
|
25649
|
+
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
|
|
25650
|
+
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
|
|
25651
|
+
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
|
|
25652
|
+
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
25653
|
+
};
|
|
25654
|
+
}
|
|
25655
|
+
|
|
25589
25656
|
/**
|
|
25590
25657
|
* Computes the `x` and `y` coordinates that will place the floating element
|
|
25591
25658
|
* next to a given reference element.
|
|
@@ -25615,6 +25682,7 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
25615
25682
|
let middlewareData = {};
|
|
25616
25683
|
let resetCount = 0;
|
|
25617
25684
|
for (let i = 0; i < validMiddleware.length; i++) {
|
|
25685
|
+
var _platform$detectOverf;
|
|
25618
25686
|
const {
|
|
25619
25687
|
name,
|
|
25620
25688
|
fn
|
|
@@ -25632,7 +25700,10 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
25632
25700
|
strategy,
|
|
25633
25701
|
middlewareData,
|
|
25634
25702
|
rects,
|
|
25635
|
-
platform
|
|
25703
|
+
platform: {
|
|
25704
|
+
...platform,
|
|
25705
|
+
detectOverflow: (_platform$detectOverf = platform.detectOverflow) != null ? _platform$detectOverf : detectOverflow
|
|
25706
|
+
},
|
|
25636
25707
|
elements: {
|
|
25637
25708
|
reference,
|
|
25638
25709
|
floating
|
|
@@ -25677,71 +25748,6 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
25677
25748
|
};
|
|
25678
25749
|
};
|
|
25679
25750
|
|
|
25680
|
-
/**
|
|
25681
|
-
* Resolves with an object of overflow side offsets that determine how much the
|
|
25682
|
-
* element is overflowing a given clipping boundary on each side.
|
|
25683
|
-
* - positive = overflowing the boundary by that number of pixels
|
|
25684
|
-
* - negative = how many pixels left before it will overflow
|
|
25685
|
-
* - 0 = lies flush with the boundary
|
|
25686
|
-
* @see https://floating-ui.com/docs/detectOverflow
|
|
25687
|
-
*/
|
|
25688
|
-
async function detectOverflow(state, options) {
|
|
25689
|
-
var _await$platform$isEle;
|
|
25690
|
-
if (options === void 0) {
|
|
25691
|
-
options = {};
|
|
25692
|
-
}
|
|
25693
|
-
const {
|
|
25694
|
-
x,
|
|
25695
|
-
y,
|
|
25696
|
-
platform,
|
|
25697
|
-
rects,
|
|
25698
|
-
elements,
|
|
25699
|
-
strategy
|
|
25700
|
-
} = state;
|
|
25701
|
-
const {
|
|
25702
|
-
boundary = 'clippingAncestors',
|
|
25703
|
-
rootBoundary = 'viewport',
|
|
25704
|
-
elementContext = 'floating',
|
|
25705
|
-
altBoundary = false,
|
|
25706
|
-
padding = 0
|
|
25707
|
-
} = evaluate(options, state);
|
|
25708
|
-
const paddingObject = getPaddingObject(padding);
|
|
25709
|
-
const altContext = elementContext === 'floating' ? 'reference' : 'floating';
|
|
25710
|
-
const element = elements[altBoundary ? altContext : elementContext];
|
|
25711
|
-
const clippingClientRect = rectToClientRect(await platform.getClippingRect({
|
|
25712
|
-
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))),
|
|
25713
|
-
boundary,
|
|
25714
|
-
rootBoundary,
|
|
25715
|
-
strategy
|
|
25716
|
-
}));
|
|
25717
|
-
const rect = elementContext === 'floating' ? {
|
|
25718
|
-
x,
|
|
25719
|
-
y,
|
|
25720
|
-
width: rects.floating.width,
|
|
25721
|
-
height: rects.floating.height
|
|
25722
|
-
} : rects.reference;
|
|
25723
|
-
const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
|
|
25724
|
-
const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
|
|
25725
|
-
x: 1,
|
|
25726
|
-
y: 1
|
|
25727
|
-
} : {
|
|
25728
|
-
x: 1,
|
|
25729
|
-
y: 1
|
|
25730
|
-
};
|
|
25731
|
-
const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
25732
|
-
elements,
|
|
25733
|
-
rect,
|
|
25734
|
-
offsetParent,
|
|
25735
|
-
strategy
|
|
25736
|
-
}) : rect);
|
|
25737
|
-
return {
|
|
25738
|
-
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
|
|
25739
|
-
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
|
|
25740
|
-
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
|
|
25741
|
-
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
25742
|
-
};
|
|
25743
|
-
}
|
|
25744
|
-
|
|
25745
25751
|
/**
|
|
25746
25752
|
* Provides data to position an inner element of the floating element so that it
|
|
25747
25753
|
* appears centered to the reference element.
|
|
@@ -25874,7 +25880,7 @@ const flip$1 = function (options) {
|
|
|
25874
25880
|
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
|
25875
25881
|
}
|
|
25876
25882
|
const placements = [initialPlacement, ...fallbackPlacements];
|
|
25877
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
25883
|
+
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
|
25878
25884
|
const overflows = [];
|
|
25879
25885
|
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
|
25880
25886
|
if (checkMainAxis) {
|
|
@@ -26058,7 +26064,8 @@ const shift$1 = function (options) {
|
|
|
26058
26064
|
const {
|
|
26059
26065
|
x,
|
|
26060
26066
|
y,
|
|
26061
|
-
placement
|
|
26067
|
+
placement,
|
|
26068
|
+
platform
|
|
26062
26069
|
} = state;
|
|
26063
26070
|
const {
|
|
26064
26071
|
mainAxis: checkMainAxis = true,
|
|
@@ -26081,7 +26088,7 @@ const shift$1 = function (options) {
|
|
|
26081
26088
|
x,
|
|
26082
26089
|
y
|
|
26083
26090
|
};
|
|
26084
|
-
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
26091
|
+
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
|
26085
26092
|
const crossAxis = getSideAxis(getSide(placement));
|
|
26086
26093
|
const mainAxis = getOppositeAxis(crossAxis);
|
|
26087
26094
|
let mainAxisCoord = coords[mainAxis];
|
|
@@ -27410,7 +27417,7 @@ class KolPopoverButton {
|
|
|
27410
27417
|
'kol-popover-button--open': this.popoverOpen,
|
|
27411
27418
|
'kol-popover-button--inline': this.state._inline === true,
|
|
27412
27419
|
'kol-popover-button--standalone': this.state._inline === false,
|
|
27413
|
-
}) }, hAsync(KolButtonWcTag, { key: '
|
|
27420
|
+
}) }, 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' }))));
|
|
27414
27421
|
}
|
|
27415
27422
|
validateInline(value) {
|
|
27416
27423
|
validateInline(this, value, {
|
|
@@ -28152,7 +28159,7 @@ class SingleSelectController extends InputIconController {
|
|
|
28152
28159
|
}
|
|
28153
28160
|
}
|
|
28154
28161
|
|
|
28155
|
-
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}";
|
|
28162
|
+
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}";
|
|
28156
28163
|
|
|
28157
28164
|
class KolSingleSelect {
|
|
28158
28165
|
async getValue() {
|
|
@@ -28322,7 +28329,7 @@ class KolSingleSelect {
|
|
|
28322
28329
|
getInputProps() {
|
|
28323
28330
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
28324
28331
|
const isDisabled = this.state._disabled === true;
|
|
28325
|
-
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) => {
|
|
28332
|
+
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) => {
|
|
28326
28333
|
this.controller.onFacade.onFocus(event);
|
|
28327
28334
|
this.inputHasFocus = true;
|
|
28328
28335
|
}, onBlur: (event) => {
|
|
@@ -28333,7 +28340,7 @@ class KolSingleSelect {
|
|
|
28333
28340
|
render() {
|
|
28334
28341
|
var _a;
|
|
28335
28342
|
const isDisabled = this.state._disabled === true;
|
|
28336
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
28343
|
+
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', {
|
|
28337
28344
|
'kol-single-select__delete--disabled': isDisabled,
|
|
28338
28345
|
}), _on: {
|
|
28339
28346
|
onClick: () => {
|
|
@@ -28341,9 +28348,9 @@ class KolSingleSelect {
|
|
|
28341
28348
|
this.clearSelection();
|
|
28342
28349
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
28343
28350
|
},
|
|
28344
|
-
} })), hAsync(KolIconTag, { key: '
|
|
28351
|
+
} })), hAsync(KolIconTag, { key: '3dc2a1f77fcc30dd41702921331cfd4296f69c71', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
28345
28352
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
28346
|
-
}), onClick: this.toggleListbox.bind(this) })),
|
|
28353
|
+
}), 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) => {
|
|
28347
28354
|
if (el)
|
|
28348
28355
|
this.refOptions[index] = el;
|
|
28349
28356
|
}, selected: this._value === option.value, disabled: option.disabled ? true : false, onClick: (event) => {
|
|
@@ -28376,7 +28383,7 @@ class KolSingleSelect {
|
|
|
28376
28383
|
this.toggleListbox(e);
|
|
28377
28384
|
e.preventDefault();
|
|
28378
28385
|
}
|
|
28379
|
-
} })))) : (hAsync("li", { class: "kol-single-select__no-results-message" }, this.translateNoResultsMessage,
|
|
28386
|
+
} })))) : (hAsync("li", { class: "kol-single-select__no-results-message", role: "alert" }, this.translateNoResultsMessage, ' '))))));
|
|
28380
28387
|
}
|
|
28381
28388
|
handleFocusOut(event) {
|
|
28382
28389
|
setTimeout(() => {
|
|
@@ -28864,10 +28871,10 @@ class KolSplitButton {
|
|
|
28864
28871
|
}
|
|
28865
28872
|
render() {
|
|
28866
28873
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
28867
|
-
return (hAsync("div", { key: '5a243be782c854c759a1e649624435137918b698', class: "kol-split-button" }, hAsync("div", { key: '98eae8fe12b95afa454c6b788020f7a56d592425', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: '
|
|
28874
|
+
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', {
|
|
28868
28875
|
[this._variant]: this._variant !== 'custom',
|
|
28869
28876
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
28870
|
-
}), 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,
|
|
28877
|
+
}), 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' }))));
|
|
28871
28878
|
}
|
|
28872
28879
|
async closePopup() {
|
|
28873
28880
|
this.handleOnClose();
|
|
@@ -29009,7 +29016,7 @@ class KolTableSettings {
|
|
|
29009
29016
|
}
|
|
29010
29017
|
render() {
|
|
29011
29018
|
const columns = this.getPrimaryRow();
|
|
29012
|
-
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,
|
|
29019
|
+
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" }))))));
|
|
29013
29020
|
}
|
|
29014
29021
|
get host() { return getElement(this); }
|
|
29015
29022
|
static get watchers() { return {
|
|
@@ -29541,7 +29548,7 @@ class KolTableStateless {
|
|
|
29541
29548
|
return (hAsync("div", { class: "kol-table__cell-actions" }, actions.map((action, actionIndex) => {
|
|
29542
29549
|
if (action.type === 'button') {
|
|
29543
29550
|
const buttonProps = __rest(action, []);
|
|
29544
|
-
return hAsync(KolButtonWcTag, Object.assign({ key: `action-${key}-${actionIndex}` }, buttonProps, {
|
|
29551
|
+
return hAsync(KolButtonWcTag, Object.assign({ key: `action-${key}-${actionIndex}` }, buttonProps, { _variant: buttonProps._variant }));
|
|
29545
29552
|
}
|
|
29546
29553
|
else if (action.type === 'link') {
|
|
29547
29554
|
const linkProps = __rest(action, []);
|
|
@@ -30078,12 +30085,12 @@ class KolTableStateless {
|
|
|
30078
30085
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
30079
30086
|
this.checkboxRefs = [];
|
|
30080
30087
|
const horizontalHeaders = this.state._headerCells.horizontal;
|
|
30081
|
-
return (hAsync("div", { key: '
|
|
30088
|
+
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: {
|
|
30082
30089
|
minWidth: this.getTableMinWidth(),
|
|
30083
|
-
} }, hAsync("caption", { key: '
|
|
30090
|
+
} }, 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" }, [
|
|
30084
30091
|
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))))),
|
|
30085
30092
|
this.renderSpacer('head', horizontalHeaders),
|
|
30086
|
-
])), hAsync("tbody", { key: '
|
|
30093
|
+
])), hAsync("tbody", { key: '338ffd0ad158f70d1bd1236c86222b8860c321e1', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
|
|
30087
30094
|
}
|
|
30088
30095
|
get host() { return getElement(this); }
|
|
30089
30096
|
static get watchers() { return {
|
|
@@ -30316,14 +30323,14 @@ class KolTabs {
|
|
|
30316
30323
|
}
|
|
30317
30324
|
}
|
|
30318
30325
|
renderButtonGroup() {
|
|
30319
|
-
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,
|
|
30326
|
+
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: {
|
|
30320
30327
|
onClick: this.onCreate,
|
|
30321
30328
|
}, _icons: "kolicon-plus", "data-testid": "tabs-create-button" }))));
|
|
30322
30329
|
}
|
|
30323
30330
|
render() {
|
|
30324
|
-
return (hAsync("div", { key: '
|
|
30331
|
+
return (hAsync("div", { key: '1ed884fdc131ed8ae0c84f09a360525ebb8d5541', ref: (el) => {
|
|
30325
30332
|
this.tabPanelsElement = el;
|
|
30326
|
-
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
30333
|
+
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '5f05e3de34277f36d6ddbf32811e72e9e6f9e15e', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
|
|
30327
30334
|
}
|
|
30328
30335
|
validateAlign(value) {
|
|
30329
30336
|
validateAlign(this, value);
|
|
@@ -31015,44 +31022,17 @@ class KolTooltipWc {
|
|
|
31015
31022
|
void this.hideTooltip();
|
|
31016
31023
|
}
|
|
31017
31024
|
};
|
|
31018
|
-
this.handleMouseEnter = () => {
|
|
31019
|
-
const isNewVisit = this.isNewVisit();
|
|
31020
|
-
this.hasMouseIn = true;
|
|
31021
|
-
if (isNewVisit) {
|
|
31022
|
-
this.isHiddenForCurrentVisit = false;
|
|
31023
|
-
}
|
|
31024
|
-
this.showOrHideTooltip();
|
|
31025
|
-
};
|
|
31026
|
-
this.handleMouseleave = (event) => {
|
|
31027
|
-
var _a, _b;
|
|
31028
|
-
this.hasMouseIn = (_b = (_a = this.tooltipElement) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)) !== null && _b !== void 0 ? _b : false;
|
|
31029
|
-
this.resetHideFlag();
|
|
31030
|
-
this.showOrHideTooltip();
|
|
31031
|
-
};
|
|
31032
|
-
this.handleFocusIn = () => {
|
|
31033
|
-
const isNewVisit = this.isNewVisit();
|
|
31034
|
-
this.hasFocusIn = true;
|
|
31035
|
-
if (isNewVisit) {
|
|
31036
|
-
this.isHiddenForCurrentVisit = false;
|
|
31037
|
-
}
|
|
31038
|
-
this.showOrHideTooltip();
|
|
31039
|
-
};
|
|
31040
|
-
this.handleFocusout = () => {
|
|
31041
|
-
this.hasFocusIn = false;
|
|
31042
|
-
this.resetHideFlag();
|
|
31043
|
-
this.showOrHideTooltip();
|
|
31044
|
-
};
|
|
31045
31025
|
this.addListeners = (el) => {
|
|
31046
|
-
el.addEventListener('mouseenter', this.handleMouseEnter);
|
|
31047
|
-
el.addEventListener('mouseleave', this.
|
|
31048
|
-
el.addEventListener('focusin', this.handleFocusIn);
|
|
31049
|
-
el.addEventListener('focusout', this.
|
|
31026
|
+
el.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
|
|
31027
|
+
el.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
|
|
31028
|
+
el.addEventListener('focusin', this.handleFocusIn.bind(this));
|
|
31029
|
+
el.addEventListener('focusout', this.handleFocusOut.bind(this));
|
|
31050
31030
|
};
|
|
31051
31031
|
this.removeListeners = (el) => {
|
|
31052
|
-
el.removeEventListener('mouseenter', this.handleMouseEnter);
|
|
31053
|
-
el.removeEventListener('mouseleave', this.
|
|
31054
|
-
el.removeEventListener('focusin', this.handleFocusIn);
|
|
31055
|
-
el.removeEventListener('focusout', this.
|
|
31032
|
+
el.removeEventListener('mouseenter', this.handleMouseEnter.bind(this));
|
|
31033
|
+
el.removeEventListener('mouseleave', this.handleMouseLeave.bind(this));
|
|
31034
|
+
el.removeEventListener('focusin', this.handleFocusIn.bind(this));
|
|
31035
|
+
el.removeEventListener('focusout', this.handleFocusOut.bind(this));
|
|
31056
31036
|
};
|
|
31057
31037
|
this.resyncListeners = (last, next, replacePreviousSibling = false) => {
|
|
31058
31038
|
if (last) {
|
|
@@ -31117,8 +31097,34 @@ class KolTooltipWc {
|
|
|
31117
31097
|
}
|
|
31118
31098
|
getDocument().removeEventListener('keyup', this.hideTooltipByEscape);
|
|
31119
31099
|
}
|
|
31100
|
+
handleMouseEnter() {
|
|
31101
|
+
const isNewVisit = this.isNewVisit();
|
|
31102
|
+
this.hasMouseIn = true;
|
|
31103
|
+
if (isNewVisit) {
|
|
31104
|
+
this.isHiddenForCurrentVisit = false;
|
|
31105
|
+
}
|
|
31106
|
+
this.showOrHideTooltip();
|
|
31107
|
+
}
|
|
31108
|
+
handleMouseLeave() {
|
|
31109
|
+
this.hasMouseIn = false;
|
|
31110
|
+
this.resetHideFlag();
|
|
31111
|
+
this.showOrHideTooltip();
|
|
31112
|
+
}
|
|
31113
|
+
handleFocusIn() {
|
|
31114
|
+
const isNewVisit = this.isNewVisit();
|
|
31115
|
+
this.hasFocusIn = true;
|
|
31116
|
+
if (isNewVisit) {
|
|
31117
|
+
this.isHiddenForCurrentVisit = false;
|
|
31118
|
+
}
|
|
31119
|
+
this.showOrHideTooltip();
|
|
31120
|
+
}
|
|
31121
|
+
handleFocusOut() {
|
|
31122
|
+
this.hasFocusIn = false;
|
|
31123
|
+
this.resetHideFlag();
|
|
31124
|
+
this.showOrHideTooltip();
|
|
31125
|
+
}
|
|
31120
31126
|
render() {
|
|
31121
|
-
return (hAsync(Host, { key: '
|
|
31127
|
+
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 }))));
|
|
31122
31128
|
}
|
|
31123
31129
|
validateBadgeText(value) {
|
|
31124
31130
|
validateBadgeText(this, value);
|
|
@@ -31141,15 +31147,14 @@ class KolTooltipWc {
|
|
|
31141
31147
|
this.validateLabel(this._label);
|
|
31142
31148
|
}
|
|
31143
31149
|
handleEventListeners() {
|
|
31144
|
-
var _a
|
|
31145
|
-
|
|
31146
|
-
this.resyncListeners(this.previousSibling, nextSibling, true);
|
|
31150
|
+
var _a;
|
|
31151
|
+
this.resyncListeners(this.previousSibling, (_a = this.host) === null || _a === void 0 ? void 0 : _a.previousElementSibling, true);
|
|
31147
31152
|
this.resyncListeners(this.tooltipElement, this.tooltipElement);
|
|
31148
31153
|
}
|
|
31149
31154
|
connectedCallback() {
|
|
31150
|
-
var _a, _b
|
|
31151
|
-
this.previousSibling = (
|
|
31152
|
-
this.parentElement = (
|
|
31155
|
+
var _a, _b;
|
|
31156
|
+
this.previousSibling = (_a = this.host) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
|
|
31157
|
+
this.parentElement = (_b = this.host) === null || _b === void 0 ? void 0 : _b.parentElement;
|
|
31153
31158
|
}
|
|
31154
31159
|
componentDidRender() {
|
|
31155
31160
|
this.handleEventListeners();
|