@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.mjs
CHANGED
|
@@ -126,7 +126,7 @@ const NAMESPACE = 'kolibri';
|
|
|
126
126
|
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 };
|
|
127
127
|
|
|
128
128
|
/*
|
|
129
|
-
Stencil Hydrate Platform v4.
|
|
129
|
+
Stencil Hydrate Platform v4.20.0 | MIT Licensed | https://stenciljs.com
|
|
130
130
|
*/
|
|
131
131
|
var __defProp = Object.defineProperty;
|
|
132
132
|
var __export = (target, all) => {
|
|
@@ -412,17 +412,6 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
|
|
|
412
412
|
}
|
|
413
413
|
}
|
|
414
414
|
}
|
|
415
|
-
for (i2 = node.childNodes.length - 1; i2 >= 0; i2--) {
|
|
416
|
-
clientHydrate(
|
|
417
|
-
parentVNode,
|
|
418
|
-
childRenderNodes,
|
|
419
|
-
slotNodes,
|
|
420
|
-
shadowRootNodes,
|
|
421
|
-
hostElm,
|
|
422
|
-
node.childNodes[i2],
|
|
423
|
-
hostId
|
|
424
|
-
);
|
|
425
|
-
}
|
|
426
415
|
if (node.shadowRoot) {
|
|
427
416
|
for (i2 = node.shadowRoot.childNodes.length - 1; i2 >= 0; i2--) {
|
|
428
417
|
clientHydrate(
|
|
@@ -436,6 +425,17 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
|
|
|
436
425
|
);
|
|
437
426
|
}
|
|
438
427
|
}
|
|
428
|
+
for (i2 = node.childNodes.length - 1; i2 >= 0; i2--) {
|
|
429
|
+
clientHydrate(
|
|
430
|
+
parentVNode,
|
|
431
|
+
childRenderNodes,
|
|
432
|
+
slotNodes,
|
|
433
|
+
shadowRootNodes,
|
|
434
|
+
hostElm,
|
|
435
|
+
node.childNodes[i2],
|
|
436
|
+
hostId
|
|
437
|
+
);
|
|
438
|
+
}
|
|
439
439
|
} else if (node.nodeType === 8 /* CommentNode */) {
|
|
440
440
|
childIdSplt = node.nodeValue.split(".");
|
|
441
441
|
if (childIdSplt[1] === hostId || childIdSplt[1] === "0") {
|
|
@@ -513,14 +513,14 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
|
|
|
513
513
|
var initializeDocumentHydrate = (node, orgLocNodes) => {
|
|
514
514
|
if (node.nodeType === 1 /* ElementNode */) {
|
|
515
515
|
let i2 = 0;
|
|
516
|
-
for (; i2 < node.childNodes.length; i2++) {
|
|
517
|
-
initializeDocumentHydrate(node.childNodes[i2], orgLocNodes);
|
|
518
|
-
}
|
|
519
516
|
if (node.shadowRoot) {
|
|
520
|
-
for (
|
|
517
|
+
for (; i2 < node.shadowRoot.childNodes.length; i2++) {
|
|
521
518
|
initializeDocumentHydrate(node.shadowRoot.childNodes[i2], orgLocNodes);
|
|
522
519
|
}
|
|
523
520
|
}
|
|
521
|
+
for (i2 = 0; i2 < node.childNodes.length; i2++) {
|
|
522
|
+
initializeDocumentHydrate(node.childNodes[i2], orgLocNodes);
|
|
523
|
+
}
|
|
524
524
|
} else if (node.nodeType === 8 /* CommentNode */) {
|
|
525
525
|
const childIdSplt = node.nodeValue.split(".");
|
|
526
526
|
if (childIdSplt[0] === ORG_LOCATION_ID) {
|
|
@@ -585,10 +585,21 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
|
|
|
585
585
|
if (nonce != null) {
|
|
586
586
|
styleElm.setAttribute("nonce", nonce);
|
|
587
587
|
}
|
|
588
|
-
{
|
|
588
|
+
if (cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
|
|
589
589
|
styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId2);
|
|
590
590
|
}
|
|
591
|
-
|
|
591
|
+
const injectStyle = (
|
|
592
|
+
/**
|
|
593
|
+
* we render a scoped component
|
|
594
|
+
*/
|
|
595
|
+
!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) || /**
|
|
596
|
+
* we are using shadow dom and render the style tag within the shadowRoot
|
|
597
|
+
*/
|
|
598
|
+
cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */ && styleContainerNode.nodeName !== "HEAD"
|
|
599
|
+
);
|
|
600
|
+
if (injectStyle) {
|
|
601
|
+
styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector("link"));
|
|
602
|
+
}
|
|
592
603
|
}
|
|
593
604
|
if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
|
|
594
605
|
styleElm.innerHTML += SLOT_FB_CSS;
|
|
@@ -611,7 +622,7 @@ var attachStyles = (hostRef) => {
|
|
|
611
622
|
cmpMeta,
|
|
612
623
|
hostRef.$modeName$
|
|
613
624
|
);
|
|
614
|
-
if (flags & 10 /* needsScopedEncapsulation */) {
|
|
625
|
+
if (flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */) {
|
|
615
626
|
elm["s-sc"] = scopeId2;
|
|
616
627
|
elm.classList.add(scopeId2 + "-h");
|
|
617
628
|
}
|
|
@@ -792,7 +803,9 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
|
|
|
792
803
|
{
|
|
793
804
|
updateElement(null, newVNode2, isSvgMode);
|
|
794
805
|
}
|
|
795
|
-
|
|
806
|
+
const rootNode = elm.getRootNode();
|
|
807
|
+
const isElementWithinShadowRoot = !rootNode.querySelector("body");
|
|
808
|
+
if (!isElementWithinShadowRoot && BUILD.scoped && isDef(scopeId) && elm["s-si"] !== scopeId) {
|
|
796
809
|
elm.classList.add(elm["s-si"] = scopeId);
|
|
797
810
|
}
|
|
798
811
|
if (newVNode2.$children$) {
|
|
@@ -983,6 +996,15 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
|
|
|
983
996
|
var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
|
|
984
997
|
if (leftVNode.$tag$ === rightVNode.$tag$) {
|
|
985
998
|
if (leftVNode.$tag$ === "slot") {
|
|
999
|
+
if (
|
|
1000
|
+
// The component gets hydrated and no VDOM has been initialized.
|
|
1001
|
+
// Here the comparison can't happen as $name$ property is not set for `leftNode`.
|
|
1002
|
+
"$nodeId$" in leftVNode && isInitialRender && // `leftNode` is not from type HTMLComment which would cause many
|
|
1003
|
+
// hydration comments to be removed
|
|
1004
|
+
leftVNode.$elm$.nodeType !== 8
|
|
1005
|
+
) {
|
|
1006
|
+
return false;
|
|
1007
|
+
}
|
|
986
1008
|
return leftVNode.$name$ === rightVNode.$name$;
|
|
987
1009
|
}
|
|
988
1010
|
if (!isInitialRender) {
|
|
@@ -1019,7 +1041,10 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
|
|
|
1019
1041
|
elm.textContent = "";
|
|
1020
1042
|
}
|
|
1021
1043
|
addVnodes(elm, null, newVNode2, newChildren, 0, newChildren.length - 1);
|
|
1022
|
-
} else if (
|
|
1044
|
+
} else if (
|
|
1045
|
+
// don't do this on initial render as it can cause non-hydrated content to be removed
|
|
1046
|
+
!isInitialRender && BUILD.updatable && oldChildren !== null
|
|
1047
|
+
) {
|
|
1023
1048
|
removeVnodes(oldChildren, 0, oldChildren.length - 1);
|
|
1024
1049
|
}
|
|
1025
1050
|
if (isSvgMode && tag === "svg") {
|
|
@@ -1508,7 +1533,8 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
1508
1533
|
if (this.hasOwnProperty(propName)) {
|
|
1509
1534
|
newValue = this[propName];
|
|
1510
1535
|
delete this[propName];
|
|
1511
|
-
} else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" &&
|
|
1536
|
+
} else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && // cast type to number to avoid TS compiler issues
|
|
1537
|
+
this[propName] == newValue) {
|
|
1512
1538
|
return;
|
|
1513
1539
|
} else if (propName == null) {
|
|
1514
1540
|
const hostRef = getHostRef(this);
|
|
@@ -1869,7 +1895,7 @@ var hAsync = (nodeName, vnodeData, ...children) => {
|
|
|
1869
1895
|
}
|
|
1870
1896
|
return h$1(nodeName, vnodeData);
|
|
1871
1897
|
};
|
|
1872
|
-
function proxyHostElement(elm, cmpMeta
|
|
1898
|
+
function proxyHostElement(elm, cmpMeta) {
|
|
1873
1899
|
if (typeof elm.componentOnReady !== "function") {
|
|
1874
1900
|
elm.componentOnReady = componentOnReady;
|
|
1875
1901
|
}
|
|
@@ -1877,10 +1903,8 @@ function proxyHostElement(elm, cmpMeta, opts) {
|
|
|
1877
1903
|
elm.forceUpdate = forceUpdate2;
|
|
1878
1904
|
}
|
|
1879
1905
|
if (!elm.shadowRoot && !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
|
|
1880
|
-
|
|
1906
|
+
{
|
|
1881
1907
|
elm.attachShadow({ mode: "open" });
|
|
1882
|
-
} else {
|
|
1883
|
-
elm.shadowRoot = elm;
|
|
1884
1908
|
}
|
|
1885
1909
|
}
|
|
1886
1910
|
if (cmpMeta.$members$ != null) {
|
|
@@ -1991,7 +2015,7 @@ function hydrateApp(win2, opts, results, afterHydrate, resolve) {
|
|
|
1991
2015
|
createdElements.add(elm);
|
|
1992
2016
|
elm.connectedCallback = patchedConnectedCallback2;
|
|
1993
2017
|
registerHost(elm, Cstr.cmpMeta);
|
|
1994
|
-
proxyHostElement(elm, Cstr.cmpMeta
|
|
2018
|
+
proxyHostElement(elm, Cstr.cmpMeta);
|
|
1995
2019
|
}
|
|
1996
2020
|
}
|
|
1997
2021
|
}
|
|
@@ -3819,8 +3843,9 @@ const validateAlign = (component, value) => {
|
|
|
3819
3843
|
validateAlignment(component, '_align', value);
|
|
3820
3844
|
};
|
|
3821
3845
|
|
|
3846
|
+
const alternativeButtonLinkRolePropTypeOptions = ['button', 'link', 'tab', 'treeitem'];
|
|
3822
3847
|
const validateAlternativeButtonLinkRole = (component, value) => {
|
|
3823
|
-
|
|
3848
|
+
watchValidator(component, `_role`, (value) => typeof value === 'string' && alternativeButtonLinkRolePropTypeOptions.includes(value), new Set([`KoliBriAlternativeButtonLinkRole {${alternativeButtonLinkRolePropTypeOptions.join(', ')}`]), value);
|
|
3824
3849
|
};
|
|
3825
3850
|
|
|
3826
3851
|
const validateAriaControls = (component, value) => {
|
|
@@ -4008,8 +4033,8 @@ const validateHasCompactButton = (component, value) => {
|
|
|
4008
4033
|
watchBoolean(component, '_hasCompactButton', value);
|
|
4009
4034
|
};
|
|
4010
4035
|
|
|
4011
|
-
const validateHasCounter = (component, value) => {
|
|
4012
|
-
watchBoolean(component, '_hasCounter', value);
|
|
4036
|
+
const validateHasCounter = (component, value, options) => {
|
|
4037
|
+
watchBoolean(component, '_hasCounter', value, options);
|
|
4013
4038
|
};
|
|
4014
4039
|
|
|
4015
4040
|
const validateHasIconsWhenExpanded = (component, value) => {
|
|
@@ -4157,6 +4182,11 @@ const validateLabel = (component, value, options = {}) => {
|
|
|
4157
4182
|
};
|
|
4158
4183
|
const validateLabelWithExpertSlot = validateLabel;
|
|
4159
4184
|
|
|
4185
|
+
const labelAlignPropTypeOptions = ['left', 'right'];
|
|
4186
|
+
const validateLabelAlign = (component, value) => {
|
|
4187
|
+
watchValidator(component, `_labelAlign`, (value) => typeof value === 'string' && labelAlignPropTypeOptions.includes(value), new Set([`KoliBriLabelAlign {${labelAlignPropTypeOptions.join(', ')}`]), value);
|
|
4188
|
+
};
|
|
4189
|
+
|
|
4160
4190
|
const validateLinkCallbacks = (component, value) => {
|
|
4161
4191
|
if (typeof value === 'object' && typeof (value === null || value === void 0 ? void 0 : value.onClick) === 'function') {
|
|
4162
4192
|
component.state = Object.assign(Object.assign({}, component.state), { _on: value });
|
|
@@ -4242,6 +4272,11 @@ const validateSuggestions = (component, value) => {
|
|
|
4242
4272
|
});
|
|
4243
4273
|
};
|
|
4244
4274
|
|
|
4275
|
+
const tabBehaviorPropTypeOptions = ['select-automatic', 'select-manual'];
|
|
4276
|
+
const validateTabBehavior = (component, value) => {
|
|
4277
|
+
watchValidator(component, `_behavior`, (value) => typeof value === 'string' && tabBehaviorPropTypeOptions.includes(value), new Set([`KoliBriTabBehavior {${tabBehaviorPropTypeOptions.join(', ')}`]), value);
|
|
4278
|
+
};
|
|
4279
|
+
|
|
4245
4280
|
const validateTableCallbacks = (component, value) => {
|
|
4246
4281
|
watchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['TableCallbacksPropType {Events.onSort, Events.onSelectionChange}']), value);
|
|
4247
4282
|
};
|
|
@@ -4393,7 +4428,7 @@ let KolTreeItemWcTag = 'kol-tree-item-wc';
|
|
|
4393
4428
|
let KolTreeTag = 'kol-tree';
|
|
4394
4429
|
let KolTreeWcTag = 'kol-tree-wc';
|
|
4395
4430
|
|
|
4396
|
-
const defaultStyleCss$P = "@layer kol-global {\n
|
|
4431
|
+
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}";
|
|
4397
4432
|
var KolAbbrDefaultStyle0 = defaultStyleCss$P;
|
|
4398
4433
|
|
|
4399
4434
|
class KolAbbr {
|
|
@@ -4452,7 +4487,7 @@ const watchHeadingLevel = (component, value) => {
|
|
|
4452
4487
|
});
|
|
4453
4488
|
};
|
|
4454
4489
|
|
|
4455
|
-
const defaultStyleCss$O = "@layer kol-global {\n
|
|
4490
|
+
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}";
|
|
4456
4491
|
var KolAccordionDefaultStyle0 = defaultStyleCss$O;
|
|
4457
4492
|
|
|
4458
4493
|
featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
|
|
@@ -4556,7 +4591,7 @@ class KolAccordion {
|
|
|
4556
4591
|
}; }
|
|
4557
4592
|
}
|
|
4558
4593
|
|
|
4559
|
-
const defaultStyleCss$N = "@layer kol-global {\n
|
|
4594
|
+
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}";
|
|
4560
4595
|
var KolAlertDefaultStyle0 = defaultStyleCss$N;
|
|
4561
4596
|
|
|
4562
4597
|
class KolAlert {
|
|
@@ -4643,7 +4678,7 @@ var locale_de = {
|
|
|
4643
4678
|
dropdown: 'Auswahlliste',
|
|
4644
4679
|
'nav-label-open': 'Untermenü zu {{label}} öffnen',
|
|
4645
4680
|
'nav-label-close': 'Untermenü zu {{label}} schließen',
|
|
4646
|
-
'close-alert': 'Benachrichtigung
|
|
4681
|
+
'close-alert': 'Benachrichtigung schließen',
|
|
4647
4682
|
'show-password': 'einblenden',
|
|
4648
4683
|
'hide-password': 'ausblenden',
|
|
4649
4684
|
'no-results-message': 'Keine Ergebnisse gefunden.',
|
|
@@ -4695,7 +4730,7 @@ var locale_en = {
|
|
|
4695
4730
|
dropdown: 'Dropdown',
|
|
4696
4731
|
'nav-label-open': 'Submenu for {{label}} open',
|
|
4697
4732
|
'nav-label-close': 'Submenu for {{label}} close',
|
|
4698
|
-
'close-alert': 'Close notification
|
|
4733
|
+
'close-alert': 'Close notification',
|
|
4699
4734
|
'show-password': 'Show',
|
|
4700
4735
|
'hide-password': 'Hide',
|
|
4701
4736
|
'no-results-message': 'No results found.',
|
|
@@ -4836,11 +4871,11 @@ class KolAlertWc {
|
|
|
4836
4871
|
[this.state._type]: true,
|
|
4837
4872
|
[this.state._variant]: true,
|
|
4838
4873
|
hasCloser: !!this.state._hasCloser,
|
|
4839
|
-
}, 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: '
|
|
4874
|
+
}, 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: {
|
|
4840
4875
|
left: {
|
|
4841
4876
|
icon: 'codicon codicon-close',
|
|
4842
4877
|
},
|
|
4843
|
-
}, _label: translate('kol-close-alert'
|
|
4878
|
+
}, _label: translate('kol-close-alert'), _on: this.on, _tooltipAlign: "left" }))), this.state._variant === 'card' && (hAsync("div", { key: '2a9670974b00907497abd255e02194301df0c0a2', class: "content" }, hAsync("slot", { key: '9bd3de7e485b9865d5f74dfbce4f421d4b1dc9b5' })))));
|
|
4844
4879
|
}
|
|
4845
4880
|
validateAlert(value) {
|
|
4846
4881
|
watchBoolean(this, '_alert', value);
|
|
@@ -4904,7 +4939,7 @@ class KolAlertWc {
|
|
|
4904
4939
|
}; }
|
|
4905
4940
|
}
|
|
4906
4941
|
|
|
4907
|
-
const defaultStyleCss$M = "@layer kol-global {\n
|
|
4942
|
+
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}";
|
|
4908
4943
|
var KolAvatarDefaultStyle0 = defaultStyleCss$M;
|
|
4909
4944
|
|
|
4910
4945
|
class KolAvatar {
|
|
@@ -4991,7 +5026,7 @@ class KolAvatarWc {
|
|
|
4991
5026
|
}; }
|
|
4992
5027
|
}
|
|
4993
5028
|
|
|
4994
|
-
const defaultStyleCss$L = "@layer kol-global {\n
|
|
5029
|
+
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}";
|
|
4995
5030
|
var KolBadgeDefaultStyle0 = defaultStyleCss$L;
|
|
4996
5031
|
|
|
4997
5032
|
featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
|
|
@@ -5092,7 +5127,7 @@ const watchNavLinks = (className, component, value) => {
|
|
|
5092
5127
|
uiUxHintMillerscheZahl(className, component.state._links.length);
|
|
5093
5128
|
};
|
|
5094
5129
|
|
|
5095
|
-
const defaultStyleCss$K = "@layer kol-global {\n
|
|
5130
|
+
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}";
|
|
5096
5131
|
var KolBreadcrumbDefaultStyle0 = defaultStyleCss$K;
|
|
5097
5132
|
|
|
5098
5133
|
class KolBreadcrumb {
|
|
@@ -5153,7 +5188,7 @@ class KolBreadcrumb {
|
|
|
5153
5188
|
}; }
|
|
5154
5189
|
}
|
|
5155
5190
|
|
|
5156
|
-
const defaultStyleCss$J = "@charset \"UTF-8\";\n
|
|
5191
|
+
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}";
|
|
5157
5192
|
var KolButtonDefaultStyle0 = defaultStyleCss$J;
|
|
5158
5193
|
|
|
5159
5194
|
class KolButton {
|
|
@@ -5237,7 +5272,7 @@ class KolButton {
|
|
|
5237
5272
|
}; }
|
|
5238
5273
|
}
|
|
5239
5274
|
|
|
5240
|
-
const defaultStyleCss$I = "@layer kol-global {\n
|
|
5275
|
+
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}";
|
|
5241
5276
|
var KolButtonGroupDefaultStyle0 = defaultStyleCss$I;
|
|
5242
5277
|
|
|
5243
5278
|
class KolButtonGroup {
|
|
@@ -5280,7 +5315,7 @@ class KolButtonGroupWc {
|
|
|
5280
5315
|
}; }
|
|
5281
5316
|
}
|
|
5282
5317
|
|
|
5283
|
-
const defaultStyleCss$H = "@layer kol-global {\n
|
|
5318
|
+
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}";
|
|
5284
5319
|
var KolButtonLinkDefaultStyle0 = defaultStyleCss$H;
|
|
5285
5320
|
|
|
5286
5321
|
class KolButtonLink {
|
|
@@ -5841,7 +5876,7 @@ class KolButtonWc {
|
|
|
5841
5876
|
}; }
|
|
5842
5877
|
}
|
|
5843
5878
|
|
|
5844
|
-
const defaultStyleCss$G = "@layer kol-global {\n
|
|
5879
|
+
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}";
|
|
5845
5880
|
var KolCardDefaultStyle0 = defaultStyleCss$G;
|
|
5846
5881
|
|
|
5847
5882
|
class KolCard {
|
|
@@ -6206,7 +6241,7 @@ const getRenderStates = (state) => {
|
|
|
6206
6241
|
|
|
6207
6242
|
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}
|
|
6208
6243
|
|
|
6209
|
-
const defaultStyleCss$F = "@layer kol-global {\n
|
|
6244
|
+
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}";
|
|
6210
6245
|
var KolComboboxDefaultStyle0 = defaultStyleCss$F;
|
|
6211
6246
|
|
|
6212
6247
|
class KolCombobox {
|
|
@@ -6664,7 +6699,7 @@ class DetailsAnimationController {
|
|
|
6664
6699
|
}
|
|
6665
6700
|
}
|
|
6666
6701
|
|
|
6667
|
-
const defaultStyleCss$E = "@layer kol-global {\n
|
|
6702
|
+
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}";
|
|
6668
6703
|
var KolDetailsDefaultStyle0 = defaultStyleCss$E;
|
|
6669
6704
|
|
|
6670
6705
|
class KolDetails {
|
|
@@ -6775,7 +6810,7 @@ class KolDetails {
|
|
|
6775
6810
|
}; }
|
|
6776
6811
|
}
|
|
6777
6812
|
|
|
6778
|
-
const defaultStyleCss$D = "@layer kol-global {\n
|
|
6813
|
+
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}";
|
|
6779
6814
|
var KolDrawerDefaultStyle0 = defaultStyleCss$D;
|
|
6780
6815
|
|
|
6781
6816
|
class KolDrawer {
|
|
@@ -6907,7 +6942,7 @@ class KolDrawer {
|
|
|
6907
6942
|
}; }
|
|
6908
6943
|
}
|
|
6909
6944
|
|
|
6910
|
-
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}";
|
|
6945
|
+
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}";
|
|
6911
6946
|
var KolFormDefaultStyle0 = defaultStyleCss$C;
|
|
6912
6947
|
|
|
6913
6948
|
class KolForm {
|
|
@@ -7006,7 +7041,7 @@ class KolForm {
|
|
|
7006
7041
|
}; }
|
|
7007
7042
|
}
|
|
7008
7043
|
|
|
7009
|
-
const defaultStyleCss$B = "@layer kol-global {\n
|
|
7044
|
+
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}";
|
|
7010
7045
|
var KolHeadingDefaultStyle0 = defaultStyleCss$B;
|
|
7011
7046
|
|
|
7012
7047
|
class KolHeading {
|
|
@@ -7120,7 +7155,7 @@ class KolHeadingWc {
|
|
|
7120
7155
|
}; }
|
|
7121
7156
|
}
|
|
7122
7157
|
|
|
7123
|
-
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}";
|
|
7158
|
+
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}";
|
|
7124
7159
|
var KolIconDefaultStyle0 = defaultStyleCss$A;
|
|
7125
7160
|
|
|
7126
7161
|
class KolIcon {
|
|
@@ -7172,7 +7207,7 @@ class KolIcon {
|
|
|
7172
7207
|
}; }
|
|
7173
7208
|
}
|
|
7174
7209
|
|
|
7175
|
-
const defaultStyleCss$z = "@layer kol-component {\n
|
|
7210
|
+
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}";
|
|
7176
7211
|
var KolImageDefaultStyle0 = defaultStyleCss$z;
|
|
7177
7212
|
|
|
7178
7213
|
class KolImage {
|
|
@@ -7245,7 +7280,7 @@ class KolImage {
|
|
|
7245
7280
|
}; }
|
|
7246
7281
|
}
|
|
7247
7282
|
|
|
7248
|
-
const defaultStyleCss$y = "@layer kol-global {\n
|
|
7283
|
+
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}";
|
|
7249
7284
|
var KolIndentedTextDefaultStyle0 = defaultStyleCss$y;
|
|
7250
7285
|
|
|
7251
7286
|
class KolIndentedText {
|
|
@@ -7393,6 +7428,9 @@ class InputCheckboxController extends InputCheckboxRadioController {
|
|
|
7393
7428
|
validateIndeterminate(value) {
|
|
7394
7429
|
validateIndeterminate(this.component, value);
|
|
7395
7430
|
}
|
|
7431
|
+
validateLabelAlign(value) {
|
|
7432
|
+
validateLabelAlign(this.component, value);
|
|
7433
|
+
}
|
|
7396
7434
|
validateValue(value) {
|
|
7397
7435
|
setState(this.component, '_value', value);
|
|
7398
7436
|
this.setFormAssociatedCheckboxValue(this.component.state._value);
|
|
@@ -7407,10 +7445,11 @@ class InputCheckboxController extends InputCheckboxRadioController {
|
|
|
7407
7445
|
this.validateIndeterminate(this.component._indeterminate);
|
|
7408
7446
|
this.validateValue(this.component._value);
|
|
7409
7447
|
this.validateVariant(this.component._variant);
|
|
7448
|
+
this.validateLabelAlign(this.component._labelAlign);
|
|
7410
7449
|
}
|
|
7411
7450
|
}
|
|
7412
7451
|
|
|
7413
|
-
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}";
|
|
7452
|
+
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}";
|
|
7414
7453
|
var KolInputCheckboxDefaultStyle0 = defaultStyleCss$x;
|
|
7415
7454
|
|
|
7416
7455
|
class KolInputCheckbox {
|
|
@@ -7430,13 +7469,13 @@ class KolInputCheckbox {
|
|
|
7430
7469
|
render() {
|
|
7431
7470
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
7432
7471
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
7433
|
-
return (hAsync(Host, { key: '
|
|
7472
|
+
return (hAsync(Host, { key: '76a2dcddb3fba02d63009302a0ba84a889c9eaf9', class: "kol-input-checkbox" }, hAsync(KolInputWcTag, { key: 'fd2cc3ab786a316dee728b420cdf445817c0374c', class: {
|
|
7434
7473
|
checkbox: true,
|
|
7435
7474
|
[this.state._variant]: true,
|
|
7436
7475
|
'hide-label': !!this.state._hideLabel,
|
|
7437
7476
|
checked: this.state._checked,
|
|
7438
7477
|
indeterminate: this.state._indeterminate,
|
|
7439
|
-
}, "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: '
|
|
7478
|
+
}, "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 }))))));
|
|
7440
7479
|
}
|
|
7441
7480
|
constructor(hostRef) {
|
|
7442
7481
|
registerInstance(this, hostRef);
|
|
@@ -7474,6 +7513,7 @@ class KolInputCheckbox {
|
|
|
7474
7513
|
this._id = undefined;
|
|
7475
7514
|
this._indeterminate = undefined;
|
|
7476
7515
|
this._label = undefined;
|
|
7516
|
+
this._labelAlign = 'right';
|
|
7477
7517
|
this._msg = undefined;
|
|
7478
7518
|
this._name = undefined;
|
|
7479
7519
|
this._on = undefined;
|
|
@@ -7497,6 +7537,7 @@ class KolInputCheckbox {
|
|
|
7497
7537
|
_label: '',
|
|
7498
7538
|
_value: true,
|
|
7499
7539
|
_variant: 'default',
|
|
7540
|
+
_labelAlign: 'right',
|
|
7500
7541
|
};
|
|
7501
7542
|
this.controller = new InputCheckboxController(this, 'checkbox', this.host);
|
|
7502
7543
|
}
|
|
@@ -7536,6 +7577,9 @@ class KolInputCheckbox {
|
|
|
7536
7577
|
validateLabel(value) {
|
|
7537
7578
|
this.controller.validateLabel(value);
|
|
7538
7579
|
}
|
|
7580
|
+
validateLabelAlign(value) {
|
|
7581
|
+
this.controller.validateLabelAlign(value);
|
|
7582
|
+
}
|
|
7539
7583
|
validateMsg(value) {
|
|
7540
7584
|
this.controller.validateMsg(value);
|
|
7541
7585
|
}
|
|
@@ -7582,6 +7626,7 @@ class KolInputCheckbox {
|
|
|
7582
7626
|
"_id": ["validateId"],
|
|
7583
7627
|
"_indeterminate": ["validateIndeterminate"],
|
|
7584
7628
|
"_label": ["validateLabel"],
|
|
7629
|
+
"_labelAlign": ["validateLabelAlign"],
|
|
7585
7630
|
"_msg": ["validateMsg"],
|
|
7586
7631
|
"_name": ["validateName"],
|
|
7587
7632
|
"_on": ["validateOn"],
|
|
@@ -7611,6 +7656,7 @@ class KolInputCheckbox {
|
|
|
7611
7656
|
"_id": [1],
|
|
7612
7657
|
"_indeterminate": [1540],
|
|
7613
7658
|
"_label": [1],
|
|
7659
|
+
"_labelAlign": [1, "_label-align"],
|
|
7614
7660
|
"_msg": [16],
|
|
7615
7661
|
"_name": [1],
|
|
7616
7662
|
"_on": [16],
|
|
@@ -7655,7 +7701,7 @@ class InputColorController extends InputIconController {
|
|
|
7655
7701
|
}
|
|
7656
7702
|
}
|
|
7657
7703
|
|
|
7658
|
-
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}";
|
|
7704
|
+
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}";
|
|
7659
7705
|
var KolInputColorDefaultStyle0 = defaultStyleCss$w;
|
|
7660
7706
|
|
|
7661
7707
|
class KolInputColor {
|
|
@@ -7845,7 +7891,7 @@ class InputDateController extends InputIconController {
|
|
|
7845
7891
|
constructor(component, name, host) {
|
|
7846
7892
|
super(component, name, host);
|
|
7847
7893
|
this.validateIso8601 = (propName, value, afterPatch) => {
|
|
7848
|
-
return watchValidator(this.component, propName, (value) => value === undefined || value == null || value === '' || this.validateDateString(value), new Set(['Date', 'string{ISO-8601}']),
|
|
7894
|
+
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), {
|
|
7849
7895
|
hooks: {
|
|
7850
7896
|
afterPatch: (value) => {
|
|
7851
7897
|
if (typeof value === 'string' && afterPatch) {
|
|
@@ -7863,36 +7909,37 @@ class InputDateController extends InputIconController {
|
|
|
7863
7909
|
validateSuggestions(value) {
|
|
7864
7910
|
validateSuggestions(this.component, value);
|
|
7865
7911
|
}
|
|
7866
|
-
tryParseToString(value,
|
|
7867
|
-
|
|
7868
|
-
|
|
7869
|
-
|
|
7870
|
-
|
|
7871
|
-
|
|
7872
|
-
|
|
7912
|
+
static tryParseToString(value, type, step) {
|
|
7913
|
+
if (typeof value === 'string' || value === null) {
|
|
7914
|
+
return value;
|
|
7915
|
+
}
|
|
7916
|
+
if (typeof value === 'object' && value instanceof Date) {
|
|
7917
|
+
const formattedYear = value.getFullYear();
|
|
7918
|
+
const formattedMonth = String(value.getMonth() + 1).padStart(2, '0');
|
|
7919
|
+
const formattedDay = String(value.getDate()).padStart(2, '0');
|
|
7920
|
+
const formattedHours = String(value.getHours()).padStart(2, '0');
|
|
7921
|
+
const formattedMinutes = String(value.getMinutes()).padStart(2, '0');
|
|
7922
|
+
const formattedSeconds = String(value.getSeconds()).padStart(2, '0');
|
|
7923
|
+
const formattedDate = [formattedYear, formattedMonth, formattedDay].join('-');
|
|
7924
|
+
const formattedTimeWithSeconds = [formattedHours, formattedMinutes, formattedSeconds].join(':');
|
|
7925
|
+
switch (type) {
|
|
7873
7926
|
case 'date':
|
|
7874
|
-
return
|
|
7927
|
+
return formattedDate;
|
|
7875
7928
|
case 'datetime-local':
|
|
7876
|
-
return `${
|
|
7929
|
+
return `${formattedDate}T${formattedTimeWithSeconds}`;
|
|
7877
7930
|
case 'month':
|
|
7878
|
-
return `${
|
|
7931
|
+
return `${formattedYear}-${formattedMonth}`;
|
|
7879
7932
|
case 'time':
|
|
7880
|
-
if (
|
|
7881
|
-
|
|
7882
|
-
(typeof this.component._step === 'number' && this.component._step === 60)) {
|
|
7883
|
-
return `${v.getHours()}:${v.getMinutes()}`;
|
|
7933
|
+
if (step === undefined || String(step) === '60') {
|
|
7934
|
+
return `${formattedHours}:${formattedMinutes}`;
|
|
7884
7935
|
}
|
|
7885
7936
|
else {
|
|
7886
|
-
return
|
|
7937
|
+
return formattedTimeWithSeconds;
|
|
7887
7938
|
}
|
|
7888
7939
|
case 'week':
|
|
7889
7940
|
throw new Error('Auto convert to week is not supported!');
|
|
7890
7941
|
}
|
|
7891
7942
|
}
|
|
7892
|
-
if (value === null) {
|
|
7893
|
-
return null;
|
|
7894
|
-
}
|
|
7895
|
-
return undefined;
|
|
7896
7943
|
}
|
|
7897
7944
|
validateDateString(value) {
|
|
7898
7945
|
switch (this.component._type) {
|
|
@@ -7917,12 +7964,15 @@ class InputDateController extends InputIconController {
|
|
|
7917
7964
|
}
|
|
7918
7965
|
}
|
|
7919
7966
|
validateMax(value) {
|
|
7920
|
-
|
|
7967
|
+
const ensuredValue = ((value === undefined || value === null) && this.component._type === 'date') ||
|
|
7968
|
+
this.component._type === 'month' ||
|
|
7969
|
+
this.component._type === 'datetime-local'
|
|
7921
7970
|
? InputDateController.DEFAULT_MAX_DATE
|
|
7922
|
-
:
|
|
7971
|
+
: value;
|
|
7972
|
+
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));
|
|
7923
7973
|
}
|
|
7924
7974
|
validateMin(value) {
|
|
7925
|
-
watchValidator(this.component, '_min', (value) => value === undefined || (value !== null && this.validateDateString(value)), new Set(['Iso8601', 'Date']),
|
|
7975
|
+
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));
|
|
7926
7976
|
}
|
|
7927
7977
|
validateOn(value) {
|
|
7928
7978
|
setState(this.component, '_on', Object.assign(Object.assign({}, value), { onChange: (e, v) => {
|
|
@@ -7975,7 +8025,7 @@ InputDateController.isoTimeRegex = /^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/;
|
|
|
7975
8025
|
InputDateController.isoWeekRegex = /^\d{4}-W(?:[0-4]\d|5[0-3])$/;
|
|
7976
8026
|
InputDateController.DEFAULT_MAX_DATE = new Date(9999, 11, 31, 23, 59, 59);
|
|
7977
8027
|
|
|
7978
|
-
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}";
|
|
8028
|
+
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}";
|
|
7979
8029
|
var KolInputDateDefaultStyle0 = defaultStyleCss$v;
|
|
7980
8030
|
|
|
7981
8031
|
class KolInputDate {
|
|
@@ -8228,19 +8278,31 @@ const validatePasswordVariant = (component, value) => {
|
|
|
8228
8278
|
class InputPasswordController extends InputIconController {
|
|
8229
8279
|
constructor(component, name, host) {
|
|
8230
8280
|
super(component, name, host);
|
|
8281
|
+
this.afterSyncCharCounter = () => {
|
|
8282
|
+
if (typeof this.component._value === 'string' && this.component._value.length > 0) {
|
|
8283
|
+
this.component.state._currentLength = this.component._value.length;
|
|
8284
|
+
}
|
|
8285
|
+
};
|
|
8231
8286
|
this.component = component;
|
|
8232
8287
|
}
|
|
8233
8288
|
validateAutoComplete(value) {
|
|
8234
8289
|
watchValidator(this.component, '_autoComplete', (value) => typeof value === 'string' && (value === 'on' || value === 'off'), new Set(['on | off']), value);
|
|
8235
8290
|
}
|
|
8236
8291
|
validateHasCounter(value) {
|
|
8237
|
-
validateHasCounter(this.component, value
|
|
8292
|
+
validateHasCounter(this.component, value, {
|
|
8293
|
+
hooks: {
|
|
8294
|
+
afterPatch: this.afterSyncCharCounter,
|
|
8295
|
+
},
|
|
8296
|
+
});
|
|
8238
8297
|
}
|
|
8239
8298
|
validateVariant(value) {
|
|
8240
8299
|
validatePasswordVariant(this.component, value);
|
|
8241
8300
|
}
|
|
8242
8301
|
validateMaxLength(value) {
|
|
8243
8302
|
watchNumber(this.component, '_maxLength', value, {
|
|
8303
|
+
hooks: {
|
|
8304
|
+
afterPatch: this.afterSyncCharCounter,
|
|
8305
|
+
},
|
|
8244
8306
|
min: 0,
|
|
8245
8307
|
});
|
|
8246
8308
|
}
|
|
@@ -8257,7 +8319,11 @@ class InputPasswordController extends InputIconController {
|
|
|
8257
8319
|
watchBoolean(this.component, '_required', value);
|
|
8258
8320
|
}
|
|
8259
8321
|
validateValue(value) {
|
|
8260
|
-
watchString(this.component, '_value', value
|
|
8322
|
+
watchString(this.component, '_value', value, {
|
|
8323
|
+
hooks: {
|
|
8324
|
+
afterPatch: this.afterSyncCharCounter,
|
|
8325
|
+
},
|
|
8326
|
+
});
|
|
8261
8327
|
this.setFormAssociatedValue(this.component.state._value);
|
|
8262
8328
|
}
|
|
8263
8329
|
componentWillLoad() {
|
|
@@ -8296,9 +8362,6 @@ class InputTextController extends InputTextEmailController {
|
|
|
8296
8362
|
validateType(value) {
|
|
8297
8363
|
watchValidator(this.component, '_type', (value) => typeof value === 'string' && inputTextTypeOptions.includes(value), new Set([`String {${inputTextTypeOptions.join(', ')}`]), value);
|
|
8298
8364
|
}
|
|
8299
|
-
validateHasCounter(value) {
|
|
8300
|
-
validateHasCounter(this.component, value);
|
|
8301
|
-
}
|
|
8302
8365
|
componentWillLoad() {
|
|
8303
8366
|
super.componentWillLoad();
|
|
8304
8367
|
this.validateType(this.component._type);
|
|
@@ -8320,7 +8383,7 @@ class InputEmailController extends InputTextEmailController {
|
|
|
8320
8383
|
}
|
|
8321
8384
|
}
|
|
8322
8385
|
|
|
8323
|
-
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}";
|
|
8386
|
+
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}";
|
|
8324
8387
|
var KolInputEmailDefaultStyle0 = defaultStyleCss$u;
|
|
8325
8388
|
|
|
8326
8389
|
class KolInputEmail {
|
|
@@ -8591,7 +8654,7 @@ class InputFileController extends InputIconController {
|
|
|
8591
8654
|
}
|
|
8592
8655
|
}
|
|
8593
8656
|
|
|
8594
|
-
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}";
|
|
8657
|
+
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}";
|
|
8595
8658
|
var KolInputFileDefaultStyle0 = defaultStyleCss$t;
|
|
8596
8659
|
|
|
8597
8660
|
class KolInputFile {
|
|
@@ -8875,7 +8938,7 @@ class InputNumberController extends InputIconController {
|
|
|
8875
8938
|
}
|
|
8876
8939
|
}
|
|
8877
8940
|
|
|
8878
|
-
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}";
|
|
8941
|
+
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}";
|
|
8879
8942
|
var KolInputNumberDefaultStyle0 = defaultStyleCss$s;
|
|
8880
8943
|
|
|
8881
8944
|
class KolInputNumber {
|
|
@@ -9115,7 +9178,7 @@ class KolInputNumber {
|
|
|
9115
9178
|
}; }
|
|
9116
9179
|
}
|
|
9117
9180
|
|
|
9118
|
-
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}";
|
|
9181
|
+
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}";
|
|
9119
9182
|
var KolInputPasswordDefaultStyle0 = defaultStyleCss$r;
|
|
9120
9183
|
|
|
9121
9184
|
class KolInputPassword {
|
|
@@ -9370,7 +9433,7 @@ const FormFieldMsg = ({ _alert, _msg, _hideError, _id }) => (hAsync(KolAlertWcTa
|
|
|
9370
9433
|
'visually-hidden': _hideError === true,
|
|
9371
9434
|
} }, _msg), (_msg === null || _msg === void 0 ? void 0 : _msg._description) || undefined));
|
|
9372
9435
|
|
|
9373
|
-
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}";
|
|
9436
|
+
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}";
|
|
9374
9437
|
var KolInputRadioDefaultStyle0 = defaultStyleCss$q;
|
|
9375
9438
|
|
|
9376
9439
|
class KolInputRadio {
|
|
@@ -9641,7 +9704,7 @@ class InputRangeController extends InputIconController {
|
|
|
9641
9704
|
}
|
|
9642
9705
|
}
|
|
9643
9706
|
|
|
9644
|
-
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}";
|
|
9707
|
+
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}";
|
|
9645
9708
|
var KolInputRangeDefaultStyle0 = defaultStyleCss$p;
|
|
9646
9709
|
|
|
9647
9710
|
class KolInputRange {
|
|
@@ -9889,7 +9952,7 @@ class KolInputRange {
|
|
|
9889
9952
|
}; }
|
|
9890
9953
|
}
|
|
9891
9954
|
|
|
9892
|
-
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}";
|
|
9955
|
+
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}";
|
|
9893
9956
|
var KolInputTextDefaultStyle0 = defaultStyleCss$o;
|
|
9894
9957
|
|
|
9895
9958
|
class KolInputText {
|
|
@@ -10200,7 +10263,7 @@ class KolInputWc {
|
|
|
10200
10263
|
input: true,
|
|
10201
10264
|
'icon-left': typeof ((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) === 'object',
|
|
10202
10265
|
'icon-right': typeof ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) === 'object',
|
|
10203
|
-
} }, ((_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: '
|
|
10266
|
+
} }, ((_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'))))));
|
|
10204
10267
|
}
|
|
10205
10268
|
getModifierClassNameByMsgType() {
|
|
10206
10269
|
var _a, _b;
|
|
@@ -10247,7 +10310,7 @@ class KolInputWc {
|
|
|
10247
10310
|
}; }
|
|
10248
10311
|
}
|
|
10249
10312
|
|
|
10250
|
-
const defaultStyleCss$n = "@layer kol-global {\n
|
|
10313
|
+
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}";
|
|
10251
10314
|
var KolKolibriDefaultStyle0 = defaultStyleCss$n;
|
|
10252
10315
|
|
|
10253
10316
|
class KolKolibri {
|
|
@@ -10319,7 +10382,7 @@ class KolKolibri {
|
|
|
10319
10382
|
}; }
|
|
10320
10383
|
}
|
|
10321
10384
|
|
|
10322
|
-
const defaultStyleCss$m = "@layer kol-global {\n
|
|
10385
|
+
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}";
|
|
10323
10386
|
var KolLinkDefaultStyle0 = defaultStyleCss$m;
|
|
10324
10387
|
|
|
10325
10388
|
class KolLink {
|
|
@@ -10383,7 +10446,7 @@ class KolLink {
|
|
|
10383
10446
|
}; }
|
|
10384
10447
|
}
|
|
10385
10448
|
|
|
10386
|
-
const defaultStyleCss$l = "@charset \"UTF-8\";\n
|
|
10449
|
+
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}";
|
|
10387
10450
|
var KolLinkButtonDefaultStyle0 = defaultStyleCss$l;
|
|
10388
10451
|
|
|
10389
10452
|
class KolLinkButton {
|
|
@@ -10455,7 +10518,7 @@ class KolLinkButton {
|
|
|
10455
10518
|
}; }
|
|
10456
10519
|
}
|
|
10457
10520
|
|
|
10458
|
-
const defaultStyleCss$k = "@layer kol-global {\n
|
|
10521
|
+
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}";
|
|
10459
10522
|
var KolLinkGroupDefaultStyle0 = defaultStyleCss$k;
|
|
10460
10523
|
|
|
10461
10524
|
const ListItem = (props) => {
|
|
@@ -10935,7 +10998,7 @@ BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Arzneimittel und Mediz
|
|
|
10935
10998
|
BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Bevölkerungsforschung'], ['Bundesinstitut', 'für Bevölkerungsforschung']);
|
|
10936
10999
|
BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Sportwissenschaft'], ['Bundesinstitut', 'für Sportwissenschaft']);
|
|
10937
11000
|
|
|
10938
|
-
const defaultStyleCss$j = "@layer kol-global {\n
|
|
11001
|
+
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}";
|
|
10939
11002
|
var KolLogoDefaultStyle0 = defaultStyleCss$j;
|
|
10940
11003
|
|
|
10941
11004
|
function enumToArray(enumeration, enumAsMap = new Map()) {
|
|
@@ -10998,7 +11061,7 @@ class KolLogo {
|
|
|
10998
11061
|
}; }
|
|
10999
11062
|
}
|
|
11000
11063
|
|
|
11001
|
-
const defaultStyleCss$i = "@layer kol-global {\n
|
|
11064
|
+
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}";
|
|
11002
11065
|
var KolModalDefaultStyle0 = defaultStyleCss$i;
|
|
11003
11066
|
|
|
11004
11067
|
class KolModal {
|
|
@@ -11110,7 +11173,7 @@ class KolModal {
|
|
|
11110
11173
|
}; }
|
|
11111
11174
|
}
|
|
11112
11175
|
|
|
11113
|
-
const defaultStyleCss$h = "@layer kol-global {\n
|
|
11176
|
+
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}";
|
|
11114
11177
|
var KolNavDefaultStyle0 = defaultStyleCss$h;
|
|
11115
11178
|
|
|
11116
11179
|
const entryIsLink = (entryProps) => {
|
|
@@ -11304,7 +11367,7 @@ class KolNav {
|
|
|
11304
11367
|
}; }
|
|
11305
11368
|
}
|
|
11306
11369
|
|
|
11307
|
-
const defaultStyleCss$g = "@charset \"UTF-8\";\n
|
|
11370
|
+
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}";
|
|
11308
11371
|
var KolPaginationDefaultStyle0 = defaultStyleCss$g;
|
|
11309
11372
|
|
|
11310
11373
|
const leftDoubleArrowIcon = {
|
|
@@ -12821,6 +12884,9 @@ const size = function (options) {
|
|
|
12821
12884
|
};
|
|
12822
12885
|
};
|
|
12823
12886
|
|
|
12887
|
+
function hasWindow() {
|
|
12888
|
+
return typeof window !== 'undefined';
|
|
12889
|
+
}
|
|
12824
12890
|
function getNodeName(node) {
|
|
12825
12891
|
if (isNode(node)) {
|
|
12826
12892
|
return (node.nodeName || '').toLowerCase();
|
|
@@ -12839,17 +12905,25 @@ function getDocumentElement(node) {
|
|
|
12839
12905
|
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
|
|
12840
12906
|
}
|
|
12841
12907
|
function isNode(value) {
|
|
12908
|
+
if (!hasWindow()) {
|
|
12909
|
+
return false;
|
|
12910
|
+
}
|
|
12842
12911
|
return value instanceof Node || value instanceof getWindow(value).Node;
|
|
12843
12912
|
}
|
|
12844
12913
|
function isElement(value) {
|
|
12914
|
+
if (!hasWindow()) {
|
|
12915
|
+
return false;
|
|
12916
|
+
}
|
|
12845
12917
|
return value instanceof Element || value instanceof getWindow(value).Element;
|
|
12846
12918
|
}
|
|
12847
12919
|
function isHTMLElement(value) {
|
|
12920
|
+
if (!hasWindow()) {
|
|
12921
|
+
return false;
|
|
12922
|
+
}
|
|
12848
12923
|
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
|
|
12849
12924
|
}
|
|
12850
12925
|
function isShadowRoot(value) {
|
|
12851
|
-
|
|
12852
|
-
if (typeof ShadowRoot === 'undefined') {
|
|
12926
|
+
if (!hasWindow() || typeof ShadowRoot === 'undefined') {
|
|
12853
12927
|
return false;
|
|
12854
12928
|
}
|
|
12855
12929
|
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
|
@@ -12953,10 +13027,14 @@ function getOverflowAncestors(node, list, traverseIframes) {
|
|
|
12953
13027
|
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
|
|
12954
13028
|
const win = getWindow(scrollableAncestor);
|
|
12955
13029
|
if (isBody) {
|
|
12956
|
-
|
|
13030
|
+
const frameElement = getFrameElement(win);
|
|
13031
|
+
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
|
|
12957
13032
|
}
|
|
12958
13033
|
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
|
12959
13034
|
}
|
|
13035
|
+
function getFrameElement(win) {
|
|
13036
|
+
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
|
|
13037
|
+
}
|
|
12960
13038
|
|
|
12961
13039
|
function getCssDimensions(element) {
|
|
12962
13040
|
const css = getComputedStyle(element);
|
|
@@ -13060,7 +13138,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
|
|
|
13060
13138
|
const win = getWindow(domElement);
|
|
13061
13139
|
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
|
|
13062
13140
|
let currentWin = win;
|
|
13063
|
-
let currentIFrame = currentWin
|
|
13141
|
+
let currentIFrame = getFrameElement(currentWin);
|
|
13064
13142
|
while (currentIFrame && offsetParent && offsetWin !== currentWin) {
|
|
13065
13143
|
const iframeScale = getScale(currentIFrame);
|
|
13066
13144
|
const iframeRect = currentIFrame.getBoundingClientRect();
|
|
@@ -13074,7 +13152,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
|
|
|
13074
13152
|
x += left;
|
|
13075
13153
|
y += top;
|
|
13076
13154
|
currentWin = getWindow(currentIFrame);
|
|
13077
|
-
currentIFrame = currentWin
|
|
13155
|
+
currentIFrame = getFrameElement(currentWin);
|
|
13078
13156
|
}
|
|
13079
13157
|
}
|
|
13080
13158
|
return rectToClientRect({
|
|
@@ -13128,10 +13206,14 @@ function getClientRects(element) {
|
|
|
13128
13206
|
return Array.from(element.getClientRects());
|
|
13129
13207
|
}
|
|
13130
13208
|
|
|
13131
|
-
|
|
13132
|
-
|
|
13133
|
-
|
|
13134
|
-
|
|
13209
|
+
// If <html> has a CSS width greater than the viewport, then this will be
|
|
13210
|
+
// incorrect for RTL.
|
|
13211
|
+
function getWindowScrollBarX(element, rect) {
|
|
13212
|
+
const leftScroll = getNodeScroll(element).scrollLeft;
|
|
13213
|
+
if (!rect) {
|
|
13214
|
+
return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
|
|
13215
|
+
}
|
|
13216
|
+
return rect.left + leftScroll;
|
|
13135
13217
|
}
|
|
13136
13218
|
|
|
13137
13219
|
// Gets the entire size of the scrollable document area, even extending outside
|
|
@@ -13315,11 +13397,22 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
13315
13397
|
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
13316
13398
|
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
13317
13399
|
} else if (documentElement) {
|
|
13400
|
+
// If the <body> scrollbar appears on the left (e.g. RTL systems). Use
|
|
13401
|
+
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
13318
13402
|
offsets.x = getWindowScrollBarX(documentElement);
|
|
13319
13403
|
}
|
|
13320
13404
|
}
|
|
13321
|
-
|
|
13322
|
-
|
|
13405
|
+
let htmlX = 0;
|
|
13406
|
+
let htmlY = 0;
|
|
13407
|
+
if (documentElement && !isOffsetParentAnElement && !isFixed) {
|
|
13408
|
+
const htmlRect = documentElement.getBoundingClientRect();
|
|
13409
|
+
htmlY = htmlRect.top + scroll.scrollTop;
|
|
13410
|
+
htmlX = htmlRect.left + scroll.scrollLeft -
|
|
13411
|
+
// RTL <body> scrollbar.
|
|
13412
|
+
getWindowScrollBarX(documentElement, htmlRect);
|
|
13413
|
+
}
|
|
13414
|
+
const x = rect.left + scroll.scrollLeft - offsets.x - htmlX;
|
|
13415
|
+
const y = rect.top + scroll.scrollTop - offsets.y - htmlY;
|
|
13323
13416
|
return {
|
|
13324
13417
|
x,
|
|
13325
13418
|
y,
|
|
@@ -13339,7 +13432,16 @@ function getTrueOffsetParent(element, polyfill) {
|
|
|
13339
13432
|
if (polyfill) {
|
|
13340
13433
|
return polyfill(element);
|
|
13341
13434
|
}
|
|
13342
|
-
|
|
13435
|
+
let rawOffsetParent = element.offsetParent;
|
|
13436
|
+
|
|
13437
|
+
// Firefox returns the <html> element as the offsetParent if it's non-static,
|
|
13438
|
+
// while Chrome and Safari return the <body> element. The <body> element must
|
|
13439
|
+
// be used to perform the correct calculations even if the <html> element is
|
|
13440
|
+
// non-static.
|
|
13441
|
+
if (getDocumentElement(element) === rawOffsetParent) {
|
|
13442
|
+
rawOffsetParent = rawOffsetParent.ownerDocument.body;
|
|
13443
|
+
}
|
|
13444
|
+
return rawOffsetParent;
|
|
13343
13445
|
}
|
|
13344
13446
|
|
|
13345
13447
|
// Gets the closest ancestor positioned element. Handles some edge cases,
|
|
@@ -13796,7 +13898,7 @@ class KolPopover {
|
|
|
13796
13898
|
}; }
|
|
13797
13899
|
}
|
|
13798
13900
|
|
|
13799
|
-
const defaultStyleCss$f = "@layer kol-global {\n
|
|
13901
|
+
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}";
|
|
13800
13902
|
var KolProgressDefaultStyle0 = defaultStyleCss$f;
|
|
13801
13903
|
|
|
13802
13904
|
const VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);
|
|
@@ -13908,7 +14010,7 @@ class KolProcess {
|
|
|
13908
14010
|
}; }
|
|
13909
14011
|
}
|
|
13910
14012
|
|
|
13911
|
-
const defaultStyleCss$e = "@charset \"UTF-8\";\n
|
|
14013
|
+
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}";
|
|
13912
14014
|
var KolQuoteDefaultStyle0 = defaultStyleCss$e;
|
|
13913
14015
|
|
|
13914
14016
|
class KolQuote {
|
|
@@ -14056,7 +14158,7 @@ class SelectController extends InputIconController {
|
|
|
14056
14158
|
}
|
|
14057
14159
|
}
|
|
14058
14160
|
|
|
14059
|
-
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}";
|
|
14161
|
+
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}";
|
|
14060
14162
|
var KolSelectDefaultStyle0 = defaultStyleCss$d;
|
|
14061
14163
|
|
|
14062
14164
|
const isSelected = (valueList, optionValue) => {
|
|
@@ -14341,7 +14443,7 @@ class SingleSelectController extends InputIconController {
|
|
|
14341
14443
|
}
|
|
14342
14444
|
}
|
|
14343
14445
|
|
|
14344
|
-
const defaultStyleCss$c = "@layer kol-global {\n
|
|
14446
|
+
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}";
|
|
14345
14447
|
var KolSingleSelectDefaultStyle0 = defaultStyleCss$c;
|
|
14346
14448
|
|
|
14347
14449
|
class KolSingleSelect {
|
|
@@ -14768,7 +14870,7 @@ class KolSingleSelect {
|
|
|
14768
14870
|
}; }
|
|
14769
14871
|
}
|
|
14770
14872
|
|
|
14771
|
-
const defaultStyleCss$b = "@layer kol-global {\n
|
|
14873
|
+
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}";
|
|
14772
14874
|
var KolSkipNavDefaultStyle0 = defaultStyleCss$b;
|
|
14773
14875
|
|
|
14774
14876
|
class KolSkipNav {
|
|
@@ -23227,7 +23329,7 @@ class KolSpanWc {
|
|
|
23227
23329
|
}; }
|
|
23228
23330
|
}
|
|
23229
23331
|
|
|
23230
|
-
const defaultStyleCss$a = "@layer kol-global {\n
|
|
23332
|
+
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}";
|
|
23231
23333
|
var KolSpinDefaultStyle0 = defaultStyleCss$a;
|
|
23232
23334
|
|
|
23233
23335
|
function renderSpin(variant) {
|
|
@@ -23288,7 +23390,7 @@ class KolSpin {
|
|
|
23288
23390
|
}; }
|
|
23289
23391
|
}
|
|
23290
23392
|
|
|
23291
|
-
const defaultStyleCss$9 = "@layer kol-global {\n
|
|
23393
|
+
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}";
|
|
23292
23394
|
var KolSplitButtonDefaultStyle0 = defaultStyleCss$9;
|
|
23293
23395
|
|
|
23294
23396
|
class KolSplitButton {
|
|
@@ -23487,7 +23589,17 @@ var Events;
|
|
|
23487
23589
|
Events["onClose"] = "onClose";
|
|
23488
23590
|
})(Events || (Events = {}));
|
|
23489
23591
|
|
|
23490
|
-
|
|
23592
|
+
var KeyboardKey;
|
|
23593
|
+
(function (KeyboardKey) {
|
|
23594
|
+
KeyboardKey["ArrowDown"] = "ArrowDown";
|
|
23595
|
+
KeyboardKey["ArrowLeft"] = "ArrowLeft";
|
|
23596
|
+
KeyboardKey["ArrowRight"] = "ArrowRight";
|
|
23597
|
+
KeyboardKey["ArrowUp"] = "ArrowUp";
|
|
23598
|
+
KeyboardKey["Enter"] = "Enter";
|
|
23599
|
+
KeyboardKey["Space"] = " ";
|
|
23600
|
+
})(KeyboardKey || (KeyboardKey = {}));
|
|
23601
|
+
|
|
23602
|
+
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}";
|
|
23491
23603
|
var KolTableStatefulDefaultStyle0 = defaultStyleCss$8;
|
|
23492
23604
|
|
|
23493
23605
|
const PAGINATION_OPTIONS = [10, 20, 50, 100];
|
|
@@ -23902,7 +24014,7 @@ class KolTableStateful {
|
|
|
23902
24014
|
}; }
|
|
23903
24015
|
}
|
|
23904
24016
|
|
|
23905
|
-
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}";
|
|
24017
|
+
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}";
|
|
23906
24018
|
var KolTableStatelessDefaultStyle0 = defaultStyleCss$7;
|
|
23907
24019
|
|
|
23908
24020
|
class KolTableStateless$1 {
|
|
@@ -23946,6 +24058,7 @@ class KolTableStateless {
|
|
|
23946
24058
|
this.horizontal = true;
|
|
23947
24059
|
this.cellsToRenderTimeouts = new Map();
|
|
23948
24060
|
this.dataToKeyMap = new Map();
|
|
24061
|
+
this.checkboxRefs = [];
|
|
23949
24062
|
this.renderTableRow = (row, rowIndex) => {
|
|
23950
24063
|
var _a, _b;
|
|
23951
24064
|
let key = String(rowIndex);
|
|
@@ -24022,6 +24135,25 @@ class KolTableStateless {
|
|
|
24022
24135
|
validateSelection(value) {
|
|
24023
24136
|
validateTableSelection(this, value);
|
|
24024
24137
|
}
|
|
24138
|
+
handleKeyDown(event) {
|
|
24139
|
+
var _a;
|
|
24140
|
+
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
|
|
24141
|
+
const focusedElement = (_a = this.tableDivElement) === null || _a === void 0 ? void 0 : _a.querySelector(':focus');
|
|
24142
|
+
let index = this.checkboxRefs.indexOf(focusedElement);
|
|
24143
|
+
if (index > -1) {
|
|
24144
|
+
event.preventDefault();
|
|
24145
|
+
if (event.key === 'ArrowDown') {
|
|
24146
|
+
index = (index + 1) % this.checkboxRefs.length;
|
|
24147
|
+
this.checkboxRefs[index].focus();
|
|
24148
|
+
}
|
|
24149
|
+
else if (event.key === 'ArrowUp') {
|
|
24150
|
+
event.preventDefault();
|
|
24151
|
+
index = (index + this.checkboxRefs.length - 1) % this.checkboxRefs.length;
|
|
24152
|
+
this.checkboxRefs[index].focus();
|
|
24153
|
+
}
|
|
24154
|
+
}
|
|
24155
|
+
}
|
|
24156
|
+
}
|
|
24025
24157
|
componentDidRender() {
|
|
24026
24158
|
this.checkDivElementScrollbar();
|
|
24027
24159
|
}
|
|
@@ -24245,7 +24377,7 @@ class KolTableStateless {
|
|
|
24245
24377
|
id: keyProperty,
|
|
24246
24378
|
['aria-label']: label,
|
|
24247
24379
|
};
|
|
24248
|
-
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) => {
|
|
24380
|
+
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) => {
|
|
24249
24381
|
var _a, _b, _c;
|
|
24250
24382
|
const updatedSelectedKeys = !selected
|
|
24251
24383
|
? [...((_a = selection === null || selection === void 0 ? void 0 : selection.selectedKeys) !== null && _a !== void 0 ? _a : []), keyProperty]
|
|
@@ -24280,7 +24412,7 @@ class KolTableStateless {
|
|
|
24280
24412
|
translationKey = 'kol-table-selection-all';
|
|
24281
24413
|
}
|
|
24282
24414
|
const label = translate(translationKey);
|
|
24283
|
-
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) => {
|
|
24415
|
+
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) => {
|
|
24284
24416
|
var _a;
|
|
24285
24417
|
const selections = !isChecked ? this.state._data.map((el) => el === null || el === void 0 ? void 0 : el[keyPropertyName]) : [];
|
|
24286
24418
|
tryToDispatchKoliBriEvent('selection-change', this.host, selections);
|
|
@@ -24327,9 +24459,10 @@ class KolTableStateless {
|
|
|
24327
24459
|
}
|
|
24328
24460
|
render() {
|
|
24329
24461
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
24330
|
-
|
|
24462
|
+
this.checkboxRefs = [];
|
|
24463
|
+
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: {
|
|
24331
24464
|
minWidth: this.state._minWidth,
|
|
24332
|
-
} }, hAsync("div", { key: '
|
|
24465
|
+
} }, 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) => {
|
|
24333
24466
|
if (cell.asTd === true) {
|
|
24334
24467
|
return (hAsync("td", { key: `thead-${rowIndex}-${colIndex}-${cell.label}`, class: {
|
|
24335
24468
|
[cell.textAlign]: typeof cell.textAlign === 'string' && cell.textAlign.length > 0,
|
|
@@ -24345,7 +24478,7 @@ class KolTableStateless {
|
|
|
24345
24478
|
else {
|
|
24346
24479
|
return this.renderHeadingCell(cell, rowIndex, colIndex);
|
|
24347
24480
|
}
|
|
24348
|
-
})))))), hAsync("tbody", { key: '
|
|
24481
|
+
})))))), hAsync("tbody", { key: 'd872fa8369b3d7ca120d7f87dc72a7d9abdb82d9' }, dataField.map(this.renderTableRow)), this.renderFoot()))));
|
|
24349
24482
|
}
|
|
24350
24483
|
get host() { return getElement(this); }
|
|
24351
24484
|
static get watchers() { return {
|
|
@@ -24371,13 +24504,13 @@ class KolTableStateless {
|
|
|
24371
24504
|
"state": [32],
|
|
24372
24505
|
"tableDivElementHasScrollbar": [32]
|
|
24373
24506
|
},
|
|
24374
|
-
"$listeners$":
|
|
24507
|
+
"$listeners$": [[0, "keydown", "handleKeyDown"]],
|
|
24375
24508
|
"$lazyBundleId$": "-",
|
|
24376
24509
|
"$attrsToReflect$": []
|
|
24377
24510
|
}; }
|
|
24378
24511
|
}
|
|
24379
24512
|
|
|
24380
|
-
const defaultStyleCss$6 = "@layer kol-global {\n
|
|
24513
|
+
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}";
|
|
24381
24514
|
var KolTabsDefaultStyle0 = defaultStyleCss$6;
|
|
24382
24515
|
|
|
24383
24516
|
class KolTabs {
|
|
@@ -24385,51 +24518,42 @@ class KolTabs {
|
|
|
24385
24518
|
registerInstance(this, hostRef);
|
|
24386
24519
|
this.onCreateLabel = `${translate('kol-new')} …`;
|
|
24387
24520
|
this.showCreateTab = false;
|
|
24388
|
-
this.nextPossibleTabIndex = (tabs, offset, step) => {
|
|
24389
|
-
|
|
24390
|
-
|
|
24391
|
-
|
|
24392
|
-
|
|
24393
|
-
}
|
|
24394
|
-
return offset + step;
|
|
24521
|
+
this.nextPossibleTabIndex = (tabs, offset, step = 1) => {
|
|
24522
|
+
const nextOffset = offset + step;
|
|
24523
|
+
if (nextOffset < tabs.length) {
|
|
24524
|
+
if (tabs[nextOffset]._disabled) {
|
|
24525
|
+
return this.nextPossibleTabIndex(tabs, offset, step + 1);
|
|
24395
24526
|
}
|
|
24527
|
+
return nextOffset;
|
|
24396
24528
|
}
|
|
24397
|
-
|
|
24398
|
-
|
|
24399
|
-
|
|
24400
|
-
|
|
24401
|
-
|
|
24402
|
-
|
|
24529
|
+
return offset;
|
|
24530
|
+
};
|
|
24531
|
+
this.prevPossibleTabIndex = (tabs, offset, step = 1) => {
|
|
24532
|
+
const nextOffset = offset - step;
|
|
24533
|
+
if (nextOffset >= 0) {
|
|
24534
|
+
if (tabs[nextOffset]._disabled) {
|
|
24535
|
+
return this.prevPossibleTabIndex(tabs, offset, step + 1);
|
|
24403
24536
|
}
|
|
24537
|
+
return nextOffset;
|
|
24404
24538
|
}
|
|
24405
24539
|
return offset;
|
|
24406
24540
|
};
|
|
24407
24541
|
this.onKeyDown = (event) => {
|
|
24408
|
-
var _a, _b;
|
|
24409
|
-
let selectedIndex = null;
|
|
24410
24542
|
switch (event.key) {
|
|
24411
|
-
case
|
|
24412
|
-
|
|
24543
|
+
case KeyboardKey.ArrowRight:
|
|
24544
|
+
this.goToNextTab(event);
|
|
24413
24545
|
break;
|
|
24414
|
-
case
|
|
24415
|
-
|
|
24546
|
+
case KeyboardKey.ArrowLeft:
|
|
24547
|
+
this.goToPreviousTab(event);
|
|
24548
|
+
break;
|
|
24549
|
+
case KeyboardKey.Space:
|
|
24550
|
+
case KeyboardKey.Enter:
|
|
24551
|
+
this.activateFocusedTab(event);
|
|
24416
24552
|
break;
|
|
24417
|
-
}
|
|
24418
|
-
if (selectedIndex !== null) {
|
|
24419
|
-
const tab = this.state._tabs[selectedIndex];
|
|
24420
|
-
if ((_a = tab._on) === null || _a === void 0 ? void 0 : _a.onSelect) {
|
|
24421
|
-
(_b = tab._on) === null || _b === void 0 ? void 0 : _b.onSelect(event, selectedIndex);
|
|
24422
|
-
}
|
|
24423
|
-
this.onSelect(event, selectedIndex);
|
|
24424
24553
|
}
|
|
24425
24554
|
};
|
|
24426
24555
|
this.onClickSelect = (event, index) => {
|
|
24427
|
-
|
|
24428
|
-
const tab = this.state._tabs[index];
|
|
24429
|
-
if ((_a = tab._on) === null || _a === void 0 ? void 0 : _a.onSelect) {
|
|
24430
|
-
(_b = tab._on) === null || _b === void 0 ? void 0 : _b.onSelect(event, index);
|
|
24431
|
-
}
|
|
24432
|
-
this.onSelect(event, index);
|
|
24556
|
+
this.selectNextTabEvent(event, index);
|
|
24433
24557
|
};
|
|
24434
24558
|
this.onMouseDown = (event) => {
|
|
24435
24559
|
event.preventDefault();
|
|
@@ -24518,7 +24642,11 @@ class KolTabs {
|
|
|
24518
24642
|
(_b = this.state._on) === null || _b === void 0 ? void 0 : _b.onCreate(event);
|
|
24519
24643
|
}
|
|
24520
24644
|
};
|
|
24645
|
+
this.onBlur = () => {
|
|
24646
|
+
this.currentFocusIndex = undefined;
|
|
24647
|
+
};
|
|
24521
24648
|
this._align = 'top';
|
|
24649
|
+
this._behavior = undefined;
|
|
24522
24650
|
this._label = undefined;
|
|
24523
24651
|
this._on = undefined;
|
|
24524
24652
|
this._selected = 0;
|
|
@@ -24530,21 +24658,60 @@ class KolTabs {
|
|
|
24530
24658
|
_tabs: [],
|
|
24531
24659
|
};
|
|
24532
24660
|
}
|
|
24661
|
+
getCurrentFocusIndex() {
|
|
24662
|
+
if (typeof this.currentFocusIndex === 'number') {
|
|
24663
|
+
return this.currentFocusIndex;
|
|
24664
|
+
}
|
|
24665
|
+
return this.state._selected;
|
|
24666
|
+
}
|
|
24667
|
+
getKeyboardTabChangeMode() {
|
|
24668
|
+
if (this._behavior === 'select-manual') {
|
|
24669
|
+
return 'selectFocusOnly';
|
|
24670
|
+
}
|
|
24671
|
+
return 'activateCompletely';
|
|
24672
|
+
}
|
|
24673
|
+
goToNextTab(event) {
|
|
24674
|
+
const nextFocusIndex = this.nextPossibleTabIndex(this.state._tabs, this.getCurrentFocusIndex());
|
|
24675
|
+
this.selectNextTabEvent(event, nextFocusIndex, this.getKeyboardTabChangeMode());
|
|
24676
|
+
}
|
|
24677
|
+
goToPreviousTab(event) {
|
|
24678
|
+
const nextFocusIndex = this.prevPossibleTabIndex(this.state._tabs, this.getCurrentFocusIndex());
|
|
24679
|
+
this.selectNextTabEvent(event, nextFocusIndex, this.getKeyboardTabChangeMode());
|
|
24680
|
+
}
|
|
24681
|
+
activateFocusedTab(event) {
|
|
24682
|
+
if (typeof this.currentFocusIndex === 'number') {
|
|
24683
|
+
this.onSelect(event, this.currentFocusIndex);
|
|
24684
|
+
}
|
|
24685
|
+
}
|
|
24686
|
+
selectNextTabEvent(event, nextTabIndex, changeMode = 'activateCompletely') {
|
|
24687
|
+
var _a, _b;
|
|
24688
|
+
this.currentFocusIndex = nextTabIndex;
|
|
24689
|
+
this.focusTabById(nextTabIndex);
|
|
24690
|
+
if (changeMode === 'activateCompletely') {
|
|
24691
|
+
this._selected = nextTabIndex;
|
|
24692
|
+
const tab = this.state._tabs[nextTabIndex];
|
|
24693
|
+
(_b = (_a = tab._on) === null || _a === void 0 ? void 0 : _a.onSelect) === null || _b === void 0 ? void 0 : _b.call(_a, event, nextTabIndex);
|
|
24694
|
+
this.onSelect(event, nextTabIndex);
|
|
24695
|
+
}
|
|
24696
|
+
}
|
|
24533
24697
|
renderButtonGroup() {
|
|
24534
|
-
return (hAsync(
|
|
24698
|
+
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: {
|
|
24535
24699
|
onClick: this.onCreate,
|
|
24536
24700
|
} }))));
|
|
24537
24701
|
}
|
|
24538
24702
|
render() {
|
|
24539
|
-
return (hAsync(Host, { key: '
|
|
24703
|
+
return (hAsync(Host, { key: '844222f1b08a41030d480370c70fac855bfc4beb', class: "kol-tabs" }, hAsync("div", { key: 'a378c67063b048f57196db2c1a20aea79bb89764', ref: (el) => {
|
|
24540
24704
|
this.tabPanelsElement = el;
|
|
24541
24705
|
}, class: {
|
|
24542
24706
|
[`tabs-align-${this.state._align}`]: true,
|
|
24543
|
-
} }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
24707
|
+
} }, this.renderButtonGroup(), hAsync("div", { key: '895c94054438a2bb107f4ebd4c9716b71a12b333', class: "tabs-content", ref: this.catchTabPanelHost }))));
|
|
24544
24708
|
}
|
|
24545
24709
|
validateAlign(value) {
|
|
24546
24710
|
validateAlign(this, value);
|
|
24547
24711
|
}
|
|
24712
|
+
validateBehavior(value) {
|
|
24713
|
+
validateTabBehavior(this, value);
|
|
24714
|
+
}
|
|
24548
24715
|
validateLabel(value) {
|
|
24549
24716
|
validateLabel(this, value, {
|
|
24550
24717
|
required: true,
|
|
@@ -24611,6 +24778,7 @@ class KolTabs {
|
|
|
24611
24778
|
this.validateOn(this._on);
|
|
24612
24779
|
this.validateSelected(this._selected);
|
|
24613
24780
|
this.validateTabs(this._tabs);
|
|
24781
|
+
this.validateBehavior(this._behavior);
|
|
24614
24782
|
}
|
|
24615
24783
|
componentDidRender() {
|
|
24616
24784
|
this.handleTabPanels();
|
|
@@ -24625,20 +24793,21 @@ class KolTabs {
|
|
|
24625
24793
|
}
|
|
24626
24794
|
}
|
|
24627
24795
|
}
|
|
24628
|
-
|
|
24629
|
-
var _a, _b;
|
|
24630
|
-
this._selected = index;
|
|
24631
|
-
if (typeof ((_a = this._on) === null || _a === void 0 ? void 0 : _a.onSelect) === 'function') {
|
|
24632
|
-
(_b = this._on) === null || _b === void 0 ? void 0 : _b.onSelect(event, index);
|
|
24633
|
-
}
|
|
24796
|
+
focusTabById(index) {
|
|
24634
24797
|
if (this.tabPanelsElement) {
|
|
24635
24798
|
const button = koliBriQuerySelector(`button#${this.state._label.replace(/\s/g, '-')}-tab-${index}`, this.tabPanelsElement);
|
|
24636
24799
|
button === null || button === void 0 ? void 0 : button.focus();
|
|
24637
24800
|
}
|
|
24638
24801
|
}
|
|
24802
|
+
onSelect(event, index) {
|
|
24803
|
+
var _a, _b;
|
|
24804
|
+
(_b = (_a = this._on) === null || _a === void 0 ? void 0 : _a.onSelect) === null || _b === void 0 ? void 0 : _b.call(_a, event, index);
|
|
24805
|
+
this.focusTabById(index);
|
|
24806
|
+
}
|
|
24639
24807
|
get host() { return getElement(this); }
|
|
24640
24808
|
static get watchers() { return {
|
|
24641
24809
|
"_align": ["validateAlign"],
|
|
24810
|
+
"_behavior": ["validateBehavior"],
|
|
24642
24811
|
"_label": ["validateLabel"],
|
|
24643
24812
|
"_on": ["validateOn"],
|
|
24644
24813
|
"_selected": ["validateSelected"],
|
|
@@ -24652,6 +24821,7 @@ class KolTabs {
|
|
|
24652
24821
|
"$tagName$": "kol-tabs",
|
|
24653
24822
|
"$members$": {
|
|
24654
24823
|
"_align": [1],
|
|
24824
|
+
"_behavior": [1],
|
|
24655
24825
|
"_label": [1],
|
|
24656
24826
|
"_on": [16],
|
|
24657
24827
|
"_selected": [1538],
|
|
@@ -24675,7 +24845,7 @@ class TextareaController extends InputIconController {
|
|
|
24675
24845
|
this.component = component;
|
|
24676
24846
|
}
|
|
24677
24847
|
validateHasCounter(value) {
|
|
24678
|
-
|
|
24848
|
+
validateHasCounter(this.component, value, {
|
|
24679
24849
|
hooks: {
|
|
24680
24850
|
afterPatch: this.afterSyncCharCounter,
|
|
24681
24851
|
},
|
|
@@ -24725,7 +24895,7 @@ class TextareaController extends InputIconController {
|
|
|
24725
24895
|
}
|
|
24726
24896
|
}
|
|
24727
24897
|
|
|
24728
|
-
const defaultStyleCss$5 = "@layer kol-global {\n
|
|
24898
|
+
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}";
|
|
24729
24899
|
var KolTextareaDefaultStyle0 = defaultStyleCss$5;
|
|
24730
24900
|
|
|
24731
24901
|
const increaseTextareaHeight = (el) => {
|
|
@@ -24982,7 +25152,7 @@ const InternalToast = ({ key, onClose, onRef, toastState }) => {
|
|
|
24982
25152
|
hAsync("div", { ref: onRef }, typeof toastState.toast.description === 'string' ? toastState.toast.description : null))));
|
|
24983
25153
|
};
|
|
24984
25154
|
|
|
24985
|
-
const defaultStyleCss$4 = "@layer kol-component {\n
|
|
25155
|
+
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}";
|
|
24986
25156
|
var KolToastContainerDefaultStyle0 = defaultStyleCss$4;
|
|
24987
25157
|
|
|
24988
25158
|
const TRANSITION_TIMEOUT = 300;
|
|
@@ -25062,7 +25232,7 @@ class KolToastContainer {
|
|
|
25062
25232
|
}; }
|
|
25063
25233
|
}
|
|
25064
25234
|
|
|
25065
|
-
const defaultStyleCss$3 = "@layer kol-global {\n
|
|
25235
|
+
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}";
|
|
25066
25236
|
var KolToolbarDefaultStyle0 = defaultStyleCss$3;
|
|
25067
25237
|
|
|
25068
25238
|
const TOOLBAR_ITEM_TAG_NAME = 'kol-toolbar-item';
|
|
@@ -25362,7 +25532,7 @@ class KolTooltipWc {
|
|
|
25362
25532
|
}; }
|
|
25363
25533
|
}
|
|
25364
25534
|
|
|
25365
|
-
const defaultStyleCss$2 = "@layer kol-global {\n
|
|
25535
|
+
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}";
|
|
25366
25536
|
var KolTreeDefaultStyle0 = defaultStyleCss$2;
|
|
25367
25537
|
|
|
25368
25538
|
class KolTree {
|
|
@@ -25388,7 +25558,7 @@ class KolTree {
|
|
|
25388
25558
|
}; }
|
|
25389
25559
|
}
|
|
25390
25560
|
|
|
25391
|
-
const defaultStyleCss$1 = "@layer kol-component {\n
|
|
25561
|
+
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}";
|
|
25392
25562
|
var KolTreeItemDefaultStyle0 = defaultStyleCss$1;
|
|
25393
25563
|
|
|
25394
25564
|
class KolTreeItem {
|
|
@@ -25756,7 +25926,7 @@ class KolTreeWc {
|
|
|
25756
25926
|
}; }
|
|
25757
25927
|
}
|
|
25758
25928
|
|
|
25759
|
-
const defaultStyleCss = "@layer kol-global {\n
|
|
25929
|
+
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}";
|
|
25760
25930
|
var KolVersionDefaultStyle0 = defaultStyleCss;
|
|
25761
25931
|
|
|
25762
25932
|
class KolVersion {
|
|
@@ -25881,7 +26051,7 @@ exports.hydrateApp = hydrateApp;
|
|
|
25881
26051
|
}
|
|
25882
26052
|
|
|
25883
26053
|
/*
|
|
25884
|
-
Stencil Hydrate Runner v4.
|
|
26054
|
+
Stencil Hydrate Runner v4.20.0 | MIT Licensed | https://stenciljs.com
|
|
25885
26055
|
*/
|
|
25886
26056
|
var __defProp = Object.defineProperty;
|
|
25887
26057
|
var __export = (target, all) => {
|
|
@@ -36296,7 +36466,7 @@ function normalizeSerializationOptions(opts = {}) {
|
|
|
36296
36466
|
removeAttributeQuotes: typeof opts.removeAttributeQuotes !== "boolean" ? false : opts.removeAttributeQuotes,
|
|
36297
36467
|
removeBooleanAttributeQuotes: typeof opts.removeBooleanAttributeQuotes !== "boolean" ? false : opts.removeBooleanAttributeQuotes,
|
|
36298
36468
|
removeHtmlComments: typeof opts.removeHtmlComments !== "boolean" ? false : opts.removeHtmlComments,
|
|
36299
|
-
serializeShadowRoot: typeof opts.serializeShadowRoot !== "boolean" ?
|
|
36469
|
+
serializeShadowRoot: typeof opts.serializeShadowRoot !== "boolean" ? true : opts.serializeShadowRoot,
|
|
36300
36470
|
fullDocument: typeof opts.fullDocument !== "boolean" ? true : opts.fullDocument
|
|
36301
36471
|
};
|
|
36302
36472
|
}
|
|
@@ -36422,7 +36592,7 @@ style="${cssText}">`;
|
|
|
36422
36592
|
}
|
|
36423
36593
|
if (EMPTY_ELEMENTS.has(tagName) === false) {
|
|
36424
36594
|
const shadowRoot = node.shadowRoot;
|
|
36425
|
-
if (
|
|
36595
|
+
if (shadowRoot != null && opts.serializeShadowRoot) {
|
|
36426
36596
|
output.indent = output.indent + ((_c = opts.indentSpaces) != null ? _c : 0);
|
|
36427
36597
|
yield* streamToHtml(shadowRoot, opts, output);
|
|
36428
36598
|
output.indent = output.indent - ((_d = opts.indentSpaces) != null ? _d : 0);
|
|
@@ -40762,7 +40932,7 @@ var removeUnusedStyleText = (usedSelectors, diagnostics, styleElm) => {
|
|
|
40762
40932
|
|
|
40763
40933
|
// src/hydrate/runner/inspect-element.ts
|
|
40764
40934
|
function inspectElement(results, elm, depth) {
|
|
40765
|
-
const children = elm.children;
|
|
40935
|
+
const children = [...Array.from(elm.children), ...Array.from(elm.shadowRoot ? elm.shadowRoot.children : [])];
|
|
40766
40936
|
for (let i = 0, ii = children.length; i < ii; i++) {
|
|
40767
40937
|
const childElm = children[i];
|
|
40768
40938
|
const tagName = childElm.nodeName.toLowerCase();
|
|
@@ -41157,7 +41327,7 @@ function renderToString(html, options, asStream) {
|
|
|
41157
41327
|
const opts = normalizeHydrateOptions(options);
|
|
41158
41328
|
opts.serializeToHtml = true;
|
|
41159
41329
|
opts.fullDocument = typeof opts.fullDocument === "boolean" ? opts.fullDocument : true;
|
|
41160
|
-
opts.serializeShadowRoot =
|
|
41330
|
+
opts.serializeShadowRoot = typeof opts.serializeShadowRoot === "boolean" ? opts.serializeShadowRoot : true;
|
|
41161
41331
|
opts.constrainTimeouts = false;
|
|
41162
41332
|
return hydrateDocument(html, opts, asStream);
|
|
41163
41333
|
}
|
|
@@ -41214,7 +41384,7 @@ async function render(win, opts, results) {
|
|
|
41214
41384
|
});
|
|
41215
41385
|
}
|
|
41216
41386
|
initializeWindow(win, win.document, opts, results);
|
|
41217
|
-
const beforeHydrateFn = typeof opts.beforeHydrate === "function" ? opts.beforeHydrate
|
|
41387
|
+
const beforeHydrateFn = typeof opts.beforeHydrate === "function" ? opts.beforeHydrate : NOOP;
|
|
41218
41388
|
try {
|
|
41219
41389
|
await Promise.resolve(beforeHydrateFn(win.document));
|
|
41220
41390
|
return new Promise((resolve) => hydrateFactory(win, opts, results, afterHydrate, resolve));
|
|
@@ -41231,7 +41401,7 @@ function renderStream(win, opts, results) {
|
|
|
41231
41401
|
return Readable.from(processRender());
|
|
41232
41402
|
}
|
|
41233
41403
|
async function afterHydrate(win, opts, results, resolve) {
|
|
41234
|
-
const afterHydrateFn = typeof opts.afterHydrate === "function" ? opts.afterHydrate
|
|
41404
|
+
const afterHydrateFn = typeof opts.afterHydrate === "function" ? opts.afterHydrate : NOOP;
|
|
41235
41405
|
try {
|
|
41236
41406
|
await Promise.resolve(afterHydrateFn(win.document));
|
|
41237
41407
|
return resolve(finalizeHydrate(win, win.document, opts, results));
|