@public-ui/hydrate 3.0.9-rc.1 → 3.0.9-rc.3
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 +185 -76
- package/dist/index.mjs +185 -76
- 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":"3.0.9-rc.
|
|
149
|
+
const Env = /* kolibri */ {"kolibriVersion":"3.0.9-rc.3"};
|
|
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,
|
|
@@ -6079,7 +6079,7 @@ let KolLinkWcTag = 'kol-link-wc';
|
|
|
6079
6079
|
let KolPaginationWcTag = 'kol-pagination-wc';
|
|
6080
6080
|
let KolPopoverWcTag = 'kol-popover-wc';
|
|
6081
6081
|
let KolPopoverButtonWcTag = 'kol-popover-button-wc';
|
|
6082
|
-
let
|
|
6082
|
+
let KolSelectWcTag = 'kol-select-wc';
|
|
6083
6083
|
let KolTableSettingsWcTag = 'kol-table-settings-wc';
|
|
6084
6084
|
let KolTableStatelessWcTag = 'kol-table-stateless-wc';
|
|
6085
6085
|
let KolTooltipWcTag = 'kol-tooltip-wc';
|
|
@@ -6473,7 +6473,7 @@ var locale_de = {
|
|
|
6473
6473
|
page: 'Seite',
|
|
6474
6474
|
'page-current': 'Seite {{page}}',
|
|
6475
6475
|
'page-selected': 'Seite {{page}} ist ausgewählt',
|
|
6476
|
-
'page-per-site': '
|
|
6476
|
+
'page-per-site': 'Einträge pro Seite',
|
|
6477
6477
|
'nav-maximize': 'Navigation maximieren',
|
|
6478
6478
|
'nav-minimize': 'Navigation minimieren',
|
|
6479
6479
|
'logo-description': 'Logo {{orgShort}}. Bundesadler mit Flaggenstab und Schriftzug {{orgLong}}',
|
|
@@ -6544,7 +6544,7 @@ var locale_en = {
|
|
|
6544
6544
|
page: 'Page',
|
|
6545
6545
|
'page-current': 'Page {{page}}',
|
|
6546
6546
|
'page-selected': 'Page {{page}} is selected',
|
|
6547
|
-
'page-per-site': '
|
|
6547
|
+
'page-per-site': 'Entries per page',
|
|
6548
6548
|
'nav-maximize': 'Maximize navigation',
|
|
6549
6549
|
'nav-minimize': 'Minimize navigation',
|
|
6550
6550
|
'logo-description': 'Logo {{orgShort}}. Federal eagle with flag staff and lettering {{orgLong}}',
|
|
@@ -19407,7 +19407,7 @@ class KolCardWc {
|
|
|
19407
19407
|
this.validateOnValue = (value) => typeof value === 'object' && value !== null && typeof value.onClose === 'function';
|
|
19408
19408
|
}
|
|
19409
19409
|
render() {
|
|
19410
|
-
return (hAsync(Host, { key: '
|
|
19410
|
+
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: 'a228fd3f5ace0033ae7eb47b98c6b4d18fcb3ff5', class: "kol-card__close-button", "data-testid": "card-close-button", _hideLabel: true, _icons: {
|
|
19411
19411
|
left: {
|
|
19412
19412
|
icon: 'codicon codicon-close',
|
|
19413
19413
|
},
|
|
@@ -23309,7 +23309,23 @@ class KolInputRadio {
|
|
|
23309
23309
|
}
|
|
23310
23310
|
async kolFocus() {
|
|
23311
23311
|
var _a;
|
|
23312
|
-
(_a = this.
|
|
23312
|
+
(_a = this.getFocusableInput()) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23313
|
+
}
|
|
23314
|
+
getFocusableInput() {
|
|
23315
|
+
const options = this.state._options;
|
|
23316
|
+
const isComponentDisabled = Boolean(this.state._disabled);
|
|
23317
|
+
const selectedIndex = options.findIndex((option) => option.value === this.state._value && !isComponentDisabled && !option.disabled);
|
|
23318
|
+
if (selectedIndex !== -1) {
|
|
23319
|
+
const input = this.inputRefs.get(selectedIndex);
|
|
23320
|
+
if (input) {
|
|
23321
|
+
return input;
|
|
23322
|
+
}
|
|
23323
|
+
}
|
|
23324
|
+
const firstEnabledIndex = options.findIndex((option) => !isComponentDisabled && !option.disabled);
|
|
23325
|
+
if (firstEnabledIndex !== -1) {
|
|
23326
|
+
return this.inputRefs.get(firstEnabledIndex);
|
|
23327
|
+
}
|
|
23328
|
+
return undefined;
|
|
23313
23329
|
}
|
|
23314
23330
|
getFormFieldProps() {
|
|
23315
23331
|
return {
|
|
@@ -23330,7 +23346,7 @@ class KolInputRadio {
|
|
|
23330
23346
|
};
|
|
23331
23347
|
}
|
|
23332
23348
|
render() {
|
|
23333
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23349
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '9e2b42643b7eec87fcef68c4e8bf471e67738689' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
|
|
23334
23350
|
}
|
|
23335
23351
|
calculateDisabled(option) {
|
|
23336
23352
|
return Boolean(this.state._disabled) || Boolean(option.disabled);
|
|
@@ -23351,7 +23367,12 @@ class KolInputRadio {
|
|
|
23351
23367
|
getInputProps(option, id, index, selected) {
|
|
23352
23368
|
return {
|
|
23353
23369
|
state: this.state,
|
|
23354
|
-
inputProps: Object.assign(Object.assign({ id: id, ref:
|
|
23370
|
+
inputProps: Object.assign(Object.assign({ id: id, ref: (ref) => {
|
|
23371
|
+
this.catchInputRef(index)(ref);
|
|
23372
|
+
if (selected) {
|
|
23373
|
+
this.catchRef(ref);
|
|
23374
|
+
}
|
|
23375
|
+
}, '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) => {
|
|
23355
23376
|
this.controller.onFacade.onFocus(event);
|
|
23356
23377
|
this.inputHasFocus = true;
|
|
23357
23378
|
}, onBlur: (event) => {
|
|
@@ -23367,9 +23388,18 @@ class KolInputRadio {
|
|
|
23367
23388
|
}
|
|
23368
23389
|
constructor(hostRef) {
|
|
23369
23390
|
registerInstance(this, hostRef);
|
|
23391
|
+
this.inputRefs = new Map();
|
|
23370
23392
|
this.catchRef = (ref) => {
|
|
23371
23393
|
this.inputRef = ref;
|
|
23372
23394
|
};
|
|
23395
|
+
this.catchInputRef = (index) => (ref) => {
|
|
23396
|
+
if (ref) {
|
|
23397
|
+
this.inputRefs.set(index, ref);
|
|
23398
|
+
}
|
|
23399
|
+
else {
|
|
23400
|
+
this.inputRefs.delete(index);
|
|
23401
|
+
}
|
|
23402
|
+
};
|
|
23373
23403
|
this._disabled = false;
|
|
23374
23404
|
this._hideMsg = false;
|
|
23375
23405
|
this._hideLabel = false;
|
|
@@ -24660,7 +24690,7 @@ class KolNav {
|
|
|
24660
24690
|
'kol-nav__list--horizontal': props.deep === 0 && props.orientation === 'horizontal',
|
|
24661
24691
|
'kol-nav__list--vertical': props.deep !== 0 || props.orientation === 'vertical',
|
|
24662
24692
|
}), id: props.deep > 0 ? props.id : undefined }, props.links.map((link, index) => {
|
|
24663
|
-
return this.li(props.collapsible, props.
|
|
24693
|
+
return this.li(props.collapsible, props.deep, index, link, props.orientation, props.id);
|
|
24664
24694
|
})));
|
|
24665
24695
|
};
|
|
24666
24696
|
this._collapsible = true;
|
|
@@ -24685,19 +24715,40 @@ class KolNav {
|
|
|
24685
24715
|
collapseChildren(children) {
|
|
24686
24716
|
this.state = Object.assign(Object.assign({}, this.state), { _expandedChildren: this.state._expandedChildren.filter((searchChildren) => searchChildren !== children) });
|
|
24687
24717
|
}
|
|
24688
|
-
|
|
24689
|
-
|
|
24690
|
-
|
|
24691
|
-
|
|
24692
|
-
? ((_a = entry._icons) === null || _a === void 0 ? void 0 : _a.toString()) || (this.state._hideLabel ? 'codicon codicon-symbol-method' : undefined)
|
|
24693
|
-
: undefined,
|
|
24694
|
-
right: collapsible && hasChildren ? 'codicon codicon-' + (expanded ? 'remove' : 'add') : undefined,
|
|
24718
|
+
buildIconObject(collapsible, expanded, leftIcon) {
|
|
24719
|
+
const icon = {
|
|
24720
|
+
left: '',
|
|
24721
|
+
right: '',
|
|
24695
24722
|
};
|
|
24723
|
+
if (this.state._hasIconsWhenExpanded && leftIcon) {
|
|
24724
|
+
icon.left = leftIcon;
|
|
24725
|
+
}
|
|
24726
|
+
if (this.state._hideLabel) {
|
|
24727
|
+
if (leftIcon) {
|
|
24728
|
+
icon.left = leftIcon;
|
|
24729
|
+
}
|
|
24730
|
+
else {
|
|
24731
|
+
icon.left = 'codicon codicon-symbol-method';
|
|
24732
|
+
}
|
|
24733
|
+
}
|
|
24734
|
+
if (collapsible) {
|
|
24735
|
+
if (expanded) {
|
|
24736
|
+
icon.right = 'codicon codicon-remove';
|
|
24737
|
+
}
|
|
24738
|
+
else {
|
|
24739
|
+
icon.right = 'codicon codicon-add';
|
|
24740
|
+
}
|
|
24741
|
+
}
|
|
24742
|
+
return icon;
|
|
24743
|
+
}
|
|
24744
|
+
entry(collapsible, hasChildren, entry, expanded, ariaID) {
|
|
24745
|
+
var _a;
|
|
24746
|
+
const icons = this.buildIconObject(collapsible && hasChildren, expanded, (_a = entry._icons) === null || _a === void 0 ? void 0 : _a.toString());
|
|
24696
24747
|
return (hAsync("div", { class: "kol-nav__entry-wrapper" }, entryIsLink(entry) ? (hAsync(KolLinkWcTag, Object.assign({ class: clsx('kol-nav__entry kol-nav__entry--link', {
|
|
24697
24748
|
'kol-nav__entry--collapsible': collapsible,
|
|
24698
|
-
}) }, entry, { _hideLabel:
|
|
24749
|
+
}) }, 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', {
|
|
24699
24750
|
'kol-nav__entry--collapsible': collapsible,
|
|
24700
|
-
}), _label: entry._label, _hideLabel:
|
|
24751
|
+
}), _label: entry._label, _hideLabel: this.state._hideLabel, _icons: icons, _ariaControls: collapsible && hasChildren && expanded ? ariaID : undefined, _ariaExpanded: collapsible && hasChildren ? expanded : undefined, _on: {
|
|
24701
24752
|
onClick: (event, value) => {
|
|
24702
24753
|
if (entryIsButton(entry) && typeof entry._on.onClick === 'function') {
|
|
24703
24754
|
entry._on.onClick(event, value);
|
|
@@ -24706,7 +24757,7 @@ class KolNav {
|
|
|
24706
24757
|
},
|
|
24707
24758
|
} }))));
|
|
24708
24759
|
}
|
|
24709
|
-
li(collapsible,
|
|
24760
|
+
li(collapsible, deep, index, link, orientation, ariaIDparent) {
|
|
24710
24761
|
const active = !!link._active;
|
|
24711
24762
|
const hasChildren = Array.isArray(link._children) && link._children.length > 0;
|
|
24712
24763
|
const expanded = Boolean(link._children && this.state._expandedChildren.includes(link._children));
|
|
@@ -24715,7 +24766,7 @@ class KolNav {
|
|
|
24715
24766
|
'kol-nav__list-item--active': active,
|
|
24716
24767
|
'kol-nav__list-item--expanded': expanded,
|
|
24717
24768
|
'kol-nav__list-item--has-children': hasChildren,
|
|
24718
|
-
}), key: index }, this.entry(collapsible,
|
|
24769
|
+
}), key: index }, this.entry(collapsible, hasChildren, link, expanded, ariaID), expanded && hAsync(this.linkList, { collapsible: collapsible, deep: deep + 1, links: link._children || [], orientation: orientation, id: ariaID })));
|
|
24719
24770
|
}
|
|
24720
24771
|
initializeExpandedChildren() {
|
|
24721
24772
|
this.state = Object.assign(Object.assign({}, this.state), { _expandedChildren: [] });
|
|
@@ -24744,14 +24795,11 @@ class KolNav {
|
|
|
24744
24795
|
hasCompactButton = false;
|
|
24745
24796
|
devWarning(`[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden.`);
|
|
24746
24797
|
}
|
|
24747
|
-
|
|
24748
|
-
const hideLabel = this.state._hideLabel === true;
|
|
24749
|
-
const orientation = this.state._orientation;
|
|
24750
|
-
return (hAsync("div", { key: '12bfebdeb71dff8a681907c30a9bdde7f0d359b3', class: clsx('kol-nav', `kol-nav--${orientation}`, {
|
|
24798
|
+
return (hAsync("div", { key: 'b8db85b304f436fa5882f487f6b83a74f833c943', class: clsx('kol-nav', `kol-nav--${this.state._orientation}`, {
|
|
24751
24799
|
'kol-nav--is-compact': this.state._hideLabel,
|
|
24752
|
-
}) }, hAsync("nav", { key: '
|
|
24800
|
+
}) }, hAsync("nav", { key: 'e10d8ebdf16027383e98ea463f20b5ee7a30617d', "aria-label": this.state._label, class: "kol-nav__navigation", id: this.navId }, hAsync(this.linkList, { key: '88b5acc16bcebe287533a7f0ed06a2a3d6994a6d', collapsible: this.state._collapsible, deep: 0, links: this.state._links, orientation: this.state._orientation, id: this.listId })), hasCompactButton && (hAsync("div", { key: 'e7f4432560e5315178f182b7197da9d66f1ee901', class: "kol-nav__compact" }, hAsync(KolButtonWcTag, { key: '23b584805e69dc1cb20204a77adae0aefb313b21', class: "kol-nav__toggle-button", _ariaControls: this.navId, _ariaExpanded: !this.state._hideLabel, _icons: this.state._hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(this.state._hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
|
|
24753
24801
|
onClick: () => {
|
|
24754
|
-
this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel
|
|
24802
|
+
this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: !this.state._hideLabel });
|
|
24755
24803
|
},
|
|
24756
24804
|
}, _tooltipAlign: "right" })))));
|
|
24757
24805
|
}
|
|
@@ -24835,7 +24883,7 @@ class KolNav {
|
|
|
24835
24883
|
}; }
|
|
24836
24884
|
}
|
|
24837
24885
|
|
|
24838
|
-
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}";
|
|
24886
|
+
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) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\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: 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-pagination__page-size-select .kol-form-field-select {\n align-items: center;\n grid-template-columns: 1fr max-content;\n }\n}";
|
|
24839
24887
|
|
|
24840
24888
|
class KolPagination {
|
|
24841
24889
|
constructor(hostRef) {
|
|
@@ -25028,7 +25076,7 @@ class KolPaginationWc {
|
|
|
25028
25076
|
for (const value of nextValue) {
|
|
25029
25077
|
if (typeof value === 'number') {
|
|
25030
25078
|
options.push({
|
|
25031
|
-
label:
|
|
25079
|
+
label: `${value}`,
|
|
25032
25080
|
value: value,
|
|
25033
25081
|
});
|
|
25034
25082
|
}
|
|
@@ -25064,9 +25112,9 @@ class KolPaginationWc {
|
|
|
25064
25112
|
return null;
|
|
25065
25113
|
}
|
|
25066
25114
|
});
|
|
25067
|
-
return (hAsync(Host, { class: "kol-pagination" }, 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(
|
|
25115
|
+
return (hAsync(Host, { class: "kol-pagination" }, 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: {
|
|
25068
25116
|
onChange: this.onChangePageSize,
|
|
25069
|
-
}, _value: this.state._pageSize }))));
|
|
25117
|
+
}, _value: this.state._pageSize })))));
|
|
25070
25118
|
}
|
|
25071
25119
|
getUnselectedPageButton(page) {
|
|
25072
25120
|
const pageText = NUMBER_FORMATTER.format(page);
|
|
@@ -27245,11 +27293,11 @@ class KolPopoverButton {
|
|
|
27245
27293
|
(_c = this.cleanupAutoPositioning) === null || _c === void 0 ? void 0 : _c.call(this);
|
|
27246
27294
|
}
|
|
27247
27295
|
render() {
|
|
27248
|
-
return (hAsync("div", { key: '
|
|
27296
|
+
return (hAsync("div", { key: '874282cd81b305d92a155d8c848a5004e128db80', class: clsx('kol-popover-button', {
|
|
27249
27297
|
'kol-popover-button--open': this.popoverOpen,
|
|
27250
27298
|
'kol-popover-button--inline': this.state._inline === true,
|
|
27251
27299
|
'kol-popover-button--standalone': this.state._inline === false,
|
|
27252
|
-
}) }, hAsync(KolButtonWcTag, { key: '
|
|
27300
|
+
}) }, 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' }))));
|
|
27253
27301
|
}
|
|
27254
27302
|
validateInline(value) {
|
|
27255
27303
|
validateInline(this, value, {
|
|
@@ -27476,6 +27524,71 @@ class KolQuote {
|
|
|
27476
27524
|
}; }
|
|
27477
27525
|
}
|
|
27478
27526
|
|
|
27527
|
+
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) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\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}";
|
|
27528
|
+
|
|
27529
|
+
class KolSelect {
|
|
27530
|
+
constructor(hostRef) {
|
|
27531
|
+
registerInstance(this, hostRef);
|
|
27532
|
+
this.catchRef = (ref) => {
|
|
27533
|
+
this.selectWcRef = ref;
|
|
27534
|
+
};
|
|
27535
|
+
this._disabled = false;
|
|
27536
|
+
this._hideMsg = false;
|
|
27537
|
+
this._hideLabel = false;
|
|
27538
|
+
this._hint = '';
|
|
27539
|
+
this._multiple = false;
|
|
27540
|
+
this._required = false;
|
|
27541
|
+
this._tooltipAlign = 'top';
|
|
27542
|
+
this._touched = false;
|
|
27543
|
+
}
|
|
27544
|
+
async getValue() {
|
|
27545
|
+
var _a;
|
|
27546
|
+
return (_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.getValue();
|
|
27547
|
+
}
|
|
27548
|
+
async kolFocus() {
|
|
27549
|
+
var _a;
|
|
27550
|
+
await ((_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
27551
|
+
}
|
|
27552
|
+
render() {
|
|
27553
|
+
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" }))));
|
|
27554
|
+
}
|
|
27555
|
+
static get style() { return {
|
|
27556
|
+
default: defaultStyleCss$d
|
|
27557
|
+
}; }
|
|
27558
|
+
static get cmpMeta() { return {
|
|
27559
|
+
"$flags$": 297,
|
|
27560
|
+
"$tagName$": "kol-select",
|
|
27561
|
+
"$members$": {
|
|
27562
|
+
"_accessKey": [1, "_access-key"],
|
|
27563
|
+
"_disabled": [4],
|
|
27564
|
+
"_hideMsg": [4, "_hide-msg"],
|
|
27565
|
+
"_hideLabel": [4, "_hide-label"],
|
|
27566
|
+
"_hint": [1],
|
|
27567
|
+
"_icons": [1],
|
|
27568
|
+
"_id": [1],
|
|
27569
|
+
"_label": [1],
|
|
27570
|
+
"_msg": [1],
|
|
27571
|
+
"_multiple": [4],
|
|
27572
|
+
"_name": [1],
|
|
27573
|
+
"_on": [16],
|
|
27574
|
+
"_options": [1],
|
|
27575
|
+
"_required": [4],
|
|
27576
|
+
"_shortKey": [1, "_short-key"],
|
|
27577
|
+
"_rows": [2],
|
|
27578
|
+
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
27579
|
+
"_tabIndex": [2, "_tab-index"],
|
|
27580
|
+
"_tooltipAlign": [1, "_tooltip-align"],
|
|
27581
|
+
"_touched": [1540],
|
|
27582
|
+
"_value": [1544],
|
|
27583
|
+
"getValue": [64],
|
|
27584
|
+
"kolFocus": [64]
|
|
27585
|
+
},
|
|
27586
|
+
"$listeners$": undefined,
|
|
27587
|
+
"$lazyBundleId$": "-",
|
|
27588
|
+
"$attrsToReflect$": [["_touched", "_touched"], ["_value", "_value"]]
|
|
27589
|
+
}; }
|
|
27590
|
+
}
|
|
27591
|
+
|
|
27479
27592
|
const NativeOptionFc = (_a) => {
|
|
27480
27593
|
var { baseClassName = 'kol-select', class: classNames, index, selectedValue, selected, value, label, disabled } = _a, other = __rest(_a, ["baseClassName", "class", "index", "selectedValue", "selected", "value", "label", "disabled"]);
|
|
27481
27594
|
if (selectedValue === undefined) {
|
|
@@ -27664,9 +27777,7 @@ class SelectController extends InputIconController {
|
|
|
27664
27777
|
}
|
|
27665
27778
|
}
|
|
27666
27779
|
|
|
27667
|
-
|
|
27668
|
-
|
|
27669
|
-
class KolSelect {
|
|
27780
|
+
class KolSelectWc {
|
|
27670
27781
|
async getValue() {
|
|
27671
27782
|
if (this._multiple) {
|
|
27672
27783
|
return this.state._value;
|
|
@@ -27700,11 +27811,11 @@ class KolSelect {
|
|
|
27700
27811
|
} });
|
|
27701
27812
|
}
|
|
27702
27813
|
render() {
|
|
27703
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
27814
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '149de6c2a2a155d9869e4d09118d7b511058b606' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '84abd564f808296ad32ea68165780862e7808fd0', state: this.state }, hAsync("form", { key: '3d143d2d857793ef6e744def1eada9346983f4d5', onSubmit: (event) => {
|
|
27704
27815
|
event.preventDefault();
|
|
27705
27816
|
propagateSubmitEventToForm({
|
|
27706
27817
|
form: this.host});
|
|
27707
|
-
} }, hAsync("input", { key: '
|
|
27818
|
+
} }, hAsync("input", { key: '4f654dceadd96f6074e22a56aefec34944ab2faa', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: 'e576920b9756ed1f8fce70c13c070749d463e839' }, this.getSelectProps()))))));
|
|
27708
27819
|
}
|
|
27709
27820
|
constructor(hostRef) {
|
|
27710
27821
|
registerInstance(this, hostRef);
|
|
@@ -27846,12 +27957,9 @@ class KolSelect {
|
|
|
27846
27957
|
"_touched": ["validateTouched"],
|
|
27847
27958
|
"_value": ["validateValue"]
|
|
27848
27959
|
}; }
|
|
27849
|
-
static get style() { return {
|
|
27850
|
-
default: defaultStyleCss$d
|
|
27851
|
-
}; }
|
|
27852
27960
|
static get cmpMeta() { return {
|
|
27853
|
-
"$flags$":
|
|
27854
|
-
"$tagName$": "kol-select",
|
|
27961
|
+
"$flags$": 256,
|
|
27962
|
+
"$tagName$": "kol-select-wc",
|
|
27855
27963
|
"$members$": {
|
|
27856
27964
|
"_accessKey": [1, "_access-key"],
|
|
27857
27965
|
"_disabled": [4],
|
|
@@ -28109,7 +28217,7 @@ class KolSingleSelect {
|
|
|
28109
28217
|
render() {
|
|
28110
28218
|
var _a;
|
|
28111
28219
|
const isDisabled = this.state._disabled === true;
|
|
28112
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
28220
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '022bd32dfdbc965f0311456da17cf56032cdbb4e' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '65092ea7e9b0a6a6beab48b75cb2129a5240e94e', state: this.state }, hAsync("div", { key: 'aa18c4f22ac372d12d21d3098666630874f35d9a', class: "kol-single-select__group" }, hAsync(InputStateWrapper, Object.assign({ key: '357c2dd70789f13cc3d6f6f71503a4f588eadde4' }, this.getInputProps())), this._inputValue && !this.state._hideClearButton && (hAsync(KolButtonWcTag, { key: '36713c8e322d38ff76f3fa4d8eddc52995dd1551', _icons: "codicon codicon-close", _label: this.translateDeleteSelection, _hideLabel: true, _buttonVariant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: clsx('kol-single-select__delete', {
|
|
28113
28221
|
'kol-single-select__delete--disabled': isDisabled,
|
|
28114
28222
|
}), _on: {
|
|
28115
28223
|
onClick: () => {
|
|
@@ -28117,9 +28225,9 @@ class KolSingleSelect {
|
|
|
28117
28225
|
this.clearSelection();
|
|
28118
28226
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
28119
28227
|
},
|
|
28120
|
-
} })), hAsync(KolIconTag, { key: '
|
|
28228
|
+
} })), hAsync(KolIconTag, { key: '9edf8cc32fcd57b8dc1b6c5c2bb848e5331b4c84', _icons: "codicon codicon-triangle-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
28121
28229
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
28122
|
-
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '
|
|
28230
|
+
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '2d6d172165735e5a9f9dae7b5c11839ffe6a76eb', 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) => {
|
|
28123
28231
|
if (el)
|
|
28124
28232
|
this.refOptions[index] = el;
|
|
28125
28233
|
}, selected: this._value === option.value, disabled: option.disabled ? true : false, onClick: (event) => {
|
|
@@ -28425,7 +28533,7 @@ class KolSingleSelect {
|
|
|
28425
28533
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
28426
28534
|
"_touched": ["validateTouched"],
|
|
28427
28535
|
"_value": ["validateValue"],
|
|
28428
|
-
"_hideClearButton
|
|
28536
|
+
"_hideClearButton": ["validateHideClearButton"],
|
|
28429
28537
|
"_rows": ["validateRows"]
|
|
28430
28538
|
}; }
|
|
28431
28539
|
static get style() { return {
|
|
@@ -28482,7 +28590,7 @@ class KolSkipNav {
|
|
|
28482
28590
|
};
|
|
28483
28591
|
}
|
|
28484
28592
|
render() {
|
|
28485
|
-
return (hAsync("nav", { key: '
|
|
28593
|
+
return (hAsync("nav", { key: 'b9adacaa5cb5b79456d375f35a4be7e18aa47a32', class: "kol-skip-nav", "aria-label": this.state._label }, hAsync("ul", { key: '015db44ad9a7489ef6e5b000f1bebadb153ff2df', class: "kol-skip-nav__list" }, this.state._links.map((link, index) => {
|
|
28486
28594
|
return (hAsync("li", { class: "kol-skip-nav__list-item", key: index }, hAsync(KolLinkWcTag, Object.assign({}, link, { ref: index === 0 ? (el) => (this.firstLinkRef = el) : undefined }))));
|
|
28487
28595
|
}))));
|
|
28488
28596
|
}
|
|
@@ -28558,7 +28666,7 @@ class KolSpin {
|
|
|
28558
28666
|
}
|
|
28559
28667
|
render() {
|
|
28560
28668
|
var _a, _b;
|
|
28561
|
-
return (hAsync(Host, { key: '
|
|
28669
|
+
return (hAsync(Host, { key: 'e9c150c633c0a718053c4aa1aeb737d88b7b4183', class: "kol-spin" }, this.state._show ? (hAsync(Fragment, null, hAsync("span", { class: clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`) }, renderSpin(this.state._variant)), hAsync("span", { "aria-busy": "true", class: "visually-hidden", role: "alert" }, (_a = this.state._label) !== null && _a !== void 0 ? _a : this.translateActionRunning))) : (this.showToggled && (hAsync("span", { "aria-busy": "false", class: "visually-hidden", role: "alert" }, (_b = this.state._label) !== null && _b !== void 0 ? _b : this.translateActionDone)))));
|
|
28562
28670
|
}
|
|
28563
28671
|
validateShow(value) {
|
|
28564
28672
|
this.showToggled = this.state._show === true && this._show === false;
|
|
@@ -28645,10 +28753,10 @@ class KolSplitButton {
|
|
|
28645
28753
|
}
|
|
28646
28754
|
render() {
|
|
28647
28755
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
28648
|
-
return (hAsync("div", { key: '
|
|
28756
|
+
return (hAsync("div", { key: '156668962e6ff2011625d1128a20a9dba6e24a9b', class: "kol-split-button" }, hAsync("div", { key: 'a273dc653d3c0a1efb5e3c83bd0e5f2ee2478e79', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: '88f61eecb6fdce911538179e721eae5af2c41c0f', class: clsx('kol-split-button__button', {
|
|
28649
28757
|
[this._variant]: this._variant !== 'custom',
|
|
28650
28758
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
28651
|
-
}), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _id: this._id, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _buttonVariant: this._variant }), hAsync("div", { key: '
|
|
28759
|
+
}), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _id: this._id, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _buttonVariant: this._variant }), hAsync("div", { key: '609e38bd0f8c2c80e831b0f933cec91d8d590d93', class: "kol-split-button__horizontal-line" }), hAsync(KolButtonWcTag, { key: '95da68081863776d4ea3ae7f67cc4752b6299d72', class: "kol-split-button__secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler })), hAsync(KolPopoverWcTag, { key: 'b8ca42df85abdfbd34c9df79c416b78aada35a56', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: '3af62ecf99ccdd770b926535d51f875426408103' }))));
|
|
28652
28760
|
}
|
|
28653
28761
|
async closePopup() {
|
|
28654
28762
|
this.handleOnClose();
|
|
@@ -28755,10 +28863,10 @@ class KolTableSettings {
|
|
|
28755
28863
|
}
|
|
28756
28864
|
render() {
|
|
28757
28865
|
const sortedColumns = this.tableSettings.columns;
|
|
28758
|
-
return (hAsync(KolPopoverButtonWcTag, { key: '
|
|
28866
|
+
return (hAsync(KolPopoverButtonWcTag, { key: '77db05412c9011fe8e0e2dfc7499dbcadede5521', ref: (el) => (this.popoverRef = el), class: "kol-table-settings", _icons: "codicon codicon-settings-gear", _label: this.translateTableSettings, _popoverAlign: "top", _hideLabel: true }, hAsync("div", { key: '1ad57a28bceee8b4c10c8c818b4fd6f0001809c4', class: "kol-table-settings__content" }, hAsync(KolHeadingTag, { key: 'd019a6cbe836283c6c2ccdf319c92090802382be', _label: this.translateTableSettings, _level: 0 }), this.errorMessage && hAsync(KolAlertWcTag, { key: '3c53e407297bd21a00bb94ac9cec1e913728f246', _type: "error", _label: this.errorMessage, _variant: "msg", class: "kol-table-settings__error-message" }), hAsync("form", { key: '14e649882dc3c590ab1431837ca1e9223e332ebc', onSubmit: this.handleSubmit.bind(this) }, hAsync("div", { key: '3546aca5566c7148effa4ac3b6c6c6c80df499c4', class: "kol-table-settings__columns-container" }, hAsync("div", { key: 'e5ba799f10556c2ff15321984bf06d26474162d1', class: "kol-table-settings__columns" }, sortedColumns.map((column, index) => {
|
|
28759
28867
|
var _a, _b;
|
|
28760
28868
|
return (hAsync("div", { key: column.key, class: "kol-table-settings__column" }, hAsync(KolInputCheckboxTag, { _checked: column.visible, _label: `${column.label}${column.hidable === false ? ` (${this.translateColumnNotHidable})` : ''}`, _value: true, _hideLabel: true, _disabled: column.hidable === false, _on: { onInput: (_, value) => this.handleVisibilityChange(column.key, value) }, "data-testid": `table-settings-visible-${column.key}` }), hAsync("span", { class: "kol-table-settings__column-label" }, column.label), hAsync(KolInputNumberTag, { _hideLabel: true, _value: column.width, _label: translate('kol-table-settings-column-width', { placeholders: { column: column.label } }), _min: 1, _disabled: column.resizable === false, _on: { onInput: (_, value) => this.handleWidthChange(column.key, value) } }), hAsync(KolButtonWcTag, { _icons: "codicon codicon-arrow-up", _label: translate('kol-table-settings-move-up', { placeholders: { column: column.label } }), _hideLabel: true, _buttonVariant: "ghost", _on: { onClick: () => this.moveColumn(column.key, 'up') }, _disabled: index === 0 || column.sortable === false || ((_a = sortedColumns[index - 1]) === null || _a === void 0 ? void 0 : _a.sortable) === false, "data-testid": "table-settings-move-up" }), hAsync(KolButtonWcTag, { _icons: "codicon codicon-arrow-down", _label: translate('kol-table-settings-move-down', { placeholders: { column: column.label } }), _hideLabel: true, _buttonVariant: "ghost", _on: { onClick: () => this.moveColumn(column.key, 'down') }, _disabled: index === sortedColumns.length - 1 || column.sortable === false || ((_b = sortedColumns[index + 1]) === null || _b === void 0 ? void 0 : _b.sortable) === false, "data-testid": "table-settings-move-down" })));
|
|
28761
|
-
}))), hAsync("div", { key: '
|
|
28869
|
+
}))), hAsync("div", { key: 'b31183c5e2b855b21944864e0897c632c30bd55e', class: "kol-table-settings__actions" }, hAsync(KolButtonWcTag, { key: '9a741d4fe161684a31a335877ed81bd1e200848a', _label: this.translateTableSettingsCancel, _buttonVariant: "secondary", _on: { onClick: () => this.handleCancel() }, "data-testid": "table-settings-cancel" }), hAsync(KolButtonWcTag, { key: '67ebec227e4a82cec363431b1b755d757974f50c', _label: this.translateTableSettingsApply, _buttonVariant: "primary", _type: "submit", "data-testid": "table-settings-apply" }))))));
|
|
28762
28870
|
}
|
|
28763
28871
|
get host() { return getElement(this); }
|
|
28764
28872
|
static get watchers() { return {
|
|
@@ -28819,7 +28927,7 @@ const validateTableSettings = (component, value) => {
|
|
|
28819
28927
|
watchValidator(component, `_tableSettings`, (value) => typeof value === 'object' && value !== null, new Set(['TableSettings']), value);
|
|
28820
28928
|
};
|
|
28821
28929
|
|
|
28822
|
-
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: inline-flex;\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 width: 100%;\n }\n .kol-popover-button__button {\n display: inline-block;\n }\n .kol-popover-button__popover {\n margin: 0;\n padding: 0;\n border: 0;\n }\n .kol-popover-button--inline .kol-popover-button__button {\n display: inline;\n }\n .kol-table-settings {\n background: #fff;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n }\n .kol-table-settings .kol-popover-button__popover {\n background: #fff;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border: 1px solid #d1d5db;\n }\n .kol-table-settings__columns-container {\n max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n overflow: auto;\n }\n .kol-table-settings__columns {\n display: grid;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-auto-rows: min-content;\n grid-template-columns: min-content minmax(max-content, 1fr) calc(100 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n }\n .kol-table-settings__column {\n display: contents;\n }\n .kol-table {\n display: block;\n position: relative;\n max-width: 100%;\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n .kol-table__scroll-container {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .kol-table__table {\n width: 100%;\n }\n .kol-table__caption {\n min-height: var(--a11y-min-size);\n padding-right: var(--a11y-min-size);\n text-align: start;\n }\n .kol-table__sort-button .kol-button {\n color: inherit;\n }\n .kol-table__body {\n text-align: left;\n }\n .kol-table__body .kol-button__text {\n justify-items: start;\n }\n .kol-table__cell--align-left {\n text-align: left;\n }\n .kol-table__cell--align-left .kol-button__text {\n align-items: start;\n }\n .kol-table__cell--align-center {\n text-align: center;\n }\n .kol-table__cell--align-center .kol-button__text {\n align-items: center;\n }\n .kol-table__cell--align-right {\n text-align: right;\n }\n .kol-table__cell--align-right .kol-button__text {\n align-items: end;\n }\n .kol-table__cell--selection {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection-label {\n display: flex;\n position: relative;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n .kol-table__selection-label--disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-icon {\n display: block;\n position: absolute;\n inset: auto;\n z-index: 1;\n }\n .kol-table__selection-input {\n border-style: solid;\n margin: 0;\n appearance: none;\n cursor: pointer;\n }\n .kol-table__selection-input:disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-input:before {\n content: \"\";\n }\n .kol-table__selection-input--checkbox {\n background-color: rgb(255, 255, 255);\n display: flex;\n position: relative;\n width: calc(var(--a11y-min-size) / 2);\n height: calc(var(--a11y-min-size) / 2);\n border-width: 2px;\n align-items: center;\n justify-content: center;\n line-height: 1.5;\n }\n .kol-table__selection-input--radio {\n border-radius: 100%;\n display: flex;\n width: 1.5em;\n min-width: 1.5em;\n height: 1.5em;\n min-height: 1.5em;\n padding: 0;\n border-width: 2px;\n }\n .kol-table__selection-input--radio:before {\n border-radius: 100%;\n width: 0.75em;\n height: 0.75em;\n margin: auto;\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .kol-table__selection-input--radio:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n .kol-pagination {\n display: grid;\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n .kol-pagination__navigation-list {\n display: inline-flex;\n margin: 0;\n padding: 0;\n gap: 0.5em;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n }\n .kol-pagination__separator:before {\n content: \"•••\";\n }\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n display: grid;\n place-items: center;\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n grid-auto-flow: column;\n }\n }\n .kol-pagination {\n display: flex;\n flex-wrap: wrap;\n }\n @media (min-width: 1024px) {\n .kol-pagination {\n display: flex;\n }\n }\n @media (max-width: 1024px) {\n .kol-pagination {\n flex-direction: column;\n }\n }\n}";
|
|
28930
|
+
const defaultStyleCss$8 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n :host {\n display: inline-block;\n }\n .kol-button {\n display: inline-flex;\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 width: 100%;\n }\n .kol-popover-button__button {\n display: inline-block;\n }\n .kol-popover-button__popover {\n margin: 0;\n padding: 0;\n border: 0;\n }\n .kol-popover-button--inline .kol-popover-button__button {\n display: inline;\n }\n .kol-table-settings {\n background: #fff;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n }\n .kol-table-settings .kol-popover-button__popover {\n background: #fff;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border: 1px solid #d1d5db;\n }\n .kol-table-settings__columns-container {\n max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n overflow: auto;\n }\n .kol-table-settings__columns {\n display: grid;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-auto-rows: min-content;\n grid-template-columns: min-content minmax(max-content, 1fr) calc(100 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n }\n .kol-table-settings__column {\n display: contents;\n }\n .kol-table {\n display: block;\n position: relative;\n max-width: 100%;\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n .kol-table__scroll-container {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .kol-table__table {\n width: 100%;\n }\n .kol-table__caption {\n min-height: var(--a11y-min-size);\n padding-right: var(--a11y-min-size);\n text-align: start;\n }\n .kol-table__sort-button .kol-button {\n color: inherit;\n }\n .kol-table__body {\n text-align: left;\n }\n .kol-table__body .kol-button__text {\n justify-items: start;\n }\n .kol-table__cell--align-left {\n text-align: left;\n }\n .kol-table__cell--align-left .kol-button__text {\n align-items: start;\n }\n .kol-table__cell--align-center {\n text-align: center;\n }\n .kol-table__cell--align-center .kol-button__text {\n align-items: center;\n }\n .kol-table__cell--align-right {\n text-align: right;\n }\n .kol-table__cell--align-right .kol-button__text {\n align-items: end;\n }\n .kol-table__cell--selection {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection-label {\n display: flex;\n position: relative;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n .kol-table__selection-label--disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-icon {\n display: block;\n position: absolute;\n inset: auto;\n z-index: 1;\n }\n .kol-table__selection-input {\n border-style: solid;\n margin: 0;\n appearance: none;\n cursor: pointer;\n }\n .kol-table__selection-input:disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-input:before {\n content: \"\";\n }\n .kol-table__selection-input--checkbox {\n background-color: rgb(255, 255, 255);\n display: flex;\n position: relative;\n width: calc(var(--a11y-min-size) / 2);\n height: calc(var(--a11y-min-size) / 2);\n border-width: 2px;\n align-items: center;\n justify-content: center;\n line-height: 1.5;\n }\n .kol-table__selection-input--radio {\n border-radius: 100%;\n display: flex;\n width: 1.5em;\n min-width: 1.5em;\n height: 1.5em;\n min-height: 1.5em;\n padding: 0;\n border-width: 2px;\n }\n .kol-table__selection-input--radio:before {\n border-radius: 100%;\n width: 0.75em;\n height: 0.75em;\n margin: auto;\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .kol-table__selection-input--radio:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n .kol-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) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\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: 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-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 .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}";
|
|
28823
28931
|
|
|
28824
28932
|
const PAGINATION_OPTIONS = [10, 20, 50, 100];
|
|
28825
28933
|
const paginationValidator = (value) => value === true || value === '' || (typeof value === 'object' && value !== null);
|
|
@@ -29154,7 +29262,7 @@ class KolTableStateful {
|
|
|
29154
29262
|
horizontal: (_d = (_c = this.state._headers.horizontal) === null || _c === void 0 ? void 0 : _c.map((row) => row.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) }))))) !== null && _d !== void 0 ? _d : [],
|
|
29155
29263
|
vertical: (_f = (_e = this.state._headers.vertical) === null || _e === void 0 ? void 0 : _e.map((column) => column.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) }))))) !== null && _f !== void 0 ? _f : [],
|
|
29156
29264
|
};
|
|
29157
|
-
return (hAsync(Host, { key: '
|
|
29265
|
+
return (hAsync(Host, { key: '5ab8ff5b83647e809cddeccf2245696887bd12b4', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: 'a508c9984294f4be4f37b43ea4b8d5f7417c0818', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
|
|
29158
29266
|
onSort: (_, payload) => {
|
|
29159
29267
|
this.handleSort(payload);
|
|
29160
29268
|
},
|
|
@@ -29213,7 +29321,7 @@ let KolTableStateless$1 = class KolTableStateless {
|
|
|
29213
29321
|
registerInstance(this, hostRef);
|
|
29214
29322
|
}
|
|
29215
29323
|
render() {
|
|
29216
|
-
return (hAsync(KolTableStatelessWcTag, { key: '
|
|
29324
|
+
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 }));
|
|
29217
29325
|
}
|
|
29218
29326
|
static get style() { return {
|
|
29219
29327
|
default: defaultStyleCss$7
|
|
@@ -29841,12 +29949,12 @@ class KolTableStateless {
|
|
|
29841
29949
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
29842
29950
|
this.checkboxRefs = [];
|
|
29843
29951
|
const sortedHorizontalHeaders = (_a = this.state._headerCells.horizontal) === null || _a === void 0 ? void 0 : _a.map((row) => this.sortByColumnPosition(row));
|
|
29844
|
-
return (hAsync("div", { key: '
|
|
29952
|
+
return (hAsync("div", { key: 'a66eb9f22e8267d1bfcc00b2429b8234e07beb51', class: "kol-table" }, this.state._hasSettingsMenu && hAsync(KolTableSettingsWcTag, { key: '8c5bfcc3f01813773d07912fcf2fa78455efac06', _tableSettings: this.state._tableSettings }), hAsync("div", { key: '6f9ac777bae4c27c80052aeeae5678ddff56a6bc', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '89710649cdcd7fcca523656de8f8b13fc3d9509f', class: "kol-table__table", style: {
|
|
29845
29953
|
minWidth: this.getTableMinWidth(),
|
|
29846
|
-
} }, hAsync("caption", { key: '
|
|
29954
|
+
} }, hAsync("caption", { key: '0f5550f8377daed2043a18de8c2cdb5b6e45f554', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(sortedHorizontalHeaders) && (hAsync("thead", { key: '83577b101b26b8ee80bc81ccd12526fb78f576c4', class: "kol-table__head" }, [
|
|
29847
29955
|
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))))),
|
|
29848
29956
|
this.renderSpacer('head', sortedHorizontalHeaders),
|
|
29849
|
-
])), hAsync("tbody", { key: '
|
|
29957
|
+
])), hAsync("tbody", { key: '6fe763adb26ca11ebea14f035200df42c970d5cd', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
|
|
29850
29958
|
}
|
|
29851
29959
|
get host() { return getElement(this); }
|
|
29852
29960
|
static get watchers() { return {
|
|
@@ -30087,9 +30195,9 @@ class KolTabs {
|
|
|
30087
30195
|
}, _icons: "codicon codicon-plus", "data-testid": "tabs-create-button" }))));
|
|
30088
30196
|
}
|
|
30089
30197
|
render() {
|
|
30090
|
-
return (hAsync("div", { key: '
|
|
30198
|
+
return (hAsync("div", { key: '5ff105f158763851589016d153653f9082038b09', ref: (el) => {
|
|
30091
30199
|
this.tabPanelsElement = el;
|
|
30092
|
-
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
30200
|
+
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: 'f474721466208ada0a986ba4e00863b025195fb4', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
|
|
30093
30201
|
}
|
|
30094
30202
|
validateAlign(value) {
|
|
30095
30203
|
validateAlign(this, value);
|
|
@@ -30315,7 +30423,7 @@ class KolTextarea {
|
|
|
30315
30423
|
} });
|
|
30316
30424
|
}
|
|
30317
30425
|
render() {
|
|
30318
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
30426
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '2c2f033030f99e33507c059de0820cc72de7a599' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b64d16f3b7484d98ef5c85f0a2fd41a90bc2469a', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: 'dec62bcfd41aaf9af259d7c40bb194d5dd157e8b' }, this.getTextAreaProps())))));
|
|
30319
30427
|
}
|
|
30320
30428
|
constructor(hostRef) {
|
|
30321
30429
|
registerInstance(this, hostRef);
|
|
@@ -30524,7 +30632,7 @@ class KolTextarea {
|
|
|
30524
30632
|
}; }
|
|
30525
30633
|
}
|
|
30526
30634
|
|
|
30527
|
-
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}";
|
|
30635
|
+
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}";
|
|
30528
30636
|
|
|
30529
30637
|
const TRANSITION_TIMEOUT = 300;
|
|
30530
30638
|
class KolToastContainer {
|
|
@@ -30587,7 +30695,7 @@ class KolToastContainer {
|
|
|
30587
30695
|
}
|
|
30588
30696
|
}
|
|
30589
30697
|
render() {
|
|
30590
|
-
return (hAsync(Host, { key: '
|
|
30698
|
+
return (hAsync(Host, { key: '05182cc920080f5bc3c06bb647a1bf59c58fae8d', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: 'e4e196489dd617e994ba8c11c38893dd505db1e1', _label: this.translateToastCloseAll, class: "kol-toast-container__button-close-all", _on: {
|
|
30591
30699
|
onClick: () => {
|
|
30592
30700
|
void this.closeAll();
|
|
30593
30701
|
},
|
|
@@ -30641,7 +30749,7 @@ class KolToolbar {
|
|
|
30641
30749
|
return Object.assign(Object.assign({}, rest), { _icons, _disabled });
|
|
30642
30750
|
}
|
|
30643
30751
|
render() {
|
|
30644
|
-
return (hAsync("div", { key: '
|
|
30752
|
+
return (hAsync("div", { key: '9dd677a500fea840ccbfca4ee4d1eca92a06a903', class: `kol-toolbar kol-toolbar--orientation-${this.state._orientation}`, role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem)));
|
|
30645
30753
|
}
|
|
30646
30754
|
validateLabel(value) {
|
|
30647
30755
|
validateLabel(this, value);
|
|
@@ -30880,7 +30988,7 @@ class KolTooltipWc {
|
|
|
30880
30988
|
getDocument().removeEventListener('keyup', this.hideTooltipByEscape);
|
|
30881
30989
|
}
|
|
30882
30990
|
render() {
|
|
30883
|
-
return (hAsync(Host, { key: '
|
|
30991
|
+
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 })))));
|
|
30884
30992
|
}
|
|
30885
30993
|
validateBadgeText(value) {
|
|
30886
30994
|
validateBadgeText(this, value);
|
|
@@ -30958,7 +31066,7 @@ class KolTree {
|
|
|
30958
31066
|
registerInstance(this, hostRef);
|
|
30959
31067
|
}
|
|
30960
31068
|
render() {
|
|
30961
|
-
return (hAsync(KolTreeWcTag, { key: '
|
|
31069
|
+
return (hAsync(KolTreeWcTag, { key: 'c9729dc44fcf465925dc6a866d399e62413cf9e1', _label: this._label }, hAsync("slot", { key: 'ff341bf2e8b093cedea4f62ee4c9f54403aa1e7c' })));
|
|
30962
31070
|
}
|
|
30963
31071
|
static get style() { return {
|
|
30964
31072
|
default: defaultStyleCss$2
|
|
@@ -31001,7 +31109,7 @@ class KolTreeItem {
|
|
|
31001
31109
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
31002
31110
|
}
|
|
31003
31111
|
render() {
|
|
31004
|
-
return (hAsync(KolTreeItemWcTag, { key: '
|
|
31112
|
+
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' })));
|
|
31005
31113
|
}
|
|
31006
31114
|
static get style() { return {
|
|
31007
31115
|
default: defaultStyleCss$1
|
|
@@ -31039,12 +31147,12 @@ class KolTreeItemWc {
|
|
|
31039
31147
|
}
|
|
31040
31148
|
render() {
|
|
31041
31149
|
const { _href, _active, _hasChildren, _open, _label } = this.state;
|
|
31042
|
-
return (hAsync(Host, { key: '
|
|
31150
|
+
return (hAsync(Host, { key: '442889bb000355873e79c2df59cce348ed0afb0c', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { key: 'ab695fb7c3857e493631704e56f86b6c6211ad9f', class: "kol-tree-item", style: {
|
|
31043
31151
|
'--level': `${this.level}`,
|
|
31044
|
-
} }, hAsync(KolLinkWcTag, { key: '
|
|
31152
|
+
} }, hAsync(KolLinkWcTag, { key: 'ac9855976707c3665cb09f90af3a6ecd490bb653', class: clsx('kol-tree-item__link', {
|
|
31045
31153
|
'kol-tree-item__link--first-level': this.level === 0,
|
|
31046
31154
|
'kol-tree-item__link--active': _active,
|
|
31047
|
-
}), _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: '
|
|
31155
|
+
}), _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' })))));
|
|
31048
31156
|
}
|
|
31049
31157
|
validateActive(value) {
|
|
31050
31158
|
validateActive(this, value || false);
|
|
@@ -31148,7 +31256,7 @@ class KolTreeWc {
|
|
|
31148
31256
|
validateLabel(this, value);
|
|
31149
31257
|
}
|
|
31150
31258
|
render() {
|
|
31151
|
-
return (hAsync(Host, { key: '
|
|
31259
|
+
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' })))));
|
|
31152
31260
|
}
|
|
31153
31261
|
static isTreeItem(element) {
|
|
31154
31262
|
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
|
@@ -31345,7 +31453,7 @@ class KolVersion {
|
|
|
31345
31453
|
};
|
|
31346
31454
|
}
|
|
31347
31455
|
render() {
|
|
31348
|
-
return (hAsync(Host, { key: '
|
|
31456
|
+
return (hAsync(Host, { key: 'e510fa48ba288ec02a12f779576f8b5044bffbb3', class: "kol-version" }, hAsync(KolBadgeTag, { key: 'c51ecb43bea94a9b609035916ff21e1fcd4be1fa', _color: "#bec5c9", _icons: {
|
|
31349
31457
|
left: { icon: 'codicon codicon-versions', label: this.translateVersion },
|
|
31350
31458
|
}, _label: this.state._label })));
|
|
31351
31459
|
}
|
|
@@ -31435,6 +31543,7 @@ registerComponents([
|
|
|
31435
31543
|
KolProgress,
|
|
31436
31544
|
KolQuote,
|
|
31437
31545
|
KolSelect,
|
|
31546
|
+
KolSelectWc,
|
|
31438
31547
|
KolSingleSelect,
|
|
31439
31548
|
KolSkipNav,
|
|
31440
31549
|
KolSpin,
|