@public-ui/hydrate 2.1.7 → 2.1.8
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 +354 -184
- package/dist/index.mjs +354 -184
- package/package.json +4 -4
package/dist/index.js
CHANGED
|
@@ -130,7 +130,7 @@ const NAMESPACE = 'kolibri';
|
|
|
130
130
|
const BUILD = /* kolibri */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: true, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
|
|
131
131
|
|
|
132
132
|
/*
|
|
133
|
-
Stencil Hydrate Platform v4.
|
|
133
|
+
Stencil Hydrate Platform v4.20.0 | MIT Licensed | https://stenciljs.com
|
|
134
134
|
*/
|
|
135
135
|
var __defProp = Object.defineProperty;
|
|
136
136
|
var __export = (target, all) => {
|
|
@@ -416,17 +416,6 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
|
|
|
416
416
|
}
|
|
417
417
|
}
|
|
418
418
|
}
|
|
419
|
-
for (i2 = node.childNodes.length - 1; i2 >= 0; i2--) {
|
|
420
|
-
clientHydrate(
|
|
421
|
-
parentVNode,
|
|
422
|
-
childRenderNodes,
|
|
423
|
-
slotNodes,
|
|
424
|
-
shadowRootNodes,
|
|
425
|
-
hostElm,
|
|
426
|
-
node.childNodes[i2],
|
|
427
|
-
hostId
|
|
428
|
-
);
|
|
429
|
-
}
|
|
430
419
|
if (node.shadowRoot) {
|
|
431
420
|
for (i2 = node.shadowRoot.childNodes.length - 1; i2 >= 0; i2--) {
|
|
432
421
|
clientHydrate(
|
|
@@ -440,6 +429,17 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
|
|
|
440
429
|
);
|
|
441
430
|
}
|
|
442
431
|
}
|
|
432
|
+
for (i2 = node.childNodes.length - 1; i2 >= 0; i2--) {
|
|
433
|
+
clientHydrate(
|
|
434
|
+
parentVNode,
|
|
435
|
+
childRenderNodes,
|
|
436
|
+
slotNodes,
|
|
437
|
+
shadowRootNodes,
|
|
438
|
+
hostElm,
|
|
439
|
+
node.childNodes[i2],
|
|
440
|
+
hostId
|
|
441
|
+
);
|
|
442
|
+
}
|
|
443
443
|
} else if (node.nodeType === 8 /* CommentNode */) {
|
|
444
444
|
childIdSplt = node.nodeValue.split(".");
|
|
445
445
|
if (childIdSplt[1] === hostId || childIdSplt[1] === "0") {
|
|
@@ -517,14 +517,14 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
|
|
|
517
517
|
var initializeDocumentHydrate = (node, orgLocNodes) => {
|
|
518
518
|
if (node.nodeType === 1 /* ElementNode */) {
|
|
519
519
|
let i2 = 0;
|
|
520
|
-
for (; i2 < node.childNodes.length; i2++) {
|
|
521
|
-
initializeDocumentHydrate(node.childNodes[i2], orgLocNodes);
|
|
522
|
-
}
|
|
523
520
|
if (node.shadowRoot) {
|
|
524
|
-
for (
|
|
521
|
+
for (; i2 < node.shadowRoot.childNodes.length; i2++) {
|
|
525
522
|
initializeDocumentHydrate(node.shadowRoot.childNodes[i2], orgLocNodes);
|
|
526
523
|
}
|
|
527
524
|
}
|
|
525
|
+
for (i2 = 0; i2 < node.childNodes.length; i2++) {
|
|
526
|
+
initializeDocumentHydrate(node.childNodes[i2], orgLocNodes);
|
|
527
|
+
}
|
|
528
528
|
} else if (node.nodeType === 8 /* CommentNode */) {
|
|
529
529
|
const childIdSplt = node.nodeValue.split(".");
|
|
530
530
|
if (childIdSplt[0] === ORG_LOCATION_ID) {
|
|
@@ -589,10 +589,21 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
|
|
|
589
589
|
if (nonce != null) {
|
|
590
590
|
styleElm.setAttribute("nonce", nonce);
|
|
591
591
|
}
|
|
592
|
-
{
|
|
592
|
+
if (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
|
|
593
593
|
styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId2);
|
|
594
594
|
}
|
|
595
|
-
|
|
595
|
+
const injectStyle = (
|
|
596
|
+
/**
|
|
597
|
+
* we render a scoped component
|
|
598
|
+
*/
|
|
599
|
+
!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) || /**
|
|
600
|
+
* we are using shadow dom and render the style tag within the shadowRoot
|
|
601
|
+
*/
|
|
602
|
+
cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */ && styleContainerNode.nodeName !== "HEAD"
|
|
603
|
+
);
|
|
604
|
+
if (injectStyle) {
|
|
605
|
+
styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector("link"));
|
|
606
|
+
}
|
|
596
607
|
}
|
|
597
608
|
if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
|
|
598
609
|
styleElm.innerHTML += SLOT_FB_CSS;
|
|
@@ -615,7 +626,7 @@ var attachStyles = (hostRef) => {
|
|
|
615
626
|
cmpMeta,
|
|
616
627
|
hostRef.$modeName$
|
|
617
628
|
);
|
|
618
|
-
if (flags & 10 /* needsScopedEncapsulation */) {
|
|
629
|
+
if (flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */) {
|
|
619
630
|
elm["s-sc"] = scopeId2;
|
|
620
631
|
elm.classList.add(scopeId2 + "-h");
|
|
621
632
|
}
|
|
@@ -796,7 +807,9 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
|
|
|
796
807
|
{
|
|
797
808
|
updateElement(null, newVNode2, isSvgMode);
|
|
798
809
|
}
|
|
799
|
-
|
|
810
|
+
const rootNode = elm.getRootNode();
|
|
811
|
+
const isElementWithinShadowRoot = !rootNode.querySelector("body");
|
|
812
|
+
if (!isElementWithinShadowRoot && BUILD.scoped && isDef(scopeId) && elm["s-si"] !== scopeId) {
|
|
800
813
|
elm.classList.add(elm["s-si"] = scopeId);
|
|
801
814
|
}
|
|
802
815
|
if (newVNode2.$children$) {
|
|
@@ -987,6 +1000,15 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
|
|
|
987
1000
|
var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
|
|
988
1001
|
if (leftVNode.$tag$ === rightVNode.$tag$) {
|
|
989
1002
|
if (leftVNode.$tag$ === "slot") {
|
|
1003
|
+
if (
|
|
1004
|
+
// The component gets hydrated and no VDOM has been initialized.
|
|
1005
|
+
// Here the comparison can't happen as $name$ property is not set for `leftNode`.
|
|
1006
|
+
"$nodeId$" in leftVNode && isInitialRender && // `leftNode` is not from type HTMLComment which would cause many
|
|
1007
|
+
// hydration comments to be removed
|
|
1008
|
+
leftVNode.$elm$.nodeType !== 8
|
|
1009
|
+
) {
|
|
1010
|
+
return false;
|
|
1011
|
+
}
|
|
990
1012
|
return leftVNode.$name$ === rightVNode.$name$;
|
|
991
1013
|
}
|
|
992
1014
|
if (!isInitialRender) {
|
|
@@ -1023,7 +1045,10 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
|
|
|
1023
1045
|
elm.textContent = "";
|
|
1024
1046
|
}
|
|
1025
1047
|
addVnodes(elm, null, newVNode2, newChildren, 0, newChildren.length - 1);
|
|
1026
|
-
} else if (
|
|
1048
|
+
} else if (
|
|
1049
|
+
// don't do this on initial render as it can cause non-hydrated content to be removed
|
|
1050
|
+
!isInitialRender && BUILD.updatable && oldChildren !== null
|
|
1051
|
+
) {
|
|
1027
1052
|
removeVnodes(oldChildren, 0, oldChildren.length - 1);
|
|
1028
1053
|
}
|
|
1029
1054
|
if (isSvgMode && tag === "svg") {
|
|
@@ -1512,7 +1537,8 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
1512
1537
|
if (this.hasOwnProperty(propName)) {
|
|
1513
1538
|
newValue = this[propName];
|
|
1514
1539
|
delete this[propName];
|
|
1515
|
-
} else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" &&
|
|
1540
|
+
} else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && // cast type to number to avoid TS compiler issues
|
|
1541
|
+
this[propName] == newValue) {
|
|
1516
1542
|
return;
|
|
1517
1543
|
} else if (propName == null) {
|
|
1518
1544
|
const hostRef = getHostRef(this);
|
|
@@ -1873,7 +1899,7 @@ var hAsync = (nodeName, vnodeData, ...children) => {
|
|
|
1873
1899
|
}
|
|
1874
1900
|
return h$1(nodeName, vnodeData);
|
|
1875
1901
|
};
|
|
1876
|
-
function proxyHostElement(elm, cmpMeta
|
|
1902
|
+
function proxyHostElement(elm, cmpMeta) {
|
|
1877
1903
|
if (typeof elm.componentOnReady !== "function") {
|
|
1878
1904
|
elm.componentOnReady = componentOnReady;
|
|
1879
1905
|
}
|
|
@@ -1881,10 +1907,8 @@ function proxyHostElement(elm, cmpMeta, opts) {
|
|
|
1881
1907
|
elm.forceUpdate = forceUpdate2;
|
|
1882
1908
|
}
|
|
1883
1909
|
if (!elm.shadowRoot && !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
|
|
1884
|
-
|
|
1910
|
+
{
|
|
1885
1911
|
elm.attachShadow({ mode: "open" });
|
|
1886
|
-
} else {
|
|
1887
|
-
elm.shadowRoot = elm;
|
|
1888
1912
|
}
|
|
1889
1913
|
}
|
|
1890
1914
|
if (cmpMeta.$members$ != null) {
|
|
@@ -1995,7 +2019,7 @@ function hydrateApp(win2, opts, results, afterHydrate, resolve) {
|
|
|
1995
2019
|
createdElements.add(elm);
|
|
1996
2020
|
elm.connectedCallback = patchedConnectedCallback2;
|
|
1997
2021
|
registerHost(elm, Cstr.cmpMeta);
|
|
1998
|
-
proxyHostElement(elm, Cstr.cmpMeta
|
|
2022
|
+
proxyHostElement(elm, Cstr.cmpMeta);
|
|
1999
2023
|
}
|
|
2000
2024
|
}
|
|
2001
2025
|
}
|
|
@@ -3823,8 +3847,9 @@ const validateAlign = (component, value) => {
|
|
|
3823
3847
|
validateAlignment(component, '_align', value);
|
|
3824
3848
|
};
|
|
3825
3849
|
|
|
3850
|
+
const alternativeButtonLinkRolePropTypeOptions = ['button', 'link', 'tab', 'treeitem'];
|
|
3826
3851
|
const validateAlternativeButtonLinkRole = (component, value) => {
|
|
3827
|
-
|
|
3852
|
+
watchValidator(component, `_role`, (value) => typeof value === 'string' && alternativeButtonLinkRolePropTypeOptions.includes(value), new Set([`KoliBriAlternativeButtonLinkRole {${alternativeButtonLinkRolePropTypeOptions.join(', ')}`]), value);
|
|
3828
3853
|
};
|
|
3829
3854
|
|
|
3830
3855
|
const validateAriaControls = (component, value) => {
|
|
@@ -4012,8 +4037,8 @@ const validateHasCompactButton = (component, value) => {
|
|
|
4012
4037
|
watchBoolean(component, '_hasCompactButton', value);
|
|
4013
4038
|
};
|
|
4014
4039
|
|
|
4015
|
-
const validateHasCounter = (component, value) => {
|
|
4016
|
-
watchBoolean(component, '_hasCounter', value);
|
|
4040
|
+
const validateHasCounter = (component, value, options) => {
|
|
4041
|
+
watchBoolean(component, '_hasCounter', value, options);
|
|
4017
4042
|
};
|
|
4018
4043
|
|
|
4019
4044
|
const validateHasIconsWhenExpanded = (component, value) => {
|
|
@@ -4161,6 +4186,11 @@ const validateLabel = (component, value, options = {}) => {
|
|
|
4161
4186
|
};
|
|
4162
4187
|
const validateLabelWithExpertSlot = validateLabel;
|
|
4163
4188
|
|
|
4189
|
+
const labelAlignPropTypeOptions = ['left', 'right'];
|
|
4190
|
+
const validateLabelAlign = (component, value) => {
|
|
4191
|
+
watchValidator(component, `_labelAlign`, (value) => typeof value === 'string' && labelAlignPropTypeOptions.includes(value), new Set([`KoliBriLabelAlign {${labelAlignPropTypeOptions.join(', ')}`]), value);
|
|
4192
|
+
};
|
|
4193
|
+
|
|
4164
4194
|
const validateLinkCallbacks = (component, value) => {
|
|
4165
4195
|
if (typeof value === 'object' && typeof (value === null || value === void 0 ? void 0 : value.onClick) === 'function') {
|
|
4166
4196
|
component.state = Object.assign(Object.assign({}, component.state), { _on: value });
|
|
@@ -4246,6 +4276,11 @@ const validateSuggestions = (component, value) => {
|
|
|
4246
4276
|
});
|
|
4247
4277
|
};
|
|
4248
4278
|
|
|
4279
|
+
const tabBehaviorPropTypeOptions = ['select-automatic', 'select-manual'];
|
|
4280
|
+
const validateTabBehavior = (component, value) => {
|
|
4281
|
+
watchValidator(component, `_behavior`, (value) => typeof value === 'string' && tabBehaviorPropTypeOptions.includes(value), new Set([`KoliBriTabBehavior {${tabBehaviorPropTypeOptions.join(', ')}`]), value);
|
|
4282
|
+
};
|
|
4283
|
+
|
|
4249
4284
|
const validateTableCallbacks = (component, value) => {
|
|
4250
4285
|
watchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['TableCallbacksPropType {Events.onSort, Events.onSelectionChange}']), value);
|
|
4251
4286
|
};
|
|
@@ -4397,7 +4432,7 @@ let KolTreeItemWcTag = 'kol-tree-item-wc';
|
|
|
4397
4432
|
let KolTreeTag = 'kol-tree';
|
|
4398
4433
|
let KolTreeWcTag = 'kol-tree-wc';
|
|
4399
4434
|
|
|
4400
|
-
const defaultStyleCss$P = "@layer kol-global {\n
|
|
4435
|
+
const defaultStyleCss$P = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > abbr {\n cursor: help;\n }\n}";
|
|
4401
4436
|
var KolAbbrDefaultStyle0 = defaultStyleCss$P;
|
|
4402
4437
|
|
|
4403
4438
|
class KolAbbr {
|
|
@@ -4456,7 +4491,7 @@ const watchHeadingLevel = (component, value) => {
|
|
|
4456
4491
|
});
|
|
4457
4492
|
};
|
|
4458
4493
|
|
|
4459
|
-
const defaultStyleCss$O = "@layer kol-global {\n
|
|
4494
|
+
const defaultStyleCss$O = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n /* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n .wrapper {\n display: grid;\n grid-template-rows: 0fr;\n overflow: hidden;\n transition: grid-template-rows 0.3s;\n }\n .accordion.open .wrapper {\n grid-template-rows: 1fr;\n }\n .animation-wrapper {\n min-height: 0;\n transition: visibility 0.3s;\n /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n visibility: hidden;\n }\n .accordion.open .animation-wrapper {\n visibility: visible;\n }\n @media (prefers-reduced-motion) {\n .animation-wrapper,\n .wrapper {\n transition-duration: 0s;\n }\n }\n /* @see https://github.com/public-ui/kolibri/issues/5952 */\n @media print {\n .accordion:not(.open) .animation-wrapper {\n display: none;\n }\n }\n /*\n * Inside a button, the caption text is always centered.\n * So we have to align the text to the left.\n */\n .accordion .kol-heading-wc .kol-button-wc button .kol-span-wc {\n justify-items: start;\n }\n}";
|
|
4460
4495
|
var KolAccordionDefaultStyle0 = defaultStyleCss$O;
|
|
4461
4496
|
|
|
4462
4497
|
featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
|
|
@@ -4560,7 +4595,7 @@ class KolAccordion {
|
|
|
4560
4595
|
}; }
|
|
4561
4596
|
}
|
|
4562
4597
|
|
|
4563
|
-
const defaultStyleCss$N = "@layer kol-global {\n
|
|
4598
|
+
const defaultStyleCss$N = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid 1px;\n }\n}";
|
|
4564
4599
|
var KolAlertDefaultStyle0 = defaultStyleCss$N;
|
|
4565
4600
|
|
|
4566
4601
|
class KolAlert {
|
|
@@ -4647,7 +4682,7 @@ var locale_de = {
|
|
|
4647
4682
|
dropdown: 'Auswahlliste',
|
|
4648
4683
|
'nav-label-open': 'Untermenü zu {{label}} öffnen',
|
|
4649
4684
|
'nav-label-close': 'Untermenü zu {{label}} schließen',
|
|
4650
|
-
'close-alert': 'Benachrichtigung
|
|
4685
|
+
'close-alert': 'Benachrichtigung schließen',
|
|
4651
4686
|
'show-password': 'einblenden',
|
|
4652
4687
|
'hide-password': 'ausblenden',
|
|
4653
4688
|
'no-results-message': 'Keine Ergebnisse gefunden.',
|
|
@@ -4699,7 +4734,7 @@ var locale_en = {
|
|
|
4699
4734
|
dropdown: 'Dropdown',
|
|
4700
4735
|
'nav-label-open': 'Submenu for {{label}} open',
|
|
4701
4736
|
'nav-label-close': 'Submenu for {{label}} close',
|
|
4702
|
-
'close-alert': 'Close notification
|
|
4737
|
+
'close-alert': 'Close notification',
|
|
4703
4738
|
'show-password': 'Show',
|
|
4704
4739
|
'hide-password': 'Hide',
|
|
4705
4740
|
'no-results-message': 'No results found.',
|
|
@@ -4840,11 +4875,11 @@ class KolAlertWc {
|
|
|
4840
4875
|
[this.state._type]: true,
|
|
4841
4876
|
[this.state._variant]: true,
|
|
4842
4877
|
hasCloser: !!this.state._hasCloser,
|
|
4843
|
-
}, role: this.state._alert ? 'alert' : undefined }, hAsync("div", { key: 'b190de9f62c33d970daabc1b5638132da33c936e', class: "heading" }, hAsync(AlertIcon, { key: 'e1da8b194a13ec6f9270efc2234caadcee77e827', label: this.state._label, type: this.state._type }), hAsync("div", { key: '7ffd000cfbe218c582791e8646ff5caf9bad5b25', class: "heading-content" }, typeof this.state._label === 'string' && ((_a = this.state._label) === null || _a === void 0 ? void 0 : _a.length) > 0 && (hAsync(KolHeadingWcTag, { key: 'f9e7c598243a4868b80b248fdf4dfdeed5d24a2b', _label: this.state._label, _level: this.state._level })), this.state._variant === 'msg' && (hAsync("div", { key: 'b5b70319b6c7747872e9d8072a1fe7565938f7c1', class: "content" }, hAsync("slot", { key: 'b75edf24762d861147d5ee5fa0701b4c5a30eed1' })))), this.state._hasCloser && (hAsync(KolButtonWcTag, { key: '
|
|
4878
|
+
}, role: this.state._alert ? 'alert' : undefined }, hAsync("div", { key: 'b190de9f62c33d970daabc1b5638132da33c936e', class: "heading" }, hAsync(AlertIcon, { key: 'e1da8b194a13ec6f9270efc2234caadcee77e827', label: this.state._label, type: this.state._type }), hAsync("div", { key: '7ffd000cfbe218c582791e8646ff5caf9bad5b25', class: "heading-content" }, typeof this.state._label === 'string' && ((_a = this.state._label) === null || _a === void 0 ? void 0 : _a.length) > 0 && (hAsync(KolHeadingWcTag, { key: 'f9e7c598243a4868b80b248fdf4dfdeed5d24a2b', _label: this.state._label, _level: this.state._level })), this.state._variant === 'msg' && (hAsync("div", { key: 'b5b70319b6c7747872e9d8072a1fe7565938f7c1', class: "content" }, hAsync("slot", { key: 'b75edf24762d861147d5ee5fa0701b4c5a30eed1' })))), this.state._hasCloser && (hAsync(KolButtonWcTag, { key: 'cd46afacd1afbc415e1184604b3b1ac9af901c97', class: "close", _ariaDescription: ((_b = this.state._label) === null || _b === void 0 ? void 0 : _b.trim()) || '', _hideLabel: true, _icons: {
|
|
4844
4879
|
left: {
|
|
4845
4880
|
icon: 'codicon codicon-close',
|
|
4846
4881
|
},
|
|
4847
|
-
}, _label: translate('kol-close-alert'
|
|
4882
|
+
}, _label: translate('kol-close-alert'), _on: this.on, _tooltipAlign: "left" }))), this.state._variant === 'card' && (hAsync("div", { key: '2a9670974b00907497abd255e02194301df0c0a2', class: "content" }, hAsync("slot", { key: '9bd3de7e485b9865d5f74dfbce4f421d4b1dc9b5' })))));
|
|
4848
4883
|
}
|
|
4849
4884
|
validateAlert(value) {
|
|
4850
4885
|
watchBoolean(this, '_alert', value);
|
|
@@ -4908,7 +4943,7 @@ class KolAlertWc {
|
|
|
4908
4943
|
}; }
|
|
4909
4944
|
}
|
|
4910
4945
|
|
|
4911
|
-
const defaultStyleCss$M = "@layer kol-global {\n
|
|
4946
|
+
const defaultStyleCss$M = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .container {\n border-radius: 50%;\n overflow: hidden;\n /* Visible with forced colors */\n outline: transparent solid 1px;\n /*theme?*/\n width: 100px;\n height: 100px;\n }\n .image {\n width: 100%;\n height: 100%;\n }\n .initials {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n /*theme?*/\n background: #d3d3d3;\n font-size: 40px;\n }\n}";
|
|
4912
4947
|
var KolAvatarDefaultStyle0 = defaultStyleCss$M;
|
|
4913
4948
|
|
|
4914
4949
|
class KolAvatar {
|
|
@@ -4995,7 +5030,7 @@ class KolAvatarWc {
|
|
|
4995
5030
|
}; }
|
|
4996
5031
|
}
|
|
4997
5032
|
|
|
4998
|
-
const defaultStyleCss$L = "@layer kol-global {\n
|
|
5033
|
+
const defaultStyleCss$L = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n /* :host implicitly inherits font-size, e.g. for usage in headlines */\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > span {\n display: inline-flex;\n place-items: center;\n /* Visible with forced colors */\n outline: transparent solid 1px;\n }\n :host > span > .kol-button-wc button {\n color: inherit;\n }\n}";
|
|
4999
5034
|
var KolBadgeDefaultStyle0 = defaultStyleCss$L;
|
|
5000
5035
|
|
|
5001
5036
|
featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
|
|
@@ -5096,7 +5131,7 @@ const watchNavLinks = (className, component, value) => {
|
|
|
5096
5131
|
uiUxHintMillerscheZahl(className, component.state._links.length);
|
|
5097
5132
|
};
|
|
5098
5133
|
|
|
5099
|
-
const defaultStyleCss$K = "@layer kol-global {\n
|
|
5134
|
+
const defaultStyleCss$K = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n li,\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n gap: 0.5em;\n flex-wrap: wrap;\n place-items: center;\n }\n .kol-icon::part(separator) {\n font-weight: 900;\n font-size: 0.7em;\n }\n .kol-icon::part(separator):before {\n content: \"\\f054\";\n font-family: \"Font Awesome 6 Free\";\n }\n}";
|
|
5100
5135
|
var KolBreadcrumbDefaultStyle0 = defaultStyleCss$K;
|
|
5101
5136
|
|
|
5102
5137
|
class KolBreadcrumb {
|
|
@@ -5157,7 +5192,7 @@ class KolBreadcrumb {
|
|
|
5157
5192
|
}; }
|
|
5158
5193
|
}
|
|
5159
5194
|
|
|
5160
|
-
const defaultStyleCss$J = "@charset \"UTF-8\";\n
|
|
5195
|
+
const defaultStyleCss$J = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n display: inline-block;\n }\n :is(a, button) {\n display: inline-flex;\n place-items: center;\n text-align: center;\n text-decoration-line: none;\n }\n :is(a, button)::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n /* TODO: Why we need this? */\n :is(a, button) > .kol-span-wc {\n margin: auto;\n width: 100%;\n }\n}";
|
|
5161
5196
|
var KolButtonDefaultStyle0 = defaultStyleCss$J;
|
|
5162
5197
|
|
|
5163
5198
|
class KolButton {
|
|
@@ -5241,7 +5276,7 @@ class KolButton {
|
|
|
5241
5276
|
}; }
|
|
5242
5277
|
}
|
|
5243
5278
|
|
|
5244
|
-
const defaultStyleCss$I = "@layer kol-global {\n
|
|
5279
|
+
const defaultStyleCss$I = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > .kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n }\n}";
|
|
5245
5280
|
var KolButtonGroupDefaultStyle0 = defaultStyleCss$I;
|
|
5246
5281
|
|
|
5247
5282
|
class KolButtonGroup {
|
|
@@ -5284,7 +5319,7 @@ class KolButtonGroupWc {
|
|
|
5284
5319
|
}; }
|
|
5285
5320
|
}
|
|
5286
5321
|
|
|
5287
|
-
const defaultStyleCss$H = "@layer kol-global {\n
|
|
5322
|
+
const defaultStyleCss$H = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: inline-block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) {\n align-items: baseline;\n display: inline-flex;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n :is(a, button) .kol-span-wc .span-label {\n text-decoration-line: underline;\n }\n a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.2em;\n }\n .skip {\n left: -99999px;\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n }\n .skip:focus {\n background-color: #fff;\n left: unset;\n padding: 1em;\n position: unset;\n }\n .kol-icon.external-link-icon {\n display: inline-flex;\n }\n}";
|
|
5288
5323
|
var KolButtonLinkDefaultStyle0 = defaultStyleCss$H;
|
|
5289
5324
|
|
|
5290
5325
|
class KolButtonLink {
|
|
@@ -5845,7 +5880,7 @@ class KolButtonWc {
|
|
|
5845
5880
|
}; }
|
|
5846
5881
|
}
|
|
5847
5882
|
|
|
5848
|
-
const defaultStyleCss$G = "@layer kol-global {\n
|
|
5883
|
+
const defaultStyleCss$G = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > div.card {\n height: 100%;\n position: relative;\n /* Visible with forced colors */\n outline: transparent solid 1px;\n }\n .close {\n position: absolute;\n top: 0;\n right: 0;\n }\n}";
|
|
5849
5884
|
var KolCardDefaultStyle0 = defaultStyleCss$G;
|
|
5850
5885
|
|
|
5851
5886
|
class KolCard {
|
|
@@ -6210,7 +6245,7 @@ const getRenderStates = (state) => {
|
|
|
6210
6245
|
|
|
6211
6246
|
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
|
|
6212
6247
|
|
|
6213
|
-
const defaultStyleCss$F = "@layer kol-global {\n
|
|
6248
|
+
const defaultStyleCss$F = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .combobox {\n position: relative;\n }\n .combobox--disabled, .combobox--disabled * {\n cursor: not-allowed !important;\n }\n .combobox--disabled {\n opacity: 0.5;\n outline: none;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n }\n .combobox__input {\n flex-grow: 1;\n }\n .combobox__icon {\n align-items: center;\n cursor: pointer;\n display: flex;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .combobox__listbox {\n display: block;\n position: absolute;\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 2;\n background-color: white;\n max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n cursor: pointer;\n }\n .combobox__listbox--cursor-hidden .combobox__item {\n cursor: none !important;\n }\n}";
|
|
6214
6249
|
var KolComboboxDefaultStyle0 = defaultStyleCss$F;
|
|
6215
6250
|
|
|
6216
6251
|
class KolCombobox {
|
|
@@ -6668,7 +6703,7 @@ class DetailsAnimationController {
|
|
|
6668
6703
|
}
|
|
6669
6704
|
}
|
|
6670
6705
|
|
|
6671
|
-
const defaultStyleCss$E = "@layer kol-global {\n
|
|
6706
|
+
const defaultStyleCss$E = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n details {\n display: grid;\n }\n details > summary {\n cursor: pointer;\n display: flex;\n place-items: center;\n }\n details > summary > span {\n border-bottom-color: grey;\n border-bottom-style: solid;\n }\n details > summary:focus > span,\n details > summary:hover > span,\n details[open] > summary > span {\n border-bottom-color: #000;\n }\n .content {\n overflow: hidden;\n }\n details > .kol-indented-text {\n margin: 0.25em 0 0 0.5em;\n }\n .icon.is-open::part(icon) {\n transform: rotate(90deg);\n }\n}";
|
|
6672
6707
|
var KolDetailsDefaultStyle0 = defaultStyleCss$E;
|
|
6673
6708
|
|
|
6674
6709
|
class KolDetails {
|
|
@@ -6779,7 +6814,7 @@ class KolDetails {
|
|
|
6779
6814
|
}; }
|
|
6780
6815
|
}
|
|
6781
6816
|
|
|
6782
|
-
const defaultStyleCss$D = "@layer kol-global {\n
|
|
6817
|
+
const defaultStyleCss$D = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .drawer__dialog {\n padding: 0;\n border: none;\n }\n .drawer__wrapper {\n position: fixed;\n width: auto;\n overflow: auto;\n background: white;\n }\n .drawer__wrapper--left {\n top: 0;\n left: 0;\n height: 100vh;\n max-height: 100%;\n }\n .drawer__wrapper--right {\n top: 0;\n right: 0;\n height: 100vh;\n max-height: 100%;\n }\n .drawer__wrapper--top {\n left: 0;\n top: 0;\n width: 100vw;\n max-width: 100%;\n }\n .drawer__wrapper--bottom {\n left: 0;\n bottom: 0;\n width: 100vw;\n max-width: 100%;\n }\n .drawer__content {\n position: relative;\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
6783
6818
|
var KolDrawerDefaultStyle0 = defaultStyleCss$D;
|
|
6784
6819
|
|
|
6785
6820
|
class KolDrawer {
|
|
@@ -6911,7 +6946,7 @@ class KolDrawer {
|
|
|
6911
6946
|
}; }
|
|
6912
6947
|
}
|
|
6913
6948
|
|
|
6914
|
-
const defaultStyleCss$C = "@layer kol-global {\n .sc-kol-form-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-form-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-form-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-form-default-h {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n \n \n \n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n \n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n \n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n\n@layer kol-global {\n .sc-kol-form-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-form-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-form-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-form-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n \n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n .sc-kol-form-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
6949
|
+
const defaultStyleCss$C = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
6915
6950
|
var KolFormDefaultStyle0 = defaultStyleCss$C;
|
|
6916
6951
|
|
|
6917
6952
|
class KolForm {
|
|
@@ -7010,7 +7045,7 @@ class KolForm {
|
|
|
7010
7045
|
}; }
|
|
7011
7046
|
}
|
|
7012
7047
|
|
|
7013
|
-
const defaultStyleCss$B = "@layer kol-global {\n
|
|
7048
|
+
const defaultStyleCss$B = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
7014
7049
|
var KolHeadingDefaultStyle0 = defaultStyleCss$B;
|
|
7015
7050
|
|
|
7016
7051
|
class KolHeading {
|
|
@@ -7124,7 +7159,7 @@ class KolHeadingWc {
|
|
|
7124
7159
|
}; }
|
|
7125
7160
|
}
|
|
7126
7161
|
|
|
7127
|
-
const defaultStyleCss$A = "@font-face {\n font-family: \"codicon\";\n font-display: block;\n src: url(\"./codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa\") format(\"truetype\");\n}\n/*!@.codicon[class*=codicon-]*/.codicon[class*=codicon-].sc-kol-icon-default {\n font: normal normal normal 16px/1 codicon;\n display: inline-block;\n text-decoration: none;\n text-rendering: auto;\n text-align: center;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n user-select: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n}\n\n\n@keyframes codicon-spin {\n 100% {\n transform: rotate(360deg);\n }\n}\n/*!@.codicon-sync.codicon-modifier-spin,\n.codicon-loading.codicon-modifier-spin,\n.codicon-gear.codicon-modifier-spin*/.codicon-sync.codicon-modifier-spin.sc-kol-icon-default, .codicon-loading.codicon-modifier-spin.sc-kol-icon-default, .codicon-gear.codicon-modifier-spin.sc-kol-icon-default {\n \n animation: codicon-spin 1.5s steps(30) infinite;\n}\n\n/*!@.codicon-modifier-disabled*/.codicon-modifier-disabled.sc-kol-icon-default {\n opacity: 0.5;\n}\n\n/*!@.codicon-modifier-hidden*/.codicon-modifier-hidden.sc-kol-icon-default {\n opacity: 0;\n}\n\n\n/*!@.codicon-loading*/.codicon-loading.sc-kol-icon-default {\n animation-duration: 1s !important;\n animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67) !important;\n}\n\n\n/*!@.codicon-add:before*/.codicon-add.sc-kol-icon-default:before {\n content: \"\\ea60\";\n}\n\n/*!@.codicon-plus:before*/.codicon-plus.sc-kol-icon-default:before {\n content: \"\\ea60\";\n}\n\n/*!@.codicon-gist-new:before*/.codicon-gist-new.sc-kol-icon-default:before {\n content: \"\\ea60\";\n}\n\n/*!@.codicon-repo-create:before*/.codicon-repo-create.sc-kol-icon-default:before {\n content: \"\\ea60\";\n}\n\n/*!@.codicon-lightbulb:before*/.codicon-lightbulb.sc-kol-icon-default:before {\n content: \"\\ea61\";\n}\n\n/*!@.codicon-light-bulb:before*/.codicon-light-bulb.sc-kol-icon-default:before {\n content: \"\\ea61\";\n}\n\n/*!@.codicon-repo:before*/.codicon-repo.sc-kol-icon-default:before {\n content: \"\\ea62\";\n}\n\n/*!@.codicon-repo-delete:before*/.codicon-repo-delete.sc-kol-icon-default:before {\n content: \"\\ea62\";\n}\n\n/*!@.codicon-gist-fork:before*/.codicon-gist-fork.sc-kol-icon-default:before {\n content: \"\\ea63\";\n}\n\n/*!@.codicon-repo-forked:before*/.codicon-repo-forked.sc-kol-icon-default:before {\n content: \"\\ea63\";\n}\n\n/*!@.codicon-git-pull-request:before*/.codicon-git-pull-request.sc-kol-icon-default:before {\n content: \"\\ea64\";\n}\n\n/*!@.codicon-git-pull-request-abandoned:before*/.codicon-git-pull-request-abandoned.sc-kol-icon-default:before {\n content: \"\\ea64\";\n}\n\n/*!@.codicon-record-keys:before*/.codicon-record-keys.sc-kol-icon-default:before {\n content: \"\\ea65\";\n}\n\n/*!@.codicon-keyboard:before*/.codicon-keyboard.sc-kol-icon-default:before {\n content: \"\\ea65\";\n}\n\n/*!@.codicon-tag:before*/.codicon-tag.sc-kol-icon-default:before {\n content: \"\\ea66\";\n}\n\n/*!@.codicon-tag-add:before*/.codicon-tag-add.sc-kol-icon-default:before {\n content: \"\\ea66\";\n}\n\n/*!@.codicon-tag-remove:before*/.codicon-tag-remove.sc-kol-icon-default:before {\n content: \"\\ea66\";\n}\n\n/*!@.codicon-person:before*/.codicon-person.sc-kol-icon-default:before {\n content: \"\\ea67\";\n}\n\n/*!@.codicon-person-follow:before*/.codicon-person-follow.sc-kol-icon-default:before {\n content: \"\\ea67\";\n}\n\n/*!@.codicon-person-outline:before*/.codicon-person-outline.sc-kol-icon-default:before {\n content: \"\\ea67\";\n}\n\n/*!@.codicon-person-filled:before*/.codicon-person-filled.sc-kol-icon-default:before {\n content: \"\\ea67\";\n}\n\n/*!@.codicon-git-branch:before*/.codicon-git-branch.sc-kol-icon-default:before {\n content: \"\\ea68\";\n}\n\n/*!@.codicon-git-branch-create:before*/.codicon-git-branch-create.sc-kol-icon-default:before {\n content: \"\\ea68\";\n}\n\n/*!@.codicon-git-branch-delete:before*/.codicon-git-branch-delete.sc-kol-icon-default:before {\n content: \"\\ea68\";\n}\n\n/*!@.codicon-source-control:before*/.codicon-source-control.sc-kol-icon-default:before {\n content: \"\\ea68\";\n}\n\n/*!@.codicon-mirror:before*/.codicon-mirror.sc-kol-icon-default:before {\n content: \"\\ea69\";\n}\n\n/*!@.codicon-mirror-public:before*/.codicon-mirror-public.sc-kol-icon-default:before {\n content: \"\\ea69\";\n}\n\n/*!@.codicon-star:before*/.codicon-star.sc-kol-icon-default:before {\n content: \"\\ea6a\";\n}\n\n/*!@.codicon-star-add:before*/.codicon-star-add.sc-kol-icon-default:before {\n content: \"\\ea6a\";\n}\n\n/*!@.codicon-star-delete:before*/.codicon-star-delete.sc-kol-icon-default:before {\n content: \"\\ea6a\";\n}\n\n/*!@.codicon-star-empty:before*/.codicon-star-empty.sc-kol-icon-default:before {\n content: \"\\ea6a\";\n}\n\n/*!@.codicon-comment:before*/.codicon-comment.sc-kol-icon-default:before {\n content: \"\\ea6b\";\n}\n\n/*!@.codicon-comment-add:before*/.codicon-comment-add.sc-kol-icon-default:before {\n content: \"\\ea6b\";\n}\n\n/*!@.codicon-alert:before*/.codicon-alert.sc-kol-icon-default:before {\n content: \"\\ea6c\";\n}\n\n/*!@.codicon-warning:before*/.codicon-warning.sc-kol-icon-default:before {\n content: \"\\ea6c\";\n}\n\n/*!@.codicon-search:before*/.codicon-search.sc-kol-icon-default:before {\n content: \"\\ea6d\";\n}\n\n/*!@.codicon-search-save:before*/.codicon-search-save.sc-kol-icon-default:before {\n content: \"\\ea6d\";\n}\n\n/*!@.codicon-log-out:before*/.codicon-log-out.sc-kol-icon-default:before {\n content: \"\\ea6e\";\n}\n\n/*!@.codicon-sign-out:before*/.codicon-sign-out.sc-kol-icon-default:before {\n content: \"\\ea6e\";\n}\n\n/*!@.codicon-log-in:before*/.codicon-log-in.sc-kol-icon-default:before {\n content: \"\\ea6f\";\n}\n\n/*!@.codicon-sign-in:before*/.codicon-sign-in.sc-kol-icon-default:before {\n content: \"\\ea6f\";\n}\n\n/*!@.codicon-eye:before*/.codicon-eye.sc-kol-icon-default:before {\n content: \"\\ea70\";\n}\n\n/*!@.codicon-eye-unwatch:before*/.codicon-eye-unwatch.sc-kol-icon-default:before {\n content: \"\\ea70\";\n}\n\n/*!@.codicon-eye-watch:before*/.codicon-eye-watch.sc-kol-icon-default:before {\n content: \"\\ea70\";\n}\n\n/*!@.codicon-circle-filled:before*/.codicon-circle-filled.sc-kol-icon-default:before {\n content: \"\\ea71\";\n}\n\n/*!@.codicon-primitive-dot:before*/.codicon-primitive-dot.sc-kol-icon-default:before {\n content: \"\\ea71\";\n}\n\n/*!@.codicon-close-dirty:before*/.codicon-close-dirty.sc-kol-icon-default:before {\n content: \"\\ea71\";\n}\n\n/*!@.codicon-debug-breakpoint:before*/.codicon-debug-breakpoint.sc-kol-icon-default:before {\n content: \"\\ea71\";\n}\n\n/*!@.codicon-debug-breakpoint-disabled:before*/.codicon-debug-breakpoint-disabled.sc-kol-icon-default:before {\n content: \"\\ea71\";\n}\n\n/*!@.codicon-debug-hint:before*/.codicon-debug-hint.sc-kol-icon-default:before {\n content: \"\\ea71\";\n}\n\n/*!@.codicon-primitive-square:before*/.codicon-primitive-square.sc-kol-icon-default:before {\n content: \"\\ea72\";\n}\n\n/*!@.codicon-edit:before*/.codicon-edit.sc-kol-icon-default:before {\n content: \"\\ea73\";\n}\n\n/*!@.codicon-pencil:before*/.codicon-pencil.sc-kol-icon-default:before {\n content: \"\\ea73\";\n}\n\n/*!@.codicon-info:before*/.codicon-info.sc-kol-icon-default:before {\n content: \"\\ea74\";\n}\n\n/*!@.codicon-issue-opened:before*/.codicon-issue-opened.sc-kol-icon-default:before {\n content: \"\\ea74\";\n}\n\n/*!@.codicon-gist-private:before*/.codicon-gist-private.sc-kol-icon-default:before {\n content: \"\\ea75\";\n}\n\n/*!@.codicon-git-fork-private:before*/.codicon-git-fork-private.sc-kol-icon-default:before {\n content: \"\\ea75\";\n}\n\n/*!@.codicon-lock:before*/.codicon-lock.sc-kol-icon-default:before {\n content: \"\\ea75\";\n}\n\n/*!@.codicon-mirror-private:before*/.codicon-mirror-private.sc-kol-icon-default:before {\n content: \"\\ea75\";\n}\n\n/*!@.codicon-close:before*/.codicon-close.sc-kol-icon-default:before {\n content: \"\\ea76\";\n}\n\n/*!@.codicon-remove-close:before*/.codicon-remove-close.sc-kol-icon-default:before {\n content: \"\\ea76\";\n}\n\n/*!@.codicon-x:before*/.codicon-x.sc-kol-icon-default:before {\n content: \"\\ea76\";\n}\n\n/*!@.codicon-repo-sync:before*/.codicon-repo-sync.sc-kol-icon-default:before {\n content: \"\\ea77\";\n}\n\n/*!@.codicon-sync:before*/.codicon-sync.sc-kol-icon-default:before {\n content: \"\\ea77\";\n}\n\n/*!@.codicon-clone:before*/.codicon-clone.sc-kol-icon-default:before {\n content: \"\\ea78\";\n}\n\n/*!@.codicon-desktop-download:before*/.codicon-desktop-download.sc-kol-icon-default:before {\n content: \"\\ea78\";\n}\n\n/*!@.codicon-beaker:before*/.codicon-beaker.sc-kol-icon-default:before {\n content: \"\\ea79\";\n}\n\n/*!@.codicon-microscope:before*/.codicon-microscope.sc-kol-icon-default:before {\n content: \"\\ea79\";\n}\n\n/*!@.codicon-vm:before*/.codicon-vm.sc-kol-icon-default:before {\n content: \"\\ea7a\";\n}\n\n/*!@.codicon-device-desktop:before*/.codicon-device-desktop.sc-kol-icon-default:before {\n content: \"\\ea7a\";\n}\n\n/*!@.codicon-file:before*/.codicon-file.sc-kol-icon-default:before {\n content: \"\\ea7b\";\n}\n\n/*!@.codicon-file-text:before*/.codicon-file-text.sc-kol-icon-default:before {\n content: \"\\ea7b\";\n}\n\n/*!@.codicon-more:before*/.codicon-more.sc-kol-icon-default:before {\n content: \"\\ea7c\";\n}\n\n/*!@.codicon-ellipsis:before*/.codicon-ellipsis.sc-kol-icon-default:before {\n content: \"\\ea7c\";\n}\n\n/*!@.codicon-kebab-horizontal:before*/.codicon-kebab-horizontal.sc-kol-icon-default:before {\n content: \"\\ea7c\";\n}\n\n/*!@.codicon-mail-reply:before*/.codicon-mail-reply.sc-kol-icon-default:before {\n content: \"\\ea7d\";\n}\n\n/*!@.codicon-reply:before*/.codicon-reply.sc-kol-icon-default:before {\n content: \"\\ea7d\";\n}\n\n/*!@.codicon-organization:before*/.codicon-organization.sc-kol-icon-default:before {\n content: \"\\ea7e\";\n}\n\n/*!@.codicon-organization-filled:before*/.codicon-organization-filled.sc-kol-icon-default:before {\n content: \"\\ea7e\";\n}\n\n/*!@.codicon-organization-outline:before*/.codicon-organization-outline.sc-kol-icon-default:before {\n content: \"\\ea7e\";\n}\n\n/*!@.codicon-new-file:before*/.codicon-new-file.sc-kol-icon-default:before {\n content: \"\\ea7f\";\n}\n\n/*!@.codicon-file-add:before*/.codicon-file-add.sc-kol-icon-default:before {\n content: \"\\ea7f\";\n}\n\n/*!@.codicon-new-folder:before*/.codicon-new-folder.sc-kol-icon-default:before {\n content: \"\\ea80\";\n}\n\n/*!@.codicon-file-directory-create:before*/.codicon-file-directory-create.sc-kol-icon-default:before {\n content: \"\\ea80\";\n}\n\n/*!@.codicon-trash:before*/.codicon-trash.sc-kol-icon-default:before {\n content: \"\\ea81\";\n}\n\n/*!@.codicon-trashcan:before*/.codicon-trashcan.sc-kol-icon-default:before {\n content: \"\\ea81\";\n}\n\n/*!@.codicon-history:before*/.codicon-history.sc-kol-icon-default:before {\n content: \"\\ea82\";\n}\n\n/*!@.codicon-clock:before*/.codicon-clock.sc-kol-icon-default:before {\n content: \"\\ea82\";\n}\n\n/*!@.codicon-folder:before*/.codicon-folder.sc-kol-icon-default:before {\n content: \"\\ea83\";\n}\n\n/*!@.codicon-file-directory:before*/.codicon-file-directory.sc-kol-icon-default:before {\n content: \"\\ea83\";\n}\n\n/*!@.codicon-symbol-folder:before*/.codicon-symbol-folder.sc-kol-icon-default:before {\n content: \"\\ea83\";\n}\n\n/*!@.codicon-logo-github:before*/.codicon-logo-github.sc-kol-icon-default:before {\n content: \"\\ea84\";\n}\n\n/*!@.codicon-mark-github:before*/.codicon-mark-github.sc-kol-icon-default:before {\n content: \"\\ea84\";\n}\n\n/*!@.codicon-github:before*/.codicon-github.sc-kol-icon-default:before {\n content: \"\\ea84\";\n}\n\n/*!@.codicon-terminal:before*/.codicon-terminal.sc-kol-icon-default:before {\n content: \"\\ea85\";\n}\n\n/*!@.codicon-console:before*/.codicon-console.sc-kol-icon-default:before {\n content: \"\\ea85\";\n}\n\n/*!@.codicon-repl:before*/.codicon-repl.sc-kol-icon-default:before {\n content: \"\\ea85\";\n}\n\n/*!@.codicon-zap:before*/.codicon-zap.sc-kol-icon-default:before {\n content: \"\\ea86\";\n}\n\n/*!@.codicon-symbol-event:before*/.codicon-symbol-event.sc-kol-icon-default:before {\n content: \"\\ea86\";\n}\n\n/*!@.codicon-error:before*/.codicon-error.sc-kol-icon-default:before {\n content: \"\\ea87\";\n}\n\n/*!@.codicon-stop:before*/.codicon-stop.sc-kol-icon-default:before {\n content: \"\\ea87\";\n}\n\n/*!@.codicon-variable:before*/.codicon-variable.sc-kol-icon-default:before {\n content: \"\\ea88\";\n}\n\n/*!@.codicon-symbol-variable:before*/.codicon-symbol-variable.sc-kol-icon-default:before {\n content: \"\\ea88\";\n}\n\n/*!@.codicon-array:before*/.codicon-array.sc-kol-icon-default:before {\n content: \"\\ea8a\";\n}\n\n/*!@.codicon-symbol-array:before*/.codicon-symbol-array.sc-kol-icon-default:before {\n content: \"\\ea8a\";\n}\n\n/*!@.codicon-symbol-module:before*/.codicon-symbol-module.sc-kol-icon-default:before {\n content: \"\\ea8b\";\n}\n\n/*!@.codicon-symbol-package:before*/.codicon-symbol-package.sc-kol-icon-default:before {\n content: \"\\ea8b\";\n}\n\n/*!@.codicon-symbol-namespace:before*/.codicon-symbol-namespace.sc-kol-icon-default:before {\n content: \"\\ea8b\";\n}\n\n/*!@.codicon-symbol-object:before*/.codicon-symbol-object.sc-kol-icon-default:before {\n content: \"\\ea8b\";\n}\n\n/*!@.codicon-symbol-method:before*/.codicon-symbol-method.sc-kol-icon-default:before {\n content: \"\\ea8c\";\n}\n\n/*!@.codicon-symbol-function:before*/.codicon-symbol-function.sc-kol-icon-default:before {\n content: \"\\ea8c\";\n}\n\n/*!@.codicon-symbol-constructor:before*/.codicon-symbol-constructor.sc-kol-icon-default:before {\n content: \"\\ea8c\";\n}\n\n/*!@.codicon-symbol-boolean:before*/.codicon-symbol-boolean.sc-kol-icon-default:before {\n content: \"\\ea8f\";\n}\n\n/*!@.codicon-symbol-null:before*/.codicon-symbol-null.sc-kol-icon-default:before {\n content: \"\\ea8f\";\n}\n\n/*!@.codicon-symbol-numeric:before*/.codicon-symbol-numeric.sc-kol-icon-default:before {\n content: \"\\ea90\";\n}\n\n/*!@.codicon-symbol-number:before*/.codicon-symbol-number.sc-kol-icon-default:before {\n content: \"\\ea90\";\n}\n\n/*!@.codicon-symbol-structure:before*/.codicon-symbol-structure.sc-kol-icon-default:before {\n content: \"\\ea91\";\n}\n\n/*!@.codicon-symbol-struct:before*/.codicon-symbol-struct.sc-kol-icon-default:before {\n content: \"\\ea91\";\n}\n\n/*!@.codicon-symbol-parameter:before*/.codicon-symbol-parameter.sc-kol-icon-default:before {\n content: \"\\ea92\";\n}\n\n/*!@.codicon-symbol-type-parameter:before*/.codicon-symbol-type-parameter.sc-kol-icon-default:before {\n content: \"\\ea92\";\n}\n\n/*!@.codicon-symbol-key:before*/.codicon-symbol-key.sc-kol-icon-default:before {\n content: \"\\ea93\";\n}\n\n/*!@.codicon-symbol-text:before*/.codicon-symbol-text.sc-kol-icon-default:before {\n content: \"\\ea93\";\n}\n\n/*!@.codicon-symbol-reference:before*/.codicon-symbol-reference.sc-kol-icon-default:before {\n content: \"\\ea94\";\n}\n\n/*!@.codicon-go-to-file:before*/.codicon-go-to-file.sc-kol-icon-default:before {\n content: \"\\ea94\";\n}\n\n/*!@.codicon-symbol-enum:before*/.codicon-symbol-enum.sc-kol-icon-default:before {\n content: \"\\ea95\";\n}\n\n/*!@.codicon-symbol-value:before*/.codicon-symbol-value.sc-kol-icon-default:before {\n content: \"\\ea95\";\n}\n\n/*!@.codicon-symbol-ruler:before*/.codicon-symbol-ruler.sc-kol-icon-default:before {\n content: \"\\ea96\";\n}\n\n/*!@.codicon-symbol-unit:before*/.codicon-symbol-unit.sc-kol-icon-default:before {\n content: \"\\ea96\";\n}\n\n/*!@.codicon-activate-breakpoints:before*/.codicon-activate-breakpoints.sc-kol-icon-default:before {\n content: \"\\ea97\";\n}\n\n/*!@.codicon-archive:before*/.codicon-archive.sc-kol-icon-default:before {\n content: \"\\ea98\";\n}\n\n/*!@.codicon-arrow-both:before*/.codicon-arrow-both.sc-kol-icon-default:before {\n content: \"\\ea99\";\n}\n\n/*!@.codicon-arrow-down:before*/.codicon-arrow-down.sc-kol-icon-default:before {\n content: \"\\ea9a\";\n}\n\n/*!@.codicon-arrow-left:before*/.codicon-arrow-left.sc-kol-icon-default:before {\n content: \"\\ea9b\";\n}\n\n/*!@.codicon-arrow-right:before*/.codicon-arrow-right.sc-kol-icon-default:before {\n content: \"\\ea9c\";\n}\n\n/*!@.codicon-arrow-small-down:before*/.codicon-arrow-small-down.sc-kol-icon-default:before {\n content: \"\\ea9d\";\n}\n\n/*!@.codicon-arrow-small-left:before*/.codicon-arrow-small-left.sc-kol-icon-default:before {\n content: \"\\ea9e\";\n}\n\n/*!@.codicon-arrow-small-right:before*/.codicon-arrow-small-right.sc-kol-icon-default:before {\n content: \"\\ea9f\";\n}\n\n/*!@.codicon-arrow-small-up:before*/.codicon-arrow-small-up.sc-kol-icon-default:before {\n content: \"\\eaa0\";\n}\n\n/*!@.codicon-arrow-up:before*/.codicon-arrow-up.sc-kol-icon-default:before {\n content: \"\\eaa1\";\n}\n\n/*!@.codicon-bell:before*/.codicon-bell.sc-kol-icon-default:before {\n content: \"\\eaa2\";\n}\n\n/*!@.codicon-bold:before*/.codicon-bold.sc-kol-icon-default:before {\n content: \"\\eaa3\";\n}\n\n/*!@.codicon-book:before*/.codicon-book.sc-kol-icon-default:before {\n content: \"\\eaa4\";\n}\n\n/*!@.codicon-bookmark:before*/.codicon-bookmark.sc-kol-icon-default:before {\n content: \"\\eaa5\";\n}\n\n/*!@.codicon-debug-breakpoint-conditional-unverified:before*/.codicon-debug-breakpoint-conditional-unverified.sc-kol-icon-default:before {\n content: \"\\eaa6\";\n}\n\n/*!@.codicon-debug-breakpoint-conditional:before*/.codicon-debug-breakpoint-conditional.sc-kol-icon-default:before {\n content: \"\\eaa7\";\n}\n\n/*!@.codicon-debug-breakpoint-conditional-disabled:before*/.codicon-debug-breakpoint-conditional-disabled.sc-kol-icon-default:before {\n content: \"\\eaa7\";\n}\n\n/*!@.codicon-debug-breakpoint-data-unverified:before*/.codicon-debug-breakpoint-data-unverified.sc-kol-icon-default:before {\n content: \"\\eaa8\";\n}\n\n/*!@.codicon-debug-breakpoint-data:before*/.codicon-debug-breakpoint-data.sc-kol-icon-default:before {\n content: \"\\eaa9\";\n}\n\n/*!@.codicon-debug-breakpoint-data-disabled:before*/.codicon-debug-breakpoint-data-disabled.sc-kol-icon-default:before {\n content: \"\\eaa9\";\n}\n\n/*!@.codicon-debug-breakpoint-log-unverified:before*/.codicon-debug-breakpoint-log-unverified.sc-kol-icon-default:before {\n content: \"\\eaaa\";\n}\n\n/*!@.codicon-debug-breakpoint-log:before*/.codicon-debug-breakpoint-log.sc-kol-icon-default:before {\n content: \"\\eaab\";\n}\n\n/*!@.codicon-debug-breakpoint-log-disabled:before*/.codicon-debug-breakpoint-log-disabled.sc-kol-icon-default:before {\n content: \"\\eaab\";\n}\n\n/*!@.codicon-briefcase:before*/.codicon-briefcase.sc-kol-icon-default:before {\n content: \"\\eaac\";\n}\n\n/*!@.codicon-broadcast:before*/.codicon-broadcast.sc-kol-icon-default:before {\n content: \"\\eaad\";\n}\n\n/*!@.codicon-browser:before*/.codicon-browser.sc-kol-icon-default:before {\n content: \"\\eaae\";\n}\n\n/*!@.codicon-bug:before*/.codicon-bug.sc-kol-icon-default:before {\n content: \"\\eaaf\";\n}\n\n/*!@.codicon-calendar:before*/.codicon-calendar.sc-kol-icon-default:before {\n content: \"\\eab0\";\n}\n\n/*!@.codicon-case-sensitive:before*/.codicon-case-sensitive.sc-kol-icon-default:before {\n content: \"\\eab1\";\n}\n\n/*!@.codicon-check:before*/.codicon-check.sc-kol-icon-default:before {\n content: \"\\eab2\";\n}\n\n/*!@.codicon-checklist:before*/.codicon-checklist.sc-kol-icon-default:before {\n content: \"\\eab3\";\n}\n\n/*!@.codicon-chevron-down:before*/.codicon-chevron-down.sc-kol-icon-default:before {\n content: \"\\eab4\";\n}\n\n/*!@.codicon-chevron-left:before*/.codicon-chevron-left.sc-kol-icon-default:before {\n content: \"\\eab5\";\n}\n\n/*!@.codicon-chevron-right:before*/.codicon-chevron-right.sc-kol-icon-default:before {\n content: \"\\eab6\";\n}\n\n/*!@.codicon-chevron-up:before*/.codicon-chevron-up.sc-kol-icon-default:before {\n content: \"\\eab7\";\n}\n\n/*!@.codicon-chrome-close:before*/.codicon-chrome-close.sc-kol-icon-default:before {\n content: \"\\eab8\";\n}\n\n/*!@.codicon-chrome-maximize:before*/.codicon-chrome-maximize.sc-kol-icon-default:before {\n content: \"\\eab9\";\n}\n\n/*!@.codicon-chrome-minimize:before*/.codicon-chrome-minimize.sc-kol-icon-default:before {\n content: \"\\eaba\";\n}\n\n/*!@.codicon-chrome-restore:before*/.codicon-chrome-restore.sc-kol-icon-default:before {\n content: \"\\eabb\";\n}\n\n/*!@.codicon-circle-outline:before*/.codicon-circle-outline.sc-kol-icon-default:before {\n content: \"\\eabc\";\n}\n\n/*!@.codicon-debug-breakpoint-unverified:before*/.codicon-debug-breakpoint-unverified.sc-kol-icon-default:before {\n content: \"\\eabc\";\n}\n\n/*!@.codicon-circle-slash:before*/.codicon-circle-slash.sc-kol-icon-default:before {\n content: \"\\eabd\";\n}\n\n/*!@.codicon-circuit-board:before*/.codicon-circuit-board.sc-kol-icon-default:before {\n content: \"\\eabe\";\n}\n\n/*!@.codicon-clear-all:before*/.codicon-clear-all.sc-kol-icon-default:before {\n content: \"\\eabf\";\n}\n\n/*!@.codicon-clippy:before*/.codicon-clippy.sc-kol-icon-default:before {\n content: \"\\eac0\";\n}\n\n/*!@.codicon-close-all:before*/.codicon-close-all.sc-kol-icon-default:before {\n content: \"\\eac1\";\n}\n\n/*!@.codicon-cloud-download:before*/.codicon-cloud-download.sc-kol-icon-default:before {\n content: \"\\eac2\";\n}\n\n/*!@.codicon-cloud-upload:before*/.codicon-cloud-upload.sc-kol-icon-default:before {\n content: \"\\eac3\";\n}\n\n/*!@.codicon-code:before*/.codicon-code.sc-kol-icon-default:before {\n content: \"\\eac4\";\n}\n\n/*!@.codicon-collapse-all:before*/.codicon-collapse-all.sc-kol-icon-default:before {\n content: \"\\eac5\";\n}\n\n/*!@.codicon-color-mode:before*/.codicon-color-mode.sc-kol-icon-default:before {\n content: \"\\eac6\";\n}\n\n/*!@.codicon-comment-discussion:before*/.codicon-comment-discussion.sc-kol-icon-default:before {\n content: \"\\eac7\";\n}\n\n/*!@.codicon-credit-card:before*/.codicon-credit-card.sc-kol-icon-default:before {\n content: \"\\eac9\";\n}\n\n/*!@.codicon-dash:before*/.codicon-dash.sc-kol-icon-default:before {\n content: \"\\eacc\";\n}\n\n/*!@.codicon-dashboard:before*/.codicon-dashboard.sc-kol-icon-default:before {\n content: \"\\eacd\";\n}\n\n/*!@.codicon-database:before*/.codicon-database.sc-kol-icon-default:before {\n content: \"\\eace\";\n}\n\n/*!@.codicon-debug-continue:before*/.codicon-debug-continue.sc-kol-icon-default:before {\n content: \"\\eacf\";\n}\n\n/*!@.codicon-debug-disconnect:before*/.codicon-debug-disconnect.sc-kol-icon-default:before {\n content: \"\\ead0\";\n}\n\n/*!@.codicon-debug-pause:before*/.codicon-debug-pause.sc-kol-icon-default:before {\n content: \"\\ead1\";\n}\n\n/*!@.codicon-debug-restart:before*/.codicon-debug-restart.sc-kol-icon-default:before {\n content: \"\\ead2\";\n}\n\n/*!@.codicon-debug-start:before*/.codicon-debug-start.sc-kol-icon-default:before {\n content: \"\\ead3\";\n}\n\n/*!@.codicon-debug-step-into:before*/.codicon-debug-step-into.sc-kol-icon-default:before {\n content: \"\\ead4\";\n}\n\n/*!@.codicon-debug-step-out:before*/.codicon-debug-step-out.sc-kol-icon-default:before {\n content: \"\\ead5\";\n}\n\n/*!@.codicon-debug-step-over:before*/.codicon-debug-step-over.sc-kol-icon-default:before {\n content: \"\\ead6\";\n}\n\n/*!@.codicon-debug-stop:before*/.codicon-debug-stop.sc-kol-icon-default:before {\n content: \"\\ead7\";\n}\n\n/*!@.codicon-debug:before*/.codicon-debug.sc-kol-icon-default:before {\n content: \"\\ead8\";\n}\n\n/*!@.codicon-device-camera-video:before*/.codicon-device-camera-video.sc-kol-icon-default:before {\n content: \"\\ead9\";\n}\n\n/*!@.codicon-device-camera:before*/.codicon-device-camera.sc-kol-icon-default:before {\n content: \"\\eada\";\n}\n\n/*!@.codicon-device-mobile:before*/.codicon-device-mobile.sc-kol-icon-default:before {\n content: \"\\eadb\";\n}\n\n/*!@.codicon-diff-added:before*/.codicon-diff-added.sc-kol-icon-default:before {\n content: \"\\eadc\";\n}\n\n/*!@.codicon-diff-ignored:before*/.codicon-diff-ignored.sc-kol-icon-default:before {\n content: \"\\eadd\";\n}\n\n/*!@.codicon-diff-modified:before*/.codicon-diff-modified.sc-kol-icon-default:before {\n content: \"\\eade\";\n}\n\n/*!@.codicon-diff-removed:before*/.codicon-diff-removed.sc-kol-icon-default:before {\n content: \"\\eadf\";\n}\n\n/*!@.codicon-diff-renamed:before*/.codicon-diff-renamed.sc-kol-icon-default:before {\n content: \"\\eae0\";\n}\n\n/*!@.codicon-diff:before*/.codicon-diff.sc-kol-icon-default:before {\n content: \"\\eae1\";\n}\n\n/*!@.codicon-discard:before*/.codicon-discard.sc-kol-icon-default:before {\n content: \"\\eae2\";\n}\n\n/*!@.codicon-editor-layout:before*/.codicon-editor-layout.sc-kol-icon-default:before {\n content: \"\\eae3\";\n}\n\n/*!@.codicon-empty-window:before*/.codicon-empty-window.sc-kol-icon-default:before {\n content: \"\\eae4\";\n}\n\n/*!@.codicon-exclude:before*/.codicon-exclude.sc-kol-icon-default:before {\n content: \"\\eae5\";\n}\n\n/*!@.codicon-extensions:before*/.codicon-extensions.sc-kol-icon-default:before {\n content: \"\\eae6\";\n}\n\n/*!@.codicon-eye-closed:before*/.codicon-eye-closed.sc-kol-icon-default:before {\n content: \"\\eae7\";\n}\n\n/*!@.codicon-file-binary:before*/.codicon-file-binary.sc-kol-icon-default:before {\n content: \"\\eae8\";\n}\n\n/*!@.codicon-file-code:before*/.codicon-file-code.sc-kol-icon-default:before {\n content: \"\\eae9\";\n}\n\n/*!@.codicon-file-media:before*/.codicon-file-media.sc-kol-icon-default:before {\n content: \"\\eaea\";\n}\n\n/*!@.codicon-file-pdf:before*/.codicon-file-pdf.sc-kol-icon-default:before {\n content: \"\\eaeb\";\n}\n\n/*!@.codicon-file-submodule:before*/.codicon-file-submodule.sc-kol-icon-default:before {\n content: \"\\eaec\";\n}\n\n/*!@.codicon-file-symlink-directory:before*/.codicon-file-symlink-directory.sc-kol-icon-default:before {\n content: \"\\eaed\";\n}\n\n/*!@.codicon-file-symlink-file:before*/.codicon-file-symlink-file.sc-kol-icon-default:before {\n content: \"\\eaee\";\n}\n\n/*!@.codicon-file-zip:before*/.codicon-file-zip.sc-kol-icon-default:before {\n content: \"\\eaef\";\n}\n\n/*!@.codicon-files:before*/.codicon-files.sc-kol-icon-default:before {\n content: \"\\eaf0\";\n}\n\n/*!@.codicon-filter:before*/.codicon-filter.sc-kol-icon-default:before {\n content: \"\\eaf1\";\n}\n\n/*!@.codicon-flame:before*/.codicon-flame.sc-kol-icon-default:before {\n content: \"\\eaf2\";\n}\n\n/*!@.codicon-fold-down:before*/.codicon-fold-down.sc-kol-icon-default:before {\n content: \"\\eaf3\";\n}\n\n/*!@.codicon-fold-up:before*/.codicon-fold-up.sc-kol-icon-default:before {\n content: \"\\eaf4\";\n}\n\n/*!@.codicon-fold:before*/.codicon-fold.sc-kol-icon-default:before {\n content: \"\\eaf5\";\n}\n\n/*!@.codicon-folder-active:before*/.codicon-folder-active.sc-kol-icon-default:before {\n content: \"\\eaf6\";\n}\n\n/*!@.codicon-folder-opened:before*/.codicon-folder-opened.sc-kol-icon-default:before {\n content: \"\\eaf7\";\n}\n\n/*!@.codicon-gear:before*/.codicon-gear.sc-kol-icon-default:before {\n content: \"\\eaf8\";\n}\n\n/*!@.codicon-gift:before*/.codicon-gift.sc-kol-icon-default:before {\n content: \"\\eaf9\";\n}\n\n/*!@.codicon-gist-secret:before*/.codicon-gist-secret.sc-kol-icon-default:before {\n content: \"\\eafa\";\n}\n\n/*!@.codicon-gist:before*/.codicon-gist.sc-kol-icon-default:before {\n content: \"\\eafb\";\n}\n\n/*!@.codicon-git-commit:before*/.codicon-git-commit.sc-kol-icon-default:before {\n content: \"\\eafc\";\n}\n\n/*!@.codicon-git-compare:before*/.codicon-git-compare.sc-kol-icon-default:before {\n content: \"\\eafd\";\n}\n\n/*!@.codicon-compare-changes:before*/.codicon-compare-changes.sc-kol-icon-default:before {\n content: \"\\eafd\";\n}\n\n/*!@.codicon-git-merge:before*/.codicon-git-merge.sc-kol-icon-default:before {\n content: \"\\eafe\";\n}\n\n/*!@.codicon-github-action:before*/.codicon-github-action.sc-kol-icon-default:before {\n content: \"\\eaff\";\n}\n\n/*!@.codicon-github-alt:before*/.codicon-github-alt.sc-kol-icon-default:before {\n content: \"\\eb00\";\n}\n\n/*!@.codicon-globe:before*/.codicon-globe.sc-kol-icon-default:before {\n content: \"\\eb01\";\n}\n\n/*!@.codicon-grabber:before*/.codicon-grabber.sc-kol-icon-default:before {\n content: \"\\eb02\";\n}\n\n/*!@.codicon-graph:before*/.codicon-graph.sc-kol-icon-default:before {\n content: \"\\eb03\";\n}\n\n/*!@.codicon-gripper:before*/.codicon-gripper.sc-kol-icon-default:before {\n content: \"\\eb04\";\n}\n\n/*!@.codicon-heart:before*/.codicon-heart.sc-kol-icon-default:before {\n content: \"\\eb05\";\n}\n\n/*!@.codicon-home:before*/.codicon-home.sc-kol-icon-default:before {\n content: \"\\eb06\";\n}\n\n/*!@.codicon-horizontal-rule:before*/.codicon-horizontal-rule.sc-kol-icon-default:before {\n content: \"\\eb07\";\n}\n\n/*!@.codicon-hubot:before*/.codicon-hubot.sc-kol-icon-default:before {\n content: \"\\eb08\";\n}\n\n/*!@.codicon-inbox:before*/.codicon-inbox.sc-kol-icon-default:before {\n content: \"\\eb09\";\n}\n\n/*!@.codicon-issue-reopened:before*/.codicon-issue-reopened.sc-kol-icon-default:before {\n content: \"\\eb0b\";\n}\n\n/*!@.codicon-issues:before*/.codicon-issues.sc-kol-icon-default:before {\n content: \"\\eb0c\";\n}\n\n/*!@.codicon-italic:before*/.codicon-italic.sc-kol-icon-default:before {\n content: \"\\eb0d\";\n}\n\n/*!@.codicon-jersey:before*/.codicon-jersey.sc-kol-icon-default:before {\n content: \"\\eb0e\";\n}\n\n/*!@.codicon-json:before*/.codicon-json.sc-kol-icon-default:before {\n content: \"\\eb0f\";\n}\n\n/*!@.codicon-kebab-vertical:before*/.codicon-kebab-vertical.sc-kol-icon-default:before {\n content: \"\\eb10\";\n}\n\n/*!@.codicon-key:before*/.codicon-key.sc-kol-icon-default:before {\n content: \"\\eb11\";\n}\n\n/*!@.codicon-law:before*/.codicon-law.sc-kol-icon-default:before {\n content: \"\\eb12\";\n}\n\n/*!@.codicon-lightbulb-autofix:before*/.codicon-lightbulb-autofix.sc-kol-icon-default:before {\n content: \"\\eb13\";\n}\n\n/*!@.codicon-link-external:before*/.codicon-link-external.sc-kol-icon-default:before {\n content: \"\\eb14\";\n}\n\n/*!@.codicon-link:before*/.codicon-link.sc-kol-icon-default:before {\n content: \"\\eb15\";\n}\n\n/*!@.codicon-list-ordered:before*/.codicon-list-ordered.sc-kol-icon-default:before {\n content: \"\\eb16\";\n}\n\n/*!@.codicon-list-unordered:before*/.codicon-list-unordered.sc-kol-icon-default:before {\n content: \"\\eb17\";\n}\n\n/*!@.codicon-live-share:before*/.codicon-live-share.sc-kol-icon-default:before {\n content: \"\\eb18\";\n}\n\n/*!@.codicon-loading:before*/.codicon-loading.sc-kol-icon-default:before {\n content: \"\\eb19\";\n}\n\n/*!@.codicon-location:before*/.codicon-location.sc-kol-icon-default:before {\n content: \"\\eb1a\";\n}\n\n/*!@.codicon-mail-read:before*/.codicon-mail-read.sc-kol-icon-default:before {\n content: \"\\eb1b\";\n}\n\n/*!@.codicon-mail:before*/.codicon-mail.sc-kol-icon-default:before {\n content: \"\\eb1c\";\n}\n\n/*!@.codicon-markdown:before*/.codicon-markdown.sc-kol-icon-default:before {\n content: \"\\eb1d\";\n}\n\n/*!@.codicon-megaphone:before*/.codicon-megaphone.sc-kol-icon-default:before {\n content: \"\\eb1e\";\n}\n\n/*!@.codicon-mention:before*/.codicon-mention.sc-kol-icon-default:before {\n content: \"\\eb1f\";\n}\n\n/*!@.codicon-milestone:before*/.codicon-milestone.sc-kol-icon-default:before {\n content: \"\\eb20\";\n}\n\n/*!@.codicon-mortar-board:before*/.codicon-mortar-board.sc-kol-icon-default:before {\n content: \"\\eb21\";\n}\n\n/*!@.codicon-move:before*/.codicon-move.sc-kol-icon-default:before {\n content: \"\\eb22\";\n}\n\n/*!@.codicon-multiple-windows:before*/.codicon-multiple-windows.sc-kol-icon-default:before {\n content: \"\\eb23\";\n}\n\n/*!@.codicon-mute:before*/.codicon-mute.sc-kol-icon-default:before {\n content: \"\\eb24\";\n}\n\n/*!@.codicon-no-newline:before*/.codicon-no-newline.sc-kol-icon-default:before {\n content: \"\\eb25\";\n}\n\n/*!@.codicon-note:before*/.codicon-note.sc-kol-icon-default:before {\n content: \"\\eb26\";\n}\n\n/*!@.codicon-octoface:before*/.codicon-octoface.sc-kol-icon-default:before {\n content: \"\\eb27\";\n}\n\n/*!@.codicon-open-preview:before*/.codicon-open-preview.sc-kol-icon-default:before {\n content: \"\\eb28\";\n}\n\n/*!@.codicon-package:before*/.codicon-package.sc-kol-icon-default:before {\n content: \"\\eb29\";\n}\n\n/*!@.codicon-paintcan:before*/.codicon-paintcan.sc-kol-icon-default:before {\n content: \"\\eb2a\";\n}\n\n/*!@.codicon-pin:before*/.codicon-pin.sc-kol-icon-default:before {\n content: \"\\eb2b\";\n}\n\n/*!@.codicon-play:before*/.codicon-play.sc-kol-icon-default:before {\n content: \"\\eb2c\";\n}\n\n/*!@.codicon-run:before*/.codicon-run.sc-kol-icon-default:before {\n content: \"\\eb2c\";\n}\n\n/*!@.codicon-plug:before*/.codicon-plug.sc-kol-icon-default:before {\n content: \"\\eb2d\";\n}\n\n/*!@.codicon-preserve-case:before*/.codicon-preserve-case.sc-kol-icon-default:before {\n content: \"\\eb2e\";\n}\n\n/*!@.codicon-preview:before*/.codicon-preview.sc-kol-icon-default:before {\n content: \"\\eb2f\";\n}\n\n/*!@.codicon-project:before*/.codicon-project.sc-kol-icon-default:before {\n content: \"\\eb30\";\n}\n\n/*!@.codicon-pulse:before*/.codicon-pulse.sc-kol-icon-default:before {\n content: \"\\eb31\";\n}\n\n/*!@.codicon-question:before*/.codicon-question.sc-kol-icon-default:before {\n content: \"\\eb32\";\n}\n\n/*!@.codicon-quote:before*/.codicon-quote.sc-kol-icon-default:before {\n content: \"\\eb33\";\n}\n\n/*!@.codicon-radio-tower:before*/.codicon-radio-tower.sc-kol-icon-default:before {\n content: \"\\eb34\";\n}\n\n/*!@.codicon-reactions:before*/.codicon-reactions.sc-kol-icon-default:before {\n content: \"\\eb35\";\n}\n\n/*!@.codicon-references:before*/.codicon-references.sc-kol-icon-default:before {\n content: \"\\eb36\";\n}\n\n/*!@.codicon-refresh:before*/.codicon-refresh.sc-kol-icon-default:before {\n content: \"\\eb37\";\n}\n\n/*!@.codicon-regex:before*/.codicon-regex.sc-kol-icon-default:before {\n content: \"\\eb38\";\n}\n\n/*!@.codicon-remote-explorer:before*/.codicon-remote-explorer.sc-kol-icon-default:before {\n content: \"\\eb39\";\n}\n\n/*!@.codicon-remote:before*/.codicon-remote.sc-kol-icon-default:before {\n content: \"\\eb3a\";\n}\n\n/*!@.codicon-remove:before*/.codicon-remove.sc-kol-icon-default:before {\n content: \"\\eb3b\";\n}\n\n/*!@.codicon-replace-all:before*/.codicon-replace-all.sc-kol-icon-default:before {\n content: \"\\eb3c\";\n}\n\n/*!@.codicon-replace:before*/.codicon-replace.sc-kol-icon-default:before {\n content: \"\\eb3d\";\n}\n\n/*!@.codicon-repo-clone:before*/.codicon-repo-clone.sc-kol-icon-default:before {\n content: \"\\eb3e\";\n}\n\n/*!@.codicon-repo-force-push:before*/.codicon-repo-force-push.sc-kol-icon-default:before {\n content: \"\\eb3f\";\n}\n\n/*!@.codicon-repo-pull:before*/.codicon-repo-pull.sc-kol-icon-default:before {\n content: \"\\eb40\";\n}\n\n/*!@.codicon-repo-push:before*/.codicon-repo-push.sc-kol-icon-default:before {\n content: \"\\eb41\";\n}\n\n/*!@.codicon-report:before*/.codicon-report.sc-kol-icon-default:before {\n content: \"\\eb42\";\n}\n\n/*!@.codicon-request-changes:before*/.codicon-request-changes.sc-kol-icon-default:before {\n content: \"\\eb43\";\n}\n\n/*!@.codicon-rocket:before*/.codicon-rocket.sc-kol-icon-default:before {\n content: \"\\eb44\";\n}\n\n/*!@.codicon-root-folder-opened:before*/.codicon-root-folder-opened.sc-kol-icon-default:before {\n content: \"\\eb45\";\n}\n\n/*!@.codicon-root-folder:before*/.codicon-root-folder.sc-kol-icon-default:before {\n content: \"\\eb46\";\n}\n\n/*!@.codicon-rss:before*/.codicon-rss.sc-kol-icon-default:before {\n content: \"\\eb47\";\n}\n\n/*!@.codicon-ruby:before*/.codicon-ruby.sc-kol-icon-default:before {\n content: \"\\eb48\";\n}\n\n/*!@.codicon-save-all:before*/.codicon-save-all.sc-kol-icon-default:before {\n content: \"\\eb49\";\n}\n\n/*!@.codicon-save-as:before*/.codicon-save-as.sc-kol-icon-default:before {\n content: \"\\eb4a\";\n}\n\n/*!@.codicon-save:before*/.codicon-save.sc-kol-icon-default:before {\n content: \"\\eb4b\";\n}\n\n/*!@.codicon-screen-full:before*/.codicon-screen-full.sc-kol-icon-default:before {\n content: \"\\eb4c\";\n}\n\n/*!@.codicon-screen-normal:before*/.codicon-screen-normal.sc-kol-icon-default:before {\n content: \"\\eb4d\";\n}\n\n/*!@.codicon-search-stop:before*/.codicon-search-stop.sc-kol-icon-default:before {\n content: \"\\eb4e\";\n}\n\n/*!@.codicon-server:before*/.codicon-server.sc-kol-icon-default:before {\n content: \"\\eb50\";\n}\n\n/*!@.codicon-settings-gear:before*/.codicon-settings-gear.sc-kol-icon-default:before {\n content: \"\\eb51\";\n}\n\n/*!@.codicon-settings:before*/.codicon-settings.sc-kol-icon-default:before {\n content: \"\\eb52\";\n}\n\n/*!@.codicon-shield:before*/.codicon-shield.sc-kol-icon-default:before {\n content: \"\\eb53\";\n}\n\n/*!@.codicon-smiley:before*/.codicon-smiley.sc-kol-icon-default:before {\n content: \"\\eb54\";\n}\n\n/*!@.codicon-sort-precedence:before*/.codicon-sort-precedence.sc-kol-icon-default:before {\n content: \"\\eb55\";\n}\n\n/*!@.codicon-split-horizontal:before*/.codicon-split-horizontal.sc-kol-icon-default:before {\n content: \"\\eb56\";\n}\n\n/*!@.codicon-split-vertical:before*/.codicon-split-vertical.sc-kol-icon-default:before {\n content: \"\\eb57\";\n}\n\n/*!@.codicon-squirrel:before*/.codicon-squirrel.sc-kol-icon-default:before {\n content: \"\\eb58\";\n}\n\n/*!@.codicon-star-full:before*/.codicon-star-full.sc-kol-icon-default:before {\n content: \"\\eb59\";\n}\n\n/*!@.codicon-star-half:before*/.codicon-star-half.sc-kol-icon-default:before {\n content: \"\\eb5a\";\n}\n\n/*!@.codicon-symbol-class:before*/.codicon-symbol-class.sc-kol-icon-default:before {\n content: \"\\eb5b\";\n}\n\n/*!@.codicon-symbol-color:before*/.codicon-symbol-color.sc-kol-icon-default:before {\n content: \"\\eb5c\";\n}\n\n/*!@.codicon-symbol-constant:before*/.codicon-symbol-constant.sc-kol-icon-default:before {\n content: \"\\eb5d\";\n}\n\n/*!@.codicon-symbol-enum-member:before*/.codicon-symbol-enum-member.sc-kol-icon-default:before {\n content: \"\\eb5e\";\n}\n\n/*!@.codicon-symbol-field:before*/.codicon-symbol-field.sc-kol-icon-default:before {\n content: \"\\eb5f\";\n}\n\n/*!@.codicon-symbol-file:before*/.codicon-symbol-file.sc-kol-icon-default:before {\n content: \"\\eb60\";\n}\n\n/*!@.codicon-symbol-interface:before*/.codicon-symbol-interface.sc-kol-icon-default:before {\n content: \"\\eb61\";\n}\n\n/*!@.codicon-symbol-keyword:before*/.codicon-symbol-keyword.sc-kol-icon-default:before {\n content: \"\\eb62\";\n}\n\n/*!@.codicon-symbol-misc:before*/.codicon-symbol-misc.sc-kol-icon-default:before {\n content: \"\\eb63\";\n}\n\n/*!@.codicon-symbol-operator:before*/.codicon-symbol-operator.sc-kol-icon-default:before {\n content: \"\\eb64\";\n}\n\n/*!@.codicon-symbol-property:before*/.codicon-symbol-property.sc-kol-icon-default:before {\n content: \"\\eb65\";\n}\n\n/*!@.codicon-wrench:before*/.codicon-wrench.sc-kol-icon-default:before {\n content: \"\\eb65\";\n}\n\n/*!@.codicon-wrench-subaction:before*/.codicon-wrench-subaction.sc-kol-icon-default:before {\n content: \"\\eb65\";\n}\n\n/*!@.codicon-symbol-snippet:before*/.codicon-symbol-snippet.sc-kol-icon-default:before {\n content: \"\\eb66\";\n}\n\n/*!@.codicon-tasklist:before*/.codicon-tasklist.sc-kol-icon-default:before {\n content: \"\\eb67\";\n}\n\n/*!@.codicon-telescope:before*/.codicon-telescope.sc-kol-icon-default:before {\n content: \"\\eb68\";\n}\n\n/*!@.codicon-text-size:before*/.codicon-text-size.sc-kol-icon-default:before {\n content: \"\\eb69\";\n}\n\n/*!@.codicon-three-bars:before*/.codicon-three-bars.sc-kol-icon-default:before {\n content: \"\\eb6a\";\n}\n\n/*!@.codicon-thumbsdown:before*/.codicon-thumbsdown.sc-kol-icon-default:before {\n content: \"\\eb6b\";\n}\n\n/*!@.codicon-thumbsup:before*/.codicon-thumbsup.sc-kol-icon-default:before {\n content: \"\\eb6c\";\n}\n\n/*!@.codicon-tools:before*/.codicon-tools.sc-kol-icon-default:before {\n content: \"\\eb6d\";\n}\n\n/*!@.codicon-triangle-down:before*/.codicon-triangle-down.sc-kol-icon-default:before {\n content: \"\\eb6e\";\n}\n\n/*!@.codicon-triangle-left:before*/.codicon-triangle-left.sc-kol-icon-default:before {\n content: \"\\eb6f\";\n}\n\n/*!@.codicon-triangle-right:before*/.codicon-triangle-right.sc-kol-icon-default:before {\n content: \"\\eb70\";\n}\n\n/*!@.codicon-triangle-up:before*/.codicon-triangle-up.sc-kol-icon-default:before {\n content: \"\\eb71\";\n}\n\n/*!@.codicon-twitter:before*/.codicon-twitter.sc-kol-icon-default:before {\n content: \"\\eb72\";\n}\n\n/*!@.codicon-unfold:before*/.codicon-unfold.sc-kol-icon-default:before {\n content: \"\\eb73\";\n}\n\n/*!@.codicon-unlock:before*/.codicon-unlock.sc-kol-icon-default:before {\n content: \"\\eb74\";\n}\n\n/*!@.codicon-unmute:before*/.codicon-unmute.sc-kol-icon-default:before {\n content: \"\\eb75\";\n}\n\n/*!@.codicon-unverified:before*/.codicon-unverified.sc-kol-icon-default:before {\n content: \"\\eb76\";\n}\n\n/*!@.codicon-verified:before*/.codicon-verified.sc-kol-icon-default:before {\n content: \"\\eb77\";\n}\n\n/*!@.codicon-versions:before*/.codicon-versions.sc-kol-icon-default:before {\n content: \"\\eb78\";\n}\n\n/*!@.codicon-vm-active:before*/.codicon-vm-active.sc-kol-icon-default:before {\n content: \"\\eb79\";\n}\n\n/*!@.codicon-vm-outline:before*/.codicon-vm-outline.sc-kol-icon-default:before {\n content: \"\\eb7a\";\n}\n\n/*!@.codicon-vm-running:before*/.codicon-vm-running.sc-kol-icon-default:before {\n content: \"\\eb7b\";\n}\n\n/*!@.codicon-watch:before*/.codicon-watch.sc-kol-icon-default:before {\n content: \"\\eb7c\";\n}\n\n/*!@.codicon-whitespace:before*/.codicon-whitespace.sc-kol-icon-default:before {\n content: \"\\eb7d\";\n}\n\n/*!@.codicon-whole-word:before*/.codicon-whole-word.sc-kol-icon-default:before {\n content: \"\\eb7e\";\n}\n\n/*!@.codicon-window:before*/.codicon-window.sc-kol-icon-default:before {\n content: \"\\eb7f\";\n}\n\n/*!@.codicon-word-wrap:before*/.codicon-word-wrap.sc-kol-icon-default:before {\n content: \"\\eb80\";\n}\n\n/*!@.codicon-zoom-in:before*/.codicon-zoom-in.sc-kol-icon-default:before {\n content: \"\\eb81\";\n}\n\n/*!@.codicon-zoom-out:before*/.codicon-zoom-out.sc-kol-icon-default:before {\n content: \"\\eb82\";\n}\n\n/*!@.codicon-list-filter:before*/.codicon-list-filter.sc-kol-icon-default:before {\n content: \"\\eb83\";\n}\n\n/*!@.codicon-list-flat:before*/.codicon-list-flat.sc-kol-icon-default:before {\n content: \"\\eb84\";\n}\n\n/*!@.codicon-list-selection:before*/.codicon-list-selection.sc-kol-icon-default:before {\n content: \"\\eb85\";\n}\n\n/*!@.codicon-selection:before*/.codicon-selection.sc-kol-icon-default:before {\n content: \"\\eb85\";\n}\n\n/*!@.codicon-list-tree:before*/.codicon-list-tree.sc-kol-icon-default:before {\n content: \"\\eb86\";\n}\n\n/*!@.codicon-debug-breakpoint-function-unverified:before*/.codicon-debug-breakpoint-function-unverified.sc-kol-icon-default:before {\n content: \"\\eb87\";\n}\n\n/*!@.codicon-debug-breakpoint-function:before*/.codicon-debug-breakpoint-function.sc-kol-icon-default:before {\n content: \"\\eb88\";\n}\n\n/*!@.codicon-debug-breakpoint-function-disabled:before*/.codicon-debug-breakpoint-function-disabled.sc-kol-icon-default:before {\n content: \"\\eb88\";\n}\n\n/*!@.codicon-debug-stackframe-active:before*/.codicon-debug-stackframe-active.sc-kol-icon-default:before {\n content: \"\\eb89\";\n}\n\n/*!@.codicon-circle-small-filled:before*/.codicon-circle-small-filled.sc-kol-icon-default:before {\n content: \"\\eb8a\";\n}\n\n/*!@.codicon-debug-stackframe-dot:before*/.codicon-debug-stackframe-dot.sc-kol-icon-default:before {\n content: \"\\eb8a\";\n}\n\n/*!@.codicon-debug-stackframe:before*/.codicon-debug-stackframe.sc-kol-icon-default:before {\n content: \"\\eb8b\";\n}\n\n/*!@.codicon-debug-stackframe-focused:before*/.codicon-debug-stackframe-focused.sc-kol-icon-default:before {\n content: \"\\eb8b\";\n}\n\n/*!@.codicon-debug-breakpoint-unsupported:before*/.codicon-debug-breakpoint-unsupported.sc-kol-icon-default:before {\n content: \"\\eb8c\";\n}\n\n/*!@.codicon-symbol-string:before*/.codicon-symbol-string.sc-kol-icon-default:before {\n content: \"\\eb8d\";\n}\n\n/*!@.codicon-debug-reverse-continue:before*/.codicon-debug-reverse-continue.sc-kol-icon-default:before {\n content: \"\\eb8e\";\n}\n\n/*!@.codicon-debug-step-back:before*/.codicon-debug-step-back.sc-kol-icon-default:before {\n content: \"\\eb8f\";\n}\n\n/*!@.codicon-debug-restart-frame:before*/.codicon-debug-restart-frame.sc-kol-icon-default:before {\n content: \"\\eb90\";\n}\n\n/*!@.codicon-debug-alt:before*/.codicon-debug-alt.sc-kol-icon-default:before {\n content: \"\\eb91\";\n}\n\n/*!@.codicon-call-incoming:before*/.codicon-call-incoming.sc-kol-icon-default:before {\n content: \"\\eb92\";\n}\n\n/*!@.codicon-call-outgoing:before*/.codicon-call-outgoing.sc-kol-icon-default:before {\n content: \"\\eb93\";\n}\n\n/*!@.codicon-menu:before*/.codicon-menu.sc-kol-icon-default:before {\n content: \"\\eb94\";\n}\n\n/*!@.codicon-expand-all:before*/.codicon-expand-all.sc-kol-icon-default:before {\n content: \"\\eb95\";\n}\n\n/*!@.codicon-feedback:before*/.codicon-feedback.sc-kol-icon-default:before {\n content: \"\\eb96\";\n}\n\n/*!@.codicon-group-by-ref-type:before*/.codicon-group-by-ref-type.sc-kol-icon-default:before {\n content: \"\\eb97\";\n}\n\n/*!@.codicon-ungroup-by-ref-type:before*/.codicon-ungroup-by-ref-type.sc-kol-icon-default:before {\n content: \"\\eb98\";\n}\n\n/*!@.codicon-account:before*/.codicon-account.sc-kol-icon-default:before {\n content: \"\\eb99\";\n}\n\n/*!@.codicon-bell-dot:before*/.codicon-bell-dot.sc-kol-icon-default:before {\n content: \"\\eb9a\";\n}\n\n/*!@.codicon-debug-console:before*/.codicon-debug-console.sc-kol-icon-default:before {\n content: \"\\eb9b\";\n}\n\n/*!@.codicon-library:before*/.codicon-library.sc-kol-icon-default:before {\n content: \"\\eb9c\";\n}\n\n/*!@.codicon-output:before*/.codicon-output.sc-kol-icon-default:before {\n content: \"\\eb9d\";\n}\n\n/*!@.codicon-run-all:before*/.codicon-run-all.sc-kol-icon-default:before {\n content: \"\\eb9e\";\n}\n\n/*!@.codicon-sync-ignored:before*/.codicon-sync-ignored.sc-kol-icon-default:before {\n content: \"\\eb9f\";\n}\n\n/*!@.codicon-pinned:before*/.codicon-pinned.sc-kol-icon-default:before {\n content: \"\\eba0\";\n}\n\n/*!@.codicon-github-inverted:before*/.codicon-github-inverted.sc-kol-icon-default:before {\n content: \"\\eba1\";\n}\n\n/*!@.codicon-server-process:before*/.codicon-server-process.sc-kol-icon-default:before {\n content: \"\\eba2\";\n}\n\n/*!@.codicon-server-environment:before*/.codicon-server-environment.sc-kol-icon-default:before {\n content: \"\\eba3\";\n}\n\n/*!@.codicon-pass:before*/.codicon-pass.sc-kol-icon-default:before {\n content: \"\\eba4\";\n}\n\n/*!@.codicon-issue-closed:before*/.codicon-issue-closed.sc-kol-icon-default:before {\n content: \"\\eba4\";\n}\n\n/*!@.codicon-stop-circle:before*/.codicon-stop-circle.sc-kol-icon-default:before {\n content: \"\\eba5\";\n}\n\n/*!@.codicon-play-circle:before*/.codicon-play-circle.sc-kol-icon-default:before {\n content: \"\\eba6\";\n}\n\n/*!@.codicon-record:before*/.codicon-record.sc-kol-icon-default:before {\n content: \"\\eba7\";\n}\n\n/*!@.codicon-debug-alt-small:before*/.codicon-debug-alt-small.sc-kol-icon-default:before {\n content: \"\\eba8\";\n}\n\n/*!@.codicon-vm-connect:before*/.codicon-vm-connect.sc-kol-icon-default:before {\n content: \"\\eba9\";\n}\n\n/*!@.codicon-cloud:before*/.codicon-cloud.sc-kol-icon-default:before {\n content: \"\\ebaa\";\n}\n\n/*!@.codicon-merge:before*/.codicon-merge.sc-kol-icon-default:before {\n content: \"\\ebab\";\n}\n\n/*!@.codicon-export:before*/.codicon-export.sc-kol-icon-default:before {\n content: \"\\ebac\";\n}\n\n/*!@.codicon-graph-left:before*/.codicon-graph-left.sc-kol-icon-default:before {\n content: \"\\ebad\";\n}\n\n/*!@.codicon-magnet:before*/.codicon-magnet.sc-kol-icon-default:before {\n content: \"\\ebae\";\n}\n\n/*!@.codicon-notebook:before*/.codicon-notebook.sc-kol-icon-default:before {\n content: \"\\ebaf\";\n}\n\n/*!@.codicon-redo:before*/.codicon-redo.sc-kol-icon-default:before {\n content: \"\\ebb0\";\n}\n\n/*!@.codicon-check-all:before*/.codicon-check-all.sc-kol-icon-default:before {\n content: \"\\ebb1\";\n}\n\n/*!@.codicon-pinned-dirty:before*/.codicon-pinned-dirty.sc-kol-icon-default:before {\n content: \"\\ebb2\";\n}\n\n/*!@.codicon-pass-filled:before*/.codicon-pass-filled.sc-kol-icon-default:before {\n content: \"\\ebb3\";\n}\n\n/*!@.codicon-circle-large-filled:before*/.codicon-circle-large-filled.sc-kol-icon-default:before {\n content: \"\\ebb4\";\n}\n\n/*!@.codicon-circle-large-outline:before*/.codicon-circle-large-outline.sc-kol-icon-default:before {\n content: \"\\ebb5\";\n}\n\n/*!@.codicon-combine:before*/.codicon-combine.sc-kol-icon-default:before {\n content: \"\\ebb6\";\n}\n\n/*!@.codicon-gather:before*/.codicon-gather.sc-kol-icon-default:before {\n content: \"\\ebb6\";\n}\n\n/*!@.codicon-table:before*/.codicon-table.sc-kol-icon-default:before {\n content: \"\\ebb7\";\n}\n\n/*!@.codicon-variable-group:before*/.codicon-variable-group.sc-kol-icon-default:before {\n content: \"\\ebb8\";\n}\n\n/*!@.codicon-type-hierarchy:before*/.codicon-type-hierarchy.sc-kol-icon-default:before {\n content: \"\\ebb9\";\n}\n\n/*!@.codicon-type-hierarchy-sub:before*/.codicon-type-hierarchy-sub.sc-kol-icon-default:before {\n content: \"\\ebba\";\n}\n\n/*!@.codicon-type-hierarchy-super:before*/.codicon-type-hierarchy-super.sc-kol-icon-default:before {\n content: \"\\ebbb\";\n}\n\n/*!@.codicon-git-pull-request-create:before*/.codicon-git-pull-request-create.sc-kol-icon-default:before {\n content: \"\\ebbc\";\n}\n\n/*!@.codicon-run-above:before*/.codicon-run-above.sc-kol-icon-default:before {\n content: \"\\ebbd\";\n}\n\n/*!@.codicon-run-below:before*/.codicon-run-below.sc-kol-icon-default:before {\n content: \"\\ebbe\";\n}\n\n/*!@.codicon-notebook-template:before*/.codicon-notebook-template.sc-kol-icon-default:before {\n content: \"\\ebbf\";\n}\n\n/*!@.codicon-debug-rerun:before*/.codicon-debug-rerun.sc-kol-icon-default:before {\n content: \"\\ebc0\";\n}\n\n/*!@.codicon-workspace-trusted:before*/.codicon-workspace-trusted.sc-kol-icon-default:before {\n content: \"\\ebc1\";\n}\n\n/*!@.codicon-workspace-untrusted:before*/.codicon-workspace-untrusted.sc-kol-icon-default:before {\n content: \"\\ebc2\";\n}\n\n/*!@.codicon-workspace-unknown:before*/.codicon-workspace-unknown.sc-kol-icon-default:before {\n content: \"\\ebc3\";\n}\n\n/*!@.codicon-terminal-cmd:before*/.codicon-terminal-cmd.sc-kol-icon-default:before {\n content: \"\\ebc4\";\n}\n\n/*!@.codicon-terminal-debian:before*/.codicon-terminal-debian.sc-kol-icon-default:before {\n content: \"\\ebc5\";\n}\n\n/*!@.codicon-terminal-linux:before*/.codicon-terminal-linux.sc-kol-icon-default:before {\n content: \"\\ebc6\";\n}\n\n/*!@.codicon-terminal-powershell:before*/.codicon-terminal-powershell.sc-kol-icon-default:before {\n content: \"\\ebc7\";\n}\n\n/*!@.codicon-terminal-tmux:before*/.codicon-terminal-tmux.sc-kol-icon-default:before {\n content: \"\\ebc8\";\n}\n\n/*!@.codicon-terminal-ubuntu:before*/.codicon-terminal-ubuntu.sc-kol-icon-default:before {\n content: \"\\ebc9\";\n}\n\n/*!@.codicon-terminal-bash:before*/.codicon-terminal-bash.sc-kol-icon-default:before {\n content: \"\\ebca\";\n}\n\n/*!@.codicon-arrow-swap:before*/.codicon-arrow-swap.sc-kol-icon-default:before {\n content: \"\\ebcb\";\n}\n\n/*!@.codicon-copy:before*/.codicon-copy.sc-kol-icon-default:before {\n content: \"\\ebcc\";\n}\n\n/*!@.codicon-person-add:before*/.codicon-person-add.sc-kol-icon-default:before {\n content: \"\\ebcd\";\n}\n\n/*!@.codicon-filter-filled:before*/.codicon-filter-filled.sc-kol-icon-default:before {\n content: \"\\ebce\";\n}\n\n/*!@.codicon-wand:before*/.codicon-wand.sc-kol-icon-default:before {\n content: \"\\ebcf\";\n}\n\n/*!@.codicon-debug-line-by-line:before*/.codicon-debug-line-by-line.sc-kol-icon-default:before {\n content: \"\\ebd0\";\n}\n\n/*!@.codicon-inspect:before*/.codicon-inspect.sc-kol-icon-default:before {\n content: \"\\ebd1\";\n}\n\n/*!@.codicon-layers:before*/.codicon-layers.sc-kol-icon-default:before {\n content: \"\\ebd2\";\n}\n\n/*!@.codicon-layers-dot:before*/.codicon-layers-dot.sc-kol-icon-default:before {\n content: \"\\ebd3\";\n}\n\n/*!@.codicon-layers-active:before*/.codicon-layers-active.sc-kol-icon-default:before {\n content: \"\\ebd4\";\n}\n\n/*!@.codicon-compass:before*/.codicon-compass.sc-kol-icon-default:before {\n content: \"\\ebd5\";\n}\n\n/*!@.codicon-compass-dot:before*/.codicon-compass-dot.sc-kol-icon-default:before {\n content: \"\\ebd6\";\n}\n\n/*!@.codicon-compass-active:before*/.codicon-compass-active.sc-kol-icon-default:before {\n content: \"\\ebd7\";\n}\n\n/*!@.codicon-azure:before*/.codicon-azure.sc-kol-icon-default:before {\n content: \"\\ebd8\";\n}\n\n/*!@.codicon-issue-draft:before*/.codicon-issue-draft.sc-kol-icon-default:before {\n content: \"\\ebd9\";\n}\n\n/*!@.codicon-git-pull-request-closed:before*/.codicon-git-pull-request-closed.sc-kol-icon-default:before {\n content: \"\\ebda\";\n}\n\n/*!@.codicon-git-pull-request-draft:before*/.codicon-git-pull-request-draft.sc-kol-icon-default:before {\n content: \"\\ebdb\";\n}\n\n/*!@.codicon-debug-all:before*/.codicon-debug-all.sc-kol-icon-default:before {\n content: \"\\ebdc\";\n}\n\n/*!@.codicon-debug-coverage:before*/.codicon-debug-coverage.sc-kol-icon-default:before {\n content: \"\\ebdd\";\n}\n\n/*!@.codicon-run-errors:before*/.codicon-run-errors.sc-kol-icon-default:before {\n content: \"\\ebde\";\n}\n\n/*!@.codicon-folder-library:before*/.codicon-folder-library.sc-kol-icon-default:before {\n content: \"\\ebdf\";\n}\n\n/*!@.codicon-debug-continue-small:before*/.codicon-debug-continue-small.sc-kol-icon-default:before {\n content: \"\\ebe0\";\n}\n\n/*!@.codicon-beaker-stop:before*/.codicon-beaker-stop.sc-kol-icon-default:before {\n content: \"\\ebe1\";\n}\n\n/*!@.codicon-graph-line:before*/.codicon-graph-line.sc-kol-icon-default:before {\n content: \"\\ebe2\";\n}\n\n/*!@.codicon-graph-scatter:before*/.codicon-graph-scatter.sc-kol-icon-default:before {\n content: \"\\ebe3\";\n}\n\n/*!@.codicon-pie-chart:before*/.codicon-pie-chart.sc-kol-icon-default:before {\n content: \"\\ebe4\";\n}\n\n/*!@.codicon-bracket:before*/.codicon-bracket.sc-kol-icon-default:before {\n content: \"\\eb0f\";\n}\n\n/*!@.codicon-bracket-dot:before*/.codicon-bracket-dot.sc-kol-icon-default:before {\n content: \"\\ebe5\";\n}\n\n/*!@.codicon-bracket-error:before*/.codicon-bracket-error.sc-kol-icon-default:before {\n content: \"\\ebe6\";\n}\n\n/*!@.codicon-lock-small:before*/.codicon-lock-small.sc-kol-icon-default:before {\n content: \"\\ebe7\";\n}\n\n/*!@.codicon-azure-devops:before*/.codicon-azure-devops.sc-kol-icon-default:before {\n content: \"\\ebe8\";\n}\n\n/*!@.codicon-verified-filled:before*/.codicon-verified-filled.sc-kol-icon-default:before {\n content: \"\\ebe9\";\n}\n\n/*!@.codicon-newline:before*/.codicon-newline.sc-kol-icon-default:before {\n content: \"\\ebea\";\n}\n\n/*!@.codicon-layout:before*/.codicon-layout.sc-kol-icon-default:before {\n content: \"\\ebeb\";\n}\n\n/*!@.codicon-layout-activitybar-left:before*/.codicon-layout-activitybar-left.sc-kol-icon-default:before {\n content: \"\\ebec\";\n}\n\n/*!@.codicon-layout-activitybar-right:before*/.codicon-layout-activitybar-right.sc-kol-icon-default:before {\n content: \"\\ebed\";\n}\n\n/*!@.codicon-layout-panel-left:before*/.codicon-layout-panel-left.sc-kol-icon-default:before {\n content: \"\\ebee\";\n}\n\n/*!@.codicon-layout-panel-center:before*/.codicon-layout-panel-center.sc-kol-icon-default:before {\n content: \"\\ebef\";\n}\n\n/*!@.codicon-layout-panel-justify:before*/.codicon-layout-panel-justify.sc-kol-icon-default:before {\n content: \"\\ebf0\";\n}\n\n/*!@.codicon-layout-panel-right:before*/.codicon-layout-panel-right.sc-kol-icon-default:before {\n content: \"\\ebf1\";\n}\n\n/*!@.codicon-layout-panel:before*/.codicon-layout-panel.sc-kol-icon-default:before {\n content: \"\\ebf2\";\n}\n\n/*!@.codicon-layout-sidebar-left:before*/.codicon-layout-sidebar-left.sc-kol-icon-default:before {\n content: \"\\ebf3\";\n}\n\n/*!@.codicon-layout-sidebar-right:before*/.codicon-layout-sidebar-right.sc-kol-icon-default:before {\n content: \"\\ebf4\";\n}\n\n/*!@.codicon-layout-statusbar:before*/.codicon-layout-statusbar.sc-kol-icon-default:before {\n content: \"\\ebf5\";\n}\n\n/*!@.codicon-layout-menubar:before*/.codicon-layout-menubar.sc-kol-icon-default:before {\n content: \"\\ebf6\";\n}\n\n/*!@.codicon-layout-centered:before*/.codicon-layout-centered.sc-kol-icon-default:before {\n content: \"\\ebf7\";\n}\n\n/*!@.codicon-target:before*/.codicon-target.sc-kol-icon-default:before {\n content: \"\\ebf8\";\n}\n\n/*!@.codicon-indent:before*/.codicon-indent.sc-kol-icon-default:before {\n content: \"\\ebf9\";\n}\n\n/*!@.codicon-record-small:before*/.codicon-record-small.sc-kol-icon-default:before {\n content: \"\\ebfa\";\n}\n\n/*!@.codicon-error-small:before*/.codicon-error-small.sc-kol-icon-default:before {\n content: \"\\ebfb\";\n}\n\n/*!@.codicon-arrow-circle-down:before*/.codicon-arrow-circle-down.sc-kol-icon-default:before {\n content: \"\\ebfc\";\n}\n\n/*!@.codicon-arrow-circle-left:before*/.codicon-arrow-circle-left.sc-kol-icon-default:before {\n content: \"\\ebfd\";\n}\n\n/*!@.codicon-arrow-circle-right:before*/.codicon-arrow-circle-right.sc-kol-icon-default:before {\n content: \"\\ebfe\";\n}\n\n/*!@.codicon-arrow-circle-up:before*/.codicon-arrow-circle-up.sc-kol-icon-default:before {\n content: \"\\ebff\";\n}\n\n/*!@.codicon-layout-sidebar-right-off:before*/.codicon-layout-sidebar-right-off.sc-kol-icon-default:before {\n content: \"\\ec00\";\n}\n\n/*!@.codicon-layout-panel-off:before*/.codicon-layout-panel-off.sc-kol-icon-default:before {\n content: \"\\ec01\";\n}\n\n/*!@.codicon-layout-sidebar-left-off:before*/.codicon-layout-sidebar-left-off.sc-kol-icon-default:before {\n content: \"\\ec02\";\n}\n\n/*!@.codicon-blank:before*/.codicon-blank.sc-kol-icon-default:before {\n content: \"\\ec03\";\n}\n\n/*!@.codicon-heart-filled:before*/.codicon-heart-filled.sc-kol-icon-default:before {\n content: \"\\ec04\";\n}\n\n/*!@.codicon-map:before*/.codicon-map.sc-kol-icon-default:before {\n content: \"\\ec05\";\n}\n\n/*!@.codicon-map-filled:before*/.codicon-map-filled.sc-kol-icon-default:before {\n content: \"\\ec06\";\n}\n\n/*!@.codicon-circle-small:before*/.codicon-circle-small.sc-kol-icon-default:before {\n content: \"\\ec07\";\n}\n\n/*!@.codicon-bell-slash:before*/.codicon-bell-slash.sc-kol-icon-default:before {\n content: \"\\ec08\";\n}\n\n/*!@.codicon-bell-slash-dot:before*/.codicon-bell-slash-dot.sc-kol-icon-default:before {\n content: \"\\ec09\";\n}\n\n/*!@.codicon-comment-unresolved:before*/.codicon-comment-unresolved.sc-kol-icon-default:before {\n content: \"\\ec0a\";\n}\n\n/*!@.codicon-git-pull-request-go-to-changes:before*/.codicon-git-pull-request-go-to-changes.sc-kol-icon-default:before {\n content: \"\\ec0b\";\n}\n\n/*!@.codicon-git-pull-request-new-changes:before*/.codicon-git-pull-request-new-changes.sc-kol-icon-default:before {\n content: \"\\ec0c\";\n}\n\n@layer kol-component {\n \n .sc-kol-icon-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n color: inherit;\n display: contents;\n height: 1em;\n line-height: inherit;\n width: 1em;\n }\n .sc-kol-icon-default-h > i {\n height: 1em;\n width: 1em;\n }\n \n .sc-kol-icon-default-h > i,\n .sc-kol-icon-default-h > i:before {\n font-size: inherit !important;\n }\n}";
|
|
7162
|
+
const defaultStyleCss$A = "/*---------------------------------------------------------------------------------------------\n * Copyright (c) Microsoft Corporation. All rights reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *--------------------------------------------------------------------------------------------*/\n@font-face {\n font-family: \"codicon\";\n font-display: block;\n src: url(\"./codicon.ttf?0e5b0adf625a37fbcd638d31f0fe72aa\") format(\"truetype\");\n}\n.codicon[class*=codicon-] {\n font: normal normal normal 16px/1 codicon;\n display: inline-block;\n text-decoration: none;\n text-rendering: auto;\n text-align: center;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n user-select: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n}\n\n/*---------------------\n * Modifiers\n *-------------------*/\n@keyframes codicon-spin {\n 100% {\n transform: rotate(360deg);\n }\n}\n.codicon-sync.codicon-modifier-spin,\n.codicon-loading.codicon-modifier-spin,\n.codicon-gear.codicon-modifier-spin {\n /* Use steps to throttle FPS to reduce CPU usage */\n animation: codicon-spin 1.5s steps(30) infinite;\n}\n\n.codicon-modifier-disabled {\n opacity: 0.5;\n}\n\n.codicon-modifier-hidden {\n opacity: 0;\n}\n\n/* custom speed & easing for loading icon */\n.codicon-loading {\n animation-duration: 1s !important;\n animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67) !important;\n}\n\n/*---------------------\n * Icons\n *-------------------*/\n.codicon-add:before {\n content: \"\\ea60\";\n}\n\n.codicon-plus:before {\n content: \"\\ea60\";\n}\n\n.codicon-gist-new:before {\n content: \"\\ea60\";\n}\n\n.codicon-repo-create:before {\n content: \"\\ea60\";\n}\n\n.codicon-lightbulb:before {\n content: \"\\ea61\";\n}\n\n.codicon-light-bulb:before {\n content: \"\\ea61\";\n}\n\n.codicon-repo:before {\n content: \"\\ea62\";\n}\n\n.codicon-repo-delete:before {\n content: \"\\ea62\";\n}\n\n.codicon-gist-fork:before {\n content: \"\\ea63\";\n}\n\n.codicon-repo-forked:before {\n content: \"\\ea63\";\n}\n\n.codicon-git-pull-request:before {\n content: \"\\ea64\";\n}\n\n.codicon-git-pull-request-abandoned:before {\n content: \"\\ea64\";\n}\n\n.codicon-record-keys:before {\n content: \"\\ea65\";\n}\n\n.codicon-keyboard:before {\n content: \"\\ea65\";\n}\n\n.codicon-tag:before {\n content: \"\\ea66\";\n}\n\n.codicon-tag-add:before {\n content: \"\\ea66\";\n}\n\n.codicon-tag-remove:before {\n content: \"\\ea66\";\n}\n\n.codicon-person:before {\n content: \"\\ea67\";\n}\n\n.codicon-person-follow:before {\n content: \"\\ea67\";\n}\n\n.codicon-person-outline:before {\n content: \"\\ea67\";\n}\n\n.codicon-person-filled:before {\n content: \"\\ea67\";\n}\n\n.codicon-git-branch:before {\n content: \"\\ea68\";\n}\n\n.codicon-git-branch-create:before {\n content: \"\\ea68\";\n}\n\n.codicon-git-branch-delete:before {\n content: \"\\ea68\";\n}\n\n.codicon-source-control:before {\n content: \"\\ea68\";\n}\n\n.codicon-mirror:before {\n content: \"\\ea69\";\n}\n\n.codicon-mirror-public:before {\n content: \"\\ea69\";\n}\n\n.codicon-star:before {\n content: \"\\ea6a\";\n}\n\n.codicon-star-add:before {\n content: \"\\ea6a\";\n}\n\n.codicon-star-delete:before {\n content: \"\\ea6a\";\n}\n\n.codicon-star-empty:before {\n content: \"\\ea6a\";\n}\n\n.codicon-comment:before {\n content: \"\\ea6b\";\n}\n\n.codicon-comment-add:before {\n content: \"\\ea6b\";\n}\n\n.codicon-alert:before {\n content: \"\\ea6c\";\n}\n\n.codicon-warning:before {\n content: \"\\ea6c\";\n}\n\n.codicon-search:before {\n content: \"\\ea6d\";\n}\n\n.codicon-search-save:before {\n content: \"\\ea6d\";\n}\n\n.codicon-log-out:before {\n content: \"\\ea6e\";\n}\n\n.codicon-sign-out:before {\n content: \"\\ea6e\";\n}\n\n.codicon-log-in:before {\n content: \"\\ea6f\";\n}\n\n.codicon-sign-in:before {\n content: \"\\ea6f\";\n}\n\n.codicon-eye:before {\n content: \"\\ea70\";\n}\n\n.codicon-eye-unwatch:before {\n content: \"\\ea70\";\n}\n\n.codicon-eye-watch:before {\n content: \"\\ea70\";\n}\n\n.codicon-circle-filled:before {\n content: \"\\ea71\";\n}\n\n.codicon-primitive-dot:before {\n content: \"\\ea71\";\n}\n\n.codicon-close-dirty:before {\n content: \"\\ea71\";\n}\n\n.codicon-debug-breakpoint:before {\n content: \"\\ea71\";\n}\n\n.codicon-debug-breakpoint-disabled:before {\n content: \"\\ea71\";\n}\n\n.codicon-debug-hint:before {\n content: \"\\ea71\";\n}\n\n.codicon-primitive-square:before {\n content: \"\\ea72\";\n}\n\n.codicon-edit:before {\n content: \"\\ea73\";\n}\n\n.codicon-pencil:before {\n content: \"\\ea73\";\n}\n\n.codicon-info:before {\n content: \"\\ea74\";\n}\n\n.codicon-issue-opened:before {\n content: \"\\ea74\";\n}\n\n.codicon-gist-private:before {\n content: \"\\ea75\";\n}\n\n.codicon-git-fork-private:before {\n content: \"\\ea75\";\n}\n\n.codicon-lock:before {\n content: \"\\ea75\";\n}\n\n.codicon-mirror-private:before {\n content: \"\\ea75\";\n}\n\n.codicon-close:before {\n content: \"\\ea76\";\n}\n\n.codicon-remove-close:before {\n content: \"\\ea76\";\n}\n\n.codicon-x:before {\n content: \"\\ea76\";\n}\n\n.codicon-repo-sync:before {\n content: \"\\ea77\";\n}\n\n.codicon-sync:before {\n content: \"\\ea77\";\n}\n\n.codicon-clone:before {\n content: \"\\ea78\";\n}\n\n.codicon-desktop-download:before {\n content: \"\\ea78\";\n}\n\n.codicon-beaker:before {\n content: \"\\ea79\";\n}\n\n.codicon-microscope:before {\n content: \"\\ea79\";\n}\n\n.codicon-vm:before {\n content: \"\\ea7a\";\n}\n\n.codicon-device-desktop:before {\n content: \"\\ea7a\";\n}\n\n.codicon-file:before {\n content: \"\\ea7b\";\n}\n\n.codicon-file-text:before {\n content: \"\\ea7b\";\n}\n\n.codicon-more:before {\n content: \"\\ea7c\";\n}\n\n.codicon-ellipsis:before {\n content: \"\\ea7c\";\n}\n\n.codicon-kebab-horizontal:before {\n content: \"\\ea7c\";\n}\n\n.codicon-mail-reply:before {\n content: \"\\ea7d\";\n}\n\n.codicon-reply:before {\n content: \"\\ea7d\";\n}\n\n.codicon-organization:before {\n content: \"\\ea7e\";\n}\n\n.codicon-organization-filled:before {\n content: \"\\ea7e\";\n}\n\n.codicon-organization-outline:before {\n content: \"\\ea7e\";\n}\n\n.codicon-new-file:before {\n content: \"\\ea7f\";\n}\n\n.codicon-file-add:before {\n content: \"\\ea7f\";\n}\n\n.codicon-new-folder:before {\n content: \"\\ea80\";\n}\n\n.codicon-file-directory-create:before {\n content: \"\\ea80\";\n}\n\n.codicon-trash:before {\n content: \"\\ea81\";\n}\n\n.codicon-trashcan:before {\n content: \"\\ea81\";\n}\n\n.codicon-history:before {\n content: \"\\ea82\";\n}\n\n.codicon-clock:before {\n content: \"\\ea82\";\n}\n\n.codicon-folder:before {\n content: \"\\ea83\";\n}\n\n.codicon-file-directory:before {\n content: \"\\ea83\";\n}\n\n.codicon-symbol-folder:before {\n content: \"\\ea83\";\n}\n\n.codicon-logo-github:before {\n content: \"\\ea84\";\n}\n\n.codicon-mark-github:before {\n content: \"\\ea84\";\n}\n\n.codicon-github:before {\n content: \"\\ea84\";\n}\n\n.codicon-terminal:before {\n content: \"\\ea85\";\n}\n\n.codicon-console:before {\n content: \"\\ea85\";\n}\n\n.codicon-repl:before {\n content: \"\\ea85\";\n}\n\n.codicon-zap:before {\n content: \"\\ea86\";\n}\n\n.codicon-symbol-event:before {\n content: \"\\ea86\";\n}\n\n.codicon-error:before {\n content: \"\\ea87\";\n}\n\n.codicon-stop:before {\n content: \"\\ea87\";\n}\n\n.codicon-variable:before {\n content: \"\\ea88\";\n}\n\n.codicon-symbol-variable:before {\n content: \"\\ea88\";\n}\n\n.codicon-array:before {\n content: \"\\ea8a\";\n}\n\n.codicon-symbol-array:before {\n content: \"\\ea8a\";\n}\n\n.codicon-symbol-module:before {\n content: \"\\ea8b\";\n}\n\n.codicon-symbol-package:before {\n content: \"\\ea8b\";\n}\n\n.codicon-symbol-namespace:before {\n content: \"\\ea8b\";\n}\n\n.codicon-symbol-object:before {\n content: \"\\ea8b\";\n}\n\n.codicon-symbol-method:before {\n content: \"\\ea8c\";\n}\n\n.codicon-symbol-function:before {\n content: \"\\ea8c\";\n}\n\n.codicon-symbol-constructor:before {\n content: \"\\ea8c\";\n}\n\n.codicon-symbol-boolean:before {\n content: \"\\ea8f\";\n}\n\n.codicon-symbol-null:before {\n content: \"\\ea8f\";\n}\n\n.codicon-symbol-numeric:before {\n content: \"\\ea90\";\n}\n\n.codicon-symbol-number:before {\n content: \"\\ea90\";\n}\n\n.codicon-symbol-structure:before {\n content: \"\\ea91\";\n}\n\n.codicon-symbol-struct:before {\n content: \"\\ea91\";\n}\n\n.codicon-symbol-parameter:before {\n content: \"\\ea92\";\n}\n\n.codicon-symbol-type-parameter:before {\n content: \"\\ea92\";\n}\n\n.codicon-symbol-key:before {\n content: \"\\ea93\";\n}\n\n.codicon-symbol-text:before {\n content: \"\\ea93\";\n}\n\n.codicon-symbol-reference:before {\n content: \"\\ea94\";\n}\n\n.codicon-go-to-file:before {\n content: \"\\ea94\";\n}\n\n.codicon-symbol-enum:before {\n content: \"\\ea95\";\n}\n\n.codicon-symbol-value:before {\n content: \"\\ea95\";\n}\n\n.codicon-symbol-ruler:before {\n content: \"\\ea96\";\n}\n\n.codicon-symbol-unit:before {\n content: \"\\ea96\";\n}\n\n.codicon-activate-breakpoints:before {\n content: \"\\ea97\";\n}\n\n.codicon-archive:before {\n content: \"\\ea98\";\n}\n\n.codicon-arrow-both:before {\n content: \"\\ea99\";\n}\n\n.codicon-arrow-down:before {\n content: \"\\ea9a\";\n}\n\n.codicon-arrow-left:before {\n content: \"\\ea9b\";\n}\n\n.codicon-arrow-right:before {\n content: \"\\ea9c\";\n}\n\n.codicon-arrow-small-down:before {\n content: \"\\ea9d\";\n}\n\n.codicon-arrow-small-left:before {\n content: \"\\ea9e\";\n}\n\n.codicon-arrow-small-right:before {\n content: \"\\ea9f\";\n}\n\n.codicon-arrow-small-up:before {\n content: \"\\eaa0\";\n}\n\n.codicon-arrow-up:before {\n content: \"\\eaa1\";\n}\n\n.codicon-bell:before {\n content: \"\\eaa2\";\n}\n\n.codicon-bold:before {\n content: \"\\eaa3\";\n}\n\n.codicon-book:before {\n content: \"\\eaa4\";\n}\n\n.codicon-bookmark:before {\n content: \"\\eaa5\";\n}\n\n.codicon-debug-breakpoint-conditional-unverified:before {\n content: \"\\eaa6\";\n}\n\n.codicon-debug-breakpoint-conditional:before {\n content: \"\\eaa7\";\n}\n\n.codicon-debug-breakpoint-conditional-disabled:before {\n content: \"\\eaa7\";\n}\n\n.codicon-debug-breakpoint-data-unverified:before {\n content: \"\\eaa8\";\n}\n\n.codicon-debug-breakpoint-data:before {\n content: \"\\eaa9\";\n}\n\n.codicon-debug-breakpoint-data-disabled:before {\n content: \"\\eaa9\";\n}\n\n.codicon-debug-breakpoint-log-unverified:before {\n content: \"\\eaaa\";\n}\n\n.codicon-debug-breakpoint-log:before {\n content: \"\\eaab\";\n}\n\n.codicon-debug-breakpoint-log-disabled:before {\n content: \"\\eaab\";\n}\n\n.codicon-briefcase:before {\n content: \"\\eaac\";\n}\n\n.codicon-broadcast:before {\n content: \"\\eaad\";\n}\n\n.codicon-browser:before {\n content: \"\\eaae\";\n}\n\n.codicon-bug:before {\n content: \"\\eaaf\";\n}\n\n.codicon-calendar:before {\n content: \"\\eab0\";\n}\n\n.codicon-case-sensitive:before {\n content: \"\\eab1\";\n}\n\n.codicon-check:before {\n content: \"\\eab2\";\n}\n\n.codicon-checklist:before {\n content: \"\\eab3\";\n}\n\n.codicon-chevron-down:before {\n content: \"\\eab4\";\n}\n\n.codicon-chevron-left:before {\n content: \"\\eab5\";\n}\n\n.codicon-chevron-right:before {\n content: \"\\eab6\";\n}\n\n.codicon-chevron-up:before {\n content: \"\\eab7\";\n}\n\n.codicon-chrome-close:before {\n content: \"\\eab8\";\n}\n\n.codicon-chrome-maximize:before {\n content: \"\\eab9\";\n}\n\n.codicon-chrome-minimize:before {\n content: \"\\eaba\";\n}\n\n.codicon-chrome-restore:before {\n content: \"\\eabb\";\n}\n\n.codicon-circle-outline:before {\n content: \"\\eabc\";\n}\n\n.codicon-debug-breakpoint-unverified:before {\n content: \"\\eabc\";\n}\n\n.codicon-circle-slash:before {\n content: \"\\eabd\";\n}\n\n.codicon-circuit-board:before {\n content: \"\\eabe\";\n}\n\n.codicon-clear-all:before {\n content: \"\\eabf\";\n}\n\n.codicon-clippy:before {\n content: \"\\eac0\";\n}\n\n.codicon-close-all:before {\n content: \"\\eac1\";\n}\n\n.codicon-cloud-download:before {\n content: \"\\eac2\";\n}\n\n.codicon-cloud-upload:before {\n content: \"\\eac3\";\n}\n\n.codicon-code:before {\n content: \"\\eac4\";\n}\n\n.codicon-collapse-all:before {\n content: \"\\eac5\";\n}\n\n.codicon-color-mode:before {\n content: \"\\eac6\";\n}\n\n.codicon-comment-discussion:before {\n content: \"\\eac7\";\n}\n\n.codicon-credit-card:before {\n content: \"\\eac9\";\n}\n\n.codicon-dash:before {\n content: \"\\eacc\";\n}\n\n.codicon-dashboard:before {\n content: \"\\eacd\";\n}\n\n.codicon-database:before {\n content: \"\\eace\";\n}\n\n.codicon-debug-continue:before {\n content: \"\\eacf\";\n}\n\n.codicon-debug-disconnect:before {\n content: \"\\ead0\";\n}\n\n.codicon-debug-pause:before {\n content: \"\\ead1\";\n}\n\n.codicon-debug-restart:before {\n content: \"\\ead2\";\n}\n\n.codicon-debug-start:before {\n content: \"\\ead3\";\n}\n\n.codicon-debug-step-into:before {\n content: \"\\ead4\";\n}\n\n.codicon-debug-step-out:before {\n content: \"\\ead5\";\n}\n\n.codicon-debug-step-over:before {\n content: \"\\ead6\";\n}\n\n.codicon-debug-stop:before {\n content: \"\\ead7\";\n}\n\n.codicon-debug:before {\n content: \"\\ead8\";\n}\n\n.codicon-device-camera-video:before {\n content: \"\\ead9\";\n}\n\n.codicon-device-camera:before {\n content: \"\\eada\";\n}\n\n.codicon-device-mobile:before {\n content: \"\\eadb\";\n}\n\n.codicon-diff-added:before {\n content: \"\\eadc\";\n}\n\n.codicon-diff-ignored:before {\n content: \"\\eadd\";\n}\n\n.codicon-diff-modified:before {\n content: \"\\eade\";\n}\n\n.codicon-diff-removed:before {\n content: \"\\eadf\";\n}\n\n.codicon-diff-renamed:before {\n content: \"\\eae0\";\n}\n\n.codicon-diff:before {\n content: \"\\eae1\";\n}\n\n.codicon-discard:before {\n content: \"\\eae2\";\n}\n\n.codicon-editor-layout:before {\n content: \"\\eae3\";\n}\n\n.codicon-empty-window:before {\n content: \"\\eae4\";\n}\n\n.codicon-exclude:before {\n content: \"\\eae5\";\n}\n\n.codicon-extensions:before {\n content: \"\\eae6\";\n}\n\n.codicon-eye-closed:before {\n content: \"\\eae7\";\n}\n\n.codicon-file-binary:before {\n content: \"\\eae8\";\n}\n\n.codicon-file-code:before {\n content: \"\\eae9\";\n}\n\n.codicon-file-media:before {\n content: \"\\eaea\";\n}\n\n.codicon-file-pdf:before {\n content: \"\\eaeb\";\n}\n\n.codicon-file-submodule:before {\n content: \"\\eaec\";\n}\n\n.codicon-file-symlink-directory:before {\n content: \"\\eaed\";\n}\n\n.codicon-file-symlink-file:before {\n content: \"\\eaee\";\n}\n\n.codicon-file-zip:before {\n content: \"\\eaef\";\n}\n\n.codicon-files:before {\n content: \"\\eaf0\";\n}\n\n.codicon-filter:before {\n content: \"\\eaf1\";\n}\n\n.codicon-flame:before {\n content: \"\\eaf2\";\n}\n\n.codicon-fold-down:before {\n content: \"\\eaf3\";\n}\n\n.codicon-fold-up:before {\n content: \"\\eaf4\";\n}\n\n.codicon-fold:before {\n content: \"\\eaf5\";\n}\n\n.codicon-folder-active:before {\n content: \"\\eaf6\";\n}\n\n.codicon-folder-opened:before {\n content: \"\\eaf7\";\n}\n\n.codicon-gear:before {\n content: \"\\eaf8\";\n}\n\n.codicon-gift:before {\n content: \"\\eaf9\";\n}\n\n.codicon-gist-secret:before {\n content: \"\\eafa\";\n}\n\n.codicon-gist:before {\n content: \"\\eafb\";\n}\n\n.codicon-git-commit:before {\n content: \"\\eafc\";\n}\n\n.codicon-git-compare:before {\n content: \"\\eafd\";\n}\n\n.codicon-compare-changes:before {\n content: \"\\eafd\";\n}\n\n.codicon-git-merge:before {\n content: \"\\eafe\";\n}\n\n.codicon-github-action:before {\n content: \"\\eaff\";\n}\n\n.codicon-github-alt:before {\n content: \"\\eb00\";\n}\n\n.codicon-globe:before {\n content: \"\\eb01\";\n}\n\n.codicon-grabber:before {\n content: \"\\eb02\";\n}\n\n.codicon-graph:before {\n content: \"\\eb03\";\n}\n\n.codicon-gripper:before {\n content: \"\\eb04\";\n}\n\n.codicon-heart:before {\n content: \"\\eb05\";\n}\n\n.codicon-home:before {\n content: \"\\eb06\";\n}\n\n.codicon-horizontal-rule:before {\n content: \"\\eb07\";\n}\n\n.codicon-hubot:before {\n content: \"\\eb08\";\n}\n\n.codicon-inbox:before {\n content: \"\\eb09\";\n}\n\n.codicon-issue-reopened:before {\n content: \"\\eb0b\";\n}\n\n.codicon-issues:before {\n content: \"\\eb0c\";\n}\n\n.codicon-italic:before {\n content: \"\\eb0d\";\n}\n\n.codicon-jersey:before {\n content: \"\\eb0e\";\n}\n\n.codicon-json:before {\n content: \"\\eb0f\";\n}\n\n.codicon-kebab-vertical:before {\n content: \"\\eb10\";\n}\n\n.codicon-key:before {\n content: \"\\eb11\";\n}\n\n.codicon-law:before {\n content: \"\\eb12\";\n}\n\n.codicon-lightbulb-autofix:before {\n content: \"\\eb13\";\n}\n\n.codicon-link-external:before {\n content: \"\\eb14\";\n}\n\n.codicon-link:before {\n content: \"\\eb15\";\n}\n\n.codicon-list-ordered:before {\n content: \"\\eb16\";\n}\n\n.codicon-list-unordered:before {\n content: \"\\eb17\";\n}\n\n.codicon-live-share:before {\n content: \"\\eb18\";\n}\n\n.codicon-loading:before {\n content: \"\\eb19\";\n}\n\n.codicon-location:before {\n content: \"\\eb1a\";\n}\n\n.codicon-mail-read:before {\n content: \"\\eb1b\";\n}\n\n.codicon-mail:before {\n content: \"\\eb1c\";\n}\n\n.codicon-markdown:before {\n content: \"\\eb1d\";\n}\n\n.codicon-megaphone:before {\n content: \"\\eb1e\";\n}\n\n.codicon-mention:before {\n content: \"\\eb1f\";\n}\n\n.codicon-milestone:before {\n content: \"\\eb20\";\n}\n\n.codicon-mortar-board:before {\n content: \"\\eb21\";\n}\n\n.codicon-move:before {\n content: \"\\eb22\";\n}\n\n.codicon-multiple-windows:before {\n content: \"\\eb23\";\n}\n\n.codicon-mute:before {\n content: \"\\eb24\";\n}\n\n.codicon-no-newline:before {\n content: \"\\eb25\";\n}\n\n.codicon-note:before {\n content: \"\\eb26\";\n}\n\n.codicon-octoface:before {\n content: \"\\eb27\";\n}\n\n.codicon-open-preview:before {\n content: \"\\eb28\";\n}\n\n.codicon-package:before {\n content: \"\\eb29\";\n}\n\n.codicon-paintcan:before {\n content: \"\\eb2a\";\n}\n\n.codicon-pin:before {\n content: \"\\eb2b\";\n}\n\n.codicon-play:before {\n content: \"\\eb2c\";\n}\n\n.codicon-run:before {\n content: \"\\eb2c\";\n}\n\n.codicon-plug:before {\n content: \"\\eb2d\";\n}\n\n.codicon-preserve-case:before {\n content: \"\\eb2e\";\n}\n\n.codicon-preview:before {\n content: \"\\eb2f\";\n}\n\n.codicon-project:before {\n content: \"\\eb30\";\n}\n\n.codicon-pulse:before {\n content: \"\\eb31\";\n}\n\n.codicon-question:before {\n content: \"\\eb32\";\n}\n\n.codicon-quote:before {\n content: \"\\eb33\";\n}\n\n.codicon-radio-tower:before {\n content: \"\\eb34\";\n}\n\n.codicon-reactions:before {\n content: \"\\eb35\";\n}\n\n.codicon-references:before {\n content: \"\\eb36\";\n}\n\n.codicon-refresh:before {\n content: \"\\eb37\";\n}\n\n.codicon-regex:before {\n content: \"\\eb38\";\n}\n\n.codicon-remote-explorer:before {\n content: \"\\eb39\";\n}\n\n.codicon-remote:before {\n content: \"\\eb3a\";\n}\n\n.codicon-remove:before {\n content: \"\\eb3b\";\n}\n\n.codicon-replace-all:before {\n content: \"\\eb3c\";\n}\n\n.codicon-replace:before {\n content: \"\\eb3d\";\n}\n\n.codicon-repo-clone:before {\n content: \"\\eb3e\";\n}\n\n.codicon-repo-force-push:before {\n content: \"\\eb3f\";\n}\n\n.codicon-repo-pull:before {\n content: \"\\eb40\";\n}\n\n.codicon-repo-push:before {\n content: \"\\eb41\";\n}\n\n.codicon-report:before {\n content: \"\\eb42\";\n}\n\n.codicon-request-changes:before {\n content: \"\\eb43\";\n}\n\n.codicon-rocket:before {\n content: \"\\eb44\";\n}\n\n.codicon-root-folder-opened:before {\n content: \"\\eb45\";\n}\n\n.codicon-root-folder:before {\n content: \"\\eb46\";\n}\n\n.codicon-rss:before {\n content: \"\\eb47\";\n}\n\n.codicon-ruby:before {\n content: \"\\eb48\";\n}\n\n.codicon-save-all:before {\n content: \"\\eb49\";\n}\n\n.codicon-save-as:before {\n content: \"\\eb4a\";\n}\n\n.codicon-save:before {\n content: \"\\eb4b\";\n}\n\n.codicon-screen-full:before {\n content: \"\\eb4c\";\n}\n\n.codicon-screen-normal:before {\n content: \"\\eb4d\";\n}\n\n.codicon-search-stop:before {\n content: \"\\eb4e\";\n}\n\n.codicon-server:before {\n content: \"\\eb50\";\n}\n\n.codicon-settings-gear:before {\n content: \"\\eb51\";\n}\n\n.codicon-settings:before {\n content: \"\\eb52\";\n}\n\n.codicon-shield:before {\n content: \"\\eb53\";\n}\n\n.codicon-smiley:before {\n content: \"\\eb54\";\n}\n\n.codicon-sort-precedence:before {\n content: \"\\eb55\";\n}\n\n.codicon-split-horizontal:before {\n content: \"\\eb56\";\n}\n\n.codicon-split-vertical:before {\n content: \"\\eb57\";\n}\n\n.codicon-squirrel:before {\n content: \"\\eb58\";\n}\n\n.codicon-star-full:before {\n content: \"\\eb59\";\n}\n\n.codicon-star-half:before {\n content: \"\\eb5a\";\n}\n\n.codicon-symbol-class:before {\n content: \"\\eb5b\";\n}\n\n.codicon-symbol-color:before {\n content: \"\\eb5c\";\n}\n\n.codicon-symbol-constant:before {\n content: \"\\eb5d\";\n}\n\n.codicon-symbol-enum-member:before {\n content: \"\\eb5e\";\n}\n\n.codicon-symbol-field:before {\n content: \"\\eb5f\";\n}\n\n.codicon-symbol-file:before {\n content: \"\\eb60\";\n}\n\n.codicon-symbol-interface:before {\n content: \"\\eb61\";\n}\n\n.codicon-symbol-keyword:before {\n content: \"\\eb62\";\n}\n\n.codicon-symbol-misc:before {\n content: \"\\eb63\";\n}\n\n.codicon-symbol-operator:before {\n content: \"\\eb64\";\n}\n\n.codicon-symbol-property:before {\n content: \"\\eb65\";\n}\n\n.codicon-wrench:before {\n content: \"\\eb65\";\n}\n\n.codicon-wrench-subaction:before {\n content: \"\\eb65\";\n}\n\n.codicon-symbol-snippet:before {\n content: \"\\eb66\";\n}\n\n.codicon-tasklist:before {\n content: \"\\eb67\";\n}\n\n.codicon-telescope:before {\n content: \"\\eb68\";\n}\n\n.codicon-text-size:before {\n content: \"\\eb69\";\n}\n\n.codicon-three-bars:before {\n content: \"\\eb6a\";\n}\n\n.codicon-thumbsdown:before {\n content: \"\\eb6b\";\n}\n\n.codicon-thumbsup:before {\n content: \"\\eb6c\";\n}\n\n.codicon-tools:before {\n content: \"\\eb6d\";\n}\n\n.codicon-triangle-down:before {\n content: \"\\eb6e\";\n}\n\n.codicon-triangle-left:before {\n content: \"\\eb6f\";\n}\n\n.codicon-triangle-right:before {\n content: \"\\eb70\";\n}\n\n.codicon-triangle-up:before {\n content: \"\\eb71\";\n}\n\n.codicon-twitter:before {\n content: \"\\eb72\";\n}\n\n.codicon-unfold:before {\n content: \"\\eb73\";\n}\n\n.codicon-unlock:before {\n content: \"\\eb74\";\n}\n\n.codicon-unmute:before {\n content: \"\\eb75\";\n}\n\n.codicon-unverified:before {\n content: \"\\eb76\";\n}\n\n.codicon-verified:before {\n content: \"\\eb77\";\n}\n\n.codicon-versions:before {\n content: \"\\eb78\";\n}\n\n.codicon-vm-active:before {\n content: \"\\eb79\";\n}\n\n.codicon-vm-outline:before {\n content: \"\\eb7a\";\n}\n\n.codicon-vm-running:before {\n content: \"\\eb7b\";\n}\n\n.codicon-watch:before {\n content: \"\\eb7c\";\n}\n\n.codicon-whitespace:before {\n content: \"\\eb7d\";\n}\n\n.codicon-whole-word:before {\n content: \"\\eb7e\";\n}\n\n.codicon-window:before {\n content: \"\\eb7f\";\n}\n\n.codicon-word-wrap:before {\n content: \"\\eb80\";\n}\n\n.codicon-zoom-in:before {\n content: \"\\eb81\";\n}\n\n.codicon-zoom-out:before {\n content: \"\\eb82\";\n}\n\n.codicon-list-filter:before {\n content: \"\\eb83\";\n}\n\n.codicon-list-flat:before {\n content: \"\\eb84\";\n}\n\n.codicon-list-selection:before {\n content: \"\\eb85\";\n}\n\n.codicon-selection:before {\n content: \"\\eb85\";\n}\n\n.codicon-list-tree:before {\n content: \"\\eb86\";\n}\n\n.codicon-debug-breakpoint-function-unverified:before {\n content: \"\\eb87\";\n}\n\n.codicon-debug-breakpoint-function:before {\n content: \"\\eb88\";\n}\n\n.codicon-debug-breakpoint-function-disabled:before {\n content: \"\\eb88\";\n}\n\n.codicon-debug-stackframe-active:before {\n content: \"\\eb89\";\n}\n\n.codicon-circle-small-filled:before {\n content: \"\\eb8a\";\n}\n\n.codicon-debug-stackframe-dot:before {\n content: \"\\eb8a\";\n}\n\n.codicon-debug-stackframe:before {\n content: \"\\eb8b\";\n}\n\n.codicon-debug-stackframe-focused:before {\n content: \"\\eb8b\";\n}\n\n.codicon-debug-breakpoint-unsupported:before {\n content: \"\\eb8c\";\n}\n\n.codicon-symbol-string:before {\n content: \"\\eb8d\";\n}\n\n.codicon-debug-reverse-continue:before {\n content: \"\\eb8e\";\n}\n\n.codicon-debug-step-back:before {\n content: \"\\eb8f\";\n}\n\n.codicon-debug-restart-frame:before {\n content: \"\\eb90\";\n}\n\n.codicon-debug-alt:before {\n content: \"\\eb91\";\n}\n\n.codicon-call-incoming:before {\n content: \"\\eb92\";\n}\n\n.codicon-call-outgoing:before {\n content: \"\\eb93\";\n}\n\n.codicon-menu:before {\n content: \"\\eb94\";\n}\n\n.codicon-expand-all:before {\n content: \"\\eb95\";\n}\n\n.codicon-feedback:before {\n content: \"\\eb96\";\n}\n\n.codicon-group-by-ref-type:before {\n content: \"\\eb97\";\n}\n\n.codicon-ungroup-by-ref-type:before {\n content: \"\\eb98\";\n}\n\n.codicon-account:before {\n content: \"\\eb99\";\n}\n\n.codicon-bell-dot:before {\n content: \"\\eb9a\";\n}\n\n.codicon-debug-console:before {\n content: \"\\eb9b\";\n}\n\n.codicon-library:before {\n content: \"\\eb9c\";\n}\n\n.codicon-output:before {\n content: \"\\eb9d\";\n}\n\n.codicon-run-all:before {\n content: \"\\eb9e\";\n}\n\n.codicon-sync-ignored:before {\n content: \"\\eb9f\";\n}\n\n.codicon-pinned:before {\n content: \"\\eba0\";\n}\n\n.codicon-github-inverted:before {\n content: \"\\eba1\";\n}\n\n.codicon-server-process:before {\n content: \"\\eba2\";\n}\n\n.codicon-server-environment:before {\n content: \"\\eba3\";\n}\n\n.codicon-pass:before {\n content: \"\\eba4\";\n}\n\n.codicon-issue-closed:before {\n content: \"\\eba4\";\n}\n\n.codicon-stop-circle:before {\n content: \"\\eba5\";\n}\n\n.codicon-play-circle:before {\n content: \"\\eba6\";\n}\n\n.codicon-record:before {\n content: \"\\eba7\";\n}\n\n.codicon-debug-alt-small:before {\n content: \"\\eba8\";\n}\n\n.codicon-vm-connect:before {\n content: \"\\eba9\";\n}\n\n.codicon-cloud:before {\n content: \"\\ebaa\";\n}\n\n.codicon-merge:before {\n content: \"\\ebab\";\n}\n\n.codicon-export:before {\n content: \"\\ebac\";\n}\n\n.codicon-graph-left:before {\n content: \"\\ebad\";\n}\n\n.codicon-magnet:before {\n content: \"\\ebae\";\n}\n\n.codicon-notebook:before {\n content: \"\\ebaf\";\n}\n\n.codicon-redo:before {\n content: \"\\ebb0\";\n}\n\n.codicon-check-all:before {\n content: \"\\ebb1\";\n}\n\n.codicon-pinned-dirty:before {\n content: \"\\ebb2\";\n}\n\n.codicon-pass-filled:before {\n content: \"\\ebb3\";\n}\n\n.codicon-circle-large-filled:before {\n content: \"\\ebb4\";\n}\n\n.codicon-circle-large-outline:before {\n content: \"\\ebb5\";\n}\n\n.codicon-combine:before {\n content: \"\\ebb6\";\n}\n\n.codicon-gather:before {\n content: \"\\ebb6\";\n}\n\n.codicon-table:before {\n content: \"\\ebb7\";\n}\n\n.codicon-variable-group:before {\n content: \"\\ebb8\";\n}\n\n.codicon-type-hierarchy:before {\n content: \"\\ebb9\";\n}\n\n.codicon-type-hierarchy-sub:before {\n content: \"\\ebba\";\n}\n\n.codicon-type-hierarchy-super:before {\n content: \"\\ebbb\";\n}\n\n.codicon-git-pull-request-create:before {\n content: \"\\ebbc\";\n}\n\n.codicon-run-above:before {\n content: \"\\ebbd\";\n}\n\n.codicon-run-below:before {\n content: \"\\ebbe\";\n}\n\n.codicon-notebook-template:before {\n content: \"\\ebbf\";\n}\n\n.codicon-debug-rerun:before {\n content: \"\\ebc0\";\n}\n\n.codicon-workspace-trusted:before {\n content: \"\\ebc1\";\n}\n\n.codicon-workspace-untrusted:before {\n content: \"\\ebc2\";\n}\n\n.codicon-workspace-unknown:before {\n content: \"\\ebc3\";\n}\n\n.codicon-terminal-cmd:before {\n content: \"\\ebc4\";\n}\n\n.codicon-terminal-debian:before {\n content: \"\\ebc5\";\n}\n\n.codicon-terminal-linux:before {\n content: \"\\ebc6\";\n}\n\n.codicon-terminal-powershell:before {\n content: \"\\ebc7\";\n}\n\n.codicon-terminal-tmux:before {\n content: \"\\ebc8\";\n}\n\n.codicon-terminal-ubuntu:before {\n content: \"\\ebc9\";\n}\n\n.codicon-terminal-bash:before {\n content: \"\\ebca\";\n}\n\n.codicon-arrow-swap:before {\n content: \"\\ebcb\";\n}\n\n.codicon-copy:before {\n content: \"\\ebcc\";\n}\n\n.codicon-person-add:before {\n content: \"\\ebcd\";\n}\n\n.codicon-filter-filled:before {\n content: \"\\ebce\";\n}\n\n.codicon-wand:before {\n content: \"\\ebcf\";\n}\n\n.codicon-debug-line-by-line:before {\n content: \"\\ebd0\";\n}\n\n.codicon-inspect:before {\n content: \"\\ebd1\";\n}\n\n.codicon-layers:before {\n content: \"\\ebd2\";\n}\n\n.codicon-layers-dot:before {\n content: \"\\ebd3\";\n}\n\n.codicon-layers-active:before {\n content: \"\\ebd4\";\n}\n\n.codicon-compass:before {\n content: \"\\ebd5\";\n}\n\n.codicon-compass-dot:before {\n content: \"\\ebd6\";\n}\n\n.codicon-compass-active:before {\n content: \"\\ebd7\";\n}\n\n.codicon-azure:before {\n content: \"\\ebd8\";\n}\n\n.codicon-issue-draft:before {\n content: \"\\ebd9\";\n}\n\n.codicon-git-pull-request-closed:before {\n content: \"\\ebda\";\n}\n\n.codicon-git-pull-request-draft:before {\n content: \"\\ebdb\";\n}\n\n.codicon-debug-all:before {\n content: \"\\ebdc\";\n}\n\n.codicon-debug-coverage:before {\n content: \"\\ebdd\";\n}\n\n.codicon-run-errors:before {\n content: \"\\ebde\";\n}\n\n.codicon-folder-library:before {\n content: \"\\ebdf\";\n}\n\n.codicon-debug-continue-small:before {\n content: \"\\ebe0\";\n}\n\n.codicon-beaker-stop:before {\n content: \"\\ebe1\";\n}\n\n.codicon-graph-line:before {\n content: \"\\ebe2\";\n}\n\n.codicon-graph-scatter:before {\n content: \"\\ebe3\";\n}\n\n.codicon-pie-chart:before {\n content: \"\\ebe4\";\n}\n\n.codicon-bracket:before {\n content: \"\\eb0f\";\n}\n\n.codicon-bracket-dot:before {\n content: \"\\ebe5\";\n}\n\n.codicon-bracket-error:before {\n content: \"\\ebe6\";\n}\n\n.codicon-lock-small:before {\n content: \"\\ebe7\";\n}\n\n.codicon-azure-devops:before {\n content: \"\\ebe8\";\n}\n\n.codicon-verified-filled:before {\n content: \"\\ebe9\";\n}\n\n.codicon-newline:before {\n content: \"\\ebea\";\n}\n\n.codicon-layout:before {\n content: \"\\ebeb\";\n}\n\n.codicon-layout-activitybar-left:before {\n content: \"\\ebec\";\n}\n\n.codicon-layout-activitybar-right:before {\n content: \"\\ebed\";\n}\n\n.codicon-layout-panel-left:before {\n content: \"\\ebee\";\n}\n\n.codicon-layout-panel-center:before {\n content: \"\\ebef\";\n}\n\n.codicon-layout-panel-justify:before {\n content: \"\\ebf0\";\n}\n\n.codicon-layout-panel-right:before {\n content: \"\\ebf1\";\n}\n\n.codicon-layout-panel:before {\n content: \"\\ebf2\";\n}\n\n.codicon-layout-sidebar-left:before {\n content: \"\\ebf3\";\n}\n\n.codicon-layout-sidebar-right:before {\n content: \"\\ebf4\";\n}\n\n.codicon-layout-statusbar:before {\n content: \"\\ebf5\";\n}\n\n.codicon-layout-menubar:before {\n content: \"\\ebf6\";\n}\n\n.codicon-layout-centered:before {\n content: \"\\ebf7\";\n}\n\n.codicon-target:before {\n content: \"\\ebf8\";\n}\n\n.codicon-indent:before {\n content: \"\\ebf9\";\n}\n\n.codicon-record-small:before {\n content: \"\\ebfa\";\n}\n\n.codicon-error-small:before {\n content: \"\\ebfb\";\n}\n\n.codicon-arrow-circle-down:before {\n content: \"\\ebfc\";\n}\n\n.codicon-arrow-circle-left:before {\n content: \"\\ebfd\";\n}\n\n.codicon-arrow-circle-right:before {\n content: \"\\ebfe\";\n}\n\n.codicon-arrow-circle-up:before {\n content: \"\\ebff\";\n}\n\n.codicon-layout-sidebar-right-off:before {\n content: \"\\ec00\";\n}\n\n.codicon-layout-panel-off:before {\n content: \"\\ec01\";\n}\n\n.codicon-layout-sidebar-left-off:before {\n content: \"\\ec02\";\n}\n\n.codicon-blank:before {\n content: \"\\ec03\";\n}\n\n.codicon-heart-filled:before {\n content: \"\\ec04\";\n}\n\n.codicon-map:before {\n content: \"\\ec05\";\n}\n\n.codicon-map-filled:before {\n content: \"\\ec06\";\n}\n\n.codicon-circle-small:before {\n content: \"\\ec07\";\n}\n\n.codicon-bell-slash:before {\n content: \"\\ec08\";\n}\n\n.codicon-bell-slash-dot:before {\n content: \"\\ec09\";\n}\n\n.codicon-comment-unresolved:before {\n content: \"\\ec0a\";\n}\n\n.codicon-git-pull-request-go-to-changes:before {\n content: \"\\ec0b\";\n}\n\n.codicon-git-pull-request-new-changes:before {\n content: \"\\ec0c\";\n}\n\n@layer kol-component {\n /* :host implicitly inherits font-size, see below */\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n color: inherit;\n display: contents;\n line-height: inherit;\n }\n /*\n * The <code>:important</code> is important, because we should always override the font icon style.\n */\n :host > i,\n :host > i:before {\n font-size: inherit !important;\n }\n}";
|
|
7128
7163
|
var KolIconDefaultStyle0 = defaultStyleCss$A;
|
|
7129
7164
|
|
|
7130
7165
|
class KolIcon {
|
|
@@ -7176,7 +7211,7 @@ class KolIcon {
|
|
|
7176
7211
|
}; }
|
|
7177
7212
|
}
|
|
7178
7213
|
|
|
7179
|
-
const defaultStyleCss$z = "@layer kol-component {\n
|
|
7214
|
+
const defaultStyleCss$z = "@layer kol-component {\n :host {\n display: inline-block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n img {\n max-height: 100%;\n max-width: 100%;\n }\n}";
|
|
7180
7215
|
var KolImageDefaultStyle0 = defaultStyleCss$z;
|
|
7181
7216
|
|
|
7182
7217
|
class KolImage {
|
|
@@ -7249,7 +7284,7 @@ class KolImage {
|
|
|
7249
7284
|
}; }
|
|
7250
7285
|
}
|
|
7251
7286
|
|
|
7252
|
-
const defaultStyleCss$y = "@layer kol-global {\n
|
|
7287
|
+
const defaultStyleCss$y = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > div {\n border-left-style: solid;\n padding-left: 0.5em;\n }\n}";
|
|
7253
7288
|
var KolIndentedTextDefaultStyle0 = defaultStyleCss$y;
|
|
7254
7289
|
|
|
7255
7290
|
class KolIndentedText {
|
|
@@ -7397,6 +7432,9 @@ class InputCheckboxController extends InputCheckboxRadioController {
|
|
|
7397
7432
|
validateIndeterminate(value) {
|
|
7398
7433
|
validateIndeterminate(this.component, value);
|
|
7399
7434
|
}
|
|
7435
|
+
validateLabelAlign(value) {
|
|
7436
|
+
validateLabelAlign(this.component, value);
|
|
7437
|
+
}
|
|
7400
7438
|
validateValue(value) {
|
|
7401
7439
|
setState(this.component, '_value', value);
|
|
7402
7440
|
this.setFormAssociatedCheckboxValue(this.component.state._value);
|
|
@@ -7411,10 +7449,11 @@ class InputCheckboxController extends InputCheckboxRadioController {
|
|
|
7411
7449
|
this.validateIndeterminate(this.component._indeterminate);
|
|
7412
7450
|
this.validateValue(this.component._value);
|
|
7413
7451
|
this.validateVariant(this.component._variant);
|
|
7452
|
+
this.validateLabelAlign(this.component._labelAlign);
|
|
7414
7453
|
}
|
|
7415
7454
|
}
|
|
7416
7455
|
|
|
7417
|
-
const defaultStyleCss$x = "@layer kol-global {\n .sc-kol-input-checkbox-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-checkbox-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-input-checkbox-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-checkbox-default-h {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n \n \n \n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n \n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n \n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .sc-kol-input-checkbox-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n label {\n cursor: pointer;\n }\n .kol-input {\n align-items: center;\n display: grid;\n justify-items: left;\n }\n .kol-input.default,\n .kol-input.switch {\n grid-template-columns: auto 1fr;\n }\n .kol-input .input {\n align-items: center;\n display: grid;\n order: 1;\n }\n .kol-input .input div {\n display: inline-flex;\n }\n .kol-input .input input {\n margin: 0;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .hint,\n .kol-input.error > .kol-alert {\n grid-column: span 2;\n }\n .kol-input .kol-alert.error {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n }\n input {\n border-style: solid;\n border-width: 2px;\n line-height: 24px;\n }\n input[type=checkbox] {\n appearance: none;\n background-color: #fff;\n cursor: pointer;\n transition: 0.5s;\n }\n input[type=checkbox]:before {\n content: \"\";\n cursor: pointer;\n }\n input[type=checkbox]:disabled:before {\n cursor: not-allowed;\n }\n .kol-input.required .tooltip-content .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .button {\n display: grid;\n grid-template-columns: var(--a11y-min-size) auto;\n grid-template-areas: \"error error\" \"input label\" \"hint hint\";\n }\n .button:focus-within {\n \n cursor: inherit;\n outline-color: black;\n outline-style: solid;\n }\n .button > .error {\n grid-area: error;\n }\n .button > label {\n grid-area: label;\n }\n .button > .input {\n grid-area: input;\n }\n .button > .hint {\n grid-area: hint;\n }\n .button .icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n }\n}\n@layer kol-component {\n .default .checkbox-container {\n align-items: center;\n display: flex;\n height: var(--a11y-min-size);\n justify-content: center;\n position: relative;\n width: var(--a11y-min-size);\n }\n .default .icon {\n display: block;\n inset: auto;\n position: absolute;\n z-index: 1;\n }\n .default:not(.checked):not(.indeterminate) .icon::part(icon) {\n display: none;\n }\n .default .checkbox-input-element {\n width: 22px;\n height: 22px;\n }\n}\n@layer kol-component {\n .switch .input {\n position: relative;\n }\n .switch input[type=checkbox] {\n display: inline-block;\n height: 1.7em;\n min-width: 3.2em;\n position: relative;\n width: 3.2em;\n }\n .switch input[type=checkbox]::before {\n background-color: #000;\n height: 1.2em;\n left: calc(0.25em - 2px);\n top: calc(0.25em - 2px);\n position: absolute;\n transition: 0.5s;\n width: 1.2em;\n }\n .switch input[type=checkbox]:checked::before {\n transform: translateX(1.5em);\n }\n .switch input[type=checkbox]:indeterminate::before {\n transform: translateX(0.75em);\n }\n .switch .icon {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.2em;\n height: 1.2em;\n position: absolute;\n z-index: 1;\n top: 50%;\n left: 4px;\n transform: translate(0, -50%);\n transition: 0.5s;\n color: #000;\n }\n .switch.checked .icon {\n transform: translate(1.5em, -50%);\n }\n .switch.indeterminate .icon {\n transform: translate(0.75em, -50%);\n }\n}\n\n@layer kol-global {\n .sc-kol-input-checkbox-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-checkbox-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-input-checkbox-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-input-checkbox-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n \n outline: transparent solid 1px;\n }\n}";
|
|
7456
|
+
const defaultStyleCss$x = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n label {\n cursor: pointer;\n }\n .kol-input {\n align-items: center;\n display: grid;\n justify-items: left;\n }\n .kol-input.default,\n .kol-input.switch {\n grid-template-areas: \"input label\";\n grid-template-columns: auto 1fr;\n }\n .kol-input.default[data-label-align=left]:not(.hide-label),\n .kol-input.switch[data-label-align=left]:not(.hide-label) {\n grid-template-areas: \"label input\";\n grid-template-columns: 1fr auto;\n }\n .kol-input .input {\n grid-area: input;\n align-items: center;\n display: grid;\n }\n .kol-input .input div {\n display: inline-flex;\n }\n .kol-input .input input {\n margin: 0;\n }\n .kol-input label {\n grid-area: label;\n }\n .kol-input .hint,\n .kol-input.error > .kol-alert {\n grid-column: span 2;\n }\n .kol-input .kol-alert.error {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n }\n input {\n border-style: solid;\n border-width: 2px;\n line-height: 24px;\n }\n input[type=checkbox] {\n appearance: none;\n background-color: #fff;\n cursor: pointer;\n transition: 0.5s;\n }\n input[type=checkbox]:before {\n content: \"\";\n cursor: pointer;\n }\n input[type=checkbox]:disabled:before {\n cursor: not-allowed;\n }\n .kol-input.required .tooltip-content .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .button {\n display: grid;\n grid-template-columns: var(--a11y-min-size) auto;\n grid-template-areas: \"error error\" \"input label\" \"hint hint\";\n }\n .button[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto var(--a11y-min-size);\n grid-template-areas: \"error error\" \"label input\" \"hint hint\";\n }\n .button:focus-within {\n /* override global `[tabindex]:focus` style */\n cursor: inherit;\n outline-color: black;\n outline-style: solid;\n }\n .button > .error {\n grid-area: error;\n }\n .button > label {\n grid-area: label;\n }\n .button > .input {\n grid-area: input;\n }\n .button > .hint {\n grid-area: hint;\n }\n .button .icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n }\n}\n@layer kol-component {\n .default .checkbox-container {\n align-items: center;\n display: flex;\n height: var(--a11y-min-size);\n justify-content: center;\n position: relative;\n width: var(--a11y-min-size);\n }\n .default .icon {\n display: block;\n inset: auto;\n position: absolute;\n z-index: 1;\n }\n .default:not(.checked):not(.indeterminate) .icon::part(icon) {\n display: none;\n }\n .default .checkbox-input-element {\n width: 22px;\n height: 22px;\n }\n}\n@layer kol-component {\n .switch .input {\n position: relative;\n }\n .switch input[type=checkbox] {\n display: inline-block;\n height: 1.7em;\n min-width: 3.2em;\n position: relative;\n width: 3.2em;\n }\n .switch input[type=checkbox]::before {\n background-color: #000;\n height: 1.2em;\n left: calc(0.25em - 2px);\n top: calc(0.25em - 2px);\n position: absolute;\n transition: 0.5s;\n width: 1.2em;\n }\n .switch input[type=checkbox]:checked::before {\n transform: translateX(1.5em);\n }\n .switch input[type=checkbox]:indeterminate::before {\n transform: translateX(0.75em);\n }\n .switch .icon {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.2em;\n height: 1.2em;\n position: absolute;\n z-index: 1;\n top: 50%;\n left: 4px;\n transform: translate(0, -50%);\n transition: 0.5s;\n color: #000;\n }\n .switch.checked .icon {\n transform: translate(1.5em, -50%);\n }\n .switch.indeterminate .icon {\n transform: translate(0.75em, -50%);\n }\n}\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid 1px;\n }\n}";
|
|
7418
7457
|
var KolInputCheckboxDefaultStyle0 = defaultStyleCss$x;
|
|
7419
7458
|
|
|
7420
7459
|
class KolInputCheckbox {
|
|
@@ -7434,13 +7473,13 @@ class KolInputCheckbox {
|
|
|
7434
7473
|
render() {
|
|
7435
7474
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
7436
7475
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
7437
|
-
return (hAsync(Host, { key: '
|
|
7476
|
+
return (hAsync(Host, { key: '76a2dcddb3fba02d63009302a0ba84a889c9eaf9', class: "kol-input-checkbox" }, hAsync(KolInputWcTag, { key: 'fd2cc3ab786a316dee728b420cdf445817c0374c', class: {
|
|
7438
7477
|
checkbox: true,
|
|
7439
7478
|
[this.state._variant]: true,
|
|
7440
7479
|
'hide-label': !!this.state._hideLabel,
|
|
7441
7480
|
checked: this.state._checked,
|
|
7442
7481
|
indeterminate: this.state._indeterminate,
|
|
7443
|
-
}, "data-role": this.state._variant === 'button' ? 'button' : undefined, _accessKey: this.state._accessKey, _alert: this.state._alert, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '
|
|
7482
|
+
}, "data-label-align": this.state._labelAlign || 'right', "data-role": this.state._variant === 'button' ? 'button' : undefined, _accessKey: this.state._accessKey, _alert: this.state._alert, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: 'ab4c5be723c0d053e5c140519d8eff550252703b', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("label", { key: 'a243e23c5a94df4fd509af9ab993cb7e7bdbb039', slot: "input", class: "checkbox-container" }, hAsync(KolIconTag, { key: '1c849fc2f36db0f4b4e657a69f07b134ee19b33c', class: "icon", _icons: this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked, _label: "" }), hAsync("input", Object.assign({ key: '3ef46cf8c081bcc56d67165c15ac48fbf35db464', class: `checkbox-input-element${this.state._variant === 'button' ? ' visually-hidden' : ''}`, ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, checked: this.state._checked, disabled: this.state._disabled, id: this.state._id, indeterminate: this.state._indeterminate, name: this.state._name, required: this.state._required, tabIndex: this.state._tabIndex, type: "checkbox" }, this.controller.onFacade, { onInput: this.onInput, onChange: this.onChange, onClick: undefined }))))));
|
|
7444
7483
|
}
|
|
7445
7484
|
constructor(hostRef) {
|
|
7446
7485
|
registerInstance(this, hostRef);
|
|
@@ -7478,6 +7517,7 @@ class KolInputCheckbox {
|
|
|
7478
7517
|
this._id = undefined;
|
|
7479
7518
|
this._indeterminate = undefined;
|
|
7480
7519
|
this._label = undefined;
|
|
7520
|
+
this._labelAlign = 'right';
|
|
7481
7521
|
this._msg = undefined;
|
|
7482
7522
|
this._name = undefined;
|
|
7483
7523
|
this._on = undefined;
|
|
@@ -7501,6 +7541,7 @@ class KolInputCheckbox {
|
|
|
7501
7541
|
_label: '',
|
|
7502
7542
|
_value: true,
|
|
7503
7543
|
_variant: 'default',
|
|
7544
|
+
_labelAlign: 'right',
|
|
7504
7545
|
};
|
|
7505
7546
|
this.controller = new InputCheckboxController(this, 'checkbox', this.host);
|
|
7506
7547
|
}
|
|
@@ -7540,6 +7581,9 @@ class KolInputCheckbox {
|
|
|
7540
7581
|
validateLabel(value) {
|
|
7541
7582
|
this.controller.validateLabel(value);
|
|
7542
7583
|
}
|
|
7584
|
+
validateLabelAlign(value) {
|
|
7585
|
+
this.controller.validateLabelAlign(value);
|
|
7586
|
+
}
|
|
7543
7587
|
validateMsg(value) {
|
|
7544
7588
|
this.controller.validateMsg(value);
|
|
7545
7589
|
}
|
|
@@ -7586,6 +7630,7 @@ class KolInputCheckbox {
|
|
|
7586
7630
|
"_id": ["validateId"],
|
|
7587
7631
|
"_indeterminate": ["validateIndeterminate"],
|
|
7588
7632
|
"_label": ["validateLabel"],
|
|
7633
|
+
"_labelAlign": ["validateLabelAlign"],
|
|
7589
7634
|
"_msg": ["validateMsg"],
|
|
7590
7635
|
"_name": ["validateName"],
|
|
7591
7636
|
"_on": ["validateOn"],
|
|
@@ -7615,6 +7660,7 @@ class KolInputCheckbox {
|
|
|
7615
7660
|
"_id": [1],
|
|
7616
7661
|
"_indeterminate": [1540],
|
|
7617
7662
|
"_label": [1],
|
|
7663
|
+
"_labelAlign": [1, "_label-align"],
|
|
7618
7664
|
"_msg": [16],
|
|
7619
7665
|
"_name": [1],
|
|
7620
7666
|
"_on": [16],
|
|
@@ -7659,7 +7705,7 @@ class InputColorController extends InputIconController {
|
|
|
7659
7705
|
}
|
|
7660
7706
|
}
|
|
7661
7707
|
|
|
7662
|
-
const defaultStyleCss$w = "@layer kol-global {\n .sc-kol-input-color-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-color-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-input-color-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-color-default-h {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n \n \n \n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n \n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n \n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n\n@layer kol-global {\n .sc-kol-input-color-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-color-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-input-color-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-input-color-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n \n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n .sc-kol-input-color-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n div.input {\n cursor: pointer;\n }\n}";
|
|
7708
|
+
const defaultStyleCss$w = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n div.input {\n cursor: pointer;\n }\n}";
|
|
7663
7709
|
var KolInputColorDefaultStyle0 = defaultStyleCss$w;
|
|
7664
7710
|
|
|
7665
7711
|
class KolInputColor {
|
|
@@ -7849,7 +7895,7 @@ class InputDateController extends InputIconController {
|
|
|
7849
7895
|
constructor(component, name, host) {
|
|
7850
7896
|
super(component, name, host);
|
|
7851
7897
|
this.validateIso8601 = (propName, value, afterPatch) => {
|
|
7852
|
-
return watchValidator(this.component, propName, (value) => value === undefined || value == null || value === '' || this.validateDateString(value), new Set(['Date', 'string{ISO-8601}']),
|
|
7898
|
+
return watchValidator(this.component, propName, (value) => value === undefined || value == null || value === '' || this.validateDateString(value), new Set(['Date', 'string{ISO-8601}']), InputDateController.tryParseToString(value, this.component._type, this.component._step), {
|
|
7853
7899
|
hooks: {
|
|
7854
7900
|
afterPatch: (value) => {
|
|
7855
7901
|
if (typeof value === 'string' && afterPatch) {
|
|
@@ -7867,36 +7913,37 @@ class InputDateController extends InputIconController {
|
|
|
7867
7913
|
validateSuggestions(value) {
|
|
7868
7914
|
validateSuggestions(this.component, value);
|
|
7869
7915
|
}
|
|
7870
|
-
tryParseToString(value,
|
|
7871
|
-
|
|
7872
|
-
|
|
7873
|
-
|
|
7874
|
-
|
|
7875
|
-
|
|
7876
|
-
|
|
7916
|
+
static tryParseToString(value, type, step) {
|
|
7917
|
+
if (typeof value === 'string' || value === null) {
|
|
7918
|
+
return value;
|
|
7919
|
+
}
|
|
7920
|
+
if (typeof value === 'object' && value instanceof Date) {
|
|
7921
|
+
const formattedYear = value.getFullYear();
|
|
7922
|
+
const formattedMonth = String(value.getMonth() + 1).padStart(2, '0');
|
|
7923
|
+
const formattedDay = String(value.getDate()).padStart(2, '0');
|
|
7924
|
+
const formattedHours = String(value.getHours()).padStart(2, '0');
|
|
7925
|
+
const formattedMinutes = String(value.getMinutes()).padStart(2, '0');
|
|
7926
|
+
const formattedSeconds = String(value.getSeconds()).padStart(2, '0');
|
|
7927
|
+
const formattedDate = [formattedYear, formattedMonth, formattedDay].join('-');
|
|
7928
|
+
const formattedTimeWithSeconds = [formattedHours, formattedMinutes, formattedSeconds].join(':');
|
|
7929
|
+
switch (type) {
|
|
7877
7930
|
case 'date':
|
|
7878
|
-
return
|
|
7931
|
+
return formattedDate;
|
|
7879
7932
|
case 'datetime-local':
|
|
7880
|
-
return `${
|
|
7933
|
+
return `${formattedDate}T${formattedTimeWithSeconds}`;
|
|
7881
7934
|
case 'month':
|
|
7882
|
-
return `${
|
|
7935
|
+
return `${formattedYear}-${formattedMonth}`;
|
|
7883
7936
|
case 'time':
|
|
7884
|
-
if (
|
|
7885
|
-
|
|
7886
|
-
(typeof this.component._step === 'number' && this.component._step === 60)) {
|
|
7887
|
-
return `${v.getHours()}:${v.getMinutes()}`;
|
|
7937
|
+
if (step === undefined || String(step) === '60') {
|
|
7938
|
+
return `${formattedHours}:${formattedMinutes}`;
|
|
7888
7939
|
}
|
|
7889
7940
|
else {
|
|
7890
|
-
return
|
|
7941
|
+
return formattedTimeWithSeconds;
|
|
7891
7942
|
}
|
|
7892
7943
|
case 'week':
|
|
7893
7944
|
throw new Error('Auto convert to week is not supported!');
|
|
7894
7945
|
}
|
|
7895
7946
|
}
|
|
7896
|
-
if (value === null) {
|
|
7897
|
-
return null;
|
|
7898
|
-
}
|
|
7899
|
-
return undefined;
|
|
7900
7947
|
}
|
|
7901
7948
|
validateDateString(value) {
|
|
7902
7949
|
switch (this.component._type) {
|
|
@@ -7921,12 +7968,15 @@ class InputDateController extends InputIconController {
|
|
|
7921
7968
|
}
|
|
7922
7969
|
}
|
|
7923
7970
|
validateMax(value) {
|
|
7924
|
-
|
|
7971
|
+
const ensuredValue = ((value === undefined || value === null) && this.component._type === 'date') ||
|
|
7972
|
+
this.component._type === 'month' ||
|
|
7973
|
+
this.component._type === 'datetime-local'
|
|
7925
7974
|
? InputDateController.DEFAULT_MAX_DATE
|
|
7926
|
-
:
|
|
7975
|
+
: value;
|
|
7976
|
+
watchValidator(this.component, '_max', (value) => value === undefined || (value !== null && this.validateDateString(value)), new Set(['Iso8601', 'Date']), InputDateController.tryParseToString(ensuredValue, this.component._type, this.component._step));
|
|
7927
7977
|
}
|
|
7928
7978
|
validateMin(value) {
|
|
7929
|
-
watchValidator(this.component, '_min', (value) => value === undefined || (value !== null && this.validateDateString(value)), new Set(['Iso8601', 'Date']),
|
|
7979
|
+
watchValidator(this.component, '_min', (value) => value === undefined || (value !== null && this.validateDateString(value)), new Set(['Iso8601', 'Date']), InputDateController.tryParseToString(value, this.component._type, this.component._step));
|
|
7930
7980
|
}
|
|
7931
7981
|
validateOn(value) {
|
|
7932
7982
|
setState(this.component, '_on', Object.assign(Object.assign({}, value), { onChange: (e, v) => {
|
|
@@ -7979,7 +8029,7 @@ InputDateController.isoTimeRegex = /^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/;
|
|
|
7979
8029
|
InputDateController.isoWeekRegex = /^\d{4}-W(?:[0-4]\d|5[0-3])$/;
|
|
7980
8030
|
InputDateController.DEFAULT_MAX_DATE = new Date(9999, 11, 31, 23, 59, 59);
|
|
7981
8031
|
|
|
7982
|
-
const defaultStyleCss$v = "@layer kol-global {\n .sc-kol-input-date-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-date-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-input-date-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-date-default-h {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n \n \n \n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n \n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n \n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n\n@layer kol-global {\n .sc-kol-input-date-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-date-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-input-date-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-input-date-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n \n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n .sc-kol-input-date-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-number {\n display: block;\n }\n}";
|
|
8032
|
+
const defaultStyleCss$v = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-number {\n display: block;\n }\n}";
|
|
7983
8033
|
var KolInputDateDefaultStyle0 = defaultStyleCss$v;
|
|
7984
8034
|
|
|
7985
8035
|
class KolInputDate {
|
|
@@ -8232,19 +8282,31 @@ const validatePasswordVariant = (component, value) => {
|
|
|
8232
8282
|
class InputPasswordController extends InputIconController {
|
|
8233
8283
|
constructor(component, name, host) {
|
|
8234
8284
|
super(component, name, host);
|
|
8285
|
+
this.afterSyncCharCounter = () => {
|
|
8286
|
+
if (typeof this.component._value === 'string' && this.component._value.length > 0) {
|
|
8287
|
+
this.component.state._currentLength = this.component._value.length;
|
|
8288
|
+
}
|
|
8289
|
+
};
|
|
8235
8290
|
this.component = component;
|
|
8236
8291
|
}
|
|
8237
8292
|
validateAutoComplete(value) {
|
|
8238
8293
|
watchValidator(this.component, '_autoComplete', (value) => typeof value === 'string' && (value === 'on' || value === 'off'), new Set(['on | off']), value);
|
|
8239
8294
|
}
|
|
8240
8295
|
validateHasCounter(value) {
|
|
8241
|
-
validateHasCounter(this.component, value
|
|
8296
|
+
validateHasCounter(this.component, value, {
|
|
8297
|
+
hooks: {
|
|
8298
|
+
afterPatch: this.afterSyncCharCounter,
|
|
8299
|
+
},
|
|
8300
|
+
});
|
|
8242
8301
|
}
|
|
8243
8302
|
validateVariant(value) {
|
|
8244
8303
|
validatePasswordVariant(this.component, value);
|
|
8245
8304
|
}
|
|
8246
8305
|
validateMaxLength(value) {
|
|
8247
8306
|
watchNumber(this.component, '_maxLength', value, {
|
|
8307
|
+
hooks: {
|
|
8308
|
+
afterPatch: this.afterSyncCharCounter,
|
|
8309
|
+
},
|
|
8248
8310
|
min: 0,
|
|
8249
8311
|
});
|
|
8250
8312
|
}
|
|
@@ -8261,7 +8323,11 @@ class InputPasswordController extends InputIconController {
|
|
|
8261
8323
|
watchBoolean(this.component, '_required', value);
|
|
8262
8324
|
}
|
|
8263
8325
|
validateValue(value) {
|
|
8264
|
-
watchString(this.component, '_value', value
|
|
8326
|
+
watchString(this.component, '_value', value, {
|
|
8327
|
+
hooks: {
|
|
8328
|
+
afterPatch: this.afterSyncCharCounter,
|
|
8329
|
+
},
|
|
8330
|
+
});
|
|
8265
8331
|
this.setFormAssociatedValue(this.component.state._value);
|
|
8266
8332
|
}
|
|
8267
8333
|
componentWillLoad() {
|
|
@@ -8300,9 +8366,6 @@ class InputTextController extends InputTextEmailController {
|
|
|
8300
8366
|
validateType(value) {
|
|
8301
8367
|
watchValidator(this.component, '_type', (value) => typeof value === 'string' && inputTextTypeOptions.includes(value), new Set([`String {${inputTextTypeOptions.join(', ')}`]), value);
|
|
8302
8368
|
}
|
|
8303
|
-
validateHasCounter(value) {
|
|
8304
|
-
validateHasCounter(this.component, value);
|
|
8305
|
-
}
|
|
8306
8369
|
componentWillLoad() {
|
|
8307
8370
|
super.componentWillLoad();
|
|
8308
8371
|
this.validateType(this.component._type);
|
|
@@ -8324,7 +8387,7 @@ class InputEmailController extends InputTextEmailController {
|
|
|
8324
8387
|
}
|
|
8325
8388
|
}
|
|
8326
8389
|
|
|
8327
|
-
const defaultStyleCss$u = "@layer kol-global {\n .sc-kol-input-email-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-email-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-input-email-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-email-default-h {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n \n \n \n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n \n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n \n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n\n@layer kol-global {\n .sc-kol-input-email-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-email-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-input-email-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-input-email-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n \n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n .sc-kol-input-email-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
8390
|
+
const defaultStyleCss$u = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
8328
8391
|
var KolInputEmailDefaultStyle0 = defaultStyleCss$u;
|
|
8329
8392
|
|
|
8330
8393
|
class KolInputEmail {
|
|
@@ -8595,7 +8658,7 @@ class InputFileController extends InputIconController {
|
|
|
8595
8658
|
}
|
|
8596
8659
|
}
|
|
8597
8660
|
|
|
8598
|
-
const defaultStyleCss$t = "@charset \"UTF-8\";\n\n@layer kol-global {\n .sc-kol-input-file-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-file-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-input-file-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-file-default-h {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n \n \n \n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n \n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n \n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n\n@layer kol-global {\n .sc-kol-input-file-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-file-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-input-file-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-input-file-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n \n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n .sc-kol-input-file-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n label input[type=file]::-webkit-file-upload-button {\n display: none;\n }\n label input[type=file]:before {\n content: \"Datei auswählen\";\n }\n label input[multiple]:before {\n content: \"Dateien auswählen\";\n }\n div.input {\n cursor: pointer;\n }\n}";
|
|
8661
|
+
const defaultStyleCss$t = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n label input[type=file]::-webkit-file-upload-button {\n display: none;\n }\n label input[type=file]:before {\n content: \"Datei auswählen\";\n }\n label input[multiple]:before {\n content: \"Dateien auswählen\";\n }\n div.input {\n cursor: pointer;\n }\n}";
|
|
8599
8662
|
var KolInputFileDefaultStyle0 = defaultStyleCss$t;
|
|
8600
8663
|
|
|
8601
8664
|
class KolInputFile {
|
|
@@ -8879,7 +8942,7 @@ class InputNumberController extends InputIconController {
|
|
|
8879
8942
|
}
|
|
8880
8943
|
}
|
|
8881
8944
|
|
|
8882
|
-
const defaultStyleCss$s = "@layer kol-global {\n .sc-kol-input-number-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-number-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-input-number-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-number-default-h {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n \n \n \n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n \n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n \n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n\n@layer kol-global {\n .sc-kol-input-number-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-number-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-input-number-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-input-number-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n \n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n .sc-kol-input-number-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
8945
|
+
const defaultStyleCss$s = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
8883
8946
|
var KolInputNumberDefaultStyle0 = defaultStyleCss$s;
|
|
8884
8947
|
|
|
8885
8948
|
class KolInputNumber {
|
|
@@ -9119,7 +9182,7 @@ class KolInputNumber {
|
|
|
9119
9182
|
}; }
|
|
9120
9183
|
}
|
|
9121
9184
|
|
|
9122
|
-
const defaultStyleCss$r = "@layer kol-global {\n .sc-kol-input-password-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-password-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-input-password-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-password-default-h {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n \n \n \n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n \n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n \n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n\n@layer kol-global {\n .sc-kol-input-password-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-password-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-input-password-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-input-password-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n \n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n .sc-kol-input-password-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .password-toggle-button {\n position: absolute;\n transform: translateX(-100%);\n }\n .kol-tooltip-wc {\n --kol-tooltip-width: 10rem;\n }\n}";
|
|
9185
|
+
const defaultStyleCss$r = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .password-toggle-button {\n position: absolute;\n transform: translateX(-100%);\n }\n .kol-tooltip-wc {\n --kol-tooltip-width: rem(160);\n }\n}";
|
|
9123
9186
|
var KolInputPasswordDefaultStyle0 = defaultStyleCss$r;
|
|
9124
9187
|
|
|
9125
9188
|
class KolInputPassword {
|
|
@@ -9374,7 +9437,7 @@ const FormFieldMsg = ({ _alert, _msg, _hideError, _id }) => (hAsync(KolAlertWcTa
|
|
|
9374
9437
|
'visually-hidden': _hideError === true,
|
|
9375
9438
|
} }, _msg), (_msg === null || _msg === void 0 ? void 0 : _msg._description) || undefined));
|
|
9376
9439
|
|
|
9377
|
-
const defaultStyleCss$q = "@layer kol-global {\n .sc-kol-input-radio-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-radio-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-input-radio-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-radio-default-h {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n \n \n \n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n \n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n \n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n\n@layer kol-global {\n .sc-kol-input-radio-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-radio-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-input-radio-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-input-radio-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n \n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n .sc-kol-input-radio-default-h {\n --border-width: 2px;\n --input-size: 1.5em;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .icons {\n display: none;\n }\n label {\n cursor: pointer;\n }\n input {\n appearance: none;\n border-width: var(--border-width);\n border-style: solid;\n border-radius: 100%;\n cursor: pointer;\n display: flex;\n height: var(--input-size);\n margin: 0;\n min-height: var(--input-size);\n min-width: var(--input-size);\n padding: 0;\n width: var(--input-size);\n }\n input:before {\n border-radius: 100%;\n content: \"\";\n margin: auto;\n height: calc(var(--input-size) / 2);\n width: calc(var(--input-size) / 2);\n }\n input:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n input:checked:before {\n \n background: selectedItem !important;\n }\n }\n fieldset {\n display: flex;\n }\n fieldset.vertical {\n flex-direction: column;\n }\n fieldset .input-slot {\n align-items: center;\n display: flex;\n }\n \n .required label > span::after {\n content: \"\";\n }\n}";
|
|
9440
|
+
const defaultStyleCss$q = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n :host {\n --border-width: 2px;\n --input-size: 1.5em;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .icons {\n display: none;\n }\n label {\n cursor: pointer;\n }\n input {\n appearance: none;\n border-width: var(--border-width);\n border-style: solid;\n border-radius: 100%;\n cursor: pointer;\n display: flex;\n height: var(--input-size);\n margin: 0;\n min-height: var(--input-size);\n min-width: var(--input-size);\n padding: 0;\n width: var(--input-size);\n }\n input:before {\n border-radius: 100%;\n content: \"\";\n margin: auto;\n height: calc(var(--input-size) / 2);\n width: calc(var(--input-size) / 2);\n }\n input:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n input:checked:before {\n /* Give it a visible background in forced colors mode */\n background: selectedItem !important;\n }\n }\n fieldset {\n display: flex;\n }\n fieldset.vertical {\n flex-direction: column;\n }\n fieldset .input-slot {\n align-items: center;\n display: flex;\n }\n /* required star is on fieldset legend */\n .required label > span::after {\n content: \"\";\n }\n}";
|
|
9378
9441
|
var KolInputRadioDefaultStyle0 = defaultStyleCss$q;
|
|
9379
9442
|
|
|
9380
9443
|
class KolInputRadio {
|
|
@@ -9645,7 +9708,7 @@ class InputRangeController extends InputIconController {
|
|
|
9645
9708
|
}
|
|
9646
9709
|
}
|
|
9647
9710
|
|
|
9648
|
-
const defaultStyleCss$p = "@layer kol-global {\n .sc-kol-input-range-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-range-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-input-range-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-input-range-default-h {\n display: block;\n }\n}\n\n@layer kol-global {\n .sc-kol-input-range-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-range-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-input-range-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-range-default-h {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n \n \n \n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n \n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n \n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n \n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n .sc-kol-input-range-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .inputs-wrapper {\n align-items: center;\n display: flex;\n flex-direction: row;\n }\n input[type=number] {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n width: var(--kolibri-input-range--input-number--width);\n }\n \n input[type=range] {\n appearance: none;\n background-color: #d3d3d3;\n border: 1px solid #000;\n display: inline-block;\n flex-grow: 1;\n height: calc(8rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5em;\n padding: 0;\n margin: 0;\n \n width: 0;\n }\n input[type=range]::-webkit-slider-thumb {\n box-sizing: border-box;\n background-color: #000;\n height: 20px;\n width: 20px;\n border-radius: 20px;\n cursor: pointer;\n -webkit-appearance: none;\n }\n input[type=range]::-moz-range-thumb {\n box-sizing: border-box;\n background-color: #000;\n height: 20px;\n width: 20px;\n border-radius: 20px;\n cursor: pointer;\n -moz-appearance: none;\n }\n}\n\n@media (prefers-contrast: more) {\n /*!@::-webkit-slider-thumb*/.sc-kol-input-range-default::-webkit-slider-thumb {\n outline: 1px solid currentColor;\n }\n}";
|
|
9711
|
+
const defaultStyleCss$p = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .inputs-wrapper {\n align-items: center;\n display: flex;\n flex-direction: row;\n }\n input[type=number] {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n width: var(--kolibri-input-range--input-number--width);\n }\n /*\n * For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n */\n input[type=range] {\n appearance: none;\n background-color: #d3d3d3;\n border: 1px solid #000;\n display: inline-block;\n flex-grow: 1;\n height: calc(8rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5em;\n padding: 0;\n margin: 0;\n /* Design-Hack - related with flex-grow */\n width: 0;\n }\n input[type=range]::-webkit-slider-thumb {\n box-sizing: border-box;\n background-color: #000;\n height: 20px;\n width: 20px;\n border-radius: 20px;\n cursor: pointer;\n -webkit-appearance: none;\n }\n input[type=range]::-moz-range-thumb {\n box-sizing: border-box;\n background-color: #000;\n height: 20px;\n width: 20px;\n border-radius: 20px;\n cursor: pointer;\n -moz-appearance: none;\n }\n}\n/* Fix missing outline in Chromium-based browsers on Windows in high contrast mode. */\n@media (prefers-contrast: more) {\n ::-webkit-slider-thumb {\n outline: 1px solid currentColor;\n }\n}";
|
|
9649
9712
|
var KolInputRangeDefaultStyle0 = defaultStyleCss$p;
|
|
9650
9713
|
|
|
9651
9714
|
class KolInputRange {
|
|
@@ -9893,7 +9956,7 @@ class KolInputRange {
|
|
|
9893
9956
|
}; }
|
|
9894
9957
|
}
|
|
9895
9958
|
|
|
9896
|
-
const defaultStyleCss$o = "@layer kol-global {\n .sc-kol-input-text-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-text-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-input-text-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-text-default-h {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n \n \n \n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n \n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n \n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n\n@layer kol-global {\n .sc-kol-input-text-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-input-text-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-input-text-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-input-text-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n \n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n .sc-kol-input-text-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
9959
|
+
const defaultStyleCss$o = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
9897
9960
|
var KolInputTextDefaultStyle0 = defaultStyleCss$o;
|
|
9898
9961
|
|
|
9899
9962
|
class KolInputText {
|
|
@@ -10204,7 +10267,7 @@ class KolInputWc {
|
|
|
10204
10267
|
input: true,
|
|
10205
10268
|
'icon-left': typeof ((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) === 'object',
|
|
10206
10269
|
'icon-right': typeof ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) === 'object',
|
|
10207
|
-
} }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: '84326de1ed7d3542ab0c868ba5bcc88d66d09ed2', _label: "", _icons: ((_h = this._icons) === null || _h === void 0 ? void 0 : _h.left).icon, style: this.getIconStyles((_j = this._icons) === null || _j === void 0 ? void 0 : _j.left) })), hAsync("div", { key: '4499d53591ef3ca4c86603481f65b09a0f65a5a9', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { key: 'cc02b46988087722bb62674e02d0a2a0922d8033', _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_k = this._icons) === null || _k === void 0 ? void 0 : _k.right) && (hAsync(KolIconTag, { key: '7425d45bd0da5363927ff85980f47e5728c9245c', _label: "", _icons: ((_l = this._icons) === null || _l === void 0 ? void 0 : _l.right).icon, style: this.getIconStyles((_m = this._icons) === null || _m === void 0 ? void 0 : _m.right) }))), useTooltopInsteadOfLabel && (hAsync(KolTooltipWcTag, { key: '66bfb816c06ec291dae8683d1f4dabf81fb4376c', "aria-hidden": "true", class: "input-tooltip", _accessKey: this._accessKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), showFormFieldMsg && hAsync(FormFieldMsg, { key: 'afbfc9cb6af4e93cf18cbff41a7114ae17043af8', _alert: this._alert, _hideError: this._hideError, _msg: this._msg, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { key: '7de41a5df7e95fe2ecd4756a93584fa59155efe1', id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync("span", { key: '
|
|
10270
|
+
} }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: '84326de1ed7d3542ab0c868ba5bcc88d66d09ed2', _label: "", _icons: ((_h = this._icons) === null || _h === void 0 ? void 0 : _h.left).icon, style: this.getIconStyles((_j = this._icons) === null || _j === void 0 ? void 0 : _j.left) })), hAsync("div", { key: '4499d53591ef3ca4c86603481f65b09a0f65a5a9', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { key: 'cc02b46988087722bb62674e02d0a2a0922d8033', _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_k = this._icons) === null || _k === void 0 ? void 0 : _k.right) && (hAsync(KolIconTag, { key: '7425d45bd0da5363927ff85980f47e5728c9245c', _label: "", _icons: ((_l = this._icons) === null || _l === void 0 ? void 0 : _l.right).icon, style: this.getIconStyles((_m = this._icons) === null || _m === void 0 ? void 0 : _m.right) }))), useTooltopInsteadOfLabel && (hAsync(KolTooltipWcTag, { key: '66bfb816c06ec291dae8683d1f4dabf81fb4376c', "aria-hidden": "true", class: "input-tooltip", _accessKey: this._accessKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), showFormFieldMsg && hAsync(FormFieldMsg, { key: 'afbfc9cb6af4e93cf18cbff41a7114ae17043af8', _alert: this._alert, _hideError: this._hideError, _msg: this._msg, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { key: '7de41a5df7e95fe2ecd4756a93584fa59155efe1', id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync("span", { key: 'e97be096b0bd1bf7622bd4daa0c0d482cf3b8c61', class: "counter", "aria-atomic": "true", "aria-live": "polite", "data-testid": "input-counter" }, this._currentLength, this._maxLength && (hAsync(Fragment, null, hAsync("span", { key: '6449d0737b9123456f82ea25a0d0b289aad3df7a', "aria-label": translate('kol-of'), role: "img" }, "/"), this._maxLength)), ' ', hAsync("span", { key: 'c6ad705d411bcde0769a7e7cfd1f4859fd8ce279' }, translate('kol-characters'))))));
|
|
10208
10271
|
}
|
|
10209
10272
|
getModifierClassNameByMsgType() {
|
|
10210
10273
|
var _a, _b;
|
|
@@ -10251,7 +10314,7 @@ class KolInputWc {
|
|
|
10251
10314
|
}; }
|
|
10252
10315
|
}
|
|
10253
10316
|
|
|
10254
|
-
const defaultStyleCss$n = "@layer kol-global {\n
|
|
10317
|
+
const defaultStyleCss$n = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: inline-block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n text {\n font-size: 90px;\n letter-spacing: normal;\n word-spacing: normal;\n }\n svg {\n max-height: 100%;\n }\n}";
|
|
10255
10318
|
var KolKolibriDefaultStyle0 = defaultStyleCss$n;
|
|
10256
10319
|
|
|
10257
10320
|
class KolKolibri {
|
|
@@ -10323,7 +10386,7 @@ class KolKolibri {
|
|
|
10323
10386
|
}; }
|
|
10324
10387
|
}
|
|
10325
10388
|
|
|
10326
|
-
const defaultStyleCss$m = "@layer kol-global {\n
|
|
10389
|
+
const defaultStyleCss$m = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: inline-block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) {\n align-items: baseline;\n display: inline-flex;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n :is(a, button) .kol-span-wc .span-label {\n text-decoration-line: underline;\n }\n a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.2em;\n }\n .skip {\n left: -99999px;\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n }\n .skip:focus {\n background-color: #fff;\n left: unset;\n padding: 1em;\n position: unset;\n }\n .kol-icon.external-link-icon {\n display: inline-flex;\n }\n}";
|
|
10327
10390
|
var KolLinkDefaultStyle0 = defaultStyleCss$m;
|
|
10328
10391
|
|
|
10329
10392
|
class KolLink {
|
|
@@ -10387,7 +10450,7 @@ class KolLink {
|
|
|
10387
10450
|
}; }
|
|
10388
10451
|
}
|
|
10389
10452
|
|
|
10390
|
-
const defaultStyleCss$l = "@charset \"UTF-8\";\n
|
|
10453
|
+
const defaultStyleCss$l = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n display: inline-block;\n }\n :is(a, button) {\n display: inline-flex;\n place-items: center;\n text-align: center;\n text-decoration-line: none;\n }\n :is(a, button)::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n /* TODO: Why we need this? */\n :is(a, button) > .kol-span-wc {\n margin: auto;\n width: 100%;\n }\n}";
|
|
10391
10454
|
var KolLinkButtonDefaultStyle0 = defaultStyleCss$l;
|
|
10392
10455
|
|
|
10393
10456
|
class KolLinkButton {
|
|
@@ -10459,7 +10522,7 @@ class KolLinkButton {
|
|
|
10459
10522
|
}; }
|
|
10460
10523
|
}
|
|
10461
10524
|
|
|
10462
|
-
const defaultStyleCss$k = "@layer kol-global {\n
|
|
10525
|
+
const defaultStyleCss$k = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n :is(ol, ul).horizontal {\n display: flex;\n flex-wrap: wrap;\n }\n :is(ol, ul).horizontal li {\n margin-left: calc(20rem / var(--kolibri-root-font-size, 16));\n margin-right: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :is(ol, ul).horizontal li:first-child {\n margin-left: 0;\n }\n :is(ol, ul).horizontal li:last-child {\n margin-right: 0;\n }\n :is(ol, ul).vertical li {\n margin-left: calc(28rem / var(--kolibri-root-font-size, 16));\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n li.list-none {\n list-style-type: none !important;\n margin-left: 0;\n }\n}";
|
|
10463
10526
|
var KolLinkGroupDefaultStyle0 = defaultStyleCss$k;
|
|
10464
10527
|
|
|
10465
10528
|
const ListItem = (props) => {
|
|
@@ -10939,7 +11002,7 @@ BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Arzneimittel und Mediz
|
|
|
10939
11002
|
BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Bevölkerungsforschung'], ['Bundesinstitut', 'für Bevölkerungsforschung']);
|
|
10940
11003
|
BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Sportwissenschaft'], ['Bundesinstitut', 'für Sportwissenschaft']);
|
|
10941
11004
|
|
|
10942
|
-
const defaultStyleCss$j = "@layer kol-global {\n
|
|
11005
|
+
const defaultStyleCss$j = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: inline-block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n text {\n font-size: 16px;\n letter-spacing: normal;\n word-spacing: normal;\n }\n svg {\n max-height: 100%;\n }\n}";
|
|
10943
11006
|
var KolLogoDefaultStyle0 = defaultStyleCss$j;
|
|
10944
11007
|
|
|
10945
11008
|
function enumToArray(enumeration, enumAsMap = new Map()) {
|
|
@@ -11002,7 +11065,7 @@ class KolLogo {
|
|
|
11002
11065
|
}; }
|
|
11003
11066
|
}
|
|
11004
11067
|
|
|
11005
|
-
const defaultStyleCss$i = "@layer kol-global {\n
|
|
11068
|
+
const defaultStyleCss$i = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-modal {\n border: 0;\n padding: 0;\n }\n .kol-modal::backdrop {\n background-color: rgba(0, 0, 0, 0.33);\n }\n}";
|
|
11006
11069
|
var KolModalDefaultStyle0 = defaultStyleCss$i;
|
|
11007
11070
|
|
|
11008
11071
|
class KolModal {
|
|
@@ -11114,7 +11177,7 @@ class KolModal {
|
|
|
11114
11177
|
}; }
|
|
11115
11178
|
}
|
|
11116
11179
|
|
|
11117
|
-
const defaultStyleCss$h = "@layer kol-global {\n
|
|
11180
|
+
const defaultStyleCss$h = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > div {\n display: grid;\n place-items: center;\n }\n :not(.is-compact) nav {\n width: 100%;\n }\n .list {\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .list.vertical {\n flex-direction: column;\n }\n .list.horizontal {\n flex-wrap: wrap;\n }\n .entry {\n display: flex;\n }\n .entry-item {\n flex-grow: 1;\n }\n}";
|
|
11118
11181
|
var KolNavDefaultStyle0 = defaultStyleCss$h;
|
|
11119
11182
|
|
|
11120
11183
|
const entryIsLink = (entryProps) => {
|
|
@@ -11308,7 +11371,7 @@ class KolNav {
|
|
|
11308
11371
|
}; }
|
|
11309
11372
|
}
|
|
11310
11373
|
|
|
11311
|
-
const defaultStyleCss$g = "@charset \"UTF-8\";\n
|
|
11374
|
+
const defaultStyleCss$g = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n align-items: center;\n display: grid;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n grid-template-columns: 1fr auto;\n }\n .navigation-list {\n align-items: center;\n display: inline-flex;\n flex-wrap: wrap;\n gap: 0.5em;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .separator:before {\n content: \"•••\";\n }\n}";
|
|
11312
11375
|
var KolPaginationDefaultStyle0 = defaultStyleCss$g;
|
|
11313
11376
|
|
|
11314
11377
|
const leftDoubleArrowIcon = {
|
|
@@ -12825,6 +12888,9 @@ const size = function (options) {
|
|
|
12825
12888
|
};
|
|
12826
12889
|
};
|
|
12827
12890
|
|
|
12891
|
+
function hasWindow() {
|
|
12892
|
+
return typeof window !== 'undefined';
|
|
12893
|
+
}
|
|
12828
12894
|
function getNodeName(node) {
|
|
12829
12895
|
if (isNode(node)) {
|
|
12830
12896
|
return (node.nodeName || '').toLowerCase();
|
|
@@ -12843,17 +12909,25 @@ function getDocumentElement(node) {
|
|
|
12843
12909
|
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
|
|
12844
12910
|
}
|
|
12845
12911
|
function isNode(value) {
|
|
12912
|
+
if (!hasWindow()) {
|
|
12913
|
+
return false;
|
|
12914
|
+
}
|
|
12846
12915
|
return value instanceof Node || value instanceof getWindow(value).Node;
|
|
12847
12916
|
}
|
|
12848
12917
|
function isElement(value) {
|
|
12918
|
+
if (!hasWindow()) {
|
|
12919
|
+
return false;
|
|
12920
|
+
}
|
|
12849
12921
|
return value instanceof Element || value instanceof getWindow(value).Element;
|
|
12850
12922
|
}
|
|
12851
12923
|
function isHTMLElement(value) {
|
|
12924
|
+
if (!hasWindow()) {
|
|
12925
|
+
return false;
|
|
12926
|
+
}
|
|
12852
12927
|
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
|
|
12853
12928
|
}
|
|
12854
12929
|
function isShadowRoot(value) {
|
|
12855
|
-
|
|
12856
|
-
if (typeof ShadowRoot === 'undefined') {
|
|
12930
|
+
if (!hasWindow() || typeof ShadowRoot === 'undefined') {
|
|
12857
12931
|
return false;
|
|
12858
12932
|
}
|
|
12859
12933
|
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
|
@@ -12957,10 +13031,14 @@ function getOverflowAncestors(node, list, traverseIframes) {
|
|
|
12957
13031
|
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
|
|
12958
13032
|
const win = getWindow(scrollableAncestor);
|
|
12959
13033
|
if (isBody) {
|
|
12960
|
-
|
|
13034
|
+
const frameElement = getFrameElement(win);
|
|
13035
|
+
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
|
|
12961
13036
|
}
|
|
12962
13037
|
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
|
12963
13038
|
}
|
|
13039
|
+
function getFrameElement(win) {
|
|
13040
|
+
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
|
|
13041
|
+
}
|
|
12964
13042
|
|
|
12965
13043
|
function getCssDimensions(element) {
|
|
12966
13044
|
const css = getComputedStyle(element);
|
|
@@ -13064,7 +13142,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
|
|
|
13064
13142
|
const win = getWindow(domElement);
|
|
13065
13143
|
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
|
|
13066
13144
|
let currentWin = win;
|
|
13067
|
-
let currentIFrame = currentWin
|
|
13145
|
+
let currentIFrame = getFrameElement(currentWin);
|
|
13068
13146
|
while (currentIFrame && offsetParent && offsetWin !== currentWin) {
|
|
13069
13147
|
const iframeScale = getScale(currentIFrame);
|
|
13070
13148
|
const iframeRect = currentIFrame.getBoundingClientRect();
|
|
@@ -13078,7 +13156,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
|
|
|
13078
13156
|
x += left;
|
|
13079
13157
|
y += top;
|
|
13080
13158
|
currentWin = getWindow(currentIFrame);
|
|
13081
|
-
currentIFrame = currentWin
|
|
13159
|
+
currentIFrame = getFrameElement(currentWin);
|
|
13082
13160
|
}
|
|
13083
13161
|
}
|
|
13084
13162
|
return rectToClientRect({
|
|
@@ -13132,10 +13210,14 @@ function getClientRects(element) {
|
|
|
13132
13210
|
return Array.from(element.getClientRects());
|
|
13133
13211
|
}
|
|
13134
13212
|
|
|
13135
|
-
|
|
13136
|
-
|
|
13137
|
-
|
|
13138
|
-
|
|
13213
|
+
// If <html> has a CSS width greater than the viewport, then this will be
|
|
13214
|
+
// incorrect for RTL.
|
|
13215
|
+
function getWindowScrollBarX(element, rect) {
|
|
13216
|
+
const leftScroll = getNodeScroll(element).scrollLeft;
|
|
13217
|
+
if (!rect) {
|
|
13218
|
+
return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
|
|
13219
|
+
}
|
|
13220
|
+
return rect.left + leftScroll;
|
|
13139
13221
|
}
|
|
13140
13222
|
|
|
13141
13223
|
// Gets the entire size of the scrollable document area, even extending outside
|
|
@@ -13319,11 +13401,22 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
13319
13401
|
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
13320
13402
|
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
13321
13403
|
} else if (documentElement) {
|
|
13404
|
+
// If the <body> scrollbar appears on the left (e.g. RTL systems). Use
|
|
13405
|
+
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
13322
13406
|
offsets.x = getWindowScrollBarX(documentElement);
|
|
13323
13407
|
}
|
|
13324
13408
|
}
|
|
13325
|
-
|
|
13326
|
-
|
|
13409
|
+
let htmlX = 0;
|
|
13410
|
+
let htmlY = 0;
|
|
13411
|
+
if (documentElement && !isOffsetParentAnElement && !isFixed) {
|
|
13412
|
+
const htmlRect = documentElement.getBoundingClientRect();
|
|
13413
|
+
htmlY = htmlRect.top + scroll.scrollTop;
|
|
13414
|
+
htmlX = htmlRect.left + scroll.scrollLeft -
|
|
13415
|
+
// RTL <body> scrollbar.
|
|
13416
|
+
getWindowScrollBarX(documentElement, htmlRect);
|
|
13417
|
+
}
|
|
13418
|
+
const x = rect.left + scroll.scrollLeft - offsets.x - htmlX;
|
|
13419
|
+
const y = rect.top + scroll.scrollTop - offsets.y - htmlY;
|
|
13327
13420
|
return {
|
|
13328
13421
|
x,
|
|
13329
13422
|
y,
|
|
@@ -13343,7 +13436,16 @@ function getTrueOffsetParent(element, polyfill) {
|
|
|
13343
13436
|
if (polyfill) {
|
|
13344
13437
|
return polyfill(element);
|
|
13345
13438
|
}
|
|
13346
|
-
|
|
13439
|
+
let rawOffsetParent = element.offsetParent;
|
|
13440
|
+
|
|
13441
|
+
// Firefox returns the <html> element as the offsetParent if it's non-static,
|
|
13442
|
+
// while Chrome and Safari return the <body> element. The <body> element must
|
|
13443
|
+
// be used to perform the correct calculations even if the <html> element is
|
|
13444
|
+
// non-static.
|
|
13445
|
+
if (getDocumentElement(element) === rawOffsetParent) {
|
|
13446
|
+
rawOffsetParent = rawOffsetParent.ownerDocument.body;
|
|
13447
|
+
}
|
|
13448
|
+
return rawOffsetParent;
|
|
13347
13449
|
}
|
|
13348
13450
|
|
|
13349
13451
|
// Gets the closest ancestor positioned element. Handles some edge cases,
|
|
@@ -13800,7 +13902,7 @@ class KolPopover {
|
|
|
13800
13902
|
}; }
|
|
13801
13903
|
}
|
|
13802
13904
|
|
|
13803
|
-
const defaultStyleCss$f = "@layer kol-global {\n
|
|
13905
|
+
const defaultStyleCss$f = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n progress {\n display: block;\n height: 0;\n overflow: hidden;\n width: 0;\n }\n .bar {\n width: 150px;\n }\n .bar .border {\n fill: transparent;\n stroke: black;\n }\n .bar .background {\n fill: lightgray;\n stroke: white;\n }\n .bar .progress {\n fill: #0075ff;\n stroke: transparent;\n transition: 250ms ease-in-out 50ms;\n }\n .cycle .background {\n fill: transparent;\n stroke: lightgray;\n }\n .cycle .border {\n fill: transparent;\n stroke: black;\n }\n .cycle .whitespace {\n fill: transparent;\n stroke: white;\n }\n .cycle .progress {\n fill: transparent;\n stroke: #0075ff;\n transform-origin: 50% 50%;\n transform: rotate(-90deg);\n transition: 250ms ease-in-out 50ms;\n }\n /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */\n @media (prefers-reduced-motion) {\n .progress {\n transition-duration: 0s;\n transition-delay: 0s;\n }\n }\n}";
|
|
13804
13906
|
var KolProgressDefaultStyle0 = defaultStyleCss$f;
|
|
13805
13907
|
|
|
13806
13908
|
const VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);
|
|
@@ -13912,7 +14014,7 @@ class KolProcess {
|
|
|
13912
14014
|
}; }
|
|
13913
14015
|
}
|
|
13914
14016
|
|
|
13915
|
-
const defaultStyleCss$e = "@charset \"UTF-8\";\n
|
|
14017
|
+
const defaultStyleCss$e = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n cite,\n figure,\n q + figcaption {\n display: inline;\n margin: 0;\n padding: 0;\n }\n blockquote:before {\n content: open-quote;\n }\n blockquote::after {\n content: close-quote;\n }\n cite:before {\n content: \"—\";\n }\n .block cite:before {\n padding-right: 0.5em;\n }\n .inline cite:before {\n padding: 0.5em;\n }\n}";
|
|
13916
14018
|
var KolQuoteDefaultStyle0 = defaultStyleCss$e;
|
|
13917
14019
|
|
|
13918
14020
|
class KolQuote {
|
|
@@ -14060,7 +14162,7 @@ class SelectController extends InputIconController {
|
|
|
14060
14162
|
}
|
|
14061
14163
|
}
|
|
14062
14164
|
|
|
14063
|
-
const defaultStyleCss$d = "@layer kol-global {\n .sc-kol-select-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-select-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-select-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-select-default-h {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n \n \n \n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n \n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n \n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n\n@layer kol-global {\n .sc-kol-select-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-select-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-select-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-select-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n \n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n .sc-kol-select-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
14165
|
+
const defaultStyleCss$d = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
14064
14166
|
var KolSelectDefaultStyle0 = defaultStyleCss$d;
|
|
14065
14167
|
|
|
14066
14168
|
const isSelected = (valueList, optionValue) => {
|
|
@@ -14345,7 +14447,7 @@ class SingleSelectController extends InputIconController {
|
|
|
14345
14447
|
}
|
|
14346
14448
|
}
|
|
14347
14449
|
|
|
14348
|
-
const defaultStyleCss$c = "@layer kol-global {\n
|
|
14450
|
+
const defaultStyleCss$c = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .single-select {\n position: relative;\n }\n .single-select.disabled, .single-select.disabled * {\n cursor: not-allowed !important;\n }\n .single-select__group {\n display: inline-flex;\n align-items: center;\n }\n .single-select__input {\n flex-grow: 1;\n }\n .single-select__button {\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .single-select__listbox {\n display: block;\n position: absolute;\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 2;\n background-color: white;\n max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item.highlighted {\n background-color: #f0f0f0;\n }\n .single-select__listbox--cursor-hidden .single-select__item {\n cursor: none !important;\n }\n .single-select__no-results-message {\n cursor: default;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
14349
14451
|
var KolSingleSelectDefaultStyle0 = defaultStyleCss$c;
|
|
14350
14452
|
|
|
14351
14453
|
class KolSingleSelect {
|
|
@@ -14772,7 +14874,7 @@ class KolSingleSelect {
|
|
|
14772
14874
|
}; }
|
|
14773
14875
|
}
|
|
14774
14876
|
|
|
14775
|
-
const defaultStyleCss$b = "@layer kol-global {\n
|
|
14877
|
+
const defaultStyleCss$b = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n ul {\n display: grid;\n list-style: none;\n place-items: center;\n }\n ul li {\n height: 0;\n }\n .kol-link-wc a {\n left: -99999px;\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n }\n .kol-link-wc a:focus {\n background-color: #fff;\n left: unset;\n position: unset;\n }\n}";
|
|
14776
14878
|
var KolSkipNavDefaultStyle0 = defaultStyleCss$b;
|
|
14777
14879
|
|
|
14778
14880
|
class KolSkipNav {
|
|
@@ -23231,7 +23333,7 @@ class KolSpanWc {
|
|
|
23231
23333
|
}; }
|
|
23232
23334
|
}
|
|
23233
23335
|
|
|
23234
|
-
const defaultStyleCss$a = "@layer kol-global {\n
|
|
23336
|
+
const defaultStyleCss$a = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .spin.cycle {\n width: calc(48rem / var(--kolibri-root-font-size, 16));\n height: calc(48rem / var(--kolibri-root-font-size, 16));\n }\n .spin.cycle > .loader {\n display: block;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n position: relative;\n animation: 2s linear infinite rotate;\n }\n .spin.cycle > .loader::before {\n content: \"\";\n box-sizing: border-box;\n position: absolute;\n inset: 0px;\n border-radius: 50%;\n border: 5px solid #333;\n animation: 3s linear infinite prixClipFix;\n }\n @keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n @keyframes prixClipFix {\n 0% {\n border-color: #fff;\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n 25% {\n border-color: #666;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n }\n 50% {\n border-color: #000;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n }\n 75% {\n border-color: #000;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n }\n 100% {\n border-color: #000;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n }\n /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n @media (prefers-reduced-motion) {\n .spin.cycle > .loader {\n animation-duration: 4s;\n }\n .spin.cycle > .loader::before {\n animation-duration: 6s;\n }\n }\n}\n@layer kol-component {\n .spin.dot {\n height: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(48rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span {\n animation-timing-function: cubic-bezier(0, 1, 1, 0);\n border-radius: 50%;\n border: calc(0.16rem / var(--kolibri-root-font-size, 16)) solid #fff;\n height: calc(12.8rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n top: calc(0.16rem / var(--kolibri-root-font-size, 16));\n width: calc(12.8rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span:first-child {\n background-color: #000;\n z-index: 0;\n animation: 1s infinite spin1;\n left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span:nth-child(2) {\n background-color: #000;\n z-index: 1;\n animation: 1s infinite spin2;\n left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span:nth-child(3) {\n background-color: #000;\n z-index: 1;\n animation: 1s infinite spin2;\n left: calc(17.6rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span:nth-child(4) {\n background-color: #666;\n z-index: 0;\n animation: 1s infinite spin3;\n left: calc(33.6rem / var(--kolibri-root-font-size, 16));\n }\n @keyframes spin1 {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n }\n @keyframes spin2 {\n 0% {\n transform: translate(0, 0);\n }\n 100% {\n transform: translate(calc(16rem / var(--kolibri-root-font-size, 16)), 0);\n }\n }\n @keyframes spin3 {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n }\n /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n @media (prefers-reduced-motion) {\n .spin.dot > span:first-child,\n .spin.dot > span:nth-child(2),\n .spin.dot > span:nth-child(3),\n .spin.dot > span:nth-child(4) {\n animation-duration: 2s;\n }\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .spin {\n display: block;\n padding: calc(2rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n}";
|
|
23235
23337
|
var KolSpinDefaultStyle0 = defaultStyleCss$a;
|
|
23236
23338
|
|
|
23237
23339
|
function renderSpin(variant) {
|
|
@@ -23292,7 +23394,7 @@ class KolSpin {
|
|
|
23292
23394
|
}; }
|
|
23293
23395
|
}
|
|
23294
23396
|
|
|
23295
|
-
const defaultStyleCss$9 = "@layer kol-global {\n
|
|
23397
|
+
const defaultStyleCss$9 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: flex;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .split-button-root {\n display: flex;\n position: relative;\n }\n .main-button {\n flex-grow: 1;\n text-align: left;\n }\n .kol-popover .popover {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-popover .arrow {\n display: none;\n }\n}";
|
|
23296
23398
|
var KolSplitButtonDefaultStyle0 = defaultStyleCss$9;
|
|
23297
23399
|
|
|
23298
23400
|
class KolSplitButton {
|
|
@@ -23491,7 +23593,17 @@ var Events;
|
|
|
23491
23593
|
Events["onClose"] = "onClose";
|
|
23492
23594
|
})(Events || (Events = {}));
|
|
23493
23595
|
|
|
23494
|
-
|
|
23596
|
+
var KeyboardKey;
|
|
23597
|
+
(function (KeyboardKey) {
|
|
23598
|
+
KeyboardKey["ArrowDown"] = "ArrowDown";
|
|
23599
|
+
KeyboardKey["ArrowLeft"] = "ArrowLeft";
|
|
23600
|
+
KeyboardKey["ArrowRight"] = "ArrowRight";
|
|
23601
|
+
KeyboardKey["ArrowUp"] = "ArrowUp";
|
|
23602
|
+
KeyboardKey["Enter"] = "Enter";
|
|
23603
|
+
KeyboardKey["Space"] = " ";
|
|
23604
|
+
})(KeyboardKey || (KeyboardKey = {}));
|
|
23605
|
+
|
|
23606
|
+
const defaultStyleCss$8 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :root {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n div.pagination .kol-pagination {\n display: flex;\n flex-wrap: wrap;\n }\n div.pagination,\n div.pagination > div:last-child {\n display: grid;\n place-items: center;\n }\n @media (max-width: 1024px) {\n div.pagination .kol-pagination {\n flex-direction: column;\n }\n }\n @media (min-width: 1024px) {\n div.pagination,\n div.pagination > div:last-child {\n grid-auto-flow: column;\n }\n div.pagination .kol-pagination {\n display: flex;\n }\n }\n}\n@layer kol-component {\n :host,\n .kol-table-stateless-wc {\n display: block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .table {\n max-width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n }\n table {\n width: 100%;\n }\n caption {\n text-align: start;\n }\n .focus-element {\n font-size: 0;\n }\n .focus-element:focus {\n outline: 0 !important;\n }\n .table:has(.focus-element:focus) {\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 .table-sort-button .button {\n color: inherit;\n }\n tbody th,\n th.align-left {\n text-align: left;\n }\n tbody th .table-sort-button .button-inner,\n th.align-left .table-sort-button .button-inner {\n justify-items: start;\n }\n th.align-center {\n text-align: center;\n }\n th.align-center .table-sort-button .button-inner {\n justify-items: center;\n }\n th.align-right {\n text-align: right;\n }\n th.align-right .table-sort-button .button-inner {\n justify-items: end;\n }\n .selection-header-cell {\n width: 0;\n }\n .selection-cell {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .input label {\n align-items: center;\n cursor: pointer;\n display: flex;\n height: var(--a11y-min-size);\n justify-content: center;\n position: relative;\n width: var(--a11y-min-size);\n }\n .input .icon {\n display: block;\n inset: auto;\n position: absolute;\n z-index: 1;\n }\n .input input {\n appearance: none;\n border-style: solid;\n cursor: pointer;\n margin: 0;\n }\n .input input:before {\n content: \"\";\n }\n .input input[type=checkbox] {\n position: relative;\n display: flex;\n height: calc(var(--a11y-min-size) / 2);\n width: calc(var(--a11y-min-size) / 2);\n align-items: center;\n justify-content: center;\n background-color: rgb(255, 255, 255);\n border-width: 2px;\n line-height: 24px;\n transition: all 0.5s ease 0s;\n }\n .input input[type=radio] {\n display: flex;\n border-width: 2px;\n border-radius: 100%;\n height: 1.5em;\n min-height: 1.5em;\n min-width: 1.5em;\n padding: 0;\n width: 1.5em;\n }\n .input input[type=radio]:before {\n border-radius: 100%;\n margin: auto;\n height: 0.75em;\n width: 0.75em;\n }\n .input input[type=radio]:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .input input[type=radio]:checked:before {\n /* Give it a visible background in forced colors mode */\n background: selectedItem !important;\n }\n }\n}";
|
|
23495
23607
|
var KolTableStatefulDefaultStyle0 = defaultStyleCss$8;
|
|
23496
23608
|
|
|
23497
23609
|
const PAGINATION_OPTIONS = [10, 20, 50, 100];
|
|
@@ -23906,7 +24018,7 @@ class KolTableStateful {
|
|
|
23906
24018
|
}; }
|
|
23907
24019
|
}
|
|
23908
24020
|
|
|
23909
|
-
const defaultStyleCss$7 = "@layer kol-global {\n .sc-kol-table-stateless-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-table-stateless-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-table-stateless-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-table-stateless-default-h {\n display: block;\n }\n}\n\n@layer kol-global {\n .sc-kol-table-stateless-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-table-stateless-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-table-stateless-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-table-stateless-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .sc-kol-table-stateless-default-h,\n .kol-table-stateless-wc {\n display: block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .table {\n max-width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n }\n table {\n width: 100%;\n }\n caption {\n text-align: start;\n }\n .focus-element {\n font-size: 0;\n }\n .focus-element:focus {\n outline: 0 !important;\n }\n .table:has(.focus-element:focus) {\n \n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n .table-sort-button .button {\n color: inherit;\n }\n tbody th,\n th.align-left {\n text-align: left;\n }\n tbody th .table-sort-button .button-inner,\n th.align-left .table-sort-button .button-inner {\n justify-items: start;\n }\n th.align-center {\n text-align: center;\n }\n th.align-center .table-sort-button .button-inner {\n justify-items: center;\n }\n th.align-right {\n text-align: right;\n }\n th.align-right .table-sort-button .button-inner {\n justify-items: end;\n }\n .selection-header-cell {\n width: 0;\n }\n .selection-cell {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .input label {\n align-items: center;\n cursor: pointer;\n display: flex;\n height: var(--a11y-min-size);\n justify-content: center;\n position: relative;\n width: var(--a11y-min-size);\n }\n .input .icon {\n display: block;\n inset: auto;\n position: absolute;\n z-index: 1;\n }\n .input input {\n appearance: none;\n border-style: solid;\n cursor: pointer;\n margin: 0;\n }\n .input input:before {\n content: \"\";\n }\n .input input[type=checkbox] {\n position: relative;\n display: flex;\n height: calc(var(--a11y-min-size) / 2);\n width: calc(var(--a11y-min-size) / 2);\n align-items: center;\n justify-content: center;\n background-color: rgb(255, 255, 255);\n border-width: 2px;\n line-height: 24px;\n transition: all 0.5s ease 0s;\n }\n .input input[type=radio] {\n display: flex;\n border-width: 2px;\n border-radius: 100%;\n height: 1.5em;\n min-height: 1.5em;\n min-width: 1.5em;\n padding: 0;\n width: 1.5em;\n }\n .input input[type=radio]:before {\n border-radius: 100%;\n margin: auto;\n height: 0.75em;\n width: 0.75em;\n }\n .input input[type=radio]:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .input input[type=radio]:checked:before {\n \n background: selectedItem !important;\n }\n }\n}";
|
|
24021
|
+
const defaultStyleCss$7 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host,\n .kol-table-stateless-wc {\n display: block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .table {\n max-width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n }\n table {\n width: 100%;\n }\n caption {\n text-align: start;\n }\n .focus-element {\n font-size: 0;\n }\n .focus-element:focus {\n outline: 0 !important;\n }\n .table:has(.focus-element:focus) {\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 .table-sort-button .button {\n color: inherit;\n }\n tbody th,\n th.align-left {\n text-align: left;\n }\n tbody th .table-sort-button .button-inner,\n th.align-left .table-sort-button .button-inner {\n justify-items: start;\n }\n th.align-center {\n text-align: center;\n }\n th.align-center .table-sort-button .button-inner {\n justify-items: center;\n }\n th.align-right {\n text-align: right;\n }\n th.align-right .table-sort-button .button-inner {\n justify-items: end;\n }\n .selection-header-cell {\n width: 0;\n }\n .selection-cell {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .input label {\n align-items: center;\n cursor: pointer;\n display: flex;\n height: var(--a11y-min-size);\n justify-content: center;\n position: relative;\n width: var(--a11y-min-size);\n }\n .input .icon {\n display: block;\n inset: auto;\n position: absolute;\n z-index: 1;\n }\n .input input {\n appearance: none;\n border-style: solid;\n cursor: pointer;\n margin: 0;\n }\n .input input:before {\n content: \"\";\n }\n .input input[type=checkbox] {\n position: relative;\n display: flex;\n height: calc(var(--a11y-min-size) / 2);\n width: calc(var(--a11y-min-size) / 2);\n align-items: center;\n justify-content: center;\n background-color: rgb(255, 255, 255);\n border-width: 2px;\n line-height: 24px;\n transition: all 0.5s ease 0s;\n }\n .input input[type=radio] {\n display: flex;\n border-width: 2px;\n border-radius: 100%;\n height: 1.5em;\n min-height: 1.5em;\n min-width: 1.5em;\n padding: 0;\n width: 1.5em;\n }\n .input input[type=radio]:before {\n border-radius: 100%;\n margin: auto;\n height: 0.75em;\n width: 0.75em;\n }\n .input input[type=radio]:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .input input[type=radio]:checked:before {\n /* Give it a visible background in forced colors mode */\n background: selectedItem !important;\n }\n }\n}";
|
|
23910
24022
|
var KolTableStatelessDefaultStyle0 = defaultStyleCss$7;
|
|
23911
24023
|
|
|
23912
24024
|
class KolTableStateless$1 {
|
|
@@ -23950,6 +24062,7 @@ class KolTableStateless {
|
|
|
23950
24062
|
this.horizontal = true;
|
|
23951
24063
|
this.cellsToRenderTimeouts = new Map();
|
|
23952
24064
|
this.dataToKeyMap = new Map();
|
|
24065
|
+
this.checkboxRefs = [];
|
|
23953
24066
|
this.renderTableRow = (row, rowIndex) => {
|
|
23954
24067
|
var _a, _b;
|
|
23955
24068
|
let key = String(rowIndex);
|
|
@@ -24026,6 +24139,25 @@ class KolTableStateless {
|
|
|
24026
24139
|
validateSelection(value) {
|
|
24027
24140
|
validateTableSelection(this, value);
|
|
24028
24141
|
}
|
|
24142
|
+
handleKeyDown(event) {
|
|
24143
|
+
var _a;
|
|
24144
|
+
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
|
|
24145
|
+
const focusedElement = (_a = this.tableDivElement) === null || _a === void 0 ? void 0 : _a.querySelector(':focus');
|
|
24146
|
+
let index = this.checkboxRefs.indexOf(focusedElement);
|
|
24147
|
+
if (index > -1) {
|
|
24148
|
+
event.preventDefault();
|
|
24149
|
+
if (event.key === 'ArrowDown') {
|
|
24150
|
+
index = (index + 1) % this.checkboxRefs.length;
|
|
24151
|
+
this.checkboxRefs[index].focus();
|
|
24152
|
+
}
|
|
24153
|
+
else if (event.key === 'ArrowUp') {
|
|
24154
|
+
event.preventDefault();
|
|
24155
|
+
index = (index + this.checkboxRefs.length - 1) % this.checkboxRefs.length;
|
|
24156
|
+
this.checkboxRefs[index].focus();
|
|
24157
|
+
}
|
|
24158
|
+
}
|
|
24159
|
+
}
|
|
24160
|
+
}
|
|
24029
24161
|
componentDidRender() {
|
|
24030
24162
|
this.checkDivElementScrollbar();
|
|
24031
24163
|
}
|
|
@@ -24249,7 +24381,7 @@ class KolTableStateless {
|
|
|
24249
24381
|
id: keyProperty,
|
|
24250
24382
|
['aria-label']: label,
|
|
24251
24383
|
};
|
|
24252
|
-
return (hAsync("td", { key: `tbody-${rowIndex}-selection`, class: "selection-cell" }, hAsync("div", { class: `input ${selected ? 'checked' : ''}` }, isMultiple ? (hAsync("label", { class: "checkbox-container" }, hAsync(KolIconTag, { class: "icon", _icons: `codicon ${selected ? 'codicon-check' : ''}`, _label: "" }), hAsync("input", Object.assign({}, props, { type: "checkbox", onInput: (event) => {
|
|
24384
|
+
return (hAsync("td", { key: `tbody-${rowIndex}-selection`, class: "selection-cell" }, hAsync("div", { class: `input ${selected ? 'checked' : ''}` }, isMultiple ? (hAsync("label", { class: "checkbox-container" }, hAsync(KolIconTag, { class: "icon", _icons: `codicon ${selected ? 'codicon-check' : ''}`, _label: "" }), hAsync("input", Object.assign({ ref: (el) => el && this.checkboxRefs.push(el) }, props, { type: "checkbox", onInput: (event) => {
|
|
24253
24385
|
var _a, _b, _c;
|
|
24254
24386
|
const updatedSelectedKeys = !selected
|
|
24255
24387
|
? [...((_a = selection === null || selection === void 0 ? void 0 : selection.selectedKeys) !== null && _a !== void 0 ? _a : []), keyProperty]
|
|
@@ -24284,7 +24416,7 @@ class KolTableStateless {
|
|
|
24284
24416
|
translationKey = 'kol-table-selection-all';
|
|
24285
24417
|
}
|
|
24286
24418
|
const label = translate(translationKey);
|
|
24287
|
-
return (hAsync("th", { key: `thead-0-selection`, class: "selection-cell selection-control" }, hAsync("div", { class: `input ${indeterminate ? 'indeterminate' : isChecked ? 'checked' : ''}` }, hAsync("label", { class: "checkbox-container" }, hAsync(KolIconTag, { class: "icon", _icons: `codicon ${indeterminate ? 'codicon-remove' : isChecked ? 'codicon-check' : ''}`, _label: "" }), hAsync("input", { name: "selection", checked: isChecked && !indeterminate, "aria-label": label, type: "checkbox", onInput: (event) => {
|
|
24419
|
+
return (hAsync("th", { key: `thead-0-selection`, class: "selection-cell selection-control" }, hAsync("div", { class: `input ${indeterminate ? 'indeterminate' : isChecked ? 'checked' : ''}` }, hAsync("label", { class: "checkbox-container" }, hAsync(KolIconTag, { class: "icon", _icons: `codicon ${indeterminate ? 'codicon-remove' : isChecked ? 'codicon-check' : ''}`, _label: "" }), hAsync("input", { ref: (el) => el && this.checkboxRefs.push(el), name: "selection", checked: isChecked && !indeterminate, "aria-label": label, type: "checkbox", onInput: (event) => {
|
|
24288
24420
|
var _a;
|
|
24289
24421
|
const selections = !isChecked ? this.state._data.map((el) => el === null || el === void 0 ? void 0 : el[keyPropertyName]) : [];
|
|
24290
24422
|
tryToDispatchKoliBriEvent('selection-change', this.host, selections);
|
|
@@ -24331,9 +24463,10 @@ class KolTableStateless {
|
|
|
24331
24463
|
}
|
|
24332
24464
|
render() {
|
|
24333
24465
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
24334
|
-
|
|
24466
|
+
this.checkboxRefs = [];
|
|
24467
|
+
return (hAsync(Host, { key: '66ebed2cce21d0ef2cea19a2caa4e009eef86696', class: "kol-table-stateless-wc" }, hAsync("div", { key: 'ef33e6adc481fe20c0652f904db977227555cf30', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '0fcd965cd0a3dd40f67c73a31095f2eabee38d8c', style: {
|
|
24335
24468
|
minWidth: this.state._minWidth,
|
|
24336
|
-
} }, hAsync("div", { key: '
|
|
24469
|
+
} }, hAsync("div", { key: 'afebb06ed38627d456f8e84f20db0b68de32a1b1', class: "focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: '69bb4c1346b1dd7b34ede6440bbd79d5ca19c14f', id: "caption" }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: 'b8078c25bc20ebe2452eb775d0a510d3310b3c95' }, this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), cols.map((cell, colIndex) => {
|
|
24337
24470
|
if (cell.asTd === true) {
|
|
24338
24471
|
return (hAsync("td", { key: `thead-${rowIndex}-${colIndex}-${cell.label}`, class: {
|
|
24339
24472
|
[cell.textAlign]: typeof cell.textAlign === 'string' && cell.textAlign.length > 0,
|
|
@@ -24349,7 +24482,7 @@ class KolTableStateless {
|
|
|
24349
24482
|
else {
|
|
24350
24483
|
return this.renderHeadingCell(cell, rowIndex, colIndex);
|
|
24351
24484
|
}
|
|
24352
|
-
})))))), hAsync("tbody", { key: '
|
|
24485
|
+
})))))), hAsync("tbody", { key: 'd872fa8369b3d7ca120d7f87dc72a7d9abdb82d9' }, dataField.map(this.renderTableRow)), this.renderFoot()))));
|
|
24353
24486
|
}
|
|
24354
24487
|
get host() { return getElement(this); }
|
|
24355
24488
|
static get watchers() { return {
|
|
@@ -24375,13 +24508,13 @@ class KolTableStateless {
|
|
|
24375
24508
|
"state": [32],
|
|
24376
24509
|
"tableDivElementHasScrollbar": [32]
|
|
24377
24510
|
},
|
|
24378
|
-
"$listeners$":
|
|
24511
|
+
"$listeners$": [[0, "keydown", "handleKeyDown"]],
|
|
24379
24512
|
"$lazyBundleId$": "-",
|
|
24380
24513
|
"$attrsToReflect$": []
|
|
24381
24514
|
}; }
|
|
24382
24515
|
}
|
|
24383
24516
|
|
|
24384
|
-
const defaultStyleCss$6 = "@layer kol-global {\n
|
|
24517
|
+
const defaultStyleCss$6 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group {\n display: inline-flex;\n flex-wrap: wrap;\n }\n .tabs-button-group button {\n border-bottom-color: transparent;\n border-bottom-style: solid;\n display: block;\n }\n div.grid,\n div[role=tabpanel] {\n height: 100%;\n }\n :host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-right .tabs-button-group {\n display: grid;\n order: 2;\n }\n :host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n }\n :host > .tabs-align-left .tabs-button-group {\n display: grid;\n order: 0;\n }\n :host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n }\n :host > .tabs-align-bottom .tabs-button-group {\n order: 2;\n }\n :host > .tabs-align-bottom .tabs-button-group > div {\n display: flex;\n }\n :host > .tabs-align-bottom > .tabs-button-group > div > div:first-child {\n margin: 0 1em 0 0;\n }\n :host > .tabs-align-bottom > .tabs-button-group > div > div {\n margin: 0 1em;\n }\n :host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n }\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-top .tabs-button-group > div {\n display: flex;\n }\n :host > .tabs-align-top > .tabs-button-group > div > div:first-child {\n margin: 0 1em 0 0;\n }\n :host > .tabs-align-top > .tabs-button-group > div > div {\n margin: 0 1em;\n }\n :host > div {\n display: grid;\n }\n :host > .tabs-align-left .tabs-button-group,\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-bottom .tabs-button-group,\n :host > .tabs-align-right .tabs-button-group {\n order: 1;\n }\n :host > div.tabs-align-left .tabs-button-group > div,\n :host > div.tabs-align-left .tabs-button-group > div > div,\n :host > div.tabs-align-right .tabs-button-group > div,\n :host > div.tabs-align-right .tabs-button-group > div > div {\n display: grid;\n }\n :host > div.tabs-align-left .tabs-button-group > div > div .kol-button-wc,\n :host > div.tabs-align-right .tabs-button-group > div > div .kol-button-wc {\n width: 100%;\n }\n :host > div.tabs-align-bottom .tabs-button-group div,\n :host > div.tabs-align-top .tabs-button-group div {\n display: flex;\n flex-wrap: wrap;\n }\n}";
|
|
24385
24518
|
var KolTabsDefaultStyle0 = defaultStyleCss$6;
|
|
24386
24519
|
|
|
24387
24520
|
class KolTabs {
|
|
@@ -24389,51 +24522,42 @@ class KolTabs {
|
|
|
24389
24522
|
registerInstance(this, hostRef);
|
|
24390
24523
|
this.onCreateLabel = `${translate('kol-new')} …`;
|
|
24391
24524
|
this.showCreateTab = false;
|
|
24392
|
-
this.nextPossibleTabIndex = (tabs, offset, step) => {
|
|
24393
|
-
|
|
24394
|
-
|
|
24395
|
-
|
|
24396
|
-
|
|
24397
|
-
}
|
|
24398
|
-
return offset + step;
|
|
24525
|
+
this.nextPossibleTabIndex = (tabs, offset, step = 1) => {
|
|
24526
|
+
const nextOffset = offset + step;
|
|
24527
|
+
if (nextOffset < tabs.length) {
|
|
24528
|
+
if (tabs[nextOffset]._disabled) {
|
|
24529
|
+
return this.nextPossibleTabIndex(tabs, offset, step + 1);
|
|
24399
24530
|
}
|
|
24531
|
+
return nextOffset;
|
|
24400
24532
|
}
|
|
24401
|
-
|
|
24402
|
-
|
|
24403
|
-
|
|
24404
|
-
|
|
24405
|
-
|
|
24406
|
-
|
|
24533
|
+
return offset;
|
|
24534
|
+
};
|
|
24535
|
+
this.prevPossibleTabIndex = (tabs, offset, step = 1) => {
|
|
24536
|
+
const nextOffset = offset - step;
|
|
24537
|
+
if (nextOffset >= 0) {
|
|
24538
|
+
if (tabs[nextOffset]._disabled) {
|
|
24539
|
+
return this.prevPossibleTabIndex(tabs, offset, step + 1);
|
|
24407
24540
|
}
|
|
24541
|
+
return nextOffset;
|
|
24408
24542
|
}
|
|
24409
24543
|
return offset;
|
|
24410
24544
|
};
|
|
24411
24545
|
this.onKeyDown = (event) => {
|
|
24412
|
-
var _a, _b;
|
|
24413
|
-
let selectedIndex = null;
|
|
24414
24546
|
switch (event.key) {
|
|
24415
|
-
case
|
|
24416
|
-
|
|
24547
|
+
case KeyboardKey.ArrowRight:
|
|
24548
|
+
this.goToNextTab(event);
|
|
24417
24549
|
break;
|
|
24418
|
-
case
|
|
24419
|
-
|
|
24550
|
+
case KeyboardKey.ArrowLeft:
|
|
24551
|
+
this.goToPreviousTab(event);
|
|
24552
|
+
break;
|
|
24553
|
+
case KeyboardKey.Space:
|
|
24554
|
+
case KeyboardKey.Enter:
|
|
24555
|
+
this.activateFocusedTab(event);
|
|
24420
24556
|
break;
|
|
24421
|
-
}
|
|
24422
|
-
if (selectedIndex !== null) {
|
|
24423
|
-
const tab = this.state._tabs[selectedIndex];
|
|
24424
|
-
if ((_a = tab._on) === null || _a === void 0 ? void 0 : _a.onSelect) {
|
|
24425
|
-
(_b = tab._on) === null || _b === void 0 ? void 0 : _b.onSelect(event, selectedIndex);
|
|
24426
|
-
}
|
|
24427
|
-
this.onSelect(event, selectedIndex);
|
|
24428
24557
|
}
|
|
24429
24558
|
};
|
|
24430
24559
|
this.onClickSelect = (event, index) => {
|
|
24431
|
-
|
|
24432
|
-
const tab = this.state._tabs[index];
|
|
24433
|
-
if ((_a = tab._on) === null || _a === void 0 ? void 0 : _a.onSelect) {
|
|
24434
|
-
(_b = tab._on) === null || _b === void 0 ? void 0 : _b.onSelect(event, index);
|
|
24435
|
-
}
|
|
24436
|
-
this.onSelect(event, index);
|
|
24560
|
+
this.selectNextTabEvent(event, index);
|
|
24437
24561
|
};
|
|
24438
24562
|
this.onMouseDown = (event) => {
|
|
24439
24563
|
event.preventDefault();
|
|
@@ -24522,7 +24646,11 @@ class KolTabs {
|
|
|
24522
24646
|
(_b = this.state._on) === null || _b === void 0 ? void 0 : _b.onCreate(event);
|
|
24523
24647
|
}
|
|
24524
24648
|
};
|
|
24649
|
+
this.onBlur = () => {
|
|
24650
|
+
this.currentFocusIndex = undefined;
|
|
24651
|
+
};
|
|
24525
24652
|
this._align = 'top';
|
|
24653
|
+
this._behavior = undefined;
|
|
24526
24654
|
this._label = undefined;
|
|
24527
24655
|
this._on = undefined;
|
|
24528
24656
|
this._selected = 0;
|
|
@@ -24534,21 +24662,60 @@ class KolTabs {
|
|
|
24534
24662
|
_tabs: [],
|
|
24535
24663
|
};
|
|
24536
24664
|
}
|
|
24665
|
+
getCurrentFocusIndex() {
|
|
24666
|
+
if (typeof this.currentFocusIndex === 'number') {
|
|
24667
|
+
return this.currentFocusIndex;
|
|
24668
|
+
}
|
|
24669
|
+
return this.state._selected;
|
|
24670
|
+
}
|
|
24671
|
+
getKeyboardTabChangeMode() {
|
|
24672
|
+
if (this._behavior === 'select-manual') {
|
|
24673
|
+
return 'selectFocusOnly';
|
|
24674
|
+
}
|
|
24675
|
+
return 'activateCompletely';
|
|
24676
|
+
}
|
|
24677
|
+
goToNextTab(event) {
|
|
24678
|
+
const nextFocusIndex = this.nextPossibleTabIndex(this.state._tabs, this.getCurrentFocusIndex());
|
|
24679
|
+
this.selectNextTabEvent(event, nextFocusIndex, this.getKeyboardTabChangeMode());
|
|
24680
|
+
}
|
|
24681
|
+
goToPreviousTab(event) {
|
|
24682
|
+
const nextFocusIndex = this.prevPossibleTabIndex(this.state._tabs, this.getCurrentFocusIndex());
|
|
24683
|
+
this.selectNextTabEvent(event, nextFocusIndex, this.getKeyboardTabChangeMode());
|
|
24684
|
+
}
|
|
24685
|
+
activateFocusedTab(event) {
|
|
24686
|
+
if (typeof this.currentFocusIndex === 'number') {
|
|
24687
|
+
this.onSelect(event, this.currentFocusIndex);
|
|
24688
|
+
}
|
|
24689
|
+
}
|
|
24690
|
+
selectNextTabEvent(event, nextTabIndex, changeMode = 'activateCompletely') {
|
|
24691
|
+
var _a, _b;
|
|
24692
|
+
this.currentFocusIndex = nextTabIndex;
|
|
24693
|
+
this.focusTabById(nextTabIndex);
|
|
24694
|
+
if (changeMode === 'activateCompletely') {
|
|
24695
|
+
this._selected = nextTabIndex;
|
|
24696
|
+
const tab = this.state._tabs[nextTabIndex];
|
|
24697
|
+
(_b = (_a = tab._on) === null || _a === void 0 ? void 0 : _a.onSelect) === null || _b === void 0 ? void 0 : _b.call(_a, event, nextTabIndex);
|
|
24698
|
+
this.onSelect(event, nextTabIndex);
|
|
24699
|
+
}
|
|
24700
|
+
}
|
|
24537
24701
|
renderButtonGroup() {
|
|
24538
|
-
return (hAsync(
|
|
24702
|
+
return (hAsync("div", { "aria-label": this.state._label, class: "tabs-button-group", role: "tablist", onKeyDown: this.onKeyDown, onBlur: this.onBlur }, this.state._tabs.map((button, index) => (hAsync(KolButtonWcTag, { _disabled: button._disabled, _icons: button._icons, _hideLabel: button._hideLabel, _label: button._label, _on: this.callbacks, _tabIndex: this.state._selected === index ? 0 : -1, _tooltipAlign: button._tooltipAlign, _variant: this.state._selected === index ? 'custom' : undefined, _customClass: this.state._selected === index ? 'selected' : undefined, _ariaControls: `tabpanel-${index}`, _ariaSelected: this.state._selected === index, _id: `${this.state._label.replace(/\s/g, '-')}-tab-${index}`, _role: "tab", _value: index }))), this.showCreateTab && (hAsync(KolButtonWcTag, { class: "create-button", _label: this.onCreateLabel, _on: {
|
|
24539
24703
|
onClick: this.onCreate,
|
|
24540
24704
|
} }))));
|
|
24541
24705
|
}
|
|
24542
24706
|
render() {
|
|
24543
|
-
return (hAsync(Host, { key: '
|
|
24707
|
+
return (hAsync(Host, { key: '844222f1b08a41030d480370c70fac855bfc4beb', class: "kol-tabs" }, hAsync("div", { key: 'a378c67063b048f57196db2c1a20aea79bb89764', ref: (el) => {
|
|
24544
24708
|
this.tabPanelsElement = el;
|
|
24545
24709
|
}, class: {
|
|
24546
24710
|
[`tabs-align-${this.state._align}`]: true,
|
|
24547
|
-
} }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
24711
|
+
} }, this.renderButtonGroup(), hAsync("div", { key: '895c94054438a2bb107f4ebd4c9716b71a12b333', class: "tabs-content", ref: this.catchTabPanelHost }))));
|
|
24548
24712
|
}
|
|
24549
24713
|
validateAlign(value) {
|
|
24550
24714
|
validateAlign(this, value);
|
|
24551
24715
|
}
|
|
24716
|
+
validateBehavior(value) {
|
|
24717
|
+
validateTabBehavior(this, value);
|
|
24718
|
+
}
|
|
24552
24719
|
validateLabel(value) {
|
|
24553
24720
|
validateLabel(this, value, {
|
|
24554
24721
|
required: true,
|
|
@@ -24615,6 +24782,7 @@ class KolTabs {
|
|
|
24615
24782
|
this.validateOn(this._on);
|
|
24616
24783
|
this.validateSelected(this._selected);
|
|
24617
24784
|
this.validateTabs(this._tabs);
|
|
24785
|
+
this.validateBehavior(this._behavior);
|
|
24618
24786
|
}
|
|
24619
24787
|
componentDidRender() {
|
|
24620
24788
|
this.handleTabPanels();
|
|
@@ -24629,20 +24797,21 @@ class KolTabs {
|
|
|
24629
24797
|
}
|
|
24630
24798
|
}
|
|
24631
24799
|
}
|
|
24632
|
-
|
|
24633
|
-
var _a, _b;
|
|
24634
|
-
this._selected = index;
|
|
24635
|
-
if (typeof ((_a = this._on) === null || _a === void 0 ? void 0 : _a.onSelect) === 'function') {
|
|
24636
|
-
(_b = this._on) === null || _b === void 0 ? void 0 : _b.onSelect(event, index);
|
|
24637
|
-
}
|
|
24800
|
+
focusTabById(index) {
|
|
24638
24801
|
if (this.tabPanelsElement) {
|
|
24639
24802
|
const button = koliBriQuerySelector(`button#${this.state._label.replace(/\s/g, '-')}-tab-${index}`, this.tabPanelsElement);
|
|
24640
24803
|
button === null || button === void 0 ? void 0 : button.focus();
|
|
24641
24804
|
}
|
|
24642
24805
|
}
|
|
24806
|
+
onSelect(event, index) {
|
|
24807
|
+
var _a, _b;
|
|
24808
|
+
(_b = (_a = this._on) === null || _a === void 0 ? void 0 : _a.onSelect) === null || _b === void 0 ? void 0 : _b.call(_a, event, index);
|
|
24809
|
+
this.focusTabById(index);
|
|
24810
|
+
}
|
|
24643
24811
|
get host() { return getElement(this); }
|
|
24644
24812
|
static get watchers() { return {
|
|
24645
24813
|
"_align": ["validateAlign"],
|
|
24814
|
+
"_behavior": ["validateBehavior"],
|
|
24646
24815
|
"_label": ["validateLabel"],
|
|
24647
24816
|
"_on": ["validateOn"],
|
|
24648
24817
|
"_selected": ["validateSelected"],
|
|
@@ -24656,6 +24825,7 @@ class KolTabs {
|
|
|
24656
24825
|
"$tagName$": "kol-tabs",
|
|
24657
24826
|
"$members$": {
|
|
24658
24827
|
"_align": [1],
|
|
24828
|
+
"_behavior": [1],
|
|
24659
24829
|
"_label": [1],
|
|
24660
24830
|
"_on": [16],
|
|
24661
24831
|
"_selected": [1538],
|
|
@@ -24679,7 +24849,7 @@ class TextareaController extends InputIconController {
|
|
|
24679
24849
|
this.component = component;
|
|
24680
24850
|
}
|
|
24681
24851
|
validateHasCounter(value) {
|
|
24682
|
-
|
|
24852
|
+
validateHasCounter(this.component, value, {
|
|
24683
24853
|
hooks: {
|
|
24684
24854
|
afterPatch: this.afterSyncCharCounter,
|
|
24685
24855
|
},
|
|
@@ -24729,7 +24899,7 @@ class TextareaController extends InputIconController {
|
|
|
24729
24899
|
}
|
|
24730
24900
|
}
|
|
24731
24901
|
|
|
24732
|
-
const defaultStyleCss$5 = "@layer kol-global {\n
|
|
24902
|
+
const defaultStyleCss$5 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
24733
24903
|
var KolTextareaDefaultStyle0 = defaultStyleCss$5;
|
|
24734
24904
|
|
|
24735
24905
|
const increaseTextareaHeight = (el) => {
|
|
@@ -24986,7 +25156,7 @@ const InternalToast = ({ key, onClose, onRef, toastState }) => {
|
|
|
24986
25156
|
hAsync("div", { ref: onRef }, typeof toastState.toast.description === 'string' ? toastState.toast.description : null))));
|
|
24987
25157
|
};
|
|
24988
25158
|
|
|
24989
|
-
const defaultStyleCss$4 = "@layer kol-component {\n
|
|
25159
|
+
const defaultStyleCss$4 = "@layer kol-component {\n :host {\n display: flex;\n flex-direction: column;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n position: fixed;\n z-index: 200;\n }\n .close-all {\n align-self: flex-end;\n }\n}";
|
|
24990
25160
|
var KolToastContainerDefaultStyle0 = defaultStyleCss$4;
|
|
24991
25161
|
|
|
24992
25162
|
const TRANSITION_TIMEOUT = 300;
|
|
@@ -25066,7 +25236,7 @@ class KolToastContainer {
|
|
|
25066
25236
|
}; }
|
|
25067
25237
|
}
|
|
25068
25238
|
|
|
25069
|
-
const defaultStyleCss$3 = "@layer kol-global {\n
|
|
25239
|
+
const defaultStyleCss$3 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toolbar {\n display: flex;\n align-items: center;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n }\n .toolbar:focus-within {\n outline: 1px solid;\n outline-offset: 2px;\n }\n}";
|
|
25070
25240
|
var KolToolbarDefaultStyle0 = defaultStyleCss$3;
|
|
25071
25241
|
|
|
25072
25242
|
const TOOLBAR_ITEM_TAG_NAME = 'kol-toolbar-item';
|
|
@@ -25366,7 +25536,7 @@ class KolTooltipWc {
|
|
|
25366
25536
|
}; }
|
|
25367
25537
|
}
|
|
25368
25538
|
|
|
25369
|
-
const defaultStyleCss$2 = "@layer kol-global {\n
|
|
25539
|
+
const defaultStyleCss$2 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .tree ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n .tree:focus-within {\n outline: 1px solid;\n outline-offset: 2px;\n }\n}";
|
|
25370
25540
|
var KolTreeDefaultStyle0 = defaultStyleCss$2;
|
|
25371
25541
|
|
|
25372
25542
|
class KolTree {
|
|
@@ -25392,7 +25562,7 @@ class KolTree {
|
|
|
25392
25562
|
}; }
|
|
25393
25563
|
}
|
|
25394
25564
|
|
|
25395
|
-
const defaultStyleCss$1 = "@layer kol-component {\n
|
|
25565
|
+
const defaultStyleCss$1 = "@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n .tree-link.first-level > a {\n padding-left: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .tree-link > a {\n padding-right: calc(6rem / var(--kolibri-root-font-size, 16));\n padding-left: calc((22.4rem / var(--kolibri-root-font-size, 16)) * var(--level));\n padding-top: calc(6.4rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(6.4rem / var(--kolibri-root-font-size, 16));\n }\n a .kol-span-wc {\n display: block;\n }\n}";
|
|
25396
25566
|
var KolTreeItemDefaultStyle0 = defaultStyleCss$1;
|
|
25397
25567
|
|
|
25398
25568
|
class KolTreeItem {
|
|
@@ -25760,7 +25930,7 @@ class KolTreeWc {
|
|
|
25760
25930
|
}; }
|
|
25761
25931
|
}
|
|
25762
25932
|
|
|
25763
|
-
const defaultStyleCss = "@layer kol-global {\n
|
|
25933
|
+
const defaultStyleCss = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: 44px;\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of 44px.\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
25764
25934
|
var KolVersionDefaultStyle0 = defaultStyleCss;
|
|
25765
25935
|
|
|
25766
25936
|
class KolVersion {
|
|
@@ -25885,7 +26055,7 @@ exports.hydrateApp = hydrateApp;
|
|
|
25885
26055
|
}
|
|
25886
26056
|
|
|
25887
26057
|
/*
|
|
25888
|
-
Stencil Hydrate Runner v4.
|
|
26058
|
+
Stencil Hydrate Runner v4.20.0 | MIT Licensed | https://stenciljs.com
|
|
25889
26059
|
*/
|
|
25890
26060
|
var __defProp = Object.defineProperty;
|
|
25891
26061
|
var __export = (target, all) => {
|
|
@@ -36300,7 +36470,7 @@ function normalizeSerializationOptions(opts = {}) {
|
|
|
36300
36470
|
removeAttributeQuotes: typeof opts.removeAttributeQuotes !== "boolean" ? false : opts.removeAttributeQuotes,
|
|
36301
36471
|
removeBooleanAttributeQuotes: typeof opts.removeBooleanAttributeQuotes !== "boolean" ? false : opts.removeBooleanAttributeQuotes,
|
|
36302
36472
|
removeHtmlComments: typeof opts.removeHtmlComments !== "boolean" ? false : opts.removeHtmlComments,
|
|
36303
|
-
serializeShadowRoot: typeof opts.serializeShadowRoot !== "boolean" ?
|
|
36473
|
+
serializeShadowRoot: typeof opts.serializeShadowRoot !== "boolean" ? true : opts.serializeShadowRoot,
|
|
36304
36474
|
fullDocument: typeof opts.fullDocument !== "boolean" ? true : opts.fullDocument
|
|
36305
36475
|
};
|
|
36306
36476
|
}
|
|
@@ -36426,7 +36596,7 @@ style="${cssText}">`;
|
|
|
36426
36596
|
}
|
|
36427
36597
|
if (EMPTY_ELEMENTS.has(tagName) === false) {
|
|
36428
36598
|
const shadowRoot = node.shadowRoot;
|
|
36429
|
-
if (
|
|
36599
|
+
if (shadowRoot != null && opts.serializeShadowRoot) {
|
|
36430
36600
|
output.indent = output.indent + ((_c = opts.indentSpaces) != null ? _c : 0);
|
|
36431
36601
|
yield* streamToHtml(shadowRoot, opts, output);
|
|
36432
36602
|
output.indent = output.indent - ((_d = opts.indentSpaces) != null ? _d : 0);
|
|
@@ -40766,7 +40936,7 @@ var removeUnusedStyleText = (usedSelectors, diagnostics, styleElm) => {
|
|
|
40766
40936
|
|
|
40767
40937
|
// src/hydrate/runner/inspect-element.ts
|
|
40768
40938
|
function inspectElement(results, elm, depth) {
|
|
40769
|
-
const children = elm.children;
|
|
40939
|
+
const children = [...Array.from(elm.children), ...Array.from(elm.shadowRoot ? elm.shadowRoot.children : [])];
|
|
40770
40940
|
for (let i = 0, ii = children.length; i < ii; i++) {
|
|
40771
40941
|
const childElm = children[i];
|
|
40772
40942
|
const tagName = childElm.nodeName.toLowerCase();
|
|
@@ -41161,7 +41331,7 @@ function renderToString(html, options, asStream) {
|
|
|
41161
41331
|
const opts = normalizeHydrateOptions(options);
|
|
41162
41332
|
opts.serializeToHtml = true;
|
|
41163
41333
|
opts.fullDocument = typeof opts.fullDocument === "boolean" ? opts.fullDocument : true;
|
|
41164
|
-
opts.serializeShadowRoot =
|
|
41334
|
+
opts.serializeShadowRoot = typeof opts.serializeShadowRoot === "boolean" ? opts.serializeShadowRoot : true;
|
|
41165
41335
|
opts.constrainTimeouts = false;
|
|
41166
41336
|
return hydrateDocument(html, opts, asStream);
|
|
41167
41337
|
}
|
|
@@ -41218,7 +41388,7 @@ async function render(win, opts, results) {
|
|
|
41218
41388
|
});
|
|
41219
41389
|
}
|
|
41220
41390
|
initializeWindow(win, win.document, opts, results);
|
|
41221
|
-
const beforeHydrateFn = typeof opts.beforeHydrate === "function" ? opts.beforeHydrate
|
|
41391
|
+
const beforeHydrateFn = typeof opts.beforeHydrate === "function" ? opts.beforeHydrate : NOOP;
|
|
41222
41392
|
try {
|
|
41223
41393
|
await Promise.resolve(beforeHydrateFn(win.document));
|
|
41224
41394
|
return new Promise((resolve) => hydrateFactory(win, opts, results, afterHydrate, resolve));
|
|
@@ -41235,7 +41405,7 @@ function renderStream(win, opts, results) {
|
|
|
41235
41405
|
return stream.Readable.from(processRender());
|
|
41236
41406
|
}
|
|
41237
41407
|
async function afterHydrate(win, opts, results, resolve) {
|
|
41238
|
-
const afterHydrateFn = typeof opts.afterHydrate === "function" ? opts.afterHydrate
|
|
41408
|
+
const afterHydrateFn = typeof opts.afterHydrate === "function" ? opts.afterHydrate : NOOP;
|
|
41239
41409
|
try {
|
|
41240
41410
|
await Promise.resolve(afterHydrateFn(win.document));
|
|
41241
41411
|
return resolve(finalizeHydrate(win, win.document, opts, results));
|