@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.mjs
CHANGED
|
@@ -144,7 +144,7 @@ function _mergeNamespaces(n, m) {
|
|
|
144
144
|
|
|
145
145
|
const NAMESPACE = 'kolibri';
|
|
146
146
|
const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
|
|
147
|
-
const Env = /* kolibri */ {"kolibriVersion":"4.0.0-
|
|
147
|
+
const Env = /* kolibri */ {"kolibriVersion":"4.0.0-ee1678914efc9a51fdc688bac71b570e768a8032.0"};
|
|
148
148
|
|
|
149
149
|
function getDefaultExportFromCjs (x) {
|
|
150
150
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
@@ -574,47 +574,48 @@ var TagEnum;
|
|
|
574
574
|
TagEnum[TagEnum["card"] = 8] = "card";
|
|
575
575
|
TagEnum[TagEnum["combobox"] = 9] = "combobox";
|
|
576
576
|
TagEnum[TagEnum["details"] = 10] = "details";
|
|
577
|
-
TagEnum[TagEnum["
|
|
578
|
-
TagEnum[TagEnum["
|
|
579
|
-
TagEnum[TagEnum["
|
|
580
|
-
TagEnum[TagEnum["
|
|
581
|
-
TagEnum[TagEnum["
|
|
582
|
-
TagEnum[TagEnum["
|
|
583
|
-
TagEnum[TagEnum["input-
|
|
584
|
-
TagEnum[TagEnum["input-
|
|
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["
|
|
593
|
-
TagEnum[TagEnum["
|
|
594
|
-
TagEnum[TagEnum["link
|
|
595
|
-
TagEnum[TagEnum["
|
|
596
|
-
TagEnum[TagEnum["
|
|
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["table
|
|
610
|
-
TagEnum[TagEnum["table-
|
|
611
|
-
TagEnum[TagEnum["
|
|
612
|
-
TagEnum[TagEnum["
|
|
613
|
-
TagEnum[TagEnum["
|
|
614
|
-
TagEnum[TagEnum["
|
|
615
|
-
TagEnum[TagEnum["
|
|
616
|
-
TagEnum[TagEnum["
|
|
617
|
-
TagEnum[TagEnum["tree
|
|
577
|
+
TagEnum[TagEnum["dialog"] = 11] = "dialog";
|
|
578
|
+
TagEnum[TagEnum["drawer"] = 12] = "drawer";
|
|
579
|
+
TagEnum[TagEnum["form"] = 13] = "form";
|
|
580
|
+
TagEnum[TagEnum["heading"] = 14] = "heading";
|
|
581
|
+
TagEnum[TagEnum["icon"] = 15] = "icon";
|
|
582
|
+
TagEnum[TagEnum["image"] = 16] = "image";
|
|
583
|
+
TagEnum[TagEnum["input-checkbox"] = 17] = "input-checkbox";
|
|
584
|
+
TagEnum[TagEnum["input-color"] = 18] = "input-color";
|
|
585
|
+
TagEnum[TagEnum["input-date"] = 19] = "input-date";
|
|
586
|
+
TagEnum[TagEnum["input-email"] = 20] = "input-email";
|
|
587
|
+
TagEnum[TagEnum["input-file"] = 21] = "input-file";
|
|
588
|
+
TagEnum[TagEnum["input-number"] = 22] = "input-number";
|
|
589
|
+
TagEnum[TagEnum["input-password"] = 23] = "input-password";
|
|
590
|
+
TagEnum[TagEnum["input-radio"] = 24] = "input-radio";
|
|
591
|
+
TagEnum[TagEnum["input-range"] = 25] = "input-range";
|
|
592
|
+
TagEnum[TagEnum["input-text"] = 26] = "input-text";
|
|
593
|
+
TagEnum[TagEnum["kolibri"] = 27] = "kolibri";
|
|
594
|
+
TagEnum[TagEnum["link"] = 28] = "link";
|
|
595
|
+
TagEnum[TagEnum["link-button"] = 29] = "link-button";
|
|
596
|
+
TagEnum[TagEnum["logo"] = 30] = "logo";
|
|
597
|
+
TagEnum[TagEnum["modal"] = 31] = "modal";
|
|
598
|
+
TagEnum[TagEnum["nav"] = 32] = "nav";
|
|
599
|
+
TagEnum[TagEnum["pagination"] = 33] = "pagination";
|
|
600
|
+
TagEnum[TagEnum["popover-button"] = 34] = "popover-button";
|
|
601
|
+
TagEnum[TagEnum["progress"] = 35] = "progress";
|
|
602
|
+
TagEnum[TagEnum["quote"] = 36] = "quote";
|
|
603
|
+
TagEnum[TagEnum["select"] = 37] = "select";
|
|
604
|
+
TagEnum[TagEnum["single-select"] = 38] = "single-select";
|
|
605
|
+
TagEnum[TagEnum["skip-nav"] = 39] = "skip-nav";
|
|
606
|
+
TagEnum[TagEnum["spin"] = 40] = "spin";
|
|
607
|
+
TagEnum[TagEnum["split-button"] = 41] = "split-button";
|
|
608
|
+
TagEnum[TagEnum["symbol"] = 42] = "symbol";
|
|
609
|
+
TagEnum[TagEnum["table"] = 43] = "table";
|
|
610
|
+
TagEnum[TagEnum["table-stateful"] = 44] = "table-stateful";
|
|
611
|
+
TagEnum[TagEnum["table-stateless"] = 45] = "table-stateless";
|
|
612
|
+
TagEnum[TagEnum["tabs"] = 46] = "tabs";
|
|
613
|
+
TagEnum[TagEnum["textarea"] = 47] = "textarea";
|
|
614
|
+
TagEnum[TagEnum["toast-container"] = 48] = "toast-container";
|
|
615
|
+
TagEnum[TagEnum["toolbar"] = 49] = "toolbar";
|
|
616
|
+
TagEnum[TagEnum["tooltip"] = 50] = "tooltip";
|
|
617
|
+
TagEnum[TagEnum["tree"] = 51] = "tree";
|
|
618
|
+
TagEnum[TagEnum["tree-item"] = 52] = "tree-item";
|
|
618
619
|
})(TagEnum || (TagEnum = {}));
|
|
619
620
|
|
|
620
621
|
const getWindow$1 = () => {
|
|
@@ -2672,12 +2673,16 @@ const validateTableHeaderCells = (component, value) => {
|
|
|
2672
2673
|
}
|
|
2673
2674
|
catch (e) {
|
|
2674
2675
|
}
|
|
2675
|
-
watchValidator(component, '_headerCells', (value) =>
|
|
2676
|
-
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
|
|
2676
|
+
watchValidator(component, '_headerCells', (value) => {
|
|
2677
|
+
var _a, _b;
|
|
2678
|
+
return typeof value === 'object' &&
|
|
2679
|
+
value !== null &&
|
|
2680
|
+
(value.horizontal === undefined ||
|
|
2681
|
+
(Array.isArray(value.horizontal) && value.horizontal.find((headerRow) => !Array.isArray(headerRow)) === undefined)) &&
|
|
2682
|
+
(value.vertical === undefined || (Array.isArray(value.vertical) && value.vertical.find((headerCol) => !Array.isArray(headerCol)) === undefined)) &&
|
|
2683
|
+
[...((_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') &&
|
|
2684
|
+
true;
|
|
2685
|
+
}, new Set(['TableHeaderCellsPropType']), value);
|
|
2681
2686
|
});
|
|
2682
2687
|
});
|
|
2683
2688
|
};
|
|
@@ -5403,7 +5408,7 @@ var Fragment = (_, children) => children;
|
|
|
5403
5408
|
var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
|
|
5404
5409
|
if (listeners && win.document) {
|
|
5405
5410
|
listeners.map(([flags, name, method]) => {
|
|
5406
|
-
const target =
|
|
5411
|
+
const target = elm;
|
|
5407
5412
|
const handler = hostListenerProxy(hostRef, method);
|
|
5408
5413
|
const opts = hostListenerOpts(flags);
|
|
5409
5414
|
plt.ael(target, name, handler, opts);
|
|
@@ -5425,12 +5430,6 @@ var hostListenerProxy = (hostRef, methodName) => (ev) => {
|
|
|
5425
5430
|
consoleError(e, hostRef.$hostElement$);
|
|
5426
5431
|
}
|
|
5427
5432
|
};
|
|
5428
|
-
var getHostListenerTarget = (doc, elm, flags) => {
|
|
5429
|
-
if (flags & 8 /* TargetWindow */) {
|
|
5430
|
-
return win;
|
|
5431
|
-
}
|
|
5432
|
-
return elm;
|
|
5433
|
-
};
|
|
5434
5433
|
var hostListenerOpts = (flags) => (flags & 2 /* Capture */) !== 0;
|
|
5435
5434
|
|
|
5436
5435
|
// src/runtime/vdom/vdom-annotations.ts
|
|
@@ -6068,6 +6067,7 @@ let KolBadgeTag = 'kol-badge';
|
|
|
6068
6067
|
let KolButtonTag = 'kol-button';
|
|
6069
6068
|
let KolButtonWcTag = 'kol-button-wc';
|
|
6070
6069
|
let KolCardWcTag = 'kol-card-wc';
|
|
6070
|
+
let KolDialogWcTag = 'kol-dialog-wc';
|
|
6071
6071
|
let KolFormTag = 'kol-form';
|
|
6072
6072
|
let KolHeadingTag = 'kol-heading';
|
|
6073
6073
|
let KolIconTag = 'kol-icon';
|
|
@@ -6087,7 +6087,7 @@ let KolTreeItemWcTag = 'kol-tree-item-wc';
|
|
|
6087
6087
|
let KolTreeTag = 'kol-tree';
|
|
6088
6088
|
let KolTreeWcTag = 'kol-tree-wc';
|
|
6089
6089
|
|
|
6090
|
-
const defaultStyleCss$
|
|
6090
|
+
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}";
|
|
6091
6091
|
|
|
6092
6092
|
class KolAbbr {
|
|
6093
6093
|
constructor(hostRef) {
|
|
@@ -6109,7 +6109,7 @@ class KolAbbr {
|
|
|
6109
6109
|
"_label": ["validateLabel"]
|
|
6110
6110
|
}; }
|
|
6111
6111
|
static get style() { return {
|
|
6112
|
-
default: defaultStyleCss$
|
|
6112
|
+
default: defaultStyleCss$N
|
|
6113
6113
|
}; }
|
|
6114
6114
|
static get cmpMeta() { return {
|
|
6115
6115
|
"$flags$": 297,
|
|
@@ -6261,32 +6261,32 @@ if (isTestMode()) {
|
|
|
6261
6261
|
|
|
6262
6262
|
var KolEvent;
|
|
6263
6263
|
(function (KolEvent) {
|
|
6264
|
-
KolEvent["blur"] = "
|
|
6265
|
-
KolEvent["change"] = "
|
|
6266
|
-
KolEvent["changeHeaderCells"] = "
|
|
6267
|
-
KolEvent["changePage"] = "
|
|
6268
|
-
KolEvent["changePageSize"] = "
|
|
6269
|
-
KolEvent["click"] = "
|
|
6270
|
-
KolEvent["close"] = "
|
|
6271
|
-
KolEvent["create"] = "
|
|
6272
|
-
KolEvent["focus"] = "
|
|
6273
|
-
KolEvent["input"] = "
|
|
6274
|
-
KolEvent["keydown"] = "
|
|
6275
|
-
KolEvent["mousedown"] = "
|
|
6276
|
-
KolEvent["reset"] = "
|
|
6277
|
-
KolEvent["select"] = "
|
|
6278
|
-
KolEvent["selectionChange"] = "
|
|
6279
|
-
KolEvent["sort"] = "
|
|
6280
|
-
KolEvent["submit"] = "
|
|
6281
|
-
KolEvent["toggle"] = "
|
|
6264
|
+
KolEvent["blur"] = "blur";
|
|
6265
|
+
KolEvent["change"] = "change";
|
|
6266
|
+
KolEvent["changeHeaderCells"] = "changeheadercells";
|
|
6267
|
+
KolEvent["changePage"] = "changepage";
|
|
6268
|
+
KolEvent["changePageSize"] = "changepagesize";
|
|
6269
|
+
KolEvent["click"] = "click";
|
|
6270
|
+
KolEvent["close"] = "close";
|
|
6271
|
+
KolEvent["create"] = "create";
|
|
6272
|
+
KolEvent["focus"] = "focus";
|
|
6273
|
+
KolEvent["input"] = "input";
|
|
6274
|
+
KolEvent["keydown"] = "keydown";
|
|
6275
|
+
KolEvent["mousedown"] = "mousedown";
|
|
6276
|
+
KolEvent["reset"] = "reset";
|
|
6277
|
+
KolEvent["select"] = "select";
|
|
6278
|
+
KolEvent["selectionChange"] = "selectionchange";
|
|
6279
|
+
KolEvent["sort"] = "sort";
|
|
6280
|
+
KolEvent["submit"] = "submit";
|
|
6281
|
+
KolEvent["toggle"] = "toggle";
|
|
6282
6282
|
})(KolEvent || (KolEvent = {}));
|
|
6283
|
-
|
|
6284
|
-
|
|
6285
|
-
|
|
6286
|
-
|
|
6287
|
-
|
|
6288
|
-
|
|
6289
|
-
});
|
|
6283
|
+
const DEFAULT_OPTIONS = {
|
|
6284
|
+
bubbles: true,
|
|
6285
|
+
cancelable: true,
|
|
6286
|
+
composed: true,
|
|
6287
|
+
};
|
|
6288
|
+
function createKoliBriEvent(event, detail = null) {
|
|
6289
|
+
return new CustomEvent(event, Object.assign(Object.assign({}, DEFAULT_OPTIONS), { detail }));
|
|
6290
6290
|
}
|
|
6291
6291
|
function dispatchDomEvent(target, event, detail) {
|
|
6292
6292
|
target.dispatchEvent(createKoliBriEvent(event, detail));
|
|
@@ -6296,7 +6296,7 @@ const watchHeadingLevel = (component, value) => {
|
|
|
6296
6296
|
validateLevel(component, value);
|
|
6297
6297
|
};
|
|
6298
6298
|
|
|
6299
|
-
const defaultStyleCss$
|
|
6299
|
+
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}";
|
|
6300
6300
|
|
|
6301
6301
|
featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
|
|
6302
6302
|
|
|
@@ -6330,9 +6330,9 @@ class KolAccordion {
|
|
|
6330
6330
|
_on: {},
|
|
6331
6331
|
};
|
|
6332
6332
|
}
|
|
6333
|
-
async
|
|
6333
|
+
async focus() {
|
|
6334
6334
|
var _a;
|
|
6335
|
-
|
|
6335
|
+
return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
6336
6336
|
}
|
|
6337
6337
|
render() {
|
|
6338
6338
|
const { _open, _label, _disabled, _level } = this.state;
|
|
@@ -6356,7 +6356,7 @@ class KolAccordion {
|
|
|
6356
6356
|
animationClass: `${rootClass}__wrapper-animation`,
|
|
6357
6357
|
},
|
|
6358
6358
|
};
|
|
6359
|
-
return (hAsync(KolCollapsibleFc, Object.assign({ key: '
|
|
6359
|
+
return (hAsync(KolCollapsibleFc, Object.assign({ key: '033717b5a67b6f63ebea447be031a9c234339e43' }, props), hAsync("slot", { key: '08b68dbec91743fdfabdee75a07a451713951dc6' })));
|
|
6360
6360
|
}
|
|
6361
6361
|
validateDisabled(value) {
|
|
6362
6362
|
validateDisabled(this, value);
|
|
@@ -6391,7 +6391,7 @@ class KolAccordion {
|
|
|
6391
6391
|
"_open": ["validateOpen"]
|
|
6392
6392
|
}; }
|
|
6393
6393
|
static get style() { return {
|
|
6394
|
-
default: defaultStyleCss$
|
|
6394
|
+
default: defaultStyleCss$M
|
|
6395
6395
|
}; }
|
|
6396
6396
|
static get cmpMeta() { return {
|
|
6397
6397
|
"$flags$": 297,
|
|
@@ -6403,7 +6403,7 @@ class KolAccordion {
|
|
|
6403
6403
|
"_on": [16],
|
|
6404
6404
|
"_open": [1540],
|
|
6405
6405
|
"state": [32],
|
|
6406
|
-
"
|
|
6406
|
+
"focus": [64]
|
|
6407
6407
|
},
|
|
6408
6408
|
"$listeners$": undefined,
|
|
6409
6409
|
"$lazyBundleId$": "-",
|
|
@@ -6411,7 +6411,7 @@ class KolAccordion {
|
|
|
6411
6411
|
}; }
|
|
6412
6412
|
}
|
|
6413
6413
|
|
|
6414
|
-
const defaultStyleCss$
|
|
6414
|
+
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}";
|
|
6415
6415
|
|
|
6416
6416
|
class KolAlert {
|
|
6417
6417
|
constructor(hostRef) {
|
|
@@ -6429,7 +6429,7 @@ class KolAlert {
|
|
|
6429
6429
|
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' })));
|
|
6430
6430
|
}
|
|
6431
6431
|
static get style() { return {
|
|
6432
|
-
default: defaultStyleCss$
|
|
6432
|
+
default: defaultStyleCss$L
|
|
6433
6433
|
}; }
|
|
6434
6434
|
static get cmpMeta() { return {
|
|
6435
6435
|
"$flags$": 297,
|
|
@@ -6737,7 +6737,7 @@ var a = /*@__PURE__*/getDefaultExportFromCjs(easyBemExports);
|
|
|
6737
6737
|
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}
|
|
6738
6738
|
|
|
6739
6739
|
const bem$1 = c();
|
|
6740
|
-
const BEM_CLASS_ALERT__CLOSER = bem$1('kol-alert', 'closer');
|
|
6740
|
+
const BEM_CLASS_ALERT__CLOSER = bem$1('kol-alert', 'closer') + ' kol-close-button';
|
|
6741
6741
|
const BEM_CLASS_ALERT__CONTENT = bem$1('kol-alert', 'content');
|
|
6742
6742
|
const BEM_CLASS_ALERT__ICON = bem$1('kol-alert', 'icon');
|
|
6743
6743
|
|
|
@@ -6907,7 +6907,7 @@ class KolAlertWc {
|
|
|
6907
6907
|
}; }
|
|
6908
6908
|
}
|
|
6909
6909
|
|
|
6910
|
-
const defaultStyleCss$
|
|
6910
|
+
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}";
|
|
6911
6911
|
|
|
6912
6912
|
class KolAvatar {
|
|
6913
6913
|
constructor(hostRef) {
|
|
@@ -6918,7 +6918,7 @@ class KolAvatar {
|
|
|
6918
6918
|
return hAsync(KolAvatarWcTag, { key: 'b50d593f2fcc07fb3a1c8a92786df6ddcbc917cf', _color: this._color, _src: this._src, _label: this._label });
|
|
6919
6919
|
}
|
|
6920
6920
|
static get style() { return {
|
|
6921
|
-
default: defaultStyleCss$
|
|
6921
|
+
default: defaultStyleCss$K
|
|
6922
6922
|
}; }
|
|
6923
6923
|
static get cmpMeta() { return {
|
|
6924
6924
|
"$flags$": 297,
|
|
@@ -18559,7 +18559,7 @@ const ToastItemFc = (_a) => {
|
|
|
18559
18559
|
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))));
|
|
18560
18560
|
};
|
|
18561
18561
|
|
|
18562
|
-
const defaultStyleCss$
|
|
18562
|
+
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}";
|
|
18563
18563
|
|
|
18564
18564
|
featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
|
|
18565
18565
|
class KolBadge {
|
|
@@ -18588,18 +18588,18 @@ class KolBadge {
|
|
|
18588
18588
|
renderSmartButton(props) {
|
|
18589
18589
|
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 }));
|
|
18590
18590
|
}
|
|
18591
|
-
async
|
|
18591
|
+
async focus() {
|
|
18592
18592
|
var _a;
|
|
18593
|
-
|
|
18593
|
+
return Promise.resolve((_a = this.smartButtonRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
18594
18594
|
}
|
|
18595
18595
|
render() {
|
|
18596
18596
|
const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;
|
|
18597
|
-
return (hAsync("span", { key: '
|
|
18597
|
+
return (hAsync("span", { key: 'fe86a1a3e242f1ea2b439364882543151b319ea6', class: clsx('kol-badge', {
|
|
18598
18598
|
'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
|
|
18599
18599
|
}), style: {
|
|
18600
18600
|
backgroundColor: this.bgColorStr,
|
|
18601
18601
|
color: this.colorStr,
|
|
18602
|
-
} }, hAsync(KolSpanFc, { key: '
|
|
18602
|
+
} }, 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)));
|
|
18603
18603
|
}
|
|
18604
18604
|
validateIcons(value) {
|
|
18605
18605
|
validateIcons(this, value);
|
|
@@ -18633,7 +18633,7 @@ class KolBadge {
|
|
|
18633
18633
|
"_smartButton": ["validateSmartButton"]
|
|
18634
18634
|
}; }
|
|
18635
18635
|
static get style() { return {
|
|
18636
|
-
default: defaultStyleCss$
|
|
18636
|
+
default: defaultStyleCss$J
|
|
18637
18637
|
}; }
|
|
18638
18638
|
static get cmpMeta() { return {
|
|
18639
18639
|
"$flags$": 297,
|
|
@@ -18644,7 +18644,7 @@ class KolBadge {
|
|
|
18644
18644
|
"_label": [1],
|
|
18645
18645
|
"_smartButton": [1, "_smart-button"],
|
|
18646
18646
|
"state": [32],
|
|
18647
|
-
"
|
|
18647
|
+
"focus": [64]
|
|
18648
18648
|
},
|
|
18649
18649
|
"$listeners$": undefined,
|
|
18650
18650
|
"$lazyBundleId$": "-",
|
|
@@ -18670,14 +18670,14 @@ const watchNavLinks = (className, component, value) => {
|
|
|
18670
18670
|
uiUxHintMillerscheZahl(className, component.state._links.length);
|
|
18671
18671
|
};
|
|
18672
18672
|
|
|
18673
|
-
const defaultStyleCss$
|
|
18673
|
+
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}";
|
|
18674
18674
|
|
|
18675
18675
|
class KolBreadcrumb {
|
|
18676
18676
|
constructor(hostRef) {
|
|
18677
18677
|
registerInstance(this, hostRef);
|
|
18678
18678
|
this.renderLink = (link, index) => {
|
|
18679
18679
|
const lastIndex = this.state._links.length - 1;
|
|
18680
|
-
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 : '
|
|
18680
|
+
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" })));
|
|
18681
18681
|
};
|
|
18682
18682
|
this.state = {
|
|
18683
18683
|
_label: '',
|
|
@@ -18685,7 +18685,7 @@ class KolBreadcrumb {
|
|
|
18685
18685
|
};
|
|
18686
18686
|
}
|
|
18687
18687
|
render() {
|
|
18688
|
-
return (hAsync("nav", { key: '
|
|
18688
|
+
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))));
|
|
18689
18689
|
}
|
|
18690
18690
|
validateLabel(value, _oldValue, initial = false) {
|
|
18691
18691
|
if (!initial) {
|
|
@@ -18712,7 +18712,7 @@ class KolBreadcrumb {
|
|
|
18712
18712
|
"_links": ["validateLinks"]
|
|
18713
18713
|
}; }
|
|
18714
18714
|
static get style() { return {
|
|
18715
|
-
default: defaultStyleCss$
|
|
18715
|
+
default: defaultStyleCss$I
|
|
18716
18716
|
}; }
|
|
18717
18717
|
static get cmpMeta() { return {
|
|
18718
18718
|
"$flags$": 297,
|
|
@@ -18728,7 +18728,7 @@ class KolBreadcrumb {
|
|
|
18728
18728
|
}; }
|
|
18729
18729
|
}
|
|
18730
18730
|
|
|
18731
|
-
const defaultStyleCss$
|
|
18731
|
+
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}";
|
|
18732
18732
|
|
|
18733
18733
|
class KolButton {
|
|
18734
18734
|
constructor(hostRef) {
|
|
@@ -18746,15 +18746,15 @@ class KolButton {
|
|
|
18746
18746
|
async getValue() {
|
|
18747
18747
|
return this._value;
|
|
18748
18748
|
}
|
|
18749
|
-
async
|
|
18749
|
+
async focus() {
|
|
18750
18750
|
var _a;
|
|
18751
|
-
|
|
18751
|
+
return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
18752
18752
|
}
|
|
18753
18753
|
render() {
|
|
18754
|
-
return (hAsync(KolButtonWcTag, { key: '
|
|
18754
|
+
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" })));
|
|
18755
18755
|
}
|
|
18756
18756
|
static get style() { return {
|
|
18757
|
-
default: defaultStyleCss$
|
|
18757
|
+
default: defaultStyleCss$H
|
|
18758
18758
|
}; }
|
|
18759
18759
|
static get cmpMeta() { return {
|
|
18760
18760
|
"$flags$": 297,
|
|
@@ -18782,7 +18782,7 @@ class KolButton {
|
|
|
18782
18782
|
"_value": [8],
|
|
18783
18783
|
"_variant": [1],
|
|
18784
18784
|
"getValue": [64],
|
|
18785
|
-
"
|
|
18785
|
+
"focus": [64]
|
|
18786
18786
|
},
|
|
18787
18787
|
"$listeners$": undefined,
|
|
18788
18788
|
"$lazyBundleId$": "-",
|
|
@@ -18790,7 +18790,7 @@ class KolButton {
|
|
|
18790
18790
|
}; }
|
|
18791
18791
|
}
|
|
18792
18792
|
|
|
18793
|
-
const defaultStyleCss$
|
|
18793
|
+
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}";
|
|
18794
18794
|
|
|
18795
18795
|
class KolButtonLink {
|
|
18796
18796
|
constructor(hostRef) {
|
|
@@ -18807,15 +18807,15 @@ class KolButtonLink {
|
|
|
18807
18807
|
async getValue() {
|
|
18808
18808
|
return this._value;
|
|
18809
18809
|
}
|
|
18810
|
-
async
|
|
18810
|
+
async focus() {
|
|
18811
18811
|
var _a;
|
|
18812
|
-
|
|
18812
|
+
return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
18813
18813
|
}
|
|
18814
18814
|
render() {
|
|
18815
|
-
return (hAsync(KolButtonWcTag, { key: '
|
|
18815
|
+
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" })));
|
|
18816
18816
|
}
|
|
18817
18817
|
static get style() { return {
|
|
18818
|
-
default: defaultStyleCss$
|
|
18818
|
+
default: defaultStyleCss$G
|
|
18819
18819
|
}; }
|
|
18820
18820
|
static get cmpMeta() { return {
|
|
18821
18821
|
"$flags$": 297,
|
|
@@ -18841,7 +18841,7 @@ class KolButtonLink {
|
|
|
18841
18841
|
"_type": [1],
|
|
18842
18842
|
"_value": [8],
|
|
18843
18843
|
"getValue": [64],
|
|
18844
|
-
"
|
|
18844
|
+
"focus": [64]
|
|
18845
18845
|
},
|
|
18846
18846
|
"$listeners$": undefined,
|
|
18847
18847
|
"$lazyBundleId$": "-",
|
|
@@ -19114,9 +19114,9 @@ class AssociatedInputController {
|
|
|
19114
19114
|
}
|
|
19115
19115
|
|
|
19116
19116
|
class KolButtonWc {
|
|
19117
|
-
async
|
|
19117
|
+
async focus() {
|
|
19118
19118
|
var _a;
|
|
19119
|
-
(_a = this.buttonRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
19119
|
+
return Promise.resolve((_a = this.buttonRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
19120
19120
|
}
|
|
19121
19121
|
render() {
|
|
19122
19122
|
var _a;
|
|
@@ -19125,14 +19125,14 @@ class KolButtonWc {
|
|
|
19125
19125
|
const badgeText = this.state._accessKey || this.state._shortKey;
|
|
19126
19126
|
const isDisabled = this.state._disabled === true;
|
|
19127
19127
|
const hideLabel = this.state._hideLabel === true;
|
|
19128
|
-
return (hAsync(Host, { key: '
|
|
19128
|
+
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', {
|
|
19129
19129
|
'kol-button--disabled': isDisabled,
|
|
19130
19130
|
[`kol-button--${this.state._buttonVariant}`]: this.state._buttonVariant !== 'custom',
|
|
19131
19131
|
'kol-button--inline': this.state._inline === true,
|
|
19132
19132
|
'kol-button--standalone': this.state._inline === false,
|
|
19133
19133
|
'kol-button--hide-label': hideLabel,
|
|
19134
19134
|
[this.state._customClass]: this.state._buttonVariant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
19135
|
-
}), 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: '
|
|
19135
|
+
}), 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 : '' }))));
|
|
19136
19136
|
}
|
|
19137
19137
|
constructor(hostRef) {
|
|
19138
19138
|
registerInstance(this, hostRef);
|
|
@@ -19337,7 +19337,7 @@ class KolButtonWc {
|
|
|
19337
19337
|
"_value": [8],
|
|
19338
19338
|
"_buttonVariant": [1, "_button-variant"],
|
|
19339
19339
|
"state": [32],
|
|
19340
|
-
"
|
|
19340
|
+
"focus": [64]
|
|
19341
19341
|
},
|
|
19342
19342
|
"$listeners$": undefined,
|
|
19343
19343
|
"$lazyBundleId$": "-",
|
|
@@ -19345,7 +19345,7 @@ class KolButtonWc {
|
|
|
19345
19345
|
}; }
|
|
19346
19346
|
}
|
|
19347
19347
|
|
|
19348
|
-
const defaultStyleCss$
|
|
19348
|
+
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}";
|
|
19349
19349
|
|
|
19350
19350
|
class KolCard {
|
|
19351
19351
|
constructor(hostRef) {
|
|
@@ -19357,7 +19357,7 @@ class KolCard {
|
|
|
19357
19357
|
return (hAsync(KolCardWcTag, { key: 'db950a543bc2f41a1e0786c9ac3d4cb0fce5cf97', _on: this._on, _hasCloser: this._hasCloser, _label: this._label, _level: this._level }, hAsync("slot", { key: 'f7ad1dd60427b5e2ae00f0e2260309a025d1ed44' })));
|
|
19358
19358
|
}
|
|
19359
19359
|
static get style() { return {
|
|
19360
|
-
default: defaultStyleCss$
|
|
19360
|
+
default: defaultStyleCss$F
|
|
19361
19361
|
}; }
|
|
19362
19362
|
static get cmpMeta() { return {
|
|
19363
19363
|
"$flags$": 297,
|
|
@@ -19399,7 +19399,7 @@ class KolCardWc {
|
|
|
19399
19399
|
this.validateOnValue = (value) => typeof value === 'object' && value !== null && typeof value.onClose === 'function';
|
|
19400
19400
|
}
|
|
19401
19401
|
render() {
|
|
19402
|
-
return (hAsync(Host, { key: '
|
|
19402
|
+
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: {
|
|
19403
19403
|
left: {
|
|
19404
19404
|
icon: 'kolicon-cross',
|
|
19405
19405
|
},
|
|
@@ -19932,15 +19932,15 @@ class ComboboxController extends InputIconController {
|
|
|
19932
19932
|
}
|
|
19933
19933
|
}
|
|
19934
19934
|
|
|
19935
|
-
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}";
|
|
19935
|
+
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}";
|
|
19936
19936
|
|
|
19937
19937
|
class KolCombobox {
|
|
19938
19938
|
async getValue() {
|
|
19939
19939
|
return this.state._value;
|
|
19940
19940
|
}
|
|
19941
|
-
async
|
|
19941
|
+
async focus() {
|
|
19942
19942
|
var _a;
|
|
19943
|
-
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
19943
|
+
return Promise.resolve((_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus());
|
|
19944
19944
|
}
|
|
19945
19945
|
selectOption(option) {
|
|
19946
19946
|
var _a;
|
|
@@ -20015,6 +20015,13 @@ class KolCombobox {
|
|
|
20015
20015
|
optionElement === null || optionElement === void 0 ? void 0 : optionElement.focus();
|
|
20016
20016
|
}
|
|
20017
20017
|
}
|
|
20018
|
+
selectFocusedOption() {
|
|
20019
|
+
if (this._filteredSuggestions && this._focusedOptionIndex >= 0 && this._focusedOptionIndex < this._filteredSuggestions.length) {
|
|
20020
|
+
this.selectOption(this._filteredSuggestions[this._focusedOptionIndex]);
|
|
20021
|
+
return true;
|
|
20022
|
+
}
|
|
20023
|
+
return false;
|
|
20024
|
+
}
|
|
20018
20025
|
focusSuggestionStartingWith(char) {
|
|
20019
20026
|
const charLowerCase = char.toLowerCase();
|
|
20020
20027
|
const index = Array.isArray(this._filteredSuggestions) &&
|
|
@@ -20047,15 +20054,15 @@ class KolCombobox {
|
|
|
20047
20054
|
}
|
|
20048
20055
|
render() {
|
|
20049
20056
|
const isDisabled = this.state._disabled === true;
|
|
20050
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
20057
|
+
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', {
|
|
20051
20058
|
'kol-combobox__delete--disabled': isDisabled,
|
|
20052
20059
|
}), _on: {
|
|
20053
20060
|
onClick: () => {
|
|
20054
20061
|
this.clearSelection();
|
|
20055
20062
|
},
|
|
20056
|
-
} })), hAsync(KolIconTag, { key: '
|
|
20063
|
+
} })), hAsync(KolIconTag, { key: '9e1e5b8d303e6dbf9b23cd9166a01d878edbc01a', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
20057
20064
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
20058
|
-
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '
|
|
20065
|
+
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '2608f9700e5dab1b0f826255922ca3111d96868d', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
|
|
20059
20066
|
this._filteredSuggestions.length > 0 &&
|
|
20060
20067
|
this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { disabled: false, index: index, option: option, searchTerm: this.state._value, ref: (el) => {
|
|
20061
20068
|
if (el)
|
|
@@ -20117,11 +20124,13 @@ class KolCombobox {
|
|
|
20117
20124
|
(_b = this.refInput) === null || _b === void 0 ? void 0 : _b.focus();
|
|
20118
20125
|
break;
|
|
20119
20126
|
}
|
|
20120
|
-
case '
|
|
20121
|
-
case 'Enter':
|
|
20122
|
-
|
|
20123
|
-
|
|
20124
|
-
this.
|
|
20127
|
+
case ' ':
|
|
20128
|
+
case 'Enter':
|
|
20129
|
+
case 'NumpadEnter': {
|
|
20130
|
+
if (this._isOpen) {
|
|
20131
|
+
if (this.selectFocusedOption()) {
|
|
20132
|
+
this._isOpen = false;
|
|
20133
|
+
}
|
|
20125
20134
|
}
|
|
20126
20135
|
else {
|
|
20127
20136
|
this.toggleListbox();
|
|
@@ -20287,22 +20296,22 @@ class KolCombobox {
|
|
|
20287
20296
|
handleMouseEvent() {
|
|
20288
20297
|
this.blockSuggestionMouseOver = false;
|
|
20289
20298
|
}
|
|
20290
|
-
handleFocusOut() {
|
|
20299
|
+
handleFocusOut(event) {
|
|
20291
20300
|
setTimeout(() => {
|
|
20292
20301
|
var _a;
|
|
20293
20302
|
if (!((_a = this.host) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement))) {
|
|
20294
|
-
this.onBlur();
|
|
20303
|
+
this.onBlur(event);
|
|
20295
20304
|
}
|
|
20296
|
-
}
|
|
20305
|
+
});
|
|
20297
20306
|
}
|
|
20298
|
-
handleWindowBlur() {
|
|
20299
|
-
this.onBlur();
|
|
20307
|
+
handleWindowBlur(event) {
|
|
20308
|
+
this.onBlur(event);
|
|
20300
20309
|
}
|
|
20301
|
-
onBlur() {
|
|
20302
|
-
var _a;
|
|
20310
|
+
onBlur(event) {
|
|
20303
20311
|
if (this._isOpen) {
|
|
20304
|
-
|
|
20305
|
-
|
|
20312
|
+
if (event instanceof FocusEvent && event.view === window) {
|
|
20313
|
+
this._isOpen = false;
|
|
20314
|
+
}
|
|
20306
20315
|
}
|
|
20307
20316
|
}
|
|
20308
20317
|
onChange(event) {
|
|
@@ -20332,7 +20341,7 @@ class KolCombobox {
|
|
|
20332
20341
|
"_value": ["validateValue"]
|
|
20333
20342
|
}; }
|
|
20334
20343
|
static get style() { return {
|
|
20335
|
-
default: defaultStyleCss$
|
|
20344
|
+
default: defaultStyleCss$E
|
|
20336
20345
|
}; }
|
|
20337
20346
|
static get cmpMeta() { return {
|
|
20338
20347
|
"$flags$": 297,
|
|
@@ -20364,15 +20373,15 @@ class KolCombobox {
|
|
|
20364
20373
|
"state": [32],
|
|
20365
20374
|
"inputHasFocus": [32],
|
|
20366
20375
|
"getValue": [64],
|
|
20367
|
-
"
|
|
20376
|
+
"focus": [64]
|
|
20368
20377
|
},
|
|
20369
|
-
"$listeners$": [[0, "keydown", "handleKeyDown"], [
|
|
20378
|
+
"$listeners$": [[0, "keydown", "handleKeyDown"], [0, "click", "handleWindowClick"], [1, "mousemove", "handleMouseEvent"], [0, "focusout", "handleFocusOut"], [0, "blur", "handleWindowBlur"]],
|
|
20370
20379
|
"$lazyBundleId$": "-",
|
|
20371
20380
|
"$attrsToReflect$": [["_touched", "_touched"], ["_value", "_value"]]
|
|
20372
20381
|
}; }
|
|
20373
20382
|
}
|
|
20374
20383
|
|
|
20375
|
-
const defaultStyleCss$
|
|
20384
|
+
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}";
|
|
20376
20385
|
|
|
20377
20386
|
class KolDetails {
|
|
20378
20387
|
constructor(hostRef) {
|
|
@@ -20401,9 +20410,9 @@ class KolDetails {
|
|
|
20401
20410
|
_on: {},
|
|
20402
20411
|
};
|
|
20403
20412
|
}
|
|
20404
|
-
async
|
|
20413
|
+
async focus() {
|
|
20405
20414
|
var _a;
|
|
20406
|
-
|
|
20415
|
+
return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
20407
20416
|
}
|
|
20408
20417
|
render() {
|
|
20409
20418
|
const { _open, _label, _disabled, _level } = this.state;
|
|
@@ -20428,7 +20437,7 @@ class KolDetails {
|
|
|
20428
20437
|
animationClass: `${rootClass}__wrapper-animation`,
|
|
20429
20438
|
},
|
|
20430
20439
|
};
|
|
20431
|
-
return (hAsync(KolCollapsibleFc, Object.assign({ key: '
|
|
20440
|
+
return (hAsync(KolCollapsibleFc, Object.assign({ key: '07bc611d260c54c24d5d46161db69ad2d77a85d0' }, props), hAsync("slot", { key: '1a188f043828b0a2cfad16b4e034606961a8722e' })));
|
|
20432
20441
|
}
|
|
20433
20442
|
validateDisabled(value) {
|
|
20434
20443
|
validateDisabled(this, value);
|
|
@@ -20463,7 +20472,7 @@ class KolDetails {
|
|
|
20463
20472
|
"_open": ["validateOpen"]
|
|
20464
20473
|
}; }
|
|
20465
20474
|
static get style() { return {
|
|
20466
|
-
default: defaultStyleCss$
|
|
20475
|
+
default: defaultStyleCss$D
|
|
20467
20476
|
}; }
|
|
20468
20477
|
static get cmpMeta() { return {
|
|
20469
20478
|
"$flags$": 297,
|
|
@@ -20475,7 +20484,7 @@ class KolDetails {
|
|
|
20475
20484
|
"_on": [16],
|
|
20476
20485
|
"_open": [1540],
|
|
20477
20486
|
"state": [32],
|
|
20478
|
-
"
|
|
20487
|
+
"focus": [64]
|
|
20479
20488
|
},
|
|
20480
20489
|
"$listeners$": undefined,
|
|
20481
20490
|
"$lazyBundleId$": "-",
|
|
@@ -20483,6 +20492,53 @@ class KolDetails {
|
|
|
20483
20492
|
}; }
|
|
20484
20493
|
}
|
|
20485
20494
|
|
|
20495
|
+
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}";
|
|
20496
|
+
|
|
20497
|
+
class KolDialog {
|
|
20498
|
+
constructor(hostRef) {
|
|
20499
|
+
registerInstance(this, hostRef);
|
|
20500
|
+
this.catchRef = (ref) => {
|
|
20501
|
+
this.dialogRef = ref;
|
|
20502
|
+
};
|
|
20503
|
+
this._width = '100%';
|
|
20504
|
+
this._variant = 'blank';
|
|
20505
|
+
}
|
|
20506
|
+
async openModal() {
|
|
20507
|
+
var _a;
|
|
20508
|
+
await ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.openModal());
|
|
20509
|
+
}
|
|
20510
|
+
async closeModal() {
|
|
20511
|
+
var _a;
|
|
20512
|
+
await ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.closeModal());
|
|
20513
|
+
}
|
|
20514
|
+
render() {
|
|
20515
|
+
return (hAsync(KolDialogWcTag, { key: '24744fff4cfebb9ef188926e5390064ce7ec6931', ref: this.catchRef, _label: this._label, _on: this._on, _variant: this._variant, _width: this._width }, hAsync("slot", { key: 'c8844dc7d6b9d16567ce400ae10f992018c6849d' })));
|
|
20516
|
+
}
|
|
20517
|
+
static get style() { return {
|
|
20518
|
+
default: defaultStyleCss$C
|
|
20519
|
+
}; }
|
|
20520
|
+
static get cmpMeta() { return {
|
|
20521
|
+
"$flags$": 297,
|
|
20522
|
+
"$tagName$": "kol-dialog",
|
|
20523
|
+
"$members$": {
|
|
20524
|
+
"_label": [1],
|
|
20525
|
+
"_on": [16],
|
|
20526
|
+
"_width": [1],
|
|
20527
|
+
"_variant": [1],
|
|
20528
|
+
"openModal": [64],
|
|
20529
|
+
"closeModal": [64]
|
|
20530
|
+
},
|
|
20531
|
+
"$listeners$": undefined,
|
|
20532
|
+
"$lazyBundleId$": "-",
|
|
20533
|
+
"$attrsToReflect$": []
|
|
20534
|
+
}; }
|
|
20535
|
+
}
|
|
20536
|
+
|
|
20537
|
+
const DialogVariantPropTypeOptions = ['blank', 'card'];
|
|
20538
|
+
const validateDialogVariant = (component, value) => {
|
|
20539
|
+
watchValidator(component, '_variant', (value) => typeof value === 'string' && DialogVariantPropTypeOptions.includes(value), new Set(DialogVariantPropTypeOptions), value);
|
|
20540
|
+
};
|
|
20541
|
+
|
|
20486
20542
|
let openTooltips = 0;
|
|
20487
20543
|
const tooltipOpened = () => {
|
|
20488
20544
|
openTooltips++;
|
|
@@ -20496,6 +20552,102 @@ const handleCancelOverlay = (event) => {
|
|
|
20496
20552
|
}
|
|
20497
20553
|
};
|
|
20498
20554
|
|
|
20555
|
+
class KolDialogWc {
|
|
20556
|
+
constructor(hostRef) {
|
|
20557
|
+
registerInstance(this, hostRef);
|
|
20558
|
+
this.on = {
|
|
20559
|
+
onClose: async () => {
|
|
20560
|
+
await this.closeModal();
|
|
20561
|
+
},
|
|
20562
|
+
};
|
|
20563
|
+
this._width = '100%';
|
|
20564
|
+
this._variant = 'blank';
|
|
20565
|
+
this.state = {
|
|
20566
|
+
_label: '',
|
|
20567
|
+
_width: '100%',
|
|
20568
|
+
};
|
|
20569
|
+
}
|
|
20570
|
+
disconnectedCallback() {
|
|
20571
|
+
void this.closeModal();
|
|
20572
|
+
}
|
|
20573
|
+
handleNativeCloseEvent() {
|
|
20574
|
+
var _a, _b;
|
|
20575
|
+
(_b = (_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
20576
|
+
if (this.host) {
|
|
20577
|
+
dispatchDomEvent(this.host, KolEvent.close);
|
|
20578
|
+
}
|
|
20579
|
+
}
|
|
20580
|
+
async openModal() {
|
|
20581
|
+
var _a;
|
|
20582
|
+
(_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.showModal();
|
|
20583
|
+
}
|
|
20584
|
+
async closeModal() {
|
|
20585
|
+
var _a, _b;
|
|
20586
|
+
(_b = (_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
20587
|
+
}
|
|
20588
|
+
render() {
|
|
20589
|
+
return (hAsync("dialog", { key: '288b2934310b2d34013f55e0f4636263e2be22aa', "aria-label": this.state._label, class: clsx('kol-dialog', 'kol-modal', {
|
|
20590
|
+
'kol-dialog__blank': this.state._variant === 'blank',
|
|
20591
|
+
'kol-dialog__card': this.state._variant === 'card',
|
|
20592
|
+
'kol-modal__blank': this.state._variant === 'blank',
|
|
20593
|
+
'kol-modal__card': this.state._variant === 'card',
|
|
20594
|
+
}), onCancel: handleCancelOverlay, onClose: this.handleNativeCloseEvent.bind(this), ref: (el) => {
|
|
20595
|
+
this.refDialog = el;
|
|
20596
|
+
}, style: {
|
|
20597
|
+
width: this.state._width,
|
|
20598
|
+
} }, 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' })))));
|
|
20599
|
+
}
|
|
20600
|
+
validateLabel(value) {
|
|
20601
|
+
validateLabel(this, value, {
|
|
20602
|
+
required: true,
|
|
20603
|
+
});
|
|
20604
|
+
}
|
|
20605
|
+
validateOn(value) {
|
|
20606
|
+
if (typeof value === 'object' && value !== null) {
|
|
20607
|
+
const callbacks = {};
|
|
20608
|
+
if (typeof value.onClose === 'function' || value.onClose === true) {
|
|
20609
|
+
callbacks.onClose = value.onClose;
|
|
20610
|
+
}
|
|
20611
|
+
setState(this, '_on', callbacks);
|
|
20612
|
+
}
|
|
20613
|
+
}
|
|
20614
|
+
validateWidth(value) {
|
|
20615
|
+
validateWidth(this, value);
|
|
20616
|
+
}
|
|
20617
|
+
validateVariant(value) {
|
|
20618
|
+
validateDialogVariant(this, value);
|
|
20619
|
+
}
|
|
20620
|
+
componentWillLoad() {
|
|
20621
|
+
this.validateLabel(this._label);
|
|
20622
|
+
this.validateOn(this._on);
|
|
20623
|
+
this.validateWidth(this._width);
|
|
20624
|
+
this.validateVariant(this._variant);
|
|
20625
|
+
}
|
|
20626
|
+
get host() { return getElement(this); }
|
|
20627
|
+
static get watchers() { return {
|
|
20628
|
+
"_label": ["validateLabel"],
|
|
20629
|
+
"_on": ["validateOn"],
|
|
20630
|
+
"_width": ["validateWidth"],
|
|
20631
|
+
"_variant": ["validateVariant"]
|
|
20632
|
+
}; }
|
|
20633
|
+
static get cmpMeta() { return {
|
|
20634
|
+
"$flags$": 260,
|
|
20635
|
+
"$tagName$": "kol-dialog-wc",
|
|
20636
|
+
"$members$": {
|
|
20637
|
+
"_label": [1],
|
|
20638
|
+
"_on": [16],
|
|
20639
|
+
"_width": [1],
|
|
20640
|
+
"_variant": [1],
|
|
20641
|
+
"state": [32],
|
|
20642
|
+
"openModal": [64],
|
|
20643
|
+
"closeModal": [64]
|
|
20644
|
+
},
|
|
20645
|
+
"$listeners$": undefined,
|
|
20646
|
+
"$lazyBundleId$": "-",
|
|
20647
|
+
"$attrsToReflect$": []
|
|
20648
|
+
}; }
|
|
20649
|
+
}
|
|
20650
|
+
|
|
20499
20651
|
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}";
|
|
20500
20652
|
|
|
20501
20653
|
class KolDrawer {
|
|
@@ -20542,7 +20694,7 @@ class KolDrawer {
|
|
|
20542
20694
|
} }, hAsync("div", { class: "kol-drawer__content" }, hAsync("slot", null))));
|
|
20543
20695
|
}
|
|
20544
20696
|
render() {
|
|
20545
|
-
return (hAsync(Host, { key: '
|
|
20697
|
+
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())));
|
|
20546
20698
|
}
|
|
20547
20699
|
validateLabel(value) {
|
|
20548
20700
|
validateLabel(this, value, {
|
|
@@ -20647,7 +20799,7 @@ class KolDrawer {
|
|
|
20647
20799
|
}; }
|
|
20648
20800
|
}
|
|
20649
20801
|
|
|
20650
|
-
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:
|
|
20802
|
+
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}";
|
|
20651
20803
|
|
|
20652
20804
|
class KolForm {
|
|
20653
20805
|
constructor(hostRef) {
|
|
@@ -20695,7 +20847,7 @@ class KolForm {
|
|
|
20695
20847
|
}
|
|
20696
20848
|
render() {
|
|
20697
20849
|
const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
|
|
20698
|
-
return (hAsync(Host, { key: '
|
|
20850
|
+
return (hAsync(Host, { key: '24abdec4e796efe805b3e29fa9f2e4d0189e64d4' }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
|
|
20699
20851
|
}
|
|
20700
20852
|
scrollToErrorList() {
|
|
20701
20853
|
var _a;
|
|
@@ -20785,7 +20937,7 @@ class KolHeading {
|
|
|
20785
20937
|
}
|
|
20786
20938
|
render() {
|
|
20787
20939
|
const { _secondaryHeadline, _label, _level } = this.state;
|
|
20788
|
-
return (hAsync(KolHeadingFc, { key: '
|
|
20940
|
+
return (hAsync(KolHeadingFc, { key: 'e0215bf6a8c6689b9661f08a0216f36bf6d2f332', secondaryHeadline: _secondaryHeadline, level: _level }, _label, hAsync("slot", { key: '1cd10de7df8a97779b57dd91247f6d3505e10f61', name: "expert", slot: "expert" })));
|
|
20789
20941
|
}
|
|
20790
20942
|
static get watchers() { return {
|
|
20791
20943
|
"_label": ["validateLabel"],
|
|
@@ -20830,12 +20982,12 @@ const bem = c();
|
|
|
20830
20982
|
const BEM_CLASS_ICON = bem('kol-icon');
|
|
20831
20983
|
const BEM_CLASS_ICON__ICON = bem('kol-icon', 'icon');
|
|
20832
20984
|
|
|
20833
|
-
const defaultStyleCss$y = "/* forward the rem function */\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=
|
|
20985
|
+
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}";
|
|
20834
20986
|
|
|
20835
20987
|
class KolIcon {
|
|
20836
20988
|
render() {
|
|
20837
20989
|
const hasAriaLabel = this.state._label.length > 0;
|
|
20838
|
-
return (hAsync(Host, { key: '
|
|
20990
|
+
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' })));
|
|
20839
20991
|
}
|
|
20840
20992
|
constructor(hostRef) {
|
|
20841
20993
|
registerInstance(this, hostRef);
|
|
@@ -20912,7 +21064,7 @@ class KolImage {
|
|
|
20912
21064
|
this.validateSrcset(this._srcset);
|
|
20913
21065
|
}
|
|
20914
21066
|
render() {
|
|
20915
|
-
return (hAsync("img", { key: '
|
|
21067
|
+
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 }));
|
|
20916
21068
|
}
|
|
20917
21069
|
static get watchers() { return {
|
|
20918
21070
|
"_alt": ["validateAlt"],
|
|
@@ -21206,9 +21358,9 @@ class KolInputCheckbox {
|
|
|
21206
21358
|
async getValue() {
|
|
21207
21359
|
return this.getModelValue();
|
|
21208
21360
|
}
|
|
21209
|
-
async
|
|
21361
|
+
async focus() {
|
|
21210
21362
|
var _a;
|
|
21211
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
21363
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
21212
21364
|
}
|
|
21213
21365
|
getFormFieldProps() {
|
|
21214
21366
|
return {
|
|
@@ -21257,7 +21409,7 @@ class KolInputCheckbox {
|
|
|
21257
21409
|
return this.state._icons.unchecked;
|
|
21258
21410
|
}
|
|
21259
21411
|
render() {
|
|
21260
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
21412
|
+
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())))));
|
|
21261
21413
|
}
|
|
21262
21414
|
constructor(hostRef) {
|
|
21263
21415
|
registerInstance(this, hostRef);
|
|
@@ -21431,7 +21583,7 @@ class KolInputCheckbox {
|
|
|
21431
21583
|
"state": [32],
|
|
21432
21584
|
"inputHasFocus": [32],
|
|
21433
21585
|
"getValue": [64],
|
|
21434
|
-
"
|
|
21586
|
+
"focus": [64]
|
|
21435
21587
|
},
|
|
21436
21588
|
"$listeners$": undefined,
|
|
21437
21589
|
"$lazyBundleId$": "-",
|
|
@@ -21469,9 +21621,9 @@ class KolInputColor {
|
|
|
21469
21621
|
var _a;
|
|
21470
21622
|
return (_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.value;
|
|
21471
21623
|
}
|
|
21472
|
-
async
|
|
21624
|
+
async focus() {
|
|
21473
21625
|
var _a;
|
|
21474
|
-
(_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.focus();
|
|
21626
|
+
return Promise.resolve((_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.focus());
|
|
21475
21627
|
}
|
|
21476
21628
|
get hasSuggestions() {
|
|
21477
21629
|
return Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
@@ -21495,7 +21647,7 @@ class KolInputColor {
|
|
|
21495
21647
|
return Object.assign(Object.assign({ state: Object.assign(Object.assign({}, other), { _suggestions: [] }) }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus });
|
|
21496
21648
|
}
|
|
21497
21649
|
render() {
|
|
21498
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
21650
|
+
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()))))));
|
|
21499
21651
|
}
|
|
21500
21652
|
constructor(hostRef) {
|
|
21501
21653
|
registerInstance(this, hostRef);
|
|
@@ -21664,7 +21816,7 @@ class KolInputColor {
|
|
|
21664
21816
|
"state": [32],
|
|
21665
21817
|
"inputHasFocus": [32],
|
|
21666
21818
|
"getValue": [64],
|
|
21667
|
-
"
|
|
21819
|
+
"focus": [64]
|
|
21668
21820
|
},
|
|
21669
21821
|
"$listeners$": undefined,
|
|
21670
21822
|
"$lazyBundleId$": "-",
|
|
@@ -21828,9 +21980,9 @@ class KolInputDate {
|
|
|
21828
21980
|
var _a;
|
|
21829
21981
|
return this.inputRef && this.remapValue((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value);
|
|
21830
21982
|
}
|
|
21831
|
-
async
|
|
21983
|
+
async focus() {
|
|
21832
21984
|
var _a;
|
|
21833
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
21985
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
21834
21986
|
}
|
|
21835
21987
|
async reset() {
|
|
21836
21988
|
this.state = Object.assign(Object.assign({}, this.state), { _value: null });
|
|
@@ -21870,7 +22022,7 @@ class KolInputDate {
|
|
|
21870
22022
|
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 });
|
|
21871
22023
|
}
|
|
21872
22024
|
render() {
|
|
21873
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22025
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '59e86a706c43960542852d52a626bef671dffa23' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b54ca89fe36ea8ffd5bf34a8cffb4069cd2988e4', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'ac2aff3346ffe47c2737af4edba6a80d172135d5' }, this.getInputProps())))));
|
|
21874
22026
|
}
|
|
21875
22027
|
constructor(hostRef) {
|
|
21876
22028
|
registerInstance(this, hostRef);
|
|
@@ -22087,7 +22239,7 @@ class KolInputDate {
|
|
|
22087
22239
|
"state": [32],
|
|
22088
22240
|
"inputHasFocus": [32],
|
|
22089
22241
|
"getValue": [64],
|
|
22090
|
-
"
|
|
22242
|
+
"focus": [64],
|
|
22091
22243
|
"reset": [64]
|
|
22092
22244
|
},
|
|
22093
22245
|
"$listeners$": undefined,
|
|
@@ -22221,9 +22373,9 @@ class KolInputEmail {
|
|
|
22221
22373
|
var _a;
|
|
22222
22374
|
return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
|
|
22223
22375
|
}
|
|
22224
|
-
async
|
|
22376
|
+
async focus() {
|
|
22225
22377
|
var _a;
|
|
22226
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
22378
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
22227
22379
|
}
|
|
22228
22380
|
getFormFieldProps() {
|
|
22229
22381
|
return {
|
|
@@ -22247,7 +22399,7 @@ class KolInputEmail {
|
|
|
22247
22399
|
} });
|
|
22248
22400
|
}
|
|
22249
22401
|
render() {
|
|
22250
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22402
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'b928aefae94934a5228743ae822ae084a06020ae' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '1ac6b8e275457032564a4cbcd637832d1dbbd7d1', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '47435cb931d3da58fa1c84db183d04037c6fdb6b' }, this.getInputProps())))));
|
|
22251
22403
|
}
|
|
22252
22404
|
constructor(hostRef) {
|
|
22253
22405
|
registerInstance(this, hostRef);
|
|
@@ -22442,7 +22594,7 @@ class KolInputEmail {
|
|
|
22442
22594
|
"state": [32],
|
|
22443
22595
|
"inputHasFocus": [32],
|
|
22444
22596
|
"getValue": [64],
|
|
22445
|
-
"
|
|
22597
|
+
"focus": [64]
|
|
22446
22598
|
},
|
|
22447
22599
|
"$listeners$": undefined,
|
|
22448
22600
|
"$lazyBundleId$": "-",
|
|
@@ -22479,9 +22631,9 @@ class KolInputFile {
|
|
|
22479
22631
|
var _a;
|
|
22480
22632
|
return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.files;
|
|
22481
22633
|
}
|
|
22482
|
-
async
|
|
22634
|
+
async focus() {
|
|
22483
22635
|
var _a;
|
|
22484
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
22636
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
22485
22637
|
}
|
|
22486
22638
|
async reset() {
|
|
22487
22639
|
this.controller.setFormAssociatedValue('');
|
|
@@ -22509,7 +22661,7 @@ class KolInputFile {
|
|
|
22509
22661
|
} });
|
|
22510
22662
|
}
|
|
22511
22663
|
render() {
|
|
22512
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22664
|
+
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 }))));
|
|
22513
22665
|
}
|
|
22514
22666
|
constructor(hostRef) {
|
|
22515
22667
|
registerInstance(this, hostRef);
|
|
@@ -22696,7 +22848,7 @@ class KolInputFile {
|
|
|
22696
22848
|
"state": [32],
|
|
22697
22849
|
"inputHasFocus": [32],
|
|
22698
22850
|
"getValue": [64],
|
|
22699
|
-
"
|
|
22851
|
+
"focus": [64],
|
|
22700
22852
|
"reset": [64]
|
|
22701
22853
|
},
|
|
22702
22854
|
"$listeners$": undefined,
|
|
@@ -22758,9 +22910,9 @@ class KolInputNumber {
|
|
|
22758
22910
|
async getValue() {
|
|
22759
22911
|
return this.remapValue(this.state._value);
|
|
22760
22912
|
}
|
|
22761
|
-
async
|
|
22913
|
+
async focus() {
|
|
22762
22914
|
var _a;
|
|
22763
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
22915
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
22764
22916
|
}
|
|
22765
22917
|
setInitialValueType(value) {
|
|
22766
22918
|
if (this.controller.isNumberString(value)) {
|
|
@@ -22805,24 +22957,30 @@ class KolInputNumber {
|
|
|
22805
22957
|
if (this._disabled || this._readOnly) {
|
|
22806
22958
|
return null;
|
|
22807
22959
|
}
|
|
22808
|
-
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: () => {
|
|
22809
|
-
var _a, _b;
|
|
22960
|
+
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) => {
|
|
22961
|
+
var _a, _b, _c;
|
|
22810
22962
|
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.stepUp();
|
|
22811
|
-
(_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.
|
|
22963
|
+
const newValue = (_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.value;
|
|
22964
|
+
this._value = this.remapValue(newValue === '' ? null : Number(newValue));
|
|
22965
|
+
this.controller.onFacade.onInput(event, true, this._value);
|
|
22966
|
+
(_c = this.inputRef) === null || _c === void 0 ? void 0 : _c.focus();
|
|
22812
22967
|
}, disabled: this._disabled || this._readOnly }, hAsync(KolIconFc, { icons: "kolicon-plus", label: "" })));
|
|
22813
22968
|
}
|
|
22814
22969
|
getStepDownButton() {
|
|
22815
22970
|
if (this._disabled || this._readOnly) {
|
|
22816
22971
|
return null;
|
|
22817
22972
|
}
|
|
22818
|
-
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: () => {
|
|
22819
|
-
var _a, _b;
|
|
22973
|
+
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) => {
|
|
22974
|
+
var _a, _b, _c;
|
|
22820
22975
|
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.stepDown();
|
|
22821
|
-
(_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.
|
|
22976
|
+
const newValue = (_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.value;
|
|
22977
|
+
this._value = this.remapValue(newValue === '' ? null : Number(newValue));
|
|
22978
|
+
this.controller.onFacade.onInput(event, true, this._value);
|
|
22979
|
+
(_c = this.inputRef) === null || _c === void 0 ? void 0 : _c.focus();
|
|
22822
22980
|
}, disabled: this._disabled || this._readOnly }, hAsync(KolIconFc, { icons: "kolicon-minus", label: "" })));
|
|
22823
22981
|
}
|
|
22824
22982
|
render() {
|
|
22825
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22983
|
+
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())))));
|
|
22826
22984
|
}
|
|
22827
22985
|
constructor(hostRef) {
|
|
22828
22986
|
registerInstance(this, hostRef);
|
|
@@ -23018,7 +23176,7 @@ class KolInputNumber {
|
|
|
23018
23176
|
"_initialValueType": [32],
|
|
23019
23177
|
"inputHasFocus": [32],
|
|
23020
23178
|
"getValue": [64],
|
|
23021
|
-
"
|
|
23179
|
+
"focus": [64]
|
|
23022
23180
|
},
|
|
23023
23181
|
"$listeners$": undefined,
|
|
23024
23182
|
"$lazyBundleId$": "-",
|
|
@@ -23033,9 +23191,9 @@ class KolInputPassword {
|
|
|
23033
23191
|
var _a;
|
|
23034
23192
|
return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
|
|
23035
23193
|
}
|
|
23036
|
-
async
|
|
23194
|
+
async focus() {
|
|
23037
23195
|
var _a;
|
|
23038
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23196
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
23039
23197
|
}
|
|
23040
23198
|
getFormFieldProps() {
|
|
23041
23199
|
return {
|
|
@@ -23069,7 +23227,7 @@ class KolInputPassword {
|
|
|
23069
23227
|
}, icon: `${this._passwordVisible ? 'kolicon-eye-closed' : 'kolicon-eye'}`, disabled: this._disabled }));
|
|
23070
23228
|
}
|
|
23071
23229
|
render() {
|
|
23072
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23230
|
+
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())))));
|
|
23073
23231
|
}
|
|
23074
23232
|
constructor(hostRef) {
|
|
23075
23233
|
registerInstance(this, hostRef);
|
|
@@ -23266,7 +23424,7 @@ class KolInputPassword {
|
|
|
23266
23424
|
"_passwordVisible": [32],
|
|
23267
23425
|
"inputHasFocus": [32],
|
|
23268
23426
|
"getValue": [64],
|
|
23269
|
-
"
|
|
23427
|
+
"focus": [64]
|
|
23270
23428
|
},
|
|
23271
23429
|
"$listeners$": undefined,
|
|
23272
23430
|
"$lazyBundleId$": "-",
|
|
@@ -23318,9 +23476,9 @@ class KolInputRadio {
|
|
|
23318
23476
|
async getValue() {
|
|
23319
23477
|
return this._value;
|
|
23320
23478
|
}
|
|
23321
|
-
async
|
|
23479
|
+
async focus() {
|
|
23322
23480
|
var _a;
|
|
23323
|
-
(_a = this.getFocusableInput()) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23481
|
+
return Promise.resolve((_a = this.getFocusableInput()) === null || _a === void 0 ? void 0 : _a.focus());
|
|
23324
23482
|
}
|
|
23325
23483
|
getFocusableInput() {
|
|
23326
23484
|
const options = this.state._options;
|
|
@@ -23357,7 +23515,7 @@ class KolInputRadio {
|
|
|
23357
23515
|
};
|
|
23358
23516
|
}
|
|
23359
23517
|
render() {
|
|
23360
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23518
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '92d8248e7753a62c69731e9df04859569cdced72' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
|
|
23361
23519
|
}
|
|
23362
23520
|
calculateDisabled(option) {
|
|
23363
23521
|
return Boolean(this.state._disabled) || Boolean(option.disabled);
|
|
@@ -23554,7 +23712,7 @@ class KolInputRadio {
|
|
|
23554
23712
|
"state": [32],
|
|
23555
23713
|
"inputHasFocus": [32],
|
|
23556
23714
|
"getValue": [64],
|
|
23557
|
-
"
|
|
23715
|
+
"focus": [64]
|
|
23558
23716
|
},
|
|
23559
23717
|
"$listeners$": undefined,
|
|
23560
23718
|
"$lazyBundleId$": "-",
|
|
@@ -23601,9 +23759,9 @@ class InputRangeController extends InputIconController {
|
|
|
23601
23759
|
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}";
|
|
23602
23760
|
|
|
23603
23761
|
class KolInputRange {
|
|
23604
|
-
async
|
|
23762
|
+
async focus() {
|
|
23605
23763
|
var _a;
|
|
23606
|
-
(_a = this.refInputNumber) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23764
|
+
return Promise.resolve((_a = this.refInputNumber) === null || _a === void 0 ? void 0 : _a.focus());
|
|
23607
23765
|
}
|
|
23608
23766
|
getSanitizedFloatValue(value) {
|
|
23609
23767
|
const floatValue = parseFloat(value);
|
|
@@ -23673,7 +23831,7 @@ class KolInputRange {
|
|
|
23673
23831
|
const inputsWrapperStyle = {
|
|
23674
23832
|
'--kolibri-input-range--input-number--width': `calc(${String(this.state._max).length}ch + 2em)`,
|
|
23675
23833
|
};
|
|
23676
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23834
|
+
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 }))));
|
|
23677
23835
|
}
|
|
23678
23836
|
constructor(hostRef) {
|
|
23679
23837
|
registerInstance(this, hostRef);
|
|
@@ -23858,7 +24016,7 @@ class KolInputRange {
|
|
|
23858
24016
|
"state": [32],
|
|
23859
24017
|
"_initialValueType": [32],
|
|
23860
24018
|
"inputHasFocus": [32],
|
|
23861
|
-
"
|
|
24019
|
+
"focus": [64],
|
|
23862
24020
|
"getValue": [64]
|
|
23863
24021
|
},
|
|
23864
24022
|
"$listeners$": undefined,
|
|
@@ -23874,9 +24032,9 @@ class KolInputText {
|
|
|
23874
24032
|
var _a;
|
|
23875
24033
|
return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
|
|
23876
24034
|
}
|
|
23877
|
-
async
|
|
24035
|
+
async focus() {
|
|
23878
24036
|
var _a;
|
|
23879
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
24037
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
23880
24038
|
}
|
|
23881
24039
|
async selectionStart() {
|
|
23882
24040
|
var _a;
|
|
@@ -23919,7 +24077,7 @@ class KolInputText {
|
|
|
23919
24077
|
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 });
|
|
23920
24078
|
}
|
|
23921
24079
|
render() {
|
|
23922
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
24080
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'ec2cfd8fbf4c25e0c67c2a40dac12689abf21ebc' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '4dbf08a6efd9e6aeba414911e28eb542f1a9f931', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'e72fa71c0713918915a4c99ff36624c413dc2709' }, this.getInputProps())))));
|
|
23923
24081
|
}
|
|
23924
24082
|
constructor(hostRef) {
|
|
23925
24083
|
registerInstance(this, hostRef);
|
|
@@ -24139,7 +24297,7 @@ class KolInputText {
|
|
|
24139
24297
|
"state": [32],
|
|
24140
24298
|
"inputHasFocus": [32],
|
|
24141
24299
|
"getValue": [64],
|
|
24142
|
-
"
|
|
24300
|
+
"focus": [64],
|
|
24143
24301
|
"selectionStart": [64],
|
|
24144
24302
|
"selectioconEnd": [64],
|
|
24145
24303
|
"setSelectionRange": [64],
|
|
@@ -24184,7 +24342,7 @@ class KolKolibri {
|
|
|
24184
24342
|
}
|
|
24185
24343
|
render() {
|
|
24186
24344
|
const fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
|
|
24187
|
-
return (hAsync("svg", { key: '
|
|
24345
|
+
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"))));
|
|
24188
24346
|
}
|
|
24189
24347
|
validateColor(value) {
|
|
24190
24348
|
validateColor(this, value, {
|
|
@@ -24224,7 +24382,7 @@ class KolKolibri {
|
|
|
24224
24382
|
}; }
|
|
24225
24383
|
}
|
|
24226
24384
|
|
|
24227
|
-
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:
|
|
24385
|
+
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}";
|
|
24228
24386
|
|
|
24229
24387
|
class KolLink {
|
|
24230
24388
|
constructor(hostRef) {
|
|
@@ -24237,12 +24395,12 @@ class KolLink {
|
|
|
24237
24395
|
this._inline = true;
|
|
24238
24396
|
this._tooltipAlign = 'right';
|
|
24239
24397
|
}
|
|
24240
|
-
async
|
|
24398
|
+
async focus() {
|
|
24241
24399
|
var _a;
|
|
24242
|
-
|
|
24400
|
+
return Promise.resolve((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
24243
24401
|
}
|
|
24244
24402
|
render() {
|
|
24245
|
-
return (hAsync(KolLinkWcTag, { key: '
|
|
24403
|
+
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" })));
|
|
24246
24404
|
}
|
|
24247
24405
|
static get style() { return {
|
|
24248
24406
|
default: defaultStyleCss$l
|
|
@@ -24268,7 +24426,7 @@ class KolLink {
|
|
|
24268
24426
|
"_shortKey": [1, "_short-key"],
|
|
24269
24427
|
"_target": [1],
|
|
24270
24428
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
24271
|
-
"
|
|
24429
|
+
"focus": [64]
|
|
24272
24430
|
},
|
|
24273
24431
|
"$listeners$": undefined,
|
|
24274
24432
|
"$lazyBundleId$": "-",
|
|
@@ -24289,12 +24447,12 @@ class KolLinkButton {
|
|
|
24289
24447
|
this._tooltipAlign = 'right';
|
|
24290
24448
|
this._variant = 'normal';
|
|
24291
24449
|
}
|
|
24292
|
-
async
|
|
24450
|
+
async focus() {
|
|
24293
24451
|
var _a;
|
|
24294
|
-
|
|
24452
|
+
return Promise.resolve((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
24295
24453
|
}
|
|
24296
24454
|
render() {
|
|
24297
|
-
return (hAsync(KolLinkWcTag, { key: '
|
|
24455
|
+
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" })));
|
|
24298
24456
|
}
|
|
24299
24457
|
static get style() { return {
|
|
24300
24458
|
default: defaultStyleCss$k
|
|
@@ -24320,7 +24478,7 @@ class KolLinkButton {
|
|
|
24320
24478
|
"_target": [1],
|
|
24321
24479
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
24322
24480
|
"_variant": [1],
|
|
24323
|
-
"
|
|
24481
|
+
"focus": [64]
|
|
24324
24482
|
},
|
|
24325
24483
|
"$listeners$": undefined,
|
|
24326
24484
|
"$lazyBundleId$": "-",
|
|
@@ -24387,16 +24545,16 @@ class KolLinkWc {
|
|
|
24387
24545
|
_icons: {},
|
|
24388
24546
|
};
|
|
24389
24547
|
}
|
|
24390
|
-
async
|
|
24548
|
+
async focus() {
|
|
24391
24549
|
var _a;
|
|
24392
|
-
(_a = this.anchorRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
24550
|
+
return Promise.resolve((_a = this.anchorRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
24393
24551
|
}
|
|
24394
24552
|
render() {
|
|
24395
24553
|
var _a;
|
|
24396
24554
|
const { isExternal, tagAttrs } = this.getRenderValues();
|
|
24397
24555
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
24398
24556
|
const ariaDescription = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim();
|
|
24399
|
-
return (hAsync(Host, { key: '
|
|
24557
|
+
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'
|
|
24400
24558
|
? `${this.state._label}${isExternal ? ` (${this.translateOpenLinkInTab})` : ''}`
|
|
24401
24559
|
: undefined, "aria-keyshortcuts": this.state._shortKey, class: clsx('kol-link', {
|
|
24402
24560
|
'kol-link--disabled': this.state._disabled === true,
|
|
@@ -24406,7 +24564,7 @@ class KolLinkWc {
|
|
|
24406
24564
|
'kol-link--inline': this.state._inline === true,
|
|
24407
24565
|
'kol-link--standalone': this.state._inline === false,
|
|
24408
24566
|
[this.state._customClass]: this.state._buttonVariant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
24409
|
-
}) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: '
|
|
24567
|
+
}) }, 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 }))));
|
|
24410
24568
|
}
|
|
24411
24569
|
validateAccessKey(value) {
|
|
24412
24570
|
validateAccessKey(this, value);
|
|
@@ -24557,7 +24715,7 @@ class KolLinkWc {
|
|
|
24557
24715
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
24558
24716
|
"_buttonVariant": [1, "_button-variant"],
|
|
24559
24717
|
"state": [32],
|
|
24560
|
-
"
|
|
24718
|
+
"focus": [64]
|
|
24561
24719
|
},
|
|
24562
24720
|
"$listeners$": undefined,
|
|
24563
24721
|
"$lazyBundleId$": "-",
|
|
@@ -24565,89 +24723,28 @@ class KolLinkWc {
|
|
|
24565
24723
|
}; }
|
|
24566
24724
|
}
|
|
24567
24725
|
|
|
24568
|
-
const
|
|
24569
|
-
const validateModalVariant = (component, value) => {
|
|
24570
|
-
watchValidator(component, '_variant', (value) => typeof value === 'string' && ModalVariantPropTypeOptions.includes(value), new Set(ModalVariantPropTypeOptions), value);
|
|
24571
|
-
};
|
|
24572
|
-
|
|
24573
|
-
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}";
|
|
24726
|
+
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}";
|
|
24574
24727
|
|
|
24575
24728
|
class KolModal {
|
|
24576
24729
|
constructor(hostRef) {
|
|
24577
24730
|
registerInstance(this, hostRef);
|
|
24578
|
-
this.
|
|
24579
|
-
|
|
24580
|
-
await this.closeModal();
|
|
24581
|
-
},
|
|
24731
|
+
this.catchRef = (ref) => {
|
|
24732
|
+
this.dialogRef = ref;
|
|
24582
24733
|
};
|
|
24583
24734
|
this._width = '100%';
|
|
24584
24735
|
this._variant = 'blank';
|
|
24585
|
-
this.state = {
|
|
24586
|
-
_label: '',
|
|
24587
|
-
_width: '100%',
|
|
24588
|
-
};
|
|
24589
|
-
}
|
|
24590
|
-
disconnectedCallback() {
|
|
24591
|
-
void this.closeModal();
|
|
24592
|
-
}
|
|
24593
|
-
handleNativeCloseEvent() {
|
|
24594
|
-
var _a, _b;
|
|
24595
|
-
(_b = (_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
24596
|
-
if (this.host) {
|
|
24597
|
-
dispatchDomEvent(this.host, KolEvent.close);
|
|
24598
|
-
}
|
|
24599
24736
|
}
|
|
24600
24737
|
async openModal() {
|
|
24601
24738
|
var _a;
|
|
24602
|
-
(_a = this.
|
|
24739
|
+
await ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.openModal());
|
|
24603
24740
|
}
|
|
24604
24741
|
async closeModal() {
|
|
24605
|
-
var _a
|
|
24606
|
-
|
|
24742
|
+
var _a;
|
|
24743
|
+
await ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.closeModal());
|
|
24607
24744
|
}
|
|
24608
24745
|
render() {
|
|
24609
|
-
return (hAsync(
|
|
24610
|
-
'kol-modal__blank': this.state._variant === 'blank',
|
|
24611
|
-
'kol-modal__card': this.state._variant === 'card',
|
|
24612
|
-
}), onCancel: handleCancelOverlay, onClose: this.handleNativeCloseEvent.bind(this), ref: (el) => {
|
|
24613
|
-
this.refDialog = el;
|
|
24614
|
-
}, style: {
|
|
24615
|
-
width: this.state._width,
|
|
24616
|
-
} }, 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' })))));
|
|
24617
|
-
}
|
|
24618
|
-
validateLabel(value) {
|
|
24619
|
-
validateLabel(this, value, {
|
|
24620
|
-
required: true,
|
|
24621
|
-
});
|
|
24622
|
-
}
|
|
24623
|
-
validateOn(value) {
|
|
24624
|
-
if (typeof value === 'object' && value !== null) {
|
|
24625
|
-
const callbacks = {};
|
|
24626
|
-
if (typeof value.onClose === 'function' || value.onClose === true) {
|
|
24627
|
-
callbacks.onClose = value.onClose;
|
|
24628
|
-
}
|
|
24629
|
-
setState(this, '_on', callbacks);
|
|
24630
|
-
}
|
|
24746
|
+
return (hAsync(KolDialogWcTag, { key: '127b4504fccd6dd10ac9fc7fa198102f2e774ed5', ref: this.catchRef, _label: this._label, _on: this._on, _variant: this._variant, _width: this._width }, hAsync("slot", { key: '663f015f3f2f5b067539d9f7789289ca55e79225' })));
|
|
24631
24747
|
}
|
|
24632
|
-
validateWidth(value) {
|
|
24633
|
-
validateWidth(this, value);
|
|
24634
|
-
}
|
|
24635
|
-
validateVariant(value) {
|
|
24636
|
-
validateModalVariant(this, value);
|
|
24637
|
-
}
|
|
24638
|
-
componentWillLoad() {
|
|
24639
|
-
this.validateLabel(this._label);
|
|
24640
|
-
this.validateOn(this._on);
|
|
24641
|
-
this.validateWidth(this._width);
|
|
24642
|
-
this.validateVariant(this._variant);
|
|
24643
|
-
}
|
|
24644
|
-
get host() { return getElement(this); }
|
|
24645
|
-
static get watchers() { return {
|
|
24646
|
-
"_label": ["validateLabel"],
|
|
24647
|
-
"_on": ["validateOn"],
|
|
24648
|
-
"_width": ["validateWidth"],
|
|
24649
|
-
"_variant": ["validateVariant"]
|
|
24650
|
-
}; }
|
|
24651
24748
|
static get style() { return {
|
|
24652
24749
|
default: defaultStyleCss$j
|
|
24653
24750
|
}; }
|
|
@@ -24659,7 +24756,6 @@ class KolModal {
|
|
|
24659
24756
|
"_on": [16],
|
|
24660
24757
|
"_width": [1],
|
|
24661
24758
|
"_variant": [1],
|
|
24662
|
-
"state": [32],
|
|
24663
24759
|
"openModal": [64],
|
|
24664
24760
|
"closeModal": [64]
|
|
24665
24761
|
},
|
|
@@ -24669,7 +24765,7 @@ class KolModal {
|
|
|
24669
24765
|
}; }
|
|
24670
24766
|
}
|
|
24671
24767
|
|
|
24672
|
-
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-
|
|
24768
|
+
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}";
|
|
24673
24769
|
|
|
24674
24770
|
const entryIsLink = (entryProps) => {
|
|
24675
24771
|
return typeof entryProps._href === 'string';
|
|
@@ -24797,9 +24893,9 @@ class KolNav {
|
|
|
24797
24893
|
}
|
|
24798
24894
|
render() {
|
|
24799
24895
|
const collapsible = this.state._collapsible === true;
|
|
24800
|
-
return (hAsync("div", { key: '
|
|
24896
|
+
return (hAsync("div", { key: 'c5d68a1e9267bf338e45d238b9f7661e44a2e378', class: clsx('kol-nav', {
|
|
24801
24897
|
'kol-nav--is-compact': this.state._hideLabel,
|
|
24802
|
-
}) }, hAsync("nav", { key: '
|
|
24898
|
+
}) }, 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: {
|
|
24803
24899
|
onClick: () => {
|
|
24804
24900
|
this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: !this.state._hideLabel });
|
|
24805
24901
|
},
|
|
@@ -24886,7 +24982,7 @@ class KolPagination {
|
|
|
24886
24982
|
this._tooltipAlign = 'top';
|
|
24887
24983
|
}
|
|
24888
24984
|
render() {
|
|
24889
|
-
return (hAsync(KolPaginationWcTag, { key: '
|
|
24985
|
+
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 }));
|
|
24890
24986
|
}
|
|
24891
24987
|
static get style() { return {
|
|
24892
24988
|
default: defaultStyleCss$h
|
|
@@ -24914,10 +25010,10 @@ class KolPagination {
|
|
|
24914
25010
|
}
|
|
24915
25011
|
|
|
24916
25012
|
const leftDoubleArrowIcon = {
|
|
24917
|
-
left: 'kolicon-chevron-left',
|
|
25013
|
+
left: 'kolicon-chevron-double-left',
|
|
24918
25014
|
};
|
|
24919
25015
|
const leftSingleArrow = {
|
|
24920
|
-
left: 'kolicon-chevron-
|
|
25016
|
+
left: 'kolicon-chevron-left',
|
|
24921
25017
|
};
|
|
24922
25018
|
const rightSingleArrowIcon = {
|
|
24923
25019
|
right: 'kolicon-chevron-right',
|
|
@@ -27077,7 +27173,7 @@ class KolPopover {
|
|
|
27077
27173
|
}
|
|
27078
27174
|
}
|
|
27079
27175
|
render() {
|
|
27080
|
-
return (hAsync(Host, { key: '
|
|
27176
|
+
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' }))));
|
|
27081
27177
|
}
|
|
27082
27178
|
validateAlign(value) {
|
|
27083
27179
|
validateAlign(this, value);
|
|
@@ -27166,12 +27262,12 @@ let KolPopoverButton$1 = class KolPopoverButton {
|
|
|
27166
27262
|
var _a;
|
|
27167
27263
|
void ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.showPopover());
|
|
27168
27264
|
}
|
|
27169
|
-
async
|
|
27265
|
+
async focus() {
|
|
27170
27266
|
var _a;
|
|
27171
|
-
|
|
27267
|
+
return Promise.resolve((_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus());
|
|
27172
27268
|
}
|
|
27173
27269
|
render() {
|
|
27174
|
-
return (hAsync(KolPopoverButtonWcTag, { key: '
|
|
27270
|
+
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' })));
|
|
27175
27271
|
}
|
|
27176
27272
|
static get style() { return {
|
|
27177
27273
|
default: defaultStyleCss$g
|
|
@@ -27181,9 +27277,7 @@ let KolPopoverButton$1 = class KolPopoverButton {
|
|
|
27181
27277
|
"$tagName$": "kol-popover-button",
|
|
27182
27278
|
"$members$": {
|
|
27183
27279
|
"_accessKey": [1, "_access-key"],
|
|
27184
|
-
"_ariaControls": [1, "_aria-controls"],
|
|
27185
27280
|
"_ariaDescription": [1, "_aria-description"],
|
|
27186
|
-
"_ariaSelected": [4, "_aria-selected"],
|
|
27187
27281
|
"_customClass": [1, "_custom-class"],
|
|
27188
27282
|
"_disabled": [4],
|
|
27189
27283
|
"_hideLabel": [4, "_hide-label"],
|
|
@@ -27192,9 +27286,7 @@ let KolPopoverButton$1 = class KolPopoverButton {
|
|
|
27192
27286
|
"_id": [1],
|
|
27193
27287
|
"_label": [1],
|
|
27194
27288
|
"_name": [1],
|
|
27195
|
-
"_on": [16],
|
|
27196
27289
|
"_popoverAlign": [1, "_popover-align"],
|
|
27197
|
-
"_role": [1],
|
|
27198
27290
|
"_shortKey": [1, "_short-key"],
|
|
27199
27291
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
27200
27292
|
"_tabIndex": [2, "_tab-index"],
|
|
@@ -27204,7 +27296,7 @@ let KolPopoverButton$1 = class KolPopoverButton {
|
|
|
27204
27296
|
"_variant": [1],
|
|
27205
27297
|
"hidePopover": [64],
|
|
27206
27298
|
"showPopover": [64],
|
|
27207
|
-
"
|
|
27299
|
+
"focus": [64]
|
|
27208
27300
|
},
|
|
27209
27301
|
"$listeners$": undefined,
|
|
27210
27302
|
"$lazyBundleId$": "-",
|
|
@@ -27215,6 +27307,9 @@ let KolPopoverButton$1 = class KolPopoverButton {
|
|
|
27215
27307
|
class KolPopoverButton {
|
|
27216
27308
|
constructor(hostRef) {
|
|
27217
27309
|
registerInstance(this, hostRef);
|
|
27310
|
+
this.on = {
|
|
27311
|
+
onClick: this.handleButtonClick.bind(this),
|
|
27312
|
+
};
|
|
27218
27313
|
this.state = {
|
|
27219
27314
|
_label: '',
|
|
27220
27315
|
_popoverAlign: 'bottom',
|
|
@@ -27237,9 +27332,9 @@ class KolPopoverButton {
|
|
|
27237
27332
|
var _a;
|
|
27238
27333
|
void ((_a = this.refPopover) === null || _a === void 0 ? void 0 : _a.showPopover());
|
|
27239
27334
|
}
|
|
27240
|
-
async
|
|
27335
|
+
async focus() {
|
|
27241
27336
|
var _a;
|
|
27242
|
-
|
|
27337
|
+
return Promise.resolve((_a = this.refButton) === null || _a === void 0 ? void 0 : _a.focus());
|
|
27243
27338
|
}
|
|
27244
27339
|
handleBeforeToggle(event) {
|
|
27245
27340
|
if (event.newState === 'closed') {
|
|
@@ -27295,11 +27390,11 @@ class KolPopoverButton {
|
|
|
27295
27390
|
(_c = this.cleanupAutoPositioning) === null || _c === void 0 ? void 0 : _c.call(this);
|
|
27296
27391
|
}
|
|
27297
27392
|
render() {
|
|
27298
|
-
return (hAsync("div", { key: '
|
|
27393
|
+
return (hAsync("div", { key: '05eb5491e975895b8f80ebcf9b079efc6a3ad442', class: clsx('kol-popover-button', {
|
|
27299
27394
|
'kol-popover-button--open': this.popoverOpen,
|
|
27300
27395
|
'kol-popover-button--inline': this.state._inline === true,
|
|
27301
27396
|
'kol-popover-button--standalone': this.state._inline === false,
|
|
27302
|
-
}) }, hAsync(KolButtonWcTag, { key: '
|
|
27397
|
+
}) }, 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' }))));
|
|
27303
27398
|
}
|
|
27304
27399
|
validateInline(value) {
|
|
27305
27400
|
validateInline(this, value, {
|
|
@@ -27322,9 +27417,7 @@ class KolPopoverButton {
|
|
|
27322
27417
|
"$tagName$": "kol-popover-button-wc",
|
|
27323
27418
|
"$members$": {
|
|
27324
27419
|
"_accessKey": [1, "_access-key"],
|
|
27325
|
-
"_ariaControls": [1, "_aria-controls"],
|
|
27326
27420
|
"_ariaDescription": [1, "_aria-description"],
|
|
27327
|
-
"_ariaSelected": [4, "_aria-selected"],
|
|
27328
27421
|
"_customClass": [1, "_custom-class"],
|
|
27329
27422
|
"_disabled": [4],
|
|
27330
27423
|
"_hideLabel": [4, "_hide-label"],
|
|
@@ -27333,9 +27426,7 @@ class KolPopoverButton {
|
|
|
27333
27426
|
"_inline": [4],
|
|
27334
27427
|
"_label": [1],
|
|
27335
27428
|
"_name": [1],
|
|
27336
|
-
"_on": [16],
|
|
27337
27429
|
"_popoverAlign": [1, "_popover-align"],
|
|
27338
|
-
"_role": [1],
|
|
27339
27430
|
"_shortKey": [1, "_short-key"],
|
|
27340
27431
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
27341
27432
|
"_tabIndex": [2, "_tab-index"],
|
|
@@ -27348,7 +27439,7 @@ class KolPopoverButton {
|
|
|
27348
27439
|
"popoverOpen": [32],
|
|
27349
27440
|
"hidePopover": [64],
|
|
27350
27441
|
"showPopover": [64],
|
|
27351
|
-
"
|
|
27442
|
+
"focus": [64]
|
|
27352
27443
|
},
|
|
27353
27444
|
"$listeners$": undefined,
|
|
27354
27445
|
"$lazyBundleId$": "-",
|
|
@@ -27392,10 +27483,10 @@ class KolProgress {
|
|
|
27392
27483
|
const isPercentage = this.state._unit === '%';
|
|
27393
27484
|
const liveProgressValue = isPercentage ? `${Math.round((this.state._liveValue / this.state._max) * 100)}` : this.state._liveValue;
|
|
27394
27485
|
const displayValue = isPercentage ? Math.round((this.state._value / this.state._max) * 100) : this.state._value;
|
|
27395
|
-
return (hAsync("div", { key: '
|
|
27486
|
+
return (hAsync("div", { key: 'fc7f5cdf4798854b0b41945c69f7feb3af75d50c', class: "kol-progress" }, hAsync("div", { key: '5ab61be685c82aceb117af33b6ad578dc12a3775', "aria-hidden": "true", class: {
|
|
27396
27487
|
'kol-progress__cycle': this.state._variant === 'cycle',
|
|
27397
27488
|
'kol-progress__bar': this.state._variant === 'bar',
|
|
27398
|
-
} }, this.state._variant === 'bar' && this.state._label && hAsync("div", { key: '
|
|
27489
|
+
} }, 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}`)));
|
|
27399
27490
|
}
|
|
27400
27491
|
validateLabel(value) {
|
|
27401
27492
|
validateLabel(this, value);
|
|
@@ -27499,7 +27590,7 @@ class KolQuote {
|
|
|
27499
27590
|
}
|
|
27500
27591
|
render() {
|
|
27501
27592
|
const hasExpertSlot = showExpertSlot(this.state._quote);
|
|
27502
|
-
return (hAsync("figure", { key: '
|
|
27593
|
+
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" }))))));
|
|
27503
27594
|
}
|
|
27504
27595
|
static get watchers() { return {
|
|
27505
27596
|
"_label": ["validateLabel"],
|
|
@@ -27547,12 +27638,12 @@ class KolSelect {
|
|
|
27547
27638
|
var _a;
|
|
27548
27639
|
return (_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.getValue();
|
|
27549
27640
|
}
|
|
27550
|
-
async
|
|
27641
|
+
async focus() {
|
|
27551
27642
|
var _a;
|
|
27552
|
-
|
|
27643
|
+
return Promise.resolve((_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
27553
27644
|
}
|
|
27554
27645
|
render() {
|
|
27555
|
-
return (hAsync(Host, { key: '
|
|
27646
|
+
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" }))));
|
|
27556
27647
|
}
|
|
27557
27648
|
static get style() { return {
|
|
27558
27649
|
default: defaultStyleCss$d
|
|
@@ -27583,7 +27674,7 @@ class KolSelect {
|
|
|
27583
27674
|
"_touched": [1540],
|
|
27584
27675
|
"_value": [1544],
|
|
27585
27676
|
"getValue": [64],
|
|
27586
|
-
"
|
|
27677
|
+
"focus": [64]
|
|
27587
27678
|
},
|
|
27588
27679
|
"$listeners$": undefined,
|
|
27589
27680
|
"$lazyBundleId$": "-",
|
|
@@ -27786,9 +27877,9 @@ class KolSelectWc {
|
|
|
27786
27877
|
return Array.isArray(this.state._value) && this.state._value.length > 0 ? this.state._value[0] : this.state._value;
|
|
27787
27878
|
}
|
|
27788
27879
|
}
|
|
27789
|
-
async
|
|
27880
|
+
async focus() {
|
|
27790
27881
|
var _a;
|
|
27791
|
-
(_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
27882
|
+
return Promise.resolve((_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
27792
27883
|
}
|
|
27793
27884
|
getFormFieldProps() {
|
|
27794
27885
|
return {
|
|
@@ -27811,11 +27902,11 @@ class KolSelectWc {
|
|
|
27811
27902
|
} });
|
|
27812
27903
|
}
|
|
27813
27904
|
render() {
|
|
27814
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
27905
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '0dae16977914072f768715d0724d104681423011' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'f861a46e09370d1d9b0988583f21f3e7cb0ac95c', state: this.state }, hAsync("form", { key: '4018d6786323c59fc03a1e1808f2c294f538fd03', onSubmit: (event) => {
|
|
27815
27906
|
event.preventDefault();
|
|
27816
27907
|
propagateSubmitEventToForm({
|
|
27817
27908
|
form: this.host});
|
|
27818
|
-
} }, hAsync("input", { key: '
|
|
27909
|
+
} }, hAsync("input", { key: '4cf5976ab6f9e5936df90835f38d90075b47e0c6', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: '8f9f45475b6ea1c0c1e852896c4bc025bc0e5a4e' }, this.getSelectProps()))))));
|
|
27819
27910
|
}
|
|
27820
27911
|
constructor(hostRef) {
|
|
27821
27912
|
registerInstance(this, hostRef);
|
|
@@ -27985,7 +28076,7 @@ class KolSelectWc {
|
|
|
27985
28076
|
"state": [32],
|
|
27986
28077
|
"inputHasFocus": [32],
|
|
27987
28078
|
"getValue": [64],
|
|
27988
|
-
"
|
|
28079
|
+
"focus": [64]
|
|
27989
28080
|
},
|
|
27990
28081
|
"$listeners$": undefined,
|
|
27991
28082
|
"$lazyBundleId$": "-",
|
|
@@ -28051,21 +28142,23 @@ class KolSingleSelect {
|
|
|
28051
28142
|
async getValue() {
|
|
28052
28143
|
return this._value;
|
|
28053
28144
|
}
|
|
28054
|
-
async
|
|
28145
|
+
async focus() {
|
|
28055
28146
|
var _a;
|
|
28056
|
-
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
28147
|
+
return Promise.resolve((_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus());
|
|
28057
28148
|
}
|
|
28058
|
-
onBlur() {
|
|
28149
|
+
onBlur(event) {
|
|
28059
28150
|
var _a, _b, _c;
|
|
28060
28151
|
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()); });
|
|
28061
28152
|
if (matchingOption) {
|
|
28062
28153
|
this.selectOption(matchingOption);
|
|
28063
28154
|
}
|
|
28064
|
-
else {
|
|
28155
|
+
else if (!this._isOpen) {
|
|
28065
28156
|
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;
|
|
28066
28157
|
this._filteredOptions = [...this.state._options];
|
|
28067
28158
|
}
|
|
28068
|
-
|
|
28159
|
+
if (event instanceof FocusEvent && event.view === window) {
|
|
28160
|
+
this._isOpen = false;
|
|
28161
|
+
}
|
|
28069
28162
|
}
|
|
28070
28163
|
createEventWithTarget(type, detail) {
|
|
28071
28164
|
const event = new CustomEvent(type, {
|
|
@@ -28186,6 +28279,13 @@ class KolSingleSelect {
|
|
|
28186
28279
|
optionElement === null || optionElement === void 0 ? void 0 : optionElement.focus();
|
|
28187
28280
|
}
|
|
28188
28281
|
}
|
|
28282
|
+
selectFocusedOption() {
|
|
28283
|
+
if (Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 && this._focusedOptionIndex >= 0) {
|
|
28284
|
+
this.selectOption(this._filteredOptions[this._focusedOptionIndex]);
|
|
28285
|
+
return true;
|
|
28286
|
+
}
|
|
28287
|
+
return false;
|
|
28288
|
+
}
|
|
28189
28289
|
focusSuggestionStartingWith(char) {
|
|
28190
28290
|
const charLowerCase = char.toLowerCase();
|
|
28191
28291
|
const index = Array.isArray(this._filteredOptions) &&
|
|
@@ -28217,7 +28317,7 @@ class KolSingleSelect {
|
|
|
28217
28317
|
render() {
|
|
28218
28318
|
var _a;
|
|
28219
28319
|
const isDisabled = this.state._disabled === true;
|
|
28220
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
28320
|
+
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', {
|
|
28221
28321
|
'kol-single-select__delete--disabled': isDisabled,
|
|
28222
28322
|
}), _on: {
|
|
28223
28323
|
onClick: () => {
|
|
@@ -28225,9 +28325,9 @@ class KolSingleSelect {
|
|
|
28225
28325
|
this.clearSelection();
|
|
28226
28326
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
28227
28327
|
},
|
|
28228
|
-
} })), hAsync(KolIconTag, { key: '
|
|
28328
|
+
} })), hAsync(KolIconTag, { key: '51dc941170236329ae6e24b1267de6413d4ef977', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
28229
28329
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
28230
|
-
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '
|
|
28330
|
+
}), 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) => {
|
|
28231
28331
|
if (el)
|
|
28232
28332
|
this.refOptions[index] = el;
|
|
28233
28333
|
}, selected: this._value === option.value, disabled: option.disabled ? true : false, onClick: (event) => {
|
|
@@ -28262,16 +28362,16 @@ class KolSingleSelect {
|
|
|
28262
28362
|
}
|
|
28263
28363
|
} })))) : (hAsync("li", { class: "kol-single-select__no-results-message" }, this.translateNoResultsMessage, " ")))))));
|
|
28264
28364
|
}
|
|
28265
|
-
handleFocusOut() {
|
|
28365
|
+
handleFocusOut(event) {
|
|
28266
28366
|
setTimeout(() => {
|
|
28267
28367
|
var _a;
|
|
28268
28368
|
if (!((_a = this.host) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement))) {
|
|
28269
|
-
this.onBlur();
|
|
28369
|
+
this.onBlur(event);
|
|
28270
28370
|
}
|
|
28271
|
-
}
|
|
28371
|
+
});
|
|
28272
28372
|
}
|
|
28273
|
-
handleWindowBlur() {
|
|
28274
|
-
this.onBlur();
|
|
28373
|
+
handleWindowBlur(event) {
|
|
28374
|
+
this.onBlur(event);
|
|
28275
28375
|
}
|
|
28276
28376
|
handleKeyDown(event) {
|
|
28277
28377
|
var _a, _b;
|
|
@@ -28311,10 +28411,11 @@ class KolSingleSelect {
|
|
|
28311
28411
|
handleEvent(false);
|
|
28312
28412
|
break;
|
|
28313
28413
|
}
|
|
28314
|
-
case ' ':
|
|
28414
|
+
case ' ':
|
|
28415
|
+
case 'Enter':
|
|
28416
|
+
case 'NumpadEnter': {
|
|
28315
28417
|
if (this._isOpen) {
|
|
28316
|
-
if (
|
|
28317
|
-
this.selectOption(this._filteredOptions[this._focusedOptionIndex]);
|
|
28418
|
+
if (this.selectFocusedOption()) {
|
|
28318
28419
|
(_b = this.refInput) === null || _b === void 0 ? void 0 : _b.focus();
|
|
28319
28420
|
handleEvent(false);
|
|
28320
28421
|
}
|
|
@@ -28324,12 +28425,6 @@ class KolSingleSelect {
|
|
|
28324
28425
|
}
|
|
28325
28426
|
break;
|
|
28326
28427
|
}
|
|
28327
|
-
case 'NumpadEnter':
|
|
28328
|
-
case 'Enter': {
|
|
28329
|
-
this.toggleListbox(event);
|
|
28330
|
-
this._isOpen = false;
|
|
28331
|
-
break;
|
|
28332
|
-
}
|
|
28333
28428
|
case 'Home': {
|
|
28334
28429
|
this.blockSuggestionMouseOver = true;
|
|
28335
28430
|
handleEvent(undefined, () => {
|
|
@@ -28571,9 +28666,9 @@ class KolSingleSelect {
|
|
|
28571
28666
|
"state": [32],
|
|
28572
28667
|
"inputHasFocus": [32],
|
|
28573
28668
|
"getValue": [64],
|
|
28574
|
-
"
|
|
28669
|
+
"focus": [64]
|
|
28575
28670
|
},
|
|
28576
|
-
"$listeners$": [[
|
|
28671
|
+
"$listeners$": [[0, "focusout", "handleFocusOut"], [0, "blur", "handleWindowBlur"], [0, "keydown", "handleKeyDown"], [1, "mousemove", "handleMouseEvent"]],
|
|
28577
28672
|
"$lazyBundleId$": "-",
|
|
28578
28673
|
"$attrsToReflect$": [["_touched", "_touched"], ["_value", "_value"]]
|
|
28579
28674
|
}; }
|
|
@@ -28590,10 +28685,14 @@ class KolSkipNav {
|
|
|
28590
28685
|
};
|
|
28591
28686
|
}
|
|
28592
28687
|
render() {
|
|
28593
|
-
return (hAsync("nav", { key: '
|
|
28688
|
+
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) => {
|
|
28594
28689
|
return (hAsync("li", { class: "kol-skip-nav__list-item", key: index }, hAsync(KolLinkWcTag, Object.assign({}, link, { ref: index === 0 ? (el) => (this.firstLinkRef = el) : undefined }))));
|
|
28595
28690
|
}))));
|
|
28596
28691
|
}
|
|
28692
|
+
async focus() {
|
|
28693
|
+
var _a;
|
|
28694
|
+
return Promise.resolve((_a = this.firstLinkRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
28695
|
+
}
|
|
28597
28696
|
validateLabel(value, _oldValue, initial = false) {
|
|
28598
28697
|
if (!initial) {
|
|
28599
28698
|
removeNavLabel(this.state._label);
|
|
@@ -28613,10 +28712,6 @@ class KolSkipNav {
|
|
|
28613
28712
|
disconnectedCallback() {
|
|
28614
28713
|
removeNavLabel(this.state._label);
|
|
28615
28714
|
}
|
|
28616
|
-
async kolFocus() {
|
|
28617
|
-
var _a;
|
|
28618
|
-
await ((_a = this.firstLinkRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
28619
|
-
}
|
|
28620
28715
|
static get watchers() { return {
|
|
28621
28716
|
"_label": ["validateLabel"],
|
|
28622
28717
|
"_links": ["validateLinks"]
|
|
@@ -28631,7 +28726,7 @@ class KolSkipNav {
|
|
|
28631
28726
|
"_label": [1],
|
|
28632
28727
|
"_links": [1],
|
|
28633
28728
|
"state": [32],
|
|
28634
|
-
"
|
|
28729
|
+
"focus": [64]
|
|
28635
28730
|
},
|
|
28636
28731
|
"$listeners$": undefined,
|
|
28637
28732
|
"$lazyBundleId$": "-",
|
|
@@ -28666,7 +28761,7 @@ class KolSpin {
|
|
|
28666
28761
|
}
|
|
28667
28762
|
render() {
|
|
28668
28763
|
var _a, _b;
|
|
28669
|
-
return (hAsync(Host, { key: '
|
|
28764
|
+
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)))));
|
|
28670
28765
|
}
|
|
28671
28766
|
validateShow(value) {
|
|
28672
28767
|
this.showToggled = this.state._show === true && this._show === false;
|
|
@@ -28747,16 +28842,16 @@ class KolSplitButton {
|
|
|
28747
28842
|
async getValue() {
|
|
28748
28843
|
return this._value;
|
|
28749
28844
|
}
|
|
28750
|
-
async
|
|
28845
|
+
async focus() {
|
|
28751
28846
|
var _a;
|
|
28752
|
-
|
|
28847
|
+
return Promise.resolve((_a = this.primaryButtonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
28753
28848
|
}
|
|
28754
28849
|
render() {
|
|
28755
28850
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
28756
|
-
return (hAsync("div", { key: '
|
|
28851
|
+
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', {
|
|
28757
28852
|
[this._variant]: this._variant !== 'custom',
|
|
28758
28853
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
28759
|
-
}), 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: '
|
|
28854
|
+
}), 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' }))));
|
|
28760
28855
|
}
|
|
28761
28856
|
async closePopup() {
|
|
28762
28857
|
this.handleOnClose();
|
|
@@ -28791,7 +28886,7 @@ class KolSplitButton {
|
|
|
28791
28886
|
"_variant": [1],
|
|
28792
28887
|
"state": [32],
|
|
28793
28888
|
"getValue": [64],
|
|
28794
|
-
"
|
|
28889
|
+
"focus": [64],
|
|
28795
28890
|
"closePopup": [64]
|
|
28796
28891
|
},
|
|
28797
28892
|
"$listeners$": undefined,
|
|
@@ -28800,9 +28895,8 @@ class KolSplitButton {
|
|
|
28800
28895
|
}; }
|
|
28801
28896
|
}
|
|
28802
28897
|
|
|
28803
|
-
const parseColumnWidth = (width
|
|
28804
|
-
|
|
28805
|
-
return Number.isFinite(parsed) && parsed > 0 ? parsed : defaultWidth;
|
|
28898
|
+
const parseColumnWidth = (width) => {
|
|
28899
|
+
return Number.isFinite(width) && width !== undefined && width > 0 ? width : undefined;
|
|
28806
28900
|
};
|
|
28807
28901
|
|
|
28808
28902
|
class KolTableSettings {
|
|
@@ -28857,7 +28951,7 @@ class KolTableSettings {
|
|
|
28857
28951
|
this.updatePrimaryRow(row);
|
|
28858
28952
|
}
|
|
28859
28953
|
handleWidthChange(key, width) {
|
|
28860
|
-
const row = this.getPrimaryRow().map((col) => (col.key === key && col.resizable !== false ? Object.assign(Object.assign({}, col), { width:
|
|
28954
|
+
const row = this.getPrimaryRow().map((col) => (col.key === key && col.resizable !== false ? Object.assign(Object.assign({}, col), { width: Number(width) }) : col));
|
|
28861
28955
|
this.updatePrimaryRow(row);
|
|
28862
28956
|
}
|
|
28863
28957
|
handleCancel() {
|
|
@@ -28879,23 +28973,18 @@ class KolTableSettings {
|
|
|
28879
28973
|
this.errorMessage = null;
|
|
28880
28974
|
this.headerCells = this.editingHeaderCells.map((row) => row.map((cell) => (Object.assign({}, cell))));
|
|
28881
28975
|
const sanitizedHeaderCells = this.editingHeaderCells.map((row) => row.map((column) => {
|
|
28882
|
-
const
|
|
28883
|
-
|
|
28884
|
-
if (
|
|
28885
|
-
|
|
28886
|
-
|
|
28887
|
-
|
|
28888
|
-
|
|
28889
|
-
|
|
28890
|
-
if (
|
|
28891
|
-
|
|
28892
|
-
|
|
28893
|
-
|
|
28894
|
-
delete cell.resizable;
|
|
28895
|
-
}
|
|
28896
|
-
if (cell.width === undefined || cell.width === null || cell.width === '') {
|
|
28897
|
-
delete cell.width;
|
|
28898
|
-
}
|
|
28976
|
+
const _a = column, { hidable, resizable, sortable, visible, width } = _a, rest = __rest(_a, ["hidable", "resizable", "sortable", "visible", "width"]);
|
|
28977
|
+
const cell = Object.assign({}, rest);
|
|
28978
|
+
if (visible !== undefined)
|
|
28979
|
+
cell.visible = visible;
|
|
28980
|
+
if (hidable !== undefined)
|
|
28981
|
+
cell.hidable = hidable;
|
|
28982
|
+
if (sortable !== undefined)
|
|
28983
|
+
cell.sortable = sortable;
|
|
28984
|
+
if (resizable !== undefined)
|
|
28985
|
+
cell.resizable = resizable;
|
|
28986
|
+
if (width !== undefined && width !== null)
|
|
28987
|
+
cell.width = width;
|
|
28899
28988
|
return cell;
|
|
28900
28989
|
}));
|
|
28901
28990
|
dispatchDomEvent(this.host, KolEvent.changeHeaderCells, sanitizedHeaderCells);
|
|
@@ -28904,7 +28993,7 @@ class KolTableSettings {
|
|
|
28904
28993
|
}
|
|
28905
28994
|
render() {
|
|
28906
28995
|
const columns = this.getPrimaryRow();
|
|
28907
|
-
return (hAsync(KolPopoverButtonWcTag, { key: '
|
|
28996
|
+
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" }))))));
|
|
28908
28997
|
}
|
|
28909
28998
|
get host() { return getElement(this); }
|
|
28910
28999
|
static get watchers() { return {
|
|
@@ -28963,7 +29052,7 @@ var KeyboardKey;
|
|
|
28963
29052
|
KeyboardKey["Space"] = " ";
|
|
28964
29053
|
})(KeyboardKey || (KeyboardKey = {}));
|
|
28965
29054
|
|
|
28966
|
-
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}";
|
|
29055
|
+
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}";
|
|
28967
29056
|
|
|
28968
29057
|
const PAGINATION_OPTIONS = [10, 20, 50, 100];
|
|
28969
29058
|
const paginationValidator = (value) => value === true || value === '' || (typeof value === 'object' && value !== null);
|
|
@@ -28988,7 +29077,6 @@ class KolTableStateful {
|
|
|
28988
29077
|
vertical: [],
|
|
28989
29078
|
},
|
|
28990
29079
|
_label: '',
|
|
28991
|
-
_minWidth: 'auto',
|
|
28992
29080
|
_pagination: {
|
|
28993
29081
|
_page: 1,
|
|
28994
29082
|
_pageSize: 10,
|
|
@@ -29157,11 +29245,6 @@ class KolTableStateful {
|
|
|
29157
29245
|
required: true,
|
|
29158
29246
|
});
|
|
29159
29247
|
}
|
|
29160
|
-
validateMinWidth(value) {
|
|
29161
|
-
watchString(this, '_minWidth', value, {
|
|
29162
|
-
defaultValue: undefined,
|
|
29163
|
-
});
|
|
29164
|
-
}
|
|
29165
29248
|
validateSelection(value) {
|
|
29166
29249
|
validateTableSelection(this, value);
|
|
29167
29250
|
}
|
|
@@ -29197,7 +29280,6 @@ class KolTableStateful {
|
|
|
29197
29280
|
this.validateDataFoot(this._dataFoot);
|
|
29198
29281
|
this.validateHeaders(this._headers);
|
|
29199
29282
|
this.validateLabel(this._label);
|
|
29200
|
-
this.validateMinWidth(this._minWidth);
|
|
29201
29283
|
this.validateOn(this._on);
|
|
29202
29284
|
this.validatePagination(this._pagination);
|
|
29203
29285
|
this.validatePaginationPosition(this._paginationPosition);
|
|
@@ -29288,7 +29370,7 @@ class KolTableStateful {
|
|
|
29288
29370
|
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 : [],
|
|
29289
29371
|
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 : [],
|
|
29290
29372
|
};
|
|
29291
|
-
return (hAsync(Host, { key: '
|
|
29373
|
+
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: {
|
|
29292
29374
|
onSort: (_, payload) => {
|
|
29293
29375
|
this.handleSort(payload);
|
|
29294
29376
|
},
|
|
@@ -29306,7 +29388,6 @@ class KolTableStateful {
|
|
|
29306
29388
|
"_hasSettingsMenu": ["validateHasSettingsMenu"],
|
|
29307
29389
|
"_headers": ["validateHeaders"],
|
|
29308
29390
|
"_label": ["validateLabel"],
|
|
29309
|
-
"_minWidth": ["validateMinWidth"],
|
|
29310
29391
|
"_selection": ["validateSelection"],
|
|
29311
29392
|
"_on": ["validateOn"],
|
|
29312
29393
|
"_pagination": ["validatePagination"]
|
|
@@ -29323,7 +29404,6 @@ class KolTableStateful {
|
|
|
29323
29404
|
"_dataFoot": [1, "_data-foot"],
|
|
29324
29405
|
"_headers": [1],
|
|
29325
29406
|
"_label": [1],
|
|
29326
|
-
"_minWidth": [1, "_min-width"],
|
|
29327
29407
|
"_pagination": [8],
|
|
29328
29408
|
"_paginationPosition": [1, "_pagination-position"],
|
|
29329
29409
|
"_selection": [1],
|
|
@@ -29338,14 +29418,14 @@ class KolTableStateful {
|
|
|
29338
29418
|
}; }
|
|
29339
29419
|
}
|
|
29340
29420
|
|
|
29341
|
-
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}";
|
|
29421
|
+
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}";
|
|
29342
29422
|
|
|
29343
29423
|
let KolTableStateless$1 = class KolTableStateless {
|
|
29344
29424
|
constructor(hostRef) {
|
|
29345
29425
|
registerInstance(this, hostRef);
|
|
29346
29426
|
}
|
|
29347
29427
|
render() {
|
|
29348
|
-
return (hAsync(KolTableStatelessWcTag, { key: '
|
|
29428
|
+
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 }));
|
|
29349
29429
|
}
|
|
29350
29430
|
static get style() { return {
|
|
29351
29431
|
default: defaultStyleCss$7
|
|
@@ -29358,7 +29438,6 @@ let KolTableStateless$1 = class KolTableStateless {
|
|
|
29358
29438
|
"_dataFoot": [1, "_data-foot"],
|
|
29359
29439
|
"_headerCells": [1, "_header-cells"],
|
|
29360
29440
|
"_label": [1],
|
|
29361
|
-
"_minWidth": [1, "_min-width"],
|
|
29362
29441
|
"_on": [16],
|
|
29363
29442
|
"_selection": [1],
|
|
29364
29443
|
"_hasSettingsMenu": [4, "_has-settings-menu"]
|
|
@@ -29369,11 +29448,6 @@ let KolTableStateless$1 = class KolTableStateless {
|
|
|
29369
29448
|
}; }
|
|
29370
29449
|
};
|
|
29371
29450
|
|
|
29372
|
-
const HEADER_CELL_WIDTH_VALIDATOR = /^\d+(\.\d+)?([a-z]+|%)?$/;
|
|
29373
|
-
const validateMinWidth = (component, value, options) => {
|
|
29374
|
-
watchValidator(component, '_minWidth', (v) => typeof v === 'string' && HEADER_CELL_WIDTH_VALIDATOR.test(v), new Set(['String', '/^\\d+(\\.\\d+)?([a-z]+|%)?$/']), value, options);
|
|
29375
|
-
};
|
|
29376
|
-
|
|
29377
29451
|
class KolTableStateless {
|
|
29378
29452
|
constructor(hostRef) {
|
|
29379
29453
|
registerInstance(this, hostRef);
|
|
@@ -29385,7 +29459,6 @@ class KolTableStateless {
|
|
|
29385
29459
|
vertical: [],
|
|
29386
29460
|
},
|
|
29387
29461
|
_label: '',
|
|
29388
|
-
_minWidth: 'auto',
|
|
29389
29462
|
_hasSettingsMenu: false,
|
|
29390
29463
|
};
|
|
29391
29464
|
this.horizontal = true;
|
|
@@ -29424,7 +29497,6 @@ class KolTableStateless {
|
|
|
29424
29497
|
[`kol-table__cell--align-${cell.textAlign}`]: cell.textAlign,
|
|
29425
29498
|
}), "aria-atomic": isNoEntriesHintCell ? 'false' : undefined, "aria-live": isNoEntriesHintCell ? 'polite' : undefined, "aria-relevant": isNoEntriesHintCell ? 'text' : undefined, colSpan: cell.colSpan, rowSpan: cell.rowSpan, style: {
|
|
29426
29499
|
textAlign: cell.textAlign,
|
|
29427
|
-
width: cell.width,
|
|
29428
29500
|
}, ref: typeof cell.render === 'function'
|
|
29429
29501
|
? (el) => {
|
|
29430
29502
|
this.cellRender(cell, el);
|
|
@@ -29458,9 +29530,6 @@ class KolTableStateless {
|
|
|
29458
29530
|
required: true,
|
|
29459
29531
|
});
|
|
29460
29532
|
}
|
|
29461
|
-
validateMinWidth(value) {
|
|
29462
|
-
validateMinWidth(this, value);
|
|
29463
|
-
}
|
|
29464
29533
|
validateOn(value) {
|
|
29465
29534
|
validateTableCallbacks(this, value);
|
|
29466
29535
|
}
|
|
@@ -29710,7 +29779,6 @@ class KolTableStateless {
|
|
|
29710
29779
|
this.validateDataFoot(this._dataFoot);
|
|
29711
29780
|
this.validateHeaderCells(this._headerCells);
|
|
29712
29781
|
this.validateLabel(this._label);
|
|
29713
|
-
this.validateMinWidth(this._minWidth);
|
|
29714
29782
|
this.validateOn(this._on);
|
|
29715
29783
|
this.validateSelection(this._selection);
|
|
29716
29784
|
this.validateHasSettingsMenu(this._hasSettingsMenu);
|
|
@@ -29806,14 +29874,39 @@ class KolTableStateless {
|
|
|
29806
29874
|
return selection;
|
|
29807
29875
|
}
|
|
29808
29876
|
getTableMinWidth() {
|
|
29809
|
-
var _a;
|
|
29810
|
-
|
|
29877
|
+
var _a, _b;
|
|
29878
|
+
const horizontalHeaders = (_a = this.state._headerCells.horizontal) !== null && _a !== void 0 ? _a : [];
|
|
29879
|
+
const horizontalHeaderWidths = [];
|
|
29880
|
+
horizontalHeaders.forEach((row) => {
|
|
29881
|
+
row.forEach((cell) => {
|
|
29882
|
+
if (cell.visible !== false && cell.width !== undefined && cell.width > 0) {
|
|
29883
|
+
horizontalHeaderWidths.push(cell.width);
|
|
29884
|
+
}
|
|
29885
|
+
});
|
|
29886
|
+
});
|
|
29887
|
+
const verticalHeaders = (_b = this.state._headerCells.vertical) !== null && _b !== void 0 ? _b : [];
|
|
29888
|
+
const verticalHeaderWidths = [];
|
|
29889
|
+
verticalHeaders.forEach((column) => {
|
|
29890
|
+
column.forEach((cell) => {
|
|
29891
|
+
if (cell.width !== undefined && cell.width > 0) {
|
|
29892
|
+
verticalHeaderWidths.push(cell.width);
|
|
29893
|
+
}
|
|
29894
|
+
});
|
|
29895
|
+
});
|
|
29896
|
+
const allWidths = [...verticalHeaderWidths, ...horizontalHeaderWidths];
|
|
29897
|
+
if (allWidths.length === 0) {
|
|
29898
|
+
return '0px';
|
|
29899
|
+
}
|
|
29900
|
+
if (allWidths.length === 1) {
|
|
29901
|
+
return `${allWidths[0]}px`;
|
|
29902
|
+
}
|
|
29903
|
+
return `calc(${allWidths.map((w) => `${w}px`).join(' + ')})`;
|
|
29811
29904
|
}
|
|
29812
29905
|
renderHeadingSelectionCell() {
|
|
29813
29906
|
var _a, _b;
|
|
29814
29907
|
const selection = this.state._selection;
|
|
29815
29908
|
if (!selection) {
|
|
29816
|
-
return hAsync("
|
|
29909
|
+
return hAsync("td", { class: "kol-table__cell kol-table__cell--header", key: `thead-0` });
|
|
29817
29910
|
}
|
|
29818
29911
|
if (selection.multiple === false) {
|
|
29819
29912
|
return hAsync("td", { key: `thead-0-selection`, class: "kol-table__cell kol-table__cell--header kol-table__cell--selection" });
|
|
@@ -29838,11 +29931,17 @@ class KolTableStateless {
|
|
|
29838
29931
|
} })), hAsync(KolTooltipWcTag, { "aria-hidden": "true", class: "kol-table__selection-input-tooltip", _align: "right", _id: `${translationKey}-label`, _label: label }))));
|
|
29839
29932
|
}
|
|
29840
29933
|
renderHeaderTdCell() {
|
|
29841
|
-
|
|
29842
|
-
|
|
29843
|
-
|
|
29844
|
-
|
|
29845
|
-
|
|
29934
|
+
const horizontalHeaders = this.state._headerCells.horizontal;
|
|
29935
|
+
const verticalHeaders = this.state._headerCells.vertical;
|
|
29936
|
+
if (!Array.isArray(horizontalHeaders) || horizontalHeaders.length === 0 || !Array.isArray(verticalHeaders) || verticalHeaders.length === 0) {
|
|
29937
|
+
return hAsync(Fragment, null);
|
|
29938
|
+
}
|
|
29939
|
+
const totalWidth = verticalHeaders.reduce((sum, column) => {
|
|
29940
|
+
var _a;
|
|
29941
|
+
const firstCell = column === null || column === void 0 ? void 0 : column[0];
|
|
29942
|
+
return sum + ((_a = firstCell === null || firstCell === void 0 ? void 0 : firstCell.width) !== null && _a !== void 0 ? _a : 0);
|
|
29943
|
+
}, 0);
|
|
29944
|
+
return (hAsync("td", { "aria-hidden": "true", colSpan: verticalHeaders.length, rowSpan: horizontalHeaders.length, style: totalWidth > 0 ? { width: `${totalWidth}px` } : undefined }));
|
|
29846
29945
|
}
|
|
29847
29946
|
formatSortOrderDescription(order) {
|
|
29848
29947
|
return this.translateSortOrder.replace('{{order}}', `${order}`);
|
|
@@ -29882,9 +29981,7 @@ class KolTableStateless {
|
|
|
29882
29981
|
return (hAsync("th", { key: `${rowIndex}-${colIndex}-${cell.label}`, class: clsx('kol-table__cell kol-table__cell--header', {
|
|
29883
29982
|
[`kol-table__cell--align-${cell.textAlign}`]: cell.textAlign,
|
|
29884
29983
|
[`kol-table__cell--${ariaSort}`]: ariaSort,
|
|
29885
|
-
}), scope: scope, colSpan: cell.colSpan, rowSpan: cell.rowSpan, style: {
|
|
29886
|
-
width: cell.width,
|
|
29887
|
-
}, "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: {
|
|
29984
|
+
}), 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: {
|
|
29888
29985
|
onClick: (event) => {
|
|
29889
29986
|
var _a;
|
|
29890
29987
|
if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onSort) === 'function' && cell.key && cell.sortDirection) {
|
|
@@ -29923,12 +30020,12 @@ class KolTableStateless {
|
|
|
29923
30020
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
29924
30021
|
this.checkboxRefs = [];
|
|
29925
30022
|
const horizontalHeaders = this.state._headerCells.horizontal;
|
|
29926
|
-
return (hAsync("div", { key: '
|
|
30023
|
+
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: {
|
|
29927
30024
|
minWidth: this.getTableMinWidth(),
|
|
29928
|
-
} }, hAsync("caption", { key: '
|
|
30025
|
+
} }, 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" }, [
|
|
29929
30026
|
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))))),
|
|
29930
30027
|
this.renderSpacer('head', horizontalHeaders),
|
|
29931
|
-
])), hAsync("tbody", { key: '
|
|
30028
|
+
])), hAsync("tbody", { key: 'bba0270d6ca03234ebe2b12b101c589439bda99d', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
|
|
29932
30029
|
}
|
|
29933
30030
|
get host() { return getElement(this); }
|
|
29934
30031
|
static get watchers() { return {
|
|
@@ -29937,7 +30034,6 @@ class KolTableStateless {
|
|
|
29937
30034
|
"_dataFoot": ["validateDataFoot"],
|
|
29938
30035
|
"_headerCells": ["validateHeaderCells"],
|
|
29939
30036
|
"_label": ["validateLabel"],
|
|
29940
|
-
"_minWidth": ["validateMinWidth"],
|
|
29941
30037
|
"_on": ["validateOn"],
|
|
29942
30038
|
"_selection": ["validateSelection"]
|
|
29943
30039
|
}; }
|
|
@@ -29949,7 +30045,6 @@ class KolTableStateless {
|
|
|
29949
30045
|
"_dataFoot": [1, "_data-foot"],
|
|
29950
30046
|
"_headerCells": [1, "_header-cells"],
|
|
29951
30047
|
"_label": [1],
|
|
29952
|
-
"_minWidth": [1, "_min-width"],
|
|
29953
30048
|
"_on": [16],
|
|
29954
30049
|
"_selection": [1],
|
|
29955
30050
|
"_hasSettingsMenu": [4, "_has-settings-menu"],
|
|
@@ -29957,7 +30052,7 @@ class KolTableStateless {
|
|
|
29957
30052
|
"tableDivElementHasScrollbar": [32],
|
|
29958
30053
|
"previousHeaderCells": [32]
|
|
29959
30054
|
},
|
|
29960
|
-
"$listeners$": [[0, "keydown", "handleKeyDown"], [0, "
|
|
30055
|
+
"$listeners$": [[0, "keydown", "handleKeyDown"], [0, "changeheadercells", "handleSettingsChange"]],
|
|
29961
30056
|
"$lazyBundleId$": "-",
|
|
29962
30057
|
"$attrsToReflect$": []
|
|
29963
30058
|
}; }
|
|
@@ -30167,9 +30262,9 @@ class KolTabs {
|
|
|
30167
30262
|
}, _icons: "kolicon-plus", "data-testid": "tabs-create-button" }))));
|
|
30168
30263
|
}
|
|
30169
30264
|
render() {
|
|
30170
|
-
return (hAsync("div", { key: '
|
|
30265
|
+
return (hAsync("div", { key: 'd2ead3f3fa8c12ae4e4d658ced80bd9915e358ca', ref: (el) => {
|
|
30171
30266
|
this.tabPanelsElement = el;
|
|
30172
|
-
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
30267
|
+
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: 'a0e9d89632c7dd6af0c0d9ed9f53e6a4d9829fe5', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
|
|
30173
30268
|
}
|
|
30174
30269
|
validateAlign(value) {
|
|
30175
30270
|
validateAlign(this, value);
|
|
@@ -30367,9 +30462,9 @@ class KolTextarea {
|
|
|
30367
30462
|
var _a;
|
|
30368
30463
|
return (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.value;
|
|
30369
30464
|
}
|
|
30370
|
-
async
|
|
30465
|
+
async focus() {
|
|
30371
30466
|
var _a;
|
|
30372
|
-
(_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
30467
|
+
return Promise.resolve((_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
30373
30468
|
}
|
|
30374
30469
|
getFormFieldProps() {
|
|
30375
30470
|
return {
|
|
@@ -30395,7 +30490,7 @@ class KolTextarea {
|
|
|
30395
30490
|
} });
|
|
30396
30491
|
}
|
|
30397
30492
|
render() {
|
|
30398
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
30493
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '55fb2285f0d4035a7468359c26d7eae0333ebe2d' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '2db1a595b9eef777a40f716b8596a03e03144aa7', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: '14d56cb30389a03cbb82ca2b76ee96eb60488e9e' }, this.getTextAreaProps())))));
|
|
30399
30494
|
}
|
|
30400
30495
|
constructor(hostRef) {
|
|
30401
30496
|
registerInstance(this, hostRef);
|
|
@@ -30524,7 +30619,7 @@ class KolTextarea {
|
|
|
30524
30619
|
else if (!this._rows) {
|
|
30525
30620
|
this._rows = 1;
|
|
30526
30621
|
}
|
|
30527
|
-
}
|
|
30622
|
+
});
|
|
30528
30623
|
}
|
|
30529
30624
|
componentWillLoad() {
|
|
30530
30625
|
this._touched = this._touched === true;
|
|
@@ -30596,7 +30691,7 @@ class KolTextarea {
|
|
|
30596
30691
|
"state": [32],
|
|
30597
30692
|
"inputHasFocus": [32],
|
|
30598
30693
|
"getValue": [64],
|
|
30599
|
-
"
|
|
30694
|
+
"focus": [64]
|
|
30600
30695
|
},
|
|
30601
30696
|
"$listeners$": undefined,
|
|
30602
30697
|
"$lazyBundleId$": "-",
|
|
@@ -30667,7 +30762,7 @@ class KolToastContainer {
|
|
|
30667
30762
|
}
|
|
30668
30763
|
}
|
|
30669
30764
|
render() {
|
|
30670
|
-
return (hAsync(Host, { key: '
|
|
30765
|
+
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: {
|
|
30671
30766
|
onClick: () => {
|
|
30672
30767
|
void this.closeAll();
|
|
30673
30768
|
},
|
|
@@ -30721,7 +30816,7 @@ class KolToolbar {
|
|
|
30721
30816
|
return Object.assign(Object.assign({}, rest), { _icons, _disabled });
|
|
30722
30817
|
}
|
|
30723
30818
|
render() {
|
|
30724
|
-
return (hAsync("div", { key: '
|
|
30819
|
+
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)));
|
|
30725
30820
|
}
|
|
30726
30821
|
validateLabel(value) {
|
|
30727
30822
|
validateLabel(this, value);
|
|
@@ -30768,7 +30863,7 @@ class KolToolbar {
|
|
|
30768
30863
|
if ((_d = (_c = this.state._items) === null || _c === void 0 ? void 0 : _c[nextIndex]) === null || _d === void 0 ? void 0 : _d._disabled)
|
|
30769
30864
|
return;
|
|
30770
30865
|
this.currentIndex = nextIndex;
|
|
30771
|
-
void ((_e = this.getCurrentToolbarItem(nextIndex)) === null || _e === void 0 ? void 0 : _e.
|
|
30866
|
+
void ((_e = this.getCurrentToolbarItem(nextIndex)) === null || _e === void 0 ? void 0 : _e.focus());
|
|
30772
30867
|
}
|
|
30773
30868
|
handleBlur(event) {
|
|
30774
30869
|
if (event.target === this.host)
|
|
@@ -30960,7 +31055,7 @@ class KolTooltipWc {
|
|
|
30960
31055
|
getDocument().removeEventListener('keyup', this.hideTooltipByEscape);
|
|
30961
31056
|
}
|
|
30962
31057
|
render() {
|
|
30963
|
-
return (hAsync(Host, { key: '
|
|
31058
|
+
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 })))));
|
|
30964
31059
|
}
|
|
30965
31060
|
validateBadgeText(value) {
|
|
30966
31061
|
validateBadgeText(this, value);
|
|
@@ -31038,7 +31133,7 @@ class KolTree {
|
|
|
31038
31133
|
registerInstance(this, hostRef);
|
|
31039
31134
|
}
|
|
31040
31135
|
render() {
|
|
31041
|
-
return (hAsync(KolTreeWcTag, { key: '
|
|
31136
|
+
return (hAsync(KolTreeWcTag, { key: '0a42e480a9fe270180fa75f07b87bfb00a634ac9', _label: this._label }, hAsync("slot", { key: '19c9f71d5a62202b0022adff62b36a277797dd0c' })));
|
|
31042
31137
|
}
|
|
31043
31138
|
static get style() { return {
|
|
31044
31139
|
default: defaultStyleCss$2
|
|
@@ -31061,27 +31156,24 @@ class KolTreeItem {
|
|
|
31061
31156
|
constructor(hostRef) {
|
|
31062
31157
|
registerInstance(this, hostRef);
|
|
31063
31158
|
}
|
|
31064
|
-
async
|
|
31065
|
-
|
|
31066
|
-
|
|
31067
|
-
}
|
|
31159
|
+
async focus() {
|
|
31160
|
+
var _a;
|
|
31161
|
+
return Promise.resolve((_a = this.element) === null || _a === void 0 ? void 0 : _a.focus());
|
|
31068
31162
|
}
|
|
31069
31163
|
async expand() {
|
|
31070
|
-
|
|
31071
|
-
|
|
31072
|
-
}
|
|
31164
|
+
var _a;
|
|
31165
|
+
return Promise.resolve((_a = this.element) === null || _a === void 0 ? void 0 : _a.expand());
|
|
31073
31166
|
}
|
|
31074
31167
|
async collapse() {
|
|
31075
|
-
|
|
31076
|
-
|
|
31077
|
-
}
|
|
31168
|
+
var _a;
|
|
31169
|
+
return Promise.resolve((_a = this.element) === null || _a === void 0 ? void 0 : _a.collapse());
|
|
31078
31170
|
}
|
|
31079
31171
|
async isOpen() {
|
|
31080
31172
|
var _a, _b;
|
|
31081
31173
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
31082
31174
|
}
|
|
31083
31175
|
render() {
|
|
31084
|
-
return (hAsync(KolTreeItemWcTag, { key: '
|
|
31176
|
+
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' })));
|
|
31085
31177
|
}
|
|
31086
31178
|
static get style() { return {
|
|
31087
31179
|
default: defaultStyleCss$1
|
|
@@ -31094,7 +31186,7 @@ class KolTreeItem {
|
|
|
31094
31186
|
"_label": [1],
|
|
31095
31187
|
"_open": [4],
|
|
31096
31188
|
"_href": [1],
|
|
31097
|
-
"
|
|
31189
|
+
"focus": [64],
|
|
31098
31190
|
"expand": [64],
|
|
31099
31191
|
"collapse": [64],
|
|
31100
31192
|
"isOpen": [64]
|
|
@@ -31119,12 +31211,12 @@ class KolTreeItemWc {
|
|
|
31119
31211
|
}
|
|
31120
31212
|
render() {
|
|
31121
31213
|
const { _href, _active, _hasChildren, _open, _label } = this.state;
|
|
31122
|
-
return (hAsync(Host, { key: '
|
|
31214
|
+
return (hAsync(Host, { key: 'e99bc051fe9fe90cd4a5aaf861d61d0d512c808a', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { key: 'e0ae86b656eab778f80852a40dd84cda832695a9', class: "kol-tree-item", style: {
|
|
31123
31215
|
'--level': `${this.level}`,
|
|
31124
|
-
} }, hAsync(KolLinkWcTag, { key: '
|
|
31216
|
+
} }, hAsync(KolLinkWcTag, { key: '3ffea17f30ab8e461e936d691d7fd4389f04bf2c', class: clsx('kol-tree-item__link', {
|
|
31125
31217
|
'kol-tree-item__link--first-level': this.level === 0,
|
|
31126
31218
|
'kol-tree-item__link--active': _active,
|
|
31127
|
-
}), _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: '
|
|
31219
|
+
}), _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' })))));
|
|
31128
31220
|
}
|
|
31129
31221
|
validateActive(value) {
|
|
31130
31222
|
validateActive(this, value || false);
|
|
@@ -31162,12 +31254,14 @@ class KolTreeItemWc {
|
|
|
31162
31254
|
var _a, _b;
|
|
31163
31255
|
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) });
|
|
31164
31256
|
}
|
|
31165
|
-
async
|
|
31166
|
-
|
|
31257
|
+
async focus() {
|
|
31258
|
+
var _a;
|
|
31259
|
+
return Promise.resolve((_a = this.linkElement) === null || _a === void 0 ? void 0 : _a.focus());
|
|
31167
31260
|
}
|
|
31168
31261
|
async handleExpandClick(event) {
|
|
31262
|
+
var _a;
|
|
31169
31263
|
event.preventDefault();
|
|
31170
|
-
await this.linkElement.
|
|
31264
|
+
await ((_a = this.linkElement) === null || _a === void 0 ? void 0 : _a.focus());
|
|
31171
31265
|
await this.expand();
|
|
31172
31266
|
}
|
|
31173
31267
|
async expand() {
|
|
@@ -31176,8 +31270,9 @@ class KolTreeItemWc {
|
|
|
31176
31270
|
}
|
|
31177
31271
|
}
|
|
31178
31272
|
async handleCollapseClick(event) {
|
|
31273
|
+
var _a;
|
|
31179
31274
|
event.preventDefault();
|
|
31180
|
-
this.linkElement.focus();
|
|
31275
|
+
await ((_a = this.linkElement) === null || _a === void 0 ? void 0 : _a.focus());
|
|
31181
31276
|
await this.collapse();
|
|
31182
31277
|
}
|
|
31183
31278
|
async collapse() {
|
|
@@ -31206,7 +31301,7 @@ class KolTreeItemWc {
|
|
|
31206
31301
|
"_href": [1],
|
|
31207
31302
|
"level": [32],
|
|
31208
31303
|
"state": [32],
|
|
31209
|
-
"
|
|
31304
|
+
"focus": [64],
|
|
31210
31305
|
"expand": [64],
|
|
31211
31306
|
"collapse": [64],
|
|
31212
31307
|
"isOpen": [64]
|
|
@@ -31228,7 +31323,7 @@ class KolTreeWc {
|
|
|
31228
31323
|
validateLabel(this, value);
|
|
31229
31324
|
}
|
|
31230
31325
|
render() {
|
|
31231
|
-
return (hAsync(Host, { key: '
|
|
31326
|
+
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' })))));
|
|
31232
31327
|
}
|
|
31233
31328
|
static isTreeItem(element) {
|
|
31234
31329
|
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
|
@@ -31291,7 +31386,7 @@ class KolTreeWc {
|
|
|
31291
31386
|
return elementsWithInclude.filter((element) => element.include).map((element) => element.value);
|
|
31292
31387
|
}
|
|
31293
31388
|
async handleKeyDown(event) {
|
|
31294
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
31389
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
31295
31390
|
const openItems = await this.getOpenTreeItemElements();
|
|
31296
31391
|
const currentTreeItem = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(KolTreeItemTag);
|
|
31297
31392
|
const hasModifierKeyPressed = event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;
|
|
@@ -31301,12 +31396,12 @@ class KolTreeWc {
|
|
|
31301
31396
|
const currentIndex = openItems === null || openItems === void 0 ? void 0 : openItems.findIndex((elem) => elem === currentTreeItem);
|
|
31302
31397
|
switch (event.key) {
|
|
31303
31398
|
case 'ArrowDown': {
|
|
31304
|
-
await ((_b = openItems[currentIndex + 1]) === null || _b === void 0 ? void 0 : _b.
|
|
31399
|
+
await ((_b = openItems[currentIndex + 1]) === null || _b === void 0 ? void 0 : _b.focus());
|
|
31305
31400
|
event.preventDefault();
|
|
31306
31401
|
break;
|
|
31307
31402
|
}
|
|
31308
31403
|
case 'ArrowUp': {
|
|
31309
|
-
await ((_c = openItems[currentIndex - 1]) === null || _c === void 0 ? void 0 : _c.
|
|
31404
|
+
await ((_c = openItems[currentIndex - 1]) === null || _c === void 0 ? void 0 : _c.focus());
|
|
31310
31405
|
event.preventDefault();
|
|
31311
31406
|
break;
|
|
31312
31407
|
}
|
|
@@ -31314,7 +31409,7 @@ class KolTreeWc {
|
|
|
31314
31409
|
case 'ArrowRight': {
|
|
31315
31410
|
event.preventDefault();
|
|
31316
31411
|
if (await currentTreeItem.isOpen()) {
|
|
31317
|
-
await ((_d = openItems[currentIndex + 1]) === null || _d === void 0 ? void 0 : _d.
|
|
31412
|
+
await ((_d = openItems[currentIndex + 1]) === null || _d === void 0 ? void 0 : _d.focus());
|
|
31318
31413
|
}
|
|
31319
31414
|
else {
|
|
31320
31415
|
await currentTreeItem.expand();
|
|
@@ -31329,17 +31424,17 @@ class KolTreeWc {
|
|
|
31329
31424
|
}
|
|
31330
31425
|
else {
|
|
31331
31426
|
const parentIndex = openItems.findIndex((item) => item === currentTreeItem.parentElement);
|
|
31332
|
-
parentIndex !== -1 && (await ((_e = openItems[parentIndex]) === null || _e === void 0 ? void 0 : _e.
|
|
31427
|
+
parentIndex !== -1 && (await ((_e = openItems[parentIndex]) === null || _e === void 0 ? void 0 : _e.focus()));
|
|
31333
31428
|
}
|
|
31334
31429
|
break;
|
|
31335
31430
|
}
|
|
31336
31431
|
case 'Home': {
|
|
31337
|
-
await ((_f = openItems[0]) === null || _f === void 0 ? void 0 : _f.
|
|
31432
|
+
await ((_f = openItems[0]) === null || _f === void 0 ? void 0 : _f.focus());
|
|
31338
31433
|
event.preventDefault();
|
|
31339
31434
|
break;
|
|
31340
31435
|
}
|
|
31341
31436
|
case 'End': {
|
|
31342
|
-
await ((_g = openItems[openItems.length - 1]) === null || _g === void 0 ? void 0 : _g.
|
|
31437
|
+
await ((_g = openItems[openItems.length - 1]) === null || _g === void 0 ? void 0 : _g.focus());
|
|
31343
31438
|
event.preventDefault();
|
|
31344
31439
|
break;
|
|
31345
31440
|
}
|
|
@@ -31352,14 +31447,14 @@ class KolTreeWc {
|
|
|
31352
31447
|
.slice(startIndex, startIndex + openItems.length)
|
|
31353
31448
|
.findIndex((item) => { var _a; return (_a = item.getAttribute('_label')) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase().startsWith(char); });
|
|
31354
31449
|
if (matchIndex !== -1) {
|
|
31355
|
-
await wrapAroundItems[startIndex + matchIndex].
|
|
31450
|
+
await ((_j = wrapAroundItems[startIndex + matchIndex]) === null || _j === void 0 ? void 0 : _j.focus());
|
|
31356
31451
|
event.preventDefault();
|
|
31357
31452
|
}
|
|
31358
31453
|
}
|
|
31359
31454
|
break;
|
|
31360
31455
|
}
|
|
31361
31456
|
case '*': {
|
|
31362
|
-
const siblings = (
|
|
31457
|
+
const siblings = (_k = currentTreeItem.parentElement) === null || _k === void 0 ? void 0 : _k.querySelectorAll(KolTreeItemTag);
|
|
31363
31458
|
siblings === null || siblings === void 0 ? void 0 : siblings.forEach((element) => {
|
|
31364
31459
|
void element.expand();
|
|
31365
31460
|
});
|
|
@@ -31425,7 +31520,7 @@ class KolVersion {
|
|
|
31425
31520
|
};
|
|
31426
31521
|
}
|
|
31427
31522
|
render() {
|
|
31428
|
-
return (hAsync(Host, { key: '
|
|
31523
|
+
return (hAsync(Host, { key: 'c2c4090511476f2b782e5ec11eeefb14e84aeef8', class: "kol-version" }, hAsync(KolBadgeTag, { key: '8cca6fc737968718a4ade9c153711209b562c9bf', _color: "#bec5c9", _icons: {
|
|
31429
31524
|
left: { icon: 'kolicon-version', label: this.translateVersion },
|
|
31430
31525
|
}, _label: this.state._label })));
|
|
31431
31526
|
}
|
|
@@ -31486,6 +31581,8 @@ registerComponents([
|
|
|
31486
31581
|
KolCardWc,
|
|
31487
31582
|
KolCombobox,
|
|
31488
31583
|
KolDetails,
|
|
31584
|
+
KolDialog,
|
|
31585
|
+
KolDialogWc,
|
|
31489
31586
|
KolDrawer,
|
|
31490
31587
|
KolForm,
|
|
31491
31588
|
KolHeading,
|