@public-ui/hydrate 3.0.0-alpha.0 → 3.0.0-rc.0
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 +271 -223
- package/dist/index.mjs +271 -223
- package/package.json +3 -3
package/dist/index.mjs
CHANGED
|
@@ -2675,7 +2675,7 @@ const inputCheckboxVariantOptions = ['button', 'default', 'switch'];
|
|
|
2675
2675
|
|
|
2676
2676
|
const koliBriQuoteVariantOptions = ['block', 'inline'];
|
|
2677
2677
|
|
|
2678
|
-
const cssResizeOptions = ['
|
|
2678
|
+
const cssResizeOptions = ['vertical', 'none'];
|
|
2679
2679
|
|
|
2680
2680
|
const getWindow$1 = () => (typeof window === 'undefined' ? null : window);
|
|
2681
2681
|
const getDocument = () => (typeof getWindow$1().document === 'undefined' ? null : getWindow$1().document);
|
|
@@ -4235,7 +4235,12 @@ const validateMsg = (component, value) => {
|
|
|
4235
4235
|
}
|
|
4236
4236
|
catch (e) {
|
|
4237
4237
|
}
|
|
4238
|
-
watchValidator(component, `_msg`, (value) => typeof value === '
|
|
4238
|
+
watchValidator(component, `_msg`, (value) => isObject$2(value) && typeof (value === null || value === void 0 ? void 0 : value._description) === 'string', new Set(['MsgPropType']), value, {
|
|
4239
|
+
defaultValue: {
|
|
4240
|
+
_description: '',
|
|
4241
|
+
_type: 'error',
|
|
4242
|
+
},
|
|
4243
|
+
});
|
|
4239
4244
|
});
|
|
4240
4245
|
};
|
|
4241
4246
|
|
|
@@ -4289,6 +4294,12 @@ const validateShow = (component, value, hooks) => {
|
|
|
4289
4294
|
watchBoolean(component, '_show', value, hooks);
|
|
4290
4295
|
};
|
|
4291
4296
|
|
|
4297
|
+
const validateSpellCheck = (component, value) => {
|
|
4298
|
+
watchBoolean(component, '_spellCheck', value, {
|
|
4299
|
+
defaultValue: undefined,
|
|
4300
|
+
});
|
|
4301
|
+
};
|
|
4302
|
+
|
|
4292
4303
|
const validateSuggestions = (component, value) => {
|
|
4293
4304
|
watchJsonArrayString(component, '_suggestions', (item) => typeof item === 'string' || typeof item === 'number', value, undefined, {
|
|
4294
4305
|
hooks: {
|
|
@@ -4425,7 +4436,7 @@ var KoliBriProgressVariantEnum;
|
|
|
4425
4436
|
KoliBriProgressVariantEnum["cycle"] = "cycle";
|
|
4426
4437
|
})(KoliBriProgressVariantEnum || (KoliBriProgressVariantEnum = {}));
|
|
4427
4438
|
|
|
4428
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n
|
|
4439
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-abbr {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
4429
4440
|
var KolAbbrDefaultStyle0 = defaultStyleCss$P;
|
|
4430
4441
|
|
|
4431
4442
|
class KolAbbr {
|
|
@@ -4589,7 +4600,7 @@ const KolCollapsibleFc = (props, children) => {
|
|
|
4589
4600
|
};
|
|
4590
4601
|
var KolCollapsibleFc$1 = KolCollapsibleFc;
|
|
4591
4602
|
|
|
4592
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n .collapsible {\n /* @see https://github.com/public-ui/kolibri/issues/5952 */\n /*\n * Inside a button, the caption text is always centered.\n * So we have to align the text to the left.\n */\n }\n .collapsible__wrapper {\n display: grid;\n grid-template-rows: 0fr;\n overflow: hidden;\n transition: grid-template-rows 0.3s;\n }\n .collapsible__wrapper-animation {\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 .open .collapsible__wrapper {\n grid-template-rows: 1fr;\n }\n .open .collapsible__wrapper-animation {\n visibility: visible;\n }\n @media (prefers-reduced-motion) {\n .collapsible__wrapper-animation, .collapsible__wrapper {\n transition-duration: 0s;\n }\n }\n @media print {\n :not(.open) .collapsible__wrapper-animation {\n display: none;\n }\n }\n .collapsible__heading-button button .kol-span-wc {\n justify-items: start;\n }\n}\n@layer kol-component {\n
|
|
4603
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n .collapsible {\n /* @see https://github.com/public-ui/kolibri/issues/5952 */\n /*\n * Inside a button, the caption text is always centered.\n * So we have to align the text to the left.\n */\n }\n .collapsible__wrapper {\n display: grid;\n grid-template-rows: 0fr;\n overflow: hidden;\n transition: grid-template-rows 0.3s;\n }\n .collapsible__wrapper-animation {\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 .open .collapsible__wrapper {\n grid-template-rows: 1fr;\n }\n .open .collapsible__wrapper-animation {\n visibility: visible;\n }\n @media (prefers-reduced-motion) {\n .collapsible__wrapper-animation, .collapsible__wrapper {\n transition-duration: 0s;\n }\n }\n @media print {\n :not(.open) .collapsible__wrapper-animation {\n display: none;\n }\n }\n .collapsible__heading-button button .kol-span-wc {\n justify-items: start;\n }\n}\n@layer kol-component {\n .kol-accordion {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
4593
4604
|
var KolAccordionDefaultStyle0 = defaultStyleCss$O;
|
|
4594
4605
|
|
|
4595
4606
|
featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
|
|
@@ -4632,7 +4643,7 @@ class KolAccordion {
|
|
|
4632
4643
|
}
|
|
4633
4644
|
render() {
|
|
4634
4645
|
const { _open, _label, _disabled, _level } = this.state;
|
|
4635
|
-
const rootClass = 'accordion';
|
|
4646
|
+
const rootClass = 'kol-accordion';
|
|
4636
4647
|
const props = {
|
|
4637
4648
|
id: this.nonce,
|
|
4638
4649
|
label: _label,
|
|
@@ -4652,7 +4663,7 @@ class KolAccordion {
|
|
|
4652
4663
|
animationClass: `${rootClass}__wrapper-animation`,
|
|
4653
4664
|
},
|
|
4654
4665
|
};
|
|
4655
|
-
return (hAsync(
|
|
4666
|
+
return (hAsync(KolCollapsibleFc$1, Object.assign({ key: '0d338813cf8d96de3d979be8c701ec2cbb623317' }, props), hAsync("slot", { key: '16ef50a83d37f7adbe4881202c48909078ddc135' })));
|
|
4656
4667
|
}
|
|
4657
4668
|
validateDisabled(value) {
|
|
4658
4669
|
validateDisabled(this, value);
|
|
@@ -4707,7 +4718,7 @@ class KolAccordion {
|
|
|
4707
4718
|
}; }
|
|
4708
4719
|
}
|
|
4709
4720
|
|
|
4710
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n
|
|
4721
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
4711
4722
|
var KolAlertDefaultStyle0 = defaultStyleCss$N;
|
|
4712
4723
|
|
|
4713
4724
|
class KolAlert {
|
|
@@ -4725,7 +4736,7 @@ class KolAlert {
|
|
|
4725
4736
|
};
|
|
4726
4737
|
}
|
|
4727
4738
|
render() {
|
|
4728
|
-
return (hAsync(
|
|
4739
|
+
return (hAsync(KolAlertWcTag, { key: 'bf0dcf3d99c23b32dce354988410b4e0534cce82', _alert: this._alert, _hasCloser: this._hasCloser, _label: this._label, _level: this._level, _on: this._on, _type: this._type, _variant: this._variant }, hAsync("slot", { key: '1248b1be19f50c8c2e33e234fd3c5aba760f866a' })));
|
|
4729
4740
|
}
|
|
4730
4741
|
static get style() { return {
|
|
4731
4742
|
default: KolAlertDefaultStyle0
|
|
@@ -4928,7 +4939,7 @@ if (processEnv === 'test') {
|
|
|
4928
4939
|
}
|
|
4929
4940
|
|
|
4930
4941
|
const Icon = ({ ariaLabel, icon }) => {
|
|
4931
|
-
return hAsync(KolIconTag, { class: "
|
|
4942
|
+
return hAsync(KolIconTag, { class: "kol-alert__heading-icon", _label: ariaLabel, _icons: icon });
|
|
4932
4943
|
};
|
|
4933
4944
|
const AlertIcon = ({ type, label }) => {
|
|
4934
4945
|
switch (type) {
|
|
@@ -4959,19 +4970,19 @@ const KolAlertFc = (props, children) => {
|
|
|
4959
4970
|
onAlertTimeout === null || onAlertTimeout === void 0 ? void 0 : onAlertTimeout();
|
|
4960
4971
|
}, 10000);
|
|
4961
4972
|
}
|
|
4962
|
-
const rootProps = Object.assign({ class: clsx('kol-alert
|
|
4973
|
+
const rootProps = Object.assign({ class: clsx('kol-alert', `kol-alert--${type}`, `kol-alert--${variant}`, { 'kol-alert--hasCloser': !!hasCloser }, classNames), role: alert ? 'alert' : undefined }, other);
|
|
4963
4974
|
return (hAsync("div", Object.assign({}, rootProps),
|
|
4964
|
-
hAsync("div", { class: "
|
|
4975
|
+
hAsync("div", { class: "kol-alert__container" },
|
|
4965
4976
|
hAsync(AlertIcon$1, { label: label, type: type }),
|
|
4966
|
-
hAsync("div", { class: "
|
|
4967
|
-
label ? hAsync(KolHeadingFc$1, { level: level }, label) : null,
|
|
4968
|
-
variant === 'msg' && hAsync("div", { class: "
|
|
4969
|
-
hasCloser && (hAsync(KolButtonWcTag, { class: "close", _ariaDescription: (label === null || label === void 0 ? void 0 : label.trim()) || '', _hideLabel: true, _icons: {
|
|
4977
|
+
hAsync("div", { class: "kol-alert__container-content" },
|
|
4978
|
+
label ? (hAsync(KolHeadingFc$1, { class: "kol-alert__heading", level: level }, label)) : null,
|
|
4979
|
+
variant === 'msg' && hAsync("div", { class: "kol-alert__content" }, children)),
|
|
4980
|
+
hasCloser && (hAsync(KolButtonWcTag, { class: "kol-alert__close-button close", _ariaDescription: (label === null || label === void 0 ? void 0 : label.trim()) || '', _hideLabel: true, _icons: {
|
|
4970
4981
|
left: {
|
|
4971
4982
|
icon: 'codicon codicon-close',
|
|
4972
4983
|
},
|
|
4973
4984
|
}, _label: translate('kol-close-alert'), _on: { onClick: onCloserClick }, _tooltipAlign: "left" }))),
|
|
4974
|
-
variant === 'card' && hAsync("div", { class: "
|
|
4985
|
+
variant === 'card' && hAsync("div", { class: "kol-alert__content" }, children)));
|
|
4975
4986
|
};
|
|
4976
4987
|
var KolAlertFc$1 = KolAlertFc;
|
|
4977
4988
|
|
|
@@ -5009,7 +5020,7 @@ class KolAlertWc {
|
|
|
5009
5020
|
onCloserClick: this.close,
|
|
5010
5021
|
onAlertTimeout: this.handleAlertTimeout,
|
|
5011
5022
|
};
|
|
5012
|
-
return (hAsync(
|
|
5023
|
+
return (hAsync(KolAlertFc$1, Object.assign({ key: 'ba6363b8cd8734edafa4fbd9f13f2cc9fd843daf' }, props), hAsync("slot", { key: '809bee8da04a4a666137fdbb101745d5797af17d' })));
|
|
5013
5024
|
}
|
|
5014
5025
|
validateAlert(value) {
|
|
5015
5026
|
watchBoolean(this, '_alert', value);
|
|
@@ -5073,7 +5084,7 @@ class KolAlertWc {
|
|
|
5073
5084
|
}; }
|
|
5074
5085
|
}
|
|
5075
5086
|
|
|
5076
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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
|
|
5087
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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-avatar {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n border-radius: 50%;\n overflow: hidden;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n /*theme?*/\n width: calc(100rem / var(--kolibri-root-font-size, 16));\n height: calc(100rem / var(--kolibri-root-font-size, 16));\n }\n .kol-avatar__image {\n width: 100%;\n height: 100%;\n }\n .kol-avatar__initials {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n /*theme?*/\n background-color: #d3d3d3;\n font-size: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
5077
5088
|
var KolAvatarDefaultStyle0 = defaultStyleCss$M;
|
|
5078
5089
|
|
|
5079
5090
|
class KolAvatar {
|
|
@@ -5083,7 +5094,7 @@ class KolAvatar {
|
|
|
5083
5094
|
this._label = undefined;
|
|
5084
5095
|
}
|
|
5085
5096
|
render() {
|
|
5086
|
-
return
|
|
5097
|
+
return hAsync(KolAvatarWcTag, { key: 'f4a53843b92e2d4a0fb20cec4b5b9f23f962a483', _src: this._src, _label: this._label });
|
|
5087
5098
|
}
|
|
5088
5099
|
static get style() { return {
|
|
5089
5100
|
default: KolAvatarDefaultStyle0
|
|
@@ -5128,7 +5139,7 @@ class KolAvatarWc {
|
|
|
5128
5139
|
};
|
|
5129
5140
|
}
|
|
5130
5141
|
render() {
|
|
5131
|
-
return (hAsync(
|
|
5142
|
+
return (hAsync("div", { key: '3343b9da0025b1db79bc3353197ed57e1ea15624', "aria-label": translate('kol-avatar-alt', { placeholders: { name: this.state._label } }), class: "kol-avatar", role: "img" }, this.state._src ? (hAsync("img", { alt: "", "aria-hidden": "true", class: "kol-avatar__image", src: this.state._src })) : (hAsync("span", { "aria-hidden": "true", class: "kol-avatar__initials" }, formatLabelAsInitials(this.state._label.trim())))));
|
|
5132
5143
|
}
|
|
5133
5144
|
validateSrc(value) {
|
|
5134
5145
|
validateImageSource(this, value);
|
|
@@ -13782,7 +13793,7 @@ const KolSpanFc = (props, children) => {
|
|
|
13782
13793
|
}
|
|
13783
13794
|
return (hAsync("span", Object.assign({ class: clsx('kol-span-wc', { 'hide-label': hideLabel }, classNames) }, other),
|
|
13784
13795
|
isObject$1(topIconProps) && hAsync(IconHelper$1, Object.assign({ class: "top" }, topIconProps)),
|
|
13785
|
-
hAsync("span",
|
|
13796
|
+
hAsync("span", { class: "kol-span__container" },
|
|
13786
13797
|
isObject$1(leftIconProps) && hAsync(IconHelper$1, Object.assign({ class: "left" }, leftIconProps)),
|
|
13787
13798
|
hAsync(SpanCoreHelper, { label: label, hideLabel: hideLabel, allowMarkdown: allowMarkdown, badgeText: badgeText }, children),
|
|
13788
13799
|
isObject$1(rightIconProps) && hAsync(IconHelper$1, Object.assign({ class: "right" }, rightIconProps))),
|
|
@@ -13799,7 +13810,7 @@ const ToastItemFc = (_a) => {
|
|
|
13799
13810
|
};
|
|
13800
13811
|
var KolToastItemFc = ToastItemFc;
|
|
13801
13812
|
|
|
13802
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n
|
|
13813
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-badge {\n display: inline-flex;\n place-items: center;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-badge .kol-badge__smart-button .button {\n color: inherit;\n }\n}";
|
|
13803
13814
|
var KolBadgeDefaultStyle0 = defaultStyleCss$L;
|
|
13804
13815
|
|
|
13805
13816
|
featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
|
|
@@ -13827,16 +13838,16 @@ class KolBadge {
|
|
|
13827
13838
|
};
|
|
13828
13839
|
}
|
|
13829
13840
|
renderSmartButton(props) {
|
|
13830
|
-
return (hAsync(KolButtonWcTag, { _ariaControls: this.id, _customClass: props._customClass, _disabled: props._disabled, _hideLabel: true, _icons: props._icons, _id: props._id, _label: props._label, _on: props._on, _tooltipAlign: props._tooltipAlign, _variant: props._variant }));
|
|
13841
|
+
return (hAsync(KolButtonWcTag, { class: "kol-badge__smart-button", _ariaControls: this.id, _customClass: props._customClass, _disabled: props._disabled, _hideLabel: true, _icons: props._icons, _id: props._id, _label: props._label, _on: props._on, _tooltipAlign: props._tooltipAlign, _variant: props._variant }));
|
|
13831
13842
|
}
|
|
13832
13843
|
render() {
|
|
13833
13844
|
const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;
|
|
13834
|
-
return (hAsync(
|
|
13835
|
-
'smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
|
|
13836
|
-
}, style: {
|
|
13845
|
+
return (hAsync("span", { key: 'c04540b377e88484c6c982be4d411937ef3618ef', class: clsx('kol-badge', {
|
|
13846
|
+
'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
|
|
13847
|
+
}), style: {
|
|
13837
13848
|
backgroundColor: this.bgColorStr,
|
|
13838
13849
|
color: this.colorStr,
|
|
13839
|
-
} }, hAsync(KolSpanFc$1, { key: '
|
|
13850
|
+
} }, hAsync(KolSpanFc$1, { key: 'd01ea028555a90f21229d1584bfb93a5c2a00c25', class: "kol-badge__label", id: hasSmartButton ? this.id : undefined, allowMarkdown: true, icons: this.state._icons, label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton)));
|
|
13840
13851
|
}
|
|
13841
13852
|
validateIcons(value) {
|
|
13842
13853
|
validateIcons(this, value);
|
|
@@ -13906,7 +13917,7 @@ const watchNavLinks = (className, component, value) => {
|
|
|
13906
13917
|
uiUxHintMillerscheZahl(className, component.state._links.length);
|
|
13907
13918
|
};
|
|
13908
13919
|
|
|
13909
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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
|
|
13920
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-breadcrumb {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-breadcrumb__list, .kol-breadcrumb__list-element {\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-breadcrumb__icon::part(separator) {\n font-weight: 900;\n font-size: 0.7em;\n }\n .kol-breadcrumb__icon::part(separator):before {\n content: \"\\f054\";\n font-family: \"Font Awesome 6 Free\";\n }\n}";
|
|
13910
13921
|
var KolBreadcrumbDefaultStyle0 = defaultStyleCss$K;
|
|
13911
13922
|
|
|
13912
13923
|
class KolBreadcrumb {
|
|
@@ -13914,7 +13925,7 @@ class KolBreadcrumb {
|
|
|
13914
13925
|
registerInstance(this, hostRef);
|
|
13915
13926
|
this.renderLink = (link, index) => {
|
|
13916
13927
|
const lastIndex = this.state._links.length - 1;
|
|
13917
|
-
return (hAsync("li", { key: index }, index !== 0 && hAsync(KolIconTag, { _label: "", _icons: "codicon codicon-chevron-right" }), index === lastIndex ? (hAsync("span",
|
|
13928
|
+
return (hAsync("li", { class: "kol-breadcrumb__list-element", key: index }, index !== 0 && hAsync(KolIconTag, { class: "kol-breadcrumb__icon", _label: "", _icons: "codicon codicon-chevron-right" }), index === lastIndex ? (hAsync("span", { class: "kol-breadcrumb__list-element-span" }, link._hideLabel ? (hAsync(KolIconTag, { class: "kol-breadcrumb__icon", _label: link._label, _icons: typeof link._icons === 'string' ? link._icons : 'codicon codicon-symbol-event' })) : (hAsync(Fragment, null, link._label)))) : (hAsync(KolLinkTag, Object.assign({ class: "kol-breadcrumb__link" }, link)))));
|
|
13918
13929
|
};
|
|
13919
13930
|
this._label = undefined;
|
|
13920
13931
|
this._links = undefined;
|
|
@@ -13924,7 +13935,7 @@ class KolBreadcrumb {
|
|
|
13924
13935
|
};
|
|
13925
13936
|
}
|
|
13926
13937
|
render() {
|
|
13927
|
-
return (hAsync(
|
|
13938
|
+
return (hAsync("nav", { key: 'd086ccf1b9fccd3c2d9afe55f56a285e58f451f5', class: "kol-breadcrumb", "aria-label": this.state._label }, hAsync("ul", { key: 'ea55b4eed94749a422d06e470f3f09b75e0a7978', class: "kol-breadcrumb__list" }, this.state._links.length === 0 && (hAsync("li", { key: 'e601d2603ba034b4b0d553138f1d4e762fc372e8' }, hAsync(KolIconTag, { key: '025141bd396636bccac3f3991f6a91cfa1ad994c', class: "kol-breadcrumb_icon", _label: "", _icons: "codicon codicon-home" }), "\u2026")), this.state._links.map(this.renderLink))));
|
|
13928
13939
|
}
|
|
13929
13940
|
validateLabel(value, _oldValue, initial = false) {
|
|
13930
13941
|
if (!initial) {
|
|
@@ -13967,7 +13978,7 @@ class KolBreadcrumb {
|
|
|
13967
13978
|
}; }
|
|
13968
13979
|
}
|
|
13969
13980
|
|
|
13970
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n display: inline-
|
|
13981
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n display: inline-block;\n }\n .kol-button {\n font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n display: inline-flex;\n place-items: center;\n text-align: center;\n text-decoration-line: none;\n }\n .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-button__text {\n margin: auto;\n width: 100%;\n }\n}";
|
|
13971
13982
|
var KolButtonDefaultStyle0 = defaultStyleCss$J;
|
|
13972
13983
|
|
|
13973
13984
|
class KolButton {
|
|
@@ -14009,11 +14020,7 @@ class KolButton {
|
|
|
14009
14020
|
await ((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
14010
14021
|
}
|
|
14011
14022
|
render() {
|
|
14012
|
-
return (hAsync(
|
|
14013
|
-
button: true,
|
|
14014
|
-
[this._variant]: this._variant !== 'custom',
|
|
14015
|
-
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
14016
|
-
}, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: this._role, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: '15e025998e347f99b5e416c3e8723709993ffe61', name: "expert", slot: "expert" }))));
|
|
14023
|
+
return (hAsync(KolButtonWcTag, { key: 'd74adc5d321851f61762796d8bc7704630bf678d', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: this._role, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: '7ef100de9bb79db5d6df653e478248ec2c155d6c', name: "expert", slot: "expert" })));
|
|
14017
14024
|
}
|
|
14018
14025
|
static get delegatesFocus() { return true; }
|
|
14019
14026
|
static get style() { return {
|
|
@@ -14062,7 +14069,7 @@ class KolButtonGroup {
|
|
|
14062
14069
|
registerInstance(this, hostRef);
|
|
14063
14070
|
}
|
|
14064
14071
|
render() {
|
|
14065
|
-
return (hAsync(Host, { key: '
|
|
14072
|
+
return (hAsync(Host, { key: '859d76bf37969aba5cfdfa3fc9555fc5ee60ebde', class: "kol-button-group" }, hAsync(KolButtonGroupWcTag, { key: '60c9389260e9e39cc4b6fb8f287b64f16602cfa4' }, hAsync("slot", { key: 'ba334585ca6ab96575c4e092894a42191316d262' }))));
|
|
14066
14073
|
}
|
|
14067
14074
|
static get style() { return {
|
|
14068
14075
|
default: KolButtonGroupDefaultStyle0
|
|
@@ -14083,7 +14090,7 @@ class KolButtonGroupWc {
|
|
|
14083
14090
|
this.state = {};
|
|
14084
14091
|
}
|
|
14085
14092
|
render() {
|
|
14086
|
-
return (hAsync(Host, { key: '
|
|
14093
|
+
return (hAsync(Host, { key: 'ec4ee946ebeb064b30d8ba75d68efd4f3b402113', class: "kol-button-group-wc" }, hAsync("slot", { key: 'bd9e1b63bafc3b550ad2c41a4b1ef0ccb35f554a' })));
|
|
14087
14094
|
}
|
|
14088
14095
|
static get cmpMeta() { return {
|
|
14089
14096
|
"$flags$": 4,
|
|
@@ -14097,7 +14104,7 @@ class KolButtonGroupWc {
|
|
|
14097
14104
|
}; }
|
|
14098
14105
|
}
|
|
14099
14106
|
|
|
14100
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n display: inline-block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n
|
|
14107
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n display: inline-block;\n }\n .kol-button {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n align-items: baseline;\n display: inline-flex;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-button__text .span-label {\n text-decoration-line: underline;\n }\n .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .span-label {\n text-decoration-thickness: 0.2em;\n }\n .kol-button__icon {\n display: inline-flex;\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
14101
14108
|
var KolButtonLinkDefaultStyle0 = defaultStyleCss$H;
|
|
14102
14109
|
|
|
14103
14110
|
class KolButtonLink {
|
|
@@ -14137,7 +14144,7 @@ class KolButtonLink {
|
|
|
14137
14144
|
await ((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
14138
14145
|
}
|
|
14139
14146
|
render() {
|
|
14140
|
-
return (hAsync(
|
|
14147
|
+
return (hAsync(KolButtonWcTag, { key: '3566bfb062755bd587714fe4b0d6959a1a21ec0a', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: "link", _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value }, hAsync("slot", { key: '3a73d1c46119f2c07a26c301e4902aa3a33bec4d', name: "expert", slot: "expert" })));
|
|
14141
14148
|
}
|
|
14142
14149
|
static get delegatesFocus() { return true; }
|
|
14143
14150
|
static get style() { return {
|
|
@@ -14459,13 +14466,12 @@ class KolButtonWc {
|
|
|
14459
14466
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
14460
14467
|
const hasAriaDescription = Boolean((_b = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length);
|
|
14461
14468
|
const badgeText = this.state._accessKey || this.state._shortKey;
|
|
14462
|
-
return (hAsync(Host, { key: '
|
|
14463
|
-
button: true,
|
|
14464
|
-
|
|
14465
|
-
|
|
14469
|
+
return (hAsync(Host, { key: 'b5c2ac2e731dd10544f9c71407af84416a975bb4' }, hAsync("button", Object.assign({ key: '0061da67948db0f2908c56ffbab791e523d92980', ref: this.catchRef, accessKey: this.state._accessKey || undefined, "aria-controls": this.state._ariaControls, "aria-describedby": hasAriaDescription ? this.internalDescriptionById : undefined, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: clsx('kol-button', {
|
|
14470
|
+
'kol-button--disabled': this.state._disabled === true,
|
|
14471
|
+
[`kol-button--${this.state._variant}`]: this.state._variant !== 'custom',
|
|
14472
|
+
'kol-button--hide-label': this.state._hideLabel === true,
|
|
14466
14473
|
[this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
14467
|
-
|
|
14468
|
-
}, disabled: this.state._disabled, id: this.state._id, name: this.state._name }, this.state._on, { onClick: this.onClick, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }), hAsync(KolSpanFc$1, { key: 'ac80cc701a605464c052758624104854479722a6', class: "button-inner", badgeText: badgeText, icons: this.state._icons, hideLabel: this.state._hideLabel, label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: 'a31842754a7dea83cfb1994f539c080214643a0e', name: "expert", slot: "expert" }))), hAsync(KolTooltipWcTag, { key: '05c7dc30dcbb54011f260b1f88b3d6f66335354f', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _badgeText: badgeText, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' }), hasAriaDescription && (hAsync("span", { key: '03ae4ee27c5a5a478325df049367289eb5549b49', class: "visually-hidden", id: this.internalDescriptionById }, this.state._ariaDescription))));
|
|
14474
|
+
}), disabled: this.state._disabled, id: this.state._id, name: this.state._name }, this.state._on, { onClick: this.onClick, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }), hAsync(KolSpanFc$1, { key: 'df37ce2b6f15f6eb9c342e0f09dde55bb65d024d', class: "kol-button__text", badgeText: badgeText, icons: this.state._icons, hideLabel: this.state._hideLabel, label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: '4577c332777a8761b974ab055a9c6816aa731807', name: "expert", slot: "expert" }))), hAsync(KolTooltipWcTag, { key: '8be293bcc3398c54f62c37dfa7aa3ffefa5316be', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, class: "kol-button__tooltip", _badgeText: badgeText, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' }), hasAriaDescription && (hAsync("span", { key: 'd689b0fe195e7129f0e7ae269499c73f0016317b', class: "visually-hidden", id: this.internalDescriptionById }, this.state._ariaDescription))));
|
|
14469
14475
|
}
|
|
14470
14476
|
constructor(hostRef) {
|
|
14471
14477
|
registerInstance(this, hostRef);
|
|
@@ -14702,7 +14708,7 @@ class KolCard {
|
|
|
14702
14708
|
};
|
|
14703
14709
|
}
|
|
14704
14710
|
render() {
|
|
14705
|
-
return (hAsync(Host, { key: '
|
|
14711
|
+
return (hAsync(Host, { key: '0514ca84873f8233a1d3b5c877418a0ee677825a', class: "kol-card" }, hAsync("div", { key: '7bc5379226bc5a36b08e62d3f7904c94b77529fd', class: "card" }, hAsync("div", { key: '0b9a2107ed449ea24982fca8bb826181ef372e11', class: "header" }, hAsync(KolHeadingFc$1, { key: 'f790fe8db3881f5ee2a072db89c18b2533c848a6', level: this.state._level }, this.state._label)), hAsync("div", { key: '3d16554f404aca47c3527bf1504f3903f943f620', class: "content" }, hAsync("slot", { key: '064b2356248dc9f161a19977fe3a1f7e33e9782f' })), this.state._hasCloser && (hAsync(KolButtonWcTag, { key: '52210d7f1e9d14d6a7bf1a42e241d83fc7d336a3', class: "close", _hideLabel: true, _icons: {
|
|
14706
14712
|
left: {
|
|
14707
14713
|
icon: 'codicon codicon-close',
|
|
14708
14714
|
},
|
|
@@ -14805,11 +14811,15 @@ class InputController extends ControlledInputController {
|
|
|
14805
14811
|
validateTooltipAlign(this.component, value);
|
|
14806
14812
|
}
|
|
14807
14813
|
validateError(value) {
|
|
14808
|
-
|
|
14809
|
-
|
|
14810
|
-
|
|
14811
|
-
|
|
14812
|
-
|
|
14814
|
+
if (typeof value === 'string' && value.length > 0) {
|
|
14815
|
+
this.validateMsg({
|
|
14816
|
+
_description: value,
|
|
14817
|
+
_type: 'error',
|
|
14818
|
+
});
|
|
14819
|
+
}
|
|
14820
|
+
else {
|
|
14821
|
+
this.validateMsg(undefined);
|
|
14822
|
+
}
|
|
14813
14823
|
}
|
|
14814
14824
|
validateHideError(value) {
|
|
14815
14825
|
validateHideError(this.component, value, {
|
|
@@ -14877,7 +14887,9 @@ class InputController extends ControlledInputController {
|
|
|
14877
14887
|
this.validateAccessKey(this.component._accessKey);
|
|
14878
14888
|
this.validateAdjustHeight(this.component._adjustHeight);
|
|
14879
14889
|
this.validateError(this.component._error);
|
|
14880
|
-
|
|
14890
|
+
if (this.component._msg) {
|
|
14891
|
+
this.validateMsg(this.component._msg);
|
|
14892
|
+
}
|
|
14881
14893
|
this.validateDisabled(this.component._disabled);
|
|
14882
14894
|
this.validateHideError(this.component._hideError);
|
|
14883
14895
|
this.validateHideLabel(this.component._hideLabel);
|
|
@@ -15099,18 +15111,18 @@ class KolCombobox {
|
|
|
15099
15111
|
render() {
|
|
15100
15112
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
15101
15113
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
15102
|
-
return (hAsync(Host, { key: '
|
|
15114
|
+
return (hAsync(Host, { key: 'f3a2b3b47eb7c3d14ffb7ae7665b162efc86a23e', class: "kol-combobox" }, hAsync("div", { key: '478b75709cc76763787cd736cac30f55faf5f75a', class: clsx('combobox', this.state._disabled && 'combobox--disabled') }, hAsync(KolInputTag, { key: '1ff01b15c607357c0862dc5d5b80a149591d0ea5', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '4d8e406ea57888b41b070a3a3d6ef341359f4a1b', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '888c985db574e68b580adf18e861d9b5a8b104cf', slot: "input" }, hAsync("div", { key: '0a9902f08a813d3086ac11a13b6cfd4351b49868', class: "combobox__group" }, hAsync("input", Object.assign({ key: '1ae9af16462d6c678f063346666726e11a13ebd0', ref: this.catchRef, class: "combobox__input", type: "text", role: "combobox", "aria-autocomplete": "both", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-controls": "listbox", value: this.state._value, 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, "aria-labelledby": this.state._id, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onFocus: (event) => {
|
|
15103
15115
|
this.controller.onFacade.onFocus(event);
|
|
15104
15116
|
this.inputHasFocus = true;
|
|
15105
15117
|
}, onBlur: (event) => {
|
|
15106
15118
|
this.controller.onFacade.onBlur(event);
|
|
15107
15119
|
this.inputHasFocus = false;
|
|
15108
|
-
}, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder })), hAsync("button", { key: '
|
|
15120
|
+
}, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder })), hAsync("button", { key: 'f2557973f6c4ecc11fb4095a9da33fd06ba28afd', tabindex: "-1", class: "combobox__icon", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '9b3182ea074ea313c48b517ec9b277341fe599b4', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: 'db95ce6d6ea44ce1995b3e7bc7aa2606ab2ca147', role: "listbox", class: clsx('combobox__listbox', this.blockSuggestionMouseOver && 'combobox__listbox--cursor-hidden'), onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
|
|
15109
15121
|
this._filteredSuggestions.length > 0 &&
|
|
15110
15122
|
this._filteredSuggestions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
|
|
15111
15123
|
if (el)
|
|
15112
15124
|
this.refSuggestions[index] = el;
|
|
15113
|
-
}, "data-index": index, tabIndex: -1, role: "option", "aria-selected": this.state._value === option, onClick: (e) => {
|
|
15125
|
+
}, "data-index": index, tabIndex: -1, role: "option", "aria-selected": this.state._value === option ? 'true' : undefined, onClick: (e) => {
|
|
15114
15126
|
this.selectOption(e, option);
|
|
15115
15127
|
this.toggleListbox();
|
|
15116
15128
|
}, onMouseOver: () => {
|
|
@@ -15496,7 +15508,7 @@ class KolDetails {
|
|
|
15496
15508
|
animationClass: `${rootClass}__wrapper-animation`,
|
|
15497
15509
|
},
|
|
15498
15510
|
};
|
|
15499
|
-
return (hAsync(Host, { key: '
|
|
15511
|
+
return (hAsync(Host, { key: '6edf40cf0a5988eb2dac8663915c6af44efea262', class: "kol-details" }, hAsync(KolCollapsibleFc$1, Object.assign({ key: '037423bb77f3a0215ce07a96d4ca2c46b6a8e779' }, props), hAsync("slot", { key: 'af3986e063757e9eb05e2ff517f7be5ec394e97c' }))));
|
|
15500
15512
|
}
|
|
15501
15513
|
validateDisabled(value) {
|
|
15502
15514
|
validateDisabled(this, value);
|
|
@@ -15597,7 +15609,7 @@ class KolDrawer {
|
|
|
15597
15609
|
}
|
|
15598
15610
|
render() {
|
|
15599
15611
|
const isModal = this.state._modal;
|
|
15600
|
-
return (hAsync(Host, { key: '
|
|
15612
|
+
return (hAsync(Host, { key: '52761665e7dffba35a15fa3746b717fb8ddf9653', class: `kol-drawer drawer ${isModal ? 'drawer--modal' : ''}`, ref: (el) => (this.hostElement = el) }, hAsync("dialog", { key: '4be7ac04f833c62772314351aeda90c167624276', class: "drawer__dialog", ref: this.getRef }, this.renderDialogContent())));
|
|
15601
15613
|
}
|
|
15602
15614
|
validateLabel(value) {
|
|
15603
15615
|
validateLabel(this, value, {
|
|
@@ -15684,7 +15696,7 @@ class KolDrawer {
|
|
|
15684
15696
|
}; }
|
|
15685
15697
|
}
|
|
15686
15698
|
|
|
15687
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1;\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 margin-left: calc(8rem / 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 calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
15699
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n :host {\n display: inline-block;\n }\n .kol-link {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n align-items: baseline;\n display: inline-flex;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-link__text .span-label {\n text-decoration-line: underline;\n }\n .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .span-label {\n text-decoration-thickness: 0.2em;\n }\n .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
15688
15700
|
var KolFormDefaultStyle0 = defaultStyleCss$C;
|
|
15689
15701
|
|
|
15690
15702
|
class KolForm {
|
|
@@ -15724,7 +15736,7 @@ class KolForm {
|
|
|
15724
15736
|
this.state = {};
|
|
15725
15737
|
}
|
|
15726
15738
|
renderErrorList(errorList) {
|
|
15727
|
-
return (hAsync(KolAlertFc$1, { type: "error", variant: "card", label: translate('kol-error-list-message') }, hAsync("nav", { "aria-label": translate('kol-error-list') }, hAsync("ul", null, errorList === null || errorList === void 0 ? void 0 : errorList.map((error, index) => (hAsync("li", { key: index }, hAsync(KolLinkWcTag, { _href: error.selector, _label: error.message, _on: { onClick: this.handleLinkClick }, ref: (el) => {
|
|
15739
|
+
return (hAsync(KolAlertFc$1, { type: "error", variant: "card", label: translate('kol-error-list-message') }, hAsync("nav", { "aria-label": translate('kol-error-list') }, hAsync("ul", null, errorList === null || errorList === void 0 ? void 0 : errorList.map((error, index) => (hAsync("li", { key: index }, hAsync(KolLinkWcTag, { class: "kol-form__link", _href: error.selector, _label: error.message, _on: { onClick: this.handleLinkClick }, ref: (el) => {
|
|
15728
15740
|
if (index === 0)
|
|
15729
15741
|
this.errorListElement = el;
|
|
15730
15742
|
} }))))))));
|
|
@@ -15734,7 +15746,7 @@ class KolForm {
|
|
|
15734
15746
|
}
|
|
15735
15747
|
render() {
|
|
15736
15748
|
const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
|
|
15737
|
-
return (hAsync(Host, { key: '
|
|
15749
|
+
return (hAsync(Host, { key: '673942698f0a7b852daa36da30edf08c91e80d0a', class: "kol-form" }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
|
|
15738
15750
|
}
|
|
15739
15751
|
async focusErrorList() {
|
|
15740
15752
|
var _a;
|
|
@@ -15823,7 +15835,7 @@ class KolHeading {
|
|
|
15823
15835
|
}
|
|
15824
15836
|
render() {
|
|
15825
15837
|
const { _secondaryHeadline, _label, _level, _variant } = this.state;
|
|
15826
|
-
return (hAsync(Host, { key: '
|
|
15838
|
+
return (hAsync(Host, { key: '952386113c459df388a6a01a028a7f6133f85bee', class: "kol-heading" }, hAsync(KolHeadingFc$1, { key: 'f23310184f177cdb4d619caf488b11e9c2fd938b', secondaryHeadline: _secondaryHeadline, level: _level, variant: _variant }, _label, hAsync("slot", { key: '23960037e8df4c8b5691fb6c8682d3f0ee864fdf', name: "expert", slot: "expert" }))));
|
|
15827
15839
|
}
|
|
15828
15840
|
static get watchers() { return {
|
|
15829
15841
|
"_label": ["validateLabel"],
|
|
@@ -15850,7 +15862,7 @@ class KolHeading {
|
|
|
15850
15862
|
}; }
|
|
15851
15863
|
}
|
|
15852
15864
|
|
|
15853
|
-
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}";
|
|
15865
|
+
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?be64b7213e352cd7f91ef58198e71237\") format(\"truetype\");\n}\n.codicon[class*=codicon-] {\n font: normal normal normal 16px/1 codicon;\n display: inline-block;\n text-decoration: none;\n text-rendering: auto;\n text-align: center;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n user-select: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n}\n\n/*---------------------\n * Modifiers\n *-------------------*/\n@keyframes codicon-spin {\n 100% {\n transform: rotate(360deg);\n }\n}\n.codicon-sync.codicon-modifier-spin,\n.codicon-loading.codicon-modifier-spin,\n.codicon-gear.codicon-modifier-spin {\n /* Use steps to throttle FPS to reduce CPU usage */\n animation: codicon-spin 1.5s steps(30) infinite;\n}\n\n.codicon-modifier-disabled {\n opacity: 0.5;\n}\n\n.codicon-modifier-hidden {\n opacity: 0;\n}\n\n/* custom speed & easing for loading icon */\n.codicon-loading {\n animation-duration: 1s !important;\n animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67) !important;\n}\n\n/*---------------------\n * Icons\n *-------------------*/\n.codicon-add:before {\n content: \"\\ea60\";\n}\n\n.codicon-plus:before {\n content: \"\\ea60\";\n}\n\n.codicon-gist-new:before {\n content: \"\\ea60\";\n}\n\n.codicon-repo-create:before {\n content: \"\\ea60\";\n}\n\n.codicon-lightbulb:before {\n content: \"\\ea61\";\n}\n\n.codicon-light-bulb:before {\n content: \"\\ea61\";\n}\n\n.codicon-repo:before {\n content: \"\\ea62\";\n}\n\n.codicon-repo-delete:before {\n content: \"\\ea62\";\n}\n\n.codicon-gist-fork:before {\n content: \"\\ea63\";\n}\n\n.codicon-repo-forked:before {\n content: \"\\ea63\";\n}\n\n.codicon-git-pull-request:before {\n content: \"\\ea64\";\n}\n\n.codicon-git-pull-request-abandoned:before {\n content: \"\\ea64\";\n}\n\n.codicon-record-keys:before {\n content: \"\\ea65\";\n}\n\n.codicon-keyboard:before {\n content: \"\\ea65\";\n}\n\n.codicon-tag:before {\n content: \"\\ea66\";\n}\n\n.codicon-git-pull-request-label:before {\n content: \"\\ea66\";\n}\n\n.codicon-tag-add:before {\n content: \"\\ea66\";\n}\n\n.codicon-tag-remove:before {\n content: \"\\ea66\";\n}\n\n.codicon-person:before {\n content: \"\\ea67\";\n}\n\n.codicon-person-follow:before {\n content: \"\\ea67\";\n}\n\n.codicon-person-outline:before {\n content: \"\\ea67\";\n}\n\n.codicon-person-filled:before {\n content: \"\\ea67\";\n}\n\n.codicon-git-branch:before {\n content: \"\\ea68\";\n}\n\n.codicon-git-branch-create:before {\n content: \"\\ea68\";\n}\n\n.codicon-git-branch-delete:before {\n content: \"\\ea68\";\n}\n\n.codicon-source-control:before {\n content: \"\\ea68\";\n}\n\n.codicon-mirror:before {\n content: \"\\ea69\";\n}\n\n.codicon-mirror-public:before {\n content: \"\\ea69\";\n}\n\n.codicon-star:before {\n content: \"\\ea6a\";\n}\n\n.codicon-star-add:before {\n content: \"\\ea6a\";\n}\n\n.codicon-star-delete:before {\n content: \"\\ea6a\";\n}\n\n.codicon-star-empty:before {\n content: \"\\ea6a\";\n}\n\n.codicon-comment:before {\n content: \"\\ea6b\";\n}\n\n.codicon-comment-add:before {\n content: \"\\ea6b\";\n}\n\n.codicon-alert:before {\n content: \"\\ea6c\";\n}\n\n.codicon-warning:before {\n content: \"\\ea6c\";\n}\n\n.codicon-search:before {\n content: \"\\ea6d\";\n}\n\n.codicon-search-save:before {\n content: \"\\ea6d\";\n}\n\n.codicon-log-out:before {\n content: \"\\ea6e\";\n}\n\n.codicon-sign-out:before {\n content: \"\\ea6e\";\n}\n\n.codicon-log-in:before {\n content: \"\\ea6f\";\n}\n\n.codicon-sign-in:before {\n content: \"\\ea6f\";\n}\n\n.codicon-eye:before {\n content: \"\\ea70\";\n}\n\n.codicon-eye-unwatch:before {\n content: \"\\ea70\";\n}\n\n.codicon-eye-watch:before {\n content: \"\\ea70\";\n}\n\n.codicon-circle-filled:before {\n content: \"\\ea71\";\n}\n\n.codicon-primitive-dot:before {\n content: \"\\ea71\";\n}\n\n.codicon-close-dirty:before {\n content: \"\\ea71\";\n}\n\n.codicon-debug-breakpoint:before {\n content: \"\\ea71\";\n}\n\n.codicon-debug-breakpoint-disabled:before {\n content: \"\\ea71\";\n}\n\n.codicon-debug-hint:before {\n content: \"\\ea71\";\n}\n\n.codicon-terminal-decoration-success:before {\n content: \"\\ea71\";\n}\n\n.codicon-primitive-square:before {\n content: \"\\ea72\";\n}\n\n.codicon-edit:before {\n content: \"\\ea73\";\n}\n\n.codicon-pencil:before {\n content: \"\\ea73\";\n}\n\n.codicon-info:before {\n content: \"\\ea74\";\n}\n\n.codicon-issue-opened:before {\n content: \"\\ea74\";\n}\n\n.codicon-gist-private:before {\n content: \"\\ea75\";\n}\n\n.codicon-git-fork-private:before {\n content: \"\\ea75\";\n}\n\n.codicon-lock:before {\n content: \"\\ea75\";\n}\n\n.codicon-mirror-private:before {\n content: \"\\ea75\";\n}\n\n.codicon-close:before {\n content: \"\\ea76\";\n}\n\n.codicon-remove-close:before {\n content: \"\\ea76\";\n}\n\n.codicon-x:before {\n content: \"\\ea76\";\n}\n\n.codicon-repo-sync:before {\n content: \"\\ea77\";\n}\n\n.codicon-sync:before {\n content: \"\\ea77\";\n}\n\n.codicon-clone:before {\n content: \"\\ea78\";\n}\n\n.codicon-desktop-download:before {\n content: \"\\ea78\";\n}\n\n.codicon-beaker:before {\n content: \"\\ea79\";\n}\n\n.codicon-microscope:before {\n content: \"\\ea79\";\n}\n\n.codicon-vm:before {\n content: \"\\ea7a\";\n}\n\n.codicon-device-desktop:before {\n content: \"\\ea7a\";\n}\n\n.codicon-file:before {\n content: \"\\ea7b\";\n}\n\n.codicon-file-text:before {\n content: \"\\ea7b\";\n}\n\n.codicon-more:before {\n content: \"\\ea7c\";\n}\n\n.codicon-ellipsis:before {\n content: \"\\ea7c\";\n}\n\n.codicon-kebab-horizontal:before {\n content: \"\\ea7c\";\n}\n\n.codicon-mail-reply:before {\n content: \"\\ea7d\";\n}\n\n.codicon-reply:before {\n content: \"\\ea7d\";\n}\n\n.codicon-organization:before {\n content: \"\\ea7e\";\n}\n\n.codicon-organization-filled:before {\n content: \"\\ea7e\";\n}\n\n.codicon-organization-outline:before {\n content: \"\\ea7e\";\n}\n\n.codicon-new-file:before {\n content: \"\\ea7f\";\n}\n\n.codicon-file-add:before {\n content: \"\\ea7f\";\n}\n\n.codicon-new-folder:before {\n content: \"\\ea80\";\n}\n\n.codicon-file-directory-create:before {\n content: \"\\ea80\";\n}\n\n.codicon-trash:before {\n content: \"\\ea81\";\n}\n\n.codicon-trashcan:before {\n content: \"\\ea81\";\n}\n\n.codicon-history:before {\n content: \"\\ea82\";\n}\n\n.codicon-clock:before {\n content: \"\\ea82\";\n}\n\n.codicon-folder:before {\n content: \"\\ea83\";\n}\n\n.codicon-file-directory:before {\n content: \"\\ea83\";\n}\n\n.codicon-symbol-folder:before {\n content: \"\\ea83\";\n}\n\n.codicon-logo-github:before {\n content: \"\\ea84\";\n}\n\n.codicon-mark-github:before {\n content: \"\\ea84\";\n}\n\n.codicon-github:before {\n content: \"\\ea84\";\n}\n\n.codicon-terminal:before {\n content: \"\\ea85\";\n}\n\n.codicon-console:before {\n content: \"\\ea85\";\n}\n\n.codicon-repl:before {\n content: \"\\ea85\";\n}\n\n.codicon-zap:before {\n content: \"\\ea86\";\n}\n\n.codicon-symbol-event:before {\n content: \"\\ea86\";\n}\n\n.codicon-error:before {\n content: \"\\ea87\";\n}\n\n.codicon-stop:before {\n content: \"\\ea87\";\n}\n\n.codicon-variable:before {\n content: \"\\ea88\";\n}\n\n.codicon-symbol-variable:before {\n content: \"\\ea88\";\n}\n\n.codicon-array:before {\n content: \"\\ea8a\";\n}\n\n.codicon-symbol-array:before {\n content: \"\\ea8a\";\n}\n\n.codicon-symbol-module:before {\n content: \"\\ea8b\";\n}\n\n.codicon-symbol-package:before {\n content: \"\\ea8b\";\n}\n\n.codicon-symbol-namespace:before {\n content: \"\\ea8b\";\n}\n\n.codicon-symbol-object:before {\n content: \"\\ea8b\";\n}\n\n.codicon-symbol-method:before {\n content: \"\\ea8c\";\n}\n\n.codicon-symbol-function:before {\n content: \"\\ea8c\";\n}\n\n.codicon-symbol-constructor:before {\n content: \"\\ea8c\";\n}\n\n.codicon-symbol-boolean:before {\n content: \"\\ea8f\";\n}\n\n.codicon-symbol-null:before {\n content: \"\\ea8f\";\n}\n\n.codicon-symbol-numeric:before {\n content: \"\\ea90\";\n}\n\n.codicon-symbol-number:before {\n content: \"\\ea90\";\n}\n\n.codicon-symbol-structure:before {\n content: \"\\ea91\";\n}\n\n.codicon-symbol-struct:before {\n content: \"\\ea91\";\n}\n\n.codicon-symbol-parameter:before {\n content: \"\\ea92\";\n}\n\n.codicon-symbol-type-parameter:before {\n content: \"\\ea92\";\n}\n\n.codicon-symbol-key:before {\n content: \"\\ea93\";\n}\n\n.codicon-symbol-text:before {\n content: \"\\ea93\";\n}\n\n.codicon-symbol-reference:before {\n content: \"\\ea94\";\n}\n\n.codicon-go-to-file:before {\n content: \"\\ea94\";\n}\n\n.codicon-symbol-enum:before {\n content: \"\\ea95\";\n}\n\n.codicon-symbol-value:before {\n content: \"\\ea95\";\n}\n\n.codicon-symbol-ruler:before {\n content: \"\\ea96\";\n}\n\n.codicon-symbol-unit:before {\n content: \"\\ea96\";\n}\n\n.codicon-activate-breakpoints:before {\n content: \"\\ea97\";\n}\n\n.codicon-archive:before {\n content: \"\\ea98\";\n}\n\n.codicon-arrow-both:before {\n content: \"\\ea99\";\n}\n\n.codicon-arrow-down:before {\n content: \"\\ea9a\";\n}\n\n.codicon-arrow-left:before {\n content: \"\\ea9b\";\n}\n\n.codicon-arrow-right:before {\n content: \"\\ea9c\";\n}\n\n.codicon-arrow-small-down:before {\n content: \"\\ea9d\";\n}\n\n.codicon-arrow-small-left:before {\n content: \"\\ea9e\";\n}\n\n.codicon-arrow-small-right:before {\n content: \"\\ea9f\";\n}\n\n.codicon-arrow-small-up:before {\n content: \"\\eaa0\";\n}\n\n.codicon-arrow-up:before {\n content: \"\\eaa1\";\n}\n\n.codicon-bell:before {\n content: \"\\eaa2\";\n}\n\n.codicon-bold:before {\n content: \"\\eaa3\";\n}\n\n.codicon-book:before {\n content: \"\\eaa4\";\n}\n\n.codicon-bookmark:before {\n content: \"\\eaa5\";\n}\n\n.codicon-debug-breakpoint-conditional-unverified:before {\n content: \"\\eaa6\";\n}\n\n.codicon-debug-breakpoint-conditional:before {\n content: \"\\eaa7\";\n}\n\n.codicon-debug-breakpoint-conditional-disabled:before {\n content: \"\\eaa7\";\n}\n\n.codicon-debug-breakpoint-data-unverified:before {\n content: \"\\eaa8\";\n}\n\n.codicon-debug-breakpoint-data:before {\n content: \"\\eaa9\";\n}\n\n.codicon-debug-breakpoint-data-disabled:before {\n content: \"\\eaa9\";\n}\n\n.codicon-debug-breakpoint-log-unverified:before {\n content: \"\\eaaa\";\n}\n\n.codicon-debug-breakpoint-log:before {\n content: \"\\eaab\";\n}\n\n.codicon-debug-breakpoint-log-disabled:before {\n content: \"\\eaab\";\n}\n\n.codicon-briefcase:before {\n content: \"\\eaac\";\n}\n\n.codicon-broadcast:before {\n content: \"\\eaad\";\n}\n\n.codicon-browser:before {\n content: \"\\eaae\";\n}\n\n.codicon-bug:before {\n content: \"\\eaaf\";\n}\n\n.codicon-calendar:before {\n content: \"\\eab0\";\n}\n\n.codicon-case-sensitive:before {\n content: \"\\eab1\";\n}\n\n.codicon-check:before {\n content: \"\\eab2\";\n}\n\n.codicon-checklist:before {\n content: \"\\eab3\";\n}\n\n.codicon-chevron-down:before {\n content: \"\\eab4\";\n}\n\n.codicon-chevron-left:before {\n content: \"\\eab5\";\n}\n\n.codicon-chevron-right:before {\n content: \"\\eab6\";\n}\n\n.codicon-chevron-up:before {\n content: \"\\eab7\";\n}\n\n.codicon-chrome-close:before {\n content: \"\\eab8\";\n}\n\n.codicon-chrome-maximize:before {\n content: \"\\eab9\";\n}\n\n.codicon-chrome-minimize:before {\n content: \"\\eaba\";\n}\n\n.codicon-chrome-restore:before {\n content: \"\\eabb\";\n}\n\n.codicon-circle-outline:before {\n content: \"\\eabc\";\n}\n\n.codicon-circle:before {\n content: \"\\eabc\";\n}\n\n.codicon-debug-breakpoint-unverified:before {\n content: \"\\eabc\";\n}\n\n.codicon-terminal-decoration-incomplete:before {\n content: \"\\eabc\";\n}\n\n.codicon-circle-slash:before {\n content: \"\\eabd\";\n}\n\n.codicon-circuit-board:before {\n content: \"\\eabe\";\n}\n\n.codicon-clear-all:before {\n content: \"\\eabf\";\n}\n\n.codicon-clippy:before {\n content: \"\\eac0\";\n}\n\n.codicon-close-all:before {\n content: \"\\eac1\";\n}\n\n.codicon-cloud-download:before {\n content: \"\\eac2\";\n}\n\n.codicon-cloud-upload:before {\n content: \"\\eac3\";\n}\n\n.codicon-code:before {\n content: \"\\eac4\";\n}\n\n.codicon-collapse-all:before {\n content: \"\\eac5\";\n}\n\n.codicon-color-mode:before {\n content: \"\\eac6\";\n}\n\n.codicon-comment-discussion:before {\n content: \"\\eac7\";\n}\n\n.codicon-credit-card:before {\n content: \"\\eac9\";\n}\n\n.codicon-dash:before {\n content: \"\\eacc\";\n}\n\n.codicon-dashboard:before {\n content: \"\\eacd\";\n}\n\n.codicon-database:before {\n content: \"\\eace\";\n}\n\n.codicon-debug-continue:before {\n content: \"\\eacf\";\n}\n\n.codicon-debug-disconnect:before {\n content: \"\\ead0\";\n}\n\n.codicon-debug-pause:before {\n content: \"\\ead1\";\n}\n\n.codicon-debug-restart:before {\n content: \"\\ead2\";\n}\n\n.codicon-debug-start:before {\n content: \"\\ead3\";\n}\n\n.codicon-debug-step-into:before {\n content: \"\\ead4\";\n}\n\n.codicon-debug-step-out:before {\n content: \"\\ead5\";\n}\n\n.codicon-debug-step-over:before {\n content: \"\\ead6\";\n}\n\n.codicon-debug-stop:before {\n content: \"\\ead7\";\n}\n\n.codicon-debug:before {\n content: \"\\ead8\";\n}\n\n.codicon-device-camera-video:before {\n content: \"\\ead9\";\n}\n\n.codicon-device-camera:before {\n content: \"\\eada\";\n}\n\n.codicon-device-mobile:before {\n content: \"\\eadb\";\n}\n\n.codicon-diff-added:before {\n content: \"\\eadc\";\n}\n\n.codicon-diff-ignored:before {\n content: \"\\eadd\";\n}\n\n.codicon-diff-modified:before {\n content: \"\\eade\";\n}\n\n.codicon-diff-removed:before {\n content: \"\\eadf\";\n}\n\n.codicon-diff-renamed:before {\n content: \"\\eae0\";\n}\n\n.codicon-diff:before {\n content: \"\\eae1\";\n}\n\n.codicon-diff-sidebyside:before {\n content: \"\\eae1\";\n}\n\n.codicon-discard:before {\n content: \"\\eae2\";\n}\n\n.codicon-editor-layout:before {\n content: \"\\eae3\";\n}\n\n.codicon-empty-window:before {\n content: \"\\eae4\";\n}\n\n.codicon-exclude:before {\n content: \"\\eae5\";\n}\n\n.codicon-extensions:before {\n content: \"\\eae6\";\n}\n\n.codicon-eye-closed:before {\n content: \"\\eae7\";\n}\n\n.codicon-file-binary:before {\n content: \"\\eae8\";\n}\n\n.codicon-file-code:before {\n content: \"\\eae9\";\n}\n\n.codicon-file-media:before {\n content: \"\\eaea\";\n}\n\n.codicon-file-pdf:before {\n content: \"\\eaeb\";\n}\n\n.codicon-file-submodule:before {\n content: \"\\eaec\";\n}\n\n.codicon-file-symlink-directory:before {\n content: \"\\eaed\";\n}\n\n.codicon-file-symlink-file:before {\n content: \"\\eaee\";\n}\n\n.codicon-file-zip:before {\n content: \"\\eaef\";\n}\n\n.codicon-files:before {\n content: \"\\eaf0\";\n}\n\n.codicon-filter:before {\n content: \"\\eaf1\";\n}\n\n.codicon-flame:before {\n content: \"\\eaf2\";\n}\n\n.codicon-fold-down:before {\n content: \"\\eaf3\";\n}\n\n.codicon-fold-up:before {\n content: \"\\eaf4\";\n}\n\n.codicon-fold:before {\n content: \"\\eaf5\";\n}\n\n.codicon-folder-active:before {\n content: \"\\eaf6\";\n}\n\n.codicon-folder-opened:before {\n content: \"\\eaf7\";\n}\n\n.codicon-gear:before {\n content: \"\\eaf8\";\n}\n\n.codicon-gift:before {\n content: \"\\eaf9\";\n}\n\n.codicon-gist-secret:before {\n content: \"\\eafa\";\n}\n\n.codicon-gist:before {\n content: \"\\eafb\";\n}\n\n.codicon-git-commit:before {\n content: \"\\eafc\";\n}\n\n.codicon-git-compare:before {\n content: \"\\eafd\";\n}\n\n.codicon-compare-changes:before {\n content: \"\\eafd\";\n}\n\n.codicon-git-merge:before {\n content: \"\\eafe\";\n}\n\n.codicon-github-action:before {\n content: \"\\eaff\";\n}\n\n.codicon-github-alt:before {\n content: \"\\eb00\";\n}\n\n.codicon-globe:before {\n content: \"\\eb01\";\n}\n\n.codicon-grabber:before {\n content: \"\\eb02\";\n}\n\n.codicon-graph:before {\n content: \"\\eb03\";\n}\n\n.codicon-gripper:before {\n content: \"\\eb04\";\n}\n\n.codicon-heart:before {\n content: \"\\eb05\";\n}\n\n.codicon-home:before {\n content: \"\\eb06\";\n}\n\n.codicon-horizontal-rule:before {\n content: \"\\eb07\";\n}\n\n.codicon-hubot:before {\n content: \"\\eb08\";\n}\n\n.codicon-inbox:before {\n content: \"\\eb09\";\n}\n\n.codicon-issue-reopened:before {\n content: \"\\eb0b\";\n}\n\n.codicon-issues:before {\n content: \"\\eb0c\";\n}\n\n.codicon-italic:before {\n content: \"\\eb0d\";\n}\n\n.codicon-jersey:before {\n content: \"\\eb0e\";\n}\n\n.codicon-json:before {\n content: \"\\eb0f\";\n}\n\n.codicon-kebab-vertical:before {\n content: \"\\eb10\";\n}\n\n.codicon-key:before {\n content: \"\\eb11\";\n}\n\n.codicon-law:before {\n content: \"\\eb12\";\n}\n\n.codicon-lightbulb-autofix:before {\n content: \"\\eb13\";\n}\n\n.codicon-link-external:before {\n content: \"\\eb14\";\n}\n\n.codicon-link:before {\n content: \"\\eb15\";\n}\n\n.codicon-list-ordered:before {\n content: \"\\eb16\";\n}\n\n.codicon-list-unordered:before {\n content: \"\\eb17\";\n}\n\n.codicon-live-share:before {\n content: \"\\eb18\";\n}\n\n.codicon-loading:before {\n content: \"\\eb19\";\n}\n\n.codicon-location:before {\n content: \"\\eb1a\";\n}\n\n.codicon-mail-read:before {\n content: \"\\eb1b\";\n}\n\n.codicon-mail:before {\n content: \"\\eb1c\";\n}\n\n.codicon-markdown:before {\n content: \"\\eb1d\";\n}\n\n.codicon-megaphone:before {\n content: \"\\eb1e\";\n}\n\n.codicon-mention:before {\n content: \"\\eb1f\";\n}\n\n.codicon-milestone:before {\n content: \"\\eb20\";\n}\n\n.codicon-git-pull-request-milestone:before {\n content: \"\\eb20\";\n}\n\n.codicon-mortar-board:before {\n content: \"\\eb21\";\n}\n\n.codicon-move:before {\n content: \"\\eb22\";\n}\n\n.codicon-multiple-windows:before {\n content: \"\\eb23\";\n}\n\n.codicon-mute:before {\n content: \"\\eb24\";\n}\n\n.codicon-no-newline:before {\n content: \"\\eb25\";\n}\n\n.codicon-note:before {\n content: \"\\eb26\";\n}\n\n.codicon-octoface:before {\n content: \"\\eb27\";\n}\n\n.codicon-open-preview:before {\n content: \"\\eb28\";\n}\n\n.codicon-package:before {\n content: \"\\eb29\";\n}\n\n.codicon-paintcan:before {\n content: \"\\eb2a\";\n}\n\n.codicon-pin:before {\n content: \"\\eb2b\";\n}\n\n.codicon-play:before {\n content: \"\\eb2c\";\n}\n\n.codicon-run:before {\n content: \"\\eb2c\";\n}\n\n.codicon-plug:before {\n content: \"\\eb2d\";\n}\n\n.codicon-preserve-case:before {\n content: \"\\eb2e\";\n}\n\n.codicon-preview:before {\n content: \"\\eb2f\";\n}\n\n.codicon-project:before {\n content: \"\\eb30\";\n}\n\n.codicon-pulse:before {\n content: \"\\eb31\";\n}\n\n.codicon-question:before {\n content: \"\\eb32\";\n}\n\n.codicon-quote:before {\n content: \"\\eb33\";\n}\n\n.codicon-radio-tower:before {\n content: \"\\eb34\";\n}\n\n.codicon-reactions:before {\n content: \"\\eb35\";\n}\n\n.codicon-references:before {\n content: \"\\eb36\";\n}\n\n.codicon-refresh:before {\n content: \"\\eb37\";\n}\n\n.codicon-regex:before {\n content: \"\\eb38\";\n}\n\n.codicon-remote-explorer:before {\n content: \"\\eb39\";\n}\n\n.codicon-remote:before {\n content: \"\\eb3a\";\n}\n\n.codicon-remove:before {\n content: \"\\eb3b\";\n}\n\n.codicon-replace-all:before {\n content: \"\\eb3c\";\n}\n\n.codicon-replace:before {\n content: \"\\eb3d\";\n}\n\n.codicon-repo-clone:before {\n content: \"\\eb3e\";\n}\n\n.codicon-repo-force-push:before {\n content: \"\\eb3f\";\n}\n\n.codicon-repo-pull:before {\n content: \"\\eb40\";\n}\n\n.codicon-repo-push:before {\n content: \"\\eb41\";\n}\n\n.codicon-report:before {\n content: \"\\eb42\";\n}\n\n.codicon-request-changes:before {\n content: \"\\eb43\";\n}\n\n.codicon-rocket:before {\n content: \"\\eb44\";\n}\n\n.codicon-root-folder-opened:before {\n content: \"\\eb45\";\n}\n\n.codicon-root-folder:before {\n content: \"\\eb46\";\n}\n\n.codicon-rss:before {\n content: \"\\eb47\";\n}\n\n.codicon-ruby:before {\n content: \"\\eb48\";\n}\n\n.codicon-save-all:before {\n content: \"\\eb49\";\n}\n\n.codicon-save-as:before {\n content: \"\\eb4a\";\n}\n\n.codicon-save:before {\n content: \"\\eb4b\";\n}\n\n.codicon-screen-full:before {\n content: \"\\eb4c\";\n}\n\n.codicon-screen-normal:before {\n content: \"\\eb4d\";\n}\n\n.codicon-search-stop:before {\n content: \"\\eb4e\";\n}\n\n.codicon-server:before {\n content: \"\\eb50\";\n}\n\n.codicon-settings-gear:before {\n content: \"\\eb51\";\n}\n\n.codicon-settings:before {\n content: \"\\eb52\";\n}\n\n.codicon-shield:before {\n content: \"\\eb53\";\n}\n\n.codicon-smiley:before {\n content: \"\\eb54\";\n}\n\n.codicon-sort-precedence:before {\n content: \"\\eb55\";\n}\n\n.codicon-split-horizontal:before {\n content: \"\\eb56\";\n}\n\n.codicon-split-vertical:before {\n content: \"\\eb57\";\n}\n\n.codicon-squirrel:before {\n content: \"\\eb58\";\n}\n\n.codicon-star-full:before {\n content: \"\\eb59\";\n}\n\n.codicon-star-half:before {\n content: \"\\eb5a\";\n}\n\n.codicon-symbol-class:before {\n content: \"\\eb5b\";\n}\n\n.codicon-symbol-color:before {\n content: \"\\eb5c\";\n}\n\n.codicon-symbol-constant:before {\n content: \"\\eb5d\";\n}\n\n.codicon-symbol-enum-member:before {\n content: \"\\eb5e\";\n}\n\n.codicon-symbol-field:before {\n content: \"\\eb5f\";\n}\n\n.codicon-symbol-file:before {\n content: \"\\eb60\";\n}\n\n.codicon-symbol-interface:before {\n content: \"\\eb61\";\n}\n\n.codicon-symbol-keyword:before {\n content: \"\\eb62\";\n}\n\n.codicon-symbol-misc:before {\n content: \"\\eb63\";\n}\n\n.codicon-symbol-operator:before {\n content: \"\\eb64\";\n}\n\n.codicon-symbol-property:before {\n content: \"\\eb65\";\n}\n\n.codicon-wrench:before {\n content: \"\\eb65\";\n}\n\n.codicon-wrench-subaction:before {\n content: \"\\eb65\";\n}\n\n.codicon-symbol-snippet:before {\n content: \"\\eb66\";\n}\n\n.codicon-tasklist:before {\n content: \"\\eb67\";\n}\n\n.codicon-telescope:before {\n content: \"\\eb68\";\n}\n\n.codicon-text-size:before {\n content: \"\\eb69\";\n}\n\n.codicon-three-bars:before {\n content: \"\\eb6a\";\n}\n\n.codicon-thumbsdown:before {\n content: \"\\eb6b\";\n}\n\n.codicon-thumbsup:before {\n content: \"\\eb6c\";\n}\n\n.codicon-tools:before {\n content: \"\\eb6d\";\n}\n\n.codicon-triangle-down:before {\n content: \"\\eb6e\";\n}\n\n.codicon-triangle-left:before {\n content: \"\\eb6f\";\n}\n\n.codicon-triangle-right:before {\n content: \"\\eb70\";\n}\n\n.codicon-triangle-up:before {\n content: \"\\eb71\";\n}\n\n.codicon-twitter:before {\n content: \"\\eb72\";\n}\n\n.codicon-unfold:before {\n content: \"\\eb73\";\n}\n\n.codicon-unlock:before {\n content: \"\\eb74\";\n}\n\n.codicon-unmute:before {\n content: \"\\eb75\";\n}\n\n.codicon-unverified:before {\n content: \"\\eb76\";\n}\n\n.codicon-verified:before {\n content: \"\\eb77\";\n}\n\n.codicon-versions:before {\n content: \"\\eb78\";\n}\n\n.codicon-vm-active:before {\n content: \"\\eb79\";\n}\n\n.codicon-vm-outline:before {\n content: \"\\eb7a\";\n}\n\n.codicon-vm-running:before {\n content: \"\\eb7b\";\n}\n\n.codicon-watch:before {\n content: \"\\eb7c\";\n}\n\n.codicon-whitespace:before {\n content: \"\\eb7d\";\n}\n\n.codicon-whole-word:before {\n content: \"\\eb7e\";\n}\n\n.codicon-window:before {\n content: \"\\eb7f\";\n}\n\n.codicon-word-wrap:before {\n content: \"\\eb80\";\n}\n\n.codicon-zoom-in:before {\n content: \"\\eb81\";\n}\n\n.codicon-zoom-out:before {\n content: \"\\eb82\";\n}\n\n.codicon-list-filter:before {\n content: \"\\eb83\";\n}\n\n.codicon-list-flat:before {\n content: \"\\eb84\";\n}\n\n.codicon-list-selection:before {\n content: \"\\eb85\";\n}\n\n.codicon-selection:before {\n content: \"\\eb85\";\n}\n\n.codicon-list-tree:before {\n content: \"\\eb86\";\n}\n\n.codicon-debug-breakpoint-function-unverified:before {\n content: \"\\eb87\";\n}\n\n.codicon-debug-breakpoint-function:before {\n content: \"\\eb88\";\n}\n\n.codicon-debug-breakpoint-function-disabled:before {\n content: \"\\eb88\";\n}\n\n.codicon-debug-stackframe-active:before {\n content: \"\\eb89\";\n}\n\n.codicon-circle-small-filled:before {\n content: \"\\eb8a\";\n}\n\n.codicon-debug-stackframe-dot:before {\n content: \"\\eb8a\";\n}\n\n.codicon-terminal-decoration-mark:before {\n content: \"\\eb8a\";\n}\n\n.codicon-debug-stackframe:before {\n content: \"\\eb8b\";\n}\n\n.codicon-debug-stackframe-focused:before {\n content: \"\\eb8b\";\n}\n\n.codicon-debug-breakpoint-unsupported:before {\n content: \"\\eb8c\";\n}\n\n.codicon-symbol-string:before {\n content: \"\\eb8d\";\n}\n\n.codicon-debug-reverse-continue:before {\n content: \"\\eb8e\";\n}\n\n.codicon-debug-step-back:before {\n content: \"\\eb8f\";\n}\n\n.codicon-debug-restart-frame:before {\n content: \"\\eb90\";\n}\n\n.codicon-debug-alt:before {\n content: \"\\eb91\";\n}\n\n.codicon-call-incoming:before {\n content: \"\\eb92\";\n}\n\n.codicon-call-outgoing:before {\n content: \"\\eb93\";\n}\n\n.codicon-menu:before {\n content: \"\\eb94\";\n}\n\n.codicon-expand-all:before {\n content: \"\\eb95\";\n}\n\n.codicon-feedback:before {\n content: \"\\eb96\";\n}\n\n.codicon-git-pull-request-reviewer:before {\n content: \"\\eb96\";\n}\n\n.codicon-group-by-ref-type:before {\n content: \"\\eb97\";\n}\n\n.codicon-ungroup-by-ref-type:before {\n content: \"\\eb98\";\n}\n\n.codicon-account:before {\n content: \"\\eb99\";\n}\n\n.codicon-git-pull-request-assignee:before {\n content: \"\\eb99\";\n}\n\n.codicon-bell-dot:before {\n content: \"\\eb9a\";\n}\n\n.codicon-debug-console:before {\n content: \"\\eb9b\";\n}\n\n.codicon-library:before {\n content: \"\\eb9c\";\n}\n\n.codicon-output:before {\n content: \"\\eb9d\";\n}\n\n.codicon-run-all:before {\n content: \"\\eb9e\";\n}\n\n.codicon-sync-ignored:before {\n content: \"\\eb9f\";\n}\n\n.codicon-pinned:before {\n content: \"\\eba0\";\n}\n\n.codicon-github-inverted:before {\n content: \"\\eba1\";\n}\n\n.codicon-server-process:before {\n content: \"\\eba2\";\n}\n\n.codicon-server-environment:before {\n content: \"\\eba3\";\n}\n\n.codicon-pass:before {\n content: \"\\eba4\";\n}\n\n.codicon-issue-closed:before {\n content: \"\\eba4\";\n}\n\n.codicon-stop-circle:before {\n content: \"\\eba5\";\n}\n\n.codicon-play-circle:before {\n content: \"\\eba6\";\n}\n\n.codicon-record:before {\n content: \"\\eba7\";\n}\n\n.codicon-debug-alt-small:before {\n content: \"\\eba8\";\n}\n\n.codicon-vm-connect:before {\n content: \"\\eba9\";\n}\n\n.codicon-cloud:before {\n content: \"\\ebaa\";\n}\n\n.codicon-merge:before {\n content: \"\\ebab\";\n}\n\n.codicon-export:before {\n content: \"\\ebac\";\n}\n\n.codicon-graph-left:before {\n content: \"\\ebad\";\n}\n\n.codicon-magnet:before {\n content: \"\\ebae\";\n}\n\n.codicon-notebook:before {\n content: \"\\ebaf\";\n}\n\n.codicon-redo:before {\n content: \"\\ebb0\";\n}\n\n.codicon-check-all:before {\n content: \"\\ebb1\";\n}\n\n.codicon-pinned-dirty:before {\n content: \"\\ebb2\";\n}\n\n.codicon-pass-filled:before {\n content: \"\\ebb3\";\n}\n\n.codicon-circle-large-filled:before {\n content: \"\\ebb4\";\n}\n\n.codicon-circle-large:before {\n content: \"\\ebb5\";\n}\n\n.codicon-circle-large-outline:before {\n content: \"\\ebb5\";\n}\n\n.codicon-combine:before {\n content: \"\\ebb6\";\n}\n\n.codicon-gather:before {\n content: \"\\ebb6\";\n}\n\n.codicon-table:before {\n content: \"\\ebb7\";\n}\n\n.codicon-variable-group:before {\n content: \"\\ebb8\";\n}\n\n.codicon-type-hierarchy:before {\n content: \"\\ebb9\";\n}\n\n.codicon-type-hierarchy-sub:before {\n content: \"\\ebba\";\n}\n\n.codicon-type-hierarchy-super:before {\n content: \"\\ebbb\";\n}\n\n.codicon-git-pull-request-create:before {\n content: \"\\ebbc\";\n}\n\n.codicon-run-above:before {\n content: \"\\ebbd\";\n}\n\n.codicon-run-below:before {\n content: \"\\ebbe\";\n}\n\n.codicon-notebook-template:before {\n content: \"\\ebbf\";\n}\n\n.codicon-debug-rerun:before {\n content: \"\\ebc0\";\n}\n\n.codicon-workspace-trusted:before {\n content: \"\\ebc1\";\n}\n\n.codicon-workspace-untrusted:before {\n content: \"\\ebc2\";\n}\n\n.codicon-workspace-unknown:before {\n content: \"\\ebc3\";\n}\n\n.codicon-terminal-cmd:before {\n content: \"\\ebc4\";\n}\n\n.codicon-terminal-debian:before {\n content: \"\\ebc5\";\n}\n\n.codicon-terminal-linux:before {\n content: \"\\ebc6\";\n}\n\n.codicon-terminal-powershell:before {\n content: \"\\ebc7\";\n}\n\n.codicon-terminal-tmux:before {\n content: \"\\ebc8\";\n}\n\n.codicon-terminal-ubuntu:before {\n content: \"\\ebc9\";\n}\n\n.codicon-terminal-bash:before {\n content: \"\\ebca\";\n}\n\n.codicon-arrow-swap:before {\n content: \"\\ebcb\";\n}\n\n.codicon-copy:before {\n content: \"\\ebcc\";\n}\n\n.codicon-person-add:before {\n content: \"\\ebcd\";\n}\n\n.codicon-filter-filled:before {\n content: \"\\ebce\";\n}\n\n.codicon-wand:before {\n content: \"\\ebcf\";\n}\n\n.codicon-debug-line-by-line:before {\n content: \"\\ebd0\";\n}\n\n.codicon-inspect:before {\n content: \"\\ebd1\";\n}\n\n.codicon-layers:before {\n content: \"\\ebd2\";\n}\n\n.codicon-layers-dot:before {\n content: \"\\ebd3\";\n}\n\n.codicon-layers-active:before {\n content: \"\\ebd4\";\n}\n\n.codicon-compass:before {\n content: \"\\ebd5\";\n}\n\n.codicon-compass-dot:before {\n content: \"\\ebd6\";\n}\n\n.codicon-compass-active:before {\n content: \"\\ebd7\";\n}\n\n.codicon-azure:before {\n content: \"\\ebd8\";\n}\n\n.codicon-issue-draft:before {\n content: \"\\ebd9\";\n}\n\n.codicon-git-pull-request-closed:before {\n content: \"\\ebda\";\n}\n\n.codicon-git-pull-request-draft:before {\n content: \"\\ebdb\";\n}\n\n.codicon-debug-all:before {\n content: \"\\ebdc\";\n}\n\n.codicon-debug-coverage:before {\n content: \"\\ebdd\";\n}\n\n.codicon-run-errors:before {\n content: \"\\ebde\";\n}\n\n.codicon-folder-library:before {\n content: \"\\ebdf\";\n}\n\n.codicon-debug-continue-small:before {\n content: \"\\ebe0\";\n}\n\n.codicon-beaker-stop:before {\n content: \"\\ebe1\";\n}\n\n.codicon-graph-line:before {\n content: \"\\ebe2\";\n}\n\n.codicon-graph-scatter:before {\n content: \"\\ebe3\";\n}\n\n.codicon-pie-chart:before {\n content: \"\\ebe4\";\n}\n\n.codicon-bracket:before {\n content: \"\\eb0f\";\n}\n\n.codicon-bracket-dot:before {\n content: \"\\ebe5\";\n}\n\n.codicon-bracket-error:before {\n content: \"\\ebe6\";\n}\n\n.codicon-lock-small:before {\n content: \"\\ebe7\";\n}\n\n.codicon-azure-devops:before {\n content: \"\\ebe8\";\n}\n\n.codicon-verified-filled:before {\n content: \"\\ebe9\";\n}\n\n.codicon-newline:before {\n content: \"\\ebea\";\n}\n\n.codicon-layout:before {\n content: \"\\ebeb\";\n}\n\n.codicon-layout-activitybar-left:before {\n content: \"\\ebec\";\n}\n\n.codicon-layout-activitybar-right:before {\n content: \"\\ebed\";\n}\n\n.codicon-layout-panel-left:before {\n content: \"\\ebee\";\n}\n\n.codicon-layout-panel-center:before {\n content: \"\\ebef\";\n}\n\n.codicon-layout-panel-justify:before {\n content: \"\\ebf0\";\n}\n\n.codicon-layout-panel-right:before {\n content: \"\\ebf1\";\n}\n\n.codicon-layout-panel:before {\n content: \"\\ebf2\";\n}\n\n.codicon-layout-sidebar-left:before {\n content: \"\\ebf3\";\n}\n\n.codicon-layout-sidebar-right:before {\n content: \"\\ebf4\";\n}\n\n.codicon-layout-statusbar:before {\n content: \"\\ebf5\";\n}\n\n.codicon-layout-menubar:before {\n content: \"\\ebf6\";\n}\n\n.codicon-layout-centered:before {\n content: \"\\ebf7\";\n}\n\n.codicon-target:before {\n content: \"\\ebf8\";\n}\n\n.codicon-indent:before {\n content: \"\\ebf9\";\n}\n\n.codicon-record-small:before {\n content: \"\\ebfa\";\n}\n\n.codicon-error-small:before {\n content: \"\\ebfb\";\n}\n\n.codicon-terminal-decoration-error:before {\n content: \"\\ebfb\";\n}\n\n.codicon-arrow-circle-down:before {\n content: \"\\ebfc\";\n}\n\n.codicon-arrow-circle-left:before {\n content: \"\\ebfd\";\n}\n\n.codicon-arrow-circle-right:before {\n content: \"\\ebfe\";\n}\n\n.codicon-arrow-circle-up:before {\n content: \"\\ebff\";\n}\n\n.codicon-layout-sidebar-right-off:before {\n content: \"\\ec00\";\n}\n\n.codicon-layout-panel-off:before {\n content: \"\\ec01\";\n}\n\n.codicon-layout-sidebar-left-off:before {\n content: \"\\ec02\";\n}\n\n.codicon-blank:before {\n content: \"\\ec03\";\n}\n\n.codicon-heart-filled:before {\n content: \"\\ec04\";\n}\n\n.codicon-map:before {\n content: \"\\ec05\";\n}\n\n.codicon-map-horizontal:before {\n content: \"\\ec05\";\n}\n\n.codicon-fold-horizontal:before {\n content: \"\\ec05\";\n}\n\n.codicon-map-filled:before {\n content: \"\\ec06\";\n}\n\n.codicon-map-horizontal-filled:before {\n content: \"\\ec06\";\n}\n\n.codicon-fold-horizontal-filled:before {\n content: \"\\ec06\";\n}\n\n.codicon-circle-small:before {\n content: \"\\ec07\";\n}\n\n.codicon-bell-slash:before {\n content: \"\\ec08\";\n}\n\n.codicon-bell-slash-dot:before {\n content: \"\\ec09\";\n}\n\n.codicon-comment-unresolved:before {\n content: \"\\ec0a\";\n}\n\n.codicon-git-pull-request-go-to-changes:before {\n content: \"\\ec0b\";\n}\n\n.codicon-git-pull-request-new-changes:before {\n content: \"\\ec0c\";\n}\n\n.codicon-search-fuzzy:before {\n content: \"\\ec0d\";\n}\n\n.codicon-comment-draft:before {\n content: \"\\ec0e\";\n}\n\n.codicon-send:before {\n content: \"\\ec0f\";\n}\n\n.codicon-sparkle:before {\n content: \"\\ec10\";\n}\n\n.codicon-insert:before {\n content: \"\\ec11\";\n}\n\n.codicon-mic:before {\n content: \"\\ec12\";\n}\n\n.codicon-thumbsdown-filled:before {\n content: \"\\ec13\";\n}\n\n.codicon-thumbsup-filled:before {\n content: \"\\ec14\";\n}\n\n.codicon-coffee:before {\n content: \"\\ec15\";\n}\n\n.codicon-snake:before {\n content: \"\\ec16\";\n}\n\n.codicon-game:before {\n content: \"\\ec17\";\n}\n\n.codicon-vr:before {\n content: \"\\ec18\";\n}\n\n.codicon-chip:before {\n content: \"\\ec19\";\n}\n\n.codicon-piano:before {\n content: \"\\ec1a\";\n}\n\n.codicon-music:before {\n content: \"\\ec1b\";\n}\n\n.codicon-mic-filled:before {\n content: \"\\ec1c\";\n}\n\n.codicon-repo-fetch:before {\n content: \"\\ec1d\";\n}\n\n.codicon-copilot:before {\n content: \"\\ec1e\";\n}\n\n.codicon-lightbulb-sparkle:before {\n content: \"\\ec1f\";\n}\n\n.codicon-robot:before {\n content: \"\\ec20\";\n}\n\n.codicon-sparkle-filled:before {\n content: \"\\ec21\";\n}\n\n.codicon-diff-single:before {\n content: \"\\ec22\";\n}\n\n.codicon-diff-multiple:before {\n content: \"\\ec23\";\n}\n\n.codicon-surround-with:before {\n content: \"\\ec24\";\n}\n\n.codicon-share:before {\n content: \"\\ec25\";\n}\n\n.codicon-git-stash:before {\n content: \"\\ec26\";\n}\n\n.codicon-git-stash-apply:before {\n content: \"\\ec27\";\n}\n\n.codicon-git-stash-pop:before {\n content: \"\\ec28\";\n}\n\n.codicon-vscode:before {\n content: \"\\ec29\";\n}\n\n.codicon-vscode-insiders:before {\n content: \"\\ec2a\";\n}\n\n.codicon-code-oss:before {\n content: \"\\ec2b\";\n}\n\n.codicon-run-coverage:before {\n content: \"\\ec2c\";\n}\n\n.codicon-run-all-coverage:before {\n content: \"\\ec2d\";\n}\n\n.codicon-coverage:before {\n content: \"\\ec2e\";\n}\n\n.codicon-github-project:before {\n content: \"\\ec2f\";\n}\n\n.codicon-map-vertical:before {\n content: \"\\ec30\";\n}\n\n.codicon-fold-vertical:before {\n content: \"\\ec30\";\n}\n\n.codicon-map-vertical-filled:before {\n content: \"\\ec31\";\n}\n\n.codicon-fold-vertical-filled:before {\n content: \"\\ec31\";\n}\n\n.codicon-go-to-search:before {\n content: \"\\ec32\";\n}\n\n.codicon-percentage:before {\n content: \"\\ec33\";\n}\n\n.codicon-sort-percentage:before {\n content: \"\\ec33\";\n}\n\n.codicon-attach:before {\n content: \"\\ec34\";\n}\n\n.codicon-go-to-editing-session:before {\n content: \"\\ec35\";\n}\n\n.codicon-edit-session:before {\n content: \"\\ec36\";\n}\n\n.codicon-code-review:before {\n content: \"\\ec37\";\n}\n\n.codicon-copilot-warning:before {\n content: \"\\ec38\";\n}\n\n.codicon-python:before {\n content: \"\\ec39\";\n}\n\n.codicon-git-fetch:before {\n content: \"\\f101\";\n}\n\n@layer kol-component {\n /* :host implicitly inherits font-size, see below */\n :host {\n 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}";
|
|
15854
15866
|
var KolIconDefaultStyle0 = defaultStyleCss$A;
|
|
15855
15867
|
|
|
15856
15868
|
class KolIcon {
|
|
@@ -15865,7 +15877,7 @@ class KolIcon {
|
|
|
15865
15877
|
}
|
|
15866
15878
|
render() {
|
|
15867
15879
|
const ariaShow = this.state._label.length > 0;
|
|
15868
|
-
return (hAsync(Host, { key: '
|
|
15880
|
+
return (hAsync(Host, { key: '290698136e6db689e8357f6aabfdfd56e8781a9d', exportparts: "icon", class: "kol-icon" }, hAsync("i", { key: 'f6f1c5d5640138ed1fb7f47d3cadb5e2915841b2', "aria-hidden": ariaShow ? undefined : 'true', "aria-label": ariaShow ? this.state._label : undefined, class: this.state._icons, part: "icon", role: "img" })));
|
|
15869
15881
|
}
|
|
15870
15882
|
validateIcons(value) {
|
|
15871
15883
|
watchString(this, '_icons', value, {
|
|
@@ -15946,7 +15958,7 @@ class KolImage {
|
|
|
15946
15958
|
this.validateSrcset(this._srcset);
|
|
15947
15959
|
}
|
|
15948
15960
|
render() {
|
|
15949
|
-
return (hAsync(Host, { key: '
|
|
15961
|
+
return (hAsync(Host, { key: '3106d9319f84f51a7083b33ee80de5fdc30926fc', class: "kol-image" }, hAsync("img", { key: '400638e56cfc3e51db6a22883d8c5250fa322d5a', alt: this.state._alt, loading: this.state._loading, sizes: this.state._sizes, src: this.state._src, srcset: this.state._srcset })));
|
|
15950
15962
|
}
|
|
15951
15963
|
static get watchers() { return {
|
|
15952
15964
|
"_alt": ["validateAlt"],
|
|
@@ -15983,7 +15995,7 @@ class KolIndentedText {
|
|
|
15983
15995
|
registerInstance(this, hostRef);
|
|
15984
15996
|
}
|
|
15985
15997
|
render() {
|
|
15986
|
-
return (hAsync(Host, { key: '
|
|
15998
|
+
return (hAsync(Host, { key: 'dbd2b493578be331c0bd30b479d612210dc5620b', class: "kol-indented-text" }, hAsync(KolIndentedTextWcTag, { key: '3b39b26f3deddde9d34fd49dcd62b1e8a2ed855d' }, hAsync("slot", { key: 'd2b81125dc38c4ddc067f30e434475e9dbbcdf29' }))));
|
|
15987
15999
|
}
|
|
15988
16000
|
static get style() { return {
|
|
15989
16001
|
default: KolIndentedTextDefaultStyle0
|
|
@@ -16004,7 +16016,7 @@ class KolIndentedTextWc {
|
|
|
16004
16016
|
this.state = {};
|
|
16005
16017
|
}
|
|
16006
16018
|
render() {
|
|
16007
|
-
return (hAsync(Host, { key: '
|
|
16019
|
+
return (hAsync(Host, { key: '3f21efed7e7f5ab01ad67510308dc7fc7289e073', class: "kol-indented-text-wc" }, hAsync("div", { key: '97999df7afee7c8b4e52c9ccba5fc2e4ead73de1' }, hAsync("slot", { key: '2cd5d3cb4bcc84a0d22f6b0b9d9e5eee8890749e' }))));
|
|
16008
16020
|
}
|
|
16009
16021
|
static get cmpMeta() { return {
|
|
16010
16022
|
"$flags$": 4,
|
|
@@ -16144,7 +16156,7 @@ class InputCheckboxController extends InputCheckboxRadioController {
|
|
|
16144
16156
|
}
|
|
16145
16157
|
}
|
|
16146
16158
|
|
|
16147
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\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: calc(2rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\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: calc(22rem / var(--kolibri-root-font-size, 16));\n height: calc(22rem / var(--kolibri-root-font-size, 16));\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 - (2rem / var(--kolibri-root-font-size, 16)));\n top: calc(0.25em - (2rem / var(--kolibri-root-font-size, 16)));\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: calc(4rem / var(--kolibri-root-font-size, 16));\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@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 calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
16159
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\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: calc(2rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\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: calc(22rem / var(--kolibri-root-font-size, 16));\n height: calc(22rem / var(--kolibri-root-font-size, 16));\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 - (2rem / var(--kolibri-root-font-size, 16)));\n top: calc(0.25em - (2rem / var(--kolibri-root-font-size, 16)));\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: calc(4rem / var(--kolibri-root-font-size, 16));\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@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
16148
16160
|
var KolInputCheckboxDefaultStyle0 = defaultStyleCss$x;
|
|
16149
16161
|
|
|
16150
16162
|
class KolInputCheckbox {
|
|
@@ -16164,13 +16176,13 @@ class KolInputCheckbox {
|
|
|
16164
16176
|
render() {
|
|
16165
16177
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
16166
16178
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
16167
|
-
return (hAsync(Host, { key: '
|
|
16179
|
+
return (hAsync(Host, { key: 'bc0a12b5121ec76ad83d847803045021e4e2e3c3', class: "kol-input-checkbox" }, hAsync(KolInputTag, { key: '68f94fd4fe424af4507501d6b6e666321a25efc0', class: {
|
|
16168
16180
|
checkbox: true,
|
|
16169
16181
|
[this.state._variant]: true,
|
|
16170
16182
|
'hide-label': !!this.state._hideLabel,
|
|
16171
16183
|
checked: this.state._checked,
|
|
16172
16184
|
indeterminate: this.state._indeterminate,
|
|
16173
|
-
}, "data-label-align": this.state._labelAlign || 'right', "data-role": this.state._variant === 'button' ? 'button' : undefined, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _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, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '
|
|
16185
|
+
}, "data-label-align": this.state._labelAlign || 'right', "data-role": this.state._variant === 'button' ? 'button' : undefined, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _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, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '5e3dccc2901d064d2cc35d13b75d7ef4e758ac93', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("label", { key: '4b65b6e4b09756f02fcb601e36b4596b814dd156', slot: "input", class: "checkbox-container" }, hAsync(KolIconTag, { key: '253ae5ca8c41124d6f9f11d5ea490a3536165ee8', 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: '0be224929833c991d20637afe97591a319f054f7', 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, onFocus: (event) => {
|
|
16174
16186
|
this.controller.onFacade.onFocus(event);
|
|
16175
16187
|
this.inputHasFocus = true;
|
|
16176
16188
|
}, onBlur: (event) => {
|
|
@@ -16416,7 +16428,7 @@ class InputColorController extends InputIconController {
|
|
|
16416
16428
|
}
|
|
16417
16429
|
}
|
|
16418
16430
|
|
|
16419
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\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
|
|
16431
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\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 {\n display: grid;\n }\n .kol-alert__container {\n place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\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}";
|
|
16420
16432
|
var KolInputColorDefaultStyle0 = defaultStyleCss$w;
|
|
16421
16433
|
|
|
16422
16434
|
class KolInputColor {
|
|
@@ -16435,10 +16447,10 @@ class KolInputColor {
|
|
|
16435
16447
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
16436
16448
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
16437
16449
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
16438
|
-
return (hAsync(Host, { key: '
|
|
16450
|
+
return (hAsync(Host, { key: '6fe7f30f1e8fc6fcd336401e222122421f66c7f2', class: "kol-input-color" }, hAsync(KolInputTag, { key: 'b53fbc13d2dc64c639b50b0942848bed7fa1a32d', class: {
|
|
16439
16451
|
color: true,
|
|
16440
16452
|
'hide-label': !!this.state._hideLabel,
|
|
16441
|
-
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _hideError: this.state._hideError, _id: this.state._id, _label: this.state._label, _shortKey: this.state._shortKey, _suggestions: this.state._suggestions, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '
|
|
16453
|
+
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _hideError: this.state._hideError, _id: this.state._id, _label: this.state._label, _shortKey: this.state._shortKey, _suggestions: this.state._suggestions, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'ccc71703df80752ea462257c6c323c0293694860', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '83f1b3ba36f4c8f454c4199c062e03cba5a9d362', slot: "input" }, hAsync("input", Object.assign({ key: '39843a7d2f545f46688417e92bdb86ede87978d9', 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, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, name: this.state._name, slot: "input", type: "color", value: this.state._value }, this.controller.onFacade, { onFocus: (event) => {
|
|
16442
16454
|
this.controller.onFacade.onFocus(event);
|
|
16443
16455
|
this.inputHasFocus = true;
|
|
16444
16456
|
}, onBlur: (event) => {
|
|
@@ -16771,7 +16783,7 @@ InputDateController.isoTimeRegex = /^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/;
|
|
|
16771
16783
|
InputDateController.isoWeekRegex = /^\d{4}-W(?:[0-4]\d|5[0-3])$/;
|
|
16772
16784
|
InputDateController.DEFAULT_MAX_DATE = new Date(9999, 11, 31, 23, 59, 59);
|
|
16773
16785
|
|
|
16774
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\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
|
|
16786
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\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 {\n display: grid;\n }\n .kol-alert__container {\n place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\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}";
|
|
16775
16787
|
var KolInputDateDefaultStyle0 = defaultStyleCss$v;
|
|
16776
16788
|
|
|
16777
16789
|
class KolInputDate {
|
|
@@ -16811,10 +16823,10 @@ class KolInputDate {
|
|
|
16811
16823
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
16812
16824
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
16813
16825
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
16814
|
-
return (hAsync(Host, { key: '
|
|
16826
|
+
return (hAsync(Host, { key: 'f341e11c438b24c5baa49432e2db28add38082a3', class: { 'kol-input-date': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: '036d45b5eff8fa012ecdfc3c474a26c0f263d0f0', class: {
|
|
16815
16827
|
[this.state._type]: true,
|
|
16816
16828
|
'hide-label': !!this.state._hideLabel,
|
|
16817
|
-
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '
|
|
16829
|
+
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '61844133deba0ca02b5a1bec527b0425a2471bd3', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'c504adba7029222190cbd9b2410f8f61e53bfe8e', slot: "input" }, hAsync("input", Object.assign({ key: '75bc9965c8ef5e8f94808ef20dd87e7a4ea5aa19', 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, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, step: this.state._step, type: this.state._type, value: this.state._value || undefined }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onBlur: (event) => {
|
|
16818
16830
|
this.controller.onFacade.onBlur(event);
|
|
16819
16831
|
this.inputHasFocus = false;
|
|
16820
16832
|
}, onFocus: (event) => {
|
|
@@ -17155,13 +17167,16 @@ class InputTextController extends InputTextEmailController {
|
|
|
17155
17167
|
this.hasError = false;
|
|
17156
17168
|
this.component = component;
|
|
17157
17169
|
}
|
|
17170
|
+
validateSpellCheck(value) {
|
|
17171
|
+
validateSpellCheck(this.component, value);
|
|
17172
|
+
}
|
|
17158
17173
|
validateType(value) {
|
|
17159
17174
|
watchValidator(this.component, '_type', (value) => typeof value === 'string' && inputTextTypeOptions.includes(value), new Set([`String {${inputTextTypeOptions.join(', ')}`]), value);
|
|
17160
17175
|
}
|
|
17161
17176
|
componentWillLoad() {
|
|
17162
17177
|
super.componentWillLoad();
|
|
17178
|
+
this.validateSpellCheck(this.component._spellCheck);
|
|
17163
17179
|
this.validateType(this.component._type);
|
|
17164
|
-
this.validateHasCounter(this.component._hasCounter);
|
|
17165
17180
|
}
|
|
17166
17181
|
}
|
|
17167
17182
|
|
|
@@ -17179,7 +17194,7 @@ class InputEmailController extends InputTextEmailController {
|
|
|
17179
17194
|
}
|
|
17180
17195
|
}
|
|
17181
17196
|
|
|
17182
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\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
|
|
17197
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\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 {\n display: grid;\n }\n .kol-alert__container {\n place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
17183
17198
|
var KolInputEmailDefaultStyle0 = defaultStyleCss$u;
|
|
17184
17199
|
|
|
17185
17200
|
class KolInputEmail {
|
|
@@ -17198,10 +17213,10 @@ class KolInputEmail {
|
|
|
17198
17213
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
17199
17214
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
17200
17215
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
17201
|
-
return (hAsync(Host, { key: '
|
|
17216
|
+
return (hAsync(Host, { key: 'edc5fb997592bb4afbfb25ca4dfebdcdb6956a28', class: {
|
|
17202
17217
|
'kol-input-email': true,
|
|
17203
17218
|
'has-value': this.state._hasValue,
|
|
17204
|
-
} }, hAsync(KolInputTag, { key: '
|
|
17219
|
+
} }, hAsync(KolInputTag, { key: 'e7fa48256d5db9e32a1a38db20c19d965a3f58ce', class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '6c0e145bc33a27cc233c3de29f80c2d1a9341334', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '8d08e33f93794f4c8ac93d10c2157d186e105783', slot: "input" }, hAsync("input", Object.assign({ key: '336662df71c0c318afd49c79f3c70f3927af3819', 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, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, multiple: this.state._multiple, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, type: "email", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput, onFocus: (event) => {
|
|
17205
17220
|
this.controller.onFacade.onFocus(event);
|
|
17206
17221
|
this.inputHasFocus = true;
|
|
17207
17222
|
}, onBlur: (event) => {
|
|
@@ -17470,7 +17485,7 @@ class InputFileController extends InputIconController {
|
|
|
17470
17485
|
}
|
|
17471
17486
|
}
|
|
17472
17487
|
|
|
17473
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\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
|
|
17488
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\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 {\n display: grid;\n }\n .kol-alert__container {\n place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\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}";
|
|
17474
17489
|
var KolInputFileDefaultStyle0 = defaultStyleCss$t;
|
|
17475
17490
|
|
|
17476
17491
|
class KolInputFile {
|
|
@@ -17488,10 +17503,10 @@ class KolInputFile {
|
|
|
17488
17503
|
render() {
|
|
17489
17504
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
17490
17505
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
17491
|
-
return (hAsync(Host, { key: '
|
|
17506
|
+
return (hAsync(Host, { key: 'd2dd9239cb034150276fa64232fdba4ea359f008', class: "kol-input-file" }, hAsync(KolInputTag, { key: '18f39eac299b52e37032c84c41282b707316a5e2', class: {
|
|
17492
17507
|
file: true,
|
|
17493
17508
|
'hide-label': !!this.state._hideLabel,
|
|
17494
|
-
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '
|
|
17509
|
+
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'b831f1e6c2fb67c1ad515329e1c90f5b83d1e0b7', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'e375dd7f86520e06f90537c59acdb2ffdfbbbe6e', slot: "input" }, hAsync("input", Object.assign({ key: 'ea6b6e6fc6679e820eceba398739da5d7cacfa6b', ref: this.catchRef, title: "", accept: this.state._accept, 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, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, type: "file", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput, onFocus: (event) => {
|
|
17495
17510
|
this.controller.onFacade.onFocus(event);
|
|
17496
17511
|
this.inputHasFocus = true;
|
|
17497
17512
|
}, onBlur: (event) => {
|
|
@@ -17774,7 +17789,7 @@ class InputNumberController extends InputIconController {
|
|
|
17774
17789
|
}
|
|
17775
17790
|
}
|
|
17776
17791
|
|
|
17777
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\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
|
|
17792
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\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 {\n display: grid;\n }\n .kol-alert__container {\n place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
17778
17793
|
var KolInputNumberDefaultStyle0 = defaultStyleCss$s;
|
|
17779
17794
|
|
|
17780
17795
|
class KolInputNumber {
|
|
@@ -17793,13 +17808,13 @@ class KolInputNumber {
|
|
|
17793
17808
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
17794
17809
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
17795
17810
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
17796
|
-
return (hAsync(Host, { key: '
|
|
17811
|
+
return (hAsync(Host, { key: '4babcfc2955ef5d0f7e1aacef4ca7badb5a02bdb', class: {
|
|
17797
17812
|
'kol-input-number': true,
|
|
17798
17813
|
'has-value': this.state._hasValue,
|
|
17799
|
-
} }, hAsync(KolInputTag, { key: '
|
|
17814
|
+
} }, hAsync(KolInputTag, { key: '55aa221f4506ee08667671796bc1e9218c5f2378', class: {
|
|
17800
17815
|
number: true,
|
|
17801
17816
|
'hide-label': !!this.state._hideLabel,
|
|
17802
|
-
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '
|
|
17817
|
+
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '9b77e6e97ff08863ecbfa001bff2ea92879218a9', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '0e87059bfb10565a912a245b3c366c79233612a8', slot: "input" }, hAsync("input", Object.assign({ key: '3f95e3d98b984185a5f49a4b8e3f0844af40300d', 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, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, placeholder: this.state._placeholder, step: this.state._step, type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onFocus: (event) => {
|
|
17803
17818
|
this.controller.onFacade.onFocus(event);
|
|
17804
17819
|
this.inputHasFocus = true;
|
|
17805
17820
|
}, onBlur: (event) => {
|
|
@@ -18034,7 +18049,7 @@ class KolInputNumber {
|
|
|
18034
18049
|
}; }
|
|
18035
18050
|
}
|
|
18036
18051
|
|
|
18037
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\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
|
|
18052
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\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 {\n display: grid;\n }\n .kol-alert__container {\n place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\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: calc(160rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
18038
18053
|
var KolInputPasswordDefaultStyle0 = defaultStyleCss$r;
|
|
18039
18054
|
|
|
18040
18055
|
class KolInputPassword {
|
|
@@ -18050,26 +18065,25 @@ class KolInputPassword {
|
|
|
18050
18065
|
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
18051
18066
|
}
|
|
18052
18067
|
render() {
|
|
18053
|
-
var _a;
|
|
18054
18068
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
18055
18069
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
18056
|
-
return (hAsync(Host, { key: '
|
|
18070
|
+
return (hAsync(Host, { key: 'c0675f37573c9417e011348a5f4cf39b27082bdf', class: {
|
|
18057
18071
|
'kol-input-password': true,
|
|
18058
18072
|
'has-value': this.state._hasValue,
|
|
18059
|
-
} }, hAsync(KolInputTag, { key: '
|
|
18073
|
+
} }, hAsync(KolInputTag, { key: 'e1110b6ec27be37a6bd6ee3240b07b0596a648a9', class: {
|
|
18060
18074
|
'hide-label': !!this.state._hideLabel,
|
|
18061
18075
|
password: true,
|
|
18062
|
-
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '
|
|
18076
|
+
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '2fec635c466057f53127d626a2afa0c544ba4140', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '00beb7982abf24bb5f57f83201d30531318a03f2', slot: "input" }, hAsync("input", Object.assign({ key: '3ce772c2165c054df1059b2f74a91099fabb343c', 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, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, type: this._passwordVisible ? 'text' : 'password', value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput, onFocus: (event) => {
|
|
18063
18077
|
this.controller.onFacade.onFocus(event);
|
|
18064
18078
|
this.inputHasFocus = true;
|
|
18065
18079
|
}, onBlur: (event) => {
|
|
18066
18080
|
this.controller.onFacade.onBlur(event);
|
|
18067
18081
|
this.inputHasFocus = false;
|
|
18068
|
-
} })), this._variant === 'visibility-toggle'
|
|
18082
|
+
} })), this._variant === 'visibility-toggle' ? (hAsync(KolButtonWcTag, { class: "password-toggle-button", _label: this._passwordVisible ? translate('kol-hide-password') : translate('kol-show-password'), _variant: "ghost", _disabled: this._disabled, _on: {
|
|
18069
18083
|
onClick: () => {
|
|
18070
18084
|
this._passwordVisible = !this._passwordVisible;
|
|
18071
18085
|
},
|
|
18072
|
-
}, _hideLabel: true, _icons: this._passwordVisible ? 'codicon codicon-eye-closed' : 'codicon codicon-eye-watch' })) :
|
|
18086
|
+
}, _hideLabel: true, _icons: this._passwordVisible ? 'codicon codicon-eye-closed' : 'codicon codicon-eye-watch' })) : null))));
|
|
18073
18087
|
}
|
|
18074
18088
|
constructor(hostRef) {
|
|
18075
18089
|
registerInstance(this, hostRef);
|
|
@@ -18304,7 +18318,7 @@ class KolInputPassword {
|
|
|
18304
18318
|
}; }
|
|
18305
18319
|
}
|
|
18306
18320
|
|
|
18307
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\n }\n}\n@layer kol-component {\n .kol-alert
|
|
18321
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n :host {\n --border-width: calc(2rem / var(--kolibri-root-font-size, 16));\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-color: 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}";
|
|
18308
18322
|
var KolInputRadioDefaultStyle0 = defaultStyleCss$q;
|
|
18309
18323
|
|
|
18310
18324
|
class KolInputRadio {
|
|
@@ -18322,14 +18336,14 @@ class KolInputRadio {
|
|
|
18322
18336
|
const { ariaDescribedBy, hasError } = getRenderStates(this.state);
|
|
18323
18337
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
18324
18338
|
const hasHint = typeof this._hint === 'string' && this._hint.length > 0;
|
|
18325
|
-
return (hAsync(Host, { key: '
|
|
18339
|
+
return (hAsync(Host, { key: '0824aa57e6dd9611ef06df9133cbabefe87968ad', class: "kol-input-radio" }, hAsync("fieldset", { key: '322929058d963c9c6d600714c5a4691d4cf5c767', class: {
|
|
18326
18340
|
fieldset: true,
|
|
18327
18341
|
disabled: this.state._disabled === true,
|
|
18328
18342
|
error: hasError === true,
|
|
18329
18343
|
required: this.state._required === true,
|
|
18330
18344
|
'hidden-error': this._hideError === true,
|
|
18331
18345
|
[this.state._orientation]: true,
|
|
18332
|
-
} }, hAsync("legend", { key: '
|
|
18346
|
+
} }, hAsync("legend", { key: '82f34adb3b1a4deedc388905e0e6dc78fa47d6f8', class: "block w-full mb-1 leading-normal" }, hAsync("span", { key: '2a5c8d585b8642ac73a48d0d646540444a622f73' }, hAsync("span", { key: '81498e8dea45ca6c970fa17bc09d5b09a0ad2339', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this._label })) : (this._label)))), this.state._options.map((option, index) => {
|
|
18333
18347
|
const customId = `${this.state._id}-${index}`;
|
|
18334
18348
|
const slotName = `radio-${index}`;
|
|
18335
18349
|
const selected = this.state._value === option.value;
|
|
@@ -18348,7 +18362,7 @@ class KolInputRadio {
|
|
|
18348
18362
|
padding: this.state._hideLabel ? '0' : undefined,
|
|
18349
18363
|
visibility: this.state._hideLabel ? 'hidden' : undefined,
|
|
18350
18364
|
} }, hAsync("span", null, hAsync("span", { class: "radio-label-span-inner" }, option.label))))));
|
|
18351
|
-
}), hasError && hAsync(KolFormFieldMsgFc, { key: '
|
|
18365
|
+
}), hasError && hAsync(KolFormFieldMsgFc, { key: 'b018db036af2fe1306e979390d7e9af417f49047', _alert: this.showAsAlert(), _hideError: this.state._hideError, _msg: this.state._msg, _id: this.state._id }), hasHint && hAsync("span", { key: '800eccc00122f1550d96f03000269cb18952ed80', class: "hint" }, this.state._hint))));
|
|
18352
18366
|
}
|
|
18353
18367
|
constructor(hostRef) {
|
|
18354
18368
|
registerInstance(this, hostRef);
|
|
@@ -18595,7 +18609,7 @@ class InputRangeController extends InputIconController {
|
|
|
18595
18609
|
}
|
|
18596
18610
|
}
|
|
18597
18611
|
|
|
18598
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\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
|
|
18612
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\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 {\n display: grid;\n }\n .kol-alert__container {\n place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\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: calc(1rem / var(--kolibri-root-font-size, 16)) solid #000;\n display: inline-block;\n flex-grow: 1;\n height: calc(8rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\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: calc(20rem / var(--kolibri-root-font-size, 16));\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\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: calc(20rem / var(--kolibri-root-font-size, 16));\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\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: calc(1rem / var(--kolibri-root-font-size, 16)) solid currentColor;\n }\n}";
|
|
18599
18613
|
var KolInputRangeDefaultStyle0 = defaultStyleCss$p;
|
|
18600
18614
|
|
|
18601
18615
|
class KolInputRange {
|
|
@@ -18632,25 +18646,25 @@ class KolInputRange {
|
|
|
18632
18646
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
18633
18647
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
18634
18648
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
18635
|
-
return (hAsync(Host, { key: '
|
|
18649
|
+
return (hAsync(Host, { key: '9777bf5ff1c03b810178930ff6048d9baf1911a7', class: "kol-input-range" }, hAsync(KolInputTag, { key: 'ab9d0ceb1af23f7f0559ac0efee8eb63250c5a25', class: {
|
|
18636
18650
|
range: true,
|
|
18637
18651
|
'hide-label': !!this.state._hideLabel,
|
|
18638
|
-
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '
|
|
18652
|
+
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: 'd61c88e5456fcdeb544ddf4d244d37829996a493', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '797027c45ed28dfcd5b9d0a19c52ce265f5faba7', slot: "input" }, hAsync("div", { key: 'e0bf1d5a733e090a781a47343bd92f16c4fe87a8', class: "inputs-wrapper", style: {
|
|
18639
18653
|
'--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',
|
|
18640
|
-
} }, hAsync("input", Object.assign({ key: '
|
|
18654
|
+
} }, hAsync("input", Object.assign({ key: 'e0376bf01deeee1a6a54bd95b732bc58d0c4c270', ref: this.catchInputRangeRef, 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, "aria-hidden": "true", autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-range` : undefined, step: this.state._step, tabIndex: -1, type: "range", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onFocus: (event) => {
|
|
18641
18655
|
this.controller.onFacade.onFocus(event);
|
|
18642
18656
|
this.inputHasFocus = true;
|
|
18643
18657
|
}, onBlur: (event) => {
|
|
18644
18658
|
this.controller.onFacade.onBlur(event);
|
|
18645
18659
|
this.inputHasFocus = false;
|
|
18646
|
-
} })), hAsync("input", Object.assign({ key: '
|
|
18660
|
+
} })), hAsync("input", Object.assign({ key: 'a2d39cbe8bcbb0b81bfd7f0e64e720748b5561bf', ref: this.catchInputNumberRef, 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, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-number` : undefined, step: this.state._step, type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onChange: this.onChange, onFocus: (event) => {
|
|
18647
18661
|
this.controller.onFacade.onFocus(event);
|
|
18648
18662
|
this.inputHasFocus = true;
|
|
18649
18663
|
}, onBlur: (event) => {
|
|
18650
18664
|
this.controller.onFacade.onBlur(event);
|
|
18651
18665
|
this.inputHasFocus = false;
|
|
18652
18666
|
} }))), hasSuggestions && [
|
|
18653
|
-
hAsync("datalist", { key: '
|
|
18667
|
+
hAsync("datalist", { key: 'ceefc5e389b932e1e5d006493b5e033a3270b73c', id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
|
|
18654
18668
|
]))));
|
|
18655
18669
|
}
|
|
18656
18670
|
constructor(hostRef) {
|
|
@@ -18869,7 +18883,7 @@ class KolInputRange {
|
|
|
18869
18883
|
}; }
|
|
18870
18884
|
}
|
|
18871
18885
|
|
|
18872
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\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
|
|
18886
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\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 {\n display: grid;\n }\n .kol-alert__container {\n place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
18873
18887
|
var KolInputTextDefaultStyle0 = defaultStyleCss$o;
|
|
18874
18888
|
|
|
18875
18889
|
class KolInputText {
|
|
@@ -18888,13 +18902,13 @@ class KolInputText {
|
|
|
18888
18902
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
18889
18903
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
18890
18904
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
18891
|
-
return (hAsync(Host, { key: '
|
|
18905
|
+
return (hAsync(Host, { key: '1297c4d042912c38356d0a04ee96ebee6ff450fc', class: {
|
|
18892
18906
|
'has-value': this.state._hasValue,
|
|
18893
18907
|
'kol-input-text': true,
|
|
18894
|
-
} }, hAsync(KolInputTag, { key: '
|
|
18908
|
+
} }, hAsync(KolInputTag, { key: '7fa51afdb53c61c3bc15b9a3062065742fb9ab30', class: {
|
|
18895
18909
|
[this.state._type]: true,
|
|
18896
18910
|
'hide-label': !!this.state._hideLabel,
|
|
18897
|
-
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _suggestions: this.state._suggestions, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '
|
|
18911
|
+
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _suggestions: this.state._suggestions, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'a063a65ed0c01c882c22dae6b3ec50f588376f3f', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'f83ef6369cec58a15407e1cd91595de427bad18c', slot: "input" }, hAsync("input", Object.assign({ key: 'fbcad340b054bba87176af1a78dc05e2ef576a78', 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, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: this.state._spellCheck, type: this.state._type, value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput, onKeyDown: this.onKeyDown, onFocus: (event) => {
|
|
18898
18912
|
this.controller.onFacade.onFocus(event);
|
|
18899
18913
|
this.inputHasFocus = true;
|
|
18900
18914
|
}, onBlur: (event) => {
|
|
@@ -18947,6 +18961,7 @@ class KolInputText {
|
|
|
18947
18961
|
this._readOnly = false;
|
|
18948
18962
|
this._required = false;
|
|
18949
18963
|
this._shortKey = undefined;
|
|
18964
|
+
this._spellCheck = undefined;
|
|
18950
18965
|
this._suggestions = undefined;
|
|
18951
18966
|
this._smartButton = undefined;
|
|
18952
18967
|
this._syncValueBySelector = undefined;
|
|
@@ -19037,6 +19052,9 @@ class KolInputText {
|
|
|
19037
19052
|
validateShortKey(value) {
|
|
19038
19053
|
this.controller.validateShortKey(value);
|
|
19039
19054
|
}
|
|
19055
|
+
validateSpellCheck(value) {
|
|
19056
|
+
this.controller.validateSpellCheck(value);
|
|
19057
|
+
}
|
|
19040
19058
|
validateSuggestions(value) {
|
|
19041
19059
|
this.controller.validateSuggestions(value);
|
|
19042
19060
|
}
|
|
@@ -19090,6 +19108,7 @@ class KolInputText {
|
|
|
19090
19108
|
"_readOnly": ["validateReadOnly"],
|
|
19091
19109
|
"_required": ["validateRequired"],
|
|
19092
19110
|
"_shortKey": ["validateShortKey"],
|
|
19111
|
+
"_spellCheck": ["validateSpellCheck"],
|
|
19093
19112
|
"_suggestions": ["validateSuggestions"],
|
|
19094
19113
|
"_smartButton": ["validateSmartButton"],
|
|
19095
19114
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
@@ -19126,6 +19145,7 @@ class KolInputText {
|
|
|
19126
19145
|
"_readOnly": [4, "_read-only"],
|
|
19127
19146
|
"_required": [4],
|
|
19128
19147
|
"_shortKey": [1, "_short-key"],
|
|
19148
|
+
"_spellCheck": [4, "_spell-check"],
|
|
19129
19149
|
"_suggestions": [1],
|
|
19130
19150
|
"_smartButton": [1, "_smart-button"],
|
|
19131
19151
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
@@ -19184,28 +19204,27 @@ class KolInputWc {
|
|
|
19184
19204
|
}
|
|
19185
19205
|
render() {
|
|
19186
19206
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
19187
|
-
const
|
|
19188
|
-
const
|
|
19189
|
-
const showFormFieldMsg = Boolean(hasError || (((_c = this._msg) === null || _c === void 0 ? void 0 : _c._type) !== 'error' && ((_d = this._msg) === null || _d === void 0 ? void 0 : _d._description)));
|
|
19207
|
+
const hasValidMsg = typeof this._msg === 'object' && this._msg !== null && typeof ((_a = this._msg) === null || _a === void 0 ? void 0 : _a._description) === 'string' && ((_b = this._msg) === null || _b === void 0 ? void 0 : _b._description.length) > 0;
|
|
19208
|
+
const showMsg = hasValidMsg && (this._touched === true || ((_c = this._msg) === null || _c === void 0 ? void 0 : _c._type) !== 'error');
|
|
19190
19209
|
const hasExpertSlot = showExpertSlot(this._label);
|
|
19191
19210
|
const hasHint = typeof this._hint === 'string' && this._hint.length > 0;
|
|
19192
19211
|
const useTooltopInsteadOfLabel = !hasExpertSlot && this._hideLabel;
|
|
19193
|
-
return (hAsync(Host, { key: '
|
|
19212
|
+
return (hAsync(Host, { key: 'cab598958b40afd9f433dd982ddf6040909036e3', class: clsx('kol-input', this.getModifierClassNameByMsgType(showMsg), {
|
|
19194
19213
|
disabled: this._disabled === true,
|
|
19195
|
-
error:
|
|
19214
|
+
[((_d = this._msg) === null || _d === void 0 ? void 0 : _d._type) || 'error']: showMsg === true,
|
|
19196
19215
|
'read-only': this._readOnly === true,
|
|
19197
19216
|
required: this._required === true,
|
|
19198
19217
|
touched: this._touched === true,
|
|
19199
19218
|
'hidden-error': this._hideError === true,
|
|
19200
|
-
}) }, hAsync("label", { key: '
|
|
19219
|
+
}) }, hAsync("label", { key: 'a68a04dd6d69e68a90ad99abf64580df4c2c502f', class: "input-label", id: !useTooltopInsteadOfLabel ? `${this._id}-label` : undefined, hidden: useTooltopInsteadOfLabel, htmlFor: this._id }, hAsync("span", { key: '554d12a855dd28abb7f768fbae85f01c31e6dca5', class: "input-label-span" }, hAsync("slot", { key: '1c66acac9736d84f71045147a6590ab5fb7c4f23', name: "label" }))), hasHint && (hAsync("span", { key: 'f44ac2f4d66282990ca80c3449d69834e9a1ef56', class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { key: '0286fc453e697f95cd9aceb38f96444df45a687e', class: {
|
|
19201
19220
|
input: true,
|
|
19202
19221
|
'icon-left': typeof ((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) === 'object',
|
|
19203
19222
|
'icon-right': typeof ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) === 'object',
|
|
19204
|
-
} }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: '
|
|
19223
|
+
} }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: 'a830809876bcee267bc3e41bf32a5a890f1b36bd', _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: '3628bb4a2751a3898c6ff39b70e03bb77f24283e', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { key: '58aa897260dd271e6b10b529e9e8695caf087965', _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: 'd2e9646fd2a94d8da7b5faac79c417fd5bef6a5f', _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: '282ef086c27fb15a222e595def82cb96f23c2008', "aria-hidden": "true", class: "input-tooltip", _badgeText: this._accessKey || this._shortKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), showMsg && hAsync(KolFormFieldMsgFc, { key: '8eb9e92752005095a1d8b55c7f2ef1c242624190', _alert: this._alert, _hideError: this._hideError, _msg: this._msg, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { key: '21915d11762f820f100685449597b57cbdd3f49b', id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync("span", { key: 'b330575fea944ef2b6bfee27f4e539021f9a199a', class: "counter", "aria-atomic": "true", "aria-live": "polite", "data-testid": "input-counter" }, this._currentLength, this._maxLength && (hAsync(Fragment, null, hAsync("span", { key: '273ac0fca53946ab03f4ec3183b7737fd64c2412', "aria-label": translate('kol-of'), role: "img" }, "/"), this._maxLength)), ' ', hAsync("span", { key: 'd94bb18d86cd6cbbeb63c5f8a957da8c41dfc537' }, translate('kol-characters'))))));
|
|
19205
19224
|
}
|
|
19206
|
-
getModifierClassNameByMsgType() {
|
|
19225
|
+
getModifierClassNameByMsgType(showMsg) {
|
|
19207
19226
|
var _a, _b;
|
|
19208
|
-
if ((_a = this._msg) === null || _a === void 0 ? void 0 : _a._type) {
|
|
19227
|
+
if (showMsg && ((_a = this._msg) === null || _a === void 0 ? void 0 : _a._type)) {
|
|
19209
19228
|
return {
|
|
19210
19229
|
default: 'msg-type-default',
|
|
19211
19230
|
info: 'msg-type-info',
|
|
@@ -19281,7 +19300,7 @@ class KolKolibri {
|
|
|
19281
19300
|
}
|
|
19282
19301
|
render() {
|
|
19283
19302
|
const fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
|
|
19284
|
-
return (hAsync(Host, { key: '
|
|
19303
|
+
return (hAsync(Host, { key: '9a07ae2a555dc14008f0044636b8becf4e7e9d26', class: "kol-kolibri" }, hAsync("svg", { key: '886f3512fffa47170aada805ec73d9a6196ebfd4', role: "img", "aria-label": translate('kol-kolibri-logo'), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", fill: fillColor }, hAsync("path", { key: 'd153e1aba3e4366986d5d55f38b629ae88564a92', d: "M353 322L213 304V434L353 322Z" }), hAsync("path", { key: '33635f4f4af66cb2bef8bfe2b27d70ee4cdb8fab', d: "M209 564V304L149 434L209 564Z" }), hAsync("path", { key: '77d4580aaa2507c4df580eb03b7f670b4274634c', d: "M357 316L417 250L361 210L275 244L357 316Z" }), hAsync("path", { key: 'd02e14b3be92d8f518157967fd5c1561aaf1089c', d: "M329 218L237 92L250 222L272 241L329 218Z" }), hAsync("path", { key: '51ee29af4753a8cbaf3db65ea81147285fa68d0b', d: "M353 318L35 36L213 300L353 318Z" }), hAsync("path", { key: 'a2f7c492eea6712dff2906883e36a38d0ab52d7c', d: "M391 286L565 272L421 252L391 286Z" }), this.state._labeled === true && (hAsync("text", { key: '991b2369b1d5bdb7a70172317a262a87bfda8191', x: "250", y: "525", fill: fillColor }, "KoliBri")))));
|
|
19285
19304
|
}
|
|
19286
19305
|
validateColor(value) {
|
|
19287
19306
|
validateColor(this, value, {
|
|
@@ -19321,7 +19340,7 @@ class KolKolibri {
|
|
|
19321
19340
|
}; }
|
|
19322
19341
|
}
|
|
19323
19342
|
|
|
19324
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n display: inline-block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n
|
|
19343
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n display: inline-block;\n }\n .kol-link {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n align-items: baseline;\n display: inline-flex;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-link__text .span-label {\n text-decoration-line: underline;\n }\n .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .span-label {\n text-decoration-thickness: 0.2em;\n }\n .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
19325
19344
|
var KolLinkDefaultStyle0 = defaultStyleCss$m;
|
|
19326
19345
|
|
|
19327
19346
|
class KolLink {
|
|
@@ -19354,7 +19373,7 @@ class KolLink {
|
|
|
19354
19373
|
await ((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
19355
19374
|
}
|
|
19356
19375
|
render() {
|
|
19357
|
-
return (hAsync(
|
|
19376
|
+
return (hAsync(KolLinkWcTag, { key: '5723572f80eb1c506559f15d6f40069df967cb0d', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaDescription: this._ariaDescription, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: this._role, _shortKey: this._shortKey, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: 'a804a90fdf53429fb1122ca69ae5af3f7b4afc07', name: "expert", slot: "expert" })));
|
|
19358
19377
|
}
|
|
19359
19378
|
static get delegatesFocus() { return true; }
|
|
19360
19379
|
static get style() { return {
|
|
@@ -19388,7 +19407,7 @@ class KolLink {
|
|
|
19388
19407
|
}; }
|
|
19389
19408
|
}
|
|
19390
19409
|
|
|
19391
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n display: inline-
|
|
19410
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n display: inline-block;\n }\n .kol-link {\n font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n display: inline-flex;\n place-items: center;\n text-align: center;\n text-decoration-line: none;\n }\n .kol-link::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-link__text {\n margin: auto;\n width: 100%;\n }\n}";
|
|
19392
19411
|
var KolLinkButtonDefaultStyle0 = defaultStyleCss$l;
|
|
19393
19412
|
|
|
19394
19413
|
class KolLinkButton {
|
|
@@ -19423,11 +19442,7 @@ class KolLinkButton {
|
|
|
19423
19442
|
await ((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
19424
19443
|
}
|
|
19425
19444
|
render() {
|
|
19426
|
-
return (hAsync(
|
|
19427
|
-
button: true,
|
|
19428
|
-
[this._variant]: this._variant !== 'custom',
|
|
19429
|
-
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
19430
|
-
}, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaDescription: this._ariaDescription, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: "button", _shortKey: this._shortKey, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: 'c15f782d4069c07ffa2960d60bb29996f0a1063e', name: "expert", slot: "expert" }))));
|
|
19445
|
+
return (hAsync(KolLinkWcTag, { key: 'f41ab6e4c28ceaf02ab1294c34bbde9a0bad3630', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: "button", _shortKey: this._shortKey, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign, _variant: this._variant }, hAsync("slot", { key: 'c8ada22303e72199edd0ac0aefe7e186987a6bc5', name: "expert", slot: "expert" })));
|
|
19431
19446
|
}
|
|
19432
19447
|
static get delegatesFocus() { return true; }
|
|
19433
19448
|
static get style() { return {
|
|
@@ -19494,10 +19509,10 @@ class KolLinkGroup {
|
|
|
19494
19509
|
}
|
|
19495
19510
|
render() {
|
|
19496
19511
|
const ListTag = this.isUl ? 'ul' : 'ol';
|
|
19497
|
-
return (hAsync(Host, { key: '
|
|
19512
|
+
return (hAsync(Host, { key: 'c268599b0fd0ed92ee220be751137e69d2445ce4', class: "kol-link-group" }, hAsync(ListTag, { key: 'ab851ad906f3e31ed267059688db906d916de335', "aria-label": this.state._label, class: {
|
|
19498
19513
|
vertical: this.state._orientation === 'vertical',
|
|
19499
19514
|
horizontal: this.state._orientation === 'horizontal',
|
|
19500
|
-
} }, hAsync(ListItem, { key: '
|
|
19515
|
+
} }, hAsync(ListItem, { key: '22e08cce85b79e9bfb1d039c9e45f57ac4b51636', links: this.state._links, orientation: this.state._orientation, listStyleType: this.state._listStyleType }))));
|
|
19501
19516
|
}
|
|
19502
19517
|
validateLabel(value, _oldValue, initial = false) {
|
|
19503
19518
|
if (!initial && this.state._label) {
|
|
@@ -19619,6 +19634,7 @@ class KolLinkWc {
|
|
|
19619
19634
|
this._ariaDescription = undefined;
|
|
19620
19635
|
this._ariaExpanded = undefined;
|
|
19621
19636
|
this._ariaOwns = undefined;
|
|
19637
|
+
this._customClass = undefined;
|
|
19622
19638
|
this._disabled = false;
|
|
19623
19639
|
this._download = undefined;
|
|
19624
19640
|
this._hideLabel = false;
|
|
@@ -19631,6 +19647,7 @@ class KolLinkWc {
|
|
|
19631
19647
|
this._tabIndex = undefined;
|
|
19632
19648
|
this._target = undefined;
|
|
19633
19649
|
this._tooltipAlign = 'right';
|
|
19650
|
+
this._variant = 'normal';
|
|
19634
19651
|
this.state = {
|
|
19635
19652
|
_ariaCurrentValue: 'page',
|
|
19636
19653
|
_href: '',
|
|
@@ -19646,13 +19663,15 @@ class KolLinkWc {
|
|
|
19646
19663
|
const { isExternal, tagAttrs } = this.getRenderValues();
|
|
19647
19664
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
19648
19665
|
const hasAriaDescription = Boolean((_b = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length);
|
|
19649
|
-
return (hAsync(Host, { key: '
|
|
19666
|
+
return (hAsync(Host, { key: 'a7122cc58b4159f4646b55cacc6a87f8e4f2c87e' }, hAsync("a", Object.assign({ key: '624f4f4a1e9071035b74a12eb306d2e908cfac41', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-describedby": hasAriaDescription ? this.internalDescriptionById : undefined, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": typeof this.state._ariaExpanded === 'boolean' ? String(this.state._ariaExpanded) : undefined, "aria-owns": this.state._ariaOwns, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
|
|
19650
19667
|
? `${this.state._label}${isExternal ? ` (${translate('kol-open-link-in-tab')})` : ''}`
|
|
19651
|
-
: undefined, class: {
|
|
19652
|
-
disabled: this.state._disabled === true,
|
|
19653
|
-
'external-link': isExternal,
|
|
19654
|
-
'hide-label': this.state._hideLabel === true,
|
|
19655
|
-
|
|
19668
|
+
: undefined, class: clsx('kol-link', {
|
|
19669
|
+
'kol-link--disabled': this.state._disabled === true,
|
|
19670
|
+
'kol-link--external-link': isExternal,
|
|
19671
|
+
'kol-link--hide-label': this.state._hideLabel === true,
|
|
19672
|
+
[`kol-link--${this.state._variant}`]: this.state._role === 'button' && this.state._variant !== 'custom',
|
|
19673
|
+
[this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
19674
|
+
}) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc$1, { key: 'b7503f9a38b1796b5342b62d03eced79ae5dc47a', class: "kol-link__text", badgeText: this.state._accessKey || this.state._shortKey, icons: this.state._icons, hideLabel: this.state._hideLabel, label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: '7cc50992b6ba97d50791859aab112e1f537137d1', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '44ee211a69df3fd88021cd6ff1ea1fa7251760fa', class: "kol-link__icon", _label: this.state._hideLabel ? '' : translate('kol-open-link-in-tab'), _icons: 'codicon codicon-link-external', "aria-hidden": this.state._hideLabel }))), hAsync(KolTooltipWcTag, { key: 'ec7bc9e9c0d8883e698ffb0b255d91c6607bcc07', "aria-hidden": "true", class: "kol-link__tooltip", hidden: hasExpertSlot || !this.state._hideLabel, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href }), hasAriaDescription && (hAsync("span", { key: 'dad39312cc4edf30e62a5b72c39834bd4d6292ea', class: "visually-hidden", id: this.internalDescriptionById }, this.state._ariaDescription))));
|
|
19656
19675
|
}
|
|
19657
19676
|
validateAccessKey(value) {
|
|
19658
19677
|
validateAccessKey(this, value);
|
|
@@ -19670,6 +19689,9 @@ class KolLinkWc {
|
|
|
19670
19689
|
validateAriaOwns(value) {
|
|
19671
19690
|
validateAriaOwns(this, value);
|
|
19672
19691
|
}
|
|
19692
|
+
validateCustomClass(value) {
|
|
19693
|
+
validateCustomClass(this, value);
|
|
19694
|
+
}
|
|
19673
19695
|
validateDisabled(value) {
|
|
19674
19696
|
validateDisabled(this, value);
|
|
19675
19697
|
}
|
|
@@ -19709,12 +19731,16 @@ class KolLinkWc {
|
|
|
19709
19731
|
validateTooltipAlign(value) {
|
|
19710
19732
|
validateTooltipAlign(this, value);
|
|
19711
19733
|
}
|
|
19734
|
+
validateVariant(value) {
|
|
19735
|
+
validateButtonVariant(this, value);
|
|
19736
|
+
}
|
|
19712
19737
|
componentWillLoad() {
|
|
19713
19738
|
this.validateAccessKey(this._accessKey);
|
|
19714
19739
|
this.validateAriaCurrentValue(this._ariaCurrentValue);
|
|
19715
19740
|
this.validateAriaDescription(this._ariaDescription);
|
|
19716
19741
|
this.validateAriaExpanded(this._ariaExpanded);
|
|
19717
19742
|
this.validateAriaOwns(this._ariaOwns);
|
|
19743
|
+
this.validateCustomClass(this._customClass);
|
|
19718
19744
|
this.validateDisabled(this._disabled);
|
|
19719
19745
|
this.validateDownload(this._download);
|
|
19720
19746
|
this.validateHideLabel(this._hideLabel);
|
|
@@ -19727,6 +19753,7 @@ class KolLinkWc {
|
|
|
19727
19753
|
this.validateTabIndex(this._tabIndex);
|
|
19728
19754
|
this.validateTarget(this._target);
|
|
19729
19755
|
this.validateTooltipAlign(this._tooltipAlign);
|
|
19756
|
+
this.validateVariant(this._variant);
|
|
19730
19757
|
this.unsubscribeOnLocationChange = onLocationChange((location) => {
|
|
19731
19758
|
this.state._ariaCurrent = location === this.state._href ? this.state._ariaCurrentValue : undefined;
|
|
19732
19759
|
});
|
|
@@ -19743,6 +19770,7 @@ class KolLinkWc {
|
|
|
19743
19770
|
"_ariaDescription": ["validateAriaDescription"],
|
|
19744
19771
|
"_ariaExpanded": ["validateAriaExpanded"],
|
|
19745
19772
|
"_ariaOwns": ["validateAriaOwns"],
|
|
19773
|
+
"_customClass": ["validateCustomClass"],
|
|
19746
19774
|
"_disabled": ["validateDisabled"],
|
|
19747
19775
|
"_download": ["validateDownload"],
|
|
19748
19776
|
"_hideLabel": ["validateHideLabel"],
|
|
@@ -19754,7 +19782,8 @@ class KolLinkWc {
|
|
|
19754
19782
|
"_shortKey": ["validateShortKey"],
|
|
19755
19783
|
"_tabIndex": ["validateTabIndex"],
|
|
19756
19784
|
"_target": ["validateTarget"],
|
|
19757
|
-
"_tooltipAlign": ["validateTooltipAlign"]
|
|
19785
|
+
"_tooltipAlign": ["validateTooltipAlign"],
|
|
19786
|
+
"_variant": ["validateVariant"]
|
|
19758
19787
|
}; }
|
|
19759
19788
|
static get cmpMeta() { return {
|
|
19760
19789
|
"$flags$": 4,
|
|
@@ -19765,6 +19794,7 @@ class KolLinkWc {
|
|
|
19765
19794
|
"_ariaDescription": [1, "_aria-description"],
|
|
19766
19795
|
"_ariaExpanded": [4, "_aria-expanded"],
|
|
19767
19796
|
"_ariaOwns": [1, "_aria-owns"],
|
|
19797
|
+
"_customClass": [1, "_custom-class"],
|
|
19768
19798
|
"_disabled": [4],
|
|
19769
19799
|
"_download": [1],
|
|
19770
19800
|
"_hideLabel": [4, "_hide-label"],
|
|
@@ -19777,6 +19807,7 @@ class KolLinkWc {
|
|
|
19777
19807
|
"_tabIndex": [2, "_tab-index"],
|
|
19778
19808
|
"_target": [1],
|
|
19779
19809
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
19810
|
+
"_variant": [1],
|
|
19780
19811
|
"state": [32],
|
|
19781
19812
|
"kolFocus": [64]
|
|
19782
19813
|
},
|
|
@@ -19993,7 +20024,7 @@ class KolLogo {
|
|
|
19993
20024
|
}
|
|
19994
20025
|
render() {
|
|
19995
20026
|
var _a;
|
|
19996
|
-
return (hAsync(Host, { key: '
|
|
20027
|
+
return (hAsync(Host, { key: 'a14ec5db1cbc099a38682acfab0673d0e343f73c', class: "kol-logo" }, hAsync("svg", { key: '7757869da13743f3551aceffe26afa057a626055', "aria-label": translate('kol-logo-description', { placeholders: { orgShort: this.state._org, orgLong: getAriaLabel(this.state._org) } }), role: "img", viewBox: "0 0 225 100" }, hAsync("rect", { key: '8065623cd46363da75d336781563ede0718e744c', width: "100%", height: "100%", fill: "white" }), hAsync("svg", { key: '0844a4b054f1d86ee15f44466764dd4a312521f8', x: "0", y: "4", height: "75" }, hAsync(Adler, { key: '8e64a3dcf3d9e1b3ca3fdf21d05004ee365aa1e4' })), hAsync("svg", { key: '680ffd7ef849e3783f8ad5e1d43820abb4866861', x: "40.5", y: "3.5", height: "100" }, hAsync("rect", { key: 'da2fffd79f0a9a45eb4a98e756857620262ccde7', width: "5", height: "30" }), hAsync("rect", { key: '8b2536a417dcc002ec8c365307e536aab42f4e30', y: "30", width: "5", height: "30", fill: "red" }), hAsync("rect", { key: '761e7069d41bd2a97b9abd0d88a86a2959599c9a', y: "60", width: "5", height: "30", fill: "#fc0" })), hAsync("svg", { key: '759f17b360438ee9b996fbd1d1de64459ec6f522', x: "50", y: "0" }, hAsync("text", { key: 'bd288b01b5fba86f61bd1c87e81063f0083a77b1', x: "0", y: "-0.05em", "font-family": "Verdana", style: { backgroundColor: 'white', color: 'black' } }, BUND_LOGO_TEXT_MAP.has(this.state._org) ? (hAsync("tspan", null, (_a = BUND_LOGO_TEXT_MAP.get(this.state._org)) === null || _a === void 0 ? void 0 : _a.map((text, index) => {
|
|
19997
20028
|
return (hAsync("tspan", { x: "0", dy: "1.1em", key: `kol-logo-text-${index}` }, text));
|
|
19998
20029
|
}))) : (hAsync("tspan", { fill: "red" }, hAsync("tspan", { x: "0", dy: "1.1em" }, "Der Schl\u00FCsselwert"), hAsync("tspan", { x: "0", dy: "1.1em", "font-weight": "bold" }, "'", this.state._org, "'"), hAsync("tspan", { x: "0", dy: "1.1em" }, "ist nicht definiert."), hAsync("tspan", { x: "0", dy: "1.1em" }, "oder freigegeben."))))))));
|
|
19999
20030
|
}
|
|
@@ -20055,11 +20086,11 @@ class KolModal {
|
|
|
20055
20086
|
(_b = (_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
20056
20087
|
}
|
|
20057
20088
|
render() {
|
|
20058
|
-
return (hAsync("dialog", { key: '
|
|
20089
|
+
return (hAsync("dialog", { key: '2808804594e267a8c28301975ebad4b481824100', class: "kol-modal", ref: (el) => {
|
|
20059
20090
|
this.refDialog = el;
|
|
20060
20091
|
}, style: {
|
|
20061
20092
|
width: this.state._width,
|
|
20062
|
-
}, "aria-label": this.state._label, onClose: this.handleNativeCloseEvent.bind(this) }, hAsync("div", { key: '
|
|
20093
|
+
}, "aria-label": this.state._label, onClose: this.handleNativeCloseEvent.bind(this) }, hAsync("div", { key: '78891ccca3fc18a86248f99cfb43ec9b551f393d' }, hAsync("slot", { key: '33b8aaed3a3bec64b63391e5224082f447ffc09c' }))));
|
|
20063
20094
|
}
|
|
20064
20095
|
validateActiveElement(value) {
|
|
20065
20096
|
watchValidator(this, '_activeElement', (value) => typeof value === 'object' || value === null, new Set(['HTMLElement', 'null']), value, {
|
|
@@ -20237,11 +20268,11 @@ class KolNav {
|
|
|
20237
20268
|
const collapsible = this.state._collapsible === true;
|
|
20238
20269
|
const hideLabel = this.state._hideLabel === true;
|
|
20239
20270
|
const orientation = this.state._orientation;
|
|
20240
|
-
return (hAsync(Host, { key: '
|
|
20271
|
+
return (hAsync(Host, { key: 'fb0d60f42eee96998be0064a86aca00659f48eda', class: "kol-nav" }, hAsync("div", { key: '09b82c10e914112bdb1d5ed7b1157cf962d19af8', class: {
|
|
20241
20272
|
nav: true,
|
|
20242
20273
|
[orientation]: true,
|
|
20243
20274
|
'is-compact': this.state._hideLabel,
|
|
20244
|
-
} }, hAsync("nav", { key: '
|
|
20275
|
+
} }, hAsync("nav", { key: 'fb626fb6effd19da063cb9f3fd473d835a57e8b0', "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: '7e72abde4c6d4363d0ccddb589710ec2dd70b244', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })), hasCompactButton && (hAsync("div", { key: 'feb546f9bc0cc64caf5163905148dcc96d89bb3a', class: "compact" }, hAsync(KolButtonTag, { key: 'd2407377fd4b4d43e7b2feb42452d8c41033e534', _ariaControls: "nav", _ariaExpanded: !hideLabel, _icons: hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
|
|
20245
20276
|
onClick: () => {
|
|
20246
20277
|
this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel === false });
|
|
20247
20278
|
},
|
|
@@ -20322,7 +20353,7 @@ class KolNav {
|
|
|
20322
20353
|
}; }
|
|
20323
20354
|
}
|
|
20324
20355
|
|
|
20325
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .
|
|
20356
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n /* TODO. Once #7126 is completed, move :host block into .kol-pagination */\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 .kol-pagination__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 .kol-pagination__separator:before {\n content: \"•••\";\n }\n}";
|
|
20326
20357
|
var KolPaginationDefaultStyle0 = defaultStyleCss$g;
|
|
20327
20358
|
|
|
20328
20359
|
const leftDoubleArrowIcon = {
|
|
@@ -20497,13 +20528,13 @@ class KolPagination {
|
|
|
20497
20528
|
}
|
|
20498
20529
|
else if (ellipsis === true) {
|
|
20499
20530
|
ellipsis = false;
|
|
20500
|
-
return (hAsync("li", { key: nonce() }, hAsync("span", { class: "
|
|
20531
|
+
return (hAsync("li", { key: nonce() }, hAsync("span", { class: "kol-pagination__separator", "aria-hidden": "true" })));
|
|
20501
20532
|
}
|
|
20502
20533
|
else {
|
|
20503
20534
|
return null;
|
|
20504
20535
|
}
|
|
20505
20536
|
});
|
|
20506
|
-
return (hAsync(Host, { class: "kol-pagination" }, hAsync("nav", { "aria-label": this.state._label }, hAsync("ul", { class: "
|
|
20537
|
+
return (hAsync(Host, { class: "kol-pagination" }, hAsync("nav", { "aria-label": this.state._label }, hAsync("ul", { class: "kol-pagination__navigation-list" }, this.state._hasButtons.first && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--first", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftDoubleArrowIcon, _hideLabel: true, _label: translate('kol-page-first'), _on: this.onGoToFirst, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.previous && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--previous", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftSingleArrow, _hideLabel: true, _label: translate('kol-page-back'), _on: this.onGoBackward, _tooltipAlign: this.state._tooltipAlign }))), pageButtons, this.state._hasButtons.next && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--next", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightSingleArrowIcon, _hideLabel: true, _label: translate('kol-page-next'), _on: this.onGoForward, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.last && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--last", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightDoubleArrowIcon, _hideLabel: true, _label: translate('kol-page-last'), _on: this.onGoToEnd, _tooltipAlign: this.state._tooltipAlign }))))), ((_a = this.state._pageSizeOptions) === null || _a === void 0 ? void 0 : _a.length) > 0 && (hAsync(KolSelectTag, { _hideLabel: true, _id: `pagination-size-${this.nonce}`, _label: translate('kol-entries-per-site'), _options: this.state._pageSizeOptions, _on: {
|
|
20507
20538
|
onChange: this.onChangePageSize,
|
|
20508
20539
|
}, _value: [this.state._pageSize] }))));
|
|
20509
20540
|
}
|
|
@@ -20515,7 +20546,7 @@ class KolPagination {
|
|
|
20515
20546
|
} }, hAsync("span", { slot: "expert" }, hAsync("span", { class: "visually-hidden" }, translate('kol-page')), " ", NUMBER_FORMATTER.format(page)))));
|
|
20516
20547
|
}
|
|
20517
20548
|
getSelectedPageButton(page) {
|
|
20518
|
-
return (hAsync("li", { key: nonce() }, hAsync(KolButtonWcTag, { class: "selected", _customClass: this.state._customClass, _disabled: true, _label: "" }, hAsync("span", { slot: "expert" }, hAsync("span", { class: "visually-hidden" }, translate('kol-page')), " ", NUMBER_FORMATTER.format(page)))));
|
|
20549
|
+
return (hAsync("li", { key: nonce() }, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--selected", _customClass: this.state._customClass, _disabled: true, _label: "" }, hAsync("span", { slot: "expert" }, hAsync("span", { class: "visually-hidden" }, translate('kol-page')), " ", NUMBER_FORMATTER.format(page)))));
|
|
20519
20550
|
}
|
|
20520
20551
|
validateBoundaryCount(value) {
|
|
20521
20552
|
watchNumber(this, '_boundaryCount', Math.max(0, value !== null && value !== void 0 ? value : 1));
|
|
@@ -22821,7 +22852,7 @@ class KolPopover {
|
|
|
22821
22852
|
});
|
|
22822
22853
|
}
|
|
22823
22854
|
render() {
|
|
22824
|
-
return (hAsync(Host, { key: '
|
|
22855
|
+
return (hAsync(Host, { key: '1bccc76fa3d3c19802f99f5b110823d08fa216df', ref: this.catchHostAndTriggerElement, class: "kol-popover" }, hAsync("div", { key: '9f22b6fb42dc0eb8a21349f5c71951a3fbf02dd2', class: { popover: true, show: this.state._visible }, ref: this.catchPopoverElement, hidden: !this.state._show }, hAsync("div", { key: 'fda3c5640eb362f53f752039304b45c0c997c1c0', class: `arrow ${this.state._align}`, ref: this.catchArrowElement }), hAsync("slot", { key: 'fd78e5d1e3ef90caff828e0e7fcbe65cf32a8f0c' }))));
|
|
22825
22856
|
}
|
|
22826
22857
|
validateAlign(value) {
|
|
22827
22858
|
validateAlign(this, value);
|
|
@@ -22901,7 +22932,7 @@ class KolProcess {
|
|
|
22901
22932
|
};
|
|
22902
22933
|
}
|
|
22903
22934
|
render() {
|
|
22904
|
-
return (hAsync(Host, { key: '
|
|
22935
|
+
return (hAsync(Host, { key: 'ce0bd5bf663bb8291bb87efc89b9ffdc78fc5f7c', class: "kol-progress" }, createProgressSVG(this.state), hAsync("progress", { key: '27c5f7477980e3251af3fd6176e35397bd0f039c', "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: '800ab40fd730fd3db131248aff1b68a1f8dabf7f', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, this.state._liveValue, " von ", this.state._max, " ", this.state._unit)));
|
|
22905
22936
|
}
|
|
22906
22937
|
validateLabel(value) {
|
|
22907
22938
|
validateLabel(this, value);
|
|
@@ -22970,7 +23001,7 @@ class KolProcess {
|
|
|
22970
23001
|
}; }
|
|
22971
23002
|
}
|
|
22972
23003
|
|
|
22973
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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
|
|
23004
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-quote {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n display: inline;\n margin: 0;\n padding: 0;\n }\n .kol-quote__cite::before {\n content: \"—\";\n }\n .kol-quote--block .kol-quote__cite::before {\n padding-right: 0.5em;\n }\n .kol-quote--inline .kol-quote__cite::before {\n padding: 0.5em;\n }\n .kol-quote--block .kol-quote__figcaption {\n display: inline;\n margin: 0;\n padding: 0;\n }\n .kol-quote__blockquote::before {\n content: open-quote;\n }\n .kol-quote__blockquote::after {\n content: close-quote;\n }\n}";
|
|
22974
23005
|
var KolQuoteDefaultStyle0 = defaultStyleCss$e;
|
|
22975
23006
|
|
|
22976
23007
|
class KolQuote {
|
|
@@ -23010,9 +23041,7 @@ class KolQuote {
|
|
|
23010
23041
|
}
|
|
23011
23042
|
render() {
|
|
23012
23043
|
const hasExpertSlot = showExpertSlot(this.state._quote);
|
|
23013
|
-
return (hAsync(
|
|
23014
|
-
[this.state._variant]: true,
|
|
23015
|
-
} }, this.state._variant === 'block' ? (hAsync("blockquote", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))), typeof this.state._label === 'string' && this.state._label.length > 0 && (hAsync("figcaption", { key: '1320ca33e829f5ce034e81d437adc036dfdc7220' }, hAsync("cite", { key: '1f3a72521863cb8ed8fd7b2263c8bfe370b89497' }, hAsync(KolLinkTag, { key: '55e970510b73fb06a239f92a2a64f0f7101fd766', _href: this.state._href, _label: this.state._label, _target: "_blank" })))))));
|
|
23044
|
+
return (hAsync("figure", { key: 'afa4a5695577570c0e7a39c70d991930804960bb', class: clsx('kol-quote', `kol-quote--${this.state._variant}`) }, this.state._variant === 'block' ? (hAsync("blockquote", { class: "kol-quote__blockquote", cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { class: "kol-quote__quote", cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))), typeof this.state._label === 'string' && this.state._label.length > 0 && (hAsync("figcaption", { key: '7b992e8edb1a43580bf0b34cf4e91a575b287e3c', class: "kol-quote__figcaption" }, hAsync("cite", { key: '1946cabfd9564371e69236948e66d20cf696519a', class: "kol-quote__cite" }, hAsync(KolLinkTag, { key: 'd048cf71f3253fc32d52538eb003b2d785821f42', _href: this.state._href, _label: this.state._label, _target: "_blank" }))))));
|
|
23016
23045
|
}
|
|
23017
23046
|
static get watchers() { return {
|
|
23018
23047
|
"_label": ["validateLabel"],
|
|
@@ -23118,7 +23147,7 @@ class SelectController extends InputIconController {
|
|
|
23118
23147
|
}
|
|
23119
23148
|
}
|
|
23120
23149
|
|
|
23121
|
-
const defaultStyleCss$d = "@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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\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
|
|
23150
|
+
const defaultStyleCss$d = "@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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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 .input {\n background-color: white;\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 {\n display: grid;\n }\n .kol-alert__container {\n place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host option:checked::before {\n content: \"✓ \";\n }\n}";
|
|
23122
23151
|
var KolSelectDefaultStyle0 = defaultStyleCss$d;
|
|
23123
23152
|
|
|
23124
23153
|
const isSelected = (valueList, optionValue) => {
|
|
@@ -23150,16 +23179,16 @@ class KolSelect {
|
|
|
23150
23179
|
render() {
|
|
23151
23180
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
23152
23181
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
23153
|
-
return (hAsync(Host, { key: '
|
|
23182
|
+
return (hAsync(Host, { key: '3bc385543e42044dcfdd881d47b3b22ccddca4f6', class: { 'kol-select': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'c5480b05b5244e53f66d7ea62e2777bbc1b4cfcc', class: {
|
|
23154
23183
|
'hide-label': !!this.state._hideLabel,
|
|
23155
23184
|
select: true,
|
|
23156
|
-
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '
|
|
23185
|
+
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '74b9fa4b8733a71e9a4f9aa2f7cccfec986fa8f0', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'c2906d81d3db2549755b6367a5879620f0ce8959', slot: "input" }, hAsync("form", { key: 'fd1120cec7dd4a102dd0a858f18c98d12acdeb8d', onSubmit: (event) => {
|
|
23157
23186
|
event.preventDefault();
|
|
23158
23187
|
propagateSubmitEventToForm({
|
|
23159
23188
|
form: this.host,
|
|
23160
23189
|
ref: this.selectRef,
|
|
23161
23190
|
});
|
|
23162
|
-
} }, hAsync("input", { key: '
|
|
23191
|
+
} }, hAsync("input", { key: '343a2400b6b84a22619c71de19e32ca9a00f8fc2', type: "submit", hidden: true }), hAsync("select", Object.assign({ key: '6cf83c500d06092cde9095140b2e46489aea0890', 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, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onFocus: (event) => {
|
|
23163
23192
|
this.controller.onFacade.onFocus(event);
|
|
23164
23193
|
this.inputHasFocus = true;
|
|
23165
23194
|
}, onBlur: (event) => {
|
|
@@ -23514,20 +23543,20 @@ class KolSingleSelect {
|
|
|
23514
23543
|
render() {
|
|
23515
23544
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
23516
23545
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
23517
|
-
return (hAsync(Host, { key: '
|
|
23546
|
+
return (hAsync(Host, { key: 'ebdff0301dfa87e96054e860672d637beeb8be1d', class: "kol-single-select" }, hAsync("div", { key: '692c5d73f1529831e68d90f290bd4f716aa61b43', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputTag, { key: 'e6ab237dd5a45304f997b8aacdc7288c92b46990', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, role: `presentation` }, hAsync("span", { key: 'd2d817a2cfdc9a239899969e7672241328525660', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'dd2049755362dabcf9193c38fbd39f296d0e5d6a', slot: "input" }, hAsync("div", { key: '3b2f11db77a370ebeda6fae410ef262507fcfbee', class: "single-select__group" }, hAsync("input", Object.assign({ key: '3bc118d5f2622237cf9caea93ce7ec15da25dc3c', ref: this.catchRef, class: "single-select__input", type: "text", "aria-autocomplete": "both", "aria-controls": "listbox", value: this._inputValue, 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, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onClick: this.toggleListbox.bind(this), onFocus: (event) => {
|
|
23518
23547
|
this.controller.onFacade.onFocus(event);
|
|
23519
23548
|
this.inputHasFocus = true;
|
|
23520
23549
|
}, onBlur: (event) => {
|
|
23521
23550
|
this.controller.onFacade.onBlur(event);
|
|
23522
23551
|
this.inputHasFocus = false;
|
|
23523
|
-
}, placeholder: this.state._placeholder })), this._inputValue && (hAsync(KolIconTag, { key: '
|
|
23552
|
+
}, placeholder: this.state._placeholder })), this._inputValue && (hAsync(KolIconTag, { key: '743415916dfc8d26b837cb7ed4bf8ffb4dc44974', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
|
|
23524
23553
|
var _a;
|
|
23525
23554
|
this.clearSelection();
|
|
23526
23555
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23527
|
-
}, class: "single-select__delete" })), hAsync("button", { key: '
|
|
23556
|
+
}, class: "single-select__delete" })), hAsync("button", { key: 'a600583a3b1965376d9f9ca605a894ddf7b02284', tabindex: "-1", class: "single-select__button", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: 'e9857d1f416db917cd0c7b2fe36c37389ffcdbad', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: '90cecb3d203d040d2b6bc1e59a707588dd187e4f', role: "listbox", class: clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden'), onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
|
|
23528
23557
|
if (el)
|
|
23529
23558
|
this.refOptions[index] = el;
|
|
23530
|
-
}, tabIndex: -1, role: "option", "aria-selected": this.state._value === option.value, onClick: (event) => {
|
|
23559
|
+
}, tabIndex: -1, role: "option", "aria-selected": this.state._value === option.value ? 'true' : undefined, onClick: (event) => {
|
|
23531
23560
|
var _a;
|
|
23532
23561
|
this.selectOption(event, option);
|
|
23533
23562
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
@@ -23871,7 +23900,7 @@ class KolSingleSelect {
|
|
|
23871
23900
|
}; }
|
|
23872
23901
|
}
|
|
23873
23902
|
|
|
23874
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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
|
|
23903
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1;\n }\n .kol-link:focus {\n background-color: #fff;\n left: unset;\n position: unset;\n }\n}";
|
|
23875
23904
|
var KolSkipNavDefaultStyle0 = defaultStyleCss$b;
|
|
23876
23905
|
|
|
23877
23906
|
class KolSkipNav {
|
|
@@ -23885,7 +23914,7 @@ class KolSkipNav {
|
|
|
23885
23914
|
};
|
|
23886
23915
|
}
|
|
23887
23916
|
render() {
|
|
23888
|
-
return (hAsync(Host, { key: '
|
|
23917
|
+
return (hAsync(Host, { key: 'c4475d2ac72b100a4a40a9ab74ecee5b9f6ae736', class: "kol-skip-nav" }, hAsync("nav", { key: 'a085486a7d1b57ad900fda8900a76a1de8f1dcfd', "aria-label": this.state._label }, hAsync("ul", { key: '9f997ac1f6ef920cfd9aab295e68cea439a3680f' }, this.state._links.map((link, index) => {
|
|
23889
23918
|
return (hAsync("li", { key: index }, hAsync(KolLinkWcTag, Object.assign({}, link))));
|
|
23890
23919
|
})))));
|
|
23891
23920
|
}
|
|
@@ -23953,7 +23982,7 @@ class KolSpin {
|
|
|
23953
23982
|
};
|
|
23954
23983
|
}
|
|
23955
23984
|
render() {
|
|
23956
|
-
return (hAsync(Host, { key: '
|
|
23985
|
+
return (hAsync(Host, { key: 'eb389100d6f95babfdc0a46936cbfa02ad3f6182', class: "kol-spin" }, this.state._show ? (hAsync("span", { "aria-busy": "true", "aria-label": translate('kol-action-running'), "aria-live": "polite", class: {
|
|
23957
23986
|
spin: true,
|
|
23958
23987
|
[this.state._variant]: true,
|
|
23959
23988
|
}, role: "alert" }, renderSpin(this.state._variant))) : (this.showToggled && hAsync("span", { "aria-label": translate('kol-action-done'), "aria-busy": "false", "aria-live": "polite", role: "alert" }))));
|
|
@@ -24038,12 +24067,12 @@ class KolSplitButton {
|
|
|
24038
24067
|
}
|
|
24039
24068
|
render() {
|
|
24040
24069
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
24041
|
-
return (hAsync(Host, { key: '
|
|
24070
|
+
return (hAsync(Host, { key: 'ddcf029febe331482db74efb5178379d54dc3c7a', class: "kol-split-button" }, hAsync("div", { key: 'ff07344d7fa0bfcd43b7bd67d3477f751f9b3327', class: "split-button-root" }, hAsync(KolButtonWcTag, { key: '0dac98bbbcde8f0141475b4d1634796cef02ba0d', class: {
|
|
24042
24071
|
'main-button': true,
|
|
24043
24072
|
button: true,
|
|
24044
24073
|
[this._variant]: this._variant !== 'custom',
|
|
24045
24074
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
24046
|
-
}, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: '
|
|
24075
|
+
}, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: 'c9056bafd37896c5c38a07afea457415a7ccceab', class: "horizontal-line" }), hAsync(KolButtonWcTag, { key: 'f62e1506dd5ba1ea5f650e641492173e06743efc', class: "secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler })), hAsync(KolPopoverWcTag, { key: '98d55e1b2db53076dfc2e731e79e9bc4016fc2e0', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: 'a3ee880452532b8322c3f62415fd4506b7a8301e' }))));
|
|
24047
24076
|
}
|
|
24048
24077
|
async closePopup() {
|
|
24049
24078
|
this.handleOnClose();
|
|
@@ -24095,7 +24124,7 @@ class KolSymbol {
|
|
|
24095
24124
|
};
|
|
24096
24125
|
}
|
|
24097
24126
|
render() {
|
|
24098
|
-
return (hAsync(Host, { key: '
|
|
24127
|
+
return (hAsync(Host, { key: 'ea3a214f28dd359428f7c3263c884de4365c4dd0', class: "kol-symbol" }, hAsync("span", { key: 'd09793b71568079dce2ec150f3fa87eca5300abe', "aria-label": this.state._label, role: "term" }, this.state._symbol)));
|
|
24099
24128
|
}
|
|
24100
24129
|
validateLabel(value) {
|
|
24101
24130
|
validateLabel(this, value, {
|
|
@@ -24144,7 +24173,7 @@ class KolTable {
|
|
|
24144
24173
|
this._on = undefined;
|
|
24145
24174
|
}
|
|
24146
24175
|
render() {
|
|
24147
|
-
return (hAsync(KolTableStatefulTag, { key: '
|
|
24176
|
+
return (hAsync(KolTableStatefulTag, { key: '3aacf9146f821f2daaec1e89fe471ff350191879', _allowMultiSort: this._allowMultiSort, _data: this._data, _dataFoot: this._dataFoot, _headers: this._headers, _label: this._label, _minWidth: this._minWidth, _pagination: this._pagination, _paginationPosition: this._paginationPosition, _selection: this._selection, _on: this._on }));
|
|
24148
24177
|
}
|
|
24149
24178
|
static get cmpMeta() { return {
|
|
24150
24179
|
"$flags$": 9,
|
|
@@ -24202,7 +24231,7 @@ var KeyboardKey;
|
|
|
24202
24231
|
KeyboardKey["Space"] = " ";
|
|
24203
24232
|
})(KeyboardKey || (KeyboardKey = {}));
|
|
24204
24233
|
|
|
24205
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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: calc(5rem / var(--kolibri-root-font-size, 16)) auto Highlight;\n outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto -webkit-focus-ring-color;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\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 .
|
|
24234
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\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: calc(5rem / var(--kolibri-root-font-size, 16)) auto Highlight;\n outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto -webkit-focus-ring-color;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .table-sort-button .kol-button {\n color: inherit;\n }\n tbody th,\n th.align-left {\n text-align: left;\n }\n tbody th .table-sort-button .kol-button__text,\n th.align-left .table-sort-button .kol-button__text {\n justify-items: start;\n }\n th.align-center {\n text-align: center;\n }\n th.align-center .table-sort-button .kol-button__text {\n justify-items: center;\n }\n th.align-right {\n text-align: right;\n }\n th.align-right .table-sort-button .kol-button__text {\n justify-items: end;\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: none;\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: calc(2rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n transition: all 0.5s ease 0s;\n }\n .input input[type=radio] {\n display: flex;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\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-color: selectedItem !important;\n }\n }\n}";
|
|
24206
24235
|
var KolTableStatefulDefaultStyle0 = defaultStyleCss$8;
|
|
24207
24236
|
|
|
24208
24237
|
const PAGINATION_OPTIONS = [10, 20, 50, 100];
|
|
@@ -24569,7 +24598,7 @@ class KolTableStateful {
|
|
|
24569
24598
|
horizontal: (_c = this.state._headers.horizontal) === null || _c === void 0 ? void 0 : _c.map((row) => row.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) })))),
|
|
24570
24599
|
vertical: (_d = this.state._headers.vertical) === null || _d === void 0 ? void 0 : _d.map((column) => column.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) })))),
|
|
24571
24600
|
};
|
|
24572
|
-
return (hAsync(Host, { key: '
|
|
24601
|
+
return (hAsync(Host, { key: 'e898cfc70f398d71426a9ca6fff58421ac512978', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: '771fbc08b5053a9a55158aa8c3a8370934d97063', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
|
|
24573
24602
|
onSort: (_, payload) => {
|
|
24574
24603
|
this.handleSort(payload);
|
|
24575
24604
|
},
|
|
@@ -24617,7 +24646,7 @@ class KolTableStateful {
|
|
|
24617
24646
|
}; }
|
|
24618
24647
|
}
|
|
24619
24648
|
|
|
24620
|
-
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :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: calc(5rem / var(--kolibri-root-font-size, 16)) auto Highlight;\n outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto -webkit-focus-ring-color;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\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 .
|
|
24649
|
+
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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :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: calc(5rem / var(--kolibri-root-font-size, 16)) auto Highlight;\n outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto -webkit-focus-ring-color;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .table-sort-button .kol-button {\n color: inherit;\n }\n tbody th,\n th.align-left {\n text-align: left;\n }\n tbody th .table-sort-button .kol-button__text,\n th.align-left .table-sort-button .kol-button__text {\n justify-items: start;\n }\n th.align-center {\n text-align: center;\n }\n th.align-center .table-sort-button .kol-button__text {\n justify-items: center;\n }\n th.align-right {\n text-align: right;\n }\n th.align-right .table-sort-button .kol-button__text {\n justify-items: end;\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: none;\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: calc(2rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n transition: all 0.5s ease 0s;\n }\n .input input[type=radio] {\n display: flex;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\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-color: selectedItem !important;\n }\n }\n}";
|
|
24621
24650
|
var KolTableStatelessDefaultStyle0 = defaultStyleCss$7;
|
|
24622
24651
|
|
|
24623
24652
|
class KolTableStateless$1 {
|
|
@@ -24632,7 +24661,7 @@ class KolTableStateless$1 {
|
|
|
24632
24661
|
this._selection = undefined;
|
|
24633
24662
|
}
|
|
24634
24663
|
render() {
|
|
24635
|
-
return (hAsync(Host, { key: '
|
|
24664
|
+
return (hAsync(Host, { key: '366a0fa7594af0080e834abf971334d4bf3c8dd7', class: "kol-table-stateless" }, hAsync(KolTableStatelessWcTag, { key: 'e89610ae8cef7d8459435a0c13e14a4f5c2cd305', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection })));
|
|
24636
24665
|
}
|
|
24637
24666
|
static get style() { return {
|
|
24638
24667
|
default: KolTableStatelessDefaultStyle0
|
|
@@ -24807,7 +24836,7 @@ class KolTableStateless {
|
|
|
24807
24836
|
let max = 0;
|
|
24808
24837
|
horizontalHeaders.forEach((row) => {
|
|
24809
24838
|
let count = 0;
|
|
24810
|
-
row.forEach((col) => { var _a; return (count += (_a = col.colSpan) !== null && _a !== void 0 ? _a : 1); });
|
|
24839
|
+
Array.isArray(row) && row.forEach((col) => { var _a; return (count += (_a = col.colSpan) !== null && _a !== void 0 ? _a : 1); });
|
|
24811
24840
|
if (max < count) {
|
|
24812
24841
|
max = count;
|
|
24813
24842
|
}
|
|
@@ -24822,7 +24851,7 @@ class KolTableStateless {
|
|
|
24822
24851
|
let max = 0;
|
|
24823
24852
|
verticalHeaders.forEach((col) => {
|
|
24824
24853
|
let count = 0;
|
|
24825
|
-
col.forEach((row) => { var _a; return (count += (_a = row.rowSpan) !== null && _a !== void 0 ? _a : 1); });
|
|
24854
|
+
Array.isArray(col) && col.forEach((row) => { var _a; return (count += (_a = row.rowSpan) !== null && _a !== void 0 ? _a : 1); });
|
|
24826
24855
|
if (max < count) {
|
|
24827
24856
|
max = count;
|
|
24828
24857
|
}
|
|
@@ -24835,34 +24864,34 @@ class KolTableStateless {
|
|
|
24835
24864
|
}
|
|
24836
24865
|
return max;
|
|
24837
24866
|
}
|
|
24838
|
-
|
|
24839
|
-
const
|
|
24867
|
+
getThePrimaryHeadersWithKeysIfExists(headers) {
|
|
24868
|
+
const primaryHeadersWithKeys = [];
|
|
24840
24869
|
headers.forEach((cells) => {
|
|
24841
24870
|
cells.forEach((cell) => {
|
|
24842
24871
|
if (typeof cell.key === 'string') {
|
|
24843
|
-
|
|
24872
|
+
primaryHeadersWithKeys.push(cell);
|
|
24844
24873
|
}
|
|
24845
24874
|
});
|
|
24846
24875
|
});
|
|
24847
|
-
return
|
|
24876
|
+
return primaryHeadersWithKeys;
|
|
24848
24877
|
}
|
|
24849
|
-
|
|
24878
|
+
getPrimaryHeaders(headers) {
|
|
24850
24879
|
var _a, _b;
|
|
24851
|
-
let
|
|
24880
|
+
let primaryHeadersWithKeys = this.getThePrimaryHeadersWithKeysIfExists((_a = headers.horizontal) !== null && _a !== void 0 ? _a : []);
|
|
24852
24881
|
this.horizontal = true;
|
|
24853
|
-
if (
|
|
24854
|
-
|
|
24855
|
-
if (
|
|
24882
|
+
if (primaryHeadersWithKeys.length === 0) {
|
|
24883
|
+
primaryHeadersWithKeys = this.getThePrimaryHeadersWithKeysIfExists((_b = headers.vertical) !== null && _b !== void 0 ? _b : []);
|
|
24884
|
+
if (primaryHeadersWithKeys.length > 0) {
|
|
24856
24885
|
this.horizontal = false;
|
|
24857
24886
|
}
|
|
24858
24887
|
}
|
|
24859
|
-
return
|
|
24888
|
+
return primaryHeadersWithKeys;
|
|
24860
24889
|
}
|
|
24861
24890
|
createDataField(data, headers, isFoot) {
|
|
24862
24891
|
var _a;
|
|
24863
24892
|
headers.horizontal = Array.isArray(headers === null || headers === void 0 ? void 0 : headers.horizontal) ? headers.horizontal : [];
|
|
24864
24893
|
headers.vertical = Array.isArray(headers === null || headers === void 0 ? void 0 : headers.vertical) ? headers.vertical : [];
|
|
24865
|
-
const primaryHeader = this.
|
|
24894
|
+
const primaryHeader = this.getPrimaryHeaders(headers);
|
|
24866
24895
|
const maxCols = this.getNumberOfCols(headers.horizontal, data);
|
|
24867
24896
|
let maxRows = this.getNumberOfRows(headers.vertical, data);
|
|
24868
24897
|
let startRow = 0;
|
|
@@ -25024,6 +25053,13 @@ class KolTableStateless {
|
|
|
25024
25053
|
}
|
|
25025
25054
|
} })), hAsync(KolTooltipWcTag, { "aria-hidden": "true", class: "input-tooltip", _align: "right", _id: `${translationKey}-label`, _label: label }))));
|
|
25026
25055
|
}
|
|
25056
|
+
renderHeaderTdCell() {
|
|
25057
|
+
return (hAsync(Fragment, null, Array.isArray(this.state._headerCells.horizontal) &&
|
|
25058
|
+
this.state._headerCells.horizontal.length > 0 &&
|
|
25059
|
+
Array.isArray(this.state._headerCells.vertical) &&
|
|
25060
|
+
this.state._headerCells.vertical.length > 0 &&
|
|
25061
|
+
Array.isArray(this.state._headerCells.horizontal) && (hAsync("td", { "aria-hidden": "true", colSpan: this.state._headerCells.vertical.length, rowSpan: this.state._headerCells.horizontal.length }))));
|
|
25062
|
+
}
|
|
25027
25063
|
renderHeadingCell(cell, rowIndex, colIndex, isVertical) {
|
|
25028
25064
|
let ariaSort = undefined;
|
|
25029
25065
|
let sortButtonIcon = 'codicon codicon-fold';
|
|
@@ -25055,9 +25091,11 @@ class KolTableStateless {
|
|
|
25055
25091
|
} })) : (cell.label)));
|
|
25056
25092
|
}
|
|
25057
25093
|
renderSpacer(variant, cellDefs) {
|
|
25058
|
-
var _a;
|
|
25059
|
-
const
|
|
25060
|
-
|
|
25094
|
+
var _a, _b;
|
|
25095
|
+
const verticalHeaderColpan = ((_a = this.state._headerCells.vertical) === null || _a === void 0 ? void 0 : _a.length) || 0;
|
|
25096
|
+
const colspan = (_b = cellDefs === null || cellDefs === void 0 ? void 0 : cellDefs[0]) === null || _b === void 0 ? void 0 : _b.reduce((acc, row) => acc + (row.colSpan || 1), 0);
|
|
25097
|
+
const selectionCell = this.state._selection ? 1 : 0;
|
|
25098
|
+
return (hAsync("tr", { "aria-hidden": "true", class: `${variant}-spacer` }, hAsync("td", { colSpan: verticalHeaderColpan + colspan + selectionCell })));
|
|
25061
25099
|
}
|
|
25062
25100
|
renderFoot() {
|
|
25063
25101
|
if (!this.state._dataFoot || this.state._dataFoot.length === 0) {
|
|
@@ -25072,28 +25110,29 @@ class KolTableStateless {
|
|
|
25072
25110
|
render() {
|
|
25073
25111
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
25074
25112
|
this.checkboxRefs = [];
|
|
25075
|
-
return (hAsync(Host, { key: '
|
|
25113
|
+
return (hAsync(Host, { key: '4a01d08b67fa32cb98a9d92044bc6ac219838243', class: "kol-table-stateless-wc" }, hAsync("div", { key: '6daa90f7474c6e1602f1446a7852d769dd8e71b9', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '9d604b2c5a57fddbacc85093c636dd4deae7b21d', style: {
|
|
25076
25114
|
minWidth: this.state._minWidth,
|
|
25077
|
-
} }, hAsync("div", { key: '
|
|
25078
|
-
this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(),
|
|
25079
|
-
|
|
25080
|
-
|
|
25081
|
-
|
|
25082
|
-
|
|
25083
|
-
|
|
25084
|
-
|
|
25085
|
-
|
|
25086
|
-
|
|
25087
|
-
|
|
25088
|
-
|
|
25089
|
-
|
|
25090
|
-
|
|
25091
|
-
|
|
25092
|
-
|
|
25093
|
-
|
|
25094
|
-
|
|
25115
|
+
} }, hAsync("div", { key: '8ad517ca9d73eddcda3334164c50cb5e5ff824eb', class: "focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: 'c9feb58b3a5a51bf0f7b6d35785494989dfed8e4', id: "caption" }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: '9c99834d9fbbd8ab12fee77e8ca33d6ad064390a' }, [
|
|
25116
|
+
this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) &&
|
|
25117
|
+
cols.map((cell, colIndex) => {
|
|
25118
|
+
if (cell.asTd === true) {
|
|
25119
|
+
return (hAsync("td", { key: `thead-${rowIndex}-${colIndex}-${cell.label}`, class: {
|
|
25120
|
+
[cell.textAlign]: typeof cell.textAlign === 'string' && cell.textAlign.length > 0,
|
|
25121
|
+
}, colSpan: cell.colSpan, rowSpan: cell.rowSpan, style: {
|
|
25122
|
+
textAlign: cell.textAlign,
|
|
25123
|
+
width: cell.width,
|
|
25124
|
+
}, ref: typeof cell.render === 'function'
|
|
25125
|
+
? (el) => {
|
|
25126
|
+
this.cellRender(cell, el);
|
|
25127
|
+
}
|
|
25128
|
+
: undefined }, typeof cell.render !== 'function' ? cell.label : ''));
|
|
25129
|
+
}
|
|
25130
|
+
else {
|
|
25131
|
+
return this.renderHeadingCell(cell, rowIndex, colIndex, false);
|
|
25132
|
+
}
|
|
25133
|
+
})))),
|
|
25095
25134
|
this.renderSpacer('head', this.state._headerCells.horizontal),
|
|
25096
|
-
])), hAsync("tbody", { key: '
|
|
25135
|
+
])), hAsync("tbody", { key: 'e52d4221c5cf7f445f1735428907c8a4b2cd5740' }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
|
|
25097
25136
|
}
|
|
25098
25137
|
get host() { return getElement(this); }
|
|
25099
25138
|
static get watchers() { return {
|
|
@@ -25315,11 +25354,11 @@ class KolTabs {
|
|
|
25315
25354
|
} }))));
|
|
25316
25355
|
}
|
|
25317
25356
|
render() {
|
|
25318
|
-
return (hAsync(Host, { key: '
|
|
25357
|
+
return (hAsync(Host, { key: 'fe001ba163daa992ac9062cfd422960c6b2c46e0', class: "kol-tabs" }, hAsync("div", { key: 'c9ad7feee0211b8847e6fedd8cf1e0a84af1aeaa', ref: (el) => {
|
|
25319
25358
|
this.tabPanelsElement = el;
|
|
25320
25359
|
}, class: {
|
|
25321
25360
|
[`tabs-align-${this.state._align}`]: true,
|
|
25322
|
-
} }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
25361
|
+
} }, this.renderButtonGroup(), hAsync("div", { key: '889a4c8fb229099df57ab143e6692273e26e698f', class: "tabs-content", ref: this.catchTabPanelHost }))));
|
|
25323
25362
|
}
|
|
25324
25363
|
validateAlign(value) {
|
|
25325
25364
|
validateAlign(this, value);
|
|
@@ -25481,7 +25520,9 @@ class TextareaController extends InputIconController {
|
|
|
25481
25520
|
watchBoolean(this.component, '_readOnly', value);
|
|
25482
25521
|
}
|
|
25483
25522
|
validateResize(value) {
|
|
25484
|
-
watchValidator(this.component, '_resize', (value) => typeof value === 'string' && cssResizeOptions.includes(value), new Set(`String {${cssResizeOptions.join(', ')}`), value
|
|
25523
|
+
watchValidator(this.component, '_resize', (value) => typeof value === 'string' && cssResizeOptions.includes(value), new Set(`String {${cssResizeOptions.join(', ')}`), value, {
|
|
25524
|
+
defaultValue: 'vertical',
|
|
25525
|
+
});
|
|
25485
25526
|
}
|
|
25486
25527
|
validateRequired(value) {
|
|
25487
25528
|
watchBoolean(this.component, '_required', value);
|
|
@@ -25489,6 +25530,9 @@ class TextareaController extends InputIconController {
|
|
|
25489
25530
|
validateRows(value) {
|
|
25490
25531
|
validateRows(this.component, value);
|
|
25491
25532
|
}
|
|
25533
|
+
validateSpellCheck(value) {
|
|
25534
|
+
validateSpellCheck(this.component, value);
|
|
25535
|
+
}
|
|
25492
25536
|
validateValue(value) {
|
|
25493
25537
|
watchString(this.component, '_value', value, {
|
|
25494
25538
|
hooks: {
|
|
@@ -25506,6 +25550,7 @@ class TextareaController extends InputIconController {
|
|
|
25506
25550
|
this.validateResize(this.component._resize);
|
|
25507
25551
|
this.validateRequired(this.component._required);
|
|
25508
25552
|
this.validateRows(this.component._rows);
|
|
25553
|
+
this.validateSpellCheck(this.component._spellCheck);
|
|
25509
25554
|
this.validateValue(this.component._value);
|
|
25510
25555
|
}
|
|
25511
25556
|
}
|
|
@@ -25537,7 +25582,7 @@ class KolTextarea {
|
|
|
25537
25582
|
render() {
|
|
25538
25583
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
25539
25584
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
25540
|
-
return (hAsync(Host, { key: '
|
|
25585
|
+
return (hAsync(Host, { key: 'b74d45df2d6078700596a5a77f83f39c4a079381', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: '21ffcf9fd0f267c62c9cbb5fdca033836acd4671', class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '55727861c9c6444d08c0cd6ebe8b94a78d0ea063', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '8eeffa9d0d546a4d7b08b9f687882a5062eb8905', slot: "input" }, hAsync("textarea", Object.assign({ key: 'a298328060f25991258ab8fd85d8c6e1e5c8d374', 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, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, rows: this.state._rows, placeholder: this.state._placeholder, spellcheck: this.state._spellCheck }, this.controller.onFacade, { onInput: this.onInput, onFocus: (event) => {
|
|
25541
25586
|
this.controller.onFacade.onFocus(event);
|
|
25542
25587
|
this.inputHasFocus = true;
|
|
25543
25588
|
}, onBlur: (event) => {
|
|
@@ -25583,6 +25628,7 @@ class KolTextarea {
|
|
|
25583
25628
|
this._required = false;
|
|
25584
25629
|
this._rows = undefined;
|
|
25585
25630
|
this._shortKey = undefined;
|
|
25631
|
+
this._spellCheck = undefined;
|
|
25586
25632
|
this._syncValueBySelector = undefined;
|
|
25587
25633
|
this._tabIndex = undefined;
|
|
25588
25634
|
this._tooltipAlign = 'top';
|
|
@@ -25661,9 +25707,6 @@ class KolTextarea {
|
|
|
25661
25707
|
this.controller.validateReadOnly(value);
|
|
25662
25708
|
}
|
|
25663
25709
|
validateResize(value) {
|
|
25664
|
-
if (value === 'both' || value === 'horizontal') {
|
|
25665
|
-
devWarning('In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `none` (default) and `vertical`.');
|
|
25666
|
-
}
|
|
25667
25710
|
this.controller.validateResize(value);
|
|
25668
25711
|
}
|
|
25669
25712
|
validateRequired(value) {
|
|
@@ -25675,6 +25718,9 @@ class KolTextarea {
|
|
|
25675
25718
|
validateShortKey(value) {
|
|
25676
25719
|
this.controller.validateShortKey(value);
|
|
25677
25720
|
}
|
|
25721
|
+
validateSpellCheck(value) {
|
|
25722
|
+
this.controller.validateSpellCheck(value);
|
|
25723
|
+
}
|
|
25678
25724
|
validateSyncValueBySelector(value) {
|
|
25679
25725
|
this.controller.validateSyncValueBySelector(value);
|
|
25680
25726
|
}
|
|
@@ -25730,6 +25776,7 @@ class KolTextarea {
|
|
|
25730
25776
|
"_required": ["validateRequired"],
|
|
25731
25777
|
"_rows": ["validateRows"],
|
|
25732
25778
|
"_shortKey": ["validateShortKey"],
|
|
25779
|
+
"_spellCheck": ["validateSpellCheck"],
|
|
25733
25780
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
25734
25781
|
"_tabIndex": ["validateTabIndex"],
|
|
25735
25782
|
"_touched": ["validateTouched"],
|
|
@@ -25764,6 +25811,7 @@ class KolTextarea {
|
|
|
25764
25811
|
"_required": [4],
|
|
25765
25812
|
"_rows": [1026],
|
|
25766
25813
|
"_shortKey": [1, "_short-key"],
|
|
25814
|
+
"_spellCheck": [4, "_spell-check"],
|
|
25767
25815
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
25768
25816
|
"_tabIndex": [2, "_tab-index"],
|
|
25769
25817
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
@@ -25781,7 +25829,7 @@ class KolTextarea {
|
|
|
25781
25829
|
}; }
|
|
25782
25830
|
}
|
|
25783
25831
|
|
|
25784
|
-
const defaultStyleCss$4 = "/*\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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert
|
|
25832
|
+
const defaultStyleCss$4 = "/*\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: calc(44rem / var(--kolibri-root-font-size, 16));\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 rem(44).\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: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@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}";
|
|
25785
25833
|
var KolToastContainerDefaultStyle0 = defaultStyleCss$4;
|
|
25786
25834
|
|
|
25787
25835
|
const TRANSITION_TIMEOUT = 300;
|
|
@@ -25838,7 +25886,7 @@ class KolToastContainer {
|
|
|
25838
25886
|
}
|
|
25839
25887
|
}
|
|
25840
25888
|
render() {
|
|
25841
|
-
return (hAsync(Host, { key: '
|
|
25889
|
+
return (hAsync(Host, { key: '2e85468ef113151083acb2acf7ab012303af821d', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: 'b1a6cc9179508854c70f3b06f75239fca1ceb59a', _label: translate('kol-toast-close-all'), class: "close-all", _on: {
|
|
25842
25890
|
onClick: () => {
|
|
25843
25891
|
void this.closeAll();
|
|
25844
25892
|
},
|
|
@@ -25890,7 +25938,7 @@ class KolToolbar {
|
|
|
25890
25938
|
this._items = undefined;
|
|
25891
25939
|
}
|
|
25892
25940
|
render() {
|
|
25893
|
-
return (hAsync(Host, { key: '
|
|
25941
|
+
return (hAsync(Host, { key: 'd66f12c71d38af377963edfbf0ce0fa0407d207c', class: "kol-toolbar" }, hAsync("div", { key: 'd882c0b98366af7b5daa8a4ae68d034c813d6568', class: "toolbar", role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem))));
|
|
25894
25942
|
}
|
|
25895
25943
|
validateLabel(value) {
|
|
25896
25944
|
validateLabel(this, value);
|
|
@@ -26088,7 +26136,7 @@ class KolTooltipWc {
|
|
|
26088
26136
|
this.showOrHideTooltip();
|
|
26089
26137
|
}
|
|
26090
26138
|
render() {
|
|
26091
|
-
return (hAsync(Host, { key: '
|
|
26139
|
+
return (hAsync(Host, { key: 'cbc9cd25938fb84fa3045fb587119f2df1ecc081', class: "kol-tooltip-wc" }, this.state._label !== '' && (hAsync("div", { key: 'b8abd503844fc8f432f3471ec09d3b68d990598d', class: "tooltip-floating", ref: this.catchTooltipElement }, hAsync("div", { key: '476f2b83472935cf34d80b774f4950cc4c504a9c', class: "tooltip-area tooltip-arrow", ref: this.catchArrowElement }), hAsync(KolSpanFc$1, { key: '244cfc32f724d7b26c50a2fee611668bd629b1ee', class: "tooltip-area tooltip-content", id: this.state._id, badgeText: this._badgeText, label: this.state._label })))));
|
|
26092
26140
|
}
|
|
26093
26141
|
validateBadgeText(value) {
|
|
26094
26142
|
validateBadgeText(this, value);
|
|
@@ -26166,7 +26214,7 @@ class KolTree {
|
|
|
26166
26214
|
this._label = undefined;
|
|
26167
26215
|
}
|
|
26168
26216
|
render() {
|
|
26169
|
-
return (hAsync(Host, { key: '
|
|
26217
|
+
return (hAsync(Host, { key: '69de09feea8d11d3bbd57a2f8c84cc7922870f03', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: 'cdc53b81278bde94f28a0303d1332d589938efdc', _label: this._label }, hAsync("slot", { key: '4b656b6d77367fcfa1e25858b64658c77a1d9336' }))));
|
|
26170
26218
|
}
|
|
26171
26219
|
static get style() { return {
|
|
26172
26220
|
default: KolTreeDefaultStyle0
|
|
@@ -26214,7 +26262,7 @@ class KolTreeItem {
|
|
|
26214
26262
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
26215
26263
|
}
|
|
26216
26264
|
render() {
|
|
26217
|
-
return (hAsync(KolTreeItemWcTag, { key: '
|
|
26265
|
+
return (hAsync(KolTreeItemWcTag, { key: 'd9dfb62386c67f48d9c14d731551cdb2f569f686', class: "kol-tree-item", _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: '3a6d57157adaa1886717ba62ef75c03cafe008a3' })));
|
|
26218
26266
|
}
|
|
26219
26267
|
static get style() { return {
|
|
26220
26268
|
default: KolTreeItemDefaultStyle0
|
|
@@ -26257,13 +26305,13 @@ class KolTreeItemWc {
|
|
|
26257
26305
|
}
|
|
26258
26306
|
render() {
|
|
26259
26307
|
const { _href, _active, _hasChildren, _open, _label } = this.state;
|
|
26260
|
-
return (hAsync(Host, { key: '
|
|
26308
|
+
return (hAsync(Host, { key: '3fb537565d872f1c8e85602d35748dd9814425f5', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-item-wc" }, hAsync("li", { key: 'd23e261803c939c62d43c32b01436116ac68efff', class: "tree-item", style: {
|
|
26261
26309
|
'--level': `${this.level}`,
|
|
26262
|
-
} }, hAsync(KolLinkWcTag, { key: '
|
|
26310
|
+
} }, hAsync(KolLinkWcTag, { key: 'e62dfe9c6449b1f762194e41d92cec8b22f45706', class: {
|
|
26263
26311
|
'tree-link': true,
|
|
26264
26312
|
'first-level': this.level === 0,
|
|
26265
26313
|
active: Boolean(_active),
|
|
26266
|
-
}, _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, hAsync("span", { key: '
|
|
26314
|
+
}, _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, hAsync("span", { key: 'ffc1d634a435a37436c9ead9885f3e8aa9e2f2e0', slot: "expert" }, _hasChildren && (hAsync("span", { key: 'd3cb1760f50b8046a43ec4780317e82f151b6596', class: "toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, hAsync(KolIconTag, { key: '2f934a64e6f7f4adfd1465c66d16023fe5570daf', class: "toggle-button-icon", _icons: `codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`, _label: '' }))), ' ', _label)), hAsync("ul", { key: '55daa3617436652b901469711dabc01735fa70c2', hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: 'bb623d390022e2c265f5ff5f6a2f9fdafc158808' })))));
|
|
26267
26315
|
}
|
|
26268
26316
|
validateActive(value) {
|
|
26269
26317
|
validateActive(this, value || false);
|
|
@@ -26368,7 +26416,7 @@ class KolTreeWc {
|
|
|
26368
26416
|
validateLabel(this, value);
|
|
26369
26417
|
}
|
|
26370
26418
|
render() {
|
|
26371
|
-
return (hAsync(Host, { key: '
|
|
26419
|
+
return (hAsync(Host, { key: 'b2e1b8e07c2072dacdc0d88fabc6977a2377ca38', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-wc" }, hAsync("nav", { key: '6b99bc4a8cad33ef313e6afa88cb5e09a86eb2bf', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: '9ba1bac8437c1167cbdc014469491244bf487231', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: 'ef931198c2c76757d7aa1921f1bedf441212dfcb' })))));
|
|
26372
26420
|
}
|
|
26373
26421
|
static isTreeItem(element) {
|
|
26374
26422
|
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
|
@@ -26563,7 +26611,7 @@ class KolVersion {
|
|
|
26563
26611
|
};
|
|
26564
26612
|
}
|
|
26565
26613
|
render() {
|
|
26566
|
-
return (hAsync(Host, { key: '
|
|
26614
|
+
return (hAsync(Host, { key: '84e689e55eecf88a74c55ab4becdf39b333df355', class: "kol-version" }, hAsync(KolBadgeTag, { key: '2e7072c1ef59dbac900dd8d1c4c26bcb8be1b1a9', _color: "#bec5c9", _icons: {
|
|
26567
26615
|
left: { icon: 'codicon codicon-versions', label: translate('kol-version') },
|
|
26568
26616
|
}, _label: this.state._label })));
|
|
26569
26617
|
}
|