@public-ui/hydrate 4.0.0-beta.0 → 4.0.0-ee1678914efc9a51fdc688bac71b570e768a8032.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +566 -469
- package/dist/index.mjs +566 -469
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -146,7 +146,7 @@ function _mergeNamespaces(n, m) {
|
|
|
146
146
|
|
|
147
147
|
const NAMESPACE = 'kolibri';
|
|
148
148
|
const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
|
|
149
|
-
const Env = /* kolibri */ {"kolibriVersion":"4.0.0-
|
|
149
|
+
const Env = /* kolibri */ {"kolibriVersion":"4.0.0-ee1678914efc9a51fdc688bac71b570e768a8032.0"};
|
|
150
150
|
|
|
151
151
|
function getDefaultExportFromCjs (x) {
|
|
152
152
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
@@ -576,47 +576,48 @@ var TagEnum;
|
|
|
576
576
|
TagEnum[TagEnum["card"] = 8] = "card";
|
|
577
577
|
TagEnum[TagEnum["combobox"] = 9] = "combobox";
|
|
578
578
|
TagEnum[TagEnum["details"] = 10] = "details";
|
|
579
|
-
TagEnum[TagEnum["
|
|
580
|
-
TagEnum[TagEnum["
|
|
581
|
-
TagEnum[TagEnum["
|
|
582
|
-
TagEnum[TagEnum["
|
|
583
|
-
TagEnum[TagEnum["
|
|
584
|
-
TagEnum[TagEnum["
|
|
585
|
-
TagEnum[TagEnum["input-
|
|
586
|
-
TagEnum[TagEnum["input-
|
|
587
|
-
TagEnum[TagEnum["input-
|
|
588
|
-
TagEnum[TagEnum["input-
|
|
589
|
-
TagEnum[TagEnum["input-
|
|
590
|
-
TagEnum[TagEnum["input-
|
|
591
|
-
TagEnum[TagEnum["input-
|
|
592
|
-
TagEnum[TagEnum["input-
|
|
593
|
-
TagEnum[TagEnum["input-
|
|
594
|
-
TagEnum[TagEnum["
|
|
595
|
-
TagEnum[TagEnum["
|
|
596
|
-
TagEnum[TagEnum["link
|
|
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["
|
|
611
|
-
TagEnum[TagEnum["table
|
|
612
|
-
TagEnum[TagEnum["table-
|
|
613
|
-
TagEnum[TagEnum["
|
|
614
|
-
TagEnum[TagEnum["
|
|
615
|
-
TagEnum[TagEnum["
|
|
616
|
-
TagEnum[TagEnum["
|
|
617
|
-
TagEnum[TagEnum["
|
|
618
|
-
TagEnum[TagEnum["
|
|
619
|
-
TagEnum[TagEnum["tree
|
|
579
|
+
TagEnum[TagEnum["dialog"] = 11] = "dialog";
|
|
580
|
+
TagEnum[TagEnum["drawer"] = 12] = "drawer";
|
|
581
|
+
TagEnum[TagEnum["form"] = 13] = "form";
|
|
582
|
+
TagEnum[TagEnum["heading"] = 14] = "heading";
|
|
583
|
+
TagEnum[TagEnum["icon"] = 15] = "icon";
|
|
584
|
+
TagEnum[TagEnum["image"] = 16] = "image";
|
|
585
|
+
TagEnum[TagEnum["input-checkbox"] = 17] = "input-checkbox";
|
|
586
|
+
TagEnum[TagEnum["input-color"] = 18] = "input-color";
|
|
587
|
+
TagEnum[TagEnum["input-date"] = 19] = "input-date";
|
|
588
|
+
TagEnum[TagEnum["input-email"] = 20] = "input-email";
|
|
589
|
+
TagEnum[TagEnum["input-file"] = 21] = "input-file";
|
|
590
|
+
TagEnum[TagEnum["input-number"] = 22] = "input-number";
|
|
591
|
+
TagEnum[TagEnum["input-password"] = 23] = "input-password";
|
|
592
|
+
TagEnum[TagEnum["input-radio"] = 24] = "input-radio";
|
|
593
|
+
TagEnum[TagEnum["input-range"] = 25] = "input-range";
|
|
594
|
+
TagEnum[TagEnum["input-text"] = 26] = "input-text";
|
|
595
|
+
TagEnum[TagEnum["kolibri"] = 27] = "kolibri";
|
|
596
|
+
TagEnum[TagEnum["link"] = 28] = "link";
|
|
597
|
+
TagEnum[TagEnum["link-button"] = 29] = "link-button";
|
|
598
|
+
TagEnum[TagEnum["logo"] = 30] = "logo";
|
|
599
|
+
TagEnum[TagEnum["modal"] = 31] = "modal";
|
|
600
|
+
TagEnum[TagEnum["nav"] = 32] = "nav";
|
|
601
|
+
TagEnum[TagEnum["pagination"] = 33] = "pagination";
|
|
602
|
+
TagEnum[TagEnum["popover-button"] = 34] = "popover-button";
|
|
603
|
+
TagEnum[TagEnum["progress"] = 35] = "progress";
|
|
604
|
+
TagEnum[TagEnum["quote"] = 36] = "quote";
|
|
605
|
+
TagEnum[TagEnum["select"] = 37] = "select";
|
|
606
|
+
TagEnum[TagEnum["single-select"] = 38] = "single-select";
|
|
607
|
+
TagEnum[TagEnum["skip-nav"] = 39] = "skip-nav";
|
|
608
|
+
TagEnum[TagEnum["spin"] = 40] = "spin";
|
|
609
|
+
TagEnum[TagEnum["split-button"] = 41] = "split-button";
|
|
610
|
+
TagEnum[TagEnum["symbol"] = 42] = "symbol";
|
|
611
|
+
TagEnum[TagEnum["table"] = 43] = "table";
|
|
612
|
+
TagEnum[TagEnum["table-stateful"] = 44] = "table-stateful";
|
|
613
|
+
TagEnum[TagEnum["table-stateless"] = 45] = "table-stateless";
|
|
614
|
+
TagEnum[TagEnum["tabs"] = 46] = "tabs";
|
|
615
|
+
TagEnum[TagEnum["textarea"] = 47] = "textarea";
|
|
616
|
+
TagEnum[TagEnum["toast-container"] = 48] = "toast-container";
|
|
617
|
+
TagEnum[TagEnum["toolbar"] = 49] = "toolbar";
|
|
618
|
+
TagEnum[TagEnum["tooltip"] = 50] = "tooltip";
|
|
619
|
+
TagEnum[TagEnum["tree"] = 51] = "tree";
|
|
620
|
+
TagEnum[TagEnum["tree-item"] = 52] = "tree-item";
|
|
620
621
|
})(TagEnum || (TagEnum = {}));
|
|
621
622
|
|
|
622
623
|
const getWindow$1 = () => {
|
|
@@ -2674,12 +2675,16 @@ const validateTableHeaderCells = (component, value) => {
|
|
|
2674
2675
|
}
|
|
2675
2676
|
catch (e) {
|
|
2676
2677
|
}
|
|
2677
|
-
watchValidator(component, '_headerCells', (value) =>
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
|
|
2682
|
-
|
|
2678
|
+
watchValidator(component, '_headerCells', (value) => {
|
|
2679
|
+
var _a, _b;
|
|
2680
|
+
return typeof value === 'object' &&
|
|
2681
|
+
value !== null &&
|
|
2682
|
+
(value.horizontal === undefined ||
|
|
2683
|
+
(Array.isArray(value.horizontal) && value.horizontal.find((headerRow) => !Array.isArray(headerRow)) === undefined)) &&
|
|
2684
|
+
(value.vertical === undefined || (Array.isArray(value.vertical) && value.vertical.find((headerCol) => !Array.isArray(headerCol)) === undefined)) &&
|
|
2685
|
+
[...((_a = value.horizontal) !== null && _a !== void 0 ? _a : []), ...((_b = value.vertical) !== null && _b !== void 0 ? _b : [])].flat().every((cell) => cell.width === undefined || typeof cell.width === 'number') &&
|
|
2686
|
+
true;
|
|
2687
|
+
}, new Set(['TableHeaderCellsPropType']), value);
|
|
2683
2688
|
});
|
|
2684
2689
|
});
|
|
2685
2690
|
};
|
|
@@ -5405,7 +5410,7 @@ var Fragment = (_, children) => children;
|
|
|
5405
5410
|
var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
|
|
5406
5411
|
if (listeners && win.document) {
|
|
5407
5412
|
listeners.map(([flags, name, method]) => {
|
|
5408
|
-
const target =
|
|
5413
|
+
const target = elm;
|
|
5409
5414
|
const handler = hostListenerProxy(hostRef, method);
|
|
5410
5415
|
const opts = hostListenerOpts(flags);
|
|
5411
5416
|
plt.ael(target, name, handler, opts);
|
|
@@ -5427,12 +5432,6 @@ var hostListenerProxy = (hostRef, methodName) => (ev) => {
|
|
|
5427
5432
|
consoleError(e, hostRef.$hostElement$);
|
|
5428
5433
|
}
|
|
5429
5434
|
};
|
|
5430
|
-
var getHostListenerTarget = (doc, elm, flags) => {
|
|
5431
|
-
if (flags & 8 /* TargetWindow */) {
|
|
5432
|
-
return win;
|
|
5433
|
-
}
|
|
5434
|
-
return elm;
|
|
5435
|
-
};
|
|
5436
5435
|
var hostListenerOpts = (flags) => (flags & 2 /* Capture */) !== 0;
|
|
5437
5436
|
|
|
5438
5437
|
// src/runtime/vdom/vdom-annotations.ts
|
|
@@ -6070,6 +6069,7 @@ let KolBadgeTag = 'kol-badge';
|
|
|
6070
6069
|
let KolButtonTag = 'kol-button';
|
|
6071
6070
|
let KolButtonWcTag = 'kol-button-wc';
|
|
6072
6071
|
let KolCardWcTag = 'kol-card-wc';
|
|
6072
|
+
let KolDialogWcTag = 'kol-dialog-wc';
|
|
6073
6073
|
let KolFormTag = 'kol-form';
|
|
6074
6074
|
let KolHeadingTag = 'kol-heading';
|
|
6075
6075
|
let KolIconTag = 'kol-icon';
|
|
@@ -6089,7 +6089,7 @@ let KolTreeItemWcTag = 'kol-tree-item-wc';
|
|
|
6089
6089
|
let KolTreeTag = 'kol-tree';
|
|
6090
6090
|
let KolTreeWcTag = 'kol-tree-wc';
|
|
6091
6091
|
|
|
6092
|
-
const defaultStyleCss$
|
|
6092
|
+
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}\n@layer kol-component {\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}";
|
|
6093
6093
|
|
|
6094
6094
|
class KolAbbr {
|
|
6095
6095
|
constructor(hostRef) {
|
|
@@ -6111,7 +6111,7 @@ class KolAbbr {
|
|
|
6111
6111
|
"_label": ["validateLabel"]
|
|
6112
6112
|
}; }
|
|
6113
6113
|
static get style() { return {
|
|
6114
|
-
default: defaultStyleCss$
|
|
6114
|
+
default: defaultStyleCss$N
|
|
6115
6115
|
}; }
|
|
6116
6116
|
static get cmpMeta() { return {
|
|
6117
6117
|
"$flags$": 297,
|
|
@@ -6263,32 +6263,32 @@ if (isTestMode()) {
|
|
|
6263
6263
|
|
|
6264
6264
|
var KolEvent;
|
|
6265
6265
|
(function (KolEvent) {
|
|
6266
|
-
KolEvent["blur"] = "
|
|
6267
|
-
KolEvent["change"] = "
|
|
6268
|
-
KolEvent["changeHeaderCells"] = "
|
|
6269
|
-
KolEvent["changePage"] = "
|
|
6270
|
-
KolEvent["changePageSize"] = "
|
|
6271
|
-
KolEvent["click"] = "
|
|
6272
|
-
KolEvent["close"] = "
|
|
6273
|
-
KolEvent["create"] = "
|
|
6274
|
-
KolEvent["focus"] = "
|
|
6275
|
-
KolEvent["input"] = "
|
|
6276
|
-
KolEvent["keydown"] = "
|
|
6277
|
-
KolEvent["mousedown"] = "
|
|
6278
|
-
KolEvent["reset"] = "
|
|
6279
|
-
KolEvent["select"] = "
|
|
6280
|
-
KolEvent["selectionChange"] = "
|
|
6281
|
-
KolEvent["sort"] = "
|
|
6282
|
-
KolEvent["submit"] = "
|
|
6283
|
-
KolEvent["toggle"] = "
|
|
6266
|
+
KolEvent["blur"] = "blur";
|
|
6267
|
+
KolEvent["change"] = "change";
|
|
6268
|
+
KolEvent["changeHeaderCells"] = "changeheadercells";
|
|
6269
|
+
KolEvent["changePage"] = "changepage";
|
|
6270
|
+
KolEvent["changePageSize"] = "changepagesize";
|
|
6271
|
+
KolEvent["click"] = "click";
|
|
6272
|
+
KolEvent["close"] = "close";
|
|
6273
|
+
KolEvent["create"] = "create";
|
|
6274
|
+
KolEvent["focus"] = "focus";
|
|
6275
|
+
KolEvent["input"] = "input";
|
|
6276
|
+
KolEvent["keydown"] = "keydown";
|
|
6277
|
+
KolEvent["mousedown"] = "mousedown";
|
|
6278
|
+
KolEvent["reset"] = "reset";
|
|
6279
|
+
KolEvent["select"] = "select";
|
|
6280
|
+
KolEvent["selectionChange"] = "selectionchange";
|
|
6281
|
+
KolEvent["sort"] = "sort";
|
|
6282
|
+
KolEvent["submit"] = "submit";
|
|
6283
|
+
KolEvent["toggle"] = "toggle";
|
|
6284
6284
|
})(KolEvent || (KolEvent = {}));
|
|
6285
|
-
|
|
6286
|
-
|
|
6287
|
-
|
|
6288
|
-
|
|
6289
|
-
|
|
6290
|
-
|
|
6291
|
-
});
|
|
6285
|
+
const DEFAULT_OPTIONS = {
|
|
6286
|
+
bubbles: true,
|
|
6287
|
+
cancelable: true,
|
|
6288
|
+
composed: true,
|
|
6289
|
+
};
|
|
6290
|
+
function createKoliBriEvent(event, detail = null) {
|
|
6291
|
+
return new CustomEvent(event, Object.assign(Object.assign({}, DEFAULT_OPTIONS), { detail }));
|
|
6292
6292
|
}
|
|
6293
6293
|
function dispatchDomEvent(target, event, detail) {
|
|
6294
6294
|
target.dispatchEvent(createKoliBriEvent(event, detail));
|
|
@@ -6298,7 +6298,7 @@ const watchHeadingLevel = (component, value) => {
|
|
|
6298
6298
|
validateLevel(component, value);
|
|
6299
6299
|
};
|
|
6300
6300
|
|
|
6301
|
-
const defaultStyleCss$
|
|
6301
|
+
const defaultStyleCss$M = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\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-duration: 0s;\n }\n }\n .collapsible {\n /* @see https://github.com/public-ui/kolibri/issues/5952 */\n }\n @media print {\n :not(.collapsible--open) .collapsible__wrapper-animation {\n display: none;\n }\n }\n .collapsible__wrapper {\n /* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */\n transform: translateZ(0);\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.3s;\n }\n .collapsible__wrapper-animation {\n opacity: 0;\n transform: scaleY(0);\n transform-origin: top;\n min-height: 0;\n /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n visibility: hidden;\n transition: transform 0.3s, opacity 0.3s, visibility 0.3s;\n }\n .collapsible--open .collapsible__wrapper {\n grid-template-rows: 1fr;\n }\n .collapsible--open .collapsible__wrapper-animation {\n opacity: 1;\n transform: scaleY(1);\n visibility: visible;\n }\n .collapsible {\n /*\n * Inside a button, the caption text is always centered.\n * So we have to align the text to the left.\n */\n }\n .collapsible__heading-button button .kol-span {\n align-items: flex-start;\n }\n .collapsible--open:focus-within {\n position: relative;\n z-index: 100;\n }\n}";
|
|
6302
6302
|
|
|
6303
6303
|
featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
|
|
6304
6304
|
|
|
@@ -6332,9 +6332,9 @@ class KolAccordion {
|
|
|
6332
6332
|
_on: {},
|
|
6333
6333
|
};
|
|
6334
6334
|
}
|
|
6335
|
-
async
|
|
6335
|
+
async focus() {
|
|
6336
6336
|
var _a;
|
|
6337
|
-
|
|
6337
|
+
return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
6338
6338
|
}
|
|
6339
6339
|
render() {
|
|
6340
6340
|
const { _open, _label, _disabled, _level } = this.state;
|
|
@@ -6358,7 +6358,7 @@ class KolAccordion {
|
|
|
6358
6358
|
animationClass: `${rootClass}__wrapper-animation`,
|
|
6359
6359
|
},
|
|
6360
6360
|
};
|
|
6361
|
-
return (hAsync(KolCollapsibleFc, Object.assign({ key: '
|
|
6361
|
+
return (hAsync(KolCollapsibleFc, Object.assign({ key: '033717b5a67b6f63ebea447be031a9c234339e43' }, props), hAsync("slot", { key: '08b68dbec91743fdfabdee75a07a451713951dc6' })));
|
|
6362
6362
|
}
|
|
6363
6363
|
validateDisabled(value) {
|
|
6364
6364
|
validateDisabled(this, value);
|
|
@@ -6393,7 +6393,7 @@ class KolAccordion {
|
|
|
6393
6393
|
"_open": ["validateOpen"]
|
|
6394
6394
|
}; }
|
|
6395
6395
|
static get style() { return {
|
|
6396
|
-
default: defaultStyleCss$
|
|
6396
|
+
default: defaultStyleCss$M
|
|
6397
6397
|
}; }
|
|
6398
6398
|
static get cmpMeta() { return {
|
|
6399
6399
|
"$flags$": 297,
|
|
@@ -6405,7 +6405,7 @@ class KolAccordion {
|
|
|
6405
6405
|
"_on": [16],
|
|
6406
6406
|
"_open": [1540],
|
|
6407
6407
|
"state": [32],
|
|
6408
|
-
"
|
|
6408
|
+
"focus": [64]
|
|
6409
6409
|
},
|
|
6410
6410
|
"$listeners$": undefined,
|
|
6411
6411
|
"$lazyBundleId$": "-",
|
|
@@ -6413,7 +6413,7 @@ class KolAccordion {
|
|
|
6413
6413
|
}; }
|
|
6414
6414
|
}
|
|
6415
6415
|
|
|
6416
|
-
const defaultStyleCss$
|
|
6416
|
+
const defaultStyleCss$L = "/*\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}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\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 {\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}";
|
|
6417
6417
|
|
|
6418
6418
|
class KolAlert {
|
|
6419
6419
|
constructor(hostRef) {
|
|
@@ -6431,7 +6431,7 @@ class KolAlert {
|
|
|
6431
6431
|
return (hAsync(KolAlertWcTag, { key: 'bf51c76e2d6568eea0d1a0c3047da6987aa249d8', _alert: this._alert, _hasCloser: this._hasCloser, _label: this._label, _level: this._level, _on: this._on, _type: this._type, _variant: this._variant }, hAsync("slot", { key: 'b754666af76f0fcbb15ffeaa4d11b2f61d93abc4' })));
|
|
6432
6432
|
}
|
|
6433
6433
|
static get style() { return {
|
|
6434
|
-
default: defaultStyleCss$
|
|
6434
|
+
default: defaultStyleCss$L
|
|
6435
6435
|
}; }
|
|
6436
6436
|
static get cmpMeta() { return {
|
|
6437
6437
|
"$flags$": 297,
|
|
@@ -6739,7 +6739,7 @@ var a = /*@__PURE__*/getDefaultExportFromCjs(easyBemExports);
|
|
|
6739
6739
|
function c(){const e=new Map,n=(t,o,r)=>{try{return e.get(t)(o,r)}catch{return e.set(t,a(t)).get(t)(o,r)}};return n.forBlock=t=>{const o=(r,s)=>n(t,r,s);return o.forElement=r=>s=>n(t,r,s),o},n}
|
|
6740
6740
|
|
|
6741
6741
|
const bem$1 = c();
|
|
6742
|
-
const BEM_CLASS_ALERT__CLOSER = bem$1('kol-alert', 'closer');
|
|
6742
|
+
const BEM_CLASS_ALERT__CLOSER = bem$1('kol-alert', 'closer') + ' kol-close-button';
|
|
6743
6743
|
const BEM_CLASS_ALERT__CONTENT = bem$1('kol-alert', 'content');
|
|
6744
6744
|
const BEM_CLASS_ALERT__ICON = bem$1('kol-alert', 'icon');
|
|
6745
6745
|
|
|
@@ -6909,7 +6909,7 @@ class KolAlertWc {
|
|
|
6909
6909
|
}; }
|
|
6910
6910
|
}
|
|
6911
6911
|
|
|
6912
|
-
const defaultStyleCss$
|
|
6912
|
+
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}\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 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__image, .kol-avatar__initials {\n width: 100%;\n height: 100%;\n }\n .kol-avatar__initials {\n background-color: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
6913
6913
|
|
|
6914
6914
|
class KolAvatar {
|
|
6915
6915
|
constructor(hostRef) {
|
|
@@ -6920,7 +6920,7 @@ class KolAvatar {
|
|
|
6920
6920
|
return hAsync(KolAvatarWcTag, { key: 'b50d593f2fcc07fb3a1c8a92786df6ddcbc917cf', _color: this._color, _src: this._src, _label: this._label });
|
|
6921
6921
|
}
|
|
6922
6922
|
static get style() { return {
|
|
6923
|
-
default: defaultStyleCss$
|
|
6923
|
+
default: defaultStyleCss$K
|
|
6924
6924
|
}; }
|
|
6925
6925
|
static get cmpMeta() { return {
|
|
6926
6926
|
"$flags$": 297,
|
|
@@ -18561,7 +18561,7 @@ const ToastItemFc = (_a) => {
|
|
|
18561
18561
|
return (hAsync("div", { class: clsx('kol-toast-item', `kol-toast-item--${status}`) }, hAsync(KolAlertFc, { class: "kol-toast-item__alert", alert: true, label: label, level: 0, hasCloser: true, type: type, variant: variant || 'card', onCloserClick: onClose }, hAsync("div", Object.assign({}, other), description))));
|
|
18562
18562
|
};
|
|
18563
18563
|
|
|
18564
|
-
const defaultStyleCss$
|
|
18564
|
+
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}\n@layer kol-component {\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-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}";
|
|
18565
18565
|
|
|
18566
18566
|
featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
|
|
18567
18567
|
class KolBadge {
|
|
@@ -18590,18 +18590,18 @@ class KolBadge {
|
|
|
18590
18590
|
renderSmartButton(props) {
|
|
18591
18591
|
return (hAsync(KolButtonWcTag, { ref: this.catchSmartButtonRef, class: "kol-badge__smart-button", _ariaControls: this.id, _ariaDescription: props._ariaDescription, _buttonVariant: props._variant, _customClass: props._customClass, _disabled: props._disabled, _hideLabel: true, _icons: props._icons, _id: props._id, _label: props._label, _on: props._on, _tooltipAlign: props._tooltipAlign }));
|
|
18592
18592
|
}
|
|
18593
|
-
async
|
|
18593
|
+
async focus() {
|
|
18594
18594
|
var _a;
|
|
18595
|
-
|
|
18595
|
+
return Promise.resolve((_a = this.smartButtonRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
18596
18596
|
}
|
|
18597
18597
|
render() {
|
|
18598
18598
|
const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;
|
|
18599
|
-
return (hAsync("span", { key: '
|
|
18599
|
+
return (hAsync("span", { key: 'fe86a1a3e242f1ea2b439364882543151b319ea6', class: clsx('kol-badge', {
|
|
18600
18600
|
'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
|
|
18601
18601
|
}), style: {
|
|
18602
18602
|
backgroundColor: this.bgColorStr,
|
|
18603
18603
|
color: this.colorStr,
|
|
18604
|
-
} }, hAsync(KolSpanFc, { key: '
|
|
18604
|
+
} }, hAsync(KolSpanFc, { key: '2880c59a62931e41d78381e5c5b1a81f3e27d256', class: "kol-badge__label", id: hasSmartButton ? this.id : undefined, allowMarkdown: true, icons: this.state._icons, label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton)));
|
|
18605
18605
|
}
|
|
18606
18606
|
validateIcons(value) {
|
|
18607
18607
|
validateIcons(this, value);
|
|
@@ -18635,7 +18635,7 @@ class KolBadge {
|
|
|
18635
18635
|
"_smartButton": ["validateSmartButton"]
|
|
18636
18636
|
}; }
|
|
18637
18637
|
static get style() { return {
|
|
18638
|
-
default: defaultStyleCss$
|
|
18638
|
+
default: defaultStyleCss$J
|
|
18639
18639
|
}; }
|
|
18640
18640
|
static get cmpMeta() { return {
|
|
18641
18641
|
"$flags$": 297,
|
|
@@ -18646,7 +18646,7 @@ class KolBadge {
|
|
|
18646
18646
|
"_label": [1],
|
|
18647
18647
|
"_smartButton": [1, "_smart-button"],
|
|
18648
18648
|
"state": [32],
|
|
18649
|
-
"
|
|
18649
|
+
"focus": [64]
|
|
18650
18650
|
},
|
|
18651
18651
|
"$listeners$": undefined,
|
|
18652
18652
|
"$lazyBundleId$": "-",
|
|
@@ -18672,14 +18672,14 @@ const watchNavLinks = (className, component, value) => {
|
|
|
18672
18672
|
uiUxHintMillerscheZahl(className, component.state._links.length);
|
|
18673
18673
|
};
|
|
18674
18674
|
|
|
18675
|
-
const defaultStyleCss$
|
|
18675
|
+
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}\n@layer kol-component {\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: inline-block;\n }\n .kol-link {\n display: inline-flex;\n max-width: fit-content;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-link--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: stretch;\n }\n .kol-link--standalone .kol-link__text {\n display: inline-flex;\n flex: 1 1 100%;\n place-items: center;\n }\n .kol-link .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-breadcrumb__list, .kol-breadcrumb__list-element {\n display: flex;\n margin: 0;\n padding: 0;\n gap: 0.5em;\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}";
|
|
18676
18676
|
|
|
18677
18677
|
class KolBreadcrumb {
|
|
18678
18678
|
constructor(hostRef) {
|
|
18679
18679
|
registerInstance(this, hostRef);
|
|
18680
18680
|
this.renderLink = (link, index) => {
|
|
18681
18681
|
const lastIndex = this.state._links.length - 1;
|
|
18682
|
-
return (hAsync("li", { class: "kol-breadcrumb__list-element", key: index }, index === lastIndex ? (hAsync("span", { class: "kol-breadcrumb__list-element-span", "aria-current": "page" }, link._hideLabel ? (hAsync(KolIconTag, { class: "kol-breadcrumb__icon", _label: link._label, _icons: typeof link._icons === 'string' ? link._icons : '
|
|
18682
|
+
return (hAsync("li", { class: "kol-breadcrumb__list-element", key: index }, index === lastIndex ? (hAsync("span", { class: "kol-breadcrumb__list-element-span", "aria-current": "page" }, link._hideLabel ? (hAsync(KolIconTag, { class: "kol-breadcrumb__icon", _label: link._label, _icons: typeof link._icons === 'string' ? link._icons : 'kolicon-link' })) : (hAsync(Fragment, null, link._label)))) : (hAsync(KolLinkWcTag, Object.assign({ class: "kol-breadcrumb__link", _inline: false }, link))), index !== lastIndex && hAsync(KolIconTag, { class: "kol-breadcrumb__separator", _label: "", _icons: "kolicon-chevron-right" })));
|
|
18683
18683
|
};
|
|
18684
18684
|
this.state = {
|
|
18685
18685
|
_label: '',
|
|
@@ -18687,7 +18687,7 @@ class KolBreadcrumb {
|
|
|
18687
18687
|
};
|
|
18688
18688
|
}
|
|
18689
18689
|
render() {
|
|
18690
|
-
return (hAsync("nav", { key: '
|
|
18690
|
+
return (hAsync("nav", { key: 'd086ccf1b9fccd3c2d9afe55f56a285e58f451f5', class: "kol-breadcrumb", "aria-label": this.state._label }, hAsync("ul", { key: 'ea55b4eed94749a422d06e470f3f09b75e0a7978', class: "kol-breadcrumb__list" }, this.state._links.length === 0 && (hAsync("li", { key: 'e601d2603ba034b4b0d553138f1d4e762fc372e8' }, hAsync(KolIconTag, { key: 'd73b5a1132e30ed8692f3aafe1321acd57232b64', class: "kol-breadcrumb_icon", _label: "", _icons: "kolicon-house" }), "\u2026")), this.state._links.map(this.renderLink))));
|
|
18691
18691
|
}
|
|
18692
18692
|
validateLabel(value, _oldValue, initial = false) {
|
|
18693
18693
|
if (!initial) {
|
|
@@ -18714,7 +18714,7 @@ class KolBreadcrumb {
|
|
|
18714
18714
|
"_links": ["validateLinks"]
|
|
18715
18715
|
}; }
|
|
18716
18716
|
static get style() { return {
|
|
18717
|
-
default: defaultStyleCss$
|
|
18717
|
+
default: defaultStyleCss$I
|
|
18718
18718
|
}; }
|
|
18719
18719
|
static get cmpMeta() { return {
|
|
18720
18720
|
"$flags$": 297,
|
|
@@ -18730,7 +18730,7 @@ class KolBreadcrumb {
|
|
|
18730
18730
|
}; }
|
|
18731
18731
|
}
|
|
18732
18732
|
|
|
18733
|
-
const defaultStyleCss$
|
|
18733
|
+
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}\n@layer kol-component {\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: 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}";
|
|
18734
18734
|
|
|
18735
18735
|
class KolButton {
|
|
18736
18736
|
constructor(hostRef) {
|
|
@@ -18748,15 +18748,15 @@ class KolButton {
|
|
|
18748
18748
|
async getValue() {
|
|
18749
18749
|
return this._value;
|
|
18750
18750
|
}
|
|
18751
|
-
async
|
|
18751
|
+
async focus() {
|
|
18752
18752
|
var _a;
|
|
18753
|
-
|
|
18753
|
+
return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
18754
18754
|
}
|
|
18755
18755
|
render() {
|
|
18756
|
-
return (hAsync(KolButtonWcTag, { key: '
|
|
18756
|
+
return (hAsync(KolButtonWcTag, { key: 'f11e1608010be61b889bfa56beaaf4713bfd501d', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _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, _buttonVariant: this._variant }, hAsync("slot", { key: 'f806eae7a76f2f04dc87d97054f332eb9f67da0b', name: "expert", slot: "expert" })));
|
|
18757
18757
|
}
|
|
18758
18758
|
static get style() { return {
|
|
18759
|
-
default: defaultStyleCss$
|
|
18759
|
+
default: defaultStyleCss$H
|
|
18760
18760
|
}; }
|
|
18761
18761
|
static get cmpMeta() { return {
|
|
18762
18762
|
"$flags$": 297,
|
|
@@ -18784,7 +18784,7 @@ class KolButton {
|
|
|
18784
18784
|
"_value": [8],
|
|
18785
18785
|
"_variant": [1],
|
|
18786
18786
|
"getValue": [64],
|
|
18787
|
-
"
|
|
18787
|
+
"focus": [64]
|
|
18788
18788
|
},
|
|
18789
18789
|
"$listeners$": undefined,
|
|
18790
18790
|
"$lazyBundleId$": "-",
|
|
@@ -18792,7 +18792,7 @@ class KolButton {
|
|
|
18792
18792
|
}; }
|
|
18793
18793
|
}
|
|
18794
18794
|
|
|
18795
|
-
const defaultStyleCss$
|
|
18795
|
+
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}\n@layer kol-component {\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: inline-block;\n }\n .kol-button {\n display: inline-flex;\n max-width: fit-content;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-button--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: stretch;\n }\n .kol-button--standalone .kol-button__text {\n display: inline-flex;\n flex: 1 1 100%;\n place-items: center;\n }\n .kol-button .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-button:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-button:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-button__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--inline {\n min-width: unset;\n min-height: unset;\n }\n}";
|
|
18796
18796
|
|
|
18797
18797
|
class KolButtonLink {
|
|
18798
18798
|
constructor(hostRef) {
|
|
@@ -18809,15 +18809,15 @@ class KolButtonLink {
|
|
|
18809
18809
|
async getValue() {
|
|
18810
18810
|
return this._value;
|
|
18811
18811
|
}
|
|
18812
|
-
async
|
|
18812
|
+
async focus() {
|
|
18813
18813
|
var _a;
|
|
18814
|
-
|
|
18814
|
+
return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
18815
18815
|
}
|
|
18816
18816
|
render() {
|
|
18817
|
-
return (hAsync(KolButtonWcTag, { key: '
|
|
18817
|
+
return (hAsync(KolButtonWcTag, { key: '4f24a85aab00b98b53b93aa18f9050cfd58d37c3', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _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 }, hAsync("slot", { key: '4282c9c9226bc23d50f97a63477354872fa77f42', name: "expert", slot: "expert" })));
|
|
18818
18818
|
}
|
|
18819
18819
|
static get style() { return {
|
|
18820
|
-
default: defaultStyleCss$
|
|
18820
|
+
default: defaultStyleCss$G
|
|
18821
18821
|
}; }
|
|
18822
18822
|
static get cmpMeta() { return {
|
|
18823
18823
|
"$flags$": 297,
|
|
@@ -18843,7 +18843,7 @@ class KolButtonLink {
|
|
|
18843
18843
|
"_type": [1],
|
|
18844
18844
|
"_value": [8],
|
|
18845
18845
|
"getValue": [64],
|
|
18846
|
-
"
|
|
18846
|
+
"focus": [64]
|
|
18847
18847
|
},
|
|
18848
18848
|
"$listeners$": undefined,
|
|
18849
18849
|
"$lazyBundleId$": "-",
|
|
@@ -19116,9 +19116,9 @@ class AssociatedInputController {
|
|
|
19116
19116
|
}
|
|
19117
19117
|
|
|
19118
19118
|
class KolButtonWc {
|
|
19119
|
-
async
|
|
19119
|
+
async focus() {
|
|
19120
19120
|
var _a;
|
|
19121
|
-
(_a = this.buttonRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
19121
|
+
return Promise.resolve((_a = this.buttonRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
19122
19122
|
}
|
|
19123
19123
|
render() {
|
|
19124
19124
|
var _a;
|
|
@@ -19127,14 +19127,14 @@ class KolButtonWc {
|
|
|
19127
19127
|
const badgeText = this.state._accessKey || this.state._shortKey;
|
|
19128
19128
|
const isDisabled = this.state._disabled === true;
|
|
19129
19129
|
const hideLabel = this.state._hideLabel === true;
|
|
19130
|
-
return (hAsync(Host, { key: '
|
|
19130
|
+
return (hAsync(Host, { key: '99416124052f5a18686e2ea0fc8db9e9f9066a01' }, hAsync("button", { key: '07fe0e9be0846dd5609e707000dc9b6e86bdb348', ref: (ref) => (this.buttonRef = ref), accessKey: this.state._accessKey, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-haspopup": this._ariaHasPopup, "aria-keyshortcuts": this.state._shortKey, "aria-label": hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: clsx('kol-button', {
|
|
19131
19131
|
'kol-button--disabled': isDisabled,
|
|
19132
19132
|
[`kol-button--${this.state._buttonVariant}`]: this.state._buttonVariant !== 'custom',
|
|
19133
19133
|
'kol-button--inline': this.state._inline === true,
|
|
19134
19134
|
'kol-button--standalone': this.state._inline === false,
|
|
19135
19135
|
'kol-button--hide-label': hideLabel,
|
|
19136
19136
|
[this.state._customClass]: this.state._buttonVariant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
19137
|
-
}), 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(KolSpanFc, { key: '
|
|
19137
|
+
}), 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(KolSpanFc, { key: 'a72dca8e86940ccc9f9525b9f726dee12f6884a3', class: "kol-button__text", badgeText: badgeText, icons: this.state._icons, hideLabel: hideLabel, label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: '2d4a2a369fc496087ce41b021e771e7e9c421adf', name: "expert", slot: "expert" }))), hideLabel && (hAsync(KolTooltipWcTag, { key: 'a6f0f7f8b41875c2a98f1125120e38c22afb8658', ref: (ref) => (this.tooltipRef = ref), "aria-hidden": "true", hidden: hasExpertSlot, class: "kol-button__tooltip", _badgeText: badgeText, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' }))));
|
|
19138
19138
|
}
|
|
19139
19139
|
constructor(hostRef) {
|
|
19140
19140
|
registerInstance(this, hostRef);
|
|
@@ -19339,7 +19339,7 @@ class KolButtonWc {
|
|
|
19339
19339
|
"_value": [8],
|
|
19340
19340
|
"_buttonVariant": [1, "_button-variant"],
|
|
19341
19341
|
"state": [32],
|
|
19342
|
-
"
|
|
19342
|
+
"focus": [64]
|
|
19343
19343
|
},
|
|
19344
19344
|
"$listeners$": undefined,
|
|
19345
19345
|
"$lazyBundleId$": "-",
|
|
@@ -19347,7 +19347,7 @@ class KolButtonWc {
|
|
|
19347
19347
|
}; }
|
|
19348
19348
|
}
|
|
19349
19349
|
|
|
19350
|
-
const defaultStyleCss$
|
|
19350
|
+
const defaultStyleCss$F = "/*\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}\n@layer kol-component {\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-card {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: grid;\n height: 100%;\n overflow: visible;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-template-areas: \"header close\" \"content content\";\n grid-template-columns: 1fr min-content;\n grid-template-rows: min-content 1fr;\n }\n .kol-card__header {\n align-self: start;\n grid-area: header;\n }\n .kol-card__content {\n align-self: stretch;\n grid-area: content;\n }\n .kol-card__close-button {\n grid-area: close;\n }\n}";
|
|
19351
19351
|
|
|
19352
19352
|
class KolCard {
|
|
19353
19353
|
constructor(hostRef) {
|
|
@@ -19359,7 +19359,7 @@ class KolCard {
|
|
|
19359
19359
|
return (hAsync(KolCardWcTag, { key: 'db950a543bc2f41a1e0786c9ac3d4cb0fce5cf97', _on: this._on, _hasCloser: this._hasCloser, _label: this._label, _level: this._level }, hAsync("slot", { key: 'f7ad1dd60427b5e2ae00f0e2260309a025d1ed44' })));
|
|
19360
19360
|
}
|
|
19361
19361
|
static get style() { return {
|
|
19362
|
-
default: defaultStyleCss$
|
|
19362
|
+
default: defaultStyleCss$F
|
|
19363
19363
|
}; }
|
|
19364
19364
|
static get cmpMeta() { return {
|
|
19365
19365
|
"$flags$": 297,
|
|
@@ -19401,7 +19401,7 @@ class KolCardWc {
|
|
|
19401
19401
|
this.validateOnValue = (value) => typeof value === 'object' && value !== null && typeof value.onClose === 'function';
|
|
19402
19402
|
}
|
|
19403
19403
|
render() {
|
|
19404
|
-
return (hAsync(Host, { key: '
|
|
19404
|
+
return (hAsync(Host, { key: 'de517413c990072e7e7faca2916c0c5243ad9495' }, hAsync("div", { key: '01f98d52d173677f5e314e2dce9425cc19cdaadc', "aria-labelledby": this.nonce, class: "kol-card", role: "group" }, hAsync(KolHeadingFc, { key: 'd2ce693140449135323ff1601af712982aae9325', class: "kol-card__header", id: this.nonce, level: this.state._level }, this.state._label), hAsync("div", { key: '155c2d42406dbb9ba02f6a29ec92f10d93b8c38d', class: "kol-card__content" }, hAsync("slot", { key: 'f3c23f1168273dbfbb515b1d83b7f087d9d019ca' })), this.state._hasCloser && (hAsync(KolButtonWcTag, { key: 'f22067f09cde9099c29c8b26b0af1cb3229e0b3d', class: "kol-card__close-button kol-close-button", "data-testid": "card-close-button", _hideLabel: true, _icons: {
|
|
19405
19405
|
left: {
|
|
19406
19406
|
icon: 'kolicon-cross',
|
|
19407
19407
|
},
|
|
@@ -19934,15 +19934,15 @@ class ComboboxController extends InputIconController {
|
|
|
19934
19934
|
}
|
|
19935
19935
|
}
|
|
19936
19936
|
|
|
19937
|
-
const defaultStyleCss$D = "/*\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}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\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 {\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-custom-suggestions-toggle {\n display: flex;\n width: var(--a11y-min-size);\n 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--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\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:not(:empty)) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\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 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-combobox__delete .kol-button {\n cursor: pointer;\n }\n .kol-combobox__delete--disabled .kol-button {\n cursor: not-allowed;\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}";
|
|
19937
|
+
const defaultStyleCss$E = "/*\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}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\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 {\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-custom-suggestions-toggle {\n display: flex;\n width: var(--a11y-min-size);\n 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--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\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:not(:empty)) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\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 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-combobox__delete .kol-button {\n cursor: pointer;\n }\n .kol-combobox__delete--disabled .kol-button {\n cursor: not-allowed;\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}";
|
|
19938
19938
|
|
|
19939
19939
|
class KolCombobox {
|
|
19940
19940
|
async getValue() {
|
|
19941
19941
|
return this.state._value;
|
|
19942
19942
|
}
|
|
19943
|
-
async
|
|
19943
|
+
async focus() {
|
|
19944
19944
|
var _a;
|
|
19945
|
-
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
19945
|
+
return Promise.resolve((_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus());
|
|
19946
19946
|
}
|
|
19947
19947
|
selectOption(option) {
|
|
19948
19948
|
var _a;
|
|
@@ -20017,6 +20017,13 @@ class KolCombobox {
|
|
|
20017
20017
|
optionElement === null || optionElement === void 0 ? void 0 : optionElement.focus();
|
|
20018
20018
|
}
|
|
20019
20019
|
}
|
|
20020
|
+
selectFocusedOption() {
|
|
20021
|
+
if (this._filteredSuggestions && this._focusedOptionIndex >= 0 && this._focusedOptionIndex < this._filteredSuggestions.length) {
|
|
20022
|
+
this.selectOption(this._filteredSuggestions[this._focusedOptionIndex]);
|
|
20023
|
+
return true;
|
|
20024
|
+
}
|
|
20025
|
+
return false;
|
|
20026
|
+
}
|
|
20020
20027
|
focusSuggestionStartingWith(char) {
|
|
20021
20028
|
const charLowerCase = char.toLowerCase();
|
|
20022
20029
|
const index = Array.isArray(this._filteredSuggestions) &&
|
|
@@ -20049,15 +20056,15 @@ class KolCombobox {
|
|
|
20049
20056
|
}
|
|
20050
20057
|
render() {
|
|
20051
20058
|
const isDisabled = this.state._disabled === true;
|
|
20052
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
20059
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '86e494402f3c76cc2261ef0209e7e8402e7da393' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'f37f72abf8ae989d26f287cd3814199be5b9f91b', state: this.state }, hAsync("div", { key: '5e78e37110397d040dbbc95befa51d22f7b8614e', class: "kol-combobox__group" }, hAsync(InputStateWrapper, Object.assign({ key: 'bb89a59229a0993b95ca5c6f4279dd446d1d54cc' }, this.getInputProps())), this.state._value && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: '6a594a033eef861829ebf94c93dc1aa3e1d6e6e4', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _disabled: isDisabled, "data-testid": "combobox-delete", class: clsx('kol-combobox__delete', {
|
|
20053
20060
|
'kol-combobox__delete--disabled': isDisabled,
|
|
20054
20061
|
}), _on: {
|
|
20055
20062
|
onClick: () => {
|
|
20056
20063
|
this.clearSelection();
|
|
20057
20064
|
},
|
|
20058
|
-
} })), hAsync(KolIconTag, { key: '
|
|
20065
|
+
} })), hAsync(KolIconTag, { key: '9e1e5b8d303e6dbf9b23cd9166a01d878edbc01a', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
20059
20066
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
20060
|
-
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '
|
|
20067
|
+
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '2608f9700e5dab1b0f826255922ca3111d96868d', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
|
|
20061
20068
|
this._filteredSuggestions.length > 0 &&
|
|
20062
20069
|
this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { disabled: false, index: index, option: option, searchTerm: this.state._value, ref: (el) => {
|
|
20063
20070
|
if (el)
|
|
@@ -20119,11 +20126,13 @@ class KolCombobox {
|
|
|
20119
20126
|
(_b = this.refInput) === null || _b === void 0 ? void 0 : _b.focus();
|
|
20120
20127
|
break;
|
|
20121
20128
|
}
|
|
20122
|
-
case '
|
|
20123
|
-
case 'Enter':
|
|
20124
|
-
|
|
20125
|
-
|
|
20126
|
-
this.
|
|
20129
|
+
case ' ':
|
|
20130
|
+
case 'Enter':
|
|
20131
|
+
case 'NumpadEnter': {
|
|
20132
|
+
if (this._isOpen) {
|
|
20133
|
+
if (this.selectFocusedOption()) {
|
|
20134
|
+
this._isOpen = false;
|
|
20135
|
+
}
|
|
20127
20136
|
}
|
|
20128
20137
|
else {
|
|
20129
20138
|
this.toggleListbox();
|
|
@@ -20289,22 +20298,22 @@ class KolCombobox {
|
|
|
20289
20298
|
handleMouseEvent() {
|
|
20290
20299
|
this.blockSuggestionMouseOver = false;
|
|
20291
20300
|
}
|
|
20292
|
-
handleFocusOut() {
|
|
20301
|
+
handleFocusOut(event) {
|
|
20293
20302
|
setTimeout(() => {
|
|
20294
20303
|
var _a;
|
|
20295
20304
|
if (!((_a = this.host) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement))) {
|
|
20296
|
-
this.onBlur();
|
|
20305
|
+
this.onBlur(event);
|
|
20297
20306
|
}
|
|
20298
|
-
}
|
|
20307
|
+
});
|
|
20299
20308
|
}
|
|
20300
|
-
handleWindowBlur() {
|
|
20301
|
-
this.onBlur();
|
|
20309
|
+
handleWindowBlur(event) {
|
|
20310
|
+
this.onBlur(event);
|
|
20302
20311
|
}
|
|
20303
|
-
onBlur() {
|
|
20304
|
-
var _a;
|
|
20312
|
+
onBlur(event) {
|
|
20305
20313
|
if (this._isOpen) {
|
|
20306
|
-
|
|
20307
|
-
|
|
20314
|
+
if (event instanceof FocusEvent && event.view === window) {
|
|
20315
|
+
this._isOpen = false;
|
|
20316
|
+
}
|
|
20308
20317
|
}
|
|
20309
20318
|
}
|
|
20310
20319
|
onChange(event) {
|
|
@@ -20334,7 +20343,7 @@ class KolCombobox {
|
|
|
20334
20343
|
"_value": ["validateValue"]
|
|
20335
20344
|
}; }
|
|
20336
20345
|
static get style() { return {
|
|
20337
|
-
default: defaultStyleCss$
|
|
20346
|
+
default: defaultStyleCss$E
|
|
20338
20347
|
}; }
|
|
20339
20348
|
static get cmpMeta() { return {
|
|
20340
20349
|
"$flags$": 297,
|
|
@@ -20366,15 +20375,15 @@ class KolCombobox {
|
|
|
20366
20375
|
"state": [32],
|
|
20367
20376
|
"inputHasFocus": [32],
|
|
20368
20377
|
"getValue": [64],
|
|
20369
|
-
"
|
|
20378
|
+
"focus": [64]
|
|
20370
20379
|
},
|
|
20371
|
-
"$listeners$": [[0, "keydown", "handleKeyDown"], [
|
|
20380
|
+
"$listeners$": [[0, "keydown", "handleKeyDown"], [0, "click", "handleWindowClick"], [1, "mousemove", "handleMouseEvent"], [0, "focusout", "handleFocusOut"], [0, "blur", "handleWindowBlur"]],
|
|
20372
20381
|
"$lazyBundleId$": "-",
|
|
20373
20382
|
"$attrsToReflect$": [["_touched", "_touched"], ["_value", "_value"]]
|
|
20374
20383
|
}; }
|
|
20375
20384
|
}
|
|
20376
20385
|
|
|
20377
|
-
const defaultStyleCss$
|
|
20386
|
+
const defaultStyleCss$D = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\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-duration: 0s;\n }\n }\n .collapsible {\n /* @see https://github.com/public-ui/kolibri/issues/5952 */\n }\n @media print {\n :not(.collapsible--open) .collapsible__wrapper-animation {\n display: none;\n }\n }\n .collapsible__wrapper {\n /* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */\n transform: translateZ(0);\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.3s;\n }\n .collapsible__wrapper-animation {\n opacity: 0;\n transform: scaleY(0);\n transform-origin: top;\n min-height: 0;\n /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n visibility: hidden;\n transition: transform 0.3s, opacity 0.3s, visibility 0.3s;\n }\n .collapsible--open .collapsible__wrapper {\n grid-template-rows: 1fr;\n }\n .collapsible--open .collapsible__wrapper-animation {\n opacity: 1;\n transform: scaleY(1);\n visibility: visible;\n }\n .collapsible {\n /*\n * Inside a button, the caption text is always centered.\n * So we have to align the text to the left.\n */\n }\n .collapsible__heading-button button .kol-span {\n align-items: flex-start;\n }\n .collapsible--open:focus-within {\n position: relative;\n z-index: 100;\n }\n}\n@layer kol-component {\n .kol-details__heading-button {\n display: flex;\n }\n .kol-details__heading-button .kol-button {\n min-height: auto;\n }\n .kol-details__heading-button .kol-button .kol-span__label {\n border-bottom-color: grey;\n border-bottom-style: solid;\n }\n .collapsible--open .kol-details__heading-button .kol-icon::part(icon) {\n transform: rotate(90deg);\n }\n}";
|
|
20378
20387
|
|
|
20379
20388
|
class KolDetails {
|
|
20380
20389
|
constructor(hostRef) {
|
|
@@ -20403,9 +20412,9 @@ class KolDetails {
|
|
|
20403
20412
|
_on: {},
|
|
20404
20413
|
};
|
|
20405
20414
|
}
|
|
20406
|
-
async
|
|
20415
|
+
async focus() {
|
|
20407
20416
|
var _a;
|
|
20408
|
-
|
|
20417
|
+
return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
20409
20418
|
}
|
|
20410
20419
|
render() {
|
|
20411
20420
|
const { _open, _label, _disabled, _level } = this.state;
|
|
@@ -20430,7 +20439,7 @@ class KolDetails {
|
|
|
20430
20439
|
animationClass: `${rootClass}__wrapper-animation`,
|
|
20431
20440
|
},
|
|
20432
20441
|
};
|
|
20433
|
-
return (hAsync(KolCollapsibleFc, Object.assign({ key: '
|
|
20442
|
+
return (hAsync(KolCollapsibleFc, Object.assign({ key: '07bc611d260c54c24d5d46161db69ad2d77a85d0' }, props), hAsync("slot", { key: '1a188f043828b0a2cfad16b4e034606961a8722e' })));
|
|
20434
20443
|
}
|
|
20435
20444
|
validateDisabled(value) {
|
|
20436
20445
|
validateDisabled(this, value);
|
|
@@ -20465,7 +20474,7 @@ class KolDetails {
|
|
|
20465
20474
|
"_open": ["validateOpen"]
|
|
20466
20475
|
}; }
|
|
20467
20476
|
static get style() { return {
|
|
20468
|
-
default: defaultStyleCss$
|
|
20477
|
+
default: defaultStyleCss$D
|
|
20469
20478
|
}; }
|
|
20470
20479
|
static get cmpMeta() { return {
|
|
20471
20480
|
"$flags$": 297,
|
|
@@ -20477,7 +20486,7 @@ class KolDetails {
|
|
|
20477
20486
|
"_on": [16],
|
|
20478
20487
|
"_open": [1540],
|
|
20479
20488
|
"state": [32],
|
|
20480
|
-
"
|
|
20489
|
+
"focus": [64]
|
|
20481
20490
|
},
|
|
20482
20491
|
"$listeners$": undefined,
|
|
20483
20492
|
"$lazyBundleId$": "-",
|
|
@@ -20485,6 +20494,53 @@ class KolDetails {
|
|
|
20485
20494
|
}; }
|
|
20486
20495
|
}
|
|
20487
20496
|
|
|
20497
|
+
const defaultStyleCss$C = "/*\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}\n@layer kol-component {\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-card {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: grid;\n height: 100%;\n overflow: visible;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-template-areas: \"header close\" \"content content\";\n grid-template-columns: 1fr min-content;\n grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n align-self: start;\n grid-area: header;\n}\n.kol-card__content {\n align-self: stretch;\n grid-area: content;\n}\n.kol-card__close-button {\n grid-area: close;\n}\n\n@layer kol-component {\n .kol-dialog,\n .kol-modal {\n min-height: var(--a11y-min-size);\n padding: 0;\n border: 0;\n }\n .kol-dialog::backdrop,\n .kol-modal::backdrop {\n background-color: rgba(0, 0, 0, 0.1);\n }\n .kol-dialog__close-button,\n .kol-modal__close-button {\n position: absolute;\n top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n z-index: 1;\n }\n}";
|
|
20498
|
+
|
|
20499
|
+
class KolDialog {
|
|
20500
|
+
constructor(hostRef) {
|
|
20501
|
+
registerInstance(this, hostRef);
|
|
20502
|
+
this.catchRef = (ref) => {
|
|
20503
|
+
this.dialogRef = ref;
|
|
20504
|
+
};
|
|
20505
|
+
this._width = '100%';
|
|
20506
|
+
this._variant = 'blank';
|
|
20507
|
+
}
|
|
20508
|
+
async openModal() {
|
|
20509
|
+
var _a;
|
|
20510
|
+
await ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.openModal());
|
|
20511
|
+
}
|
|
20512
|
+
async closeModal() {
|
|
20513
|
+
var _a;
|
|
20514
|
+
await ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.closeModal());
|
|
20515
|
+
}
|
|
20516
|
+
render() {
|
|
20517
|
+
return (hAsync(KolDialogWcTag, { key: '24744fff4cfebb9ef188926e5390064ce7ec6931', ref: this.catchRef, _label: this._label, _on: this._on, _variant: this._variant, _width: this._width }, hAsync("slot", { key: 'c8844dc7d6b9d16567ce400ae10f992018c6849d' })));
|
|
20518
|
+
}
|
|
20519
|
+
static get style() { return {
|
|
20520
|
+
default: defaultStyleCss$C
|
|
20521
|
+
}; }
|
|
20522
|
+
static get cmpMeta() { return {
|
|
20523
|
+
"$flags$": 297,
|
|
20524
|
+
"$tagName$": "kol-dialog",
|
|
20525
|
+
"$members$": {
|
|
20526
|
+
"_label": [1],
|
|
20527
|
+
"_on": [16],
|
|
20528
|
+
"_width": [1],
|
|
20529
|
+
"_variant": [1],
|
|
20530
|
+
"openModal": [64],
|
|
20531
|
+
"closeModal": [64]
|
|
20532
|
+
},
|
|
20533
|
+
"$listeners$": undefined,
|
|
20534
|
+
"$lazyBundleId$": "-",
|
|
20535
|
+
"$attrsToReflect$": []
|
|
20536
|
+
}; }
|
|
20537
|
+
}
|
|
20538
|
+
|
|
20539
|
+
const DialogVariantPropTypeOptions = ['blank', 'card'];
|
|
20540
|
+
const validateDialogVariant = (component, value) => {
|
|
20541
|
+
watchValidator(component, '_variant', (value) => typeof value === 'string' && DialogVariantPropTypeOptions.includes(value), new Set(DialogVariantPropTypeOptions), value);
|
|
20542
|
+
};
|
|
20543
|
+
|
|
20488
20544
|
let openTooltips = 0;
|
|
20489
20545
|
const tooltipOpened = () => {
|
|
20490
20546
|
openTooltips++;
|
|
@@ -20498,6 +20554,102 @@ const handleCancelOverlay = (event) => {
|
|
|
20498
20554
|
}
|
|
20499
20555
|
};
|
|
20500
20556
|
|
|
20557
|
+
class KolDialogWc {
|
|
20558
|
+
constructor(hostRef) {
|
|
20559
|
+
registerInstance(this, hostRef);
|
|
20560
|
+
this.on = {
|
|
20561
|
+
onClose: async () => {
|
|
20562
|
+
await this.closeModal();
|
|
20563
|
+
},
|
|
20564
|
+
};
|
|
20565
|
+
this._width = '100%';
|
|
20566
|
+
this._variant = 'blank';
|
|
20567
|
+
this.state = {
|
|
20568
|
+
_label: '',
|
|
20569
|
+
_width: '100%',
|
|
20570
|
+
};
|
|
20571
|
+
}
|
|
20572
|
+
disconnectedCallback() {
|
|
20573
|
+
void this.closeModal();
|
|
20574
|
+
}
|
|
20575
|
+
handleNativeCloseEvent() {
|
|
20576
|
+
var _a, _b;
|
|
20577
|
+
(_b = (_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
20578
|
+
if (this.host) {
|
|
20579
|
+
dispatchDomEvent(this.host, KolEvent.close);
|
|
20580
|
+
}
|
|
20581
|
+
}
|
|
20582
|
+
async openModal() {
|
|
20583
|
+
var _a;
|
|
20584
|
+
(_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.showModal();
|
|
20585
|
+
}
|
|
20586
|
+
async closeModal() {
|
|
20587
|
+
var _a, _b;
|
|
20588
|
+
(_b = (_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
20589
|
+
}
|
|
20590
|
+
render() {
|
|
20591
|
+
return (hAsync("dialog", { key: '288b2934310b2d34013f55e0f4636263e2be22aa', "aria-label": this.state._label, class: clsx('kol-dialog', 'kol-modal', {
|
|
20592
|
+
'kol-dialog__blank': this.state._variant === 'blank',
|
|
20593
|
+
'kol-dialog__card': this.state._variant === 'card',
|
|
20594
|
+
'kol-modal__blank': this.state._variant === 'blank',
|
|
20595
|
+
'kol-modal__card': this.state._variant === 'card',
|
|
20596
|
+
}), onCancel: handleCancelOverlay, onClose: this.handleNativeCloseEvent.bind(this), ref: (el) => {
|
|
20597
|
+
this.refDialog = el;
|
|
20598
|
+
}, style: {
|
|
20599
|
+
width: this.state._width,
|
|
20600
|
+
} }, this.state._variant === 'blank' && hAsync("slot", { key: '08ea19cdd17c7dcd6fcdb58b1d083665268285a8' }), this.state._variant === 'card' && (hAsync(KolCardWcTag, { key: '2801d5a45ea0e99406b1710dbfa76c320970ed0d', _label: this.state._label, _hasCloser: true, _on: this.on }, hAsync("slot", { key: '447c1819769635b6b8c7891d252da2ac9b9ece36' })))));
|
|
20601
|
+
}
|
|
20602
|
+
validateLabel(value) {
|
|
20603
|
+
validateLabel(this, value, {
|
|
20604
|
+
required: true,
|
|
20605
|
+
});
|
|
20606
|
+
}
|
|
20607
|
+
validateOn(value) {
|
|
20608
|
+
if (typeof value === 'object' && value !== null) {
|
|
20609
|
+
const callbacks = {};
|
|
20610
|
+
if (typeof value.onClose === 'function' || value.onClose === true) {
|
|
20611
|
+
callbacks.onClose = value.onClose;
|
|
20612
|
+
}
|
|
20613
|
+
setState(this, '_on', callbacks);
|
|
20614
|
+
}
|
|
20615
|
+
}
|
|
20616
|
+
validateWidth(value) {
|
|
20617
|
+
validateWidth(this, value);
|
|
20618
|
+
}
|
|
20619
|
+
validateVariant(value) {
|
|
20620
|
+
validateDialogVariant(this, value);
|
|
20621
|
+
}
|
|
20622
|
+
componentWillLoad() {
|
|
20623
|
+
this.validateLabel(this._label);
|
|
20624
|
+
this.validateOn(this._on);
|
|
20625
|
+
this.validateWidth(this._width);
|
|
20626
|
+
this.validateVariant(this._variant);
|
|
20627
|
+
}
|
|
20628
|
+
get host() { return getElement(this); }
|
|
20629
|
+
static get watchers() { return {
|
|
20630
|
+
"_label": ["validateLabel"],
|
|
20631
|
+
"_on": ["validateOn"],
|
|
20632
|
+
"_width": ["validateWidth"],
|
|
20633
|
+
"_variant": ["validateVariant"]
|
|
20634
|
+
}; }
|
|
20635
|
+
static get cmpMeta() { return {
|
|
20636
|
+
"$flags$": 260,
|
|
20637
|
+
"$tagName$": "kol-dialog-wc",
|
|
20638
|
+
"$members$": {
|
|
20639
|
+
"_label": [1],
|
|
20640
|
+
"_on": [16],
|
|
20641
|
+
"_width": [1],
|
|
20642
|
+
"_variant": [1],
|
|
20643
|
+
"state": [32],
|
|
20644
|
+
"openModal": [64],
|
|
20645
|
+
"closeModal": [64]
|
|
20646
|
+
},
|
|
20647
|
+
"$listeners$": undefined,
|
|
20648
|
+
"$lazyBundleId$": "-",
|
|
20649
|
+
"$attrsToReflect$": []
|
|
20650
|
+
}; }
|
|
20651
|
+
}
|
|
20652
|
+
|
|
20501
20653
|
const defaultStyleCss$B = "/*\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}\n@layer kol-component {\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-card {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: grid;\n height: 100%;\n overflow: visible;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-template-areas: \"header close\" \"content content\";\n grid-template-columns: 1fr min-content;\n grid-template-rows: min-content 1fr;\n }\n .kol-card__header {\n align-self: start;\n grid-area: header;\n }\n .kol-card__content {\n align-self: stretch;\n grid-area: content;\n }\n .kol-card__close-button {\n grid-area: close;\n }\n .kol-drawer__dialog {\n padding: 0;\n border: none;\n }\n .kol-drawer__wrapper {\n position: fixed;\n overflow: auto;\n }\n .kol-drawer__wrapper--left, .kol-drawer__wrapper--right {\n top: 0;\n max-width: 100vw;\n height: 100vh;\n }\n .kol-drawer__wrapper--left .kol-drawer__content, .kol-drawer__wrapper--right .kol-drawer__content {\n height: 100%;\n }\n .kol-drawer__wrapper--left {\n left: 0;\n }\n .kol-drawer__wrapper--right {\n right: 0;\n }\n .kol-drawer__wrapper--bottom, .kol-drawer__wrapper--top {\n left: 0;\n width: 100vw;\n max-height: 100vh;\n }\n .kol-drawer__wrapper--bottom .kol-drawer__content, .kol-drawer__wrapper--top .kol-drawer__content {\n width: 100%;\n }\n .kol-drawer__wrapper--bottom {\n bottom: 0;\n }\n .kol-drawer__wrapper--top {\n top: 0;\n }\n .kol-drawer__content {\n position: relative;\n }\n}";
|
|
20502
20654
|
|
|
20503
20655
|
class KolDrawer {
|
|
@@ -20544,7 +20696,7 @@ class KolDrawer {
|
|
|
20544
20696
|
} }, hAsync("div", { class: "kol-drawer__content" }, hAsync("slot", null))));
|
|
20545
20697
|
}
|
|
20546
20698
|
render() {
|
|
20547
|
-
return (hAsync(Host, { key: '
|
|
20699
|
+
return (hAsync(Host, { key: 'cfa97c9b25f63360c569b66dae0d10fe881e7964', class: "kol-drawer" }, hAsync("dialog", { key: 'a4baf31338ad1b3f95a51ab35ac260f23b0e891e', "aria-label": this.state._label, class: "kol-drawer__dialog", onCancel: handleCancelOverlay, ref: this.getRef }, this.renderDialogContent())));
|
|
20548
20700
|
}
|
|
20549
20701
|
validateLabel(value) {
|
|
20550
20702
|
validateLabel(this, value, {
|
|
@@ -20649,7 +20801,7 @@ class KolDrawer {
|
|
|
20649
20801
|
}; }
|
|
20650
20802
|
}
|
|
20651
20803
|
|
|
20652
|
-
const defaultStyleCss$A = "/* 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}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\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: 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 }\n .kol-link:
|
|
20804
|
+
const defaultStyleCss$A = "/* 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}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\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: inline-block;\n }\n .kol-link {\n display: inline-flex;\n max-width: fit-content;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-link--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: stretch;\n }\n .kol-link--standalone .kol-link__text {\n display: inline-flex;\n flex: 1 1 100%;\n place-items: center;\n }\n .kol-link .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert {\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}";
|
|
20653
20805
|
|
|
20654
20806
|
class KolForm {
|
|
20655
20807
|
constructor(hostRef) {
|
|
@@ -20697,7 +20849,7 @@ class KolForm {
|
|
|
20697
20849
|
}
|
|
20698
20850
|
render() {
|
|
20699
20851
|
const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
|
|
20700
|
-
return (hAsync(Host, { key: '
|
|
20852
|
+
return (hAsync(Host, { key: '24abdec4e796efe805b3e29fa9f2e4d0189e64d4' }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
|
|
20701
20853
|
}
|
|
20702
20854
|
scrollToErrorList() {
|
|
20703
20855
|
var _a;
|
|
@@ -20787,7 +20939,7 @@ class KolHeading {
|
|
|
20787
20939
|
}
|
|
20788
20940
|
render() {
|
|
20789
20941
|
const { _secondaryHeadline, _label, _level } = this.state;
|
|
20790
|
-
return (hAsync(KolHeadingFc, { key: '
|
|
20942
|
+
return (hAsync(KolHeadingFc, { key: 'e0215bf6a8c6689b9661f08a0216f36bf6d2f332', secondaryHeadline: _secondaryHeadline, level: _level }, _label, hAsync("slot", { key: '1cd10de7df8a97779b57dd91247f6d3505e10f61', name: "expert", slot: "expert" })));
|
|
20791
20943
|
}
|
|
20792
20944
|
static get watchers() { return {
|
|
20793
20945
|
"_label": ["validateLabel"],
|
|
@@ -20832,12 +20984,12 @@ const bem = c();
|
|
|
20832
20984
|
const BEM_CLASS_ICON = bem('kol-icon');
|
|
20833
20985
|
const BEM_CLASS_ICON__ICON = bem('kol-icon', 'icon');
|
|
20834
20986
|
|
|
20835
|
-
const defaultStyleCss$y = "/* forward the rem function */\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=
|
|
20987
|
+
const defaultStyleCss$y = "/* forward the rem function */\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1767994008125\"); /* IE9*/\n src: url(\"kolicons.eot?t=1767994008125#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1767994008125\") format(\"woff2\"), url(\"kolicons.woff?t=1767994008125\") format(\"woff\"), url(\"kolicons.ttf?t=1767994008125\") format(\"truetype\"), url(\"kolicons.svg?t=1767994008125#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\";\n font-size: inherit;\n font-style: normal;\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-version::before {\n content: \"\\ea1a\";\n}\n\n@layer kol-component {\n /* :host implicitly inherits font-size, see below */\n :host {\n color: inherit;\n display: contents;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n}";
|
|
20836
20988
|
|
|
20837
20989
|
class KolIcon {
|
|
20838
20990
|
render() {
|
|
20839
20991
|
const hasAriaLabel = this.state._label.length > 0;
|
|
20840
|
-
return (hAsync(Host, { key: '
|
|
20992
|
+
return (hAsync(Host, { key: '0310e88acca66642d5a2f1b0783c4b51e7d57178', exportparts: "icon", class: BEM_CLASS_ICON }, hAsync("i", { key: 'defda52dda0896dfc3aa3271e34a679cad2d81de', "aria-hidden": hasAriaLabel ? undefined : 'true', "aria-label": hasAriaLabel ? this.state._label : undefined, class: clsx(BEM_CLASS_ICON__ICON, this.state._icons), part: "icon", role: hasAriaLabel ? 'img' : 'presentation' })));
|
|
20841
20993
|
}
|
|
20842
20994
|
constructor(hostRef) {
|
|
20843
20995
|
registerInstance(this, hostRef);
|
|
@@ -20914,7 +21066,7 @@ class KolImage {
|
|
|
20914
21066
|
this.validateSrcset(this._srcset);
|
|
20915
21067
|
}
|
|
20916
21068
|
render() {
|
|
20917
|
-
return (hAsync("img", { key: '
|
|
21069
|
+
return (hAsync("img", { key: 'c17e012e1bef61d097f2b64d9b22714ef02a793e', class: "kol-image", alt: this.state._alt, loading: this.state._loading, sizes: this.state._sizes, src: this.state._src, srcset: this.state._srcset }));
|
|
20918
21070
|
}
|
|
20919
21071
|
static get watchers() { return {
|
|
20920
21072
|
"_alt": ["validateAlt"],
|
|
@@ -21208,9 +21360,9 @@ class KolInputCheckbox {
|
|
|
21208
21360
|
async getValue() {
|
|
21209
21361
|
return this.getModelValue();
|
|
21210
21362
|
}
|
|
21211
|
-
async
|
|
21363
|
+
async focus() {
|
|
21212
21364
|
var _a;
|
|
21213
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
21365
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
21214
21366
|
}
|
|
21215
21367
|
getFormFieldProps() {
|
|
21216
21368
|
return {
|
|
@@ -21259,7 +21411,7 @@ class KolInputCheckbox {
|
|
|
21259
21411
|
return this.state._icons.unchecked;
|
|
21260
21412
|
}
|
|
21261
21413
|
render() {
|
|
21262
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
21414
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'ec5131cbe333e9c70beb3093e6049cd2a7b29ee3' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(FieldControlStateWrapper, Object.assign({ key: '9ca2d1404c837728bc0aa590ae41c9a4f2922286' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(CheckboxStateWrapper, Object.assign({ key: 'f8611e8d234ba85cacf861bb4ef328bfdff24b3f' }, this.getInputProps())))));
|
|
21263
21415
|
}
|
|
21264
21416
|
constructor(hostRef) {
|
|
21265
21417
|
registerInstance(this, hostRef);
|
|
@@ -21433,7 +21585,7 @@ class KolInputCheckbox {
|
|
|
21433
21585
|
"state": [32],
|
|
21434
21586
|
"inputHasFocus": [32],
|
|
21435
21587
|
"getValue": [64],
|
|
21436
|
-
"
|
|
21588
|
+
"focus": [64]
|
|
21437
21589
|
},
|
|
21438
21590
|
"$listeners$": undefined,
|
|
21439
21591
|
"$lazyBundleId$": "-",
|
|
@@ -21471,9 +21623,9 @@ class KolInputColor {
|
|
|
21471
21623
|
var _a;
|
|
21472
21624
|
return (_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.value;
|
|
21473
21625
|
}
|
|
21474
|
-
async
|
|
21626
|
+
async focus() {
|
|
21475
21627
|
var _a;
|
|
21476
|
-
(_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.focus();
|
|
21628
|
+
return Promise.resolve((_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.focus());
|
|
21477
21629
|
}
|
|
21478
21630
|
get hasSuggestions() {
|
|
21479
21631
|
return Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
@@ -21497,7 +21649,7 @@ class KolInputColor {
|
|
|
21497
21649
|
return Object.assign(Object.assign({ state: Object.assign(Object.assign({}, other), { _suggestions: [] }) }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus });
|
|
21498
21650
|
}
|
|
21499
21651
|
render() {
|
|
21500
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
21652
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'd7f090923ef2b8df82a290ee833f2df41827e0a5' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'fb34b66b8a3e2b738126404f243f3e8d8f60518d', state: this.state, class: "kol-input-color__inputs-wrapper" }, hAsync("div", { key: '411e03c780c12cb63d2a8a845d98246dc6e1d988', class: "kol-input-color__inputs-wrapper" }, hAsync(InputStateWrapper, Object.assign({ key: '36e1c82a36db19f6c9d099bfa59c9a700bc9e52a', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), hAsync(InputStateWrapper, Object.assign({ key: 'f78dc8e52058280fd86bc860ce5e5d6156fd2dc2', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
|
|
21501
21653
|
}
|
|
21502
21654
|
constructor(hostRef) {
|
|
21503
21655
|
registerInstance(this, hostRef);
|
|
@@ -21666,7 +21818,7 @@ class KolInputColor {
|
|
|
21666
21818
|
"state": [32],
|
|
21667
21819
|
"inputHasFocus": [32],
|
|
21668
21820
|
"getValue": [64],
|
|
21669
|
-
"
|
|
21821
|
+
"focus": [64]
|
|
21670
21822
|
},
|
|
21671
21823
|
"$listeners$": undefined,
|
|
21672
21824
|
"$lazyBundleId$": "-",
|
|
@@ -21830,9 +21982,9 @@ class KolInputDate {
|
|
|
21830
21982
|
var _a;
|
|
21831
21983
|
return this.inputRef && this.remapValue((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value);
|
|
21832
21984
|
}
|
|
21833
|
-
async
|
|
21985
|
+
async focus() {
|
|
21834
21986
|
var _a;
|
|
21835
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
21987
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
21836
21988
|
}
|
|
21837
21989
|
async reset() {
|
|
21838
21990
|
this.state = Object.assign(Object.assign({}, this.state), { _value: null });
|
|
@@ -21872,7 +22024,7 @@ class KolInputDate {
|
|
|
21872
22024
|
return Object.assign(Object.assign({ ref: this.catchRef, state: this.state }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onChange: this.onChange, onInput: this.onInput });
|
|
21873
22025
|
}
|
|
21874
22026
|
render() {
|
|
21875
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22027
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '59e86a706c43960542852d52a626bef671dffa23' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b54ca89fe36ea8ffd5bf34a8cffb4069cd2988e4', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'ac2aff3346ffe47c2737af4edba6a80d172135d5' }, this.getInputProps())))));
|
|
21876
22028
|
}
|
|
21877
22029
|
constructor(hostRef) {
|
|
21878
22030
|
registerInstance(this, hostRef);
|
|
@@ -22089,7 +22241,7 @@ class KolInputDate {
|
|
|
22089
22241
|
"state": [32],
|
|
22090
22242
|
"inputHasFocus": [32],
|
|
22091
22243
|
"getValue": [64],
|
|
22092
|
-
"
|
|
22244
|
+
"focus": [64],
|
|
22093
22245
|
"reset": [64]
|
|
22094
22246
|
},
|
|
22095
22247
|
"$listeners$": undefined,
|
|
@@ -22223,9 +22375,9 @@ class KolInputEmail {
|
|
|
22223
22375
|
var _a;
|
|
22224
22376
|
return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
|
|
22225
22377
|
}
|
|
22226
|
-
async
|
|
22378
|
+
async focus() {
|
|
22227
22379
|
var _a;
|
|
22228
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
22380
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
22229
22381
|
}
|
|
22230
22382
|
getFormFieldProps() {
|
|
22231
22383
|
return {
|
|
@@ -22249,7 +22401,7 @@ class KolInputEmail {
|
|
|
22249
22401
|
} });
|
|
22250
22402
|
}
|
|
22251
22403
|
render() {
|
|
22252
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22404
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'b928aefae94934a5228743ae822ae084a06020ae' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '1ac6b8e275457032564a4cbcd637832d1dbbd7d1', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '47435cb931d3da58fa1c84db183d04037c6fdb6b' }, this.getInputProps())))));
|
|
22253
22405
|
}
|
|
22254
22406
|
constructor(hostRef) {
|
|
22255
22407
|
registerInstance(this, hostRef);
|
|
@@ -22444,7 +22596,7 @@ class KolInputEmail {
|
|
|
22444
22596
|
"state": [32],
|
|
22445
22597
|
"inputHasFocus": [32],
|
|
22446
22598
|
"getValue": [64],
|
|
22447
|
-
"
|
|
22599
|
+
"focus": [64]
|
|
22448
22600
|
},
|
|
22449
22601
|
"$listeners$": undefined,
|
|
22450
22602
|
"$lazyBundleId$": "-",
|
|
@@ -22481,9 +22633,9 @@ class KolInputFile {
|
|
|
22481
22633
|
var _a;
|
|
22482
22634
|
return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.files;
|
|
22483
22635
|
}
|
|
22484
|
-
async
|
|
22636
|
+
async focus() {
|
|
22485
22637
|
var _a;
|
|
22486
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
22638
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
22487
22639
|
}
|
|
22488
22640
|
async reset() {
|
|
22489
22641
|
this.controller.setFormAssociatedValue('');
|
|
@@ -22511,7 +22663,7 @@ class KolInputFile {
|
|
|
22511
22663
|
} });
|
|
22512
22664
|
}
|
|
22513
22665
|
render() {
|
|
22514
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22666
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'a14988909e629c6489b2ce2f407dda7bae698bf3' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'ba6804552442038f26ce7d4addd67ef09a0b15fd', state: this.state }, hAsync("span", { key: 'bde71a76d0c08a6b4c6147f5668c0e2c15089081', class: clsx('kol-input-container__filename', { 'kol-input-container__filename--has-file': this.hasFileSelected }) }, this.filename), hAsync(InputStateWrapper, Object.assign({ key: '3abd09ca85cfdaee144eb7166eece0a71e8312d5' }, this.getInputProps())), hAsync(KolButtonWcTag, { key: '7736d06eb59743e25bfad68b90cf8d7cf48b85db', class: "kol-input-container__button", _label: this.translateDataBrowseText, _buttonVariant: "primary", _disabled: this._disabled }))));
|
|
22515
22667
|
}
|
|
22516
22668
|
constructor(hostRef) {
|
|
22517
22669
|
registerInstance(this, hostRef);
|
|
@@ -22698,7 +22850,7 @@ class KolInputFile {
|
|
|
22698
22850
|
"state": [32],
|
|
22699
22851
|
"inputHasFocus": [32],
|
|
22700
22852
|
"getValue": [64],
|
|
22701
|
-
"
|
|
22853
|
+
"focus": [64],
|
|
22702
22854
|
"reset": [64]
|
|
22703
22855
|
},
|
|
22704
22856
|
"$listeners$": undefined,
|
|
@@ -22760,9 +22912,9 @@ class KolInputNumber {
|
|
|
22760
22912
|
async getValue() {
|
|
22761
22913
|
return this.remapValue(this.state._value);
|
|
22762
22914
|
}
|
|
22763
|
-
async
|
|
22915
|
+
async focus() {
|
|
22764
22916
|
var _a;
|
|
22765
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
22917
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
22766
22918
|
}
|
|
22767
22919
|
setInitialValueType(value) {
|
|
22768
22920
|
if (this.controller.isNumberString(value)) {
|
|
@@ -22807,24 +22959,30 @@ class KolInputNumber {
|
|
|
22807
22959
|
if (this._disabled || this._readOnly) {
|
|
22808
22960
|
return null;
|
|
22809
22961
|
}
|
|
22810
|
-
return (hAsync("button", { type: "button", tabIndex: -1, class: "kol-input-number__step-button kol-input-number__step-button-up kol-input-container__smart-button", "data-testid": "kol-input-number-step-up", onClick: () => {
|
|
22811
|
-
var _a, _b;
|
|
22962
|
+
return (hAsync("button", { type: "button", tabIndex: -1, class: "kol-input-number__step-button kol-input-number__step-button-up kol-input-container__smart-button", "data-testid": "kol-input-number-step-up", onClick: (event) => {
|
|
22963
|
+
var _a, _b, _c;
|
|
22812
22964
|
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.stepUp();
|
|
22813
|
-
(_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.
|
|
22965
|
+
const newValue = (_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.value;
|
|
22966
|
+
this._value = this.remapValue(newValue === '' ? null : Number(newValue));
|
|
22967
|
+
this.controller.onFacade.onInput(event, true, this._value);
|
|
22968
|
+
(_c = this.inputRef) === null || _c === void 0 ? void 0 : _c.focus();
|
|
22814
22969
|
}, disabled: this._disabled || this._readOnly }, hAsync(KolIconFc, { icons: "kolicon-plus", label: "" })));
|
|
22815
22970
|
}
|
|
22816
22971
|
getStepDownButton() {
|
|
22817
22972
|
if (this._disabled || this._readOnly) {
|
|
22818
22973
|
return null;
|
|
22819
22974
|
}
|
|
22820
|
-
return (hAsync("button", { type: "button", tabIndex: -1, class: "kol-input-number__step-button kol-input-number__step-button-down kol-input-container__smart-button", "data-testid": "kol-input-number-step-down", onClick: () => {
|
|
22821
|
-
var _a, _b;
|
|
22975
|
+
return (hAsync("button", { type: "button", tabIndex: -1, class: "kol-input-number__step-button kol-input-number__step-button-down kol-input-container__smart-button", "data-testid": "kol-input-number-step-down", onClick: (event) => {
|
|
22976
|
+
var _a, _b, _c;
|
|
22822
22977
|
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.stepDown();
|
|
22823
|
-
(_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.
|
|
22978
|
+
const newValue = (_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.value;
|
|
22979
|
+
this._value = this.remapValue(newValue === '' ? null : Number(newValue));
|
|
22980
|
+
this.controller.onFacade.onInput(event, true, this._value);
|
|
22981
|
+
(_c = this.inputRef) === null || _c === void 0 ? void 0 : _c.focus();
|
|
22824
22982
|
}, disabled: this._disabled || this._readOnly }, hAsync(KolIconFc, { icons: "kolicon-minus", label: "" })));
|
|
22825
22983
|
}
|
|
22826
22984
|
render() {
|
|
22827
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22985
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '4f21bbecc49439fa060e1aa1b21eb1ce5bf0757e' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'fc9d7a84d183b451f0f189803217092744086e2c', state: this.state, startAdornment: this.getStepDownButton(), endAdornment: this.getStepUpButton() }, hAsync(InputStateWrapper, Object.assign({ key: '838359548ecca6a0c807475f9ef8d88ffb4dd038' }, this.getInputProps())))));
|
|
22828
22986
|
}
|
|
22829
22987
|
constructor(hostRef) {
|
|
22830
22988
|
registerInstance(this, hostRef);
|
|
@@ -23020,7 +23178,7 @@ class KolInputNumber {
|
|
|
23020
23178
|
"_initialValueType": [32],
|
|
23021
23179
|
"inputHasFocus": [32],
|
|
23022
23180
|
"getValue": [64],
|
|
23023
|
-
"
|
|
23181
|
+
"focus": [64]
|
|
23024
23182
|
},
|
|
23025
23183
|
"$listeners$": undefined,
|
|
23026
23184
|
"$lazyBundleId$": "-",
|
|
@@ -23035,9 +23193,9 @@ class KolInputPassword {
|
|
|
23035
23193
|
var _a;
|
|
23036
23194
|
return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
|
|
23037
23195
|
}
|
|
23038
|
-
async
|
|
23196
|
+
async focus() {
|
|
23039
23197
|
var _a;
|
|
23040
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23198
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
23041
23199
|
}
|
|
23042
23200
|
getFormFieldProps() {
|
|
23043
23201
|
return {
|
|
@@ -23071,7 +23229,7 @@ class KolInputPassword {
|
|
|
23071
23229
|
}, icon: `${this._passwordVisible ? 'kolicon-eye-closed' : 'kolicon-eye'}`, disabled: this._disabled }));
|
|
23072
23230
|
}
|
|
23073
23231
|
render() {
|
|
23074
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23232
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'd6361d33d0044122bb523d59e9f40ab85c189586' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'a814d107185bbd10e0c1a877efbeb0099479e532', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(InputStateWrapper, Object.assign({ key: '446355c1043fd63b01502ec193a65c5087ccd061' }, this.getInputProps())))));
|
|
23075
23233
|
}
|
|
23076
23234
|
constructor(hostRef) {
|
|
23077
23235
|
registerInstance(this, hostRef);
|
|
@@ -23268,7 +23426,7 @@ class KolInputPassword {
|
|
|
23268
23426
|
"_passwordVisible": [32],
|
|
23269
23427
|
"inputHasFocus": [32],
|
|
23270
23428
|
"getValue": [64],
|
|
23271
|
-
"
|
|
23429
|
+
"focus": [64]
|
|
23272
23430
|
},
|
|
23273
23431
|
"$listeners$": undefined,
|
|
23274
23432
|
"$lazyBundleId$": "-",
|
|
@@ -23320,9 +23478,9 @@ class KolInputRadio {
|
|
|
23320
23478
|
async getValue() {
|
|
23321
23479
|
return this._value;
|
|
23322
23480
|
}
|
|
23323
|
-
async
|
|
23481
|
+
async focus() {
|
|
23324
23482
|
var _a;
|
|
23325
|
-
(_a = this.getFocusableInput()) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23483
|
+
return Promise.resolve((_a = this.getFocusableInput()) === null || _a === void 0 ? void 0 : _a.focus());
|
|
23326
23484
|
}
|
|
23327
23485
|
getFocusableInput() {
|
|
23328
23486
|
const options = this.state._options;
|
|
@@ -23359,7 +23517,7 @@ class KolInputRadio {
|
|
|
23359
23517
|
};
|
|
23360
23518
|
}
|
|
23361
23519
|
render() {
|
|
23362
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23520
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '92d8248e7753a62c69731e9df04859569cdced72' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
|
|
23363
23521
|
}
|
|
23364
23522
|
calculateDisabled(option) {
|
|
23365
23523
|
return Boolean(this.state._disabled) || Boolean(option.disabled);
|
|
@@ -23556,7 +23714,7 @@ class KolInputRadio {
|
|
|
23556
23714
|
"state": [32],
|
|
23557
23715
|
"inputHasFocus": [32],
|
|
23558
23716
|
"getValue": [64],
|
|
23559
|
-
"
|
|
23717
|
+
"focus": [64]
|
|
23560
23718
|
},
|
|
23561
23719
|
"$listeners$": undefined,
|
|
23562
23720
|
"$lazyBundleId$": "-",
|
|
@@ -23603,9 +23761,9 @@ class InputRangeController extends InputIconController {
|
|
|
23603
23761
|
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}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\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 {\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--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\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:not(:empty)) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\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 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}";
|
|
23604
23762
|
|
|
23605
23763
|
class KolInputRange {
|
|
23606
|
-
async
|
|
23764
|
+
async focus() {
|
|
23607
23765
|
var _a;
|
|
23608
|
-
(_a = this.refInputNumber) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23766
|
+
return Promise.resolve((_a = this.refInputNumber) === null || _a === void 0 ? void 0 : _a.focus());
|
|
23609
23767
|
}
|
|
23610
23768
|
getSanitizedFloatValue(value) {
|
|
23611
23769
|
const floatValue = parseFloat(value);
|
|
@@ -23675,7 +23833,7 @@ class KolInputRange {
|
|
|
23675
23833
|
const inputsWrapperStyle = {
|
|
23676
23834
|
'--kolibri-input-range--input-number--width': `calc(${String(this.state._max).length}ch + 2em)`,
|
|
23677
23835
|
};
|
|
23678
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23836
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '128521202cad30daac6a5e334513aad511029f3b' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '98d1c89be7699bb28677a790637886806715d8e0', state: this.state }, hAsync("div", { key: '9627b928c7ee9e73ce5f480497ad17c7a033b62c', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, hAsync(InputStateWrapper, Object.assign({ key: 'c36646209ed76278516782cb8ecd3548cb3c37e6', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), hAsync(InputStateWrapper, Object.assign({ key: 'ef934123d89354c534fca7af38ad10219cc82ef6', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && hAsync(SuggestionsFc, { key: '3a2b0903e406bcc81271762351fc2464067fdc0a', id: this.state._id, suggestions: this.state._suggestions }))));
|
|
23679
23837
|
}
|
|
23680
23838
|
constructor(hostRef) {
|
|
23681
23839
|
registerInstance(this, hostRef);
|
|
@@ -23860,7 +24018,7 @@ class KolInputRange {
|
|
|
23860
24018
|
"state": [32],
|
|
23861
24019
|
"_initialValueType": [32],
|
|
23862
24020
|
"inputHasFocus": [32],
|
|
23863
|
-
"
|
|
24021
|
+
"focus": [64],
|
|
23864
24022
|
"getValue": [64]
|
|
23865
24023
|
},
|
|
23866
24024
|
"$listeners$": undefined,
|
|
@@ -23876,9 +24034,9 @@ class KolInputText {
|
|
|
23876
24034
|
var _a;
|
|
23877
24035
|
return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
|
|
23878
24036
|
}
|
|
23879
|
-
async
|
|
24037
|
+
async focus() {
|
|
23880
24038
|
var _a;
|
|
23881
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
24039
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
23882
24040
|
}
|
|
23883
24041
|
async selectionStart() {
|
|
23884
24042
|
var _a;
|
|
@@ -23921,7 +24079,7 @@ class KolInputText {
|
|
|
23921
24079
|
return Object.assign(Object.assign({ ref: this.catchRef, state: this.state, ariaDescribedBy }, this.controller.onFacade), { onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown });
|
|
23922
24080
|
}
|
|
23923
24081
|
render() {
|
|
23924
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
24082
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'ec2cfd8fbf4c25e0c67c2a40dac12689abf21ebc' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '4dbf08a6efd9e6aeba414911e28eb542f1a9f931', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'e72fa71c0713918915a4c99ff36624c413dc2709' }, this.getInputProps())))));
|
|
23925
24083
|
}
|
|
23926
24084
|
constructor(hostRef) {
|
|
23927
24085
|
registerInstance(this, hostRef);
|
|
@@ -24141,7 +24299,7 @@ class KolInputText {
|
|
|
24141
24299
|
"state": [32],
|
|
24142
24300
|
"inputHasFocus": [32],
|
|
24143
24301
|
"getValue": [64],
|
|
24144
|
-
"
|
|
24302
|
+
"focus": [64],
|
|
24145
24303
|
"selectionStart": [64],
|
|
24146
24304
|
"selectioconEnd": [64],
|
|
24147
24305
|
"setSelectionRange": [64],
|
|
@@ -24186,7 +24344,7 @@ class KolKolibri {
|
|
|
24186
24344
|
}
|
|
24187
24345
|
render() {
|
|
24188
24346
|
const fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
|
|
24189
|
-
return (hAsync("svg", { key: '
|
|
24347
|
+
return (hAsync("svg", { key: '4c7a91b347f1030b6243bcd73fe80f18ea4870d9', class: "kol-kolibri", role: "img", "aria-label": this.translateKolibriLogo, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", fill: fillColor }, hAsync("path", { key: 'acfbbaa7bac5f630eabf483f3072c293d23ced9c', d: "M353 322L213 304V434L353 322Z" }), hAsync("path", { key: '950473ab86c2b6101bef184b6388a0c9a313fbb3', d: "M209 564V304L149 434L209 564Z" }), hAsync("path", { key: '113e568b1cbf311a9f1c656526d7712c6a0dc129', d: "M357 316L417 250L361 210L275 244L357 316Z" }), hAsync("path", { key: '23b033e7e9884099469fea1ca2fef1af56a2ea29', d: "M329 218L237 92L250 222L272 241L329 218Z" }), hAsync("path", { key: '61c8946c0a73d39039b3008f29a9f1750ed90af2', d: "M353 318L35 36L213 300L353 318Z" }), hAsync("path", { key: '8c76c669b7edbfdada18a00e82c8760c3eb55987', d: "M391 286L565 272L421 252L391 286Z" }), this.state._labeled === true && (hAsync("text", { key: '01f6d92e065a1b17072de2438671cdd208a416f2', class: "kol-kolibri__text", x: "250", y: "525", fill: fillColor }, "KoliBri"))));
|
|
24190
24348
|
}
|
|
24191
24349
|
validateColor(value) {
|
|
24192
24350
|
validateColor(this, value, {
|
|
@@ -24226,7 +24384,7 @@ class KolKolibri {
|
|
|
24226
24384
|
}; }
|
|
24227
24385
|
}
|
|
24228
24386
|
|
|
24229
|
-
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}\n@layer kol-component {\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: 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 }\n .kol-link:
|
|
24387
|
+
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}\n@layer kol-component {\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: inline-block;\n }\n .kol-link {\n display: inline-flex;\n max-width: fit-content;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-link--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: stretch;\n }\n .kol-link--standalone .kol-link__text {\n display: inline-flex;\n flex: 1 1 100%;\n place-items: center;\n }\n .kol-link .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
24230
24388
|
|
|
24231
24389
|
class KolLink {
|
|
24232
24390
|
constructor(hostRef) {
|
|
@@ -24239,12 +24397,12 @@ class KolLink {
|
|
|
24239
24397
|
this._inline = true;
|
|
24240
24398
|
this._tooltipAlign = 'right';
|
|
24241
24399
|
}
|
|
24242
|
-
async
|
|
24400
|
+
async focus() {
|
|
24243
24401
|
var _a;
|
|
24244
|
-
|
|
24402
|
+
return Promise.resolve((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
24245
24403
|
}
|
|
24246
24404
|
render() {
|
|
24247
|
-
return (hAsync(KolLinkWcTag, { key: '
|
|
24405
|
+
return (hAsync(KolLinkWcTag, { key: '5e0f4af8177fdafc0ba16a394edc95f5d6893700', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _inline: this._inline, _label: this._label, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: 'c8d72e1786756ae591534397e749430e1c45d875', name: "expert", slot: "expert" })));
|
|
24248
24406
|
}
|
|
24249
24407
|
static get style() { return {
|
|
24250
24408
|
default: defaultStyleCss$l
|
|
@@ -24270,7 +24428,7 @@ class KolLink {
|
|
|
24270
24428
|
"_shortKey": [1, "_short-key"],
|
|
24271
24429
|
"_target": [1],
|
|
24272
24430
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
24273
|
-
"
|
|
24431
|
+
"focus": [64]
|
|
24274
24432
|
},
|
|
24275
24433
|
"$listeners$": undefined,
|
|
24276
24434
|
"$lazyBundleId$": "-",
|
|
@@ -24291,12 +24449,12 @@ class KolLinkButton {
|
|
|
24291
24449
|
this._tooltipAlign = 'right';
|
|
24292
24450
|
this._variant = 'normal';
|
|
24293
24451
|
}
|
|
24294
|
-
async
|
|
24452
|
+
async focus() {
|
|
24295
24453
|
var _a;
|
|
24296
|
-
|
|
24454
|
+
return Promise.resolve((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
24297
24455
|
}
|
|
24298
24456
|
render() {
|
|
24299
|
-
return (hAsync(KolLinkWcTag, { key: '
|
|
24457
|
+
return (hAsync(KolLinkWcTag, { key: 'a9d694a90a5814edc15412794c3af252fdbc7665', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign, _buttonVariant: this._variant }, hAsync("slot", { key: 'fbbcf6a131b99d68279875ee92e8f1a5273270c9', name: "expert", slot: "expert" })));
|
|
24300
24458
|
}
|
|
24301
24459
|
static get style() { return {
|
|
24302
24460
|
default: defaultStyleCss$k
|
|
@@ -24322,7 +24480,7 @@ class KolLinkButton {
|
|
|
24322
24480
|
"_target": [1],
|
|
24323
24481
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
24324
24482
|
"_variant": [1],
|
|
24325
|
-
"
|
|
24483
|
+
"focus": [64]
|
|
24326
24484
|
},
|
|
24327
24485
|
"$listeners$": undefined,
|
|
24328
24486
|
"$lazyBundleId$": "-",
|
|
@@ -24389,16 +24547,16 @@ class KolLinkWc {
|
|
|
24389
24547
|
_icons: {},
|
|
24390
24548
|
};
|
|
24391
24549
|
}
|
|
24392
|
-
async
|
|
24550
|
+
async focus() {
|
|
24393
24551
|
var _a;
|
|
24394
|
-
(_a = this.anchorRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
24552
|
+
return Promise.resolve((_a = this.anchorRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
24395
24553
|
}
|
|
24396
24554
|
render() {
|
|
24397
24555
|
var _a;
|
|
24398
24556
|
const { isExternal, tagAttrs } = this.getRenderValues();
|
|
24399
24557
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
24400
24558
|
const ariaDescription = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim();
|
|
24401
|
-
return (hAsync(Host, { key: '
|
|
24559
|
+
return (hAsync(Host, { key: '036d5449e5e5ba234434e744d8af66052329a192' }, hAsync("a", Object.assign({ key: 'b20d668b61b1f0c279f5cf37d434927c69478891', ref: this.catchRef }, 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'
|
|
24402
24560
|
? `${this.state._label}${isExternal ? ` (${this.translateOpenLinkInTab})` : ''}`
|
|
24403
24561
|
: undefined, "aria-keyshortcuts": this.state._shortKey, class: clsx('kol-link', {
|
|
24404
24562
|
'kol-link--disabled': this.state._disabled === true,
|
|
@@ -24408,7 +24566,7 @@ class KolLinkWc {
|
|
|
24408
24566
|
'kol-link--inline': this.state._inline === true,
|
|
24409
24567
|
'kol-link--standalone': this.state._inline === false,
|
|
24410
24568
|
[this.state._customClass]: this.state._buttonVariant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
24411
|
-
}) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: '
|
|
24569
|
+
}) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: '90a4bc4ffd0a6b87c9097120d3539bc69bdda156', 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: '1aca2a1ed6caf2a68f7f6260b328ec7b6c993794', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: 'c20d6e6b9e7d09c6ff48a059f9ec0388076c721e', 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: '5f5b325f8e61e71f666bf45e067b1a487a8e296e', "aria-hidden": "true", class: "kol-link__tooltip", ref: (ref) => (this.tooltipRef = ref), hidden: hasExpertSlot, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href }))));
|
|
24412
24570
|
}
|
|
24413
24571
|
validateAccessKey(value) {
|
|
24414
24572
|
validateAccessKey(this, value);
|
|
@@ -24559,7 +24717,7 @@ class KolLinkWc {
|
|
|
24559
24717
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
24560
24718
|
"_buttonVariant": [1, "_button-variant"],
|
|
24561
24719
|
"state": [32],
|
|
24562
|
-
"
|
|
24720
|
+
"focus": [64]
|
|
24563
24721
|
},
|
|
24564
24722
|
"$listeners$": undefined,
|
|
24565
24723
|
"$lazyBundleId$": "-",
|
|
@@ -24567,89 +24725,28 @@ class KolLinkWc {
|
|
|
24567
24725
|
}; }
|
|
24568
24726
|
}
|
|
24569
24727
|
|
|
24570
|
-
const
|
|
24571
|
-
const validateModalVariant = (component, value) => {
|
|
24572
|
-
watchValidator(component, '_variant', (value) => typeof value === 'string' && ModalVariantPropTypeOptions.includes(value), new Set(ModalVariantPropTypeOptions), value);
|
|
24573
|
-
};
|
|
24574
|
-
|
|
24575
|
-
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}\n@layer kol-component {\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-card {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: grid;\n height: 100%;\n overflow: visible;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-template-areas: \"header close\" \"content content\";\n grid-template-columns: 1fr min-content;\n grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n align-self: start;\n grid-area: header;\n}\n.kol-card__content {\n align-self: stretch;\n grid-area: content;\n}\n.kol-card__close-button {\n grid-area: close;\n}\n\n@layer kol-component {\n .kol-modal {\n min-height: var(--a11y-min-size);\n padding: 0;\n border: 0;\n }\n .kol-modal::backdrop {\n background-color: rgba(0, 0, 0, 0.1);\n }\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}";
|
|
24728
|
+
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}\n@layer kol-component {\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-card {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: grid;\n height: 100%;\n overflow: visible;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-template-areas: \"header close\" \"content content\";\n grid-template-columns: 1fr min-content;\n grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n align-self: start;\n grid-area: header;\n}\n.kol-card__content {\n align-self: stretch;\n grid-area: content;\n}\n.kol-card__close-button {\n grid-area: close;\n}\n\n@layer kol-component {\n .kol-dialog,\n .kol-modal {\n min-height: var(--a11y-min-size);\n padding: 0;\n border: 0;\n }\n .kol-dialog::backdrop,\n .kol-modal::backdrop {\n background-color: rgba(0, 0, 0, 0.1);\n }\n .kol-dialog__close-button,\n .kol-modal__close-button {\n position: absolute;\n top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n z-index: 1;\n }\n}";
|
|
24576
24729
|
|
|
24577
24730
|
class KolModal {
|
|
24578
24731
|
constructor(hostRef) {
|
|
24579
24732
|
registerInstance(this, hostRef);
|
|
24580
|
-
this.
|
|
24581
|
-
|
|
24582
|
-
await this.closeModal();
|
|
24583
|
-
},
|
|
24733
|
+
this.catchRef = (ref) => {
|
|
24734
|
+
this.dialogRef = ref;
|
|
24584
24735
|
};
|
|
24585
24736
|
this._width = '100%';
|
|
24586
24737
|
this._variant = 'blank';
|
|
24587
|
-
this.state = {
|
|
24588
|
-
_label: '',
|
|
24589
|
-
_width: '100%',
|
|
24590
|
-
};
|
|
24591
|
-
}
|
|
24592
|
-
disconnectedCallback() {
|
|
24593
|
-
void this.closeModal();
|
|
24594
|
-
}
|
|
24595
|
-
handleNativeCloseEvent() {
|
|
24596
|
-
var _a, _b;
|
|
24597
|
-
(_b = (_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
24598
|
-
if (this.host) {
|
|
24599
|
-
dispatchDomEvent(this.host, KolEvent.close);
|
|
24600
|
-
}
|
|
24601
24738
|
}
|
|
24602
24739
|
async openModal() {
|
|
24603
24740
|
var _a;
|
|
24604
|
-
(_a = this.
|
|
24741
|
+
await ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.openModal());
|
|
24605
24742
|
}
|
|
24606
24743
|
async closeModal() {
|
|
24607
|
-
var _a
|
|
24608
|
-
|
|
24744
|
+
var _a;
|
|
24745
|
+
await ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.closeModal());
|
|
24609
24746
|
}
|
|
24610
24747
|
render() {
|
|
24611
|
-
return (hAsync(
|
|
24612
|
-
'kol-modal__blank': this.state._variant === 'blank',
|
|
24613
|
-
'kol-modal__card': this.state._variant === 'card',
|
|
24614
|
-
}), onCancel: handleCancelOverlay, onClose: this.handleNativeCloseEvent.bind(this), ref: (el) => {
|
|
24615
|
-
this.refDialog = el;
|
|
24616
|
-
}, style: {
|
|
24617
|
-
width: this.state._width,
|
|
24618
|
-
} }, this.state._variant === 'blank' && hAsync("slot", { key: 'ed6110b0ddd43e0d544c3420965e93253b4c37db' }), this.state._variant === 'card' && (hAsync(KolCardWcTag, { key: '8d041e7c444343a6d5fe9fe7dffc08837bfbefb6', _label: this.state._label, _hasCloser: true, _on: this.on }, hAsync("slot", { key: '804e674e6376a29f6c2e357a70a5603f3ce777c1' })))));
|
|
24619
|
-
}
|
|
24620
|
-
validateLabel(value) {
|
|
24621
|
-
validateLabel(this, value, {
|
|
24622
|
-
required: true,
|
|
24623
|
-
});
|
|
24624
|
-
}
|
|
24625
|
-
validateOn(value) {
|
|
24626
|
-
if (typeof value === 'object' && value !== null) {
|
|
24627
|
-
const callbacks = {};
|
|
24628
|
-
if (typeof value.onClose === 'function' || value.onClose === true) {
|
|
24629
|
-
callbacks.onClose = value.onClose;
|
|
24630
|
-
}
|
|
24631
|
-
setState(this, '_on', callbacks);
|
|
24632
|
-
}
|
|
24748
|
+
return (hAsync(KolDialogWcTag, { key: '127b4504fccd6dd10ac9fc7fa198102f2e774ed5', ref: this.catchRef, _label: this._label, _on: this._on, _variant: this._variant, _width: this._width }, hAsync("slot", { key: '663f015f3f2f5b067539d9f7789289ca55e79225' })));
|
|
24633
24749
|
}
|
|
24634
|
-
validateWidth(value) {
|
|
24635
|
-
validateWidth(this, value);
|
|
24636
|
-
}
|
|
24637
|
-
validateVariant(value) {
|
|
24638
|
-
validateModalVariant(this, value);
|
|
24639
|
-
}
|
|
24640
|
-
componentWillLoad() {
|
|
24641
|
-
this.validateLabel(this._label);
|
|
24642
|
-
this.validateOn(this._on);
|
|
24643
|
-
this.validateWidth(this._width);
|
|
24644
|
-
this.validateVariant(this._variant);
|
|
24645
|
-
}
|
|
24646
|
-
get host() { return getElement(this); }
|
|
24647
|
-
static get watchers() { return {
|
|
24648
|
-
"_label": ["validateLabel"],
|
|
24649
|
-
"_on": ["validateOn"],
|
|
24650
|
-
"_width": ["validateWidth"],
|
|
24651
|
-
"_variant": ["validateVariant"]
|
|
24652
|
-
}; }
|
|
24653
24750
|
static get style() { return {
|
|
24654
24751
|
default: defaultStyleCss$j
|
|
24655
24752
|
}; }
|
|
@@ -24661,7 +24758,6 @@ class KolModal {
|
|
|
24661
24758
|
"_on": [16],
|
|
24662
24759
|
"_width": [1],
|
|
24663
24760
|
"_variant": [1],
|
|
24664
|
-
"state": [32],
|
|
24665
24761
|
"openModal": [64],
|
|
24666
24762
|
"closeModal": [64]
|
|
24667
24763
|
},
|
|
@@ -24671,7 +24767,7 @@ class KolModal {
|
|
|
24671
24767
|
}; }
|
|
24672
24768
|
}
|
|
24673
24769
|
|
|
24674
|
-
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}\n@layer kol-component {\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-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-
|
|
24770
|
+
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}\n@layer kol-component {\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-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}";
|
|
24675
24771
|
|
|
24676
24772
|
const entryIsLink = (entryProps) => {
|
|
24677
24773
|
return typeof entryProps._href === 'string';
|
|
@@ -24799,9 +24895,9 @@ class KolNav {
|
|
|
24799
24895
|
}
|
|
24800
24896
|
render() {
|
|
24801
24897
|
const collapsible = this.state._collapsible === true;
|
|
24802
|
-
return (hAsync("div", { key: '
|
|
24898
|
+
return (hAsync("div", { key: 'c5d68a1e9267bf338e45d238b9f7661e44a2e378', class: clsx('kol-nav', {
|
|
24803
24899
|
'kol-nav--is-compact': this.state._hideLabel,
|
|
24804
|
-
}) }, hAsync("nav", { key: '
|
|
24900
|
+
}) }, hAsync("nav", { key: '17473413770976a81f562e3bd9f17ae11b654b2b', "aria-label": this.state._label, class: "kol-nav__navigation", id: this.navId }, hAsync(this.linkList, { key: '0623790874a038d9df84ffb301efea8559ee0a4c', collapsible: collapsible, deep: 0, links: this.state._links, id: this.listId })), this.state._hasCompactButton && (hAsync("div", { key: '6d54e0a8ac6af286ecc70abc98f076f481bab771', class: "kol-nav__compact" }, hAsync(KolButtonWcTag, { key: '6a37dc386c94294196ce9543a132c6d63406d7dd', 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: {
|
|
24805
24901
|
onClick: () => {
|
|
24806
24902
|
this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: !this.state._hideLabel });
|
|
24807
24903
|
},
|
|
@@ -24888,7 +24984,7 @@ class KolPagination {
|
|
|
24888
24984
|
this._tooltipAlign = 'top';
|
|
24889
24985
|
}
|
|
24890
24986
|
render() {
|
|
24891
|
-
return (hAsync(KolPaginationWcTag, { key: '
|
|
24987
|
+
return (hAsync(KolPaginationWcTag, { key: '1676901a636d4529bff96b9b85e49977f93beaad', _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 }));
|
|
24892
24988
|
}
|
|
24893
24989
|
static get style() { return {
|
|
24894
24990
|
default: defaultStyleCss$h
|
|
@@ -24916,10 +25012,10 @@ class KolPagination {
|
|
|
24916
25012
|
}
|
|
24917
25013
|
|
|
24918
25014
|
const leftDoubleArrowIcon = {
|
|
24919
|
-
left: 'kolicon-chevron-left',
|
|
25015
|
+
left: 'kolicon-chevron-double-left',
|
|
24920
25016
|
};
|
|
24921
25017
|
const leftSingleArrow = {
|
|
24922
|
-
left: 'kolicon-chevron-
|
|
25018
|
+
left: 'kolicon-chevron-left',
|
|
24923
25019
|
};
|
|
24924
25020
|
const rightSingleArrowIcon = {
|
|
24925
25021
|
right: 'kolicon-chevron-right',
|
|
@@ -27079,7 +27175,7 @@ class KolPopover {
|
|
|
27079
27175
|
}
|
|
27080
27176
|
}
|
|
27081
27177
|
render() {
|
|
27082
|
-
return (hAsync(Host, { key: '
|
|
27178
|
+
return (hAsync(Host, { key: '2f8909c00120d1d00d56f0a891bf137e968b482f', ref: this.catchHostAndTriggerElement, class: "kol-popover" }, hAsync("div", { key: 'd04819e7919b23042debe87158f189889c95e9ca', class: clsx('kol-popover__content', { 'kol-popover__content--visible': this.state._visible }), ref: this.catchPopoverElement, popover: "auto" }, hAsync("div", { key: 'e5a08ef22c2ee7c3dc8f1ca25a9b34a14f6076b9', class: clsx('kol-popover__arrow', `kol-popover__arrow--${this.state._align}`), ref: this.catchArrowElement }), hAsync("slot", { key: 'e7d525b678723312037a84233c3d810663c8d4cd' }))));
|
|
27083
27179
|
}
|
|
27084
27180
|
validateAlign(value) {
|
|
27085
27181
|
validateAlign(this, value);
|
|
@@ -27168,12 +27264,12 @@ let KolPopoverButton$1 = class KolPopoverButton {
|
|
|
27168
27264
|
var _a;
|
|
27169
27265
|
void ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.showPopover());
|
|
27170
27266
|
}
|
|
27171
|
-
async
|
|
27267
|
+
async focus() {
|
|
27172
27268
|
var _a;
|
|
27173
|
-
|
|
27269
|
+
return Promise.resolve((_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus());
|
|
27174
27270
|
}
|
|
27175
27271
|
render() {
|
|
27176
|
-
return (hAsync(KolPopoverButtonWcTag, { key: '
|
|
27272
|
+
return (hAsync(KolPopoverButtonWcTag, { key: '8f5494e308245dc5cf00f3c44e76954dc1ccb8ba', ref: this.catchRef, _accessKey: this._accessKey, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _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: '945bd61cfb5ba388bf76a9aaa44c4640cac733c6', name: "expert", slot: "expert" }), hAsync("slot", { key: '349bf90ff34df330916d1aad0a40c79cce1c32bc' })));
|
|
27177
27273
|
}
|
|
27178
27274
|
static get style() { return {
|
|
27179
27275
|
default: defaultStyleCss$g
|
|
@@ -27183,9 +27279,7 @@ let KolPopoverButton$1 = class KolPopoverButton {
|
|
|
27183
27279
|
"$tagName$": "kol-popover-button",
|
|
27184
27280
|
"$members$": {
|
|
27185
27281
|
"_accessKey": [1, "_access-key"],
|
|
27186
|
-
"_ariaControls": [1, "_aria-controls"],
|
|
27187
27282
|
"_ariaDescription": [1, "_aria-description"],
|
|
27188
|
-
"_ariaSelected": [4, "_aria-selected"],
|
|
27189
27283
|
"_customClass": [1, "_custom-class"],
|
|
27190
27284
|
"_disabled": [4],
|
|
27191
27285
|
"_hideLabel": [4, "_hide-label"],
|
|
@@ -27194,9 +27288,7 @@ let KolPopoverButton$1 = class KolPopoverButton {
|
|
|
27194
27288
|
"_id": [1],
|
|
27195
27289
|
"_label": [1],
|
|
27196
27290
|
"_name": [1],
|
|
27197
|
-
"_on": [16],
|
|
27198
27291
|
"_popoverAlign": [1, "_popover-align"],
|
|
27199
|
-
"_role": [1],
|
|
27200
27292
|
"_shortKey": [1, "_short-key"],
|
|
27201
27293
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
27202
27294
|
"_tabIndex": [2, "_tab-index"],
|
|
@@ -27206,7 +27298,7 @@ let KolPopoverButton$1 = class KolPopoverButton {
|
|
|
27206
27298
|
"_variant": [1],
|
|
27207
27299
|
"hidePopover": [64],
|
|
27208
27300
|
"showPopover": [64],
|
|
27209
|
-
"
|
|
27301
|
+
"focus": [64]
|
|
27210
27302
|
},
|
|
27211
27303
|
"$listeners$": undefined,
|
|
27212
27304
|
"$lazyBundleId$": "-",
|
|
@@ -27217,6 +27309,9 @@ let KolPopoverButton$1 = class KolPopoverButton {
|
|
|
27217
27309
|
class KolPopoverButton {
|
|
27218
27310
|
constructor(hostRef) {
|
|
27219
27311
|
registerInstance(this, hostRef);
|
|
27312
|
+
this.on = {
|
|
27313
|
+
onClick: this.handleButtonClick.bind(this),
|
|
27314
|
+
};
|
|
27220
27315
|
this.state = {
|
|
27221
27316
|
_label: '',
|
|
27222
27317
|
_popoverAlign: 'bottom',
|
|
@@ -27239,9 +27334,9 @@ class KolPopoverButton {
|
|
|
27239
27334
|
var _a;
|
|
27240
27335
|
void ((_a = this.refPopover) === null || _a === void 0 ? void 0 : _a.showPopover());
|
|
27241
27336
|
}
|
|
27242
|
-
async
|
|
27337
|
+
async focus() {
|
|
27243
27338
|
var _a;
|
|
27244
|
-
|
|
27339
|
+
return Promise.resolve((_a = this.refButton) === null || _a === void 0 ? void 0 : _a.focus());
|
|
27245
27340
|
}
|
|
27246
27341
|
handleBeforeToggle(event) {
|
|
27247
27342
|
if (event.newState === 'closed') {
|
|
@@ -27297,11 +27392,11 @@ class KolPopoverButton {
|
|
|
27297
27392
|
(_c = this.cleanupAutoPositioning) === null || _c === void 0 ? void 0 : _c.call(this);
|
|
27298
27393
|
}
|
|
27299
27394
|
render() {
|
|
27300
|
-
return (hAsync("div", { key: '
|
|
27395
|
+
return (hAsync("div", { key: '05eb5491e975895b8f80ebcf9b079efc6a3ad442', class: clsx('kol-popover-button', {
|
|
27301
27396
|
'kol-popover-button--open': this.popoverOpen,
|
|
27302
27397
|
'kol-popover-button--inline': this.state._inline === true,
|
|
27303
27398
|
'kol-popover-button--standalone': this.state._inline === false,
|
|
27304
|
-
}) }, hAsync(KolButtonWcTag, { key: '
|
|
27399
|
+
}) }, hAsync(KolButtonWcTag, { key: '7e53bed4c4d0dbdeaf3cb335d91c44e4ffcbd882', _accessKey: this._accessKey, "_aria-controls": "popover", _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _ariaHasPopup: 'dialog', _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, _buttonVariant: this._variant, "data-testid": "popover-button", class: "kol-popover-button__button", ref: (element) => (this.refButton = element) }, hAsync("slot", { key: '0d82bdca912994fa708ce548f36fd041ca620bbb', name: "expert", slot: "expert" })), hAsync("div", { key: 'aeb5ed2632a1136020e2397bdaacfe5178364608', ref: (element) => (this.refPopover = element), "data-testid": "popover-content", popover: "auto", id: "popover", class: "kol-popover-button__popover" }, hAsync("slot", { key: 'a2e4cb60931f24e3f67a0ee39bedc921605ef55f' }))));
|
|
27305
27400
|
}
|
|
27306
27401
|
validateInline(value) {
|
|
27307
27402
|
validateInline(this, value, {
|
|
@@ -27324,9 +27419,7 @@ class KolPopoverButton {
|
|
|
27324
27419
|
"$tagName$": "kol-popover-button-wc",
|
|
27325
27420
|
"$members$": {
|
|
27326
27421
|
"_accessKey": [1, "_access-key"],
|
|
27327
|
-
"_ariaControls": [1, "_aria-controls"],
|
|
27328
27422
|
"_ariaDescription": [1, "_aria-description"],
|
|
27329
|
-
"_ariaSelected": [4, "_aria-selected"],
|
|
27330
27423
|
"_customClass": [1, "_custom-class"],
|
|
27331
27424
|
"_disabled": [4],
|
|
27332
27425
|
"_hideLabel": [4, "_hide-label"],
|
|
@@ -27335,9 +27428,7 @@ class KolPopoverButton {
|
|
|
27335
27428
|
"_inline": [4],
|
|
27336
27429
|
"_label": [1],
|
|
27337
27430
|
"_name": [1],
|
|
27338
|
-
"_on": [16],
|
|
27339
27431
|
"_popoverAlign": [1, "_popover-align"],
|
|
27340
|
-
"_role": [1],
|
|
27341
27432
|
"_shortKey": [1, "_short-key"],
|
|
27342
27433
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
27343
27434
|
"_tabIndex": [2, "_tab-index"],
|
|
@@ -27350,7 +27441,7 @@ class KolPopoverButton {
|
|
|
27350
27441
|
"popoverOpen": [32],
|
|
27351
27442
|
"hidePopover": [64],
|
|
27352
27443
|
"showPopover": [64],
|
|
27353
|
-
"
|
|
27444
|
+
"focus": [64]
|
|
27354
27445
|
},
|
|
27355
27446
|
"$listeners$": undefined,
|
|
27356
27447
|
"$lazyBundleId$": "-",
|
|
@@ -27394,10 +27485,10 @@ class KolProgress {
|
|
|
27394
27485
|
const isPercentage = this.state._unit === '%';
|
|
27395
27486
|
const liveProgressValue = isPercentage ? `${Math.round((this.state._liveValue / this.state._max) * 100)}` : this.state._liveValue;
|
|
27396
27487
|
const displayValue = isPercentage ? Math.round((this.state._value / this.state._max) * 100) : this.state._value;
|
|
27397
|
-
return (hAsync("div", { key: '
|
|
27488
|
+
return (hAsync("div", { key: 'fc7f5cdf4798854b0b41945c69f7feb3af75d50c', class: "kol-progress" }, hAsync("div", { key: '5ab61be685c82aceb117af33b6ad578dc12a3775', "aria-hidden": "true", class: {
|
|
27398
27489
|
'kol-progress__cycle': this.state._variant === 'cycle',
|
|
27399
27490
|
'kol-progress__bar': this.state._variant === 'bar',
|
|
27400
|
-
} }, this.state._variant === 'bar' && this.state._label && hAsync("div", { key: '
|
|
27491
|
+
} }, this.state._variant === 'bar' && this.state._label && hAsync("div", { key: 'f9917e700dc7d6c3b78f705b600b499529bbb2b7', class: "kol-progress__bar-label" }, this.state._label), createProgressSVG(this.state), this.state._variant === 'cycle' && (hAsync("div", { key: 'bb719478ebe2e5226e538bc8d07207d5c6cbc1c1', class: "kol-progress__cycle-text" }, this.state._label && hAsync("div", { key: '777582abb2582950a50e77e1d477dfe52a2abbec', class: "kol-progress__cycle-label" }, this.state._label), hAsync("div", { key: 'a5a04f2c22a3536ea8e95bc5d858f9b1ddb3b462', class: "kol-progress__cycle-value" }, `${displayValue} ${this.state._unit}`))), this.state._variant === 'bar' && (hAsync("div", { key: 'b89f4d178376b85b78f085e56aacc80df07f44b1', class: "kol-progress__bar-value", style: { width: `${`${(isPercentage ? 100 : this.state._max) + 1}`.length}ch` } }, displayValue)), this.state._variant === 'bar' && hAsync("div", { key: 'd35b3c9d91c8a78a994da485d80e8faf29cb23b5', class: "kol-progress__bar-unit" }, this.state._unit)), hAsync("progress", { key: 'b4d92e59e667619e4c6aadd8cbf0ae20f1d325ea', class: "visually-hidden", "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: '73d21662ce19a724bede515ff55ec4f62bcd6fa0', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, isPercentage ? `${liveProgressValue} %` : `${liveProgressValue} von ${this.state._max} ${this.state._unit}`)));
|
|
27401
27492
|
}
|
|
27402
27493
|
validateLabel(value) {
|
|
27403
27494
|
validateLabel(this, value);
|
|
@@ -27501,7 +27592,7 @@ class KolQuote {
|
|
|
27501
27592
|
}
|
|
27502
27593
|
render() {
|
|
27503
27594
|
const hasExpertSlot = showExpertSlot(this.state._quote);
|
|
27504
|
-
return (hAsync("figure", { key: '
|
|
27595
|
+
return (hAsync("figure", { key: '5a572554f7b6414184f1fc8d65d7ac53b75cc4d9', class: clsx('kol-quote', `kol-quote--${this.state._variant}`) }, this.state._variant === 'block' ? (hAsync("blockquote", { class: "kol-quote__blockquote", cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { class: "kol-quote__quote", cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))), typeof this.state._label === 'string' && this.state._label.length > 0 && (hAsync("figcaption", { key: '788f491a43a848e2c36902775577f562618fd3a9', class: "kol-quote__figcaption" }, hAsync("cite", { key: '2929cd673b3d0f545214c6a64f91d850fe54d896', class: "kol-quote__cite" }, hAsync(KolLinkTag, { key: '905b4a78d4d9d3cba9c85072edd8b1af148c2470', _href: this.state._href, _label: this.state._label, _target: "_blank" }))))));
|
|
27505
27596
|
}
|
|
27506
27597
|
static get watchers() { return {
|
|
27507
27598
|
"_label": ["validateLabel"],
|
|
@@ -27549,12 +27640,12 @@ class KolSelect {
|
|
|
27549
27640
|
var _a;
|
|
27550
27641
|
return (_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.getValue();
|
|
27551
27642
|
}
|
|
27552
|
-
async
|
|
27643
|
+
async focus() {
|
|
27553
27644
|
var _a;
|
|
27554
|
-
|
|
27645
|
+
return Promise.resolve((_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
27555
27646
|
}
|
|
27556
27647
|
render() {
|
|
27557
|
-
return (hAsync(Host, { key: '
|
|
27648
|
+
return (hAsync(Host, { key: 'a926c7058a8e4d63d2eac02fa4cfb0cc72613117', class: "kol-select" }, hAsync(KolSelectWcTag, { key: 'ecd27ebee8519a944361c7a0184f413f99d3c3ad', ref: this.catchRef, _accessKey: this._accessKey, _disabled: this._disabled, _hideLabel: this._hideLabel, _hint: this._hint, _icons: this._icons, _id: this._id, _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: 'eb93d88c9ed9dc97d1d14caac719a4760d7a6571', name: "expert", slot: "expert" }))));
|
|
27558
27649
|
}
|
|
27559
27650
|
static get style() { return {
|
|
27560
27651
|
default: defaultStyleCss$d
|
|
@@ -27585,7 +27676,7 @@ class KolSelect {
|
|
|
27585
27676
|
"_touched": [1540],
|
|
27586
27677
|
"_value": [1544],
|
|
27587
27678
|
"getValue": [64],
|
|
27588
|
-
"
|
|
27679
|
+
"focus": [64]
|
|
27589
27680
|
},
|
|
27590
27681
|
"$listeners$": undefined,
|
|
27591
27682
|
"$lazyBundleId$": "-",
|
|
@@ -27788,9 +27879,9 @@ class KolSelectWc {
|
|
|
27788
27879
|
return Array.isArray(this.state._value) && this.state._value.length > 0 ? this.state._value[0] : this.state._value;
|
|
27789
27880
|
}
|
|
27790
27881
|
}
|
|
27791
|
-
async
|
|
27882
|
+
async focus() {
|
|
27792
27883
|
var _a;
|
|
27793
|
-
(_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
27884
|
+
return Promise.resolve((_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
27794
27885
|
}
|
|
27795
27886
|
getFormFieldProps() {
|
|
27796
27887
|
return {
|
|
@@ -27813,11 +27904,11 @@ class KolSelectWc {
|
|
|
27813
27904
|
} });
|
|
27814
27905
|
}
|
|
27815
27906
|
render() {
|
|
27816
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
27907
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '0dae16977914072f768715d0724d104681423011' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'f861a46e09370d1d9b0988583f21f3e7cb0ac95c', state: this.state }, hAsync("form", { key: '4018d6786323c59fc03a1e1808f2c294f538fd03', onSubmit: (event) => {
|
|
27817
27908
|
event.preventDefault();
|
|
27818
27909
|
propagateSubmitEventToForm({
|
|
27819
27910
|
form: this.host});
|
|
27820
|
-
} }, hAsync("input", { key: '
|
|
27911
|
+
} }, hAsync("input", { key: '4cf5976ab6f9e5936df90835f38d90075b47e0c6', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: '8f9f45475b6ea1c0c1e852896c4bc025bc0e5a4e' }, this.getSelectProps()))))));
|
|
27821
27912
|
}
|
|
27822
27913
|
constructor(hostRef) {
|
|
27823
27914
|
registerInstance(this, hostRef);
|
|
@@ -27987,7 +28078,7 @@ class KolSelectWc {
|
|
|
27987
28078
|
"state": [32],
|
|
27988
28079
|
"inputHasFocus": [32],
|
|
27989
28080
|
"getValue": [64],
|
|
27990
|
-
"
|
|
28081
|
+
"focus": [64]
|
|
27991
28082
|
},
|
|
27992
28083
|
"$listeners$": undefined,
|
|
27993
28084
|
"$lazyBundleId$": "-",
|
|
@@ -28053,21 +28144,23 @@ class KolSingleSelect {
|
|
|
28053
28144
|
async getValue() {
|
|
28054
28145
|
return this._value;
|
|
28055
28146
|
}
|
|
28056
|
-
async
|
|
28147
|
+
async focus() {
|
|
28057
28148
|
var _a;
|
|
28058
|
-
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
28149
|
+
return Promise.resolve((_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus());
|
|
28059
28150
|
}
|
|
28060
|
-
onBlur() {
|
|
28151
|
+
onBlur(event) {
|
|
28061
28152
|
var _a, _b, _c;
|
|
28062
28153
|
const matchingOption = (_a = this.state._options) === null || _a === void 0 ? void 0 : _a.find((option) => { var _a, _b; return ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = this._inputValue) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
|
|
28063
28154
|
if (matchingOption) {
|
|
28064
28155
|
this.selectOption(matchingOption);
|
|
28065
28156
|
}
|
|
28066
|
-
else {
|
|
28157
|
+
else if (!this._isOpen) {
|
|
28067
28158
|
this._inputValue = (_c = (_b = this.state._options) === null || _b === void 0 ? void 0 : _b.find((option) => option.value === this._value)) === null || _c === void 0 ? void 0 : _c.label;
|
|
28068
28159
|
this._filteredOptions = [...this.state._options];
|
|
28069
28160
|
}
|
|
28070
|
-
|
|
28161
|
+
if (event instanceof FocusEvent && event.view === window) {
|
|
28162
|
+
this._isOpen = false;
|
|
28163
|
+
}
|
|
28071
28164
|
}
|
|
28072
28165
|
createEventWithTarget(type, detail) {
|
|
28073
28166
|
const event = new CustomEvent(type, {
|
|
@@ -28188,6 +28281,13 @@ class KolSingleSelect {
|
|
|
28188
28281
|
optionElement === null || optionElement === void 0 ? void 0 : optionElement.focus();
|
|
28189
28282
|
}
|
|
28190
28283
|
}
|
|
28284
|
+
selectFocusedOption() {
|
|
28285
|
+
if (Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 && this._focusedOptionIndex >= 0) {
|
|
28286
|
+
this.selectOption(this._filteredOptions[this._focusedOptionIndex]);
|
|
28287
|
+
return true;
|
|
28288
|
+
}
|
|
28289
|
+
return false;
|
|
28290
|
+
}
|
|
28191
28291
|
focusSuggestionStartingWith(char) {
|
|
28192
28292
|
const charLowerCase = char.toLowerCase();
|
|
28193
28293
|
const index = Array.isArray(this._filteredOptions) &&
|
|
@@ -28219,7 +28319,7 @@ class KolSingleSelect {
|
|
|
28219
28319
|
render() {
|
|
28220
28320
|
var _a;
|
|
28221
28321
|
const isDisabled = this.state._disabled === true;
|
|
28222
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
28322
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '306558543966cf8a5a7ccf9eaebc0a1b0b1766d4' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'f0f4be69ae4b73dd1b0028ca08d2e44e1d8e6ea6', state: this.state }, hAsync("div", { key: 'beb79fb9ff824d8c3c5c859f96b05683fffb6eb4', class: "kol-single-select__group" }, hAsync(InputStateWrapper, Object.assign({ key: '5c0542f362b2c347e7b680afdd5d8fce7d94014f' }, this.getInputProps())), this._inputValue && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: '49633fa2ff5ff1f7e1e6229ddfa29310d214ee15', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _buttonVariant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: clsx('kol-single-select__delete', {
|
|
28223
28323
|
'kol-single-select__delete--disabled': isDisabled,
|
|
28224
28324
|
}), _on: {
|
|
28225
28325
|
onClick: () => {
|
|
@@ -28227,9 +28327,9 @@ class KolSingleSelect {
|
|
|
28227
28327
|
this.clearSelection();
|
|
28228
28328
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
28229
28329
|
},
|
|
28230
|
-
} })), hAsync(KolIconTag, { key: '
|
|
28330
|
+
} })), hAsync(KolIconTag, { key: '51dc941170236329ae6e24b1267de6413d4ef977', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
28231
28331
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
28232
|
-
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '
|
|
28332
|
+
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '0432cb22edc50a92acdb83ff6a47448c4d89bb69', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` } }, 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) => {
|
|
28233
28333
|
if (el)
|
|
28234
28334
|
this.refOptions[index] = el;
|
|
28235
28335
|
}, selected: this._value === option.value, disabled: option.disabled ? true : false, onClick: (event) => {
|
|
@@ -28264,16 +28364,16 @@ class KolSingleSelect {
|
|
|
28264
28364
|
}
|
|
28265
28365
|
} })))) : (hAsync("li", { class: "kol-single-select__no-results-message" }, this.translateNoResultsMessage, " ")))))));
|
|
28266
28366
|
}
|
|
28267
|
-
handleFocusOut() {
|
|
28367
|
+
handleFocusOut(event) {
|
|
28268
28368
|
setTimeout(() => {
|
|
28269
28369
|
var _a;
|
|
28270
28370
|
if (!((_a = this.host) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement))) {
|
|
28271
|
-
this.onBlur();
|
|
28371
|
+
this.onBlur(event);
|
|
28272
28372
|
}
|
|
28273
|
-
}
|
|
28373
|
+
});
|
|
28274
28374
|
}
|
|
28275
|
-
handleWindowBlur() {
|
|
28276
|
-
this.onBlur();
|
|
28375
|
+
handleWindowBlur(event) {
|
|
28376
|
+
this.onBlur(event);
|
|
28277
28377
|
}
|
|
28278
28378
|
handleKeyDown(event) {
|
|
28279
28379
|
var _a, _b;
|
|
@@ -28313,10 +28413,11 @@ class KolSingleSelect {
|
|
|
28313
28413
|
handleEvent(false);
|
|
28314
28414
|
break;
|
|
28315
28415
|
}
|
|
28316
|
-
case ' ':
|
|
28416
|
+
case ' ':
|
|
28417
|
+
case 'Enter':
|
|
28418
|
+
case 'NumpadEnter': {
|
|
28317
28419
|
if (this._isOpen) {
|
|
28318
|
-
if (
|
|
28319
|
-
this.selectOption(this._filteredOptions[this._focusedOptionIndex]);
|
|
28420
|
+
if (this.selectFocusedOption()) {
|
|
28320
28421
|
(_b = this.refInput) === null || _b === void 0 ? void 0 : _b.focus();
|
|
28321
28422
|
handleEvent(false);
|
|
28322
28423
|
}
|
|
@@ -28326,12 +28427,6 @@ class KolSingleSelect {
|
|
|
28326
28427
|
}
|
|
28327
28428
|
break;
|
|
28328
28429
|
}
|
|
28329
|
-
case 'NumpadEnter':
|
|
28330
|
-
case 'Enter': {
|
|
28331
|
-
this.toggleListbox(event);
|
|
28332
|
-
this._isOpen = false;
|
|
28333
|
-
break;
|
|
28334
|
-
}
|
|
28335
28430
|
case 'Home': {
|
|
28336
28431
|
this.blockSuggestionMouseOver = true;
|
|
28337
28432
|
handleEvent(undefined, () => {
|
|
@@ -28573,9 +28668,9 @@ class KolSingleSelect {
|
|
|
28573
28668
|
"state": [32],
|
|
28574
28669
|
"inputHasFocus": [32],
|
|
28575
28670
|
"getValue": [64],
|
|
28576
|
-
"
|
|
28671
|
+
"focus": [64]
|
|
28577
28672
|
},
|
|
28578
|
-
"$listeners$": [[
|
|
28673
|
+
"$listeners$": [[0, "focusout", "handleFocusOut"], [0, "blur", "handleWindowBlur"], [0, "keydown", "handleKeyDown"], [1, "mousemove", "handleMouseEvent"]],
|
|
28579
28674
|
"$lazyBundleId$": "-",
|
|
28580
28675
|
"$attrsToReflect$": [["_touched", "_touched"], ["_value", "_value"]]
|
|
28581
28676
|
}; }
|
|
@@ -28592,10 +28687,14 @@ class KolSkipNav {
|
|
|
28592
28687
|
};
|
|
28593
28688
|
}
|
|
28594
28689
|
render() {
|
|
28595
|
-
return (hAsync("nav", { key: '
|
|
28690
|
+
return (hAsync("nav", { key: '637034fc1c6fda05c7bcec9c78005208e9dcfb13', class: "kol-skip-nav", "aria-label": this.state._label }, hAsync("ul", { key: '3b28c0e6ecad1b303773f2e18ad4fec27fe1d75f', class: "kol-skip-nav__list" }, this.state._links.map((link, index) => {
|
|
28596
28691
|
return (hAsync("li", { class: "kol-skip-nav__list-item", key: index }, hAsync(KolLinkWcTag, Object.assign({}, link, { ref: index === 0 ? (el) => (this.firstLinkRef = el) : undefined }))));
|
|
28597
28692
|
}))));
|
|
28598
28693
|
}
|
|
28694
|
+
async focus() {
|
|
28695
|
+
var _a;
|
|
28696
|
+
return Promise.resolve((_a = this.firstLinkRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
28697
|
+
}
|
|
28599
28698
|
validateLabel(value, _oldValue, initial = false) {
|
|
28600
28699
|
if (!initial) {
|
|
28601
28700
|
removeNavLabel(this.state._label);
|
|
@@ -28615,10 +28714,6 @@ class KolSkipNav {
|
|
|
28615
28714
|
disconnectedCallback() {
|
|
28616
28715
|
removeNavLabel(this.state._label);
|
|
28617
28716
|
}
|
|
28618
|
-
async kolFocus() {
|
|
28619
|
-
var _a;
|
|
28620
|
-
await ((_a = this.firstLinkRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
28621
|
-
}
|
|
28622
28717
|
static get watchers() { return {
|
|
28623
28718
|
"_label": ["validateLabel"],
|
|
28624
28719
|
"_links": ["validateLinks"]
|
|
@@ -28633,7 +28728,7 @@ class KolSkipNav {
|
|
|
28633
28728
|
"_label": [1],
|
|
28634
28729
|
"_links": [1],
|
|
28635
28730
|
"state": [32],
|
|
28636
|
-
"
|
|
28731
|
+
"focus": [64]
|
|
28637
28732
|
},
|
|
28638
28733
|
"$listeners$": undefined,
|
|
28639
28734
|
"$lazyBundleId$": "-",
|
|
@@ -28668,7 +28763,7 @@ class KolSpin {
|
|
|
28668
28763
|
}
|
|
28669
28764
|
render() {
|
|
28670
28765
|
var _a, _b;
|
|
28671
|
-
return (hAsync(Host, { key: '
|
|
28766
|
+
return (hAsync(Host, { key: '99834f746128bfbbb7ded21f1a866f06560ab218', 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)))));
|
|
28672
28767
|
}
|
|
28673
28768
|
validateShow(value) {
|
|
28674
28769
|
this.showToggled = this.state._show === true && this._show === false;
|
|
@@ -28749,16 +28844,16 @@ class KolSplitButton {
|
|
|
28749
28844
|
async getValue() {
|
|
28750
28845
|
return this._value;
|
|
28751
28846
|
}
|
|
28752
|
-
async
|
|
28847
|
+
async focus() {
|
|
28753
28848
|
var _a;
|
|
28754
|
-
|
|
28849
|
+
return Promise.resolve((_a = this.primaryButtonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
28755
28850
|
}
|
|
28756
28851
|
render() {
|
|
28757
28852
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
28758
|
-
return (hAsync("div", { key: '
|
|
28853
|
+
return (hAsync("div", { key: '04257bc7bd39a7eeef11eecc283bffd36e087eab', class: "kol-split-button" }, hAsync("div", { key: '3e501cb61b88142df1a21fc642f9a6948787c325', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: '0afa33e93f49d8f8b051a39af8effe4910e1e194', class: clsx('kol-split-button__button', {
|
|
28759
28854
|
[this._variant]: this._variant !== 'custom',
|
|
28760
28855
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
28761
|
-
}), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _id: this._id, _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, _buttonVariant: this._variant }), hAsync("div", { key: '
|
|
28856
|
+
}), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _id: this._id, _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, _buttonVariant: this._variant }), hAsync("div", { key: '26320736e5ec8d7e679636f282846ae536e13e24', class: "kol-split-button__horizontal-line" }), hAsync(KolButtonWcTag, { key: '286b1351dfb4d41e3ee9d000a1204fa82414e626', class: "kol-split-button__secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "kolicon-chevron-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler })), hAsync(KolPopoverWcTag, { key: 'c79ed674b02e40ede6a1d5b24f5660f35a5f90df', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: 'a986253f3b75a21f217daf926895d87da9912f07' }))));
|
|
28762
28857
|
}
|
|
28763
28858
|
async closePopup() {
|
|
28764
28859
|
this.handleOnClose();
|
|
@@ -28793,7 +28888,7 @@ class KolSplitButton {
|
|
|
28793
28888
|
"_variant": [1],
|
|
28794
28889
|
"state": [32],
|
|
28795
28890
|
"getValue": [64],
|
|
28796
|
-
"
|
|
28891
|
+
"focus": [64],
|
|
28797
28892
|
"closePopup": [64]
|
|
28798
28893
|
},
|
|
28799
28894
|
"$listeners$": undefined,
|
|
@@ -28802,9 +28897,8 @@ class KolSplitButton {
|
|
|
28802
28897
|
}; }
|
|
28803
28898
|
}
|
|
28804
28899
|
|
|
28805
|
-
const parseColumnWidth = (width
|
|
28806
|
-
|
|
28807
|
-
return Number.isFinite(parsed) && parsed > 0 ? parsed : defaultWidth;
|
|
28900
|
+
const parseColumnWidth = (width) => {
|
|
28901
|
+
return Number.isFinite(width) && width !== undefined && width > 0 ? width : undefined;
|
|
28808
28902
|
};
|
|
28809
28903
|
|
|
28810
28904
|
class KolTableSettings {
|
|
@@ -28859,7 +28953,7 @@ class KolTableSettings {
|
|
|
28859
28953
|
this.updatePrimaryRow(row);
|
|
28860
28954
|
}
|
|
28861
28955
|
handleWidthChange(key, width) {
|
|
28862
|
-
const row = this.getPrimaryRow().map((col) => (col.key === key && col.resizable !== false ? Object.assign(Object.assign({}, col), { width:
|
|
28956
|
+
const row = this.getPrimaryRow().map((col) => (col.key === key && col.resizable !== false ? Object.assign(Object.assign({}, col), { width: Number(width) }) : col));
|
|
28863
28957
|
this.updatePrimaryRow(row);
|
|
28864
28958
|
}
|
|
28865
28959
|
handleCancel() {
|
|
@@ -28881,23 +28975,18 @@ class KolTableSettings {
|
|
|
28881
28975
|
this.errorMessage = null;
|
|
28882
28976
|
this.headerCells = this.editingHeaderCells.map((row) => row.map((cell) => (Object.assign({}, cell))));
|
|
28883
28977
|
const sanitizedHeaderCells = this.editingHeaderCells.map((row) => row.map((column) => {
|
|
28884
|
-
const
|
|
28885
|
-
|
|
28886
|
-
if (
|
|
28887
|
-
|
|
28888
|
-
|
|
28889
|
-
|
|
28890
|
-
|
|
28891
|
-
|
|
28892
|
-
if (
|
|
28893
|
-
|
|
28894
|
-
|
|
28895
|
-
|
|
28896
|
-
delete cell.resizable;
|
|
28897
|
-
}
|
|
28898
|
-
if (cell.width === undefined || cell.width === null || cell.width === '') {
|
|
28899
|
-
delete cell.width;
|
|
28900
|
-
}
|
|
28978
|
+
const _a = column, { hidable, resizable, sortable, visible, width } = _a, rest = __rest(_a, ["hidable", "resizable", "sortable", "visible", "width"]);
|
|
28979
|
+
const cell = Object.assign({}, rest);
|
|
28980
|
+
if (visible !== undefined)
|
|
28981
|
+
cell.visible = visible;
|
|
28982
|
+
if (hidable !== undefined)
|
|
28983
|
+
cell.hidable = hidable;
|
|
28984
|
+
if (sortable !== undefined)
|
|
28985
|
+
cell.sortable = sortable;
|
|
28986
|
+
if (resizable !== undefined)
|
|
28987
|
+
cell.resizable = resizable;
|
|
28988
|
+
if (width !== undefined && width !== null)
|
|
28989
|
+
cell.width = width;
|
|
28901
28990
|
return cell;
|
|
28902
28991
|
}));
|
|
28903
28992
|
dispatchDomEvent(this.host, KolEvent.changeHeaderCells, sanitizedHeaderCells);
|
|
@@ -28906,7 +28995,7 @@ class KolTableSettings {
|
|
|
28906
28995
|
}
|
|
28907
28996
|
render() {
|
|
28908
28997
|
const columns = this.getPrimaryRow();
|
|
28909
|
-
return (hAsync(KolPopoverButtonWcTag, { key: '
|
|
28998
|
+
return (hAsync(KolPopoverButtonWcTag, { key: '65b350799d5422b6500b3ae983f9c7f3c925f3b0', ref: (el) => (this.popoverRef = el), class: "kol-table-settings", _icons: "kolicon-settings", _label: this.translateTableSettings, _popoverAlign: "top", _hideLabel: true }, hAsync("div", { key: '450200fa5d74f6ceb99c0ea589e12aefbfcdc23d', class: "kol-table-settings__content" }, hAsync(KolHeadingTag, { key: '8bd0456ba046beb7a819c978d32dd8e64c294be0', _label: this.translateTableSettings, _level: 0 }), this.errorMessage && hAsync(KolAlertWcTag, { key: 'e0d517d57e57c8e889997e18da3fb3badd0bcebe', _type: "error", _label: this.errorMessage, _variant: "msg", class: "kol-table-settings__error-message" }), hAsync("form", { key: '34785b3e839f8fcc59d7930c6d8bc1ca82e8d5a7', onSubmit: this.handleSubmit.bind(this) }, hAsync("div", { key: 'a28b130172a530644430aa4c9f52d6afa913522a', class: "kol-table-settings__columns-container" }, hAsync("div", { key: 'd18e531412556d173f9441c462bd3361f829d205', 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, _buttonVariant: "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, _buttonVariant: "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: '1fb081b1dfe3a3afdb1a046b5ce7576d292c0da7', class: "kol-table-settings__actions" }, hAsync(KolButtonWcTag, { key: '0b8631652bc292bf61549a64418de4f82947f97d', _label: this.translateTableSettingsCancel, _buttonVariant: "secondary", _on: { onClick: () => this.handleCancel() }, "data-testid": "table-settings-cancel" }), hAsync(KolButtonWcTag, { key: '0d29c2f7f2a36370552276a9a1ec843d2518ed66', _label: this.translateTableSettingsApply, _buttonVariant: "primary", _type: "submit", "data-testid": "table-settings-apply" }))))));
|
|
28910
28999
|
}
|
|
28911
29000
|
get host() { return getElement(this); }
|
|
28912
29001
|
static get watchers() { return {
|
|
@@ -28965,7 +29054,7 @@ var KeyboardKey;
|
|
|
28965
29054
|
KeyboardKey["Space"] = " ";
|
|
28966
29055
|
})(KeyboardKey || (KeyboardKey = {}));
|
|
28967
29056
|
|
|
28968
|
-
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}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\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 {\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: 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__button {\n display: inline-block;\n }\n .kol-popover-button__popover {\n margin: 0;\n padding: 0;\n border: 0;\n }\n .kol-popover-button--inline .kol-popover-button__button {\n display: inline;\n }\n .kol-table-settings {\n background: #fff;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n }\n .kol-table-settings .kol-popover-button__popover {\n background: #fff;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border: 1px solid #d1d5db;\n }\n .kol-table-settings__columns-container {\n max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n overflow: auto;\n }\n .kol-table-settings__columns {\n display: grid;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-auto-rows: min-content;\n grid-template-columns: min-content minmax(max-content, 1fr) calc(100 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n }\n .kol-table-settings__column {\n display: contents;\n }\n .kol-table {\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 width: 100%;\n }\n .kol-table__caption {\n min-height: var(--a11y-min-size);\n padding-right: var(--a11y-min-size);\n text-align: start;\n }\n .kol-table__sort-button .kol-button {\n color: inherit;\n }\n .kol-table__sort {\n display: inline-flex;\n gap: 0.25rem;\n align-items: center;\n }\n .kol-table__sort-order {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .kol-table__body {\n text-align: left;\n }\n .kol-table__body .kol-button__text {\n justify-items: start;\n }\n .kol-table__cell--align-left {\n text-align: left;\n }\n .kol-table__cell--align-left .kol-button__text {\n align-items: start;\n }\n .kol-table__cell--align-center {\n text-align: center;\n }\n .kol-table__cell--align-center .kol-button__text {\n align-items: center;\n }\n .kol-table__cell--align-right {\n text-align: right;\n }\n .kol-table__cell--align-right .kol-button__text {\n align-items: end;\n }\n .kol-table__cell--selection {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection-label {\n display: flex;\n position: relative;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n .kol-table__selection-label--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 width: calc(var(--a11y-min-size) / 2);\n height: calc(var(--a11y-min-size) / 2);\n border-width: 2px;\n align-items: center;\n justify-content: center;\n line-height: 1.5;\n }\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 {\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--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\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:not(:empty)) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\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 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-pagination {\n display: flex;\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n }\n @media (max-width: 1024px) {\n .kol-pagination {\n flex-direction: column;\n }\n }\n .kol-pagination__navigation-list {\n display: inline-flex;\n margin: 0;\n padding: 0;\n gap: 0.5em;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n }\n .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 .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n display: grid;\n place-items: center;\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n grid-auto-flow: column;\n }\n }\n}";
|
|
29057
|
+
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}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\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 {\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: 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__button {\n display: inline-block;\n }\n .kol-popover-button__popover {\n margin: 0;\n padding: 0;\n border: 0;\n }\n .kol-popover-button--inline .kol-popover-button__button {\n display: inline;\n }\n .kol-table-settings {\n background: #fff;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n }\n .kol-table-settings .kol-popover-button__popover {\n background: #fff;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border: 1px solid #d1d5db;\n }\n .kol-table-settings__columns-container {\n max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n overflow: auto;\n }\n .kol-table-settings__columns {\n display: grid;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-auto-rows: min-content;\n grid-template-columns: min-content minmax(max-content, 1fr) calc(140 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n }\n .kol-table-settings__column {\n display: contents;\n }\n .kol-table {\n display: block;\n position: relative;\n max-width: 100%;\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n .kol-table__scroll-container {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .kol-table__table {\n table-layout: fixed;\n }\n .kol-table__caption {\n min-height: var(--a11y-min-size);\n padding-right: var(--a11y-min-size);\n text-align: start;\n }\n .kol-table__sort-button .kol-button {\n color: inherit;\n }\n .kol-table__sort {\n display: inline-flex;\n gap: 0.25rem;\n align-items: center;\n }\n .kol-table__sort-order {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .kol-table__body {\n text-align: left;\n }\n .kol-table__body .kol-button__text {\n justify-items: start;\n }\n .kol-table__cell--align-left {\n text-align: left;\n }\n .kol-table__cell--align-left .kol-button__text {\n align-items: start;\n }\n .kol-table__cell--align-center {\n text-align: center;\n }\n .kol-table__cell--align-center .kol-button__text {\n align-items: center;\n }\n .kol-table__cell--align-right {\n text-align: right;\n }\n .kol-table__cell--align-right .kol-button__text {\n align-items: end;\n }\n .kol-table__cell--selection {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection-label {\n display: flex;\n position: relative;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n .kol-table__selection-label--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 width: calc(var(--a11y-min-size) / 2);\n height: calc(var(--a11y-min-size) / 2);\n border-width: 2px;\n align-items: center;\n justify-content: center;\n line-height: 1.5;\n }\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 {\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--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\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:not(:empty)) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\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 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-pagination {\n display: flex;\n gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n }\n @media (max-width: 1024px) {\n .kol-pagination {\n flex-direction: column;\n }\n }\n .kol-pagination__navigation-list {\n display: inline-flex;\n margin: 0;\n padding: 0;\n gap: 0.5em;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n }\n .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 .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n display: grid;\n place-items: center;\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n grid-auto-flow: column;\n }\n }\n}";
|
|
28969
29058
|
|
|
28970
29059
|
const PAGINATION_OPTIONS = [10, 20, 50, 100];
|
|
28971
29060
|
const paginationValidator = (value) => value === true || value === '' || (typeof value === 'object' && value !== null);
|
|
@@ -28990,7 +29079,6 @@ class KolTableStateful {
|
|
|
28990
29079
|
vertical: [],
|
|
28991
29080
|
},
|
|
28992
29081
|
_label: '',
|
|
28993
|
-
_minWidth: 'auto',
|
|
28994
29082
|
_pagination: {
|
|
28995
29083
|
_page: 1,
|
|
28996
29084
|
_pageSize: 10,
|
|
@@ -29159,11 +29247,6 @@ class KolTableStateful {
|
|
|
29159
29247
|
required: true,
|
|
29160
29248
|
});
|
|
29161
29249
|
}
|
|
29162
|
-
validateMinWidth(value) {
|
|
29163
|
-
watchString(this, '_minWidth', value, {
|
|
29164
|
-
defaultValue: undefined,
|
|
29165
|
-
});
|
|
29166
|
-
}
|
|
29167
29250
|
validateSelection(value) {
|
|
29168
29251
|
validateTableSelection(this, value);
|
|
29169
29252
|
}
|
|
@@ -29199,7 +29282,6 @@ class KolTableStateful {
|
|
|
29199
29282
|
this.validateDataFoot(this._dataFoot);
|
|
29200
29283
|
this.validateHeaders(this._headers);
|
|
29201
29284
|
this.validateLabel(this._label);
|
|
29202
|
-
this.validateMinWidth(this._minWidth);
|
|
29203
29285
|
this.validateOn(this._on);
|
|
29204
29286
|
this.validatePagination(this._pagination);
|
|
29205
29287
|
this.validatePaginationPosition(this._paginationPosition);
|
|
@@ -29290,7 +29372,7 @@ class KolTableStateful {
|
|
|
29290
29372
|
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 : [],
|
|
29291
29373
|
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 : [],
|
|
29292
29374
|
};
|
|
29293
|
-
return (hAsync(Host, { key: '
|
|
29375
|
+
return (hAsync(Host, { key: '803e8045d1e7295584260b721e6269942a1d3235', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: '010a86e2844bf06be29f4d6b272e3a27d826381d', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _on: {
|
|
29294
29376
|
onSort: (_, payload) => {
|
|
29295
29377
|
this.handleSort(payload);
|
|
29296
29378
|
},
|
|
@@ -29308,7 +29390,6 @@ class KolTableStateful {
|
|
|
29308
29390
|
"_hasSettingsMenu": ["validateHasSettingsMenu"],
|
|
29309
29391
|
"_headers": ["validateHeaders"],
|
|
29310
29392
|
"_label": ["validateLabel"],
|
|
29311
|
-
"_minWidth": ["validateMinWidth"],
|
|
29312
29393
|
"_selection": ["validateSelection"],
|
|
29313
29394
|
"_on": ["validateOn"],
|
|
29314
29395
|
"_pagination": ["validatePagination"]
|
|
@@ -29325,7 +29406,6 @@ class KolTableStateful {
|
|
|
29325
29406
|
"_dataFoot": [1, "_data-foot"],
|
|
29326
29407
|
"_headers": [1],
|
|
29327
29408
|
"_label": [1],
|
|
29328
|
-
"_minWidth": [1, "_min-width"],
|
|
29329
29409
|
"_pagination": [8],
|
|
29330
29410
|
"_paginationPosition": [1, "_pagination-position"],
|
|
29331
29411
|
"_selection": [1],
|
|
@@ -29340,14 +29420,14 @@ class KolTableStateful {
|
|
|
29340
29420
|
}; }
|
|
29341
29421
|
}
|
|
29342
29422
|
|
|
29343
|
-
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}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\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 {\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: 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__button {\n display: inline-block;\n }\n .kol-popover-button__popover {\n margin: 0;\n padding: 0;\n border: 0;\n }\n .kol-popover-button--inline .kol-popover-button__button {\n display: inline;\n }\n .kol-table-settings {\n background: #fff;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n }\n .kol-table-settings .kol-popover-button__popover {\n background: #fff;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border: 1px solid #d1d5db;\n }\n .kol-table-settings__columns-container {\n max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n overflow: auto;\n }\n .kol-table-settings__columns {\n display: grid;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-auto-rows: min-content;\n grid-template-columns: min-content minmax(max-content, 1fr) calc(100 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n }\n .kol-table-settings__column {\n display: contents;\n }\n .kol-table {\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 width: 100%;\n }\n .kol-table__caption {\n min-height: var(--a11y-min-size);\n padding-right: var(--a11y-min-size);\n text-align: start;\n }\n .kol-table__sort-button .kol-button {\n color: inherit;\n }\n .kol-table__sort {\n display: inline-flex;\n gap: 0.25rem;\n align-items: center;\n }\n .kol-table__sort-order {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .kol-table__body {\n text-align: left;\n }\n .kol-table__body .kol-button__text {\n justify-items: start;\n }\n .kol-table__cell--align-left {\n text-align: left;\n }\n .kol-table__cell--align-left .kol-button__text {\n align-items: start;\n }\n .kol-table__cell--align-center {\n text-align: center;\n }\n .kol-table__cell--align-center .kol-button__text {\n align-items: center;\n }\n .kol-table__cell--align-right {\n text-align: right;\n }\n .kol-table__cell--align-right .kol-button__text {\n align-items: end;\n }\n .kol-table__cell--selection {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection-label {\n display: flex;\n position: relative;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n .kol-table__selection-label--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 width: calc(var(--a11y-min-size) / 2);\n height: calc(var(--a11y-min-size) / 2);\n border-width: 2px;\n align-items: center;\n justify-content: center;\n line-height: 1.5;\n }\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}";
|
|
29423
|
+
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}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\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 {\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: 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__button {\n display: inline-block;\n }\n .kol-popover-button__popover {\n margin: 0;\n padding: 0;\n border: 0;\n }\n .kol-popover-button--inline .kol-popover-button__button {\n display: inline;\n }\n .kol-table-settings {\n background: #fff;\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n }\n .kol-table-settings .kol-popover-button__popover {\n background: #fff;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n border: 1px solid #d1d5db;\n }\n .kol-table-settings__columns-container {\n max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n overflow: auto;\n }\n .kol-table-settings__columns {\n display: grid;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n grid-auto-rows: min-content;\n grid-template-columns: min-content minmax(max-content, 1fr) calc(140 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n }\n .kol-table-settings__column {\n display: contents;\n }\n .kol-table {\n display: block;\n position: relative;\n max-width: 100%;\n }\n .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n .kol-table__scroll-container {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .kol-table__table {\n table-layout: fixed;\n }\n .kol-table__caption {\n min-height: var(--a11y-min-size);\n padding-right: var(--a11y-min-size);\n text-align: start;\n }\n .kol-table__sort-button .kol-button {\n color: inherit;\n }\n .kol-table__sort {\n display: inline-flex;\n gap: 0.25rem;\n align-items: center;\n }\n .kol-table__sort-order {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .kol-table__body {\n text-align: left;\n }\n .kol-table__body .kol-button__text {\n justify-items: start;\n }\n .kol-table__cell--align-left {\n text-align: left;\n }\n .kol-table__cell--align-left .kol-button__text {\n align-items: start;\n }\n .kol-table__cell--align-center {\n text-align: center;\n }\n .kol-table__cell--align-center .kol-button__text {\n align-items: center;\n }\n .kol-table__cell--align-right {\n text-align: right;\n }\n .kol-table__cell--align-right .kol-button__text {\n align-items: end;\n }\n .kol-table__cell--selection {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection-label {\n display: flex;\n position: relative;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n .kol-table__selection-label--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 width: calc(var(--a11y-min-size) / 2);\n height: calc(var(--a11y-min-size) / 2);\n border-width: 2px;\n align-items: center;\n justify-content: center;\n line-height: 1.5;\n }\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}";
|
|
29344
29424
|
|
|
29345
29425
|
let KolTableStateless$1 = class KolTableStateless {
|
|
29346
29426
|
constructor(hostRef) {
|
|
29347
29427
|
registerInstance(this, hostRef);
|
|
29348
29428
|
}
|
|
29349
29429
|
render() {
|
|
29350
|
-
return (hAsync(KolTableStatelessWcTag, { key: '
|
|
29430
|
+
return (hAsync(KolTableStatelessWcTag, { key: '4f2c23853dd8f38baeb961bf35cc5f651cd45605', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _on: this._on, _selection: this._selection, _hasSettingsMenu: this._hasSettingsMenu }));
|
|
29351
29431
|
}
|
|
29352
29432
|
static get style() { return {
|
|
29353
29433
|
default: defaultStyleCss$7
|
|
@@ -29360,7 +29440,6 @@ let KolTableStateless$1 = class KolTableStateless {
|
|
|
29360
29440
|
"_dataFoot": [1, "_data-foot"],
|
|
29361
29441
|
"_headerCells": [1, "_header-cells"],
|
|
29362
29442
|
"_label": [1],
|
|
29363
|
-
"_minWidth": [1, "_min-width"],
|
|
29364
29443
|
"_on": [16],
|
|
29365
29444
|
"_selection": [1],
|
|
29366
29445
|
"_hasSettingsMenu": [4, "_has-settings-menu"]
|
|
@@ -29371,11 +29450,6 @@ let KolTableStateless$1 = class KolTableStateless {
|
|
|
29371
29450
|
}; }
|
|
29372
29451
|
};
|
|
29373
29452
|
|
|
29374
|
-
const HEADER_CELL_WIDTH_VALIDATOR = /^\d+(\.\d+)?([a-z]+|%)?$/;
|
|
29375
|
-
const validateMinWidth = (component, value, options) => {
|
|
29376
|
-
watchValidator(component, '_minWidth', (v) => typeof v === 'string' && HEADER_CELL_WIDTH_VALIDATOR.test(v), new Set(['String', '/^\\d+(\\.\\d+)?([a-z]+|%)?$/']), value, options);
|
|
29377
|
-
};
|
|
29378
|
-
|
|
29379
29453
|
class KolTableStateless {
|
|
29380
29454
|
constructor(hostRef) {
|
|
29381
29455
|
registerInstance(this, hostRef);
|
|
@@ -29387,7 +29461,6 @@ class KolTableStateless {
|
|
|
29387
29461
|
vertical: [],
|
|
29388
29462
|
},
|
|
29389
29463
|
_label: '',
|
|
29390
|
-
_minWidth: 'auto',
|
|
29391
29464
|
_hasSettingsMenu: false,
|
|
29392
29465
|
};
|
|
29393
29466
|
this.horizontal = true;
|
|
@@ -29426,7 +29499,6 @@ class KolTableStateless {
|
|
|
29426
29499
|
[`kol-table__cell--align-${cell.textAlign}`]: cell.textAlign,
|
|
29427
29500
|
}), "aria-atomic": isNoEntriesHintCell ? 'false' : undefined, "aria-live": isNoEntriesHintCell ? 'polite' : undefined, "aria-relevant": isNoEntriesHintCell ? 'text' : undefined, colSpan: cell.colSpan, rowSpan: cell.rowSpan, style: {
|
|
29428
29501
|
textAlign: cell.textAlign,
|
|
29429
|
-
width: cell.width,
|
|
29430
29502
|
}, ref: typeof cell.render === 'function'
|
|
29431
29503
|
? (el) => {
|
|
29432
29504
|
this.cellRender(cell, el);
|
|
@@ -29460,9 +29532,6 @@ class KolTableStateless {
|
|
|
29460
29532
|
required: true,
|
|
29461
29533
|
});
|
|
29462
29534
|
}
|
|
29463
|
-
validateMinWidth(value) {
|
|
29464
|
-
validateMinWidth(this, value);
|
|
29465
|
-
}
|
|
29466
29535
|
validateOn(value) {
|
|
29467
29536
|
validateTableCallbacks(this, value);
|
|
29468
29537
|
}
|
|
@@ -29712,7 +29781,6 @@ class KolTableStateless {
|
|
|
29712
29781
|
this.validateDataFoot(this._dataFoot);
|
|
29713
29782
|
this.validateHeaderCells(this._headerCells);
|
|
29714
29783
|
this.validateLabel(this._label);
|
|
29715
|
-
this.validateMinWidth(this._minWidth);
|
|
29716
29784
|
this.validateOn(this._on);
|
|
29717
29785
|
this.validateSelection(this._selection);
|
|
29718
29786
|
this.validateHasSettingsMenu(this._hasSettingsMenu);
|
|
@@ -29808,14 +29876,39 @@ class KolTableStateless {
|
|
|
29808
29876
|
return selection;
|
|
29809
29877
|
}
|
|
29810
29878
|
getTableMinWidth() {
|
|
29811
|
-
var _a;
|
|
29812
|
-
|
|
29879
|
+
var _a, _b;
|
|
29880
|
+
const horizontalHeaders = (_a = this.state._headerCells.horizontal) !== null && _a !== void 0 ? _a : [];
|
|
29881
|
+
const horizontalHeaderWidths = [];
|
|
29882
|
+
horizontalHeaders.forEach((row) => {
|
|
29883
|
+
row.forEach((cell) => {
|
|
29884
|
+
if (cell.visible !== false && cell.width !== undefined && cell.width > 0) {
|
|
29885
|
+
horizontalHeaderWidths.push(cell.width);
|
|
29886
|
+
}
|
|
29887
|
+
});
|
|
29888
|
+
});
|
|
29889
|
+
const verticalHeaders = (_b = this.state._headerCells.vertical) !== null && _b !== void 0 ? _b : [];
|
|
29890
|
+
const verticalHeaderWidths = [];
|
|
29891
|
+
verticalHeaders.forEach((column) => {
|
|
29892
|
+
column.forEach((cell) => {
|
|
29893
|
+
if (cell.width !== undefined && cell.width > 0) {
|
|
29894
|
+
verticalHeaderWidths.push(cell.width);
|
|
29895
|
+
}
|
|
29896
|
+
});
|
|
29897
|
+
});
|
|
29898
|
+
const allWidths = [...verticalHeaderWidths, ...horizontalHeaderWidths];
|
|
29899
|
+
if (allWidths.length === 0) {
|
|
29900
|
+
return '0px';
|
|
29901
|
+
}
|
|
29902
|
+
if (allWidths.length === 1) {
|
|
29903
|
+
return `${allWidths[0]}px`;
|
|
29904
|
+
}
|
|
29905
|
+
return `calc(${allWidths.map((w) => `${w}px`).join(' + ')})`;
|
|
29813
29906
|
}
|
|
29814
29907
|
renderHeadingSelectionCell() {
|
|
29815
29908
|
var _a, _b;
|
|
29816
29909
|
const selection = this.state._selection;
|
|
29817
29910
|
if (!selection) {
|
|
29818
|
-
return hAsync("
|
|
29911
|
+
return hAsync("td", { class: "kol-table__cell kol-table__cell--header", key: `thead-0` });
|
|
29819
29912
|
}
|
|
29820
29913
|
if (selection.multiple === false) {
|
|
29821
29914
|
return hAsync("td", { key: `thead-0-selection`, class: "kol-table__cell kol-table__cell--header kol-table__cell--selection" });
|
|
@@ -29840,11 +29933,17 @@ class KolTableStateless {
|
|
|
29840
29933
|
} })), hAsync(KolTooltipWcTag, { "aria-hidden": "true", class: "kol-table__selection-input-tooltip", _align: "right", _id: `${translationKey}-label`, _label: label }))));
|
|
29841
29934
|
}
|
|
29842
29935
|
renderHeaderTdCell() {
|
|
29843
|
-
|
|
29844
|
-
|
|
29845
|
-
|
|
29846
|
-
|
|
29847
|
-
|
|
29936
|
+
const horizontalHeaders = this.state._headerCells.horizontal;
|
|
29937
|
+
const verticalHeaders = this.state._headerCells.vertical;
|
|
29938
|
+
if (!Array.isArray(horizontalHeaders) || horizontalHeaders.length === 0 || !Array.isArray(verticalHeaders) || verticalHeaders.length === 0) {
|
|
29939
|
+
return hAsync(Fragment, null);
|
|
29940
|
+
}
|
|
29941
|
+
const totalWidth = verticalHeaders.reduce((sum, column) => {
|
|
29942
|
+
var _a;
|
|
29943
|
+
const firstCell = column === null || column === void 0 ? void 0 : column[0];
|
|
29944
|
+
return sum + ((_a = firstCell === null || firstCell === void 0 ? void 0 : firstCell.width) !== null && _a !== void 0 ? _a : 0);
|
|
29945
|
+
}, 0);
|
|
29946
|
+
return (hAsync("td", { "aria-hidden": "true", colSpan: verticalHeaders.length, rowSpan: horizontalHeaders.length, style: totalWidth > 0 ? { width: `${totalWidth}px` } : undefined }));
|
|
29848
29947
|
}
|
|
29849
29948
|
formatSortOrderDescription(order) {
|
|
29850
29949
|
return this.translateSortOrder.replace('{{order}}', `${order}`);
|
|
@@ -29884,9 +29983,7 @@ class KolTableStateless {
|
|
|
29884
29983
|
return (hAsync("th", { key: `${rowIndex}-${colIndex}-${cell.label}`, class: clsx('kol-table__cell kol-table__cell--header', {
|
|
29885
29984
|
[`kol-table__cell--align-${cell.textAlign}`]: cell.textAlign,
|
|
29886
29985
|
[`kol-table__cell--${ariaSort}`]: ariaSort,
|
|
29887
|
-
}), scope: scope, colSpan: cell.colSpan, rowSpan: cell.rowSpan, style: {
|
|
29888
|
-
width: cell.width,
|
|
29889
|
-
}, "aria-sort": ariaSort, "data-sort": canSort && cell.sortDirection ? `sort-${cell.sortDirection}` : undefined }, canSort && cell.sortDirection ? (hAsync("span", { class: "kol-table__sort" }, hAsync(KolButtonWcTag, { class: "kol-table__sort-button", exportparts: "icon", _icons: { right: sortButtonIcon }, _label: cell.label, _ariaDescription: sortDescription, _on: {
|
|
29986
|
+
}), scope: scope, colSpan: cell.colSpan, rowSpan: cell.rowSpan, style: cell.width !== undefined ? { width: `${cell.width}px` } : undefined, "aria-sort": ariaSort, "data-sort": canSort && cell.sortDirection ? `sort-${cell.sortDirection}` : undefined }, canSort && cell.sortDirection ? (hAsync("span", { class: "kol-table__sort" }, hAsync(KolButtonWcTag, { class: "kol-table__sort-button", exportparts: "icon", _icons: { right: sortButtonIcon }, _label: cell.label, _ariaDescription: sortDescription, _on: {
|
|
29890
29987
|
onClick: (event) => {
|
|
29891
29988
|
var _a;
|
|
29892
29989
|
if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onSort) === 'function' && cell.key && cell.sortDirection) {
|
|
@@ -29925,12 +30022,12 @@ class KolTableStateless {
|
|
|
29925
30022
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
29926
30023
|
this.checkboxRefs = [];
|
|
29927
30024
|
const horizontalHeaders = this.state._headerCells.horizontal;
|
|
29928
|
-
return (hAsync("div", { key: '
|
|
30025
|
+
return (hAsync("div", { key: '3afe5c237067ccac3023d7fd53883e9057de27e0', class: "kol-table" }, this.state._hasSettingsMenu && hAsync(KolTableSettingsWcTag, { key: '9b41896802e14e25f0234e3dd714972d9e6c77db', _horizontalHeaderCells: horizontalHeaders !== null && horizontalHeaders !== void 0 ? horizontalHeaders : [] }), hAsync("div", { key: 'd004c445641a06efe649a6de3c51a15a2502c0df', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '5119cd5e99cb529baf922b66fc0e3d917886ee07', class: "kol-table__table", style: {
|
|
29929
30026
|
minWidth: this.getTableMinWidth(),
|
|
29930
|
-
} }, hAsync("caption", { key: '
|
|
30027
|
+
} }, hAsync("caption", { key: '961a09c0d6e5faff72e65ef9a3aeaa9df0f0ed41', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(horizontalHeaders) && (hAsync("thead", { key: '12bb291debe3b8532f7ffa862a3e9698903598f5', class: "kol-table__head" }, [
|
|
29931
30028
|
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))))),
|
|
29932
30029
|
this.renderSpacer('head', horizontalHeaders),
|
|
29933
|
-
])), hAsync("tbody", { key: '
|
|
30030
|
+
])), hAsync("tbody", { key: 'bba0270d6ca03234ebe2b12b101c589439bda99d', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
|
|
29934
30031
|
}
|
|
29935
30032
|
get host() { return getElement(this); }
|
|
29936
30033
|
static get watchers() { return {
|
|
@@ -29939,7 +30036,6 @@ class KolTableStateless {
|
|
|
29939
30036
|
"_dataFoot": ["validateDataFoot"],
|
|
29940
30037
|
"_headerCells": ["validateHeaderCells"],
|
|
29941
30038
|
"_label": ["validateLabel"],
|
|
29942
|
-
"_minWidth": ["validateMinWidth"],
|
|
29943
30039
|
"_on": ["validateOn"],
|
|
29944
30040
|
"_selection": ["validateSelection"]
|
|
29945
30041
|
}; }
|
|
@@ -29951,7 +30047,6 @@ class KolTableStateless {
|
|
|
29951
30047
|
"_dataFoot": [1, "_data-foot"],
|
|
29952
30048
|
"_headerCells": [1, "_header-cells"],
|
|
29953
30049
|
"_label": [1],
|
|
29954
|
-
"_minWidth": [1, "_min-width"],
|
|
29955
30050
|
"_on": [16],
|
|
29956
30051
|
"_selection": [1],
|
|
29957
30052
|
"_hasSettingsMenu": [4, "_has-settings-menu"],
|
|
@@ -29959,7 +30054,7 @@ class KolTableStateless {
|
|
|
29959
30054
|
"tableDivElementHasScrollbar": [32],
|
|
29960
30055
|
"previousHeaderCells": [32]
|
|
29961
30056
|
},
|
|
29962
|
-
"$listeners$": [[0, "keydown", "handleKeyDown"], [0, "
|
|
30057
|
+
"$listeners$": [[0, "keydown", "handleKeyDown"], [0, "changeheadercells", "handleSettingsChange"]],
|
|
29963
30058
|
"$lazyBundleId$": "-",
|
|
29964
30059
|
"$attrsToReflect$": []
|
|
29965
30060
|
}; }
|
|
@@ -30169,9 +30264,9 @@ class KolTabs {
|
|
|
30169
30264
|
}, _icons: "kolicon-plus", "data-testid": "tabs-create-button" }))));
|
|
30170
30265
|
}
|
|
30171
30266
|
render() {
|
|
30172
|
-
return (hAsync("div", { key: '
|
|
30267
|
+
return (hAsync("div", { key: 'd2ead3f3fa8c12ae4e4d658ced80bd9915e358ca', ref: (el) => {
|
|
30173
30268
|
this.tabPanelsElement = el;
|
|
30174
|
-
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
30269
|
+
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: 'a0e9d89632c7dd6af0c0d9ed9f53e6a4d9829fe5', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
|
|
30175
30270
|
}
|
|
30176
30271
|
validateAlign(value) {
|
|
30177
30272
|
validateAlign(this, value);
|
|
@@ -30369,9 +30464,9 @@ class KolTextarea {
|
|
|
30369
30464
|
var _a;
|
|
30370
30465
|
return (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.value;
|
|
30371
30466
|
}
|
|
30372
|
-
async
|
|
30467
|
+
async focus() {
|
|
30373
30468
|
var _a;
|
|
30374
|
-
(_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
30469
|
+
return Promise.resolve((_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
30375
30470
|
}
|
|
30376
30471
|
getFormFieldProps() {
|
|
30377
30472
|
return {
|
|
@@ -30397,7 +30492,7 @@ class KolTextarea {
|
|
|
30397
30492
|
} });
|
|
30398
30493
|
}
|
|
30399
30494
|
render() {
|
|
30400
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
30495
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '55fb2285f0d4035a7468359c26d7eae0333ebe2d' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '2db1a595b9eef777a40f716b8596a03e03144aa7', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: '14d56cb30389a03cbb82ca2b76ee96eb60488e9e' }, this.getTextAreaProps())))));
|
|
30401
30496
|
}
|
|
30402
30497
|
constructor(hostRef) {
|
|
30403
30498
|
registerInstance(this, hostRef);
|
|
@@ -30526,7 +30621,7 @@ class KolTextarea {
|
|
|
30526
30621
|
else if (!this._rows) {
|
|
30527
30622
|
this._rows = 1;
|
|
30528
30623
|
}
|
|
30529
|
-
}
|
|
30624
|
+
});
|
|
30530
30625
|
}
|
|
30531
30626
|
componentWillLoad() {
|
|
30532
30627
|
this._touched = this._touched === true;
|
|
@@ -30598,7 +30693,7 @@ class KolTextarea {
|
|
|
30598
30693
|
"state": [32],
|
|
30599
30694
|
"inputHasFocus": [32],
|
|
30600
30695
|
"getValue": [64],
|
|
30601
|
-
"
|
|
30696
|
+
"focus": [64]
|
|
30602
30697
|
},
|
|
30603
30698
|
"$listeners$": undefined,
|
|
30604
30699
|
"$lazyBundleId$": "-",
|
|
@@ -30669,7 +30764,7 @@ class KolToastContainer {
|
|
|
30669
30764
|
}
|
|
30670
30765
|
}
|
|
30671
30766
|
render() {
|
|
30672
|
-
return (hAsync(Host, { key: '
|
|
30767
|
+
return (hAsync(Host, { key: '40e9e249cceebf6d433444192d5199a2d7864f34', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: '68a998df0fe18affd0db5e06fdfb92c9aee4abd8', _label: this.translateToastCloseAll, class: "kol-toast-container__button-close-all", _on: {
|
|
30673
30768
|
onClick: () => {
|
|
30674
30769
|
void this.closeAll();
|
|
30675
30770
|
},
|
|
@@ -30723,7 +30818,7 @@ class KolToolbar {
|
|
|
30723
30818
|
return Object.assign(Object.assign({}, rest), { _icons, _disabled });
|
|
30724
30819
|
}
|
|
30725
30820
|
render() {
|
|
30726
|
-
return (hAsync("div", { key: '
|
|
30821
|
+
return (hAsync("div", { key: 'b8bf5d060d2390c8c4bbf3345d731074ff297541', class: `kol-toolbar kol-toolbar--orientation-${this.state._orientation}`, role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem)));
|
|
30727
30822
|
}
|
|
30728
30823
|
validateLabel(value) {
|
|
30729
30824
|
validateLabel(this, value);
|
|
@@ -30770,7 +30865,7 @@ class KolToolbar {
|
|
|
30770
30865
|
if ((_d = (_c = this.state._items) === null || _c === void 0 ? void 0 : _c[nextIndex]) === null || _d === void 0 ? void 0 : _d._disabled)
|
|
30771
30866
|
return;
|
|
30772
30867
|
this.currentIndex = nextIndex;
|
|
30773
|
-
void ((_e = this.getCurrentToolbarItem(nextIndex)) === null || _e === void 0 ? void 0 : _e.
|
|
30868
|
+
void ((_e = this.getCurrentToolbarItem(nextIndex)) === null || _e === void 0 ? void 0 : _e.focus());
|
|
30774
30869
|
}
|
|
30775
30870
|
handleBlur(event) {
|
|
30776
30871
|
if (event.target === this.host)
|
|
@@ -30962,7 +31057,7 @@ class KolTooltipWc {
|
|
|
30962
31057
|
getDocument().removeEventListener('keyup', this.hideTooltipByEscape);
|
|
30963
31058
|
}
|
|
30964
31059
|
render() {
|
|
30965
|
-
return (hAsync(Host, { key: '
|
|
31060
|
+
return (hAsync(Host, { key: 'efee2bbf85c5acdd5a489a249bd7bcf7b2cd3dc2', class: "kol-tooltip" }, this.state._label !== '' && (hAsync("div", { key: '99955951f3dd9d2c04e330be7f783ff9ebb7250f', class: "kol-tooltip__floating", ref: this.catchTooltipElement }, hAsync("div", { key: 'b023b51d943b2ffe5cb0773edb26a3c94e60829f', class: "kol-tooltip__arrow", ref: this.catchArrowElement }), hAsync(KolSpanFc, { key: 'ca17df24e680c94f6c1859104937c390f401e81c', class: "kol-tooltip__content", id: this.state._id, badgeText: this._badgeText, label: this.state._label })))));
|
|
30966
31061
|
}
|
|
30967
31062
|
validateBadgeText(value) {
|
|
30968
31063
|
validateBadgeText(this, value);
|
|
@@ -31040,7 +31135,7 @@ class KolTree {
|
|
|
31040
31135
|
registerInstance(this, hostRef);
|
|
31041
31136
|
}
|
|
31042
31137
|
render() {
|
|
31043
|
-
return (hAsync(KolTreeWcTag, { key: '
|
|
31138
|
+
return (hAsync(KolTreeWcTag, { key: '0a42e480a9fe270180fa75f07b87bfb00a634ac9', _label: this._label }, hAsync("slot", { key: '19c9f71d5a62202b0022adff62b36a277797dd0c' })));
|
|
31044
31139
|
}
|
|
31045
31140
|
static get style() { return {
|
|
31046
31141
|
default: defaultStyleCss$2
|
|
@@ -31063,27 +31158,24 @@ class KolTreeItem {
|
|
|
31063
31158
|
constructor(hostRef) {
|
|
31064
31159
|
registerInstance(this, hostRef);
|
|
31065
31160
|
}
|
|
31066
|
-
async
|
|
31067
|
-
|
|
31068
|
-
|
|
31069
|
-
}
|
|
31161
|
+
async focus() {
|
|
31162
|
+
var _a;
|
|
31163
|
+
return Promise.resolve((_a = this.element) === null || _a === void 0 ? void 0 : _a.focus());
|
|
31070
31164
|
}
|
|
31071
31165
|
async expand() {
|
|
31072
|
-
|
|
31073
|
-
|
|
31074
|
-
}
|
|
31166
|
+
var _a;
|
|
31167
|
+
return Promise.resolve((_a = this.element) === null || _a === void 0 ? void 0 : _a.expand());
|
|
31075
31168
|
}
|
|
31076
31169
|
async collapse() {
|
|
31077
|
-
|
|
31078
|
-
|
|
31079
|
-
}
|
|
31170
|
+
var _a;
|
|
31171
|
+
return Promise.resolve((_a = this.element) === null || _a === void 0 ? void 0 : _a.collapse());
|
|
31080
31172
|
}
|
|
31081
31173
|
async isOpen() {
|
|
31082
31174
|
var _a, _b;
|
|
31083
31175
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
31084
31176
|
}
|
|
31085
31177
|
render() {
|
|
31086
|
-
return (hAsync(KolTreeItemWcTag, { key: '
|
|
31178
|
+
return (hAsync(KolTreeItemWcTag, { key: '92fa2ccaf67dfa24531f8fca4c802c2bbfc03916', _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: '164f21da0af88f1021068e5e310d1487707f7059' })));
|
|
31087
31179
|
}
|
|
31088
31180
|
static get style() { return {
|
|
31089
31181
|
default: defaultStyleCss$1
|
|
@@ -31096,7 +31188,7 @@ class KolTreeItem {
|
|
|
31096
31188
|
"_label": [1],
|
|
31097
31189
|
"_open": [4],
|
|
31098
31190
|
"_href": [1],
|
|
31099
|
-
"
|
|
31191
|
+
"focus": [64],
|
|
31100
31192
|
"expand": [64],
|
|
31101
31193
|
"collapse": [64],
|
|
31102
31194
|
"isOpen": [64]
|
|
@@ -31121,12 +31213,12 @@ class KolTreeItemWc {
|
|
|
31121
31213
|
}
|
|
31122
31214
|
render() {
|
|
31123
31215
|
const { _href, _active, _hasChildren, _open, _label } = this.state;
|
|
31124
|
-
return (hAsync(Host, { key: '
|
|
31216
|
+
return (hAsync(Host, { key: 'e99bc051fe9fe90cd4a5aaf861d61d0d512c808a', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { key: 'e0ae86b656eab778f80852a40dd84cda832695a9', class: "kol-tree-item", style: {
|
|
31125
31217
|
'--level': `${this.level}`,
|
|
31126
|
-
} }, hAsync(KolLinkWcTag, { key: '
|
|
31218
|
+
} }, hAsync(KolLinkWcTag, { key: '3ffea17f30ab8e461e936d691d7fd4389f04bf2c', class: clsx('kol-tree-item__link', {
|
|
31127
31219
|
'kol-tree-item__link--first-level': this.level === 0,
|
|
31128
31220
|
'kol-tree-item__link--active': _active,
|
|
31129
|
-
}), _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: '
|
|
31221
|
+
}), _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: 'dfd6fa644efe7efe4700ec74a5f1c50e82262494', 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(KolIconTag, { 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: 'ef4714af7a6a63c447b3df2647dc605d5c9693b9', class: "kol-tree-item__text" }, _label))), hAsync("ul", { key: '34f5c43c0d6b3ecc0d78d6eb2101aa451e5d1cb2', class: "kol-tree-item__children", hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: '1ef6c1855acdebee823d68f7d0849fcd79d5d558' })))));
|
|
31130
31222
|
}
|
|
31131
31223
|
validateActive(value) {
|
|
31132
31224
|
validateActive(this, value || false);
|
|
@@ -31164,12 +31256,14 @@ class KolTreeItemWc {
|
|
|
31164
31256
|
var _a, _b;
|
|
31165
31257
|
this.state = Object.assign(Object.assign({}, this.state), { _hasChildren: Boolean((_b = (_a = this.host.querySelector('slot')) === null || _a === void 0 ? void 0 : _a.assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a).length) });
|
|
31166
31258
|
}
|
|
31167
|
-
async
|
|
31168
|
-
|
|
31259
|
+
async focus() {
|
|
31260
|
+
var _a;
|
|
31261
|
+
return Promise.resolve((_a = this.linkElement) === null || _a === void 0 ? void 0 : _a.focus());
|
|
31169
31262
|
}
|
|
31170
31263
|
async handleExpandClick(event) {
|
|
31264
|
+
var _a;
|
|
31171
31265
|
event.preventDefault();
|
|
31172
|
-
await this.linkElement.
|
|
31266
|
+
await ((_a = this.linkElement) === null || _a === void 0 ? void 0 : _a.focus());
|
|
31173
31267
|
await this.expand();
|
|
31174
31268
|
}
|
|
31175
31269
|
async expand() {
|
|
@@ -31178,8 +31272,9 @@ class KolTreeItemWc {
|
|
|
31178
31272
|
}
|
|
31179
31273
|
}
|
|
31180
31274
|
async handleCollapseClick(event) {
|
|
31275
|
+
var _a;
|
|
31181
31276
|
event.preventDefault();
|
|
31182
|
-
this.linkElement.focus();
|
|
31277
|
+
await ((_a = this.linkElement) === null || _a === void 0 ? void 0 : _a.focus());
|
|
31183
31278
|
await this.collapse();
|
|
31184
31279
|
}
|
|
31185
31280
|
async collapse() {
|
|
@@ -31208,7 +31303,7 @@ class KolTreeItemWc {
|
|
|
31208
31303
|
"_href": [1],
|
|
31209
31304
|
"level": [32],
|
|
31210
31305
|
"state": [32],
|
|
31211
|
-
"
|
|
31306
|
+
"focus": [64],
|
|
31212
31307
|
"expand": [64],
|
|
31213
31308
|
"collapse": [64],
|
|
31214
31309
|
"isOpen": [64]
|
|
@@ -31230,7 +31325,7 @@ class KolTreeWc {
|
|
|
31230
31325
|
validateLabel(this, value);
|
|
31231
31326
|
}
|
|
31232
31327
|
render() {
|
|
31233
|
-
return (hAsync(Host, { key: '
|
|
31328
|
+
return (hAsync(Host, { key: '6e1fc1f0d6757fec0658d28ff54fe73a58b60fa9', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("nav", { key: 'dfc733503c12e36fc8e6fc958273555f4e698237', class: "kol-tree", "aria-label": this.state._label }, hAsync("ul", { key: '9c68ce61a9bfbe5ade976515eaa43e2d9fbf380d', class: "kol-tree__treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: 'db660a5bc5cb5544f2c35e9e14f2a61d6e06ac69' })))));
|
|
31234
31329
|
}
|
|
31235
31330
|
static isTreeItem(element) {
|
|
31236
31331
|
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
|
@@ -31293,7 +31388,7 @@ class KolTreeWc {
|
|
|
31293
31388
|
return elementsWithInclude.filter((element) => element.include).map((element) => element.value);
|
|
31294
31389
|
}
|
|
31295
31390
|
async handleKeyDown(event) {
|
|
31296
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
31391
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
31297
31392
|
const openItems = await this.getOpenTreeItemElements();
|
|
31298
31393
|
const currentTreeItem = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(KolTreeItemTag);
|
|
31299
31394
|
const hasModifierKeyPressed = event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;
|
|
@@ -31303,12 +31398,12 @@ class KolTreeWc {
|
|
|
31303
31398
|
const currentIndex = openItems === null || openItems === void 0 ? void 0 : openItems.findIndex((elem) => elem === currentTreeItem);
|
|
31304
31399
|
switch (event.key) {
|
|
31305
31400
|
case 'ArrowDown': {
|
|
31306
|
-
await ((_b = openItems[currentIndex + 1]) === null || _b === void 0 ? void 0 : _b.
|
|
31401
|
+
await ((_b = openItems[currentIndex + 1]) === null || _b === void 0 ? void 0 : _b.focus());
|
|
31307
31402
|
event.preventDefault();
|
|
31308
31403
|
break;
|
|
31309
31404
|
}
|
|
31310
31405
|
case 'ArrowUp': {
|
|
31311
|
-
await ((_c = openItems[currentIndex - 1]) === null || _c === void 0 ? void 0 : _c.
|
|
31406
|
+
await ((_c = openItems[currentIndex - 1]) === null || _c === void 0 ? void 0 : _c.focus());
|
|
31312
31407
|
event.preventDefault();
|
|
31313
31408
|
break;
|
|
31314
31409
|
}
|
|
@@ -31316,7 +31411,7 @@ class KolTreeWc {
|
|
|
31316
31411
|
case 'ArrowRight': {
|
|
31317
31412
|
event.preventDefault();
|
|
31318
31413
|
if (await currentTreeItem.isOpen()) {
|
|
31319
|
-
await ((_d = openItems[currentIndex + 1]) === null || _d === void 0 ? void 0 : _d.
|
|
31414
|
+
await ((_d = openItems[currentIndex + 1]) === null || _d === void 0 ? void 0 : _d.focus());
|
|
31320
31415
|
}
|
|
31321
31416
|
else {
|
|
31322
31417
|
await currentTreeItem.expand();
|
|
@@ -31331,17 +31426,17 @@ class KolTreeWc {
|
|
|
31331
31426
|
}
|
|
31332
31427
|
else {
|
|
31333
31428
|
const parentIndex = openItems.findIndex((item) => item === currentTreeItem.parentElement);
|
|
31334
|
-
parentIndex !== -1 && (await ((_e = openItems[parentIndex]) === null || _e === void 0 ? void 0 : _e.
|
|
31429
|
+
parentIndex !== -1 && (await ((_e = openItems[parentIndex]) === null || _e === void 0 ? void 0 : _e.focus()));
|
|
31335
31430
|
}
|
|
31336
31431
|
break;
|
|
31337
31432
|
}
|
|
31338
31433
|
case 'Home': {
|
|
31339
|
-
await ((_f = openItems[0]) === null || _f === void 0 ? void 0 : _f.
|
|
31434
|
+
await ((_f = openItems[0]) === null || _f === void 0 ? void 0 : _f.focus());
|
|
31340
31435
|
event.preventDefault();
|
|
31341
31436
|
break;
|
|
31342
31437
|
}
|
|
31343
31438
|
case 'End': {
|
|
31344
|
-
await ((_g = openItems[openItems.length - 1]) === null || _g === void 0 ? void 0 : _g.
|
|
31439
|
+
await ((_g = openItems[openItems.length - 1]) === null || _g === void 0 ? void 0 : _g.focus());
|
|
31345
31440
|
event.preventDefault();
|
|
31346
31441
|
break;
|
|
31347
31442
|
}
|
|
@@ -31354,14 +31449,14 @@ class KolTreeWc {
|
|
|
31354
31449
|
.slice(startIndex, startIndex + openItems.length)
|
|
31355
31450
|
.findIndex((item) => { var _a; return (_a = item.getAttribute('_label')) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase().startsWith(char); });
|
|
31356
31451
|
if (matchIndex !== -1) {
|
|
31357
|
-
await wrapAroundItems[startIndex + matchIndex].
|
|
31452
|
+
await ((_j = wrapAroundItems[startIndex + matchIndex]) === null || _j === void 0 ? void 0 : _j.focus());
|
|
31358
31453
|
event.preventDefault();
|
|
31359
31454
|
}
|
|
31360
31455
|
}
|
|
31361
31456
|
break;
|
|
31362
31457
|
}
|
|
31363
31458
|
case '*': {
|
|
31364
|
-
const siblings = (
|
|
31459
|
+
const siblings = (_k = currentTreeItem.parentElement) === null || _k === void 0 ? void 0 : _k.querySelectorAll(KolTreeItemTag);
|
|
31365
31460
|
siblings === null || siblings === void 0 ? void 0 : siblings.forEach((element) => {
|
|
31366
31461
|
void element.expand();
|
|
31367
31462
|
});
|
|
@@ -31427,7 +31522,7 @@ class KolVersion {
|
|
|
31427
31522
|
};
|
|
31428
31523
|
}
|
|
31429
31524
|
render() {
|
|
31430
|
-
return (hAsync(Host, { key: '
|
|
31525
|
+
return (hAsync(Host, { key: 'c2c4090511476f2b782e5ec11eeefb14e84aeef8', class: "kol-version" }, hAsync(KolBadgeTag, { key: '8cca6fc737968718a4ade9c153711209b562c9bf', _color: "#bec5c9", _icons: {
|
|
31431
31526
|
left: { icon: 'kolicon-version', label: this.translateVersion },
|
|
31432
31527
|
}, _label: this.state._label })));
|
|
31433
31528
|
}
|
|
@@ -31488,6 +31583,8 @@ registerComponents([
|
|
|
31488
31583
|
KolCardWc,
|
|
31489
31584
|
KolCombobox,
|
|
31490
31585
|
KolDetails,
|
|
31586
|
+
KolDialog,
|
|
31587
|
+
KolDialogWc,
|
|
31491
31588
|
KolDrawer,
|
|
31492
31589
|
KolForm,
|
|
31493
31590
|
KolHeading,
|