@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.js
CHANGED
|
@@ -146,7 +146,7 @@ function _mergeNamespaces(n, m) {
|
|
|
146
146
|
|
|
147
147
|
const NAMESPACE = 'kolibri';
|
|
148
148
|
const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
|
|
149
|
-
const Env = /* kolibri */ {"kolibriVersion":"4.0.0-alpha.
|
|
149
|
+
const Env = /* kolibri */ {"kolibriVersion":"4.0.0-alpha.11"};
|
|
150
150
|
|
|
151
151
|
function getDefaultExportFromCjs (x) {
|
|
152
152
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
@@ -2340,13 +2340,13 @@ const validateIcons = (component, value, options = {}) => {
|
|
|
2340
2340
|
isString$2(value, 1) ||
|
|
2341
2341
|
(typeof value === 'object' &&
|
|
2342
2342
|
value !== null &&
|
|
2343
|
-
(isString$2(value.left,
|
|
2343
|
+
(isString$2(value.left, 0) ||
|
|
2344
2344
|
isIcon(value.left) ||
|
|
2345
|
-
isString$2(value.right,
|
|
2345
|
+
isString$2(value.right, 0) ||
|
|
2346
2346
|
isIcon(value.right) ||
|
|
2347
|
-
isString$2(value.top,
|
|
2347
|
+
isString$2(value.top, 0) ||
|
|
2348
2348
|
isIcon(value.top) ||
|
|
2349
|
-
isString$2(value.bottom,
|
|
2349
|
+
isString$2(value.bottom, 0) ||
|
|
2350
2350
|
isIcon(value.bottom))));
|
|
2351
2351
|
}, new Set(['KoliBriIcon']), value, Object.assign(Object.assign({}, options), { defaultValue: {}, hooks: {
|
|
2352
2352
|
afterPatch: (_a = options.hooks) === null || _a === void 0 ? void 0 : _a.afterPatch,
|
|
@@ -6080,7 +6080,7 @@ let KolLinkWcTag = 'kol-link-wc';
|
|
|
6080
6080
|
let KolPaginationWcTag = 'kol-pagination-wc';
|
|
6081
6081
|
let KolPopoverWcTag = 'kol-popover-wc';
|
|
6082
6082
|
let KolPopoverButtonWcTag = 'kol-popover-button-wc';
|
|
6083
|
-
let
|
|
6083
|
+
let KolSelectWcTag = 'kol-select-wc';
|
|
6084
6084
|
let KolTableSettingsWcTag = 'kol-table-settings-wc';
|
|
6085
6085
|
let KolTableStatelessWcTag = 'kol-table-stateless-wc';
|
|
6086
6086
|
let KolTooltipWcTag = 'kol-tooltip-wc';
|
|
@@ -6192,11 +6192,11 @@ const KolHeadingFc = (_a, children) => {
|
|
|
6192
6192
|
|
|
6193
6193
|
const KolCollapsibleFc = (props, children) => {
|
|
6194
6194
|
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"]);
|
|
6195
|
-
const icon = open ? '
|
|
6195
|
+
const icon = open ? 'kolicon-chevron-down' : 'kolicon-chevron-right';
|
|
6196
6196
|
return (hAsync("div", Object.assign({ id: id, class: clsx('collapsible', {
|
|
6197
6197
|
'collapsible--disabled': disabled === true,
|
|
6198
6198
|
'collapsible--open': open === true,
|
|
6199
|
-
}, 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) ||
|
|
6199
|
+
}, 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)))));
|
|
6200
6200
|
};
|
|
6201
6201
|
|
|
6202
6202
|
const initMeta = () => {
|
|
@@ -6474,7 +6474,7 @@ var locale_de = {
|
|
|
6474
6474
|
page: 'Seite',
|
|
6475
6475
|
'page-current': 'Seite {{page}}',
|
|
6476
6476
|
'page-selected': 'Seite {{page}} ist ausgewählt',
|
|
6477
|
-
'page-per-site': '
|
|
6477
|
+
'page-per-site': 'Einträge pro Seite',
|
|
6478
6478
|
'nav-maximize': 'Navigation maximieren',
|
|
6479
6479
|
'nav-minimize': 'Navigation minimieren',
|
|
6480
6480
|
'logo-description': 'Logo {{orgShort}}. Bundesadler mit Flaggenstab und Schriftzug {{orgLong}}',
|
|
@@ -6546,7 +6546,7 @@ var locale_en = {
|
|
|
6546
6546
|
page: 'Page',
|
|
6547
6547
|
'page-current': 'Page {{page}}',
|
|
6548
6548
|
'page-selected': 'Page {{page}} is selected',
|
|
6549
|
-
'page-per-site': '
|
|
6549
|
+
'page-per-site': 'Entries per page',
|
|
6550
6550
|
'nav-maximize': 'Maximize navigation',
|
|
6551
6551
|
'nav-minimize': 'Minimize navigation',
|
|
6552
6552
|
'logo-description': 'Logo {{orgShort}}. Federal eagle with flag staff and lettering {{orgLong}}',
|
|
@@ -6754,15 +6754,15 @@ const Icon = ({ ariaLabel, icon }) => {
|
|
|
6754
6754
|
const AlertIcon = ({ type, label }) => {
|
|
6755
6755
|
switch (type) {
|
|
6756
6756
|
case 'error':
|
|
6757
|
-
return hAsync(Icon, { ariaLabel: translateError, icon: "
|
|
6757
|
+
return hAsync(Icon, { ariaLabel: translateError, icon: "kolicon-alert-error", label: label });
|
|
6758
6758
|
case 'info':
|
|
6759
|
-
return hAsync(Icon, { ariaLabel: translateInfo, icon: "
|
|
6759
|
+
return hAsync(Icon, { ariaLabel: translateInfo, icon: "kolicon-alert-info", label: label });
|
|
6760
6760
|
case 'warning':
|
|
6761
|
-
return hAsync(Icon, { ariaLabel: translateWarning, icon: "
|
|
6761
|
+
return hAsync(Icon, { ariaLabel: translateWarning, icon: "kolicon-alert-warning", label: label });
|
|
6762
6762
|
case 'success':
|
|
6763
|
-
return hAsync(Icon, { ariaLabel: translateSuccess, icon: "
|
|
6763
|
+
return hAsync(Icon, { ariaLabel: translateSuccess, icon: "kolicon-alert-success", label: label });
|
|
6764
6764
|
default:
|
|
6765
|
-
return hAsync(Icon, { ariaLabel: translateMessage, icon: "
|
|
6765
|
+
return hAsync(Icon, { ariaLabel: translateMessage, icon: "kolicon-alert-info", label: label });
|
|
6766
6766
|
}
|
|
6767
6767
|
};
|
|
6768
6768
|
|
|
@@ -6804,7 +6804,7 @@ const KolAlertFc = (props, children) => {
|
|
|
6804
6804
|
const rootProps = Object.assign({ class: clsx(classNames, BEM_CLASS_ROOT) }, other);
|
|
6805
6805
|
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: {
|
|
6806
6806
|
left: {
|
|
6807
|
-
icon: '
|
|
6807
|
+
icon: 'kolicon-cross',
|
|
6808
6808
|
},
|
|
6809
6809
|
}, _label: translateCloseAlert, _on: { onClick: onCloserClick }, _tooltipAlign: "left" }))), variant === 'card' && (hAsync("div", { class: BEM_CLASS_ALERT__CONTENT, "aria-describedby": label ? 'heading' : undefined }, children))));
|
|
6810
6810
|
};
|
|
@@ -18679,7 +18679,7 @@ class KolBreadcrumb {
|
|
|
18679
18679
|
registerInstance(this, hostRef);
|
|
18680
18680
|
this.renderLink = (link, index) => {
|
|
18681
18681
|
const lastIndex = this.state._links.length - 1;
|
|
18682
|
-
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: "
|
|
18682
|
+
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" })));
|
|
18683
18683
|
};
|
|
18684
18684
|
this.state = {
|
|
18685
18685
|
_label: '',
|
|
@@ -18687,7 +18687,7 @@ class KolBreadcrumb {
|
|
|
18687
18687
|
};
|
|
18688
18688
|
}
|
|
18689
18689
|
render() {
|
|
18690
|
-
return (hAsync("nav", { key: '
|
|
18690
|
+
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))));
|
|
18691
18691
|
}
|
|
18692
18692
|
validateLabel(value, _oldValue, initial = false) {
|
|
18693
18693
|
if (!initial) {
|
|
@@ -19401,9 +19401,9 @@ class KolCardWc {
|
|
|
19401
19401
|
this.validateOnValue = (value) => typeof value === 'object' && value !== null && typeof value.onClose === 'function';
|
|
19402
19402
|
}
|
|
19403
19403
|
render() {
|
|
19404
|
-
return (hAsync(Host, { key: '
|
|
19404
|
+
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: {
|
|
19405
19405
|
left: {
|
|
19406
|
-
icon: '
|
|
19406
|
+
icon: 'kolicon-cross',
|
|
19407
19407
|
},
|
|
19408
19408
|
}, _label: this.translateClose, _on: this.on, _tooltipAlign: "left" })))));
|
|
19409
19409
|
}
|
|
@@ -19909,8 +19909,8 @@ class ComboboxController extends InputIconController {
|
|
|
19909
19909
|
super(component, name, host);
|
|
19910
19910
|
this.component = component;
|
|
19911
19911
|
}
|
|
19912
|
-
|
|
19913
|
-
watchBoolean(this.component, '
|
|
19912
|
+
validateHasClearButton(value) {
|
|
19913
|
+
watchBoolean(this.component, '_hasClearButton', value);
|
|
19914
19914
|
}
|
|
19915
19915
|
validatePlaceholder(value) {
|
|
19916
19916
|
validatePlaceholder(this.component, value);
|
|
@@ -19926,7 +19926,7 @@ class ComboboxController extends InputIconController {
|
|
|
19926
19926
|
}
|
|
19927
19927
|
componentWillLoad() {
|
|
19928
19928
|
super.componentWillLoad();
|
|
19929
|
-
this.
|
|
19929
|
+
this.validateHasClearButton(this.component._hasClearButton);
|
|
19930
19930
|
this.validatePlaceholder(this.component._placeholder);
|
|
19931
19931
|
this.validateRequired(this.component._required);
|
|
19932
19932
|
this.validateSuggestions(this.component._suggestions);
|
|
@@ -20049,15 +20049,15 @@ class KolCombobox {
|
|
|
20049
20049
|
}
|
|
20050
20050
|
render() {
|
|
20051
20051
|
const isDisabled = this.state._disabled === true;
|
|
20052
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
20052
|
+
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', {
|
|
20053
20053
|
'kol-combobox__delete--disabled': isDisabled,
|
|
20054
20054
|
}), _on: {
|
|
20055
20055
|
onClick: () => {
|
|
20056
20056
|
this.clearSelection();
|
|
20057
20057
|
},
|
|
20058
|
-
} })), hAsync(KolIconTag, { key: '
|
|
20058
|
+
} })), hAsync(KolIconTag, { key: 'fc2533df3314266028a81e2439533996f1f84fd7', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
20059
20059
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
20060
|
-
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '
|
|
20060
|
+
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: 'f1e60f33171ccf3d5e52d835c53953a7e3f0196e', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
|
|
20061
20061
|
this._filteredSuggestions.length > 0 &&
|
|
20062
20062
|
this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { disabled: false, index: index, option: option, searchTerm: this.state._value, ref: (el) => {
|
|
20063
20063
|
if (el)
|
|
@@ -20199,13 +20199,13 @@ class KolCombobox {
|
|
|
20199
20199
|
this._hideMsg = false;
|
|
20200
20200
|
this._hideLabel = false;
|
|
20201
20201
|
this._hint = '';
|
|
20202
|
-
this.
|
|
20202
|
+
this._hasClearButton = true;
|
|
20203
20203
|
this._required = false;
|
|
20204
20204
|
this._tooltipAlign = 'top';
|
|
20205
20205
|
this._touched = false;
|
|
20206
20206
|
this.state = {
|
|
20207
20207
|
_hasValue: false,
|
|
20208
|
-
|
|
20208
|
+
_hasClearButton: true,
|
|
20209
20209
|
_hideMsg: false,
|
|
20210
20210
|
_id: `id-${nonce()}`,
|
|
20211
20211
|
_label: '',
|
|
@@ -20262,8 +20262,8 @@ class KolCombobox {
|
|
|
20262
20262
|
this.controller.validateSuggestions(value);
|
|
20263
20263
|
this._filteredSuggestions = value;
|
|
20264
20264
|
}
|
|
20265
|
-
|
|
20266
|
-
this.controller.
|
|
20265
|
+
validateHasClearButton(value) {
|
|
20266
|
+
this.controller.validateHasClearButton(value);
|
|
20267
20267
|
}
|
|
20268
20268
|
validateRequired(value) {
|
|
20269
20269
|
this.controller.validateRequired(value);
|
|
@@ -20327,7 +20327,7 @@ class KolCombobox {
|
|
|
20327
20327
|
"_on": ["validateOn"],
|
|
20328
20328
|
"_shortKey": ["validateShortKey"],
|
|
20329
20329
|
"_suggestions": ["validateSuggestions"],
|
|
20330
|
-
"
|
|
20330
|
+
"_hasClearButton": ["validateHasClearButton"],
|
|
20331
20331
|
"_required": ["validateRequired"],
|
|
20332
20332
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
20333
20333
|
"_touched": ["validateTouched"],
|
|
@@ -20352,7 +20352,7 @@ class KolCombobox {
|
|
|
20352
20352
|
"_msg": [1],
|
|
20353
20353
|
"_name": [1],
|
|
20354
20354
|
"_on": [16],
|
|
20355
|
-
"
|
|
20355
|
+
"_hasClearButton": [4, "_has-clear-button"],
|
|
20356
20356
|
"_suggestions": [1],
|
|
20357
20357
|
"_required": [4],
|
|
20358
20358
|
"_shortKey": [1, "_short-key"],
|
|
@@ -20422,7 +20422,7 @@ class KolDetails {
|
|
|
20422
20422
|
HeadingButtonProps: {
|
|
20423
20423
|
ref: this.catchRef,
|
|
20424
20424
|
class: `${rootClass}__heading-button`,
|
|
20425
|
-
_icons: '
|
|
20425
|
+
_icons: 'kolicon-chevron-right',
|
|
20426
20426
|
},
|
|
20427
20427
|
ContentProps: {
|
|
20428
20428
|
class: `${rootClass}__content indented-text`,
|
|
@@ -20430,7 +20430,7 @@ class KolDetails {
|
|
|
20430
20430
|
animationClass: `${rootClass}__wrapper-animation`,
|
|
20431
20431
|
},
|
|
20432
20432
|
};
|
|
20433
|
-
return (hAsync(KolCollapsibleFc, Object.assign({ key: '
|
|
20433
|
+
return (hAsync(KolCollapsibleFc, Object.assign({ key: '335d90129f31949bcec29ac3108f22c43d6dd09a' }, props), hAsync("slot", { key: 'ce42f858d4bda51fbac02e14d6f69b4e51da41b3' })));
|
|
20434
20434
|
}
|
|
20435
20435
|
validateDisabled(value) {
|
|
20436
20436
|
validateDisabled(this, value);
|
|
@@ -20832,7 +20832,7 @@ const bem = c();
|
|
|
20832
20832
|
const BEM_CLASS_ICON = bem('kol-icon');
|
|
20833
20833
|
const BEM_CLASS_ICON__ICON = bem('kol-icon', 'icon');
|
|
20834
20834
|
|
|
20835
|
-
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}";
|
|
20835
|
+
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}";
|
|
20836
20836
|
|
|
20837
20837
|
class KolIcon {
|
|
20838
20838
|
render() {
|
|
@@ -20842,7 +20842,7 @@ class KolIcon {
|
|
|
20842
20842
|
constructor(hostRef) {
|
|
20843
20843
|
registerInstance(this, hostRef);
|
|
20844
20844
|
this.state = {
|
|
20845
|
-
_icons: '
|
|
20845
|
+
_icons: 'kolicon-logo',
|
|
20846
20846
|
_label: '',
|
|
20847
20847
|
};
|
|
20848
20848
|
this.controller = new IconController(this);
|
|
@@ -21281,9 +21281,9 @@ class KolInputCheckbox {
|
|
|
21281
21281
|
_checked: false,
|
|
21282
21282
|
_hideMsg: false,
|
|
21283
21283
|
_icons: {
|
|
21284
|
-
checked: '
|
|
21285
|
-
indeterminate: '
|
|
21286
|
-
unchecked: '
|
|
21284
|
+
checked: 'kolicon-check',
|
|
21285
|
+
indeterminate: 'kolicon-minus',
|
|
21286
|
+
unchecked: 'kolicon-cross',
|
|
21287
21287
|
},
|
|
21288
21288
|
_id: `id-${nonce()}`,
|
|
21289
21289
|
_indeterminate: false,
|
|
@@ -22811,7 +22811,7 @@ class KolInputNumber {
|
|
|
22811
22811
|
var _a, _b;
|
|
22812
22812
|
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.stepUp();
|
|
22813
22813
|
(_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.focus();
|
|
22814
|
-
}, disabled: this._disabled || this._readOnly }, hAsync(KolIconFc, { icons: "
|
|
22814
|
+
}, disabled: this._disabled || this._readOnly }, hAsync(KolIconFc, { icons: "kolicon-plus", label: "" })));
|
|
22815
22815
|
}
|
|
22816
22816
|
getStepDownButton() {
|
|
22817
22817
|
if (this._disabled || this._readOnly) {
|
|
@@ -22821,10 +22821,10 @@ class KolInputNumber {
|
|
|
22821
22821
|
var _a, _b;
|
|
22822
22822
|
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.stepDown();
|
|
22823
22823
|
(_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.focus();
|
|
22824
|
-
}, disabled: this._disabled || this._readOnly }, hAsync(KolIconFc, { icons: "
|
|
22824
|
+
}, disabled: this._disabled || this._readOnly }, hAsync(KolIconFc, { icons: "kolicon-minus", label: "" })));
|
|
22825
22825
|
}
|
|
22826
22826
|
render() {
|
|
22827
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22827
|
+
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())))));
|
|
22828
22828
|
}
|
|
22829
22829
|
constructor(hostRef) {
|
|
22830
22830
|
registerInstance(this, hostRef);
|
|
@@ -23068,10 +23068,10 @@ class KolInputPassword {
|
|
|
23068
23068
|
var _a;
|
|
23069
23069
|
this._passwordVisible = !this._passwordVisible;
|
|
23070
23070
|
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23071
|
-
}, icon:
|
|
23071
|
+
}, icon: `${this._passwordVisible ? 'kolicon-eye-closed' : 'kolicon-eye'}`, disabled: this._disabled }));
|
|
23072
23072
|
}
|
|
23073
23073
|
render() {
|
|
23074
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23074
|
+
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())))));
|
|
23075
23075
|
}
|
|
23076
23076
|
constructor(hostRef) {
|
|
23077
23077
|
registerInstance(this, hostRef);
|
|
@@ -23322,7 +23322,23 @@ class KolInputRadio {
|
|
|
23322
23322
|
}
|
|
23323
23323
|
async kolFocus() {
|
|
23324
23324
|
var _a;
|
|
23325
|
-
(_a = this.
|
|
23325
|
+
(_a = this.getFocusableInput()) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23326
|
+
}
|
|
23327
|
+
getFocusableInput() {
|
|
23328
|
+
const options = this.state._options;
|
|
23329
|
+
const isComponentDisabled = Boolean(this.state._disabled);
|
|
23330
|
+
const selectedIndex = options.findIndex((option) => option.value === this.state._value && !isComponentDisabled && !option.disabled);
|
|
23331
|
+
if (selectedIndex !== -1) {
|
|
23332
|
+
const input = this.inputRefs.get(selectedIndex);
|
|
23333
|
+
if (input) {
|
|
23334
|
+
return input;
|
|
23335
|
+
}
|
|
23336
|
+
}
|
|
23337
|
+
const firstEnabledIndex = options.findIndex((option) => !isComponentDisabled && !option.disabled);
|
|
23338
|
+
if (firstEnabledIndex !== -1) {
|
|
23339
|
+
return this.inputRefs.get(firstEnabledIndex);
|
|
23340
|
+
}
|
|
23341
|
+
return undefined;
|
|
23326
23342
|
}
|
|
23327
23343
|
getFormFieldProps() {
|
|
23328
23344
|
return {
|
|
@@ -23343,7 +23359,7 @@ class KolInputRadio {
|
|
|
23343
23359
|
};
|
|
23344
23360
|
}
|
|
23345
23361
|
render() {
|
|
23346
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23362
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '9e2b42643b7eec87fcef68c4e8bf471e67738689' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
|
|
23347
23363
|
}
|
|
23348
23364
|
calculateDisabled(option) {
|
|
23349
23365
|
return Boolean(this.state._disabled) || Boolean(option.disabled);
|
|
@@ -23364,7 +23380,12 @@ class KolInputRadio {
|
|
|
23364
23380
|
getInputProps(option, id, index, selected) {
|
|
23365
23381
|
return {
|
|
23366
23382
|
state: this.state,
|
|
23367
|
-
inputProps: Object.assign(Object.assign({ id: id, ref:
|
|
23383
|
+
inputProps: Object.assign(Object.assign({ id: id, ref: (ref) => {
|
|
23384
|
+
this.catchInputRef(index)(ref);
|
|
23385
|
+
if (selected) {
|
|
23386
|
+
this.catchRef(ref);
|
|
23387
|
+
}
|
|
23388
|
+
}, '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) => {
|
|
23368
23389
|
this.controller.onFacade.onFocus(event);
|
|
23369
23390
|
this.inputHasFocus = true;
|
|
23370
23391
|
}, onBlur: (event) => {
|
|
@@ -23380,9 +23401,18 @@ class KolInputRadio {
|
|
|
23380
23401
|
}
|
|
23381
23402
|
constructor(hostRef) {
|
|
23382
23403
|
registerInstance(this, hostRef);
|
|
23404
|
+
this.inputRefs = new Map();
|
|
23383
23405
|
this.catchRef = (ref) => {
|
|
23384
23406
|
this.inputRef = ref;
|
|
23385
23407
|
};
|
|
23408
|
+
this.catchInputRef = (index) => (ref) => {
|
|
23409
|
+
if (ref) {
|
|
23410
|
+
this.inputRefs.set(index, ref);
|
|
23411
|
+
}
|
|
23412
|
+
else {
|
|
23413
|
+
this.inputRefs.delete(index);
|
|
23414
|
+
}
|
|
23415
|
+
};
|
|
23386
23416
|
this._disabled = false;
|
|
23387
23417
|
this._hideMsg = false;
|
|
23388
23418
|
this._hideLabel = false;
|
|
@@ -24378,7 +24408,7 @@ class KolLinkWc {
|
|
|
24378
24408
|
'kol-link--inline': this.state._inline === true,
|
|
24379
24409
|
'kol-link--standalone': this.state._inline === false,
|
|
24380
24410
|
[this.state._customClass]: this.state._buttonVariant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
24381
|
-
}) }, 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: '
|
|
24411
|
+
}) }, 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 }))));
|
|
24382
24412
|
}
|
|
24383
24413
|
validateAccessKey(value) {
|
|
24384
24414
|
validateAccessKey(this, value);
|
|
@@ -24670,7 +24700,7 @@ class KolNav {
|
|
|
24670
24700
|
'kol-nav__list--nested': props.deep > 0,
|
|
24671
24701
|
'kol-nav__list--vertical': props.deep !== 0,
|
|
24672
24702
|
}), id: props.deep > 0 ? props.id : undefined }, props.links.map((link, index) => {
|
|
24673
|
-
return this.li(props.collapsible, props.
|
|
24703
|
+
return this.li(props.collapsible, props.deep, index, link, props.id);
|
|
24674
24704
|
})));
|
|
24675
24705
|
};
|
|
24676
24706
|
this._collapsible = true;
|
|
@@ -24693,19 +24723,40 @@ class KolNav {
|
|
|
24693
24723
|
collapseChildren(children) {
|
|
24694
24724
|
this.state = Object.assign(Object.assign({}, this.state), { _expandedChildren: this.state._expandedChildren.filter((searchChildren) => searchChildren !== children) });
|
|
24695
24725
|
}
|
|
24696
|
-
|
|
24697
|
-
|
|
24698
|
-
|
|
24699
|
-
|
|
24700
|
-
? ((_a = entry._icons) === null || _a === void 0 ? void 0 : _a.toString()) || (this.state._hideLabel ? 'codicon codicon-symbol-method' : undefined)
|
|
24701
|
-
: undefined,
|
|
24702
|
-
right: collapsible && hasChildren ? 'codicon codicon-' + (expanded ? 'remove' : 'add') : undefined,
|
|
24726
|
+
buildIconObject(collapsible, expanded, leftIcon) {
|
|
24727
|
+
const icon = {
|
|
24728
|
+
left: '',
|
|
24729
|
+
right: '',
|
|
24703
24730
|
};
|
|
24731
|
+
if (this.state._hasIconsWhenExpanded && leftIcon) {
|
|
24732
|
+
icon.left = leftIcon;
|
|
24733
|
+
}
|
|
24734
|
+
if (this.state._hideLabel) {
|
|
24735
|
+
if (leftIcon) {
|
|
24736
|
+
icon.left = leftIcon;
|
|
24737
|
+
}
|
|
24738
|
+
else {
|
|
24739
|
+
icon.left = 'kolicon-link';
|
|
24740
|
+
}
|
|
24741
|
+
}
|
|
24742
|
+
if (collapsible) {
|
|
24743
|
+
if (expanded) {
|
|
24744
|
+
icon.right = 'kolicon-minus';
|
|
24745
|
+
}
|
|
24746
|
+
else {
|
|
24747
|
+
icon.right = 'kolicon-plus';
|
|
24748
|
+
}
|
|
24749
|
+
}
|
|
24750
|
+
return icon;
|
|
24751
|
+
}
|
|
24752
|
+
entry(collapsible, hasChildren, entry, expanded, ariaID) {
|
|
24753
|
+
var _a;
|
|
24754
|
+
const icons = this.buildIconObject(collapsible && hasChildren, expanded, (_a = entry._icons) === null || _a === void 0 ? void 0 : _a.toString());
|
|
24704
24755
|
return (hAsync("div", { class: "kol-nav__entry-wrapper" }, entryIsLink(entry) ? (hAsync(KolLinkWcTag, Object.assign({ class: clsx('kol-nav__entry kol-nav__entry--link', {
|
|
24705
24756
|
'kol-nav__entry--collapsible': collapsible,
|
|
24706
|
-
}) }, entry, { _hideLabel:
|
|
24757
|
+
}) }, 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', {
|
|
24707
24758
|
'kol-nav__entry--collapsible': collapsible,
|
|
24708
|
-
}), _label: entry._label, _hideLabel:
|
|
24759
|
+
}), _label: entry._label, _hideLabel: this.state._hideLabel, _icons: icons, _ariaControls: collapsible && hasChildren && expanded ? ariaID : undefined, _ariaExpanded: collapsible && hasChildren ? expanded : undefined, _on: {
|
|
24709
24760
|
onClick: (event, value) => {
|
|
24710
24761
|
if (entryIsButton(entry) && typeof entry._on.onClick === 'function') {
|
|
24711
24762
|
entry._on.onClick(event, value);
|
|
@@ -24714,7 +24765,7 @@ class KolNav {
|
|
|
24714
24765
|
},
|
|
24715
24766
|
} }))));
|
|
24716
24767
|
}
|
|
24717
|
-
li(collapsible,
|
|
24768
|
+
li(collapsible, deep, index, link, ariaIDparent) {
|
|
24718
24769
|
const active = !!link._active;
|
|
24719
24770
|
const hasChildren = Array.isArray(link._children) && link._children.length > 0;
|
|
24720
24771
|
const expanded = Boolean(link._children && this.state._expandedChildren.includes(link._children));
|
|
@@ -24723,7 +24774,7 @@ class KolNav {
|
|
|
24723
24774
|
'kol-nav__list-item--active': active,
|
|
24724
24775
|
'kol-nav__list-item--expanded': expanded,
|
|
24725
24776
|
'kol-nav__list-item--has-children': hasChildren,
|
|
24726
|
-
}), key: index }, this.entry(collapsible,
|
|
24777
|
+
}), key: index }, this.entry(collapsible, hasChildren, link, expanded, ariaID), expanded && hAsync(this.linkList, { collapsible: collapsible, deep: deep + 1, links: link._children || [], id: ariaID })));
|
|
24727
24778
|
}
|
|
24728
24779
|
initializeExpandedChildren() {
|
|
24729
24780
|
this.state = Object.assign(Object.assign({}, this.state), { _expandedChildren: [] });
|
|
@@ -24748,12 +24799,11 @@ class KolNav {
|
|
|
24748
24799
|
}
|
|
24749
24800
|
render() {
|
|
24750
24801
|
const collapsible = this.state._collapsible === true;
|
|
24751
|
-
|
|
24752
|
-
return (hAsync("div", { key: '39f07d530b46e738987032cebed99c3c90039376', class: clsx('kol-nav', `kol-nav--vertical`, {
|
|
24802
|
+
return (hAsync("div", { key: '3094796612244694281480b72ad8169c208158b5', class: clsx('kol-nav', {
|
|
24753
24803
|
'kol-nav--is-compact': this.state._hideLabel,
|
|
24754
|
-
}) }, hAsync("nav", { key: '
|
|
24804
|
+
}) }, 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: {
|
|
24755
24805
|
onClick: () => {
|
|
24756
|
-
this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel
|
|
24806
|
+
this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: !this.state._hideLabel });
|
|
24757
24807
|
},
|
|
24758
24808
|
}, _tooltipAlign: "right" })))));
|
|
24759
24809
|
}
|
|
@@ -24825,7 +24875,7 @@ class KolNav {
|
|
|
24825
24875
|
}; }
|
|
24826
24876
|
}
|
|
24827
24877
|
|
|
24828
|
-
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}";
|
|
24878
|
+
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}";
|
|
24829
24879
|
|
|
24830
24880
|
class KolPagination {
|
|
24831
24881
|
constructor(hostRef) {
|
|
@@ -24866,16 +24916,16 @@ class KolPagination {
|
|
|
24866
24916
|
}
|
|
24867
24917
|
|
|
24868
24918
|
const leftDoubleArrowIcon = {
|
|
24869
|
-
left: '
|
|
24919
|
+
left: 'kolicon-chevron-left',
|
|
24870
24920
|
};
|
|
24871
24921
|
const leftSingleArrow = {
|
|
24872
|
-
left: '
|
|
24922
|
+
left: 'kolicon-chevron-double-left',
|
|
24873
24923
|
};
|
|
24874
24924
|
const rightSingleArrowIcon = {
|
|
24875
|
-
right: '
|
|
24925
|
+
right: 'kolicon-chevron-right',
|
|
24876
24926
|
};
|
|
24877
24927
|
const rightDoubleArrowIcon = {
|
|
24878
|
-
right: '
|
|
24928
|
+
right: 'kolicon-chevron-double-right',
|
|
24879
24929
|
};
|
|
24880
24930
|
function getUserLanguage() {
|
|
24881
24931
|
const userLanguage = navigator.language || 'de-DE';
|
|
@@ -25018,7 +25068,7 @@ class KolPaginationWc {
|
|
|
25018
25068
|
for (const value of nextValue) {
|
|
25019
25069
|
if (typeof value === 'number') {
|
|
25020
25070
|
options.push({
|
|
25021
|
-
label:
|
|
25071
|
+
label: `${value}`,
|
|
25022
25072
|
value: value,
|
|
25023
25073
|
});
|
|
25024
25074
|
}
|
|
@@ -25028,6 +25078,12 @@ class KolPaginationWc {
|
|
|
25028
25078
|
this.beforePageSize(options, nextState);
|
|
25029
25079
|
};
|
|
25030
25080
|
}
|
|
25081
|
+
getPageStart() {
|
|
25082
|
+
return (this.state._page - 1) * this.state._pageSize + 1 + '';
|
|
25083
|
+
}
|
|
25084
|
+
getPageEnd() {
|
|
25085
|
+
return this.state._page * this.state._pageSize + '';
|
|
25086
|
+
}
|
|
25031
25087
|
render() {
|
|
25032
25088
|
var _a;
|
|
25033
25089
|
let ellipsis = false;
|
|
@@ -25054,9 +25110,15 @@ class KolPaginationWc {
|
|
|
25054
25110
|
return null;
|
|
25055
25111
|
}
|
|
25056
25112
|
});
|
|
25057
|
-
return (hAsync(Host, { class: "kol-pagination" }, hAsync("
|
|
25113
|
+
return (hAsync(Host, { class: "kol-pagination" }, hAsync("span", { role: "status", "aria-live": "polite" }, translate('kol-table-visible-range', {
|
|
25114
|
+
placeholders: {
|
|
25115
|
+
start: this.getPageStart(),
|
|
25116
|
+
end: this.getPageEnd(),
|
|
25117
|
+
total: this.state._max.toString(),
|
|
25118
|
+
},
|
|
25119
|
+
})), 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: {
|
|
25058
25120
|
onChange: this.onChangePageSize,
|
|
25059
|
-
}, _value: this.state._pageSize }))));
|
|
25121
|
+
}, _value: this.state._pageSize })))));
|
|
25060
25122
|
}
|
|
25061
25123
|
getUnselectedPageButton(page) {
|
|
25062
25124
|
const pageText = NUMBER_FORMATTER.format(page);
|
|
@@ -27235,11 +27297,11 @@ class KolPopoverButton {
|
|
|
27235
27297
|
(_c = this.cleanupAutoPositioning) === null || _c === void 0 ? void 0 : _c.call(this);
|
|
27236
27298
|
}
|
|
27237
27299
|
render() {
|
|
27238
|
-
return (hAsync("div", { key: '
|
|
27300
|
+
return (hAsync("div", { key: '874282cd81b305d92a155d8c848a5004e128db80', class: clsx('kol-popover-button', {
|
|
27239
27301
|
'kol-popover-button--open': this.popoverOpen,
|
|
27240
27302
|
'kol-popover-button--inline': this.state._inline === true,
|
|
27241
27303
|
'kol-popover-button--standalone': this.state._inline === false,
|
|
27242
|
-
}) }, hAsync(KolButtonWcTag, { key: '
|
|
27304
|
+
}) }, 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' }))));
|
|
27243
27305
|
}
|
|
27244
27306
|
validateInline(value) {
|
|
27245
27307
|
validateInline(this, value, {
|
|
@@ -27466,6 +27528,71 @@ class KolQuote {
|
|
|
27466
27528
|
}; }
|
|
27467
27529
|
}
|
|
27468
27530
|
|
|
27531
|
+
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}";
|
|
27532
|
+
|
|
27533
|
+
class KolSelect {
|
|
27534
|
+
constructor(hostRef) {
|
|
27535
|
+
registerInstance(this, hostRef);
|
|
27536
|
+
this.catchRef = (ref) => {
|
|
27537
|
+
this.selectWcRef = ref;
|
|
27538
|
+
};
|
|
27539
|
+
this._disabled = false;
|
|
27540
|
+
this._hideMsg = false;
|
|
27541
|
+
this._hideLabel = false;
|
|
27542
|
+
this._hint = '';
|
|
27543
|
+
this._multiple = false;
|
|
27544
|
+
this._required = false;
|
|
27545
|
+
this._tooltipAlign = 'top';
|
|
27546
|
+
this._touched = false;
|
|
27547
|
+
}
|
|
27548
|
+
async getValue() {
|
|
27549
|
+
var _a;
|
|
27550
|
+
return (_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.getValue();
|
|
27551
|
+
}
|
|
27552
|
+
async kolFocus() {
|
|
27553
|
+
var _a;
|
|
27554
|
+
await ((_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
27555
|
+
}
|
|
27556
|
+
render() {
|
|
27557
|
+
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" }))));
|
|
27558
|
+
}
|
|
27559
|
+
static get style() { return {
|
|
27560
|
+
default: defaultStyleCss$d
|
|
27561
|
+
}; }
|
|
27562
|
+
static get cmpMeta() { return {
|
|
27563
|
+
"$flags$": 297,
|
|
27564
|
+
"$tagName$": "kol-select",
|
|
27565
|
+
"$members$": {
|
|
27566
|
+
"_accessKey": [1, "_access-key"],
|
|
27567
|
+
"_disabled": [4],
|
|
27568
|
+
"_hideMsg": [4, "_hide-msg"],
|
|
27569
|
+
"_hideLabel": [4, "_hide-label"],
|
|
27570
|
+
"_hint": [1],
|
|
27571
|
+
"_icons": [1],
|
|
27572
|
+
"_id": [1],
|
|
27573
|
+
"_label": [1],
|
|
27574
|
+
"_msg": [1],
|
|
27575
|
+
"_multiple": [4],
|
|
27576
|
+
"_name": [1],
|
|
27577
|
+
"_on": [16],
|
|
27578
|
+
"_options": [1],
|
|
27579
|
+
"_required": [4],
|
|
27580
|
+
"_shortKey": [1, "_short-key"],
|
|
27581
|
+
"_rows": [2],
|
|
27582
|
+
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
27583
|
+
"_tabIndex": [2, "_tab-index"],
|
|
27584
|
+
"_tooltipAlign": [1, "_tooltip-align"],
|
|
27585
|
+
"_touched": [1540],
|
|
27586
|
+
"_value": [1544],
|
|
27587
|
+
"getValue": [64],
|
|
27588
|
+
"kolFocus": [64]
|
|
27589
|
+
},
|
|
27590
|
+
"$listeners$": undefined,
|
|
27591
|
+
"$lazyBundleId$": "-",
|
|
27592
|
+
"$attrsToReflect$": [["_touched", "_touched"], ["_value", "_value"]]
|
|
27593
|
+
}; }
|
|
27594
|
+
}
|
|
27595
|
+
|
|
27469
27596
|
const NativeOptionFc = (_a) => {
|
|
27470
27597
|
var { baseClassName = 'kol-select', class: classNames, index, selectedValue, selected, value, label, disabled } = _a, other = __rest(_a, ["baseClassName", "class", "index", "selectedValue", "selected", "value", "label", "disabled"]);
|
|
27471
27598
|
if (selectedValue === undefined) {
|
|
@@ -27652,9 +27779,7 @@ class SelectController extends InputIconController {
|
|
|
27652
27779
|
}
|
|
27653
27780
|
}
|
|
27654
27781
|
|
|
27655
|
-
|
|
27656
|
-
|
|
27657
|
-
class KolSelect {
|
|
27782
|
+
class KolSelectWc {
|
|
27658
27783
|
async getValue() {
|
|
27659
27784
|
if (this._multiple) {
|
|
27660
27785
|
return this.state._value;
|
|
@@ -27688,11 +27813,11 @@ class KolSelect {
|
|
|
27688
27813
|
} });
|
|
27689
27814
|
}
|
|
27690
27815
|
render() {
|
|
27691
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
27816
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '149de6c2a2a155d9869e4d09118d7b511058b606' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '84abd564f808296ad32ea68165780862e7808fd0', state: this.state }, hAsync("form", { key: '3d143d2d857793ef6e744def1eada9346983f4d5', onSubmit: (event) => {
|
|
27692
27817
|
event.preventDefault();
|
|
27693
27818
|
propagateSubmitEventToForm({
|
|
27694
27819
|
form: this.host});
|
|
27695
|
-
} }, hAsync("input", { key: '
|
|
27820
|
+
} }, hAsync("input", { key: '4f654dceadd96f6074e22a56aefec34944ab2faa', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: 'e576920b9756ed1f8fce70c13c070749d463e839' }, this.getSelectProps()))))));
|
|
27696
27821
|
}
|
|
27697
27822
|
constructor(hostRef) {
|
|
27698
27823
|
registerInstance(this, hostRef);
|
|
@@ -27834,12 +27959,9 @@ class KolSelect {
|
|
|
27834
27959
|
"_touched": ["validateTouched"],
|
|
27835
27960
|
"_value": ["validateValue"]
|
|
27836
27961
|
}; }
|
|
27837
|
-
static get style() { return {
|
|
27838
|
-
default: defaultStyleCss$d
|
|
27839
|
-
}; }
|
|
27840
27962
|
static get cmpMeta() { return {
|
|
27841
|
-
"$flags$":
|
|
27842
|
-
"$tagName$": "kol-select",
|
|
27963
|
+
"$flags$": 256,
|
|
27964
|
+
"$tagName$": "kol-select-wc",
|
|
27843
27965
|
"$members$": {
|
|
27844
27966
|
"_accessKey": [1, "_access-key"],
|
|
27845
27967
|
"_disabled": [4],
|
|
@@ -27908,8 +28030,8 @@ class SingleSelectController extends InputIconController {
|
|
|
27908
28030
|
validatePlaceholder(value) {
|
|
27909
28031
|
validatePlaceholder(this.component, value);
|
|
27910
28032
|
}
|
|
27911
|
-
|
|
27912
|
-
watchBoolean(this.component, '
|
|
28033
|
+
validateHasClearButton(value) {
|
|
28034
|
+
watchBoolean(this.component, '_hasClearButton', value);
|
|
27913
28035
|
}
|
|
27914
28036
|
validateRows(value) {
|
|
27915
28037
|
watchNumber(this.component, '_rows', value);
|
|
@@ -27920,7 +28042,7 @@ class SingleSelectController extends InputIconController {
|
|
|
27920
28042
|
this.validateRequired(this.component._required);
|
|
27921
28043
|
this.validateValue(this.component._value);
|
|
27922
28044
|
this.validatePlaceholder(this.component._placeholder);
|
|
27923
|
-
this.
|
|
28045
|
+
this.validateHasClearButton(this.component._hasClearButton);
|
|
27924
28046
|
this.validateRows(this.component._rows);
|
|
27925
28047
|
}
|
|
27926
28048
|
}
|
|
@@ -28097,7 +28219,7 @@ class KolSingleSelect {
|
|
|
28097
28219
|
render() {
|
|
28098
28220
|
var _a;
|
|
28099
28221
|
const isDisabled = this.state._disabled === true;
|
|
28100
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
28222
|
+
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', {
|
|
28101
28223
|
'kol-single-select__delete--disabled': isDisabled,
|
|
28102
28224
|
}), _on: {
|
|
28103
28225
|
onClick: () => {
|
|
@@ -28105,9 +28227,9 @@ class KolSingleSelect {
|
|
|
28105
28227
|
this.clearSelection();
|
|
28106
28228
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
28107
28229
|
},
|
|
28108
|
-
} })), hAsync(KolIconTag, { key: '
|
|
28230
|
+
} })), hAsync(KolIconTag, { key: '6091eefa514ecc40a2996341cbc0f082c6117c10', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
28109
28231
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
28110
|
-
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '
|
|
28232
|
+
}), 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) => {
|
|
28111
28233
|
if (el)
|
|
28112
28234
|
this.refOptions[index] = el;
|
|
28113
28235
|
}, selected: this._value === option.value, disabled: option.disabled ? true : false, onClick: (event) => {
|
|
@@ -28283,13 +28405,13 @@ class KolSingleSelect {
|
|
|
28283
28405
|
this._tooltipAlign = 'top';
|
|
28284
28406
|
this._touched = false;
|
|
28285
28407
|
this._value = null;
|
|
28286
|
-
this.
|
|
28408
|
+
this._hasClearButton = true;
|
|
28287
28409
|
this.state = {
|
|
28288
28410
|
_hideMsg: false,
|
|
28289
28411
|
_id: `id-${nonce()}`,
|
|
28290
28412
|
_label: '',
|
|
28291
28413
|
_options: [],
|
|
28292
|
-
|
|
28414
|
+
_hasClearButton: true,
|
|
28293
28415
|
};
|
|
28294
28416
|
this.inputHasFocus = false;
|
|
28295
28417
|
this.controller = new SingleSelectController(this, 'single-select', this.host);
|
|
@@ -28355,8 +28477,8 @@ class KolSingleSelect {
|
|
|
28355
28477
|
this.oldValue = value;
|
|
28356
28478
|
this.updateInputValue(value);
|
|
28357
28479
|
}
|
|
28358
|
-
|
|
28359
|
-
this.controller.
|
|
28480
|
+
validateHasClearButton(value) {
|
|
28481
|
+
this.controller.validateHasClearButton(value);
|
|
28360
28482
|
}
|
|
28361
28483
|
validateRows(value) {
|
|
28362
28484
|
this.controller.validateRows(value);
|
|
@@ -28413,7 +28535,7 @@ class KolSingleSelect {
|
|
|
28413
28535
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
28414
28536
|
"_touched": ["validateTouched"],
|
|
28415
28537
|
"_value": ["validateValue"],
|
|
28416
|
-
"
|
|
28538
|
+
"_hasClearButton": ["validateHasClearButton"],
|
|
28417
28539
|
"_rows": ["validateRows"]
|
|
28418
28540
|
}; }
|
|
28419
28541
|
static get style() { return {
|
|
@@ -28442,7 +28564,7 @@ class KolSingleSelect {
|
|
|
28442
28564
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
28443
28565
|
"_touched": [1540],
|
|
28444
28566
|
"_value": [1544],
|
|
28445
|
-
"
|
|
28567
|
+
"_hasClearButton": [4, "_has-clear-button"],
|
|
28446
28568
|
"_rows": [2],
|
|
28447
28569
|
"_isOpen": [32],
|
|
28448
28570
|
"_filteredOptions": [32],
|
|
@@ -28470,7 +28592,7 @@ class KolSkipNav {
|
|
|
28470
28592
|
};
|
|
28471
28593
|
}
|
|
28472
28594
|
render() {
|
|
28473
|
-
return (hAsync("nav", { key: '
|
|
28595
|
+
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) => {
|
|
28474
28596
|
return (hAsync("li", { class: "kol-skip-nav__list-item", key: index }, hAsync(KolLinkWcTag, Object.assign({}, link, { ref: index === 0 ? (el) => (this.firstLinkRef = el) : undefined }))));
|
|
28475
28597
|
}))));
|
|
28476
28598
|
}
|
|
@@ -28546,7 +28668,7 @@ class KolSpin {
|
|
|
28546
28668
|
}
|
|
28547
28669
|
render() {
|
|
28548
28670
|
var _a, _b;
|
|
28549
|
-
return (hAsync(Host, { key: '
|
|
28671
|
+
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)))));
|
|
28550
28672
|
}
|
|
28551
28673
|
validateShow(value) {
|
|
28552
28674
|
this.showToggled = this.state._show === true && this._show === false;
|
|
@@ -28633,10 +28755,10 @@ class KolSplitButton {
|
|
|
28633
28755
|
}
|
|
28634
28756
|
render() {
|
|
28635
28757
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
28636
|
-
return (hAsync("div", { key: '
|
|
28758
|
+
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', {
|
|
28637
28759
|
[this._variant]: this._variant !== 'custom',
|
|
28638
28760
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
28639
|
-
}), 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: '
|
|
28761
|
+
}), 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' }))));
|
|
28640
28762
|
}
|
|
28641
28763
|
async closePopup() {
|
|
28642
28764
|
this.handleOnClose();
|
|
@@ -28743,10 +28865,10 @@ class KolTableSettings {
|
|
|
28743
28865
|
}
|
|
28744
28866
|
render() {
|
|
28745
28867
|
const sortedColumns = this.tableSettings.columns;
|
|
28746
|
-
return (hAsync(KolPopoverButtonWcTag, { key: '
|
|
28868
|
+
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) => {
|
|
28747
28869
|
var _a, _b;
|
|
28748
28870
|
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" })));
|
|
28749
|
-
}))), hAsync("div", { key: '
|
|
28871
|
+
}))), 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" }))))));
|
|
28750
28872
|
}
|
|
28751
28873
|
get host() { return getElement(this); }
|
|
28752
28874
|
static get watchers() { return {
|
|
@@ -28807,7 +28929,7 @@ const validateTableSettings = (component, value) => {
|
|
|
28807
28929
|
watchValidator(component, `_tableSettings`, (value) => typeof value === 'object' && value !== null, new Set(['TableSettings']), value);
|
|
28808
28930
|
};
|
|
28809
28931
|
|
|
28810
|
-
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}";
|
|
28932
|
+
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}";
|
|
28811
28933
|
|
|
28812
28934
|
const PAGINATION_OPTIONS = [10, 20, 50, 100];
|
|
28813
28935
|
const paginationValidator = (value) => value === true || value === '' || (typeof value === 'object' && value !== null);
|
|
@@ -29070,17 +29192,7 @@ class KolTableStateful {
|
|
|
29070
29192
|
label: `${this.state._label} (${translate(`kol-pagination-position-${position}`)})`,
|
|
29071
29193
|
},
|
|
29072
29194
|
});
|
|
29073
|
-
return (hAsync("div", { class: `kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}` }, hAsync("
|
|
29074
|
-
placeholders: {
|
|
29075
|
-
start: this.pageEndSlice > 0 ? (this.pageStartSlice + 1).toString() : '0',
|
|
29076
|
-
end: this.pageEndSlice.toString(),
|
|
29077
|
-
total: this.state._pagination && this.state._pagination._max > 0
|
|
29078
|
-
? this.state._pagination._max.toString()
|
|
29079
|
-
: Array.isArray(this.state._data)
|
|
29080
|
-
? this.state._data.length.toString()
|
|
29081
|
-
: '0',
|
|
29082
|
-
},
|
|
29083
|
-
})), 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 }))));
|
|
29195
|
+
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 }))));
|
|
29084
29196
|
}
|
|
29085
29197
|
getHeaderCellSortState(headerCell) {
|
|
29086
29198
|
if (!this.disableSort && typeof headerCell.compareFn === 'function') {
|
|
@@ -29146,7 +29258,7 @@ class KolTableStateful {
|
|
|
29146
29258
|
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 : [],
|
|
29147
29259
|
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 : [],
|
|
29148
29260
|
};
|
|
29149
|
-
return (hAsync(Host, { key: '
|
|
29261
|
+
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: {
|
|
29150
29262
|
onSort: (_, payload) => {
|
|
29151
29263
|
this.handleSort(payload);
|
|
29152
29264
|
},
|
|
@@ -29205,7 +29317,7 @@ let KolTableStateless$1 = class KolTableStateless {
|
|
|
29205
29317
|
registerInstance(this, hostRef);
|
|
29206
29318
|
}
|
|
29207
29319
|
render() {
|
|
29208
|
-
return (hAsync(KolTableStatelessWcTag, { key: '
|
|
29320
|
+
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 }));
|
|
29209
29321
|
}
|
|
29210
29322
|
static get style() { return {
|
|
29211
29323
|
default: defaultStyleCss$7
|
|
@@ -29782,15 +29894,15 @@ class KolTableStateless {
|
|
|
29782
29894
|
const hasSortDirection = typeof cell.sortDirection === 'string';
|
|
29783
29895
|
const canSort = sortableSetting && hasSortDirection;
|
|
29784
29896
|
let ariaSort = 'none';
|
|
29785
|
-
let sortButtonIcon = '
|
|
29897
|
+
let sortButtonIcon = 'kolicon-sort-neutral';
|
|
29786
29898
|
if (canSort && cell.sortDirection) {
|
|
29787
29899
|
switch (cell.sortDirection) {
|
|
29788
29900
|
case 'ASC':
|
|
29789
|
-
sortButtonIcon = '
|
|
29901
|
+
sortButtonIcon = 'kolicon-sort-asc';
|
|
29790
29902
|
ariaSort = 'ascending';
|
|
29791
29903
|
break;
|
|
29792
29904
|
case 'DESC':
|
|
29793
|
-
sortButtonIcon = '
|
|
29905
|
+
sortButtonIcon = 'kolicon-sort-desc';
|
|
29794
29906
|
ariaSort = 'descending';
|
|
29795
29907
|
break;
|
|
29796
29908
|
default:
|
|
@@ -29845,12 +29957,12 @@ class KolTableStateless {
|
|
|
29845
29957
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
29846
29958
|
this.checkboxRefs = [];
|
|
29847
29959
|
const sortedHorizontalHeaders = (_a = this.state._headerCells.horizontal) === null || _a === void 0 ? void 0 : _a.map((row) => this.sortByColumnPosition(row));
|
|
29848
|
-
return (hAsync("div", { key: '
|
|
29960
|
+
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: {
|
|
29849
29961
|
minWidth: this.getTableMinWidth(),
|
|
29850
|
-
} }, hAsync("caption", { key: '
|
|
29962
|
+
} }, 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" }, [
|
|
29851
29963
|
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))))),
|
|
29852
29964
|
this.renderSpacer('head', sortedHorizontalHeaders),
|
|
29853
|
-
])), hAsync("tbody", { key: '
|
|
29965
|
+
])), hAsync("tbody", { key: 'd257362cf30d5afa172a0b832d480a6ea6129145', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
|
|
29854
29966
|
}
|
|
29855
29967
|
get host() { return getElement(this); }
|
|
29856
29968
|
static get watchers() { return {
|
|
@@ -30088,12 +30200,12 @@ class KolTabs {
|
|
|
30088
30200
|
renderButtonGroup() {
|
|
30089
30201
|
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: {
|
|
30090
30202
|
onClick: this.onCreate,
|
|
30091
|
-
}, _icons: "
|
|
30203
|
+
}, _icons: "kolicon-plus", "data-testid": "tabs-create-button" }))));
|
|
30092
30204
|
}
|
|
30093
30205
|
render() {
|
|
30094
|
-
return (hAsync("div", { key: '
|
|
30206
|
+
return (hAsync("div", { key: '0bd0aceb42f67707667ebb5cb15413d135a54199', ref: (el) => {
|
|
30095
30207
|
this.tabPanelsElement = el;
|
|
30096
|
-
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
30208
|
+
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: 'd42d286a6a315f1b181c9c1a167e53c5c202249a', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
|
|
30097
30209
|
}
|
|
30098
30210
|
validateAlign(value) {
|
|
30099
30211
|
validateAlign(this, value);
|
|
@@ -30319,7 +30431,7 @@ class KolTextarea {
|
|
|
30319
30431
|
} });
|
|
30320
30432
|
}
|
|
30321
30433
|
render() {
|
|
30322
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
30434
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '2c2f033030f99e33507c059de0820cc72de7a599' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b64d16f3b7484d98ef5c85f0a2fd41a90bc2469a', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: 'dec62bcfd41aaf9af259d7c40bb194d5dd157e8b' }, this.getTextAreaProps())))));
|
|
30323
30435
|
}
|
|
30324
30436
|
constructor(hostRef) {
|
|
30325
30437
|
registerInstance(this, hostRef);
|
|
@@ -30528,7 +30640,7 @@ class KolTextarea {
|
|
|
30528
30640
|
}; }
|
|
30529
30641
|
}
|
|
30530
30642
|
|
|
30531
|
-
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}";
|
|
30643
|
+
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}";
|
|
30532
30644
|
|
|
30533
30645
|
const TRANSITION_TIMEOUT = 300;
|
|
30534
30646
|
class KolToastContainer {
|
|
@@ -30591,7 +30703,7 @@ class KolToastContainer {
|
|
|
30591
30703
|
}
|
|
30592
30704
|
}
|
|
30593
30705
|
render() {
|
|
30594
|
-
return (hAsync(Host, { key: '
|
|
30706
|
+
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: {
|
|
30595
30707
|
onClick: () => {
|
|
30596
30708
|
void this.closeAll();
|
|
30597
30709
|
},
|
|
@@ -30645,7 +30757,7 @@ class KolToolbar {
|
|
|
30645
30757
|
return Object.assign(Object.assign({}, rest), { _icons, _disabled });
|
|
30646
30758
|
}
|
|
30647
30759
|
render() {
|
|
30648
|
-
return (hAsync("div", { key: '
|
|
30760
|
+
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)));
|
|
30649
30761
|
}
|
|
30650
30762
|
validateLabel(value) {
|
|
30651
30763
|
validateLabel(this, value);
|
|
@@ -30884,7 +30996,7 @@ class KolTooltipWc {
|
|
|
30884
30996
|
getDocument().removeEventListener('keyup', this.hideTooltipByEscape);
|
|
30885
30997
|
}
|
|
30886
30998
|
render() {
|
|
30887
|
-
return (hAsync(Host, { key: '
|
|
30999
|
+
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 })))));
|
|
30888
31000
|
}
|
|
30889
31001
|
validateBadgeText(value) {
|
|
30890
31002
|
validateBadgeText(this, value);
|
|
@@ -30962,7 +31074,7 @@ class KolTree {
|
|
|
30962
31074
|
registerInstance(this, hostRef);
|
|
30963
31075
|
}
|
|
30964
31076
|
render() {
|
|
30965
|
-
return (hAsync(KolTreeWcTag, { key: '
|
|
31077
|
+
return (hAsync(KolTreeWcTag, { key: 'c9729dc44fcf465925dc6a866d399e62413cf9e1', _label: this._label }, hAsync("slot", { key: 'ff341bf2e8b093cedea4f62ee4c9f54403aa1e7c' })));
|
|
30966
31078
|
}
|
|
30967
31079
|
static get style() { return {
|
|
30968
31080
|
default: defaultStyleCss$2
|
|
@@ -31005,7 +31117,7 @@ class KolTreeItem {
|
|
|
31005
31117
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
31006
31118
|
}
|
|
31007
31119
|
render() {
|
|
31008
|
-
return (hAsync(KolTreeItemWcTag, { key: '
|
|
31120
|
+
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' })));
|
|
31009
31121
|
}
|
|
31010
31122
|
static get style() { return {
|
|
31011
31123
|
default: defaultStyleCss$1
|
|
@@ -31043,12 +31155,12 @@ class KolTreeItemWc {
|
|
|
31043
31155
|
}
|
|
31044
31156
|
render() {
|
|
31045
31157
|
const { _href, _active, _hasChildren, _open, _label } = this.state;
|
|
31046
|
-
return (hAsync(Host, { key: '
|
|
31158
|
+
return (hAsync(Host, { key: '442889bb000355873e79c2df59cce348ed0afb0c', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { key: 'ab695fb7c3857e493631704e56f86b6c6211ad9f', class: "kol-tree-item", style: {
|
|
31047
31159
|
'--level': `${this.level}`,
|
|
31048
|
-
} }, hAsync(KolLinkWcTag, { key: '
|
|
31160
|
+
} }, hAsync(KolLinkWcTag, { key: 'ac9855976707c3665cb09f90af3a6ecd490bb653', class: clsx('kol-tree-item__link', {
|
|
31049
31161
|
'kol-tree-item__link--first-level': this.level === 0,
|
|
31050
31162
|
'kol-tree-item__link--active': _active,
|
|
31051
|
-
}), _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: '
|
|
31163
|
+
}), _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' })))));
|
|
31052
31164
|
}
|
|
31053
31165
|
validateActive(value) {
|
|
31054
31166
|
validateActive(this, value || false);
|
|
@@ -31152,7 +31264,7 @@ class KolTreeWc {
|
|
|
31152
31264
|
validateLabel(this, value);
|
|
31153
31265
|
}
|
|
31154
31266
|
render() {
|
|
31155
|
-
return (hAsync(Host, { key: '
|
|
31267
|
+
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' })))));
|
|
31156
31268
|
}
|
|
31157
31269
|
static isTreeItem(element) {
|
|
31158
31270
|
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
|
@@ -31349,8 +31461,8 @@ class KolVersion {
|
|
|
31349
31461
|
};
|
|
31350
31462
|
}
|
|
31351
31463
|
render() {
|
|
31352
|
-
return (hAsync(Host, { key: '
|
|
31353
|
-
left: { icon: '
|
|
31464
|
+
return (hAsync(Host, { key: 'e510fa48ba288ec02a12f779576f8b5044bffbb3', class: "kol-version" }, hAsync(KolBadgeTag, { key: '7f75603236af9c4803401cfb821bc68c8b5b0015', _color: "#bec5c9", _icons: {
|
|
31465
|
+
left: { icon: 'kolicon-version', label: this.translateVersion },
|
|
31354
31466
|
}, _label: this.state._label })));
|
|
31355
31467
|
}
|
|
31356
31468
|
validateLabel(value) {
|
|
@@ -31439,6 +31551,7 @@ registerComponents([
|
|
|
31439
31551
|
KolProgress,
|
|
31440
31552
|
KolQuote,
|
|
31441
31553
|
KolSelect,
|
|
31554
|
+
KolSelectWc,
|
|
31442
31555
|
KolSingleSelect,
|
|
31443
31556
|
KolSkipNav,
|
|
31444
31557
|
KolSpin,
|