@public-ui/hydrate 4.1.2-rc.5 → 4.1.2-rc.7
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 +618 -189
- package/dist/index.mjs +618 -189
- 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.7"};
|
|
150
150
|
|
|
151
151
|
function getDefaultExportFromCjs (x) {
|
|
152
152
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
@@ -559,8 +559,10 @@ var KeyEnum;
|
|
|
559
559
|
KeyEnum[KeyEnum["page-selected"] = 20] = "page-selected";
|
|
560
560
|
KeyEnum[KeyEnum["page-per-site"] = 21] = "page-per-site";
|
|
561
561
|
KeyEnum[KeyEnum["logo-description"] = 22] = "logo-description";
|
|
562
|
-
KeyEnum[KeyEnum["
|
|
563
|
-
KeyEnum[KeyEnum["
|
|
562
|
+
KeyEnum[KeyEnum["live-value-bounded"] = 23] = "live-value-bounded";
|
|
563
|
+
KeyEnum[KeyEnum["live-value"] = 24] = "live-value";
|
|
564
|
+
KeyEnum[KeyEnum["open-link-in-tab"] = 25] = "open-link-in-tab";
|
|
565
|
+
KeyEnum[KeyEnum["kolibri-logo"] = 26] = "kolibri-logo";
|
|
564
566
|
})(KeyEnum || (KeyEnum = {}));
|
|
565
567
|
|
|
566
568
|
var TagEnum;
|
|
@@ -596,28 +598,29 @@ var TagEnum;
|
|
|
596
598
|
TagEnum[TagEnum["link"] = 28] = "link";
|
|
597
599
|
TagEnum[TagEnum["link-button"] = 29] = "link-button";
|
|
598
600
|
TagEnum[TagEnum["logo"] = 30] = "logo";
|
|
599
|
-
TagEnum[TagEnum["
|
|
600
|
-
TagEnum[TagEnum["
|
|
601
|
-
TagEnum[TagEnum["
|
|
602
|
-
TagEnum[TagEnum["
|
|
603
|
-
TagEnum[TagEnum["
|
|
604
|
-
TagEnum[TagEnum["
|
|
605
|
-
TagEnum[TagEnum["
|
|
606
|
-
TagEnum[TagEnum["
|
|
607
|
-
TagEnum[TagEnum["
|
|
608
|
-
TagEnum[TagEnum["
|
|
609
|
-
TagEnum[TagEnum["
|
|
610
|
-
TagEnum[TagEnum["
|
|
611
|
-
TagEnum[TagEnum["
|
|
612
|
-
TagEnum[TagEnum["table
|
|
613
|
-
TagEnum[TagEnum["table-
|
|
614
|
-
TagEnum[TagEnum["
|
|
615
|
-
TagEnum[TagEnum["
|
|
616
|
-
TagEnum[TagEnum["
|
|
617
|
-
TagEnum[TagEnum["
|
|
618
|
-
TagEnum[TagEnum["
|
|
619
|
-
TagEnum[TagEnum["
|
|
620
|
-
TagEnum[TagEnum["tree
|
|
601
|
+
TagEnum[TagEnum["meter"] = 31] = "meter";
|
|
602
|
+
TagEnum[TagEnum["modal"] = 32] = "modal";
|
|
603
|
+
TagEnum[TagEnum["nav"] = 33] = "nav";
|
|
604
|
+
TagEnum[TagEnum["pagination"] = 34] = "pagination";
|
|
605
|
+
TagEnum[TagEnum["popover-button"] = 35] = "popover-button";
|
|
606
|
+
TagEnum[TagEnum["progress"] = 36] = "progress";
|
|
607
|
+
TagEnum[TagEnum["quote"] = 37] = "quote";
|
|
608
|
+
TagEnum[TagEnum["select"] = 38] = "select";
|
|
609
|
+
TagEnum[TagEnum["single-select"] = 39] = "single-select";
|
|
610
|
+
TagEnum[TagEnum["skip-nav"] = 40] = "skip-nav";
|
|
611
|
+
TagEnum[TagEnum["spin"] = 41] = "spin";
|
|
612
|
+
TagEnum[TagEnum["split-button"] = 42] = "split-button";
|
|
613
|
+
TagEnum[TagEnum["symbol"] = 43] = "symbol";
|
|
614
|
+
TagEnum[TagEnum["table"] = 44] = "table";
|
|
615
|
+
TagEnum[TagEnum["table-stateful"] = 45] = "table-stateful";
|
|
616
|
+
TagEnum[TagEnum["table-stateless"] = 46] = "table-stateless";
|
|
617
|
+
TagEnum[TagEnum["tabs"] = 47] = "tabs";
|
|
618
|
+
TagEnum[TagEnum["textarea"] = 48] = "textarea";
|
|
619
|
+
TagEnum[TagEnum["toast-container"] = 49] = "toast-container";
|
|
620
|
+
TagEnum[TagEnum["toolbar"] = 50] = "toolbar";
|
|
621
|
+
TagEnum[TagEnum["tooltip"] = 51] = "tooltip";
|
|
622
|
+
TagEnum[TagEnum["tree"] = 52] = "tree";
|
|
623
|
+
TagEnum[TagEnum["tree-item"] = 53] = "tree-item";
|
|
621
624
|
})(TagEnum || (TagEnum = {}));
|
|
622
625
|
|
|
623
626
|
/** Detect free variable `global` from Node.js. */
|
|
@@ -9012,7 +9015,7 @@ let KolTreeItemWcTag = 'kol-tree-item-wc';
|
|
|
9012
9015
|
let KolTreeTag = 'kol-tree';
|
|
9013
9016
|
let KolTreeWcTag = 'kol-tree-wc';
|
|
9014
9017
|
|
|
9015
|
-
const defaultStyleCss$
|
|
9018
|
+
const defaultStyleCss$O = "/*\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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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}";
|
|
9016
9019
|
|
|
9017
9020
|
class KolAbbr {
|
|
9018
9021
|
constructor(hostRef) {
|
|
@@ -9034,7 +9037,7 @@ class KolAbbr {
|
|
|
9034
9037
|
"_label": ["validateLabel"]
|
|
9035
9038
|
}; }
|
|
9036
9039
|
static get style() { return {
|
|
9037
|
-
default: defaultStyleCss$
|
|
9040
|
+
default: defaultStyleCss$O
|
|
9038
9041
|
}; }
|
|
9039
9042
|
static get cmpMeta() { return {
|
|
9040
9043
|
"$flags$": 297,
|
|
@@ -9230,27 +9233,65 @@ if (isTestMode()) {
|
|
|
9230
9233
|
nonce = () => 'nonce';
|
|
9231
9234
|
}
|
|
9232
9235
|
|
|
9233
|
-
const MAX_FOCUS_ATTEMPTS = 10;
|
|
9234
9236
|
const MAX_TIMEOUT_DURATION = 5000;
|
|
9235
9237
|
function waitForThemed(host) {
|
|
9236
9238
|
return new Promise((resolve, reject) => {
|
|
9239
|
+
let timeoutId;
|
|
9237
9240
|
const observer = new MutationObserver(() => {
|
|
9238
9241
|
if (host.hasAttribute('data-themed')) {
|
|
9239
|
-
|
|
9242
|
+
if (timeoutId) {
|
|
9243
|
+
clearTimeout(timeoutId);
|
|
9244
|
+
}
|
|
9240
9245
|
observer.disconnect();
|
|
9241
9246
|
resolve();
|
|
9242
9247
|
}
|
|
9243
9248
|
});
|
|
9244
|
-
const timeoutId = setTimeout(() => {
|
|
9245
|
-
observer.disconnect();
|
|
9246
|
-
reject(new Error('Timeout waiting for data-themed attribute'));
|
|
9247
|
-
}, MAX_TIMEOUT_DURATION);
|
|
9248
9249
|
observer.observe(host, {
|
|
9249
9250
|
attributes: true,
|
|
9250
9251
|
attributeFilter: ['data-themed'],
|
|
9251
9252
|
});
|
|
9253
|
+
if (host.hasAttribute('data-themed')) {
|
|
9254
|
+
observer.disconnect();
|
|
9255
|
+
resolve();
|
|
9256
|
+
return;
|
|
9257
|
+
}
|
|
9258
|
+
timeoutId = setTimeout(() => {
|
|
9259
|
+
observer.disconnect();
|
|
9260
|
+
reject(new Error('Timeout waiting for data-themed attribute'));
|
|
9261
|
+
}, MAX_TIMEOUT_DURATION);
|
|
9252
9262
|
});
|
|
9253
9263
|
}
|
|
9264
|
+
|
|
9265
|
+
const MAX_CLICK_ATTEMPTS = 3;
|
|
9266
|
+
async function delegateClick(host, callback) {
|
|
9267
|
+
try {
|
|
9268
|
+
if (!host.hasAttribute('data-themed')) {
|
|
9269
|
+
await waitForThemed(host);
|
|
9270
|
+
}
|
|
9271
|
+
await callback();
|
|
9272
|
+
}
|
|
9273
|
+
catch (_a) {
|
|
9274
|
+
throw new Error(`The interactive element inside the KoliBri web component could not be clicked. Try calling the click method on the web component after a short delay again.`);
|
|
9275
|
+
}
|
|
9276
|
+
}
|
|
9277
|
+
function isElementVisible(element) {
|
|
9278
|
+
if (!element)
|
|
9279
|
+
return false;
|
|
9280
|
+
const rect = element.getBoundingClientRect();
|
|
9281
|
+
return rect.width > 0 && rect.height > 0;
|
|
9282
|
+
}
|
|
9283
|
+
async function setClick(element) {
|
|
9284
|
+
let attempts = 0;
|
|
9285
|
+
do {
|
|
9286
|
+
if (element) {
|
|
9287
|
+
element.click();
|
|
9288
|
+
}
|
|
9289
|
+
await new Promise((r) => requestAnimationFrame(r));
|
|
9290
|
+
attempts++;
|
|
9291
|
+
} while (!isElementVisible(element) && attempts < MAX_CLICK_ATTEMPTS);
|
|
9292
|
+
}
|
|
9293
|
+
|
|
9294
|
+
const MAX_FOCUS_ATTEMPTS = 10;
|
|
9254
9295
|
async function delegateFocus(host, callback) {
|
|
9255
9296
|
try {
|
|
9256
9297
|
if (!host.hasAttribute('data-themed')) {
|
|
@@ -9320,7 +9361,7 @@ const watchHeadingLevel = (component, value) => {
|
|
|
9320
9361
|
});
|
|
9321
9362
|
};
|
|
9322
9363
|
|
|
9323
|
-
const defaultStyleCss$
|
|
9364
|
+
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@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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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}";
|
|
9324
9365
|
|
|
9325
9366
|
featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
|
|
9326
9367
|
|
|
@@ -9357,6 +9398,9 @@ class KolAccordion {
|
|
|
9357
9398
|
async focus() {
|
|
9358
9399
|
return delegateFocus(this.host, () => setFocus(this.buttonWcRef));
|
|
9359
9400
|
}
|
|
9401
|
+
async click() {
|
|
9402
|
+
return delegateClick(this.host, async () => setClick(this.buttonWcRef));
|
|
9403
|
+
}
|
|
9360
9404
|
render() {
|
|
9361
9405
|
const { _open, _label, _disabled, _level } = this.state;
|
|
9362
9406
|
const rootClass = 'kol-accordion';
|
|
@@ -9379,7 +9423,7 @@ class KolAccordion {
|
|
|
9379
9423
|
animationClass: `${rootClass}__wrapper-animation`,
|
|
9380
9424
|
},
|
|
9381
9425
|
};
|
|
9382
|
-
return (hAsync(KolCollapsibleFc, Object.assign({ key: '
|
|
9426
|
+
return (hAsync(KolCollapsibleFc, Object.assign({ key: '93edb8c6b3a39cfd468028a47214725a77ac6f67' }, props), hAsync("slot", { key: '1ac556846b4eeb89f9d61e4158160212f9170b25' })));
|
|
9383
9427
|
}
|
|
9384
9428
|
validateDisabled(value) {
|
|
9385
9429
|
validateDisabled(this, value);
|
|
@@ -9414,7 +9458,7 @@ class KolAccordion {
|
|
|
9414
9458
|
"_open": ["validateOpen"]
|
|
9415
9459
|
}; }
|
|
9416
9460
|
static get style() { return {
|
|
9417
|
-
default: defaultStyleCss$
|
|
9461
|
+
default: defaultStyleCss$N
|
|
9418
9462
|
}; }
|
|
9419
9463
|
static get cmpMeta() { return {
|
|
9420
9464
|
"$flags$": 297,
|
|
@@ -9426,7 +9470,8 @@ class KolAccordion {
|
|
|
9426
9470
|
"_on": [16],
|
|
9427
9471
|
"_open": [1540],
|
|
9428
9472
|
"state": [32],
|
|
9429
|
-
"focus": [64]
|
|
9473
|
+
"focus": [64],
|
|
9474
|
+
"click": [64]
|
|
9430
9475
|
},
|
|
9431
9476
|
"$listeners$": undefined,
|
|
9432
9477
|
"$lazyBundleId$": "-",
|
|
@@ -9434,7 +9479,7 @@ class KolAccordion {
|
|
|
9434
9479
|
}; }
|
|
9435
9480
|
}
|
|
9436
9481
|
|
|
9437
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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}";
|
|
9482
|
+
const defaultStyleCss$M = "@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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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}";
|
|
9438
9483
|
|
|
9439
9484
|
class KolAlert {
|
|
9440
9485
|
constructor(hostRef) {
|
|
@@ -9452,7 +9497,7 @@ class KolAlert {
|
|
|
9452
9497
|
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' })));
|
|
9453
9498
|
}
|
|
9454
9499
|
static get style() { return {
|
|
9455
|
-
default: defaultStyleCss$
|
|
9500
|
+
default: defaultStyleCss$M
|
|
9456
9501
|
}; }
|
|
9457
9502
|
static get cmpMeta() { return {
|
|
9458
9503
|
"$flags$": 297,
|
|
@@ -9542,7 +9587,12 @@ var locale_de = {
|
|
|
9542
9587
|
'character-counter-current': '{{current}} Zeichen',
|
|
9543
9588
|
'character-counter-current-of-max': '{{current}}/{{max}} Zeichen',
|
|
9544
9589
|
'character-counter-current-of-max-aria': '{{current}} von {{max}} Zeichen',
|
|
9590
|
+
'live-value-bounded': '{{value}} von {{max}} {{unit}}',
|
|
9591
|
+
'live-value': '{{value}} {{unit}}',
|
|
9545
9592
|
readonly: 'schreibgeschützt',
|
|
9593
|
+
'meter-state-optimum': 'Optimal',
|
|
9594
|
+
'meter-state-suboptimal': 'Suboptimal',
|
|
9595
|
+
'meter-state-critical': 'Kritisch',
|
|
9546
9596
|
};
|
|
9547
9597
|
|
|
9548
9598
|
var locale_en = {
|
|
@@ -9614,7 +9664,12 @@ var locale_en = {
|
|
|
9614
9664
|
'character-counter-current': '{{current}} characters',
|
|
9615
9665
|
'character-counter-current-of-max': '{{current}}/{{max}} characters',
|
|
9616
9666
|
'character-counter-current-of-max-aria': '{{current}} of {{max}} characters',
|
|
9667
|
+
'live-value-bounded': '{{value}} of {{max}} {{unit}}',
|
|
9668
|
+
'live-value': '{{value}} {{unit}}',
|
|
9617
9669
|
readonly: 'read-only',
|
|
9670
|
+
'meter-state-optimum': 'Optimum',
|
|
9671
|
+
'meter-state-suboptimal': 'Suboptimal',
|
|
9672
|
+
'meter-state-critical': 'Critical',
|
|
9618
9673
|
};
|
|
9619
9674
|
|
|
9620
9675
|
const mapLocaleKeys = (locale) => Object.keys(locale).reduce((a, c) => ((a[`${'kol'}-${c}`] = locale[c]), a), {});
|
|
@@ -9996,6 +10051,8 @@ const colorProp = createPropDefinition('color', {
|
|
|
9996
10051
|
foregroundColor: '#3f3f3f',
|
|
9997
10052
|
}, normalizer, validator);
|
|
9998
10053
|
|
|
10054
|
+
const highProp = createPropDefinition('high', 0, normalizeNumber);
|
|
10055
|
+
|
|
9999
10056
|
const hrefProp = createPropDefinition('href', '', normalizeString, (v) => typeof v === 'string');
|
|
10000
10057
|
|
|
10001
10058
|
const iconsProp = createPropDefinition('icons', 'kolicon-logo', normalizeString);
|
|
@@ -10008,10 +10065,25 @@ const LOADING_OPTIONS = ['eager', 'lazy'];
|
|
|
10008
10065
|
const LOADING_SET = new Set(LOADING_OPTIONS);
|
|
10009
10066
|
const loadingProp = createPropDefinition('loading', 'lazy', (value) => normalizeString(value), (v) => LOADING_SET.has(v));
|
|
10010
10067
|
|
|
10068
|
+
const lowProp = createPropDefinition('low', 0, normalizeNumber);
|
|
10069
|
+
|
|
10011
10070
|
const maxProp = createPropDefinition('max', 100, normalizeNumber, (v) => v > 0);
|
|
10012
10071
|
|
|
10072
|
+
const minProp = createPropDefinition('min', 0, normalizeNumber);
|
|
10073
|
+
|
|
10013
10074
|
const nameProp = createPropDefinition('name', '', normalizeString);
|
|
10014
10075
|
|
|
10076
|
+
const optimumProp = createPropDefinition('optimum', 0, normalizeNumber);
|
|
10077
|
+
|
|
10078
|
+
const orientationOptions = ['horizontal', 'vertical'];
|
|
10079
|
+
const orientationProp = createPropDefinition('orientation', 'horizontal', (value) => {
|
|
10080
|
+
const str = normalizeString(value);
|
|
10081
|
+
if (orientationOptions.includes(str)) {
|
|
10082
|
+
return str;
|
|
10083
|
+
}
|
|
10084
|
+
throw new Error(`Invalid orientation: ${str}`);
|
|
10085
|
+
});
|
|
10086
|
+
|
|
10015
10087
|
const quoteProp = createPropDefinition('quote', '', normalizeString);
|
|
10016
10088
|
|
|
10017
10089
|
const secondaryHeadlineProp = createPropDefinition('secondaryHeadline', '', normalizeString);
|
|
@@ -10024,6 +10096,8 @@ const srcsetProp = createPropDefinition('srcset', '', normalizeString);
|
|
|
10024
10096
|
|
|
10025
10097
|
const unitProp = createPropDefinition('unit', '%', normalizeString, (v) => v.length > 0);
|
|
10026
10098
|
|
|
10099
|
+
const numberValueProp = createPropDefinition('value', 0, normalizeNumber, (v) => v >= 0);
|
|
10100
|
+
|
|
10027
10101
|
const clampedNumberValueProp = createDependentPropDefinition('value', 0, (value, deps) => {
|
|
10028
10102
|
const normalized = normalizeNumber(value);
|
|
10029
10103
|
if (normalized < deps.min) {
|
|
@@ -10136,7 +10210,7 @@ class BaseWebComponent {
|
|
|
10136
10210
|
}
|
|
10137
10211
|
}
|
|
10138
10212
|
|
|
10139
|
-
const defaultStyleCss$
|
|
10213
|
+
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@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-avatar,\n .kol-avatar__image,\n .kol-avatar__initials {\n border-radius: 50%;\n }\n .kol-avatar {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: flex;\n width: calc(100 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(100 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-avatar__initials {\n background-color: inherit;\n margin: auto;\n font-size: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
10140
10214
|
|
|
10141
10215
|
class KolAvatar extends BaseWebComponent {
|
|
10142
10216
|
constructor(hostRef) {
|
|
@@ -10170,7 +10244,7 @@ class KolAvatar extends BaseWebComponent {
|
|
|
10170
10244
|
"_src": ["watchSrc"]
|
|
10171
10245
|
}; }
|
|
10172
10246
|
static get style() { return {
|
|
10173
|
-
default: defaultStyleCss$
|
|
10247
|
+
default: defaultStyleCss$L
|
|
10174
10248
|
}; }
|
|
10175
10249
|
static get cmpMeta() { return {
|
|
10176
10250
|
"$flags$": 809,
|
|
@@ -19180,7 +19254,7 @@ const SpanFC = (props, children) => {
|
|
|
19180
19254
|
}), 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$2(badgeText) && badgeText.length > 0 && (hAsync("kbd", { "aria-hidden": "true", class: "badge-text-hint" }, badgeText)), renderIcon(right, 'right')), renderIcon(bottom, 'bottom')));
|
|
19181
19255
|
};
|
|
19182
19256
|
|
|
19183
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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}";
|
|
19257
|
+
const defaultStyleCss$K = "/* 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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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}";
|
|
19184
19258
|
|
|
19185
19259
|
featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
|
|
19186
19260
|
class KolBadge {
|
|
@@ -19254,7 +19328,7 @@ class KolBadge {
|
|
|
19254
19328
|
"_smartButton": ["validateSmartButton"]
|
|
19255
19329
|
}; }
|
|
19256
19330
|
static get style() { return {
|
|
19257
|
-
default: defaultStyleCss$
|
|
19331
|
+
default: defaultStyleCss$K
|
|
19258
19332
|
}; }
|
|
19259
19333
|
static get cmpMeta() { return {
|
|
19260
19334
|
"$flags$": 297,
|
|
@@ -19291,7 +19365,7 @@ const watchNavLinks = (className, component, value) => {
|
|
|
19291
19365
|
uiUxHintMillerscheZahl(className, component.state._links.length);
|
|
19292
19366
|
};
|
|
19293
19367
|
|
|
19294
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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 }\n .kol-breadcrumb__list, .kol-breadcrumb__list-element {\n display: flex;\n margin: 0;\n padding: 0;\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}";
|
|
19368
|
+
const defaultStyleCss$J = "/*\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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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 }\n .kol-breadcrumb__list, .kol-breadcrumb__list-element {\n display: flex;\n margin: 0;\n padding: 0;\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}";
|
|
19295
19369
|
|
|
19296
19370
|
class KolBreadcrumb {
|
|
19297
19371
|
constructor(hostRef) {
|
|
@@ -19333,7 +19407,7 @@ class KolBreadcrumb {
|
|
|
19333
19407
|
"_links": ["validateLinks"]
|
|
19334
19408
|
}; }
|
|
19335
19409
|
static get style() { return {
|
|
19336
|
-
default: defaultStyleCss$
|
|
19410
|
+
default: defaultStyleCss$J
|
|
19337
19411
|
}; }
|
|
19338
19412
|
static get cmpMeta() { return {
|
|
19339
19413
|
"$flags$": 297,
|
|
@@ -19349,7 +19423,7 @@ class KolBreadcrumb {
|
|
|
19349
19423
|
}; }
|
|
19350
19424
|
}
|
|
19351
19425
|
|
|
19352
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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}";
|
|
19426
|
+
const defaultStyleCss$I = "@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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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}";
|
|
19353
19427
|
|
|
19354
19428
|
class KolButton {
|
|
19355
19429
|
constructor(hostRef) {
|
|
@@ -19370,12 +19444,15 @@ class KolButton {
|
|
|
19370
19444
|
async focus() {
|
|
19371
19445
|
return delegateFocus(this.host, () => setFocus(this.buttonWcRef));
|
|
19372
19446
|
}
|
|
19447
|
+
async click() {
|
|
19448
|
+
return delegateClick(this.host, async () => setClick(this.buttonWcRef));
|
|
19449
|
+
}
|
|
19373
19450
|
render() {
|
|
19374
|
-
return (hAsync(KolButtonWcTag, { key: '
|
|
19451
|
+
return (hAsync(KolButtonWcTag, { key: '328773049e43332db32571c65bfd039974005c40', ref: this.setButtonWcRef, _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: '1bfe6d67547ee6c12a570aa01f6f8adafa690f52', name: "expert", slot: "expert" })));
|
|
19375
19452
|
}
|
|
19376
19453
|
get host() { return getElement(this); }
|
|
19377
19454
|
static get style() { return {
|
|
19378
|
-
default: defaultStyleCss$
|
|
19455
|
+
default: defaultStyleCss$I
|
|
19379
19456
|
}; }
|
|
19380
19457
|
static get cmpMeta() { return {
|
|
19381
19458
|
"$flags$": 297,
|
|
@@ -19402,7 +19479,8 @@ class KolButton {
|
|
|
19402
19479
|
"_value": [8],
|
|
19403
19480
|
"_variant": [1],
|
|
19404
19481
|
"getValue": [64],
|
|
19405
|
-
"focus": [64]
|
|
19482
|
+
"focus": [64],
|
|
19483
|
+
"click": [64]
|
|
19406
19484
|
},
|
|
19407
19485
|
"$listeners$": undefined,
|
|
19408
19486
|
"$lazyBundleId$": "-",
|
|
@@ -19410,7 +19488,7 @@ class KolButton {
|
|
|
19410
19488
|
}; }
|
|
19411
19489
|
}
|
|
19412
19490
|
|
|
19413
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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 }\n .kol-button--inline {\n min-width: unset;\n min-height: unset;\n }\n}";
|
|
19491
|
+
const defaultStyleCss$H = "/* 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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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 }\n .kol-button--inline {\n min-width: unset;\n min-height: unset;\n }\n}";
|
|
19414
19492
|
|
|
19415
19493
|
class KolButtonLink {
|
|
19416
19494
|
constructor(hostRef) {
|
|
@@ -19430,12 +19508,15 @@ class KolButtonLink {
|
|
|
19430
19508
|
async focus() {
|
|
19431
19509
|
return delegateFocus(this.host, () => setFocus(this.buttonWcRef));
|
|
19432
19510
|
}
|
|
19511
|
+
async click() {
|
|
19512
|
+
return delegateClick(this.host, async () => setClick(this.buttonWcRef));
|
|
19513
|
+
}
|
|
19433
19514
|
render() {
|
|
19434
|
-
return (hAsync(KolButtonWcTag, { key: '
|
|
19515
|
+
return (hAsync(KolButtonWcTag, { key: 'aee74e9f6ad89dc6370c313d63775bc7c665fb7a', ref: this.setButtonWcRef, _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: '4a7469c07d168fa7ff20ba3ba96addc4df2360c6', name: "expert", slot: "expert" })));
|
|
19435
19516
|
}
|
|
19436
19517
|
get host() { return getElement(this); }
|
|
19437
19518
|
static get style() { return {
|
|
19438
|
-
default: defaultStyleCss$
|
|
19519
|
+
default: defaultStyleCss$H
|
|
19439
19520
|
}; }
|
|
19440
19521
|
static get cmpMeta() { return {
|
|
19441
19522
|
"$flags$": 297,
|
|
@@ -19461,7 +19542,8 @@ class KolButtonLink {
|
|
|
19461
19542
|
"_value": [8],
|
|
19462
19543
|
"_variant": [1],
|
|
19463
19544
|
"getValue": [64],
|
|
19464
|
-
"focus": [64]
|
|
19545
|
+
"focus": [64],
|
|
19546
|
+
"click": [64]
|
|
19465
19547
|
},
|
|
19466
19548
|
"$listeners$": undefined,
|
|
19467
19549
|
"$lazyBundleId$": "-",
|
|
@@ -19737,6 +19819,9 @@ class KolButtonWc {
|
|
|
19737
19819
|
async focus() {
|
|
19738
19820
|
return setFocus(this.buttonRef);
|
|
19739
19821
|
}
|
|
19822
|
+
async click() {
|
|
19823
|
+
return setClick(this.buttonRef);
|
|
19824
|
+
}
|
|
19740
19825
|
render() {
|
|
19741
19826
|
var _a;
|
|
19742
19827
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
@@ -19744,14 +19829,14 @@ class KolButtonWc {
|
|
|
19744
19829
|
const badgeText = this.state._accessKey || this.state._shortKey;
|
|
19745
19830
|
const isDisabled = this.state._disabled === true;
|
|
19746
19831
|
const hideLabel = this.state._hideLabel === true;
|
|
19747
|
-
return (hAsync(Host, { key: '
|
|
19832
|
+
return (hAsync(Host, { key: 'caa3e67776ea2dcf39d231eb6b59af4360737be5' }, hAsync("button", { key: 'b8a68224a8a8e7868825cb6cd574d71211be1cc7', ref: this.setButtonRef, 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', {
|
|
19748
19833
|
'kol-button--disabled': isDisabled,
|
|
19749
19834
|
[`kol-button--${this.state._variant}`]: this.state._variant !== 'custom',
|
|
19750
19835
|
'kol-button--inline': this.state._inline === true,
|
|
19751
19836
|
'kol-button--standalone': this.state._inline === false,
|
|
19752
19837
|
'kol-button--hide-label': hideLabel,
|
|
19753
19838
|
[this.state._customClass]: typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
19754
|
-
}), 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: '
|
|
19839
|
+
}), 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: '4166132142502375f776be7c04902675f6bbeae7', class: "kol-button__text", badgeText: badgeText, icons: this.state._icons, hideLabel: hideLabel, label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: 'b98ae84a6c48d3afedd72086c8f1bda853293f31', name: "expert", slot: "expert" }))), hideLabel && (hAsync(KolTooltipWcTag, { key: '48cd4c3489c919c78176a0b2a4e5d5a01f38d3a6', ref: this.setTooltipRef, "aria-hidden": "true", hidden: hasExpertSlot, class: "kol-button__tooltip", _badgeText: badgeText, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' }))));
|
|
19755
19840
|
}
|
|
19756
19841
|
constructor(hostRef) {
|
|
19757
19842
|
registerInstance(this, hostRef);
|
|
@@ -19962,7 +20047,8 @@ class KolButtonWc {
|
|
|
19962
20047
|
"_value": [8],
|
|
19963
20048
|
"_variant": [1],
|
|
19964
20049
|
"state": [32],
|
|
19965
|
-
"focus": [64]
|
|
20050
|
+
"focus": [64],
|
|
20051
|
+
"click": [64]
|
|
19966
20052
|
},
|
|
19967
20053
|
"$listeners$": undefined,
|
|
19968
20054
|
"$lazyBundleId$": "-",
|
|
@@ -19970,7 +20056,7 @@ class KolButtonWc {
|
|
|
19970
20056
|
}; }
|
|
19971
20057
|
}
|
|
19972
20058
|
|
|
19973
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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 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}";
|
|
20059
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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 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}";
|
|
19974
20060
|
|
|
19975
20061
|
class KolCard {
|
|
19976
20062
|
constructor(hostRef) {
|
|
@@ -19982,7 +20068,7 @@ class KolCard {
|
|
|
19982
20068
|
return (hAsync(KolCardWcTag, { key: 'b7e95eac842a1cbcfb328656f17596283f17284a', _on: this._on, _hasCloser: this._hasCloser, _label: this._label, _level: this._level }, hAsync("slot", { key: '7b686b0f83c138ab0d497f9b6a0d7d5927bce63c' })));
|
|
19983
20069
|
}
|
|
19984
20070
|
static get style() { return {
|
|
19985
|
-
default: defaultStyleCss$
|
|
20071
|
+
default: defaultStyleCss$G
|
|
19986
20072
|
}; }
|
|
19987
20073
|
static get cmpMeta() { return {
|
|
19988
20074
|
"$flags$": 297,
|
|
@@ -20210,7 +20296,7 @@ class KolCardWc {
|
|
|
20210
20296
|
this.validateOnValue = (value) => typeof value === 'object' && value !== null && typeof value.onClose === 'function';
|
|
20211
20297
|
}
|
|
20212
20298
|
render() {
|
|
20213
|
-
return (hAsync(Host, { key: '
|
|
20299
|
+
return (hAsync(Host, { key: '67601890e4ca061d641d9bd02fc619db3f32060f' }, hAsync("div", { key: '2a1cc96add1fc7f4ec5884a7efd9d48c897aff48', "aria-labelledby": this.nonce, class: "kol-card", role: "group" }, hAsync(KolHeadingFc, { key: '559f7c3e67d972f15c2d9f23005bc888e95796a7', class: "kol-card__header", id: this.nonce, level: this.state._level }, this.state._label), hAsync("div", { key: '8276d5d9fa4bef89934e4d5c75063f65cbe74d37', class: "kol-card__content" }, hAsync("slot", { key: '7883b9240e71edfa1027e2ed294eb9747326727e' })), this.state._hasCloser && (hAsync(KolButtonWcTag, { key: 'ff4727d59217976989e8a8e24cf6540a712d10a9', class: "kol-card__close-button kol-close-button", "data-testid": "card-close-button", _hideLabel: true, _icons: {
|
|
20214
20300
|
left: {
|
|
20215
20301
|
icon: 'kolicon-cross',
|
|
20216
20302
|
},
|
|
@@ -20315,7 +20401,7 @@ class KolClickButton extends BaseWebComponent {
|
|
|
20315
20401
|
});
|
|
20316
20402
|
}
|
|
20317
20403
|
render() {
|
|
20318
|
-
return (hAsync(Host, { key: '
|
|
20404
|
+
return (hAsync(Host, { key: '40c176ec52205fd211f132d8f6a7ed0bfd15e6d6' }, hAsync(ClickButtonFC, { key: 'a94906ffb096c6da6b6f3ca33bcb47d431d62b8e', label: this.ctrl.getRenderProp('label'), refButton: this.ctrl.setButtonRef, handleClick: this.ctrl.handleClick })));
|
|
20319
20405
|
}
|
|
20320
20406
|
static get watchers() { return {
|
|
20321
20407
|
"_label": ["watchLabel"]
|
|
@@ -20822,7 +20908,7 @@ class ComboboxController extends InputIconController {
|
|
|
20822
20908
|
}
|
|
20823
20909
|
}
|
|
20824
20910
|
|
|
20825
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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-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}";
|
|
20911
|
+
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@layer kol-component {\n :host {\n display: block;\n }\n}\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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-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}";
|
|
20826
20912
|
|
|
20827
20913
|
class KolCombobox {
|
|
20828
20914
|
async getValue() {
|
|
@@ -20831,6 +20917,9 @@ class KolCombobox {
|
|
|
20831
20917
|
async focus() {
|
|
20832
20918
|
return delegateFocus(this.host, () => setFocus(this.refInput));
|
|
20833
20919
|
}
|
|
20920
|
+
async click() {
|
|
20921
|
+
return delegateClick(this.host, async () => setClick(this.refInput));
|
|
20922
|
+
}
|
|
20834
20923
|
selectOption(option) {
|
|
20835
20924
|
var _a;
|
|
20836
20925
|
this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: option } }), true, option);
|
|
@@ -20943,13 +21032,13 @@ class KolCombobox {
|
|
|
20943
21032
|
}
|
|
20944
21033
|
render() {
|
|
20945
21034
|
const isDisabled = this.state._disabled === true;
|
|
20946
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
21035
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'fb3b1f18430438112be19ff6b61fa71b308c5352' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '54743cc78d59c6bacc66769ec1c3af75c48e84ac', state: this.state }, hAsync("div", { key: 'bf40816f69d1eb07f68d6de36cc68851fcc98f06', class: "kol-combobox__group" }, hAsync(InputStateWrapper, Object.assign({ key: 'f6e0221067bf8222f0b454ef6168acfd42fc53cf' }, this.getInputProps())), this.state._value && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: '8e893ee44e4eb50c7ad051e5908c0cdb582c9100', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "combobox-delete", class: "kol-combobox__delete", hidden: isDisabled, _on: {
|
|
20947
21036
|
onClick: () => {
|
|
20948
21037
|
this.clearSelection();
|
|
20949
21038
|
},
|
|
20950
|
-
} })), hAsync(IconFC, { key: '
|
|
21039
|
+
} })), hAsync(IconFC, { key: '014fdd5453f79d75b878962c9ee08a5d03e31182', icons: "kolicon-chevron-down", label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
20951
21040
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
20952
|
-
}), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: '
|
|
21041
|
+
}), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: '26f8e274a56b0cd4acb26f886f5016c22c93c628', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), hidden: !this._isOpen || isDisabled }, Array.isArray(this._filteredSuggestions) &&
|
|
20953
21042
|
this._filteredSuggestions.length > 0 &&
|
|
20954
21043
|
this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { disabled: false, index: index, option: option, searchTerm: this.state._value, ref: (el) => {
|
|
20955
21044
|
if (el)
|
|
@@ -21224,7 +21313,7 @@ class KolCombobox {
|
|
|
21224
21313
|
"_value": ["validateValue"]
|
|
21225
21314
|
}; }
|
|
21226
21315
|
static get style() { return {
|
|
21227
|
-
default: defaultStyleCss$
|
|
21316
|
+
default: defaultStyleCss$F
|
|
21228
21317
|
}; }
|
|
21229
21318
|
static get cmpMeta() { return {
|
|
21230
21319
|
"$flags$": 297,
|
|
@@ -21255,7 +21344,8 @@ class KolCombobox {
|
|
|
21255
21344
|
"state": [32],
|
|
21256
21345
|
"inputHasFocus": [32],
|
|
21257
21346
|
"getValue": [64],
|
|
21258
|
-
"focus": [64]
|
|
21347
|
+
"focus": [64],
|
|
21348
|
+
"click": [64]
|
|
21259
21349
|
},
|
|
21260
21350
|
"$listeners$": [[0, "keydown", "handleKeyDown"], [0, "click", "handleWindowClick"], [1, "mousemove", "handleMouseEvent"], [0, "focusout", "handleFocusOut"], [0, "blur", "handleWindowBlur"]],
|
|
21261
21351
|
"$lazyBundleId$": "-",
|
|
@@ -21263,7 +21353,7 @@ class KolCombobox {
|
|
|
21263
21353
|
}; }
|
|
21264
21354
|
}
|
|
21265
21355
|
|
|
21266
|
-
const defaultStyleCss$D = "@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/* 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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .collapsible--open .kol-details__heading-button .kol-icon {\n transform: rotate(90deg);\n }\n}";
|
|
21356
|
+
const defaultStyleCss$E = "@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/* 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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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-icon {\n color: inherit;\n display: inline-block;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n .collapsible--open .kol-details__heading-button .kol-icon {\n transform: rotate(90deg);\n }\n}";
|
|
21267
21357
|
|
|
21268
21358
|
class KolDetails {
|
|
21269
21359
|
constructor(hostRef) {
|
|
@@ -21295,6 +21385,9 @@ class KolDetails {
|
|
|
21295
21385
|
async focus() {
|
|
21296
21386
|
return delegateFocus(this.host, () => setFocus(this.buttonWcRef));
|
|
21297
21387
|
}
|
|
21388
|
+
async click() {
|
|
21389
|
+
return delegateClick(this.host, async () => setClick(this.buttonWcRef));
|
|
21390
|
+
}
|
|
21298
21391
|
render() {
|
|
21299
21392
|
const { _open, _label, _disabled, _level } = this.state;
|
|
21300
21393
|
const rootClass = 'kol-details';
|
|
@@ -21318,7 +21411,7 @@ class KolDetails {
|
|
|
21318
21411
|
animationClass: `${rootClass}__wrapper-animation`,
|
|
21319
21412
|
},
|
|
21320
21413
|
};
|
|
21321
|
-
return (hAsync(KolCollapsibleFc, Object.assign({ key: '
|
|
21414
|
+
return (hAsync(KolCollapsibleFc, Object.assign({ key: '3c99d7ecc7dbbae70baa196aa2d45a1746212830' }, props), hAsync("slot", { key: '5d9579bb486d5d1c0fced9d8dfc44f384034ef07' })));
|
|
21322
21415
|
}
|
|
21323
21416
|
validateDisabled(value) {
|
|
21324
21417
|
validateDisabled(this, value);
|
|
@@ -21353,7 +21446,7 @@ class KolDetails {
|
|
|
21353
21446
|
"_open": ["validateOpen"]
|
|
21354
21447
|
}; }
|
|
21355
21448
|
static get style() { return {
|
|
21356
|
-
default: defaultStyleCss$
|
|
21449
|
+
default: defaultStyleCss$E
|
|
21357
21450
|
}; }
|
|
21358
21451
|
static get cmpMeta() { return {
|
|
21359
21452
|
"$flags$": 297,
|
|
@@ -21365,7 +21458,8 @@ class KolDetails {
|
|
|
21365
21458
|
"_on": [16],
|
|
21366
21459
|
"_open": [1540],
|
|
21367
21460
|
"state": [32],
|
|
21368
|
-
"focus": [64]
|
|
21461
|
+
"focus": [64],
|
|
21462
|
+
"click": [64]
|
|
21369
21463
|
},
|
|
21370
21464
|
"$listeners$": undefined,
|
|
21371
21465
|
"$lazyBundleId$": "-",
|
|
@@ -21373,7 +21467,7 @@ class KolDetails {
|
|
|
21373
21467
|
}; }
|
|
21374
21468
|
}
|
|
21375
21469
|
|
|
21376
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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 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}";
|
|
21470
|
+
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@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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 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}";
|
|
21377
21471
|
|
|
21378
21472
|
class KolDialog {
|
|
21379
21473
|
constructor(hostRef) {
|
|
@@ -21396,7 +21490,7 @@ class KolDialog {
|
|
|
21396
21490
|
return (hAsync(KolDialogWcTag, { key: '24744fff4cfebb9ef188926e5390064ce7ec6931', ref: this.catchRef, _label: this._label, _on: this._on, _variant: this._variant, _width: this._width }, hAsync("slot", { key: 'c8844dc7d6b9d16567ce400ae10f992018c6849d' })));
|
|
21397
21491
|
}
|
|
21398
21492
|
static get style() { return {
|
|
21399
|
-
default: defaultStyleCss$
|
|
21493
|
+
default: defaultStyleCss$D
|
|
21400
21494
|
}; }
|
|
21401
21495
|
static get cmpMeta() { return {
|
|
21402
21496
|
"$flags$": 297,
|
|
@@ -21529,7 +21623,7 @@ class KolDialogWc {
|
|
|
21529
21623
|
}; }
|
|
21530
21624
|
}
|
|
21531
21625
|
|
|
21532
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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 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}";
|
|
21626
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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 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}";
|
|
21533
21627
|
|
|
21534
21628
|
class KolDrawer {
|
|
21535
21629
|
constructor(hostRef) {
|
|
@@ -21659,7 +21753,7 @@ class KolDrawer {
|
|
|
21659
21753
|
"_on": ["validateOn"]
|
|
21660
21754
|
}; }
|
|
21661
21755
|
static get style() { return {
|
|
21662
|
-
default: defaultStyleCss$
|
|
21756
|
+
default: defaultStyleCss$C
|
|
21663
21757
|
}; }
|
|
21664
21758
|
static get cmpMeta() { return {
|
|
21665
21759
|
"$flags$": 297,
|
|
@@ -21680,7 +21774,7 @@ class KolDrawer {
|
|
|
21680
21774
|
}; }
|
|
21681
21775
|
}
|
|
21682
21776
|
|
|
21683
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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 }\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}";
|
|
21777
|
+
const defaultStyleCss$B = "@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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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 }\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}";
|
|
21684
21778
|
|
|
21685
21779
|
class KolForm {
|
|
21686
21780
|
constructor(hostRef) {
|
|
@@ -21773,7 +21867,7 @@ class KolForm {
|
|
|
21773
21867
|
"_errorList": ["validateErrorList"]
|
|
21774
21868
|
}; }
|
|
21775
21869
|
static get style() { return {
|
|
21776
|
-
default: defaultStyleCss$
|
|
21870
|
+
default: defaultStyleCss$B
|
|
21777
21871
|
}; }
|
|
21778
21872
|
static get cmpMeta() { return {
|
|
21779
21873
|
"$flags$": 297,
|
|
@@ -21835,7 +21929,7 @@ class HeadingController extends BaseController {
|
|
|
21835
21929
|
}
|
|
21836
21930
|
}
|
|
21837
21931
|
|
|
21838
|
-
const defaultStyleCss$
|
|
21932
|
+
const defaultStyleCss$A = "/*\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 .kol-headline--secondary {\n margin: 0;\n }\n}";
|
|
21839
21933
|
|
|
21840
21934
|
class KolHeading extends BaseWebComponent {
|
|
21841
21935
|
constructor(hostRef) {
|
|
@@ -21869,7 +21963,7 @@ class KolHeading extends BaseWebComponent {
|
|
|
21869
21963
|
"_secondaryHeadline": ["watchSecondaryHeadline"]
|
|
21870
21964
|
}; }
|
|
21871
21965
|
static get style() { return {
|
|
21872
|
-
default: defaultStyleCss$
|
|
21966
|
+
default: defaultStyleCss$A
|
|
21873
21967
|
}; }
|
|
21874
21968
|
static get cmpMeta() { return {
|
|
21875
21969
|
"$flags$": 809,
|
|
@@ -21910,7 +22004,7 @@ class IconController extends BaseController {
|
|
|
21910
22004
|
}
|
|
21911
22005
|
}
|
|
21912
22006
|
|
|
21913
|
-
const defaultStyleCss$
|
|
22007
|
+
const defaultStyleCss$z = "@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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}";
|
|
21914
22008
|
|
|
21915
22009
|
class KolIcon extends BaseWebComponent {
|
|
21916
22010
|
constructor(hostRef) {
|
|
@@ -21938,7 +22032,7 @@ class KolIcon extends BaseWebComponent {
|
|
|
21938
22032
|
"_label": ["watchLabel"]
|
|
21939
22033
|
}; }
|
|
21940
22034
|
static get style() { return {
|
|
21941
|
-
default: defaultStyleCss$
|
|
22035
|
+
default: defaultStyleCss$z
|
|
21942
22036
|
}; }
|
|
21943
22037
|
static get cmpMeta() { return {
|
|
21944
22038
|
"$flags$": 809,
|
|
@@ -22002,7 +22096,7 @@ class ImageController extends BaseController {
|
|
|
22002
22096
|
}
|
|
22003
22097
|
}
|
|
22004
22098
|
|
|
22005
|
-
const defaultStyleCss$
|
|
22099
|
+
const defaultStyleCss$y = "/*\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 .kol-image {\n display: inline-block;\n max-width: 100%;\n max-height: 100%;\n }\n}";
|
|
22006
22100
|
|
|
22007
22101
|
class KolImage extends BaseWebComponent {
|
|
22008
22102
|
constructor(hostRef) {
|
|
@@ -22045,7 +22139,7 @@ class KolImage extends BaseWebComponent {
|
|
|
22045
22139
|
"_srcset": ["watchSrcset"]
|
|
22046
22140
|
}; }
|
|
22047
22141
|
static get style() { return {
|
|
22048
|
-
default: defaultStyleCss$
|
|
22142
|
+
default: defaultStyleCss$y
|
|
22049
22143
|
}; }
|
|
22050
22144
|
static get cmpMeta() { return {
|
|
22051
22145
|
"$flags$": 809,
|
|
@@ -22312,7 +22406,7 @@ const FieldControlStateWrapper = (_a, children) => {
|
|
|
22312
22406
|
return (hAsync(KolFieldControlFc, Object.assign({}, getFieldControlProps(state), other), children));
|
|
22313
22407
|
};
|
|
22314
22408
|
|
|
22315
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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}";
|
|
22409
|
+
const defaultStyleCss$x = "/*\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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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__label-text {\n flex-flow: row;\n align-items: flex-start;\n justify-content: flex-start;\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}";
|
|
22316
22410
|
|
|
22317
22411
|
class KolInputCheckbox {
|
|
22318
22412
|
getModelValue() {
|
|
@@ -22324,6 +22418,9 @@ class KolInputCheckbox {
|
|
|
22324
22418
|
async focus() {
|
|
22325
22419
|
return delegateFocus(this.host, () => setFocus(this.inputRef));
|
|
22326
22420
|
}
|
|
22421
|
+
async click() {
|
|
22422
|
+
return delegateClick(this.host, async () => setClick(this.inputRef));
|
|
22423
|
+
}
|
|
22327
22424
|
getFormFieldProps() {
|
|
22328
22425
|
return {
|
|
22329
22426
|
state: this.state,
|
|
@@ -22374,7 +22471,7 @@ class KolInputCheckbox {
|
|
|
22374
22471
|
return this.state._icons.unchecked;
|
|
22375
22472
|
}
|
|
22376
22473
|
render() {
|
|
22377
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22474
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '3c43d403dfc78fb32dd72272ff5a4e397e1a90e2' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(FieldControlStateWrapper, Object.assign({ key: '2269bed2b587de4bf9d61a478efaeedb97950f4f' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(CheckboxStateWrapper, Object.assign({ key: 'b9656e9e52e48c5e9d4306f5414c93d1486e618d' }, this.getInputProps())))));
|
|
22378
22475
|
}
|
|
22379
22476
|
constructor(hostRef) {
|
|
22380
22477
|
registerInstance(this, hostRef);
|
|
@@ -22514,7 +22611,7 @@ class KolInputCheckbox {
|
|
|
22514
22611
|
"_variant": ["validateVariant"]
|
|
22515
22612
|
}; }
|
|
22516
22613
|
static get style() { return {
|
|
22517
|
-
default: defaultStyleCss$
|
|
22614
|
+
default: defaultStyleCss$x
|
|
22518
22615
|
}; }
|
|
22519
22616
|
static get cmpMeta() { return {
|
|
22520
22617
|
"$flags$": 297,
|
|
@@ -22543,7 +22640,8 @@ class KolInputCheckbox {
|
|
|
22543
22640
|
"state": [32],
|
|
22544
22641
|
"inputHasFocus": [32],
|
|
22545
22642
|
"getValue": [64],
|
|
22546
|
-
"focus": [64]
|
|
22643
|
+
"focus": [64],
|
|
22644
|
+
"click": [64]
|
|
22547
22645
|
},
|
|
22548
22646
|
"$listeners$": undefined,
|
|
22549
22647
|
"$lazyBundleId$": "-",
|
|
@@ -22574,7 +22672,7 @@ class InputColorController extends InputIconController {
|
|
|
22574
22672
|
}
|
|
22575
22673
|
}
|
|
22576
22674
|
|
|
22577
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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 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}";
|
|
22675
|
+
const defaultStyleCss$w = "@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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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 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}";
|
|
22578
22676
|
|
|
22579
22677
|
class KolInputColor {
|
|
22580
22678
|
async getValue() {
|
|
@@ -22584,6 +22682,9 @@ class KolInputColor {
|
|
|
22584
22682
|
async focus() {
|
|
22585
22683
|
return delegateFocus(this.host, () => setFocus(this.refInputText));
|
|
22586
22684
|
}
|
|
22685
|
+
async click() {
|
|
22686
|
+
return delegateClick(this.host, async () => setClick(this.refInputText));
|
|
22687
|
+
}
|
|
22587
22688
|
get hasSuggestions() {
|
|
22588
22689
|
return Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
22589
22690
|
}
|
|
@@ -22605,7 +22706,7 @@ class KolInputColor {
|
|
|
22605
22706
|
return Object.assign(Object.assign({ state: Object.assign(Object.assign({}, this.state), { _suggestions: [] }) }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus });
|
|
22606
22707
|
}
|
|
22607
22708
|
render() {
|
|
22608
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22709
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'e76fdbbf2618a131c6943bf266f32ee09bded34b' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '305860f41dec5bde64a19d80c8844f2540e463b6', state: this.state, class: "kol-input-color__inputs-wrapper" }, hAsync("div", { key: 'c8600a3d3fb9cdd00bbad0f9cb02fa333c2971d5', class: "kol-input-color__inputs-wrapper" }, hAsync(InputStateWrapper, Object.assign({ key: 'b9f76255c881d37c2c6ca8d119d42ab747608ce6', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), hAsync(InputStateWrapper, Object.assign({ key: '6602a09249eb34a4c8296b2ce250d84316c76282', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
|
|
22609
22710
|
}
|
|
22610
22711
|
constructor(hostRef) {
|
|
22611
22712
|
registerInstance(this, hostRef);
|
|
@@ -22742,7 +22843,7 @@ class KolInputColor {
|
|
|
22742
22843
|
"_value": ["validateValue"]
|
|
22743
22844
|
}; }
|
|
22744
22845
|
static get style() { return {
|
|
22745
|
-
default: defaultStyleCss$
|
|
22846
|
+
default: defaultStyleCss$w
|
|
22746
22847
|
}; }
|
|
22747
22848
|
static get cmpMeta() { return {
|
|
22748
22849
|
"$flags$": 297,
|
|
@@ -22769,7 +22870,8 @@ class KolInputColor {
|
|
|
22769
22870
|
"state": [32],
|
|
22770
22871
|
"inputHasFocus": [32],
|
|
22771
22872
|
"getValue": [64],
|
|
22772
|
-
"focus": [64]
|
|
22873
|
+
"focus": [64],
|
|
22874
|
+
"click": [64]
|
|
22773
22875
|
},
|
|
22774
22876
|
"$listeners$": undefined,
|
|
22775
22877
|
"$lazyBundleId$": "-",
|
|
@@ -22926,7 +23028,7 @@ InputDateController.isoTimeRegex = /^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/;
|
|
|
22926
23028
|
InputDateController.isoWeekRegex = /^\d{4}-W(?:[0-4]\d|5[0-3])$/;
|
|
22927
23029
|
InputDateController.DEFAULT_MAX_DATE = new Date(9999, 11, 31, 23, 59, 59);
|
|
22928
23030
|
|
|
22929
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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}";
|
|
23031
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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}";
|
|
22930
23032
|
|
|
22931
23033
|
class KolInputDate {
|
|
22932
23034
|
async getValue() {
|
|
@@ -22936,6 +23038,9 @@ class KolInputDate {
|
|
|
22936
23038
|
async focus() {
|
|
22937
23039
|
return delegateFocus(this.host, () => setFocus(this.inputRef));
|
|
22938
23040
|
}
|
|
23041
|
+
async click() {
|
|
23042
|
+
return delegateClick(this.host, async () => setClick(this.inputRef));
|
|
23043
|
+
}
|
|
22939
23044
|
async reset() {
|
|
22940
23045
|
this.state = Object.assign(Object.assign({}, this.state), { _value: null });
|
|
22941
23046
|
this.controller.setFormAssociatedValue('');
|
|
@@ -22974,7 +23079,7 @@ class KolInputDate {
|
|
|
22974
23079
|
return Object.assign(Object.assign({ ref: this.setInputRef, state: this.state }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onChange: this.onChange, onInput: this.onInput });
|
|
22975
23080
|
}
|
|
22976
23081
|
render() {
|
|
22977
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23082
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '199a522fd7ca4e9dc7c5c5ef8ee732520a8c44c0' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b21bb8e48d95e8edb197a180b053fb1579289cd4', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '1d8095b8dcafc8e684dca2a5482381307222a823' }, this.getInputProps())))));
|
|
22978
23083
|
}
|
|
22979
23084
|
constructor(hostRef) {
|
|
22980
23085
|
registerInstance(this, hostRef);
|
|
@@ -23152,7 +23257,7 @@ class KolInputDate {
|
|
|
23152
23257
|
"_value": ["validateValue"]
|
|
23153
23258
|
}; }
|
|
23154
23259
|
static get style() { return {
|
|
23155
|
-
default: defaultStyleCss$
|
|
23260
|
+
default: defaultStyleCss$v
|
|
23156
23261
|
}; }
|
|
23157
23262
|
static get cmpMeta() { return {
|
|
23158
23263
|
"$flags$": 297,
|
|
@@ -23187,6 +23292,7 @@ class KolInputDate {
|
|
|
23187
23292
|
"inputHasFocus": [32],
|
|
23188
23293
|
"getValue": [64],
|
|
23189
23294
|
"focus": [64],
|
|
23295
|
+
"click": [64],
|
|
23190
23296
|
"reset": [64]
|
|
23191
23297
|
},
|
|
23192
23298
|
"$listeners$": undefined,
|
|
@@ -23313,7 +23419,7 @@ class InputEmailController extends InputTextEmailController {
|
|
|
23313
23419
|
}
|
|
23314
23420
|
}
|
|
23315
23421
|
|
|
23316
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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}";
|
|
23422
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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}";
|
|
23317
23423
|
|
|
23318
23424
|
class KolInputEmail {
|
|
23319
23425
|
async getValue() {
|
|
@@ -23323,6 +23429,9 @@ class KolInputEmail {
|
|
|
23323
23429
|
async focus() {
|
|
23324
23430
|
return delegateFocus(this.host, () => setFocus(this.inputRef));
|
|
23325
23431
|
}
|
|
23432
|
+
async click() {
|
|
23433
|
+
return delegateClick(this.host, async () => setClick(this.inputRef));
|
|
23434
|
+
}
|
|
23326
23435
|
getFormFieldProps() {
|
|
23327
23436
|
return {
|
|
23328
23437
|
state: this.state,
|
|
@@ -23345,7 +23454,7 @@ class KolInputEmail {
|
|
|
23345
23454
|
} });
|
|
23346
23455
|
}
|
|
23347
23456
|
render() {
|
|
23348
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23457
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'e766b70be673696dabfb1995ed43ee339df50a7e' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'aa5a7128da3882a2235883c19915c913d8638c70', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '4871115697213cb5b886bf078b43bf4a2822efda' }, this.getInputProps())))));
|
|
23349
23458
|
}
|
|
23350
23459
|
constructor(hostRef) {
|
|
23351
23460
|
registerInstance(this, hostRef);
|
|
@@ -23500,7 +23609,7 @@ class KolInputEmail {
|
|
|
23500
23609
|
"_maxLengthBehavior": ["validateMaxLengthBehavior"]
|
|
23501
23610
|
}; }
|
|
23502
23611
|
static get style() { return {
|
|
23503
|
-
default: defaultStyleCss$
|
|
23612
|
+
default: defaultStyleCss$u
|
|
23504
23613
|
}; }
|
|
23505
23614
|
static get cmpMeta() { return {
|
|
23506
23615
|
"$flags$": 297,
|
|
@@ -23535,7 +23644,8 @@ class KolInputEmail {
|
|
|
23535
23644
|
"state": [32],
|
|
23536
23645
|
"inputHasFocus": [32],
|
|
23537
23646
|
"getValue": [64],
|
|
23538
|
-
"focus": [64]
|
|
23647
|
+
"focus": [64],
|
|
23648
|
+
"click": [64]
|
|
23539
23649
|
},
|
|
23540
23650
|
"$listeners$": undefined,
|
|
23541
23651
|
"$lazyBundleId$": "-",
|
|
@@ -23565,7 +23675,7 @@ class InputFileController extends InputIconController {
|
|
|
23565
23675
|
}
|
|
23566
23676
|
}
|
|
23567
23677
|
|
|
23568
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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 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}";
|
|
23678
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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 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}";
|
|
23569
23679
|
|
|
23570
23680
|
class KolInputFile {
|
|
23571
23681
|
async getValue() {
|
|
@@ -23575,6 +23685,9 @@ class KolInputFile {
|
|
|
23575
23685
|
async focus() {
|
|
23576
23686
|
return delegateFocus(this.host, () => setFocus(this.inputRef));
|
|
23577
23687
|
}
|
|
23688
|
+
async click() {
|
|
23689
|
+
return delegateClick(this.host, async () => setClick(this.inputRef));
|
|
23690
|
+
}
|
|
23578
23691
|
async reset() {
|
|
23579
23692
|
this.controller.setFormAssociatedValue('');
|
|
23580
23693
|
this.filename = this.translateFilenameText;
|
|
@@ -23601,7 +23714,7 @@ class KolInputFile {
|
|
|
23601
23714
|
} });
|
|
23602
23715
|
}
|
|
23603
23716
|
render() {
|
|
23604
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23717
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '3ab2d468ae09494f1c2fea361688a96730bc903c' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '676bcf0949e80a73ea8b542b5c4254389ed8cf98', state: this.state }, hAsync("span", { key: '312beeb990b64898184be624e11bda400b79c8ed', class: clsx('kol-input-container__filename', { 'kol-input-container__filename--has-file': this.hasFileSelected }) }, this.filename), hAsync(InputStateWrapper, Object.assign({ key: '11368f2a460f7151deeb842c1ce1e00e89b42574' }, this.getInputProps())), hAsync(KolButtonWcTag, { key: 'bf87a7c2925ecd5ba30542ab51f3a74317aaf2a8', class: "kol-input-container__button", _label: this.translateDataBrowseText, _variant: "primary", _disabled: this._disabled }))));
|
|
23605
23718
|
}
|
|
23606
23719
|
constructor(hostRef) {
|
|
23607
23720
|
registerInstance(this, hostRef);
|
|
@@ -23760,7 +23873,7 @@ class KolInputFile {
|
|
|
23760
23873
|
"_touched": ["validateTouched"]
|
|
23761
23874
|
}; }
|
|
23762
23875
|
static get style() { return {
|
|
23763
|
-
default: defaultStyleCss$
|
|
23876
|
+
default: defaultStyleCss$t
|
|
23764
23877
|
}; }
|
|
23765
23878
|
static get cmpMeta() { return {
|
|
23766
23879
|
"$flags$": 297,
|
|
@@ -23790,6 +23903,7 @@ class KolInputFile {
|
|
|
23790
23903
|
"inputHasFocus": [32],
|
|
23791
23904
|
"getValue": [64],
|
|
23792
23905
|
"focus": [64],
|
|
23906
|
+
"click": [64],
|
|
23793
23907
|
"reset": [64]
|
|
23794
23908
|
},
|
|
23795
23909
|
"$listeners$": undefined,
|
|
@@ -23845,7 +23959,7 @@ class InputNumberController extends InputIconController {
|
|
|
23845
23959
|
}
|
|
23846
23960
|
}
|
|
23847
23961
|
|
|
23848
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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}";
|
|
23962
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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}";
|
|
23849
23963
|
|
|
23850
23964
|
class KolInputNumber {
|
|
23851
23965
|
async getValue() {
|
|
@@ -23854,6 +23968,9 @@ class KolInputNumber {
|
|
|
23854
23968
|
async focus() {
|
|
23855
23969
|
return delegateFocus(this.host, () => setFocus(this.inputRef));
|
|
23856
23970
|
}
|
|
23971
|
+
async click() {
|
|
23972
|
+
return delegateClick(this.host, async () => setClick(this.inputRef));
|
|
23973
|
+
}
|
|
23857
23974
|
setInitialValueType(value) {
|
|
23858
23975
|
if (this.controller.isNumberString(value)) {
|
|
23859
23976
|
this._initialValueType = 'NumberString';
|
|
@@ -23920,7 +24037,7 @@ class KolInputNumber {
|
|
|
23920
24037
|
}, disabled: this._disabled || this._readOnly }, hAsync(IconFC, { icons: "kolicon-minus", label: "" })));
|
|
23921
24038
|
}
|
|
23922
24039
|
render() {
|
|
23923
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
24040
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'd992b9c4ded38826a0b8b3f62ddfbdfa945616d6' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'd7480eb1fd5ced9c4656393f2df1e4784974b8cf', state: this.state, startAdornment: this.getStepDownButton(), endAdornment: this.getStepUpButton() }, hAsync(InputStateWrapper, Object.assign({ key: 'afe3fe26ee50ae0fc2442d243856e2df54c516ba' }, this.getInputProps())))));
|
|
23924
24041
|
}
|
|
23925
24042
|
constructor(hostRef) {
|
|
23926
24043
|
registerInstance(this, hostRef);
|
|
@@ -24077,7 +24194,7 @@ class KolInputNumber {
|
|
|
24077
24194
|
"_value": ["validateValue"]
|
|
24078
24195
|
}; }
|
|
24079
24196
|
static get style() { return {
|
|
24080
|
-
default: defaultStyleCss$
|
|
24197
|
+
default: defaultStyleCss$s
|
|
24081
24198
|
}; }
|
|
24082
24199
|
static get cmpMeta() { return {
|
|
24083
24200
|
"$flags$": 297,
|
|
@@ -24111,7 +24228,8 @@ class KolInputNumber {
|
|
|
24111
24228
|
"_initialValueType": [32],
|
|
24112
24229
|
"inputHasFocus": [32],
|
|
24113
24230
|
"getValue": [64],
|
|
24114
|
-
"focus": [64]
|
|
24231
|
+
"focus": [64],
|
|
24232
|
+
"click": [64]
|
|
24115
24233
|
},
|
|
24116
24234
|
"$listeners$": undefined,
|
|
24117
24235
|
"$lazyBundleId$": "-",
|
|
@@ -24119,7 +24237,7 @@ class KolInputNumber {
|
|
|
24119
24237
|
}; }
|
|
24120
24238
|
}
|
|
24121
24239
|
|
|
24122
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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}";
|
|
24240
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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}";
|
|
24123
24241
|
|
|
24124
24242
|
class KolInputPassword {
|
|
24125
24243
|
async getValue() {
|
|
@@ -24129,6 +24247,9 @@ class KolInputPassword {
|
|
|
24129
24247
|
async focus() {
|
|
24130
24248
|
return delegateFocus(this.host, () => setFocus(this.inputRef));
|
|
24131
24249
|
}
|
|
24250
|
+
async click() {
|
|
24251
|
+
return delegateClick(this.host, async () => setClick(this.inputRef));
|
|
24252
|
+
}
|
|
24132
24253
|
getFormFieldProps() {
|
|
24133
24254
|
return {
|
|
24134
24255
|
state: this.state,
|
|
@@ -24161,7 +24282,7 @@ class KolInputPassword {
|
|
|
24161
24282
|
}, icon: `${this._passwordVisible ? 'kolicon-eye-closed' : 'kolicon-eye'}`, disabled: this._disabled }));
|
|
24162
24283
|
}
|
|
24163
24284
|
render() {
|
|
24164
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
24285
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '33e54be69a9e5ceedb2c8a277af04bfb45afea0c' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '9606eeee1b90b90403904154f12303d1c5de0d14', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(InputStateWrapper, Object.assign({ key: 'c02d01ed254927503ede6bd23da3eb1b2b7b0af1' }, this.getInputProps())))));
|
|
24165
24286
|
}
|
|
24166
24287
|
constructor(hostRef) {
|
|
24167
24288
|
registerInstance(this, hostRef);
|
|
@@ -24318,7 +24439,7 @@ class KolInputPassword {
|
|
|
24318
24439
|
"_value": ["validateValue"]
|
|
24319
24440
|
}; }
|
|
24320
24441
|
static get style() { return {
|
|
24321
|
-
default: defaultStyleCss$
|
|
24442
|
+
default: defaultStyleCss$r
|
|
24322
24443
|
}; }
|
|
24323
24444
|
static get cmpMeta() { return {
|
|
24324
24445
|
"$flags$": 297,
|
|
@@ -24353,7 +24474,8 @@ class KolInputPassword {
|
|
|
24353
24474
|
"_passwordVisible": [32],
|
|
24354
24475
|
"inputHasFocus": [32],
|
|
24355
24476
|
"getValue": [64],
|
|
24356
|
-
"focus": [64]
|
|
24477
|
+
"focus": [64],
|
|
24478
|
+
"click": [64]
|
|
24357
24479
|
},
|
|
24358
24480
|
"$listeners$": undefined,
|
|
24359
24481
|
"$lazyBundleId$": "-",
|
|
@@ -24399,7 +24521,7 @@ const RadioStateWrapper = (_a) => {
|
|
|
24399
24521
|
return hAsync(RadioFc, Object.assign({ inputProps: getRadioProps(state, inputProps) }, other));
|
|
24400
24522
|
};
|
|
24401
24523
|
|
|
24402
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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}";
|
|
24524
|
+
const defaultStyleCss$q = "@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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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__label-text {\n flex-flow: row;\n align-items: flex-start;\n justify-content: flex-start;\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}";
|
|
24403
24525
|
|
|
24404
24526
|
class KolInputRadio {
|
|
24405
24527
|
async getValue() {
|
|
@@ -24408,6 +24530,9 @@ class KolInputRadio {
|
|
|
24408
24530
|
async focus() {
|
|
24409
24531
|
return delegateFocus(this.host, () => setFocus(this.getFocusableInput()));
|
|
24410
24532
|
}
|
|
24533
|
+
async click() {
|
|
24534
|
+
return delegateClick(this.host, async () => setClick(this.inputRef));
|
|
24535
|
+
}
|
|
24411
24536
|
getFocusableInput() {
|
|
24412
24537
|
const options = this.state._options;
|
|
24413
24538
|
const isComponentDisabled = Boolean(this.state._disabled);
|
|
@@ -24443,7 +24568,7 @@ class KolInputRadio {
|
|
|
24443
24568
|
};
|
|
24444
24569
|
}
|
|
24445
24570
|
render() {
|
|
24446
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
24571
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '1e1e04daad6bb20cd01acba0ead0ce1a7354babf' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
|
|
24447
24572
|
}
|
|
24448
24573
|
calculateDisabled(option) {
|
|
24449
24574
|
return Boolean(this.state._disabled) || Boolean(option.disabled);
|
|
@@ -24611,7 +24736,7 @@ class KolInputRadio {
|
|
|
24611
24736
|
"_value": ["validateValue"]
|
|
24612
24737
|
}; }
|
|
24613
24738
|
static get style() { return {
|
|
24614
|
-
default: defaultStyleCss$
|
|
24739
|
+
default: defaultStyleCss$q
|
|
24615
24740
|
}; }
|
|
24616
24741
|
static get cmpMeta() { return {
|
|
24617
24742
|
"$flags$": 297,
|
|
@@ -24635,7 +24760,8 @@ class KolInputRadio {
|
|
|
24635
24760
|
"state": [32],
|
|
24636
24761
|
"inputHasFocus": [32],
|
|
24637
24762
|
"getValue": [64],
|
|
24638
|
-
"focus": [64]
|
|
24763
|
+
"focus": [64],
|
|
24764
|
+
"click": [64]
|
|
24639
24765
|
},
|
|
24640
24766
|
"$listeners$": undefined,
|
|
24641
24767
|
"$lazyBundleId$": "-",
|
|
@@ -24679,12 +24805,15 @@ class InputRangeController extends InputIconController {
|
|
|
24679
24805
|
}
|
|
24680
24806
|
}
|
|
24681
24807
|
|
|
24682
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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}";
|
|
24808
|
+
const defaultStyleCss$p = "@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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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}";
|
|
24683
24809
|
|
|
24684
24810
|
class KolInputRange {
|
|
24685
24811
|
async focus() {
|
|
24686
24812
|
return delegateFocus(this.host, () => setFocus(this.refInputNumber));
|
|
24687
24813
|
}
|
|
24814
|
+
async click() {
|
|
24815
|
+
return delegateClick(this.host, async () => setClick(this.refInputNumber));
|
|
24816
|
+
}
|
|
24688
24817
|
getSanitizedFloatValue(value) {
|
|
24689
24818
|
const floatValue = parseFloat(value);
|
|
24690
24819
|
if (this.state._max && floatValue > this.state._max) {
|
|
@@ -24752,7 +24881,7 @@ class KolInputRange {
|
|
|
24752
24881
|
const inputsWrapperStyle = {
|
|
24753
24882
|
'--kolibri-input-range--input-number--width': `calc(${String(this.state._max).length}ch + 2em)`,
|
|
24754
24883
|
};
|
|
24755
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
24884
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '268b6499f4ed8053555bb1d8b4066121402be3fb' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '5fa5b85ade2e0182da03fcef304636d5e768f2fa', state: this.state }, hAsync("div", { key: '97b960e6d16dec78c1fa65e954370b58270cc46d', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, hAsync(InputStateWrapper, Object.assign({ key: 'b3cd43e14df212f9ec54a36ac5c4155e1a914bc2', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), hAsync(InputStateWrapper, Object.assign({ key: '430645b42fc48899b31eafda6b826abc05ff664f', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && hAsync(SuggestionsFc, { key: '5370d9819d71b8f89af6dc0c501c4aa9cc3e710b', id: this.state._id, suggestions: this.state._suggestions }))));
|
|
24756
24885
|
}
|
|
24757
24886
|
constructor(hostRef) {
|
|
24758
24887
|
registerInstance(this, hostRef);
|
|
@@ -24903,7 +25032,7 @@ class KolInputRange {
|
|
|
24903
25032
|
"_value": ["validateValue"]
|
|
24904
25033
|
}; }
|
|
24905
25034
|
static get style() { return {
|
|
24906
|
-
default: defaultStyleCss$
|
|
25035
|
+
default: defaultStyleCss$p
|
|
24907
25036
|
}; }
|
|
24908
25037
|
static get cmpMeta() { return {
|
|
24909
25038
|
"$flags$": 297,
|
|
@@ -24933,6 +25062,7 @@ class KolInputRange {
|
|
|
24933
25062
|
"_initialValueType": [32],
|
|
24934
25063
|
"inputHasFocus": [32],
|
|
24935
25064
|
"focus": [64],
|
|
25065
|
+
"click": [64],
|
|
24936
25066
|
"getValue": [64]
|
|
24937
25067
|
},
|
|
24938
25068
|
"$listeners$": undefined,
|
|
@@ -24941,7 +25071,7 @@ class KolInputRange {
|
|
|
24941
25071
|
}; }
|
|
24942
25072
|
}
|
|
24943
25073
|
|
|
24944
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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}";
|
|
25074
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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}";
|
|
24945
25075
|
|
|
24946
25076
|
class KolInputText {
|
|
24947
25077
|
async getValue() {
|
|
@@ -24951,6 +25081,9 @@ class KolInputText {
|
|
|
24951
25081
|
async focus() {
|
|
24952
25082
|
return delegateFocus(this.host, () => setFocus(this.inputRef));
|
|
24953
25083
|
}
|
|
25084
|
+
async click() {
|
|
25085
|
+
return delegateFocus(this.host, async () => setFocus(this.inputRef));
|
|
25086
|
+
}
|
|
24954
25087
|
async selectionStart() {
|
|
24955
25088
|
var _a;
|
|
24956
25089
|
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.selectionStart);
|
|
@@ -24992,7 +25125,7 @@ class KolInputText {
|
|
|
24992
25125
|
return Object.assign(Object.assign({ ref: this.setInputRef, state: this.state, ariaDescribedBy }, this.controller.onFacade), { onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown });
|
|
24993
25126
|
}
|
|
24994
25127
|
render() {
|
|
24995
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
25128
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'd95fa379be351eed64c99b2cbb107bbd747f4355' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '702a87b87fc635bf641d37765a648f83c0018851', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '815c5731ed4978da540e51e9b1b18e58818cc72d' }, this.getInputProps())))));
|
|
24996
25129
|
}
|
|
24997
25130
|
constructor(hostRef) {
|
|
24998
25131
|
registerInstance(this, hostRef);
|
|
@@ -25171,7 +25304,7 @@ class KolInputText {
|
|
|
25171
25304
|
"_value": ["validateValue"]
|
|
25172
25305
|
}; }
|
|
25173
25306
|
static get style() { return {
|
|
25174
|
-
default: defaultStyleCss$
|
|
25307
|
+
default: defaultStyleCss$o
|
|
25175
25308
|
}; }
|
|
25176
25309
|
static get cmpMeta() { return {
|
|
25177
25310
|
"$flags$": 297,
|
|
@@ -25208,6 +25341,7 @@ class KolInputText {
|
|
|
25208
25341
|
"inputHasFocus": [32],
|
|
25209
25342
|
"getValue": [64],
|
|
25210
25343
|
"focus": [64],
|
|
25344
|
+
"click": [64],
|
|
25211
25345
|
"selectionStart": [64],
|
|
25212
25346
|
"selectioconEnd": [64],
|
|
25213
25347
|
"setSelectionRange": [64],
|
|
@@ -25220,7 +25354,7 @@ class KolInputText {
|
|
|
25220
25354
|
}; }
|
|
25221
25355
|
}
|
|
25222
25356
|
|
|
25223
|
-
const defaultStyleCss$
|
|
25357
|
+
const defaultStyleCss$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 .kol-kolibri {\n display: inline-block;\n max-height: 100%;\n }\n .kol-kolibri__text {\n font-size: calc(90 * 1rem / var(--kolibri-root-font-size, 16));\n letter-spacing: normal;\n word-spacing: normal;\n }\n}";
|
|
25224
25358
|
|
|
25225
25359
|
class KolKolibri {
|
|
25226
25360
|
constructor(hostRef) {
|
|
@@ -25276,7 +25410,7 @@ class KolKolibri {
|
|
|
25276
25410
|
"_labeled": ["validateLabeled"]
|
|
25277
25411
|
}; }
|
|
25278
25412
|
static get style() { return {
|
|
25279
|
-
default: defaultStyleCss$
|
|
25413
|
+
default: defaultStyleCss$n
|
|
25280
25414
|
}; }
|
|
25281
25415
|
static get cmpMeta() { return {
|
|
25282
25416
|
"$flags$": 297,
|
|
@@ -25292,7 +25426,7 @@ class KolKolibri {
|
|
|
25292
25426
|
}; }
|
|
25293
25427
|
}
|
|
25294
25428
|
|
|
25295
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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 }\n}";
|
|
25429
|
+
const defaultStyleCss$m = "/* 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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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 }\n}";
|
|
25296
25430
|
|
|
25297
25431
|
class KolLink {
|
|
25298
25432
|
constructor(hostRef) {
|
|
@@ -25313,7 +25447,7 @@ class KolLink {
|
|
|
25313
25447
|
}
|
|
25314
25448
|
get host() { return getElement(this); }
|
|
25315
25449
|
static get style() { return {
|
|
25316
|
-
default: defaultStyleCss$
|
|
25450
|
+
default: defaultStyleCss$m
|
|
25317
25451
|
}; }
|
|
25318
25452
|
static get cmpMeta() { return {
|
|
25319
25453
|
"$flags$": 297,
|
|
@@ -25345,7 +25479,7 @@ class KolLink {
|
|
|
25345
25479
|
}; }
|
|
25346
25480
|
}
|
|
25347
25481
|
|
|
25348
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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}";
|
|
25482
|
+
const defaultStyleCss$l = "@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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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}";
|
|
25349
25483
|
|
|
25350
25484
|
class KolLinkButton {
|
|
25351
25485
|
constructor(hostRef) {
|
|
@@ -25361,12 +25495,15 @@ class KolLinkButton {
|
|
|
25361
25495
|
async focus() {
|
|
25362
25496
|
return delegateFocus(this.host, () => setFocus(this.linkWcRef));
|
|
25363
25497
|
}
|
|
25498
|
+
async click() {
|
|
25499
|
+
return delegateClick(this.host, async () => setClick(this.linkWcRef));
|
|
25500
|
+
}
|
|
25364
25501
|
render() {
|
|
25365
|
-
return (hAsync(KolLinkWcTag, { key: '
|
|
25502
|
+
return (hAsync(KolLinkWcTag, { key: 'd63c9891ec37b32a79337a94eee17024a048fdfa', ref: this.setLinkWcRef, _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: 'aedb68d9cae5ba3aa844f2c604a6079405f4f01c', name: "expert", slot: "expert" })));
|
|
25366
25503
|
}
|
|
25367
25504
|
get host() { return getElement(this); }
|
|
25368
25505
|
static get style() { return {
|
|
25369
|
-
default: defaultStyleCss$
|
|
25506
|
+
default: defaultStyleCss$l
|
|
25370
25507
|
}; }
|
|
25371
25508
|
static get cmpMeta() { return {
|
|
25372
25509
|
"$flags$": 297,
|
|
@@ -25389,7 +25526,8 @@ class KolLinkButton {
|
|
|
25389
25526
|
"_target": [1],
|
|
25390
25527
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
25391
25528
|
"_variant": [1],
|
|
25392
|
-
"focus": [64]
|
|
25529
|
+
"focus": [64],
|
|
25530
|
+
"click": [64]
|
|
25393
25531
|
},
|
|
25394
25532
|
"$listeners$": undefined,
|
|
25395
25533
|
"$lazyBundleId$": "-",
|
|
@@ -25460,12 +25598,15 @@ class KolLinkWc {
|
|
|
25460
25598
|
async focus() {
|
|
25461
25599
|
return setFocus(this.anchorRef);
|
|
25462
25600
|
}
|
|
25601
|
+
async click() {
|
|
25602
|
+
return setClick(this.anchorRef);
|
|
25603
|
+
}
|
|
25463
25604
|
render() {
|
|
25464
25605
|
var _a;
|
|
25465
25606
|
const { isExternal, tagAttrs } = this.getRenderValues();
|
|
25466
25607
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
25467
25608
|
const ariaDescription = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim();
|
|
25468
|
-
return (hAsync(Host, { key: '
|
|
25609
|
+
return (hAsync(Host, { key: '58745654de3846e9905571681166fcc819a1b118' }, hAsync("a", Object.assign({ key: '62844b7d446bceb7148568a4bccc904b7078bbd7', ref: this.setAnchorRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": typeof this.state._ariaExpanded === 'boolean' ? String(this.state._ariaExpanded) : undefined, "aria-owns": this.state._ariaOwns, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
|
|
25469
25610
|
? `${this.state._label}${isExternal ? ` (${this.translateOpenLinkInTab})` : ''}`
|
|
25470
25611
|
: undefined, "aria-keyshortcuts": this.state._shortKey, class: clsx('kol-link', {
|
|
25471
25612
|
'kol-link--disabled': this.state._disabled === true,
|
|
@@ -25475,7 +25616,7 @@ class KolLinkWc {
|
|
|
25475
25616
|
'kol-link--inline': this.state._inline === true,
|
|
25476
25617
|
'kol-link--standalone': this.state._inline === false,
|
|
25477
25618
|
[this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
25478
|
-
}) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(SpanFC, { key: '
|
|
25619
|
+
}) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(SpanFC, { key: '850d35f1ad8e13406bb775a5e3ba4f0109b0c3ca', class: "kol-link__text", badgeText: this.state._accessKey || this.state._shortKey, icons: this.state._icons, hideLabel: this.state._hideLabel, label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: 'e9f863218c91c4080f57e77d729d0e467acc1197', name: "expert", slot: "expert" })), isExternal && (hAsync(IconFC, { key: '22f12df35ccdd6c0c2b8f7e3434bb2c39610fea7', class: "kol-link__icon", label: this.state._hideLabel ? '' : this.translateOpenLinkInTab, icons: 'kolicon-link-external', "aria-hidden": this.state._hideLabel }))), this.state._hideLabel === true && (hAsync(KolTooltipWcTag, { key: '1a6932ca73f272c8070681c8c6a0f25f4f94ea5a', "aria-hidden": "true", class: "kol-link__tooltip", ref: this.setTooltipRef, hidden: hasExpertSlot, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href }))));
|
|
25479
25620
|
}
|
|
25480
25621
|
validateAccessKey(value) {
|
|
25481
25622
|
validateAccessKey(this, value);
|
|
@@ -25626,7 +25767,8 @@ class KolLinkWc {
|
|
|
25626
25767
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
25627
25768
|
"_variant": [1],
|
|
25628
25769
|
"state": [32],
|
|
25629
|
-
"focus": [64]
|
|
25770
|
+
"focus": [64],
|
|
25771
|
+
"click": [64]
|
|
25630
25772
|
},
|
|
25631
25773
|
"$listeners$": undefined,
|
|
25632
25774
|
"$lazyBundleId$": "-",
|
|
@@ -25634,7 +25776,259 @@ class KolLinkWc {
|
|
|
25634
25776
|
}; }
|
|
25635
25777
|
}
|
|
25636
25778
|
|
|
25637
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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 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}";
|
|
25779
|
+
function getMeterState(value, min, max, low, high, optimum) {
|
|
25780
|
+
const effectiveLow = low !== null && low !== void 0 ? low : min;
|
|
25781
|
+
const effectiveHigh = high !== null && high !== void 0 ? high : max;
|
|
25782
|
+
if (optimum === undefined) {
|
|
25783
|
+
const inMidRegion = value >= effectiveLow && value <= effectiveHigh;
|
|
25784
|
+
return inMidRegion ? 'optimum' : 'suboptimal';
|
|
25785
|
+
}
|
|
25786
|
+
const inLowRegion = value < effectiveLow;
|
|
25787
|
+
const inHighRegion = value > effectiveHigh;
|
|
25788
|
+
const inMidRegion = !inLowRegion && !inHighRegion;
|
|
25789
|
+
const optimumInLow = optimum < effectiveLow;
|
|
25790
|
+
const optimumInHigh = optimum > effectiveHigh;
|
|
25791
|
+
if (optimumInLow) {
|
|
25792
|
+
if (inLowRegion)
|
|
25793
|
+
return 'optimum';
|
|
25794
|
+
if (inMidRegion)
|
|
25795
|
+
return 'suboptimal';
|
|
25796
|
+
return 'critical';
|
|
25797
|
+
}
|
|
25798
|
+
else if (optimumInHigh) {
|
|
25799
|
+
if (inHighRegion)
|
|
25800
|
+
return 'optimum';
|
|
25801
|
+
if (inMidRegion)
|
|
25802
|
+
return 'suboptimal';
|
|
25803
|
+
return 'critical';
|
|
25804
|
+
}
|
|
25805
|
+
else {
|
|
25806
|
+
if (inMidRegion)
|
|
25807
|
+
return 'optimum';
|
|
25808
|
+
return 'suboptimal';
|
|
25809
|
+
}
|
|
25810
|
+
}
|
|
25811
|
+
const MeterFC = (props) => {
|
|
25812
|
+
const { high, label, low, liveValue, max, min, optimum, orientation, unit, value } = props;
|
|
25813
|
+
const isVertical = orientation === 'vertical';
|
|
25814
|
+
const isPercentage = unit === '%';
|
|
25815
|
+
const displayValue = isPercentage ? Math.round(((value - min) / (max - min)) * 100) : value;
|
|
25816
|
+
const liveMeterValue = isPercentage ? `${Math.round(((liveValue - min) / (max - min)) * 100)}` : liveValue;
|
|
25817
|
+
const valueColumnWidth = `${`${(isPercentage ? 100 : max) + 1}`.length}ch`;
|
|
25818
|
+
const fillPercentage = Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100));
|
|
25819
|
+
const state = getMeterState(value, min, max, low, high, optimum);
|
|
25820
|
+
const hasStateClassification = low !== undefined || high !== undefined;
|
|
25821
|
+
const stateLabel = hasStateClassification ? translate(`kol-meter-state-${state}`) : '';
|
|
25822
|
+
const liveValueText = isPercentage
|
|
25823
|
+
? translate('kol-live-value', { placeholders: { value: String(liveMeterValue), unit } })
|
|
25824
|
+
: translate('kol-live-value-bounded', { placeholders: { value: String(liveMeterValue), max: String(max), unit } });
|
|
25825
|
+
const liveValueWithState = hasStateClassification ? `${liveValueText} – ${stateLabel}` : liveValueText;
|
|
25826
|
+
const fillClass = {
|
|
25827
|
+
'kol-meter__bar-fill': true,
|
|
25828
|
+
'kol-meter__bar-fill--optimum': state === 'optimum',
|
|
25829
|
+
'kol-meter__bar-fill--suboptimal': state === 'suboptimal',
|
|
25830
|
+
'kol-meter__bar-fill--critical': state === 'critical',
|
|
25831
|
+
};
|
|
25832
|
+
return (hAsync("div", { class: { 'kol-meter': true, 'kol-meter--vertical': isVertical } }, hAsync("div", { "aria-hidden": "true", class: "kol-meter__bar" }, hAsync("div", { class: "kol-meter__bar-label" }, label, hasStateClassification && (hAsync("span", { class: `kol-meter__bar-state kol-meter__bar-state--${state}` }, ' – ', stateLabel))), isVertical ? (hAsync("div", { class: "kol-meter__bar-track" }, hAsync("div", { class: fillClass, style: { height: `calc((100% - 6px) * ${fillPercentage / 100})` } }))) : (hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "12", overflow: "visible" }, hAsync("rect", { class: "kol-meter__bar-background", x: "1", y: "1", height: "11", rx: "5", fill: "currentColor", stroke: "currentColor", "stroke-width": "3", width: "100%" }), hAsync("rect", { class: "kol-meter__bar-border", x: "1", y: "1", height: "11", rx: "5", fill: "currentColor", stroke: "currentColor", "stroke-width": "1", width: "100%" }), hAsync("rect", { class: fillClass, x: "3", y: "3", height: "7", rx: "3.5", fill: "currentColor", stroke: "currentColor", "stroke-width": "3", style: { width: `calc(${fillPercentage}% - 4px)` } }))), hAsync("span", { class: "kol-meter__value-unit" }, hAsync("span", { class: "kol-meter__value", style: isVertical ? {} : { width: valueColumnWidth } }, displayValue), '\u00A0', hAsync("span", { class: "kol-meter__unit" }, unit))), hAsync("meter", { "aria-label": label, class: "visually-hidden", high: high, low: low, max: max, min: min, optimum: optimum, value: value }), hAsync("span", { "aria-live": "polite", "aria-relevant": "additions text", class: "visually-hidden" }, liveValueWithState)));
|
|
25833
|
+
};
|
|
25834
|
+
|
|
25835
|
+
const meterPropsConfig = {
|
|
25836
|
+
optional: [minProp, orientationProp, unitProp],
|
|
25837
|
+
required: [labelProp, maxProp, numberValueProp],
|
|
25838
|
+
};
|
|
25839
|
+
|
|
25840
|
+
class MeterController extends BaseController {
|
|
25841
|
+
constructor(setState, getState) {
|
|
25842
|
+
super(meterPropsConfig, setState, getState);
|
|
25843
|
+
this.meterData = { high: undefined, low: undefined, optimum: undefined };
|
|
25844
|
+
}
|
|
25845
|
+
componentWillLoad(props) {
|
|
25846
|
+
const { high, label, low, max, min, optimum, orientation, unit, value } = props;
|
|
25847
|
+
this.watchHigh(high);
|
|
25848
|
+
this.watchLabel(label);
|
|
25849
|
+
this.watchLow(low);
|
|
25850
|
+
this.watchMax(max);
|
|
25851
|
+
this.watchMin(min);
|
|
25852
|
+
this.watchOptimum(optimum);
|
|
25853
|
+
this.watchOrientation(orientation);
|
|
25854
|
+
this.watchUnit(unit);
|
|
25855
|
+
this.watchValue(value);
|
|
25856
|
+
this.setState('liveValue', this.getRenderProp('value'));
|
|
25857
|
+
this.startLiveValueInterval();
|
|
25858
|
+
}
|
|
25859
|
+
destroy() {
|
|
25860
|
+
if (this.interval) {
|
|
25861
|
+
clearInterval(this.interval);
|
|
25862
|
+
this.interval = undefined;
|
|
25863
|
+
}
|
|
25864
|
+
}
|
|
25865
|
+
getMeterData() {
|
|
25866
|
+
return this.meterData;
|
|
25867
|
+
}
|
|
25868
|
+
watchHigh(value) {
|
|
25869
|
+
if (value === undefined) {
|
|
25870
|
+
this.meterData.high = undefined;
|
|
25871
|
+
}
|
|
25872
|
+
else {
|
|
25873
|
+
highProp.apply(value, (v) => {
|
|
25874
|
+
this.meterData.high = v;
|
|
25875
|
+
});
|
|
25876
|
+
}
|
|
25877
|
+
}
|
|
25878
|
+
watchLabel(value) {
|
|
25879
|
+
labelProp.apply(value, (v) => {
|
|
25880
|
+
this.setRenderProp('label', v);
|
|
25881
|
+
});
|
|
25882
|
+
}
|
|
25883
|
+
watchLow(value) {
|
|
25884
|
+
if (value === undefined) {
|
|
25885
|
+
this.meterData.low = undefined;
|
|
25886
|
+
}
|
|
25887
|
+
else {
|
|
25888
|
+
lowProp.apply(value, (v) => {
|
|
25889
|
+
this.meterData.low = v;
|
|
25890
|
+
});
|
|
25891
|
+
}
|
|
25892
|
+
}
|
|
25893
|
+
watchMax(value) {
|
|
25894
|
+
maxProp.apply(value, (v) => {
|
|
25895
|
+
this.setRenderProp('max', v);
|
|
25896
|
+
});
|
|
25897
|
+
}
|
|
25898
|
+
watchMin(value) {
|
|
25899
|
+
minProp.apply(value, (v) => {
|
|
25900
|
+
this.setRenderProp('min', v);
|
|
25901
|
+
});
|
|
25902
|
+
}
|
|
25903
|
+
watchOptimum(value) {
|
|
25904
|
+
if (value === undefined) {
|
|
25905
|
+
this.meterData.optimum = undefined;
|
|
25906
|
+
}
|
|
25907
|
+
else {
|
|
25908
|
+
optimumProp.apply(value, (v) => {
|
|
25909
|
+
this.meterData.optimum = v;
|
|
25910
|
+
});
|
|
25911
|
+
}
|
|
25912
|
+
}
|
|
25913
|
+
watchOrientation(value) {
|
|
25914
|
+
orientationProp.apply(value, (v) => {
|
|
25915
|
+
this.setRenderProp('orientation', v);
|
|
25916
|
+
});
|
|
25917
|
+
}
|
|
25918
|
+
watchUnit(value) {
|
|
25919
|
+
unitProp.apply(value, (v) => {
|
|
25920
|
+
this.setRenderProp('unit', v);
|
|
25921
|
+
});
|
|
25922
|
+
}
|
|
25923
|
+
watchValue(value) {
|
|
25924
|
+
numberValueProp.apply(value, (v) => {
|
|
25925
|
+
this.setRenderProp('value', v);
|
|
25926
|
+
});
|
|
25927
|
+
}
|
|
25928
|
+
startLiveValueInterval() {
|
|
25929
|
+
this.interval = setInterval(() => {
|
|
25930
|
+
const value = this.getRenderProp('value');
|
|
25931
|
+
if (this.getState('liveValue') !== value) {
|
|
25932
|
+
this.setState('liveValue', value);
|
|
25933
|
+
}
|
|
25934
|
+
}, 5000);
|
|
25935
|
+
}
|
|
25936
|
+
}
|
|
25937
|
+
|
|
25938
|
+
const defaultStyleCss$k = "/* 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 .kol-meter__bar {\n display: grid;\n column-gap: calc(0.8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n grid-template-columns: 1fr auto;\n }\n .kol-meter__bar-label {\n grid-column-end: 2;\n grid-area: LABEL;\n }\n .kol-meter__bar svg {\n grid-area: BAR;\n }\n .kol-meter__bar-border {\n fill: transparent;\n stroke: black;\n }\n .kol-meter__bar-background {\n fill: lightgray;\n stroke: white;\n }\n .kol-meter__bar-fill {\n stroke: transparent;\n }\n @media (prefers-reduced-motion: no-preference) {\n .kol-meter__bar-fill {\n transition: 250ms ease-in-out 50ms;\n }\n }\n .kol-meter__bar-fill--optimum {\n color: #2ea32e;\n color: #2ea32e;\n fill: #2ea32e;\n }\n .kol-meter__bar-fill--suboptimal {\n color: #c8a000;\n color: #c8a000;\n fill: #c8a000;\n }\n .kol-meter__bar-fill--critical {\n color: #c00;\n color: #c00;\n fill: #c00;\n }\n .kol-meter__value-unit {\n display: contents;\n }\n .kol-meter__value {\n grid-area: VALUE;\n text-align: right;\n }\n .kol-meter__unit {\n grid-area: UNIT;\n }\n .kol-meter--vertical {\n display: inline-flex;\n }\n .kol-meter--vertical .kol-meter__bar {\n display: flex;\n min-height: var(--kol-meter-height, calc(128 * 1rem / var(--kolibri-root-font-size, 16)));\n row-gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n flex-direction: column;\n align-items: center;\n }\n .kol-meter--vertical .kol-meter__bar-label {\n text-align: center;\n }\n .kol-meter--vertical .kol-meter__bar-track {\n background: lightgray;\n outline: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) solid black;\n border-radius: calc(6 * 1rem / var(--kolibri-root-font-size, 16));\n position: relative;\n width: calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n min-height: 0;\n overflow: hidden;\n flex: 1;\n }\n .kol-meter--vertical .kol-meter__bar-fill {\n background: currentColor;\n border-radius: calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n right: calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n bottom: calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n left: calc(3 * 1rem / var(--kolibri-root-font-size, 16));\n }\n @media (prefers-reduced-motion: no-preference) {\n .kol-meter--vertical .kol-meter__bar-fill {\n transition: height 250ms ease-in-out 50ms;\n }\n }\n .kol-meter--vertical .kol-meter__value-unit {\n display: contents;\n }\n .kol-meter--vertical .kol-meter__value {\n width: auto;\n text-align: center;\n }\n .kol-meter--vertical .kol-meter__unit {\n text-align: center;\n }\n}";
|
|
25939
|
+
|
|
25940
|
+
class KolMeter extends BaseWebComponent {
|
|
25941
|
+
constructor(hostRef) {
|
|
25942
|
+
super();
|
|
25943
|
+
registerInstance(this, hostRef);
|
|
25944
|
+
this.ctrl = new MeterController(this.setState, this.getState);
|
|
25945
|
+
this._orientation = 'horizontal';
|
|
25946
|
+
this._unit = '%';
|
|
25947
|
+
this.liveValue = 0;
|
|
25948
|
+
}
|
|
25949
|
+
watchHigh(value) {
|
|
25950
|
+
this.ctrl.watchHigh(value);
|
|
25951
|
+
}
|
|
25952
|
+
watchLabel(value) {
|
|
25953
|
+
this.ctrl.watchLabel(value);
|
|
25954
|
+
}
|
|
25955
|
+
watchLow(value) {
|
|
25956
|
+
this.ctrl.watchLow(value);
|
|
25957
|
+
}
|
|
25958
|
+
watchMax(value) {
|
|
25959
|
+
this.ctrl.watchMax(value);
|
|
25960
|
+
}
|
|
25961
|
+
watchMin(value) {
|
|
25962
|
+
this.ctrl.watchMin(value);
|
|
25963
|
+
}
|
|
25964
|
+
watchOptimum(value) {
|
|
25965
|
+
this.ctrl.watchOptimum(value);
|
|
25966
|
+
}
|
|
25967
|
+
watchOrientation(value) {
|
|
25968
|
+
this.ctrl.watchOrientation(value);
|
|
25969
|
+
}
|
|
25970
|
+
watchUnit(value) {
|
|
25971
|
+
this.ctrl.watchUnit(value);
|
|
25972
|
+
}
|
|
25973
|
+
watchValue(value) {
|
|
25974
|
+
this.ctrl.watchValue(value);
|
|
25975
|
+
}
|
|
25976
|
+
componentWillLoad() {
|
|
25977
|
+
this.ctrl.componentWillLoad({
|
|
25978
|
+
high: this._high,
|
|
25979
|
+
label: this._label,
|
|
25980
|
+
low: this._low,
|
|
25981
|
+
max: this._max,
|
|
25982
|
+
min: this._min,
|
|
25983
|
+
optimum: this._optimum,
|
|
25984
|
+
orientation: this._orientation,
|
|
25985
|
+
unit: this._unit,
|
|
25986
|
+
value: this._value,
|
|
25987
|
+
});
|
|
25988
|
+
}
|
|
25989
|
+
disconnectedCallback() {
|
|
25990
|
+
this.ctrl.destroy();
|
|
25991
|
+
}
|
|
25992
|
+
render() {
|
|
25993
|
+
const { high, low, optimum } = this.ctrl.getMeterData();
|
|
25994
|
+
return (hAsync(Host, { key: 'ebafcfbab3c42dad671ca0dd990e624b412ae003' }, hAsync(MeterFC, { key: '477f6c9a0a87d133a30a3ce1fc6bc4929d06fec0', high: high, label: this.ctrl.getRenderProp('label'), low: low, liveValue: this.liveValue, max: this.ctrl.getRenderProp('max'), min: this.ctrl.getRenderProp('min'), optimum: optimum, orientation: this.ctrl.getRenderProp('orientation'), unit: this.ctrl.getRenderProp('unit'), value: this.ctrl.getRenderProp('value') })));
|
|
25995
|
+
}
|
|
25996
|
+
static get watchers() { return {
|
|
25997
|
+
"_high": ["watchHigh"],
|
|
25998
|
+
"_label": ["watchLabel"],
|
|
25999
|
+
"_low": ["watchLow"],
|
|
26000
|
+
"_max": ["watchMax"],
|
|
26001
|
+
"_min": ["watchMin"],
|
|
26002
|
+
"_optimum": ["watchOptimum"],
|
|
26003
|
+
"_orientation": ["watchOrientation"],
|
|
26004
|
+
"_unit": ["watchUnit"],
|
|
26005
|
+
"_value": ["watchValue"]
|
|
26006
|
+
}; }
|
|
26007
|
+
static get style() { return {
|
|
26008
|
+
default: defaultStyleCss$k
|
|
26009
|
+
}; }
|
|
26010
|
+
static get cmpMeta() { return {
|
|
26011
|
+
"$flags$": 809,
|
|
26012
|
+
"$tagName$": "kol-meter",
|
|
26013
|
+
"$members$": {
|
|
26014
|
+
"_high": [2],
|
|
26015
|
+
"_label": [1],
|
|
26016
|
+
"_low": [2],
|
|
26017
|
+
"_max": [2],
|
|
26018
|
+
"_min": [2],
|
|
26019
|
+
"_optimum": [2],
|
|
26020
|
+
"_orientation": [1],
|
|
26021
|
+
"_unit": [1],
|
|
26022
|
+
"_value": [2],
|
|
26023
|
+
"liveValue": [32]
|
|
26024
|
+
},
|
|
26025
|
+
"$listeners$": undefined,
|
|
26026
|
+
"$lazyBundleId$": "-",
|
|
26027
|
+
"$attrsToReflect$": []
|
|
26028
|
+
}; }
|
|
26029
|
+
}
|
|
26030
|
+
|
|
26031
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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 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}";
|
|
25638
26032
|
|
|
25639
26033
|
class KolModal {
|
|
25640
26034
|
constructor(hostRef) {
|
|
@@ -25654,7 +26048,7 @@ class KolModal {
|
|
|
25654
26048
|
await ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.closeModal());
|
|
25655
26049
|
}
|
|
25656
26050
|
render() {
|
|
25657
|
-
return (hAsync(KolDialogWcTag, { key: '
|
|
26051
|
+
return (hAsync(KolDialogWcTag, { key: 'ce70e046e276bf6ace481d229f0dc2331ab8eda2', ref: this.catchRef, _label: this._label, _on: this._on, _variant: this._variant, _width: this._width }, hAsync("slot", { key: 'e5ac14e67acc40760de6b0cac1676d665a9229cf' })));
|
|
25658
26052
|
}
|
|
25659
26053
|
static get style() { return {
|
|
25660
26054
|
default: defaultStyleCss$j
|
|
@@ -25676,7 +26070,7 @@ class KolModal {
|
|
|
25676
26070
|
}; }
|
|
25677
26071
|
}
|
|
25678
26072
|
|
|
25679
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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}";
|
|
26073
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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}";
|
|
25680
26074
|
|
|
25681
26075
|
const entryIsLink = (entryProps) => {
|
|
25682
26076
|
return typeof entryProps._href === 'string';
|
|
@@ -25805,9 +26199,9 @@ class KolNav {
|
|
|
25805
26199
|
}
|
|
25806
26200
|
render() {
|
|
25807
26201
|
const collapsible = this.state._collapsible === true;
|
|
25808
|
-
return (hAsync("div", { key: '
|
|
26202
|
+
return (hAsync("div", { key: '2e22ff07a354fe98d90e00a371ca70f04f942d65', class: clsx('kol-nav', {
|
|
25809
26203
|
'kol-nav--is-compact': this.state._hideLabel,
|
|
25810
|
-
}) }, hAsync("nav", { key: '
|
|
26204
|
+
}) }, hAsync("nav", { key: 'ea73efc3b33a593ef8946fbfffac3be0fdff7c20', "aria-label": this.state._label, class: "kol-nav__navigation", id: this.navId }, hAsync(this.linkList, { key: '96b151647e545326d79d34b0ce1d7bf4d25526d9', collapsible: collapsible, deep: 0, links: this.state._links, id: this.listId })), this.state._hasCompactButton && (hAsync("div", { key: 'af9ba65be8b1a75b5ac7e2d4c88b496245bec2d7', class: "kol-nav__compact" }, hAsync(KolButtonWcTag, { key: '9912e35007b21ebf563d87f09bb8967da24e09fb', 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: {
|
|
25811
26205
|
onClick: () => {
|
|
25812
26206
|
this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: !this.state._hideLabel });
|
|
25813
26207
|
},
|
|
@@ -25881,7 +26275,7 @@ class KolNav {
|
|
|
25881
26275
|
}; }
|
|
25882
26276
|
}
|
|
25883
26277
|
|
|
25884
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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 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 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}";
|
|
26278
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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 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 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}";
|
|
25885
26279
|
|
|
25886
26280
|
class KolPagination {
|
|
25887
26281
|
constructor(hostRef) {
|
|
@@ -25894,7 +26288,7 @@ class KolPagination {
|
|
|
25894
26288
|
this._tooltipAlign = 'top';
|
|
25895
26289
|
}
|
|
25896
26290
|
render() {
|
|
25897
|
-
return (hAsync(KolPaginationWcTag, { key: '
|
|
26291
|
+
return (hAsync(KolPaginationWcTag, { key: '79396668eddabeb480a9c20bacf973db3175c0fe', _boundaryCount: this._boundaryCount, _label: this._label, _customClass: this._customClass, _on: this._on, _hasButtons: this._hasButtons, _page: this._page, _pageSize: this._pageSize, _pageSizeOptions: this._pageSizeOptions, _siblingCount: this._siblingCount, _tooltipAlign: this._tooltipAlign, _max: this._max }));
|
|
25898
26292
|
}
|
|
25899
26293
|
static get style() { return {
|
|
25900
26294
|
default: defaultStyleCss$h
|
|
@@ -26290,7 +26684,7 @@ class KolPaginationWc {
|
|
|
26290
26684
|
}; }
|
|
26291
26685
|
}
|
|
26292
26686
|
|
|
26293
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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}";
|
|
26687
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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}";
|
|
26294
26688
|
|
|
26295
26689
|
class KolPopoverButton {
|
|
26296
26690
|
constructor(hostRef) {
|
|
@@ -26314,11 +26708,14 @@ class KolPopoverButton {
|
|
|
26314
26708
|
var _a;
|
|
26315
26709
|
void ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.showPopover());
|
|
26316
26710
|
}
|
|
26711
|
+
async click() {
|
|
26712
|
+
return delegateClick(this.host, async () => setClick(this.ref));
|
|
26713
|
+
}
|
|
26317
26714
|
async focus() {
|
|
26318
26715
|
return delegateFocus(this.host, () => setFocus(this.ref));
|
|
26319
26716
|
}
|
|
26320
26717
|
render() {
|
|
26321
|
-
return (hAsync(KolPopoverButtonWcTag, { key: '
|
|
26718
|
+
return (hAsync(KolPopoverButtonWcTag, { key: 'ffaf2312e6be8125677e325f885fe41458545655', ref: this.setRef, _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: '2429821e43621f9e9d35fc7555395ba6ab51a3e2', name: "expert", slot: "expert" }), hAsync("slot", { key: '456148fdad8fd7eb738fa99871495a1c9f0dc0f8' })));
|
|
26322
26719
|
}
|
|
26323
26720
|
get host() { return getElement(this); }
|
|
26324
26721
|
static get style() { return {
|
|
@@ -26347,6 +26744,7 @@ class KolPopoverButton {
|
|
|
26347
26744
|
"_variant": [1],
|
|
26348
26745
|
"hidePopover": [64],
|
|
26349
26746
|
"showPopover": [64],
|
|
26747
|
+
"click": [64],
|
|
26350
26748
|
"focus": [64]
|
|
26351
26749
|
},
|
|
26352
26750
|
"$listeners$": undefined,
|
|
@@ -28153,12 +28551,15 @@ class KolPopoverButtonWc {
|
|
|
28153
28551
|
async focus() {
|
|
28154
28552
|
return setFocus(this.refButton);
|
|
28155
28553
|
}
|
|
28554
|
+
async click() {
|
|
28555
|
+
return setClick(this.refButton);
|
|
28556
|
+
}
|
|
28156
28557
|
render() {
|
|
28157
|
-
return (hAsync(Fragment, null, hAsync(KolButtonWcTag, { key: '
|
|
28558
|
+
return (hAsync(Fragment, null, hAsync(KolButtonWcTag, { key: 'bf0b395eff7f471873908ae2ca492ad4fc829ffe', class: clsx('kol-popover-button', {
|
|
28158
28559
|
'kol-popover-button--open': this.popoverOpen,
|
|
28159
28560
|
'kol-popover-button--inline': this.state._inline === true,
|
|
28160
28561
|
'kol-popover-button--standalone': this.state._inline === false,
|
|
28161
|
-
}), _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: '
|
|
28562
|
+
}), _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: '69f72c7eeb6e49dbb79743e99696e81a95eb57c3', name: "expert", slot: "expert" })), hAsync(PopoverFC, { key: '4d77af35831ca5845f238ce163689faed1ed2184', align: this.state._popoverAlign || 'bottom', popoverRef: this.setPopoverElementRef, class: "kol-popover-button__popover", id: this.popoverId }, hAsync("slot", { key: '8b29c24f91cb87775b788b25f34e2c930226cad1' }))));
|
|
28162
28563
|
}
|
|
28163
28564
|
validateInline(value) {
|
|
28164
28565
|
validateInline(this, value, {
|
|
@@ -28220,7 +28621,8 @@ class KolPopoverButtonWc {
|
|
|
28220
28621
|
"popoverOpen": [32],
|
|
28221
28622
|
"hidePopover": [64],
|
|
28222
28623
|
"showPopover": [64],
|
|
28223
|
-
"focus": [64]
|
|
28624
|
+
"focus": [64],
|
|
28625
|
+
"click": [64]
|
|
28224
28626
|
},
|
|
28225
28627
|
"$listeners$": undefined,
|
|
28226
28628
|
"$lazyBundleId$": "-",
|
|
@@ -28250,10 +28652,13 @@ const ProgressFC = (props) => {
|
|
|
28250
28652
|
const liveProgressValue = isPercentage ? `${Math.round((liveValue / max) * 100)}` : liveValue;
|
|
28251
28653
|
const displayValue = isPercentage ? Math.round((value / max) * 100) : value;
|
|
28252
28654
|
const valueColumnWidth = `${`${(isPercentage ? 100 : max) + 1}`.length}ch`;
|
|
28655
|
+
const liveValueText = isPercentage
|
|
28656
|
+
? translate('kol-live-value', { placeholders: { value: String(liveProgressValue), unit } })
|
|
28657
|
+
: translate('kol-live-value-bounded', { placeholders: { value: String(liveProgressValue), max: String(max), unit } });
|
|
28253
28658
|
return (hAsync("div", { class: "kol-progress" }, hAsync("div", { "aria-hidden": "true", class: {
|
|
28254
28659
|
'kol-progress__cycle': variant === 'cycle',
|
|
28255
28660
|
'kol-progress__bar': variant === 'bar',
|
|
28256
|
-
} }, variant === 'bar' && label && hAsync("div", { class: "kol-progress__bar-label" }, label), createProgressSVG(variant, max, value), variant === 'cycle' && (hAsync("div", { class: "kol-progress__cycle-text" }, label && hAsync("div", { class: "kol-progress__cycle-label" }, label), hAsync("div", { class: "kol-progress__cycle-value" }, `${displayValue} ${unit}`))), variant === 'bar' && (hAsync("div", { class: "kol-progress__bar-value", style: { width: valueColumnWidth } }, displayValue)), variant === 'bar' && hAsync("div", { class: "kol-progress__bar-unit" }, unit)), hAsync("progress", { class: "visually-hidden", "aria-busy": value < max ? 'true' : 'false', max: max, value: value }), hAsync("span", { "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" },
|
|
28661
|
+
} }, variant === 'bar' && label && hAsync("div", { class: "kol-progress__bar-label" }, label), createProgressSVG(variant, max, value), variant === 'cycle' && (hAsync("div", { class: "kol-progress__cycle-text" }, label && hAsync("div", { class: "kol-progress__cycle-label" }, label), hAsync("div", { class: "kol-progress__cycle-value" }, `${displayValue} ${unit}`))), variant === 'bar' && (hAsync("div", { class: "kol-progress__bar-value", style: { width: valueColumnWidth } }, displayValue)), variant === 'bar' && hAsync("div", { class: "kol-progress__bar-unit" }, unit)), hAsync("progress", { class: "visually-hidden", "aria-busy": value < max ? 'true' : 'false', max: max, value: value }), hAsync("span", { "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, liveValueText)));
|
|
28257
28662
|
};
|
|
28258
28663
|
|
|
28259
28664
|
const progressPropsConfig = {
|
|
@@ -28353,7 +28758,7 @@ class KolProgress extends BaseWebComponent {
|
|
|
28353
28758
|
this.ctrl.destroy();
|
|
28354
28759
|
}
|
|
28355
28760
|
render() {
|
|
28356
|
-
return (hAsync(Host, { key: '
|
|
28761
|
+
return (hAsync(Host, { key: '1465bc90c3f2d207ed592fb46a2c91bf10917dba' }, hAsync(ProgressFC, { key: 'a7fc07cda57b0f29d1db8809bf374faba7f7737b', 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 })));
|
|
28357
28762
|
}
|
|
28358
28763
|
static get watchers() { return {
|
|
28359
28764
|
"_label": ["watchLabel"],
|
|
@@ -28462,7 +28867,7 @@ class KolQuote extends BaseWebComponent {
|
|
|
28462
28867
|
});
|
|
28463
28868
|
}
|
|
28464
28869
|
render() {
|
|
28465
|
-
return (hAsync(Host, { key: '
|
|
28870
|
+
return (hAsync(Host, { key: 'f29aeecadf02fb19c2c9f0ea6ed4e5f5d4351bd3' }, hAsync(QuoteFC, { key: '626430a77a0375e4e65bad16b37c62cbe6ba52b9', href: this.ctrl.getRenderProp('href'), label: this.ctrl.getRenderProp('label'), quote: this.ctrl.getRenderProp('quote'), variant: this.ctrl.getRenderProp('variant') })));
|
|
28466
28871
|
}
|
|
28467
28872
|
static get watchers() { return {
|
|
28468
28873
|
"_href": ["watchHref"],
|
|
@@ -28488,7 +28893,7 @@ class KolQuote extends BaseWebComponent {
|
|
|
28488
28893
|
}; }
|
|
28489
28894
|
}
|
|
28490
28895
|
|
|
28491
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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}";
|
|
28896
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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}";
|
|
28492
28897
|
|
|
28493
28898
|
class KolSelect {
|
|
28494
28899
|
constructor(hostRef) {
|
|
@@ -28513,7 +28918,7 @@ class KolSelect {
|
|
|
28513
28918
|
return delegateFocus(this.host, () => setFocus(this.selectWcRef));
|
|
28514
28919
|
}
|
|
28515
28920
|
render() {
|
|
28516
|
-
return (hAsync(Host, { key: '
|
|
28921
|
+
return (hAsync(Host, { key: '8fe0963741201096369c3cd911d34365b64e97a0', class: "kol-select" }, hAsync(KolSelectWcTag, { key: '6856f5142f557ff9e723a6af68fd00dffe294467', ref: this.setSelectWcRef, _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: '9c58932ade364093f72b55f751fac51543d985a6', name: "expert", slot: "expert" }))));
|
|
28517
28922
|
}
|
|
28518
28923
|
get host() { return getElement(this); }
|
|
28519
28924
|
static get style() { return {
|
|
@@ -28750,6 +29155,9 @@ class KolSelectWc {
|
|
|
28750
29155
|
async focus() {
|
|
28751
29156
|
return setFocus(this.selectRef);
|
|
28752
29157
|
}
|
|
29158
|
+
async click() {
|
|
29159
|
+
return setClick(this.selectRef);
|
|
29160
|
+
}
|
|
28753
29161
|
getFormFieldProps() {
|
|
28754
29162
|
return {
|
|
28755
29163
|
state: this.state,
|
|
@@ -28771,11 +29179,11 @@ class KolSelectWc {
|
|
|
28771
29179
|
} });
|
|
28772
29180
|
}
|
|
28773
29181
|
render() {
|
|
28774
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
29182
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '3fc2b6d268b2640aaf3e91d3f569bf93b58c29a5' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '47aa91ce8d716c5f059100af5c1ab72f4ab4874a', state: this.state }, hAsync("form", { key: '20a87211d41a108d0ac230d700c216214743ec0e', onSubmit: (event) => {
|
|
28775
29183
|
event.preventDefault();
|
|
28776
29184
|
propagateSubmitEventToForm({
|
|
28777
29185
|
form: this.host});
|
|
28778
|
-
} }, hAsync("input", { key: '
|
|
29186
|
+
} }, hAsync("input", { key: '29a1823766e9ecc407aa171178767906b9e55e01', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: '911fe5af4451556609ae31e05a3be97187bf3b2a' }, this.getSelectProps()))))));
|
|
28779
29187
|
}
|
|
28780
29188
|
constructor(hostRef) {
|
|
28781
29189
|
registerInstance(this, hostRef);
|
|
@@ -28940,7 +29348,8 @@ class KolSelectWc {
|
|
|
28940
29348
|
"state": [32],
|
|
28941
29349
|
"inputHasFocus": [32],
|
|
28942
29350
|
"getValue": [64],
|
|
28943
|
-
"focus": [64]
|
|
29351
|
+
"focus": [64],
|
|
29352
|
+
"click": [64]
|
|
28944
29353
|
},
|
|
28945
29354
|
"$listeners$": undefined,
|
|
28946
29355
|
"$lazyBundleId$": "-",
|
|
@@ -29000,7 +29409,7 @@ class SingleSelectController extends InputIconController {
|
|
|
29000
29409
|
}
|
|
29001
29410
|
}
|
|
29002
29411
|
|
|
29003
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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__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}";
|
|
29412
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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__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}";
|
|
29004
29413
|
|
|
29005
29414
|
class KolSingleSelect {
|
|
29006
29415
|
async getValue() {
|
|
@@ -29179,15 +29588,15 @@ class KolSingleSelect {
|
|
|
29179
29588
|
render() {
|
|
29180
29589
|
var _a;
|
|
29181
29590
|
const isDisabled = this.state._disabled === true;
|
|
29182
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
29591
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'bd67f85898502c3ef12057f50398d9553f0f5a7d' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '79f9cc63e20338aabc852b4828185a2b50f249e5', state: this.state }, hAsync("div", { key: '2db567f08e6edf60e5cbc6966e707ae0a4618f40', class: "kol-single-select__group" }, hAsync(InputStateWrapper, Object.assign({ key: '1caa2690e520e616fc4d8e74eb64380a911f1e7a' }, this.getInputProps())), this._inputValue && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: 'e727b265a6d3173550791546354a5a9aaeeae796', _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: {
|
|
29183
29592
|
onClick: () => {
|
|
29184
29593
|
var _a;
|
|
29185
29594
|
this.clearSelection();
|
|
29186
29595
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
29187
29596
|
},
|
|
29188
|
-
} })), hAsync(IconFC, { key: '
|
|
29597
|
+
} })), hAsync(IconFC, { key: '3e8f860cb6dde2f3bdf8904cd318a4048432ab24', icons: "kolicon-chevron-down", label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
29189
29598
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
29190
|
-
}), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: '
|
|
29599
|
+
}), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: '2d2671a9282ba38a23d67d22b9c4948060be1b8d', 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) => {
|
|
29191
29600
|
if (el)
|
|
29192
29601
|
this.refOptions[index] = el;
|
|
29193
29602
|
}, selected: this._value === option.value, disabled: option.disabled ? true : false, onClick: (event) => {
|
|
@@ -29656,7 +30065,7 @@ class KolSkeleton extends BaseWebComponent {
|
|
|
29656
30065
|
this.ctrl.destroy();
|
|
29657
30066
|
}
|
|
29658
30067
|
render() {
|
|
29659
|
-
return (hAsync(Host, { key: '
|
|
30068
|
+
return (hAsync(Host, { key: 'a4cd5a83b7fde82f2abfbe4a0cf5a0660286887f' }, hAsync(SkeletonFC, { key: 'a58cf6291f4fe050b4bb358bf42fc07bb1c44167', 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) })));
|
|
29660
30069
|
}
|
|
29661
30070
|
static get watchers() { return {
|
|
29662
30071
|
"_name": ["watchName"]
|
|
@@ -29678,7 +30087,7 @@ class KolSkeleton extends BaseWebComponent {
|
|
|
29678
30087
|
}; }
|
|
29679
30088
|
}
|
|
29680
30089
|
|
|
29681
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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 }\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}";
|
|
30090
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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 }\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}";
|
|
29682
30091
|
|
|
29683
30092
|
class KolSkipNav {
|
|
29684
30093
|
constructor(hostRef) {
|
|
@@ -29689,7 +30098,7 @@ class KolSkipNav {
|
|
|
29689
30098
|
};
|
|
29690
30099
|
}
|
|
29691
30100
|
render() {
|
|
29692
|
-
return (hAsync("nav", { key: '
|
|
30101
|
+
return (hAsync("nav", { key: 'fb78bd85272a94014a392cd1861dd537b44a25d7', class: "kol-skip-nav", "aria-label": this.state._label }, hAsync("ul", { key: 'dd649083287a7bda7e0e74e2aa9e0f44b15597b5', class: "kol-skip-nav__list" }, this.state._links.map((link, index) => {
|
|
29693
30102
|
return (hAsync("li", { class: "kol-skip-nav__list-item", key: index }, hAsync(KolLinkWcTag, Object.assign({}, link, { ref: index === 0 ? (el) => (this.firstLinkRef = el) : undefined }))));
|
|
29694
30103
|
}))));
|
|
29695
30104
|
}
|
|
@@ -29765,7 +30174,7 @@ class KolSpin {
|
|
|
29765
30174
|
}
|
|
29766
30175
|
render() {
|
|
29767
30176
|
var _a, _b;
|
|
29768
|
-
return (hAsync(Host, { key: '
|
|
30177
|
+
return (hAsync(Host, { key: 'e4708339e1a6ba6a76cbfc9919172d757deeaf73', 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)))));
|
|
29769
30178
|
}
|
|
29770
30179
|
validateShow(value) {
|
|
29771
30180
|
this.showToggled = this.state._show === true && this._show === false;
|
|
@@ -29805,7 +30214,7 @@ class KolSpin {
|
|
|
29805
30214
|
}; }
|
|
29806
30215
|
}
|
|
29807
30216
|
|
|
29808
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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}";
|
|
30217
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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}";
|
|
29809
30218
|
|
|
29810
30219
|
class KolSplitButton {
|
|
29811
30220
|
constructor(hostRef) {
|
|
@@ -29840,12 +30249,15 @@ class KolSplitButton {
|
|
|
29840
30249
|
async focus() {
|
|
29841
30250
|
return delegateFocus(this.host, () => setFocus(this.primaryButtonWcRef));
|
|
29842
30251
|
}
|
|
30252
|
+
async click() {
|
|
30253
|
+
return delegateClick(this.host, async () => setClick(this.primaryButtonWcRef));
|
|
30254
|
+
}
|
|
29843
30255
|
render() {
|
|
29844
30256
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
29845
|
-
return (hAsync("div", { key: '
|
|
30257
|
+
return (hAsync("div", { key: '820648dab75c76be9cf3eadb56669d82dc2975ff', class: "kol-split-button" }, hAsync("div", { key: 'cd6be72214ed7984acfa9b68bb7b47751666ebc8', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: '87ce8f6b04fc1fad065571c4a06eef38527bb210', class: clsx('kol-split-button__button', {
|
|
29846
30258
|
[this._variant]: this._variant !== 'custom',
|
|
29847
30259
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
29848
|
-
}), ref: this.setPrimaryButtonWcRef, _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: '
|
|
30260
|
+
}), ref: this.setPrimaryButtonWcRef, _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: '3e489ad1467385e74c54d83e71097da750d4e00a', class: "kol-split-button__horizontal-line" }), hAsync(KolPopoverButtonWcTag, { key: 'fee80fd1e483b7bcf55c35eab33864bc7585e73b', class: "kol-split-button__secondary-button", ref: this.setPopoverButtonRef, _disabled: this._disabled, _hideLabel: true, _icons: "kolicon-chevron-down", _label: translate(`${i18nDropdownLabel}-open`), _popoverAlign: "bottom" }, hAsync("slot", { key: '1702aba062cab0e0d7a453cb475973beff38c180' })))));
|
|
29849
30261
|
}
|
|
29850
30262
|
connectedCallback() {
|
|
29851
30263
|
this.state = Object.assign(Object.assign({}, this.state), { _show: false });
|
|
@@ -29885,6 +30297,7 @@ class KolSplitButton {
|
|
|
29885
30297
|
"state": [32],
|
|
29886
30298
|
"getValue": [64],
|
|
29887
30299
|
"focus": [64],
|
|
30300
|
+
"click": [64],
|
|
29888
30301
|
"closePopup": [64]
|
|
29889
30302
|
},
|
|
29890
30303
|
"$listeners$": undefined,
|
|
@@ -29991,7 +30404,7 @@ class KolTableSettings {
|
|
|
29991
30404
|
}
|
|
29992
30405
|
render() {
|
|
29993
30406
|
const columns = this.getPrimaryRow();
|
|
29994
|
-
return (hAsync(KolPopoverButtonWcTag, { key: '
|
|
30407
|
+
return (hAsync(KolPopoverButtonWcTag, { key: '6e6b44ace0d191133889d102a032c2c33da630ee', ref: (el) => (this.popoverRef = el), class: "kol-table-settings", _icons: "kolicon-settings", _label: this.translateTableSettings, _popoverAlign: "top", _hideLabel: true }, hAsync("div", { key: 'd56198aa48cb17ad7bccb4f3af5d6269686bc4f1', class: "kol-table-settings__content" }, hAsync(KolHeadingTag, { key: 'd84805a670a2afb0a2d782e03a746fc407283abe', _label: this.translateTableSettings, _level: 0 }), this.errorMessage && hAsync(KolAlertWcTag, { key: 'bd339f6c39dda9924b6173daf9b33699d7eb57ae', _type: "error", _label: this.errorMessage, _variant: "msg", class: "kol-table-settings__error-message" }), hAsync("form", { key: 'bb1e62e21f8a5d8a113d397f5f29a515d747b5e9', onSubmit: this.handleSubmit.bind(this) }, hAsync("div", { key: '0f4a52a1b2cd2610ace2d9548dbeaa8b9e99aa67', class: "kol-table-settings__columns-container" }, hAsync("div", { key: 'cde48d015364eac498c29e13ea789e8d936d4730', 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: '551077e1001adaa1fbad0ec819b598ec27a2bd99', class: "kol-table-settings__actions" }, hAsync(KolButtonWcTag, { key: 'ee381da96b8986185bbd91c92d67b30595b86e50', _label: this.translateTableSettingsCancel, _variant: "secondary", _on: { onClick: () => this.handleCancel() }, "data-testid": "table-settings-cancel" }), hAsync(KolButtonWcTag, { key: 'fed89789b0cbb80c308b79d4d398d2067f10f1b4', _label: this.translateTableSettingsApply, _variant: "primary", _type: "submit", "data-testid": "table-settings-apply" }))))));
|
|
29995
30408
|
}
|
|
29996
30409
|
get host() { return getElement(this); }
|
|
29997
30410
|
static get watchers() { return {
|
|
@@ -30050,7 +30463,7 @@ var KeyboardKey;
|
|
|
30050
30463
|
KeyboardKey["Space"] = " ";
|
|
30051
30464
|
})(KeyboardKey || (KeyboardKey = {}));
|
|
30052
30465
|
|
|
30053
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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 overflow: auto;\n }\n .kol-table-settings__columns {\n display: grid;\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 text-align: start;\n }\n .kol-table__sort-button .kol-button {\n color: inherit;\n }\n .kol-table__sort {\n display: inline-flex;\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 }\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 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 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}";
|
|
30466
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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 overflow: auto;\n }\n .kol-table-settings__columns {\n display: grid;\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 text-align: start;\n }\n .kol-table__sort-button .kol-button {\n color: inherit;\n }\n .kol-table__sort {\n display: inline-flex;\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 }\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 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 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}";
|
|
30054
30467
|
|
|
30055
30468
|
const PAGINATION_OPTIONS = [10, 20, 50, 100];
|
|
30056
30469
|
const paginationValidator = (value) => value === true || value === '' || (typeof value === 'object' && value !== null);
|
|
@@ -30385,7 +30798,7 @@ class KolTableStateful {
|
|
|
30385
30798
|
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 : [],
|
|
30386
30799
|
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 : [],
|
|
30387
30800
|
};
|
|
30388
|
-
return (hAsync(Host, { key: '
|
|
30801
|
+
return (hAsync(Host, { key: '7dcd4d4e002669068148b20ffde6ba2949164944', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: 'ed25abae3cac683a7e4b3971f05f81ee4ff3fe73', ref: this.catchRef, _data: displayedData, _fixedCols: this._fixedCols, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _on: {
|
|
30389
30802
|
onSort: (_, payload) => {
|
|
30390
30803
|
this.handleSort(payload);
|
|
30391
30804
|
},
|
|
@@ -30435,14 +30848,14 @@ class KolTableStateful {
|
|
|
30435
30848
|
}; }
|
|
30436
30849
|
}
|
|
30437
30850
|
|
|
30438
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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 overflow: auto;\n }\n .kol-table-settings__columns {\n display: grid;\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 text-align: start;\n }\n .kol-table__sort-button .kol-button {\n color: inherit;\n }\n .kol-table__sort {\n display: inline-flex;\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 }\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}";
|
|
30851
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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 overflow: auto;\n }\n .kol-table-settings__columns {\n display: grid;\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 text-align: start;\n }\n .kol-table__sort-button .kol-button {\n color: inherit;\n }\n .kol-table__sort {\n display: inline-flex;\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 }\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}";
|
|
30439
30852
|
|
|
30440
30853
|
class KolTableStateless {
|
|
30441
30854
|
constructor(hostRef) {
|
|
30442
30855
|
registerInstance(this, hostRef);
|
|
30443
30856
|
}
|
|
30444
30857
|
render() {
|
|
30445
|
-
return (hAsync(KolTableStatelessWcTag, { key: '
|
|
30858
|
+
return (hAsync(KolTableStatelessWcTag, { key: 'c7b2b1b44b9b2c9a9266b7897f15d05412c4e31a', _data: this._data, _dataFoot: this._dataFoot, _fixedCols: this._fixedCols, _headerCells: this._headerCells, _label: this._label, _on: this._on, _selection: this._selection, _hasSettingsMenu: this._hasSettingsMenu }));
|
|
30446
30859
|
}
|
|
30447
30860
|
static get style() { return {
|
|
30448
30861
|
default: defaultStyleCss$7
|
|
@@ -31174,12 +31587,12 @@ class KolTableStatelessWc {
|
|
|
31174
31587
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
31175
31588
|
this.checkboxRefs = [];
|
|
31176
31589
|
const horizontalHeaders = this.state._headerCells.horizontal;
|
|
31177
|
-
return (hAsync("div", { key: '
|
|
31590
|
+
return (hAsync("div", { key: '77f96bb358cfe4bc755585dd6a5b3b56bc18d84d', class: "kol-table" }, this.state._hasSettingsMenu && hAsync(KolTableSettingsWcTag, { key: '12bafb89dbd9b6854ec399d0b91763938247feb4', _horizontalHeaderCells: horizontalHeaders !== null && horizontalHeaders !== void 0 ? horizontalHeaders : [] }), hAsync("div", { key: 'dd2b25283555ee5a2040ac527b7e168f4a7df3ab', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: 'cb5ce2c9d00dfe1fb88d819965ddbb533fd3e9d2', class: "kol-table__table", style: {
|
|
31178
31591
|
minWidth: this.getTableMinWidth(),
|
|
31179
|
-
} }, hAsync("caption", { key: '
|
|
31592
|
+
} }, hAsync("caption", { key: '80fca8add79f944170c5d5dd958ee2a0f9a24f98', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(horizontalHeaders) && (hAsync("thead", { key: '76fb2cea6def5e7711d9019260e5dcbb94c83f6b', class: "kol-table__head" }, [
|
|
31180
31593
|
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))))),
|
|
31181
31594
|
this.renderSpacer('head', horizontalHeaders),
|
|
31182
|
-
])), hAsync("tbody", { key: '
|
|
31595
|
+
])), hAsync("tbody", { key: '886d2015fd87cabb5b9007db6c9f0e0a11c316ad', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
|
|
31183
31596
|
}
|
|
31184
31597
|
get host() { return getElement(this); }
|
|
31185
31598
|
static get watchers() { return {
|
|
@@ -31219,7 +31632,7 @@ const validateHasCreateButton = (component, value) => {
|
|
|
31219
31632
|
watchBoolean(component, '_hasCreateButton', value);
|
|
31220
31633
|
};
|
|
31221
31634
|
|
|
31222
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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}";
|
|
31635
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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}";
|
|
31223
31636
|
|
|
31224
31637
|
class KolTabs {
|
|
31225
31638
|
constructor(hostRef) {
|
|
@@ -31420,15 +31833,18 @@ class KolTabs {
|
|
|
31420
31833
|
async focus() {
|
|
31421
31834
|
return delegateFocus(this.host, () => setFocus(this.currentTabButtonRef));
|
|
31422
31835
|
}
|
|
31836
|
+
async click() {
|
|
31837
|
+
return delegateClick(this.host, async () => setClick(this.currentTabButtonRef));
|
|
31838
|
+
}
|
|
31423
31839
|
renderButtonGroup() {
|
|
31424
31840
|
return (hAsync("div", { "aria-label": this.state._label, class: "kol-tabs__button-group", role: "tablist", onKeyDown: this.onKeyDown, onBlur: this.onBlur }, this.state._tabs.map((button, index) => (hAsync(KolButtonWcTag, { ref: this.state._selected === index ? this.setCurrentTabButtonRef : undefined, _disabled: button._disabled, _icons: button._icons, _hideLabel: button._hideLabel, _label: button._label, _on: this.callbacks, _tabIndex: this.state._selected === index ? 0 : -1, _tooltipAlign: button._tooltipAlign, _variant: this.state._selected === index ? 'custom' : undefined, _customClass: this.state._selected === index ? 'selected' : '', _ariaControls: `tabpanel-${index}`, _ariaSelected: this.state._selected === index, _id: `${this.state._label.replace(/\s/g, '-')}-tab-${index}`, _role: "tab", _value: index }))), this.state._hasCreateButton && (hAsync(KolButtonWcTag, { class: "kol-tabs__button-create", _label: this.onCreateLabel, _on: {
|
|
31425
31841
|
onClick: this.onCreate,
|
|
31426
31842
|
}, _icons: "kolicon-plus", "data-testid": "tabs-create-button" }))));
|
|
31427
31843
|
}
|
|
31428
31844
|
render() {
|
|
31429
|
-
return (hAsync("div", { key: '
|
|
31845
|
+
return (hAsync("div", { key: 'd0701dd651b03711efdfd47ac4b39e2124c9d1e8', ref: (el) => {
|
|
31430
31846
|
this.tabPanelsElement = el;
|
|
31431
|
-
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
31847
|
+
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '9b6e4696775d053d34627eceef408a4bfd1f0e47', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
|
|
31432
31848
|
}
|
|
31433
31849
|
validateAlign(value) {
|
|
31434
31850
|
validateAlign(this, value);
|
|
@@ -31523,7 +31939,8 @@ class KolTabs {
|
|
|
31523
31939
|
"_selected": [1538],
|
|
31524
31940
|
"_tabs": [1],
|
|
31525
31941
|
"state": [32],
|
|
31526
|
-
"focus": [64]
|
|
31942
|
+
"focus": [64],
|
|
31943
|
+
"click": [64]
|
|
31527
31944
|
},
|
|
31528
31945
|
"$listeners$": undefined,
|
|
31529
31946
|
"$lazyBundleId$": "-",
|
|
@@ -31611,7 +32028,7 @@ class TextareaController extends InputIconController {
|
|
|
31611
32028
|
}
|
|
31612
32029
|
}
|
|
31613
32030
|
|
|
31614
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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}";
|
|
32031
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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}";
|
|
31615
32032
|
|
|
31616
32033
|
const increaseTextareaHeight = (el) => {
|
|
31617
32034
|
el.style.overflow = 'hidden';
|
|
@@ -31630,6 +32047,9 @@ class KolTextarea {
|
|
|
31630
32047
|
async focus() {
|
|
31631
32048
|
return delegateFocus(this.host, () => setFocus(this.textareaRef));
|
|
31632
32049
|
}
|
|
32050
|
+
async click() {
|
|
32051
|
+
return delegateClick(this.host, async () => setClick(this.textareaRef));
|
|
32052
|
+
}
|
|
31633
32053
|
getFormFieldProps() {
|
|
31634
32054
|
return {
|
|
31635
32055
|
state: this.state,
|
|
@@ -31654,7 +32074,7 @@ class KolTextarea {
|
|
|
31654
32074
|
} });
|
|
31655
32075
|
}
|
|
31656
32076
|
render() {
|
|
31657
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
32077
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'eb307b0c54debc8c4abad8361a2c07dac3e7022c' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '4bdcce3df35393c53b0e96c1e791d2c3585cd376', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: 'd08ca76c854a6b6eaa5d9e9deac5a1268cdf13ae' }, this.getTextAreaProps())))));
|
|
31658
32078
|
}
|
|
31659
32079
|
constructor(hostRef) {
|
|
31660
32080
|
registerInstance(this, hostRef);
|
|
@@ -31850,7 +32270,8 @@ class KolTextarea {
|
|
|
31850
32270
|
"state": [32],
|
|
31851
32271
|
"inputHasFocus": [32],
|
|
31852
32272
|
"getValue": [64],
|
|
31853
|
-
"focus": [64]
|
|
32273
|
+
"focus": [64],
|
|
32274
|
+
"click": [64]
|
|
31854
32275
|
},
|
|
31855
32276
|
"$listeners$": undefined,
|
|
31856
32277
|
"$lazyBundleId$": "-",
|
|
@@ -31858,7 +32279,7 @@ class KolTextarea {
|
|
|
31858
32279
|
}; }
|
|
31859
32280
|
}
|
|
31860
32281
|
|
|
31861
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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}";
|
|
32282
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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}";
|
|
31862
32283
|
|
|
31863
32284
|
const TRANSITION_TIMEOUT = 300;
|
|
31864
32285
|
class KolToastContainer {
|
|
@@ -31921,7 +32342,7 @@ class KolToastContainer {
|
|
|
31921
32342
|
}
|
|
31922
32343
|
}
|
|
31923
32344
|
render() {
|
|
31924
|
-
return (hAsync(Host, { key: '
|
|
32345
|
+
return (hAsync(Host, { key: 'c836e5662ad18fc7f3561fb57e8e9e1352f9c601', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: '64a558b93247730eb5528891e08eba74c3e63c00', _label: this.translateToastCloseAll, class: "kol-toast-container__button-close-all", _on: {
|
|
31925
32346
|
onClick: () => {
|
|
31926
32347
|
void this.closeAll();
|
|
31927
32348
|
},
|
|
@@ -31944,7 +32365,7 @@ class KolToastContainer {
|
|
|
31944
32365
|
}; }
|
|
31945
32366
|
}
|
|
31946
32367
|
|
|
31947
|
-
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=1774619801488\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774619801488#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774619801488\") format(\"woff2\"), url(\"kolicons.woff?t=1774619801488\") format(\"woff\"), url(\"kolicons.ttf?t=1774619801488\") format(\"truetype\"), url(\"kolicons.svg?t=1774619801488#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}";
|
|
32368
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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}";
|
|
31948
32369
|
|
|
31949
32370
|
class KolToolbar {
|
|
31950
32371
|
constructor(hostRef) {
|
|
@@ -31977,12 +32398,18 @@ class KolToolbar {
|
|
|
31977
32398
|
return delegateFocus(this.host, () => setFocus(firstEnabledItem));
|
|
31978
32399
|
}
|
|
31979
32400
|
}
|
|
32401
|
+
async click() {
|
|
32402
|
+
const currentItem = this.indexToElement.get(this.currentIndex);
|
|
32403
|
+
if (currentItem) {
|
|
32404
|
+
return delegateClick(this.host, async () => setClick(currentItem));
|
|
32405
|
+
}
|
|
32406
|
+
}
|
|
31980
32407
|
normalizeItem(item) {
|
|
31981
32408
|
const { _icons, _disabled } = item, rest = __rest(item, ["_icons", "_disabled"]);
|
|
31982
32409
|
return Object.assign(Object.assign({}, rest), { _icons, _disabled });
|
|
31983
32410
|
}
|
|
31984
32411
|
render() {
|
|
31985
|
-
return (hAsync("div", { key: '
|
|
32412
|
+
return (hAsync("div", { key: '305cc9c0d48d972a6414bb8c4d0c422b76f98214', class: `kol-toolbar kol-toolbar--orientation-${this.state._orientation}`, role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem)));
|
|
31986
32413
|
}
|
|
31987
32414
|
validateLabel(value) {
|
|
31988
32415
|
validateLabel(this, value);
|
|
@@ -32062,7 +32489,8 @@ class KolToolbar {
|
|
|
32062
32489
|
"_orientation": [1],
|
|
32063
32490
|
"state": [32],
|
|
32064
32491
|
"currentIndex": [32],
|
|
32065
|
-
"focus": [64]
|
|
32492
|
+
"focus": [64],
|
|
32493
|
+
"click": [64]
|
|
32066
32494
|
},
|
|
32067
32495
|
"$listeners$": [[0, "keydown", "handleKeyDown"], [2, "blur", "handleBlur"]],
|
|
32068
32496
|
"$lazyBundleId$": "-",
|
|
@@ -32229,7 +32657,7 @@ class KolTooltipWc {
|
|
|
32229
32657
|
this.showOrHideTooltip();
|
|
32230
32658
|
}
|
|
32231
32659
|
render() {
|
|
32232
|
-
return (hAsync(Host, { key: '
|
|
32660
|
+
return (hAsync(Host, { key: '8cbfd01c8d2926872117a5eb342cd3e536570c84', class: "kol-tooltip" }, hAsync("div", { key: 'fa5ce76b3ca0ec8a0cd407dd03a6150a563a0923', class: "kol-tooltip__floating", hidden: this.state._label.length === 0, ref: this.catchTooltipElement }, hAsync("div", { key: '7e9ae4f2fa73ed7490ada311ea9ad61ca96fee06', class: "kol-tooltip__arrow", ref: this.catchArrowElement }), hAsync(SpanFC, { key: '8bbf9a6358130a72a15e79d726188ed6e19e205a', class: "kol-tooltip__content", id: this.state._id, badgeText: this._badgeText, label: this.state._label }))));
|
|
32233
32661
|
}
|
|
32234
32662
|
validateBadgeText(value) {
|
|
32235
32663
|
validateBadgeText(this, value);
|
|
@@ -32313,7 +32741,7 @@ class KolTree {
|
|
|
32313
32741
|
return delegateFocus(this.host, () => setFocus(this.treeWcRef));
|
|
32314
32742
|
}
|
|
32315
32743
|
render() {
|
|
32316
|
-
return (hAsync(KolTreeWcTag, { key: '
|
|
32744
|
+
return (hAsync(KolTreeWcTag, { key: '7949f9ffc416ad89da8bf7d1f38d0120c8db4676', _label: this._label, ref: this.setTreeWcRef }, hAsync("slot", { key: 'bd820a08b5ce3e434d4fdea624263cacee6dcc1f' })));
|
|
32317
32745
|
}
|
|
32318
32746
|
get host() { return getElement(this); }
|
|
32319
32747
|
static get style() { return {
|
|
@@ -32332,7 +32760,7 @@ class KolTree {
|
|
|
32332
32760
|
}; }
|
|
32333
32761
|
}
|
|
32334
32762
|
|
|
32335
|
-
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=
|
|
32763
|
+
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=1774956515321\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774956515321#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774956515321\") format(\"woff2\"), url(\"kolicons.woff?t=1774956515321\") format(\"woff\"), url(\"kolicons.ttf?t=1774956515321\") format(\"truetype\"), url(\"kolicons.svg?t=1774956515321#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\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 .kolicon-alert-error::before {\n content: \"\\ea01\";\n }\n .kolicon-alert-info::before {\n content: \"\\ea02\";\n }\n .kolicon-alert-success::before {\n content: \"\\ea03\";\n }\n .kolicon-alert-warning::before {\n content: \"\\ea04\";\n }\n .kolicon-check::before {\n content: \"\\ea05\";\n }\n .kolicon-chevron-double-left::before {\n content: \"\\ea06\";\n }\n .kolicon-chevron-double-right::before {\n content: \"\\ea07\";\n }\n .kolicon-chevron-down::before {\n content: \"\\ea08\";\n }\n .kolicon-chevron-left::before {\n content: \"\\ea09\";\n }\n .kolicon-chevron-right::before {\n content: \"\\ea0a\";\n }\n .kolicon-chevron-up::before {\n content: \"\\ea0b\";\n }\n .kolicon-cogwheel::before {\n content: \"\\ea0c\";\n }\n .kolicon-cross::before {\n content: \"\\ea0d\";\n }\n .kolicon-eye-closed::before {\n content: \"\\ea0e\";\n }\n .kolicon-eye::before {\n content: \"\\ea0f\";\n }\n .kolicon-house::before {\n content: \"\\ea10\";\n }\n .kolicon-kolibri::before {\n content: \"\\ea11\";\n }\n .kolicon-link-external::before {\n content: \"\\ea12\";\n }\n .kolicon-link::before {\n content: \"\\ea13\";\n }\n .kolicon-minus::before {\n content: \"\\ea14\";\n }\n .kolicon-plus::before {\n content: \"\\ea15\";\n }\n .kolicon-settings::before {\n content: \"\\ea16\";\n }\n .kolicon-sort-asc::before {\n content: \"\\ea17\";\n }\n .kolicon-sort-desc::before {\n content: \"\\ea18\";\n }\n .kolicon-sort-neutral::before {\n content: \"\\ea19\";\n }\n .kolicon-up::before {\n content: \"\\ea1a\";\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__link .kol-link {\n display: inline-flex;\n min-height: var(--a11y-min-size);\n align-items: center;\n text-decoration: none;\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}";
|
|
32336
32764
|
|
|
32337
32765
|
class KolTreeItem {
|
|
32338
32766
|
constructor(hostRef) {
|
|
@@ -32355,7 +32783,7 @@ class KolTreeItem {
|
|
|
32355
32783
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
32356
32784
|
}
|
|
32357
32785
|
render() {
|
|
32358
|
-
return (hAsync(KolTreeItemWcTag, { key: '
|
|
32786
|
+
return (hAsync(KolTreeItemWcTag, { key: '92a14c4b4e42c1e973fe2c786e654c1fc632acab', _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: 'cd3ec629ec335d54b4989d089ca269ff2493b18e' })));
|
|
32359
32787
|
}
|
|
32360
32788
|
static get style() { return {
|
|
32361
32789
|
default: defaultStyleCss$1
|
|
@@ -32393,12 +32821,12 @@ class KolTreeItemWc {
|
|
|
32393
32821
|
}
|
|
32394
32822
|
render() {
|
|
32395
32823
|
const { _href, _active, _hasChildren, _open, _label } = this.state;
|
|
32396
|
-
return (hAsync(Host, { key: '
|
|
32824
|
+
return (hAsync(Host, { key: '57ffd0dde1ba35fc04f9d9525b8956f4765f546d', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { key: 'c237a29c538f37cc2335ab2a78077132efe506b3', class: "kol-tree-item", style: {
|
|
32397
32825
|
'--level': `${this.level}`,
|
|
32398
|
-
} }, hAsync(KolLinkWcTag, { key: '
|
|
32826
|
+
} }, hAsync(KolLinkWcTag, { key: '4a9f4686ef4d6179adaef9221b6e254de5f0f07d', class: clsx('kol-tree-item__link', {
|
|
32399
32827
|
'kol-tree-item__link--first-level': this.level === 0,
|
|
32400
32828
|
'kol-tree-item__link--active': _active,
|
|
32401
|
-
}), _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: '
|
|
32829
|
+
}), _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: 'bcb17465156e65d2d39cef23ec2ccbc58ae251c9', 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: 'aa9fe2e0e75a9d02272548ddaeac9bd63c8cebd9', class: "kol-tree-item__text" }, _label))), hAsync("ul", { key: 'bda2935c8afca6394fe3ea518c7081f907d74cd8', class: "kol-tree-item__children", hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: '26087d40fa445025028991e6b26a7d8e18ebfbeb' })))));
|
|
32402
32830
|
}
|
|
32403
32831
|
validateActive(value) {
|
|
32404
32832
|
validateActive(this, value || false);
|
|
@@ -32542,7 +32970,7 @@ class KolTreeWc {
|
|
|
32542
32970
|
await Promise.resolve((this.cacheValid = false));
|
|
32543
32971
|
}
|
|
32544
32972
|
render() {
|
|
32545
|
-
return (hAsync(Host, { key: '
|
|
32973
|
+
return (hAsync(Host, { key: '38c0d00f5c5f427bfbad26155726ffbd5eab0ac6', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("nav", { key: '3e6b19a1f8b15cd1e0981c1bfa2617c7fbb96443', class: "kol-tree", "aria-label": this.state._label }, hAsync("ul", { key: '982058efdc400d5ced02c528cefa4838932908bf', class: "kol-tree__treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: '2c2a57f705d3466931665c98bb6387e5cd1465b2' })))));
|
|
32546
32974
|
}
|
|
32547
32975
|
static isTreeItem(element) {
|
|
32548
32976
|
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
|
@@ -32773,7 +33201,7 @@ class KolVersion {
|
|
|
32773
33201
|
};
|
|
32774
33202
|
}
|
|
32775
33203
|
render() {
|
|
32776
|
-
return (hAsync(Host, { key: '
|
|
33204
|
+
return (hAsync(Host, { key: '0b06b2307b6f09bccf41a83a26837e065749ca54', class: "kol-version" }, hAsync(KolBadgeTag, { key: '104ef2aaa3bb71a96fd5740d105fd4f1a9824b51', _color: "#bec5c9", _icons: {
|
|
32777
33205
|
left: { icon: 'kolicon-version', label: this.translateVersion },
|
|
32778
33206
|
}, _label: this.state._label })));
|
|
32779
33207
|
}
|
|
@@ -32855,6 +33283,7 @@ registerComponents([
|
|
|
32855
33283
|
KolLink,
|
|
32856
33284
|
KolLinkButton,
|
|
32857
33285
|
KolLinkWc,
|
|
33286
|
+
KolMeter,
|
|
32858
33287
|
KolModal,
|
|
32859
33288
|
KolNav,
|
|
32860
33289
|
KolPagination,
|