@public-ui/hydrate 4.1.2-rc.6 → 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.mjs
CHANGED
|
@@ -144,7 +144,7 @@ function _mergeNamespaces(n, m) {
|
|
|
144
144
|
|
|
145
145
|
const NAMESPACE = 'kolibri';
|
|
146
146
|
const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
|
|
147
|
-
const Env = /* kolibri */ {"kolibriVersion":"4.1.2-rc.
|
|
147
|
+
const Env = /* kolibri */ {"kolibriVersion":"4.1.2-rc.7"};
|
|
148
148
|
|
|
149
149
|
function getDefaultExportFromCjs (x) {
|
|
150
150
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
@@ -557,8 +557,10 @@ var KeyEnum;
|
|
|
557
557
|
KeyEnum[KeyEnum["page-selected"] = 20] = "page-selected";
|
|
558
558
|
KeyEnum[KeyEnum["page-per-site"] = 21] = "page-per-site";
|
|
559
559
|
KeyEnum[KeyEnum["logo-description"] = 22] = "logo-description";
|
|
560
|
-
KeyEnum[KeyEnum["
|
|
561
|
-
KeyEnum[KeyEnum["
|
|
560
|
+
KeyEnum[KeyEnum["live-value-bounded"] = 23] = "live-value-bounded";
|
|
561
|
+
KeyEnum[KeyEnum["live-value"] = 24] = "live-value";
|
|
562
|
+
KeyEnum[KeyEnum["open-link-in-tab"] = 25] = "open-link-in-tab";
|
|
563
|
+
KeyEnum[KeyEnum["kolibri-logo"] = 26] = "kolibri-logo";
|
|
562
564
|
})(KeyEnum || (KeyEnum = {}));
|
|
563
565
|
|
|
564
566
|
var TagEnum;
|
|
@@ -594,28 +596,29 @@ var TagEnum;
|
|
|
594
596
|
TagEnum[TagEnum["link"] = 28] = "link";
|
|
595
597
|
TagEnum[TagEnum["link-button"] = 29] = "link-button";
|
|
596
598
|
TagEnum[TagEnum["logo"] = 30] = "logo";
|
|
597
|
-
TagEnum[TagEnum["
|
|
598
|
-
TagEnum[TagEnum["
|
|
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["table
|
|
611
|
-
TagEnum[TagEnum["table-
|
|
612
|
-
TagEnum[TagEnum["
|
|
613
|
-
TagEnum[TagEnum["
|
|
614
|
-
TagEnum[TagEnum["
|
|
615
|
-
TagEnum[TagEnum["
|
|
616
|
-
TagEnum[TagEnum["
|
|
617
|
-
TagEnum[TagEnum["
|
|
618
|
-
TagEnum[TagEnum["tree
|
|
599
|
+
TagEnum[TagEnum["meter"] = 31] = "meter";
|
|
600
|
+
TagEnum[TagEnum["modal"] = 32] = "modal";
|
|
601
|
+
TagEnum[TagEnum["nav"] = 33] = "nav";
|
|
602
|
+
TagEnum[TagEnum["pagination"] = 34] = "pagination";
|
|
603
|
+
TagEnum[TagEnum["popover-button"] = 35] = "popover-button";
|
|
604
|
+
TagEnum[TagEnum["progress"] = 36] = "progress";
|
|
605
|
+
TagEnum[TagEnum["quote"] = 37] = "quote";
|
|
606
|
+
TagEnum[TagEnum["select"] = 38] = "select";
|
|
607
|
+
TagEnum[TagEnum["single-select"] = 39] = "single-select";
|
|
608
|
+
TagEnum[TagEnum["skip-nav"] = 40] = "skip-nav";
|
|
609
|
+
TagEnum[TagEnum["spin"] = 41] = "spin";
|
|
610
|
+
TagEnum[TagEnum["split-button"] = 42] = "split-button";
|
|
611
|
+
TagEnum[TagEnum["symbol"] = 43] = "symbol";
|
|
612
|
+
TagEnum[TagEnum["table"] = 44] = "table";
|
|
613
|
+
TagEnum[TagEnum["table-stateful"] = 45] = "table-stateful";
|
|
614
|
+
TagEnum[TagEnum["table-stateless"] = 46] = "table-stateless";
|
|
615
|
+
TagEnum[TagEnum["tabs"] = 47] = "tabs";
|
|
616
|
+
TagEnum[TagEnum["textarea"] = 48] = "textarea";
|
|
617
|
+
TagEnum[TagEnum["toast-container"] = 49] = "toast-container";
|
|
618
|
+
TagEnum[TagEnum["toolbar"] = 50] = "toolbar";
|
|
619
|
+
TagEnum[TagEnum["tooltip"] = 51] = "tooltip";
|
|
620
|
+
TagEnum[TagEnum["tree"] = 52] = "tree";
|
|
621
|
+
TagEnum[TagEnum["tree-item"] = 53] = "tree-item";
|
|
619
622
|
})(TagEnum || (TagEnum = {}));
|
|
620
623
|
|
|
621
624
|
/** Detect free variable `global` from Node.js. */
|
|
@@ -9010,7 +9013,7 @@ let KolTreeItemWcTag = 'kol-tree-item-wc';
|
|
|
9010
9013
|
let KolTreeTag = 'kol-tree';
|
|
9011
9014
|
let KolTreeWcTag = 'kol-tree-wc';
|
|
9012
9015
|
|
|
9013
|
-
const defaultStyleCss$
|
|
9016
|
+
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}";
|
|
9014
9017
|
|
|
9015
9018
|
class KolAbbr {
|
|
9016
9019
|
constructor(hostRef) {
|
|
@@ -9032,7 +9035,7 @@ class KolAbbr {
|
|
|
9032
9035
|
"_label": ["validateLabel"]
|
|
9033
9036
|
}; }
|
|
9034
9037
|
static get style() { return {
|
|
9035
|
-
default: defaultStyleCss$
|
|
9038
|
+
default: defaultStyleCss$O
|
|
9036
9039
|
}; }
|
|
9037
9040
|
static get cmpMeta() { return {
|
|
9038
9041
|
"$flags$": 297,
|
|
@@ -9228,27 +9231,65 @@ if (isTestMode()) {
|
|
|
9228
9231
|
nonce = () => 'nonce';
|
|
9229
9232
|
}
|
|
9230
9233
|
|
|
9231
|
-
const MAX_FOCUS_ATTEMPTS = 10;
|
|
9232
9234
|
const MAX_TIMEOUT_DURATION = 5000;
|
|
9233
9235
|
function waitForThemed(host) {
|
|
9234
9236
|
return new Promise((resolve, reject) => {
|
|
9237
|
+
let timeoutId;
|
|
9235
9238
|
const observer = new MutationObserver(() => {
|
|
9236
9239
|
if (host.hasAttribute('data-themed')) {
|
|
9237
|
-
|
|
9240
|
+
if (timeoutId) {
|
|
9241
|
+
clearTimeout(timeoutId);
|
|
9242
|
+
}
|
|
9238
9243
|
observer.disconnect();
|
|
9239
9244
|
resolve();
|
|
9240
9245
|
}
|
|
9241
9246
|
});
|
|
9242
|
-
const timeoutId = setTimeout(() => {
|
|
9243
|
-
observer.disconnect();
|
|
9244
|
-
reject(new Error('Timeout waiting for data-themed attribute'));
|
|
9245
|
-
}, MAX_TIMEOUT_DURATION);
|
|
9246
9247
|
observer.observe(host, {
|
|
9247
9248
|
attributes: true,
|
|
9248
9249
|
attributeFilter: ['data-themed'],
|
|
9249
9250
|
});
|
|
9251
|
+
if (host.hasAttribute('data-themed')) {
|
|
9252
|
+
observer.disconnect();
|
|
9253
|
+
resolve();
|
|
9254
|
+
return;
|
|
9255
|
+
}
|
|
9256
|
+
timeoutId = setTimeout(() => {
|
|
9257
|
+
observer.disconnect();
|
|
9258
|
+
reject(new Error('Timeout waiting for data-themed attribute'));
|
|
9259
|
+
}, MAX_TIMEOUT_DURATION);
|
|
9250
9260
|
});
|
|
9251
9261
|
}
|
|
9262
|
+
|
|
9263
|
+
const MAX_CLICK_ATTEMPTS = 3;
|
|
9264
|
+
async function delegateClick(host, callback) {
|
|
9265
|
+
try {
|
|
9266
|
+
if (!host.hasAttribute('data-themed')) {
|
|
9267
|
+
await waitForThemed(host);
|
|
9268
|
+
}
|
|
9269
|
+
await callback();
|
|
9270
|
+
}
|
|
9271
|
+
catch (_a) {
|
|
9272
|
+
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.`);
|
|
9273
|
+
}
|
|
9274
|
+
}
|
|
9275
|
+
function isElementVisible(element) {
|
|
9276
|
+
if (!element)
|
|
9277
|
+
return false;
|
|
9278
|
+
const rect = element.getBoundingClientRect();
|
|
9279
|
+
return rect.width > 0 && rect.height > 0;
|
|
9280
|
+
}
|
|
9281
|
+
async function setClick(element) {
|
|
9282
|
+
let attempts = 0;
|
|
9283
|
+
do {
|
|
9284
|
+
if (element) {
|
|
9285
|
+
element.click();
|
|
9286
|
+
}
|
|
9287
|
+
await new Promise((r) => requestAnimationFrame(r));
|
|
9288
|
+
attempts++;
|
|
9289
|
+
} while (!isElementVisible(element) && attempts < MAX_CLICK_ATTEMPTS);
|
|
9290
|
+
}
|
|
9291
|
+
|
|
9292
|
+
const MAX_FOCUS_ATTEMPTS = 10;
|
|
9252
9293
|
async function delegateFocus(host, callback) {
|
|
9253
9294
|
try {
|
|
9254
9295
|
if (!host.hasAttribute('data-themed')) {
|
|
@@ -9318,7 +9359,7 @@ const watchHeadingLevel = (component, value) => {
|
|
|
9318
9359
|
});
|
|
9319
9360
|
};
|
|
9320
9361
|
|
|
9321
|
-
const defaultStyleCss$
|
|
9362
|
+
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}";
|
|
9322
9363
|
|
|
9323
9364
|
featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
|
|
9324
9365
|
|
|
@@ -9355,6 +9396,9 @@ class KolAccordion {
|
|
|
9355
9396
|
async focus() {
|
|
9356
9397
|
return delegateFocus(this.host, () => setFocus(this.buttonWcRef));
|
|
9357
9398
|
}
|
|
9399
|
+
async click() {
|
|
9400
|
+
return delegateClick(this.host, async () => setClick(this.buttonWcRef));
|
|
9401
|
+
}
|
|
9358
9402
|
render() {
|
|
9359
9403
|
const { _open, _label, _disabled, _level } = this.state;
|
|
9360
9404
|
const rootClass = 'kol-accordion';
|
|
@@ -9377,7 +9421,7 @@ class KolAccordion {
|
|
|
9377
9421
|
animationClass: `${rootClass}__wrapper-animation`,
|
|
9378
9422
|
},
|
|
9379
9423
|
};
|
|
9380
|
-
return (hAsync(KolCollapsibleFc, Object.assign({ key: '
|
|
9424
|
+
return (hAsync(KolCollapsibleFc, Object.assign({ key: '93edb8c6b3a39cfd468028a47214725a77ac6f67' }, props), hAsync("slot", { key: '1ac556846b4eeb89f9d61e4158160212f9170b25' })));
|
|
9381
9425
|
}
|
|
9382
9426
|
validateDisabled(value) {
|
|
9383
9427
|
validateDisabled(this, value);
|
|
@@ -9412,7 +9456,7 @@ class KolAccordion {
|
|
|
9412
9456
|
"_open": ["validateOpen"]
|
|
9413
9457
|
}; }
|
|
9414
9458
|
static get style() { return {
|
|
9415
|
-
default: defaultStyleCss$
|
|
9459
|
+
default: defaultStyleCss$N
|
|
9416
9460
|
}; }
|
|
9417
9461
|
static get cmpMeta() { return {
|
|
9418
9462
|
"$flags$": 297,
|
|
@@ -9424,7 +9468,8 @@ class KolAccordion {
|
|
|
9424
9468
|
"_on": [16],
|
|
9425
9469
|
"_open": [1540],
|
|
9426
9470
|
"state": [32],
|
|
9427
|
-
"focus": [64]
|
|
9471
|
+
"focus": [64],
|
|
9472
|
+
"click": [64]
|
|
9428
9473
|
},
|
|
9429
9474
|
"$listeners$": undefined,
|
|
9430
9475
|
"$lazyBundleId$": "-",
|
|
@@ -9432,7 +9477,7 @@ class KolAccordion {
|
|
|
9432
9477
|
}; }
|
|
9433
9478
|
}
|
|
9434
9479
|
|
|
9435
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
9480
|
+
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}";
|
|
9436
9481
|
|
|
9437
9482
|
class KolAlert {
|
|
9438
9483
|
constructor(hostRef) {
|
|
@@ -9450,7 +9495,7 @@ class KolAlert {
|
|
|
9450
9495
|
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' })));
|
|
9451
9496
|
}
|
|
9452
9497
|
static get style() { return {
|
|
9453
|
-
default: defaultStyleCss$
|
|
9498
|
+
default: defaultStyleCss$M
|
|
9454
9499
|
}; }
|
|
9455
9500
|
static get cmpMeta() { return {
|
|
9456
9501
|
"$flags$": 297,
|
|
@@ -9540,7 +9585,12 @@ var locale_de = {
|
|
|
9540
9585
|
'character-counter-current': '{{current}} Zeichen',
|
|
9541
9586
|
'character-counter-current-of-max': '{{current}}/{{max}} Zeichen',
|
|
9542
9587
|
'character-counter-current-of-max-aria': '{{current}} von {{max}} Zeichen',
|
|
9588
|
+
'live-value-bounded': '{{value}} von {{max}} {{unit}}',
|
|
9589
|
+
'live-value': '{{value}} {{unit}}',
|
|
9543
9590
|
readonly: 'schreibgeschützt',
|
|
9591
|
+
'meter-state-optimum': 'Optimal',
|
|
9592
|
+
'meter-state-suboptimal': 'Suboptimal',
|
|
9593
|
+
'meter-state-critical': 'Kritisch',
|
|
9544
9594
|
};
|
|
9545
9595
|
|
|
9546
9596
|
var locale_en = {
|
|
@@ -9612,7 +9662,12 @@ var locale_en = {
|
|
|
9612
9662
|
'character-counter-current': '{{current}} characters',
|
|
9613
9663
|
'character-counter-current-of-max': '{{current}}/{{max}} characters',
|
|
9614
9664
|
'character-counter-current-of-max-aria': '{{current}} of {{max}} characters',
|
|
9665
|
+
'live-value-bounded': '{{value}} of {{max}} {{unit}}',
|
|
9666
|
+
'live-value': '{{value}} {{unit}}',
|
|
9615
9667
|
readonly: 'read-only',
|
|
9668
|
+
'meter-state-optimum': 'Optimum',
|
|
9669
|
+
'meter-state-suboptimal': 'Suboptimal',
|
|
9670
|
+
'meter-state-critical': 'Critical',
|
|
9616
9671
|
};
|
|
9617
9672
|
|
|
9618
9673
|
const mapLocaleKeys = (locale) => Object.keys(locale).reduce((a, c) => ((a[`${'kol'}-${c}`] = locale[c]), a), {});
|
|
@@ -9994,6 +10049,8 @@ const colorProp = createPropDefinition('color', {
|
|
|
9994
10049
|
foregroundColor: '#3f3f3f',
|
|
9995
10050
|
}, normalizer, validator);
|
|
9996
10051
|
|
|
10052
|
+
const highProp = createPropDefinition('high', 0, normalizeNumber);
|
|
10053
|
+
|
|
9997
10054
|
const hrefProp = createPropDefinition('href', '', normalizeString, (v) => typeof v === 'string');
|
|
9998
10055
|
|
|
9999
10056
|
const iconsProp = createPropDefinition('icons', 'kolicon-logo', normalizeString);
|
|
@@ -10006,10 +10063,25 @@ const LOADING_OPTIONS = ['eager', 'lazy'];
|
|
|
10006
10063
|
const LOADING_SET = new Set(LOADING_OPTIONS);
|
|
10007
10064
|
const loadingProp = createPropDefinition('loading', 'lazy', (value) => normalizeString(value), (v) => LOADING_SET.has(v));
|
|
10008
10065
|
|
|
10066
|
+
const lowProp = createPropDefinition('low', 0, normalizeNumber);
|
|
10067
|
+
|
|
10009
10068
|
const maxProp = createPropDefinition('max', 100, normalizeNumber, (v) => v > 0);
|
|
10010
10069
|
|
|
10070
|
+
const minProp = createPropDefinition('min', 0, normalizeNumber);
|
|
10071
|
+
|
|
10011
10072
|
const nameProp = createPropDefinition('name', '', normalizeString);
|
|
10012
10073
|
|
|
10074
|
+
const optimumProp = createPropDefinition('optimum', 0, normalizeNumber);
|
|
10075
|
+
|
|
10076
|
+
const orientationOptions = ['horizontal', 'vertical'];
|
|
10077
|
+
const orientationProp = createPropDefinition('orientation', 'horizontal', (value) => {
|
|
10078
|
+
const str = normalizeString(value);
|
|
10079
|
+
if (orientationOptions.includes(str)) {
|
|
10080
|
+
return str;
|
|
10081
|
+
}
|
|
10082
|
+
throw new Error(`Invalid orientation: ${str}`);
|
|
10083
|
+
});
|
|
10084
|
+
|
|
10013
10085
|
const quoteProp = createPropDefinition('quote', '', normalizeString);
|
|
10014
10086
|
|
|
10015
10087
|
const secondaryHeadlineProp = createPropDefinition('secondaryHeadline', '', normalizeString);
|
|
@@ -10022,6 +10094,8 @@ const srcsetProp = createPropDefinition('srcset', '', normalizeString);
|
|
|
10022
10094
|
|
|
10023
10095
|
const unitProp = createPropDefinition('unit', '%', normalizeString, (v) => v.length > 0);
|
|
10024
10096
|
|
|
10097
|
+
const numberValueProp = createPropDefinition('value', 0, normalizeNumber, (v) => v >= 0);
|
|
10098
|
+
|
|
10025
10099
|
const clampedNumberValueProp = createDependentPropDefinition('value', 0, (value, deps) => {
|
|
10026
10100
|
const normalized = normalizeNumber(value);
|
|
10027
10101
|
if (normalized < deps.min) {
|
|
@@ -10134,7 +10208,7 @@ class BaseWebComponent {
|
|
|
10134
10208
|
}
|
|
10135
10209
|
}
|
|
10136
10210
|
|
|
10137
|
-
const defaultStyleCss$
|
|
10211
|
+
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}";
|
|
10138
10212
|
|
|
10139
10213
|
class KolAvatar extends BaseWebComponent {
|
|
10140
10214
|
constructor(hostRef) {
|
|
@@ -10168,7 +10242,7 @@ class KolAvatar extends BaseWebComponent {
|
|
|
10168
10242
|
"_src": ["watchSrc"]
|
|
10169
10243
|
}; }
|
|
10170
10244
|
static get style() { return {
|
|
10171
|
-
default: defaultStyleCss$
|
|
10245
|
+
default: defaultStyleCss$L
|
|
10172
10246
|
}; }
|
|
10173
10247
|
static get cmpMeta() { return {
|
|
10174
10248
|
"$flags$": 809,
|
|
@@ -19178,7 +19252,7 @@ const SpanFC = (props, children) => {
|
|
|
19178
19252
|
}), 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')));
|
|
19179
19253
|
};
|
|
19180
19254
|
|
|
19181
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
19255
|
+
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}";
|
|
19182
19256
|
|
|
19183
19257
|
featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
|
|
19184
19258
|
class KolBadge {
|
|
@@ -19252,7 +19326,7 @@ class KolBadge {
|
|
|
19252
19326
|
"_smartButton": ["validateSmartButton"]
|
|
19253
19327
|
}; }
|
|
19254
19328
|
static get style() { return {
|
|
19255
|
-
default: defaultStyleCss$
|
|
19329
|
+
default: defaultStyleCss$K
|
|
19256
19330
|
}; }
|
|
19257
19331
|
static get cmpMeta() { return {
|
|
19258
19332
|
"$flags$": 297,
|
|
@@ -19289,7 +19363,7 @@ const watchNavLinks = (className, component, value) => {
|
|
|
19289
19363
|
uiUxHintMillerscheZahl(className, component.state._links.length);
|
|
19290
19364
|
};
|
|
19291
19365
|
|
|
19292
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
19366
|
+
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}";
|
|
19293
19367
|
|
|
19294
19368
|
class KolBreadcrumb {
|
|
19295
19369
|
constructor(hostRef) {
|
|
@@ -19331,7 +19405,7 @@ class KolBreadcrumb {
|
|
|
19331
19405
|
"_links": ["validateLinks"]
|
|
19332
19406
|
}; }
|
|
19333
19407
|
static get style() { return {
|
|
19334
|
-
default: defaultStyleCss$
|
|
19408
|
+
default: defaultStyleCss$J
|
|
19335
19409
|
}; }
|
|
19336
19410
|
static get cmpMeta() { return {
|
|
19337
19411
|
"$flags$": 297,
|
|
@@ -19347,7 +19421,7 @@ class KolBreadcrumb {
|
|
|
19347
19421
|
}; }
|
|
19348
19422
|
}
|
|
19349
19423
|
|
|
19350
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
19424
|
+
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}";
|
|
19351
19425
|
|
|
19352
19426
|
class KolButton {
|
|
19353
19427
|
constructor(hostRef) {
|
|
@@ -19368,12 +19442,15 @@ class KolButton {
|
|
|
19368
19442
|
async focus() {
|
|
19369
19443
|
return delegateFocus(this.host, () => setFocus(this.buttonWcRef));
|
|
19370
19444
|
}
|
|
19445
|
+
async click() {
|
|
19446
|
+
return delegateClick(this.host, async () => setClick(this.buttonWcRef));
|
|
19447
|
+
}
|
|
19371
19448
|
render() {
|
|
19372
|
-
return (hAsync(KolButtonWcTag, { key: '
|
|
19449
|
+
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" })));
|
|
19373
19450
|
}
|
|
19374
19451
|
get host() { return getElement(this); }
|
|
19375
19452
|
static get style() { return {
|
|
19376
|
-
default: defaultStyleCss$
|
|
19453
|
+
default: defaultStyleCss$I
|
|
19377
19454
|
}; }
|
|
19378
19455
|
static get cmpMeta() { return {
|
|
19379
19456
|
"$flags$": 297,
|
|
@@ -19400,7 +19477,8 @@ class KolButton {
|
|
|
19400
19477
|
"_value": [8],
|
|
19401
19478
|
"_variant": [1],
|
|
19402
19479
|
"getValue": [64],
|
|
19403
|
-
"focus": [64]
|
|
19480
|
+
"focus": [64],
|
|
19481
|
+
"click": [64]
|
|
19404
19482
|
},
|
|
19405
19483
|
"$listeners$": undefined,
|
|
19406
19484
|
"$lazyBundleId$": "-",
|
|
@@ -19408,7 +19486,7 @@ class KolButton {
|
|
|
19408
19486
|
}; }
|
|
19409
19487
|
}
|
|
19410
19488
|
|
|
19411
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
19489
|
+
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}";
|
|
19412
19490
|
|
|
19413
19491
|
class KolButtonLink {
|
|
19414
19492
|
constructor(hostRef) {
|
|
@@ -19428,12 +19506,15 @@ class KolButtonLink {
|
|
|
19428
19506
|
async focus() {
|
|
19429
19507
|
return delegateFocus(this.host, () => setFocus(this.buttonWcRef));
|
|
19430
19508
|
}
|
|
19509
|
+
async click() {
|
|
19510
|
+
return delegateClick(this.host, async () => setClick(this.buttonWcRef));
|
|
19511
|
+
}
|
|
19431
19512
|
render() {
|
|
19432
|
-
return (hAsync(KolButtonWcTag, { key: '
|
|
19513
|
+
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" })));
|
|
19433
19514
|
}
|
|
19434
19515
|
get host() { return getElement(this); }
|
|
19435
19516
|
static get style() { return {
|
|
19436
|
-
default: defaultStyleCss$
|
|
19517
|
+
default: defaultStyleCss$H
|
|
19437
19518
|
}; }
|
|
19438
19519
|
static get cmpMeta() { return {
|
|
19439
19520
|
"$flags$": 297,
|
|
@@ -19459,7 +19540,8 @@ class KolButtonLink {
|
|
|
19459
19540
|
"_value": [8],
|
|
19460
19541
|
"_variant": [1],
|
|
19461
19542
|
"getValue": [64],
|
|
19462
|
-
"focus": [64]
|
|
19543
|
+
"focus": [64],
|
|
19544
|
+
"click": [64]
|
|
19463
19545
|
},
|
|
19464
19546
|
"$listeners$": undefined,
|
|
19465
19547
|
"$lazyBundleId$": "-",
|
|
@@ -19735,6 +19817,9 @@ class KolButtonWc {
|
|
|
19735
19817
|
async focus() {
|
|
19736
19818
|
return setFocus(this.buttonRef);
|
|
19737
19819
|
}
|
|
19820
|
+
async click() {
|
|
19821
|
+
return setClick(this.buttonRef);
|
|
19822
|
+
}
|
|
19738
19823
|
render() {
|
|
19739
19824
|
var _a;
|
|
19740
19825
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
@@ -19742,14 +19827,14 @@ class KolButtonWc {
|
|
|
19742
19827
|
const badgeText = this.state._accessKey || this.state._shortKey;
|
|
19743
19828
|
const isDisabled = this.state._disabled === true;
|
|
19744
19829
|
const hideLabel = this.state._hideLabel === true;
|
|
19745
|
-
return (hAsync(Host, { key: '
|
|
19830
|
+
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', {
|
|
19746
19831
|
'kol-button--disabled': isDisabled,
|
|
19747
19832
|
[`kol-button--${this.state._variant}`]: this.state._variant !== 'custom',
|
|
19748
19833
|
'kol-button--inline': this.state._inline === true,
|
|
19749
19834
|
'kol-button--standalone': this.state._inline === false,
|
|
19750
19835
|
'kol-button--hide-label': hideLabel,
|
|
19751
19836
|
[this.state._customClass]: typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
19752
|
-
}), 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: '
|
|
19837
|
+
}), 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 : '' }))));
|
|
19753
19838
|
}
|
|
19754
19839
|
constructor(hostRef) {
|
|
19755
19840
|
registerInstance(this, hostRef);
|
|
@@ -19960,7 +20045,8 @@ class KolButtonWc {
|
|
|
19960
20045
|
"_value": [8],
|
|
19961
20046
|
"_variant": [1],
|
|
19962
20047
|
"state": [32],
|
|
19963
|
-
"focus": [64]
|
|
20048
|
+
"focus": [64],
|
|
20049
|
+
"click": [64]
|
|
19964
20050
|
},
|
|
19965
20051
|
"$listeners$": undefined,
|
|
19966
20052
|
"$lazyBundleId$": "-",
|
|
@@ -19968,7 +20054,7 @@ class KolButtonWc {
|
|
|
19968
20054
|
}; }
|
|
19969
20055
|
}
|
|
19970
20056
|
|
|
19971
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
20057
|
+
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}";
|
|
19972
20058
|
|
|
19973
20059
|
class KolCard {
|
|
19974
20060
|
constructor(hostRef) {
|
|
@@ -19980,7 +20066,7 @@ class KolCard {
|
|
|
19980
20066
|
return (hAsync(KolCardWcTag, { key: 'b7e95eac842a1cbcfb328656f17596283f17284a', _on: this._on, _hasCloser: this._hasCloser, _label: this._label, _level: this._level }, hAsync("slot", { key: '7b686b0f83c138ab0d497f9b6a0d7d5927bce63c' })));
|
|
19981
20067
|
}
|
|
19982
20068
|
static get style() { return {
|
|
19983
|
-
default: defaultStyleCss$
|
|
20069
|
+
default: defaultStyleCss$G
|
|
19984
20070
|
}; }
|
|
19985
20071
|
static get cmpMeta() { return {
|
|
19986
20072
|
"$flags$": 297,
|
|
@@ -20208,7 +20294,7 @@ class KolCardWc {
|
|
|
20208
20294
|
this.validateOnValue = (value) => typeof value === 'object' && value !== null && typeof value.onClose === 'function';
|
|
20209
20295
|
}
|
|
20210
20296
|
render() {
|
|
20211
|
-
return (hAsync(Host, { key: '
|
|
20297
|
+
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: {
|
|
20212
20298
|
left: {
|
|
20213
20299
|
icon: 'kolicon-cross',
|
|
20214
20300
|
},
|
|
@@ -20313,7 +20399,7 @@ class KolClickButton extends BaseWebComponent {
|
|
|
20313
20399
|
});
|
|
20314
20400
|
}
|
|
20315
20401
|
render() {
|
|
20316
|
-
return (hAsync(Host, { key: '
|
|
20402
|
+
return (hAsync(Host, { key: '40c176ec52205fd211f132d8f6a7ed0bfd15e6d6' }, hAsync(ClickButtonFC, { key: 'a94906ffb096c6da6b6f3ca33bcb47d431d62b8e', label: this.ctrl.getRenderProp('label'), refButton: this.ctrl.setButtonRef, handleClick: this.ctrl.handleClick })));
|
|
20317
20403
|
}
|
|
20318
20404
|
static get watchers() { return {
|
|
20319
20405
|
"_label": ["watchLabel"]
|
|
@@ -20820,7 +20906,7 @@ class ComboboxController extends InputIconController {
|
|
|
20820
20906
|
}
|
|
20821
20907
|
}
|
|
20822
20908
|
|
|
20823
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
20909
|
+
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}";
|
|
20824
20910
|
|
|
20825
20911
|
class KolCombobox {
|
|
20826
20912
|
async getValue() {
|
|
@@ -20829,6 +20915,9 @@ class KolCombobox {
|
|
|
20829
20915
|
async focus() {
|
|
20830
20916
|
return delegateFocus(this.host, () => setFocus(this.refInput));
|
|
20831
20917
|
}
|
|
20918
|
+
async click() {
|
|
20919
|
+
return delegateClick(this.host, async () => setClick(this.refInput));
|
|
20920
|
+
}
|
|
20832
20921
|
selectOption(option) {
|
|
20833
20922
|
var _a;
|
|
20834
20923
|
this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: option } }), true, option);
|
|
@@ -20941,13 +21030,13 @@ class KolCombobox {
|
|
|
20941
21030
|
}
|
|
20942
21031
|
render() {
|
|
20943
21032
|
const isDisabled = this.state._disabled === true;
|
|
20944
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
21033
|
+
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: {
|
|
20945
21034
|
onClick: () => {
|
|
20946
21035
|
this.clearSelection();
|
|
20947
21036
|
},
|
|
20948
|
-
} })), hAsync(IconFC, { key: '
|
|
21037
|
+
} })), hAsync(IconFC, { key: '014fdd5453f79d75b878962c9ee08a5d03e31182', icons: "kolicon-chevron-down", label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
20949
21038
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
20950
|
-
}), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: '
|
|
21039
|
+
}), 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) &&
|
|
20951
21040
|
this._filteredSuggestions.length > 0 &&
|
|
20952
21041
|
this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { disabled: false, index: index, option: option, searchTerm: this.state._value, ref: (el) => {
|
|
20953
21042
|
if (el)
|
|
@@ -21222,7 +21311,7 @@ class KolCombobox {
|
|
|
21222
21311
|
"_value": ["validateValue"]
|
|
21223
21312
|
}; }
|
|
21224
21313
|
static get style() { return {
|
|
21225
|
-
default: defaultStyleCss$
|
|
21314
|
+
default: defaultStyleCss$F
|
|
21226
21315
|
}; }
|
|
21227
21316
|
static get cmpMeta() { return {
|
|
21228
21317
|
"$flags$": 297,
|
|
@@ -21253,7 +21342,8 @@ class KolCombobox {
|
|
|
21253
21342
|
"state": [32],
|
|
21254
21343
|
"inputHasFocus": [32],
|
|
21255
21344
|
"getValue": [64],
|
|
21256
|
-
"focus": [64]
|
|
21345
|
+
"focus": [64],
|
|
21346
|
+
"click": [64]
|
|
21257
21347
|
},
|
|
21258
21348
|
"$listeners$": [[0, "keydown", "handleKeyDown"], [0, "click", "handleWindowClick"], [1, "mousemove", "handleMouseEvent"], [0, "focusout", "handleFocusOut"], [0, "blur", "handleWindowBlur"]],
|
|
21259
21349
|
"$lazyBundleId$": "-",
|
|
@@ -21261,7 +21351,7 @@ class KolCombobox {
|
|
|
21261
21351
|
}; }
|
|
21262
21352
|
}
|
|
21263
21353
|
|
|
21264
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
21354
|
+
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}";
|
|
21265
21355
|
|
|
21266
21356
|
class KolDetails {
|
|
21267
21357
|
constructor(hostRef) {
|
|
@@ -21293,6 +21383,9 @@ class KolDetails {
|
|
|
21293
21383
|
async focus() {
|
|
21294
21384
|
return delegateFocus(this.host, () => setFocus(this.buttonWcRef));
|
|
21295
21385
|
}
|
|
21386
|
+
async click() {
|
|
21387
|
+
return delegateClick(this.host, async () => setClick(this.buttonWcRef));
|
|
21388
|
+
}
|
|
21296
21389
|
render() {
|
|
21297
21390
|
const { _open, _label, _disabled, _level } = this.state;
|
|
21298
21391
|
const rootClass = 'kol-details';
|
|
@@ -21316,7 +21409,7 @@ class KolDetails {
|
|
|
21316
21409
|
animationClass: `${rootClass}__wrapper-animation`,
|
|
21317
21410
|
},
|
|
21318
21411
|
};
|
|
21319
|
-
return (hAsync(KolCollapsibleFc, Object.assign({ key: '
|
|
21412
|
+
return (hAsync(KolCollapsibleFc, Object.assign({ key: '3c99d7ecc7dbbae70baa196aa2d45a1746212830' }, props), hAsync("slot", { key: '5d9579bb486d5d1c0fced9d8dfc44f384034ef07' })));
|
|
21320
21413
|
}
|
|
21321
21414
|
validateDisabled(value) {
|
|
21322
21415
|
validateDisabled(this, value);
|
|
@@ -21351,7 +21444,7 @@ class KolDetails {
|
|
|
21351
21444
|
"_open": ["validateOpen"]
|
|
21352
21445
|
}; }
|
|
21353
21446
|
static get style() { return {
|
|
21354
|
-
default: defaultStyleCss$
|
|
21447
|
+
default: defaultStyleCss$E
|
|
21355
21448
|
}; }
|
|
21356
21449
|
static get cmpMeta() { return {
|
|
21357
21450
|
"$flags$": 297,
|
|
@@ -21363,7 +21456,8 @@ class KolDetails {
|
|
|
21363
21456
|
"_on": [16],
|
|
21364
21457
|
"_open": [1540],
|
|
21365
21458
|
"state": [32],
|
|
21366
|
-
"focus": [64]
|
|
21459
|
+
"focus": [64],
|
|
21460
|
+
"click": [64]
|
|
21367
21461
|
},
|
|
21368
21462
|
"$listeners$": undefined,
|
|
21369
21463
|
"$lazyBundleId$": "-",
|
|
@@ -21371,7 +21465,7 @@ class KolDetails {
|
|
|
21371
21465
|
}; }
|
|
21372
21466
|
}
|
|
21373
21467
|
|
|
21374
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
21468
|
+
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}";
|
|
21375
21469
|
|
|
21376
21470
|
class KolDialog {
|
|
21377
21471
|
constructor(hostRef) {
|
|
@@ -21394,7 +21488,7 @@ class KolDialog {
|
|
|
21394
21488
|
return (hAsync(KolDialogWcTag, { key: '24744fff4cfebb9ef188926e5390064ce7ec6931', ref: this.catchRef, _label: this._label, _on: this._on, _variant: this._variant, _width: this._width }, hAsync("slot", { key: 'c8844dc7d6b9d16567ce400ae10f992018c6849d' })));
|
|
21395
21489
|
}
|
|
21396
21490
|
static get style() { return {
|
|
21397
|
-
default: defaultStyleCss$
|
|
21491
|
+
default: defaultStyleCss$D
|
|
21398
21492
|
}; }
|
|
21399
21493
|
static get cmpMeta() { return {
|
|
21400
21494
|
"$flags$": 297,
|
|
@@ -21527,7 +21621,7 @@ class KolDialogWc {
|
|
|
21527
21621
|
}; }
|
|
21528
21622
|
}
|
|
21529
21623
|
|
|
21530
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
21624
|
+
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}";
|
|
21531
21625
|
|
|
21532
21626
|
class KolDrawer {
|
|
21533
21627
|
constructor(hostRef) {
|
|
@@ -21657,7 +21751,7 @@ class KolDrawer {
|
|
|
21657
21751
|
"_on": ["validateOn"]
|
|
21658
21752
|
}; }
|
|
21659
21753
|
static get style() { return {
|
|
21660
|
-
default: defaultStyleCss$
|
|
21754
|
+
default: defaultStyleCss$C
|
|
21661
21755
|
}; }
|
|
21662
21756
|
static get cmpMeta() { return {
|
|
21663
21757
|
"$flags$": 297,
|
|
@@ -21678,7 +21772,7 @@ class KolDrawer {
|
|
|
21678
21772
|
}; }
|
|
21679
21773
|
}
|
|
21680
21774
|
|
|
21681
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
21775
|
+
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}";
|
|
21682
21776
|
|
|
21683
21777
|
class KolForm {
|
|
21684
21778
|
constructor(hostRef) {
|
|
@@ -21771,7 +21865,7 @@ class KolForm {
|
|
|
21771
21865
|
"_errorList": ["validateErrorList"]
|
|
21772
21866
|
}; }
|
|
21773
21867
|
static get style() { return {
|
|
21774
|
-
default: defaultStyleCss$
|
|
21868
|
+
default: defaultStyleCss$B
|
|
21775
21869
|
}; }
|
|
21776
21870
|
static get cmpMeta() { return {
|
|
21777
21871
|
"$flags$": 297,
|
|
@@ -21833,7 +21927,7 @@ class HeadingController extends BaseController {
|
|
|
21833
21927
|
}
|
|
21834
21928
|
}
|
|
21835
21929
|
|
|
21836
|
-
const defaultStyleCss$
|
|
21930
|
+
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}";
|
|
21837
21931
|
|
|
21838
21932
|
class KolHeading extends BaseWebComponent {
|
|
21839
21933
|
constructor(hostRef) {
|
|
@@ -21867,7 +21961,7 @@ class KolHeading extends BaseWebComponent {
|
|
|
21867
21961
|
"_secondaryHeadline": ["watchSecondaryHeadline"]
|
|
21868
21962
|
}; }
|
|
21869
21963
|
static get style() { return {
|
|
21870
|
-
default: defaultStyleCss$
|
|
21964
|
+
default: defaultStyleCss$A
|
|
21871
21965
|
}; }
|
|
21872
21966
|
static get cmpMeta() { return {
|
|
21873
21967
|
"$flags$": 809,
|
|
@@ -21908,7 +22002,7 @@ class IconController extends BaseController {
|
|
|
21908
22002
|
}
|
|
21909
22003
|
}
|
|
21910
22004
|
|
|
21911
|
-
const defaultStyleCss$
|
|
22005
|
+
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}";
|
|
21912
22006
|
|
|
21913
22007
|
class KolIcon extends BaseWebComponent {
|
|
21914
22008
|
constructor(hostRef) {
|
|
@@ -21936,7 +22030,7 @@ class KolIcon extends BaseWebComponent {
|
|
|
21936
22030
|
"_label": ["watchLabel"]
|
|
21937
22031
|
}; }
|
|
21938
22032
|
static get style() { return {
|
|
21939
|
-
default: defaultStyleCss$
|
|
22033
|
+
default: defaultStyleCss$z
|
|
21940
22034
|
}; }
|
|
21941
22035
|
static get cmpMeta() { return {
|
|
21942
22036
|
"$flags$": 809,
|
|
@@ -22000,7 +22094,7 @@ class ImageController extends BaseController {
|
|
|
22000
22094
|
}
|
|
22001
22095
|
}
|
|
22002
22096
|
|
|
22003
|
-
const defaultStyleCss$
|
|
22097
|
+
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}";
|
|
22004
22098
|
|
|
22005
22099
|
class KolImage extends BaseWebComponent {
|
|
22006
22100
|
constructor(hostRef) {
|
|
@@ -22043,7 +22137,7 @@ class KolImage extends BaseWebComponent {
|
|
|
22043
22137
|
"_srcset": ["watchSrcset"]
|
|
22044
22138
|
}; }
|
|
22045
22139
|
static get style() { return {
|
|
22046
|
-
default: defaultStyleCss$
|
|
22140
|
+
default: defaultStyleCss$y
|
|
22047
22141
|
}; }
|
|
22048
22142
|
static get cmpMeta() { return {
|
|
22049
22143
|
"$flags$": 809,
|
|
@@ -22310,7 +22404,7 @@ const FieldControlStateWrapper = (_a, children) => {
|
|
|
22310
22404
|
return (hAsync(KolFieldControlFc, Object.assign({}, getFieldControlProps(state), other), children));
|
|
22311
22405
|
};
|
|
22312
22406
|
|
|
22313
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
22407
|
+
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}";
|
|
22314
22408
|
|
|
22315
22409
|
class KolInputCheckbox {
|
|
22316
22410
|
getModelValue() {
|
|
@@ -22322,6 +22416,9 @@ class KolInputCheckbox {
|
|
|
22322
22416
|
async focus() {
|
|
22323
22417
|
return delegateFocus(this.host, () => setFocus(this.inputRef));
|
|
22324
22418
|
}
|
|
22419
|
+
async click() {
|
|
22420
|
+
return delegateClick(this.host, async () => setClick(this.inputRef));
|
|
22421
|
+
}
|
|
22325
22422
|
getFormFieldProps() {
|
|
22326
22423
|
return {
|
|
22327
22424
|
state: this.state,
|
|
@@ -22372,7 +22469,7 @@ class KolInputCheckbox {
|
|
|
22372
22469
|
return this.state._icons.unchecked;
|
|
22373
22470
|
}
|
|
22374
22471
|
render() {
|
|
22375
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22472
|
+
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())))));
|
|
22376
22473
|
}
|
|
22377
22474
|
constructor(hostRef) {
|
|
22378
22475
|
registerInstance(this, hostRef);
|
|
@@ -22512,7 +22609,7 @@ class KolInputCheckbox {
|
|
|
22512
22609
|
"_variant": ["validateVariant"]
|
|
22513
22610
|
}; }
|
|
22514
22611
|
static get style() { return {
|
|
22515
|
-
default: defaultStyleCss$
|
|
22612
|
+
default: defaultStyleCss$x
|
|
22516
22613
|
}; }
|
|
22517
22614
|
static get cmpMeta() { return {
|
|
22518
22615
|
"$flags$": 297,
|
|
@@ -22541,7 +22638,8 @@ class KolInputCheckbox {
|
|
|
22541
22638
|
"state": [32],
|
|
22542
22639
|
"inputHasFocus": [32],
|
|
22543
22640
|
"getValue": [64],
|
|
22544
|
-
"focus": [64]
|
|
22641
|
+
"focus": [64],
|
|
22642
|
+
"click": [64]
|
|
22545
22643
|
},
|
|
22546
22644
|
"$listeners$": undefined,
|
|
22547
22645
|
"$lazyBundleId$": "-",
|
|
@@ -22572,7 +22670,7 @@ class InputColorController extends InputIconController {
|
|
|
22572
22670
|
}
|
|
22573
22671
|
}
|
|
22574
22672
|
|
|
22575
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
22673
|
+
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}";
|
|
22576
22674
|
|
|
22577
22675
|
class KolInputColor {
|
|
22578
22676
|
async getValue() {
|
|
@@ -22582,6 +22680,9 @@ class KolInputColor {
|
|
|
22582
22680
|
async focus() {
|
|
22583
22681
|
return delegateFocus(this.host, () => setFocus(this.refInputText));
|
|
22584
22682
|
}
|
|
22683
|
+
async click() {
|
|
22684
|
+
return delegateClick(this.host, async () => setClick(this.refInputText));
|
|
22685
|
+
}
|
|
22585
22686
|
get hasSuggestions() {
|
|
22586
22687
|
return Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
22587
22688
|
}
|
|
@@ -22603,7 +22704,7 @@ class KolInputColor {
|
|
|
22603
22704
|
return Object.assign(Object.assign({ state: Object.assign(Object.assign({}, this.state), { _suggestions: [] }) }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus });
|
|
22604
22705
|
}
|
|
22605
22706
|
render() {
|
|
22606
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22707
|
+
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()))))));
|
|
22607
22708
|
}
|
|
22608
22709
|
constructor(hostRef) {
|
|
22609
22710
|
registerInstance(this, hostRef);
|
|
@@ -22740,7 +22841,7 @@ class KolInputColor {
|
|
|
22740
22841
|
"_value": ["validateValue"]
|
|
22741
22842
|
}; }
|
|
22742
22843
|
static get style() { return {
|
|
22743
|
-
default: defaultStyleCss$
|
|
22844
|
+
default: defaultStyleCss$w
|
|
22744
22845
|
}; }
|
|
22745
22846
|
static get cmpMeta() { return {
|
|
22746
22847
|
"$flags$": 297,
|
|
@@ -22767,7 +22868,8 @@ class KolInputColor {
|
|
|
22767
22868
|
"state": [32],
|
|
22768
22869
|
"inputHasFocus": [32],
|
|
22769
22870
|
"getValue": [64],
|
|
22770
|
-
"focus": [64]
|
|
22871
|
+
"focus": [64],
|
|
22872
|
+
"click": [64]
|
|
22771
22873
|
},
|
|
22772
22874
|
"$listeners$": undefined,
|
|
22773
22875
|
"$lazyBundleId$": "-",
|
|
@@ -22924,7 +23026,7 @@ InputDateController.isoTimeRegex = /^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/;
|
|
|
22924
23026
|
InputDateController.isoWeekRegex = /^\d{4}-W(?:[0-4]\d|5[0-3])$/;
|
|
22925
23027
|
InputDateController.DEFAULT_MAX_DATE = new Date(9999, 11, 31, 23, 59, 59);
|
|
22926
23028
|
|
|
22927
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
23029
|
+
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}";
|
|
22928
23030
|
|
|
22929
23031
|
class KolInputDate {
|
|
22930
23032
|
async getValue() {
|
|
@@ -22934,6 +23036,9 @@ class KolInputDate {
|
|
|
22934
23036
|
async focus() {
|
|
22935
23037
|
return delegateFocus(this.host, () => setFocus(this.inputRef));
|
|
22936
23038
|
}
|
|
23039
|
+
async click() {
|
|
23040
|
+
return delegateClick(this.host, async () => setClick(this.inputRef));
|
|
23041
|
+
}
|
|
22937
23042
|
async reset() {
|
|
22938
23043
|
this.state = Object.assign(Object.assign({}, this.state), { _value: null });
|
|
22939
23044
|
this.controller.setFormAssociatedValue('');
|
|
@@ -22972,7 +23077,7 @@ class KolInputDate {
|
|
|
22972
23077
|
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 });
|
|
22973
23078
|
}
|
|
22974
23079
|
render() {
|
|
22975
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23080
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '199a522fd7ca4e9dc7c5c5ef8ee732520a8c44c0' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b21bb8e48d95e8edb197a180b053fb1579289cd4', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '1d8095b8dcafc8e684dca2a5482381307222a823' }, this.getInputProps())))));
|
|
22976
23081
|
}
|
|
22977
23082
|
constructor(hostRef) {
|
|
22978
23083
|
registerInstance(this, hostRef);
|
|
@@ -23150,7 +23255,7 @@ class KolInputDate {
|
|
|
23150
23255
|
"_value": ["validateValue"]
|
|
23151
23256
|
}; }
|
|
23152
23257
|
static get style() { return {
|
|
23153
|
-
default: defaultStyleCss$
|
|
23258
|
+
default: defaultStyleCss$v
|
|
23154
23259
|
}; }
|
|
23155
23260
|
static get cmpMeta() { return {
|
|
23156
23261
|
"$flags$": 297,
|
|
@@ -23185,6 +23290,7 @@ class KolInputDate {
|
|
|
23185
23290
|
"inputHasFocus": [32],
|
|
23186
23291
|
"getValue": [64],
|
|
23187
23292
|
"focus": [64],
|
|
23293
|
+
"click": [64],
|
|
23188
23294
|
"reset": [64]
|
|
23189
23295
|
},
|
|
23190
23296
|
"$listeners$": undefined,
|
|
@@ -23311,7 +23417,7 @@ class InputEmailController extends InputTextEmailController {
|
|
|
23311
23417
|
}
|
|
23312
23418
|
}
|
|
23313
23419
|
|
|
23314
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
23420
|
+
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}";
|
|
23315
23421
|
|
|
23316
23422
|
class KolInputEmail {
|
|
23317
23423
|
async getValue() {
|
|
@@ -23321,6 +23427,9 @@ class KolInputEmail {
|
|
|
23321
23427
|
async focus() {
|
|
23322
23428
|
return delegateFocus(this.host, () => setFocus(this.inputRef));
|
|
23323
23429
|
}
|
|
23430
|
+
async click() {
|
|
23431
|
+
return delegateClick(this.host, async () => setClick(this.inputRef));
|
|
23432
|
+
}
|
|
23324
23433
|
getFormFieldProps() {
|
|
23325
23434
|
return {
|
|
23326
23435
|
state: this.state,
|
|
@@ -23343,7 +23452,7 @@ class KolInputEmail {
|
|
|
23343
23452
|
} });
|
|
23344
23453
|
}
|
|
23345
23454
|
render() {
|
|
23346
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23455
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'e766b70be673696dabfb1995ed43ee339df50a7e' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'aa5a7128da3882a2235883c19915c913d8638c70', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '4871115697213cb5b886bf078b43bf4a2822efda' }, this.getInputProps())))));
|
|
23347
23456
|
}
|
|
23348
23457
|
constructor(hostRef) {
|
|
23349
23458
|
registerInstance(this, hostRef);
|
|
@@ -23498,7 +23607,7 @@ class KolInputEmail {
|
|
|
23498
23607
|
"_maxLengthBehavior": ["validateMaxLengthBehavior"]
|
|
23499
23608
|
}; }
|
|
23500
23609
|
static get style() { return {
|
|
23501
|
-
default: defaultStyleCss$
|
|
23610
|
+
default: defaultStyleCss$u
|
|
23502
23611
|
}; }
|
|
23503
23612
|
static get cmpMeta() { return {
|
|
23504
23613
|
"$flags$": 297,
|
|
@@ -23533,7 +23642,8 @@ class KolInputEmail {
|
|
|
23533
23642
|
"state": [32],
|
|
23534
23643
|
"inputHasFocus": [32],
|
|
23535
23644
|
"getValue": [64],
|
|
23536
|
-
"focus": [64]
|
|
23645
|
+
"focus": [64],
|
|
23646
|
+
"click": [64]
|
|
23537
23647
|
},
|
|
23538
23648
|
"$listeners$": undefined,
|
|
23539
23649
|
"$lazyBundleId$": "-",
|
|
@@ -23563,7 +23673,7 @@ class InputFileController extends InputIconController {
|
|
|
23563
23673
|
}
|
|
23564
23674
|
}
|
|
23565
23675
|
|
|
23566
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
23676
|
+
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}";
|
|
23567
23677
|
|
|
23568
23678
|
class KolInputFile {
|
|
23569
23679
|
async getValue() {
|
|
@@ -23573,6 +23683,9 @@ class KolInputFile {
|
|
|
23573
23683
|
async focus() {
|
|
23574
23684
|
return delegateFocus(this.host, () => setFocus(this.inputRef));
|
|
23575
23685
|
}
|
|
23686
|
+
async click() {
|
|
23687
|
+
return delegateClick(this.host, async () => setClick(this.inputRef));
|
|
23688
|
+
}
|
|
23576
23689
|
async reset() {
|
|
23577
23690
|
this.controller.setFormAssociatedValue('');
|
|
23578
23691
|
this.filename = this.translateFilenameText;
|
|
@@ -23599,7 +23712,7 @@ class KolInputFile {
|
|
|
23599
23712
|
} });
|
|
23600
23713
|
}
|
|
23601
23714
|
render() {
|
|
23602
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23715
|
+
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 }))));
|
|
23603
23716
|
}
|
|
23604
23717
|
constructor(hostRef) {
|
|
23605
23718
|
registerInstance(this, hostRef);
|
|
@@ -23758,7 +23871,7 @@ class KolInputFile {
|
|
|
23758
23871
|
"_touched": ["validateTouched"]
|
|
23759
23872
|
}; }
|
|
23760
23873
|
static get style() { return {
|
|
23761
|
-
default: defaultStyleCss$
|
|
23874
|
+
default: defaultStyleCss$t
|
|
23762
23875
|
}; }
|
|
23763
23876
|
static get cmpMeta() { return {
|
|
23764
23877
|
"$flags$": 297,
|
|
@@ -23788,6 +23901,7 @@ class KolInputFile {
|
|
|
23788
23901
|
"inputHasFocus": [32],
|
|
23789
23902
|
"getValue": [64],
|
|
23790
23903
|
"focus": [64],
|
|
23904
|
+
"click": [64],
|
|
23791
23905
|
"reset": [64]
|
|
23792
23906
|
},
|
|
23793
23907
|
"$listeners$": undefined,
|
|
@@ -23843,7 +23957,7 @@ class InputNumberController extends InputIconController {
|
|
|
23843
23957
|
}
|
|
23844
23958
|
}
|
|
23845
23959
|
|
|
23846
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
23960
|
+
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}";
|
|
23847
23961
|
|
|
23848
23962
|
class KolInputNumber {
|
|
23849
23963
|
async getValue() {
|
|
@@ -23852,6 +23966,9 @@ class KolInputNumber {
|
|
|
23852
23966
|
async focus() {
|
|
23853
23967
|
return delegateFocus(this.host, () => setFocus(this.inputRef));
|
|
23854
23968
|
}
|
|
23969
|
+
async click() {
|
|
23970
|
+
return delegateClick(this.host, async () => setClick(this.inputRef));
|
|
23971
|
+
}
|
|
23855
23972
|
setInitialValueType(value) {
|
|
23856
23973
|
if (this.controller.isNumberString(value)) {
|
|
23857
23974
|
this._initialValueType = 'NumberString';
|
|
@@ -23918,7 +24035,7 @@ class KolInputNumber {
|
|
|
23918
24035
|
}, disabled: this._disabled || this._readOnly }, hAsync(IconFC, { icons: "kolicon-minus", label: "" })));
|
|
23919
24036
|
}
|
|
23920
24037
|
render() {
|
|
23921
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
24038
|
+
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())))));
|
|
23922
24039
|
}
|
|
23923
24040
|
constructor(hostRef) {
|
|
23924
24041
|
registerInstance(this, hostRef);
|
|
@@ -24075,7 +24192,7 @@ class KolInputNumber {
|
|
|
24075
24192
|
"_value": ["validateValue"]
|
|
24076
24193
|
}; }
|
|
24077
24194
|
static get style() { return {
|
|
24078
|
-
default: defaultStyleCss$
|
|
24195
|
+
default: defaultStyleCss$s
|
|
24079
24196
|
}; }
|
|
24080
24197
|
static get cmpMeta() { return {
|
|
24081
24198
|
"$flags$": 297,
|
|
@@ -24109,7 +24226,8 @@ class KolInputNumber {
|
|
|
24109
24226
|
"_initialValueType": [32],
|
|
24110
24227
|
"inputHasFocus": [32],
|
|
24111
24228
|
"getValue": [64],
|
|
24112
|
-
"focus": [64]
|
|
24229
|
+
"focus": [64],
|
|
24230
|
+
"click": [64]
|
|
24113
24231
|
},
|
|
24114
24232
|
"$listeners$": undefined,
|
|
24115
24233
|
"$lazyBundleId$": "-",
|
|
@@ -24117,7 +24235,7 @@ class KolInputNumber {
|
|
|
24117
24235
|
}; }
|
|
24118
24236
|
}
|
|
24119
24237
|
|
|
24120
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
24238
|
+
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}";
|
|
24121
24239
|
|
|
24122
24240
|
class KolInputPassword {
|
|
24123
24241
|
async getValue() {
|
|
@@ -24127,6 +24245,9 @@ class KolInputPassword {
|
|
|
24127
24245
|
async focus() {
|
|
24128
24246
|
return delegateFocus(this.host, () => setFocus(this.inputRef));
|
|
24129
24247
|
}
|
|
24248
|
+
async click() {
|
|
24249
|
+
return delegateClick(this.host, async () => setClick(this.inputRef));
|
|
24250
|
+
}
|
|
24130
24251
|
getFormFieldProps() {
|
|
24131
24252
|
return {
|
|
24132
24253
|
state: this.state,
|
|
@@ -24159,7 +24280,7 @@ class KolInputPassword {
|
|
|
24159
24280
|
}, icon: `${this._passwordVisible ? 'kolicon-eye-closed' : 'kolicon-eye'}`, disabled: this._disabled }));
|
|
24160
24281
|
}
|
|
24161
24282
|
render() {
|
|
24162
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
24283
|
+
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())))));
|
|
24163
24284
|
}
|
|
24164
24285
|
constructor(hostRef) {
|
|
24165
24286
|
registerInstance(this, hostRef);
|
|
@@ -24316,7 +24437,7 @@ class KolInputPassword {
|
|
|
24316
24437
|
"_value": ["validateValue"]
|
|
24317
24438
|
}; }
|
|
24318
24439
|
static get style() { return {
|
|
24319
|
-
default: defaultStyleCss$
|
|
24440
|
+
default: defaultStyleCss$r
|
|
24320
24441
|
}; }
|
|
24321
24442
|
static get cmpMeta() { return {
|
|
24322
24443
|
"$flags$": 297,
|
|
@@ -24351,7 +24472,8 @@ class KolInputPassword {
|
|
|
24351
24472
|
"_passwordVisible": [32],
|
|
24352
24473
|
"inputHasFocus": [32],
|
|
24353
24474
|
"getValue": [64],
|
|
24354
|
-
"focus": [64]
|
|
24475
|
+
"focus": [64],
|
|
24476
|
+
"click": [64]
|
|
24355
24477
|
},
|
|
24356
24478
|
"$listeners$": undefined,
|
|
24357
24479
|
"$lazyBundleId$": "-",
|
|
@@ -24397,7 +24519,7 @@ const RadioStateWrapper = (_a) => {
|
|
|
24397
24519
|
return hAsync(RadioFc, Object.assign({ inputProps: getRadioProps(state, inputProps) }, other));
|
|
24398
24520
|
};
|
|
24399
24521
|
|
|
24400
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
24522
|
+
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}";
|
|
24401
24523
|
|
|
24402
24524
|
class KolInputRadio {
|
|
24403
24525
|
async getValue() {
|
|
@@ -24406,6 +24528,9 @@ class KolInputRadio {
|
|
|
24406
24528
|
async focus() {
|
|
24407
24529
|
return delegateFocus(this.host, () => setFocus(this.getFocusableInput()));
|
|
24408
24530
|
}
|
|
24531
|
+
async click() {
|
|
24532
|
+
return delegateClick(this.host, async () => setClick(this.inputRef));
|
|
24533
|
+
}
|
|
24409
24534
|
getFocusableInput() {
|
|
24410
24535
|
const options = this.state._options;
|
|
24411
24536
|
const isComponentDisabled = Boolean(this.state._disabled);
|
|
@@ -24441,7 +24566,7 @@ class KolInputRadio {
|
|
|
24441
24566
|
};
|
|
24442
24567
|
}
|
|
24443
24568
|
render() {
|
|
24444
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
24569
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '1e1e04daad6bb20cd01acba0ead0ce1a7354babf' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
|
|
24445
24570
|
}
|
|
24446
24571
|
calculateDisabled(option) {
|
|
24447
24572
|
return Boolean(this.state._disabled) || Boolean(option.disabled);
|
|
@@ -24609,7 +24734,7 @@ class KolInputRadio {
|
|
|
24609
24734
|
"_value": ["validateValue"]
|
|
24610
24735
|
}; }
|
|
24611
24736
|
static get style() { return {
|
|
24612
|
-
default: defaultStyleCss$
|
|
24737
|
+
default: defaultStyleCss$q
|
|
24613
24738
|
}; }
|
|
24614
24739
|
static get cmpMeta() { return {
|
|
24615
24740
|
"$flags$": 297,
|
|
@@ -24633,7 +24758,8 @@ class KolInputRadio {
|
|
|
24633
24758
|
"state": [32],
|
|
24634
24759
|
"inputHasFocus": [32],
|
|
24635
24760
|
"getValue": [64],
|
|
24636
|
-
"focus": [64]
|
|
24761
|
+
"focus": [64],
|
|
24762
|
+
"click": [64]
|
|
24637
24763
|
},
|
|
24638
24764
|
"$listeners$": undefined,
|
|
24639
24765
|
"$lazyBundleId$": "-",
|
|
@@ -24677,12 +24803,15 @@ class InputRangeController extends InputIconController {
|
|
|
24677
24803
|
}
|
|
24678
24804
|
}
|
|
24679
24805
|
|
|
24680
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
24806
|
+
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}";
|
|
24681
24807
|
|
|
24682
24808
|
class KolInputRange {
|
|
24683
24809
|
async focus() {
|
|
24684
24810
|
return delegateFocus(this.host, () => setFocus(this.refInputNumber));
|
|
24685
24811
|
}
|
|
24812
|
+
async click() {
|
|
24813
|
+
return delegateClick(this.host, async () => setClick(this.refInputNumber));
|
|
24814
|
+
}
|
|
24686
24815
|
getSanitizedFloatValue(value) {
|
|
24687
24816
|
const floatValue = parseFloat(value);
|
|
24688
24817
|
if (this.state._max && floatValue > this.state._max) {
|
|
@@ -24750,7 +24879,7 @@ class KolInputRange {
|
|
|
24750
24879
|
const inputsWrapperStyle = {
|
|
24751
24880
|
'--kolibri-input-range--input-number--width': `calc(${String(this.state._max).length}ch + 2em)`,
|
|
24752
24881
|
};
|
|
24753
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
24882
|
+
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 }))));
|
|
24754
24883
|
}
|
|
24755
24884
|
constructor(hostRef) {
|
|
24756
24885
|
registerInstance(this, hostRef);
|
|
@@ -24901,7 +25030,7 @@ class KolInputRange {
|
|
|
24901
25030
|
"_value": ["validateValue"]
|
|
24902
25031
|
}; }
|
|
24903
25032
|
static get style() { return {
|
|
24904
|
-
default: defaultStyleCss$
|
|
25033
|
+
default: defaultStyleCss$p
|
|
24905
25034
|
}; }
|
|
24906
25035
|
static get cmpMeta() { return {
|
|
24907
25036
|
"$flags$": 297,
|
|
@@ -24931,6 +25060,7 @@ class KolInputRange {
|
|
|
24931
25060
|
"_initialValueType": [32],
|
|
24932
25061
|
"inputHasFocus": [32],
|
|
24933
25062
|
"focus": [64],
|
|
25063
|
+
"click": [64],
|
|
24934
25064
|
"getValue": [64]
|
|
24935
25065
|
},
|
|
24936
25066
|
"$listeners$": undefined,
|
|
@@ -24939,7 +25069,7 @@ class KolInputRange {
|
|
|
24939
25069
|
}; }
|
|
24940
25070
|
}
|
|
24941
25071
|
|
|
24942
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
25072
|
+
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}";
|
|
24943
25073
|
|
|
24944
25074
|
class KolInputText {
|
|
24945
25075
|
async getValue() {
|
|
@@ -24949,6 +25079,9 @@ class KolInputText {
|
|
|
24949
25079
|
async focus() {
|
|
24950
25080
|
return delegateFocus(this.host, () => setFocus(this.inputRef));
|
|
24951
25081
|
}
|
|
25082
|
+
async click() {
|
|
25083
|
+
return delegateFocus(this.host, async () => setFocus(this.inputRef));
|
|
25084
|
+
}
|
|
24952
25085
|
async selectionStart() {
|
|
24953
25086
|
var _a;
|
|
24954
25087
|
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.selectionStart);
|
|
@@ -24990,7 +25123,7 @@ class KolInputText {
|
|
|
24990
25123
|
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 });
|
|
24991
25124
|
}
|
|
24992
25125
|
render() {
|
|
24993
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
25126
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'd95fa379be351eed64c99b2cbb107bbd747f4355' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '702a87b87fc635bf641d37765a648f83c0018851', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '815c5731ed4978da540e51e9b1b18e58818cc72d' }, this.getInputProps())))));
|
|
24994
25127
|
}
|
|
24995
25128
|
constructor(hostRef) {
|
|
24996
25129
|
registerInstance(this, hostRef);
|
|
@@ -25169,7 +25302,7 @@ class KolInputText {
|
|
|
25169
25302
|
"_value": ["validateValue"]
|
|
25170
25303
|
}; }
|
|
25171
25304
|
static get style() { return {
|
|
25172
|
-
default: defaultStyleCss$
|
|
25305
|
+
default: defaultStyleCss$o
|
|
25173
25306
|
}; }
|
|
25174
25307
|
static get cmpMeta() { return {
|
|
25175
25308
|
"$flags$": 297,
|
|
@@ -25206,6 +25339,7 @@ class KolInputText {
|
|
|
25206
25339
|
"inputHasFocus": [32],
|
|
25207
25340
|
"getValue": [64],
|
|
25208
25341
|
"focus": [64],
|
|
25342
|
+
"click": [64],
|
|
25209
25343
|
"selectionStart": [64],
|
|
25210
25344
|
"selectioconEnd": [64],
|
|
25211
25345
|
"setSelectionRange": [64],
|
|
@@ -25218,7 +25352,7 @@ class KolInputText {
|
|
|
25218
25352
|
}; }
|
|
25219
25353
|
}
|
|
25220
25354
|
|
|
25221
|
-
const defaultStyleCss$
|
|
25355
|
+
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}";
|
|
25222
25356
|
|
|
25223
25357
|
class KolKolibri {
|
|
25224
25358
|
constructor(hostRef) {
|
|
@@ -25274,7 +25408,7 @@ class KolKolibri {
|
|
|
25274
25408
|
"_labeled": ["validateLabeled"]
|
|
25275
25409
|
}; }
|
|
25276
25410
|
static get style() { return {
|
|
25277
|
-
default: defaultStyleCss$
|
|
25411
|
+
default: defaultStyleCss$n
|
|
25278
25412
|
}; }
|
|
25279
25413
|
static get cmpMeta() { return {
|
|
25280
25414
|
"$flags$": 297,
|
|
@@ -25290,7 +25424,7 @@ class KolKolibri {
|
|
|
25290
25424
|
}; }
|
|
25291
25425
|
}
|
|
25292
25426
|
|
|
25293
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
25427
|
+
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}";
|
|
25294
25428
|
|
|
25295
25429
|
class KolLink {
|
|
25296
25430
|
constructor(hostRef) {
|
|
@@ -25311,7 +25445,7 @@ class KolLink {
|
|
|
25311
25445
|
}
|
|
25312
25446
|
get host() { return getElement(this); }
|
|
25313
25447
|
static get style() { return {
|
|
25314
|
-
default: defaultStyleCss$
|
|
25448
|
+
default: defaultStyleCss$m
|
|
25315
25449
|
}; }
|
|
25316
25450
|
static get cmpMeta() { return {
|
|
25317
25451
|
"$flags$": 297,
|
|
@@ -25343,7 +25477,7 @@ class KolLink {
|
|
|
25343
25477
|
}; }
|
|
25344
25478
|
}
|
|
25345
25479
|
|
|
25346
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
25480
|
+
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}";
|
|
25347
25481
|
|
|
25348
25482
|
class KolLinkButton {
|
|
25349
25483
|
constructor(hostRef) {
|
|
@@ -25359,12 +25493,15 @@ class KolLinkButton {
|
|
|
25359
25493
|
async focus() {
|
|
25360
25494
|
return delegateFocus(this.host, () => setFocus(this.linkWcRef));
|
|
25361
25495
|
}
|
|
25496
|
+
async click() {
|
|
25497
|
+
return delegateClick(this.host, async () => setClick(this.linkWcRef));
|
|
25498
|
+
}
|
|
25362
25499
|
render() {
|
|
25363
|
-
return (hAsync(KolLinkWcTag, { key: '
|
|
25500
|
+
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" })));
|
|
25364
25501
|
}
|
|
25365
25502
|
get host() { return getElement(this); }
|
|
25366
25503
|
static get style() { return {
|
|
25367
|
-
default: defaultStyleCss$
|
|
25504
|
+
default: defaultStyleCss$l
|
|
25368
25505
|
}; }
|
|
25369
25506
|
static get cmpMeta() { return {
|
|
25370
25507
|
"$flags$": 297,
|
|
@@ -25387,7 +25524,8 @@ class KolLinkButton {
|
|
|
25387
25524
|
"_target": [1],
|
|
25388
25525
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
25389
25526
|
"_variant": [1],
|
|
25390
|
-
"focus": [64]
|
|
25527
|
+
"focus": [64],
|
|
25528
|
+
"click": [64]
|
|
25391
25529
|
},
|
|
25392
25530
|
"$listeners$": undefined,
|
|
25393
25531
|
"$lazyBundleId$": "-",
|
|
@@ -25458,12 +25596,15 @@ class KolLinkWc {
|
|
|
25458
25596
|
async focus() {
|
|
25459
25597
|
return setFocus(this.anchorRef);
|
|
25460
25598
|
}
|
|
25599
|
+
async click() {
|
|
25600
|
+
return setClick(this.anchorRef);
|
|
25601
|
+
}
|
|
25461
25602
|
render() {
|
|
25462
25603
|
var _a;
|
|
25463
25604
|
const { isExternal, tagAttrs } = this.getRenderValues();
|
|
25464
25605
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
25465
25606
|
const ariaDescription = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim();
|
|
25466
|
-
return (hAsync(Host, { key: '
|
|
25607
|
+
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'
|
|
25467
25608
|
? `${this.state._label}${isExternal ? ` (${this.translateOpenLinkInTab})` : ''}`
|
|
25468
25609
|
: undefined, "aria-keyshortcuts": this.state._shortKey, class: clsx('kol-link', {
|
|
25469
25610
|
'kol-link--disabled': this.state._disabled === true,
|
|
@@ -25473,7 +25614,7 @@ class KolLinkWc {
|
|
|
25473
25614
|
'kol-link--inline': this.state._inline === true,
|
|
25474
25615
|
'kol-link--standalone': this.state._inline === false,
|
|
25475
25616
|
[this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
25476
|
-
}) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(SpanFC, { key: '
|
|
25617
|
+
}) }, 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 }))));
|
|
25477
25618
|
}
|
|
25478
25619
|
validateAccessKey(value) {
|
|
25479
25620
|
validateAccessKey(this, value);
|
|
@@ -25624,7 +25765,8 @@ class KolLinkWc {
|
|
|
25624
25765
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
25625
25766
|
"_variant": [1],
|
|
25626
25767
|
"state": [32],
|
|
25627
|
-
"focus": [64]
|
|
25768
|
+
"focus": [64],
|
|
25769
|
+
"click": [64]
|
|
25628
25770
|
},
|
|
25629
25771
|
"$listeners$": undefined,
|
|
25630
25772
|
"$lazyBundleId$": "-",
|
|
@@ -25632,7 +25774,259 @@ class KolLinkWc {
|
|
|
25632
25774
|
}; }
|
|
25633
25775
|
}
|
|
25634
25776
|
|
|
25635
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
25777
|
+
function getMeterState(value, min, max, low, high, optimum) {
|
|
25778
|
+
const effectiveLow = low !== null && low !== void 0 ? low : min;
|
|
25779
|
+
const effectiveHigh = high !== null && high !== void 0 ? high : max;
|
|
25780
|
+
if (optimum === undefined) {
|
|
25781
|
+
const inMidRegion = value >= effectiveLow && value <= effectiveHigh;
|
|
25782
|
+
return inMidRegion ? 'optimum' : 'suboptimal';
|
|
25783
|
+
}
|
|
25784
|
+
const inLowRegion = value < effectiveLow;
|
|
25785
|
+
const inHighRegion = value > effectiveHigh;
|
|
25786
|
+
const inMidRegion = !inLowRegion && !inHighRegion;
|
|
25787
|
+
const optimumInLow = optimum < effectiveLow;
|
|
25788
|
+
const optimumInHigh = optimum > effectiveHigh;
|
|
25789
|
+
if (optimumInLow) {
|
|
25790
|
+
if (inLowRegion)
|
|
25791
|
+
return 'optimum';
|
|
25792
|
+
if (inMidRegion)
|
|
25793
|
+
return 'suboptimal';
|
|
25794
|
+
return 'critical';
|
|
25795
|
+
}
|
|
25796
|
+
else if (optimumInHigh) {
|
|
25797
|
+
if (inHighRegion)
|
|
25798
|
+
return 'optimum';
|
|
25799
|
+
if (inMidRegion)
|
|
25800
|
+
return 'suboptimal';
|
|
25801
|
+
return 'critical';
|
|
25802
|
+
}
|
|
25803
|
+
else {
|
|
25804
|
+
if (inMidRegion)
|
|
25805
|
+
return 'optimum';
|
|
25806
|
+
return 'suboptimal';
|
|
25807
|
+
}
|
|
25808
|
+
}
|
|
25809
|
+
const MeterFC = (props) => {
|
|
25810
|
+
const { high, label, low, liveValue, max, min, optimum, orientation, unit, value } = props;
|
|
25811
|
+
const isVertical = orientation === 'vertical';
|
|
25812
|
+
const isPercentage = unit === '%';
|
|
25813
|
+
const displayValue = isPercentage ? Math.round(((value - min) / (max - min)) * 100) : value;
|
|
25814
|
+
const liveMeterValue = isPercentage ? `${Math.round(((liveValue - min) / (max - min)) * 100)}` : liveValue;
|
|
25815
|
+
const valueColumnWidth = `${`${(isPercentage ? 100 : max) + 1}`.length}ch`;
|
|
25816
|
+
const fillPercentage = Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100));
|
|
25817
|
+
const state = getMeterState(value, min, max, low, high, optimum);
|
|
25818
|
+
const hasStateClassification = low !== undefined || high !== undefined;
|
|
25819
|
+
const stateLabel = hasStateClassification ? translate(`kol-meter-state-${state}`) : '';
|
|
25820
|
+
const liveValueText = isPercentage
|
|
25821
|
+
? translate('kol-live-value', { placeholders: { value: String(liveMeterValue), unit } })
|
|
25822
|
+
: translate('kol-live-value-bounded', { placeholders: { value: String(liveMeterValue), max: String(max), unit } });
|
|
25823
|
+
const liveValueWithState = hasStateClassification ? `${liveValueText} – ${stateLabel}` : liveValueText;
|
|
25824
|
+
const fillClass = {
|
|
25825
|
+
'kol-meter__bar-fill': true,
|
|
25826
|
+
'kol-meter__bar-fill--optimum': state === 'optimum',
|
|
25827
|
+
'kol-meter__bar-fill--suboptimal': state === 'suboptimal',
|
|
25828
|
+
'kol-meter__bar-fill--critical': state === 'critical',
|
|
25829
|
+
};
|
|
25830
|
+
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)));
|
|
25831
|
+
};
|
|
25832
|
+
|
|
25833
|
+
const meterPropsConfig = {
|
|
25834
|
+
optional: [minProp, orientationProp, unitProp],
|
|
25835
|
+
required: [labelProp, maxProp, numberValueProp],
|
|
25836
|
+
};
|
|
25837
|
+
|
|
25838
|
+
class MeterController extends BaseController {
|
|
25839
|
+
constructor(setState, getState) {
|
|
25840
|
+
super(meterPropsConfig, setState, getState);
|
|
25841
|
+
this.meterData = { high: undefined, low: undefined, optimum: undefined };
|
|
25842
|
+
}
|
|
25843
|
+
componentWillLoad(props) {
|
|
25844
|
+
const { high, label, low, max, min, optimum, orientation, unit, value } = props;
|
|
25845
|
+
this.watchHigh(high);
|
|
25846
|
+
this.watchLabel(label);
|
|
25847
|
+
this.watchLow(low);
|
|
25848
|
+
this.watchMax(max);
|
|
25849
|
+
this.watchMin(min);
|
|
25850
|
+
this.watchOptimum(optimum);
|
|
25851
|
+
this.watchOrientation(orientation);
|
|
25852
|
+
this.watchUnit(unit);
|
|
25853
|
+
this.watchValue(value);
|
|
25854
|
+
this.setState('liveValue', this.getRenderProp('value'));
|
|
25855
|
+
this.startLiveValueInterval();
|
|
25856
|
+
}
|
|
25857
|
+
destroy() {
|
|
25858
|
+
if (this.interval) {
|
|
25859
|
+
clearInterval(this.interval);
|
|
25860
|
+
this.interval = undefined;
|
|
25861
|
+
}
|
|
25862
|
+
}
|
|
25863
|
+
getMeterData() {
|
|
25864
|
+
return this.meterData;
|
|
25865
|
+
}
|
|
25866
|
+
watchHigh(value) {
|
|
25867
|
+
if (value === undefined) {
|
|
25868
|
+
this.meterData.high = undefined;
|
|
25869
|
+
}
|
|
25870
|
+
else {
|
|
25871
|
+
highProp.apply(value, (v) => {
|
|
25872
|
+
this.meterData.high = v;
|
|
25873
|
+
});
|
|
25874
|
+
}
|
|
25875
|
+
}
|
|
25876
|
+
watchLabel(value) {
|
|
25877
|
+
labelProp.apply(value, (v) => {
|
|
25878
|
+
this.setRenderProp('label', v);
|
|
25879
|
+
});
|
|
25880
|
+
}
|
|
25881
|
+
watchLow(value) {
|
|
25882
|
+
if (value === undefined) {
|
|
25883
|
+
this.meterData.low = undefined;
|
|
25884
|
+
}
|
|
25885
|
+
else {
|
|
25886
|
+
lowProp.apply(value, (v) => {
|
|
25887
|
+
this.meterData.low = v;
|
|
25888
|
+
});
|
|
25889
|
+
}
|
|
25890
|
+
}
|
|
25891
|
+
watchMax(value) {
|
|
25892
|
+
maxProp.apply(value, (v) => {
|
|
25893
|
+
this.setRenderProp('max', v);
|
|
25894
|
+
});
|
|
25895
|
+
}
|
|
25896
|
+
watchMin(value) {
|
|
25897
|
+
minProp.apply(value, (v) => {
|
|
25898
|
+
this.setRenderProp('min', v);
|
|
25899
|
+
});
|
|
25900
|
+
}
|
|
25901
|
+
watchOptimum(value) {
|
|
25902
|
+
if (value === undefined) {
|
|
25903
|
+
this.meterData.optimum = undefined;
|
|
25904
|
+
}
|
|
25905
|
+
else {
|
|
25906
|
+
optimumProp.apply(value, (v) => {
|
|
25907
|
+
this.meterData.optimum = v;
|
|
25908
|
+
});
|
|
25909
|
+
}
|
|
25910
|
+
}
|
|
25911
|
+
watchOrientation(value) {
|
|
25912
|
+
orientationProp.apply(value, (v) => {
|
|
25913
|
+
this.setRenderProp('orientation', v);
|
|
25914
|
+
});
|
|
25915
|
+
}
|
|
25916
|
+
watchUnit(value) {
|
|
25917
|
+
unitProp.apply(value, (v) => {
|
|
25918
|
+
this.setRenderProp('unit', v);
|
|
25919
|
+
});
|
|
25920
|
+
}
|
|
25921
|
+
watchValue(value) {
|
|
25922
|
+
numberValueProp.apply(value, (v) => {
|
|
25923
|
+
this.setRenderProp('value', v);
|
|
25924
|
+
});
|
|
25925
|
+
}
|
|
25926
|
+
startLiveValueInterval() {
|
|
25927
|
+
this.interval = setInterval(() => {
|
|
25928
|
+
const value = this.getRenderProp('value');
|
|
25929
|
+
if (this.getState('liveValue') !== value) {
|
|
25930
|
+
this.setState('liveValue', value);
|
|
25931
|
+
}
|
|
25932
|
+
}, 5000);
|
|
25933
|
+
}
|
|
25934
|
+
}
|
|
25935
|
+
|
|
25936
|
+
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}";
|
|
25937
|
+
|
|
25938
|
+
class KolMeter extends BaseWebComponent {
|
|
25939
|
+
constructor(hostRef) {
|
|
25940
|
+
super();
|
|
25941
|
+
registerInstance(this, hostRef);
|
|
25942
|
+
this.ctrl = new MeterController(this.setState, this.getState);
|
|
25943
|
+
this._orientation = 'horizontal';
|
|
25944
|
+
this._unit = '%';
|
|
25945
|
+
this.liveValue = 0;
|
|
25946
|
+
}
|
|
25947
|
+
watchHigh(value) {
|
|
25948
|
+
this.ctrl.watchHigh(value);
|
|
25949
|
+
}
|
|
25950
|
+
watchLabel(value) {
|
|
25951
|
+
this.ctrl.watchLabel(value);
|
|
25952
|
+
}
|
|
25953
|
+
watchLow(value) {
|
|
25954
|
+
this.ctrl.watchLow(value);
|
|
25955
|
+
}
|
|
25956
|
+
watchMax(value) {
|
|
25957
|
+
this.ctrl.watchMax(value);
|
|
25958
|
+
}
|
|
25959
|
+
watchMin(value) {
|
|
25960
|
+
this.ctrl.watchMin(value);
|
|
25961
|
+
}
|
|
25962
|
+
watchOptimum(value) {
|
|
25963
|
+
this.ctrl.watchOptimum(value);
|
|
25964
|
+
}
|
|
25965
|
+
watchOrientation(value) {
|
|
25966
|
+
this.ctrl.watchOrientation(value);
|
|
25967
|
+
}
|
|
25968
|
+
watchUnit(value) {
|
|
25969
|
+
this.ctrl.watchUnit(value);
|
|
25970
|
+
}
|
|
25971
|
+
watchValue(value) {
|
|
25972
|
+
this.ctrl.watchValue(value);
|
|
25973
|
+
}
|
|
25974
|
+
componentWillLoad() {
|
|
25975
|
+
this.ctrl.componentWillLoad({
|
|
25976
|
+
high: this._high,
|
|
25977
|
+
label: this._label,
|
|
25978
|
+
low: this._low,
|
|
25979
|
+
max: this._max,
|
|
25980
|
+
min: this._min,
|
|
25981
|
+
optimum: this._optimum,
|
|
25982
|
+
orientation: this._orientation,
|
|
25983
|
+
unit: this._unit,
|
|
25984
|
+
value: this._value,
|
|
25985
|
+
});
|
|
25986
|
+
}
|
|
25987
|
+
disconnectedCallback() {
|
|
25988
|
+
this.ctrl.destroy();
|
|
25989
|
+
}
|
|
25990
|
+
render() {
|
|
25991
|
+
const { high, low, optimum } = this.ctrl.getMeterData();
|
|
25992
|
+
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') })));
|
|
25993
|
+
}
|
|
25994
|
+
static get watchers() { return {
|
|
25995
|
+
"_high": ["watchHigh"],
|
|
25996
|
+
"_label": ["watchLabel"],
|
|
25997
|
+
"_low": ["watchLow"],
|
|
25998
|
+
"_max": ["watchMax"],
|
|
25999
|
+
"_min": ["watchMin"],
|
|
26000
|
+
"_optimum": ["watchOptimum"],
|
|
26001
|
+
"_orientation": ["watchOrientation"],
|
|
26002
|
+
"_unit": ["watchUnit"],
|
|
26003
|
+
"_value": ["watchValue"]
|
|
26004
|
+
}; }
|
|
26005
|
+
static get style() { return {
|
|
26006
|
+
default: defaultStyleCss$k
|
|
26007
|
+
}; }
|
|
26008
|
+
static get cmpMeta() { return {
|
|
26009
|
+
"$flags$": 809,
|
|
26010
|
+
"$tagName$": "kol-meter",
|
|
26011
|
+
"$members$": {
|
|
26012
|
+
"_high": [2],
|
|
26013
|
+
"_label": [1],
|
|
26014
|
+
"_low": [2],
|
|
26015
|
+
"_max": [2],
|
|
26016
|
+
"_min": [2],
|
|
26017
|
+
"_optimum": [2],
|
|
26018
|
+
"_orientation": [1],
|
|
26019
|
+
"_unit": [1],
|
|
26020
|
+
"_value": [2],
|
|
26021
|
+
"liveValue": [32]
|
|
26022
|
+
},
|
|
26023
|
+
"$listeners$": undefined,
|
|
26024
|
+
"$lazyBundleId$": "-",
|
|
26025
|
+
"$attrsToReflect$": []
|
|
26026
|
+
}; }
|
|
26027
|
+
}
|
|
26028
|
+
|
|
26029
|
+
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}";
|
|
25636
26030
|
|
|
25637
26031
|
class KolModal {
|
|
25638
26032
|
constructor(hostRef) {
|
|
@@ -25652,7 +26046,7 @@ class KolModal {
|
|
|
25652
26046
|
await ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.closeModal());
|
|
25653
26047
|
}
|
|
25654
26048
|
render() {
|
|
25655
|
-
return (hAsync(KolDialogWcTag, { key: '
|
|
26049
|
+
return (hAsync(KolDialogWcTag, { key: 'ce70e046e276bf6ace481d229f0dc2331ab8eda2', ref: this.catchRef, _label: this._label, _on: this._on, _variant: this._variant, _width: this._width }, hAsync("slot", { key: 'e5ac14e67acc40760de6b0cac1676d665a9229cf' })));
|
|
25656
26050
|
}
|
|
25657
26051
|
static get style() { return {
|
|
25658
26052
|
default: defaultStyleCss$j
|
|
@@ -25674,7 +26068,7 @@ class KolModal {
|
|
|
25674
26068
|
}; }
|
|
25675
26069
|
}
|
|
25676
26070
|
|
|
25677
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
26071
|
+
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}";
|
|
25678
26072
|
|
|
25679
26073
|
const entryIsLink = (entryProps) => {
|
|
25680
26074
|
return typeof entryProps._href === 'string';
|
|
@@ -25803,9 +26197,9 @@ class KolNav {
|
|
|
25803
26197
|
}
|
|
25804
26198
|
render() {
|
|
25805
26199
|
const collapsible = this.state._collapsible === true;
|
|
25806
|
-
return (hAsync("div", { key: '
|
|
26200
|
+
return (hAsync("div", { key: '2e22ff07a354fe98d90e00a371ca70f04f942d65', class: clsx('kol-nav', {
|
|
25807
26201
|
'kol-nav--is-compact': this.state._hideLabel,
|
|
25808
|
-
}) }, hAsync("nav", { key: '
|
|
26202
|
+
}) }, 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: {
|
|
25809
26203
|
onClick: () => {
|
|
25810
26204
|
this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: !this.state._hideLabel });
|
|
25811
26205
|
},
|
|
@@ -25879,7 +26273,7 @@ class KolNav {
|
|
|
25879
26273
|
}; }
|
|
25880
26274
|
}
|
|
25881
26275
|
|
|
25882
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
26276
|
+
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}";
|
|
25883
26277
|
|
|
25884
26278
|
class KolPagination {
|
|
25885
26279
|
constructor(hostRef) {
|
|
@@ -25892,7 +26286,7 @@ class KolPagination {
|
|
|
25892
26286
|
this._tooltipAlign = 'top';
|
|
25893
26287
|
}
|
|
25894
26288
|
render() {
|
|
25895
|
-
return (hAsync(KolPaginationWcTag, { key: '
|
|
26289
|
+
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 }));
|
|
25896
26290
|
}
|
|
25897
26291
|
static get style() { return {
|
|
25898
26292
|
default: defaultStyleCss$h
|
|
@@ -26288,7 +26682,7 @@ class KolPaginationWc {
|
|
|
26288
26682
|
}; }
|
|
26289
26683
|
}
|
|
26290
26684
|
|
|
26291
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
26685
|
+
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}";
|
|
26292
26686
|
|
|
26293
26687
|
class KolPopoverButton {
|
|
26294
26688
|
constructor(hostRef) {
|
|
@@ -26312,11 +26706,14 @@ class KolPopoverButton {
|
|
|
26312
26706
|
var _a;
|
|
26313
26707
|
void ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.showPopover());
|
|
26314
26708
|
}
|
|
26709
|
+
async click() {
|
|
26710
|
+
return delegateClick(this.host, async () => setClick(this.ref));
|
|
26711
|
+
}
|
|
26315
26712
|
async focus() {
|
|
26316
26713
|
return delegateFocus(this.host, () => setFocus(this.ref));
|
|
26317
26714
|
}
|
|
26318
26715
|
render() {
|
|
26319
|
-
return (hAsync(KolPopoverButtonWcTag, { key: '
|
|
26716
|
+
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' })));
|
|
26320
26717
|
}
|
|
26321
26718
|
get host() { return getElement(this); }
|
|
26322
26719
|
static get style() { return {
|
|
@@ -26345,6 +26742,7 @@ class KolPopoverButton {
|
|
|
26345
26742
|
"_variant": [1],
|
|
26346
26743
|
"hidePopover": [64],
|
|
26347
26744
|
"showPopover": [64],
|
|
26745
|
+
"click": [64],
|
|
26348
26746
|
"focus": [64]
|
|
26349
26747
|
},
|
|
26350
26748
|
"$listeners$": undefined,
|
|
@@ -28151,12 +28549,15 @@ class KolPopoverButtonWc {
|
|
|
28151
28549
|
async focus() {
|
|
28152
28550
|
return setFocus(this.refButton);
|
|
28153
28551
|
}
|
|
28552
|
+
async click() {
|
|
28553
|
+
return setClick(this.refButton);
|
|
28554
|
+
}
|
|
28154
28555
|
render() {
|
|
28155
|
-
return (hAsync(Fragment, null, hAsync(KolButtonWcTag, { key: '
|
|
28556
|
+
return (hAsync(Fragment, null, hAsync(KolButtonWcTag, { key: 'bf0b395eff7f471873908ae2ca492ad4fc829ffe', class: clsx('kol-popover-button', {
|
|
28156
28557
|
'kol-popover-button--open': this.popoverOpen,
|
|
28157
28558
|
'kol-popover-button--inline': this.state._inline === true,
|
|
28158
28559
|
'kol-popover-button--standalone': this.state._inline === false,
|
|
28159
|
-
}), _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: '
|
|
28560
|
+
}), _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' }))));
|
|
28160
28561
|
}
|
|
28161
28562
|
validateInline(value) {
|
|
28162
28563
|
validateInline(this, value, {
|
|
@@ -28218,7 +28619,8 @@ class KolPopoverButtonWc {
|
|
|
28218
28619
|
"popoverOpen": [32],
|
|
28219
28620
|
"hidePopover": [64],
|
|
28220
28621
|
"showPopover": [64],
|
|
28221
|
-
"focus": [64]
|
|
28622
|
+
"focus": [64],
|
|
28623
|
+
"click": [64]
|
|
28222
28624
|
},
|
|
28223
28625
|
"$listeners$": undefined,
|
|
28224
28626
|
"$lazyBundleId$": "-",
|
|
@@ -28248,10 +28650,13 @@ const ProgressFC = (props) => {
|
|
|
28248
28650
|
const liveProgressValue = isPercentage ? `${Math.round((liveValue / max) * 100)}` : liveValue;
|
|
28249
28651
|
const displayValue = isPercentage ? Math.round((value / max) * 100) : value;
|
|
28250
28652
|
const valueColumnWidth = `${`${(isPercentage ? 100 : max) + 1}`.length}ch`;
|
|
28653
|
+
const liveValueText = isPercentage
|
|
28654
|
+
? translate('kol-live-value', { placeholders: { value: String(liveProgressValue), unit } })
|
|
28655
|
+
: translate('kol-live-value-bounded', { placeholders: { value: String(liveProgressValue), max: String(max), unit } });
|
|
28251
28656
|
return (hAsync("div", { class: "kol-progress" }, hAsync("div", { "aria-hidden": "true", class: {
|
|
28252
28657
|
'kol-progress__cycle': variant === 'cycle',
|
|
28253
28658
|
'kol-progress__bar': variant === 'bar',
|
|
28254
|
-
} }, 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" },
|
|
28659
|
+
} }, 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)));
|
|
28255
28660
|
};
|
|
28256
28661
|
|
|
28257
28662
|
const progressPropsConfig = {
|
|
@@ -28351,7 +28756,7 @@ class KolProgress extends BaseWebComponent {
|
|
|
28351
28756
|
this.ctrl.destroy();
|
|
28352
28757
|
}
|
|
28353
28758
|
render() {
|
|
28354
|
-
return (hAsync(Host, { key: '
|
|
28759
|
+
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 })));
|
|
28355
28760
|
}
|
|
28356
28761
|
static get watchers() { return {
|
|
28357
28762
|
"_label": ["watchLabel"],
|
|
@@ -28460,7 +28865,7 @@ class KolQuote extends BaseWebComponent {
|
|
|
28460
28865
|
});
|
|
28461
28866
|
}
|
|
28462
28867
|
render() {
|
|
28463
|
-
return (hAsync(Host, { key: '
|
|
28868
|
+
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') })));
|
|
28464
28869
|
}
|
|
28465
28870
|
static get watchers() { return {
|
|
28466
28871
|
"_href": ["watchHref"],
|
|
@@ -28486,7 +28891,7 @@ class KolQuote extends BaseWebComponent {
|
|
|
28486
28891
|
}; }
|
|
28487
28892
|
}
|
|
28488
28893
|
|
|
28489
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
28894
|
+
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}";
|
|
28490
28895
|
|
|
28491
28896
|
class KolSelect {
|
|
28492
28897
|
constructor(hostRef) {
|
|
@@ -28511,7 +28916,7 @@ class KolSelect {
|
|
|
28511
28916
|
return delegateFocus(this.host, () => setFocus(this.selectWcRef));
|
|
28512
28917
|
}
|
|
28513
28918
|
render() {
|
|
28514
|
-
return (hAsync(Host, { key: '
|
|
28919
|
+
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" }))));
|
|
28515
28920
|
}
|
|
28516
28921
|
get host() { return getElement(this); }
|
|
28517
28922
|
static get style() { return {
|
|
@@ -28748,6 +29153,9 @@ class KolSelectWc {
|
|
|
28748
29153
|
async focus() {
|
|
28749
29154
|
return setFocus(this.selectRef);
|
|
28750
29155
|
}
|
|
29156
|
+
async click() {
|
|
29157
|
+
return setClick(this.selectRef);
|
|
29158
|
+
}
|
|
28751
29159
|
getFormFieldProps() {
|
|
28752
29160
|
return {
|
|
28753
29161
|
state: this.state,
|
|
@@ -28769,11 +29177,11 @@ class KolSelectWc {
|
|
|
28769
29177
|
} });
|
|
28770
29178
|
}
|
|
28771
29179
|
render() {
|
|
28772
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
29180
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '3fc2b6d268b2640aaf3e91d3f569bf93b58c29a5' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '47aa91ce8d716c5f059100af5c1ab72f4ab4874a', state: this.state }, hAsync("form", { key: '20a87211d41a108d0ac230d700c216214743ec0e', onSubmit: (event) => {
|
|
28773
29181
|
event.preventDefault();
|
|
28774
29182
|
propagateSubmitEventToForm({
|
|
28775
29183
|
form: this.host});
|
|
28776
|
-
} }, hAsync("input", { key: '
|
|
29184
|
+
} }, hAsync("input", { key: '29a1823766e9ecc407aa171178767906b9e55e01', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: '911fe5af4451556609ae31e05a3be97187bf3b2a' }, this.getSelectProps()))))));
|
|
28777
29185
|
}
|
|
28778
29186
|
constructor(hostRef) {
|
|
28779
29187
|
registerInstance(this, hostRef);
|
|
@@ -28938,7 +29346,8 @@ class KolSelectWc {
|
|
|
28938
29346
|
"state": [32],
|
|
28939
29347
|
"inputHasFocus": [32],
|
|
28940
29348
|
"getValue": [64],
|
|
28941
|
-
"focus": [64]
|
|
29349
|
+
"focus": [64],
|
|
29350
|
+
"click": [64]
|
|
28942
29351
|
},
|
|
28943
29352
|
"$listeners$": undefined,
|
|
28944
29353
|
"$lazyBundleId$": "-",
|
|
@@ -28998,7 +29407,7 @@ class SingleSelectController extends InputIconController {
|
|
|
28998
29407
|
}
|
|
28999
29408
|
}
|
|
29000
29409
|
|
|
29001
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
29410
|
+
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}";
|
|
29002
29411
|
|
|
29003
29412
|
class KolSingleSelect {
|
|
29004
29413
|
async getValue() {
|
|
@@ -29177,15 +29586,15 @@ class KolSingleSelect {
|
|
|
29177
29586
|
render() {
|
|
29178
29587
|
var _a;
|
|
29179
29588
|
const isDisabled = this.state._disabled === true;
|
|
29180
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
29589
|
+
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: {
|
|
29181
29590
|
onClick: () => {
|
|
29182
29591
|
var _a;
|
|
29183
29592
|
this.clearSelection();
|
|
29184
29593
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
29185
29594
|
},
|
|
29186
|
-
} })), hAsync(IconFC, { key: '
|
|
29595
|
+
} })), hAsync(IconFC, { key: '3e8f860cb6dde2f3bdf8904cd318a4048432ab24', icons: "kolicon-chevron-down", label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
29187
29596
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
29188
|
-
}), onClick: this.toggleListbox.bind(this) })), hAsync(CustomSuggestionsOptionsGroupFc, { key: '
|
|
29597
|
+
}), 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) => {
|
|
29189
29598
|
if (el)
|
|
29190
29599
|
this.refOptions[index] = el;
|
|
29191
29600
|
}, selected: this._value === option.value, disabled: option.disabled ? true : false, onClick: (event) => {
|
|
@@ -29654,7 +30063,7 @@ class KolSkeleton extends BaseWebComponent {
|
|
|
29654
30063
|
this.ctrl.destroy();
|
|
29655
30064
|
}
|
|
29656
30065
|
render() {
|
|
29657
|
-
return (hAsync(Host, { key: '
|
|
30066
|
+
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) })));
|
|
29658
30067
|
}
|
|
29659
30068
|
static get watchers() { return {
|
|
29660
30069
|
"_name": ["watchName"]
|
|
@@ -29676,7 +30085,7 @@ class KolSkeleton extends BaseWebComponent {
|
|
|
29676
30085
|
}; }
|
|
29677
30086
|
}
|
|
29678
30087
|
|
|
29679
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
30088
|
+
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}";
|
|
29680
30089
|
|
|
29681
30090
|
class KolSkipNav {
|
|
29682
30091
|
constructor(hostRef) {
|
|
@@ -29687,7 +30096,7 @@ class KolSkipNav {
|
|
|
29687
30096
|
};
|
|
29688
30097
|
}
|
|
29689
30098
|
render() {
|
|
29690
|
-
return (hAsync("nav", { key: '
|
|
30099
|
+
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) => {
|
|
29691
30100
|
return (hAsync("li", { class: "kol-skip-nav__list-item", key: index }, hAsync(KolLinkWcTag, Object.assign({}, link, { ref: index === 0 ? (el) => (this.firstLinkRef = el) : undefined }))));
|
|
29692
30101
|
}))));
|
|
29693
30102
|
}
|
|
@@ -29763,7 +30172,7 @@ class KolSpin {
|
|
|
29763
30172
|
}
|
|
29764
30173
|
render() {
|
|
29765
30174
|
var _a, _b;
|
|
29766
|
-
return (hAsync(Host, { key: '
|
|
30175
|
+
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)))));
|
|
29767
30176
|
}
|
|
29768
30177
|
validateShow(value) {
|
|
29769
30178
|
this.showToggled = this.state._show === true && this._show === false;
|
|
@@ -29803,7 +30212,7 @@ class KolSpin {
|
|
|
29803
30212
|
}; }
|
|
29804
30213
|
}
|
|
29805
30214
|
|
|
29806
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
30215
|
+
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}";
|
|
29807
30216
|
|
|
29808
30217
|
class KolSplitButton {
|
|
29809
30218
|
constructor(hostRef) {
|
|
@@ -29838,12 +30247,15 @@ class KolSplitButton {
|
|
|
29838
30247
|
async focus() {
|
|
29839
30248
|
return delegateFocus(this.host, () => setFocus(this.primaryButtonWcRef));
|
|
29840
30249
|
}
|
|
30250
|
+
async click() {
|
|
30251
|
+
return delegateClick(this.host, async () => setClick(this.primaryButtonWcRef));
|
|
30252
|
+
}
|
|
29841
30253
|
render() {
|
|
29842
30254
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
29843
|
-
return (hAsync("div", { key: '
|
|
30255
|
+
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', {
|
|
29844
30256
|
[this._variant]: this._variant !== 'custom',
|
|
29845
30257
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
29846
|
-
}), 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: '
|
|
30258
|
+
}), 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' })))));
|
|
29847
30259
|
}
|
|
29848
30260
|
connectedCallback() {
|
|
29849
30261
|
this.state = Object.assign(Object.assign({}, this.state), { _show: false });
|
|
@@ -29883,6 +30295,7 @@ class KolSplitButton {
|
|
|
29883
30295
|
"state": [32],
|
|
29884
30296
|
"getValue": [64],
|
|
29885
30297
|
"focus": [64],
|
|
30298
|
+
"click": [64],
|
|
29886
30299
|
"closePopup": [64]
|
|
29887
30300
|
},
|
|
29888
30301
|
"$listeners$": undefined,
|
|
@@ -29989,7 +30402,7 @@ class KolTableSettings {
|
|
|
29989
30402
|
}
|
|
29990
30403
|
render() {
|
|
29991
30404
|
const columns = this.getPrimaryRow();
|
|
29992
|
-
return (hAsync(KolPopoverButtonWcTag, { key: '
|
|
30405
|
+
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" }))))));
|
|
29993
30406
|
}
|
|
29994
30407
|
get host() { return getElement(this); }
|
|
29995
30408
|
static get watchers() { return {
|
|
@@ -30048,7 +30461,7 @@ var KeyboardKey;
|
|
|
30048
30461
|
KeyboardKey["Space"] = " ";
|
|
30049
30462
|
})(KeyboardKey || (KeyboardKey = {}));
|
|
30050
30463
|
|
|
30051
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
30464
|
+
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}";
|
|
30052
30465
|
|
|
30053
30466
|
const PAGINATION_OPTIONS = [10, 20, 50, 100];
|
|
30054
30467
|
const paginationValidator = (value) => value === true || value === '' || (typeof value === 'object' && value !== null);
|
|
@@ -30383,7 +30796,7 @@ class KolTableStateful {
|
|
|
30383
30796
|
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 : [],
|
|
30384
30797
|
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 : [],
|
|
30385
30798
|
};
|
|
30386
|
-
return (hAsync(Host, { key: '
|
|
30799
|
+
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: {
|
|
30387
30800
|
onSort: (_, payload) => {
|
|
30388
30801
|
this.handleSort(payload);
|
|
30389
30802
|
},
|
|
@@ -30433,14 +30846,14 @@ class KolTableStateful {
|
|
|
30433
30846
|
}; }
|
|
30434
30847
|
}
|
|
30435
30848
|
|
|
30436
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
30849
|
+
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}";
|
|
30437
30850
|
|
|
30438
30851
|
class KolTableStateless {
|
|
30439
30852
|
constructor(hostRef) {
|
|
30440
30853
|
registerInstance(this, hostRef);
|
|
30441
30854
|
}
|
|
30442
30855
|
render() {
|
|
30443
|
-
return (hAsync(KolTableStatelessWcTag, { key: '
|
|
30856
|
+
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 }));
|
|
30444
30857
|
}
|
|
30445
30858
|
static get style() { return {
|
|
30446
30859
|
default: defaultStyleCss$7
|
|
@@ -31172,12 +31585,12 @@ class KolTableStatelessWc {
|
|
|
31172
31585
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
31173
31586
|
this.checkboxRefs = [];
|
|
31174
31587
|
const horizontalHeaders = this.state._headerCells.horizontal;
|
|
31175
|
-
return (hAsync("div", { key: '
|
|
31588
|
+
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: {
|
|
31176
31589
|
minWidth: this.getTableMinWidth(),
|
|
31177
|
-
} }, hAsync("caption", { key: '
|
|
31590
|
+
} }, 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" }, [
|
|
31178
31591
|
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))))),
|
|
31179
31592
|
this.renderSpacer('head', horizontalHeaders),
|
|
31180
|
-
])), hAsync("tbody", { key: '
|
|
31593
|
+
])), hAsync("tbody", { key: '886d2015fd87cabb5b9007db6c9f0e0a11c316ad', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
|
|
31181
31594
|
}
|
|
31182
31595
|
get host() { return getElement(this); }
|
|
31183
31596
|
static get watchers() { return {
|
|
@@ -31217,7 +31630,7 @@ const validateHasCreateButton = (component, value) => {
|
|
|
31217
31630
|
watchBoolean(component, '_hasCreateButton', value);
|
|
31218
31631
|
};
|
|
31219
31632
|
|
|
31220
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
31633
|
+
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}";
|
|
31221
31634
|
|
|
31222
31635
|
class KolTabs {
|
|
31223
31636
|
constructor(hostRef) {
|
|
@@ -31418,15 +31831,18 @@ class KolTabs {
|
|
|
31418
31831
|
async focus() {
|
|
31419
31832
|
return delegateFocus(this.host, () => setFocus(this.currentTabButtonRef));
|
|
31420
31833
|
}
|
|
31834
|
+
async click() {
|
|
31835
|
+
return delegateClick(this.host, async () => setClick(this.currentTabButtonRef));
|
|
31836
|
+
}
|
|
31421
31837
|
renderButtonGroup() {
|
|
31422
31838
|
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: {
|
|
31423
31839
|
onClick: this.onCreate,
|
|
31424
31840
|
}, _icons: "kolicon-plus", "data-testid": "tabs-create-button" }))));
|
|
31425
31841
|
}
|
|
31426
31842
|
render() {
|
|
31427
|
-
return (hAsync("div", { key: '
|
|
31843
|
+
return (hAsync("div", { key: 'd0701dd651b03711efdfd47ac4b39e2124c9d1e8', ref: (el) => {
|
|
31428
31844
|
this.tabPanelsElement = el;
|
|
31429
|
-
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
31845
|
+
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '9b6e4696775d053d34627eceef408a4bfd1f0e47', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
|
|
31430
31846
|
}
|
|
31431
31847
|
validateAlign(value) {
|
|
31432
31848
|
validateAlign(this, value);
|
|
@@ -31521,7 +31937,8 @@ class KolTabs {
|
|
|
31521
31937
|
"_selected": [1538],
|
|
31522
31938
|
"_tabs": [1],
|
|
31523
31939
|
"state": [32],
|
|
31524
|
-
"focus": [64]
|
|
31940
|
+
"focus": [64],
|
|
31941
|
+
"click": [64]
|
|
31525
31942
|
},
|
|
31526
31943
|
"$listeners$": undefined,
|
|
31527
31944
|
"$lazyBundleId$": "-",
|
|
@@ -31609,7 +32026,7 @@ class TextareaController extends InputIconController {
|
|
|
31609
32026
|
}
|
|
31610
32027
|
}
|
|
31611
32028
|
|
|
31612
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
32029
|
+
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}";
|
|
31613
32030
|
|
|
31614
32031
|
const increaseTextareaHeight = (el) => {
|
|
31615
32032
|
el.style.overflow = 'hidden';
|
|
@@ -31628,6 +32045,9 @@ class KolTextarea {
|
|
|
31628
32045
|
async focus() {
|
|
31629
32046
|
return delegateFocus(this.host, () => setFocus(this.textareaRef));
|
|
31630
32047
|
}
|
|
32048
|
+
async click() {
|
|
32049
|
+
return delegateClick(this.host, async () => setClick(this.textareaRef));
|
|
32050
|
+
}
|
|
31631
32051
|
getFormFieldProps() {
|
|
31632
32052
|
return {
|
|
31633
32053
|
state: this.state,
|
|
@@ -31652,7 +32072,7 @@ class KolTextarea {
|
|
|
31652
32072
|
} });
|
|
31653
32073
|
}
|
|
31654
32074
|
render() {
|
|
31655
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
32075
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'eb307b0c54debc8c4abad8361a2c07dac3e7022c' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '4bdcce3df35393c53b0e96c1e791d2c3585cd376', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: 'd08ca76c854a6b6eaa5d9e9deac5a1268cdf13ae' }, this.getTextAreaProps())))));
|
|
31656
32076
|
}
|
|
31657
32077
|
constructor(hostRef) {
|
|
31658
32078
|
registerInstance(this, hostRef);
|
|
@@ -31848,7 +32268,8 @@ class KolTextarea {
|
|
|
31848
32268
|
"state": [32],
|
|
31849
32269
|
"inputHasFocus": [32],
|
|
31850
32270
|
"getValue": [64],
|
|
31851
|
-
"focus": [64]
|
|
32271
|
+
"focus": [64],
|
|
32272
|
+
"click": [64]
|
|
31852
32273
|
},
|
|
31853
32274
|
"$listeners$": undefined,
|
|
31854
32275
|
"$lazyBundleId$": "-",
|
|
@@ -31856,7 +32277,7 @@ class KolTextarea {
|
|
|
31856
32277
|
}; }
|
|
31857
32278
|
}
|
|
31858
32279
|
|
|
31859
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
32280
|
+
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}";
|
|
31860
32281
|
|
|
31861
32282
|
const TRANSITION_TIMEOUT = 300;
|
|
31862
32283
|
class KolToastContainer {
|
|
@@ -31919,7 +32340,7 @@ class KolToastContainer {
|
|
|
31919
32340
|
}
|
|
31920
32341
|
}
|
|
31921
32342
|
render() {
|
|
31922
|
-
return (hAsync(Host, { key: '
|
|
32343
|
+
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: {
|
|
31923
32344
|
onClick: () => {
|
|
31924
32345
|
void this.closeAll();
|
|
31925
32346
|
},
|
|
@@ -31942,7 +32363,7 @@ class KolToastContainer {
|
|
|
31942
32363
|
}; }
|
|
31943
32364
|
}
|
|
31944
32365
|
|
|
31945
|
-
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=1774621104972\"); /* IE9*/\n src: url(\"kolicons.eot?t=1774621104972#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1774621104972\") format(\"woff2\"), url(\"kolicons.woff?t=1774621104972\") format(\"woff\"), url(\"kolicons.ttf?t=1774621104972\") format(\"truetype\"), url(\"kolicons.svg?t=1774621104972#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}";
|
|
32366
|
+
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}";
|
|
31946
32367
|
|
|
31947
32368
|
class KolToolbar {
|
|
31948
32369
|
constructor(hostRef) {
|
|
@@ -31975,12 +32396,18 @@ class KolToolbar {
|
|
|
31975
32396
|
return delegateFocus(this.host, () => setFocus(firstEnabledItem));
|
|
31976
32397
|
}
|
|
31977
32398
|
}
|
|
32399
|
+
async click() {
|
|
32400
|
+
const currentItem = this.indexToElement.get(this.currentIndex);
|
|
32401
|
+
if (currentItem) {
|
|
32402
|
+
return delegateClick(this.host, async () => setClick(currentItem));
|
|
32403
|
+
}
|
|
32404
|
+
}
|
|
31978
32405
|
normalizeItem(item) {
|
|
31979
32406
|
const { _icons, _disabled } = item, rest = __rest(item, ["_icons", "_disabled"]);
|
|
31980
32407
|
return Object.assign(Object.assign({}, rest), { _icons, _disabled });
|
|
31981
32408
|
}
|
|
31982
32409
|
render() {
|
|
31983
|
-
return (hAsync("div", { key: '
|
|
32410
|
+
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)));
|
|
31984
32411
|
}
|
|
31985
32412
|
validateLabel(value) {
|
|
31986
32413
|
validateLabel(this, value);
|
|
@@ -32060,7 +32487,8 @@ class KolToolbar {
|
|
|
32060
32487
|
"_orientation": [1],
|
|
32061
32488
|
"state": [32],
|
|
32062
32489
|
"currentIndex": [32],
|
|
32063
|
-
"focus": [64]
|
|
32490
|
+
"focus": [64],
|
|
32491
|
+
"click": [64]
|
|
32064
32492
|
},
|
|
32065
32493
|
"$listeners$": [[0, "keydown", "handleKeyDown"], [2, "blur", "handleBlur"]],
|
|
32066
32494
|
"$lazyBundleId$": "-",
|
|
@@ -32227,7 +32655,7 @@ class KolTooltipWc {
|
|
|
32227
32655
|
this.showOrHideTooltip();
|
|
32228
32656
|
}
|
|
32229
32657
|
render() {
|
|
32230
|
-
return (hAsync(Host, { key: '
|
|
32658
|
+
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 }))));
|
|
32231
32659
|
}
|
|
32232
32660
|
validateBadgeText(value) {
|
|
32233
32661
|
validateBadgeText(this, value);
|
|
@@ -32311,7 +32739,7 @@ class KolTree {
|
|
|
32311
32739
|
return delegateFocus(this.host, () => setFocus(this.treeWcRef));
|
|
32312
32740
|
}
|
|
32313
32741
|
render() {
|
|
32314
|
-
return (hAsync(KolTreeWcTag, { key: '
|
|
32742
|
+
return (hAsync(KolTreeWcTag, { key: '7949f9ffc416ad89da8bf7d1f38d0120c8db4676', _label: this._label, ref: this.setTreeWcRef }, hAsync("slot", { key: 'bd820a08b5ce3e434d4fdea624263cacee6dcc1f' })));
|
|
32315
32743
|
}
|
|
32316
32744
|
get host() { return getElement(this); }
|
|
32317
32745
|
static get style() { return {
|
|
@@ -32330,7 +32758,7 @@ class KolTree {
|
|
|
32330
32758
|
}; }
|
|
32331
32759
|
}
|
|
32332
32760
|
|
|
32333
|
-
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=
|
|
32761
|
+
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}";
|
|
32334
32762
|
|
|
32335
32763
|
class KolTreeItem {
|
|
32336
32764
|
constructor(hostRef) {
|
|
@@ -32353,7 +32781,7 @@ class KolTreeItem {
|
|
|
32353
32781
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
32354
32782
|
}
|
|
32355
32783
|
render() {
|
|
32356
|
-
return (hAsync(KolTreeItemWcTag, { key: '
|
|
32784
|
+
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' })));
|
|
32357
32785
|
}
|
|
32358
32786
|
static get style() { return {
|
|
32359
32787
|
default: defaultStyleCss$1
|
|
@@ -32391,12 +32819,12 @@ class KolTreeItemWc {
|
|
|
32391
32819
|
}
|
|
32392
32820
|
render() {
|
|
32393
32821
|
const { _href, _active, _hasChildren, _open, _label } = this.state;
|
|
32394
|
-
return (hAsync(Host, { key: '
|
|
32822
|
+
return (hAsync(Host, { key: '57ffd0dde1ba35fc04f9d9525b8956f4765f546d', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { key: 'c237a29c538f37cc2335ab2a78077132efe506b3', class: "kol-tree-item", style: {
|
|
32395
32823
|
'--level': `${this.level}`,
|
|
32396
|
-
} }, hAsync(KolLinkWcTag, { key: '
|
|
32824
|
+
} }, hAsync(KolLinkWcTag, { key: '4a9f4686ef4d6179adaef9221b6e254de5f0f07d', class: clsx('kol-tree-item__link', {
|
|
32397
32825
|
'kol-tree-item__link--first-level': this.level === 0,
|
|
32398
32826
|
'kol-tree-item__link--active': _active,
|
|
32399
|
-
}), _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: '
|
|
32827
|
+
}), _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' })))));
|
|
32400
32828
|
}
|
|
32401
32829
|
validateActive(value) {
|
|
32402
32830
|
validateActive(this, value || false);
|
|
@@ -32540,7 +32968,7 @@ class KolTreeWc {
|
|
|
32540
32968
|
await Promise.resolve((this.cacheValid = false));
|
|
32541
32969
|
}
|
|
32542
32970
|
render() {
|
|
32543
|
-
return (hAsync(Host, { key: '
|
|
32971
|
+
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' })))));
|
|
32544
32972
|
}
|
|
32545
32973
|
static isTreeItem(element) {
|
|
32546
32974
|
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
|
@@ -32771,7 +33199,7 @@ class KolVersion {
|
|
|
32771
33199
|
};
|
|
32772
33200
|
}
|
|
32773
33201
|
render() {
|
|
32774
|
-
return (hAsync(Host, { key: '
|
|
33202
|
+
return (hAsync(Host, { key: '0b06b2307b6f09bccf41a83a26837e065749ca54', class: "kol-version" }, hAsync(KolBadgeTag, { key: '104ef2aaa3bb71a96fd5740d105fd4f1a9824b51', _color: "#bec5c9", _icons: {
|
|
32775
33203
|
left: { icon: 'kolicon-version', label: this.translateVersion },
|
|
32776
33204
|
}, _label: this.state._label })));
|
|
32777
33205
|
}
|
|
@@ -32853,6 +33281,7 @@ registerComponents([
|
|
|
32853
33281
|
KolLink,
|
|
32854
33282
|
KolLinkButton,
|
|
32855
33283
|
KolLinkWc,
|
|
33284
|
+
KolMeter,
|
|
32856
33285
|
KolModal,
|
|
32857
33286
|
KolNav,
|
|
32858
33287
|
KolPagination,
|