@public-ui/hydrate 4.1.2-rc.1 → 4.1.2-rc.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +279 -430
- package/dist/index.mjs +279 -430
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -146,7 +146,7 @@ function _mergeNamespaces(n, m) {
|
|
|
146
146
|
|
|
147
147
|
const NAMESPACE = 'kolibri';
|
|
148
148
|
const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
|
|
149
|
-
const Env = /* kolibri */ {"kolibriVersion":"4.1.2-rc.
|
|
149
|
+
const Env = /* kolibri */ {"kolibriVersion":"4.1.2-rc.3"};
|
|
150
150
|
|
|
151
151
|
function getDefaultExportFromCjs (x) {
|
|
152
152
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
@@ -2484,10 +2484,6 @@ const validatePopoverAlign = (component, value) => {
|
|
|
2484
2484
|
validateAlignment(component, '_popoverAlign', value);
|
|
2485
2485
|
};
|
|
2486
2486
|
|
|
2487
|
-
const validatePopoverCallbacks = (component, value) => {
|
|
2488
|
-
watchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['PopoverCallbacksPropType {Events.onClose}']), value);
|
|
2489
|
-
};
|
|
2490
|
-
|
|
2491
2487
|
const validateReadOnly = (component, value) => {
|
|
2492
2488
|
watchBoolean(component, '_readOnly', value);
|
|
2493
2489
|
};
|
|
@@ -6026,7 +6022,6 @@ let KolInputNumberTag = 'kol-input-number';
|
|
|
6026
6022
|
let KolLinkTag = 'kol-link';
|
|
6027
6023
|
let KolLinkWcTag = 'kol-link-wc';
|
|
6028
6024
|
let KolPaginationWcTag = 'kol-pagination-wc';
|
|
6029
|
-
let KolPopoverWcTag = 'kol-popover-wc';
|
|
6030
6025
|
let KolPopoverButtonWcTag = 'kol-popover-button-wc';
|
|
6031
6026
|
let KolSelectWcTag = 'kol-select-wc';
|
|
6032
6027
|
let KolTableSettingsWcTag = 'kol-table-settings-wc';
|
|
@@ -6037,7 +6032,7 @@ let KolTreeItemWcTag = 'kol-tree-item-wc';
|
|
|
6037
6032
|
let KolTreeTag = 'kol-tree';
|
|
6038
6033
|
let KolTreeWcTag = 'kol-tree-wc';
|
|
6039
6034
|
|
|
6040
|
-
const defaultStyleCss$N = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=
|
|
6035
|
+
const defaultStyleCss$N = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}";
|
|
6041
6036
|
|
|
6042
6037
|
class KolAbbr {
|
|
6043
6038
|
constructor(hostRef) {
|
|
@@ -6047,7 +6042,7 @@ class KolAbbr {
|
|
|
6047
6042
|
};
|
|
6048
6043
|
}
|
|
6049
6044
|
render() {
|
|
6050
|
-
return (hAsync(Host, { key: '
|
|
6045
|
+
return (hAsync(Host, { key: '94f9682f9dafc4621970a41bc2d713786e066763', class: "kol-abbr" }, hAsync("abbr", { key: 'dcc26a9b0c264ee71a50857f6dad39b62e23454a', tabIndex: this.state._label ? 0 : undefined }, hAsync("slot", { key: '061acba8e7ba7dc6b7895aeeb9e9642650fcf646' })), this.state._label ? hAsync(KolTooltipWcTag, { "aria-hidden": "true", _label: this.state._label }) : null));
|
|
6051
6046
|
}
|
|
6052
6047
|
validateLabel(value) {
|
|
6053
6048
|
validateLabel(this, value);
|
|
@@ -6292,7 +6287,7 @@ const watchHeadingLevel = (component, value) => {
|
|
|
6292
6287
|
validateLevel(component, value);
|
|
6293
6288
|
};
|
|
6294
6289
|
|
|
6295
|
-
const defaultStyleCss$M = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n @media (prefers-reduced-motion) {\n .collapsible__wrapper-animation, .collapsible__wrapper {\n transition: none !important;\n }\n }\n .collapsible {\n /* @see https://github.com/public-ui/kolibri/issues/5952 */\n }\n @media print {\n :not(.collapsible--open) .collapsible__wrapper-animation {\n display: none;\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 grid-template-rows: 0fr;\n transition: grid-template-rows 0.3s;\n }\n .collapsible__wrapper-animation {\n opacity: 0;\n transform: scaleY(0);\n transform-origin: top;\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: transform 0.3s, opacity 0.3s, visibility 0.3s;\n }\n .collapsible--open .collapsible__wrapper {\n grid-template-rows: 1fr;\n }\n .collapsible--open .collapsible__wrapper-animation {\n opacity: 1;\n transform: scaleY(1);\n visibility: visible;\n }\n .collapsible {\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__heading-button button .kol-span {\n align-items: flex-start;\n }\n .collapsible--open:focus-within {\n position: relative;\n z-index: 100;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=
|
|
6290
|
+
const defaultStyleCss$M = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n @media (prefers-reduced-motion) {\n .collapsible__wrapper-animation, .collapsible__wrapper {\n transition: none !important;\n }\n }\n .collapsible {\n /* @see https://github.com/public-ui/kolibri/issues/5952 */\n }\n @media print {\n :not(.collapsible--open) .collapsible__wrapper-animation {\n display: none;\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 grid-template-columns: minmax(0, 1fr);\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.3s;\n }\n .collapsible__wrapper-animation {\n opacity: 0;\n transform: scaleY(0);\n transform-origin: top;\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: transform 0.3s, opacity 0.3s, visibility 0.3s;\n }\n .collapsible--open .collapsible__wrapper {\n grid-template-rows: 1fr;\n }\n .collapsible--open .collapsible__wrapper-animation {\n opacity: 1;\n transform: scaleY(1);\n visibility: visible;\n }\n .collapsible {\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__heading-button button .kol-span {\n align-items: flex-start;\n }\n .collapsible--open:focus-within {\n position: relative;\n z-index: 100;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n}";
|
|
6296
6291
|
|
|
6297
6292
|
featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
|
|
6298
6293
|
|
|
@@ -6352,7 +6347,7 @@ class KolAccordion {
|
|
|
6352
6347
|
animationClass: `${rootClass}__wrapper-animation`,
|
|
6353
6348
|
},
|
|
6354
6349
|
};
|
|
6355
|
-
return (hAsync(KolCollapsibleFc, Object.assign({ key: '
|
|
6350
|
+
return (hAsync(KolCollapsibleFc, Object.assign({ key: '4676e68c1ae6165ff687d998116e432e52fa1b07' }, props), hAsync("slot", { key: '9d4b9607bb6bd6cc4be3d610568c0e7a8072e68f' })));
|
|
6356
6351
|
}
|
|
6357
6352
|
validateDisabled(value) {
|
|
6358
6353
|
validateDisabled(this, value);
|
|
@@ -6407,7 +6402,7 @@ class KolAccordion {
|
|
|
6407
6402
|
}; }
|
|
6408
6403
|
}
|
|
6409
6404
|
|
|
6410
|
-
const defaultStyleCss$L = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
6405
|
+
const defaultStyleCss$L = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
6411
6406
|
|
|
6412
6407
|
class KolAlert {
|
|
6413
6408
|
constructor(hostRef) {
|
|
@@ -6422,7 +6417,7 @@ class KolAlert {
|
|
|
6422
6417
|
};
|
|
6423
6418
|
}
|
|
6424
6419
|
render() {
|
|
6425
|
-
return (hAsync(KolAlertWcTag, { key: '
|
|
6420
|
+
return (hAsync(KolAlertWcTag, { key: '721b696fb334639b5996187b75774aa357e7131c', _alert: this._alert, _hasCloser: this._hasCloser, _label: this._label, _level: this._level, _on: this._on, _type: this._type, _variant: this._variant }, hAsync("slot", { key: '49b4a02832d1ce95880243eaeb88bab7211f8137' })));
|
|
6426
6421
|
}
|
|
6427
6422
|
static get style() { return {
|
|
6428
6423
|
default: defaultStyleCss$L
|
|
@@ -6853,7 +6848,7 @@ class KolAlertWc {
|
|
|
6853
6848
|
onCloserClick: this.close,
|
|
6854
6849
|
onAlertTimeout: this.handleAlertTimeout,
|
|
6855
6850
|
};
|
|
6856
|
-
return (hAsync(KolAlertFc, Object.assign({ key: '
|
|
6851
|
+
return (hAsync(KolAlertFc, Object.assign({ key: '974773e3e6a186d229c03d1b027d755d3adee0b5' }, props), hAsync("slot", { key: '3af99a27b6b0b4a359c064fd80f0f855eb96734d' })));
|
|
6857
6852
|
}
|
|
6858
6853
|
validateAlert(value) {
|
|
6859
6854
|
watchBoolean(this, '_alert', value);
|
|
@@ -10104,7 +10099,7 @@ class KolAvatar extends BaseWebComponent {
|
|
|
10104
10099
|
});
|
|
10105
10100
|
}
|
|
10106
10101
|
render() {
|
|
10107
|
-
return (hAsync(Host, { key: '
|
|
10102
|
+
return (hAsync(Host, { key: '23eea40861c423929e8fd5900ca00a58568dd3c2' }, hAsync(AvatarFC, { key: 'be54606222a6b5fc4f5164d738af2512a4cce600', color: this.ctrl.getRenderProp('color'), label: this.ctrl.getRenderProp('label'), src: this.ctrl.getRenderProp('src'), initials: this.initials })));
|
|
10108
10103
|
}
|
|
10109
10104
|
static get watchers() { return {
|
|
10110
10105
|
"_color": ["watchColor"],
|
|
@@ -19122,7 +19117,7 @@ const SpanFC = (props, children) => {
|
|
|
19122
19117
|
}), classNames) }), renderIcon(top, 'top'), hAsync("span", { class: spanBem('container') }, renderIcon(left, 'left'), hideExpertSlot && renderLabel(label, hideLabel, allowMarkdown, badgeText), hAsync("span", { "aria-hidden": hideExpertSlot ? 'true' : undefined, class: spanBem('label'), hidden: hideExpertSlot }, children), isString$1(badgeText) && badgeText.length > 0 && (hAsync("kbd", { "aria-hidden": "true", class: "badge-text-hint" }, badgeText)), renderIcon(right, 'right')), renderIcon(bottom, 'bottom')));
|
|
19123
19118
|
};
|
|
19124
19119
|
|
|
19125
|
-
const defaultStyleCss$J = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=
|
|
19120
|
+
const defaultStyleCss$J = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-badge {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: inline-flex;\n place-items: center;\n }\n .kol-badge .kol-badge__smart-button .button {\n color: inherit;\n }\n}";
|
|
19126
19121
|
|
|
19127
19122
|
featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
|
|
19128
19123
|
class KolBadge {
|
|
@@ -19157,12 +19152,12 @@ class KolBadge {
|
|
|
19157
19152
|
}
|
|
19158
19153
|
render() {
|
|
19159
19154
|
const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;
|
|
19160
|
-
return (hAsync("span", { key: '
|
|
19155
|
+
return (hAsync("span", { key: '51cd5cfb019f4a9cac5da1fd53f060514387ac81', class: clsx('kol-badge', {
|
|
19161
19156
|
'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
|
|
19162
19157
|
}), style: {
|
|
19163
19158
|
backgroundColor: this.bgColorStr,
|
|
19164
19159
|
color: this.colorStr,
|
|
19165
|
-
} }, hAsync(SpanFC, { key: '
|
|
19160
|
+
} }, hAsync(SpanFC, { key: 'cfa69844cccfca137f2ce5f3629f56da146de086', class: "kol-badge__label", id: hasSmartButton ? this.id : undefined, allowMarkdown: true, icons: this.state._icons, label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton)));
|
|
19166
19161
|
}
|
|
19167
19162
|
validateIcons(value) {
|
|
19168
19163
|
validateIcons(this, value);
|
|
@@ -19233,7 +19228,7 @@ const watchNavLinks = (className, component, value) => {
|
|
|
19233
19228
|
uiUxHintMillerscheZahl(className, component.state._links.length);
|
|
19234
19229
|
};
|
|
19235
19230
|
|
|
19236
|
-
const defaultStyleCss$I = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-link {\n display: inline-flex;\n max-width: fit-content;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-link--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: stretch;\n }\n .kol-link--standalone .kol-link__text {\n display: inline-flex;\n flex: 1 1 100%;\n place-items: center;\n }\n .kol-link .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-breadcrumb__list, .kol-breadcrumb__list-element {\n display: flex;\n margin: 0;\n padding: 0;\n gap: 0.5em; /* @deprecated: do not use gap, margin, padding and so on in basis styling */\n flex-wrap: wrap;\n place-items: center;\n list-style: none;\n }\n .kol-breadcrumb__list-element:first-child:last-child {\n min-height: var(--a11y-min-size);\n }\n}";
|
|
19231
|
+
const defaultStyleCss$I = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-link {\n display: inline-flex;\n max-width: fit-content;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-link--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: stretch;\n }\n .kol-link--standalone .kol-link__text {\n display: inline-flex;\n flex: 1 1 100%;\n place-items: center;\n }\n .kol-link .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-breadcrumb__list, .kol-breadcrumb__list-element {\n display: flex;\n margin: 0;\n padding: 0;\n gap: 0.5em; /* @deprecated: do not use gap, margin, padding and so on in basis styling */\n flex-wrap: wrap;\n place-items: center;\n list-style: none;\n }\n .kol-breadcrumb__list-element:first-child:last-child {\n min-height: var(--a11y-min-size);\n }\n}";
|
|
19237
19232
|
|
|
19238
19233
|
class KolBreadcrumb {
|
|
19239
19234
|
constructor(hostRef) {
|
|
@@ -19248,7 +19243,7 @@ class KolBreadcrumb {
|
|
|
19248
19243
|
};
|
|
19249
19244
|
}
|
|
19250
19245
|
render() {
|
|
19251
|
-
return (hAsync("nav", { key: '
|
|
19246
|
+
return (hAsync("nav", { key: 'bff94e213bc73c24069c1e5aa297aa54b6e98003', class: "kol-breadcrumb", "aria-label": this.state._label }, hAsync("ul", { key: '2100b5df04175f39ebdfab1708100623856c4470', class: "kol-breadcrumb__list" }, this.state._links.length === 0 && (hAsync("li", { key: '3b73286454440609917059e00581d71ed20788d8' }, hAsync(IconFC, { key: '2b20cb24ae17a71c5b0dbeb713d1e32b04660f92', class: "kol-breadcrumb_icon", label: "", icons: "kolicon-house" }), "\u2026")), this.state._links.map(this.renderLink))));
|
|
19252
19247
|
}
|
|
19253
19248
|
validateLabel(value, _oldValue, initial = false) {
|
|
19254
19249
|
if (!initial) {
|
|
@@ -19291,7 +19286,7 @@ class KolBreadcrumb {
|
|
|
19291
19286
|
}; }
|
|
19292
19287
|
}
|
|
19293
19288
|
|
|
19294
|
-
const defaultStyleCss$H = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-button__text {\n flex: 1 0 100%;\n }\n}";
|
|
19289
|
+
const defaultStyleCss$H = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-button__text {\n flex: 1 0 100%;\n }\n}";
|
|
19295
19290
|
|
|
19296
19291
|
class KolButton {
|
|
19297
19292
|
constructor(hostRef) {
|
|
@@ -19314,7 +19309,7 @@ class KolButton {
|
|
|
19314
19309
|
return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
19315
19310
|
}
|
|
19316
19311
|
render() {
|
|
19317
|
-
return (hAsync(KolButtonWcTag, { key: '
|
|
19312
|
+
return (hAsync(KolButtonWcTag, { key: 'd9a97c427bdbfb51b9803526d4450b657b8866c9', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: '32a203c53d953b2b67843a2d9eb7a13e57e8c73d', name: "expert", slot: "expert" })));
|
|
19318
19313
|
}
|
|
19319
19314
|
static get style() { return {
|
|
19320
19315
|
default: defaultStyleCss$H
|
|
@@ -19352,7 +19347,7 @@ class KolButton {
|
|
|
19352
19347
|
}; }
|
|
19353
19348
|
}
|
|
19354
19349
|
|
|
19355
|
-
const defaultStyleCss$G = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-button {\n display: inline-flex;\n max-width: fit-content;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-button--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: stretch;\n }\n .kol-button--standalone .kol-button__text {\n display: inline-flex;\n flex: 1 1 100%;\n place-items: center;\n }\n .kol-button .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-button:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-button:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-button__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--inline {\n min-width: unset;\n min-height: unset;\n }\n}";
|
|
19350
|
+
const defaultStyleCss$G = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-button {\n display: inline-flex;\n max-width: fit-content;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-button--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: stretch;\n }\n .kol-button--standalone .kol-button__text {\n display: inline-flex;\n flex: 1 1 100%;\n place-items: center;\n }\n .kol-button .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-button:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-button:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-button__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--inline {\n min-width: unset;\n min-height: unset;\n }\n}";
|
|
19356
19351
|
|
|
19357
19352
|
class KolButtonLink {
|
|
19358
19353
|
constructor(hostRef) {
|
|
@@ -19374,7 +19369,7 @@ class KolButtonLink {
|
|
|
19374
19369
|
return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
19375
19370
|
}
|
|
19376
19371
|
render() {
|
|
19377
|
-
return (hAsync(KolButtonWcTag, { key: '
|
|
19372
|
+
return (hAsync(KolButtonWcTag, { key: '57e96c9d75c338f2772a58d6f6ec8cc602915d7d', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: 'afb56c33a6023b1ce22b4d68b0e4a96d00794c7c', name: "expert", slot: "expert" })));
|
|
19378
19373
|
}
|
|
19379
19374
|
static get style() { return {
|
|
19380
19375
|
default: defaultStyleCss$G
|
|
@@ -19692,14 +19687,14 @@ class KolButtonWc {
|
|
|
19692
19687
|
const badgeText = this.state._accessKey || this.state._shortKey;
|
|
19693
19688
|
const isDisabled = this.state._disabled === true;
|
|
19694
19689
|
const hideLabel = this.state._hideLabel === true;
|
|
19695
|
-
return (hAsync(Host, { key: '
|
|
19690
|
+
return (hAsync(Host, { key: '9d9147d82979b4a1bca5da16005809aaefb01921' }, hAsync("button", { key: '7e78ab116353e31f2211869ad2ca5887bccea13d', ref: (ref) => (this.buttonRef = ref), accessKey: this.state._accessKey, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-haspopup": this._ariaHasPopup, "aria-keyshortcuts": this.state._shortKey, "aria-label": hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: clsx('kol-button', {
|
|
19696
19691
|
'kol-button--disabled': isDisabled,
|
|
19697
19692
|
[`kol-button--${this.state._variant}`]: this.state._variant !== 'custom',
|
|
19698
19693
|
'kol-button--inline': this.state._inline === true,
|
|
19699
19694
|
'kol-button--standalone': this.state._inline === false,
|
|
19700
19695
|
'kol-button--hide-label': hideLabel,
|
|
19701
19696
|
[this.state._customClass]: typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
19702
|
-
}), disabled: isDisabled, id: this.state._id, name: this.state._name, onClick: this.onClick, onMouseDown: this.onMouseDown, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }, hAsync(SpanFC, { key: '
|
|
19697
|
+
}), disabled: isDisabled, id: this.state._id, name: this.state._name, onClick: this.onClick, onMouseDown: this.onMouseDown, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }, hAsync(SpanFC, { key: 'cfef3ab393862d6a1a160fdbc4c932c0898f0449', class: "kol-button__text", badgeText: badgeText, icons: this.state._icons, hideLabel: hideLabel, label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: '075d2b913b1c8b44fb26cf8ea28e14b38fe5e024', name: "expert", slot: "expert" }))), hideLabel && (hAsync(KolTooltipWcTag, { key: '9470bcf5433e3150118a161287d023ec34de58cc', ref: (ref) => (this.tooltipRef = ref), "aria-hidden": "true", hidden: hasExpertSlot, class: "kol-button__tooltip", _badgeText: badgeText, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' }))));
|
|
19703
19698
|
}
|
|
19704
19699
|
constructor(hostRef) {
|
|
19705
19700
|
registerInstance(this, hostRef);
|
|
@@ -19709,6 +19704,7 @@ class KolButtonWc {
|
|
|
19709
19704
|
};
|
|
19710
19705
|
this.onClick = (event) => {
|
|
19711
19706
|
var _a, _b;
|
|
19707
|
+
event.stopPropagation();
|
|
19712
19708
|
if (this.state._hideLabel) {
|
|
19713
19709
|
void this.hideTooltip();
|
|
19714
19710
|
}
|
|
@@ -19911,7 +19907,7 @@ class KolButtonWc {
|
|
|
19911
19907
|
}; }
|
|
19912
19908
|
}
|
|
19913
19909
|
|
|
19914
|
-
const defaultStyleCss$F = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-card .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-card :host {\n display: inline-block;\n }\n .kol-card .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-card .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-card .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-card {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: grid;\n height: 100%;\n overflow: visible;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-template-areas: \"header close\" \"content content\";\n grid-template-columns: 1fr min-content;\n grid-template-rows: min-content 1fr;\n }\n .kol-card__header {\n align-self: start;\n grid-area: header;\n }\n .kol-card__content {\n align-self: stretch;\n grid-area: content;\n }\n .kol-card__close-button {\n grid-area: close;\n }\n}";
|
|
19910
|
+
const defaultStyleCss$F = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-card .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-card :host {\n display: inline-block;\n }\n .kol-card .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-card .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-card .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-card {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: grid;\n height: 100%;\n overflow: visible;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-template-areas: \"header close\" \"content content\";\n grid-template-columns: 1fr min-content;\n grid-template-rows: min-content 1fr;\n }\n .kol-card__header {\n align-self: start;\n grid-area: header;\n }\n .kol-card__content {\n align-self: stretch;\n grid-area: content;\n }\n .kol-card__close-button {\n grid-area: close;\n }\n}";
|
|
19915
19911
|
|
|
19916
19912
|
class KolCard {
|
|
19917
19913
|
constructor(hostRef) {
|
|
@@ -19920,7 +19916,7 @@ class KolCard {
|
|
|
19920
19916
|
this._level = 0;
|
|
19921
19917
|
}
|
|
19922
19918
|
render() {
|
|
19923
|
-
return (hAsync(KolCardWcTag, { key: '
|
|
19919
|
+
return (hAsync(KolCardWcTag, { key: 'b7e95eac842a1cbcfb328656f17596283f17284a', _on: this._on, _hasCloser: this._hasCloser, _label: this._label, _level: this._level }, hAsync("slot", { key: '7b686b0f83c138ab0d497f9b6a0d7d5927bce63c' })));
|
|
19924
19920
|
}
|
|
19925
19921
|
static get style() { return {
|
|
19926
19922
|
default: defaultStyleCss$F
|
|
@@ -20151,7 +20147,7 @@ class KolCardWc {
|
|
|
20151
20147
|
this.validateOnValue = (value) => typeof value === 'object' && value !== null && typeof value.onClose === 'function';
|
|
20152
20148
|
}
|
|
20153
20149
|
render() {
|
|
20154
|
-
return (hAsync(Host, { key: '
|
|
20150
|
+
return (hAsync(Host, { key: '966222260e4ea29784efa9ef343eb9b3dfff971d' }, hAsync("div", { key: '08b1e2265498c345cbd755dbcaf14ea86d17eb45', "aria-labelledby": this.nonce, class: "kol-card", role: "group" }, hAsync(KolHeadingFc, { key: 'd775b403127b7796b64235786769ad00a9cb973d', class: "kol-card__header", id: this.nonce, level: this.state._level }, this.state._label), hAsync("div", { key: '2d10431104ac7bd40958c9ab4d74ca02b1021cba', class: "kol-card__content" }, hAsync("slot", { key: 'af1e1e716e956b8ad52cae3bbb301582344eddc1' })), this.state._hasCloser && (hAsync(KolButtonWcTag, { key: 'ce4e83cfcb423c823d88218f02a4ee47edf1fb30', class: "kol-card__close-button kol-close-button", "data-testid": "card-close-button", _hideLabel: true, _icons: {
|
|
20155
20151
|
left: {
|
|
20156
20152
|
icon: 'kolicon-cross',
|
|
20157
20153
|
},
|
|
@@ -20256,7 +20252,7 @@ class KolClickButton extends BaseWebComponent {
|
|
|
20256
20252
|
});
|
|
20257
20253
|
}
|
|
20258
20254
|
render() {
|
|
20259
|
-
return (hAsync(Host, { key: '
|
|
20255
|
+
return (hAsync(Host, { key: 'e16c1dedc0a5cd342ae5a68097e4e3d2bd4fb6fc' }, hAsync(ClickButtonFC, { key: 'f78cb40fff887adeeaa54875c4a7b2dbac448091', label: this.ctrl.getRenderProp('label'), refButton: this.ctrl.setButtonRef, handleClick: this.ctrl.handleClick })));
|
|
20260
20256
|
}
|
|
20261
20257
|
static get watchers() { return {
|
|
20262
20258
|
"_label": ["watchLabel"]
|
|
@@ -20763,7 +20759,7 @@ class ComboboxController extends InputIconController {
|
|
|
20763
20759
|
}
|
|
20764
20760
|
}
|
|
20765
20761
|
|
|
20766
|
-
const defaultStyleCss$E = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-option {\n line-height: 1.5;\n white-space: normal;\n cursor: pointer;\n overflow-wrap: break-word;\n }\n .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n cursor: none !important;\n }\n .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n cursor: not-allowed;\n }\n .kol-custom-suggestions-options-group {\n background-color: white;\n display: block;\n position: absolute;\n z-index: 2;\n max-height: calc(250 * 1rem / 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 .kol-input-container:has(.kol-custom-suggestions-options-group--open) {\n z-index: 10;\n }\n .kol-custom-suggestions-toggle {\n display: flex;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: default;\n }\n .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n cursor: not-allowed;\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n display: ruby;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-combobox__delete .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-combobox__delete :host {\n display: inline-block;\n }\n .kol-combobox__delete .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-combobox__delete .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-combobox__delete .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-combobox__delete .kol-button {\n margin-top: -2px;\n margin-bottom: -2px;\n }\n .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n cursor: pointer;\n }\n .kol-custom-suggestions-toggle--disabled {\n opacity: 0.5;\n }\n}";
|
|
20762
|
+
const defaultStyleCss$E = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-option {\n line-height: 1.5;\n white-space: normal;\n cursor: pointer;\n overflow-wrap: break-word;\n }\n .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n cursor: none !important;\n }\n .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n cursor: not-allowed;\n }\n .kol-custom-suggestions-options-group {\n background-color: white;\n display: block;\n position: absolute;\n z-index: 2;\n max-height: calc(250 * 1rem / 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 .kol-input-container:has(.kol-custom-suggestions-options-group--open) {\n z-index: 10;\n }\n .kol-custom-suggestions-toggle {\n display: flex;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: default;\n }\n .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n cursor: not-allowed;\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n flex-flow: row;\n align-items: flex-start;\n justify-content: flex-start;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-combobox__delete .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-combobox__delete :host {\n display: inline-block;\n }\n .kol-combobox__delete .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-combobox__delete .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-combobox__delete .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-combobox__delete .kol-button {\n margin-top: -2px;\n margin-bottom: -2px;\n }\n .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n cursor: pointer;\n }\n .kol-custom-suggestions-toggle--disabled {\n opacity: 0.5;\n }\n}";
|
|
20767
20763
|
|
|
20768
20764
|
class KolCombobox {
|
|
20769
20765
|
async getValue() {
|
|
@@ -20890,13 +20886,13 @@ class KolCombobox {
|
|
|
20890
20886
|
}
|
|
20891
20887
|
render() {
|
|
20892
20888
|
const isDisabled = this.state._disabled === true;
|
|
20893
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
20889
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '1a36f51e4b614079ab3aa5fc35585bc1b4d97652' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '6958192a611238f226ac7711c24e0065eddf7c06', state: this.state }, hAsync("div", { key: 'd36093f03c0018b3de44ca31019d1a04b0e68dbf', class: "kol-combobox__group" }, hAsync(InputStateWrapper, Object.assign({ key: 'f0427c656abb3aeca2b761e90226a8825b8136a7' }, this.getInputProps())), this.state._value && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: 'ebc6797ce70fac0b8da88817eecb97e0400f8576', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "combobox-delete", class: "kol-combobox__delete", hidden: isDisabled, _on: {
|
|
20894
20890
|
onClick: () => {
|
|
20895
20891
|
this.clearSelection();
|
|
20896
20892
|
},
|
|
20897
|
-
} })), hAsync(IconFC, { key: '
|
|
20893
|
+
} })), hAsync(IconFC, { key: '303c9ac2c437347fff9cfc93006ddbe592b8f313', icons: "kolicon-chevron-down", label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
20898
20894
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
20899
|
-
}), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: '
|
|
20895
|
+
}), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: '3f14db638330adacdcc5eb12c8b29892363e07e9', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), hidden: !this._isOpen || isDisabled }, Array.isArray(this._filteredSuggestions) &&
|
|
20900
20896
|
this._filteredSuggestions.length > 0 &&
|
|
20901
20897
|
this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { disabled: false, index: index, option: option, searchTerm: this.state._value, ref: (el) => {
|
|
20902
20898
|
if (el)
|
|
@@ -21210,7 +21206,7 @@ class KolCombobox {
|
|
|
21210
21206
|
}; }
|
|
21211
21207
|
}
|
|
21212
21208
|
|
|
21213
|
-
const defaultStyleCss$D = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n @media (prefers-reduced-motion) {\n .collapsible__wrapper-animation, .collapsible__wrapper {\n transition: none !important;\n }\n }\n .collapsible {\n /* @see https://github.com/public-ui/kolibri/issues/5952 */\n }\n @media print {\n :not(.collapsible--open) .collapsible__wrapper-animation {\n display: none;\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 grid-template-rows: 0fr;\n transition: grid-template-rows 0.3s;\n }\n .collapsible__wrapper-animation {\n opacity: 0;\n transform: scaleY(0);\n transform-origin: top;\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: transform 0.3s, opacity 0.3s, visibility 0.3s;\n }\n .collapsible--open .collapsible__wrapper {\n grid-template-rows: 1fr;\n }\n .collapsible--open .collapsible__wrapper-animation {\n opacity: 1;\n transform: scaleY(1);\n visibility: visible;\n }\n .collapsible {\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__heading-button button .kol-span {\n align-items: flex-start;\n }\n .collapsible--open:focus-within {\n position: relative;\n z-index: 100;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-details__heading-button {\n display: flex;\n }\n .kol-details__heading-button .kol-button {\n min-height: auto;\n }\n .kol-details__heading-button .kol-button .kol-span__label {\n border-bottom-color: grey;\n border-bottom-style: solid;\n }\n .collapsible--open .kol-details__heading-button .kol-icon {\n transform: rotate(90deg);\n }\n}";
|
|
21209
|
+
const defaultStyleCss$D = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n @media (prefers-reduced-motion) {\n .collapsible__wrapper-animation, .collapsible__wrapper {\n transition: none !important;\n }\n }\n .collapsible {\n /* @see https://github.com/public-ui/kolibri/issues/5952 */\n }\n @media print {\n :not(.collapsible--open) .collapsible__wrapper-animation {\n display: none;\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 grid-template-columns: minmax(0, 1fr);\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.3s;\n }\n .collapsible__wrapper-animation {\n opacity: 0;\n transform: scaleY(0);\n transform-origin: top;\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: transform 0.3s, opacity 0.3s, visibility 0.3s;\n }\n .collapsible--open .collapsible__wrapper {\n grid-template-rows: 1fr;\n }\n .collapsible--open .collapsible__wrapper-animation {\n opacity: 1;\n transform: scaleY(1);\n visibility: visible;\n }\n .collapsible {\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__heading-button button .kol-span {\n align-items: flex-start;\n }\n .collapsible--open:focus-within {\n position: relative;\n z-index: 100;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-details__heading-button {\n display: flex;\n }\n .kol-details__heading-button .kol-button {\n min-height: auto;\n }\n .kol-details__heading-button .kol-button .kol-span__label {\n border-bottom-color: grey;\n border-bottom-style: solid;\n }\n .collapsible--open .kol-details__heading-button .kol-icon {\n transform: rotate(90deg);\n }\n}";
|
|
21214
21210
|
|
|
21215
21211
|
class KolDetails {
|
|
21216
21212
|
constructor(hostRef) {
|
|
@@ -21266,7 +21262,7 @@ class KolDetails {
|
|
|
21266
21262
|
animationClass: `${rootClass}__wrapper-animation`,
|
|
21267
21263
|
},
|
|
21268
21264
|
};
|
|
21269
|
-
return (hAsync(KolCollapsibleFc, Object.assign({ key: '
|
|
21265
|
+
return (hAsync(KolCollapsibleFc, Object.assign({ key: '413ea46975e272bf12c268e796f033581f37e7a2' }, props), hAsync("slot", { key: 'ad6cacb2da3506f0d5d78caafd22219c67aafe39' })));
|
|
21270
21266
|
}
|
|
21271
21267
|
validateDisabled(value) {
|
|
21272
21268
|
validateDisabled(this, value);
|
|
@@ -21321,7 +21317,7 @@ class KolDetails {
|
|
|
21321
21317
|
}; }
|
|
21322
21318
|
}
|
|
21323
21319
|
|
|
21324
|
-
const defaultStyleCss$C = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n.kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n}\n\n.kol-card .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n}\n.kol-card :host {\n display: inline-block;\n}\n.kol-card .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n}\n.kol-card .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n}\n.kol-card .kol-button__text {\n flex: 1 0 100%;\n}\n.kol-card {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: grid;\n height: 100%;\n overflow: visible;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-template-areas: \"header close\" \"content content\";\n grid-template-columns: 1fr min-content;\n grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n align-self: start;\n grid-area: header;\n}\n.kol-card__content {\n align-self: stretch;\n grid-area: content;\n}\n.kol-card__close-button {\n grid-area: close;\n}\n\n@layer kol-component {\n .kol-dialog,\n .kol-modal {\n min-height: var(--a11y-min-size);\n padding: 0;\n border: 0;\n }\n .kol-dialog::backdrop,\n .kol-modal::backdrop {\n background-color: rgba(0, 0, 0, 0.1);\n }\n .kol-dialog__close-button,\n .kol-modal__close-button {\n position: absolute;\n top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n z-index: 1;\n }\n}";
|
|
21320
|
+
const defaultStyleCss$C = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n.kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n}\n\n.kol-card .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n}\n.kol-card :host {\n display: inline-block;\n}\n.kol-card .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n}\n.kol-card .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n}\n.kol-card .kol-button__text {\n flex: 1 0 100%;\n}\n.kol-card {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: grid;\n height: 100%;\n overflow: visible;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-template-areas: \"header close\" \"content content\";\n grid-template-columns: 1fr min-content;\n grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n align-self: start;\n grid-area: header;\n}\n.kol-card__content {\n align-self: stretch;\n grid-area: content;\n}\n.kol-card__close-button {\n grid-area: close;\n}\n\n@layer kol-component {\n .kol-dialog,\n .kol-modal {\n min-height: var(--a11y-min-size);\n padding: 0;\n border: 0;\n }\n .kol-dialog::backdrop,\n .kol-modal::backdrop {\n background-color: rgba(0, 0, 0, 0.1);\n }\n .kol-dialog__close-button,\n .kol-modal__close-button {\n position: absolute;\n top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n z-index: 1;\n }\n}";
|
|
21325
21321
|
|
|
21326
21322
|
class KolDialog {
|
|
21327
21323
|
constructor(hostRef) {
|
|
@@ -21477,7 +21473,7 @@ class KolDialogWc {
|
|
|
21477
21473
|
}; }
|
|
21478
21474
|
}
|
|
21479
21475
|
|
|
21480
|
-
const defaultStyleCss$B = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-card .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-card :host {\n display: inline-block;\n }\n .kol-card .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-card .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-card .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-card {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: grid;\n height: 100%;\n overflow: visible;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-template-areas: \"header close\" \"content content\";\n grid-template-columns: 1fr min-content;\n grid-template-rows: min-content 1fr;\n }\n .kol-card__header {\n align-self: start;\n grid-area: header;\n }\n .kol-card__content {\n align-self: stretch;\n grid-area: content;\n }\n .kol-card__close-button {\n grid-area: close;\n }\n .kol-drawer__dialog {\n padding: 0;\n border: none;\n }\n .kol-drawer__wrapper {\n position: fixed;\n overflow: auto;\n }\n .kol-drawer__wrapper--left, .kol-drawer__wrapper--right {\n top: 0;\n max-width: 100vw;\n height: 100vh;\n }\n .kol-drawer__wrapper--left .kol-drawer__content, .kol-drawer__wrapper--right .kol-drawer__content {\n height: 100%;\n }\n .kol-drawer__wrapper--left {\n left: 0;\n }\n .kol-drawer__wrapper--right {\n right: 0;\n }\n .kol-drawer__wrapper--bottom, .kol-drawer__wrapper--top {\n left: 0;\n width: 100vw;\n max-height: 100vh;\n }\n .kol-drawer__wrapper--bottom .kol-drawer__content, .kol-drawer__wrapper--top .kol-drawer__content {\n width: 100%;\n }\n .kol-drawer__wrapper--bottom {\n bottom: 0;\n }\n .kol-drawer__wrapper--top {\n top: 0;\n }\n .kol-drawer__content {\n position: relative;\n }\n .kol-drawer__dialog .kol-card__content {\n overflow-y: auto;\n }\n}";
|
|
21476
|
+
const defaultStyleCss$B = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-card .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-card :host {\n display: inline-block;\n }\n .kol-card .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-card .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-card .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-card {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: grid;\n height: 100%;\n overflow: visible;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-template-areas: \"header close\" \"content content\";\n grid-template-columns: 1fr min-content;\n grid-template-rows: min-content 1fr;\n }\n .kol-card__header {\n align-self: start;\n grid-area: header;\n }\n .kol-card__content {\n align-self: stretch;\n grid-area: content;\n }\n .kol-card__close-button {\n grid-area: close;\n }\n .kol-drawer__dialog {\n padding: 0;\n border: none;\n }\n .kol-drawer__wrapper {\n position: fixed;\n overflow: auto;\n }\n .kol-drawer__wrapper--left, .kol-drawer__wrapper--right {\n top: 0;\n max-width: 100vw;\n height: 100vh;\n }\n .kol-drawer__wrapper--left .kol-drawer__content, .kol-drawer__wrapper--right .kol-drawer__content {\n height: 100%;\n }\n .kol-drawer__wrapper--left {\n left: 0;\n }\n .kol-drawer__wrapper--right {\n right: 0;\n }\n .kol-drawer__wrapper--bottom, .kol-drawer__wrapper--top {\n left: 0;\n width: 100vw;\n max-height: 100vh;\n }\n .kol-drawer__wrapper--bottom .kol-drawer__content, .kol-drawer__wrapper--top .kol-drawer__content {\n width: 100%;\n }\n .kol-drawer__wrapper--bottom {\n bottom: 0;\n }\n .kol-drawer__wrapper--top {\n top: 0;\n }\n .kol-drawer__content {\n position: relative;\n }\n .kol-drawer__dialog .kol-card__content {\n overflow-y: auto;\n }\n}";
|
|
21481
21477
|
|
|
21482
21478
|
class KolDrawer {
|
|
21483
21479
|
constructor(hostRef) {
|
|
@@ -21628,7 +21624,7 @@ class KolDrawer {
|
|
|
21628
21624
|
}; }
|
|
21629
21625
|
}
|
|
21630
21626
|
|
|
21631
|
-
const defaultStyleCss$A = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-link {\n display: inline-flex;\n max-width: fit-content;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-link--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: stretch;\n }\n .kol-link--standalone .kol-link__text {\n display: inline-flex;\n flex: 1 1 100%;\n place-items: center;\n }\n .kol-link .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
21627
|
+
const defaultStyleCss$A = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-link {\n display: inline-flex;\n max-width: fit-content;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-link--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: stretch;\n }\n .kol-link--standalone .kol-link__text {\n display: inline-flex;\n flex: 1 1 100%;\n place-items: center;\n }\n .kol-link .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
21632
21628
|
|
|
21633
21629
|
class KolForm {
|
|
21634
21630
|
constructor(hostRef) {
|
|
@@ -21676,7 +21672,7 @@ class KolForm {
|
|
|
21676
21672
|
}
|
|
21677
21673
|
render() {
|
|
21678
21674
|
const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
|
|
21679
|
-
return (hAsync(Host, { key: '
|
|
21675
|
+
return (hAsync(Host, { key: '57e0a3d78e82b869da11268451f88c47edd2c297' }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
|
|
21680
21676
|
}
|
|
21681
21677
|
scrollToErrorList() {
|
|
21682
21678
|
var _a;
|
|
@@ -21766,7 +21762,7 @@ class KolHeading {
|
|
|
21766
21762
|
}
|
|
21767
21763
|
render() {
|
|
21768
21764
|
const { _secondaryHeadline, _label, _level } = this.state;
|
|
21769
|
-
return (hAsync(KolHeadingFc, { key: '
|
|
21765
|
+
return (hAsync(KolHeadingFc, { key: '5b1aa2d6529760e1163f3d3dfed33e6eeac23b87', secondaryHeadline: _secondaryHeadline, level: _level }, _label, hAsync("slot", { key: 'a164fde23c11d5d6b28bd1029a5d4c8c9453a111', name: "expert", slot: "expert" })));
|
|
21770
21766
|
}
|
|
21771
21767
|
static get watchers() { return {
|
|
21772
21768
|
"_label": ["validateLabel"],
|
|
@@ -21816,7 +21812,7 @@ class IconController extends BaseController {
|
|
|
21816
21812
|
}
|
|
21817
21813
|
}
|
|
21818
21814
|
|
|
21819
|
-
const defaultStyleCss$y = "@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=
|
|
21815
|
+
const defaultStyleCss$y = "@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n}";
|
|
21820
21816
|
|
|
21821
21817
|
class KolIcon extends BaseWebComponent {
|
|
21822
21818
|
constructor(hostRef) {
|
|
@@ -21837,7 +21833,7 @@ class KolIcon extends BaseWebComponent {
|
|
|
21837
21833
|
});
|
|
21838
21834
|
}
|
|
21839
21835
|
render() {
|
|
21840
|
-
return (hAsync(Host, { key: '
|
|
21836
|
+
return (hAsync(Host, { key: 'eec010ecae679aa60be2e9a20c87fb817a84f562' }, hAsync(IconFC, { key: 'e0fdbd3ec1dfa9b95d3a5da034af895af36ec848', icons: this.ctrl.getRenderProp('icons'), label: this.ctrl.getRenderProp('label') })));
|
|
21841
21837
|
}
|
|
21842
21838
|
static get watchers() { return {
|
|
21843
21839
|
"_icons": ["watchIcons"],
|
|
@@ -21941,7 +21937,7 @@ class KolImage extends BaseWebComponent {
|
|
|
21941
21937
|
});
|
|
21942
21938
|
}
|
|
21943
21939
|
render() {
|
|
21944
|
-
return (hAsync(Host, { key: '
|
|
21940
|
+
return (hAsync(Host, { key: 'e90814ed3ba4d21ab39290bff603a04a5b122ece' }, hAsync(ImageFC, { key: '9221ca31432cb4192ff006375934b3a52a0243f9', alt: this.ctrl.getRenderProp('alt'), loading: this.ctrl.getRenderProp('loading'), sizes: this.ctrl.getRenderProp('sizes'), src: this.ctrl.getRenderProp('src'), srcset: this.ctrl.getRenderProp('srcset') })));
|
|
21945
21941
|
}
|
|
21946
21942
|
static get watchers() { return {
|
|
21947
21943
|
"_alt": ["watchAlt"],
|
|
@@ -22218,7 +22214,7 @@ const FieldControlStateWrapper = (_a, children) => {
|
|
|
22218
22214
|
return (hAsync(KolFieldControlFc, Object.assign({}, getFieldControlProps(state), other), children));
|
|
22219
22215
|
};
|
|
22220
22216
|
|
|
22221
|
-
const defaultStyleCss$w = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n display: ruby;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-field-control {\n display: grid;\n min-height: var(--a11y-min-size);\n align-items: center;\n justify-content: left;\n grid-template-areas: \"input label\";\n grid-template-columns: auto 1fr;\n grid-template-rows: auto;\n }\n .kol-field-control:has(.kol-field-control__hint) {\n grid-template-areas: \"input label\" \"hint hint\";\n grid-template-columns: auto 1fr;\n grid-template-rows: auto auto;\n }\n .kol-field-control--label-align-left:not(.kol-field-control--hide-label) {\n grid-template-areas: \"label input\";\n grid-template-columns: 1fr auto;\n grid-template-rows: auto;\n }\n .kol-field-control--label-align-left:not(.kol-field-control--hide-label):has(.kol-field-control__hint) {\n grid-template-areas: \"label input\" \"hint hint\";\n grid-template-columns: 1fr auto;\n grid-template-rows: auto auto;\n }\n .kol-field-control__input {\n display: flex;\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-area: input;\n }\n .kol-field-control__label {\n display: flex;\n min-height: var(--a11y-min-size);\n flex-grow: 1;\n align-items: center;\n cursor: pointer;\n grid-area: label;\n }\n .kol-field-control__label--visually-hidden {\n height: 0;\n margin: 0;\n padding: 0;\n visibility: hidden;\n }\n .kol-field-control__hint {\n grid-area: hint;\n }\n .kol-field-control--disabled .kol-field-control__label {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .kol-field-control--required .kol-field-control__label-text::after {\n content: \"*\"/\"\";\n }\n .kol-field-control--required .kol-tooltip .kol-span__label::after {\n content: \"*\"/\"\";\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field__label-text {\n display: ruby;\n }\n .kol-checkbox {\n display: flex;\n position: relative;\n align-items: center;\n cursor: pointer;\n }\n .kol-checkbox--disabled {\n cursor: not-allowed;\n }\n .kol-checkbox .kol-input {\n background-color: #fff;\n border-style: solid;\n margin: 0;\n border-width: 2px;\n appearance: none;\n cursor: inherit;\n }\n .kol-checkbox .kol-input:before {\n content: \"\";\n }\n /**\n * Variant: Checkbox\n */\n .kol-checkbox--variant-default {\n position: relative;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n justify-content: center;\n }\n .kol-checkbox--variant-default .kol-icon {\n display: none;\n position: absolute;\n inset: auto;\n z-index: 1;\n pointer-events: none;\n }\n .kol-checkbox--variant-default .kol-input {\n width: calc(22 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(22 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-checkbox--variant-default.kol-checkbox--checked .kol-icon, .kol-checkbox--variant-default.kol-checkbox--indeterminate .kol-icon {\n display: block;\n }\n /**\n * Variant: Switch\n */\n .kol-checkbox--variant-switch {\n position: relative;\n }\n .kol-checkbox--variant-switch .kol-input {\n display: inline-block;\n position: relative;\n width: 3.2em;\n min-width: 3.2em;\n height: 1.7em;\n }\n .kol-checkbox--variant-switch .kol-input::before {\n background-color: #000;\n position: absolute;\n top: calc(0.25em - 2 * 1rem / var(--kolibri-root-font-size, 16));\n left: calc(0.25em - 2 * 1rem / var(--kolibri-root-font-size, 16));\n width: 1.2em;\n height: 1.2em;\n transition: 0.5s;\n }\n .kol-checkbox--variant-switch .kol-input:checked::before {\n transform: translateX(1.5em);\n }\n .kol-checkbox--variant-switch .kol-input:indeterminate::before {\n transform: translateX(0.75em);\n }\n .kol-checkbox--variant-switch .kol-icon {\n transform: translate(0, -50%);\n color: #000;\n display: flex;\n position: absolute;\n top: 50%;\n left: calc(4 * 1rem / 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 transition: 0.5s;\n }\n .kol-checkbox--variant-switch.kol-checkbox--checked .kol-icon {\n transform: translate(1.5em, -50%);\n }\n .kol-checkbox--variant-switch.kol-checkbox--indeterminate .kol-icon {\n transform: translate(0.75em, -50%);\n }\n /**\n * Variant: Button\n */\n .kol-checkbox--variant-button {\n min-width: var(--a11y-min-size);\n }\n .kol-checkbox--variant-button .kol-icon {\n display: flex;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n }\n}";
|
|
22217
|
+
const defaultStyleCss$w = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n flex-flow: row;\n align-items: flex-start;\n justify-content: flex-start;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-field-control {\n display: grid;\n min-height: var(--a11y-min-size);\n align-items: center;\n justify-content: left;\n grid-template-areas: \"input label\";\n grid-template-columns: auto 1fr;\n grid-template-rows: auto;\n }\n .kol-field-control:has(.kol-field-control__hint) {\n grid-template-areas: \"input label\" \"hint hint\";\n grid-template-columns: auto 1fr;\n grid-template-rows: auto auto;\n }\n .kol-field-control--label-align-left:not(.kol-field-control--hide-label) {\n grid-template-areas: \"label input\";\n grid-template-columns: 1fr auto;\n grid-template-rows: auto;\n }\n .kol-field-control--label-align-left:not(.kol-field-control--hide-label):has(.kol-field-control__hint) {\n grid-template-areas: \"label input\" \"hint hint\";\n grid-template-columns: 1fr auto;\n grid-template-rows: auto auto;\n }\n .kol-field-control__input {\n display: flex;\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-area: input;\n }\n .kol-field-control__label {\n display: flex;\n min-height: var(--a11y-min-size);\n flex-grow: 1;\n align-items: center;\n cursor: pointer;\n grid-area: label;\n }\n .kol-field-control__label--visually-hidden {\n height: 0;\n margin: 0;\n padding: 0;\n visibility: hidden;\n }\n .kol-field-control__hint {\n grid-area: hint;\n }\n .kol-field-control--disabled .kol-field-control__label {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .kol-field-control--required .kol-field-control__label-text::after {\n content: \"*\"/\"\";\n }\n .kol-field-control--required .kol-tooltip .kol-span__label::after {\n content: \"*\"/\"\";\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field__label-text {\n display: ruby;\n }\n .kol-checkbox {\n display: flex;\n position: relative;\n align-items: center;\n cursor: pointer;\n }\n .kol-checkbox--disabled {\n cursor: not-allowed;\n }\n .kol-checkbox .kol-input {\n background-color: #fff;\n border-style: solid;\n margin: 0;\n border-width: 2px;\n appearance: none;\n cursor: inherit;\n }\n .kol-checkbox .kol-input:before {\n content: \"\";\n }\n /**\n * Variant: Checkbox\n */\n .kol-checkbox--variant-default {\n position: relative;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n justify-content: center;\n }\n .kol-checkbox--variant-default .kol-icon {\n display: none;\n position: absolute;\n inset: auto;\n z-index: 1;\n pointer-events: none;\n }\n .kol-checkbox--variant-default .kol-input {\n width: calc(22 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(22 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-checkbox--variant-default.kol-checkbox--checked .kol-icon, .kol-checkbox--variant-default.kol-checkbox--indeterminate .kol-icon {\n display: block;\n }\n /**\n * Variant: Switch\n */\n .kol-checkbox--variant-switch {\n position: relative;\n }\n .kol-checkbox--variant-switch .kol-input {\n display: inline-block;\n position: relative;\n width: 3.2em;\n min-width: 3.2em;\n height: 1.7em;\n }\n .kol-checkbox--variant-switch .kol-input::before {\n background-color: #000;\n position: absolute;\n top: calc(0.25em - 2 * 1rem / var(--kolibri-root-font-size, 16));\n left: calc(0.25em - 2 * 1rem / var(--kolibri-root-font-size, 16));\n width: 1.2em;\n height: 1.2em;\n transition: 0.5s;\n }\n .kol-checkbox--variant-switch .kol-input:checked::before {\n transform: translateX(1.5em);\n }\n .kol-checkbox--variant-switch .kol-input:indeterminate::before {\n transform: translateX(0.75em);\n }\n .kol-checkbox--variant-switch .kol-icon {\n transform: translate(0, -50%);\n color: #000;\n display: flex;\n position: absolute;\n top: 50%;\n left: calc(4 * 1rem / 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 transition: 0.5s;\n }\n .kol-checkbox--variant-switch.kol-checkbox--checked .kol-icon {\n transform: translate(1.5em, -50%);\n }\n .kol-checkbox--variant-switch.kol-checkbox--indeterminate .kol-icon {\n transform: translate(0.75em, -50%);\n }\n /**\n * Variant: Button\n */\n .kol-checkbox--variant-button {\n min-width: var(--a11y-min-size);\n }\n .kol-checkbox--variant-button .kol-icon {\n display: flex;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n }\n}";
|
|
22222
22218
|
|
|
22223
22219
|
class KolInputCheckbox {
|
|
22224
22220
|
getModelValue() {
|
|
@@ -22286,7 +22282,7 @@ class KolInputCheckbox {
|
|
|
22286
22282
|
return this.state._icons.unchecked;
|
|
22287
22283
|
}
|
|
22288
22284
|
render() {
|
|
22289
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22285
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'd73f65109e95527641481026388a0f0ced761794' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(FieldControlStateWrapper, Object.assign({ key: '785f3b99ef6485796d9948edd0da460f7f8cb5ed' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(CheckboxStateWrapper, Object.assign({ key: '9b30842961aa28a9be40aad6537a8e4a14aab95f' }, this.getInputProps())))));
|
|
22290
22286
|
}
|
|
22291
22287
|
constructor(hostRef) {
|
|
22292
22288
|
registerInstance(this, hostRef);
|
|
@@ -22486,7 +22482,7 @@ class InputColorController extends InputIconController {
|
|
|
22486
22482
|
}
|
|
22487
22483
|
}
|
|
22488
22484
|
|
|
22489
|
-
const defaultStyleCss$v = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n display: ruby;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-input-color__input--color {\n flex-grow: 1;\n }\n .kol-input-color__input--text {\n width: calc(112 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-color__inputs-wrapper {\n display: flex;\n gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n flex-direction: row;\n align-items: center;\n }\n .kol-input {\n cursor: pointer;\n }\n .kol-input:disabled {\n cursor: not-allowed;\n }\n}";
|
|
22485
|
+
const defaultStyleCss$v = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n flex-flow: row;\n align-items: flex-start;\n justify-content: flex-start;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-input-color__input--color {\n flex-grow: 1;\n }\n .kol-input-color__input--text {\n width: calc(112 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-color__inputs-wrapper {\n display: flex;\n gap: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n flex-direction: row;\n align-items: center;\n }\n .kol-input {\n cursor: pointer;\n }\n .kol-input:disabled {\n cursor: not-allowed;\n }\n}";
|
|
22490
22486
|
|
|
22491
22487
|
class KolInputColor {
|
|
22492
22488
|
async getValue() {
|
|
@@ -22523,7 +22519,7 @@ class KolInputColor {
|
|
|
22523
22519
|
return Object.assign(Object.assign({ state: Object.assign(Object.assign({}, this.state), { _suggestions: [] }) }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus });
|
|
22524
22520
|
}
|
|
22525
22521
|
render() {
|
|
22526
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22522
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '770efe143050f8c0fc74b17f8f39c65ab9ef3807' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '6893b24074171d43294846ecda4d466f9e7bc232', state: this.state, class: "kol-input-color__inputs-wrapper" }, hAsync("div", { key: '1d1ba24dc0acbe2b4d1fe39e9a7c6719e0f86954', class: "kol-input-color__inputs-wrapper" }, hAsync(InputStateWrapper, Object.assign({ key: 'e1d061f3967c378731413268fa8ae132f6428d63', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), hAsync(InputStateWrapper, Object.assign({ key: '5524697ec589ba7f719a4bf698a3960e6654db6c', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
|
|
22527
22523
|
}
|
|
22528
22524
|
constructor(hostRef) {
|
|
22529
22525
|
registerInstance(this, hostRef);
|
|
@@ -22844,7 +22840,7 @@ InputDateController.isoTimeRegex = /^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/;
|
|
|
22844
22840
|
InputDateController.isoWeekRegex = /^\d{4}-W(?:[0-4]\d|5[0-3])$/;
|
|
22845
22841
|
InputDateController.DEFAULT_MAX_DATE = new Date(9999, 11, 31, 23, 59, 59);
|
|
22846
22842
|
|
|
22847
|
-
const defaultStyleCss$u = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n display: ruby;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n /**\n * Workaround for detecting focus state of the native date input's calendar icon.\n * The `:focus-visible` pseudo class does not work on the icon itself, but only on the input element.\n * By using the `content` property we can detect whether the icon is focused by inspecting the computed style in JS.\n * This should be replaced once native focus detection for the icon is available.\n */\n :host input[type=date],\n :host input[type=datetime-local],\n :host input[type=month],\n :host input[type=time],\n :host input[type=week] {\n content: \"native-icon-focused\";\n }\n :host input[type=date]:focus-visible,\n :host input[type=datetime-local]:focus-visible,\n :host input[type=month]:focus-visible,\n :host input[type=time]:focus-visible,\n :host input[type=week]:focus-visible {\n content: \"native-icon-not-focused\";\n }\n .kol-input {\n cursor: text;\n }\n .kol-input::-webkit-calendar-picker-indicator {\n cursor: pointer;\n }\n}";
|
|
22843
|
+
const defaultStyleCss$u = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n flex-flow: row;\n align-items: flex-start;\n justify-content: flex-start;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n /**\n * Workaround for detecting focus state of the native date input's calendar icon.\n * The `:focus-visible` pseudo class does not work on the icon itself, but only on the input element.\n * By using the `content` property we can detect whether the icon is focused by inspecting the computed style in JS.\n * This should be replaced once native focus detection for the icon is available.\n */\n :host input[type=date],\n :host input[type=datetime-local],\n :host input[type=month],\n :host input[type=time],\n :host input[type=week] {\n content: \"native-icon-focused\";\n }\n :host input[type=date]:focus-visible,\n :host input[type=datetime-local]:focus-visible,\n :host input[type=month]:focus-visible,\n :host input[type=time]:focus-visible,\n :host input[type=week]:focus-visible {\n content: \"native-icon-not-focused\";\n }\n .kol-input {\n cursor: text;\n }\n .kol-input::-webkit-calendar-picker-indicator {\n cursor: pointer;\n }\n}";
|
|
22848
22844
|
|
|
22849
22845
|
class KolInputDate {
|
|
22850
22846
|
async getValue() {
|
|
@@ -22898,7 +22894,7 @@ class KolInputDate {
|
|
|
22898
22894
|
return Object.assign(Object.assign({ ref: this.catchRef, state: this.state }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onChange: this.onChange, onInput: this.onInput });
|
|
22899
22895
|
}
|
|
22900
22896
|
render() {
|
|
22901
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22897
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'be4fb542ed02c8daa2cd6d491334f5826a802476' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'e80f744e6f59f9d00ba375abd828df685e2106dc', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'cf955201d288f700f1d4689c0c1fc51158866f2c' }, this.getInputProps())))));
|
|
22902
22898
|
}
|
|
22903
22899
|
constructor(hostRef) {
|
|
22904
22900
|
registerInstance(this, hostRef);
|
|
@@ -23237,7 +23233,7 @@ class InputEmailController extends InputTextEmailController {
|
|
|
23237
23233
|
}
|
|
23238
23234
|
}
|
|
23239
23235
|
|
|
23240
|
-
const defaultStyleCss$t = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n display: ruby;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n}";
|
|
23236
|
+
const defaultStyleCss$t = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n flex-flow: row;\n align-items: flex-start;\n justify-content: flex-start;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n}";
|
|
23241
23237
|
|
|
23242
23238
|
class KolInputEmail {
|
|
23243
23239
|
async getValue() {
|
|
@@ -23275,7 +23271,7 @@ class KolInputEmail {
|
|
|
23275
23271
|
} });
|
|
23276
23272
|
}
|
|
23277
23273
|
render() {
|
|
23278
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23274
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '269531a16d621f2f3efb17f675e885258d6888ec' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '4c400921885251e901b97322eff0bac7d36d1b36', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'cd31276b89eaedde4cf89e5581750be76a6af143' }, this.getInputProps())))));
|
|
23279
23275
|
}
|
|
23280
23276
|
constructor(hostRef) {
|
|
23281
23277
|
registerInstance(this, hostRef);
|
|
@@ -23495,7 +23491,7 @@ class InputFileController extends InputIconController {
|
|
|
23495
23491
|
}
|
|
23496
23492
|
}
|
|
23497
23493
|
|
|
23498
|
-
const defaultStyleCss$s = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n display: ruby;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-input {\n opacity: 0;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 10) 0.5em;\n cursor: pointer;\n }\n .kol-input::-webkit-file-upload-button, .kol-input::file-selector-button {\n cursor: pointer;\n }\n .kol-input:disabled, .kol-input:disabled::-webkit-file-upload-button, .kol-input:disabled::file-selector-button {\n cursor: not-allowed;\n pointer-events: none;\n }\n .kol-input-container__container {\n display: flex;\n overflow: hidden;\n align-items: center;\n }\n .kol-input-container__filename {\n overflow: hidden;\n flex-grow: 1;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n grid-template-columns: auto 1fr;\n }\n}";
|
|
23494
|
+
const defaultStyleCss$s = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n flex-flow: row;\n align-items: flex-start;\n justify-content: flex-start;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-input {\n opacity: 0;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 10) 0.5em;\n cursor: pointer;\n }\n .kol-input::-webkit-file-upload-button, .kol-input::file-selector-button {\n cursor: pointer;\n }\n .kol-input:disabled, .kol-input:disabled::-webkit-file-upload-button, .kol-input:disabled::file-selector-button {\n cursor: not-allowed;\n pointer-events: none;\n }\n .kol-input-container__container {\n display: flex;\n overflow: hidden;\n align-items: center;\n }\n .kol-input-container__filename {\n overflow: hidden;\n flex-grow: 1;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n grid-template-columns: auto 1fr;\n }\n}";
|
|
23499
23495
|
|
|
23500
23496
|
class KolInputFile {
|
|
23501
23497
|
async getValue() {
|
|
@@ -23537,7 +23533,7 @@ class KolInputFile {
|
|
|
23537
23533
|
} });
|
|
23538
23534
|
}
|
|
23539
23535
|
render() {
|
|
23540
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23536
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'ffff49a9e84d52550d6e10b360c2aae93b5008df' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '60c1660efaacf2429f49c29add7f48b74b181196', state: this.state }, hAsync("span", { key: 'a8d904b4e12bfaebb6d87ef419e99ca58d97aee8', class: clsx('kol-input-container__filename', { 'kol-input-container__filename--has-file': this.hasFileSelected }) }, this.filename), hAsync(InputStateWrapper, Object.assign({ key: 'e5168fa61fa67f0f4765961c9dfefff081bc297a' }, this.getInputProps())), hAsync(KolButtonWcTag, { key: 'c6849bd0bca049481867d91e6ba04793ac67eae6', class: "kol-input-container__button", _label: this.translateDataBrowseText, _variant: "primary", _disabled: this._disabled }))));
|
|
23541
23537
|
}
|
|
23542
23538
|
constructor(hostRef) {
|
|
23543
23539
|
registerInstance(this, hostRef);
|
|
@@ -23781,7 +23777,7 @@ class InputNumberController extends InputIconController {
|
|
|
23781
23777
|
}
|
|
23782
23778
|
}
|
|
23783
23779
|
|
|
23784
|
-
const defaultStyleCss$r = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n display: ruby;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-input-number input {\n appearance: textfield;\n text-align: right;\n }\n .kol-input-number input::-webkit-inner-spin-button {\n display: none;\n }\n}";
|
|
23780
|
+
const defaultStyleCss$r = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n flex-flow: row;\n align-items: flex-start;\n justify-content: flex-start;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-input-number input {\n appearance: textfield;\n text-align: right;\n }\n .kol-input-number input::-webkit-inner-spin-button {\n display: none;\n }\n}";
|
|
23785
23781
|
|
|
23786
23782
|
class KolInputNumber {
|
|
23787
23783
|
async getValue() {
|
|
@@ -23862,7 +23858,7 @@ class KolInputNumber {
|
|
|
23862
23858
|
}, disabled: this._disabled || this._readOnly }, hAsync(IconFC, { icons: "kolicon-minus", label: "" })));
|
|
23863
23859
|
}
|
|
23864
23860
|
render() {
|
|
23865
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23861
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '70b595878acec45771b7b5258169b3ce7fa66814' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '6e3adbbbe5a950ea8172a3861a4c2afdd75827f9', state: this.state, startAdornment: this.getStepDownButton(), endAdornment: this.getStepUpButton() }, hAsync(InputStateWrapper, Object.assign({ key: 'bdebef34511a8966c86e3caaed8a34e8243ffd0b' }, this.getInputProps())))));
|
|
23866
23862
|
}
|
|
23867
23863
|
constructor(hostRef) {
|
|
23868
23864
|
registerInstance(this, hostRef);
|
|
@@ -24061,7 +24057,7 @@ class KolInputNumber {
|
|
|
24061
24057
|
}; }
|
|
24062
24058
|
}
|
|
24063
24059
|
|
|
24064
|
-
const defaultStyleCss$q = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n display: ruby;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-input-password {\n --kol-tooltip-width: calc(160 * 1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
24060
|
+
const defaultStyleCss$q = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n flex-flow: row;\n align-items: flex-start;\n justify-content: flex-start;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-input-password {\n --kol-tooltip-width: calc(160 * 1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
24065
24061
|
|
|
24066
24062
|
class KolInputPassword {
|
|
24067
24063
|
async getValue() {
|
|
@@ -24109,7 +24105,7 @@ class KolInputPassword {
|
|
|
24109
24105
|
}, icon: `${this._passwordVisible ? 'kolicon-eye-closed' : 'kolicon-eye'}`, disabled: this._disabled }));
|
|
24110
24106
|
}
|
|
24111
24107
|
render() {
|
|
24112
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
24108
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '870fa26cf8d74b4eee290b7e4c31dc89b55c70c1' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '166176fa0c0c0c064db93bd91bc046cf4012b7ac', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(InputStateWrapper, Object.assign({ key: 'bbf1caf735a54a51fcafb9c01c94a8aee7bca7ad' }, this.getInputProps())))));
|
|
24113
24109
|
}
|
|
24114
24110
|
constructor(hostRef) {
|
|
24115
24111
|
registerInstance(this, hostRef);
|
|
@@ -24347,7 +24343,7 @@ const RadioStateWrapper = (_a) => {
|
|
|
24347
24343
|
return hAsync(RadioFc, Object.assign({ inputProps: getRadioProps(state, inputProps) }, other));
|
|
24348
24344
|
};
|
|
24349
24345
|
|
|
24350
|
-
const defaultStyleCss$p = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-field-control {\n display: grid;\n min-height: var(--a11y-min-size);\n align-items: center;\n justify-content: left;\n grid-template-areas: \"input label\";\n grid-template-columns: auto 1fr;\n grid-template-rows: auto;\n }\n .kol-field-control:has(.kol-field-control__hint) {\n grid-template-areas: \"input label\" \"hint hint\";\n grid-template-columns: auto 1fr;\n grid-template-rows: auto auto;\n }\n .kol-field-control--label-align-left:not(.kol-field-control--hide-label) {\n grid-template-areas: \"label input\";\n grid-template-columns: 1fr auto;\n grid-template-rows: auto;\n }\n .kol-field-control--label-align-left:not(.kol-field-control--hide-label):has(.kol-field-control__hint) {\n grid-template-areas: \"label input\" \"hint hint\";\n grid-template-columns: 1fr auto;\n grid-template-rows: auto auto;\n }\n .kol-field-control__input {\n display: flex;\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-area: input;\n }\n .kol-field-control__label {\n display: flex;\n min-height: var(--a11y-min-size);\n flex-grow: 1;\n align-items: center;\n cursor: pointer;\n grid-area: label;\n }\n .kol-field-control__label--visually-hidden {\n height: 0;\n margin: 0;\n padding: 0;\n visibility: hidden;\n }\n .kol-field-control__hint {\n grid-area: hint;\n }\n .kol-field-control--disabled .kol-field-control__label {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .kol-field-control--required .kol-field-control__label-text::after {\n content: \"*\"/\"\";\n }\n .kol-field-control--required .kol-tooltip .kol-span__label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n display: ruby;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-form-field {\n --border-width: 2px;\n --input-size: 1.5em;\n }\n .kol-form-field__label {\n display: contents;\n }\n .kol-form-field__label-text {\n display: ruby;\n }\n .kol-form-field__input {\n display: flex;\n flex-direction: column;\n }\n .kol-form-field__input--orientation-horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n align-items: flex-start;\n }\n .kol-form-field--disabled {\n opacity: unset;\n }\n .kol-input-radio {\n display: flex;\n position: relative;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n .kol-input-radio__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 .kol-input-radio__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 .kol-input-radio__input:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .kol-input-radio__input:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n .kol-input-radio__input:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .kol-input-radio--disabled {\n cursor: not-allowed;\n }\n}";
|
|
24346
|
+
const defaultStyleCss$p = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-field-control {\n display: grid;\n min-height: var(--a11y-min-size);\n align-items: center;\n justify-content: left;\n grid-template-areas: \"input label\";\n grid-template-columns: auto 1fr;\n grid-template-rows: auto;\n }\n .kol-field-control:has(.kol-field-control__hint) {\n grid-template-areas: \"input label\" \"hint hint\";\n grid-template-columns: auto 1fr;\n grid-template-rows: auto auto;\n }\n .kol-field-control--label-align-left:not(.kol-field-control--hide-label) {\n grid-template-areas: \"label input\";\n grid-template-columns: 1fr auto;\n grid-template-rows: auto;\n }\n .kol-field-control--label-align-left:not(.kol-field-control--hide-label):has(.kol-field-control__hint) {\n grid-template-areas: \"label input\" \"hint hint\";\n grid-template-columns: 1fr auto;\n grid-template-rows: auto auto;\n }\n .kol-field-control__input {\n display: flex;\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-area: input;\n }\n .kol-field-control__label {\n display: flex;\n min-height: var(--a11y-min-size);\n flex-grow: 1;\n align-items: center;\n cursor: pointer;\n grid-area: label;\n }\n .kol-field-control__label--visually-hidden {\n height: 0;\n margin: 0;\n padding: 0;\n visibility: hidden;\n }\n .kol-field-control__hint {\n grid-area: hint;\n }\n .kol-field-control--disabled .kol-field-control__label {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .kol-field-control--required .kol-field-control__label-text::after {\n content: \"*\"/\"\";\n }\n .kol-field-control--required .kol-tooltip .kol-span__label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n flex-flow: row;\n align-items: flex-start;\n justify-content: flex-start;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-form-field {\n --border-width: 2px;\n --input-size: 1.5em;\n }\n .kol-form-field__label {\n display: contents;\n }\n .kol-form-field__label-text {\n display: ruby;\n }\n .kol-form-field__input {\n display: flex;\n flex-direction: column;\n }\n .kol-form-field__input--orientation-horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n align-items: flex-start;\n }\n .kol-form-field--disabled {\n opacity: unset;\n }\n .kol-input-radio {\n display: flex;\n position: relative;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n .kol-input-radio__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 .kol-input-radio__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 .kol-input-radio__input:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .kol-input-radio__input:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n .kol-input-radio__input:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .kol-input-radio--disabled {\n cursor: not-allowed;\n }\n}";
|
|
24351
24347
|
|
|
24352
24348
|
class KolInputRadio {
|
|
24353
24349
|
async getValue() {
|
|
@@ -24397,7 +24393,7 @@ class KolInputRadio {
|
|
|
24397
24393
|
};
|
|
24398
24394
|
}
|
|
24399
24395
|
render() {
|
|
24400
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
24396
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '97630ccb8fed912b3ff478a91c77af4e2f0011b1' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
|
|
24401
24397
|
}
|
|
24402
24398
|
calculateDisabled(option) {
|
|
24403
24399
|
return Boolean(this.state._disabled) || Boolean(option.disabled);
|
|
@@ -24633,7 +24629,7 @@ class InputRangeController extends InputIconController {
|
|
|
24633
24629
|
}
|
|
24634
24630
|
}
|
|
24635
24631
|
|
|
24636
|
-
const defaultStyleCss$o = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n display: ruby;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-input-range__inputs-wrapper {\n display: flex;\n flex-grow: 1;\n flex-direction: row;\n align-items: center;\n }\n .kol-input-range__input--number {\n width: var(--kolibri-input-range--input-number--width);\n }\n .kol-input-range__input--range {\n background-color: #d3d3d3;\n display: inline-block;\n /* Design-Hack - related with flex-grow */\n width: 0;\n height: calc(8 * 1rem / 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 .kol-input-range__input:not(:disabled).kol-input-range__input--range::-webkit-slider-thumb {\n cursor: pointer;\n }\n .kol-input-range__input--range::-webkit-slider-thumb {\n background-color: #000;\n border-radius: 20px;\n width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n -webkit-appearance: none;\n }\n @media (prefers-contrast: more) or (forced-colors: active) {\n .kol-input-range__input--range::-webkit-slider-thumb {\n outline: 1px solid currentColor;\n }\n }\n .kol-input-range__input:not(:disabled).kol-input-range__input--range::-moz-range-thumb {\n cursor: pointer;\n }\n .kol-input-range__input--range::-moz-range-thumb {\n background-color: #000;\n border-radius: 20px;\n width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n -moz-appearance: none;\n }\n}";
|
|
24632
|
+
const defaultStyleCss$o = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n flex-flow: row;\n align-items: flex-start;\n justify-content: flex-start;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-input-range__inputs-wrapper {\n display: flex;\n flex-grow: 1;\n flex-direction: row;\n align-items: center;\n }\n .kol-input-range__input--number {\n width: var(--kolibri-input-range--input-number--width);\n }\n .kol-input-range__input--range {\n background-color: #d3d3d3;\n display: inline-block;\n /* Design-Hack - related with flex-grow */\n width: 0;\n height: calc(8 * 1rem / 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 .kol-input-range__input:not(:disabled).kol-input-range__input--range::-webkit-slider-thumb {\n cursor: pointer;\n }\n .kol-input-range__input--range::-webkit-slider-thumb {\n background-color: #000;\n border-radius: 20px;\n width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n -webkit-appearance: none;\n }\n @media (prefers-contrast: more) or (forced-colors: active) {\n .kol-input-range__input--range::-webkit-slider-thumb {\n outline: 1px solid currentColor;\n }\n }\n .kol-input-range__input:not(:disabled).kol-input-range__input--range::-moz-range-thumb {\n cursor: pointer;\n }\n .kol-input-range__input--range::-moz-range-thumb {\n background-color: #000;\n border-radius: 20px;\n width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n -moz-appearance: none;\n }\n}";
|
|
24637
24633
|
|
|
24638
24634
|
class KolInputRange {
|
|
24639
24635
|
async focus() {
|
|
@@ -24712,7 +24708,7 @@ class KolInputRange {
|
|
|
24712
24708
|
const inputsWrapperStyle = {
|
|
24713
24709
|
'--kolibri-input-range--input-number--width': `calc(${String(this.state._max).length}ch + 2em)`,
|
|
24714
24710
|
};
|
|
24715
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
24711
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'eff8d2d085cb3496f0ba014dc439680261bf5dd8' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'e81490d9f741c35b98f28bc8be4213edb2cc3b99', state: this.state }, hAsync("div", { key: '609ab671923920c2e4ec80af89cc8c1b36d536d2', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, hAsync(InputStateWrapper, Object.assign({ key: '6051137eff268cb03c92adb46a04443bcfdafae0', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), hAsync(InputStateWrapper, Object.assign({ key: '10f759e939ddd7e3dccc1a6709ca6469eadb2209', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && hAsync(SuggestionsFc, { key: '1c18bba1adbb39db7cd4fa3ff890526297300375', id: this.state._id, suggestions: this.state._suggestions }))));
|
|
24716
24712
|
}
|
|
24717
24713
|
constructor(hostRef) {
|
|
24718
24714
|
registerInstance(this, hostRef);
|
|
@@ -24901,7 +24897,7 @@ class KolInputRange {
|
|
|
24901
24897
|
}; }
|
|
24902
24898
|
}
|
|
24903
24899
|
|
|
24904
|
-
const defaultStyleCss$n = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n display: ruby;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n}";
|
|
24900
|
+
const defaultStyleCss$n = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n flex-flow: row;\n align-items: flex-start;\n justify-content: flex-start;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n}";
|
|
24905
24901
|
|
|
24906
24902
|
class KolInputText {
|
|
24907
24903
|
async getValue() {
|
|
@@ -24958,7 +24954,7 @@ class KolInputText {
|
|
|
24958
24954
|
return Object.assign(Object.assign({ ref: this.catchRef, state: this.state, ariaDescribedBy }, this.controller.onFacade), { onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown });
|
|
24959
24955
|
}
|
|
24960
24956
|
render() {
|
|
24961
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
24957
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '821d1df11563c246bd21fb4b10372e6936cf72ee' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '457e1fea7aabbf9c3d67400238ddd630ca37ca1a', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'fb01c052668755be3609f3239f37b3d7e94ad477' }, this.getInputProps())))));
|
|
24962
24958
|
}
|
|
24963
24959
|
constructor(hostRef) {
|
|
24964
24960
|
registerInstance(this, hostRef);
|
|
@@ -25258,7 +25254,7 @@ class KolKolibri {
|
|
|
25258
25254
|
}; }
|
|
25259
25255
|
}
|
|
25260
25256
|
|
|
25261
|
-
const defaultStyleCss$l = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-link {\n display: inline-flex;\n max-width: fit-content;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-link--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: stretch;\n }\n .kol-link--standalone .kol-link__text {\n display: inline-flex;\n flex: 1 1 100%;\n place-items: center;\n }\n .kol-link .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
25257
|
+
const defaultStyleCss$l = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-link {\n display: inline-flex;\n max-width: fit-content;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-link--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: stretch;\n }\n .kol-link--standalone .kol-link__text {\n display: inline-flex;\n flex: 1 1 100%;\n place-items: center;\n }\n .kol-link .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
25262
25258
|
|
|
25263
25259
|
class KolLink {
|
|
25264
25260
|
constructor(hostRef) {
|
|
@@ -25311,7 +25307,7 @@ class KolLink {
|
|
|
25311
25307
|
}; }
|
|
25312
25308
|
}
|
|
25313
25309
|
|
|
25314
|
-
const defaultStyleCss$k = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-link {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-link::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-link__text {\n flex: 1 0 100%;\n }\n}";
|
|
25310
|
+
const defaultStyleCss$k = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-link {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-link::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-link__text {\n flex: 1 0 100%;\n }\n}";
|
|
25315
25311
|
|
|
25316
25312
|
class KolLinkButton {
|
|
25317
25313
|
constructor(hostRef) {
|
|
@@ -25329,7 +25325,7 @@ class KolLinkButton {
|
|
|
25329
25325
|
return Promise.resolve((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
25330
25326
|
}
|
|
25331
25327
|
render() {
|
|
25332
|
-
return (hAsync(KolLinkWcTag, { key: '
|
|
25328
|
+
return (hAsync(KolLinkWcTag, { key: '7fa3d6efa17f2b4a2726f7b2b8cf4a88ccc842c0', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaControls: this._ariaControls, _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, _target: this._target, _tooltipAlign: this._tooltipAlign, _variant: this._variant }, hAsync("slot", { key: '1fb60fd0f4784f7376135d498c4ffd68bf614efa', name: "expert", slot: "expert" })));
|
|
25333
25329
|
}
|
|
25334
25330
|
static get style() { return {
|
|
25335
25331
|
default: defaultStyleCss$k
|
|
@@ -25603,7 +25599,7 @@ class KolLinkWc {
|
|
|
25603
25599
|
}; }
|
|
25604
25600
|
}
|
|
25605
25601
|
|
|
25606
|
-
const defaultStyleCss$j = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n.kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n}\n\n.kol-card .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n}\n.kol-card :host {\n display: inline-block;\n}\n.kol-card .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n}\n.kol-card .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n}\n.kol-card .kol-button__text {\n flex: 1 0 100%;\n}\n.kol-card {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: grid;\n height: 100%;\n overflow: visible;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-template-areas: \"header close\" \"content content\";\n grid-template-columns: 1fr min-content;\n grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n align-self: start;\n grid-area: header;\n}\n.kol-card__content {\n align-self: stretch;\n grid-area: content;\n}\n.kol-card__close-button {\n grid-area: close;\n}\n\n@layer kol-component {\n .kol-dialog,\n .kol-modal {\n min-height: var(--a11y-min-size);\n padding: 0;\n border: 0;\n }\n .kol-dialog::backdrop,\n .kol-modal::backdrop {\n background-color: rgba(0, 0, 0, 0.1);\n }\n .kol-dialog__close-button,\n .kol-modal__close-button {\n position: absolute;\n top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n z-index: 1;\n }\n}";
|
|
25602
|
+
const defaultStyleCss$j = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n.kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n}\n\n.kol-card .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n}\n.kol-card :host {\n display: inline-block;\n}\n.kol-card .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n}\n.kol-card .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n}\n.kol-card .kol-button__text {\n flex: 1 0 100%;\n}\n.kol-card {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: grid;\n height: 100%;\n overflow: visible;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-template-areas: \"header close\" \"content content\";\n grid-template-columns: 1fr min-content;\n grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n align-self: start;\n grid-area: header;\n}\n.kol-card__content {\n align-self: stretch;\n grid-area: content;\n}\n.kol-card__close-button {\n grid-area: close;\n}\n\n@layer kol-component {\n .kol-dialog,\n .kol-modal {\n min-height: var(--a11y-min-size);\n padding: 0;\n border: 0;\n }\n .kol-dialog::backdrop,\n .kol-modal::backdrop {\n background-color: rgba(0, 0, 0, 0.1);\n }\n .kol-dialog__close-button,\n .kol-modal__close-button {\n position: absolute;\n top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n z-index: 1;\n }\n}";
|
|
25607
25603
|
|
|
25608
25604
|
class KolModal {
|
|
25609
25605
|
constructor(hostRef) {
|
|
@@ -25623,7 +25619,7 @@ class KolModal {
|
|
|
25623
25619
|
await ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.closeModal());
|
|
25624
25620
|
}
|
|
25625
25621
|
render() {
|
|
25626
|
-
return (hAsync(KolDialogWcTag, { key: '
|
|
25622
|
+
return (hAsync(KolDialogWcTag, { key: 'a67eb09e039e0d4be4210007c894f713559731bc', ref: this.catchRef, _label: this._label, _on: this._on, _variant: this._variant, _width: this._width }, hAsync("slot", { key: 'd5d178d907c3c0d20b5d97bb2e6e03e16277d7a9' })));
|
|
25627
25623
|
}
|
|
25628
25624
|
static get style() { return {
|
|
25629
25625
|
default: defaultStyleCss$j
|
|
@@ -25645,7 +25641,7 @@ class KolModal {
|
|
|
25645
25641
|
}; }
|
|
25646
25642
|
}
|
|
25647
25643
|
|
|
25648
|
-
const defaultStyleCss$i = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-nav {\n display: grid;\n place-items: center;\n }\n .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n width: 100%;\n }\n .kol-nav__navigation .kol-span {\n width: 100%;\n justify-content: flex-start;\n }\n .kol-nav__navigation .kol-span__container {\n width: 100%;\n }\n .kol-nav__navigation .kol-span__container .kol-span__label {\n flex: 1;\n }\n .kol-nav__list {\n display: flex;\n margin: 0;\n padding: 0;\n flex-direction: column;\n list-style: none;\n }\n .kol-nav__entry-wrapper {\n display: flex;\n }\n .kol-nav__entry {\n flex-grow: 1;\n }\n .kol-button {\n text-align: left;\n }\n}";
|
|
25644
|
+
const defaultStyleCss$i = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-nav {\n display: grid;\n place-items: center;\n }\n .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n width: 100%;\n }\n .kol-nav__navigation .kol-span {\n width: 100%;\n justify-content: flex-start;\n }\n .kol-nav__navigation .kol-span__container {\n width: 100%;\n }\n .kol-nav__navigation .kol-span__container .kol-span__label {\n flex: 1;\n }\n .kol-nav__list {\n display: flex;\n margin: 0;\n padding: 0;\n flex-direction: column;\n list-style: none;\n }\n .kol-nav__entry-wrapper {\n display: flex;\n }\n .kol-nav__entry {\n flex-grow: 1;\n }\n .kol-button {\n text-align: left;\n }\n}";
|
|
25649
25645
|
|
|
25650
25646
|
const entryIsLink = (entryProps) => {
|
|
25651
25647
|
return typeof entryProps._href === 'string';
|
|
@@ -25774,9 +25770,9 @@ class KolNav {
|
|
|
25774
25770
|
}
|
|
25775
25771
|
render() {
|
|
25776
25772
|
const collapsible = this.state._collapsible === true;
|
|
25777
|
-
return (hAsync("div", { key: '
|
|
25773
|
+
return (hAsync("div", { key: '38b72189cc9e53eea1c134ac062711a924a2306d', class: clsx('kol-nav', {
|
|
25778
25774
|
'kol-nav--is-compact': this.state._hideLabel,
|
|
25779
|
-
}) }, hAsync("nav", { key: '
|
|
25775
|
+
}) }, hAsync("nav", { key: '4ca8650fa26ffb655faaf8712837dfee8ef851f4', "aria-label": this.state._label, class: "kol-nav__navigation", id: this.navId }, hAsync(this.linkList, { key: 'afab51b9b0d3796f326f3a3ab8f20c466b012765', collapsible: collapsible, deep: 0, links: this.state._links, id: this.listId })), this.state._hasCompactButton && (hAsync("div", { key: 'd9838c0c7c478a3b448c936b24b5ba1baff2c212', class: "kol-nav__compact" }, hAsync(KolButtonWcTag, { key: 'dc577ce9dffff35df4425d94234f06bc446f7833', class: "kol-nav__toggle-button", _ariaControls: this.navId, _ariaExpanded: !this.state._hideLabel, _icons: this.state._hideLabel ? 'kolicon-chevron-right' : 'kolicon-chevron-left', _hideLabel: true, _label: translate(this.state._hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
|
|
25780
25776
|
onClick: () => {
|
|
25781
25777
|
this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: !this.state._hideLabel });
|
|
25782
25778
|
},
|
|
@@ -25850,7 +25846,7 @@ class KolNav {
|
|
|
25850
25846
|
}; }
|
|
25851
25847
|
}
|
|
25852
25848
|
|
|
25853
|
-
const defaultStyleCss$h = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n display: ruby;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-select {\n background-color: transparent;\n width: 100%;\n }\n .kol-select:not(:disabled) {\n cursor: pointer;\n }\n .kol-select:not([multiple], [size]) {\n height: 2.75em;\n }\n .kol-select:focus {\n outline: none;\n }\n .kol-select__option:checked::before {\n content: \"✓ \";\n }\n .kol-select {\n /* needed hack for vertical alignment */\n }\n .kol-select[multiple] option {\n padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-pagination {\n display: flex;\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n container: paging/inline-size;\n }\n .kol-pagination__navigation-list {\n display: inline-flex;\n margin: 0;\n padding: 0;\n gap: 0.5em; /* @deprecated: do not use gap, margin, padding and so on in basis styling */\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n }\n .kol-pagination__separator:before {\n content: \"•••\";\n }\n .kol-pagination__page-size-select .kol-form-field-select {\n align-items: center;\n grid-template-columns: 1fr max-content;\n }\n @container paging (width < 600px) {\n .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__button--numbers),\n .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__separator) {\n display: none;\n }\n }\n}";
|
|
25849
|
+
const defaultStyleCss$h = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n flex-flow: row;\n align-items: flex-start;\n justify-content: flex-start;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-select {\n background-color: transparent;\n width: 100%;\n }\n .kol-select:not(:disabled) {\n cursor: pointer;\n }\n .kol-select:not([multiple], [size]) {\n height: 2.75em;\n }\n .kol-select:focus {\n outline: none;\n }\n .kol-select__option:checked::before {\n content: \"✓ \";\n }\n .kol-select {\n /* needed hack for vertical alignment */\n }\n .kol-select[multiple] option {\n padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-pagination {\n display: flex;\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n container: paging/inline-size;\n }\n .kol-pagination__navigation-list {\n display: inline-flex;\n margin: 0;\n padding: 0;\n gap: 0.5em; /* @deprecated: do not use gap, margin, padding and so on in basis styling */\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n }\n .kol-pagination__separator:before {\n content: \"•••\";\n }\n .kol-pagination__page-size-select .kol-form-field-select {\n align-items: center;\n grid-template-columns: 1fr max-content;\n }\n @container paging (width < 600px) {\n .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__button--numbers),\n .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__separator) {\n display: none;\n }\n }\n}";
|
|
25854
25850
|
|
|
25855
25851
|
class KolPagination {
|
|
25856
25852
|
constructor(hostRef) {
|
|
@@ -26259,6 +26255,76 @@ class KolPaginationWc {
|
|
|
26259
26255
|
}; }
|
|
26260
26256
|
}
|
|
26261
26257
|
|
|
26258
|
+
const defaultStyleCss$g = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-popover-button__popover {\n margin: 0;\n padding: 0;\n border: 0;\n }\n .kol-popover-button--inline .kol-popover-button__button {\n display: inline;\n }\n .kol-popover {\n opacity: 0;\n transition: 0.2s ease-out opacity;\n }\n .kol-popover-button--open + .kol-popover {\n opacity: 1;\n }\n .kol-popover-button--open .kol-button__tooltip {\n display: none;\n }\n .kol-popover-button--inline {\n display: inline-block;\n }\n .kol-popover-button--inline .kol-button {\n min-width: 0;\n min-height: 1em;\n }\n}";
|
|
26259
|
+
|
|
26260
|
+
let KolPopoverButton$1 = class KolPopoverButton {
|
|
26261
|
+
constructor(hostRef) {
|
|
26262
|
+
registerInstance(this, hostRef);
|
|
26263
|
+
this.catchRef = (ref) => {
|
|
26264
|
+
this.ref = ref;
|
|
26265
|
+
};
|
|
26266
|
+
this._disabled = false;
|
|
26267
|
+
this._hideLabel = false;
|
|
26268
|
+
this._inline = false;
|
|
26269
|
+
this._popoverAlign = 'bottom';
|
|
26270
|
+
this._tooltipAlign = 'top';
|
|
26271
|
+
this._type = 'button';
|
|
26272
|
+
this._variant = 'normal';
|
|
26273
|
+
}
|
|
26274
|
+
async hidePopover() {
|
|
26275
|
+
var _a;
|
|
26276
|
+
void ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.hidePopover());
|
|
26277
|
+
}
|
|
26278
|
+
async showPopover() {
|
|
26279
|
+
var _a;
|
|
26280
|
+
void ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.showPopover());
|
|
26281
|
+
}
|
|
26282
|
+
async focus() {
|
|
26283
|
+
var _a;
|
|
26284
|
+
return Promise.resolve((_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus());
|
|
26285
|
+
}
|
|
26286
|
+
render() {
|
|
26287
|
+
return (hAsync(KolPopoverButtonWcTag, { key: 'c872bdb3ee2b9b98c3b4f33c0c3d57f7b7092faf', ref: this.catchRef, _accessKey: this._accessKey, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _inline: this._inline, _label: this._label, _name: this._name, _popoverAlign: this._popoverAlign, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: '3d60d8087615b6e48a690001a62b9f458d52be4a', name: "expert", slot: "expert" }), hAsync("slot", { key: '90ca5600c47874ad6224a6a24f3327f08eb0c612' })));
|
|
26288
|
+
}
|
|
26289
|
+
static get style() { return {
|
|
26290
|
+
default: defaultStyleCss$g
|
|
26291
|
+
}; }
|
|
26292
|
+
static get cmpMeta() { return {
|
|
26293
|
+
"$flags$": 297,
|
|
26294
|
+
"$tagName$": "kol-popover-button",
|
|
26295
|
+
"$members$": {
|
|
26296
|
+
"_accessKey": [1, "_access-key"],
|
|
26297
|
+
"_ariaDescription": [1, "_aria-description"],
|
|
26298
|
+
"_customClass": [1, "_custom-class"],
|
|
26299
|
+
"_disabled": [4],
|
|
26300
|
+
"_hideLabel": [4, "_hide-label"],
|
|
26301
|
+
"_icons": [1],
|
|
26302
|
+
"_inline": [4],
|
|
26303
|
+
"_label": [1],
|
|
26304
|
+
"_name": [1],
|
|
26305
|
+
"_popoverAlign": [1, "_popover-align"],
|
|
26306
|
+
"_shortKey": [1, "_short-key"],
|
|
26307
|
+
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
26308
|
+
"_tabIndex": [2, "_tab-index"],
|
|
26309
|
+
"_tooltipAlign": [1, "_tooltip-align"],
|
|
26310
|
+
"_type": [1],
|
|
26311
|
+
"_value": [8],
|
|
26312
|
+
"_variant": [1],
|
|
26313
|
+
"hidePopover": [64],
|
|
26314
|
+
"showPopover": [64],
|
|
26315
|
+
"focus": [64]
|
|
26316
|
+
},
|
|
26317
|
+
"$listeners$": undefined,
|
|
26318
|
+
"$lazyBundleId$": "-",
|
|
26319
|
+
"$attrsToReflect$": []
|
|
26320
|
+
}; }
|
|
26321
|
+
};
|
|
26322
|
+
|
|
26323
|
+
const PopoverFC = (props) => {
|
|
26324
|
+
const { align = 'bottom', popoverRef, arrowRef, class: classNames } = props, rest = __rest(props, ["align", "popoverRef", "arrowRef", "class"]);
|
|
26325
|
+
return (hAsync("div", Object.assign({}, rest, { class: clsx('kol-popover', classNames), ref: popoverRef, popover: "auto" }), hAsync("div", { class: clsx('kol-popover__arrow', `kol-popover__arrow--${align}`), ref: arrowRef }), hAsync("slot", null)));
|
|
26326
|
+
};
|
|
26327
|
+
|
|
26262
26328
|
/**
|
|
26263
26329
|
* Custom positioning reference element.
|
|
26264
26330
|
* @see https://floating-ui.com/docs/virtual-elements
|
|
@@ -27919,172 +27985,59 @@ const alignFloatingElements = async ({ floatingElement, referenceElement, arrowE
|
|
|
27919
27985
|
}
|
|
27920
27986
|
};
|
|
27921
27987
|
|
|
27922
|
-
class
|
|
27923
|
-
constructor(
|
|
27924
|
-
|
|
27925
|
-
this.
|
|
27926
|
-
|
|
27927
|
-
return;
|
|
27928
|
-
}
|
|
27929
|
-
if (this.triggerElement) {
|
|
27930
|
-
await alignFloatingElements({
|
|
27931
|
-
align: this._align,
|
|
27932
|
-
referenceElement: this.triggerElement,
|
|
27933
|
-
arrowElement: this.arrowElement,
|
|
27934
|
-
floatingElement: this.popoverElement,
|
|
27935
|
-
});
|
|
27936
|
-
}
|
|
27937
|
-
this.popoverElement.style.removeProperty('visibility');
|
|
27938
|
-
};
|
|
27939
|
-
this.handleBeforeToggle = (event) => {
|
|
27940
|
-
if (event.newState === 'open' && this.popoverElement) {
|
|
27941
|
-
this.popoverElement.style.visibility = 'hidden';
|
|
27942
|
-
}
|
|
27943
|
-
};
|
|
27944
|
-
this.handleToggle = (event) => {
|
|
27945
|
-
var _a, _b, _c, _d, _e, _f;
|
|
27946
|
-
const toggleEvent = event;
|
|
27947
|
-
const isOpen = toggleEvent.newState === 'open';
|
|
27948
|
-
this.state = Object.assign(Object.assign({}, this.state), { _show: isOpen, _visible: isOpen });
|
|
27949
|
-
if (isOpen) {
|
|
27950
|
-
(_a = this.cleanupAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
27951
|
-
if (this.triggerElement && this.popoverElement) {
|
|
27952
|
-
this.cleanupAutoUpdate = autoUpdate(this.triggerElement, this.popoverElement, () => {
|
|
27953
|
-
void this.alignPopover();
|
|
27954
|
-
});
|
|
27955
|
-
}
|
|
27956
|
-
this.addListenersToBody();
|
|
27957
|
-
void this.alignPopover();
|
|
27958
|
-
}
|
|
27959
|
-
else {
|
|
27960
|
-
(_b = this.cleanupAutoUpdate) === null || _b === void 0 ? void 0 : _b.call(this);
|
|
27961
|
-
this.cleanupAutoUpdate = undefined;
|
|
27962
|
-
this.removeListenersFromBody();
|
|
27963
|
-
const closeEvent = ((_c = this.lastCloseEvent) !== null && _c !== void 0 ? _c : toggleEvent);
|
|
27964
|
-
this.lastCloseEvent = undefined;
|
|
27965
|
-
(_d = this.triggerElement) === null || _d === void 0 ? void 0 : _d.focus();
|
|
27966
|
-
(_f = (_e = this.state._on) === null || _e === void 0 ? void 0 : _e.onClose) === null || _f === void 0 ? void 0 : _f.call(_e, closeEvent);
|
|
27967
|
-
if (this.host) {
|
|
27968
|
-
dispatchDomEvent(this.host, KolEvent.close);
|
|
27969
|
-
}
|
|
27970
|
-
}
|
|
27971
|
-
if (this._show !== isOpen) {
|
|
27972
|
-
this._show = isOpen;
|
|
27973
|
-
}
|
|
27974
|
-
};
|
|
27975
|
-
this.catchHostAndTriggerElement = (element) => {
|
|
27976
|
-
if (element) {
|
|
27977
|
-
this.host = element;
|
|
27978
|
-
this.triggerElement = element.previousElementSibling;
|
|
27979
|
-
}
|
|
27980
|
-
};
|
|
27981
|
-
this.catchPopoverElement = (element) => {
|
|
27982
|
-
if (this.popoverElement) {
|
|
27983
|
-
this.popoverElement.removeEventListener('beforetoggle', this.handleBeforeToggle);
|
|
27984
|
-
this.popoverElement.removeEventListener('toggle', this.handleToggle);
|
|
27985
|
-
}
|
|
27988
|
+
class PopoverController {
|
|
27989
|
+
constructor() {
|
|
27990
|
+
this.show = false;
|
|
27991
|
+
this.align = 'bottom';
|
|
27992
|
+
this.setPopoverElementRef = (element) => {
|
|
27986
27993
|
this.popoverElement = element;
|
|
27987
|
-
|
|
27988
|
-
this.popoverElement.addEventListener('beforetoggle', this.handleBeforeToggle);
|
|
27989
|
-
this.popoverElement.addEventListener('toggle', this.handleToggle);
|
|
27990
|
-
this.syncPopoverVisibility();
|
|
27991
|
-
}
|
|
27994
|
+
this.arrowElement = element === null || element === void 0 ? void 0 : element.querySelector('.kol-popover__arrow');
|
|
27992
27995
|
};
|
|
27993
|
-
this.
|
|
27994
|
-
this.
|
|
27996
|
+
this.setTriggerElement = (element) => {
|
|
27997
|
+
this.triggerElement = element;
|
|
27995
27998
|
};
|
|
27996
|
-
this.
|
|
27997
|
-
|
|
27998
|
-
this.lastCloseEvent = event;
|
|
27999
|
-
(_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.hidePopover();
|
|
27999
|
+
this.setAlign = (align) => {
|
|
28000
|
+
this.align = align;
|
|
28000
28001
|
};
|
|
28001
|
-
this.
|
|
28002
|
-
if (
|
|
28003
|
-
|
|
28002
|
+
this.alignPopover = async () => {
|
|
28003
|
+
if (!this.popoverElement || !this.triggerElement) {
|
|
28004
|
+
return;
|
|
28004
28005
|
}
|
|
28006
|
+
await alignFloatingElements({
|
|
28007
|
+
align: this.align,
|
|
28008
|
+
referenceElement: this.triggerElement,
|
|
28009
|
+
arrowElement: this.arrowElement,
|
|
28010
|
+
floatingElement: this.popoverElement,
|
|
28011
|
+
});
|
|
28005
28012
|
};
|
|
28006
|
-
this.
|
|
28007
|
-
if (this.
|
|
28008
|
-
|
|
28013
|
+
this.setupAutoUpdate = () => {
|
|
28014
|
+
if (!this.popoverElement || !this.triggerElement || this.cleanupAutoUpdate) {
|
|
28015
|
+
return;
|
|
28009
28016
|
}
|
|
28017
|
+
this.cleanupAutoUpdate = autoUpdate(this.triggerElement, this.popoverElement, () => {
|
|
28018
|
+
void this.alignPopover();
|
|
28019
|
+
});
|
|
28010
28020
|
};
|
|
28011
|
-
this.handleScroll = () => {
|
|
28012
|
-
void this.alignPopover();
|
|
28013
|
-
};
|
|
28014
|
-
this._align = 'top';
|
|
28015
|
-
this._show = false;
|
|
28016
|
-
this.state = {
|
|
28017
|
-
_align: 'top',
|
|
28018
|
-
_on: {},
|
|
28019
|
-
_show: false,
|
|
28020
|
-
_visible: false,
|
|
28021
|
-
};
|
|
28022
|
-
}
|
|
28023
|
-
addListenersToBody() {
|
|
28024
|
-
var _a;
|
|
28025
|
-
const documentElement = getDocument();
|
|
28026
|
-
const body = documentElement.body;
|
|
28027
|
-
body.addEventListener('keyup', this.handleEscape, { capture: true });
|
|
28028
|
-
body.addEventListener('click', this.hidePopoverByClickOutside, { capture: true });
|
|
28029
|
-
(_a = documentElement.scrollingElement) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', this.handleScroll, { passive: true });
|
|
28030
28021
|
}
|
|
28031
|
-
|
|
28032
|
-
|
|
28033
|
-
const documentElement = getDocument();
|
|
28034
|
-
const body = documentElement.body;
|
|
28035
|
-
body.removeEventListener('keyup', this.handleEscape, { capture: true });
|
|
28036
|
-
body.removeEventListener('click', this.hidePopoverByClickOutside, { capture: true });
|
|
28037
|
-
(_a = documentElement.scrollingElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', this.handleScroll);
|
|
28038
|
-
}
|
|
28039
|
-
syncPopoverVisibility() {
|
|
28022
|
+
setShow(value) {
|
|
28023
|
+
this.show = value;
|
|
28040
28024
|
if (!this.popoverElement) {
|
|
28041
28025
|
return;
|
|
28042
28026
|
}
|
|
28043
28027
|
const toggleVisibility = () => {
|
|
28028
|
+
var _a;
|
|
28044
28029
|
if (!this.popoverElement) {
|
|
28045
28030
|
return;
|
|
28046
28031
|
}
|
|
28047
28032
|
const isOpen = this.popoverElement.matches(':popover-open');
|
|
28048
|
-
if (this.
|
|
28049
|
-
if (!isOpen) {
|
|
28050
|
-
this.popoverElement.showPopover();
|
|
28051
|
-
}
|
|
28052
|
-
}
|
|
28053
|
-
else {
|
|
28054
|
-
if (isOpen) {
|
|
28055
|
-
this.popoverElement.hidePopover();
|
|
28056
|
-
}
|
|
28057
|
-
}
|
|
28058
|
-
};
|
|
28059
|
-
if (this.popoverElement.isConnected) {
|
|
28060
|
-
toggleVisibility();
|
|
28061
|
-
}
|
|
28062
|
-
else {
|
|
28063
|
-
requestAnimationFrame(() => {
|
|
28064
|
-
toggleVisibility();
|
|
28065
|
-
});
|
|
28066
|
-
}
|
|
28067
|
-
}
|
|
28068
|
-
render() {
|
|
28069
|
-
return (hAsync(Host, { key: '751d5e78e0828db0d6aa60fd3bb6f11975a5b245', ref: this.catchHostAndTriggerElement, class: "kol-popover" }, hAsync("div", { key: '4c53a7572790e7b73f3ef0645ad50628a663710b', class: clsx('kol-popover__content', { 'kol-popover__content--visible': this.state._visible }), ref: this.catchPopoverElement, popover: "auto" }, hAsync("div", { key: 'ae6c14b05282f0ceed5fc0f48e4233f7ee26d2ec', class: clsx('kol-popover__arrow', `kol-popover__arrow--${this.state._align}`), ref: this.catchArrowElement }), hAsync("slot", { key: 'b200b482e665bfe097d783a620eac5122e61e63c' }))));
|
|
28070
|
-
}
|
|
28071
|
-
validateAlign(value) {
|
|
28072
|
-
validateAlign(this, value);
|
|
28073
|
-
void this.alignPopover();
|
|
28074
|
-
}
|
|
28075
|
-
validateOn(value) {
|
|
28076
|
-
validatePopoverCallbacks(this, value);
|
|
28077
|
-
}
|
|
28078
|
-
validateShow(value) {
|
|
28079
|
-
validateShow(this, value);
|
|
28080
|
-
if (this.popoverElement) {
|
|
28081
|
-
const isOpen = this.popoverElement.matches(':popover-open');
|
|
28082
|
-
if (value) {
|
|
28033
|
+
if (this.show) {
|
|
28083
28034
|
if (!isOpen) {
|
|
28084
28035
|
try {
|
|
28085
28036
|
this.popoverElement.showPopover();
|
|
28037
|
+
this.setupAutoUpdate();
|
|
28038
|
+
void this.alignPopover();
|
|
28086
28039
|
}
|
|
28087
|
-
catch (
|
|
28040
|
+
catch (_b) {
|
|
28088
28041
|
}
|
|
28089
28042
|
}
|
|
28090
28043
|
}
|
|
@@ -28092,122 +28045,62 @@ class KolPopover {
|
|
|
28092
28045
|
if (isOpen) {
|
|
28093
28046
|
try {
|
|
28094
28047
|
this.popoverElement.hidePopover();
|
|
28048
|
+
(_a = this.cleanupAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
28049
|
+
this.cleanupAutoUpdate = undefined;
|
|
28095
28050
|
}
|
|
28096
|
-
catch (
|
|
28051
|
+
catch (_c) {
|
|
28097
28052
|
}
|
|
28098
28053
|
}
|
|
28099
28054
|
}
|
|
28055
|
+
};
|
|
28056
|
+
if (this.popoverElement.isConnected) {
|
|
28057
|
+
toggleVisibility();
|
|
28058
|
+
}
|
|
28059
|
+
else {
|
|
28060
|
+
requestAnimationFrame(() => {
|
|
28061
|
+
toggleVisibility();
|
|
28062
|
+
});
|
|
28100
28063
|
}
|
|
28101
28064
|
}
|
|
28102
|
-
|
|
28103
|
-
|
|
28104
|
-
this.
|
|
28105
|
-
}
|
|
28106
|
-
disconnectedCallback() {
|
|
28107
|
-
var _a, _b, _c;
|
|
28108
|
-
(_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('beforetoggle', this.handleBeforeToggle);
|
|
28109
|
-
(_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('toggle', this.handleToggle);
|
|
28110
|
-
(_c = this.cleanupAutoUpdate) === null || _c === void 0 ? void 0 : _c.call(this);
|
|
28065
|
+
destroy() {
|
|
28066
|
+
var _a;
|
|
28067
|
+
(_a = this.cleanupAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
28111
28068
|
this.cleanupAutoUpdate = undefined;
|
|
28112
|
-
this.
|
|
28069
|
+
this.popoverElement = undefined;
|
|
28070
|
+
this.arrowElement = undefined;
|
|
28071
|
+
this.triggerElement = undefined;
|
|
28113
28072
|
}
|
|
28114
|
-
static get watchers() { return {
|
|
28115
|
-
"_align": ["validateAlign"],
|
|
28116
|
-
"_on": ["validateOn"],
|
|
28117
|
-
"_show": ["validateShow"]
|
|
28118
|
-
}; }
|
|
28119
|
-
static get cmpMeta() { return {
|
|
28120
|
-
"$flags$": 260,
|
|
28121
|
-
"$tagName$": "kol-popover-wc",
|
|
28122
|
-
"$members$": {
|
|
28123
|
-
"_align": [1],
|
|
28124
|
-
"_on": [16],
|
|
28125
|
-
"_show": [1540],
|
|
28126
|
-
"state": [32]
|
|
28127
|
-
},
|
|
28128
|
-
"$listeners$": undefined,
|
|
28129
|
-
"$lazyBundleId$": "-",
|
|
28130
|
-
"$attrsToReflect$": [["_show", "_show"]]
|
|
28131
|
-
}; }
|
|
28132
28073
|
}
|
|
28133
28074
|
|
|
28134
|
-
const defaultStyleCss$g = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-popover-button__popover {\n margin: 0;\n padding: 0;\n border: 0;\n }\n .kol-popover-button--inline .kol-popover-button__button {\n display: inline;\n }\n .kol-popover-button--open .kol-button__tooltip {\n display: none;\n }\n .kol-popover-button--inline .kol-button {\n min-width: 0;\n min-height: 1em;\n }\n}";
|
|
28135
|
-
|
|
28136
|
-
let KolPopoverButton$1 = class KolPopoverButton {
|
|
28137
|
-
constructor(hostRef) {
|
|
28138
|
-
registerInstance(this, hostRef);
|
|
28139
|
-
this.catchRef = (ref) => {
|
|
28140
|
-
this.ref = ref;
|
|
28141
|
-
};
|
|
28142
|
-
this._disabled = false;
|
|
28143
|
-
this._hideLabel = false;
|
|
28144
|
-
this._inline = false;
|
|
28145
|
-
this._popoverAlign = 'bottom';
|
|
28146
|
-
this._tooltipAlign = 'top';
|
|
28147
|
-
this._type = 'button';
|
|
28148
|
-
this._variant = 'normal';
|
|
28149
|
-
}
|
|
28150
|
-
async hidePopover() {
|
|
28151
|
-
var _a;
|
|
28152
|
-
void ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.hidePopover());
|
|
28153
|
-
}
|
|
28154
|
-
async showPopover() {
|
|
28155
|
-
var _a;
|
|
28156
|
-
void ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.showPopover());
|
|
28157
|
-
}
|
|
28158
|
-
async focus() {
|
|
28159
|
-
var _a;
|
|
28160
|
-
return Promise.resolve((_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus());
|
|
28161
|
-
}
|
|
28162
|
-
render() {
|
|
28163
|
-
return (hAsync(KolPopoverButtonWcTag, { key: 'd405c3e4ea58c0d884d854e8bf847f471bc7e4ba', ref: this.catchRef, _accessKey: this._accessKey, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _inline: this._inline, _label: this._label, _name: this._name, _popoverAlign: this._popoverAlign, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: '9098b79390a2413a30c74badf954b1276941e44d', name: "expert", slot: "expert" }), hAsync("slot", { key: '213ab1212f3b13899c33e46531b6c97e1c28db7b' })));
|
|
28164
|
-
}
|
|
28165
|
-
static get style() { return {
|
|
28166
|
-
default: defaultStyleCss$g
|
|
28167
|
-
}; }
|
|
28168
|
-
static get cmpMeta() { return {
|
|
28169
|
-
"$flags$": 297,
|
|
28170
|
-
"$tagName$": "kol-popover-button",
|
|
28171
|
-
"$members$": {
|
|
28172
|
-
"_accessKey": [1, "_access-key"],
|
|
28173
|
-
"_ariaDescription": [1, "_aria-description"],
|
|
28174
|
-
"_customClass": [1, "_custom-class"],
|
|
28175
|
-
"_disabled": [4],
|
|
28176
|
-
"_hideLabel": [4, "_hide-label"],
|
|
28177
|
-
"_icons": [1],
|
|
28178
|
-
"_inline": [4],
|
|
28179
|
-
"_label": [1],
|
|
28180
|
-
"_name": [1],
|
|
28181
|
-
"_popoverAlign": [1, "_popover-align"],
|
|
28182
|
-
"_shortKey": [1, "_short-key"],
|
|
28183
|
-
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
28184
|
-
"_tabIndex": [2, "_tab-index"],
|
|
28185
|
-
"_tooltipAlign": [1, "_tooltip-align"],
|
|
28186
|
-
"_type": [1],
|
|
28187
|
-
"_value": [8],
|
|
28188
|
-
"_variant": [1],
|
|
28189
|
-
"hidePopover": [64],
|
|
28190
|
-
"showPopover": [64],
|
|
28191
|
-
"focus": [64]
|
|
28192
|
-
},
|
|
28193
|
-
"$listeners$": undefined,
|
|
28194
|
-
"$lazyBundleId$": "-",
|
|
28195
|
-
"$attrsToReflect$": []
|
|
28196
|
-
}; }
|
|
28197
|
-
};
|
|
28198
|
-
|
|
28199
28075
|
class KolPopoverButton {
|
|
28200
28076
|
constructor(hostRef) {
|
|
28201
28077
|
registerInstance(this, hostRef);
|
|
28078
|
+
this.popoverCtrl = new PopoverController();
|
|
28079
|
+
this.popoverId = `popover-${nonce()}`;
|
|
28080
|
+
this.setPopoverElementRef = (element) => {
|
|
28081
|
+
this.popoverElement = element;
|
|
28082
|
+
this.popoverCtrl.setPopoverElementRef(element);
|
|
28083
|
+
};
|
|
28084
|
+
this.setButtonElementRef = (element) => {
|
|
28085
|
+
this.refButton = element;
|
|
28086
|
+
if (element) {
|
|
28087
|
+
this.popoverCtrl.setTriggerElement(element);
|
|
28088
|
+
}
|
|
28089
|
+
};
|
|
28202
28090
|
this.on = {
|
|
28203
|
-
onClick:
|
|
28091
|
+
onClick: () => {
|
|
28092
|
+
this.popoverCtrl.setShow(!this.popoverOpen);
|
|
28093
|
+
},
|
|
28204
28094
|
};
|
|
28205
28095
|
this.state = {
|
|
28206
28096
|
_label: '',
|
|
28207
28097
|
_popoverAlign: 'bottom',
|
|
28098
|
+
_inline: false,
|
|
28208
28099
|
};
|
|
28209
|
-
this.justClosed = false;
|
|
28210
28100
|
this.popoverOpen = false;
|
|
28101
|
+
this.handleToggle = (event) => {
|
|
28102
|
+
this.popoverOpen = event.newState === 'open';
|
|
28103
|
+
};
|
|
28211
28104
|
this._disabled = false;
|
|
28212
28105
|
this._hideLabel = false;
|
|
28213
28106
|
this._inline = false;
|
|
@@ -28217,76 +28110,21 @@ class KolPopoverButton {
|
|
|
28217
28110
|
this._variant = 'normal';
|
|
28218
28111
|
}
|
|
28219
28112
|
async hidePopover() {
|
|
28220
|
-
|
|
28221
|
-
void ((_a = this.refPopover) === null || _a === void 0 ? void 0 : _a.hidePopover());
|
|
28113
|
+
this.popoverCtrl.setShow(false);
|
|
28222
28114
|
}
|
|
28223
28115
|
async showPopover() {
|
|
28224
|
-
|
|
28225
|
-
void ((_a = this.refPopover) === null || _a === void 0 ? void 0 : _a.showPopover());
|
|
28116
|
+
this.popoverCtrl.setShow(true);
|
|
28226
28117
|
}
|
|
28227
28118
|
async focus() {
|
|
28228
28119
|
var _a;
|
|
28229
28120
|
return Promise.resolve((_a = this.refButton) === null || _a === void 0 ? void 0 : _a.focus());
|
|
28230
28121
|
}
|
|
28231
|
-
handleBeforeToggle(event) {
|
|
28232
|
-
if (event.newState === 'closed') {
|
|
28233
|
-
this.justClosed = true;
|
|
28234
|
-
setTimeout(() => {
|
|
28235
|
-
this.justClosed = false;
|
|
28236
|
-
}, 10);
|
|
28237
|
-
}
|
|
28238
|
-
else {
|
|
28239
|
-
if (this.refPopover) {
|
|
28240
|
-
this.refPopover.style.visibility = 'hidden';
|
|
28241
|
-
}
|
|
28242
|
-
}
|
|
28243
|
-
}
|
|
28244
|
-
alignPopover() {
|
|
28245
|
-
if (this.refPopover && this.refButton) {
|
|
28246
|
-
void alignFloatingElements({
|
|
28247
|
-
align: this.state._popoverAlign,
|
|
28248
|
-
floatingElement: this.refPopover,
|
|
28249
|
-
referenceElement: this.refButton,
|
|
28250
|
-
});
|
|
28251
|
-
}
|
|
28252
|
-
}
|
|
28253
|
-
handleToggle(event) {
|
|
28254
|
-
this.popoverOpen = event.newState === 'open';
|
|
28255
|
-
if (this.popoverOpen) {
|
|
28256
|
-
if (this.refPopover && this.refButton) {
|
|
28257
|
-
this.cleanupAutoPositioning = autoUpdate(this.refButton, this.refPopover, () => {
|
|
28258
|
-
this.alignPopover();
|
|
28259
|
-
});
|
|
28260
|
-
}
|
|
28261
|
-
}
|
|
28262
|
-
else if (this.cleanupAutoPositioning) {
|
|
28263
|
-
this.cleanupAutoPositioning();
|
|
28264
|
-
this.cleanupAutoPositioning = undefined;
|
|
28265
|
-
}
|
|
28266
|
-
}
|
|
28267
|
-
handleButtonClick() {
|
|
28268
|
-
var _a;
|
|
28269
|
-
if (!this.justClosed) {
|
|
28270
|
-
(_a = this.refPopover) === null || _a === void 0 ? void 0 : _a.togglePopover();
|
|
28271
|
-
}
|
|
28272
|
-
}
|
|
28273
|
-
componentDidRender() {
|
|
28274
|
-
var _a, _b;
|
|
28275
|
-
(_a = this.refPopover) === null || _a === void 0 ? void 0 : _a.addEventListener('toggle', this.handleToggle.bind(this));
|
|
28276
|
-
(_b = this.refPopover) === null || _b === void 0 ? void 0 : _b.addEventListener('beforetoggle', this.handleBeforeToggle.bind(this));
|
|
28277
|
-
}
|
|
28278
|
-
disconnectedCallback() {
|
|
28279
|
-
var _a, _b, _c;
|
|
28280
|
-
(_a = this.refPopover) === null || _a === void 0 ? void 0 : _a.removeEventListener('toggle', this.handleToggle.bind(this));
|
|
28281
|
-
(_b = this.refPopover) === null || _b === void 0 ? void 0 : _b.removeEventListener('beforetoggle', this.handleBeforeToggle.bind(this));
|
|
28282
|
-
(_c = this.cleanupAutoPositioning) === null || _c === void 0 ? void 0 : _c.call(this);
|
|
28283
|
-
}
|
|
28284
28122
|
render() {
|
|
28285
|
-
return (hAsync(
|
|
28123
|
+
return (hAsync(Fragment, null, hAsync(KolButtonWcTag, { key: 'db2056af2e8d1f23cdeb52483bf185748f699e87', class: clsx('kol-popover-button', {
|
|
28286
28124
|
'kol-popover-button--open': this.popoverOpen,
|
|
28287
28125
|
'kol-popover-button--inline': this.state._inline === true,
|
|
28288
28126
|
'kol-popover-button--standalone': this.state._inline === false,
|
|
28289
|
-
})
|
|
28127
|
+
}), _accessKey: this._accessKey, _ariaControls: this.popoverId, _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this.on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant, ref: this.setButtonElementRef }, hAsync("slot", { key: '1a24b934b3b971dd497a06b17a5d18e91fc934dc', name: "expert", slot: "expert" })), hAsync(PopoverFC, { key: '9127d6bf4f81714823c2285c69991088de46b38a', align: this.state._popoverAlign || 'bottom', popoverRef: this.setPopoverElementRef, class: "kol-popover-button__popover", id: this.popoverId }, hAsync("slot", { key: '506ef1fd94d0e91de8ec7ab2586b3eca1918f886' }))));
|
|
28290
28128
|
}
|
|
28291
28129
|
validateInline(value) {
|
|
28292
28130
|
validateInline(this, value, {
|
|
@@ -28295,11 +28133,29 @@ class KolPopoverButton {
|
|
|
28295
28133
|
}
|
|
28296
28134
|
validatePopoverAlign(value) {
|
|
28297
28135
|
validatePopoverAlign(this, value);
|
|
28136
|
+
if (value) {
|
|
28137
|
+
this.popoverCtrl.setAlign(value);
|
|
28138
|
+
}
|
|
28298
28139
|
}
|
|
28299
28140
|
componentWillLoad() {
|
|
28300
28141
|
this.validateInline(this._inline);
|
|
28301
28142
|
this.validatePopoverAlign(this._popoverAlign);
|
|
28302
28143
|
}
|
|
28144
|
+
componentDidRender() {
|
|
28145
|
+
if (this.popoverElement) {
|
|
28146
|
+
this.popoverElement.addEventListener('toggle', this.handleToggle);
|
|
28147
|
+
}
|
|
28148
|
+
if (this.state._popoverAlign) {
|
|
28149
|
+
this.popoverCtrl.setAlign(this.state._popoverAlign);
|
|
28150
|
+
}
|
|
28151
|
+
}
|
|
28152
|
+
disconnectedCallback() {
|
|
28153
|
+
if (this.popoverElement) {
|
|
28154
|
+
this.popoverElement.removeEventListener('toggle', this.handleToggle);
|
|
28155
|
+
}
|
|
28156
|
+
this.popoverCtrl.destroy();
|
|
28157
|
+
this.popoverElement = undefined;
|
|
28158
|
+
}
|
|
28303
28159
|
static get watchers() { return {
|
|
28304
28160
|
"_inline": ["validateInline"],
|
|
28305
28161
|
"_popoverAlign": ["validatePopoverAlign"]
|
|
@@ -28327,7 +28183,6 @@ class KolPopoverButton {
|
|
|
28327
28183
|
"_value": [8],
|
|
28328
28184
|
"_variant": [1],
|
|
28329
28185
|
"state": [32],
|
|
28330
|
-
"justClosed": [32],
|
|
28331
28186
|
"popoverOpen": [32],
|
|
28332
28187
|
"hidePopover": [64],
|
|
28333
28188
|
"showPopover": [64],
|
|
@@ -28464,7 +28319,7 @@ class KolProgress extends BaseWebComponent {
|
|
|
28464
28319
|
this.ctrl.destroy();
|
|
28465
28320
|
}
|
|
28466
28321
|
render() {
|
|
28467
|
-
return (hAsync(Host, { key: '
|
|
28322
|
+
return (hAsync(Host, { key: 'f4ac31d34bcf5b79af35229f3ffea6243af399a6' }, hAsync(ProgressFC, { key: '587e065337158c4301d523f2d2330ce1c46b7bbc', label: this.ctrl.getRenderProp('label'), max: this.ctrl.getRenderProp('max'), unit: this.ctrl.getRenderProp('unit'), value: this.ctrl.getRenderProp('value'), variant: this.ctrl.getRenderProp('variant'), liveValue: this.liveValue })));
|
|
28468
28323
|
}
|
|
28469
28324
|
static get watchers() { return {
|
|
28470
28325
|
"_label": ["watchLabel"],
|
|
@@ -28573,7 +28428,7 @@ class KolQuote extends BaseWebComponent {
|
|
|
28573
28428
|
});
|
|
28574
28429
|
}
|
|
28575
28430
|
render() {
|
|
28576
|
-
return (hAsync(Host, { key: '
|
|
28431
|
+
return (hAsync(Host, { key: 'f447a4d3e7350d1bef5337fe61c098d0d916c44b' }, hAsync(QuoteFC, { key: '3f62e1b79d24030ab8011debe385a2b2c145e578', href: this.ctrl.getRenderProp('href'), label: this.ctrl.getRenderProp('label'), quote: this.ctrl.getRenderProp('quote'), variant: this.ctrl.getRenderProp('variant') })));
|
|
28577
28432
|
}
|
|
28578
28433
|
static get watchers() { return {
|
|
28579
28434
|
"_href": ["watchHref"],
|
|
@@ -28599,7 +28454,7 @@ class KolQuote extends BaseWebComponent {
|
|
|
28599
28454
|
}; }
|
|
28600
28455
|
}
|
|
28601
28456
|
|
|
28602
|
-
const defaultStyleCss$d = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n display: ruby;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-select {\n background-color: transparent;\n width: 100%;\n }\n .kol-select:not(:disabled) {\n cursor: pointer;\n }\n .kol-select:not([multiple], [size]) {\n height: 2.75em;\n }\n .kol-select:focus {\n outline: none;\n }\n .kol-select__option:checked::before {\n content: \"✓ \";\n }\n .kol-select {\n /* needed hack for vertical alignment */\n }\n .kol-select[multiple] option {\n padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n }\n}";
|
|
28457
|
+
const defaultStyleCss$d = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n flex-flow: row;\n align-items: flex-start;\n justify-content: flex-start;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-select {\n background-color: transparent;\n width: 100%;\n }\n .kol-select:not(:disabled) {\n cursor: pointer;\n }\n .kol-select:not([multiple], [size]) {\n height: 2.75em;\n }\n .kol-select:focus {\n outline: none;\n }\n .kol-select__option:checked::before {\n content: \"✓ \";\n }\n .kol-select {\n /* needed hack for vertical alignment */\n }\n .kol-select[multiple] option {\n padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n }\n}";
|
|
28603
28458
|
|
|
28604
28459
|
class KolSelect {
|
|
28605
28460
|
constructor(hostRef) {
|
|
@@ -28625,7 +28480,7 @@ class KolSelect {
|
|
|
28625
28480
|
return Promise.resolve((_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
28626
28481
|
}
|
|
28627
28482
|
render() {
|
|
28628
|
-
return (hAsync(Host, { key: '
|
|
28483
|
+
return (hAsync(Host, { key: '18ed5d17c43aecc4d09f4e01364e002c0d162cf2', class: "kol-select" }, hAsync(KolSelectWcTag, { key: '8b059b46b73ef68a3e1a3d469731b0f2c2b6a0ba', ref: this.catchRef, _accessKey: this._accessKey, _disabled: this._disabled, _hideLabel: this._hideLabel, _hideMsg: this._hideMsg, _hint: this._hint, _icons: this._icons, _label: this._label, _msg: this._msg, _multiple: this._multiple, _name: this._name, _on: this._on, _options: this._options, _required: this._required, _rows: this._rows, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _touched: this._touched, _value: this._value }, hAsync("slot", { key: '569af400b3094800061ce18818c34fbde0bbab43', name: "expert", slot: "expert" }))));
|
|
28629
28484
|
}
|
|
28630
28485
|
static get style() { return {
|
|
28631
28486
|
default: defaultStyleCss$d
|
|
@@ -28888,11 +28743,11 @@ class KolSelectWc {
|
|
|
28888
28743
|
} });
|
|
28889
28744
|
}
|
|
28890
28745
|
render() {
|
|
28891
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
28746
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '5775e6003b7b15d50230b8153bb2acd4b2f9fef6' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '41a00b9773325bbf9992fa7c1830023186621ce7', state: this.state }, hAsync("form", { key: '6a2d726855a7a18455e371489417e9fe376ac5a0', onSubmit: (event) => {
|
|
28892
28747
|
event.preventDefault();
|
|
28893
28748
|
propagateSubmitEventToForm({
|
|
28894
28749
|
form: this.host});
|
|
28895
|
-
} }, hAsync("input", { key: '
|
|
28750
|
+
} }, hAsync("input", { key: '7f72fb951da504157257b4f16188968d480b133b', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: '444c0f0a2556ffef9b6be81f7611875dea371b6b' }, this.getSelectProps()))))));
|
|
28896
28751
|
}
|
|
28897
28752
|
constructor(hostRef) {
|
|
28898
28753
|
registerInstance(this, hostRef);
|
|
@@ -29117,7 +28972,7 @@ class SingleSelectController extends InputIconController {
|
|
|
29117
28972
|
}
|
|
29118
28973
|
}
|
|
29119
28974
|
|
|
29120
|
-
const defaultStyleCss$c = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-option {\n line-height: 1.5;\n white-space: normal;\n cursor: pointer;\n overflow-wrap: break-word;\n }\n .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n cursor: none !important;\n }\n .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n cursor: not-allowed;\n }\n .kol-custom-suggestions-options-group {\n background-color: white;\n display: block;\n position: absolute;\n z-index: 2;\n max-height: calc(250 * 1rem / 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 .kol-input-container:has(.kol-custom-suggestions-options-group--open) {\n z-index: 10;\n }\n .kol-custom-suggestions-toggle {\n display: flex;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: default;\n }\n .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n cursor: not-allowed;\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n display: ruby;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-single-select__delete .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-single-select__delete :host {\n display: inline-block;\n }\n .kol-single-select__delete .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-single-select__delete .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-single-select__delete .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-single-select__delete .kol-button {\n margin-top: -2px;\n margin-bottom: -2px;\n }\n .kol-single-select__no-results-message {\n display: flex;\n min-height: calc(50 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n justify-content: center;\n cursor: default;\n }\n .kol-single-select .kol-custom-suggestions-options-group {\n max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * var(--visible-options, 5) + 2 * 1rem / var(--kolibri-root-font-size, 16)) !important;\n }\n .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n cursor: pointer;\n }\n .kol-custom-suggestions-toggle--disabled {\n opacity: 0.5;\n }\n}";
|
|
28975
|
+
const defaultStyleCss$c = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-option {\n line-height: 1.5;\n white-space: normal;\n cursor: pointer;\n overflow-wrap: break-word;\n }\n .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n cursor: none !important;\n }\n .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n cursor: not-allowed;\n }\n .kol-custom-suggestions-options-group {\n background-color: white;\n display: block;\n position: absolute;\n z-index: 2;\n max-height: calc(250 * 1rem / 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 .kol-input-container:has(.kol-custom-suggestions-options-group--open) {\n z-index: 10;\n }\n .kol-custom-suggestions-toggle {\n display: flex;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: default;\n }\n .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n cursor: not-allowed;\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n flex-flow: row;\n align-items: flex-start;\n justify-content: flex-start;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-single-select__delete .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-single-select__delete :host {\n display: inline-block;\n }\n .kol-single-select__delete .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-single-select__delete .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-single-select__delete .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-single-select__delete .kol-button {\n margin-top: -2px;\n margin-bottom: -2px;\n }\n .kol-single-select__no-results-message {\n display: flex;\n min-height: calc(50 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n justify-content: center;\n cursor: default;\n }\n .kol-single-select .kol-custom-suggestions-options-group {\n max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * var(--visible-options, 5) + 2 * 1rem / var(--kolibri-root-font-size, 16)) !important;\n }\n .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n cursor: pointer;\n }\n .kol-custom-suggestions-toggle--disabled {\n opacity: 0.5;\n }\n}";
|
|
29121
28976
|
|
|
29122
28977
|
class KolSingleSelect {
|
|
29123
28978
|
async getValue() {
|
|
@@ -29302,15 +29157,15 @@ class KolSingleSelect {
|
|
|
29302
29157
|
render() {
|
|
29303
29158
|
var _a;
|
|
29304
29159
|
const isDisabled = this.state._disabled === true;
|
|
29305
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
29160
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '936aea64c96e1b41c51491d9b12e2007e86ab538' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'ee1dbbac05316279a73a31ec3fe01ffd353d8439', state: this.state }, hAsync("div", { key: 'ba8dfa3a0453f83ae87b3ab9897ef37c18f0c23a', class: "kol-single-select__group" }, hAsync(InputStateWrapper, Object.assign({ key: '3fc17ed11af99cdec2a955722f17399721773f3b' }, this.getInputProps())), this._inputValue && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: '78a7745d98330067ee4d2a6eef8245ebdce5709f', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: "kol-single-select__delete", hidden: isDisabled, _on: {
|
|
29306
29161
|
onClick: () => {
|
|
29307
29162
|
var _a;
|
|
29308
29163
|
this.clearSelection();
|
|
29309
29164
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
29310
29165
|
},
|
|
29311
|
-
} })), hAsync(IconFC, { key: '
|
|
29166
|
+
} })), hAsync(IconFC, { key: 'b43ff56f9232d62b081035ccd11d7a88f1b8c195', icons: "kolicon-chevron-down", label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
29312
29167
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
29313
|
-
}), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: '
|
|
29168
|
+
}), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: 'c7c67612809bad524cd1a9c636d4dcec2af58b06', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, hidden: !this._isOpen || isDisabled }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option.label, searchTerm: this._inputValue, ref: (el) => {
|
|
29314
29169
|
if (el)
|
|
29315
29170
|
this.refOptions[index] = el;
|
|
29316
29171
|
}, selected: this._value === option.value, disabled: option.disabled ? true : false, onClick: (event) => {
|
|
@@ -29779,7 +29634,7 @@ class KolSkeleton extends BaseWebComponent {
|
|
|
29779
29634
|
this.ctrl.destroy();
|
|
29780
29635
|
}
|
|
29781
29636
|
render() {
|
|
29782
|
-
return (hAsync(Host, { key: '
|
|
29637
|
+
return (hAsync(Host, { key: '8b04c40db5658a744af6aaff13262f5d1e08af3e' }, hAsync(SkeletonFC, { key: 'a7ba98cc2620d5aa4d6fb28fc02df5b18a0aa273', count: this.count, label: this.label, name: this.ctrl.getRenderProp('name'), handleClick: () => this.ctrl.handleClick(), onLoaded: this.loaded, onRendered: this.rendered, show: this.show, refButton: (element) => this.ctrl.setButtonRef(element) })));
|
|
29783
29638
|
}
|
|
29784
29639
|
static get watchers() { return {
|
|
29785
29640
|
"_name": ["watchName"]
|
|
@@ -29801,7 +29656,7 @@ class KolSkeleton extends BaseWebComponent {
|
|
|
29801
29656
|
}; }
|
|
29802
29657
|
}
|
|
29803
29658
|
|
|
29804
|
-
const defaultStyleCss$b = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-link {\n display: inline-flex;\n max-width: fit-content;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-link--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: stretch;\n }\n .kol-link--standalone .kol-link__text {\n display: inline-flex;\n flex: 1 1 100%;\n place-items: center;\n }\n .kol-link .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-skip-nav__list {\n display: grid;\n place-items: center;\n list-style: none;\n }\n .kol-skip-nav__list-item {\n height: 0;\n }\n .kol-skip-nav .kol-link {\n position: absolute;\n left: calc(-99999 * 1rem / var(--kolibri-root-font-size, 16));\n z-index: 9999999;\n line-height: 1;\n }\n .kol-skip-nav .kol-link:focus {\n background-color: #fff;\n position: unset;\n left: unset;\n }\n}";
|
|
29659
|
+
const defaultStyleCss$b = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-link {\n display: inline-flex;\n max-width: fit-content;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-link--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: stretch;\n }\n .kol-link--standalone .kol-link__text {\n display: inline-flex;\n flex: 1 1 100%;\n place-items: center;\n }\n .kol-link .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-skip-nav__list {\n display: grid;\n place-items: center;\n list-style: none;\n }\n .kol-skip-nav__list-item {\n height: 0;\n }\n .kol-skip-nav .kol-link {\n position: absolute;\n left: calc(-99999 * 1rem / var(--kolibri-root-font-size, 16));\n z-index: 9999999;\n line-height: 1;\n }\n .kol-skip-nav .kol-link:focus {\n background-color: #fff;\n position: unset;\n left: unset;\n }\n}";
|
|
29805
29660
|
|
|
29806
29661
|
class KolSkipNav {
|
|
29807
29662
|
constructor(hostRef) {
|
|
@@ -29812,7 +29667,7 @@ class KolSkipNav {
|
|
|
29812
29667
|
};
|
|
29813
29668
|
}
|
|
29814
29669
|
render() {
|
|
29815
|
-
return (hAsync("nav", { key: '
|
|
29670
|
+
return (hAsync("nav", { key: 'fe57cc1ba10ecafa0c82c8796ae3cd0d540b8491', class: "kol-skip-nav", "aria-label": this.state._label }, hAsync("ul", { key: 'f236d8b1c3e486d8199b12134484411f16554971', class: "kol-skip-nav__list" }, this.state._links.map((link, index) => {
|
|
29816
29671
|
return (hAsync("li", { class: "kol-skip-nav__list-item", key: index }, hAsync(KolLinkWcTag, Object.assign({}, link, { ref: index === 0 ? (el) => (this.firstLinkRef = el) : undefined }))));
|
|
29817
29672
|
}))));
|
|
29818
29673
|
}
|
|
@@ -29888,7 +29743,7 @@ class KolSpin {
|
|
|
29888
29743
|
}
|
|
29889
29744
|
render() {
|
|
29890
29745
|
var _a, _b;
|
|
29891
|
-
return (hAsync(Host, { key: '
|
|
29746
|
+
return (hAsync(Host, { key: '4ce443b0310dd605a253a1520cb0dcdfcc4e5a22', class: "kol-spin" }, this.state._show ? (hAsync(Fragment, null, hAsync("span", { class: clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`) }, renderSpin(this.state._variant)), hAsync("span", { "aria-busy": "true", class: "visually-hidden", role: "alert" }, (_a = this.state._label) !== null && _a !== void 0 ? _a : this.translateActionRunning))) : (this.showToggled && (hAsync("span", { "aria-busy": "false", class: "visually-hidden", role: "alert" }, (_b = this.state._label) !== null && _b !== void 0 ? _b : this.translateActionDone)))));
|
|
29892
29747
|
}
|
|
29893
29748
|
validateShow(value) {
|
|
29894
29749
|
this.showToggled = this.state._show === true && this._show === false;
|
|
@@ -29928,7 +29783,7 @@ class KolSpin {
|
|
|
29928
29783
|
}; }
|
|
29929
29784
|
}
|
|
29930
29785
|
|
|
29931
|
-
const defaultStyleCss$9 = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n .kol-popover {\n position: absolute;\n height: 0;\n }\n .kol-popover__content {\n opacity: 0;\n background-color: #fff;\n position: absolute;\n min-width: max-content;\n min-height: max-content;\n margin: 0;\n }\n .kol-popover__content--visible {\n animation: 0.3s ease-in forwards fadeInOpacity;\n }\n .kol-popover__content--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}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-split-button {\n display: flex;\n position: relative;\n width: 100%;\n }\n .kol-split-button__root {\n display: flex;\n position: relative;\n width: 100%;\n align-items: stretch;\n }\n .kol-split-button__button {\n min-width: 0;\n flex: 1 1 auto;\n text-align: left;\n }\n .kol-split-button .kol-popover {\n z-index: 1;\n }\n .kol-split-button .kol-popover__content {\n margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-split-button .kol-popover__arrow {\n display: none;\n }\n}";
|
|
29786
|
+
const defaultStyleCss$9 = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-popover-button__popover {\n margin: 0;\n padding: 0;\n border: 0;\n }\n .kol-popover-button--inline .kol-popover-button__button {\n display: inline;\n }\n .kol-popover {\n opacity: 0;\n transition: 0.2s ease-out opacity;\n }\n .kol-popover-button--open + .kol-popover {\n opacity: 1;\n }\n .kol-split-button {\n display: flex;\n position: relative;\n width: 100%;\n }\n .kol-split-button__root {\n display: flex;\n position: relative;\n width: 100%;\n align-items: stretch;\n }\n .kol-split-button__button {\n min-width: 0;\n flex: 1 1 auto;\n text-align: left;\n }\n}";
|
|
29932
29787
|
|
|
29933
29788
|
class KolSplitButton {
|
|
29934
29789
|
constructor(hostRef) {
|
|
@@ -29936,6 +29791,9 @@ class KolSplitButton {
|
|
|
29936
29791
|
this.catchPrimaryRef = (ref) => {
|
|
29937
29792
|
this.primaryButtonWcRef = ref;
|
|
29938
29793
|
};
|
|
29794
|
+
this.catchPopoverButtonRef = (ref) => {
|
|
29795
|
+
this.popoverButtonRef = ref;
|
|
29796
|
+
};
|
|
29939
29797
|
this.clickButtonHandler = {
|
|
29940
29798
|
onClick: (event) => {
|
|
29941
29799
|
var _a, _b;
|
|
@@ -29945,18 +29803,6 @@ class KolSplitButton {
|
|
|
29945
29803
|
}
|
|
29946
29804
|
},
|
|
29947
29805
|
};
|
|
29948
|
-
this.clickToggleHandler = {
|
|
29949
|
-
onClick: (event) => {
|
|
29950
|
-
event.stopPropagation();
|
|
29951
|
-
this.toggleDropdown();
|
|
29952
|
-
},
|
|
29953
|
-
};
|
|
29954
|
-
this.toggleDropdown = () => {
|
|
29955
|
-
this.state = Object.assign(Object.assign({}, this.state), { _show: !this.state._show });
|
|
29956
|
-
};
|
|
29957
|
-
this.handleOnClose = () => {
|
|
29958
|
-
this.state = Object.assign(Object.assign({}, this.state), { _show: false });
|
|
29959
|
-
};
|
|
29960
29806
|
this._disabled = false;
|
|
29961
29807
|
this._hideLabel = false;
|
|
29962
29808
|
this._tooltipAlign = 'top';
|
|
@@ -29975,13 +29821,17 @@ class KolSplitButton {
|
|
|
29975
29821
|
}
|
|
29976
29822
|
render() {
|
|
29977
29823
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
29978
|
-
return (hAsync("div", { key: '
|
|
29824
|
+
return (hAsync("div", { key: 'bda3622cb0df5ec1f6d58178aa61fbd1c37a7c3e', class: "kol-split-button" }, hAsync("div", { key: '9e2d680ad0128155ea4e61038bc62bd1bcffb516', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: 'ea16cb0ca85d9dbe1173e7dfccbbdaac032fecde', class: clsx('kol-split-button__button', {
|
|
29979
29825
|
[this._variant]: this._variant !== 'custom',
|
|
29980
29826
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
29981
|
-
}), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: '
|
|
29827
|
+
}), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: '629f7b39bac0269b942a92c99caaee507feb81e0', class: "kol-split-button__horizontal-line" }), hAsync(KolPopoverButtonWcTag, { key: 'cfb8d0df6d68a33838dc18421083e9753aeac710', class: "kol-split-button__secondary-button", ref: this.catchPopoverButtonRef, _disabled: this._disabled, _hideLabel: true, _icons: "kolicon-chevron-down", _label: translate(`${i18nDropdownLabel}-open`), _popoverAlign: "bottom" }, hAsync("slot", { key: '708d06666f1643467c8ae5c3598afd6f7916da03' })))));
|
|
29828
|
+
}
|
|
29829
|
+
connectedCallback() {
|
|
29830
|
+
this.state = Object.assign(Object.assign({}, this.state), { _show: false });
|
|
29982
29831
|
}
|
|
29983
29832
|
async closePopup() {
|
|
29984
|
-
|
|
29833
|
+
var _a;
|
|
29834
|
+
void ((_a = this.popoverButtonRef) === null || _a === void 0 ? void 0 : _a.hidePopover());
|
|
29985
29835
|
return Promise.resolve();
|
|
29986
29836
|
}
|
|
29987
29837
|
static get style() { return {
|
|
@@ -30119,7 +29969,7 @@ class KolTableSettings {
|
|
|
30119
29969
|
}
|
|
30120
29970
|
render() {
|
|
30121
29971
|
const columns = this.getPrimaryRow();
|
|
30122
|
-
return (hAsync(KolPopoverButtonWcTag, { key: '
|
|
29972
|
+
return (hAsync(KolPopoverButtonWcTag, { key: '1975272bc707234b86bbec699784f581ca0311f2', ref: (el) => (this.popoverRef = el), class: "kol-table-settings", _icons: "kolicon-settings", _label: this.translateTableSettings, _popoverAlign: "top", _hideLabel: true }, hAsync("div", { key: 'b7b06e655b9d6906e2b79c36deabc2a74ff6289e', class: "kol-table-settings__content" }, hAsync(KolHeadingTag, { key: '87a7389ec7f598907c0a05ca11ba73864b4a6ebf', _label: this.translateTableSettings, _level: 0 }), this.errorMessage && hAsync(KolAlertWcTag, { key: 'e5d5f3a1dc13d423fd4a51d46ae3e218fb78cc4a', _type: "error", _label: this.errorMessage, _variant: "msg", class: "kol-table-settings__error-message" }), hAsync("form", { key: '5fe361f0beea2a7884aa676f1448164659377e50', onSubmit: this.handleSubmit.bind(this) }, hAsync("div", { key: 'f8c5fcded5ca770a423aad13d8f155546bec367a', class: "kol-table-settings__columns-container" }, hAsync("div", { key: '1ebdc690028251dd72fe13a80a791fe6c2519ab4', class: "kol-table-settings__columns" }, columns.map((column, index) => (hAsync("div", { key: column.key, class: "kol-table-settings__column" }, hAsync(KolInputCheckboxTag, { _checked: column.visible !== false, _label: `${column.label}${column.hidable === false ? ` (${this.translateColumnNotHidable})` : ''}`, _value: true, _hideLabel: true, _disabled: column.hidable === false, _on: { onInput: (_, value) => { var _a; return this.handleVisibilityChange((_a = column.key) !== null && _a !== void 0 ? _a : '', value); } } }), hAsync("span", { class: "kol-table-settings__column-label" }, column.label), hAsync(KolInputNumberTag, { _hideLabel: true, _value: parseColumnWidth(column.width), _label: translate('kol-table-settings-column-width', { placeholders: { column: column.label } }), _min: 1, _disabled: column.resizable === false, _on: { onInput: (_, value) => { var _a; return this.handleWidthChange((_a = column.key) !== null && _a !== void 0 ? _a : '', value); } } }), hAsync(KolButtonWcTag, { _icons: "kolicon-chevron-up", _label: translate('kol-table-settings-move-up', { placeholders: { column: column.label } }), _hideLabel: true, _variant: "ghost", _on: { onClick: () => { var _a; return this.moveColumn((_a = column.key) !== null && _a !== void 0 ? _a : '', 'up'); } }, _disabled: column.sortable === false || index === 0, "data-testid": "table-settings-move-up" }), hAsync(KolButtonWcTag, { _icons: "kolicon-chevron-down", _label: translate('kol-table-settings-move-down', { placeholders: { column: column.label } }), _hideLabel: true, _variant: "ghost", _on: { onClick: () => { var _a; return this.moveColumn((_a = column.key) !== null && _a !== void 0 ? _a : '', 'down'); } }, _disabled: column.sortable === false || index === columns.length - 1, "data-testid": "table-settings-move-down" })))))), hAsync("div", { key: '144a7dfd63342d1c6283c4ec0a1b7040cd9c090d', class: "kol-table-settings__actions" }, hAsync(KolButtonWcTag, { key: '9a2f9b7edeac53efc761ed21b16725e725020cb5', _label: this.translateTableSettingsCancel, _variant: "secondary", _on: { onClick: () => this.handleCancel() }, "data-testid": "table-settings-cancel" }), hAsync(KolButtonWcTag, { key: '17011ca3ff5969c60971e299dcab687569243400', _label: this.translateTableSettingsApply, _variant: "primary", _type: "submit", "data-testid": "table-settings-apply" }))))));
|
|
30123
29973
|
}
|
|
30124
29974
|
get host() { return getElement(this); }
|
|
30125
29975
|
static get watchers() { return {
|
|
@@ -30178,7 +30028,7 @@ var KeyboardKey;
|
|
|
30178
30028
|
KeyboardKey["Space"] = " ";
|
|
30179
30029
|
})(KeyboardKey || (KeyboardKey = {}));
|
|
30180
30030
|
|
|
30181
|
-
const defaultStyleCss$8 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-popover-button__popover {\n margin: 0;\n padding: 0;\n border: 0;\n }\n .kol-popover-button--inline .kol-popover-button__button {\n display: inline;\n }\n .kol-table-settings {\n background: #fff;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n }\n .kol-table-settings .kol-popover-button__popover {\n background: #fff;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border: 1px solid #d1d5db;\n }\n .kol-table-settings__columns-container {\n max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n overflow: auto;\n }\n .kol-table-settings__columns {\n display: grid;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-auto-rows: min-content;\n grid-template-columns: min-content minmax(max-content, 1fr) calc(140 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n }\n .kol-table-settings__column {\n display: contents;\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-table {\n --kol-table-selection-col-width: var(--a11y-min-size);\n display: block;\n position: relative;\n max-width: 100%;\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n .kol-table__scroll-container {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .kol-table__table {\n table-layout: fixed;\n }\n .kol-table__caption {\n min-height: var(--a11y-min-size);\n padding-right: var(--a11y-min-size);\n text-align: start;\n }\n .kol-table__sort-button .kol-button {\n color: inherit;\n }\n .kol-table__sort {\n display: inline-flex;\n gap: 0.25rem;\n align-items: center;\n }\n .kol-table__sort-order {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .kol-table__body {\n text-align: left;\n }\n .kol-table__body .kol-button__text {\n justify-items: start;\n }\n .kol-table__cell--align-left {\n text-align: left;\n }\n .kol-table__cell--align-left .kol-button__text {\n align-items: start;\n }\n .kol-table__cell--align-center {\n text-align: center;\n }\n .kol-table__cell--align-center .kol-button__text {\n align-items: center;\n }\n .kol-table__cell--align-right {\n text-align: right;\n }\n .kol-table__cell--align-right .kol-button__text {\n align-items: end;\n }\n .kol-table__cell--selection {\n background-color: white;\n position: sticky !important;\n left: 0;\n z-index: 2;\n width: var(--kol-table-selection-col-width, auto);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .kol-table__cell--actions {\n white-space: nowrap;\n }\n .kol-table__cell--actions .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-table__cell--actions :host {\n display: inline-block;\n }\n .kol-table__cell--actions .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-table__cell--actions .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-table__cell--actions .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-table__cell--actions .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-table__cell--actions :host {\n display: inline-block;\n }\n .kol-table__cell--actions .kol-link {\n display: inline-flex;\n max-width: fit-content;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-table__cell--actions .kol-link--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: stretch;\n }\n .kol-table__cell--actions .kol-link--standalone .kol-link__text {\n display: inline-flex;\n flex: 1 1 100%;\n place-items: center;\n }\n .kol-table__cell--actions .kol-link .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-table__cell--actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell--actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-table__cell--actions .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell--sticky-left, .kol-table__cell--sticky-right {\n background-color: white;\n position: sticky !important;\n z-index: 1;\n }\n .kol-table__cell--sticky-left:nth-last-child(1 of .kol-table__cell--sticky-left) {\n border-right: 2px solid black;\n }\n .kol-table__cell--sticky-right:nth-child(1 of .kol-table__cell--sticky-left) {\n border-left: 2px solid black;\n }\n .kol-table__cell-actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection {\n position: relative;\n }\n .kol-table__selection-label {\n display: flex;\n position: relative;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n .kol-table__selection--disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-icon {\n display: block;\n position: absolute;\n inset: auto;\n z-index: 1;\n }\n .kol-table__selection-input {\n border-style: solid;\n margin: 0;\n appearance: none;\n cursor: pointer;\n }\n .kol-table__selection-input:disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-input:before {\n content: \"\";\n }\n .kol-table__selection-input--checkbox {\n background-color: rgb(255, 255, 255);\n display: flex;\n position: relative;\n min-width: calc(var(--a11y-min-size) / 2);\n min-height: calc(var(--a11y-min-size) / 2);\n border-width: 2px;\n align-items: center;\n justify-content: center;\n line-height: 1.5;\n }\n .kol-table__selection-input--radio {\n border-radius: 100%;\n display: flex;\n width: 1.5em;\n min-width: 1.5em;\n height: 1.5em;\n min-height: 1.5em;\n padding: 0;\n border-width: 2px;\n }\n .kol-table__selection-input--radio:before {\n border-radius: 100%;\n width: 0.75em;\n height: 0.75em;\n margin: auto;\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .kol-table__selection-input--radio:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n display: ruby;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-select {\n background-color: transparent;\n width: 100%;\n }\n .kol-select:not(:disabled) {\n cursor: pointer;\n }\n .kol-select:not([multiple], [size]) {\n height: 2.75em;\n }\n .kol-select:focus {\n outline: none;\n }\n .kol-select__option:checked::before {\n content: \"✓ \";\n }\n .kol-select {\n /* needed hack for vertical alignment */\n }\n .kol-select[multiple] option {\n padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-pagination {\n display: flex;\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n container: paging/inline-size;\n }\n .kol-pagination__navigation-list {\n display: inline-flex;\n margin: 0;\n padding: 0;\n gap: 0.5em; /* @deprecated: do not use gap, margin, padding and so on in basis styling */\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n }\n .kol-pagination__separator:before {\n content: \"•••\";\n }\n .kol-pagination__page-size-select .kol-form-field-select {\n align-items: center;\n grid-template-columns: 1fr max-content;\n }\n @container paging (width < 600px) {\n .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__button--numbers),\n .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__separator) {\n display: none;\n }\n }\n}";
|
|
30031
|
+
const defaultStyleCss$8 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-popover-button__popover {\n margin: 0;\n padding: 0;\n border: 0;\n }\n .kol-popover-button--inline .kol-popover-button__button {\n display: inline;\n }\n .kol-popover {\n opacity: 0;\n transition: 0.2s ease-out opacity;\n }\n .kol-popover-button--open + .kol-popover {\n opacity: 1;\n }\n .kol-table-settings {\n background: #fff;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n }\n .kol-table-settings .kol-popover-button__popover {\n background: #fff;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border: 1px solid #d1d5db;\n }\n .kol-table-settings__columns-container {\n max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n overflow: auto;\n }\n .kol-table-settings__columns {\n display: grid;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-auto-rows: min-content;\n grid-template-columns: min-content minmax(max-content, 1fr) calc(140 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n }\n .kol-table-settings__column {\n display: contents;\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-table {\n --kol-table-selection-col-width: var(--a11y-min-size);\n display: block;\n position: relative;\n max-width: 100%;\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n .kol-table__scroll-container {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .kol-table__table {\n table-layout: fixed;\n }\n .kol-table__caption {\n min-height: var(--a11y-min-size);\n padding-right: var(--a11y-min-size);\n text-align: start;\n }\n .kol-table__sort-button .kol-button {\n color: inherit;\n }\n .kol-table__sort {\n display: inline-flex;\n gap: 0.25rem;\n align-items: center;\n }\n .kol-table__sort-order {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .kol-table__body {\n text-align: left;\n }\n .kol-table__body .kol-button__text {\n justify-items: start;\n }\n .kol-table__cell--align-left {\n text-align: left;\n }\n .kol-table__cell--align-left .kol-button__text {\n align-items: start;\n }\n .kol-table__cell--align-center {\n text-align: center;\n }\n .kol-table__cell--align-center .kol-button__text {\n align-items: center;\n }\n .kol-table__cell--align-right {\n text-align: right;\n }\n .kol-table__cell--align-right .kol-button__text {\n align-items: end;\n }\n .kol-table__cell--selection {\n background-color: white;\n position: sticky !important;\n left: 0;\n z-index: 2;\n width: var(--kol-table-selection-col-width, auto);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .kol-table__cell--actions {\n white-space: nowrap;\n }\n .kol-table__cell--actions .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-table__cell--actions :host {\n display: inline-block;\n }\n .kol-table__cell--actions .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-table__cell--actions .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-table__cell--actions .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-table__cell--actions .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-table__cell--actions :host {\n display: inline-block;\n }\n .kol-table__cell--actions .kol-link {\n display: inline-flex;\n max-width: fit-content;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-table__cell--actions .kol-link--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: stretch;\n }\n .kol-table__cell--actions .kol-link--standalone .kol-link__text {\n display: inline-flex;\n flex: 1 1 100%;\n place-items: center;\n }\n .kol-table__cell--actions .kol-link .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-table__cell--actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell--actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-table__cell--actions .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell--sticky-left, .kol-table__cell--sticky-right {\n background-color: white;\n position: sticky !important;\n z-index: 1;\n }\n .kol-table__cell--sticky-left:nth-last-child(1 of .kol-table__cell--sticky-left) {\n border-right: 2px solid black;\n }\n .kol-table__cell--sticky-right:nth-child(1 of .kol-table__cell--sticky-left) {\n border-left: 2px solid black;\n }\n .kol-table__cell-actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection {\n position: relative;\n }\n .kol-table__selection-label {\n display: flex;\n position: relative;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n .kol-table__selection--disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-icon {\n display: block;\n position: absolute;\n inset: auto;\n z-index: 1;\n }\n .kol-table__selection-input {\n border-style: solid;\n margin: 0;\n appearance: none;\n cursor: pointer;\n }\n .kol-table__selection-input:disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-input:before {\n content: \"\";\n }\n .kol-table__selection-input--checkbox {\n background-color: rgb(255, 255, 255);\n display: flex;\n position: relative;\n min-width: calc(var(--a11y-min-size) / 2);\n min-height: calc(var(--a11y-min-size) / 2);\n border-width: 2px;\n align-items: center;\n justify-content: center;\n line-height: 1.5;\n }\n .kol-table__selection-input--radio {\n border-radius: 100%;\n display: flex;\n width: 1.5em;\n min-width: 1.5em;\n height: 1.5em;\n min-height: 1.5em;\n padding: 0;\n border-width: 2px;\n }\n .kol-table__selection-input--radio:before {\n border-radius: 100%;\n width: 0.75em;\n height: 0.75em;\n margin: auto;\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .kol-table__selection-input--radio:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n flex-flow: row;\n align-items: flex-start;\n justify-content: flex-start;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-select {\n background-color: transparent;\n width: 100%;\n }\n .kol-select:not(:disabled) {\n cursor: pointer;\n }\n .kol-select:not([multiple], [size]) {\n height: 2.75em;\n }\n .kol-select:focus {\n outline: none;\n }\n .kol-select__option:checked::before {\n content: \"✓ \";\n }\n .kol-select {\n /* needed hack for vertical alignment */\n }\n .kol-select[multiple] option {\n padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-pagination {\n display: flex;\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n container: paging/inline-size;\n }\n .kol-pagination__navigation-list {\n display: inline-flex;\n margin: 0;\n padding: 0;\n gap: 0.5em; /* @deprecated: do not use gap, margin, padding and so on in basis styling */\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n }\n .kol-pagination__separator:before {\n content: \"•••\";\n }\n .kol-pagination__page-size-select .kol-form-field-select {\n align-items: center;\n grid-template-columns: 1fr max-content;\n }\n @container paging (width < 600px) {\n .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__button--numbers),\n .kol-pagination:has(.kol-pagination__button--first) li:has(.kol-pagination__separator) {\n display: none;\n }\n }\n}";
|
|
30182
30032
|
|
|
30183
30033
|
const PAGINATION_OPTIONS = [10, 20, 50, 100];
|
|
30184
30034
|
const paginationValidator = (value) => value === true || value === '' || (typeof value === 'object' && value !== null);
|
|
@@ -30513,7 +30363,7 @@ class KolTableStateful {
|
|
|
30513
30363
|
horizontal: (_d = (_c = this.state._headers.horizontal) === null || _c === void 0 ? void 0 : _c.map((row) => row.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell), sortOrder: this.getHeaderCellSortOrder(cell) }))))) !== null && _d !== void 0 ? _d : [],
|
|
30514
30364
|
vertical: (_f = (_e = this.state._headers.vertical) === null || _e === void 0 ? void 0 : _e.map((column) => column.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell), sortOrder: this.getHeaderCellSortOrder(cell) }))))) !== null && _f !== void 0 ? _f : [],
|
|
30515
30365
|
};
|
|
30516
|
-
return (hAsync(Host, { key: '
|
|
30366
|
+
return (hAsync(Host, { key: '6888614e6bc101101fc1e96c914982f49b1e8644', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: 'bdfd394adac382c7c00e0c3f6732e88da7e15484', ref: this.catchRef, _data: displayedData, _fixedCols: this._fixedCols, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _on: {
|
|
30517
30367
|
onSort: (_, payload) => {
|
|
30518
30368
|
this.handleSort(payload);
|
|
30519
30369
|
},
|
|
@@ -30563,14 +30413,14 @@ class KolTableStateful {
|
|
|
30563
30413
|
}; }
|
|
30564
30414
|
}
|
|
30565
30415
|
|
|
30566
|
-
const defaultStyleCss$7 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-popover-button__popover {\n margin: 0;\n padding: 0;\n border: 0;\n }\n .kol-popover-button--inline .kol-popover-button__button {\n display: inline;\n }\n .kol-table-settings {\n background: #fff;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n }\n .kol-table-settings .kol-popover-button__popover {\n background: #fff;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border: 1px solid #d1d5db;\n }\n .kol-table-settings__columns-container {\n max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n overflow: auto;\n }\n .kol-table-settings__columns {\n display: grid;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-auto-rows: min-content;\n grid-template-columns: min-content minmax(max-content, 1fr) calc(140 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n }\n .kol-table-settings__column {\n display: contents;\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-table {\n --kol-table-selection-col-width: var(--a11y-min-size);\n display: block;\n position: relative;\n max-width: 100%;\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n .kol-table__scroll-container {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .kol-table__table {\n table-layout: fixed;\n }\n .kol-table__caption {\n min-height: var(--a11y-min-size);\n padding-right: var(--a11y-min-size);\n text-align: start;\n }\n .kol-table__sort-button .kol-button {\n color: inherit;\n }\n .kol-table__sort {\n display: inline-flex;\n gap: 0.25rem;\n align-items: center;\n }\n .kol-table__sort-order {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .kol-table__body {\n text-align: left;\n }\n .kol-table__body .kol-button__text {\n justify-items: start;\n }\n .kol-table__cell--align-left {\n text-align: left;\n }\n .kol-table__cell--align-left .kol-button__text {\n align-items: start;\n }\n .kol-table__cell--align-center {\n text-align: center;\n }\n .kol-table__cell--align-center .kol-button__text {\n align-items: center;\n }\n .kol-table__cell--align-right {\n text-align: right;\n }\n .kol-table__cell--align-right .kol-button__text {\n align-items: end;\n }\n .kol-table__cell--selection {\n background-color: white;\n position: sticky !important;\n left: 0;\n z-index: 2;\n width: var(--kol-table-selection-col-width, auto);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .kol-table__cell--actions {\n white-space: nowrap;\n }\n .kol-table__cell--actions .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-table__cell--actions :host {\n display: inline-block;\n }\n .kol-table__cell--actions .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-table__cell--actions .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-table__cell--actions .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-table__cell--actions .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-table__cell--actions :host {\n display: inline-block;\n }\n .kol-table__cell--actions .kol-link {\n display: inline-flex;\n max-width: fit-content;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-table__cell--actions .kol-link--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: stretch;\n }\n .kol-table__cell--actions .kol-link--standalone .kol-link__text {\n display: inline-flex;\n flex: 1 1 100%;\n place-items: center;\n }\n .kol-table__cell--actions .kol-link .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-table__cell--actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell--actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-table__cell--actions .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell--sticky-left, .kol-table__cell--sticky-right {\n background-color: white;\n position: sticky !important;\n z-index: 1;\n }\n .kol-table__cell--sticky-left:nth-last-child(1 of .kol-table__cell--sticky-left) {\n border-right: 2px solid black;\n }\n .kol-table__cell--sticky-right:nth-child(1 of .kol-table__cell--sticky-left) {\n border-left: 2px solid black;\n }\n .kol-table__cell-actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection {\n position: relative;\n }\n .kol-table__selection-label {\n display: flex;\n position: relative;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n .kol-table__selection--disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-icon {\n display: block;\n position: absolute;\n inset: auto;\n z-index: 1;\n }\n .kol-table__selection-input {\n border-style: solid;\n margin: 0;\n appearance: none;\n cursor: pointer;\n }\n .kol-table__selection-input:disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-input:before {\n content: \"\";\n }\n .kol-table__selection-input--checkbox {\n background-color: rgb(255, 255, 255);\n display: flex;\n position: relative;\n min-width: calc(var(--a11y-min-size) / 2);\n min-height: calc(var(--a11y-min-size) / 2);\n border-width: 2px;\n align-items: center;\n justify-content: center;\n line-height: 1.5;\n }\n .kol-table__selection-input--radio {\n border-radius: 100%;\n display: flex;\n width: 1.5em;\n min-width: 1.5em;\n height: 1.5em;\n min-height: 1.5em;\n padding: 0;\n border-width: 2px;\n }\n .kol-table__selection-input--radio:before {\n border-radius: 100%;\n width: 0.75em;\n height: 0.75em;\n margin: auto;\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .kol-table__selection-input--radio:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n}";
|
|
30416
|
+
const defaultStyleCss$7 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-popover-button__popover {\n margin: 0;\n padding: 0;\n border: 0;\n }\n .kol-popover-button--inline .kol-popover-button__button {\n display: inline;\n }\n .kol-popover {\n opacity: 0;\n transition: 0.2s ease-out opacity;\n }\n .kol-popover-button--open + .kol-popover {\n opacity: 1;\n }\n .kol-table-settings {\n background: #fff;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n }\n .kol-table-settings .kol-popover-button__popover {\n background: #fff;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border: 1px solid #d1d5db;\n }\n .kol-table-settings__columns-container {\n max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n overflow: auto;\n }\n .kol-table-settings__columns {\n display: grid;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-auto-rows: min-content;\n grid-template-columns: min-content minmax(max-content, 1fr) calc(140 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n }\n .kol-table-settings__column {\n display: contents;\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-table {\n --kol-table-selection-col-width: var(--a11y-min-size);\n display: block;\n position: relative;\n max-width: 100%;\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n .kol-table__scroll-container {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .kol-table__table {\n table-layout: fixed;\n }\n .kol-table__caption {\n min-height: var(--a11y-min-size);\n padding-right: var(--a11y-min-size);\n text-align: start;\n }\n .kol-table__sort-button .kol-button {\n color: inherit;\n }\n .kol-table__sort {\n display: inline-flex;\n gap: 0.25rem;\n align-items: center;\n }\n .kol-table__sort-order {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .kol-table__body {\n text-align: left;\n }\n .kol-table__body .kol-button__text {\n justify-items: start;\n }\n .kol-table__cell--align-left {\n text-align: left;\n }\n .kol-table__cell--align-left .kol-button__text {\n align-items: start;\n }\n .kol-table__cell--align-center {\n text-align: center;\n }\n .kol-table__cell--align-center .kol-button__text {\n align-items: center;\n }\n .kol-table__cell--align-right {\n text-align: right;\n }\n .kol-table__cell--align-right .kol-button__text {\n align-items: end;\n }\n .kol-table__cell--selection {\n background-color: white;\n position: sticky !important;\n left: 0;\n z-index: 2;\n width: var(--kol-table-selection-col-width, auto);\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .kol-table__cell--actions {\n white-space: nowrap;\n }\n .kol-table__cell--actions .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-table__cell--actions :host {\n display: inline-block;\n }\n .kol-table__cell--actions .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-table__cell--actions .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-table__cell--actions .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-table__cell--actions .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-table__cell--actions :host {\n display: inline-block;\n }\n .kol-table__cell--actions .kol-link {\n display: inline-flex;\n max-width: fit-content;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-table__cell--actions .kol-link--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: stretch;\n }\n .kol-table__cell--actions .kol-link--standalone .kol-link__text {\n display: inline-flex;\n flex: 1 1 100%;\n place-items: center;\n }\n .kol-table__cell--actions .kol-link .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-table__cell--actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell--actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-table__cell--actions .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell--sticky-left, .kol-table__cell--sticky-right {\n background-color: white;\n position: sticky !important;\n z-index: 1;\n }\n .kol-table__cell--sticky-left:nth-last-child(1 of .kol-table__cell--sticky-left) {\n border-right: 2px solid black;\n }\n .kol-table__cell--sticky-right:nth-child(1 of .kol-table__cell--sticky-left) {\n border-left: 2px solid black;\n }\n .kol-table__cell-actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection {\n position: relative;\n }\n .kol-table__selection-label {\n display: flex;\n position: relative;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n .kol-table__selection--disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-icon {\n display: block;\n position: absolute;\n inset: auto;\n z-index: 1;\n }\n .kol-table__selection-input {\n border-style: solid;\n margin: 0;\n appearance: none;\n cursor: pointer;\n }\n .kol-table__selection-input:disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-input:before {\n content: \"\";\n }\n .kol-table__selection-input--checkbox {\n background-color: rgb(255, 255, 255);\n display: flex;\n position: relative;\n min-width: calc(var(--a11y-min-size) / 2);\n min-height: calc(var(--a11y-min-size) / 2);\n border-width: 2px;\n align-items: center;\n justify-content: center;\n line-height: 1.5;\n }\n .kol-table__selection-input--radio {\n border-radius: 100%;\n display: flex;\n width: 1.5em;\n min-width: 1.5em;\n height: 1.5em;\n min-height: 1.5em;\n padding: 0;\n border-width: 2px;\n }\n .kol-table__selection-input--radio:before {\n border-radius: 100%;\n width: 0.75em;\n height: 0.75em;\n margin: auto;\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .kol-table__selection-input--radio:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n}";
|
|
30567
30417
|
|
|
30568
30418
|
let KolTableStateless$1 = class KolTableStateless {
|
|
30569
30419
|
constructor(hostRef) {
|
|
30570
30420
|
registerInstance(this, hostRef);
|
|
30571
30421
|
}
|
|
30572
30422
|
render() {
|
|
30573
|
-
return (hAsync(KolTableStatelessWcTag, { key: '
|
|
30423
|
+
return (hAsync(KolTableStatelessWcTag, { key: 'c4704e32586768b290987004a05da52508677e34', _data: this._data, _dataFoot: this._dataFoot, _fixedCols: this._fixedCols, _headerCells: this._headerCells, _label: this._label, _on: this._on, _selection: this._selection, _hasSettingsMenu: this._hasSettingsMenu }));
|
|
30574
30424
|
}
|
|
30575
30425
|
static get style() { return {
|
|
30576
30426
|
default: defaultStyleCss$7
|
|
@@ -31302,12 +31152,12 @@ class KolTableStateless {
|
|
|
31302
31152
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
31303
31153
|
this.checkboxRefs = [];
|
|
31304
31154
|
const horizontalHeaders = this.state._headerCells.horizontal;
|
|
31305
|
-
return (hAsync("div", { key: '
|
|
31155
|
+
return (hAsync("div", { key: 'c8da0f836fcec4775d4b4343f3188c10d6d4fc18', class: "kol-table" }, this.state._hasSettingsMenu && hAsync(KolTableSettingsWcTag, { key: '45b224ddc0eb580526e7bff85f251ecdd63448c6', _horizontalHeaderCells: horizontalHeaders !== null && horizontalHeaders !== void 0 ? horizontalHeaders : [] }), hAsync("div", { key: '6cce803d3bfe750add0be9ce4ee7aa1ec94c8f7f', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '2d7a6bf3f93fff2d3fc442b5d6415d0b01cab0be', class: "kol-table__table", style: {
|
|
31306
31156
|
minWidth: this.getTableMinWidth(),
|
|
31307
|
-
} }, hAsync("caption", { key: '
|
|
31157
|
+
} }, hAsync("caption", { key: '3b81b2d13f97f23f27740cd55671a2db142be535', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(horizontalHeaders) && (hAsync("thead", { key: 'c6bf5c2b6dbf452f0526dcdd0e8d1de1d6def089', class: "kol-table__head" }, [
|
|
31308
31158
|
horizontalHeaders.map((cols, rowIndex) => (hAsync("tr", { class: "kol-table__head-row", key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) && cols.map((cell, colIndex) => this.renderHeadingCell(cell, rowIndex, colIndex, false))))),
|
|
31309
31159
|
this.renderSpacer('head', horizontalHeaders),
|
|
31310
|
-
])), hAsync("tbody", { key: '
|
|
31160
|
+
])), hAsync("tbody", { key: '23cb699f7eb6bd00e494f39d9a72a08bf73c9875', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
|
|
31311
31161
|
}
|
|
31312
31162
|
get host() { return getElement(this); }
|
|
31313
31163
|
static get watchers() { return {
|
|
@@ -31347,7 +31197,7 @@ const validateHasCreateButton = (component, value) => {
|
|
|
31347
31197
|
watchBoolean(component, '_hasCreateButton', value);
|
|
31348
31198
|
};
|
|
31349
31199
|
|
|
31350
|
-
const defaultStyleCss$6 = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tabs {\n display: var(--display);\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: var(--grid-template-rows);\n }\n .kol-tabs--align-right {\n --display: grid;\n --grid-template-columns: 1fr auto;\n --button-group-flex-direction: column;\n --button-group-order: 2;\n }\n .kol-tabs--align-left {\n --display: grid;\n --grid-template-columns: auto 1fr;\n --button-group-flex-direction: column;\n --button-group-order: 0;\n }\n .kol-tabs--align-bottom {\n --display: grid;\n --grid-template-rows: 1fr auto;\n --button-group-order: 2;\n }\n .kol-tabs__tabs-align-top {\n --display: grid;\n --grid-template-rows: auto 1fr;\n --button-group-order: 0;\n }\n .kol-tabs__button-group {\n display: flex;\n order: var(--button-group-order);\n flex-direction: var(--button-group-flex-direction);\n flex-wrap: wrap;\n }\n .kol-tabs__button-group .kol-button {\n border-bottom-color: transparent;\n display: block;\n border-bottom-style: solid;\n }\n .kol-tabs__panel {\n height: 100%;\n }\n}";
|
|
31200
|
+
const defaultStyleCss$6 = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tabs {\n display: var(--display);\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: var(--grid-template-rows);\n }\n .kol-tabs--align-right {\n --display: grid;\n --grid-template-columns: 1fr auto;\n --button-group-flex-direction: column;\n --button-group-order: 2;\n }\n .kol-tabs--align-left {\n --display: grid;\n --grid-template-columns: auto 1fr;\n --button-group-flex-direction: column;\n --button-group-order: 0;\n }\n .kol-tabs--align-bottom {\n --display: grid;\n --grid-template-rows: 1fr auto;\n --button-group-order: 2;\n }\n .kol-tabs__tabs-align-top {\n --display: grid;\n --grid-template-rows: auto 1fr;\n --button-group-order: 0;\n }\n .kol-tabs__button-group {\n display: flex;\n order: var(--button-group-order);\n flex-direction: var(--button-group-flex-direction);\n flex-wrap: wrap;\n }\n .kol-tabs__button-group .kol-button {\n border-bottom-color: transparent;\n display: block;\n border-bottom-style: solid;\n }\n .kol-tabs__panel {\n height: 100%;\n }\n}";
|
|
31351
31201
|
|
|
31352
31202
|
class KolTabs {
|
|
31353
31203
|
constructor(hostRef) {
|
|
@@ -31548,9 +31398,9 @@ class KolTabs {
|
|
|
31548
31398
|
}, _icons: "kolicon-plus", "data-testid": "tabs-create-button" }))));
|
|
31549
31399
|
}
|
|
31550
31400
|
render() {
|
|
31551
|
-
return (hAsync("div", { key: '
|
|
31401
|
+
return (hAsync("div", { key: 'de2ee63277567781632c01205803f1b2af7466bb', ref: (el) => {
|
|
31552
31402
|
this.tabPanelsElement = el;
|
|
31553
|
-
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
31403
|
+
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: 'b522ec136bde8ce9bb80364a7783713859ce57f9', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
|
|
31554
31404
|
}
|
|
31555
31405
|
validateAlign(value) {
|
|
31556
31406
|
validateAlign(this, value);
|
|
@@ -31732,7 +31582,7 @@ class TextareaController extends InputIconController {
|
|
|
31732
31582
|
}
|
|
31733
31583
|
}
|
|
31734
31584
|
|
|
31735
|
-
const defaultStyleCss$5 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n display: ruby;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-textarea {\n width: 100%;\n }\n .kol-textarea:focus {\n outline: none;\n }\n}";
|
|
31585
|
+
const defaultStyleCss$5 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field__label-text {\n flex-flow: row;\n align-items: flex-start;\n justify-content: flex-start;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n min-height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-textarea {\n width: 100%;\n }\n .kol-textarea:focus {\n outline: none;\n }\n}";
|
|
31736
31586
|
|
|
31737
31587
|
const increaseTextareaHeight = (el) => {
|
|
31738
31588
|
el.style.overflow = 'hidden';
|
|
@@ -31781,7 +31631,7 @@ class KolTextarea {
|
|
|
31781
31631
|
} });
|
|
31782
31632
|
}
|
|
31783
31633
|
render() {
|
|
31784
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
31634
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'ccad29ea52a17515c2e2f7116377a01933b84644' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'c6fc893702610a94c57c0278ae41f9e75fbe86b3', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: '1480c910d2cefc22e61be7dcf0e7a83321113ef0' }, this.getTextAreaProps())))));
|
|
31785
31635
|
}
|
|
31786
31636
|
constructor(hostRef) {
|
|
31787
31637
|
registerInstance(this, hostRef);
|
|
@@ -31985,7 +31835,7 @@ class KolTextarea {
|
|
|
31985
31835
|
}; }
|
|
31986
31836
|
}
|
|
31987
31837
|
|
|
31988
|
-
const defaultStyleCss$4 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n :host {\n display: flex;\n position: fixed;\n z-index: 200;\n max-width: 90vw;\n flex-direction: column;\n }\n .kol-toast-container__close-all {\n align-self: flex-end;\n }\n}";
|
|
31838
|
+
const defaultStyleCss$4 = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-alert :host {\n display: inline-block;\n }\n .kol-alert .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-alert .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-alert .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n :host {\n display: flex;\n position: fixed;\n z-index: 200;\n max-width: 90vw;\n flex-direction: column;\n }\n .kol-toast-container__close-all {\n align-self: flex-end;\n }\n}";
|
|
31989
31839
|
|
|
31990
31840
|
const TRANSITION_TIMEOUT = 300;
|
|
31991
31841
|
class KolToastContainer {
|
|
@@ -32048,7 +31898,7 @@ class KolToastContainer {
|
|
|
32048
31898
|
}
|
|
32049
31899
|
}
|
|
32050
31900
|
render() {
|
|
32051
|
-
return (hAsync(Host, { key: '
|
|
31901
|
+
return (hAsync(Host, { key: '389516e9ede0c148cc0075f9756d850c0668984e', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: 'bb71c44e1e69e38db2db2b007f5c519971af6c25', _label: this.translateToastCloseAll, class: "kol-toast-container__button-close-all", _on: {
|
|
32052
31902
|
onClick: () => {
|
|
32053
31903
|
void this.closeAll();
|
|
32054
31904
|
},
|
|
@@ -32071,7 +31921,7 @@ class KolToastContainer {
|
|
|
32071
31921
|
}; }
|
|
32072
31922
|
}
|
|
32073
31923
|
|
|
32074
|
-
const defaultStyleCss$3 = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1773232431126\"); /* IE9*/\n src: url(\"kolicons.eot?t=1773232431126#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1773232431126\") format(\"woff2\"), url(\"kolicons.woff?t=1773232431126\") format(\"woff\"), url(\"kolicons.ttf?t=1773232431126\") format(\"truetype\"), url(\"kolicons.svg?t=1773232431126#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-link {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-link::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-link__text {\n flex: 1 0 100%;\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n }\n .kol-toolbar--orientation-vertical {\n flex-direction: column;\n align-items: stretch;\n }\n .kol-toolbar--orientation-vertical .kol-span {\n align-items: flex-start;\n }\n .kol-toolbar:focus-within {\n outline: 1px solid;\n outline-offset: 2px;\n }\n}";
|
|
31924
|
+
const defaultStyleCss$3 = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-link {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-link::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-link__text {\n flex: 1 0 100%;\n }\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n :host {\n display: inline-block;\n }\n .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-button__text {\n flex: 1 0 100%;\n }\n .kol-toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n }\n .kol-toolbar--orientation-vertical {\n flex-direction: column;\n align-items: stretch;\n }\n .kol-toolbar--orientation-vertical .kol-span {\n align-items: flex-start;\n }\n .kol-toolbar:focus-within {\n outline: 1px solid;\n outline-offset: 2px;\n }\n}";
|
|
32075
31925
|
|
|
32076
31926
|
class KolToolbar {
|
|
32077
31927
|
constructor(hostRef) {
|
|
@@ -32103,7 +31953,7 @@ class KolToolbar {
|
|
|
32103
31953
|
return Object.assign(Object.assign({}, rest), { _icons, _disabled });
|
|
32104
31954
|
}
|
|
32105
31955
|
render() {
|
|
32106
|
-
return (hAsync("div", { key: '
|
|
31956
|
+
return (hAsync("div", { key: 'a7d2441d50d572b14f9b8b61193e9654211ece9b', class: `kol-toolbar kol-toolbar--orientation-${this.state._orientation}`, role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem)));
|
|
32107
31957
|
}
|
|
32108
31958
|
validateLabel(value) {
|
|
32109
31959
|
validateLabel(this, value);
|
|
@@ -32346,7 +32196,7 @@ class KolTooltipWc {
|
|
|
32346
32196
|
this.showOrHideTooltip();
|
|
32347
32197
|
}
|
|
32348
32198
|
render() {
|
|
32349
|
-
return (hAsync(Host, { key: '
|
|
32199
|
+
return (hAsync(Host, { key: 'aa289a7cff94809715404f127d949f04b71a4553', class: "kol-tooltip" }, hAsync("div", { key: '4a24c2ea01078564e01c78f8eee8f9ab29841fc0', class: "kol-tooltip__floating", hidden: this.state._label.length === 0, ref: this.catchTooltipElement }, hAsync("div", { key: '2bd54c09fab07bc019b85c38fb59bb11666c74d7', class: "kol-tooltip__arrow", ref: this.catchArrowElement }), hAsync(SpanFC, { key: '110897efb433169438acc49861df9e24140fe701', class: "kol-tooltip__content", id: this.state._id, badgeText: this._badgeText, label: this.state._label }))));
|
|
32350
32200
|
}
|
|
32351
32201
|
validateBadgeText(value) {
|
|
32352
32202
|
validateBadgeText(this, value);
|
|
@@ -32424,7 +32274,7 @@ class KolTree {
|
|
|
32424
32274
|
registerInstance(this, hostRef);
|
|
32425
32275
|
}
|
|
32426
32276
|
render() {
|
|
32427
|
-
return (hAsync(KolTreeWcTag, { key: '
|
|
32277
|
+
return (hAsync(KolTreeWcTag, { key: '13d3e695605cbf910749ac998731d7d6310b3ed8', _label: this._label }, hAsync("slot", { key: 'b4702460fa7ca8fe8e259cb7b782a8971735a9ef' })));
|
|
32428
32278
|
}
|
|
32429
32279
|
static get style() { return {
|
|
32430
32280
|
default: defaultStyleCss$2
|
|
@@ -32441,7 +32291,7 @@ class KolTree {
|
|
|
32441
32291
|
}; }
|
|
32442
32292
|
}
|
|
32443
32293
|
|
|
32444
|
-
const defaultStyleCss$1 = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=
|
|
32294
|
+
const defaultStyleCss$1 = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n .hastooltip {\n z-index: 900 !important;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774433546045\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774433546045#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774433546045\") format(\"woff2\"), url(\"kolicons.woff?t=1774433546045\") format(\"woff\"), url(\"kolicons.ttf?t=1774433546045\") format(\"truetype\"), url(\"kolicons.svg?t=1774433546045#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n content: \"\\ea01\";\n}\n\n.kolicon-alert-info::before {\n content: \"\\ea02\";\n}\n\n.kolicon-alert-success::before {\n content: \"\\ea03\";\n}\n\n.kolicon-alert-warning::before {\n content: \"\\ea04\";\n}\n\n.kolicon-check::before {\n content: \"\\ea05\";\n}\n\n.kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n}\n\n.kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n}\n\n.kolicon-chevron-down::before {\n content: \"\\ea08\";\n}\n\n.kolicon-chevron-left::before {\n content: \"\\ea09\";\n}\n\n.kolicon-chevron-right::before {\n content: \"\\ea0a\";\n}\n\n.kolicon-chevron-up::before {\n content: \"\\ea0b\";\n}\n\n.kolicon-cogwheel::before {\n content: \"\\ea0c\";\n}\n\n.kolicon-cross::before {\n content: \"\\ea0d\";\n}\n\n.kolicon-eye-closed::before {\n content: \"\\ea0e\";\n}\n\n.kolicon-eye::before {\n content: \"\\ea0f\";\n}\n\n.kolicon-house::before {\n content: \"\\ea10\";\n}\n\n.kolicon-kolibri::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea12\";\n}\n\n.kolicon-link::before {\n content: \"\\ea13\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea15\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea18\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea19\";\n}\n\n.kolicon-up::before {\n content: \"\\ea1a\";\n}\n\n.kolicon-version::before {\n content: \"\\ea1b\";\n}\n\n@layer kol-component {\n .kol-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .kol-tree-item {\n --indentation: var(--tree-item-indentation, calc(10 * 1rem / var(--kolibri-root-font-size, 16)));\n }\n .kol-tree-item__link .kol-link {\n display: inline-flex;\n min-height: var(--a11y-min-size);\n padding-right: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n padding-left: max(var(--indentation) * var(--level) + 8 * 1rem / var(--kolibri-root-font-size, 16), 8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n text-decoration: none;\n }\n .kol-tree-item__link--first-level .kol-link {\n padding-left: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tree-item__link-inner {\n display: flex;\n align-items: center;\n }\n .kol-tree-item__children {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n .kol-tree-item .kol-span {\n place-items: unset;\n }\n .kol-tree-item__toggle-button, .kol-tree-item__toggle-button-placeholder {\n display: inline-flex;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n }\n .kol-tree-item__text {\n text-decoration: underline;\n }\n}";
|
|
32445
32295
|
|
|
32446
32296
|
class KolTreeItem {
|
|
32447
32297
|
constructor(hostRef) {
|
|
@@ -32464,7 +32314,7 @@ class KolTreeItem {
|
|
|
32464
32314
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
32465
32315
|
}
|
|
32466
32316
|
render() {
|
|
32467
|
-
return (hAsync(KolTreeItemWcTag, { key: '
|
|
32317
|
+
return (hAsync(KolTreeItemWcTag, { key: '69f11891d14df276dfdaf32bdb1ef448eaff6167', _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: '5994ecaba18fe6289827c57745aaaad5d422b855' })));
|
|
32468
32318
|
}
|
|
32469
32319
|
static get style() { return {
|
|
32470
32320
|
default: defaultStyleCss$1
|
|
@@ -32502,12 +32352,12 @@ class KolTreeItemWc {
|
|
|
32502
32352
|
}
|
|
32503
32353
|
render() {
|
|
32504
32354
|
const { _href, _active, _hasChildren, _open, _label } = this.state;
|
|
32505
|
-
return (hAsync(Host, { key: '
|
|
32355
|
+
return (hAsync(Host, { key: '85a1ae12da1615bc7ee01963062b5ac16c8811e7', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { key: 'bd286dd1150d3a3c52fe0a1b15351f23151b53c1', class: "kol-tree-item", style: {
|
|
32506
32356
|
'--level': `${this.level}`,
|
|
32507
|
-
} }, hAsync(KolLinkWcTag, { key: '
|
|
32357
|
+
} }, hAsync(KolLinkWcTag, { key: 'af8e50752e1617f936ed5d2e184bf5c0dae6a5dc', class: clsx('kol-tree-item__link', {
|
|
32508
32358
|
'kol-tree-item__link--first-level': this.level === 0,
|
|
32509
32359
|
'kol-tree-item__link--active': _active,
|
|
32510
|
-
}), _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: '
|
|
32360
|
+
}), _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: '71ec6b71d4ccdccfa23190a09f8457e4084b5534', class: "kol-tree-item__link-inner", slot: "expert" }, _hasChildren ? (hAsync("span", { class: "kol-tree-item__toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, hAsync(IconFC, { class: "kol-tree-item__toggle-button-icon", icons: `kolicon kolicon-${_open ? 'chevron-down' : 'chevron-right'}`, label: '' }))) : (hAsync("span", { class: "kol-tree-item__toggle-button-placeholder" })), hAsync("span", { key: '2de597bee6d63645c5d78ae52564d221993cf4f1', class: "kol-tree-item__text" }, _label))), hAsync("ul", { key: 'becee216eab281ee9e1cefdf6cd2f627df78a783', class: "kol-tree-item__children", hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: 'fa8ce0b8c358ca3d0595031a434dd11fafce53bc' })))));
|
|
32511
32361
|
}
|
|
32512
32362
|
validateActive(value) {
|
|
32513
32363
|
validateActive(this, value || false);
|
|
@@ -32614,7 +32464,7 @@ class KolTreeWc {
|
|
|
32614
32464
|
validateLabel(this, value);
|
|
32615
32465
|
}
|
|
32616
32466
|
render() {
|
|
32617
|
-
return (hAsync(Host, { key: '
|
|
32467
|
+
return (hAsync(Host, { key: '1e0b8daff38dcd37f66e6c5e58a3a95d50df25e0', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("nav", { key: 'bfaf76d5a227645691de264f67de0c6a624052d3', class: "kol-tree", "aria-label": this.state._label }, hAsync("ul", { key: '92f683480491242aba586ec72f7808beb29287a4', class: "kol-tree__treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: '370ab269d50a571d050b1b41750cb7389bc89e37' })))));
|
|
32618
32468
|
}
|
|
32619
32469
|
static isTreeItem(element) {
|
|
32620
32470
|
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
|
@@ -32813,7 +32663,7 @@ class KolVersion {
|
|
|
32813
32663
|
};
|
|
32814
32664
|
}
|
|
32815
32665
|
render() {
|
|
32816
|
-
return (hAsync(Host, { key: '
|
|
32666
|
+
return (hAsync(Host, { key: '366e90528852843f511d5f935511d55bd565957b', class: "kol-version" }, hAsync(KolBadgeTag, { key: '8d7a198cbf5b56ec5d0187b11d7e35f2205fbf0b', _color: "#bec5c9", _icons: {
|
|
32817
32667
|
left: { icon: 'kolicon-version', label: this.translateVersion },
|
|
32818
32668
|
}, _label: this.state._label })));
|
|
32819
32669
|
}
|
|
@@ -32899,7 +32749,6 @@ registerComponents([
|
|
|
32899
32749
|
KolNav,
|
|
32900
32750
|
KolPagination,
|
|
32901
32751
|
KolPaginationWc,
|
|
32902
|
-
KolPopover,
|
|
32903
32752
|
KolPopoverButton$1,
|
|
32904
32753
|
KolPopoverButton,
|
|
32905
32754
|
KolProgress,
|