@public-ui/hydrate 2.2.14 → 2.2.15-rc.1
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 +255 -194
- package/dist/index.mjs +255 -194
- package/package.json +3 -3
package/dist/index.mjs
CHANGED
|
@@ -2656,7 +2656,7 @@ var loglevel = {exports: {}};
|
|
|
2656
2656
|
|
|
2657
2657
|
var h = loglevel.exports;
|
|
2658
2658
|
|
|
2659
|
-
const I=(t,e)=>s=>s(t,e),P$1=(t,e)=>s=>s(t,e,{append:!1}),$=()=>{const t=typeof process<"u"&&process.env?process.env:{},e=t.NODE_ENV==="test",s="VITEST"in t,a="JEST_WORKER_ID"in t,o="PLAYWRIGHT_TEST_BASE_URL"in t,r=t.CI==="true",i=t.TEST==="true"||t.IS_TEST==="true",c=typeof navigator<"u"&&navigator.webdriver===!0,m=typeof navigator<"u"&&/playwright|puppeteer|webdriver|selenium|testcafe/i.test(navigator.userAgent);return e||s||a||o||r||i||c||m},n$1={A11yUi:{CSS_STYLE_CACHE:new Map,IS_TEST_ENVIRONMENT:$(),PERFORMANCE_MEASURES:new Map,STYLING_TASK_QUEUE:new Map,THEMES:new Map,showAverageTimes:()=>{const t={};for(const[s,a]of n$1.A11yUi.PERFORMANCE_MEASURES.entries())t[s]=[a.totalTime/a.count,a.count];const e=Object.entries(t).sort((s,a)=>a[1][0]-s[1][0]);return console.table(Object.fromEntries(e.map(([s,[a,o]])=>[s,{"avg (ms)":parseFloat(a.toFixed(2)),count:o}]))),t}}};let f=!1;const j=/^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/,F=t=>typeof t=="string"&&j.test(t),E=t=>{if(!F(t))throw new Error(`[Theming] The theme identifier "${typeof t=="string"?t:""}" (Type: ${typeof t}) is not valid. Please use only follow this pattern: /^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/`)},g=t=>t.replace(/\/\*[\s\S]*?\*\//g,"").replace(/\s*([{}
|
|
2659
|
+
const I=(t,e)=>s=>s(t,e),P$1=(t,e)=>s=>s(t,e,{append:!1}),$=()=>{const t=typeof process<"u"&&process.env?process.env:{},e=t.NODE_ENV==="test",s="VITEST"in t,a="JEST_WORKER_ID"in t,o="PLAYWRIGHT_TEST_BASE_URL"in t,r=t.CI==="true",i=t.TEST==="true"||t.IS_TEST==="true",c=typeof navigator<"u"&&navigator.webdriver===!0,m=typeof navigator<"u"&&/playwright|puppeteer|webdriver|selenium|testcafe/i.test(navigator.userAgent);return e||s||a||o||r||i||c||m},n$1={A11yUi:{CSS_STYLE_CACHE:new Map,IS_TEST_ENVIRONMENT:$(),PERFORMANCE_MEASURES:new Map,STYLING_TASK_QUEUE:new Map,THEMES:new Map,showAverageTimes:()=>{const t={};for(const[s,a]of n$1.A11yUi.PERFORMANCE_MEASURES.entries())t[s]=[a.totalTime/a.count,a.count];const e=Object.entries(t).sort((s,a)=>a[1][0]-s[1][0]);return console.table(Object.fromEntries(e.map(([s,[a,o]])=>[s,{"avg (ms)":parseFloat(a.toFixed(2)),count:o}]))),t}}};let f=!1;const j=/^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/,F=t=>typeof t=="string"&&j.test(t),E=t=>{if(!F(t))throw new Error(`[Theming] The theme identifier "${typeof t=="string"?t:""}" (Type: ${typeof t}) is not valid. Please use only follow this pattern: /^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/`)},g=t=>t.replace(/\/\*[\s\S]*?\*\//g,"").replace(/\s*([{},;])\s*/g,"$1").replace(/:\s+/g,":").replace(/\s+/g," ").replace(/;\}/g,"}").trim(),Y=(t,e,s,a)=>u$1(t,e,s,a),u$1=(t,e,s,a)=>{a=a??{},a.append=a.append??!1,E(t),!f&&(f=!0,h.warn(`[Theming] The theme process is locked. This means that the theme "${t}" should not be patched.
|
|
2660
2660
|
|
|
2661
2661
|
import { register } from 'adopted-style-sheets';
|
|
2662
2662
|
import { defineCustomElements } from '...';
|
|
@@ -3911,7 +3911,7 @@ const validateAlign = (component, value) => {
|
|
|
3911
3911
|
validateAlignment(component, '_align', value);
|
|
3912
3912
|
};
|
|
3913
3913
|
|
|
3914
|
-
const alternativeButtonLinkRolePropTypeOptions = ['
|
|
3914
|
+
const alternativeButtonLinkRolePropTypeOptions = ['tab', 'treeitem'];
|
|
3915
3915
|
const validateAlternativeButtonLinkRole = (component, value) => {
|
|
3916
3916
|
watchValidator(component, `_role`, (value) => typeof value === 'string' && alternativeButtonLinkRolePropTypeOptions.includes(value), new Set([`KoliBriAlternativeButtonLinkRole {${alternativeButtonLinkRolePropTypeOptions.join(', ')}`]), value);
|
|
3917
3917
|
};
|
|
@@ -4530,7 +4530,7 @@ let KolTreeItemWcTag = 'kol-tree-item-wc';
|
|
|
4530
4530
|
let KolTreeTag = 'kol-tree';
|
|
4531
4531
|
let KolTreeWcTag = 'kol-tree-wc';
|
|
4532
4532
|
|
|
4533
|
-
const defaultStyleCss$Q = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
4533
|
+
const defaultStyleCss$Q = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 > abbr {\n cursor: help;\n }\n}";
|
|
4534
4534
|
var KolAbbrDefaultStyle0 = defaultStyleCss$Q;
|
|
4535
4535
|
|
|
4536
4536
|
class KolAbbr {
|
|
@@ -4637,7 +4637,7 @@ const KolCollapsibleFc = (props, children) => {
|
|
|
4637
4637
|
hAsync("div", { "aria-hidden": open === false ? 'true' : undefined, class: clsx('collapsible__content', ContentProps === null || ContentProps === void 0 ? void 0 : ContentProps.class), id: `${id}-control` }, children)))));
|
|
4638
4638
|
};
|
|
4639
4639
|
|
|
4640
|
-
const defaultStyleCss$P = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
4640
|
+
const defaultStyleCss$P = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\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 /* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */\n transform: translateZ(0);\n display: grid;\n /**\n * The `overflow: hidden` ensures that the content is not visible during the animated\n * opening and closing. This should also cut off overlays containing content, but it\n *does not.\n */\n overflow: hidden;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.3s;\n }\n .collapsible__wrapper-animation {\n min-height: 0;\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 transition: visibility 0.3s;\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}";
|
|
4641
4641
|
var KolAccordionDefaultStyle0 = defaultStyleCss$P;
|
|
4642
4642
|
|
|
4643
4643
|
featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
|
|
@@ -4755,7 +4755,7 @@ class KolAccordion {
|
|
|
4755
4755
|
}; }
|
|
4756
4756
|
}
|
|
4757
4757
|
|
|
4758
|
-
const defaultStyleCss$O = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
4758
|
+
const defaultStyleCss$O = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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-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}";
|
|
4759
4759
|
var KolAlertDefaultStyle0 = defaultStyleCss$O;
|
|
4760
4760
|
|
|
4761
4761
|
class KolAlert {
|
|
@@ -5127,7 +5127,7 @@ class KolAlertWc {
|
|
|
5127
5127
|
}; }
|
|
5128
5128
|
}
|
|
5129
5129
|
|
|
5130
|
-
const defaultStyleCss$N = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
5130
|
+
const defaultStyleCss$N = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .container,\n .image,\n .initials {\n border-radius: 50%;\n }\n .image,\n .initials {\n width: 100%;\n height: 100%;\n }\n .container {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n width: calc(100rem / var(--kolibri-root-font-size, 16));\n height: calc(100rem / var(--kolibri-root-font-size, 16));\n }\n .initials {\n background-color: #d3d3d3;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
5131
5131
|
var KolAvatarDefaultStyle0 = defaultStyleCss$N;
|
|
5132
5132
|
|
|
5133
5133
|
class KolAvatar {
|
|
@@ -5214,7 +5214,7 @@ class KolAvatarWc {
|
|
|
5214
5214
|
}; }
|
|
5215
5215
|
}
|
|
5216
5216
|
|
|
5217
|
-
const defaultStyleCss$M = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
5217
|
+
const defaultStyleCss$M = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 > span {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n display: inline-flex;\n place-items: center;\n }\n :host > span > .kol-button-wc button {\n color: inherit;\n }\n}";
|
|
5218
5218
|
var KolBadgeDefaultStyle0 = defaultStyleCss$M;
|
|
5219
5219
|
|
|
5220
5220
|
featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
|
|
@@ -5315,7 +5315,7 @@ const watchNavLinks = (className, component, value) => {
|
|
|
5315
5315
|
uiUxHintMillerscheZahl(className, component.state._links.length);
|
|
5316
5316
|
};
|
|
5317
5317
|
|
|
5318
|
-
const defaultStyleCss$L = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
5318
|
+
const defaultStyleCss$L = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n li,\n ul {\n display: flex;\n margin: 0;\n padding: 0;\n gap: 0.5em;\n flex-wrap: wrap;\n place-items: center;\n list-style: none;\n }\n .kol-icon::part(separator) {\n font-size: 0.7em;\n font-weight: 900;\n }\n .kol-icon::part(separator):before {\n content: \"\\f054\";\n font-family: \"Font Awesome 6 Free\";\n }\n}";
|
|
5319
5319
|
var KolBreadcrumbDefaultStyle0 = defaultStyleCss$L;
|
|
5320
5320
|
|
|
5321
5321
|
class KolBreadcrumb {
|
|
@@ -5376,7 +5376,7 @@ class KolBreadcrumb {
|
|
|
5376
5376
|
}; }
|
|
5377
5377
|
}
|
|
5378
5378
|
|
|
5379
|
-
const defaultStyleCss$K = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
5379
|
+
const defaultStyleCss$K = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 :is(a, button) {\n display: inline-flex;\n place-items: center;\n text-align: center;\n text-decoration-line: none;\n }\n :is(a, button)::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n /* TODO: Why we need this? */\n :is(a, button) > .kol-span-wc {\n width: 100%;\n margin: auto;\n }\n}";
|
|
5380
5380
|
var KolButtonDefaultStyle0 = defaultStyleCss$K;
|
|
5381
5381
|
|
|
5382
5382
|
class KolButton {
|
|
@@ -5418,9 +5418,9 @@ class KolButton {
|
|
|
5418
5418
|
await ((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
5419
5419
|
}
|
|
5420
5420
|
render() {
|
|
5421
|
-
return (hAsync(Host, { key: '70caa89f836bf0fe9f7179a15279fad3139de552', class: "kol-button" }, hAsync(KolButtonWcTag, { key: '
|
|
5421
|
+
return (hAsync(Host, { key: '70caa89f836bf0fe9f7179a15279fad3139de552', class: "kol-button" }, hAsync(KolButtonWcTag, { key: '09f7494fff2ddc9597267d28ff87fa66607d9637', ref: this.catchRef, class: {
|
|
5422
5422
|
button: true,
|
|
5423
|
-
}, _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,
|
|
5423
|
+
}, _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, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: '6010a867b4000c38212d0bbcdc978fcdff3f58c2', name: "expert", slot: "expert" }))));
|
|
5424
5424
|
}
|
|
5425
5425
|
static get delegatesFocus() { return true; }
|
|
5426
5426
|
static get style() { return {
|
|
@@ -5461,7 +5461,7 @@ class KolButton {
|
|
|
5461
5461
|
}; }
|
|
5462
5462
|
}
|
|
5463
5463
|
|
|
5464
|
-
const defaultStyleCss$J = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
5464
|
+
const defaultStyleCss$J = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host > .kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n }\n}";
|
|
5465
5465
|
var KolButtonGroupDefaultStyle0 = defaultStyleCss$J;
|
|
5466
5466
|
|
|
5467
5467
|
class KolButtonGroup {
|
|
@@ -5504,7 +5504,7 @@ class KolButtonGroupWc {
|
|
|
5504
5504
|
}; }
|
|
5505
5505
|
}
|
|
5506
5506
|
|
|
5507
|
-
const defaultStyleCss$I = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
5507
|
+
const defaultStyleCss$I = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 :is(a, button) {\n display: inline-flex;\n align-items: baseline;\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 position: absolute;\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n z-index: 9999999;\n line-height: 1;\n }\n .skip:focus {\n background-color: #fff;\n position: unset;\n left: unset;\n padding: 1em;\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 button {\n min-height: unset;\n }\n}";
|
|
5508
5508
|
var KolButtonLinkDefaultStyle0 = defaultStyleCss$I;
|
|
5509
5509
|
|
|
5510
5510
|
class KolButtonLink {
|
|
@@ -5544,7 +5544,7 @@ class KolButtonLink {
|
|
|
5544
5544
|
await ((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
5545
5545
|
}
|
|
5546
5546
|
render() {
|
|
5547
|
-
return (hAsync(Host, { key: '74a1c493bcd94ecbdcf72abeca56d9cbbd6aaf93', class: "kol-button-link" }, hAsync(KolButtonWcTag, { key: '
|
|
5547
|
+
return (hAsync(Host, { key: '74a1c493bcd94ecbdcf72abeca56d9cbbd6aaf93', class: "kol-button-link" }, hAsync(KolButtonWcTag, { key: '9bcabede025937492ce8082a3ceb14184352d5b0', 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, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value }, hAsync("slot", { key: '091e5f56f9184bbee891e6e12430d3aafe3690de', name: "expert", slot: "expert" }))));
|
|
5548
5548
|
}
|
|
5549
5549
|
static get delegatesFocus() { return true; }
|
|
5550
5550
|
static get style() { return {
|
|
@@ -6085,12 +6085,13 @@ class KolButtonWc {
|
|
|
6085
6085
|
}; }
|
|
6086
6086
|
}
|
|
6087
6087
|
|
|
6088
|
-
const defaultStyleCss$H = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
6088
|
+
const defaultStyleCss$H = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 > div.card {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n position: relative;\n height: 100%;\n }\n .close {\n position: absolute;\n top: 0;\n right: 0;\n }\n}";
|
|
6089
6089
|
var KolCardDefaultStyle0 = defaultStyleCss$H;
|
|
6090
6090
|
|
|
6091
6091
|
class KolCard {
|
|
6092
6092
|
constructor(hostRef) {
|
|
6093
6093
|
registerInstance(this, hostRef);
|
|
6094
|
+
this.nonce = nonce();
|
|
6094
6095
|
this.close = () => {
|
|
6095
6096
|
var _a;
|
|
6096
6097
|
if (((_a = this._on) === null || _a === void 0 ? void 0 : _a.onClose) !== undefined) {
|
|
@@ -6110,7 +6111,7 @@ class KolCard {
|
|
|
6110
6111
|
};
|
|
6111
6112
|
}
|
|
6112
6113
|
render() {
|
|
6113
|
-
return (hAsync(Host, { key: '
|
|
6114
|
+
return (hAsync(Host, { key: 'ba9c33136d395bf985180d4b5286a86deb0e795e', class: "kol-card" }, hAsync("div", { key: '35ec2b86170c04be8cb8cba3517d3b802a47d9c9', "aria-labelledby": this.nonce, class: "card", role: "group" }, hAsync(KolHeadingWcTag, { key: '7b35c6013fb17aa62e37879049351d7191330b41', class: "header", id: this.nonce, _label: this.state._label, _level: this.state._level }), hAsync("div", { key: 'bc99bd0c8331a53d82195d116f941c39e0526dd4', class: "content" }, hAsync("slot", { key: '3f8fa8413d8c99ca9c2508bde5455ce84fae57d3' })), this.state._hasCloser && (hAsync(KolButtonWcTag, { key: '437fa135d2fde68894381fffe0723998dcdc9195', class: "close", _hideLabel: true, _icons: {
|
|
6114
6115
|
left: {
|
|
6115
6116
|
icon: 'codicon codicon-close',
|
|
6116
6117
|
},
|
|
@@ -6428,7 +6429,7 @@ class ComboboxController extends InputIconController {
|
|
|
6428
6429
|
}
|
|
6429
6430
|
}
|
|
6430
6431
|
|
|
6431
|
-
const defaultStyleCss$G = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
6432
|
+
const defaultStyleCss$G = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 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 option,\n select,\n textarea {\n background-color: transparent;\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-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 .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n background-color: white;\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n button:not([role=link]) {\n min-height: auto;\n }\n .input > .kol-icon {\n display: grid;\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .combobox {\n position: relative;\n }\n .combobox--disabled, .combobox--disabled * {\n cursor: not-allowed !important;\n }\n .combobox--disabled {\n opacity: 0.5;\n outline: none;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n }\n .combobox__input {\n flex-grow: 1;\n }\n .combobox__icon {\n display: flex;\n width: var(--a11y-min-size);\n align-items: center;\n cursor: pointer;\n }\n .combobox__listbox {\n background-color: white;\n display: block;\n position: absolute;\n z-index: 2;\n max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n overflow-y: auto;\n list-style-type: none;\n }\n .combobox__item {\n cursor: pointer;\n }\n .combobox__listbox--cursor-hidden .combobox__item {\n cursor: none !important;\n }\n}";
|
|
6432
6433
|
var KolComboboxDefaultStyle0 = defaultStyleCss$G;
|
|
6433
6434
|
|
|
6434
6435
|
class KolCombobox {
|
|
@@ -6507,13 +6508,13 @@ class KolCombobox {
|
|
|
6507
6508
|
render() {
|
|
6508
6509
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
6509
6510
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
6510
|
-
return (hAsync(Host, { key: '
|
|
6511
|
+
return (hAsync(Host, { key: '539582153b25b549cdbda73a0e48ab7cdd4a191a', class: "kol-combobox" }, hAsync("div", { key: '1d2e85257cbcb73f9524b36bc0fe60acee7b0a93', class: clsx('combobox', this.state._disabled && 'combobox--disabled') }, hAsync(KolInputTag, { key: 'ed68373d5ce2dc77ac17f1c2e1c7bef1fe70d668', _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: 'bbd2040c0f50b8c5c8e59f8591932d6dc739c7c1', 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("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '5cba627e6fc743cc491b0489de20d1ca35ee1381', slot: "input" }, hAsync("div", { key: '4fe1a68b244c8baae0ff5bd7a287e1a7e2887b78', class: "combobox__group" }, hAsync("input", Object.assign({ key: '0ce26e7dba3167c103b215dd882913acc328a0fe', 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", autoComplete: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onFocus: (event) => {
|
|
6511
6512
|
this.controller.onFacade.onFocus(event);
|
|
6512
6513
|
this.inputHasFocus = true;
|
|
6513
6514
|
}, onBlur: (event) => {
|
|
6514
6515
|
this.controller.onFacade.onBlur(event);
|
|
6515
6516
|
this.inputHasFocus = false;
|
|
6516
|
-
}, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder })), hAsync("button", { key: '
|
|
6517
|
+
}, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder })), hAsync("button", { key: '0a49f06cdf6ab615f1be992fd174d2213443f14f', tabindex: "-1", class: "combobox__icon", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: 'c310753705cabbb6b54617ea10622dbabaf6d72e', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: 'bbb7108ae00af3f80567c03696012b7404fa4744', role: "listbox", class: clsx('combobox__listbox', this.blockSuggestionMouseOver && 'combobox__listbox--cursor-hidden'), onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
|
|
6517
6518
|
this._filteredSuggestions.length > 0 &&
|
|
6518
6519
|
this._filteredSuggestions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
|
|
6519
6520
|
if (el)
|
|
@@ -6858,7 +6859,7 @@ class KolCombobox {
|
|
|
6858
6859
|
}; }
|
|
6859
6860
|
}
|
|
6860
6861
|
|
|
6861
|
-
const defaultStyleCss$F = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
6862
|
+
const defaultStyleCss$F = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\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 /* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */\n transform: translateZ(0);\n display: grid;\n /**\n * The `overflow: hidden` ensures that the content is not visible during the animated\n * opening and closing. This should also cut off overlays containing content, but it\n *does not.\n */\n overflow: hidden;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.3s;\n }\n .collapsible__wrapper-animation {\n min-height: 0;\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 transition: visibility 0.3s;\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 .details__heading-button {\n display: flex;\n }\n .details__heading-button button {\n min-height: auto;\n }\n .details__heading-button button .kol-span-wc .span-label {\n border-bottom-color: grey;\n border-bottom-style: solid;\n }\n .open .details__heading-button .kol-icon::part(icon) {\n transform: rotate(90deg);\n }\n}";
|
|
6862
6863
|
var KolDetailsDefaultStyle0 = defaultStyleCss$F;
|
|
6863
6864
|
|
|
6864
6865
|
class KolDetails {
|
|
@@ -6918,7 +6919,7 @@ class KolDetails {
|
|
|
6918
6919
|
animationClass: `${rootClass}__wrapper-animation`,
|
|
6919
6920
|
},
|
|
6920
6921
|
};
|
|
6921
|
-
return (hAsync(Host, { key: '
|
|
6922
|
+
return (hAsync(Host, { key: '0e3364737f182110e424b4401f4cbbf0ecf9bb0c', class: "kol-details" }, hAsync(KolCollapsibleFc, Object.assign({ key: '49190cf8f0b7e0ddc1940d074d3afe8b1114635a' }, props), hAsync("slot", { key: '02c3998708b0d9f53024030392baa24b09f89cf2' }))));
|
|
6922
6923
|
}
|
|
6923
6924
|
validateDisabled(value) {
|
|
6924
6925
|
validateDisabled(this, value);
|
|
@@ -6974,7 +6975,7 @@ class KolDetails {
|
|
|
6974
6975
|
}; }
|
|
6975
6976
|
}
|
|
6976
6977
|
|
|
6977
|
-
const defaultStyleCss$E = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
6978
|
+
const defaultStyleCss$E = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n .drawer__dialog {\n padding: 0;\n border: none;\n }\n .drawer__wrapper {\n background-color: white;\n position: fixed;\n overflow: auto;\n }\n .drawer__wrapper--left, .drawer__wrapper--right {\n top: 0;\n max-width: 100vw;\n height: 100vh;\n }\n .drawer__wrapper--left .drawer__content, .drawer__wrapper--right .drawer__content {\n height: 100%;\n }\n .drawer__wrapper--left {\n left: 0;\n }\n .drawer__wrapper--right {\n right: 0;\n }\n .drawer__wrapper--bottom, .drawer__wrapper--top {\n left: 0;\n width: 100vw;\n max-height: 100vh;\n }\n .drawer__wrapper--bottom .drawer__content, .drawer__wrapper--top .drawer__content {\n width: 100%;\n }\n .drawer__wrapper--bottom {\n bottom: 0;\n }\n .drawer__wrapper--top {\n top: 0;\n }\n .drawer__content {\n position: relative;\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
6978
6979
|
var KolDrawerDefaultStyle0 = defaultStyleCss$E;
|
|
6979
6980
|
|
|
6980
6981
|
class KolDrawer {
|
|
@@ -7013,7 +7014,7 @@ class KolDrawer {
|
|
|
7013
7014
|
return (hAsync("div", { ref: this.getWrapperRef, class: `drawer__wrapper drawer__wrapper--${align} ${this.state._open ? 'drawer__wrapper--open' : 'is-closing'}`, "aria-label": this.state._label }, hAsync("div", { class: "drawer__content" }, hAsync("slot", null))));
|
|
7014
7015
|
}
|
|
7015
7016
|
render() {
|
|
7016
|
-
return (hAsync(Host, { key: '
|
|
7017
|
+
return (hAsync(Host, { key: '91b5f45b2ab196fa2149af9354744051bd1b35f1', class: `kol-drawer drawer`, ref: (el) => (this.hostElement = el) }, hAsync("dialog", { key: 'd06fea157a405d95dbbfb7a8984628c49adf9af9', class: "drawer__dialog", ref: this.getRef }, this.renderDialogContent())));
|
|
7017
7018
|
}
|
|
7018
7019
|
validateLabel(value) {
|
|
7019
7020
|
validateLabel(this, value, {
|
|
@@ -7095,7 +7096,7 @@ class KolDrawer {
|
|
|
7095
7096
|
}; }
|
|
7096
7097
|
}
|
|
7097
7098
|
|
|
7098
|
-
const defaultStyleCss$D = "@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n
|
|
7099
|
+
const defaultStyleCss$D = "@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: inline-block;\n }\n :is(a, button) {\n display: inline-flex;\n align-items: baseline;\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 position: absolute;\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n z-index: 9999999;\n line-height: 1;\n }\n .skip:focus {\n background-color: #fff;\n position: unset;\n left: unset;\n padding: 1em;\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}";
|
|
7099
7100
|
var KolFormDefaultStyle0 = defaultStyleCss$D;
|
|
7100
7101
|
|
|
7101
7102
|
class KolForm {
|
|
@@ -7139,7 +7140,7 @@ class KolForm {
|
|
|
7139
7140
|
}
|
|
7140
7141
|
render() {
|
|
7141
7142
|
const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
|
|
7142
|
-
return (hAsync(Host, { key: '
|
|
7143
|
+
return (hAsync(Host, { key: '3a493a940da663c5350b450ab4ac5fb5f5ffdff1', class: "kol-form" }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
|
|
7143
7144
|
}
|
|
7144
7145
|
scrollToErrorList() {
|
|
7145
7146
|
var _a;
|
|
@@ -7201,7 +7202,7 @@ class KolForm {
|
|
|
7201
7202
|
}; }
|
|
7202
7203
|
}
|
|
7203
7204
|
|
|
7204
|
-
const defaultStyleCss$C = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
7205
|
+
const defaultStyleCss$C = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n.secondary-headline {\n margin: 0;\n}";
|
|
7205
7206
|
var KolHeadingDefaultStyle0 = defaultStyleCss$C;
|
|
7206
7207
|
|
|
7207
7208
|
class KolHeading {
|
|
@@ -7213,7 +7214,7 @@ class KolHeading {
|
|
|
7213
7214
|
this._variant = undefined;
|
|
7214
7215
|
}
|
|
7215
7216
|
render() {
|
|
7216
|
-
return (hAsync(KolHeadingWcTag, { key: '
|
|
7217
|
+
return (hAsync(KolHeadingWcTag, { key: '85aab4ce030b9cb15fc1d4a46d8130c57172c4bf', _label: this._label, _level: this._level, _secondaryHeadline: this._secondaryHeadline, _variant: this._variant, class: "kol-heading" }, hAsync("slot", { key: 'f03f102a4e88053e50e93e26f25bde84f3e32a69', name: "expert", slot: "expert" })));
|
|
7217
7218
|
}
|
|
7218
7219
|
static get style() { return {
|
|
7219
7220
|
default: KolHeadingDefaultStyle0
|
|
@@ -7273,7 +7274,7 @@ class KolHeadingWc {
|
|
|
7273
7274
|
this.validateVariant(this._variant);
|
|
7274
7275
|
}
|
|
7275
7276
|
render() {
|
|
7276
|
-
return (hAsync(Host, { key: '
|
|
7277
|
+
return (hAsync(Host, { key: 'e7619b21f688349ff17525bf3556f346734652ec', class: "kol-heading-wc" }, typeof this.state._secondaryHeadline === 'string' && this.state._secondaryHeadline.length > 0 ? (hAsync("hgroup", null, this.renderHeadline(this.state._label, this.state._level), hAsync("p", { class: "secondary-headline" }, this.state._secondaryHeadline))) : (this.renderHeadline(this.state._label, this.state._level))));
|
|
7277
7278
|
}
|
|
7278
7279
|
static get watchers() { return {
|
|
7279
7280
|
"_label": ["validateLabel"],
|
|
@@ -7312,7 +7313,7 @@ class KolIcon {
|
|
|
7312
7313
|
}
|
|
7313
7314
|
render() {
|
|
7314
7315
|
const ariaShow = this.state._label.length > 0;
|
|
7315
|
-
return (hAsync(Host, { key: '
|
|
7316
|
+
return (hAsync(Host, { key: 'e9c50945710708d0010efd1836d910878b6993af', exportparts: "icon", class: "kol-icon" }, hAsync("i", { key: 'dc0e536ce87abb807dcdefaf3822466b53889824', "aria-hidden": ariaShow ? undefined : 'true', "aria-label": ariaShow ? this.state._label : undefined, class: this.state._icons, part: "icon", role: "img" })));
|
|
7316
7317
|
}
|
|
7317
7318
|
validateIcons(value) {
|
|
7318
7319
|
watchString(this, '_icons', value, {
|
|
@@ -7349,7 +7350,7 @@ class KolIcon {
|
|
|
7349
7350
|
}; }
|
|
7350
7351
|
}
|
|
7351
7352
|
|
|
7352
|
-
const defaultStyleCss$A = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
7353
|
+
const defaultStyleCss$A = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: inline-block;\n }\n img {\n max-width: 100%;\n max-height: 100%;\n }\n}";
|
|
7353
7354
|
var KolImageDefaultStyle0 = defaultStyleCss$A;
|
|
7354
7355
|
|
|
7355
7356
|
class KolImage {
|
|
@@ -7393,7 +7394,7 @@ class KolImage {
|
|
|
7393
7394
|
this.validateSrcset(this._srcset);
|
|
7394
7395
|
}
|
|
7395
7396
|
render() {
|
|
7396
|
-
return (hAsync(Host, { key: '
|
|
7397
|
+
return (hAsync(Host, { key: '9fc1a0a8052bb08041949a39eaab150581fa2b24', class: "kol-image" }, hAsync("img", { key: '0d7a5985107cd31609adf2dd78f8e11cd09217e3', alt: this.state._alt, loading: this.state._loading, sizes: this.state._sizes, src: this.state._src, srcset: this.state._srcset })));
|
|
7397
7398
|
}
|
|
7398
7399
|
static get watchers() { return {
|
|
7399
7400
|
"_alt": ["validateAlt"],
|
|
@@ -7422,7 +7423,7 @@ class KolImage {
|
|
|
7422
7423
|
}; }
|
|
7423
7424
|
}
|
|
7424
7425
|
|
|
7425
|
-
const defaultStyleCss$z = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
7426
|
+
const defaultStyleCss$z = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host > div {\n padding-left: 0.5em;\n border-left-style: solid;\n }\n}";
|
|
7426
7427
|
var KolIndentedTextDefaultStyle0 = defaultStyleCss$z;
|
|
7427
7428
|
|
|
7428
7429
|
class KolIndentedText {
|
|
@@ -7430,7 +7431,7 @@ class KolIndentedText {
|
|
|
7430
7431
|
registerInstance(this, hostRef);
|
|
7431
7432
|
}
|
|
7432
7433
|
render() {
|
|
7433
|
-
return (hAsync(Host, { key: '
|
|
7434
|
+
return (hAsync(Host, { key: 'a0365bb15e5fe94f7daebb1decba3624e1837bf5', class: "kol-indented-text" }, hAsync(KolIndentedTextWcTag, { key: 'f6767e315045f11786e3380e0b3fbec05b6a616e' }, hAsync("slot", { key: '089cf599da9538a390d89fa101518644f44c56eb' }))));
|
|
7434
7435
|
}
|
|
7435
7436
|
static get style() { return {
|
|
7436
7437
|
default: KolIndentedTextDefaultStyle0
|
|
@@ -7451,7 +7452,7 @@ class KolIndentedTextWc {
|
|
|
7451
7452
|
this.state = {};
|
|
7452
7453
|
}
|
|
7453
7454
|
render() {
|
|
7454
|
-
return (hAsync(Host, { key: '
|
|
7455
|
+
return (hAsync(Host, { key: 'd18809c39ccfebc89cf8a1db28428306f9d6b79b', class: "kol-indented-text-wc" }, hAsync("div", { key: '7a867686b120a7a3ebce63d00123390caa853865' }, hAsync("slot", { key: 'f348a00030d86c30726410d4810edb032137002d' }))));
|
|
7455
7456
|
}
|
|
7456
7457
|
static get cmpMeta() { return {
|
|
7457
7458
|
"$flags$": 4,
|
|
@@ -7590,7 +7591,7 @@ class InputCheckboxController extends InputCheckboxRadioController {
|
|
|
7590
7591
|
}
|
|
7591
7592
|
}
|
|
7592
7593
|
|
|
7593
|
-
const defaultStyleCss$y = "@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\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/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of 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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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 .badge-text-hint {\n background-color: lightgray;\n color: black;\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 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 option,\n select,\n textarea {\n background-color: transparent;\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n label {\n cursor: pointer;\n }\n .kol-input {\n align-items: center;\n display: grid;\n justify-items: left;\n }\n .kol-input.default,\n .kol-input.switch {\n grid-template-areas: \"input label\";\n grid-template-columns: auto 1fr;\n }\n .kol-input.default[data-label-align=left]:not(.hide-label),\n .kol-input.switch[data-label-align=left]:not(.hide-label) {\n grid-template-areas: \"label input\";\n grid-template-columns: 1fr auto;\n }\n .kol-input .input {\n grid-area: input;\n align-items: center;\n display: grid;\n }\n .kol-input .input div {\n display: inline-flex;\n }\n .kol-input .input input {\n margin: 0;\n }\n .kol-input label {\n grid-area: label;\n }\n .kol-input .hint,\n .kol-input.error > .kol-alert {\n grid-column: span 2;\n }\n .kol-input .kol-alert.error {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n }\n input {\n border-style: solid;\n border-width: 2px;\n line-height: 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 overflow: hidden;\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}";
|
|
7594
|
+
const defaultStyleCss$y = "@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\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 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 option,\n select,\n textarea {\n background-color: transparent;\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n label {\n cursor: pointer;\n }\n .kol-input {\n display: grid;\n align-items: center;\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 display: grid;\n align-items: center;\n grid-area: input;\n }\n .kol-input .input div {\n display: inline-flex;\n }\n .kol-input .input input {\n margin: 0;\n }\n .kol-input label {\n grid-area: label;\n }\n .kol-input .hint,\n .kol-input.error > .kol-alert {\n grid-column: span 2;\n }\n .kol-input .kol-alert.error {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n }\n input {\n border-style: solid;\n border-width: 2px;\n line-height: 1.5;\n }\n input[type=checkbox] {\n background-color: #fff;\n appearance: none;\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-areas: \"error error\" \"input label\" \"hint hint\";\n grid-template-columns: var(--a11y-min-size) auto;\n }\n .button[data-label-align=left]:not(.hide-label) {\n grid-template-areas: \"error error\" \"label input\" \"hint hint\";\n grid-template-columns: auto var(--a11y-min-size);\n }\n .button:focus-within {\n outline-color: black;\n outline-style: solid;\n /* override global `[tabindex]:focus` style */\n cursor: inherit;\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 width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n }\n}\n@layer kol-component {\n .default .checkbox-container {\n display: flex;\n position: relative;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n }\n .default .icon {\n display: block;\n position: absolute;\n inset: auto;\n z-index: 1;\n }\n .default:not(.checked, .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 position: relative;\n width: 3.2em;\n min-width: 3.2em;\n height: 1.7em;\n }\n .switch input[type=checkbox]::before {\n background-color: #000;\n position: absolute;\n top: calc(0.25em - (2rem / var(--kolibri-root-font-size, 16)));\n left: calc(0.25em - (2rem / var(--kolibri-root-font-size, 16)));\n width: 1.2em;\n height: 1.2em;\n transition: 0.5s;\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 transform: translate(0, -50%);\n color: #000;\n display: flex;\n position: absolute;\n top: 50%;\n left: calc(4rem / var(--kolibri-root-font-size, 16));\n z-index: 1;\n width: 1.2em;\n height: 1.2em;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: 0.5s;\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}";
|
|
7594
7595
|
var KolInputCheckboxDefaultStyle0 = defaultStyleCss$y;
|
|
7595
7596
|
|
|
7596
7597
|
class KolInputCheckbox {
|
|
@@ -7610,13 +7611,13 @@ class KolInputCheckbox {
|
|
|
7610
7611
|
render() {
|
|
7611
7612
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
7612
7613
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
7613
|
-
return (hAsync(Host, { key: '
|
|
7614
|
+
return (hAsync(Host, { key: '9a465a030dc9bb39c496b2a66743ba42bc2079a0', class: "kol-input-checkbox" }, hAsync(KolInputTag, { key: '746ec593e6f1acb35bcb4ad475a646d010413827', class: {
|
|
7614
7615
|
checkbox: true,
|
|
7615
7616
|
[this.state._variant]: true,
|
|
7616
7617
|
'hide-label': !!this.state._hideLabel,
|
|
7617
7618
|
checked: this.state._checked,
|
|
7618
7619
|
indeterminate: this.state._indeterminate,
|
|
7619
|
-
}, "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: '
|
|
7620
|
+
}, "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: 'bbe43013b8f71788d12b4e8c1505dd5b086748a9', 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("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("label", { key: '9cd520c111970d4f0ac428d26e5a30f50cd9d269', slot: "input", class: "checkbox-container" }, hAsync(KolIconTag, { key: '1d799224fe7de743f2905a1442dd872d72098338', 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: '34244306b752fdbc33d2d0ace377a5d0492f5991', 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, onKeyDown: this.onKeyDown.bind(this), onFocus: (event) => {
|
|
7620
7621
|
this.controller.onFacade.onFocus(event);
|
|
7621
7622
|
this.inputHasFocus = true;
|
|
7622
7623
|
}, onBlur: (event) => {
|
|
@@ -7870,7 +7871,7 @@ class InputColorController extends InputIconController {
|
|
|
7870
7871
|
}
|
|
7871
7872
|
}
|
|
7872
7873
|
|
|
7873
|
-
const defaultStyleCss$x = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
7874
|
+
const defaultStyleCss$x = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 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 option,\n select,\n textarea {\n background-color: transparent;\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-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 .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n background-color: white;\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n button:not([role=link]) {\n min-height: auto;\n }\n .input > .kol-icon {\n display: grid;\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}";
|
|
7874
7875
|
var KolInputColorDefaultStyle0 = defaultStyleCss$x;
|
|
7875
7876
|
|
|
7876
7877
|
class KolInputColor {
|
|
@@ -7889,10 +7890,10 @@ class KolInputColor {
|
|
|
7889
7890
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
7890
7891
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
7891
7892
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
7892
|
-
return (hAsync(Host, { key: '
|
|
7893
|
+
return (hAsync(Host, { key: 'eee67867decb854d8b5da3a6664367c539fa9919', class: "kol-input-color" }, hAsync(KolInputTag, { key: '0789ee68085bc6d800502f5b568c2efc030516ca', class: {
|
|
7893
7894
|
color: true,
|
|
7894
7895
|
'hide-label': !!this.state._hideLabel,
|
|
7895
|
-
}, _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: '
|
|
7896
|
+
}, _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: '869da8afdf66a6a83cdcdc63ade42e1521a44166', 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("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '765767282379bec02e2aefdb5f734f88286d8891', slot: "input" }, hAsync("input", Object.assign({ key: '145ea8e1f97e8e2558d5d5cf5c5f16081bd9b364', 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) => {
|
|
7896
7897
|
this.controller.onFacade.onFocus(event);
|
|
7897
7898
|
this.inputHasFocus = true;
|
|
7898
7899
|
}, onBlur: (event) => {
|
|
@@ -8225,7 +8226,7 @@ InputDateController.isoTimeRegex = /^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/;
|
|
|
8225
8226
|
InputDateController.isoWeekRegex = /^\d{4}-W(?:[0-4]\d|5[0-3])$/;
|
|
8226
8227
|
InputDateController.DEFAULT_MAX_DATE = new Date(9999, 11, 31, 23, 59, 59);
|
|
8227
8228
|
|
|
8228
|
-
const defaultStyleCss$w = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
8229
|
+
const defaultStyleCss$w = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 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 option,\n select,\n textarea {\n background-color: transparent;\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-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 .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n background-color: white;\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n button:not([role=link]) {\n min-height: auto;\n }\n .input > .kol-icon {\n display: grid;\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}";
|
|
8229
8230
|
var KolInputDateDefaultStyle0 = defaultStyleCss$w;
|
|
8230
8231
|
|
|
8231
8232
|
class KolInputDate {
|
|
@@ -8265,10 +8266,10 @@ class KolInputDate {
|
|
|
8265
8266
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
8266
8267
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
8267
8268
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
8268
|
-
return (hAsync(Host, { key: '
|
|
8269
|
+
return (hAsync(Host, { key: '8657af4f219518c6c18d62e3cd7ef7681e143cc3', class: { 'kol-input-date': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: '9ec350cbd69031b99b5412cb6a8a907035e52d1f', class: {
|
|
8269
8270
|
[this.state._type]: true,
|
|
8270
8271
|
'hide-label': !!this.state._hideLabel,
|
|
8271
|
-
}, _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: '
|
|
8272
|
+
}, _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: 'c3ef44f1b628170fb2cfc0cdbdd62fd06c1a8461', 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("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '2eb1d8a2385634b7dfb1a455af1e1534d084e33a', slot: "input" }, hAsync("input", Object.assign({ key: 'b6fe5a3a51aea6715a5b8e0330a9875679f426fa', 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) => {
|
|
8272
8273
|
this.controller.onFacade.onBlur(event);
|
|
8273
8274
|
this.inputHasFocus = false;
|
|
8274
8275
|
}, onFocus: (event) => {
|
|
@@ -9129,7 +9130,7 @@ class InputEmailController extends InputTextEmailController {
|
|
|
9129
9130
|
}
|
|
9130
9131
|
}
|
|
9131
9132
|
|
|
9132
|
-
const defaultStyleCss$v = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
9133
|
+
const defaultStyleCss$v = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 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 option,\n select,\n textarea {\n background-color: transparent;\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-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 .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n background-color: white;\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n button:not([role=link]) {\n min-height: auto;\n }\n .input > .kol-icon {\n display: grid;\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}";
|
|
9133
9134
|
var KolInputEmailDefaultStyle0 = defaultStyleCss$v;
|
|
9134
9135
|
|
|
9135
9136
|
class KolInputEmail {
|
|
@@ -9148,10 +9149,10 @@ class KolInputEmail {
|
|
|
9148
9149
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
9149
9150
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
9150
9151
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
9151
|
-
return (hAsync(Host, { key: '
|
|
9152
|
+
return (hAsync(Host, { key: 'ac60edbcb3ebfe102a939ec5b38a37e8a40dedcf', class: {
|
|
9152
9153
|
'kol-input-email': true,
|
|
9153
9154
|
'has-value': this.state._hasValue,
|
|
9154
|
-
} }, hAsync(KolInputTag, { key: '
|
|
9155
|
+
} }, hAsync(KolInputTag, { key: 'fbe21fa47f283d683551a2aed89878feb3e183e6', class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _currentLengthDebounced: this.state._currentLengthDebounced, _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: '4f50f622f5ad6742d7293da85d45db61c6012c37', 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("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '8c6a027da0919608da7af05d39e400a62bffd5f0', slot: "input" }, hAsync("input", Object.assign({ key: '551011d604a272d047a508c8766d5e0528db4475', 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) => {
|
|
9155
9156
|
this.controller.onFacade.onFocus(event);
|
|
9156
9157
|
this.inputHasFocus = true;
|
|
9157
9158
|
}, onBlur: (event) => {
|
|
@@ -9422,7 +9423,7 @@ class InputFileController extends InputIconController {
|
|
|
9422
9423
|
}
|
|
9423
9424
|
}
|
|
9424
9425
|
|
|
9425
|
-
const defaultStyleCss$u = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
9426
|
+
const defaultStyleCss$u = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 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 option,\n select,\n textarea {\n background-color: transparent;\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-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 .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n background-color: white;\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n button:not([role=link]) {\n min-height: auto;\n }\n .input > .kol-icon {\n display: grid;\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .disabled .input-label,\n .disabled .input {\n cursor: not-allowed;\n }\n input::-webkit-file-upload-button, input::file-selector-button {\n cursor: pointer;\n }\n input:disabled, input:disabled::-webkit-file-upload-button, input:disabled::file-selector-button {\n cursor: not-allowed;\n pointer-events: none;\n }\n}";
|
|
9426
9427
|
var KolInputFileDefaultStyle0 = defaultStyleCss$u;
|
|
9427
9428
|
|
|
9428
9429
|
class KolInputFile {
|
|
@@ -9440,10 +9441,10 @@ class KolInputFile {
|
|
|
9440
9441
|
render() {
|
|
9441
9442
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
9442
9443
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
9443
|
-
return (hAsync(Host, { key: '
|
|
9444
|
+
return (hAsync(Host, { key: '2fb1994862e55f5f29d5539ea76611a910602944', class: "kol-input-file" }, hAsync(KolInputTag, { key: 'bf5b084f28a7167cb04213ddd16617e0dd656d62', class: {
|
|
9444
9445
|
file: true,
|
|
9445
9446
|
'hide-label': !!this.state._hideLabel,
|
|
9446
|
-
}, _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: '
|
|
9447
|
+
}, _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: '80930ef080e0a80ba7ec5d83b8d0452d501c659a', 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("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '614c84ae9760bc39232515f874154eb9f5b88983', slot: "input" }, hAsync("input", Object.assign({ key: '5c07891d254d9445f2ae9b296614800cf06d5f06', 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) => {
|
|
9447
9448
|
this.controller.onFacade.onFocus(event);
|
|
9448
9449
|
this.inputHasFocus = true;
|
|
9449
9450
|
}, onBlur: (event) => {
|
|
@@ -9726,7 +9727,7 @@ class InputNumberController extends InputIconController {
|
|
|
9726
9727
|
}
|
|
9727
9728
|
}
|
|
9728
9729
|
|
|
9729
|
-
const defaultStyleCss$t = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
9730
|
+
const defaultStyleCss$t = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 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 option,\n select,\n textarea {\n background-color: transparent;\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-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 .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n background-color: white;\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n button:not([role=link]) {\n min-height: auto;\n }\n .input > .kol-icon {\n display: grid;\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}";
|
|
9730
9731
|
var KolInputNumberDefaultStyle0 = defaultStyleCss$t;
|
|
9731
9732
|
|
|
9732
9733
|
class KolInputNumber {
|
|
@@ -9745,13 +9746,13 @@ class KolInputNumber {
|
|
|
9745
9746
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
9746
9747
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
9747
9748
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
9748
|
-
return (hAsync(Host, { key: '
|
|
9749
|
+
return (hAsync(Host, { key: '9a2aae0cd225fbfc9485ead318853ed29e412a4e', class: {
|
|
9749
9750
|
'kol-input-number': true,
|
|
9750
9751
|
'has-value': this.state._hasValue,
|
|
9751
|
-
} }, hAsync(KolInputTag, { key: '
|
|
9752
|
+
} }, hAsync(KolInputTag, { key: 'c14ef81d498de0b55146571ccd48ff133c39c0f9', class: {
|
|
9752
9753
|
number: true,
|
|
9753
9754
|
'hide-label': !!this.state._hideLabel,
|
|
9754
|
-
}, _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: '
|
|
9755
|
+
}, _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: '8b4b88a454603fa88aa7a46d59d3b5fdf9717bd0', 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("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '8934f83d83685b71106f5006a28363f8579c5af1', slot: "input" }, hAsync("input", Object.assign({ key: 'fb15ab090dbe3bba5b5335b706d9358b9f231b04', 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) => {
|
|
9755
9756
|
this.controller.onFacade.onFocus(event);
|
|
9756
9757
|
this.inputHasFocus = true;
|
|
9757
9758
|
}, onBlur: (event) => {
|
|
@@ -9982,7 +9983,7 @@ class KolInputNumber {
|
|
|
9982
9983
|
}; }
|
|
9983
9984
|
}
|
|
9984
9985
|
|
|
9985
|
-
const defaultStyleCss$s = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
9986
|
+
const defaultStyleCss$s = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 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 option,\n select,\n textarea {\n background-color: transparent;\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-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 .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n background-color: white;\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n button:not([role=link]) {\n min-height: auto;\n }\n .input > .kol-icon {\n display: grid;\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n [slot=input] {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n [slot=input] .kol-button button,\n [slot=input] .kol-button-wc button {\n min-height: var(--a11y-min-size);\n }\n}";
|
|
9986
9987
|
var KolInputPasswordDefaultStyle0 = defaultStyleCss$s;
|
|
9987
9988
|
|
|
9988
9989
|
class KolInputPassword {
|
|
@@ -10000,13 +10001,13 @@ class KolInputPassword {
|
|
|
10000
10001
|
render() {
|
|
10001
10002
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
10002
10003
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
10003
|
-
return (hAsync(Host, { key: '
|
|
10004
|
+
return (hAsync(Host, { key: 'a84046c03a4585fd36795d37eddfabeeb18c76d5', class: {
|
|
10004
10005
|
'kol-input-password': true,
|
|
10005
10006
|
'has-value': this.state._hasValue,
|
|
10006
|
-
} }, hAsync(KolInputTag, { key: '
|
|
10007
|
+
} }, hAsync(KolInputTag, { key: '048d9a4e598a6b4533f764cca09ce233e736e45f', class: {
|
|
10007
10008
|
'hide-label': !!this.state._hideLabel,
|
|
10008
10009
|
password: true,
|
|
10009
|
-
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _currentLengthDebounced: this.state._currentLengthDebounced, _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: '
|
|
10010
|
+
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _currentLengthDebounced: this.state._currentLengthDebounced, _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: '78cdb4e9cca607018f3ea7ccb32ee147ef0faf45', 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("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '1865764ad5fbaffd38d743a36e138cb49ec4e976', slot: "input" }, hAsync("input", Object.assign({ key: '27b3f85439a924a279e5c0d8aa1b82b4c567a200', 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) => {
|
|
10010
10011
|
this.controller.onFacade.onFocus(event);
|
|
10011
10012
|
this.inputHasFocus = true;
|
|
10012
10013
|
}, onBlur: (event) => {
|
|
@@ -10268,7 +10269,7 @@ const FormFieldMsgFc = ({ _alert, _msg, _hideError, _id }) => {
|
|
|
10268
10269
|
}) }, msg), (_msg === null || _msg === void 0 ? void 0 : _msg._description) || undefined));
|
|
10269
10270
|
};
|
|
10270
10271
|
|
|
10271
|
-
const defaultStyleCss$r = "@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n
|
|
10272
|
+
const defaultStyleCss$r = "@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\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 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 option,\n select,\n textarea {\n background-color: transparent;\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-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 --border-width: 2px;\n --input-size: 1.5em;\n }\n .kol-input .icons {\n display: none;\n }\n label {\n cursor: pointer;\n }\n input {\n border-style: solid;\n border-radius: 100%;\n display: flex;\n width: var(--input-size);\n min-width: var(--input-size);\n height: var(--input-size);\n min-height: var(--input-size);\n margin: 0;\n padding: 0;\n border-width: var(--border-width);\n appearance: none;\n cursor: pointer;\n }\n input:before {\n border-radius: 100%;\n width: calc(var(--input-size) / 2);\n height: calc(var(--input-size) / 2);\n margin: auto;\n content: \"\";\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 display: flex;\n align-items: center;\n }\n /* required star is on fieldset legend */\n .required label > span::after {\n content: \"\";\n }\n}";
|
|
10272
10273
|
var KolInputRadioDefaultStyle0 = defaultStyleCss$r;
|
|
10273
10274
|
|
|
10274
10275
|
class KolInputRadio {
|
|
@@ -10286,14 +10287,14 @@ class KolInputRadio {
|
|
|
10286
10287
|
const { ariaDescribedBy, hasError } = getRenderStates(this.state);
|
|
10287
10288
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
10288
10289
|
const hasHint = typeof this._hint === 'string' && this._hint.length > 0;
|
|
10289
|
-
return (hAsync(Host, { key: '
|
|
10290
|
+
return (hAsync(Host, { key: '9e1dd1757957c297b11a6a1397c4798483be7cbf', class: "kol-input-radio" }, hAsync("fieldset", { key: 'a491fbb474a5b434ecb2bfa70315d2e721dc6242', class: {
|
|
10290
10291
|
fieldset: true,
|
|
10291
10292
|
disabled: this.state._disabled === true,
|
|
10292
10293
|
error: hasError === true,
|
|
10293
10294
|
required: this.state._required === true,
|
|
10294
10295
|
'hidden-error': this._hideError === true,
|
|
10295
10296
|
[this.state._orientation]: true,
|
|
10296
|
-
} }, hAsync("legend", { key: '
|
|
10297
|
+
} }, hAsync("legend", { key: '391765f9966448c4e33378c2efa67f0526ef5b7c', class: "block w-full mb-1 leading-normal" }, hAsync("span", { key: 'd1fb781c73c034ee3f4ba29843508b89c1c7de1f' }, hAsync("span", { key: 'a84e547d80e71f316509b523e4cad582da1ea809', slot: "label" }, hasExpertSlot ? hAsync("slot", { name: "expert" }) : this._label))), this.state._options.map((option, index) => {
|
|
10297
10298
|
const customId = `${this.state._id}-${index}`;
|
|
10298
10299
|
const slotName = `radio-${index}`;
|
|
10299
10300
|
const selected = this.state._value === option.value;
|
|
@@ -10312,7 +10313,7 @@ class KolInputRadio {
|
|
|
10312
10313
|
padding: this.state._hideLabel ? '0' : undefined,
|
|
10313
10314
|
visibility: this.state._hideLabel ? 'hidden' : undefined,
|
|
10314
10315
|
} }, hAsync("span", null, hAsync("span", { class: "radio-label-span-inner" }, option.label))))));
|
|
10315
|
-
}), hasError && hAsync(FormFieldMsgFc, { key: '
|
|
10316
|
+
}), hasError && hAsync(FormFieldMsgFc, { key: '1bdc5e320c739f3df2493ae0eca86763ef084e3a', _alert: this.showAsAlert(), _hideError: this.state._hideError, _msg: this.state._msg, _id: this.state._id }), hasHint && hAsync("span", { key: '462b070dc98bbb10a4f3888c69855f0c455bcb18', class: "hint" }, this.state._hint))));
|
|
10316
10317
|
}
|
|
10317
10318
|
constructor(hostRef) {
|
|
10318
10319
|
registerInstance(this, hostRef);
|
|
@@ -10547,7 +10548,7 @@ class InputRangeController extends InputIconController {
|
|
|
10547
10548
|
}
|
|
10548
10549
|
}
|
|
10549
10550
|
|
|
10550
|
-
const defaultStyleCss$q = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
10551
|
+
const defaultStyleCss$q = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 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 option,\n select,\n textarea {\n background-color: transparent;\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-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 .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n background-color: white;\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n button:not([role=link]) {\n min-height: auto;\n }\n .input > .kol-icon {\n display: grid;\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .inputs-wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n input[type=number] {\n width: var(--kolibri-input-range--input-number--width);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n border: none;\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 background-color: #d3d3d3;\n display: inline-block;\n /* Design-Hack - related with flex-grow */\n width: 0;\n height: calc(8rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n padding: 0;\n flex-grow: 1;\n line-height: 1.5;\n appearance: none;\n border: 1px solid #000;\n }\n input[type=range]::-webkit-slider-thumb {\n background-color: #000;\n border-radius: 20px;\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n -webkit-appearance: none;\n cursor: pointer;\n }\n input[type=range]::-moz-range-thumb {\n background-color: #000;\n border-radius: 20px;\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n -moz-appearance: none;\n cursor: pointer;\n }\n}\n/* Fix missing outline in Chromium-based browsers on Windows in high contrast mode. */\n@media (prefers-contrast: more) {\n ::-webkit-slider-thumb {\n outline: 1px solid currentColor;\n }\n}";
|
|
10551
10552
|
var KolInputRangeDefaultStyle0 = defaultStyleCss$q;
|
|
10552
10553
|
|
|
10553
10554
|
class KolInputRange {
|
|
@@ -10585,25 +10586,25 @@ class KolInputRange {
|
|
|
10585
10586
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
10586
10587
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
10587
10588
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
10588
|
-
return (hAsync(Host, { key: '
|
|
10589
|
+
return (hAsync(Host, { key: '12c7619cb78fdc5ca7c93d8229d0b03ec1184a1d', class: "kol-input-range" }, hAsync(KolInputTag, { key: 'd03419a917666df8fe18f1a65641f4ebd0821b52', class: {
|
|
10589
10590
|
range: true,
|
|
10590
10591
|
'hide-label': !!this.state._hideLabel,
|
|
10591
|
-
}, _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: '
|
|
10592
|
+
}, _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: 'b2bc64f1194f6cb03795c2866847b6521b4f5ca7', 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("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'f07fc1f84f62c34fa698fec424f33c5a20c09d78', slot: "input" }, hAsync("div", { key: 'ab6085f852f2f5f253c89824089b4d2ffbbacaaf', class: "inputs-wrapper", style: {
|
|
10592
10593
|
'--kolibri-input-range--input-number--width': `calc(${String((_a = this.state._max) !== null && _a !== void 0 ? _a : 100).length}ch + 2em)`,
|
|
10593
|
-
} }, hAsync("input", Object.assign({ key: '
|
|
10594
|
+
} }, hAsync("input", Object.assign({ key: '47ac2fded7ba8fb0e2567dca6295c455fe289379', 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) => {
|
|
10594
10595
|
this.controller.onFacade.onFocus(event);
|
|
10595
10596
|
this.inputHasFocus = true;
|
|
10596
10597
|
}, onBlur: (event) => {
|
|
10597
10598
|
this.controller.onFacade.onBlur(event);
|
|
10598
10599
|
this.inputHasFocus = false;
|
|
10599
|
-
} })), hAsync("input", Object.assign({ key: '
|
|
10600
|
+
} })), hAsync("input", Object.assign({ key: '5fc4f65e401d4f05c6396bd963c3d5a35063a524', 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) => {
|
|
10600
10601
|
this.controller.onFacade.onFocus(event);
|
|
10601
10602
|
this.inputHasFocus = true;
|
|
10602
10603
|
}, onBlur: (event) => {
|
|
10603
10604
|
this.controller.onFacade.onBlur(event);
|
|
10604
10605
|
this.inputHasFocus = false;
|
|
10605
10606
|
} }))), hasSuggestions && [
|
|
10606
|
-
hAsync("datalist", { key: '
|
|
10607
|
+
hAsync("datalist", { key: 'e48823af5daffeb0288b99cd8c96c1bb825a36c1', id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
|
|
10607
10608
|
]))));
|
|
10608
10609
|
}
|
|
10609
10610
|
constructor(hostRef) {
|
|
@@ -10822,7 +10823,7 @@ class KolInputRange {
|
|
|
10822
10823
|
}; }
|
|
10823
10824
|
}
|
|
10824
10825
|
|
|
10825
|
-
const defaultStyleCss$p = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
10826
|
+
const defaultStyleCss$p = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 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 option,\n select,\n textarea {\n background-color: transparent;\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-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 .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n background-color: white;\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n button:not([role=link]) {\n min-height: auto;\n }\n .input > .kol-icon {\n display: grid;\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}";
|
|
10826
10827
|
var KolInputTextDefaultStyle0 = defaultStyleCss$p;
|
|
10827
10828
|
|
|
10828
10829
|
class KolInputText {
|
|
@@ -10841,13 +10842,13 @@ class KolInputText {
|
|
|
10841
10842
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
10842
10843
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
10843
10844
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
10844
|
-
return (hAsync(Host, { key: '
|
|
10845
|
+
return (hAsync(Host, { key: '0589a7c26d609cbfd8a558823337595b786dc7e2', class: {
|
|
10845
10846
|
'has-value': this.state._hasValue,
|
|
10846
10847
|
'kol-input-text': true,
|
|
10847
|
-
} }, hAsync(KolInputTag, { key: '
|
|
10848
|
+
} }, hAsync(KolInputTag, { key: '683fdcbf6d18f55934c467160cb24ff8b5fb9c77', class: {
|
|
10848
10849
|
[this.state._type]: true,
|
|
10849
10850
|
'hide-label': !!this.state._hideLabel,
|
|
10850
|
-
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _currentLengthDebounced: this.state._currentLengthDebounced, _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: '
|
|
10851
|
+
}, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _currentLengthDebounced: this.state._currentLengthDebounced, _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: '91054ddb0072e2f640cb20f40ba29c942f88a8c3', 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("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '045478c632017b140113e56395139a95f906b94a', slot: "input" }, hAsync("input", Object.assign({ key: 'cc0c43d8cc2963c930fd8353cb21275243811e44', 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) => {
|
|
10851
10852
|
this.controller.onFacade.onFocus(event);
|
|
10852
10853
|
this.inputHasFocus = true;
|
|
10853
10854
|
}, onBlur: (event) => {
|
|
@@ -11151,18 +11152,18 @@ class KolInputWc {
|
|
|
11151
11152
|
const hasExpertSlot = showExpertSlot(this._label);
|
|
11152
11153
|
const hasHint = typeof this._hint === 'string' && this._hint.length > 0;
|
|
11153
11154
|
const useTooltopInsteadOfLabel = !hasExpertSlot && this._hideLabel;
|
|
11154
|
-
return (hAsync(Host, { key: '
|
|
11155
|
+
return (hAsync(Host, { key: '97a275ca1a9441bbc2b08647a9f7bb15422abe39', class: clsx('kol-input', this.getModifierClassNameByMsgType(showMsg), {
|
|
11155
11156
|
disabled: this._disabled === true,
|
|
11156
11157
|
[((_d = this._msg) === null || _d === void 0 ? void 0 : _d._type) || 'error']: showMsg === true,
|
|
11157
11158
|
'read-only': this._readOnly === true,
|
|
11158
11159
|
required: this._required === true,
|
|
11159
11160
|
touched: this._touched === true,
|
|
11160
11161
|
'hidden-error': this._hideError === true,
|
|
11161
|
-
}) }, hAsync("label", { key: '
|
|
11162
|
+
}) }, hAsync("label", { key: 'f9840afaadb54e828df2360b35206bd474d6e6ae', class: "input-label", id: !useTooltopInsteadOfLabel ? `${this._id}-label` : undefined, hidden: useTooltopInsteadOfLabel, htmlFor: this._id }, hAsync("span", { key: 'b9a24b60ba19d4af9018c4c0b0974c1976634683', class: "input-label-span" }, hAsync("slot", { key: '6dd64696bf929479eb707d3380301251e1d83457', name: "label" }))), hasHint && (hAsync("span", { key: '8957e1a38b7ab3e4e1b79308ac21cce40c1b87c9', class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { key: '4830f1ea34aba0d7affe33bb4416b1ef1d0365dd', class: {
|
|
11162
11163
|
input: true,
|
|
11163
11164
|
'icon-left': typeof ((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) === 'object',
|
|
11164
11165
|
'icon-right': typeof ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) === 'object',
|
|
11165
|
-
} }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: '
|
|
11166
|
+
} }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: '3afaeb25f8bf25451dc92e32021742df0280ac5f', _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: '132a91efcb02a2e9f554df8d202078787de2fdc7', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { key: 'eae26e05ed4265ccd3d22d0ab59da0b374d352a6', _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: '4975557b0114b0e7901148a6159d3d28ee56fada', _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: '6d5f028bd4ca6930fe0127ee292ca225e5dad8d4', "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(FormFieldMsgFc, { key: '1ad8ac23b1bff22f8a29edfd0a58d0f192eec80c', _alert: this._alert, _hideError: this._hideError, _msg: this._msg, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { key: '79af0e327c2e1bb571e43587478188a38899a647', id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync(Fragment, null, hAsync("span", { key: '416b8380d001dea36f8e087633ecd1d6fe523ba8', class: "counter", "aria-hidden": "true", "data-testid": "input-counter" }, this._currentLength, this._maxLength && `/${this._maxLength}`, " ", translate('kol-characters')), hAsync("span", { key: '6fed61b8e5a0e8b01ce392f500e8f47b9b9cab45', "aria-live": "polite", "aria-atomic": "true", class: "visually-hidden", "data-testid": "input-counter-aria" }, this._currentLengthDebounced, this._maxLength && ` ${translate('kol-of')} ${this._maxLength}`, " ", translate('kol-characters'))))));
|
|
11166
11167
|
}
|
|
11167
11168
|
getModifierClassNameByMsgType(showMsg) {
|
|
11168
11169
|
var _a, _b;
|
|
@@ -11211,7 +11212,7 @@ class KolInputWc {
|
|
|
11211
11212
|
}; }
|
|
11212
11213
|
}
|
|
11213
11214
|
|
|
11214
|
-
const defaultStyleCss$o = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
11215
|
+
const defaultStyleCss$o = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: inline-block;\n }\n text {\n font-size: calc(90rem / var(--kolibri-root-font-size, 16));\n letter-spacing: normal;\n word-spacing: normal;\n }\n svg {\n max-height: 100%;\n }\n}";
|
|
11215
11216
|
var KolKolibriDefaultStyle0 = defaultStyleCss$o;
|
|
11216
11217
|
|
|
11217
11218
|
class KolKolibri {
|
|
@@ -11243,7 +11244,7 @@ class KolKolibri {
|
|
|
11243
11244
|
}
|
|
11244
11245
|
render() {
|
|
11245
11246
|
const fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
|
|
11246
|
-
return (hAsync(Host, { key: '
|
|
11247
|
+
return (hAsync(Host, { key: 'd6b28053214b3db88ffe73f002bff63d4b7ed6b6', class: "kol-kolibri" }, hAsync("svg", { key: '77a38f9cff5c4f708ce40260438ce621ab771826', 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: '3c52e2798eef27de8c16c326e1d5da0c2c65c3ee', d: "M353 322L213 304V434L353 322Z" }), hAsync("path", { key: 'a182ec4c97daa4f48633cde95ae8e3556cfae338', d: "M209 564V304L149 434L209 564Z" }), hAsync("path", { key: 'e95f8cb5d3ab502bc66048010678618ae6d51aef', d: "M357 316L417 250L361 210L275 244L357 316Z" }), hAsync("path", { key: 'e69b894a54c051ba43f83436ecc72a620af50b45', d: "M329 218L237 92L250 222L272 241L329 218Z" }), hAsync("path", { key: 'db53142aed93c5fdbc2c6d0b2af924ba7e6b444c', d: "M353 318L35 36L213 300L353 318Z" }), hAsync("path", { key: '28a961c943698c2bd28b3e3d6605362a9b10ce9c', d: "M391 286L565 272L421 252L391 286Z" }), this.state._labeled === true && (hAsync("text", { key: 'd24faf032bf07683f1c6cf20a9a3233853d0f9aa', x: "250", y: "525", fill: fillColor }, "KoliBri")))));
|
|
11247
11248
|
}
|
|
11248
11249
|
validateColor(value) {
|
|
11249
11250
|
validateColor(this, value, {
|
|
@@ -11283,7 +11284,7 @@ class KolKolibri {
|
|
|
11283
11284
|
}; }
|
|
11284
11285
|
}
|
|
11285
11286
|
|
|
11286
|
-
const defaultStyleCss$n = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
11287
|
+
const defaultStyleCss$n = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 :is(a, button) {\n display: inline-flex;\n align-items: baseline;\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 position: absolute;\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n z-index: 9999999;\n line-height: 1;\n }\n .skip:focus {\n background-color: #fff;\n position: unset;\n left: unset;\n padding: 1em;\n }\n .kol-icon.external-link-icon {\n display: inline-flex;\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
11287
11288
|
var KolLinkDefaultStyle0 = defaultStyleCss$n;
|
|
11288
11289
|
|
|
11289
11290
|
class KolLink {
|
|
@@ -11316,7 +11317,7 @@ class KolLink {
|
|
|
11316
11317
|
await ((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
11317
11318
|
}
|
|
11318
11319
|
render() {
|
|
11319
|
-
return (hAsync(Host, { key: '
|
|
11320
|
+
return (hAsync(Host, { key: '04a57f5759034b2c4bdb57b560b24132a90f4590', class: "kol-link" }, hAsync(KolLinkWcTag, { key: '4babf0d06f6a868e2184ec1f8afadf08f7eaf977', 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, _shortKey: this._shortKey, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: 'b06085b49d02fad96cb2c7ff7c6587a714a27d94', name: "expert", slot: "expert" }))));
|
|
11320
11321
|
}
|
|
11321
11322
|
static get delegatesFocus() { return true; }
|
|
11322
11323
|
static get style() { return {
|
|
@@ -11350,7 +11351,7 @@ class KolLink {
|
|
|
11350
11351
|
}; }
|
|
11351
11352
|
}
|
|
11352
11353
|
|
|
11353
|
-
const defaultStyleCss$m = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
11354
|
+
const defaultStyleCss$m = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 :is(a, button) {\n display: inline-flex;\n place-items: center;\n text-align: center;\n text-decoration-line: none;\n }\n :is(a, button)::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n /* TODO: Why we need this? */\n :is(a, button) > .kol-span-wc {\n width: 100%;\n margin: auto;\n }\n}";
|
|
11354
11355
|
var KolLinkButtonDefaultStyle0 = defaultStyleCss$m;
|
|
11355
11356
|
|
|
11356
11357
|
class KolLinkButton {
|
|
@@ -11385,9 +11386,9 @@ class KolLinkButton {
|
|
|
11385
11386
|
await ((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
11386
11387
|
}
|
|
11387
11388
|
render() {
|
|
11388
|
-
return (hAsync(Host, { key: '
|
|
11389
|
+
return (hAsync(Host, { key: '6d487fb585b6611f00f61eee36078393626e47fc', class: "kol-link-button" }, hAsync(KolLinkWcTag, { key: '79fcc7ec08bea51d91e2eaa63136937e066cfd8e', ref: this.catchRef, class: {
|
|
11389
11390
|
button: true,
|
|
11390
|
-
}, _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,
|
|
11391
|
+
}, _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, _shortKey: this._shortKey, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign, _variant: this._variant }, hAsync("slot", { key: 'dae8e678732a9860afa4d84d0a37932e5a604dd7', name: "expert", slot: "expert" }))));
|
|
11391
11392
|
}
|
|
11392
11393
|
static get delegatesFocus() { return true; }
|
|
11393
11394
|
static get style() { return {
|
|
@@ -11423,7 +11424,7 @@ class KolLinkButton {
|
|
|
11423
11424
|
}; }
|
|
11424
11425
|
}
|
|
11425
11426
|
|
|
11426
|
-
const defaultStyleCss$l = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
11427
|
+
const defaultStyleCss$l = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n :is(ol, ul).horizontal {\n display: flex;\n flex-wrap: wrap;\n }\n :is(ol, ul).horizontal li {\n margin-right: calc(4rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :is(ol, ul).horizontal li:first-child {\n margin-left: 0;\n }\n :is(ol, ul).horizontal li:last-child {\n margin-right: 0;\n }\n :is(ol, ul).vertical li {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(28rem / var(--kolibri-root-font-size, 16));\n }\n li.list-none {\n margin-left: 0;\n list-style-type: none !important;\n }\n}";
|
|
11427
11428
|
var KolLinkGroupDefaultStyle0 = defaultStyleCss$l;
|
|
11428
11429
|
|
|
11429
11430
|
const ListItem = (props) => {
|
|
@@ -11454,10 +11455,10 @@ class KolLinkGroup {
|
|
|
11454
11455
|
}
|
|
11455
11456
|
render() {
|
|
11456
11457
|
const ListTag = this.isUl ? 'ul' : 'ol';
|
|
11457
|
-
return (hAsync(Host, { key: '
|
|
11458
|
+
return (hAsync(Host, { key: '9262137a23f23bd03cb95521856950754c8278a7', class: "kol-link-group" }, hAsync(ListTag, { key: '1faf48bc506641b5973025f7a3c0ebb8eb7248d0', "aria-label": this.state._label, class: {
|
|
11458
11459
|
vertical: this.state._orientation === 'vertical',
|
|
11459
11460
|
horizontal: this.state._orientation === 'horizontal',
|
|
11460
|
-
} }, hAsync(ListItem, { key: '
|
|
11461
|
+
} }, hAsync(ListItem, { key: '9feb34993b9bf40c62c6982b2ec24b394989e3d6', links: this.state._links, orientation: this.state._orientation, listStyleType: this.state._listStyleType }))));
|
|
11461
11462
|
}
|
|
11462
11463
|
validateLabel(value, _oldValue, initial = false) {
|
|
11463
11464
|
if (!initial && this.state._label) {
|
|
@@ -11608,7 +11609,7 @@ class KolLinkWc {
|
|
|
11608
11609
|
const { isExternal, tagAttrs } = this.getRenderValues();
|
|
11609
11610
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
11610
11611
|
const hasAriaDescription = Boolean((_b = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length);
|
|
11611
|
-
return (hAsync(Host, { key: '
|
|
11612
|
+
return (hAsync(Host, { key: 'c49c578ca62676b33a74c33e27bb4033852af9ba', class: "kol-link-wc" }, hAsync("a", Object.assign({ key: 'b42dacd815f4d6f55d872342451a54a6dc8b370d', 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'
|
|
11612
11613
|
? `${this.state._label}${isExternal ? ` (${translate('kol-open-link-in-tab')})` : ''}`
|
|
11613
11614
|
: undefined, class: {
|
|
11614
11615
|
disabled: this.state._disabled === true,
|
|
@@ -11616,7 +11617,7 @@ class KolLinkWc {
|
|
|
11616
11617
|
'hide-label': this.state._hideLabel === true,
|
|
11617
11618
|
[this.state._variant]: this.state._variant !== 'custom',
|
|
11618
11619
|
[this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
11619
|
-
} }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanWcTag, { key: '
|
|
11620
|
+
} }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanWcTag, { key: '50aaeb25b8d5af5e114d24ce363f84c1d22b4f9d', _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: '8c27e1625da7713c731734eff25b5611281c0aae', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '61d2042428745bb5a99338b2ddae19b717e1e302', class: "external-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: '68eafe0ab64a670ddccf5cc9f8d57cc1cbca087d', "aria-hidden": "true", 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: '9eef9ed488ab280b4e32c2a7961d225d307eaf62', class: "visually-hidden", id: this.internalDescriptionById }, this.state._ariaDescription))));
|
|
11620
11621
|
}
|
|
11621
11622
|
validateAccessKey(value) {
|
|
11622
11623
|
validateAccessKey(this, value);
|
|
@@ -11929,7 +11930,7 @@ BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Arzneimittel und Mediz
|
|
|
11929
11930
|
BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Bevölkerungsforschung'], ['Bundesinstitut', 'für Bevölkerungsforschung']);
|
|
11930
11931
|
BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Sportwissenschaft'], ['Bundesinstitut', 'für Sportwissenschaft']);
|
|
11931
11932
|
|
|
11932
|
-
const defaultStyleCss$k = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
11933
|
+
const defaultStyleCss$k = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: inline-block;\n }\n text {\n letter-spacing: normal;\n word-spacing: normal;\n }\n svg {\n max-height: 100%;\n }\n}";
|
|
11933
11934
|
var KolLogoDefaultStyle0 = defaultStyleCss$k;
|
|
11934
11935
|
|
|
11935
11936
|
function enumToArray(enumeration, enumAsMap = new Map()) {
|
|
@@ -11969,7 +11970,7 @@ class KolLogo {
|
|
|
11969
11970
|
}
|
|
11970
11971
|
render() {
|
|
11971
11972
|
var _a;
|
|
11972
|
-
return (hAsync(Host, { key: '
|
|
11973
|
+
return (hAsync(Host, { key: 'b2186ee9571f7119314570f6e120bdd98a05c7b1', class: "kol-logo" }, hAsync("svg", { key: 'cced9f4240697537c455b3f29ed3b59321e773c2', "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: '790a631846a81c32ade692929d229c00f11b1412', width: "100%", height: "100%", fill: "white" }), hAsync("svg", { key: '9e07bdd86fea2aa5e7c642db06bcef8ee1f79ac5', x: "0", y: "4", height: "75" }, hAsync(Adler, { key: '03c0b6074d05664be71354fc8692d7de2ba7485a' })), hAsync("svg", { key: '108854c7bf699efc345ece005631c511b96bd52b', x: "40.5", y: "3.5", height: "100" }, hAsync("rect", { key: '0aae4cbd05da8af8bad34db26fa52fe165e97524', width: "5", height: "30" }), hAsync("rect", { key: '7e457ccd4020b9a5f7f45ef3c67bab75d27e97f4', y: "30", width: "5", height: "30", fill: "red" }), hAsync("rect", { key: 'ce68eac200d79047e515219839864c5d6598d0ec', y: "60", width: "5", height: "30", fill: "#fc0" })), hAsync("svg", { key: 'ef7aa84de6043c19bc42b57e48cc1b7c64fe25e0', x: "50", y: "0" }, hAsync("text", { key: 'd98d461b5e2ccb57559df3359aba3debda3f2a0a', 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) => {
|
|
11973
11974
|
return (hAsync("tspan", { x: "0", dy: "1.1em", key: `kol-logo-text-${index}` }, text));
|
|
11974
11975
|
}))) : (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."))))))));
|
|
11975
11976
|
}
|
|
@@ -11992,7 +11993,7 @@ class KolLogo {
|
|
|
11992
11993
|
}; }
|
|
11993
11994
|
}
|
|
11994
11995
|
|
|
11995
|
-
const defaultStyleCss$j = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
11996
|
+
const defaultStyleCss$j = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n .kol-modal {\n padding: 0;\n border: 0;\n }\n .kol-modal::backdrop {\n background-color: rgba(0, 0, 0, 0.33);\n }\n}";
|
|
11996
11997
|
var KolModalDefaultStyle0 = defaultStyleCss$j;
|
|
11997
11998
|
|
|
11998
11999
|
class KolModal {
|
|
@@ -12031,11 +12032,11 @@ class KolModal {
|
|
|
12031
12032
|
(_b = (_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
12032
12033
|
}
|
|
12033
12034
|
render() {
|
|
12034
|
-
return (hAsync("dialog", { key: '
|
|
12035
|
+
return (hAsync("dialog", { key: '68d94eb0bb60f6d103636a88fd139a7584dcca0c', class: "kol-modal", ref: (el) => {
|
|
12035
12036
|
this.refDialog = el;
|
|
12036
12037
|
}, style: {
|
|
12037
12038
|
width: this.state._width,
|
|
12038
|
-
}, "aria-label": this.state._label, onClose: this.handleNativeCloseEvent.bind(this) }, hAsync("div", { key: '
|
|
12039
|
+
}, "aria-label": this.state._label, onClose: this.handleNativeCloseEvent.bind(this) }, hAsync("div", { key: '12a65996baaea3e24d0337a035aa847d2bdfb078' }, hAsync("slot", { key: 'b06e6182acf14dccbda7748da6a7bac39a4cd523' }))));
|
|
12039
12040
|
}
|
|
12040
12041
|
validateActiveElement(value) {
|
|
12041
12042
|
watchValidator(this, '_activeElement', (value) => typeof value === 'object' || value === null, new Set(['HTMLElement', 'null']), value, {
|
|
@@ -12104,7 +12105,7 @@ class KolModal {
|
|
|
12104
12105
|
}; }
|
|
12105
12106
|
}
|
|
12106
12107
|
|
|
12107
|
-
const defaultStyleCss$i = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
12108
|
+
const defaultStyleCss$i = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 > div {\n display: flex;\n flex-direction: column;\n align-items: center;\n place-items: center;\n }\n .list {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n }\n .list.vertical {\n flex-direction: column;\n }\n .list.horizontal {\n flex-wrap: wrap;\n }\n .entry {\n display: flex;\n }\n .entry-item {\n flex-grow: 1;\n }\n .entry .kol-span-wc {\n place-items: start;\n }\n .entry .button {\n text-align: left;\n }\n}";
|
|
12108
12109
|
var KolNavDefaultStyle0 = defaultStyleCss$i;
|
|
12109
12110
|
|
|
12110
12111
|
const entryIsLink = (entryProps) => {
|
|
@@ -12214,11 +12215,11 @@ class KolNav {
|
|
|
12214
12215
|
const collapsible = this.state._collapsible === true;
|
|
12215
12216
|
const hideLabel = this.state._hideLabel === true;
|
|
12216
12217
|
const orientation = this.state._orientation;
|
|
12217
|
-
return (hAsync(Host, { key: '
|
|
12218
|
+
return (hAsync(Host, { key: '83f8fd4be86294cb56684a789ccc9aa893544d70', class: "kol-nav" }, hAsync("div", { key: 'fc52ebbba54307207839fe1c72e3ad20e372065f', class: {
|
|
12218
12219
|
nav: true,
|
|
12219
12220
|
[orientation]: true,
|
|
12220
12221
|
'is-compact': this.state._hideLabel,
|
|
12221
|
-
} }, hAsync("nav", { key: '
|
|
12222
|
+
} }, hAsync("nav", { key: '109792c2ffcbd33ba4896da1ac59450976e68863', "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: '0ad5abc44862e32c979110361e7151970aacfe4e', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })), hasCompactButton && (hAsync("div", { key: 'b9737dee75ca53dced7db6c5959e6f454cd2a6cb', class: "compact" }, hAsync(KolButtonWcTag, { key: '0349dda8634dedd431629b9215b193825d076ead', class: "toggle-button", _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: {
|
|
12222
12223
|
onClick: () => {
|
|
12223
12224
|
this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel === false });
|
|
12224
12225
|
},
|
|
@@ -12300,7 +12301,7 @@ class KolNav {
|
|
|
12300
12301
|
}; }
|
|
12301
12302
|
}
|
|
12302
12303
|
|
|
12303
|
-
const defaultStyleCss$h = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
12304
|
+
const defaultStyleCss$h = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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: grid;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n .navigation-list {\n display: inline-flex;\n margin: 0;\n padding: 0;\n gap: 0.5em;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n }\n .separator:before {\n content: \"•••\";\n }\n}";
|
|
12304
12305
|
var KolPaginationDefaultStyle0 = defaultStyleCss$h;
|
|
12305
12306
|
|
|
12306
12307
|
const leftDoubleArrowIcon = {
|
|
@@ -12694,8 +12695,9 @@ function getOppositeAxis(axis) {
|
|
|
12694
12695
|
function getAxisLength(axis) {
|
|
12695
12696
|
return axis === 'y' ? 'height' : 'width';
|
|
12696
12697
|
}
|
|
12698
|
+
const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
|
|
12697
12699
|
function getSideAxis(placement) {
|
|
12698
|
-
return
|
|
12700
|
+
return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
|
|
12699
12701
|
}
|
|
12700
12702
|
function getAlignmentAxis(placement) {
|
|
12701
12703
|
return getOppositeAxis(getSideAxis(placement));
|
|
@@ -12720,19 +12722,19 @@ function getExpandedPlacements(placement) {
|
|
|
12720
12722
|
function getOppositeAlignmentPlacement(placement) {
|
|
12721
12723
|
return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
|
|
12722
12724
|
}
|
|
12725
|
+
const lrPlacement = ['left', 'right'];
|
|
12726
|
+
const rlPlacement = ['right', 'left'];
|
|
12727
|
+
const tbPlacement = ['top', 'bottom'];
|
|
12728
|
+
const btPlacement = ['bottom', 'top'];
|
|
12723
12729
|
function getSideList(side, isStart, rtl) {
|
|
12724
|
-
const lr = ['left', 'right'];
|
|
12725
|
-
const rl = ['right', 'left'];
|
|
12726
|
-
const tb = ['top', 'bottom'];
|
|
12727
|
-
const bt = ['bottom', 'top'];
|
|
12728
12730
|
switch (side) {
|
|
12729
12731
|
case 'top':
|
|
12730
12732
|
case 'bottom':
|
|
12731
|
-
if (rtl) return isStart ?
|
|
12732
|
-
return isStart ?
|
|
12733
|
+
if (rtl) return isStart ? rlPlacement : lrPlacement;
|
|
12734
|
+
return isStart ? lrPlacement : rlPlacement;
|
|
12733
12735
|
case 'left':
|
|
12734
12736
|
case 'right':
|
|
12735
|
-
return isStart ?
|
|
12737
|
+
return isStart ? tbPlacement : btPlacement;
|
|
12736
12738
|
default:
|
|
12737
12739
|
return [];
|
|
12738
12740
|
}
|
|
@@ -13259,7 +13261,7 @@ const flip$1 = function (options) {
|
|
|
13259
13261
|
if (!ignoreCrossAxisOverflow ||
|
|
13260
13262
|
// We leave the current main axis only if every placement on that axis
|
|
13261
13263
|
// overflows the main axis.
|
|
13262
|
-
overflowsData.every(d => d.overflows[0] > 0
|
|
13264
|
+
overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
|
|
13263
13265
|
// Try next placement and re-run the lifecycle.
|
|
13264
13266
|
return {
|
|
13265
13267
|
data: {
|
|
@@ -13516,6 +13518,8 @@ const inline$1 = function (options) {
|
|
|
13516
13518
|
};
|
|
13517
13519
|
};
|
|
13518
13520
|
|
|
13521
|
+
const originSides = /*#__PURE__*/new Set(['left', 'top']);
|
|
13522
|
+
|
|
13519
13523
|
// For type backwards-compatibility, the `OffsetOptions` type was also
|
|
13520
13524
|
// Derivable.
|
|
13521
13525
|
|
|
@@ -13529,7 +13533,7 @@ async function convertValueToCoords(state, options) {
|
|
|
13529
13533
|
const side = getSide(placement);
|
|
13530
13534
|
const alignment = getAlignment(placement);
|
|
13531
13535
|
const isVertical = getSideAxis(placement) === 'y';
|
|
13532
|
-
const mainAxisMulti =
|
|
13536
|
+
const mainAxisMulti = originSides.has(side) ? -1 : 1;
|
|
13533
13537
|
const crossAxisMulti = rtl && isVertical ? -1 : 1;
|
|
13534
13538
|
const rawValue = evaluate(options, state);
|
|
13535
13539
|
|
|
@@ -13729,7 +13733,7 @@ const limitShift = function (options) {
|
|
|
13729
13733
|
if (checkCrossAxis) {
|
|
13730
13734
|
var _middlewareData$offse, _middlewareData$offse2;
|
|
13731
13735
|
const len = mainAxis === 'y' ? 'width' : 'height';
|
|
13732
|
-
const isOriginSide =
|
|
13736
|
+
const isOriginSide = originSides.has(getSide(placement));
|
|
13733
13737
|
const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
|
|
13734
13738
|
const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
|
|
13735
13739
|
if (crossAxisCoord < limitMin) {
|
|
@@ -13874,34 +13878,40 @@ function isShadowRoot(value) {
|
|
|
13874
13878
|
}
|
|
13875
13879
|
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
|
13876
13880
|
}
|
|
13881
|
+
const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
|
|
13877
13882
|
function isOverflowElement(element) {
|
|
13878
13883
|
const {
|
|
13879
13884
|
overflow,
|
|
13880
13885
|
overflowX,
|
|
13881
13886
|
overflowY,
|
|
13882
13887
|
display
|
|
13883
|
-
} = getComputedStyle(element);
|
|
13884
|
-
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !
|
|
13888
|
+
} = getComputedStyle$1(element);
|
|
13889
|
+
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
|
|
13885
13890
|
}
|
|
13891
|
+
const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
|
|
13886
13892
|
function isTableElement(element) {
|
|
13887
|
-
return
|
|
13893
|
+
return tableElements.has(getNodeName(element));
|
|
13888
13894
|
}
|
|
13895
|
+
const topLayerSelectors = [':popover-open', ':modal'];
|
|
13889
13896
|
function isTopLayer(element) {
|
|
13890
|
-
return
|
|
13897
|
+
return topLayerSelectors.some(selector => {
|
|
13891
13898
|
try {
|
|
13892
13899
|
return element.matches(selector);
|
|
13893
|
-
} catch (
|
|
13900
|
+
} catch (_e) {
|
|
13894
13901
|
return false;
|
|
13895
13902
|
}
|
|
13896
13903
|
});
|
|
13897
13904
|
}
|
|
13905
|
+
const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
|
|
13906
|
+
const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
|
|
13907
|
+
const containValues = ['paint', 'layout', 'strict', 'content'];
|
|
13898
13908
|
function isContainingBlock(elementOrCss) {
|
|
13899
13909
|
const webkit = isWebKit();
|
|
13900
|
-
const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
|
|
13910
|
+
const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
|
|
13901
13911
|
|
|
13902
13912
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
13903
13913
|
// https://drafts.csswg.org/css-transforms-2/#individual-transforms
|
|
13904
|
-
return
|
|
13914
|
+
return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
|
|
13905
13915
|
}
|
|
13906
13916
|
function getContainingBlock(element) {
|
|
13907
13917
|
let currentNode = getParentNode(element);
|
|
@@ -13919,10 +13929,11 @@ function isWebKit() {
|
|
|
13919
13929
|
if (typeof CSS === 'undefined' || !CSS.supports) return false;
|
|
13920
13930
|
return CSS.supports('-webkit-backdrop-filter', 'none');
|
|
13921
13931
|
}
|
|
13932
|
+
const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
|
|
13922
13933
|
function isLastTraversableNode(node) {
|
|
13923
|
-
return
|
|
13934
|
+
return lastTraversableNodeNames.has(getNodeName(node));
|
|
13924
13935
|
}
|
|
13925
|
-
function getComputedStyle(element) {
|
|
13936
|
+
function getComputedStyle$1(element) {
|
|
13926
13937
|
return getWindow(element).getComputedStyle(element);
|
|
13927
13938
|
}
|
|
13928
13939
|
function getNodeScroll(element) {
|
|
@@ -13984,7 +13995,7 @@ function getFrameElement(win) {
|
|
|
13984
13995
|
}
|
|
13985
13996
|
|
|
13986
13997
|
function getCssDimensions(element) {
|
|
13987
|
-
const css = getComputedStyle(element);
|
|
13998
|
+
const css = getComputedStyle$1(element);
|
|
13988
13999
|
// In testing environments, the `width` and `height` properties are empty
|
|
13989
14000
|
// strings for SVG elements, returning NaN. Fallback to `0` in this case.
|
|
13990
14001
|
let width = parseFloat(css.width) || 0;
|
|
@@ -14089,7 +14100,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
|
|
|
14089
14100
|
while (currentIFrame && offsetParent && offsetWin !== currentWin) {
|
|
14090
14101
|
const iframeScale = getScale(currentIFrame);
|
|
14091
14102
|
const iframeRect = currentIFrame.getBoundingClientRect();
|
|
14092
|
-
const css = getComputedStyle(currentIFrame);
|
|
14103
|
+
const css = getComputedStyle$1(currentIFrame);
|
|
14093
14104
|
const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
|
|
14094
14105
|
const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
|
|
14095
14106
|
x *= iframeScale.x;
|
|
@@ -14120,14 +14131,9 @@ function getWindowScrollBarX(element, rect) {
|
|
|
14120
14131
|
return rect.left + leftScroll;
|
|
14121
14132
|
}
|
|
14122
14133
|
|
|
14123
|
-
function getHTMLOffset(documentElement, scroll
|
|
14124
|
-
if (ignoreScrollbarX === void 0) {
|
|
14125
|
-
ignoreScrollbarX = false;
|
|
14126
|
-
}
|
|
14134
|
+
function getHTMLOffset(documentElement, scroll) {
|
|
14127
14135
|
const htmlRect = documentElement.getBoundingClientRect();
|
|
14128
|
-
const x = htmlRect.left + scroll.scrollLeft - (
|
|
14129
|
-
// RTL <body> scrollbar.
|
|
14130
|
-
getWindowScrollBarX(documentElement, htmlRect));
|
|
14136
|
+
const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
|
|
14131
14137
|
const y = htmlRect.top + scroll.scrollTop;
|
|
14132
14138
|
return {
|
|
14133
14139
|
x,
|
|
@@ -14166,7 +14172,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
|
14166
14172
|
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
14167
14173
|
}
|
|
14168
14174
|
}
|
|
14169
|
-
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll
|
|
14175
|
+
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
14170
14176
|
return {
|
|
14171
14177
|
width: rect.width * scale.x,
|
|
14172
14178
|
height: rect.height * scale.y,
|
|
@@ -14189,7 +14195,7 @@ function getDocumentRect(element) {
|
|
|
14189
14195
|
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
|
|
14190
14196
|
let x = -scroll.scrollLeft + getWindowScrollBarX(element);
|
|
14191
14197
|
const y = -scroll.scrollTop;
|
|
14192
|
-
if (getComputedStyle(body).direction === 'rtl') {
|
|
14198
|
+
if (getComputedStyle$1(body).direction === 'rtl') {
|
|
14193
14199
|
x += max(html.clientWidth, body.clientWidth) - width;
|
|
14194
14200
|
}
|
|
14195
14201
|
return {
|
|
@@ -14200,6 +14206,10 @@ function getDocumentRect(element) {
|
|
|
14200
14206
|
};
|
|
14201
14207
|
}
|
|
14202
14208
|
|
|
14209
|
+
// Safety check: ensure the scrollbar space is reasonable in case this
|
|
14210
|
+
// calculation is affected by unusual styles.
|
|
14211
|
+
// Most scrollbars leave 15-18px of space.
|
|
14212
|
+
const SCROLLBAR_MAX = 25;
|
|
14203
14213
|
function getViewportRect(element, strategy) {
|
|
14204
14214
|
const win = getWindow(element);
|
|
14205
14215
|
const html = getDocumentElement(element);
|
|
@@ -14217,6 +14227,24 @@ function getViewportRect(element, strategy) {
|
|
|
14217
14227
|
y = visualViewport.offsetTop;
|
|
14218
14228
|
}
|
|
14219
14229
|
}
|
|
14230
|
+
const windowScrollbarX = getWindowScrollBarX(html);
|
|
14231
|
+
// <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
|
|
14232
|
+
// visual width of the <html> but this is not considered in the size
|
|
14233
|
+
// of `html.clientWidth`.
|
|
14234
|
+
if (windowScrollbarX <= 0) {
|
|
14235
|
+
const doc = html.ownerDocument;
|
|
14236
|
+
const body = doc.body;
|
|
14237
|
+
const bodyStyles = getComputedStyle(body);
|
|
14238
|
+
const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
|
|
14239
|
+
const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
|
|
14240
|
+
if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
|
|
14241
|
+
width -= clippingStableScrollbarWidth;
|
|
14242
|
+
}
|
|
14243
|
+
} else if (windowScrollbarX <= SCROLLBAR_MAX) {
|
|
14244
|
+
// If the <body> scrollbar is on the left, the width needs to be extended
|
|
14245
|
+
// by the scrollbar amount so there isn't extra space on the right.
|
|
14246
|
+
width += windowScrollbarX;
|
|
14247
|
+
}
|
|
14220
14248
|
return {
|
|
14221
14249
|
width,
|
|
14222
14250
|
height,
|
|
@@ -14225,6 +14253,7 @@ function getViewportRect(element, strategy) {
|
|
|
14225
14253
|
};
|
|
14226
14254
|
}
|
|
14227
14255
|
|
|
14256
|
+
const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
|
|
14228
14257
|
// Returns the inner client rect, subtracting scrollbars if present.
|
|
14229
14258
|
function getInnerBoundingClientRect(element, strategy) {
|
|
14230
14259
|
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
|
|
@@ -14266,7 +14295,7 @@ function hasFixedPositionAncestor(element, stopNode) {
|
|
|
14266
14295
|
if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
|
|
14267
14296
|
return false;
|
|
14268
14297
|
}
|
|
14269
|
-
return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
|
|
14298
|
+
return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
|
|
14270
14299
|
}
|
|
14271
14300
|
|
|
14272
14301
|
// A "clipping ancestor" is an `overflow` element with the characteristic of
|
|
@@ -14279,17 +14308,17 @@ function getClippingElementAncestors(element, cache) {
|
|
|
14279
14308
|
}
|
|
14280
14309
|
let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
|
|
14281
14310
|
let currentContainingBlockComputedStyle = null;
|
|
14282
|
-
const elementIsFixed = getComputedStyle(element).position === 'fixed';
|
|
14311
|
+
const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
|
|
14283
14312
|
let currentNode = elementIsFixed ? getParentNode(element) : element;
|
|
14284
14313
|
|
|
14285
14314
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
14286
14315
|
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
14287
|
-
const computedStyle = getComputedStyle(currentNode);
|
|
14316
|
+
const computedStyle = getComputedStyle$1(currentNode);
|
|
14288
14317
|
const currentNodeIsContaining = isContainingBlock(currentNode);
|
|
14289
14318
|
if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
|
|
14290
14319
|
currentContainingBlockComputedStyle = null;
|
|
14291
14320
|
}
|
|
14292
|
-
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle &&
|
|
14321
|
+
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
|
14293
14322
|
if (shouldDropCurrentNode) {
|
|
14294
14323
|
// Drop non-containing blocks.
|
|
14295
14324
|
result = result.filter(ancestor => ancestor !== currentNode);
|
|
@@ -14385,11 +14414,11 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
14385
14414
|
}
|
|
14386
14415
|
|
|
14387
14416
|
function isStaticPositioned(element) {
|
|
14388
|
-
return getComputedStyle(element).position === 'static';
|
|
14417
|
+
return getComputedStyle$1(element).position === 'static';
|
|
14389
14418
|
}
|
|
14390
14419
|
|
|
14391
14420
|
function getTrueOffsetParent(element, polyfill) {
|
|
14392
|
-
if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
|
|
14421
|
+
if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
|
|
14393
14422
|
return null;
|
|
14394
14423
|
}
|
|
14395
14424
|
if (polyfill) {
|
|
@@ -14450,7 +14479,7 @@ const getElementRects = async function (data) {
|
|
|
14450
14479
|
};
|
|
14451
14480
|
|
|
14452
14481
|
function isRTL(element) {
|
|
14453
|
-
return getComputedStyle(element).direction === 'rtl';
|
|
14482
|
+
return getComputedStyle$1(element).direction === 'rtl';
|
|
14454
14483
|
}
|
|
14455
14484
|
|
|
14456
14485
|
const platform = {
|
|
@@ -14835,7 +14864,7 @@ class KolPopover {
|
|
|
14835
14864
|
});
|
|
14836
14865
|
}
|
|
14837
14866
|
render() {
|
|
14838
|
-
return (hAsync(Host, { key: '
|
|
14867
|
+
return (hAsync(Host, { key: '7e8b70752711f74fe8e7a53588a178df9817ad70', ref: this.catchHostAndTriggerElement, class: "kol-popover" }, hAsync("div", { key: 'd3f0349db15c6cc2cce0535cf19a73d583e2782a', class: { popover: true, show: this.state._visible }, ref: this.catchPopoverElement, hidden: !this.state._show }, hAsync("div", { key: 'cd18e5bf5d0e99c242729e873fba3f39a0f40ab9', class: `arrow ${this.state._align}`, ref: this.catchArrowElement }), hAsync("slot", { key: '1c77cad7f872746e56215a5e43508ed724e07545' }))));
|
|
14839
14868
|
}
|
|
14840
14869
|
validateAlign(value) {
|
|
14841
14870
|
validateAlign(this, value);
|
|
@@ -14872,7 +14901,7 @@ class KolPopover {
|
|
|
14872
14901
|
}; }
|
|
14873
14902
|
}
|
|
14874
14903
|
|
|
14875
|
-
const defaultStyleCss$g = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
14904
|
+
const defaultStyleCss$g = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 :is(a, button) {\n display: inline-flex;\n place-items: center;\n text-align: center;\n text-decoration-line: none;\n }\n :is(a, button)::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n /* TODO: Why we need this? */\n :is(a, button) > .kol-span-wc {\n width: 100%;\n margin: auto;\n }\n}\n@layer kol-component {\n .kol-popover-button__button {\n display: inline-block;\n }\n .kol-popover-button__popover {\n margin: 0;\n padding: 0;\n border: 1px solid #000;\n }\n}";
|
|
14876
14905
|
var KolPopoverButtonDefaultStyle0 = defaultStyleCss$g;
|
|
14877
14906
|
|
|
14878
14907
|
class KolPopoverButton {
|
|
@@ -14958,11 +14987,11 @@ class KolPopoverButton {
|
|
|
14958
14987
|
(_c = this.cleanupAutoPositioning) === null || _c === void 0 ? void 0 : _c.call(this);
|
|
14959
14988
|
}
|
|
14960
14989
|
render() {
|
|
14961
|
-
return (hAsync("div", { key: '
|
|
14990
|
+
return (hAsync("div", { key: 'b5184948f5ef1b29ba15aa34cf38e70b7a0de1a9', class: "kol-popover-button" }, hAsync(KolButtonWcTag, { key: '534f61b8a8c5f2773fc2f9cb56e7bec9aa160be8', _accessKey: this._accessKey, "_aria-controls": "popover", _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _ariaHasPopup: 'dialog', _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: Object.assign(Object.assign({}, this._on), { onClick: (event, value) => {
|
|
14962
14991
|
var _a, _b;
|
|
14963
14992
|
this.handleButtonClick();
|
|
14964
14993
|
(_b = (_a = this._on) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event, value);
|
|
14965
|
-
} }),
|
|
14994
|
+
} }), _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant, "data-testid": "popover-button", class: clsx('kol-popover-button__button'), ref: (element) => (this.refButton = element) }, hAsync("slot", { key: '56f5385e31fe2ccd6e7942c738f67d7201002c05', name: "expert", slot: "expert" })), hAsync("div", { key: 'ffa83b7b8b654ac70fa99ed014d8575d1bf9fd8f', ref: (element) => (this.refPopover = element), "data-testid": "popover-content", popover: "auto", id: "popover", class: "kol-popover-button__popover" }, hAsync("slot", { key: '22d224ab2a377b22234c49cc2e0bdbe684ba883d' }))));
|
|
14966
14995
|
}
|
|
14967
14996
|
validatePopoverAlign(value) {
|
|
14968
14997
|
validatePopoverAlign(this, value);
|
|
@@ -15011,7 +15040,7 @@ class KolPopoverButton {
|
|
|
15011
15040
|
}; }
|
|
15012
15041
|
}
|
|
15013
15042
|
|
|
15014
|
-
const defaultStyleCss$f = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
15043
|
+
const defaultStyleCss$f = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n .bar {\n display: grid;\n column-gap: 0.05rem;\n align-items: center;\n grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n grid-template-columns: 1fr auto;\n }\n .bar .label {\n grid-column-end: 2;\n grid-area: LABEL;\n }\n .bar svg {\n grid-area: BAR;\n }\n .bar .value {\n grid-area: VALUE;\n text-align: right;\n }\n .bar .unit {\n grid-area: UNIT;\n }\n .bar .border {\n fill: transparent;\n stroke: black;\n }\n .bar .background {\n fill: lightgray;\n stroke: white;\n }\n .bar .progress {\n fill: #0075ff;\n stroke: transparent;\n transition: 250ms ease-in-out 50ms;\n }\n .cycle {\n display: grid;\n align-content: center;\n justify-items: center;\n grid-template-areas: \"ALL\";\n grid-template-columns: auto;\n }\n .cycle > * {\n grid-area: ALL;\n }\n .cycle .text {\n display: flex;\n flex-direction: column;\n justify-content: center;\n font-size: x-small;\n text-align: center;\n }\n .cycle .text * {\n background-color: white;\n }\n .cycle .background {\n fill: transparent;\n stroke: lightgray;\n }\n .cycle .border {\n fill: transparent;\n stroke: black;\n }\n .cycle .whitespace {\n fill: transparent;\n stroke: white;\n }\n .cycle .progress {\n transform: rotate(-90deg);\n transform-origin: 50% 50%;\n fill: transparent;\n stroke: #0075ff;\n transition: 250ms ease-in-out 50ms;\n }\n /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */\n @media (prefers-reduced-motion) {\n .progress {\n transition-delay: 0s;\n transition-duration: 0s;\n }\n }\n}";
|
|
15015
15044
|
var KolProgressDefaultStyle0 = defaultStyleCss$f;
|
|
15016
15045
|
|
|
15017
15046
|
const VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);
|
|
@@ -15053,10 +15082,10 @@ class KolProgress {
|
|
|
15053
15082
|
const isPercentage = this.state._unit === '%';
|
|
15054
15083
|
const liveProgressValue = isPercentage ? `${Math.round((this.state._liveValue / this.state._max) * 100)}%` : this.state._liveValue;
|
|
15055
15084
|
const displayValue = isPercentage ? Math.round((this.state._value / this.state._max) * 100) : this.state._value;
|
|
15056
|
-
return (hAsync(Host, { key: '
|
|
15085
|
+
return (hAsync(Host, { key: '40cfd19bb98f45bab0e984cd5533263ae397ca81', class: "kol-progress" }, hAsync("div", { key: 'd02c4a0efc93f357e93480572e3c8b9c8ebe0d34', "aria-hidden": "true", class: {
|
|
15057
15086
|
cycle: this.state._variant === 'cycle',
|
|
15058
15087
|
bar: this.state._variant === 'bar',
|
|
15059
|
-
} }, this.state._variant === 'bar' && this.state._label && hAsync("div", { key: '
|
|
15088
|
+
} }, this.state._variant === 'bar' && this.state._label && hAsync("div", { key: '06394ca718b3e77e42d58e04e748a0d85568976d', class: "label" }, this.state._label), createProgressSVG(this.state), this.state._variant === 'cycle' && (hAsync("div", { key: '1691419a628760afbf2d8991cf0d4d495d115a91', class: "text" }, this.state._label && hAsync("div", { key: '02518111c4c3f7cd366a09524509304f870f00ee', class: "label" }, this.state._label), hAsync("div", { key: 'f01aecb5e207c0b42c6d79ba93daaa24827b5fe9', class: "value" }, `${displayValue} ${this.state._unit}`))), this.state._variant === 'bar' && (hAsync("div", { key: 'e5857033b14678585e1ba726bfb0169a58e5e6cb', class: "value", style: { width: `${`${(isPercentage ? 100 : this.state._max) + 1}`.length}ch` } }, displayValue)), this.state._variant === 'bar' && hAsync("div", { key: '7a95fb0cf2725e15e3494313533080530c0572ac', class: "unit" }, this.state._unit)), hAsync("progress", { key: '364d42c8be3a71257e0d14b58e8fef2a66bd5415', "aria-busy": this.state._value < this.state._max ? 'true' : 'false', class: "visually-hidden", max: this.state._max, value: this.state._value }), hAsync("span", { key: 'e068255f57d6df6e3a26cd8ab73552937dfebfc4', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, isPercentage ? `${liveProgressValue} %` : `${liveProgressValue} von ${this.state._max} ${this.state._unit}`)));
|
|
15060
15089
|
}
|
|
15061
15090
|
validateLabel(value) {
|
|
15062
15091
|
validateLabel(this, value);
|
|
@@ -15125,7 +15154,7 @@ class KolProgress {
|
|
|
15125
15154
|
}; }
|
|
15126
15155
|
}
|
|
15127
15156
|
|
|
15128
|
-
const defaultStyleCss$e = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
15157
|
+
const defaultStyleCss$e = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n cite,\n figure,\n q + figcaption {\n display: inline;\n margin: 0;\n padding: 0;\n }\n blockquote:before {\n content: open-quote;\n }\n blockquote::after {\n content: close-quote;\n }\n cite:before {\n content: \"—\";\n }\n .block cite:before {\n padding-right: 0.5em;\n }\n .inline cite:before {\n padding: 0.5em;\n }\n}";
|
|
15129
15158
|
var KolQuoteDefaultStyle0 = defaultStyleCss$e;
|
|
15130
15159
|
|
|
15131
15160
|
class KolQuote {
|
|
@@ -15165,9 +15194,9 @@ class KolQuote {
|
|
|
15165
15194
|
}
|
|
15166
15195
|
render() {
|
|
15167
15196
|
const hasExpertSlot = showExpertSlot(this.state._quote);
|
|
15168
|
-
return (hAsync(Host, { key: '
|
|
15197
|
+
return (hAsync(Host, { key: '9b9860e687b3cec1527f758dcd362f8687a66f44', class: "kol-quote" }, hAsync("figure", { key: '1f3197be1bcbc754cd1ad3eb96186f6c7fd495f3', class: {
|
|
15169
15198
|
[this.state._variant]: true,
|
|
15170
|
-
} }, 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: '
|
|
15199
|
+
} }, 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: '5274e285aa6e13b3888b95d901c396ad99b952d2' }, hAsync("cite", { key: '2be67c626d0f904b40da9005362dbad7a0058775' }, hAsync(KolLinkTag, { key: '60b247245e6f7ad8377dd6d106495eaf4157ca67', _href: this.state._href, _label: this.state._label, _target: "_blank" })))))));
|
|
15171
15200
|
}
|
|
15172
15201
|
static get watchers() { return {
|
|
15173
15202
|
"_label": ["validateLabel"],
|
|
@@ -15273,7 +15302,7 @@ class SelectController extends InputIconController {
|
|
|
15273
15302
|
}
|
|
15274
15303
|
}
|
|
15275
15304
|
|
|
15276
|
-
const defaultStyleCss$d = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
15305
|
+
const defaultStyleCss$d = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 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 option,\n select,\n textarea {\n background-color: transparent;\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-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 .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n background-color: white;\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n button:not([role=link]) {\n min-height: auto;\n }\n .input > .kol-icon {\n display: grid;\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n option:checked::before {\n content: \"✓ \";\n }\n}";
|
|
15277
15306
|
var KolSelectDefaultStyle0 = defaultStyleCss$d;
|
|
15278
15307
|
|
|
15279
15308
|
const isSelected = (valueList, optionValue) => {
|
|
@@ -15305,16 +15334,16 @@ class KolSelect {
|
|
|
15305
15334
|
render() {
|
|
15306
15335
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
15307
15336
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
15308
|
-
return (hAsync(Host, { key: '
|
|
15337
|
+
return (hAsync(Host, { key: '21b462515346780c325523c8c55c0d7322b0fc42', class: { 'kol-select': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: '25fd8495fc3622fd6eb3b576163503e52194e4cd', class: {
|
|
15309
15338
|
'hide-label': !!this.state._hideLabel,
|
|
15310
15339
|
select: true,
|
|
15311
|
-
}, _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: '
|
|
15340
|
+
}, _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: '45bb5fb9ca3af07674267472f841eadc229d5fa0', 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("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '66409c5cdab5caf00a390238917bafb10e587ad1', slot: "input" }, hAsync("form", { key: 'fc2f1effeb153c22b5ee77289ec66bfdd1cf17ed', onSubmit: (event) => {
|
|
15312
15341
|
event.preventDefault();
|
|
15313
15342
|
propagateSubmitEventToForm({
|
|
15314
15343
|
form: this.host,
|
|
15315
15344
|
ref: this.selectRef,
|
|
15316
15345
|
});
|
|
15317
|
-
} }, hAsync("input", { key: '
|
|
15346
|
+
} }, hAsync("input", { key: '04b19515fb209a89e8c90be28ff1d136f454f468', type: "submit", hidden: true }), hAsync("select", Object.assign({ key: '675f5c799f0e27bc9fb06d1dd7e1a81dda1de3ff', 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) => {
|
|
15318
15347
|
this.controller.onFacade.onFocus(event);
|
|
15319
15348
|
this.inputHasFocus = true;
|
|
15320
15349
|
}, onBlur: (event) => {
|
|
@@ -15582,7 +15611,7 @@ class SingleSelectController extends InputIconController {
|
|
|
15582
15611
|
}
|
|
15583
15612
|
}
|
|
15584
15613
|
|
|
15585
|
-
const defaultStyleCss$c = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
15614
|
+
const defaultStyleCss$c = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 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 option,\n select,\n textarea {\n background-color: transparent;\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-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 .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n background-color: white;\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n button:not([role=link]) {\n min-height: auto;\n }\n .input > .kol-icon {\n display: grid;\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .single-select {\n position: relative;\n }\n .single-select.disabled, .single-select.disabled * {\n cursor: not-allowed !important;\n }\n .single-select__group {\n display: inline-flex;\n align-items: center;\n }\n .single-select__input {\n flex-grow: 1;\n }\n .single-select__button {\n width: var(--a11y-min-size);\n height: auto;\n }\n .single-select__listbox {\n background-color: white;\n display: block;\n position: absolute;\n z-index: 2;\n max-height: calc((40rem / var(--kolibri-root-font-size, 16)) * var(--visible-options, 5) + (2rem / var(--kolibri-root-font-size, 16))) !important;\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n overflow-y: auto;\n list-style-type: none;\n }\n .single-select__item.highlighted {\n background-color: #f0f0f0;\n }\n .single-select__listbox--cursor-hidden .single-select__item {\n cursor: none !important;\n }\n .single-select__no-results-message {\n display: flex;\n min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n justify-content: center;\n cursor: default;\n }\n}";
|
|
15586
15615
|
var KolSingleSelectDefaultStyle0 = defaultStyleCss$c;
|
|
15587
15616
|
|
|
15588
15617
|
class KolSingleSelect {
|
|
@@ -15606,6 +15635,21 @@ class KolSingleSelect {
|
|
|
15606
15635
|
this._isOpen = false;
|
|
15607
15636
|
this._hasOpened = false;
|
|
15608
15637
|
}
|
|
15638
|
+
createEventWithTarget(type, detail) {
|
|
15639
|
+
const event = new CustomEvent(type, {
|
|
15640
|
+
bubbles: true,
|
|
15641
|
+
detail,
|
|
15642
|
+
});
|
|
15643
|
+
if (this.refInput) {
|
|
15644
|
+
Object.defineProperty(event, 'target', {
|
|
15645
|
+
value: this.refInput,
|
|
15646
|
+
});
|
|
15647
|
+
Object.defineProperty(event, 'currentTarget', {
|
|
15648
|
+
value: this.refInput,
|
|
15649
|
+
});
|
|
15650
|
+
}
|
|
15651
|
+
return event;
|
|
15652
|
+
}
|
|
15609
15653
|
clearSelection() {
|
|
15610
15654
|
if (this.state._disabled) {
|
|
15611
15655
|
return;
|
|
@@ -15616,15 +15660,32 @@ class KolSingleSelect {
|
|
|
15616
15660
|
this._value = emptyValue;
|
|
15617
15661
|
this._inputValue = '';
|
|
15618
15662
|
this._filteredOptions = [...this.state._options];
|
|
15619
|
-
this.
|
|
15620
|
-
|
|
15663
|
+
const inputEvent = this.createEventWithTarget('input', {
|
|
15664
|
+
name: this.state._name,
|
|
15665
|
+
value: emptyValue,
|
|
15666
|
+
});
|
|
15667
|
+
const changeEvent = this.createEventWithTarget('change', {
|
|
15668
|
+
name: this.state._name,
|
|
15669
|
+
value: emptyValue,
|
|
15670
|
+
});
|
|
15671
|
+
this.controller.onFacade.onInput(inputEvent, true, { value: emptyValue });
|
|
15672
|
+
this.controller.onFacade.onChange(changeEvent, { value: emptyValue });
|
|
15621
15673
|
}
|
|
15622
15674
|
}
|
|
15623
15675
|
selectOption(option) {
|
|
15676
|
+
var _a, _b;
|
|
15624
15677
|
this._value = option.value;
|
|
15625
15678
|
this._inputValue = option.label;
|
|
15626
|
-
this.
|
|
15627
|
-
|
|
15679
|
+
const inputEvent = this.createEventWithTarget('input', {
|
|
15680
|
+
name: (_a = this.state._name) !== null && _a !== void 0 ? _a : '',
|
|
15681
|
+
value: option.value,
|
|
15682
|
+
});
|
|
15683
|
+
const changeEvent = this.createEventWithTarget('change', {
|
|
15684
|
+
name: (_b = this.state._name) !== null && _b !== void 0 ? _b : '',
|
|
15685
|
+
value: option.value,
|
|
15686
|
+
});
|
|
15687
|
+
this.controller.onFacade.onInput(inputEvent, false, option.value);
|
|
15688
|
+
this.controller.onFacade.onChange(changeEvent, option.value);
|
|
15628
15689
|
this._filteredOptions = [...this.state._options];
|
|
15629
15690
|
this.controller.setFormAssociatedValue(this._value);
|
|
15630
15691
|
}
|
|
@@ -15685,17 +15746,17 @@ class KolSingleSelect {
|
|
|
15685
15746
|
var _a;
|
|
15686
15747
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
15687
15748
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
15688
|
-
return (hAsync(Host, { key: '
|
|
15749
|
+
return (hAsync(Host, { key: 'dc3138e5d26bf2378a912798f4d74df22b9f40e5', class: "kol-single-select" }, hAsync("div", { key: '0e66657247dd08a547763a40f11d1bd265cca470', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputTag, { key: '3bf80abe04b484fd849936644c4de583ea08160b', _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: '3a27fc72a26d502f5f1a50656e39f81f9c0d9d26', 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("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '287432b2cc43c8536d0b59e9e4495a12227e6916', slot: "input" }, hAsync("div", { key: 'feb7b795dc4a6ab2447167222d9a3973f868a7da', class: "single-select__group" }, hAsync("input", Object.assign({ key: '0269ac20421be08d3bcbcaed90e9537805144265', ref: this.catchRef, class: "single-select__input", "data-testid": "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", autoComplete: "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) => {
|
|
15689
15750
|
this.controller.onFacade.onFocus(event);
|
|
15690
15751
|
this.inputHasFocus = true;
|
|
15691
15752
|
}, onBlur: (event) => {
|
|
15692
15753
|
this.controller.onFacade.onBlur(event);
|
|
15693
15754
|
this.inputHasFocus = false;
|
|
15694
|
-
}, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: '
|
|
15755
|
+
}, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: 'c164fce346fa45496dbfbd00eaf4f233b2dd2d0e', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
|
|
15695
15756
|
var _a;
|
|
15696
15757
|
this.clearSelection();
|
|
15697
15758
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
15698
|
-
}, class: "single-select__delete" })), hAsync("button", { key: '
|
|
15759
|
+
}, class: "single-select__delete" })), hAsync("button", { key: '7789846b0cf22c722d3829e40f1d080c74dbdb35', tabindex: "-1", class: "single-select__button", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '271820f17ac5c260ca3c84d558d50357dad2de11', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: '32a63fa612e7142e4b85ead40ee6ff2edeeae6b2', role: "listbox", class: clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden'), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, 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) => {
|
|
15699
15760
|
if (el)
|
|
15700
15761
|
this.refOptions[index] = el;
|
|
15701
15762
|
}, tabIndex: -1, role: "option", "aria-selected": this._value === option.value ? 'true' : undefined, onClick: (event) => {
|
|
@@ -16063,7 +16124,7 @@ class KolSingleSelect {
|
|
|
16063
16124
|
}; }
|
|
16064
16125
|
}
|
|
16065
16126
|
|
|
16066
|
-
const defaultStyleCss$b = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
16127
|
+
const defaultStyleCss$b = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n ul {\n display: grid;\n place-items: center;\n list-style: none;\n }\n ul li {\n height: 0;\n }\n .kol-link-wc a {\n position: absolute;\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n z-index: 9999999;\n line-height: 1;\n }\n .kol-link-wc a:focus {\n background-color: #fff;\n position: unset;\n left: unset;\n }\n}";
|
|
16067
16128
|
var KolSkipNavDefaultStyle0 = defaultStyleCss$b;
|
|
16068
16129
|
|
|
16069
16130
|
class KolSkipNav {
|
|
@@ -16077,7 +16138,7 @@ class KolSkipNav {
|
|
|
16077
16138
|
};
|
|
16078
16139
|
}
|
|
16079
16140
|
render() {
|
|
16080
|
-
return (hAsync(Host, { key: '
|
|
16141
|
+
return (hAsync(Host, { key: 'f29c8a4158c4341821fcad18594cd382ef61ccd9', class: "kol-skip-nav" }, hAsync("nav", { key: 'e747f5e6fe1d2da606d507983e008657f57dcede', "aria-label": this.state._label }, hAsync("ul", { key: '719ba2c745ee86290bb2f232a6c09610059f86b2' }, this.state._links.map((link, index) => {
|
|
16081
16142
|
return (hAsync("li", { key: index }, hAsync(KolLinkWcTag, Object.assign({}, link))));
|
|
16082
16143
|
})))));
|
|
16083
16144
|
}
|
|
@@ -24465,10 +24526,10 @@ class KolSpanWc {
|
|
|
24465
24526
|
render() {
|
|
24466
24527
|
var _a, _b, _c, _d, _e;
|
|
24467
24528
|
const hideExpertSlot = !showExpertSlot(this.state._label);
|
|
24468
|
-
return (hAsync(Host, { key: '
|
|
24529
|
+
return (hAsync(Host, { key: '1c81bde23a1687bd224a0897178dc618bfdd9384', class: {
|
|
24469
24530
|
'kol-span-wc': true,
|
|
24470
24531
|
'hide-label': !!this.state._hideLabel,
|
|
24471
|
-
} }, this.state._icons.top && (hAsync(KolIconTag, { key: '
|
|
24532
|
+
} }, this.state._icons.top && (hAsync(KolIconTag, { key: '0db4731b92b5c596bdf59b6ec59c535e73688642', class: "icon top", style: this.state._icons.top.style, _label: (_a = this.state._icons.top.label) !== null && _a !== void 0 ? _a : '', _icons: this.state._icons.top.icon })), hAsync("span", { key: 'd87f9ee64a1598f52aa3bcfb6e37a84bea8dbad2' }, this.state._icons.left && (hAsync(KolIconTag, { key: 'a9f8de1be8ea0d41e3d0d8ea06c76c5a45eae935', class: "icon left", style: this.state._icons.left.style, _label: (_b = this.state._icons.left.label) !== null && _b !== void 0 ? _b : '', _icons: this.state._icons.left.icon })), !this.state._hideLabel && hideExpertSlot ? (this.state._allowMarkdown && typeof this.state._label === 'string' && this.state._label.length > 0 ? (hAsync("span", { class: "span-label md", innerHTML: md(this.state._label) })) : (hAsync("span", { class: "span-label" }, this.state._badgeText && this.state._label.length ? (hAsync(InternalUnderlinedBadgeText, { label: this.state._label, badgeText: this.state._badgeText })) : (((_c = this.state._label) !== null && _c !== void 0 ? _c : ''))))) : (''), hAsync("span", { key: 'b3ae60fc0f3a15fb84f2ec97e29109ff2868a583', "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { key: '2d2ae3b631f70959149e600d8a23442c342a572b', name: "expert" })), this.state._badgeText && (hAsync("kbd", { key: '2807b5d053353b3e8f3550f56f1eee5739d93630', class: "badge-text-hint", "aria-hidden": "true" }, this.state._badgeText)), this.state._icons.right && (hAsync(KolIconTag, { key: '2756a1601c3f31c879766ba459a9d94c3cea255d', class: "icon right", style: this.state._icons.right.style, _label: (_d = this.state._icons.right.label) !== null && _d !== void 0 ? _d : '', _icons: this.state._icons.right.icon }))), this.state._icons.bottom && (hAsync(KolIconTag, { key: '4159940aa02d19d730a58623b9e6ee015d787a93', class: "icon bottom", style: this.state._icons.bottom.style, _label: (_e = this.state._icons.bottom.label) !== null && _e !== void 0 ? _e : '', _icons: this.state._icons.bottom.icon }))));
|
|
24472
24533
|
}
|
|
24473
24534
|
validateBadgeText(value) {
|
|
24474
24535
|
validateBadgeText(this, value);
|
|
@@ -24522,7 +24583,7 @@ class KolSpanWc {
|
|
|
24522
24583
|
}; }
|
|
24523
24584
|
}
|
|
24524
24585
|
|
|
24525
|
-
const defaultStyleCss$a = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
24586
|
+
const defaultStyleCss$a = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n .spin.cycle {\n width: calc(48rem / var(--kolibri-root-font-size, 16));\n height: calc(48rem / var(--kolibri-root-font-size, 16));\n }\n .spin.cycle > .loader {\n border-radius: 50%;\n display: block;\n position: relative;\n width: 100%;\n height: 100%;\n animation: 2s linear infinite rotate;\n }\n .spin.cycle > .loader::before {\n border-radius: 50%;\n position: absolute;\n inset: 0;\n content: \"\";\n animation: 3s linear infinite prixClipFix;\n border: 5px solid #333;\n }\n @keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n @keyframes prixClipFix {\n 0% {\n border-color: #fff;\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n 25% {\n border-color: #666;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n }\n 50% {\n border-color: #000;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n }\n 75% {\n border-color: #000;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n }\n 100% {\n border-color: #000;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n }\n /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n @media (prefers-reduced-motion) {\n .spin.cycle > .loader {\n animation-duration: 4s;\n }\n .spin.cycle > .loader::before {\n animation-duration: 6s;\n }\n }\n}\n@layer kol-component {\n .spin.dot {\n width: calc(48rem / var(--kolibri-root-font-size, 16));\n height: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span {\n border-radius: 50%;\n position: absolute;\n top: calc(0.16rem / var(--kolibri-root-font-size, 16));\n width: calc(12.8rem / var(--kolibri-root-font-size, 16));\n height: calc(12.8rem / var(--kolibri-root-font-size, 16));\n animation-timing-function: cubic-bezier(0, 1, 1, 0);\n border: 0.16px solid #fff;\n }\n .spin.dot > span:first-child {\n background-color: #000;\n left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n z-index: 0;\n animation: 1s infinite spin1;\n }\n .spin.dot > span:nth-child(2) {\n background-color: #000;\n left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n z-index: 1;\n animation: 1s infinite spin2;\n }\n .spin.dot > span:nth-child(3) {\n background-color: #000;\n left: calc(17.6rem / var(--kolibri-root-font-size, 16));\n z-index: 1;\n animation: 1s infinite spin2;\n }\n .spin.dot > span:nth-child(4) {\n background-color: #666;\n left: calc(33.6rem / var(--kolibri-root-font-size, 16));\n z-index: 0;\n animation: 1s infinite spin3;\n }\n @keyframes spin1 {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n }\n @keyframes spin2 {\n 0% {\n transform: translate(0, 0);\n }\n 100% {\n transform: translate(calc(16rem / var(--kolibri-root-font-size, 16)), 0);\n }\n }\n @keyframes spin3 {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n }\n /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n @media (prefers-reduced-motion) {\n .spin.dot > span:first-child,\n .spin.dot > span:nth-child(2),\n .spin.dot > span:nth-child(3),\n .spin.dot > span:nth-child(4) {\n animation-duration: 2s;\n }\n }\n}\n@layer kol-component {\n .spin {\n display: block;\n position: relative;\n padding: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
24526
24587
|
var KolSpinDefaultStyle0 = defaultStyleCss$a;
|
|
24527
24588
|
|
|
24528
24589
|
function renderSpin(variant) {
|
|
@@ -24546,7 +24607,7 @@ class KolSpin {
|
|
|
24546
24607
|
};
|
|
24547
24608
|
}
|
|
24548
24609
|
render() {
|
|
24549
|
-
return (hAsync(Host, { key: '
|
|
24610
|
+
return (hAsync(Host, { key: '7aa382d1c2db4fb643edd0c3ee846e4a4d4b01e9', class: "kol-spin" }, this.state._show ? (hAsync("span", { "aria-busy": "true", "aria-label": translate('kol-action-running'), "aria-live": "polite", class: {
|
|
24550
24611
|
spin: true,
|
|
24551
24612
|
[this.state._variant]: true,
|
|
24552
24613
|
}, role: "alert" }, renderSpin(this.state._variant))) : (this.showToggled && hAsync("span", { "aria-label": translate('kol-action-done'), "aria-busy": "false", "aria-live": "polite", role: "alert" }))));
|
|
@@ -24583,7 +24644,7 @@ class KolSpin {
|
|
|
24583
24644
|
}; }
|
|
24584
24645
|
}
|
|
24585
24646
|
|
|
24586
|
-
const defaultStyleCss$9 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
24647
|
+
const defaultStyleCss$9 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n .kol-popover {\n position: absolute;\n height: 0;\n }\n .kol-popover .popover {\n opacity: 0;\n background-color: #fff;\n position: absolute;\n min-width: max-content;\n min-height: max-content;\n }\n .kol-popover .show {\n animation: 0.3s ease-in forwards fadeInOpacity;\n }\n .kol-popover .disappear {\n animation: 0.3s ease-in backwards fadeInOpacity;\n }\n .kol-popover .arrow {\n rotate: 0.125turn;\n background-color: inherit;\n position: absolute;\n z-index: -1;\n width: var(--font-size);\n height: var(--font-size);\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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: flex;\n position: relative;\n }\n .split-button-root {\n display: flex;\n position: relative;\n }\n .main-button {\n flex-grow: 1;\n text-align: left;\n }\n .kol-popover .popover {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-popover .arrow {\n display: none;\n }\n}";
|
|
24587
24648
|
var KolSplitButtonDefaultStyle0 = defaultStyleCss$9;
|
|
24588
24649
|
|
|
24589
24650
|
class KolSplitButton {
|
|
@@ -24631,10 +24692,10 @@ class KolSplitButton {
|
|
|
24631
24692
|
}
|
|
24632
24693
|
render() {
|
|
24633
24694
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
24634
|
-
return (hAsync(Host, { key: '
|
|
24695
|
+
return (hAsync(Host, { key: '6bad884cb6a50ad50b50684412c2a24a61cc0bb1', class: "kol-split-button" }, hAsync("div", { key: '635cf2785fd3742649d31b8eb3dc5d305f085fbb', class: "split-button-root" }, hAsync(KolButtonWcTag, { key: 'c0818c09f47170910d1a29c35e5804a6ea2fe201', class: {
|
|
24635
24696
|
'main-button': true,
|
|
24636
24697
|
button: true,
|
|
24637
|
-
}, _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,
|
|
24698
|
+
}, _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, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: '865de25270e46b3c8847a8e94cd844dfa90ee0e6', class: "horizontal-line" }), hAsync(KolButtonWcTag, { key: '3057a0a5a62b9f7b40a5d14e5f178eba6191d538', class: { 'secondary-button': true, [this._variant]: this._variant !== 'custom' }, _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler, _variant: this._variant })), hAsync(KolPopoverWcTag, { key: 'b3099a04b9c096b8fb5dad08a07f2cd15932f3a6', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: 'd9655a0b796d72a7e3ca664c82bb8ce23171b37c' }))));
|
|
24638
24699
|
}
|
|
24639
24700
|
async closePopup() {
|
|
24640
24701
|
this.handleOnClose();
|
|
@@ -24686,7 +24747,7 @@ class KolSymbol {
|
|
|
24686
24747
|
};
|
|
24687
24748
|
}
|
|
24688
24749
|
render() {
|
|
24689
|
-
return (hAsync(Host, { key: '
|
|
24750
|
+
return (hAsync(Host, { key: '46f7e23a71bbcd39355496d22bc077890943233e', class: "kol-symbol" }, hAsync("span", { key: 'a94cfb6bf9a41f17edfac39a3357a203cbe58588', "aria-label": this.state._label, role: "term" }, this.state._symbol)));
|
|
24690
24751
|
}
|
|
24691
24752
|
validateLabel(value) {
|
|
24692
24753
|
validateLabel(this, value, {
|
|
@@ -24735,7 +24796,7 @@ class KolTable {
|
|
|
24735
24796
|
this._on = undefined;
|
|
24736
24797
|
}
|
|
24737
24798
|
render() {
|
|
24738
|
-
return (hAsync(KolTableStatefulTag, { key: '
|
|
24799
|
+
return (hAsync(KolTableStatefulTag, { key: '58a3df411bde84a518f848d1e88bd39d495f070c', _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 }));
|
|
24739
24800
|
}
|
|
24740
24801
|
static get cmpMeta() { return {
|
|
24741
24802
|
"$flags$": 9,
|
|
@@ -24793,7 +24854,7 @@ var KeyboardKey;
|
|
|
24793
24854
|
KeyboardKey["Space"] = " ";
|
|
24794
24855
|
})(KeyboardKey || (KeyboardKey = {}));
|
|
24795
24856
|
|
|
24796
|
-
const defaultStyleCss$8 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
24857
|
+
const defaultStyleCss$8 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 div.pagination {\n display: grid;\n place-items: center;\n }\n div.pagination .kol-pagination {\n display: flex;\n flex-wrap: wrap;\n }\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 }\n}\n@layer kol-component {\n :host,\n .kol-table-stateless-wc {\n display: block;\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:focus {\n outline: 0 !important;\n }\n .table:has(.focus-element:focus) {\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n .table-sort-button .button {\n color: inherit;\n }\n tbody th,\n th.align-left {\n text-align: left;\n }\n tbody th .table-sort-button .button-inner,\n th.align-left .table-sort-button .button-inner {\n justify-items: start;\n }\n th.align-center {\n text-align: center;\n }\n th.align-center .table-sort-button .button-inner {\n justify-items: center;\n }\n th.align-right {\n text-align: right;\n }\n th.align-right .table-sort-button .button-inner {\n justify-items: end;\n }\n 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 display: flex;\n position: relative;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n .input .icon {\n display: block;\n position: absolute;\n inset: auto;\n z-index: 1;\n }\n .input input {\n border-style: solid;\n margin: 0;\n appearance: none;\n cursor: pointer;\n }\n .input input:before {\n content: \"\";\n }\n .input input[type=checkbox] {\n background-color: rgb(255, 255, 255);\n display: flex;\n position: relative;\n width: calc(var(--a11y-min-size) / 2);\n height: calc(var(--a11y-min-size) / 2);\n border-width: 2px;\n align-items: center;\n justify-content: center;\n line-height: 1.5;\n transition: all 0.5s ease 0s;\n }\n .input input[type=radio] {\n border-radius: 100%;\n display: flex;\n width: 1.5em;\n min-width: 1.5em;\n height: 1.5em;\n min-height: 1.5em;\n padding: 0;\n border-width: 2px;\n }\n .input input[type=radio]:before {\n border-radius: 100%;\n width: 0.75em;\n height: 0.75em;\n margin: auto;\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}";
|
|
24797
24858
|
var KolTableStatefulDefaultStyle0 = defaultStyleCss$8;
|
|
24798
24859
|
|
|
24799
24860
|
const PAGINATION_OPTIONS = [10, 20, 50, 100];
|
|
@@ -25164,7 +25225,7 @@ class KolTableStateful {
|
|
|
25164
25225
|
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) })))),
|
|
25165
25226
|
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) })))),
|
|
25166
25227
|
};
|
|
25167
|
-
return (hAsync(Host, { key: '
|
|
25228
|
+
return (hAsync(Host, { key: 'c10ebdf564f6b55abc7832cb1451dfc590d51638', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: 'e8647828c9d9abf89bfe5971737039d46624bd6e', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
|
|
25168
25229
|
onSort: (_, payload) => {
|
|
25169
25230
|
this.handleSort(payload);
|
|
25170
25231
|
},
|
|
@@ -25212,7 +25273,7 @@ class KolTableStateful {
|
|
|
25212
25273
|
}; }
|
|
25213
25274
|
}
|
|
25214
25275
|
|
|
25215
|
-
const defaultStyleCss$7 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
25276
|
+
const defaultStyleCss$7 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 .kol-table-stateless-wc {\n display: block;\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:focus {\n outline: 0 !important;\n }\n .table:has(.focus-element:focus) {\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n .table-sort-button .button {\n color: inherit;\n }\n tbody th,\n th.align-left {\n text-align: left;\n }\n tbody th .table-sort-button .button-inner,\n th.align-left .table-sort-button .button-inner {\n justify-items: start;\n }\n th.align-center {\n text-align: center;\n }\n th.align-center .table-sort-button .button-inner {\n justify-items: center;\n }\n th.align-right {\n text-align: right;\n }\n th.align-right .table-sort-button .button-inner {\n justify-items: end;\n }\n 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 display: flex;\n position: relative;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n .input .icon {\n display: block;\n position: absolute;\n inset: auto;\n z-index: 1;\n }\n .input input {\n border-style: solid;\n margin: 0;\n appearance: none;\n cursor: pointer;\n }\n .input input:before {\n content: \"\";\n }\n .input input[type=checkbox] {\n background-color: rgb(255, 255, 255);\n display: flex;\n position: relative;\n width: calc(var(--a11y-min-size) / 2);\n height: calc(var(--a11y-min-size) / 2);\n border-width: 2px;\n align-items: center;\n justify-content: center;\n line-height: 1.5;\n transition: all 0.5s ease 0s;\n }\n .input input[type=radio] {\n border-radius: 100%;\n display: flex;\n width: 1.5em;\n min-width: 1.5em;\n height: 1.5em;\n min-height: 1.5em;\n padding: 0;\n border-width: 2px;\n }\n .input input[type=radio]:before {\n border-radius: 100%;\n width: 0.75em;\n height: 0.75em;\n margin: auto;\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}";
|
|
25216
25277
|
var KolTableStatelessDefaultStyle0 = defaultStyleCss$7;
|
|
25217
25278
|
|
|
25218
25279
|
class KolTableStateless$1 {
|
|
@@ -25227,7 +25288,7 @@ class KolTableStateless$1 {
|
|
|
25227
25288
|
this._selection = undefined;
|
|
25228
25289
|
}
|
|
25229
25290
|
render() {
|
|
25230
|
-
return (hAsync(Host, { key: '
|
|
25291
|
+
return (hAsync(Host, { key: '2d25f540b5e5fcac0456fa73c78ef6a9a0e0c88f', class: "kol-table-stateless" }, hAsync(KolTableStatelessWcTag, { key: '041c506989c903ca0121bdc5d04d2ca979fbc5fe', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection })));
|
|
25231
25292
|
}
|
|
25232
25293
|
static get style() { return {
|
|
25233
25294
|
default: KolTableStatelessDefaultStyle0
|
|
@@ -25679,9 +25740,9 @@ class KolTableStateless {
|
|
|
25679
25740
|
render() {
|
|
25680
25741
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
25681
25742
|
this.checkboxRefs = [];
|
|
25682
|
-
return (hAsync(Host, { key: '
|
|
25743
|
+
return (hAsync(Host, { key: '2b6157fe6524a1b8a9bb0ffbaa3f1d8b45ace526', class: "kol-table-stateless-wc" }, hAsync("div", { key: '705c61544f85d1494611470c263aca78f24005fa', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '98354a6a29c89d00ae084b8dc158ef266074211d', style: {
|
|
25683
25744
|
minWidth: this.state._deprecatedMinWidth || this.state._minWidth,
|
|
25684
|
-
} }, hAsync("
|
|
25745
|
+
} }, hAsync("caption", { key: '7ea81e6665972673e57ac3fc10705a3245c3eccb', id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: 'facf8b6f29ba68d94b2d5a99ebc41c40a3ff0f00' }, [
|
|
25685
25746
|
this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) &&
|
|
25686
25747
|
cols.map((cell, colIndex) => {
|
|
25687
25748
|
if (cell.asTd === true) {
|
|
@@ -25701,7 +25762,7 @@ class KolTableStateless {
|
|
|
25701
25762
|
}
|
|
25702
25763
|
})))),
|
|
25703
25764
|
this.renderSpacer('head', this.state._headerCells.horizontal),
|
|
25704
|
-
])), hAsync("tbody", { key: '
|
|
25765
|
+
])), hAsync("tbody", { key: 'ae64fd30e6122d2e09e1a019a9cb6a9e47ba9cf5' }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
|
|
25705
25766
|
}
|
|
25706
25767
|
get host() { return getElement(this); }
|
|
25707
25768
|
static get watchers() { return {
|
|
@@ -25733,7 +25794,7 @@ class KolTableStateless {
|
|
|
25733
25794
|
}; }
|
|
25734
25795
|
}
|
|
25735
25796
|
|
|
25736
|
-
const defaultStyleCss$6 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
25797
|
+
const defaultStyleCss$6 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 > div {\n display: grid;\n }\n .tabs-button-group {\n display: flex;\n flex-wrap: wrap;\n }\n .tabs-button-group button {\n border-bottom-color: transparent;\n display: block;\n border-bottom-style: solid;\n }\n div.grid,\n div[role=tabpanel] {\n height: 100%;\n }\n :host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-right .tabs-button-group {\n order: 2;\n flex-direction: column;\n }\n :host > .tabs-align-right .tabs-button-group .kol-button-wc {\n width: 100%;\n }\n :host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n }\n :host > .tabs-align-left .tabs-button-group {\n order: 0;\n flex-direction: column;\n }\n :host > .tabs-align-left .tabs-button-group .kol-button-wc {\n width: 100%;\n }\n :host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n }\n :host > .tabs-align-bottom .tabs-button-group {\n order: 2;\n }\n :host > .tabs-align-bottom .tabs-button-group > div {\n display: flex;\n margin: 0 1em;\n }\n :host > .tabs-align-bottom .tabs-button-group > div > div:first-child {\n margin: 0 1em 0 0;\n }\n :host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n }\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-top .tabs-button-group > div {\n display: flex;\n }\n :host > .tabs-align-top .tabs-button-group > div > div {\n margin: 0 1em;\n }\n :host > .tabs-align-top .tabs-button-group > div > div:first-child {\n margin: 0 1em 0 0;\n }\n}";
|
|
25737
25798
|
var KolTabsDefaultStyle0 = defaultStyleCss$6;
|
|
25738
25799
|
|
|
25739
25800
|
class KolTabs {
|
|
@@ -25939,11 +26000,11 @@ class KolTabs {
|
|
|
25939
26000
|
} }))));
|
|
25940
26001
|
}
|
|
25941
26002
|
render() {
|
|
25942
|
-
return (hAsync(Host, { key: '
|
|
26003
|
+
return (hAsync(Host, { key: 'a02c752d8022d3dc07d3a0a79041ba56f22ed4e7', class: "kol-tabs" }, hAsync("div", { key: 'e1c4253e3c988ca91585157b68777f0d8768bc92', ref: (el) => {
|
|
25943
26004
|
this.tabPanelsElement = el;
|
|
25944
26005
|
}, class: {
|
|
25945
26006
|
[`tabs-align-${this.state._align}`]: true,
|
|
25946
|
-
} }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
26007
|
+
} }, this.renderButtonGroup(), hAsync("div", { key: 'bca598b8f2a7263c0e330c363a58d41beed85519', class: "tabs-content", ref: this.catchTabPanelHost }))));
|
|
25947
26008
|
}
|
|
25948
26009
|
validateAlign(value) {
|
|
25949
26010
|
validateAlign(this, value);
|
|
@@ -26133,7 +26194,7 @@ class TextareaController extends InputIconController {
|
|
|
26133
26194
|
}
|
|
26134
26195
|
}
|
|
26135
26196
|
|
|
26136
|
-
const defaultStyleCss$5 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
26197
|
+
const defaultStyleCss$5 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 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 option,\n select,\n textarea {\n background-color: transparent;\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-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 .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n background-color: white;\n display: flex;\n align-items: center;\n cursor: pointer;\n }\n button:not([role=link]) {\n min-height: auto;\n }\n .input > .kol-icon {\n display: grid;\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}";
|
|
26137
26198
|
var KolTextareaDefaultStyle0 = defaultStyleCss$5;
|
|
26138
26199
|
|
|
26139
26200
|
const increaseTextareaHeight = (el) => {
|
|
@@ -26160,7 +26221,7 @@ class KolTextarea {
|
|
|
26160
26221
|
render() {
|
|
26161
26222
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
26162
26223
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
26163
|
-
return (hAsync(Host, { key: '
|
|
26224
|
+
return (hAsync(Host, { key: '73f6f705bd540008891cc0c119381114c2daf062', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'cd123118a262a25c544a64351af60c59ea0d6376', class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _currentLengthDebounced: this.state._currentLengthDebounced, _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: 'ecdeb23a4ee2891ffe21d1f19e5b6d1fbf158ee6', 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("kbd", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '527aaa560861374f83daa097fd85ec6cad015058', slot: "input" }, hAsync("textarea", Object.assign({ key: '548cfe5897d300dc405b8a878f209141661214e6', 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) => {
|
|
26164
26225
|
this.controller.onFacade.onFocus(event);
|
|
26165
26226
|
this.inputHasFocus = true;
|
|
26166
26227
|
}, onBlur: (event) => {
|
|
@@ -26418,7 +26479,7 @@ const InternalToast = ({ key, onClose, onRef, toastState }) => {
|
|
|
26418
26479
|
hAsync("div", { ref: onRef }, typeof toastState.toast.description === 'string' ? toastState.toast.description : null))));
|
|
26419
26480
|
};
|
|
26420
26481
|
|
|
26421
|
-
const defaultStyleCss$4 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
26482
|
+
const defaultStyleCss$4 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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-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 display: flex;\n position: fixed;\n z-index: 200;\n flex-direction: column;\n }\n .close-all {\n align-self: flex-end;\n }\n}";
|
|
26422
26483
|
var KolToastContainerDefaultStyle0 = defaultStyleCss$4;
|
|
26423
26484
|
|
|
26424
26485
|
const TRANSITION_TIMEOUT = 300;
|
|
@@ -26481,7 +26542,7 @@ class KolToastContainer {
|
|
|
26481
26542
|
}
|
|
26482
26543
|
}
|
|
26483
26544
|
render() {
|
|
26484
|
-
return (hAsync(Host, { key: '
|
|
26545
|
+
return (hAsync(Host, { key: '2379b9af9edd7d446f13d08d5842c1454fa57cc4', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: 'adde3c113c5d050785d9ac0cc9ec913b9fe8bd2c', _label: translate('kol-toast-close-all'), class: "close-all", _on: {
|
|
26485
26546
|
onClick: () => {
|
|
26486
26547
|
void this.closeAll();
|
|
26487
26548
|
},
|
|
@@ -26504,7 +26565,7 @@ class KolToastContainer {
|
|
|
26504
26565
|
}; }
|
|
26505
26566
|
}
|
|
26506
26567
|
|
|
26507
|
-
const defaultStyleCss$3 = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
26568
|
+
const defaultStyleCss$3 = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n contain: layout;\n }\n .kol-tooltip-wc .tooltip-floating {\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n max-width: 90vw;\n max-height: 90vh;\n visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n color: #000;\n background-color: #fff;\n }\n .kol-tooltip-wc .tooltip-arrow {\n transform: rotate(45deg);\n position: absolute;\n z-index: 999;\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n height: calc(10rem / var(--kolibri-root-font-size, 16));\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 :is(a, button) {\n display: inline-flex;\n place-items: center;\n text-align: center;\n text-decoration-line: none;\n }\n :is(a, button)::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n /* TODO: Why we need this? */\n :is(a, button) > .kol-span-wc {\n width: 100%;\n margin: auto;\n }\n}\n@layer kol-component {\n .toolbar {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: center;\n }\n .toolbar:focus-within {\n outline: 1px solid;\n outline-offset: 2px;\n }\n}";
|
|
26508
26569
|
var KolToolbarDefaultStyle0 = defaultStyleCss$3;
|
|
26509
26570
|
|
|
26510
26571
|
const TOOLBAR_ITEM_TAG_NAME = 'kol-toolbar-item';
|
|
@@ -26522,7 +26583,7 @@ class KolToolbar {
|
|
|
26522
26583
|
const catchRef = (element) => {
|
|
26523
26584
|
element && this.indexToElement.set(index, element);
|
|
26524
26585
|
};
|
|
26525
|
-
return '_href' in element ? (hAsync(KolLinkWcTag, Object.assign({}, element, props, { ref: catchRef
|
|
26586
|
+
return '_href' in element ? (hAsync(KolLinkWcTag, Object.assign({}, element, props, { ref: catchRef }))) : (hAsync(KolButtonWcTag, Object.assign({}, element, props, { ref: catchRef })));
|
|
26526
26587
|
};
|
|
26527
26588
|
this.state = {
|
|
26528
26589
|
_label: '',
|
|
@@ -26533,7 +26594,7 @@ class KolToolbar {
|
|
|
26533
26594
|
this._items = undefined;
|
|
26534
26595
|
}
|
|
26535
26596
|
render() {
|
|
26536
|
-
return (hAsync(Host, { key: '
|
|
26597
|
+
return (hAsync(Host, { key: '1808f491fa7e4c32ce61d5e3c3d152322b37b9fd', class: "kol-toolbar" }, hAsync("div", { key: '91649c03db6ae3aea54ff5ee40c62ea13688c4b8', class: "toolbar", role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem))));
|
|
26537
26598
|
}
|
|
26538
26599
|
validateLabel(value) {
|
|
26539
26600
|
validateLabel(this, value);
|
|
@@ -26731,7 +26792,7 @@ class KolTooltipWc {
|
|
|
26731
26792
|
this.showOrHideTooltip();
|
|
26732
26793
|
}
|
|
26733
26794
|
render() {
|
|
26734
|
-
return (hAsync(Host, { key: '
|
|
26795
|
+
return (hAsync(Host, { key: '499817b8ce171b101e0aa4a5846bf50cceb853f9', class: "kol-tooltip-wc" }, this.state._label !== '' && (hAsync("div", { key: '28f89bc33dfd88fbdaa2ea11ff8be12d1c45df42', class: "tooltip-floating", ref: this.catchTooltipElement }, hAsync("div", { key: '4b84ee6af63868e84015c1ad2e45b96f04845b41', class: "tooltip-area tooltip-arrow", ref: this.catchArrowElement }), hAsync(KolSpanWcTag, { key: '159cbc321c5cc5287aaa83aa75310afe0ad9121e', class: "tooltip-area tooltip-content", id: this.state._id, _badgeText: this._badgeText, _label: this.state._label })))));
|
|
26735
26796
|
}
|
|
26736
26797
|
validateBadgeText(value) {
|
|
26737
26798
|
validateBadgeText(this, value);
|
|
@@ -26800,7 +26861,7 @@ class KolTooltipWc {
|
|
|
26800
26861
|
}; }
|
|
26801
26862
|
}
|
|
26802
26863
|
|
|
26803
|
-
const defaultStyleCss$2 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
26864
|
+
const defaultStyleCss$2 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n .tree ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n .tree:focus-within {\n outline: 1px solid;\n outline-offset: 2px;\n }\n}";
|
|
26804
26865
|
var KolTreeDefaultStyle0 = defaultStyleCss$2;
|
|
26805
26866
|
|
|
26806
26867
|
class KolTree {
|
|
@@ -26809,7 +26870,7 @@ class KolTree {
|
|
|
26809
26870
|
this._label = undefined;
|
|
26810
26871
|
}
|
|
26811
26872
|
render() {
|
|
26812
|
-
return (hAsync(Host, { key: '
|
|
26873
|
+
return (hAsync(Host, { key: '6b25ad63b950d98d5bf377514cf12cd101ad9592', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: 'b70d349db5337b6807f8b33d54e63cdce5d28bdf', _label: this._label }, hAsync("slot", { key: '667e1549bd9198462e3cea90312109c6efae742f' }))));
|
|
26813
26874
|
}
|
|
26814
26875
|
static get style() { return {
|
|
26815
26876
|
default: KolTreeDefaultStyle0
|
|
@@ -26826,7 +26887,7 @@ class KolTree {
|
|
|
26826
26887
|
}; }
|
|
26827
26888
|
}
|
|
26828
26889
|
|
|
26829
|
-
const defaultStyleCss$1 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
26890
|
+
const defaultStyleCss$1 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-component {\n .tree-item {\n --indentation: var(--tree-item-indentation, calc(10rem / var(--kolibri-root-font-size, 16)));\n }\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n .tree-link.first-level > a {\n padding-left: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .tree-link > a {\n display: inline-flex;\n min-height: var(--a11y-min-size);\n padding-right: calc(6rem / var(--kolibri-root-font-size, 16));\n padding-left: max(var(--indentation) * var(--level) + (8rem / var(--kolibri-root-font-size, 16)), 8rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n }\n .tree-link-inner {\n display: flex;\n align-items: center;\n }\n a {\n text-decoration: none;\n }\n a .kol-span-wc {\n place-items: unset;\n }\n .toggle-button,\n .toggle-button-placeholder {\n display: inline-flex;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n }\n .text {\n text-decoration: underline;\n }\n}";
|
|
26830
26891
|
var KolTreeItemDefaultStyle0 = defaultStyleCss$1;
|
|
26831
26892
|
|
|
26832
26893
|
class KolTreeItem {
|
|
@@ -26857,7 +26918,7 @@ class KolTreeItem {
|
|
|
26857
26918
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
26858
26919
|
}
|
|
26859
26920
|
render() {
|
|
26860
|
-
return (hAsync(KolTreeItemWcTag, { key: '
|
|
26921
|
+
return (hAsync(KolTreeItemWcTag, { key: 'ac71a16eae31c12592e557db9a2603705b699eed', class: "kol-tree-item", _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: 'cb4e6844fb0eefc4d38cfbcb8e05878a56eebf5d' })));
|
|
26861
26922
|
}
|
|
26862
26923
|
static get style() { return {
|
|
26863
26924
|
default: KolTreeItemDefaultStyle0
|
|
@@ -26900,13 +26961,13 @@ class KolTreeItemWc {
|
|
|
26900
26961
|
}
|
|
26901
26962
|
render() {
|
|
26902
26963
|
const { _href, _active, _hasChildren, _open, _label } = this.state;
|
|
26903
|
-
return (hAsync(Host, { key: '
|
|
26964
|
+
return (hAsync(Host, { key: '10844c4679cde6b05366172544dbf02bc948d70c', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-item-wc" }, hAsync("li", { key: 'a7da471fabd4f32662471cea460eac72c5d9e72b', class: "tree-item", style: {
|
|
26904
26965
|
'--level': `${this.level}`,
|
|
26905
|
-
} }, hAsync(KolLinkWcTag, { key: '
|
|
26966
|
+
} }, hAsync(KolLinkWcTag, { key: '9fe32ddea2ab88e29f7f30494291e8d48e03b51c', class: {
|
|
26906
26967
|
'tree-link': true,
|
|
26907
26968
|
'first-level': this.level === 0,
|
|
26908
26969
|
active: Boolean(_active),
|
|
26909
|
-
}, _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: '
|
|
26970
|
+
}, _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: 'dbe0d75274599878cf69b313b664353fc39aea60', class: "tree-link-inner", slot: "expert" }, _hasChildren ? (hAsync("span", { class: "toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, hAsync(KolIconTag, { class: "toggle-button-icon", _icons: `codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`, _label: '' }))) : (hAsync("span", { class: "toggle-button-placeholder" })), hAsync("span", { key: '3d3ce0044fff50ed43a144b7c1b19458da654ef0', class: "text" }, _label))), hAsync("ul", { key: 'ff36340e2630cb36a8f1ddd7e1e9deedba400a64', hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: 'a281d64f9c45e5dd6f4dc091d8ec454f872d39a7' })))));
|
|
26910
26971
|
}
|
|
26911
26972
|
validateActive(value) {
|
|
26912
26973
|
validateActive(this, value || false);
|
|
@@ -27011,7 +27072,7 @@ class KolTreeWc {
|
|
|
27011
27072
|
validateLabel(this, value);
|
|
27012
27073
|
}
|
|
27013
27074
|
render() {
|
|
27014
|
-
return (hAsync(Host, { key: '
|
|
27075
|
+
return (hAsync(Host, { key: '62eb62cd49fd84704aeb55de7709742ff0455bb5', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-wc" }, hAsync("nav", { key: '9c71ccabed0d9b3c6df5bdcb294faccb4886a209', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: '29d69c2d37e7b5267832918ce6bdec4c0ba9fbc5', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: '808f40d3c1c0690faf7ed22e1235c085d6191045' })))));
|
|
27015
27076
|
}
|
|
27016
27077
|
static isTreeItem(element) {
|
|
27017
27078
|
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
|
@@ -27197,7 +27258,7 @@ class KolTreeWc {
|
|
|
27197
27258
|
}; }
|
|
27198
27259
|
}
|
|
27199
27260
|
|
|
27200
|
-
const defaultStyleCss = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(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
|
|
27261
|
+
const defaultStyleCss = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n color: black;\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 /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%; /* 100% needed for custom width from outside */\n margin: 0;\n padding: 0;\n border: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* 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 opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}";
|
|
27201
27262
|
var KolVersionDefaultStyle0 = defaultStyleCss;
|
|
27202
27263
|
|
|
27203
27264
|
class KolVersion {
|
|
@@ -27209,7 +27270,7 @@ class KolVersion {
|
|
|
27209
27270
|
};
|
|
27210
27271
|
}
|
|
27211
27272
|
render() {
|
|
27212
|
-
return (hAsync(Host, { key: '
|
|
27273
|
+
return (hAsync(Host, { key: 'afacb2733ad9c0966124bff62ebfe92a6fe65bba', class: "kol-version" }, hAsync(KolBadgeTag, { key: 'ad2e3590dcd428e0928aacedce9226237b616318', _color: "#bec5c9", _icons: {
|
|
27213
27274
|
left: { icon: 'codicon codicon-versions', label: translate('kol-version') },
|
|
27214
27275
|
}, _label: this.state._label })));
|
|
27215
27276
|
}
|