@public-ui/hydrate 4.0.0-alpha.10 → 4.0.0-alpha.11
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 +251 -138
- package/dist/index.mjs +251 -138
- package/package.json +2 -2
package/dist/index.mjs
CHANGED
|
@@ -144,7 +144,7 @@ function _mergeNamespaces(n, m) {
|
|
|
144
144
|
|
|
145
145
|
const NAMESPACE = 'kolibri';
|
|
146
146
|
const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
|
|
147
|
-
const Env = /* kolibri */ {"kolibriVersion":"4.0.0-alpha.
|
|
147
|
+
const Env = /* kolibri */ {"kolibriVersion":"4.0.0-alpha.11"};
|
|
148
148
|
|
|
149
149
|
function getDefaultExportFromCjs (x) {
|
|
150
150
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
@@ -2338,13 +2338,13 @@ const validateIcons = (component, value, options = {}) => {
|
|
|
2338
2338
|
isString$2(value, 1) ||
|
|
2339
2339
|
(typeof value === 'object' &&
|
|
2340
2340
|
value !== null &&
|
|
2341
|
-
(isString$2(value.left,
|
|
2341
|
+
(isString$2(value.left, 0) ||
|
|
2342
2342
|
isIcon(value.left) ||
|
|
2343
|
-
isString$2(value.right,
|
|
2343
|
+
isString$2(value.right, 0) ||
|
|
2344
2344
|
isIcon(value.right) ||
|
|
2345
|
-
isString$2(value.top,
|
|
2345
|
+
isString$2(value.top, 0) ||
|
|
2346
2346
|
isIcon(value.top) ||
|
|
2347
|
-
isString$2(value.bottom,
|
|
2347
|
+
isString$2(value.bottom, 0) ||
|
|
2348
2348
|
isIcon(value.bottom))));
|
|
2349
2349
|
}, new Set(['KoliBriIcon']), value, Object.assign(Object.assign({}, options), { defaultValue: {}, hooks: {
|
|
2350
2350
|
afterPatch: (_a = options.hooks) === null || _a === void 0 ? void 0 : _a.afterPatch,
|
|
@@ -6078,7 +6078,7 @@ let KolLinkWcTag = 'kol-link-wc';
|
|
|
6078
6078
|
let KolPaginationWcTag = 'kol-pagination-wc';
|
|
6079
6079
|
let KolPopoverWcTag = 'kol-popover-wc';
|
|
6080
6080
|
let KolPopoverButtonWcTag = 'kol-popover-button-wc';
|
|
6081
|
-
let
|
|
6081
|
+
let KolSelectWcTag = 'kol-select-wc';
|
|
6082
6082
|
let KolTableSettingsWcTag = 'kol-table-settings-wc';
|
|
6083
6083
|
let KolTableStatelessWcTag = 'kol-table-stateless-wc';
|
|
6084
6084
|
let KolTooltipWcTag = 'kol-tooltip-wc';
|
|
@@ -6190,11 +6190,11 @@ const KolHeadingFc = (_a, children) => {
|
|
|
6190
6190
|
|
|
6191
6191
|
const KolCollapsibleFc = (props, children) => {
|
|
6192
6192
|
const { id, class: classNames, label, level = 1, disabled, open, onClick, HeadingProps = {}, HeadingButtonProps = {}, ContentProps = {} } = props, other = __rest(props, ["id", "class", "label", "level", "disabled", "open", "onClick", "HeadingProps", "HeadingButtonProps", "ContentProps"]);
|
|
6193
|
-
const icon = open ? '
|
|
6193
|
+
const icon = open ? 'kolicon-chevron-down' : 'kolicon-chevron-right';
|
|
6194
6194
|
return (hAsync("div", Object.assign({ id: id, class: clsx('collapsible', {
|
|
6195
6195
|
'collapsible--disabled': disabled === true,
|
|
6196
6196
|
'collapsible--open': open === true,
|
|
6197
|
-
}, classNames) }, other), hAsync(KolHeadingFc, { ref: HeadingProps === null || HeadingProps === void 0 ? void 0 : HeadingProps.ref, level: level, class: clsx('collapsible__heading', HeadingProps === null || HeadingProps === void 0 ? void 0 : HeadingProps.class) }, hAsync(KolButtonWcTag, { class: clsx('collapsible__heading-button', HeadingButtonProps === null || HeadingButtonProps === void 0 ? void 0 : HeadingButtonProps.class), ref: HeadingButtonProps === null || HeadingButtonProps === void 0 ? void 0 : HeadingButtonProps.ref, slot: "expert", _ariaControls: `${id}-control`, _ariaExpanded: open, _disabled: disabled, _icons: (HeadingButtonProps === null || HeadingButtonProps === void 0 ? void 0 : HeadingButtonProps._icons) ||
|
|
6197
|
+
}, classNames) }, other), hAsync(KolHeadingFc, { ref: HeadingProps === null || HeadingProps === void 0 ? void 0 : HeadingProps.ref, level: level, class: clsx('collapsible__heading', HeadingProps === null || HeadingProps === void 0 ? void 0 : HeadingProps.class) }, hAsync(KolButtonWcTag, { class: clsx('collapsible__heading-button', HeadingButtonProps === null || HeadingButtonProps === void 0 ? void 0 : HeadingButtonProps.class), ref: HeadingButtonProps === null || HeadingButtonProps === void 0 ? void 0 : HeadingButtonProps.ref, slot: "expert", _ariaControls: `${id}-control`, _ariaExpanded: open, _disabled: disabled, _icons: (HeadingButtonProps === null || HeadingButtonProps === void 0 ? void 0 : HeadingButtonProps._icons) || `${icon}`, _label: label, _on: { onClick } })), hAsync("div", { class: clsx('collapsible__wrapper', ContentProps === null || ContentProps === void 0 ? void 0 : ContentProps.wrapperClass) }, hAsync("div", { class: clsx('collapsible__wrapper-animation', ContentProps === null || ContentProps === void 0 ? void 0 : ContentProps.animationClass) }, hAsync("div", { "aria-hidden": open === false ? 'true' : undefined, class: clsx('collapsible__content', ContentProps === null || ContentProps === void 0 ? void 0 : ContentProps.class), id: `${id}-control` }, children)))));
|
|
6198
6198
|
};
|
|
6199
6199
|
|
|
6200
6200
|
const initMeta = () => {
|
|
@@ -6472,7 +6472,7 @@ var locale_de = {
|
|
|
6472
6472
|
page: 'Seite',
|
|
6473
6473
|
'page-current': 'Seite {{page}}',
|
|
6474
6474
|
'page-selected': 'Seite {{page}} ist ausgewählt',
|
|
6475
|
-
'page-per-site': '
|
|
6475
|
+
'page-per-site': 'Einträge pro Seite',
|
|
6476
6476
|
'nav-maximize': 'Navigation maximieren',
|
|
6477
6477
|
'nav-minimize': 'Navigation minimieren',
|
|
6478
6478
|
'logo-description': 'Logo {{orgShort}}. Bundesadler mit Flaggenstab und Schriftzug {{orgLong}}',
|
|
@@ -6544,7 +6544,7 @@ var locale_en = {
|
|
|
6544
6544
|
page: 'Page',
|
|
6545
6545
|
'page-current': 'Page {{page}}',
|
|
6546
6546
|
'page-selected': 'Page {{page}} is selected',
|
|
6547
|
-
'page-per-site': '
|
|
6547
|
+
'page-per-site': 'Entries per page',
|
|
6548
6548
|
'nav-maximize': 'Maximize navigation',
|
|
6549
6549
|
'nav-minimize': 'Minimize navigation',
|
|
6550
6550
|
'logo-description': 'Logo {{orgShort}}. Federal eagle with flag staff and lettering {{orgLong}}',
|
|
@@ -6752,15 +6752,15 @@ const Icon = ({ ariaLabel, icon }) => {
|
|
|
6752
6752
|
const AlertIcon = ({ type, label }) => {
|
|
6753
6753
|
switch (type) {
|
|
6754
6754
|
case 'error':
|
|
6755
|
-
return hAsync(Icon, { ariaLabel: translateError, icon: "
|
|
6755
|
+
return hAsync(Icon, { ariaLabel: translateError, icon: "kolicon-alert-error", label: label });
|
|
6756
6756
|
case 'info':
|
|
6757
|
-
return hAsync(Icon, { ariaLabel: translateInfo, icon: "
|
|
6757
|
+
return hAsync(Icon, { ariaLabel: translateInfo, icon: "kolicon-alert-info", label: label });
|
|
6758
6758
|
case 'warning':
|
|
6759
|
-
return hAsync(Icon, { ariaLabel: translateWarning, icon: "
|
|
6759
|
+
return hAsync(Icon, { ariaLabel: translateWarning, icon: "kolicon-alert-warning", label: label });
|
|
6760
6760
|
case 'success':
|
|
6761
|
-
return hAsync(Icon, { ariaLabel: translateSuccess, icon: "
|
|
6761
|
+
return hAsync(Icon, { ariaLabel: translateSuccess, icon: "kolicon-alert-success", label: label });
|
|
6762
6762
|
default:
|
|
6763
|
-
return hAsync(Icon, { ariaLabel: translateMessage, icon: "
|
|
6763
|
+
return hAsync(Icon, { ariaLabel: translateMessage, icon: "kolicon-alert-info", label: label });
|
|
6764
6764
|
}
|
|
6765
6765
|
};
|
|
6766
6766
|
|
|
@@ -6802,7 +6802,7 @@ const KolAlertFc = (props, children) => {
|
|
|
6802
6802
|
const rootProps = Object.assign({ class: clsx(classNames, BEM_CLASS_ROOT) }, other);
|
|
6803
6803
|
return (hAsync("div", Object.assign({ role: alert ? 'alert' : undefined }, rootProps, { "data-testid": "alert" }), hAsync("div", { class: "kol-alert__container" }, hAsync(AlertIcon, { label: label, type: type }), hAsync("div", { class: "kol-alert__container-content" }, label && (hAsync(KolHeadingFc, { class: BEM_CLASS__HEADING, level: level, id: "heading" }, label)), variant === 'msg' && (hAsync("span", { class: BEM_CLASS_ALERT__CONTENT, "aria-describedby": label ? 'heading' : undefined }, children))), hasCloser && (hAsync(KolButtonWcTag, { class: BEM_CLASS_ALERT__CLOSER, "data-testid": "alert-close-button", _ariaDescription: (label === null || label === void 0 ? void 0 : label.trim()) || '', _hideLabel: true, _icons: {
|
|
6804
6804
|
left: {
|
|
6805
|
-
icon: '
|
|
6805
|
+
icon: 'kolicon-cross',
|
|
6806
6806
|
},
|
|
6807
6807
|
}, _label: translateCloseAlert, _on: { onClick: onCloserClick }, _tooltipAlign: "left" }))), variant === 'card' && (hAsync("div", { class: BEM_CLASS_ALERT__CONTENT, "aria-describedby": label ? 'heading' : undefined }, children))));
|
|
6808
6808
|
};
|
|
@@ -18677,7 +18677,7 @@ class KolBreadcrumb {
|
|
|
18677
18677
|
registerInstance(this, hostRef);
|
|
18678
18678
|
this.renderLink = (link, index) => {
|
|
18679
18679
|
const lastIndex = this.state._links.length - 1;
|
|
18680
|
-
return (hAsync("li", { class: "kol-breadcrumb__list-element", key: index }, index === lastIndex ? (hAsync("span", { class: "kol-breadcrumb__list-element-span", "aria-current": "page" }, link._hideLabel ? (hAsync(KolIconTag, { class: "kol-breadcrumb__icon", _label: link._label, _icons: typeof link._icons === 'string' ? link._icons : 'codicon codicon-symbol-event' })) : (hAsync(Fragment, null, link._label)))) : (hAsync(KolLinkWcTag, Object.assign({ class: "kol-breadcrumb__link", _inline: false }, link))), index !== lastIndex && hAsync(KolIconTag, { class: "kol-breadcrumb__separator", _label: "", _icons: "
|
|
18680
|
+
return (hAsync("li", { class: "kol-breadcrumb__list-element", key: index }, index === lastIndex ? (hAsync("span", { class: "kol-breadcrumb__list-element-span", "aria-current": "page" }, link._hideLabel ? (hAsync(KolIconTag, { class: "kol-breadcrumb__icon", _label: link._label, _icons: typeof link._icons === 'string' ? link._icons : 'codicon codicon-symbol-event' })) : (hAsync(Fragment, null, link._label)))) : (hAsync(KolLinkWcTag, Object.assign({ class: "kol-breadcrumb__link", _inline: false }, link))), index !== lastIndex && hAsync(KolIconTag, { class: "kol-breadcrumb__separator", _label: "", _icons: "kolicon-chevron-right" })));
|
|
18681
18681
|
};
|
|
18682
18682
|
this.state = {
|
|
18683
18683
|
_label: '',
|
|
@@ -18685,7 +18685,7 @@ class KolBreadcrumb {
|
|
|
18685
18685
|
};
|
|
18686
18686
|
}
|
|
18687
18687
|
render() {
|
|
18688
|
-
return (hAsync("nav", { key: '
|
|
18688
|
+
return (hAsync("nav", { key: '69dbd3034c3b7b19975d8dab92db45169ba1ffa8', class: "kol-breadcrumb", "aria-label": this.state._label }, hAsync("ul", { key: '0183c1b3850d530a0d0770a2f298f076e23296b7', class: "kol-breadcrumb__list" }, this.state._links.length === 0 && (hAsync("li", { key: 'aae370f7858a4e61f3b40dfd61ef3cb32a3024ee' }, hAsync(KolIconTag, { key: '94b7b59afaafa2878d30501e223ad7f9e43ea182', class: "kol-breadcrumb_icon", _label: "", _icons: "codicon codicon-home" }), "\u2026")), this.state._links.map(this.renderLink))));
|
|
18689
18689
|
}
|
|
18690
18690
|
validateLabel(value, _oldValue, initial = false) {
|
|
18691
18691
|
if (!initial) {
|
|
@@ -19399,9 +19399,9 @@ class KolCardWc {
|
|
|
19399
19399
|
this.validateOnValue = (value) => typeof value === 'object' && value !== null && typeof value.onClose === 'function';
|
|
19400
19400
|
}
|
|
19401
19401
|
render() {
|
|
19402
|
-
return (hAsync(Host, { key: '
|
|
19402
|
+
return (hAsync(Host, { key: '31a21a7dd16b81042127406bc4cd091f16f230d4' }, hAsync("div", { key: '22001ed9c1f73d9b6445b0b6e36109c9cc8ef608', "aria-labelledby": this.nonce, class: "kol-card", role: "group" }, hAsync(KolHeadingFc, { key: '5b6760cafee75437ba6ef208d35e05e96ec3f76a', class: "kol-card__header", id: this.nonce, level: this.state._level }, this.state._label), hAsync("div", { key: '9b780b199200df0ce78ad4f3d2f1ad746f838a8e', class: "kol-card__content" }, hAsync("slot", { key: 'cdf53c951f6980b6827db3bf37ea7ad216037c69' })), this.state._hasCloser && (hAsync(KolButtonWcTag, { key: '17351e7bf95780dbdad9ade81d7a44c7ecb47f2b', class: "kol-card__close-button", "data-testid": "card-close-button", _hideLabel: true, _icons: {
|
|
19403
19403
|
left: {
|
|
19404
|
-
icon: '
|
|
19404
|
+
icon: 'kolicon-cross',
|
|
19405
19405
|
},
|
|
19406
19406
|
}, _label: this.translateClose, _on: this.on, _tooltipAlign: "left" })))));
|
|
19407
19407
|
}
|
|
@@ -19907,8 +19907,8 @@ class ComboboxController extends InputIconController {
|
|
|
19907
19907
|
super(component, name, host);
|
|
19908
19908
|
this.component = component;
|
|
19909
19909
|
}
|
|
19910
|
-
|
|
19911
|
-
watchBoolean(this.component, '
|
|
19910
|
+
validateHasClearButton(value) {
|
|
19911
|
+
watchBoolean(this.component, '_hasClearButton', value);
|
|
19912
19912
|
}
|
|
19913
19913
|
validatePlaceholder(value) {
|
|
19914
19914
|
validatePlaceholder(this.component, value);
|
|
@@ -19924,7 +19924,7 @@ class ComboboxController extends InputIconController {
|
|
|
19924
19924
|
}
|
|
19925
19925
|
componentWillLoad() {
|
|
19926
19926
|
super.componentWillLoad();
|
|
19927
|
-
this.
|
|
19927
|
+
this.validateHasClearButton(this.component._hasClearButton);
|
|
19928
19928
|
this.validatePlaceholder(this.component._placeholder);
|
|
19929
19929
|
this.validateRequired(this.component._required);
|
|
19930
19930
|
this.validateSuggestions(this.component._suggestions);
|
|
@@ -20047,15 +20047,15 @@ class KolCombobox {
|
|
|
20047
20047
|
}
|
|
20048
20048
|
render() {
|
|
20049
20049
|
const isDisabled = this.state._disabled === true;
|
|
20050
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
20050
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'ea072edf65173a627c7a8af5af4b15592b69aa6e' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'cd26bc70a3b4def7be64e1c5c242c4fbb1656b1f', state: this.state }, hAsync("div", { key: '0345d23493d7879ab8c6f3db3f6a158743308c22', class: "kol-combobox__group" }, hAsync(InputStateWrapper, Object.assign({ key: 'a187dc63d3df35e8ad1dc65024d508f5364358f3' }, this.getInputProps())), this.state._value && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: '547dab645411ba7db78fa16a39b478057e9fb4b8', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _disabled: isDisabled, "data-testid": "combobox-delete", class: clsx('kol-combobox__delete', {
|
|
20051
20051
|
'kol-combobox__delete--disabled': isDisabled,
|
|
20052
20052
|
}), _on: {
|
|
20053
20053
|
onClick: () => {
|
|
20054
20054
|
this.clearSelection();
|
|
20055
20055
|
},
|
|
20056
|
-
} })), hAsync(KolIconTag, { key: '
|
|
20056
|
+
} })), hAsync(KolIconTag, { key: 'fc2533df3314266028a81e2439533996f1f84fd7', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
20057
20057
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
20058
|
-
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '
|
|
20058
|
+
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: 'f1e60f33171ccf3d5e52d835c53953a7e3f0196e', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
|
|
20059
20059
|
this._filteredSuggestions.length > 0 &&
|
|
20060
20060
|
this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { disabled: false, index: index, option: option, searchTerm: this.state._value, ref: (el) => {
|
|
20061
20061
|
if (el)
|
|
@@ -20197,13 +20197,13 @@ class KolCombobox {
|
|
|
20197
20197
|
this._hideMsg = false;
|
|
20198
20198
|
this._hideLabel = false;
|
|
20199
20199
|
this._hint = '';
|
|
20200
|
-
this.
|
|
20200
|
+
this._hasClearButton = true;
|
|
20201
20201
|
this._required = false;
|
|
20202
20202
|
this._tooltipAlign = 'top';
|
|
20203
20203
|
this._touched = false;
|
|
20204
20204
|
this.state = {
|
|
20205
20205
|
_hasValue: false,
|
|
20206
|
-
|
|
20206
|
+
_hasClearButton: true,
|
|
20207
20207
|
_hideMsg: false,
|
|
20208
20208
|
_id: `id-${nonce()}`,
|
|
20209
20209
|
_label: '',
|
|
@@ -20260,8 +20260,8 @@ class KolCombobox {
|
|
|
20260
20260
|
this.controller.validateSuggestions(value);
|
|
20261
20261
|
this._filteredSuggestions = value;
|
|
20262
20262
|
}
|
|
20263
|
-
|
|
20264
|
-
this.controller.
|
|
20263
|
+
validateHasClearButton(value) {
|
|
20264
|
+
this.controller.validateHasClearButton(value);
|
|
20265
20265
|
}
|
|
20266
20266
|
validateRequired(value) {
|
|
20267
20267
|
this.controller.validateRequired(value);
|
|
@@ -20325,7 +20325,7 @@ class KolCombobox {
|
|
|
20325
20325
|
"_on": ["validateOn"],
|
|
20326
20326
|
"_shortKey": ["validateShortKey"],
|
|
20327
20327
|
"_suggestions": ["validateSuggestions"],
|
|
20328
|
-
"
|
|
20328
|
+
"_hasClearButton": ["validateHasClearButton"],
|
|
20329
20329
|
"_required": ["validateRequired"],
|
|
20330
20330
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
20331
20331
|
"_touched": ["validateTouched"],
|
|
@@ -20350,7 +20350,7 @@ class KolCombobox {
|
|
|
20350
20350
|
"_msg": [1],
|
|
20351
20351
|
"_name": [1],
|
|
20352
20352
|
"_on": [16],
|
|
20353
|
-
"
|
|
20353
|
+
"_hasClearButton": [4, "_has-clear-button"],
|
|
20354
20354
|
"_suggestions": [1],
|
|
20355
20355
|
"_required": [4],
|
|
20356
20356
|
"_shortKey": [1, "_short-key"],
|
|
@@ -20420,7 +20420,7 @@ class KolDetails {
|
|
|
20420
20420
|
HeadingButtonProps: {
|
|
20421
20421
|
ref: this.catchRef,
|
|
20422
20422
|
class: `${rootClass}__heading-button`,
|
|
20423
|
-
_icons: '
|
|
20423
|
+
_icons: 'kolicon-chevron-right',
|
|
20424
20424
|
},
|
|
20425
20425
|
ContentProps: {
|
|
20426
20426
|
class: `${rootClass}__content indented-text`,
|
|
@@ -20428,7 +20428,7 @@ class KolDetails {
|
|
|
20428
20428
|
animationClass: `${rootClass}__wrapper-animation`,
|
|
20429
20429
|
},
|
|
20430
20430
|
};
|
|
20431
|
-
return (hAsync(KolCollapsibleFc, Object.assign({ key: '
|
|
20431
|
+
return (hAsync(KolCollapsibleFc, Object.assign({ key: '335d90129f31949bcec29ac3108f22c43d6dd09a' }, props), hAsync("slot", { key: 'ce42f858d4bda51fbac02e14d6f69b4e51da41b3' })));
|
|
20432
20432
|
}
|
|
20433
20433
|
validateDisabled(value) {
|
|
20434
20434
|
validateDisabled(this, value);
|
|
@@ -20830,7 +20830,7 @@ const bem = c();
|
|
|
20830
20830
|
const BEM_CLASS_ICON = bem('kol-icon');
|
|
20831
20831
|
const BEM_CLASS_ICON__ICON = bem('kol-icon', 'icon');
|
|
20832
20832
|
|
|
20833
|
-
const defaultStyleCss$y = "/* forward the rem function */\n/*---------------------------------------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n@font-face {\n font-family: \"codicon\";\n font-display: block;\n src: url(\"./codicon.ttf?be64b7213e352cd7f91ef58198e71237\") format(\"truetype\");\n}\n.codicon[class*=codicon-] {\n font: normal normal normal 16px/1 codicon;\n display: inline-block;\n text-decoration: none;\n text-rendering: auto;\n text-align: center;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n user-select: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n}\n\n/*---------------------\n * Modifiers\n *-------------------*/\n@keyframes codicon-spin {\n 100% {\n transform: rotate(360deg);\n }\n}\n.codicon-sync.codicon-modifier-spin,\n.codicon-loading.codicon-modifier-spin,\n.codicon-gear.codicon-modifier-spin {\n /* Use steps to throttle FPS to reduce CPU usage */\n animation: codicon-spin 1.5s steps(30) infinite;\n}\n\n.codicon-modifier-disabled {\n opacity: 0.5;\n}\n\n.codicon-modifier-hidden {\n opacity: 0;\n}\n\n/* custom speed & easing for loading icon */\n.codicon-loading {\n animation-duration: 1s !important;\n animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67) !important;\n}\n\n/*---------------------\n * Icons\n *-------------------*/\n.codicon-add:before {\n content: \"\\ea60\";\n}\n\n.codicon-plus:before {\n content: \"\\ea60\";\n}\n\n.codicon-gist-new:before {\n content: \"\\ea60\";\n}\n\n.codicon-repo-create:before {\n content: \"\\ea60\";\n}\n\n.codicon-lightbulb:before {\n content: \"\\ea61\";\n}\n\n.codicon-light-bulb:before {\n content: \"\\ea61\";\n}\n\n.codicon-repo:before {\n content: \"\\ea62\";\n}\n\n.codicon-repo-delete:before {\n content: \"\\ea62\";\n}\n\n.codicon-gist-fork:before {\n content: \"\\ea63\";\n}\n\n.codicon-repo-forked:before {\n content: \"\\ea63\";\n}\n\n.codicon-git-pull-request:before {\n content: \"\\ea64\";\n}\n\n.codicon-git-pull-request-abandoned:before {\n content: \"\\ea64\";\n}\n\n.codicon-record-keys:before {\n content: \"\\ea65\";\n}\n\n.codicon-keyboard:before {\n content: \"\\ea65\";\n}\n\n.codicon-tag:before {\n content: \"\\ea66\";\n}\n\n.codicon-git-pull-request-label:before {\n content: \"\\ea66\";\n}\n\n.codicon-tag-add:before {\n content: \"\\ea66\";\n}\n\n.codicon-tag-remove:before {\n content: \"\\ea66\";\n}\n\n.codicon-person:before {\n content: \"\\ea67\";\n}\n\n.codicon-person-follow:before {\n content: \"\\ea67\";\n}\n\n.codicon-person-outline:before {\n content: \"\\ea67\";\n}\n\n.codicon-person-filled:before {\n content: \"\\ea67\";\n}\n\n.codicon-git-branch:before {\n content: \"\\ea68\";\n}\n\n.codicon-git-branch-create:before {\n content: \"\\ea68\";\n}\n\n.codicon-git-branch-delete:before {\n content: \"\\ea68\";\n}\n\n.codicon-source-control:before {\n content: \"\\ea68\";\n}\n\n.codicon-mirror:before {\n content: \"\\ea69\";\n}\n\n.codicon-mirror-public:before {\n content: \"\\ea69\";\n}\n\n.codicon-star:before {\n content: \"\\ea6a\";\n}\n\n.codicon-star-add:before {\n content: \"\\ea6a\";\n}\n\n.codicon-star-delete:before {\n content: \"\\ea6a\";\n}\n\n.codicon-star-empty:before {\n content: \"\\ea6a\";\n}\n\n.codicon-comment:before {\n content: \"\\ea6b\";\n}\n\n.codicon-comment-add:before {\n content: \"\\ea6b\";\n}\n\n.codicon-alert:before {\n content: \"\\ea6c\";\n}\n\n.codicon-warning:before {\n content: \"\\ea6c\";\n}\n\n.codicon-search:before {\n content: \"\\ea6d\";\n}\n\n.codicon-search-save:before {\n content: \"\\ea6d\";\n}\n\n.codicon-log-out:before {\n content: \"\\ea6e\";\n}\n\n.codicon-sign-out:before {\n content: \"\\ea6e\";\n}\n\n.codicon-log-in:before {\n content: \"\\ea6f\";\n}\n\n.codicon-sign-in:before {\n content: \"\\ea6f\";\n}\n\n.codicon-eye:before {\n content: \"\\ea70\";\n}\n\n.codicon-eye-unwatch:before {\n content: \"\\ea70\";\n}\n\n.codicon-eye-watch:before {\n content: \"\\ea70\";\n}\n\n.codicon-circle-filled:before {\n content: \"\\ea71\";\n}\n\n.codicon-primitive-dot:before {\n content: \"\\ea71\";\n}\n\n.codicon-close-dirty:before {\n content: \"\\ea71\";\n}\n\n.codicon-debug-breakpoint:before {\n content: \"\\ea71\";\n}\n\n.codicon-debug-breakpoint-disabled:before {\n content: \"\\ea71\";\n}\n\n.codicon-debug-hint:before {\n content: \"\\ea71\";\n}\n\n.codicon-terminal-decoration-success:before {\n content: \"\\ea71\";\n}\n\n.codicon-primitive-square:before {\n content: \"\\ea72\";\n}\n\n.codicon-edit:before {\n content: \"\\ea73\";\n}\n\n.codicon-pencil:before {\n content: \"\\ea73\";\n}\n\n.codicon-info:before {\n content: \"\\ea74\";\n}\n\n.codicon-issue-opened:before {\n content: \"\\ea74\";\n}\n\n.codicon-gist-private:before {\n content: \"\\ea75\";\n}\n\n.codicon-git-fork-private:before {\n content: \"\\ea75\";\n}\n\n.codicon-lock:before {\n content: \"\\ea75\";\n}\n\n.codicon-mirror-private:before {\n content: \"\\ea75\";\n}\n\n.codicon-close:before {\n content: \"\\ea76\";\n}\n\n.codicon-remove-close:before {\n content: \"\\ea76\";\n}\n\n.codicon-x:before {\n content: \"\\ea76\";\n}\n\n.codicon-repo-sync:before {\n content: \"\\ea77\";\n}\n\n.codicon-sync:before {\n content: \"\\ea77\";\n}\n\n.codicon-clone:before {\n content: \"\\ea78\";\n}\n\n.codicon-desktop-download:before {\n content: \"\\ea78\";\n}\n\n.codicon-beaker:before {\n content: \"\\ea79\";\n}\n\n.codicon-microscope:before {\n content: \"\\ea79\";\n}\n\n.codicon-vm:before {\n content: \"\\ea7a\";\n}\n\n.codicon-device-desktop:before {\n content: \"\\ea7a\";\n}\n\n.codicon-file:before {\n content: \"\\ea7b\";\n}\n\n.codicon-file-text:before {\n content: \"\\ea7b\";\n}\n\n.codicon-more:before {\n content: \"\\ea7c\";\n}\n\n.codicon-ellipsis:before {\n content: \"\\ea7c\";\n}\n\n.codicon-kebab-horizontal:before {\n content: \"\\ea7c\";\n}\n\n.codicon-mail-reply:before {\n content: \"\\ea7d\";\n}\n\n.codicon-reply:before {\n content: \"\\ea7d\";\n}\n\n.codicon-organization:before {\n content: \"\\ea7e\";\n}\n\n.codicon-organization-filled:before {\n content: \"\\ea7e\";\n}\n\n.codicon-organization-outline:before {\n content: \"\\ea7e\";\n}\n\n.codicon-new-file:before {\n content: \"\\ea7f\";\n}\n\n.codicon-file-add:before {\n content: \"\\ea7f\";\n}\n\n.codicon-new-folder:before {\n content: \"\\ea80\";\n}\n\n.codicon-file-directory-create:before {\n content: \"\\ea80\";\n}\n\n.codicon-trash:before {\n content: \"\\ea81\";\n}\n\n.codicon-trashcan:before {\n content: \"\\ea81\";\n}\n\n.codicon-history:before {\n content: \"\\ea82\";\n}\n\n.codicon-clock:before {\n content: \"\\ea82\";\n}\n\n.codicon-folder:before {\n content: \"\\ea83\";\n}\n\n.codicon-file-directory:before {\n content: \"\\ea83\";\n}\n\n.codicon-symbol-folder:before {\n content: \"\\ea83\";\n}\n\n.codicon-logo-github:before {\n content: \"\\ea84\";\n}\n\n.codicon-mark-github:before {\n content: \"\\ea84\";\n}\n\n.codicon-github:before {\n content: \"\\ea84\";\n}\n\n.codicon-terminal:before {\n content: \"\\ea85\";\n}\n\n.codicon-console:before {\n content: \"\\ea85\";\n}\n\n.codicon-repl:before {\n content: \"\\ea85\";\n}\n\n.codicon-zap:before {\n content: \"\\ea86\";\n}\n\n.codicon-symbol-event:before {\n content: \"\\ea86\";\n}\n\n.codicon-error:before {\n content: \"\\ea87\";\n}\n\n.codicon-stop:before {\n content: \"\\ea87\";\n}\n\n.codicon-variable:before {\n content: \"\\ea88\";\n}\n\n.codicon-symbol-variable:before {\n content: \"\\ea88\";\n}\n\n.codicon-array:before {\n content: \"\\ea8a\";\n}\n\n.codicon-symbol-array:before {\n content: \"\\ea8a\";\n}\n\n.codicon-symbol-module:before {\n content: \"\\ea8b\";\n}\n\n.codicon-symbol-package:before {\n content: \"\\ea8b\";\n}\n\n.codicon-symbol-namespace:before {\n content: \"\\ea8b\";\n}\n\n.codicon-symbol-object:before {\n content: \"\\ea8b\";\n}\n\n.codicon-symbol-method:before {\n content: \"\\ea8c\";\n}\n\n.codicon-symbol-function:before {\n content: \"\\ea8c\";\n}\n\n.codicon-symbol-constructor:before {\n content: \"\\ea8c\";\n}\n\n.codicon-symbol-boolean:before {\n content: \"\\ea8f\";\n}\n\n.codicon-symbol-null:before {\n content: \"\\ea8f\";\n}\n\n.codicon-symbol-numeric:before {\n content: \"\\ea90\";\n}\n\n.codicon-symbol-number:before {\n content: \"\\ea90\";\n}\n\n.codicon-symbol-structure:before {\n content: \"\\ea91\";\n}\n\n.codicon-symbol-struct:before {\n content: \"\\ea91\";\n}\n\n.codicon-symbol-parameter:before {\n content: \"\\ea92\";\n}\n\n.codicon-symbol-type-parameter:before {\n content: \"\\ea92\";\n}\n\n.codicon-symbol-key:before {\n content: \"\\ea93\";\n}\n\n.codicon-symbol-text:before {\n content: \"\\ea93\";\n}\n\n.codicon-symbol-reference:before {\n content: \"\\ea94\";\n}\n\n.codicon-go-to-file:before {\n content: \"\\ea94\";\n}\n\n.codicon-symbol-enum:before {\n content: \"\\ea95\";\n}\n\n.codicon-symbol-value:before {\n content: \"\\ea95\";\n}\n\n.codicon-symbol-ruler:before {\n content: \"\\ea96\";\n}\n\n.codicon-symbol-unit:before {\n content: \"\\ea96\";\n}\n\n.codicon-activate-breakpoints:before {\n content: \"\\ea97\";\n}\n\n.codicon-archive:before {\n content: \"\\ea98\";\n}\n\n.codicon-arrow-both:before {\n content: \"\\ea99\";\n}\n\n.codicon-arrow-down:before {\n content: \"\\ea9a\";\n}\n\n.codicon-arrow-left:before {\n content: \"\\ea9b\";\n}\n\n.codicon-arrow-right:before {\n content: \"\\ea9c\";\n}\n\n.codicon-arrow-small-down:before {\n content: \"\\ea9d\";\n}\n\n.codicon-arrow-small-left:before {\n content: \"\\ea9e\";\n}\n\n.codicon-arrow-small-right:before {\n content: \"\\ea9f\";\n}\n\n.codicon-arrow-small-up:before {\n content: \"\\eaa0\";\n}\n\n.codicon-arrow-up:before {\n content: \"\\eaa1\";\n}\n\n.codicon-bell:before {\n content: \"\\eaa2\";\n}\n\n.codicon-bold:before {\n content: \"\\eaa3\";\n}\n\n.codicon-book:before {\n content: \"\\eaa4\";\n}\n\n.codicon-bookmark:before {\n content: \"\\eaa5\";\n}\n\n.codicon-debug-breakpoint-conditional-unverified:before {\n content: \"\\eaa6\";\n}\n\n.codicon-debug-breakpoint-conditional:before {\n content: \"\\eaa7\";\n}\n\n.codicon-debug-breakpoint-conditional-disabled:before {\n content: \"\\eaa7\";\n}\n\n.codicon-debug-breakpoint-data-unverified:before {\n content: \"\\eaa8\";\n}\n\n.codicon-debug-breakpoint-data:before {\n content: \"\\eaa9\";\n}\n\n.codicon-debug-breakpoint-data-disabled:before {\n content: \"\\eaa9\";\n}\n\n.codicon-debug-breakpoint-log-unverified:before {\n content: \"\\eaaa\";\n}\n\n.codicon-debug-breakpoint-log:before {\n content: \"\\eaab\";\n}\n\n.codicon-debug-breakpoint-log-disabled:before {\n content: \"\\eaab\";\n}\n\n.codicon-briefcase:before {\n content: \"\\eaac\";\n}\n\n.codicon-broadcast:before {\n content: \"\\eaad\";\n}\n\n.codicon-browser:before {\n content: \"\\eaae\";\n}\n\n.codicon-bug:before {\n content: \"\\eaaf\";\n}\n\n.codicon-calendar:before {\n content: \"\\eab0\";\n}\n\n.codicon-case-sensitive:before {\n content: \"\\eab1\";\n}\n\n.codicon-check:before {\n content: \"\\eab2\";\n}\n\n.codicon-checklist:before {\n content: \"\\eab3\";\n}\n\n.codicon-chevron-down:before {\n content: \"\\eab4\";\n}\n\n.codicon-chevron-left:before {\n content: \"\\eab5\";\n}\n\n.codicon-chevron-right:before {\n content: \"\\eab6\";\n}\n\n.codicon-chevron-up:before {\n content: \"\\eab7\";\n}\n\n.codicon-chrome-close:before {\n content: \"\\eab8\";\n}\n\n.codicon-chrome-maximize:before {\n content: \"\\eab9\";\n}\n\n.codicon-chrome-minimize:before {\n content: \"\\eaba\";\n}\n\n.codicon-chrome-restore:before {\n content: \"\\eabb\";\n}\n\n.codicon-circle-outline:before {\n content: \"\\eabc\";\n}\n\n.codicon-circle:before {\n content: \"\\eabc\";\n}\n\n.codicon-debug-breakpoint-unverified:before {\n content: \"\\eabc\";\n}\n\n.codicon-terminal-decoration-incomplete:before {\n content: \"\\eabc\";\n}\n\n.codicon-circle-slash:before {\n content: \"\\eabd\";\n}\n\n.codicon-circuit-board:before {\n content: \"\\eabe\";\n}\n\n.codicon-clear-all:before {\n content: \"\\eabf\";\n}\n\n.codicon-clippy:before {\n content: \"\\eac0\";\n}\n\n.codicon-close-all:before {\n content: \"\\eac1\";\n}\n\n.codicon-cloud-download:before {\n content: \"\\eac2\";\n}\n\n.codicon-cloud-upload:before {\n content: \"\\eac3\";\n}\n\n.codicon-code:before {\n content: \"\\eac4\";\n}\n\n.codicon-collapse-all:before {\n content: \"\\eac5\";\n}\n\n.codicon-color-mode:before {\n content: \"\\eac6\";\n}\n\n.codicon-comment-discussion:before {\n content: \"\\eac7\";\n}\n\n.codicon-credit-card:before {\n content: \"\\eac9\";\n}\n\n.codicon-dash:before {\n content: \"\\eacc\";\n}\n\n.codicon-dashboard:before {\n content: \"\\eacd\";\n}\n\n.codicon-database:before {\n content: \"\\eace\";\n}\n\n.codicon-debug-continue:before {\n content: \"\\eacf\";\n}\n\n.codicon-debug-disconnect:before {\n content: \"\\ead0\";\n}\n\n.codicon-debug-pause:before {\n content: \"\\ead1\";\n}\n\n.codicon-debug-restart:before {\n content: \"\\ead2\";\n}\n\n.codicon-debug-start:before {\n content: \"\\ead3\";\n}\n\n.codicon-debug-step-into:before {\n content: \"\\ead4\";\n}\n\n.codicon-debug-step-out:before {\n content: \"\\ead5\";\n}\n\n.codicon-debug-step-over:before {\n content: \"\\ead6\";\n}\n\n.codicon-debug-stop:before {\n content: \"\\ead7\";\n}\n\n.codicon-debug:before {\n content: \"\\ead8\";\n}\n\n.codicon-device-camera-video:before {\n content: \"\\ead9\";\n}\n\n.codicon-device-camera:before {\n content: \"\\eada\";\n}\n\n.codicon-device-mobile:before {\n content: \"\\eadb\";\n}\n\n.codicon-diff-added:before {\n content: \"\\eadc\";\n}\n\n.codicon-diff-ignored:before {\n content: \"\\eadd\";\n}\n\n.codicon-diff-modified:before {\n content: \"\\eade\";\n}\n\n.codicon-diff-removed:before {\n content: \"\\eadf\";\n}\n\n.codicon-diff-renamed:before {\n content: \"\\eae0\";\n}\n\n.codicon-diff:before {\n content: \"\\eae1\";\n}\n\n.codicon-diff-sidebyside:before {\n content: \"\\eae1\";\n}\n\n.codicon-discard:before {\n content: \"\\eae2\";\n}\n\n.codicon-editor-layout:before {\n content: \"\\eae3\";\n}\n\n.codicon-empty-window:before {\n content: \"\\eae4\";\n}\n\n.codicon-exclude:before {\n content: \"\\eae5\";\n}\n\n.codicon-extensions:before {\n content: \"\\eae6\";\n}\n\n.codicon-eye-closed:before {\n content: \"\\eae7\";\n}\n\n.codicon-file-binary:before {\n content: \"\\eae8\";\n}\n\n.codicon-file-code:before {\n content: \"\\eae9\";\n}\n\n.codicon-file-media:before {\n content: \"\\eaea\";\n}\n\n.codicon-file-pdf:before {\n content: \"\\eaeb\";\n}\n\n.codicon-file-submodule:before {\n content: \"\\eaec\";\n}\n\n.codicon-file-symlink-directory:before {\n content: \"\\eaed\";\n}\n\n.codicon-file-symlink-file:before {\n content: \"\\eaee\";\n}\n\n.codicon-file-zip:before {\n content: \"\\eaef\";\n}\n\n.codicon-files:before {\n content: \"\\eaf0\";\n}\n\n.codicon-filter:before {\n content: \"\\eaf1\";\n}\n\n.codicon-flame:before {\n content: \"\\eaf2\";\n}\n\n.codicon-fold-down:before {\n content: \"\\eaf3\";\n}\n\n.codicon-fold-up:before {\n content: \"\\eaf4\";\n}\n\n.codicon-fold:before {\n content: \"\\eaf5\";\n}\n\n.codicon-folder-active:before {\n content: \"\\eaf6\";\n}\n\n.codicon-folder-opened:before {\n content: \"\\eaf7\";\n}\n\n.codicon-gear:before {\n content: \"\\eaf8\";\n}\n\n.codicon-gift:before {\n content: \"\\eaf9\";\n}\n\n.codicon-gist-secret:before {\n content: \"\\eafa\";\n}\n\n.codicon-gist:before {\n content: \"\\eafb\";\n}\n\n.codicon-git-commit:before {\n content: \"\\eafc\";\n}\n\n.codicon-git-compare:before {\n content: \"\\eafd\";\n}\n\n.codicon-compare-changes:before {\n content: \"\\eafd\";\n}\n\n.codicon-git-merge:before {\n content: \"\\eafe\";\n}\n\n.codicon-github-action:before {\n content: \"\\eaff\";\n}\n\n.codicon-github-alt:before {\n content: \"\\eb00\";\n}\n\n.codicon-globe:before {\n content: \"\\eb01\";\n}\n\n.codicon-grabber:before {\n content: \"\\eb02\";\n}\n\n.codicon-graph:before {\n content: \"\\eb03\";\n}\n\n.codicon-gripper:before {\n content: \"\\eb04\";\n}\n\n.codicon-heart:before {\n content: \"\\eb05\";\n}\n\n.codicon-home:before {\n content: \"\\eb06\";\n}\n\n.codicon-horizontal-rule:before {\n content: \"\\eb07\";\n}\n\n.codicon-hubot:before {\n content: \"\\eb08\";\n}\n\n.codicon-inbox:before {\n content: \"\\eb09\";\n}\n\n.codicon-issue-reopened:before {\n content: \"\\eb0b\";\n}\n\n.codicon-issues:before {\n content: \"\\eb0c\";\n}\n\n.codicon-italic:before {\n content: \"\\eb0d\";\n}\n\n.codicon-jersey:before {\n content: \"\\eb0e\";\n}\n\n.codicon-json:before {\n content: \"\\eb0f\";\n}\n\n.codicon-kebab-vertical:before {\n content: \"\\eb10\";\n}\n\n.codicon-key:before {\n content: \"\\eb11\";\n}\n\n.codicon-law:before {\n content: \"\\eb12\";\n}\n\n.codicon-lightbulb-autofix:before {\n content: \"\\eb13\";\n}\n\n.codicon-link-external:before {\n content: \"\\eb14\";\n}\n\n.codicon-link:before {\n content: \"\\eb15\";\n}\n\n.codicon-list-ordered:before {\n content: \"\\eb16\";\n}\n\n.codicon-list-unordered:before {\n content: \"\\eb17\";\n}\n\n.codicon-live-share:before {\n content: \"\\eb18\";\n}\n\n.codicon-loading:before {\n content: \"\\eb19\";\n}\n\n.codicon-location:before {\n content: \"\\eb1a\";\n}\n\n.codicon-mail-read:before {\n content: \"\\eb1b\";\n}\n\n.codicon-mail:before {\n content: \"\\eb1c\";\n}\n\n.codicon-markdown:before {\n content: \"\\eb1d\";\n}\n\n.codicon-megaphone:before {\n content: \"\\eb1e\";\n}\n\n.codicon-mention:before {\n content: \"\\eb1f\";\n}\n\n.codicon-milestone:before {\n content: \"\\eb20\";\n}\n\n.codicon-git-pull-request-milestone:before {\n content: \"\\eb20\";\n}\n\n.codicon-mortar-board:before {\n content: \"\\eb21\";\n}\n\n.codicon-move:before {\n content: \"\\eb22\";\n}\n\n.codicon-multiple-windows:before {\n content: \"\\eb23\";\n}\n\n.codicon-mute:before {\n content: \"\\eb24\";\n}\n\n.codicon-no-newline:before {\n content: \"\\eb25\";\n}\n\n.codicon-note:before {\n content: \"\\eb26\";\n}\n\n.codicon-octoface:before {\n content: \"\\eb27\";\n}\n\n.codicon-open-preview:before {\n content: \"\\eb28\";\n}\n\n.codicon-package:before {\n content: \"\\eb29\";\n}\n\n.codicon-paintcan:before {\n content: \"\\eb2a\";\n}\n\n.codicon-pin:before {\n content: \"\\eb2b\";\n}\n\n.codicon-play:before {\n content: \"\\eb2c\";\n}\n\n.codicon-run:before {\n content: \"\\eb2c\";\n}\n\n.codicon-plug:before {\n content: \"\\eb2d\";\n}\n\n.codicon-preserve-case:before {\n content: \"\\eb2e\";\n}\n\n.codicon-preview:before {\n content: \"\\eb2f\";\n}\n\n.codicon-project:before {\n content: \"\\eb30\";\n}\n\n.codicon-pulse:before {\n content: \"\\eb31\";\n}\n\n.codicon-question:before {\n content: \"\\eb32\";\n}\n\n.codicon-quote:before {\n content: \"\\eb33\";\n}\n\n.codicon-radio-tower:before {\n content: \"\\eb34\";\n}\n\n.codicon-reactions:before {\n content: \"\\eb35\";\n}\n\n.codicon-references:before {\n content: \"\\eb36\";\n}\n\n.codicon-refresh:before {\n content: \"\\eb37\";\n}\n\n.codicon-regex:before {\n content: \"\\eb38\";\n}\n\n.codicon-remote-explorer:before {\n content: \"\\eb39\";\n}\n\n.codicon-remote:before {\n content: \"\\eb3a\";\n}\n\n.codicon-remove:before {\n content: \"\\eb3b\";\n}\n\n.codicon-replace-all:before {\n content: \"\\eb3c\";\n}\n\n.codicon-replace:before {\n content: \"\\eb3d\";\n}\n\n.codicon-repo-clone:before {\n content: \"\\eb3e\";\n}\n\n.codicon-repo-force-push:before {\n content: \"\\eb3f\";\n}\n\n.codicon-repo-pull:before {\n content: \"\\eb40\";\n}\n\n.codicon-repo-push:before {\n content: \"\\eb41\";\n}\n\n.codicon-report:before {\n content: \"\\eb42\";\n}\n\n.codicon-request-changes:before {\n content: \"\\eb43\";\n}\n\n.codicon-rocket:before {\n content: \"\\eb44\";\n}\n\n.codicon-root-folder-opened:before {\n content: \"\\eb45\";\n}\n\n.codicon-root-folder:before {\n content: \"\\eb46\";\n}\n\n.codicon-rss:before {\n content: \"\\eb47\";\n}\n\n.codicon-ruby:before {\n content: \"\\eb48\";\n}\n\n.codicon-save-all:before {\n content: \"\\eb49\";\n}\n\n.codicon-save-as:before {\n content: \"\\eb4a\";\n}\n\n.codicon-save:before {\n content: \"\\eb4b\";\n}\n\n.codicon-screen-full:before {\n content: \"\\eb4c\";\n}\n\n.codicon-screen-normal:before {\n content: \"\\eb4d\";\n}\n\n.codicon-search-stop:before {\n content: \"\\eb4e\";\n}\n\n.codicon-server:before {\n content: \"\\eb50\";\n}\n\n.codicon-settings-gear:before {\n content: \"\\eb51\";\n}\n\n.codicon-settings:before {\n content: \"\\eb52\";\n}\n\n.codicon-shield:before {\n content: \"\\eb53\";\n}\n\n.codicon-smiley:before {\n content: \"\\eb54\";\n}\n\n.codicon-sort-precedence:before {\n content: \"\\eb55\";\n}\n\n.codicon-split-horizontal:before {\n content: \"\\eb56\";\n}\n\n.codicon-split-vertical:before {\n content: \"\\eb57\";\n}\n\n.codicon-squirrel:before {\n content: \"\\eb58\";\n}\n\n.codicon-star-full:before {\n content: \"\\eb59\";\n}\n\n.codicon-star-half:before {\n content: \"\\eb5a\";\n}\n\n.codicon-symbol-class:before {\n content: \"\\eb5b\";\n}\n\n.codicon-symbol-color:before {\n content: \"\\eb5c\";\n}\n\n.codicon-symbol-constant:before {\n content: \"\\eb5d\";\n}\n\n.codicon-symbol-enum-member:before {\n content: \"\\eb5e\";\n}\n\n.codicon-symbol-field:before {\n content: \"\\eb5f\";\n}\n\n.codicon-symbol-file:before {\n content: \"\\eb60\";\n}\n\n.codicon-symbol-interface:before {\n content: \"\\eb61\";\n}\n\n.codicon-symbol-keyword:before {\n content: \"\\eb62\";\n}\n\n.codicon-symbol-misc:before {\n content: \"\\eb63\";\n}\n\n.codicon-symbol-operator:before {\n content: \"\\eb64\";\n}\n\n.codicon-symbol-property:before {\n content: \"\\eb65\";\n}\n\n.codicon-wrench:before {\n content: \"\\eb65\";\n}\n\n.codicon-wrench-subaction:before {\n content: \"\\eb65\";\n}\n\n.codicon-symbol-snippet:before {\n content: \"\\eb66\";\n}\n\n.codicon-tasklist:before {\n content: \"\\eb67\";\n}\n\n.codicon-telescope:before {\n content: \"\\eb68\";\n}\n\n.codicon-text-size:before {\n content: \"\\eb69\";\n}\n\n.codicon-three-bars:before {\n content: \"\\eb6a\";\n}\n\n.codicon-thumbsdown:before {\n content: \"\\eb6b\";\n}\n\n.codicon-thumbsup:before {\n content: \"\\eb6c\";\n}\n\n.codicon-tools:before {\n content: \"\\eb6d\";\n}\n\n.codicon-triangle-down:before {\n content: \"\\eb6e\";\n}\n\n.codicon-triangle-left:before {\n content: \"\\eb6f\";\n}\n\n.codicon-triangle-right:before {\n content: \"\\eb70\";\n}\n\n.codicon-triangle-up:before {\n content: \"\\eb71\";\n}\n\n.codicon-twitter:before {\n content: \"\\eb72\";\n}\n\n.codicon-unfold:before {\n content: \"\\eb73\";\n}\n\n.codicon-unlock:before {\n content: \"\\eb74\";\n}\n\n.codicon-unmute:before {\n content: \"\\eb75\";\n}\n\n.codicon-unverified:before {\n content: \"\\eb76\";\n}\n\n.codicon-verified:before {\n content: \"\\eb77\";\n}\n\n.codicon-versions:before {\n content: \"\\eb78\";\n}\n\n.codicon-vm-active:before {\n content: \"\\eb79\";\n}\n\n.codicon-vm-outline:before {\n content: \"\\eb7a\";\n}\n\n.codicon-vm-running:before {\n content: \"\\eb7b\";\n}\n\n.codicon-watch:before {\n content: \"\\eb7c\";\n}\n\n.codicon-whitespace:before {\n content: \"\\eb7d\";\n}\n\n.codicon-whole-word:before {\n content: \"\\eb7e\";\n}\n\n.codicon-window:before {\n content: \"\\eb7f\";\n}\n\n.codicon-word-wrap:before {\n content: \"\\eb80\";\n}\n\n.codicon-zoom-in:before {\n content: \"\\eb81\";\n}\n\n.codicon-zoom-out:before {\n content: \"\\eb82\";\n}\n\n.codicon-list-filter:before {\n content: \"\\eb83\";\n}\n\n.codicon-list-flat:before {\n content: \"\\eb84\";\n}\n\n.codicon-list-selection:before {\n content: \"\\eb85\";\n}\n\n.codicon-selection:before {\n content: \"\\eb85\";\n}\n\n.codicon-list-tree:before {\n content: \"\\eb86\";\n}\n\n.codicon-debug-breakpoint-function-unverified:before {\n content: \"\\eb87\";\n}\n\n.codicon-debug-breakpoint-function:before {\n content: \"\\eb88\";\n}\n\n.codicon-debug-breakpoint-function-disabled:before {\n content: \"\\eb88\";\n}\n\n.codicon-debug-stackframe-active:before {\n content: \"\\eb89\";\n}\n\n.codicon-circle-small-filled:before {\n content: \"\\eb8a\";\n}\n\n.codicon-debug-stackframe-dot:before {\n content: \"\\eb8a\";\n}\n\n.codicon-terminal-decoration-mark:before {\n content: \"\\eb8a\";\n}\n\n.codicon-debug-stackframe:before {\n content: \"\\eb8b\";\n}\n\n.codicon-debug-stackframe-focused:before {\n content: \"\\eb8b\";\n}\n\n.codicon-debug-breakpoint-unsupported:before {\n content: \"\\eb8c\";\n}\n\n.codicon-symbol-string:before {\n content: \"\\eb8d\";\n}\n\n.codicon-debug-reverse-continue:before {\n content: \"\\eb8e\";\n}\n\n.codicon-debug-step-back:before {\n content: \"\\eb8f\";\n}\n\n.codicon-debug-restart-frame:before {\n content: \"\\eb90\";\n}\n\n.codicon-debug-alt:before {\n content: \"\\eb91\";\n}\n\n.codicon-call-incoming:before {\n content: \"\\eb92\";\n}\n\n.codicon-call-outgoing:before {\n content: \"\\eb93\";\n}\n\n.codicon-menu:before {\n content: \"\\eb94\";\n}\n\n.codicon-expand-all:before {\n content: \"\\eb95\";\n}\n\n.codicon-feedback:before {\n content: \"\\eb96\";\n}\n\n.codicon-git-pull-request-reviewer:before {\n content: \"\\eb96\";\n}\n\n.codicon-group-by-ref-type:before {\n content: \"\\eb97\";\n}\n\n.codicon-ungroup-by-ref-type:before {\n content: \"\\eb98\";\n}\n\n.codicon-account:before {\n content: \"\\eb99\";\n}\n\n.codicon-git-pull-request-assignee:before {\n content: \"\\eb99\";\n}\n\n.codicon-bell-dot:before {\n content: \"\\eb9a\";\n}\n\n.codicon-debug-console:before {\n content: \"\\eb9b\";\n}\n\n.codicon-library:before {\n content: \"\\eb9c\";\n}\n\n.codicon-output:before {\n content: \"\\eb9d\";\n}\n\n.codicon-run-all:before {\n content: \"\\eb9e\";\n}\n\n.codicon-sync-ignored:before {\n content: \"\\eb9f\";\n}\n\n.codicon-pinned:before {\n content: \"\\eba0\";\n}\n\n.codicon-github-inverted:before {\n content: \"\\eba1\";\n}\n\n.codicon-server-process:before {\n content: \"\\eba2\";\n}\n\n.codicon-server-environment:before {\n content: \"\\eba3\";\n}\n\n.codicon-pass:before {\n content: \"\\eba4\";\n}\n\n.codicon-issue-closed:before {\n content: \"\\eba4\";\n}\n\n.codicon-stop-circle:before {\n content: \"\\eba5\";\n}\n\n.codicon-play-circle:before {\n content: \"\\eba6\";\n}\n\n.codicon-record:before {\n content: \"\\eba7\";\n}\n\n.codicon-debug-alt-small:before {\n content: \"\\eba8\";\n}\n\n.codicon-vm-connect:before {\n content: \"\\eba9\";\n}\n\n.codicon-cloud:before {\n content: \"\\ebaa\";\n}\n\n.codicon-merge:before {\n content: \"\\ebab\";\n}\n\n.codicon-export:before {\n content: \"\\ebac\";\n}\n\n.codicon-graph-left:before {\n content: \"\\ebad\";\n}\n\n.codicon-magnet:before {\n content: \"\\ebae\";\n}\n\n.codicon-notebook:before {\n content: \"\\ebaf\";\n}\n\n.codicon-redo:before {\n content: \"\\ebb0\";\n}\n\n.codicon-check-all:before {\n content: \"\\ebb1\";\n}\n\n.codicon-pinned-dirty:before {\n content: \"\\ebb2\";\n}\n\n.codicon-pass-filled:before {\n content: \"\\ebb3\";\n}\n\n.codicon-circle-large-filled:before {\n content: \"\\ebb4\";\n}\n\n.codicon-circle-large:before {\n content: \"\\ebb5\";\n}\n\n.codicon-circle-large-outline:before {\n content: \"\\ebb5\";\n}\n\n.codicon-combine:before {\n content: \"\\ebb6\";\n}\n\n.codicon-gather:before {\n content: \"\\ebb6\";\n}\n\n.codicon-table:before {\n content: \"\\ebb7\";\n}\n\n.codicon-variable-group:before {\n content: \"\\ebb8\";\n}\n\n.codicon-type-hierarchy:before {\n content: \"\\ebb9\";\n}\n\n.codicon-type-hierarchy-sub:before {\n content: \"\\ebba\";\n}\n\n.codicon-type-hierarchy-super:before {\n content: \"\\ebbb\";\n}\n\n.codicon-git-pull-request-create:before {\n content: \"\\ebbc\";\n}\n\n.codicon-run-above:before {\n content: \"\\ebbd\";\n}\n\n.codicon-run-below:before {\n content: \"\\ebbe\";\n}\n\n.codicon-notebook-template:before {\n content: \"\\ebbf\";\n}\n\n.codicon-debug-rerun:before {\n content: \"\\ebc0\";\n}\n\n.codicon-workspace-trusted:before {\n content: \"\\ebc1\";\n}\n\n.codicon-workspace-untrusted:before {\n content: \"\\ebc2\";\n}\n\n.codicon-workspace-unknown:before {\n content: \"\\ebc3\";\n}\n\n.codicon-terminal-cmd:before {\n content: \"\\ebc4\";\n}\n\n.codicon-terminal-debian:before {\n content: \"\\ebc5\";\n}\n\n.codicon-terminal-linux:before {\n content: \"\\ebc6\";\n}\n\n.codicon-terminal-powershell:before {\n content: \"\\ebc7\";\n}\n\n.codicon-terminal-tmux:before {\n content: \"\\ebc8\";\n}\n\n.codicon-terminal-ubuntu:before {\n content: \"\\ebc9\";\n}\n\n.codicon-terminal-bash:before {\n content: \"\\ebca\";\n}\n\n.codicon-arrow-swap:before {\n content: \"\\ebcb\";\n}\n\n.codicon-copy:before {\n content: \"\\ebcc\";\n}\n\n.codicon-person-add:before {\n content: \"\\ebcd\";\n}\n\n.codicon-filter-filled:before {\n content: \"\\ebce\";\n}\n\n.codicon-wand:before {\n content: \"\\ebcf\";\n}\n\n.codicon-debug-line-by-line:before {\n content: \"\\ebd0\";\n}\n\n.codicon-inspect:before {\n content: \"\\ebd1\";\n}\n\n.codicon-layers:before {\n content: \"\\ebd2\";\n}\n\n.codicon-layers-dot:before {\n content: \"\\ebd3\";\n}\n\n.codicon-layers-active:before {\n content: \"\\ebd4\";\n}\n\n.codicon-compass:before {\n content: \"\\ebd5\";\n}\n\n.codicon-compass-dot:before {\n content: \"\\ebd6\";\n}\n\n.codicon-compass-active:before {\n content: \"\\ebd7\";\n}\n\n.codicon-azure:before {\n content: \"\\ebd8\";\n}\n\n.codicon-issue-draft:before {\n content: \"\\ebd9\";\n}\n\n.codicon-git-pull-request-closed:before {\n content: \"\\ebda\";\n}\n\n.codicon-git-pull-request-draft:before {\n content: \"\\ebdb\";\n}\n\n.codicon-debug-all:before {\n content: \"\\ebdc\";\n}\n\n.codicon-debug-coverage:before {\n content: \"\\ebdd\";\n}\n\n.codicon-run-errors:before {\n content: \"\\ebde\";\n}\n\n.codicon-folder-library:before {\n content: \"\\ebdf\";\n}\n\n.codicon-debug-continue-small:before {\n content: \"\\ebe0\";\n}\n\n.codicon-beaker-stop:before {\n content: \"\\ebe1\";\n}\n\n.codicon-graph-line:before {\n content: \"\\ebe2\";\n}\n\n.codicon-graph-scatter:before {\n content: \"\\ebe3\";\n}\n\n.codicon-pie-chart:before {\n content: \"\\ebe4\";\n}\n\n.codicon-bracket:before {\n content: \"\\eb0f\";\n}\n\n.codicon-bracket-dot:before {\n content: \"\\ebe5\";\n}\n\n.codicon-bracket-error:before {\n content: \"\\ebe6\";\n}\n\n.codicon-lock-small:before {\n content: \"\\ebe7\";\n}\n\n.codicon-azure-devops:before {\n content: \"\\ebe8\";\n}\n\n.codicon-verified-filled:before {\n content: \"\\ebe9\";\n}\n\n.codicon-newline:before {\n content: \"\\ebea\";\n}\n\n.codicon-layout:before {\n content: \"\\ebeb\";\n}\n\n.codicon-layout-activitybar-left:before {\n content: \"\\ebec\";\n}\n\n.codicon-layout-activitybar-right:before {\n content: \"\\ebed\";\n}\n\n.codicon-layout-panel-left:before {\n content: \"\\ebee\";\n}\n\n.codicon-layout-panel-center:before {\n content: \"\\ebef\";\n}\n\n.codicon-layout-panel-justify:before {\n content: \"\\ebf0\";\n}\n\n.codicon-layout-panel-right:before {\n content: \"\\ebf1\";\n}\n\n.codicon-layout-panel:before {\n content: \"\\ebf2\";\n}\n\n.codicon-layout-sidebar-left:before {\n content: \"\\ebf3\";\n}\n\n.codicon-layout-sidebar-right:before {\n content: \"\\ebf4\";\n}\n\n.codicon-layout-statusbar:before {\n content: \"\\ebf5\";\n}\n\n.codicon-layout-menubar:before {\n content: \"\\ebf6\";\n}\n\n.codicon-layout-centered:before {\n content: \"\\ebf7\";\n}\n\n.codicon-target:before {\n content: \"\\ebf8\";\n}\n\n.codicon-indent:before {\n content: \"\\ebf9\";\n}\n\n.codicon-record-small:before {\n content: \"\\ebfa\";\n}\n\n.codicon-error-small:before {\n content: \"\\ebfb\";\n}\n\n.codicon-terminal-decoration-error:before {\n content: \"\\ebfb\";\n}\n\n.codicon-arrow-circle-down:before {\n content: \"\\ebfc\";\n}\n\n.codicon-arrow-circle-left:before {\n content: \"\\ebfd\";\n}\n\n.codicon-arrow-circle-right:before {\n content: \"\\ebfe\";\n}\n\n.codicon-arrow-circle-up:before {\n content: \"\\ebff\";\n}\n\n.codicon-layout-sidebar-right-off:before {\n content: \"\\ec00\";\n}\n\n.codicon-layout-panel-off:before {\n content: \"\\ec01\";\n}\n\n.codicon-layout-sidebar-left-off:before {\n content: \"\\ec02\";\n}\n\n.codicon-blank:before {\n content: \"\\ec03\";\n}\n\n.codicon-heart-filled:before {\n content: \"\\ec04\";\n}\n\n.codicon-map:before {\n content: \"\\ec05\";\n}\n\n.codicon-map-horizontal:before {\n content: \"\\ec05\";\n}\n\n.codicon-fold-horizontal:before {\n content: \"\\ec05\";\n}\n\n.codicon-map-filled:before {\n content: \"\\ec06\";\n}\n\n.codicon-map-horizontal-filled:before {\n content: \"\\ec06\";\n}\n\n.codicon-fold-horizontal-filled:before {\n content: \"\\ec06\";\n}\n\n.codicon-circle-small:before {\n content: \"\\ec07\";\n}\n\n.codicon-bell-slash:before {\n content: \"\\ec08\";\n}\n\n.codicon-bell-slash-dot:before {\n content: \"\\ec09\";\n}\n\n.codicon-comment-unresolved:before {\n content: \"\\ec0a\";\n}\n\n.codicon-git-pull-request-go-to-changes:before {\n content: \"\\ec0b\";\n}\n\n.codicon-git-pull-request-new-changes:before {\n content: \"\\ec0c\";\n}\n\n.codicon-search-fuzzy:before {\n content: \"\\ec0d\";\n}\n\n.codicon-comment-draft:before {\n content: \"\\ec0e\";\n}\n\n.codicon-send:before {\n content: \"\\ec0f\";\n}\n\n.codicon-sparkle:before {\n content: \"\\ec10\";\n}\n\n.codicon-insert:before {\n content: \"\\ec11\";\n}\n\n.codicon-mic:before {\n content: \"\\ec12\";\n}\n\n.codicon-thumbsdown-filled:before {\n content: \"\\ec13\";\n}\n\n.codicon-thumbsup-filled:before {\n content: \"\\ec14\";\n}\n\n.codicon-coffee:before {\n content: \"\\ec15\";\n}\n\n.codicon-snake:before {\n content: \"\\ec16\";\n}\n\n.codicon-game:before {\n content: \"\\ec17\";\n}\n\n.codicon-vr:before {\n content: \"\\ec18\";\n}\n\n.codicon-chip:before {\n content: \"\\ec19\";\n}\n\n.codicon-piano:before {\n content: \"\\ec1a\";\n}\n\n.codicon-music:before {\n content: \"\\ec1b\";\n}\n\n.codicon-mic-filled:before {\n content: \"\\ec1c\";\n}\n\n.codicon-repo-fetch:before {\n content: \"\\ec1d\";\n}\n\n.codicon-copilot:before {\n content: \"\\ec1e\";\n}\n\n.codicon-lightbulb-sparkle:before {\n content: \"\\ec1f\";\n}\n\n.codicon-robot:before {\n content: \"\\ec20\";\n}\n\n.codicon-sparkle-filled:before {\n content: \"\\ec21\";\n}\n\n.codicon-diff-single:before {\n content: \"\\ec22\";\n}\n\n.codicon-diff-multiple:before {\n content: \"\\ec23\";\n}\n\n.codicon-surround-with:before {\n content: \"\\ec24\";\n}\n\n.codicon-share:before {\n content: \"\\ec25\";\n}\n\n.codicon-git-stash:before {\n content: \"\\ec26\";\n}\n\n.codicon-git-stash-apply:before {\n content: \"\\ec27\";\n}\n\n.codicon-git-stash-pop:before {\n content: \"\\ec28\";\n}\n\n.codicon-vscode:before {\n content: \"\\ec29\";\n}\n\n.codicon-vscode-insiders:before {\n content: \"\\ec2a\";\n}\n\n.codicon-code-oss:before {\n content: \"\\ec2b\";\n}\n\n.codicon-run-coverage:before {\n content: \"\\ec2c\";\n}\n\n.codicon-run-all-coverage:before {\n content: \"\\ec2d\";\n}\n\n.codicon-coverage:before {\n content: \"\\ec2e\";\n}\n\n.codicon-github-project:before {\n content: \"\\ec2f\";\n}\n\n.codicon-map-vertical:before {\n content: \"\\ec30\";\n}\n\n.codicon-fold-vertical:before {\n content: \"\\ec30\";\n}\n\n.codicon-map-vertical-filled:before {\n content: \"\\ec31\";\n}\n\n.codicon-fold-vertical-filled:before {\n content: \"\\ec31\";\n}\n\n.codicon-go-to-search:before {\n content: \"\\ec32\";\n}\n\n.codicon-percentage:before {\n content: \"\\ec33\";\n}\n\n.codicon-sort-percentage:before {\n content: \"\\ec33\";\n}\n\n.codicon-attach:before {\n content: \"\\ec34\";\n}\n\n.codicon-go-to-editing-session:before {\n content: \"\\ec35\";\n}\n\n.codicon-edit-session:before {\n content: \"\\ec36\";\n}\n\n.codicon-code-review:before {\n content: \"\\ec37\";\n}\n\n.codicon-copilot-warning:before {\n content: \"\\ec38\";\n}\n\n.codicon-python:before {\n content: \"\\ec39\";\n}\n\n.codicon-git-fetch:before {\n content: \"\\f101\";\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 /* this rules overwrites the fixed font size from codicon */\n :host > i,\n :host > i::before {\n font-size: inherit !important;\n }\n}";
|
|
20833
|
+
const defaultStyleCss$y = "/* forward the rem function */\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1766079088153\"); /* IE9*/\n src: url(\"kolicons.eot?t=1766079088153#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1766079088153\") format(\"woff2\"), url(\"kolicons.woff?t=1766079088153\") format(\"woff\"), url(\"kolicons.ttf?t=1766079088153\") format(\"truetype\"), url(\"kolicons.svg?t=1766079088153#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\" !important;\n font-size: 16px;\n font-style: normal;\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-kolibri::before {\n content: \"\\ea10\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link::before {\n content: \"\\ea12\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea13\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea15\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea18\";\n}\n\n.kolicon-version::before {\n content: \"\\ea19\";\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}";
|
|
20834
20834
|
|
|
20835
20835
|
class KolIcon {
|
|
20836
20836
|
render() {
|
|
@@ -20840,7 +20840,7 @@ class KolIcon {
|
|
|
20840
20840
|
constructor(hostRef) {
|
|
20841
20841
|
registerInstance(this, hostRef);
|
|
20842
20842
|
this.state = {
|
|
20843
|
-
_icons: '
|
|
20843
|
+
_icons: 'kolicon-logo',
|
|
20844
20844
|
_label: '',
|
|
20845
20845
|
};
|
|
20846
20846
|
this.controller = new IconController(this);
|
|
@@ -21279,9 +21279,9 @@ class KolInputCheckbox {
|
|
|
21279
21279
|
_checked: false,
|
|
21280
21280
|
_hideMsg: false,
|
|
21281
21281
|
_icons: {
|
|
21282
|
-
checked: '
|
|
21283
|
-
indeterminate: '
|
|
21284
|
-
unchecked: '
|
|
21282
|
+
checked: 'kolicon-check',
|
|
21283
|
+
indeterminate: 'kolicon-minus',
|
|
21284
|
+
unchecked: 'kolicon-cross',
|
|
21285
21285
|
},
|
|
21286
21286
|
_id: `id-${nonce()}`,
|
|
21287
21287
|
_indeterminate: false,
|
|
@@ -22809,7 +22809,7 @@ class KolInputNumber {
|
|
|
22809
22809
|
var _a, _b;
|
|
22810
22810
|
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.stepUp();
|
|
22811
22811
|
(_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.focus();
|
|
22812
|
-
}, disabled: this._disabled || this._readOnly }, hAsync(KolIconFc, { icons: "
|
|
22812
|
+
}, disabled: this._disabled || this._readOnly }, hAsync(KolIconFc, { icons: "kolicon-plus", label: "" })));
|
|
22813
22813
|
}
|
|
22814
22814
|
getStepDownButton() {
|
|
22815
22815
|
if (this._disabled || this._readOnly) {
|
|
@@ -22819,10 +22819,10 @@ class KolInputNumber {
|
|
|
22819
22819
|
var _a, _b;
|
|
22820
22820
|
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.stepDown();
|
|
22821
22821
|
(_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.focus();
|
|
22822
|
-
}, disabled: this._disabled || this._readOnly }, hAsync(KolIconFc, { icons: "
|
|
22822
|
+
}, disabled: this._disabled || this._readOnly }, hAsync(KolIconFc, { icons: "kolicon-minus", label: "" })));
|
|
22823
22823
|
}
|
|
22824
22824
|
render() {
|
|
22825
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22825
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '5f0d128e212d3ede3397495ea8cc1ad6bb441f84' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'ad9daef992fd757c586bdcc59288a7363700174e', state: this.state, startAdornment: this.getStepDownButton(), endAdornment: this.getStepUpButton() }, hAsync(InputStateWrapper, Object.assign({ key: '7322750ad2dfeecfc094d30a8a2447dea10921fd' }, this.getInputProps())))));
|
|
22826
22826
|
}
|
|
22827
22827
|
constructor(hostRef) {
|
|
22828
22828
|
registerInstance(this, hostRef);
|
|
@@ -23066,10 +23066,10 @@ class KolInputPassword {
|
|
|
23066
23066
|
var _a;
|
|
23067
23067
|
this._passwordVisible = !this._passwordVisible;
|
|
23068
23068
|
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23069
|
-
}, icon:
|
|
23069
|
+
}, icon: `${this._passwordVisible ? 'kolicon-eye-closed' : 'kolicon-eye'}`, disabled: this._disabled }));
|
|
23070
23070
|
}
|
|
23071
23071
|
render() {
|
|
23072
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23072
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '662b4bc9868aa679d5322077cb8eed553b9a0f51' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'be51e0c5f87dd121c05f51ddbebf01300dde6c41', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(InputStateWrapper, Object.assign({ key: '40b62b665a645f2f931d8f0b8ee353675465bd38' }, this.getInputProps())))));
|
|
23073
23073
|
}
|
|
23074
23074
|
constructor(hostRef) {
|
|
23075
23075
|
registerInstance(this, hostRef);
|
|
@@ -23320,7 +23320,23 @@ class KolInputRadio {
|
|
|
23320
23320
|
}
|
|
23321
23321
|
async kolFocus() {
|
|
23322
23322
|
var _a;
|
|
23323
|
-
(_a = this.
|
|
23323
|
+
(_a = this.getFocusableInput()) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23324
|
+
}
|
|
23325
|
+
getFocusableInput() {
|
|
23326
|
+
const options = this.state._options;
|
|
23327
|
+
const isComponentDisabled = Boolean(this.state._disabled);
|
|
23328
|
+
const selectedIndex = options.findIndex((option) => option.value === this.state._value && !isComponentDisabled && !option.disabled);
|
|
23329
|
+
if (selectedIndex !== -1) {
|
|
23330
|
+
const input = this.inputRefs.get(selectedIndex);
|
|
23331
|
+
if (input) {
|
|
23332
|
+
return input;
|
|
23333
|
+
}
|
|
23334
|
+
}
|
|
23335
|
+
const firstEnabledIndex = options.findIndex((option) => !isComponentDisabled && !option.disabled);
|
|
23336
|
+
if (firstEnabledIndex !== -1) {
|
|
23337
|
+
return this.inputRefs.get(firstEnabledIndex);
|
|
23338
|
+
}
|
|
23339
|
+
return undefined;
|
|
23324
23340
|
}
|
|
23325
23341
|
getFormFieldProps() {
|
|
23326
23342
|
return {
|
|
@@ -23341,7 +23357,7 @@ class KolInputRadio {
|
|
|
23341
23357
|
};
|
|
23342
23358
|
}
|
|
23343
23359
|
render() {
|
|
23344
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23360
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '9e2b42643b7eec87fcef68c4e8bf471e67738689' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
|
|
23345
23361
|
}
|
|
23346
23362
|
calculateDisabled(option) {
|
|
23347
23363
|
return Boolean(this.state._disabled) || Boolean(option.disabled);
|
|
@@ -23362,7 +23378,12 @@ class KolInputRadio {
|
|
|
23362
23378
|
getInputProps(option, id, index, selected) {
|
|
23363
23379
|
return {
|
|
23364
23380
|
state: this.state,
|
|
23365
|
-
inputProps: Object.assign(Object.assign({ id: id, ref:
|
|
23381
|
+
inputProps: Object.assign(Object.assign({ id: id, ref: (ref) => {
|
|
23382
|
+
this.catchInputRef(index)(ref);
|
|
23383
|
+
if (selected) {
|
|
23384
|
+
this.catchRef(ref);
|
|
23385
|
+
}
|
|
23386
|
+
}, 'aria-label': this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined, type: 'radio', name: this.state._name || this.state._id, value: `-${index}`, checked: selected, disabled: this.calculateDisabled(option) }, this.controller.onFacade), { onChange: this.onChange, onClick: undefined, onInput: this.onInput, onKeyDown: this.onKeyDown.bind(this), onFocus: (event) => {
|
|
23366
23387
|
this.controller.onFacade.onFocus(event);
|
|
23367
23388
|
this.inputHasFocus = true;
|
|
23368
23389
|
}, onBlur: (event) => {
|
|
@@ -23378,9 +23399,18 @@ class KolInputRadio {
|
|
|
23378
23399
|
}
|
|
23379
23400
|
constructor(hostRef) {
|
|
23380
23401
|
registerInstance(this, hostRef);
|
|
23402
|
+
this.inputRefs = new Map();
|
|
23381
23403
|
this.catchRef = (ref) => {
|
|
23382
23404
|
this.inputRef = ref;
|
|
23383
23405
|
};
|
|
23406
|
+
this.catchInputRef = (index) => (ref) => {
|
|
23407
|
+
if (ref) {
|
|
23408
|
+
this.inputRefs.set(index, ref);
|
|
23409
|
+
}
|
|
23410
|
+
else {
|
|
23411
|
+
this.inputRefs.delete(index);
|
|
23412
|
+
}
|
|
23413
|
+
};
|
|
23384
23414
|
this._disabled = false;
|
|
23385
23415
|
this._hideMsg = false;
|
|
23386
23416
|
this._hideLabel = false;
|
|
@@ -24376,7 +24406,7 @@ class KolLinkWc {
|
|
|
24376
24406
|
'kol-link--inline': this.state._inline === true,
|
|
24377
24407
|
'kol-link--standalone': this.state._inline === false,
|
|
24378
24408
|
[this.state._customClass]: this.state._buttonVariant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
24379
|
-
}) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: '5c7d16010d9be97330357727cd077a5938d34e7f', 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: 'b01d5620e864c978c8e87b5601b8736334af2959', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '
|
|
24409
|
+
}) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: '5c7d16010d9be97330357727cd077a5938d34e7f', 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: 'b01d5620e864c978c8e87b5601b8736334af2959', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '7234195fde7663f54e8414f81fa64003bdd53eed', 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: '36018a0a2f0430efcb0a3a446535a1702dadf53e', "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 }))));
|
|
24380
24410
|
}
|
|
24381
24411
|
validateAccessKey(value) {
|
|
24382
24412
|
validateAccessKey(this, value);
|
|
@@ -24668,7 +24698,7 @@ class KolNav {
|
|
|
24668
24698
|
'kol-nav__list--nested': props.deep > 0,
|
|
24669
24699
|
'kol-nav__list--vertical': props.deep !== 0,
|
|
24670
24700
|
}), id: props.deep > 0 ? props.id : undefined }, props.links.map((link, index) => {
|
|
24671
|
-
return this.li(props.collapsible, props.
|
|
24701
|
+
return this.li(props.collapsible, props.deep, index, link, props.id);
|
|
24672
24702
|
})));
|
|
24673
24703
|
};
|
|
24674
24704
|
this._collapsible = true;
|
|
@@ -24691,19 +24721,40 @@ class KolNav {
|
|
|
24691
24721
|
collapseChildren(children) {
|
|
24692
24722
|
this.state = Object.assign(Object.assign({}, this.state), { _expandedChildren: this.state._expandedChildren.filter((searchChildren) => searchChildren !== children) });
|
|
24693
24723
|
}
|
|
24694
|
-
|
|
24695
|
-
|
|
24696
|
-
|
|
24697
|
-
|
|
24698
|
-
? ((_a = entry._icons) === null || _a === void 0 ? void 0 : _a.toString()) || (this.state._hideLabel ? 'codicon codicon-symbol-method' : undefined)
|
|
24699
|
-
: undefined,
|
|
24700
|
-
right: collapsible && hasChildren ? 'codicon codicon-' + (expanded ? 'remove' : 'add') : undefined,
|
|
24724
|
+
buildIconObject(collapsible, expanded, leftIcon) {
|
|
24725
|
+
const icon = {
|
|
24726
|
+
left: '',
|
|
24727
|
+
right: '',
|
|
24701
24728
|
};
|
|
24729
|
+
if (this.state._hasIconsWhenExpanded && leftIcon) {
|
|
24730
|
+
icon.left = leftIcon;
|
|
24731
|
+
}
|
|
24732
|
+
if (this.state._hideLabel) {
|
|
24733
|
+
if (leftIcon) {
|
|
24734
|
+
icon.left = leftIcon;
|
|
24735
|
+
}
|
|
24736
|
+
else {
|
|
24737
|
+
icon.left = 'kolicon-link';
|
|
24738
|
+
}
|
|
24739
|
+
}
|
|
24740
|
+
if (collapsible) {
|
|
24741
|
+
if (expanded) {
|
|
24742
|
+
icon.right = 'kolicon-minus';
|
|
24743
|
+
}
|
|
24744
|
+
else {
|
|
24745
|
+
icon.right = 'kolicon-plus';
|
|
24746
|
+
}
|
|
24747
|
+
}
|
|
24748
|
+
return icon;
|
|
24749
|
+
}
|
|
24750
|
+
entry(collapsible, hasChildren, entry, expanded, ariaID) {
|
|
24751
|
+
var _a;
|
|
24752
|
+
const icons = this.buildIconObject(collapsible && hasChildren, expanded, (_a = entry._icons) === null || _a === void 0 ? void 0 : _a.toString());
|
|
24702
24753
|
return (hAsync("div", { class: "kol-nav__entry-wrapper" }, entryIsLink(entry) ? (hAsync(KolLinkWcTag, Object.assign({ class: clsx('kol-nav__entry kol-nav__entry--link', {
|
|
24703
24754
|
'kol-nav__entry--collapsible': collapsible,
|
|
24704
|
-
}) }, entry, { _hideLabel:
|
|
24755
|
+
}) }, entry, { _hideLabel: this.state._hideLabel, _icons: icons, _ariaControls: collapsible && hasChildren && expanded ? ariaID : undefined, _ariaExpanded: collapsible && hasChildren ? expanded : undefined }))) : (hAsync(KolButtonWcTag, { class: clsx('kol-nav__entry kol-nav__entry--button', {
|
|
24705
24756
|
'kol-nav__entry--collapsible': collapsible,
|
|
24706
|
-
}), _label: entry._label, _hideLabel:
|
|
24757
|
+
}), _label: entry._label, _hideLabel: this.state._hideLabel, _icons: icons, _ariaControls: collapsible && hasChildren && expanded ? ariaID : undefined, _ariaExpanded: collapsible && hasChildren ? expanded : undefined, _on: {
|
|
24707
24758
|
onClick: (event, value) => {
|
|
24708
24759
|
if (entryIsButton(entry) && typeof entry._on.onClick === 'function') {
|
|
24709
24760
|
entry._on.onClick(event, value);
|
|
@@ -24712,7 +24763,7 @@ class KolNav {
|
|
|
24712
24763
|
},
|
|
24713
24764
|
} }))));
|
|
24714
24765
|
}
|
|
24715
|
-
li(collapsible,
|
|
24766
|
+
li(collapsible, deep, index, link, ariaIDparent) {
|
|
24716
24767
|
const active = !!link._active;
|
|
24717
24768
|
const hasChildren = Array.isArray(link._children) && link._children.length > 0;
|
|
24718
24769
|
const expanded = Boolean(link._children && this.state._expandedChildren.includes(link._children));
|
|
@@ -24721,7 +24772,7 @@ class KolNav {
|
|
|
24721
24772
|
'kol-nav__list-item--active': active,
|
|
24722
24773
|
'kol-nav__list-item--expanded': expanded,
|
|
24723
24774
|
'kol-nav__list-item--has-children': hasChildren,
|
|
24724
|
-
}), key: index }, this.entry(collapsible,
|
|
24775
|
+
}), key: index }, this.entry(collapsible, hasChildren, link, expanded, ariaID), expanded && hAsync(this.linkList, { collapsible: collapsible, deep: deep + 1, links: link._children || [], id: ariaID })));
|
|
24725
24776
|
}
|
|
24726
24777
|
initializeExpandedChildren() {
|
|
24727
24778
|
this.state = Object.assign(Object.assign({}, this.state), { _expandedChildren: [] });
|
|
@@ -24746,12 +24797,11 @@ class KolNav {
|
|
|
24746
24797
|
}
|
|
24747
24798
|
render() {
|
|
24748
24799
|
const collapsible = this.state._collapsible === true;
|
|
24749
|
-
|
|
24750
|
-
return (hAsync("div", { key: '39f07d530b46e738987032cebed99c3c90039376', class: clsx('kol-nav', `kol-nav--vertical`, {
|
|
24800
|
+
return (hAsync("div", { key: '3094796612244694281480b72ad8169c208158b5', class: clsx('kol-nav', {
|
|
24751
24801
|
'kol-nav--is-compact': this.state._hideLabel,
|
|
24752
|
-
}) }, hAsync("nav", { key: '
|
|
24802
|
+
}) }, hAsync("nav", { key: '98435d30dc41d04a8ab81c2a25342700546b669f', "aria-label": this.state._label, class: "kol-nav__navigation", id: this.navId }, hAsync(this.linkList, { key: '52e6239d306f90b563b11987b04eefd2cd284145', collapsible: collapsible, deep: 0, links: this.state._links, id: this.listId })), this.state._hasCompactButton && (hAsync("div", { key: '9a604d1b374dd180ff4ab2c372d0b44c2057f04d', class: "kol-nav__compact" }, hAsync(KolButtonWcTag, { key: '6663501a9b18e34eb7d53aec2cc231a656ac5c10', class: "kol-nav__toggle-button", _ariaControls: this.navId, _ariaExpanded: !this.state._hideLabel, _icons: this.state._hideLabel ? 'kolicon-chevron-right' : 'kolicon-chevron-left', _hideLabel: true, _label: translate(this.state._hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
|
|
24753
24803
|
onClick: () => {
|
|
24754
|
-
this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel
|
|
24804
|
+
this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: !this.state._hideLabel });
|
|
24755
24805
|
},
|
|
24756
24806
|
}, _tooltipAlign: "right" })))));
|
|
24757
24807
|
}
|
|
@@ -24823,7 +24873,7 @@ class KolNav {
|
|
|
24823
24873
|
}; }
|
|
24824
24874
|
}
|
|
24825
24875
|
|
|
24826
|
-
const defaultStyleCss$h = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-pagination {\n display: grid;\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n .kol-pagination__navigation-list {\n display: inline-flex;\n margin: 0;\n padding: 0;\n gap: 0.5em;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n }\n .kol-pagination__separator:before {\n content: \"•••\";\n }\n}";
|
|
24876
|
+
const defaultStyleCss$h = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-select {\n background-color: transparent;\n width: 100%;\n }\n .kol-select:not(:disabled) {\n cursor: pointer;\n }\n .kol-select:not([multiple], [size]) {\n height: 2.75em;\n }\n .kol-select:focus {\n outline: none;\n }\n .kol-select__option:checked::before {\n content: \"✓ \";\n }\n .kol-select {\n /* needed hack for vertical alignment */\n }\n .kol-select[multiple] option {\n padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n }\n .kol-pagination {\n display: flex;\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n }\n @media (max-width: 1024px) {\n .kol-pagination {\n flex-direction: column;\n }\n }\n .kol-pagination__navigation-list {\n display: inline-flex;\n margin: 0;\n padding: 0;\n gap: 0.5em;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n }\n .kol-pagination__separator:before {\n content: \"•••\";\n }\n .kol-pagination__page-size-select .kol-form-field-select {\n align-items: center;\n grid-template-columns: 1fr max-content;\n }\n}";
|
|
24827
24877
|
|
|
24828
24878
|
class KolPagination {
|
|
24829
24879
|
constructor(hostRef) {
|
|
@@ -24864,16 +24914,16 @@ class KolPagination {
|
|
|
24864
24914
|
}
|
|
24865
24915
|
|
|
24866
24916
|
const leftDoubleArrowIcon = {
|
|
24867
|
-
left: '
|
|
24917
|
+
left: 'kolicon-chevron-left',
|
|
24868
24918
|
};
|
|
24869
24919
|
const leftSingleArrow = {
|
|
24870
|
-
left: '
|
|
24920
|
+
left: 'kolicon-chevron-double-left',
|
|
24871
24921
|
};
|
|
24872
24922
|
const rightSingleArrowIcon = {
|
|
24873
|
-
right: '
|
|
24923
|
+
right: 'kolicon-chevron-right',
|
|
24874
24924
|
};
|
|
24875
24925
|
const rightDoubleArrowIcon = {
|
|
24876
|
-
right: '
|
|
24926
|
+
right: 'kolicon-chevron-double-right',
|
|
24877
24927
|
};
|
|
24878
24928
|
function getUserLanguage() {
|
|
24879
24929
|
const userLanguage = navigator.language || 'de-DE';
|
|
@@ -25016,7 +25066,7 @@ class KolPaginationWc {
|
|
|
25016
25066
|
for (const value of nextValue) {
|
|
25017
25067
|
if (typeof value === 'number') {
|
|
25018
25068
|
options.push({
|
|
25019
|
-
label:
|
|
25069
|
+
label: `${value}`,
|
|
25020
25070
|
value: value,
|
|
25021
25071
|
});
|
|
25022
25072
|
}
|
|
@@ -25026,6 +25076,12 @@ class KolPaginationWc {
|
|
|
25026
25076
|
this.beforePageSize(options, nextState);
|
|
25027
25077
|
};
|
|
25028
25078
|
}
|
|
25079
|
+
getPageStart() {
|
|
25080
|
+
return (this.state._page - 1) * this.state._pageSize + 1 + '';
|
|
25081
|
+
}
|
|
25082
|
+
getPageEnd() {
|
|
25083
|
+
return this.state._page * this.state._pageSize + '';
|
|
25084
|
+
}
|
|
25029
25085
|
render() {
|
|
25030
25086
|
var _a;
|
|
25031
25087
|
let ellipsis = false;
|
|
@@ -25052,9 +25108,15 @@ class KolPaginationWc {
|
|
|
25052
25108
|
return null;
|
|
25053
25109
|
}
|
|
25054
25110
|
});
|
|
25055
|
-
return (hAsync(Host, { class: "kol-pagination" }, hAsync("
|
|
25111
|
+
return (hAsync(Host, { class: "kol-pagination" }, hAsync("span", { role: "status", "aria-live": "polite" }, translate('kol-table-visible-range', {
|
|
25112
|
+
placeholders: {
|
|
25113
|
+
start: this.getPageStart(),
|
|
25114
|
+
end: this.getPageEnd(),
|
|
25115
|
+
total: this.state._max.toString(),
|
|
25116
|
+
},
|
|
25117
|
+
})), hAsync("nav", { class: "kol-pagination__navigation", "aria-label": this.state._label }, hAsync("ul", { class: "kol-pagination__navigation-list" }, this.state._hasButtons.first && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--first", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftDoubleArrowIcon, _hideLabel: true, _label: this.translatePageFirst, _on: this.onGoToFirst, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.previous && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--previous", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftSingleArrow, _hideLabel: true, _label: this.translatePageBack, _on: this.onGoBackward, _tooltipAlign: this.state._tooltipAlign }))), pageButtons, this.state._hasButtons.next && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--next", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightSingleArrowIcon, _hideLabel: true, _label: this.translatePageNext, _on: this.onGoForward, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.last && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--last", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightDoubleArrowIcon, _hideLabel: true, _label: this.translatePageLast, _on: this.onGoToEnd, _tooltipAlign: this.state._tooltipAlign }))))), ((_a = this.state._pageSizeOptions) === null || _a === void 0 ? void 0 : _a.length) > 0 && (hAsync("div", { class: "page-size" }, hAsync(KolSelectWcTag, { class: "kol-pagination__page-size-select", _id: `pagination-size-${this.nonce}`, _label: this.translateEntriesPerSite, _options: this.state._pageSizeOptions, _on: {
|
|
25056
25118
|
onChange: this.onChangePageSize,
|
|
25057
|
-
}, _value: this.state._pageSize }))));
|
|
25119
|
+
}, _value: this.state._pageSize })))));
|
|
25058
25120
|
}
|
|
25059
25121
|
getUnselectedPageButton(page) {
|
|
25060
25122
|
const pageText = NUMBER_FORMATTER.format(page);
|
|
@@ -27233,11 +27295,11 @@ class KolPopoverButton {
|
|
|
27233
27295
|
(_c = this.cleanupAutoPositioning) === null || _c === void 0 ? void 0 : _c.call(this);
|
|
27234
27296
|
}
|
|
27235
27297
|
render() {
|
|
27236
|
-
return (hAsync("div", { key: '
|
|
27298
|
+
return (hAsync("div", { key: '874282cd81b305d92a155d8c848a5004e128db80', class: clsx('kol-popover-button', {
|
|
27237
27299
|
'kol-popover-button--open': this.popoverOpen,
|
|
27238
27300
|
'kol-popover-button--inline': this.state._inline === true,
|
|
27239
27301
|
'kol-popover-button--standalone': this.state._inline === false,
|
|
27240
|
-
}) }, hAsync(KolButtonWcTag, { key: '
|
|
27302
|
+
}) }, hAsync(KolButtonWcTag, { key: 'ae45f6997d3dac685229bfec19111fe3f63df687', _accessKey: this._accessKey, "_aria-controls": "popover", _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _ariaHasPopup: 'dialog', _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _role: this._role, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _buttonVariant: this._variant, "data-testid": "popover-button", class: "kol-popover-button__button", ref: (element) => (this.refButton = element), onClick: this.handleButtonClick.bind(this) }, hAsync("slot", { key: '5fdf299465dc56f94bfb739a6d66b03353687e1f', name: "expert", slot: "expert" })), hAsync("div", { key: 'f3e492c4f3a403b36b8e073599377c56823d0d7b', ref: (element) => (this.refPopover = element), "data-testid": "popover-content", popover: "auto", id: "popover", class: "kol-popover-button__popover" }, hAsync("slot", { key: '26ce33d67f396c08acdbc3782e4395344b37da8f' }))));
|
|
27241
27303
|
}
|
|
27242
27304
|
validateInline(value) {
|
|
27243
27305
|
validateInline(this, value, {
|
|
@@ -27464,6 +27526,71 @@ class KolQuote {
|
|
|
27464
27526
|
}; }
|
|
27465
27527
|
}
|
|
27466
27528
|
|
|
27529
|
+
const defaultStyleCss$d = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-select {\n background-color: transparent;\n width: 100%;\n }\n .kol-select:not(:disabled) {\n cursor: pointer;\n }\n .kol-select:not([multiple], [size]) {\n height: 2.75em;\n }\n .kol-select:focus {\n outline: none;\n }\n .kol-select__option:checked::before {\n content: \"✓ \";\n }\n .kol-select {\n /* needed hack for vertical alignment */\n }\n .kol-select[multiple] option {\n padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n }\n}";
|
|
27530
|
+
|
|
27531
|
+
class KolSelect {
|
|
27532
|
+
constructor(hostRef) {
|
|
27533
|
+
registerInstance(this, hostRef);
|
|
27534
|
+
this.catchRef = (ref) => {
|
|
27535
|
+
this.selectWcRef = ref;
|
|
27536
|
+
};
|
|
27537
|
+
this._disabled = false;
|
|
27538
|
+
this._hideMsg = false;
|
|
27539
|
+
this._hideLabel = false;
|
|
27540
|
+
this._hint = '';
|
|
27541
|
+
this._multiple = false;
|
|
27542
|
+
this._required = false;
|
|
27543
|
+
this._tooltipAlign = 'top';
|
|
27544
|
+
this._touched = false;
|
|
27545
|
+
}
|
|
27546
|
+
async getValue() {
|
|
27547
|
+
var _a;
|
|
27548
|
+
return (_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.getValue();
|
|
27549
|
+
}
|
|
27550
|
+
async kolFocus() {
|
|
27551
|
+
var _a;
|
|
27552
|
+
await ((_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
27553
|
+
}
|
|
27554
|
+
render() {
|
|
27555
|
+
return (hAsync(Host, { key: '0d395dee2532c2a584f3bea2296e2c683e7e5acc', class: "kol-select" }, hAsync(KolSelectWcTag, { key: '86d7ddcc1bc8df6adc4e56266182fb6162015076', ref: this.catchRef, _accessKey: this._accessKey, _disabled: this._disabled, _hideLabel: this._hideLabel, _hint: this._hint, _icons: this._icons, _id: this._id, _label: this._label, _msg: this._msg, _multiple: this._multiple, _name: this._name, _on: this._on, _options: this._options, _required: this._required, _rows: this._rows, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _touched: this._touched, _value: this._value }, hAsync("slot", { key: 'f33ffa61e68105f707d945c9fc75f462e3f7d57d', name: "expert", slot: "expert" }))));
|
|
27556
|
+
}
|
|
27557
|
+
static get style() { return {
|
|
27558
|
+
default: defaultStyleCss$d
|
|
27559
|
+
}; }
|
|
27560
|
+
static get cmpMeta() { return {
|
|
27561
|
+
"$flags$": 297,
|
|
27562
|
+
"$tagName$": "kol-select",
|
|
27563
|
+
"$members$": {
|
|
27564
|
+
"_accessKey": [1, "_access-key"],
|
|
27565
|
+
"_disabled": [4],
|
|
27566
|
+
"_hideMsg": [4, "_hide-msg"],
|
|
27567
|
+
"_hideLabel": [4, "_hide-label"],
|
|
27568
|
+
"_hint": [1],
|
|
27569
|
+
"_icons": [1],
|
|
27570
|
+
"_id": [1],
|
|
27571
|
+
"_label": [1],
|
|
27572
|
+
"_msg": [1],
|
|
27573
|
+
"_multiple": [4],
|
|
27574
|
+
"_name": [1],
|
|
27575
|
+
"_on": [16],
|
|
27576
|
+
"_options": [1],
|
|
27577
|
+
"_required": [4],
|
|
27578
|
+
"_shortKey": [1, "_short-key"],
|
|
27579
|
+
"_rows": [2],
|
|
27580
|
+
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
27581
|
+
"_tabIndex": [2, "_tab-index"],
|
|
27582
|
+
"_tooltipAlign": [1, "_tooltip-align"],
|
|
27583
|
+
"_touched": [1540],
|
|
27584
|
+
"_value": [1544],
|
|
27585
|
+
"getValue": [64],
|
|
27586
|
+
"kolFocus": [64]
|
|
27587
|
+
},
|
|
27588
|
+
"$listeners$": undefined,
|
|
27589
|
+
"$lazyBundleId$": "-",
|
|
27590
|
+
"$attrsToReflect$": [["_touched", "_touched"], ["_value", "_value"]]
|
|
27591
|
+
}; }
|
|
27592
|
+
}
|
|
27593
|
+
|
|
27467
27594
|
const NativeOptionFc = (_a) => {
|
|
27468
27595
|
var { baseClassName = 'kol-select', class: classNames, index, selectedValue, selected, value, label, disabled } = _a, other = __rest(_a, ["baseClassName", "class", "index", "selectedValue", "selected", "value", "label", "disabled"]);
|
|
27469
27596
|
if (selectedValue === undefined) {
|
|
@@ -27650,9 +27777,7 @@ class SelectController extends InputIconController {
|
|
|
27650
27777
|
}
|
|
27651
27778
|
}
|
|
27652
27779
|
|
|
27653
|
-
|
|
27654
|
-
|
|
27655
|
-
class KolSelect {
|
|
27780
|
+
class KolSelectWc {
|
|
27656
27781
|
async getValue() {
|
|
27657
27782
|
if (this._multiple) {
|
|
27658
27783
|
return this.state._value;
|
|
@@ -27686,11 +27811,11 @@ class KolSelect {
|
|
|
27686
27811
|
} });
|
|
27687
27812
|
}
|
|
27688
27813
|
render() {
|
|
27689
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
27814
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '149de6c2a2a155d9869e4d09118d7b511058b606' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '84abd564f808296ad32ea68165780862e7808fd0', state: this.state }, hAsync("form", { key: '3d143d2d857793ef6e744def1eada9346983f4d5', onSubmit: (event) => {
|
|
27690
27815
|
event.preventDefault();
|
|
27691
27816
|
propagateSubmitEventToForm({
|
|
27692
27817
|
form: this.host});
|
|
27693
|
-
} }, hAsync("input", { key: '
|
|
27818
|
+
} }, hAsync("input", { key: '4f654dceadd96f6074e22a56aefec34944ab2faa', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: 'e576920b9756ed1f8fce70c13c070749d463e839' }, this.getSelectProps()))))));
|
|
27694
27819
|
}
|
|
27695
27820
|
constructor(hostRef) {
|
|
27696
27821
|
registerInstance(this, hostRef);
|
|
@@ -27832,12 +27957,9 @@ class KolSelect {
|
|
|
27832
27957
|
"_touched": ["validateTouched"],
|
|
27833
27958
|
"_value": ["validateValue"]
|
|
27834
27959
|
}; }
|
|
27835
|
-
static get style() { return {
|
|
27836
|
-
default: defaultStyleCss$d
|
|
27837
|
-
}; }
|
|
27838
27960
|
static get cmpMeta() { return {
|
|
27839
|
-
"$flags$":
|
|
27840
|
-
"$tagName$": "kol-select",
|
|
27961
|
+
"$flags$": 256,
|
|
27962
|
+
"$tagName$": "kol-select-wc",
|
|
27841
27963
|
"$members$": {
|
|
27842
27964
|
"_accessKey": [1, "_access-key"],
|
|
27843
27965
|
"_disabled": [4],
|
|
@@ -27906,8 +28028,8 @@ class SingleSelectController extends InputIconController {
|
|
|
27906
28028
|
validatePlaceholder(value) {
|
|
27907
28029
|
validatePlaceholder(this.component, value);
|
|
27908
28030
|
}
|
|
27909
|
-
|
|
27910
|
-
watchBoolean(this.component, '
|
|
28031
|
+
validateHasClearButton(value) {
|
|
28032
|
+
watchBoolean(this.component, '_hasClearButton', value);
|
|
27911
28033
|
}
|
|
27912
28034
|
validateRows(value) {
|
|
27913
28035
|
watchNumber(this.component, '_rows', value);
|
|
@@ -27918,7 +28040,7 @@ class SingleSelectController extends InputIconController {
|
|
|
27918
28040
|
this.validateRequired(this.component._required);
|
|
27919
28041
|
this.validateValue(this.component._value);
|
|
27920
28042
|
this.validatePlaceholder(this.component._placeholder);
|
|
27921
|
-
this.
|
|
28043
|
+
this.validateHasClearButton(this.component._hasClearButton);
|
|
27922
28044
|
this.validateRows(this.component._rows);
|
|
27923
28045
|
}
|
|
27924
28046
|
}
|
|
@@ -28095,7 +28217,7 @@ class KolSingleSelect {
|
|
|
28095
28217
|
render() {
|
|
28096
28218
|
var _a;
|
|
28097
28219
|
const isDisabled = this.state._disabled === true;
|
|
28098
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
28220
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'bb234e1f7e6c22df35bfc6fbd893f75b6ddd5321' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '8813721c2043b2d3db52e009790db32da45171bf', state: this.state }, hAsync("div", { key: 'eead335066ebc5f5c46e8b12ce1fda55c4baf079', class: "kol-single-select__group" }, hAsync(InputStateWrapper, Object.assign({ key: '53c521fb6747e348d64a2b945285e38bc181c926' }, this.getInputProps())), this._inputValue && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: 'fd55315f4dd2ca991c27acbb150504467bae9757', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _buttonVariant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: clsx('kol-single-select__delete', {
|
|
28099
28221
|
'kol-single-select__delete--disabled': isDisabled,
|
|
28100
28222
|
}), _on: {
|
|
28101
28223
|
onClick: () => {
|
|
@@ -28103,9 +28225,9 @@ class KolSingleSelect {
|
|
|
28103
28225
|
this.clearSelection();
|
|
28104
28226
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
28105
28227
|
},
|
|
28106
|
-
} })), hAsync(KolIconTag, { key: '
|
|
28228
|
+
} })), hAsync(KolIconTag, { key: '6091eefa514ecc40a2996341cbc0f082c6117c10', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
28107
28229
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
28108
|
-
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '
|
|
28230
|
+
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '102cc831ce79a7d7b8d2b48cb353df91011e88d0', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` } }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option.label, searchTerm: this._inputValue, ref: (el) => {
|
|
28109
28231
|
if (el)
|
|
28110
28232
|
this.refOptions[index] = el;
|
|
28111
28233
|
}, selected: this._value === option.value, disabled: option.disabled ? true : false, onClick: (event) => {
|
|
@@ -28281,13 +28403,13 @@ class KolSingleSelect {
|
|
|
28281
28403
|
this._tooltipAlign = 'top';
|
|
28282
28404
|
this._touched = false;
|
|
28283
28405
|
this._value = null;
|
|
28284
|
-
this.
|
|
28406
|
+
this._hasClearButton = true;
|
|
28285
28407
|
this.state = {
|
|
28286
28408
|
_hideMsg: false,
|
|
28287
28409
|
_id: `id-${nonce()}`,
|
|
28288
28410
|
_label: '',
|
|
28289
28411
|
_options: [],
|
|
28290
|
-
|
|
28412
|
+
_hasClearButton: true,
|
|
28291
28413
|
};
|
|
28292
28414
|
this.inputHasFocus = false;
|
|
28293
28415
|
this.controller = new SingleSelectController(this, 'single-select', this.host);
|
|
@@ -28353,8 +28475,8 @@ class KolSingleSelect {
|
|
|
28353
28475
|
this.oldValue = value;
|
|
28354
28476
|
this.updateInputValue(value);
|
|
28355
28477
|
}
|
|
28356
|
-
|
|
28357
|
-
this.controller.
|
|
28478
|
+
validateHasClearButton(value) {
|
|
28479
|
+
this.controller.validateHasClearButton(value);
|
|
28358
28480
|
}
|
|
28359
28481
|
validateRows(value) {
|
|
28360
28482
|
this.controller.validateRows(value);
|
|
@@ -28411,7 +28533,7 @@ class KolSingleSelect {
|
|
|
28411
28533
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
28412
28534
|
"_touched": ["validateTouched"],
|
|
28413
28535
|
"_value": ["validateValue"],
|
|
28414
|
-
"
|
|
28536
|
+
"_hasClearButton": ["validateHasClearButton"],
|
|
28415
28537
|
"_rows": ["validateRows"]
|
|
28416
28538
|
}; }
|
|
28417
28539
|
static get style() { return {
|
|
@@ -28440,7 +28562,7 @@ class KolSingleSelect {
|
|
|
28440
28562
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
28441
28563
|
"_touched": [1540],
|
|
28442
28564
|
"_value": [1544],
|
|
28443
|
-
"
|
|
28565
|
+
"_hasClearButton": [4, "_has-clear-button"],
|
|
28444
28566
|
"_rows": [2],
|
|
28445
28567
|
"_isOpen": [32],
|
|
28446
28568
|
"_filteredOptions": [32],
|
|
@@ -28468,7 +28590,7 @@ class KolSkipNav {
|
|
|
28468
28590
|
};
|
|
28469
28591
|
}
|
|
28470
28592
|
render() {
|
|
28471
|
-
return (hAsync("nav", { key: '
|
|
28593
|
+
return (hAsync("nav", { key: 'b9adacaa5cb5b79456d375f35a4be7e18aa47a32', class: "kol-skip-nav", "aria-label": this.state._label }, hAsync("ul", { key: '015db44ad9a7489ef6e5b000f1bebadb153ff2df', class: "kol-skip-nav__list" }, this.state._links.map((link, index) => {
|
|
28472
28594
|
return (hAsync("li", { class: "kol-skip-nav__list-item", key: index }, hAsync(KolLinkWcTag, Object.assign({}, link, { ref: index === 0 ? (el) => (this.firstLinkRef = el) : undefined }))));
|
|
28473
28595
|
}))));
|
|
28474
28596
|
}
|
|
@@ -28544,7 +28666,7 @@ class KolSpin {
|
|
|
28544
28666
|
}
|
|
28545
28667
|
render() {
|
|
28546
28668
|
var _a, _b;
|
|
28547
|
-
return (hAsync(Host, { key: '
|
|
28669
|
+
return (hAsync(Host, { key: 'e9c150c633c0a718053c4aa1aeb737d88b7b4183', class: "kol-spin" }, this.state._show ? (hAsync(Fragment, null, hAsync("span", { class: clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`) }, renderSpin(this.state._variant)), hAsync("span", { "aria-busy": "true", class: "visually-hidden", role: "alert" }, (_a = this.state._label) !== null && _a !== void 0 ? _a : this.translateActionRunning))) : (this.showToggled && (hAsync("span", { "aria-busy": "false", class: "visually-hidden", role: "alert" }, (_b = this.state._label) !== null && _b !== void 0 ? _b : this.translateActionDone)))));
|
|
28548
28670
|
}
|
|
28549
28671
|
validateShow(value) {
|
|
28550
28672
|
this.showToggled = this.state._show === true && this._show === false;
|
|
@@ -28631,10 +28753,10 @@ class KolSplitButton {
|
|
|
28631
28753
|
}
|
|
28632
28754
|
render() {
|
|
28633
28755
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
28634
|
-
return (hAsync("div", { key: '
|
|
28756
|
+
return (hAsync("div", { key: '156668962e6ff2011625d1128a20a9dba6e24a9b', class: "kol-split-button" }, hAsync("div", { key: 'a273dc653d3c0a1efb5e3c83bd0e5f2ee2478e79', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: '88f61eecb6fdce911538179e721eae5af2c41c0f', class: clsx('kol-split-button__button', {
|
|
28635
28757
|
[this._variant]: this._variant !== 'custom',
|
|
28636
28758
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
28637
|
-
}), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _id: this._id, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _buttonVariant: this._variant }), hAsync("div", { key: '
|
|
28759
|
+
}), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _id: this._id, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _buttonVariant: this._variant }), hAsync("div", { key: '609e38bd0f8c2c80e831b0f933cec91d8d590d93', class: "kol-split-button__horizontal-line" }), hAsync(KolButtonWcTag, { key: 'c029e785fd846f12eb516a12b93e57c9105e289a', 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: '8f77daa5136a336f0a2e0146651ce6eee6476af1', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: '9e3621825e8c9cbfa6e503cfa463bc548dc04cd4' }))));
|
|
28638
28760
|
}
|
|
28639
28761
|
async closePopup() {
|
|
28640
28762
|
this.handleOnClose();
|
|
@@ -28741,10 +28863,10 @@ class KolTableSettings {
|
|
|
28741
28863
|
}
|
|
28742
28864
|
render() {
|
|
28743
28865
|
const sortedColumns = this.tableSettings.columns;
|
|
28744
|
-
return (hAsync(KolPopoverButtonWcTag, { key: '
|
|
28866
|
+
return (hAsync(KolPopoverButtonWcTag, { key: '4b4247eac63008ebb7375adab5ca409bcddd24eb', ref: (el) => (this.popoverRef = el), class: "kol-table-settings", _icons: "kolicon-settings", _label: this.translateTableSettings, _popoverAlign: "top", _hideLabel: true }, hAsync("div", { key: '46ee0534c748b8474a75a46bbcec317c8d063554', class: "kol-table-settings__content" }, hAsync(KolHeadingTag, { key: 'f1815854a0d5f12e7d686132fc27642d7d1b3ff3', _label: this.translateTableSettings, _level: 0 }), this.errorMessage && hAsync(KolAlertWcTag, { key: '867ba17fb0283836c1aeaaa39304c469769783a4', _type: "error", _label: this.errorMessage, _variant: "msg", class: "kol-table-settings__error-message" }), hAsync("form", { key: 'd61b137dfc55ea2a61d6d23418e033a088bc75aa', onSubmit: this.handleSubmit.bind(this) }, hAsync("div", { key: '972a8033f685f765d6f4a698cd4dcec5c79bc38d', class: "kol-table-settings__columns-container" }, hAsync("div", { key: '0bf2e9a5f0ff5c714bee5b8c59e17edc6405a444', class: "kol-table-settings__columns" }, sortedColumns.map((column, index) => {
|
|
28745
28867
|
var _a, _b;
|
|
28746
28868
|
return (hAsync("div", { key: column.key, class: "kol-table-settings__column" }, hAsync(KolInputCheckboxTag, { _checked: column.visible, _label: `${column.label}${column.hidable === false ? ` (${this.translateColumnNotHidable})` : ''}`, _value: true, _hideLabel: true, _disabled: column.hidable === false, _on: { onInput: (_, value) => this.handleVisibilityChange(column.key, value) }, "data-testid": `table-settings-visible-${column.key}` }), hAsync("span", { class: "kol-table-settings__column-label" }, column.label), hAsync(KolInputNumberTag, { _hideLabel: true, _value: column.width, _label: translate('kol-table-settings-column-width', { placeholders: { column: column.label } }), _min: 1, _disabled: column.resizable === false, _on: { onInput: (_, value) => this.handleWidthChange(column.key, value) } }), hAsync(KolButtonWcTag, { _icons: "codicon codicon-arrow-up", _label: translate('kol-table-settings-move-up', { placeholders: { column: column.label } }), _hideLabel: true, _buttonVariant: "ghost", _on: { onClick: () => this.moveColumn(column.key, 'up') }, _disabled: index === 0 || column.sortable === false || ((_a = sortedColumns[index - 1]) === null || _a === void 0 ? void 0 : _a.sortable) === false, "data-testid": "table-settings-move-up" }), hAsync(KolButtonWcTag, { _icons: "codicon codicon-arrow-down", _label: translate('kol-table-settings-move-down', { placeholders: { column: column.label } }), _hideLabel: true, _buttonVariant: "ghost", _on: { onClick: () => this.moveColumn(column.key, 'down') }, _disabled: index === sortedColumns.length - 1 || column.sortable === false || ((_b = sortedColumns[index + 1]) === null || _b === void 0 ? void 0 : _b.sortable) === false, "data-testid": "table-settings-move-down" })));
|
|
28747
|
-
}))), hAsync("div", { key: '
|
|
28869
|
+
}))), hAsync("div", { key: '3b585a5735999f1d4bd502517401bbbab8734727', class: "kol-table-settings__actions" }, hAsync(KolButtonWcTag, { key: '3530472f0bfaa3f21eb780b92ab7e23b7911812f', _label: this.translateTableSettingsCancel, _buttonVariant: "secondary", _on: { onClick: () => this.handleCancel() }, "data-testid": "table-settings-cancel" }), hAsync(KolButtonWcTag, { key: '13971de3cd695c79cb0cf01c072e6777fdd0895a', _label: this.translateTableSettingsApply, _buttonVariant: "primary", _type: "submit", "data-testid": "table-settings-apply" }))))));
|
|
28748
28870
|
}
|
|
28749
28871
|
get host() { return getElement(this); }
|
|
28750
28872
|
static get watchers() { return {
|
|
@@ -28805,7 +28927,7 @@ const validateTableSettings = (component, value) => {
|
|
|
28805
28927
|
watchValidator(component, `_tableSettings`, (value) => typeof value === 'object' && value !== null, new Set(['TableSettings']), value);
|
|
28806
28928
|
};
|
|
28807
28929
|
|
|
28808
|
-
const defaultStyleCss$8 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n :host {\n display: inline-block;\n }\n .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-popover-button__button {\n display: inline-block;\n }\n .kol-popover-button__popover {\n margin: 0;\n padding: 0;\n border: 0;\n }\n .kol-popover-button--inline .kol-popover-button__button {\n display: inline;\n }\n .kol-table-settings {\n background: #fff;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n }\n .kol-table-settings .kol-popover-button__popover {\n background: #fff;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border: 1px solid #d1d5db;\n }\n .kol-table-settings__columns-container {\n max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n overflow: auto;\n }\n .kol-table-settings__columns {\n display: grid;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-auto-rows: min-content;\n grid-template-columns: min-content minmax(max-content, 1fr) calc(100 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n }\n .kol-table-settings__column {\n display: contents;\n }\n .kol-table {\n display: block;\n position: relative;\n max-width: 100%;\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n .kol-table__scroll-container {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .kol-table__table {\n width: 100%;\n }\n .kol-table__caption {\n min-height: var(--a11y-min-size);\n padding-right: var(--a11y-min-size);\n text-align: start;\n }\n .kol-table__sort-button .kol-button {\n color: inherit;\n }\n .kol-table__sort {\n display: inline-flex;\n gap: 0.25rem;\n align-items: center;\n }\n .kol-table__sort-order {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .kol-table__body {\n text-align: left;\n }\n .kol-table__body .kol-button__text {\n justify-items: start;\n }\n .kol-table__cell--align-left {\n text-align: left;\n }\n .kol-table__cell--align-left .kol-button__text {\n align-items: start;\n }\n .kol-table__cell--align-center {\n text-align: center;\n }\n .kol-table__cell--align-center .kol-button__text {\n align-items: center;\n }\n .kol-table__cell--align-right {\n text-align: right;\n }\n .kol-table__cell--align-right .kol-button__text {\n align-items: end;\n }\n .kol-table__cell--selection {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection-label {\n display: flex;\n position: relative;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n .kol-table__selection-label--disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-icon {\n display: block;\n position: absolute;\n inset: auto;\n z-index: 1;\n }\n .kol-table__selection-input {\n border-style: solid;\n margin: 0;\n appearance: none;\n cursor: pointer;\n }\n .kol-table__selection-input:disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-input:before {\n content: \"\";\n }\n .kol-table__selection-input--checkbox {\n background-color: rgb(255, 255, 255);\n display: flex;\n position: relative;\n width: calc(var(--a11y-min-size) / 2);\n height: calc(var(--a11y-min-size) / 2);\n border-width: 2px;\n align-items: center;\n justify-content: center;\n line-height: 1.5;\n }\n .kol-table__selection-input--radio {\n border-radius: 100%;\n display: flex;\n width: 1.5em;\n min-width: 1.5em;\n height: 1.5em;\n min-height: 1.5em;\n padding: 0;\n border-width: 2px;\n }\n .kol-table__selection-input--radio:before {\n border-radius: 100%;\n width: 0.75em;\n height: 0.75em;\n margin: auto;\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .kol-table__selection-input--radio:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n .kol-pagination {\n display: grid;\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n .kol-pagination__navigation-list {\n display: inline-flex;\n margin: 0;\n padding: 0;\n gap: 0.5em;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n }\n .kol-pagination__separator:before {\n content: \"•••\";\n }\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n display: grid;\n place-items: center;\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n grid-auto-flow: column;\n }\n }\n .kol-pagination {\n display: flex;\n flex-wrap: wrap;\n }\n @media (min-width: 1024px) {\n .kol-pagination {\n display: flex;\n }\n }\n @media (max-width: 1024px) {\n .kol-pagination {\n flex-direction: column;\n }\n }\n}";
|
|
28930
|
+
const defaultStyleCss$8 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n :host {\n display: inline-block;\n }\n .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-popover-button__button {\n display: inline-block;\n }\n .kol-popover-button__popover {\n margin: 0;\n padding: 0;\n border: 0;\n }\n .kol-popover-button--inline .kol-popover-button__button {\n display: inline;\n }\n .kol-table-settings {\n background: #fff;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n }\n .kol-table-settings .kol-popover-button__popover {\n background: #fff;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border: 1px solid #d1d5db;\n }\n .kol-table-settings__columns-container {\n max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n overflow: auto;\n }\n .kol-table-settings__columns {\n display: grid;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-auto-rows: min-content;\n grid-template-columns: min-content minmax(max-content, 1fr) calc(100 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n }\n .kol-table-settings__column {\n display: contents;\n }\n .kol-table {\n display: block;\n position: relative;\n max-width: 100%;\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n .kol-table__scroll-container {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .kol-table__table {\n width: 100%;\n }\n .kol-table__caption {\n min-height: var(--a11y-min-size);\n padding-right: var(--a11y-min-size);\n text-align: start;\n }\n .kol-table__sort-button .kol-button {\n color: inherit;\n }\n .kol-table__sort {\n display: inline-flex;\n gap: 0.25rem;\n align-items: center;\n }\n .kol-table__sort-order {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .kol-table__body {\n text-align: left;\n }\n .kol-table__body .kol-button__text {\n justify-items: start;\n }\n .kol-table__cell--align-left {\n text-align: left;\n }\n .kol-table__cell--align-left .kol-button__text {\n align-items: start;\n }\n .kol-table__cell--align-center {\n text-align: center;\n }\n .kol-table__cell--align-center .kol-button__text {\n align-items: center;\n }\n .kol-table__cell--align-right {\n text-align: right;\n }\n .kol-table__cell--align-right .kol-button__text {\n align-items: end;\n }\n .kol-table__cell--selection {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection-label {\n display: flex;\n position: relative;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n .kol-table__selection-label--disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-icon {\n display: block;\n position: absolute;\n inset: auto;\n z-index: 1;\n }\n .kol-table__selection-input {\n border-style: solid;\n margin: 0;\n appearance: none;\n cursor: pointer;\n }\n .kol-table__selection-input:disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-input:before {\n content: \"\";\n }\n .kol-table__selection-input--checkbox {\n background-color: rgb(255, 255, 255);\n display: flex;\n position: relative;\n width: calc(var(--a11y-min-size) / 2);\n height: calc(var(--a11y-min-size) / 2);\n border-width: 2px;\n align-items: center;\n justify-content: center;\n line-height: 1.5;\n }\n .kol-table__selection-input--radio {\n border-radius: 100%;\n display: flex;\n width: 1.5em;\n min-width: 1.5em;\n height: 1.5em;\n min-height: 1.5em;\n padding: 0;\n border-width: 2px;\n }\n .kol-table__selection-input--radio:before {\n border-radius: 100%;\n width: 0.75em;\n height: 0.75em;\n margin: auto;\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .kol-table__selection-input--radio:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-select {\n background-color: transparent;\n width: 100%;\n }\n .kol-select:not(:disabled) {\n cursor: pointer;\n }\n .kol-select:not([multiple], [size]) {\n height: 2.75em;\n }\n .kol-select:focus {\n outline: none;\n }\n .kol-select__option:checked::before {\n content: \"✓ \";\n }\n .kol-select {\n /* needed hack for vertical alignment */\n }\n .kol-select[multiple] option {\n padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n }\n .kol-pagination {\n display: flex;\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n }\n @media (max-width: 1024px) {\n .kol-pagination {\n flex-direction: column;\n }\n }\n .kol-pagination__navigation-list {\n display: inline-flex;\n margin: 0;\n padding: 0;\n gap: 0.5em;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n }\n .kol-pagination__separator:before {\n content: \"•••\";\n }\n .kol-pagination__page-size-select .kol-form-field-select {\n align-items: center;\n grid-template-columns: 1fr max-content;\n }\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n display: grid;\n place-items: center;\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n grid-auto-flow: column;\n }\n }\n}";
|
|
28809
28931
|
|
|
28810
28932
|
const PAGINATION_OPTIONS = [10, 20, 50, 100];
|
|
28811
28933
|
const paginationValidator = (value) => value === true || value === '' || (typeof value === 'object' && value !== null);
|
|
@@ -29068,17 +29190,7 @@ class KolTableStateful {
|
|
|
29068
29190
|
label: `${this.state._label} (${translate(`kol-pagination-position-${position}`)})`,
|
|
29069
29191
|
},
|
|
29070
29192
|
});
|
|
29071
|
-
return (hAsync("div", { class: `kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}` }, hAsync("
|
|
29072
|
-
placeholders: {
|
|
29073
|
-
start: this.pageEndSlice > 0 ? (this.pageStartSlice + 1).toString() : '0',
|
|
29074
|
-
end: this.pageEndSlice.toString(),
|
|
29075
|
-
total: this.state._pagination && this.state._pagination._max > 0
|
|
29076
|
-
? this.state._pagination._max.toString()
|
|
29077
|
-
: Array.isArray(this.state._data)
|
|
29078
|
-
? this.state._data.length.toString()
|
|
29079
|
-
: '0',
|
|
29080
|
-
},
|
|
29081
|
-
})), hAsync("div", { class: "kol-table-stateful__pagination-wrapper" }, hAsync(KolPaginationWcTag, { class: "test", _boundaryCount: this.state._pagination._boundaryCount, _customClass: this.state._pagination._customClass, _on: this.handlePagination, _page: this.state._pagination._page, _pageSize: this.state._pagination._pageSize, _pageSizeOptions: this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS, _siblingCount: this.state._pagination._siblingCount, _tooltipAlign: "bottom", _max: this.state._pagination._max || this.state._pagination._max || this.state._data.length, _label: label }))));
|
|
29193
|
+
return (hAsync("div", { class: `kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}` }, hAsync("div", { class: "kol-table-stateful__pagination-wrapper" }, hAsync(KolPaginationWcTag, { class: "test", _boundaryCount: this.state._pagination._boundaryCount, _customClass: this.state._pagination._customClass, _on: this.handlePagination, _page: this.state._pagination._page, _pageSize: this.state._pagination._pageSize, _pageSizeOptions: this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS, _siblingCount: this.state._pagination._siblingCount, _tooltipAlign: "bottom", _max: this.state._pagination._max || this.state._pagination._max || this.state._data.length, _label: label }))));
|
|
29082
29194
|
}
|
|
29083
29195
|
getHeaderCellSortState(headerCell) {
|
|
29084
29196
|
if (!this.disableSort && typeof headerCell.compareFn === 'function') {
|
|
@@ -29144,7 +29256,7 @@ class KolTableStateful {
|
|
|
29144
29256
|
horizontal: (_d = (_c = this.state._headers.horizontal) === null || _c === void 0 ? void 0 : _c.map((row) => row.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell), sortOrder: this.getHeaderCellSortOrder(cell) }))))) !== null && _d !== void 0 ? _d : [],
|
|
29145
29257
|
vertical: (_f = (_e = this.state._headers.vertical) === null || _e === void 0 ? void 0 : _e.map((column) => column.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell), sortOrder: this.getHeaderCellSortOrder(cell) }))))) !== null && _f !== void 0 ? _f : [],
|
|
29146
29258
|
};
|
|
29147
|
-
return (hAsync(Host, { key: '
|
|
29259
|
+
return (hAsync(Host, { key: '41a7f056f06c1f024d5832008610ac9bd18fb79b', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: 'cc755ff1c2b50cd4df6cd6cdb58b367dd1c918d5', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
|
|
29148
29260
|
onSort: (_, payload) => {
|
|
29149
29261
|
this.handleSort(payload);
|
|
29150
29262
|
},
|
|
@@ -29203,7 +29315,7 @@ let KolTableStateless$1 = class KolTableStateless {
|
|
|
29203
29315
|
registerInstance(this, hostRef);
|
|
29204
29316
|
}
|
|
29205
29317
|
render() {
|
|
29206
|
-
return (hAsync(KolTableStatelessWcTag, { key: '
|
|
29318
|
+
return (hAsync(KolTableStatelessWcTag, { key: '0bb344f2ce9af4bfcfe4f075b4a86343b33f275f', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection, _tableSettings: this._tableSettings, _hasSettingsMenu: this._hasSettingsMenu }));
|
|
29207
29319
|
}
|
|
29208
29320
|
static get style() { return {
|
|
29209
29321
|
default: defaultStyleCss$7
|
|
@@ -29780,15 +29892,15 @@ class KolTableStateless {
|
|
|
29780
29892
|
const hasSortDirection = typeof cell.sortDirection === 'string';
|
|
29781
29893
|
const canSort = sortableSetting && hasSortDirection;
|
|
29782
29894
|
let ariaSort = 'none';
|
|
29783
|
-
let sortButtonIcon = '
|
|
29895
|
+
let sortButtonIcon = 'kolicon-sort-neutral';
|
|
29784
29896
|
if (canSort && cell.sortDirection) {
|
|
29785
29897
|
switch (cell.sortDirection) {
|
|
29786
29898
|
case 'ASC':
|
|
29787
|
-
sortButtonIcon = '
|
|
29899
|
+
sortButtonIcon = 'kolicon-sort-asc';
|
|
29788
29900
|
ariaSort = 'ascending';
|
|
29789
29901
|
break;
|
|
29790
29902
|
case 'DESC':
|
|
29791
|
-
sortButtonIcon = '
|
|
29903
|
+
sortButtonIcon = 'kolicon-sort-desc';
|
|
29792
29904
|
ariaSort = 'descending';
|
|
29793
29905
|
break;
|
|
29794
29906
|
default:
|
|
@@ -29843,12 +29955,12 @@ class KolTableStateless {
|
|
|
29843
29955
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
29844
29956
|
this.checkboxRefs = [];
|
|
29845
29957
|
const sortedHorizontalHeaders = (_a = this.state._headerCells.horizontal) === null || _a === void 0 ? void 0 : _a.map((row) => this.sortByColumnPosition(row));
|
|
29846
|
-
return (hAsync("div", { key: '
|
|
29958
|
+
return (hAsync("div", { key: 'af64a62b76dc77d084fcf771a96bbd9863dab939', class: "kol-table" }, this.state._hasSettingsMenu && hAsync(KolTableSettingsWcTag, { key: '2e52e2ceb264852ac432d1a06248eef793c775f5', _tableSettings: this.state._tableSettings }), hAsync("div", { key: 'f76361e6493e9975e440b06f595915534d442f7e', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: 'f71fdad5346004fa414ba349d2d952264e7143ba', class: "kol-table__table", style: {
|
|
29847
29959
|
minWidth: this.getTableMinWidth(),
|
|
29848
|
-
} }, hAsync("caption", { key: '
|
|
29960
|
+
} }, hAsync("caption", { key: '098b0f3bc45a09805fdff7cfa676e87cb6e0504a', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(sortedHorizontalHeaders) && (hAsync("thead", { key: '810359e5962e5604f1452db60561d1b643674fbd', class: "kol-table__head" }, [
|
|
29849
29961
|
sortedHorizontalHeaders.map((cols, rowIndex) => (hAsync("tr", { class: "kol-table__head-row", key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) && cols.map((cell, colIndex) => this.renderHeadingCell(cell, rowIndex, colIndex, false))))),
|
|
29850
29962
|
this.renderSpacer('head', sortedHorizontalHeaders),
|
|
29851
|
-
])), hAsync("tbody", { key: '
|
|
29963
|
+
])), hAsync("tbody", { key: 'd257362cf30d5afa172a0b832d480a6ea6129145', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
|
|
29852
29964
|
}
|
|
29853
29965
|
get host() { return getElement(this); }
|
|
29854
29966
|
static get watchers() { return {
|
|
@@ -30086,12 +30198,12 @@ class KolTabs {
|
|
|
30086
30198
|
renderButtonGroup() {
|
|
30087
30199
|
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, _buttonVariant: 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: {
|
|
30088
30200
|
onClick: this.onCreate,
|
|
30089
|
-
}, _icons: "
|
|
30201
|
+
}, _icons: "kolicon-plus", "data-testid": "tabs-create-button" }))));
|
|
30090
30202
|
}
|
|
30091
30203
|
render() {
|
|
30092
|
-
return (hAsync("div", { key: '
|
|
30204
|
+
return (hAsync("div", { key: '0bd0aceb42f67707667ebb5cb15413d135a54199', ref: (el) => {
|
|
30093
30205
|
this.tabPanelsElement = el;
|
|
30094
|
-
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
30206
|
+
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: 'd42d286a6a315f1b181c9c1a167e53c5c202249a', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
|
|
30095
30207
|
}
|
|
30096
30208
|
validateAlign(value) {
|
|
30097
30209
|
validateAlign(this, value);
|
|
@@ -30317,7 +30429,7 @@ class KolTextarea {
|
|
|
30317
30429
|
} });
|
|
30318
30430
|
}
|
|
30319
30431
|
render() {
|
|
30320
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
30432
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '2c2f033030f99e33507c059de0820cc72de7a599' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b64d16f3b7484d98ef5c85f0a2fd41a90bc2469a', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: 'dec62bcfd41aaf9af259d7c40bb194d5dd157e8b' }, this.getTextAreaProps())))));
|
|
30321
30433
|
}
|
|
30322
30434
|
constructor(hostRef) {
|
|
30323
30435
|
registerInstance(this, hostRef);
|
|
@@ -30526,7 +30638,7 @@ class KolTextarea {
|
|
|
30526
30638
|
}; }
|
|
30527
30639
|
}
|
|
30528
30640
|
|
|
30529
|
-
const defaultStyleCss$4 = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n :host {\n display: flex;\n position: fixed;\n z-index: 200;\n flex-direction: column;\n }\n .kol-toast-container__close-all {\n align-self: flex-end;\n }\n}";
|
|
30641
|
+
const defaultStyleCss$4 = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n :host {\n display: flex;\n position: fixed;\n z-index: 200;\n max-width: 90vw;\n flex-direction: column;\n }\n .kol-toast-container__close-all {\n align-self: flex-end;\n }\n}";
|
|
30530
30642
|
|
|
30531
30643
|
const TRANSITION_TIMEOUT = 300;
|
|
30532
30644
|
class KolToastContainer {
|
|
@@ -30589,7 +30701,7 @@ class KolToastContainer {
|
|
|
30589
30701
|
}
|
|
30590
30702
|
}
|
|
30591
30703
|
render() {
|
|
30592
|
-
return (hAsync(Host, { key: '
|
|
30704
|
+
return (hAsync(Host, { key: '91190bc34c9cc342a7296620ac4c32fe579d4b19', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: '4538eec5a1a51925d17b226eade4904770375bf6', _label: this.translateToastCloseAll, class: "kol-toast-container__button-close-all", _on: {
|
|
30593
30705
|
onClick: () => {
|
|
30594
30706
|
void this.closeAll();
|
|
30595
30707
|
},
|
|
@@ -30643,7 +30755,7 @@ class KolToolbar {
|
|
|
30643
30755
|
return Object.assign(Object.assign({}, rest), { _icons, _disabled });
|
|
30644
30756
|
}
|
|
30645
30757
|
render() {
|
|
30646
|
-
return (hAsync("div", { key: '
|
|
30758
|
+
return (hAsync("div", { key: '78a0ddd7a212483b3438fe6a3da1e6c9c022026e', class: `kol-toolbar kol-toolbar--orientation-${this.state._orientation}`, role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem)));
|
|
30647
30759
|
}
|
|
30648
30760
|
validateLabel(value) {
|
|
30649
30761
|
validateLabel(this, value);
|
|
@@ -30882,7 +30994,7 @@ class KolTooltipWc {
|
|
|
30882
30994
|
getDocument().removeEventListener('keyup', this.hideTooltipByEscape);
|
|
30883
30995
|
}
|
|
30884
30996
|
render() {
|
|
30885
|
-
return (hAsync(Host, { key: '
|
|
30997
|
+
return (hAsync(Host, { key: 'a2f5eaf3bdde31f05706c525fb3382d04449877d', class: "kol-tooltip" }, this.state._label !== '' && (hAsync("div", { key: 'd29670e80057f25e00c3826a093d5baef0106ce6', class: "kol-tooltip__floating", ref: this.catchTooltipElement }, hAsync("div", { key: '5ea823469aa2fcb1c3dbf56b628445814f4fc8d0', class: "kol-tooltip__arrow", ref: this.catchArrowElement }), hAsync(KolSpanFc, { key: '49c40bebd3067ede516b5f7edc9749f52a08cf80', class: "kol-tooltip__content", id: this.state._id, badgeText: this._badgeText, label: this.state._label })))));
|
|
30886
30998
|
}
|
|
30887
30999
|
validateBadgeText(value) {
|
|
30888
31000
|
validateBadgeText(this, value);
|
|
@@ -30960,7 +31072,7 @@ class KolTree {
|
|
|
30960
31072
|
registerInstance(this, hostRef);
|
|
30961
31073
|
}
|
|
30962
31074
|
render() {
|
|
30963
|
-
return (hAsync(KolTreeWcTag, { key: '
|
|
31075
|
+
return (hAsync(KolTreeWcTag, { key: 'c9729dc44fcf465925dc6a866d399e62413cf9e1', _label: this._label }, hAsync("slot", { key: 'ff341bf2e8b093cedea4f62ee4c9f54403aa1e7c' })));
|
|
30964
31076
|
}
|
|
30965
31077
|
static get style() { return {
|
|
30966
31078
|
default: defaultStyleCss$2
|
|
@@ -31003,7 +31115,7 @@ class KolTreeItem {
|
|
|
31003
31115
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
31004
31116
|
}
|
|
31005
31117
|
render() {
|
|
31006
|
-
return (hAsync(KolTreeItemWcTag, { key: '
|
|
31118
|
+
return (hAsync(KolTreeItemWcTag, { key: '87d60840b65ed567e5e6075f362e33933563c5c9', _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: 'b0b1d7110cc70ee74fe026e0bedd2620fc423c1d' })));
|
|
31007
31119
|
}
|
|
31008
31120
|
static get style() { return {
|
|
31009
31121
|
default: defaultStyleCss$1
|
|
@@ -31041,12 +31153,12 @@ class KolTreeItemWc {
|
|
|
31041
31153
|
}
|
|
31042
31154
|
render() {
|
|
31043
31155
|
const { _href, _active, _hasChildren, _open, _label } = this.state;
|
|
31044
|
-
return (hAsync(Host, { key: '
|
|
31156
|
+
return (hAsync(Host, { key: '442889bb000355873e79c2df59cce348ed0afb0c', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { key: 'ab695fb7c3857e493631704e56f86b6c6211ad9f', class: "kol-tree-item", style: {
|
|
31045
31157
|
'--level': `${this.level}`,
|
|
31046
|
-
} }, hAsync(KolLinkWcTag, { key: '
|
|
31158
|
+
} }, hAsync(KolLinkWcTag, { key: 'ac9855976707c3665cb09f90af3a6ecd490bb653', class: clsx('kol-tree-item__link', {
|
|
31047
31159
|
'kol-tree-item__link--first-level': this.level === 0,
|
|
31048
31160
|
'kol-tree-item__link--active': _active,
|
|
31049
|
-
}), _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, hAsync("span", { key: '
|
|
31161
|
+
}), _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, hAsync("span", { key: '9122a46258722d8df6bc5423cf8ee8b9412c763b', class: "kol-tree-item__link-inner", slot: "expert" }, _hasChildren ? (hAsync("span", { class: "kol-tree-item__toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, hAsync(KolIconTag, { class: "kol-tree-item__toggle-button-icon", _icons: `codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`, _label: '' }))) : (hAsync("span", { class: "kol-tree-item__toggle-button-placeholder" })), hAsync("span", { key: 'b6108f314822588593d7426ad43f3bddaf42ae3c', class: "kol-tree-item__text" }, _label))), hAsync("ul", { key: '2ca328f5ca9dfc25264ac1cf5a05ebf9b8a47eb8', class: "kol-tree-item__children", hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: '756437d12f6ea52ef666a5813221d84b6b29c575' })))));
|
|
31050
31162
|
}
|
|
31051
31163
|
validateActive(value) {
|
|
31052
31164
|
validateActive(this, value || false);
|
|
@@ -31150,7 +31262,7 @@ class KolTreeWc {
|
|
|
31150
31262
|
validateLabel(this, value);
|
|
31151
31263
|
}
|
|
31152
31264
|
render() {
|
|
31153
|
-
return (hAsync(Host, { key: '
|
|
31265
|
+
return (hAsync(Host, { key: 'c491bc228b1db3a9707ee892a6c307ce675bde4e', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("nav", { key: '50bbc945f1302a0ddd8376076e61823a0b123aa3', class: "kol-tree", "aria-label": this.state._label }, hAsync("ul", { key: '3d915f2ef9fe71b126b2778cc093e91a7907f010', class: "kol-tree__treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: 'a97a01e4eb25a47c667531d99db716d47e404779' })))));
|
|
31154
31266
|
}
|
|
31155
31267
|
static isTreeItem(element) {
|
|
31156
31268
|
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
|
@@ -31347,8 +31459,8 @@ class KolVersion {
|
|
|
31347
31459
|
};
|
|
31348
31460
|
}
|
|
31349
31461
|
render() {
|
|
31350
|
-
return (hAsync(Host, { key: '
|
|
31351
|
-
left: { icon: '
|
|
31462
|
+
return (hAsync(Host, { key: 'e510fa48ba288ec02a12f779576f8b5044bffbb3', class: "kol-version" }, hAsync(KolBadgeTag, { key: '7f75603236af9c4803401cfb821bc68c8b5b0015', _color: "#bec5c9", _icons: {
|
|
31463
|
+
left: { icon: 'kolicon-version', label: this.translateVersion },
|
|
31352
31464
|
}, _label: this.state._label })));
|
|
31353
31465
|
}
|
|
31354
31466
|
validateLabel(value) {
|
|
@@ -31437,6 +31549,7 @@ registerComponents([
|
|
|
31437
31549
|
KolProgress,
|
|
31438
31550
|
KolQuote,
|
|
31439
31551
|
KolSelect,
|
|
31552
|
+
KolSelectWc,
|
|
31440
31553
|
KolSingleSelect,
|
|
31441
31554
|
KolSkipNav,
|
|
31442
31555
|
KolSpin,
|