@public-ui/hydrate 4.0.0-beta.0 → 4.0.0-rc.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 +402 -317
- package/dist/index.mjs +402 -317
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -146,7 +146,7 @@ function _mergeNamespaces(n, m) {
|
|
|
146
146
|
|
|
147
147
|
const NAMESPACE = 'kolibri';
|
|
148
148
|
const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
|
|
149
|
-
const Env = /* kolibri */ {"kolibriVersion":"4.0.0-
|
|
149
|
+
const Env = /* kolibri */ {"kolibriVersion":"4.0.0-rc.0"};
|
|
150
150
|
|
|
151
151
|
function getDefaultExportFromCjs (x) {
|
|
152
152
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
@@ -576,47 +576,48 @@ var TagEnum;
|
|
|
576
576
|
TagEnum[TagEnum["card"] = 8] = "card";
|
|
577
577
|
TagEnum[TagEnum["combobox"] = 9] = "combobox";
|
|
578
578
|
TagEnum[TagEnum["details"] = 10] = "details";
|
|
579
|
-
TagEnum[TagEnum["
|
|
580
|
-
TagEnum[TagEnum["
|
|
581
|
-
TagEnum[TagEnum["
|
|
582
|
-
TagEnum[TagEnum["
|
|
583
|
-
TagEnum[TagEnum["
|
|
584
|
-
TagEnum[TagEnum["
|
|
585
|
-
TagEnum[TagEnum["input-
|
|
586
|
-
TagEnum[TagEnum["input-
|
|
587
|
-
TagEnum[TagEnum["input-
|
|
588
|
-
TagEnum[TagEnum["input-
|
|
589
|
-
TagEnum[TagEnum["input-
|
|
590
|
-
TagEnum[TagEnum["input-
|
|
591
|
-
TagEnum[TagEnum["input-
|
|
592
|
-
TagEnum[TagEnum["input-
|
|
593
|
-
TagEnum[TagEnum["input-
|
|
594
|
-
TagEnum[TagEnum["
|
|
595
|
-
TagEnum[TagEnum["
|
|
596
|
-
TagEnum[TagEnum["link
|
|
597
|
-
TagEnum[TagEnum["
|
|
598
|
-
TagEnum[TagEnum["
|
|
599
|
-
TagEnum[TagEnum["
|
|
600
|
-
TagEnum[TagEnum["
|
|
601
|
-
TagEnum[TagEnum["
|
|
602
|
-
TagEnum[TagEnum["
|
|
603
|
-
TagEnum[TagEnum["
|
|
604
|
-
TagEnum[TagEnum["
|
|
605
|
-
TagEnum[TagEnum["
|
|
606
|
-
TagEnum[TagEnum["
|
|
607
|
-
TagEnum[TagEnum["
|
|
608
|
-
TagEnum[TagEnum["
|
|
609
|
-
TagEnum[TagEnum["
|
|
610
|
-
TagEnum[TagEnum["
|
|
611
|
-
TagEnum[TagEnum["table
|
|
612
|
-
TagEnum[TagEnum["table-
|
|
613
|
-
TagEnum[TagEnum["
|
|
614
|
-
TagEnum[TagEnum["
|
|
615
|
-
TagEnum[TagEnum["
|
|
616
|
-
TagEnum[TagEnum["
|
|
617
|
-
TagEnum[TagEnum["
|
|
618
|
-
TagEnum[TagEnum["
|
|
619
|
-
TagEnum[TagEnum["tree
|
|
579
|
+
TagEnum[TagEnum["dialog"] = 11] = "dialog";
|
|
580
|
+
TagEnum[TagEnum["drawer"] = 12] = "drawer";
|
|
581
|
+
TagEnum[TagEnum["form"] = 13] = "form";
|
|
582
|
+
TagEnum[TagEnum["heading"] = 14] = "heading";
|
|
583
|
+
TagEnum[TagEnum["icon"] = 15] = "icon";
|
|
584
|
+
TagEnum[TagEnum["image"] = 16] = "image";
|
|
585
|
+
TagEnum[TagEnum["input-checkbox"] = 17] = "input-checkbox";
|
|
586
|
+
TagEnum[TagEnum["input-color"] = 18] = "input-color";
|
|
587
|
+
TagEnum[TagEnum["input-date"] = 19] = "input-date";
|
|
588
|
+
TagEnum[TagEnum["input-email"] = 20] = "input-email";
|
|
589
|
+
TagEnum[TagEnum["input-file"] = 21] = "input-file";
|
|
590
|
+
TagEnum[TagEnum["input-number"] = 22] = "input-number";
|
|
591
|
+
TagEnum[TagEnum["input-password"] = 23] = "input-password";
|
|
592
|
+
TagEnum[TagEnum["input-radio"] = 24] = "input-radio";
|
|
593
|
+
TagEnum[TagEnum["input-range"] = 25] = "input-range";
|
|
594
|
+
TagEnum[TagEnum["input-text"] = 26] = "input-text";
|
|
595
|
+
TagEnum[TagEnum["kolibri"] = 27] = "kolibri";
|
|
596
|
+
TagEnum[TagEnum["link"] = 28] = "link";
|
|
597
|
+
TagEnum[TagEnum["link-button"] = 29] = "link-button";
|
|
598
|
+
TagEnum[TagEnum["logo"] = 30] = "logo";
|
|
599
|
+
TagEnum[TagEnum["modal"] = 31] = "modal";
|
|
600
|
+
TagEnum[TagEnum["nav"] = 32] = "nav";
|
|
601
|
+
TagEnum[TagEnum["pagination"] = 33] = "pagination";
|
|
602
|
+
TagEnum[TagEnum["popover-button"] = 34] = "popover-button";
|
|
603
|
+
TagEnum[TagEnum["progress"] = 35] = "progress";
|
|
604
|
+
TagEnum[TagEnum["quote"] = 36] = "quote";
|
|
605
|
+
TagEnum[TagEnum["select"] = 37] = "select";
|
|
606
|
+
TagEnum[TagEnum["single-select"] = 38] = "single-select";
|
|
607
|
+
TagEnum[TagEnum["skip-nav"] = 39] = "skip-nav";
|
|
608
|
+
TagEnum[TagEnum["spin"] = 40] = "spin";
|
|
609
|
+
TagEnum[TagEnum["split-button"] = 41] = "split-button";
|
|
610
|
+
TagEnum[TagEnum["symbol"] = 42] = "symbol";
|
|
611
|
+
TagEnum[TagEnum["table"] = 43] = "table";
|
|
612
|
+
TagEnum[TagEnum["table-stateful"] = 44] = "table-stateful";
|
|
613
|
+
TagEnum[TagEnum["table-stateless"] = 45] = "table-stateless";
|
|
614
|
+
TagEnum[TagEnum["tabs"] = 46] = "tabs";
|
|
615
|
+
TagEnum[TagEnum["textarea"] = 47] = "textarea";
|
|
616
|
+
TagEnum[TagEnum["toast-container"] = 48] = "toast-container";
|
|
617
|
+
TagEnum[TagEnum["toolbar"] = 49] = "toolbar";
|
|
618
|
+
TagEnum[TagEnum["tooltip"] = 50] = "tooltip";
|
|
619
|
+
TagEnum[TagEnum["tree"] = 51] = "tree";
|
|
620
|
+
TagEnum[TagEnum["tree-item"] = 52] = "tree-item";
|
|
620
621
|
})(TagEnum || (TagEnum = {}));
|
|
621
622
|
|
|
622
623
|
const getWindow$1 = () => {
|
|
@@ -6070,6 +6071,7 @@ let KolBadgeTag = 'kol-badge';
|
|
|
6070
6071
|
let KolButtonTag = 'kol-button';
|
|
6071
6072
|
let KolButtonWcTag = 'kol-button-wc';
|
|
6072
6073
|
let KolCardWcTag = 'kol-card-wc';
|
|
6074
|
+
let KolDialogWcTag = 'kol-dialog-wc';
|
|
6073
6075
|
let KolFormTag = 'kol-form';
|
|
6074
6076
|
let KolHeadingTag = 'kol-heading';
|
|
6075
6077
|
let KolIconTag = 'kol-icon';
|
|
@@ -6089,7 +6091,7 @@ let KolTreeItemWcTag = 'kol-tree-item-wc';
|
|
|
6089
6091
|
let KolTreeTag = 'kol-tree';
|
|
6090
6092
|
let KolTreeWcTag = 'kol-tree-wc';
|
|
6091
6093
|
|
|
6092
|
-
const defaultStyleCss$
|
|
6094
|
+
const defaultStyleCss$N = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}";
|
|
6093
6095
|
|
|
6094
6096
|
class KolAbbr {
|
|
6095
6097
|
constructor(hostRef) {
|
|
@@ -6111,7 +6113,7 @@ class KolAbbr {
|
|
|
6111
6113
|
"_label": ["validateLabel"]
|
|
6112
6114
|
}; }
|
|
6113
6115
|
static get style() { return {
|
|
6114
|
-
default: defaultStyleCss$
|
|
6116
|
+
default: defaultStyleCss$N
|
|
6115
6117
|
}; }
|
|
6116
6118
|
static get cmpMeta() { return {
|
|
6117
6119
|
"$flags$": 297,
|
|
@@ -6298,7 +6300,7 @@ const watchHeadingLevel = (component, value) => {
|
|
|
6298
6300
|
validateLevel(component, value);
|
|
6299
6301
|
};
|
|
6300
6302
|
|
|
6301
|
-
const defaultStyleCss$
|
|
6303
|
+
const defaultStyleCss$M = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n @media (prefers-reduced-motion) {\n .collapsible__wrapper-animation, .collapsible__wrapper {\n transition-duration: 0s;\n }\n }\n .collapsible {\n /* @see https://github.com/public-ui/kolibri/issues/5952 */\n }\n @media print {\n :not(.collapsible--open) .collapsible__wrapper-animation {\n display: none;\n }\n }\n .collapsible__wrapper {\n /* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */\n transform: translateZ(0);\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.3s;\n }\n .collapsible__wrapper-animation {\n opacity: 0;\n transform: scaleY(0);\n transform-origin: top;\n min-height: 0;\n /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n visibility: hidden;\n transition: transform 0.3s, opacity 0.3s, visibility 0.3s;\n }\n .collapsible--open .collapsible__wrapper {\n grid-template-rows: 1fr;\n }\n .collapsible--open .collapsible__wrapper-animation {\n opacity: 1;\n transform: scaleY(1);\n visibility: visible;\n }\n .collapsible {\n /*\n * Inside a button, the caption text is always centered.\n * So we have to align the text to the left.\n */\n }\n .collapsible__heading-button button .kol-span {\n align-items: flex-start;\n }\n .collapsible--open:focus-within {\n position: relative;\n z-index: 100;\n }\n}";
|
|
6302
6304
|
|
|
6303
6305
|
featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
|
|
6304
6306
|
|
|
@@ -6332,9 +6334,9 @@ class KolAccordion {
|
|
|
6332
6334
|
_on: {},
|
|
6333
6335
|
};
|
|
6334
6336
|
}
|
|
6335
|
-
async
|
|
6337
|
+
async focus() {
|
|
6336
6338
|
var _a;
|
|
6337
|
-
|
|
6339
|
+
return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
6338
6340
|
}
|
|
6339
6341
|
render() {
|
|
6340
6342
|
const { _open, _label, _disabled, _level } = this.state;
|
|
@@ -6358,7 +6360,7 @@ class KolAccordion {
|
|
|
6358
6360
|
animationClass: `${rootClass}__wrapper-animation`,
|
|
6359
6361
|
},
|
|
6360
6362
|
};
|
|
6361
|
-
return (hAsync(KolCollapsibleFc, Object.assign({ key: '
|
|
6363
|
+
return (hAsync(KolCollapsibleFc, Object.assign({ key: '033717b5a67b6f63ebea447be031a9c234339e43' }, props), hAsync("slot", { key: '08b68dbec91743fdfabdee75a07a451713951dc6' })));
|
|
6362
6364
|
}
|
|
6363
6365
|
validateDisabled(value) {
|
|
6364
6366
|
validateDisabled(this, value);
|
|
@@ -6393,7 +6395,7 @@ class KolAccordion {
|
|
|
6393
6395
|
"_open": ["validateOpen"]
|
|
6394
6396
|
}; }
|
|
6395
6397
|
static get style() { return {
|
|
6396
|
-
default: defaultStyleCss$
|
|
6398
|
+
default: defaultStyleCss$M
|
|
6397
6399
|
}; }
|
|
6398
6400
|
static get cmpMeta() { return {
|
|
6399
6401
|
"$flags$": 297,
|
|
@@ -6405,7 +6407,7 @@ class KolAccordion {
|
|
|
6405
6407
|
"_on": [16],
|
|
6406
6408
|
"_open": [1540],
|
|
6407
6409
|
"state": [32],
|
|
6408
|
-
"
|
|
6410
|
+
"focus": [64]
|
|
6409
6411
|
},
|
|
6410
6412
|
"$listeners$": undefined,
|
|
6411
6413
|
"$lazyBundleId$": "-",
|
|
@@ -6413,7 +6415,7 @@ class KolAccordion {
|
|
|
6413
6415
|
}; }
|
|
6414
6416
|
}
|
|
6415
6417
|
|
|
6416
|
-
const defaultStyleCss$
|
|
6418
|
+
const defaultStyleCss$L = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
6417
6419
|
|
|
6418
6420
|
class KolAlert {
|
|
6419
6421
|
constructor(hostRef) {
|
|
@@ -6431,7 +6433,7 @@ class KolAlert {
|
|
|
6431
6433
|
return (hAsync(KolAlertWcTag, { key: 'bf51c76e2d6568eea0d1a0c3047da6987aa249d8', _alert: this._alert, _hasCloser: this._hasCloser, _label: this._label, _level: this._level, _on: this._on, _type: this._type, _variant: this._variant }, hAsync("slot", { key: 'b754666af76f0fcbb15ffeaa4d11b2f61d93abc4' })));
|
|
6432
6434
|
}
|
|
6433
6435
|
static get style() { return {
|
|
6434
|
-
default: defaultStyleCss$
|
|
6436
|
+
default: defaultStyleCss$L
|
|
6435
6437
|
}; }
|
|
6436
6438
|
static get cmpMeta() { return {
|
|
6437
6439
|
"$flags$": 297,
|
|
@@ -6909,7 +6911,7 @@ class KolAlertWc {
|
|
|
6909
6911
|
}; }
|
|
6910
6912
|
}
|
|
6911
6913
|
|
|
6912
|
-
const defaultStyleCss$
|
|
6914
|
+
const defaultStyleCss$K = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-avatar,\n .kol-avatar__image,\n .kol-avatar__initials {\n border-radius: 50%;\n }\n .kol-avatar {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n width: calc(100 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(100 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-avatar__image, .kol-avatar__initials {\n width: 100%;\n height: 100%;\n }\n .kol-avatar__initials {\n background-color: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
6913
6915
|
|
|
6914
6916
|
class KolAvatar {
|
|
6915
6917
|
constructor(hostRef) {
|
|
@@ -6920,7 +6922,7 @@ class KolAvatar {
|
|
|
6920
6922
|
return hAsync(KolAvatarWcTag, { key: 'b50d593f2fcc07fb3a1c8a92786df6ddcbc917cf', _color: this._color, _src: this._src, _label: this._label });
|
|
6921
6923
|
}
|
|
6922
6924
|
static get style() { return {
|
|
6923
|
-
default: defaultStyleCss$
|
|
6925
|
+
default: defaultStyleCss$K
|
|
6924
6926
|
}; }
|
|
6925
6927
|
static get cmpMeta() { return {
|
|
6926
6928
|
"$flags$": 297,
|
|
@@ -18561,7 +18563,7 @@ const ToastItemFc = (_a) => {
|
|
|
18561
18563
|
return (hAsync("div", { class: clsx('kol-toast-item', `kol-toast-item--${status}`) }, hAsync(KolAlertFc, { class: "kol-toast-item__alert", alert: true, label: label, level: 0, hasCloser: true, type: type, variant: variant || 'card', onCloserClick: onClose }, hAsync("div", Object.assign({}, other), description))));
|
|
18562
18564
|
};
|
|
18563
18565
|
|
|
18564
|
-
const defaultStyleCss$
|
|
18566
|
+
const defaultStyleCss$J = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-badge {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: inline-flex;\n place-items: center;\n }\n .kol-badge .kol-badge__smart-button .button {\n color: inherit;\n }\n}";
|
|
18565
18567
|
|
|
18566
18568
|
featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
|
|
18567
18569
|
class KolBadge {
|
|
@@ -18590,18 +18592,18 @@ class KolBadge {
|
|
|
18590
18592
|
renderSmartButton(props) {
|
|
18591
18593
|
return (hAsync(KolButtonWcTag, { ref: this.catchSmartButtonRef, class: "kol-badge__smart-button", _ariaControls: this.id, _ariaDescription: props._ariaDescription, _buttonVariant: props._variant, _customClass: props._customClass, _disabled: props._disabled, _hideLabel: true, _icons: props._icons, _id: props._id, _label: props._label, _on: props._on, _tooltipAlign: props._tooltipAlign }));
|
|
18592
18594
|
}
|
|
18593
|
-
async
|
|
18595
|
+
async focus() {
|
|
18594
18596
|
var _a;
|
|
18595
|
-
|
|
18597
|
+
return Promise.resolve((_a = this.smartButtonRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
18596
18598
|
}
|
|
18597
18599
|
render() {
|
|
18598
18600
|
const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;
|
|
18599
|
-
return (hAsync("span", { key: '
|
|
18601
|
+
return (hAsync("span", { key: 'fe86a1a3e242f1ea2b439364882543151b319ea6', class: clsx('kol-badge', {
|
|
18600
18602
|
'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
|
|
18601
18603
|
}), style: {
|
|
18602
18604
|
backgroundColor: this.bgColorStr,
|
|
18603
18605
|
color: this.colorStr,
|
|
18604
|
-
} }, hAsync(KolSpanFc, { key: '
|
|
18606
|
+
} }, hAsync(KolSpanFc, { key: '2880c59a62931e41d78381e5c5b1a81f3e27d256', class: "kol-badge__label", id: hasSmartButton ? this.id : undefined, allowMarkdown: true, icons: this.state._icons, label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton)));
|
|
18605
18607
|
}
|
|
18606
18608
|
validateIcons(value) {
|
|
18607
18609
|
validateIcons(this, value);
|
|
@@ -18635,7 +18637,7 @@ class KolBadge {
|
|
|
18635
18637
|
"_smartButton": ["validateSmartButton"]
|
|
18636
18638
|
}; }
|
|
18637
18639
|
static get style() { return {
|
|
18638
|
-
default: defaultStyleCss$
|
|
18640
|
+
default: defaultStyleCss$J
|
|
18639
18641
|
}; }
|
|
18640
18642
|
static get cmpMeta() { return {
|
|
18641
18643
|
"$flags$": 297,
|
|
@@ -18646,7 +18648,7 @@ class KolBadge {
|
|
|
18646
18648
|
"_label": [1],
|
|
18647
18649
|
"_smartButton": [1, "_smart-button"],
|
|
18648
18650
|
"state": [32],
|
|
18649
|
-
"
|
|
18651
|
+
"focus": [64]
|
|
18650
18652
|
},
|
|
18651
18653
|
"$listeners$": undefined,
|
|
18652
18654
|
"$lazyBundleId$": "-",
|
|
@@ -18672,7 +18674,7 @@ const watchNavLinks = (className, component, value) => {
|
|
|
18672
18674
|
uiUxHintMillerscheZahl(className, component.state._links.length);
|
|
18673
18675
|
};
|
|
18674
18676
|
|
|
18675
|
-
const defaultStyleCss$
|
|
18677
|
+
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 }\n .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-link__text .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-breadcrumb__list, .kol-breadcrumb__list-element {\n display: flex;\n margin: 0;\n padding: 0;\n gap: 0.5em;\n flex-wrap: wrap;\n place-items: center;\n list-style: none;\n }\n .kol-breadcrumb__list-element:first-child:last-child {\n min-height: var(--a11y-min-size);\n }\n}";
|
|
18676
18678
|
|
|
18677
18679
|
class KolBreadcrumb {
|
|
18678
18680
|
constructor(hostRef) {
|
|
@@ -18714,7 +18716,7 @@ class KolBreadcrumb {
|
|
|
18714
18716
|
"_links": ["validateLinks"]
|
|
18715
18717
|
}; }
|
|
18716
18718
|
static get style() { return {
|
|
18717
|
-
default: defaultStyleCss$
|
|
18719
|
+
default: defaultStyleCss$I
|
|
18718
18720
|
}; }
|
|
18719
18721
|
static get cmpMeta() { return {
|
|
18720
18722
|
"$flags$": 297,
|
|
@@ -18730,7 +18732,7 @@ class KolBreadcrumb {
|
|
|
18730
18732
|
}; }
|
|
18731
18733
|
}
|
|
18732
18734
|
|
|
18733
|
-
const defaultStyleCss$
|
|
18735
|
+
const defaultStyleCss$H = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n display: inline-block;\n }\n .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-button__text {\n flex: 1 0 100%;\n }\n}";
|
|
18734
18736
|
|
|
18735
18737
|
class KolButton {
|
|
18736
18738
|
constructor(hostRef) {
|
|
@@ -18748,15 +18750,15 @@ class KolButton {
|
|
|
18748
18750
|
async getValue() {
|
|
18749
18751
|
return this._value;
|
|
18750
18752
|
}
|
|
18751
|
-
async
|
|
18753
|
+
async focus() {
|
|
18752
18754
|
var _a;
|
|
18753
|
-
|
|
18755
|
+
return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
18754
18756
|
}
|
|
18755
18757
|
render() {
|
|
18756
|
-
return (hAsync(KolButtonWcTag, { key: '
|
|
18758
|
+
return (hAsync(KolButtonWcTag, { key: 'f11e1608010be61b889bfa56beaaf4713bfd501d', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _buttonVariant: this._variant }, hAsync("slot", { key: 'f806eae7a76f2f04dc87d97054f332eb9f67da0b', name: "expert", slot: "expert" })));
|
|
18757
18759
|
}
|
|
18758
18760
|
static get style() { return {
|
|
18759
|
-
default: defaultStyleCss$
|
|
18761
|
+
default: defaultStyleCss$H
|
|
18760
18762
|
}; }
|
|
18761
18763
|
static get cmpMeta() { return {
|
|
18762
18764
|
"$flags$": 297,
|
|
@@ -18784,7 +18786,7 @@ class KolButton {
|
|
|
18784
18786
|
"_value": [8],
|
|
18785
18787
|
"_variant": [1],
|
|
18786
18788
|
"getValue": [64],
|
|
18787
|
-
"
|
|
18789
|
+
"focus": [64]
|
|
18788
18790
|
},
|
|
18789
18791
|
"$listeners$": undefined,
|
|
18790
18792
|
"$lazyBundleId$": "-",
|
|
@@ -18792,7 +18794,7 @@ class KolButton {
|
|
|
18792
18794
|
}; }
|
|
18793
18795
|
}
|
|
18794
18796
|
|
|
18795
|
-
const defaultStyleCss$
|
|
18797
|
+
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 }\n .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-button__text .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-button__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button--inline {\n min-width: unset;\n min-height: unset;\n }\n}";
|
|
18796
18798
|
|
|
18797
18799
|
class KolButtonLink {
|
|
18798
18800
|
constructor(hostRef) {
|
|
@@ -18809,15 +18811,15 @@ class KolButtonLink {
|
|
|
18809
18811
|
async getValue() {
|
|
18810
18812
|
return this._value;
|
|
18811
18813
|
}
|
|
18812
|
-
async
|
|
18814
|
+
async focus() {
|
|
18813
18815
|
var _a;
|
|
18814
|
-
|
|
18816
|
+
return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
18815
18817
|
}
|
|
18816
18818
|
render() {
|
|
18817
|
-
return (hAsync(KolButtonWcTag, { key: '
|
|
18819
|
+
return (hAsync(KolButtonWcTag, { key: '4f24a85aab00b98b53b93aa18f9050cfd58d37c3', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value }, hAsync("slot", { key: '4282c9c9226bc23d50f97a63477354872fa77f42', name: "expert", slot: "expert" })));
|
|
18818
18820
|
}
|
|
18819
18821
|
static get style() { return {
|
|
18820
|
-
default: defaultStyleCss$
|
|
18822
|
+
default: defaultStyleCss$G
|
|
18821
18823
|
}; }
|
|
18822
18824
|
static get cmpMeta() { return {
|
|
18823
18825
|
"$flags$": 297,
|
|
@@ -18843,7 +18845,7 @@ class KolButtonLink {
|
|
|
18843
18845
|
"_type": [1],
|
|
18844
18846
|
"_value": [8],
|
|
18845
18847
|
"getValue": [64],
|
|
18846
|
-
"
|
|
18848
|
+
"focus": [64]
|
|
18847
18849
|
},
|
|
18848
18850
|
"$listeners$": undefined,
|
|
18849
18851
|
"$lazyBundleId$": "-",
|
|
@@ -19116,9 +19118,9 @@ class AssociatedInputController {
|
|
|
19116
19118
|
}
|
|
19117
19119
|
|
|
19118
19120
|
class KolButtonWc {
|
|
19119
|
-
async
|
|
19121
|
+
async focus() {
|
|
19120
19122
|
var _a;
|
|
19121
|
-
(_a = this.buttonRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
19123
|
+
return Promise.resolve((_a = this.buttonRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
19122
19124
|
}
|
|
19123
19125
|
render() {
|
|
19124
19126
|
var _a;
|
|
@@ -19127,14 +19129,14 @@ class KolButtonWc {
|
|
|
19127
19129
|
const badgeText = this.state._accessKey || this.state._shortKey;
|
|
19128
19130
|
const isDisabled = this.state._disabled === true;
|
|
19129
19131
|
const hideLabel = this.state._hideLabel === true;
|
|
19130
|
-
return (hAsync(Host, { key: '
|
|
19132
|
+
return (hAsync(Host, { key: '99416124052f5a18686e2ea0fc8db9e9f9066a01' }, hAsync("button", { key: '07fe0e9be0846dd5609e707000dc9b6e86bdb348', ref: (ref) => (this.buttonRef = ref), accessKey: this.state._accessKey, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-haspopup": this._ariaHasPopup, "aria-keyshortcuts": this.state._shortKey, "aria-label": hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: clsx('kol-button', {
|
|
19131
19133
|
'kol-button--disabled': isDisabled,
|
|
19132
19134
|
[`kol-button--${this.state._buttonVariant}`]: this.state._buttonVariant !== 'custom',
|
|
19133
19135
|
'kol-button--inline': this.state._inline === true,
|
|
19134
19136
|
'kol-button--standalone': this.state._inline === false,
|
|
19135
19137
|
'kol-button--hide-label': hideLabel,
|
|
19136
19138
|
[this.state._customClass]: this.state._buttonVariant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
19137
|
-
}), disabled: isDisabled, id: this.state._id, name: this.state._name, onClick: this.onClick, onMouseDown: this.onMouseDown, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }, hAsync(KolSpanFc, { key: '
|
|
19139
|
+
}), disabled: isDisabled, id: this.state._id, name: this.state._name, onClick: this.onClick, onMouseDown: this.onMouseDown, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }, hAsync(KolSpanFc, { key: 'a72dca8e86940ccc9f9525b9f726dee12f6884a3', class: "kol-button__text", badgeText: badgeText, icons: this.state._icons, hideLabel: hideLabel, label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: '2d4a2a369fc496087ce41b021e771e7e9c421adf', name: "expert", slot: "expert" }))), hideLabel && (hAsync(KolTooltipWcTag, { key: 'a6f0f7f8b41875c2a98f1125120e38c22afb8658', ref: (ref) => (this.tooltipRef = ref), "aria-hidden": "true", hidden: hasExpertSlot, class: "kol-button__tooltip", _badgeText: badgeText, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' }))));
|
|
19138
19140
|
}
|
|
19139
19141
|
constructor(hostRef) {
|
|
19140
19142
|
registerInstance(this, hostRef);
|
|
@@ -19339,7 +19341,7 @@ class KolButtonWc {
|
|
|
19339
19341
|
"_value": [8],
|
|
19340
19342
|
"_buttonVariant": [1, "_button-variant"],
|
|
19341
19343
|
"state": [32],
|
|
19342
|
-
"
|
|
19344
|
+
"focus": [64]
|
|
19343
19345
|
},
|
|
19344
19346
|
"$listeners$": undefined,
|
|
19345
19347
|
"$lazyBundleId$": "-",
|
|
@@ -19347,7 +19349,7 @@ class KolButtonWc {
|
|
|
19347
19349
|
}; }
|
|
19348
19350
|
}
|
|
19349
19351
|
|
|
19350
|
-
const defaultStyleCss$
|
|
19352
|
+
const defaultStyleCss$F = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-card {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: grid;\n height: 100%;\n overflow: visible;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-template-areas: \"header close\" \"content content\";\n grid-template-columns: 1fr min-content;\n grid-template-rows: min-content 1fr;\n }\n .kol-card__header {\n align-self: start;\n grid-area: header;\n }\n .kol-card__content {\n align-self: stretch;\n grid-area: content;\n }\n .kol-card__close-button {\n grid-area: close;\n }\n}";
|
|
19351
19353
|
|
|
19352
19354
|
class KolCard {
|
|
19353
19355
|
constructor(hostRef) {
|
|
@@ -19359,7 +19361,7 @@ class KolCard {
|
|
|
19359
19361
|
return (hAsync(KolCardWcTag, { key: 'db950a543bc2f41a1e0786c9ac3d4cb0fce5cf97', _on: this._on, _hasCloser: this._hasCloser, _label: this._label, _level: this._level }, hAsync("slot", { key: 'f7ad1dd60427b5e2ae00f0e2260309a025d1ed44' })));
|
|
19360
19362
|
}
|
|
19361
19363
|
static get style() { return {
|
|
19362
|
-
default: defaultStyleCss$
|
|
19364
|
+
default: defaultStyleCss$F
|
|
19363
19365
|
}; }
|
|
19364
19366
|
static get cmpMeta() { return {
|
|
19365
19367
|
"$flags$": 297,
|
|
@@ -19401,7 +19403,7 @@ class KolCardWc {
|
|
|
19401
19403
|
this.validateOnValue = (value) => typeof value === 'object' && value !== null && typeof value.onClose === 'function';
|
|
19402
19404
|
}
|
|
19403
19405
|
render() {
|
|
19404
|
-
return (hAsync(Host, { key: '
|
|
19406
|
+
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: '7df6b94d298481022c30aae8712d8a8a9995b4e8', class: "kol-card__close-button", "data-testid": "card-close-button", _hideLabel: true, _icons: {
|
|
19405
19407
|
left: {
|
|
19406
19408
|
icon: 'kolicon-cross',
|
|
19407
19409
|
},
|
|
@@ -19934,15 +19936,15 @@ class ComboboxController extends InputIconController {
|
|
|
19934
19936
|
}
|
|
19935
19937
|
}
|
|
19936
19938
|
|
|
19937
|
-
const defaultStyleCss$D = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-option {\n line-height: 1.5;\n white-space: normal;\n cursor: pointer;\n overflow-wrap: break-word;\n }\n .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n cursor: none !important;\n }\n .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n cursor: not-allowed;\n }\n .kol-custom-suggestions-options-group {\n background-color: white;\n display: block;\n position: absolute;\n z-index: 2;\n max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n overflow-y: auto;\n list-style-type: none;\n }\n .kol-custom-suggestions-toggle {\n display: flex;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: default;\n }\n .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n cursor: not-allowed;\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-combobox__delete .kol-button {\n cursor: pointer;\n }\n .kol-combobox__delete--disabled .kol-button {\n cursor: not-allowed;\n }\n .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n cursor: pointer;\n }\n .kol-custom-suggestions-toggle--disabled {\n opacity: 0.5;\n }\n}";
|
|
19939
|
+
const defaultStyleCss$E = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-option {\n line-height: 1.5;\n white-space: normal;\n cursor: pointer;\n overflow-wrap: break-word;\n }\n .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n cursor: none !important;\n }\n .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n cursor: not-allowed;\n }\n .kol-custom-suggestions-options-group {\n background-color: white;\n display: block;\n position: absolute;\n z-index: 2;\n max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n overflow-y: auto;\n list-style-type: none;\n }\n .kol-custom-suggestions-toggle {\n display: flex;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: default;\n }\n .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n cursor: not-allowed;\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-combobox__delete .kol-button {\n cursor: pointer;\n }\n .kol-combobox__delete--disabled .kol-button {\n cursor: not-allowed;\n }\n .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n cursor: pointer;\n }\n .kol-custom-suggestions-toggle--disabled {\n opacity: 0.5;\n }\n}";
|
|
19938
19940
|
|
|
19939
19941
|
class KolCombobox {
|
|
19940
19942
|
async getValue() {
|
|
19941
19943
|
return this.state._value;
|
|
19942
19944
|
}
|
|
19943
|
-
async
|
|
19945
|
+
async focus() {
|
|
19944
19946
|
var _a;
|
|
19945
|
-
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
19947
|
+
return Promise.resolve((_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus());
|
|
19946
19948
|
}
|
|
19947
19949
|
selectOption(option) {
|
|
19948
19950
|
var _a;
|
|
@@ -20049,15 +20051,15 @@ class KolCombobox {
|
|
|
20049
20051
|
}
|
|
20050
20052
|
render() {
|
|
20051
20053
|
const isDisabled = this.state._disabled === true;
|
|
20052
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
20054
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'cbd013af84eddc131e32b69743d50bebb89ab0c5' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '535b4a33165c1f440589cf302ed01f157a1be32a', state: this.state }, hAsync("div", { key: '792a4944ee12462a0f7eb851b1b17213d70353b7', class: "kol-combobox__group" }, hAsync(InputStateWrapper, Object.assign({ key: 'f656e9e9387c40d54e0d68745e6394cab9a35d3a' }, this.getInputProps())), this.state._value && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: 'f41a15aac631825b41c0319db08a71e3aac19deb', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _disabled: isDisabled, "data-testid": "combobox-delete", class: clsx('kol-combobox__delete', {
|
|
20053
20055
|
'kol-combobox__delete--disabled': isDisabled,
|
|
20054
20056
|
}), _on: {
|
|
20055
20057
|
onClick: () => {
|
|
20056
20058
|
this.clearSelection();
|
|
20057
20059
|
},
|
|
20058
|
-
} })), hAsync(KolIconTag, { key: '
|
|
20060
|
+
} })), hAsync(KolIconTag, { key: 'e26e181a6c4f4a3fc1035823c88b35123447a10f', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
20059
20061
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
20060
|
-
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '
|
|
20062
|
+
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: 'c7d248cdee473e36a53d275a1b02a29cdaa9d77a', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
|
|
20061
20063
|
this._filteredSuggestions.length > 0 &&
|
|
20062
20064
|
this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { disabled: false, index: index, option: option, searchTerm: this.state._value, ref: (el) => {
|
|
20063
20065
|
if (el)
|
|
@@ -20334,7 +20336,7 @@ class KolCombobox {
|
|
|
20334
20336
|
"_value": ["validateValue"]
|
|
20335
20337
|
}; }
|
|
20336
20338
|
static get style() { return {
|
|
20337
|
-
default: defaultStyleCss$
|
|
20339
|
+
default: defaultStyleCss$E
|
|
20338
20340
|
}; }
|
|
20339
20341
|
static get cmpMeta() { return {
|
|
20340
20342
|
"$flags$": 297,
|
|
@@ -20366,7 +20368,7 @@ class KolCombobox {
|
|
|
20366
20368
|
"state": [32],
|
|
20367
20369
|
"inputHasFocus": [32],
|
|
20368
20370
|
"getValue": [64],
|
|
20369
|
-
"
|
|
20371
|
+
"focus": [64]
|
|
20370
20372
|
},
|
|
20371
20373
|
"$listeners$": [[0, "keydown", "handleKeyDown"], [8, "click", "handleWindowClick"], [1, "mousemove", "handleMouseEvent"], [8, "focusout", "handleFocusOut"], [8, "blur", "handleWindowBlur"]],
|
|
20372
20374
|
"$lazyBundleId$": "-",
|
|
@@ -20374,7 +20376,7 @@ class KolCombobox {
|
|
|
20374
20376
|
}; }
|
|
20375
20377
|
}
|
|
20376
20378
|
|
|
20377
|
-
const defaultStyleCss$
|
|
20379
|
+
const defaultStyleCss$D = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n @media (prefers-reduced-motion) {\n .collapsible__wrapper-animation, .collapsible__wrapper {\n transition-duration: 0s;\n }\n }\n .collapsible {\n /* @see https://github.com/public-ui/kolibri/issues/5952 */\n }\n @media print {\n :not(.collapsible--open) .collapsible__wrapper-animation {\n display: none;\n }\n }\n .collapsible__wrapper {\n /* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */\n transform: translateZ(0);\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.3s;\n }\n .collapsible__wrapper-animation {\n opacity: 0;\n transform: scaleY(0);\n transform-origin: top;\n min-height: 0;\n /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n visibility: hidden;\n transition: transform 0.3s, opacity 0.3s, visibility 0.3s;\n }\n .collapsible--open .collapsible__wrapper {\n grid-template-rows: 1fr;\n }\n .collapsible--open .collapsible__wrapper-animation {\n opacity: 1;\n transform: scaleY(1);\n visibility: visible;\n }\n .collapsible {\n /*\n * Inside a button, the caption text is always centered.\n * So we have to align the text to the left.\n */\n }\n .collapsible__heading-button button .kol-span {\n align-items: flex-start;\n }\n .collapsible--open:focus-within {\n position: relative;\n z-index: 100;\n }\n}\n@layer kol-component {\n .kol-details__heading-button {\n display: flex;\n }\n .kol-details__heading-button .kol-button {\n min-height: auto;\n }\n .kol-details__heading-button .kol-button .kol-span__label {\n border-bottom-color: grey;\n border-bottom-style: solid;\n }\n .collapsible--open .kol-details__heading-button .kol-icon::part(icon) {\n transform: rotate(90deg);\n }\n}";
|
|
20378
20380
|
|
|
20379
20381
|
class KolDetails {
|
|
20380
20382
|
constructor(hostRef) {
|
|
@@ -20403,9 +20405,9 @@ class KolDetails {
|
|
|
20403
20405
|
_on: {},
|
|
20404
20406
|
};
|
|
20405
20407
|
}
|
|
20406
|
-
async
|
|
20408
|
+
async focus() {
|
|
20407
20409
|
var _a;
|
|
20408
|
-
|
|
20410
|
+
return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
20409
20411
|
}
|
|
20410
20412
|
render() {
|
|
20411
20413
|
const { _open, _label, _disabled, _level } = this.state;
|
|
@@ -20430,7 +20432,7 @@ class KolDetails {
|
|
|
20430
20432
|
animationClass: `${rootClass}__wrapper-animation`,
|
|
20431
20433
|
},
|
|
20432
20434
|
};
|
|
20433
|
-
return (hAsync(KolCollapsibleFc, Object.assign({ key: '
|
|
20435
|
+
return (hAsync(KolCollapsibleFc, Object.assign({ key: '07bc611d260c54c24d5d46161db69ad2d77a85d0' }, props), hAsync("slot", { key: '1a188f043828b0a2cfad16b4e034606961a8722e' })));
|
|
20434
20436
|
}
|
|
20435
20437
|
validateDisabled(value) {
|
|
20436
20438
|
validateDisabled(this, value);
|
|
@@ -20465,7 +20467,7 @@ class KolDetails {
|
|
|
20465
20467
|
"_open": ["validateOpen"]
|
|
20466
20468
|
}; }
|
|
20467
20469
|
static get style() { return {
|
|
20468
|
-
default: defaultStyleCss$
|
|
20470
|
+
default: defaultStyleCss$D
|
|
20469
20471
|
}; }
|
|
20470
20472
|
static get cmpMeta() { return {
|
|
20471
20473
|
"$flags$": 297,
|
|
@@ -20477,7 +20479,7 @@ class KolDetails {
|
|
|
20477
20479
|
"_on": [16],
|
|
20478
20480
|
"_open": [1540],
|
|
20479
20481
|
"state": [32],
|
|
20480
|
-
"
|
|
20482
|
+
"focus": [64]
|
|
20481
20483
|
},
|
|
20482
20484
|
"$listeners$": undefined,
|
|
20483
20485
|
"$lazyBundleId$": "-",
|
|
@@ -20485,6 +20487,53 @@ class KolDetails {
|
|
|
20485
20487
|
}; }
|
|
20486
20488
|
}
|
|
20487
20489
|
|
|
20490
|
+
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}";
|
|
20491
|
+
|
|
20492
|
+
class KolDialog {
|
|
20493
|
+
constructor(hostRef) {
|
|
20494
|
+
registerInstance(this, hostRef);
|
|
20495
|
+
this.catchRef = (ref) => {
|
|
20496
|
+
this.dialogRef = ref;
|
|
20497
|
+
};
|
|
20498
|
+
this._width = '100%';
|
|
20499
|
+
this._variant = 'blank';
|
|
20500
|
+
}
|
|
20501
|
+
async openModal() {
|
|
20502
|
+
var _a;
|
|
20503
|
+
await ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.openModal());
|
|
20504
|
+
}
|
|
20505
|
+
async closeModal() {
|
|
20506
|
+
var _a;
|
|
20507
|
+
await ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.closeModal());
|
|
20508
|
+
}
|
|
20509
|
+
render() {
|
|
20510
|
+
return (hAsync(KolDialogWcTag, { key: '24744fff4cfebb9ef188926e5390064ce7ec6931', ref: this.catchRef, _label: this._label, _on: this._on, _variant: this._variant, _width: this._width }, hAsync("slot", { key: 'c8844dc7d6b9d16567ce400ae10f992018c6849d' })));
|
|
20511
|
+
}
|
|
20512
|
+
static get style() { return {
|
|
20513
|
+
default: defaultStyleCss$C
|
|
20514
|
+
}; }
|
|
20515
|
+
static get cmpMeta() { return {
|
|
20516
|
+
"$flags$": 297,
|
|
20517
|
+
"$tagName$": "kol-dialog",
|
|
20518
|
+
"$members$": {
|
|
20519
|
+
"_label": [1],
|
|
20520
|
+
"_on": [16],
|
|
20521
|
+
"_width": [1],
|
|
20522
|
+
"_variant": [1],
|
|
20523
|
+
"openModal": [64],
|
|
20524
|
+
"closeModal": [64]
|
|
20525
|
+
},
|
|
20526
|
+
"$listeners$": undefined,
|
|
20527
|
+
"$lazyBundleId$": "-",
|
|
20528
|
+
"$attrsToReflect$": []
|
|
20529
|
+
}; }
|
|
20530
|
+
}
|
|
20531
|
+
|
|
20532
|
+
const DialogVariantPropTypeOptions = ['blank', 'card'];
|
|
20533
|
+
const validateDialogVariant = (component, value) => {
|
|
20534
|
+
watchValidator(component, '_variant', (value) => typeof value === 'string' && DialogVariantPropTypeOptions.includes(value), new Set(DialogVariantPropTypeOptions), value);
|
|
20535
|
+
};
|
|
20536
|
+
|
|
20488
20537
|
let openTooltips = 0;
|
|
20489
20538
|
const tooltipOpened = () => {
|
|
20490
20539
|
openTooltips++;
|
|
@@ -20498,6 +20547,102 @@ const handleCancelOverlay = (event) => {
|
|
|
20498
20547
|
}
|
|
20499
20548
|
};
|
|
20500
20549
|
|
|
20550
|
+
class KolDialogWc {
|
|
20551
|
+
constructor(hostRef) {
|
|
20552
|
+
registerInstance(this, hostRef);
|
|
20553
|
+
this.on = {
|
|
20554
|
+
onClose: async () => {
|
|
20555
|
+
await this.closeModal();
|
|
20556
|
+
},
|
|
20557
|
+
};
|
|
20558
|
+
this._width = '100%';
|
|
20559
|
+
this._variant = 'blank';
|
|
20560
|
+
this.state = {
|
|
20561
|
+
_label: '',
|
|
20562
|
+
_width: '100%',
|
|
20563
|
+
};
|
|
20564
|
+
}
|
|
20565
|
+
disconnectedCallback() {
|
|
20566
|
+
void this.closeModal();
|
|
20567
|
+
}
|
|
20568
|
+
handleNativeCloseEvent() {
|
|
20569
|
+
var _a, _b;
|
|
20570
|
+
(_b = (_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
20571
|
+
if (this.host) {
|
|
20572
|
+
dispatchDomEvent(this.host, KolEvent.close);
|
|
20573
|
+
}
|
|
20574
|
+
}
|
|
20575
|
+
async openModal() {
|
|
20576
|
+
var _a;
|
|
20577
|
+
(_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.showModal();
|
|
20578
|
+
}
|
|
20579
|
+
async closeModal() {
|
|
20580
|
+
var _a, _b;
|
|
20581
|
+
(_b = (_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
20582
|
+
}
|
|
20583
|
+
render() {
|
|
20584
|
+
return (hAsync("dialog", { key: '288b2934310b2d34013f55e0f4636263e2be22aa', "aria-label": this.state._label, class: clsx('kol-dialog', 'kol-modal', {
|
|
20585
|
+
'kol-dialog__blank': this.state._variant === 'blank',
|
|
20586
|
+
'kol-dialog__card': this.state._variant === 'card',
|
|
20587
|
+
'kol-modal__blank': this.state._variant === 'blank',
|
|
20588
|
+
'kol-modal__card': this.state._variant === 'card',
|
|
20589
|
+
}), onCancel: handleCancelOverlay, onClose: this.handleNativeCloseEvent.bind(this), ref: (el) => {
|
|
20590
|
+
this.refDialog = el;
|
|
20591
|
+
}, style: {
|
|
20592
|
+
width: this.state._width,
|
|
20593
|
+
} }, 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' })))));
|
|
20594
|
+
}
|
|
20595
|
+
validateLabel(value) {
|
|
20596
|
+
validateLabel(this, value, {
|
|
20597
|
+
required: true,
|
|
20598
|
+
});
|
|
20599
|
+
}
|
|
20600
|
+
validateOn(value) {
|
|
20601
|
+
if (typeof value === 'object' && value !== null) {
|
|
20602
|
+
const callbacks = {};
|
|
20603
|
+
if (typeof value.onClose === 'function' || value.onClose === true) {
|
|
20604
|
+
callbacks.onClose = value.onClose;
|
|
20605
|
+
}
|
|
20606
|
+
setState(this, '_on', callbacks);
|
|
20607
|
+
}
|
|
20608
|
+
}
|
|
20609
|
+
validateWidth(value) {
|
|
20610
|
+
validateWidth(this, value);
|
|
20611
|
+
}
|
|
20612
|
+
validateVariant(value) {
|
|
20613
|
+
validateDialogVariant(this, value);
|
|
20614
|
+
}
|
|
20615
|
+
componentWillLoad() {
|
|
20616
|
+
this.validateLabel(this._label);
|
|
20617
|
+
this.validateOn(this._on);
|
|
20618
|
+
this.validateWidth(this._width);
|
|
20619
|
+
this.validateVariant(this._variant);
|
|
20620
|
+
}
|
|
20621
|
+
get host() { return getElement(this); }
|
|
20622
|
+
static get watchers() { return {
|
|
20623
|
+
"_label": ["validateLabel"],
|
|
20624
|
+
"_on": ["validateOn"],
|
|
20625
|
+
"_width": ["validateWidth"],
|
|
20626
|
+
"_variant": ["validateVariant"]
|
|
20627
|
+
}; }
|
|
20628
|
+
static get cmpMeta() { return {
|
|
20629
|
+
"$flags$": 260,
|
|
20630
|
+
"$tagName$": "kol-dialog-wc",
|
|
20631
|
+
"$members$": {
|
|
20632
|
+
"_label": [1],
|
|
20633
|
+
"_on": [16],
|
|
20634
|
+
"_width": [1],
|
|
20635
|
+
"_variant": [1],
|
|
20636
|
+
"state": [32],
|
|
20637
|
+
"openModal": [64],
|
|
20638
|
+
"closeModal": [64]
|
|
20639
|
+
},
|
|
20640
|
+
"$listeners$": undefined,
|
|
20641
|
+
"$lazyBundleId$": "-",
|
|
20642
|
+
"$attrsToReflect$": []
|
|
20643
|
+
}; }
|
|
20644
|
+
}
|
|
20645
|
+
|
|
20501
20646
|
const defaultStyleCss$B = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-card {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: grid;\n height: 100%;\n overflow: visible;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-template-areas: \"header close\" \"content content\";\n grid-template-columns: 1fr min-content;\n grid-template-rows: min-content 1fr;\n }\n .kol-card__header {\n align-self: start;\n grid-area: header;\n }\n .kol-card__content {\n align-self: stretch;\n grid-area: content;\n }\n .kol-card__close-button {\n grid-area: close;\n }\n .kol-drawer__dialog {\n padding: 0;\n border: none;\n }\n .kol-drawer__wrapper {\n position: fixed;\n overflow: auto;\n }\n .kol-drawer__wrapper--left, .kol-drawer__wrapper--right {\n top: 0;\n max-width: 100vw;\n height: 100vh;\n }\n .kol-drawer__wrapper--left .kol-drawer__content, .kol-drawer__wrapper--right .kol-drawer__content {\n height: 100%;\n }\n .kol-drawer__wrapper--left {\n left: 0;\n }\n .kol-drawer__wrapper--right {\n right: 0;\n }\n .kol-drawer__wrapper--bottom, .kol-drawer__wrapper--top {\n left: 0;\n width: 100vw;\n max-height: 100vh;\n }\n .kol-drawer__wrapper--bottom .kol-drawer__content, .kol-drawer__wrapper--top .kol-drawer__content {\n width: 100%;\n }\n .kol-drawer__wrapper--bottom {\n bottom: 0;\n }\n .kol-drawer__wrapper--top {\n top: 0;\n }\n .kol-drawer__content {\n position: relative;\n }\n}";
|
|
20502
20647
|
|
|
20503
20648
|
class KolDrawer {
|
|
@@ -20544,7 +20689,7 @@ class KolDrawer {
|
|
|
20544
20689
|
} }, hAsync("div", { class: "kol-drawer__content" }, hAsync("slot", null))));
|
|
20545
20690
|
}
|
|
20546
20691
|
render() {
|
|
20547
|
-
return (hAsync(Host, { key: '
|
|
20692
|
+
return (hAsync(Host, { key: 'cfa97c9b25f63360c569b66dae0d10fe881e7964', class: "kol-drawer" }, hAsync("dialog", { key: 'a4baf31338ad1b3f95a51ab35ac260f23b0e891e', "aria-label": this.state._label, class: "kol-drawer__dialog", onCancel: handleCancelOverlay, ref: this.getRef }, this.renderDialogContent())));
|
|
20548
20693
|
}
|
|
20549
20694
|
validateLabel(value) {
|
|
20550
20695
|
validateLabel(this, value, {
|
|
@@ -20697,7 +20842,7 @@ class KolForm {
|
|
|
20697
20842
|
}
|
|
20698
20843
|
render() {
|
|
20699
20844
|
const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
|
|
20700
|
-
return (hAsync(Host, { key: '
|
|
20845
|
+
return (hAsync(Host, { key: '24abdec4e796efe805b3e29fa9f2e4d0189e64d4' }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
|
|
20701
20846
|
}
|
|
20702
20847
|
scrollToErrorList() {
|
|
20703
20848
|
var _a;
|
|
@@ -20787,7 +20932,7 @@ class KolHeading {
|
|
|
20787
20932
|
}
|
|
20788
20933
|
render() {
|
|
20789
20934
|
const { _secondaryHeadline, _label, _level } = this.state;
|
|
20790
|
-
return (hAsync(KolHeadingFc, { key: '
|
|
20935
|
+
return (hAsync(KolHeadingFc, { key: 'e0215bf6a8c6689b9661f08a0216f36bf6d2f332', secondaryHeadline: _secondaryHeadline, level: _level }, _label, hAsync("slot", { key: '1cd10de7df8a97779b57dd91247f6d3505e10f61', name: "expert", slot: "expert" })));
|
|
20791
20936
|
}
|
|
20792
20937
|
static get watchers() { return {
|
|
20793
20938
|
"_label": ["validateLabel"],
|
|
@@ -20832,12 +20977,12 @@ const bem = c();
|
|
|
20832
20977
|
const BEM_CLASS_ICON = bem('kol-icon');
|
|
20833
20978
|
const BEM_CLASS_ICON__ICON = bem('kol-icon', 'icon');
|
|
20834
20979
|
|
|
20835
|
-
const defaultStyleCss$y = "/* forward the rem function */\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=
|
|
20980
|
+
const defaultStyleCss$y = "/* forward the rem function */\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1766560528795\"); /* IE9*/\n src: url(\"kolicons.eot?t=1766560528795#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1766560528795\") format(\"woff2\"), url(\"kolicons.woff?t=1766560528795\") format(\"woff\"), url(\"kolicons.ttf?t=1766560528795\") format(\"truetype\"), url(\"kolicons.svg?t=1766560528795#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=\" kolicon-\"] {\n font-family: \"kolicons\" !important;\n font-size: 16px;\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-kolibri::before {\n content: \"\\ea10\";\n}\n\n.kolicon-link-external::before {\n content: \"\\ea11\";\n}\n\n.kolicon-link::before {\n content: \"\\ea12\";\n}\n\n.kolicon-minus::before {\n content: \"\\ea13\";\n}\n\n.kolicon-plus::before {\n content: \"\\ea14\";\n}\n\n.kolicon-settings::before {\n content: \"\\ea15\";\n}\n\n.kolicon-sort-asc::before {\n content: \"\\ea16\";\n}\n\n.kolicon-sort-desc::before {\n content: \"\\ea17\";\n}\n\n.kolicon-sort-neutral::before {\n content: \"\\ea18\";\n}\n\n.kolicon-version::before {\n content: \"\\ea19\";\n}\n\n@layer kol-component {\n /* :host implicitly inherits font-size, see below */\n :host {\n color: inherit;\n display: contents;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n}";
|
|
20836
20981
|
|
|
20837
20982
|
class KolIcon {
|
|
20838
20983
|
render() {
|
|
20839
20984
|
const hasAriaLabel = this.state._label.length > 0;
|
|
20840
|
-
return (hAsync(Host, { key: '
|
|
20985
|
+
return (hAsync(Host, { key: '0310e88acca66642d5a2f1b0783c4b51e7d57178', exportparts: "icon", class: BEM_CLASS_ICON }, hAsync("i", { key: 'defda52dda0896dfc3aa3271e34a679cad2d81de', "aria-hidden": hasAriaLabel ? undefined : 'true', "aria-label": hasAriaLabel ? this.state._label : undefined, class: clsx(BEM_CLASS_ICON__ICON, this.state._icons), part: "icon", role: hasAriaLabel ? 'img' : 'presentation' })));
|
|
20841
20986
|
}
|
|
20842
20987
|
constructor(hostRef) {
|
|
20843
20988
|
registerInstance(this, hostRef);
|
|
@@ -20914,7 +21059,7 @@ class KolImage {
|
|
|
20914
21059
|
this.validateSrcset(this._srcset);
|
|
20915
21060
|
}
|
|
20916
21061
|
render() {
|
|
20917
|
-
return (hAsync("img", { key: '
|
|
21062
|
+
return (hAsync("img", { key: 'c17e012e1bef61d097f2b64d9b22714ef02a793e', class: "kol-image", alt: this.state._alt, loading: this.state._loading, sizes: this.state._sizes, src: this.state._src, srcset: this.state._srcset }));
|
|
20918
21063
|
}
|
|
20919
21064
|
static get watchers() { return {
|
|
20920
21065
|
"_alt": ["validateAlt"],
|
|
@@ -21208,9 +21353,9 @@ class KolInputCheckbox {
|
|
|
21208
21353
|
async getValue() {
|
|
21209
21354
|
return this.getModelValue();
|
|
21210
21355
|
}
|
|
21211
|
-
async
|
|
21356
|
+
async focus() {
|
|
21212
21357
|
var _a;
|
|
21213
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
21358
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
21214
21359
|
}
|
|
21215
21360
|
getFormFieldProps() {
|
|
21216
21361
|
return {
|
|
@@ -21259,7 +21404,7 @@ class KolInputCheckbox {
|
|
|
21259
21404
|
return this.state._icons.unchecked;
|
|
21260
21405
|
}
|
|
21261
21406
|
render() {
|
|
21262
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
21407
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'ec5131cbe333e9c70beb3093e6049cd2a7b29ee3' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(FieldControlStateWrapper, Object.assign({ key: '9ca2d1404c837728bc0aa590ae41c9a4f2922286' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(CheckboxStateWrapper, Object.assign({ key: 'f8611e8d234ba85cacf861bb4ef328bfdff24b3f' }, this.getInputProps())))));
|
|
21263
21408
|
}
|
|
21264
21409
|
constructor(hostRef) {
|
|
21265
21410
|
registerInstance(this, hostRef);
|
|
@@ -21433,7 +21578,7 @@ class KolInputCheckbox {
|
|
|
21433
21578
|
"state": [32],
|
|
21434
21579
|
"inputHasFocus": [32],
|
|
21435
21580
|
"getValue": [64],
|
|
21436
|
-
"
|
|
21581
|
+
"focus": [64]
|
|
21437
21582
|
},
|
|
21438
21583
|
"$listeners$": undefined,
|
|
21439
21584
|
"$lazyBundleId$": "-",
|
|
@@ -21471,9 +21616,9 @@ class KolInputColor {
|
|
|
21471
21616
|
var _a;
|
|
21472
21617
|
return (_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.value;
|
|
21473
21618
|
}
|
|
21474
|
-
async
|
|
21619
|
+
async focus() {
|
|
21475
21620
|
var _a;
|
|
21476
|
-
(_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.focus();
|
|
21621
|
+
return Promise.resolve((_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.focus());
|
|
21477
21622
|
}
|
|
21478
21623
|
get hasSuggestions() {
|
|
21479
21624
|
return Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
@@ -21497,7 +21642,7 @@ class KolInputColor {
|
|
|
21497
21642
|
return Object.assign(Object.assign({ state: Object.assign(Object.assign({}, other), { _suggestions: [] }) }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus });
|
|
21498
21643
|
}
|
|
21499
21644
|
render() {
|
|
21500
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
21645
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'd7f090923ef2b8df82a290ee833f2df41827e0a5' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'fb34b66b8a3e2b738126404f243f3e8d8f60518d', state: this.state, class: "kol-input-color__inputs-wrapper" }, hAsync("div", { key: '411e03c780c12cb63d2a8a845d98246dc6e1d988', class: "kol-input-color__inputs-wrapper" }, hAsync(InputStateWrapper, Object.assign({ key: '36e1c82a36db19f6c9d099bfa59c9a700bc9e52a', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), hAsync(InputStateWrapper, Object.assign({ key: 'f78dc8e52058280fd86bc860ce5e5d6156fd2dc2', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
|
|
21501
21646
|
}
|
|
21502
21647
|
constructor(hostRef) {
|
|
21503
21648
|
registerInstance(this, hostRef);
|
|
@@ -21666,7 +21811,7 @@ class KolInputColor {
|
|
|
21666
21811
|
"state": [32],
|
|
21667
21812
|
"inputHasFocus": [32],
|
|
21668
21813
|
"getValue": [64],
|
|
21669
|
-
"
|
|
21814
|
+
"focus": [64]
|
|
21670
21815
|
},
|
|
21671
21816
|
"$listeners$": undefined,
|
|
21672
21817
|
"$lazyBundleId$": "-",
|
|
@@ -21830,9 +21975,9 @@ class KolInputDate {
|
|
|
21830
21975
|
var _a;
|
|
21831
21976
|
return this.inputRef && this.remapValue((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value);
|
|
21832
21977
|
}
|
|
21833
|
-
async
|
|
21978
|
+
async focus() {
|
|
21834
21979
|
var _a;
|
|
21835
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
21980
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
21836
21981
|
}
|
|
21837
21982
|
async reset() {
|
|
21838
21983
|
this.state = Object.assign(Object.assign({}, this.state), { _value: null });
|
|
@@ -21872,7 +22017,7 @@ class KolInputDate {
|
|
|
21872
22017
|
return Object.assign(Object.assign({ ref: this.catchRef, state: this.state }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onChange: this.onChange, onInput: this.onInput });
|
|
21873
22018
|
}
|
|
21874
22019
|
render() {
|
|
21875
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22020
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '59e86a706c43960542852d52a626bef671dffa23' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b54ca89fe36ea8ffd5bf34a8cffb4069cd2988e4', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'ac2aff3346ffe47c2737af4edba6a80d172135d5' }, this.getInputProps())))));
|
|
21876
22021
|
}
|
|
21877
22022
|
constructor(hostRef) {
|
|
21878
22023
|
registerInstance(this, hostRef);
|
|
@@ -22089,7 +22234,7 @@ class KolInputDate {
|
|
|
22089
22234
|
"state": [32],
|
|
22090
22235
|
"inputHasFocus": [32],
|
|
22091
22236
|
"getValue": [64],
|
|
22092
|
-
"
|
|
22237
|
+
"focus": [64],
|
|
22093
22238
|
"reset": [64]
|
|
22094
22239
|
},
|
|
22095
22240
|
"$listeners$": undefined,
|
|
@@ -22223,9 +22368,9 @@ class KolInputEmail {
|
|
|
22223
22368
|
var _a;
|
|
22224
22369
|
return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
|
|
22225
22370
|
}
|
|
22226
|
-
async
|
|
22371
|
+
async focus() {
|
|
22227
22372
|
var _a;
|
|
22228
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
22373
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
22229
22374
|
}
|
|
22230
22375
|
getFormFieldProps() {
|
|
22231
22376
|
return {
|
|
@@ -22249,7 +22394,7 @@ class KolInputEmail {
|
|
|
22249
22394
|
} });
|
|
22250
22395
|
}
|
|
22251
22396
|
render() {
|
|
22252
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22397
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'b928aefae94934a5228743ae822ae084a06020ae' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '1ac6b8e275457032564a4cbcd637832d1dbbd7d1', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '47435cb931d3da58fa1c84db183d04037c6fdb6b' }, this.getInputProps())))));
|
|
22253
22398
|
}
|
|
22254
22399
|
constructor(hostRef) {
|
|
22255
22400
|
registerInstance(this, hostRef);
|
|
@@ -22444,7 +22589,7 @@ class KolInputEmail {
|
|
|
22444
22589
|
"state": [32],
|
|
22445
22590
|
"inputHasFocus": [32],
|
|
22446
22591
|
"getValue": [64],
|
|
22447
|
-
"
|
|
22592
|
+
"focus": [64]
|
|
22448
22593
|
},
|
|
22449
22594
|
"$listeners$": undefined,
|
|
22450
22595
|
"$lazyBundleId$": "-",
|
|
@@ -22481,9 +22626,9 @@ class KolInputFile {
|
|
|
22481
22626
|
var _a;
|
|
22482
22627
|
return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.files;
|
|
22483
22628
|
}
|
|
22484
|
-
async
|
|
22629
|
+
async focus() {
|
|
22485
22630
|
var _a;
|
|
22486
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
22631
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
22487
22632
|
}
|
|
22488
22633
|
async reset() {
|
|
22489
22634
|
this.controller.setFormAssociatedValue('');
|
|
@@ -22511,7 +22656,7 @@ class KolInputFile {
|
|
|
22511
22656
|
} });
|
|
22512
22657
|
}
|
|
22513
22658
|
render() {
|
|
22514
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22659
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'a14988909e629c6489b2ce2f407dda7bae698bf3' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'ba6804552442038f26ce7d4addd67ef09a0b15fd', state: this.state }, hAsync("span", { key: 'bde71a76d0c08a6b4c6147f5668c0e2c15089081', class: clsx('kol-input-container__filename', { 'kol-input-container__filename--has-file': this.hasFileSelected }) }, this.filename), hAsync(InputStateWrapper, Object.assign({ key: '3abd09ca85cfdaee144eb7166eece0a71e8312d5' }, this.getInputProps())), hAsync(KolButtonWcTag, { key: '7736d06eb59743e25bfad68b90cf8d7cf48b85db', class: "kol-input-container__button", _label: this.translateDataBrowseText, _buttonVariant: "primary", _disabled: this._disabled }))));
|
|
22515
22660
|
}
|
|
22516
22661
|
constructor(hostRef) {
|
|
22517
22662
|
registerInstance(this, hostRef);
|
|
@@ -22698,7 +22843,7 @@ class KolInputFile {
|
|
|
22698
22843
|
"state": [32],
|
|
22699
22844
|
"inputHasFocus": [32],
|
|
22700
22845
|
"getValue": [64],
|
|
22701
|
-
"
|
|
22846
|
+
"focus": [64],
|
|
22702
22847
|
"reset": [64]
|
|
22703
22848
|
},
|
|
22704
22849
|
"$listeners$": undefined,
|
|
@@ -22760,9 +22905,9 @@ class KolInputNumber {
|
|
|
22760
22905
|
async getValue() {
|
|
22761
22906
|
return this.remapValue(this.state._value);
|
|
22762
22907
|
}
|
|
22763
|
-
async
|
|
22908
|
+
async focus() {
|
|
22764
22909
|
var _a;
|
|
22765
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
22910
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
22766
22911
|
}
|
|
22767
22912
|
setInitialValueType(value) {
|
|
22768
22913
|
if (this.controller.isNumberString(value)) {
|
|
@@ -22824,7 +22969,7 @@ class KolInputNumber {
|
|
|
22824
22969
|
}, disabled: this._disabled || this._readOnly }, hAsync(KolIconFc, { icons: "kolicon-minus", label: "" })));
|
|
22825
22970
|
}
|
|
22826
22971
|
render() {
|
|
22827
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22972
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '07aa7fdbf82349d7f5a44a5996520b1c24e49731' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '0fed1f5634f212f5909eb9296b180b7ed4ca5014', state: this.state, startAdornment: this.getStepDownButton(), endAdornment: this.getStepUpButton() }, hAsync(InputStateWrapper, Object.assign({ key: '829301460ae419b52ca49329154788966a09d49d' }, this.getInputProps())))));
|
|
22828
22973
|
}
|
|
22829
22974
|
constructor(hostRef) {
|
|
22830
22975
|
registerInstance(this, hostRef);
|
|
@@ -23020,7 +23165,7 @@ class KolInputNumber {
|
|
|
23020
23165
|
"_initialValueType": [32],
|
|
23021
23166
|
"inputHasFocus": [32],
|
|
23022
23167
|
"getValue": [64],
|
|
23023
|
-
"
|
|
23168
|
+
"focus": [64]
|
|
23024
23169
|
},
|
|
23025
23170
|
"$listeners$": undefined,
|
|
23026
23171
|
"$lazyBundleId$": "-",
|
|
@@ -23035,9 +23180,9 @@ class KolInputPassword {
|
|
|
23035
23180
|
var _a;
|
|
23036
23181
|
return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
|
|
23037
23182
|
}
|
|
23038
|
-
async
|
|
23183
|
+
async focus() {
|
|
23039
23184
|
var _a;
|
|
23040
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23185
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
23041
23186
|
}
|
|
23042
23187
|
getFormFieldProps() {
|
|
23043
23188
|
return {
|
|
@@ -23071,7 +23216,7 @@ class KolInputPassword {
|
|
|
23071
23216
|
}, icon: `${this._passwordVisible ? 'kolicon-eye-closed' : 'kolicon-eye'}`, disabled: this._disabled }));
|
|
23072
23217
|
}
|
|
23073
23218
|
render() {
|
|
23074
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23219
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'd6361d33d0044122bb523d59e9f40ab85c189586' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'a814d107185bbd10e0c1a877efbeb0099479e532', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(InputStateWrapper, Object.assign({ key: '446355c1043fd63b01502ec193a65c5087ccd061' }, this.getInputProps())))));
|
|
23075
23220
|
}
|
|
23076
23221
|
constructor(hostRef) {
|
|
23077
23222
|
registerInstance(this, hostRef);
|
|
@@ -23268,7 +23413,7 @@ class KolInputPassword {
|
|
|
23268
23413
|
"_passwordVisible": [32],
|
|
23269
23414
|
"inputHasFocus": [32],
|
|
23270
23415
|
"getValue": [64],
|
|
23271
|
-
"
|
|
23416
|
+
"focus": [64]
|
|
23272
23417
|
},
|
|
23273
23418
|
"$listeners$": undefined,
|
|
23274
23419
|
"$lazyBundleId$": "-",
|
|
@@ -23320,9 +23465,9 @@ class KolInputRadio {
|
|
|
23320
23465
|
async getValue() {
|
|
23321
23466
|
return this._value;
|
|
23322
23467
|
}
|
|
23323
|
-
async
|
|
23468
|
+
async focus() {
|
|
23324
23469
|
var _a;
|
|
23325
|
-
(_a = this.getFocusableInput()) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23470
|
+
return Promise.resolve((_a = this.getFocusableInput()) === null || _a === void 0 ? void 0 : _a.focus());
|
|
23326
23471
|
}
|
|
23327
23472
|
getFocusableInput() {
|
|
23328
23473
|
const options = this.state._options;
|
|
@@ -23359,7 +23504,7 @@ class KolInputRadio {
|
|
|
23359
23504
|
};
|
|
23360
23505
|
}
|
|
23361
23506
|
render() {
|
|
23362
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23507
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '92d8248e7753a62c69731e9df04859569cdced72' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
|
|
23363
23508
|
}
|
|
23364
23509
|
calculateDisabled(option) {
|
|
23365
23510
|
return Boolean(this.state._disabled) || Boolean(option.disabled);
|
|
@@ -23556,7 +23701,7 @@ class KolInputRadio {
|
|
|
23556
23701
|
"state": [32],
|
|
23557
23702
|
"inputHasFocus": [32],
|
|
23558
23703
|
"getValue": [64],
|
|
23559
|
-
"
|
|
23704
|
+
"focus": [64]
|
|
23560
23705
|
},
|
|
23561
23706
|
"$listeners$": undefined,
|
|
23562
23707
|
"$lazyBundleId$": "-",
|
|
@@ -23603,9 +23748,9 @@ class InputRangeController extends InputIconController {
|
|
|
23603
23748
|
const defaultStyleCss$o = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-input-range__inputs-wrapper {\n display: flex;\n flex-grow: 1;\n flex-direction: row;\n align-items: center;\n }\n .kol-input-range__input--number {\n width: var(--kolibri-input-range--input-number--width);\n }\n .kol-input-range__input--range {\n background-color: #d3d3d3;\n display: inline-block;\n /* Design-Hack - related with flex-grow */\n width: 0;\n height: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n padding: 0;\n flex-grow: 1;\n line-height: 1.5;\n appearance: none;\n border: 1px solid #000;\n }\n .kol-input-range__input:not(:disabled).kol-input-range__input--range::-webkit-slider-thumb {\n cursor: pointer;\n }\n .kol-input-range__input--range::-webkit-slider-thumb {\n background-color: #000;\n border-radius: 20px;\n width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n -webkit-appearance: none;\n }\n @media (prefers-contrast: more) or (forced-colors: active) {\n .kol-input-range__input--range::-webkit-slider-thumb {\n outline: 1px solid currentColor;\n }\n }\n .kol-input-range__input:not(:disabled).kol-input-range__input--range::-moz-range-thumb {\n cursor: pointer;\n }\n .kol-input-range__input--range::-moz-range-thumb {\n background-color: #000;\n border-radius: 20px;\n width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n -moz-appearance: none;\n }\n}";
|
|
23604
23749
|
|
|
23605
23750
|
class KolInputRange {
|
|
23606
|
-
async
|
|
23751
|
+
async focus() {
|
|
23607
23752
|
var _a;
|
|
23608
|
-
(_a = this.refInputNumber) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23753
|
+
return Promise.resolve((_a = this.refInputNumber) === null || _a === void 0 ? void 0 : _a.focus());
|
|
23609
23754
|
}
|
|
23610
23755
|
getSanitizedFloatValue(value) {
|
|
23611
23756
|
const floatValue = parseFloat(value);
|
|
@@ -23675,7 +23820,7 @@ class KolInputRange {
|
|
|
23675
23820
|
const inputsWrapperStyle = {
|
|
23676
23821
|
'--kolibri-input-range--input-number--width': `calc(${String(this.state._max).length}ch + 2em)`,
|
|
23677
23822
|
};
|
|
23678
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23823
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '128521202cad30daac6a5e334513aad511029f3b' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '98d1c89be7699bb28677a790637886806715d8e0', state: this.state }, hAsync("div", { key: '9627b928c7ee9e73ce5f480497ad17c7a033b62c', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, hAsync(InputStateWrapper, Object.assign({ key: 'c36646209ed76278516782cb8ecd3548cb3c37e6', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), hAsync(InputStateWrapper, Object.assign({ key: 'ef934123d89354c534fca7af38ad10219cc82ef6', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && hAsync(SuggestionsFc, { key: '3a2b0903e406bcc81271762351fc2464067fdc0a', id: this.state._id, suggestions: this.state._suggestions }))));
|
|
23679
23824
|
}
|
|
23680
23825
|
constructor(hostRef) {
|
|
23681
23826
|
registerInstance(this, hostRef);
|
|
@@ -23860,7 +24005,7 @@ class KolInputRange {
|
|
|
23860
24005
|
"state": [32],
|
|
23861
24006
|
"_initialValueType": [32],
|
|
23862
24007
|
"inputHasFocus": [32],
|
|
23863
|
-
"
|
|
24008
|
+
"focus": [64],
|
|
23864
24009
|
"getValue": [64]
|
|
23865
24010
|
},
|
|
23866
24011
|
"$listeners$": undefined,
|
|
@@ -23876,9 +24021,9 @@ class KolInputText {
|
|
|
23876
24021
|
var _a;
|
|
23877
24022
|
return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
|
|
23878
24023
|
}
|
|
23879
|
-
async
|
|
24024
|
+
async focus() {
|
|
23880
24025
|
var _a;
|
|
23881
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
24026
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
23882
24027
|
}
|
|
23883
24028
|
async selectionStart() {
|
|
23884
24029
|
var _a;
|
|
@@ -23921,7 +24066,7 @@ class KolInputText {
|
|
|
23921
24066
|
return Object.assign(Object.assign({ ref: this.catchRef, state: this.state, ariaDescribedBy }, this.controller.onFacade), { onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown });
|
|
23922
24067
|
}
|
|
23923
24068
|
render() {
|
|
23924
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
24069
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'ec2cfd8fbf4c25e0c67c2a40dac12689abf21ebc' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '4dbf08a6efd9e6aeba414911e28eb542f1a9f931', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'e72fa71c0713918915a4c99ff36624c413dc2709' }, this.getInputProps())))));
|
|
23925
24070
|
}
|
|
23926
24071
|
constructor(hostRef) {
|
|
23927
24072
|
registerInstance(this, hostRef);
|
|
@@ -24141,7 +24286,7 @@ class KolInputText {
|
|
|
24141
24286
|
"state": [32],
|
|
24142
24287
|
"inputHasFocus": [32],
|
|
24143
24288
|
"getValue": [64],
|
|
24144
|
-
"
|
|
24289
|
+
"focus": [64],
|
|
24145
24290
|
"selectionStart": [64],
|
|
24146
24291
|
"selectioconEnd": [64],
|
|
24147
24292
|
"setSelectionRange": [64],
|
|
@@ -24186,7 +24331,7 @@ class KolKolibri {
|
|
|
24186
24331
|
}
|
|
24187
24332
|
render() {
|
|
24188
24333
|
const fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
|
|
24189
|
-
return (hAsync("svg", { key: '
|
|
24334
|
+
return (hAsync("svg", { key: '4c7a91b347f1030b6243bcd73fe80f18ea4870d9', class: "kol-kolibri", role: "img", "aria-label": this.translateKolibriLogo, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", fill: fillColor }, hAsync("path", { key: 'acfbbaa7bac5f630eabf483f3072c293d23ced9c', d: "M353 322L213 304V434L353 322Z" }), hAsync("path", { key: '950473ab86c2b6101bef184b6388a0c9a313fbb3', d: "M209 564V304L149 434L209 564Z" }), hAsync("path", { key: '113e568b1cbf311a9f1c656526d7712c6a0dc129', d: "M357 316L417 250L361 210L275 244L357 316Z" }), hAsync("path", { key: '23b033e7e9884099469fea1ca2fef1af56a2ea29', d: "M329 218L237 92L250 222L272 241L329 218Z" }), hAsync("path", { key: '61c8946c0a73d39039b3008f29a9f1750ed90af2', d: "M353 318L35 36L213 300L353 318Z" }), hAsync("path", { key: '8c76c669b7edbfdada18a00e82c8760c3eb55987', d: "M391 286L565 272L421 252L391 286Z" }), this.state._labeled === true && (hAsync("text", { key: '01f6d92e065a1b17072de2438671cdd208a416f2', class: "kol-kolibri__text", x: "250", y: "525", fill: fillColor }, "KoliBri"))));
|
|
24190
24335
|
}
|
|
24191
24336
|
validateColor(value) {
|
|
24192
24337
|
validateColor(this, value, {
|
|
@@ -24239,12 +24384,12 @@ class KolLink {
|
|
|
24239
24384
|
this._inline = true;
|
|
24240
24385
|
this._tooltipAlign = 'right';
|
|
24241
24386
|
}
|
|
24242
|
-
async
|
|
24387
|
+
async focus() {
|
|
24243
24388
|
var _a;
|
|
24244
|
-
|
|
24389
|
+
return Promise.resolve((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
24245
24390
|
}
|
|
24246
24391
|
render() {
|
|
24247
|
-
return (hAsync(KolLinkWcTag, { key: '
|
|
24392
|
+
return (hAsync(KolLinkWcTag, { key: '5e0f4af8177fdafc0ba16a394edc95f5d6893700', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _inline: this._inline, _label: this._label, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: 'c8d72e1786756ae591534397e749430e1c45d875', name: "expert", slot: "expert" })));
|
|
24248
24393
|
}
|
|
24249
24394
|
static get style() { return {
|
|
24250
24395
|
default: defaultStyleCss$l
|
|
@@ -24270,7 +24415,7 @@ class KolLink {
|
|
|
24270
24415
|
"_shortKey": [1, "_short-key"],
|
|
24271
24416
|
"_target": [1],
|
|
24272
24417
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
24273
|
-
"
|
|
24418
|
+
"focus": [64]
|
|
24274
24419
|
},
|
|
24275
24420
|
"$listeners$": undefined,
|
|
24276
24421
|
"$lazyBundleId$": "-",
|
|
@@ -24291,12 +24436,12 @@ class KolLinkButton {
|
|
|
24291
24436
|
this._tooltipAlign = 'right';
|
|
24292
24437
|
this._variant = 'normal';
|
|
24293
24438
|
}
|
|
24294
|
-
async
|
|
24439
|
+
async focus() {
|
|
24295
24440
|
var _a;
|
|
24296
|
-
|
|
24441
|
+
return Promise.resolve((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
24297
24442
|
}
|
|
24298
24443
|
render() {
|
|
24299
|
-
return (hAsync(KolLinkWcTag, { key: '
|
|
24444
|
+
return (hAsync(KolLinkWcTag, { key: 'a9d694a90a5814edc15412794c3af252fdbc7665', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign, _buttonVariant: this._variant }, hAsync("slot", { key: 'fbbcf6a131b99d68279875ee92e8f1a5273270c9', name: "expert", slot: "expert" })));
|
|
24300
24445
|
}
|
|
24301
24446
|
static get style() { return {
|
|
24302
24447
|
default: defaultStyleCss$k
|
|
@@ -24322,7 +24467,7 @@ class KolLinkButton {
|
|
|
24322
24467
|
"_target": [1],
|
|
24323
24468
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
24324
24469
|
"_variant": [1],
|
|
24325
|
-
"
|
|
24470
|
+
"focus": [64]
|
|
24326
24471
|
},
|
|
24327
24472
|
"$listeners$": undefined,
|
|
24328
24473
|
"$lazyBundleId$": "-",
|
|
@@ -24389,16 +24534,16 @@ class KolLinkWc {
|
|
|
24389
24534
|
_icons: {},
|
|
24390
24535
|
};
|
|
24391
24536
|
}
|
|
24392
|
-
async
|
|
24537
|
+
async focus() {
|
|
24393
24538
|
var _a;
|
|
24394
|
-
(_a = this.anchorRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
24539
|
+
return Promise.resolve((_a = this.anchorRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
24395
24540
|
}
|
|
24396
24541
|
render() {
|
|
24397
24542
|
var _a;
|
|
24398
24543
|
const { isExternal, tagAttrs } = this.getRenderValues();
|
|
24399
24544
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
24400
24545
|
const ariaDescription = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim();
|
|
24401
|
-
return (hAsync(Host, { key: '
|
|
24546
|
+
return (hAsync(Host, { key: '036d5449e5e5ba234434e744d8af66052329a192' }, hAsync("a", Object.assign({ key: 'b20d668b61b1f0c279f5cf37d434927c69478891', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": typeof this.state._ariaExpanded === 'boolean' ? String(this.state._ariaExpanded) : undefined, "aria-owns": this.state._ariaOwns, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
|
|
24402
24547
|
? `${this.state._label}${isExternal ? ` (${this.translateOpenLinkInTab})` : ''}`
|
|
24403
24548
|
: undefined, "aria-keyshortcuts": this.state._shortKey, class: clsx('kol-link', {
|
|
24404
24549
|
'kol-link--disabled': this.state._disabled === true,
|
|
@@ -24408,7 +24553,7 @@ class KolLinkWc {
|
|
|
24408
24553
|
'kol-link--inline': this.state._inline === true,
|
|
24409
24554
|
'kol-link--standalone': this.state._inline === false,
|
|
24410
24555
|
[this.state._customClass]: this.state._buttonVariant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
24411
|
-
}) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: '
|
|
24556
|
+
}) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: '90a4bc4ffd0a6b87c9097120d3539bc69bdda156', class: "kol-link__text", badgeText: this.state._accessKey || this.state._shortKey, icons: this.state._icons, hideLabel: this.state._hideLabel, label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: '1aca2a1ed6caf2a68f7f6260b328ec7b6c993794', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: 'c20d6e6b9e7d09c6ff48a059f9ec0388076c721e', class: "kol-link__icon", _label: this.state._hideLabel ? '' : this.translateOpenLinkInTab, _icons: 'kolicon-link-external', "aria-hidden": this.state._hideLabel }))), this.state._hideLabel === true && (hAsync(KolTooltipWcTag, { key: '5f5b325f8e61e71f666bf45e067b1a487a8e296e', "aria-hidden": "true", class: "kol-link__tooltip", ref: (ref) => (this.tooltipRef = ref), hidden: hasExpertSlot, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href }))));
|
|
24412
24557
|
}
|
|
24413
24558
|
validateAccessKey(value) {
|
|
24414
24559
|
validateAccessKey(this, value);
|
|
@@ -24559,7 +24704,7 @@ class KolLinkWc {
|
|
|
24559
24704
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
24560
24705
|
"_buttonVariant": [1, "_button-variant"],
|
|
24561
24706
|
"state": [32],
|
|
24562
|
-
"
|
|
24707
|
+
"focus": [64]
|
|
24563
24708
|
},
|
|
24564
24709
|
"$listeners$": undefined,
|
|
24565
24710
|
"$lazyBundleId$": "-",
|
|
@@ -24567,89 +24712,28 @@ class KolLinkWc {
|
|
|
24567
24712
|
}; }
|
|
24568
24713
|
}
|
|
24569
24714
|
|
|
24570
|
-
const
|
|
24571
|
-
const validateModalVariant = (component, value) => {
|
|
24572
|
-
watchValidator(component, '_variant', (value) => typeof value === 'string' && ModalVariantPropTypeOptions.includes(value), new Set(ModalVariantPropTypeOptions), value);
|
|
24573
|
-
};
|
|
24574
|
-
|
|
24575
|
-
const defaultStyleCss$j = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n.kol-card {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: grid;\n height: 100%;\n overflow: visible;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-template-areas: \"header close\" \"content content\";\n grid-template-columns: 1fr min-content;\n grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n align-self: start;\n grid-area: header;\n}\n.kol-card__content {\n align-self: stretch;\n grid-area: content;\n}\n.kol-card__close-button {\n grid-area: close;\n}\n\n@layer kol-component {\n .kol-modal {\n min-height: var(--a11y-min-size);\n padding: 0;\n border: 0;\n }\n .kol-modal::backdrop {\n background-color: rgba(0, 0, 0, 0.1);\n }\n .kol-modal__close-button {\n position: absolute;\n top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n z-index: 1;\n }\n}";
|
|
24715
|
+
const defaultStyleCss$j = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n.kol-card {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: grid;\n height: 100%;\n overflow: visible;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-template-areas: \"header close\" \"content content\";\n grid-template-columns: 1fr min-content;\n grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n align-self: start;\n grid-area: header;\n}\n.kol-card__content {\n align-self: stretch;\n grid-area: content;\n}\n.kol-card__close-button {\n grid-area: close;\n}\n\n@layer kol-component {\n .kol-dialog,\n .kol-modal {\n min-height: var(--a11y-min-size);\n padding: 0;\n border: 0;\n }\n .kol-dialog::backdrop,\n .kol-modal::backdrop {\n background-color: rgba(0, 0, 0, 0.1);\n }\n .kol-dialog__close-button,\n .kol-modal__close-button {\n position: absolute;\n top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n z-index: 1;\n }\n}";
|
|
24576
24716
|
|
|
24577
24717
|
class KolModal {
|
|
24578
24718
|
constructor(hostRef) {
|
|
24579
24719
|
registerInstance(this, hostRef);
|
|
24580
|
-
this.
|
|
24581
|
-
|
|
24582
|
-
await this.closeModal();
|
|
24583
|
-
},
|
|
24720
|
+
this.catchRef = (ref) => {
|
|
24721
|
+
this.dialogRef = ref;
|
|
24584
24722
|
};
|
|
24585
24723
|
this._width = '100%';
|
|
24586
24724
|
this._variant = 'blank';
|
|
24587
|
-
this.state = {
|
|
24588
|
-
_label: '',
|
|
24589
|
-
_width: '100%',
|
|
24590
|
-
};
|
|
24591
|
-
}
|
|
24592
|
-
disconnectedCallback() {
|
|
24593
|
-
void this.closeModal();
|
|
24594
|
-
}
|
|
24595
|
-
handleNativeCloseEvent() {
|
|
24596
|
-
var _a, _b;
|
|
24597
|
-
(_b = (_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
24598
|
-
if (this.host) {
|
|
24599
|
-
dispatchDomEvent(this.host, KolEvent.close);
|
|
24600
|
-
}
|
|
24601
24725
|
}
|
|
24602
24726
|
async openModal() {
|
|
24603
24727
|
var _a;
|
|
24604
|
-
(_a = this.
|
|
24728
|
+
await ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.openModal());
|
|
24605
24729
|
}
|
|
24606
24730
|
async closeModal() {
|
|
24607
|
-
var _a
|
|
24608
|
-
|
|
24731
|
+
var _a;
|
|
24732
|
+
await ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.closeModal());
|
|
24609
24733
|
}
|
|
24610
24734
|
render() {
|
|
24611
|
-
return (hAsync(
|
|
24612
|
-
'kol-modal__blank': this.state._variant === 'blank',
|
|
24613
|
-
'kol-modal__card': this.state._variant === 'card',
|
|
24614
|
-
}), onCancel: handleCancelOverlay, onClose: this.handleNativeCloseEvent.bind(this), ref: (el) => {
|
|
24615
|
-
this.refDialog = el;
|
|
24616
|
-
}, style: {
|
|
24617
|
-
width: this.state._width,
|
|
24618
|
-
} }, this.state._variant === 'blank' && hAsync("slot", { key: 'ed6110b0ddd43e0d544c3420965e93253b4c37db' }), this.state._variant === 'card' && (hAsync(KolCardWcTag, { key: '8d041e7c444343a6d5fe9fe7dffc08837bfbefb6', _label: this.state._label, _hasCloser: true, _on: this.on }, hAsync("slot", { key: '804e674e6376a29f6c2e357a70a5603f3ce777c1' })))));
|
|
24619
|
-
}
|
|
24620
|
-
validateLabel(value) {
|
|
24621
|
-
validateLabel(this, value, {
|
|
24622
|
-
required: true,
|
|
24623
|
-
});
|
|
24624
|
-
}
|
|
24625
|
-
validateOn(value) {
|
|
24626
|
-
if (typeof value === 'object' && value !== null) {
|
|
24627
|
-
const callbacks = {};
|
|
24628
|
-
if (typeof value.onClose === 'function' || value.onClose === true) {
|
|
24629
|
-
callbacks.onClose = value.onClose;
|
|
24630
|
-
}
|
|
24631
|
-
setState(this, '_on', callbacks);
|
|
24632
|
-
}
|
|
24633
|
-
}
|
|
24634
|
-
validateWidth(value) {
|
|
24635
|
-
validateWidth(this, value);
|
|
24636
|
-
}
|
|
24637
|
-
validateVariant(value) {
|
|
24638
|
-
validateModalVariant(this, value);
|
|
24735
|
+
return (hAsync(KolDialogWcTag, { key: '127b4504fccd6dd10ac9fc7fa198102f2e774ed5', ref: this.catchRef, _label: this._label, _on: this._on, _variant: this._variant, _width: this._width }, hAsync("slot", { key: '663f015f3f2f5b067539d9f7789289ca55e79225' })));
|
|
24639
24736
|
}
|
|
24640
|
-
componentWillLoad() {
|
|
24641
|
-
this.validateLabel(this._label);
|
|
24642
|
-
this.validateOn(this._on);
|
|
24643
|
-
this.validateWidth(this._width);
|
|
24644
|
-
this.validateVariant(this._variant);
|
|
24645
|
-
}
|
|
24646
|
-
get host() { return getElement(this); }
|
|
24647
|
-
static get watchers() { return {
|
|
24648
|
-
"_label": ["validateLabel"],
|
|
24649
|
-
"_on": ["validateOn"],
|
|
24650
|
-
"_width": ["validateWidth"],
|
|
24651
|
-
"_variant": ["validateVariant"]
|
|
24652
|
-
}; }
|
|
24653
24737
|
static get style() { return {
|
|
24654
24738
|
default: defaultStyleCss$j
|
|
24655
24739
|
}; }
|
|
@@ -24661,7 +24745,6 @@ class KolModal {
|
|
|
24661
24745
|
"_on": [16],
|
|
24662
24746
|
"_width": [1],
|
|
24663
24747
|
"_variant": [1],
|
|
24664
|
-
"state": [32],
|
|
24665
24748
|
"openModal": [64],
|
|
24666
24749
|
"closeModal": [64]
|
|
24667
24750
|
},
|
|
@@ -24799,9 +24882,9 @@ class KolNav {
|
|
|
24799
24882
|
}
|
|
24800
24883
|
render() {
|
|
24801
24884
|
const collapsible = this.state._collapsible === true;
|
|
24802
|
-
return (hAsync("div", { key: '
|
|
24885
|
+
return (hAsync("div", { key: 'c5d68a1e9267bf338e45d238b9f7661e44a2e378', class: clsx('kol-nav', {
|
|
24803
24886
|
'kol-nav--is-compact': this.state._hideLabel,
|
|
24804
|
-
}) }, hAsync("nav", { key: '
|
|
24887
|
+
}) }, hAsync("nav", { key: '17473413770976a81f562e3bd9f17ae11b654b2b', "aria-label": this.state._label, class: "kol-nav__navigation", id: this.navId }, hAsync(this.linkList, { key: '0623790874a038d9df84ffb301efea8559ee0a4c', collapsible: collapsible, deep: 0, links: this.state._links, id: this.listId })), this.state._hasCompactButton && (hAsync("div", { key: '6d54e0a8ac6af286ecc70abc98f076f481bab771', class: "kol-nav__compact" }, hAsync(KolButtonWcTag, { key: '6a37dc386c94294196ce9543a132c6d63406d7dd', class: "kol-nav__toggle-button", _ariaControls: this.navId, _ariaExpanded: !this.state._hideLabel, _icons: this.state._hideLabel ? 'kolicon-chevron-right' : 'kolicon-chevron-left', _hideLabel: true, _label: translate(this.state._hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
|
|
24805
24888
|
onClick: () => {
|
|
24806
24889
|
this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: !this.state._hideLabel });
|
|
24807
24890
|
},
|
|
@@ -24888,7 +24971,7 @@ class KolPagination {
|
|
|
24888
24971
|
this._tooltipAlign = 'top';
|
|
24889
24972
|
}
|
|
24890
24973
|
render() {
|
|
24891
|
-
return (hAsync(KolPaginationWcTag, { key: '
|
|
24974
|
+
return (hAsync(KolPaginationWcTag, { key: '1676901a636d4529bff96b9b85e49977f93beaad', _boundaryCount: this._boundaryCount, _label: this._label, _customClass: this._customClass, _on: this._on, _hasButtons: this._hasButtons, _page: this._page, _pageSize: this._pageSize, _pageSizeOptions: this._pageSizeOptions, _siblingCount: this._siblingCount, _tooltipAlign: this._tooltipAlign, _max: this._max }));
|
|
24892
24975
|
}
|
|
24893
24976
|
static get style() { return {
|
|
24894
24977
|
default: defaultStyleCss$h
|
|
@@ -27079,7 +27162,7 @@ class KolPopover {
|
|
|
27079
27162
|
}
|
|
27080
27163
|
}
|
|
27081
27164
|
render() {
|
|
27082
|
-
return (hAsync(Host, { key: '
|
|
27165
|
+
return (hAsync(Host, { key: '2f8909c00120d1d00d56f0a891bf137e968b482f', ref: this.catchHostAndTriggerElement, class: "kol-popover" }, hAsync("div", { key: 'd04819e7919b23042debe87158f189889c95e9ca', class: clsx('kol-popover__content', { 'kol-popover__content--visible': this.state._visible }), ref: this.catchPopoverElement, popover: "auto" }, hAsync("div", { key: 'e5a08ef22c2ee7c3dc8f1ca25a9b34a14f6076b9', class: clsx('kol-popover__arrow', `kol-popover__arrow--${this.state._align}`), ref: this.catchArrowElement }), hAsync("slot", { key: 'e7d525b678723312037a84233c3d810663c8d4cd' }))));
|
|
27083
27166
|
}
|
|
27084
27167
|
validateAlign(value) {
|
|
27085
27168
|
validateAlign(this, value);
|
|
@@ -27168,12 +27251,12 @@ let KolPopoverButton$1 = class KolPopoverButton {
|
|
|
27168
27251
|
var _a;
|
|
27169
27252
|
void ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.showPopover());
|
|
27170
27253
|
}
|
|
27171
|
-
async
|
|
27254
|
+
async focus() {
|
|
27172
27255
|
var _a;
|
|
27173
|
-
|
|
27256
|
+
return Promise.resolve((_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus());
|
|
27174
27257
|
}
|
|
27175
27258
|
render() {
|
|
27176
|
-
return (hAsync(KolPopoverButtonWcTag, { key: '
|
|
27259
|
+
return (hAsync(KolPopoverButtonWcTag, { key: '9021df3c6719174c99226ce648d03150abba6392', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _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, _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: 'fb61e468b6d69c8fd589c8defaa4a12bee3a3431', name: "expert", slot: "expert" }), hAsync("slot", { key: '3813536fa6533a919593c665473a9bc4d878fea4' })));
|
|
27177
27260
|
}
|
|
27178
27261
|
static get style() { return {
|
|
27179
27262
|
default: defaultStyleCss$g
|
|
@@ -27206,7 +27289,7 @@ let KolPopoverButton$1 = class KolPopoverButton {
|
|
|
27206
27289
|
"_variant": [1],
|
|
27207
27290
|
"hidePopover": [64],
|
|
27208
27291
|
"showPopover": [64],
|
|
27209
|
-
"
|
|
27292
|
+
"focus": [64]
|
|
27210
27293
|
},
|
|
27211
27294
|
"$listeners$": undefined,
|
|
27212
27295
|
"$lazyBundleId$": "-",
|
|
@@ -27239,9 +27322,9 @@ class KolPopoverButton {
|
|
|
27239
27322
|
var _a;
|
|
27240
27323
|
void ((_a = this.refPopover) === null || _a === void 0 ? void 0 : _a.showPopover());
|
|
27241
27324
|
}
|
|
27242
|
-
async
|
|
27325
|
+
async focus() {
|
|
27243
27326
|
var _a;
|
|
27244
|
-
|
|
27327
|
+
return Promise.resolve((_a = this.refButton) === null || _a === void 0 ? void 0 : _a.focus());
|
|
27245
27328
|
}
|
|
27246
27329
|
handleBeforeToggle(event) {
|
|
27247
27330
|
if (event.newState === 'closed') {
|
|
@@ -27297,11 +27380,11 @@ class KolPopoverButton {
|
|
|
27297
27380
|
(_c = this.cleanupAutoPositioning) === null || _c === void 0 ? void 0 : _c.call(this);
|
|
27298
27381
|
}
|
|
27299
27382
|
render() {
|
|
27300
|
-
return (hAsync("div", { key: '
|
|
27383
|
+
return (hAsync("div", { key: '07f745de533bf0d6c5a96cdf3abd801e50205d68', class: clsx('kol-popover-button', {
|
|
27301
27384
|
'kol-popover-button--open': this.popoverOpen,
|
|
27302
27385
|
'kol-popover-button--inline': this.state._inline === true,
|
|
27303
27386
|
'kol-popover-button--standalone': this.state._inline === false,
|
|
27304
|
-
}) }, hAsync(KolButtonWcTag, { key: '
|
|
27387
|
+
}) }, hAsync(KolButtonWcTag, { key: 'c51a2bf3c0cc3bdaefc9b2e5b4855b55b00c37d4', _accessKey: this._accessKey, "_aria-controls": "popover", _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _ariaHasPopup: 'dialog', _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, _role: this._role, _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), onClick: this.handleButtonClick.bind(this) }, hAsync("slot", { key: 'ce1dfd34a4d1c3d5af7e9c367ec58548c7201c84', name: "expert", slot: "expert" })), hAsync("div", { key: 'bd308bd33d872274e2dd7b55be4a46a6d966b246', ref: (element) => (this.refPopover = element), "data-testid": "popover-content", popover: "auto", id: "popover", class: "kol-popover-button__popover" }, hAsync("slot", { key: 'b030faf5058674e990bb6e6fb109ea9aeb23e413' }))));
|
|
27305
27388
|
}
|
|
27306
27389
|
validateInline(value) {
|
|
27307
27390
|
validateInline(this, value, {
|
|
@@ -27350,7 +27433,7 @@ class KolPopoverButton {
|
|
|
27350
27433
|
"popoverOpen": [32],
|
|
27351
27434
|
"hidePopover": [64],
|
|
27352
27435
|
"showPopover": [64],
|
|
27353
|
-
"
|
|
27436
|
+
"focus": [64]
|
|
27354
27437
|
},
|
|
27355
27438
|
"$listeners$": undefined,
|
|
27356
27439
|
"$lazyBundleId$": "-",
|
|
@@ -27394,10 +27477,10 @@ class KolProgress {
|
|
|
27394
27477
|
const isPercentage = this.state._unit === '%';
|
|
27395
27478
|
const liveProgressValue = isPercentage ? `${Math.round((this.state._liveValue / this.state._max) * 100)}` : this.state._liveValue;
|
|
27396
27479
|
const displayValue = isPercentage ? Math.round((this.state._value / this.state._max) * 100) : this.state._value;
|
|
27397
|
-
return (hAsync("div", { key: '
|
|
27480
|
+
return (hAsync("div", { key: 'fc7f5cdf4798854b0b41945c69f7feb3af75d50c', class: "kol-progress" }, hAsync("div", { key: '5ab61be685c82aceb117af33b6ad578dc12a3775', "aria-hidden": "true", class: {
|
|
27398
27481
|
'kol-progress__cycle': this.state._variant === 'cycle',
|
|
27399
27482
|
'kol-progress__bar': this.state._variant === 'bar',
|
|
27400
|
-
} }, this.state._variant === 'bar' && this.state._label && hAsync("div", { key: '
|
|
27483
|
+
} }, this.state._variant === 'bar' && this.state._label && hAsync("div", { key: 'f9917e700dc7d6c3b78f705b600b499529bbb2b7', class: "kol-progress__bar-label" }, this.state._label), createProgressSVG(this.state), this.state._variant === 'cycle' && (hAsync("div", { key: 'bb719478ebe2e5226e538bc8d07207d5c6cbc1c1', class: "kol-progress__cycle-text" }, this.state._label && hAsync("div", { key: '777582abb2582950a50e77e1d477dfe52a2abbec', class: "kol-progress__cycle-label" }, this.state._label), hAsync("div", { key: 'a5a04f2c22a3536ea8e95bc5d858f9b1ddb3b462', class: "kol-progress__cycle-value" }, `${displayValue} ${this.state._unit}`))), this.state._variant === 'bar' && (hAsync("div", { key: 'b89f4d178376b85b78f085e56aacc80df07f44b1', class: "kol-progress__bar-value", style: { width: `${`${(isPercentage ? 100 : this.state._max) + 1}`.length}ch` } }, displayValue)), this.state._variant === 'bar' && hAsync("div", { key: 'd35b3c9d91c8a78a994da485d80e8faf29cb23b5', class: "kol-progress__bar-unit" }, this.state._unit)), hAsync("progress", { key: 'b4d92e59e667619e4c6aadd8cbf0ae20f1d325ea', class: "visually-hidden", "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: '73d21662ce19a724bede515ff55ec4f62bcd6fa0', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, isPercentage ? `${liveProgressValue} %` : `${liveProgressValue} von ${this.state._max} ${this.state._unit}`)));
|
|
27401
27484
|
}
|
|
27402
27485
|
validateLabel(value) {
|
|
27403
27486
|
validateLabel(this, value);
|
|
@@ -27501,7 +27584,7 @@ class KolQuote {
|
|
|
27501
27584
|
}
|
|
27502
27585
|
render() {
|
|
27503
27586
|
const hasExpertSlot = showExpertSlot(this.state._quote);
|
|
27504
|
-
return (hAsync("figure", { key: '
|
|
27587
|
+
return (hAsync("figure", { key: '5a572554f7b6414184f1fc8d65d7ac53b75cc4d9', class: clsx('kol-quote', `kol-quote--${this.state._variant}`) }, this.state._variant === 'block' ? (hAsync("blockquote", { class: "kol-quote__blockquote", cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { class: "kol-quote__quote", cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))), typeof this.state._label === 'string' && this.state._label.length > 0 && (hAsync("figcaption", { key: '788f491a43a848e2c36902775577f562618fd3a9', class: "kol-quote__figcaption" }, hAsync("cite", { key: '2929cd673b3d0f545214c6a64f91d850fe54d896', class: "kol-quote__cite" }, hAsync(KolLinkTag, { key: '905b4a78d4d9d3cba9c85072edd8b1af148c2470', _href: this.state._href, _label: this.state._label, _target: "_blank" }))))));
|
|
27505
27588
|
}
|
|
27506
27589
|
static get watchers() { return {
|
|
27507
27590
|
"_label": ["validateLabel"],
|
|
@@ -27549,12 +27632,12 @@ class KolSelect {
|
|
|
27549
27632
|
var _a;
|
|
27550
27633
|
return (_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.getValue();
|
|
27551
27634
|
}
|
|
27552
|
-
async
|
|
27635
|
+
async focus() {
|
|
27553
27636
|
var _a;
|
|
27554
|
-
|
|
27637
|
+
return Promise.resolve((_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
27555
27638
|
}
|
|
27556
27639
|
render() {
|
|
27557
|
-
return (hAsync(Host, { key: '
|
|
27640
|
+
return (hAsync(Host, { key: 'a926c7058a8e4d63d2eac02fa4cfb0cc72613117', class: "kol-select" }, hAsync(KolSelectWcTag, { key: 'ecd27ebee8519a944361c7a0184f413f99d3c3ad', ref: this.catchRef, _accessKey: this._accessKey, _disabled: this._disabled, _hideLabel: this._hideLabel, _hint: this._hint, _icons: this._icons, _id: this._id, _label: this._label, _msg: this._msg, _multiple: this._multiple, _name: this._name, _on: this._on, _options: this._options, _required: this._required, _rows: this._rows, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _touched: this._touched, _value: this._value }, hAsync("slot", { key: 'eb93d88c9ed9dc97d1d14caac719a4760d7a6571', name: "expert", slot: "expert" }))));
|
|
27558
27641
|
}
|
|
27559
27642
|
static get style() { return {
|
|
27560
27643
|
default: defaultStyleCss$d
|
|
@@ -27585,7 +27668,7 @@ class KolSelect {
|
|
|
27585
27668
|
"_touched": [1540],
|
|
27586
27669
|
"_value": [1544],
|
|
27587
27670
|
"getValue": [64],
|
|
27588
|
-
"
|
|
27671
|
+
"focus": [64]
|
|
27589
27672
|
},
|
|
27590
27673
|
"$listeners$": undefined,
|
|
27591
27674
|
"$lazyBundleId$": "-",
|
|
@@ -27788,9 +27871,9 @@ class KolSelectWc {
|
|
|
27788
27871
|
return Array.isArray(this.state._value) && this.state._value.length > 0 ? this.state._value[0] : this.state._value;
|
|
27789
27872
|
}
|
|
27790
27873
|
}
|
|
27791
|
-
async
|
|
27874
|
+
async focus() {
|
|
27792
27875
|
var _a;
|
|
27793
|
-
(_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
27876
|
+
return Promise.resolve((_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
27794
27877
|
}
|
|
27795
27878
|
getFormFieldProps() {
|
|
27796
27879
|
return {
|
|
@@ -27813,11 +27896,11 @@ class KolSelectWc {
|
|
|
27813
27896
|
} });
|
|
27814
27897
|
}
|
|
27815
27898
|
render() {
|
|
27816
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
27899
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '0dae16977914072f768715d0724d104681423011' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'f861a46e09370d1d9b0988583f21f3e7cb0ac95c', state: this.state }, hAsync("form", { key: '4018d6786323c59fc03a1e1808f2c294f538fd03', onSubmit: (event) => {
|
|
27817
27900
|
event.preventDefault();
|
|
27818
27901
|
propagateSubmitEventToForm({
|
|
27819
27902
|
form: this.host});
|
|
27820
|
-
} }, hAsync("input", { key: '
|
|
27903
|
+
} }, hAsync("input", { key: '4cf5976ab6f9e5936df90835f38d90075b47e0c6', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: '8f9f45475b6ea1c0c1e852896c4bc025bc0e5a4e' }, this.getSelectProps()))))));
|
|
27821
27904
|
}
|
|
27822
27905
|
constructor(hostRef) {
|
|
27823
27906
|
registerInstance(this, hostRef);
|
|
@@ -27987,7 +28070,7 @@ class KolSelectWc {
|
|
|
27987
28070
|
"state": [32],
|
|
27988
28071
|
"inputHasFocus": [32],
|
|
27989
28072
|
"getValue": [64],
|
|
27990
|
-
"
|
|
28073
|
+
"focus": [64]
|
|
27991
28074
|
},
|
|
27992
28075
|
"$listeners$": undefined,
|
|
27993
28076
|
"$lazyBundleId$": "-",
|
|
@@ -28053,9 +28136,9 @@ class KolSingleSelect {
|
|
|
28053
28136
|
async getValue() {
|
|
28054
28137
|
return this._value;
|
|
28055
28138
|
}
|
|
28056
|
-
async
|
|
28139
|
+
async focus() {
|
|
28057
28140
|
var _a;
|
|
28058
|
-
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
28141
|
+
return Promise.resolve((_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus());
|
|
28059
28142
|
}
|
|
28060
28143
|
onBlur() {
|
|
28061
28144
|
var _a, _b, _c;
|
|
@@ -28219,7 +28302,7 @@ class KolSingleSelect {
|
|
|
28219
28302
|
render() {
|
|
28220
28303
|
var _a;
|
|
28221
28304
|
const isDisabled = this.state._disabled === true;
|
|
28222
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
28305
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'fd6f0b024c6d2aa2bb52404755e4e98fef6e7429' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '2a71f9bcb6c8c3de383b7947e649378df94a15b0', state: this.state }, hAsync("div", { key: '25b32813dc15b1ee675a1001dbae7d3f41620760', class: "kol-single-select__group" }, hAsync(InputStateWrapper, Object.assign({ key: '57673d1d3251175abdd6da427aff126e7fa83c5d' }, this.getInputProps())), this._inputValue && this.state._hasClearButton && (hAsync(KolButtonWcTag, { key: 'fca25f7b8f21d5e3e607582aa150e8d48ee4610e', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _buttonVariant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: clsx('kol-single-select__delete', {
|
|
28223
28306
|
'kol-single-select__delete--disabled': isDisabled,
|
|
28224
28307
|
}), _on: {
|
|
28225
28308
|
onClick: () => {
|
|
@@ -28227,9 +28310,9 @@ class KolSingleSelect {
|
|
|
28227
28310
|
this.clearSelection();
|
|
28228
28311
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
28229
28312
|
},
|
|
28230
|
-
} })), hAsync(KolIconTag, { key: '
|
|
28313
|
+
} })), hAsync(KolIconTag, { key: 'b2fdbd0166bc7b254f97cc1d7e3c171f3fde8034', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
28231
28314
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
28232
|
-
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '
|
|
28315
|
+
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: 'f1f1bcb471120991ee2b200459d081b41809d48c', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` } }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option.label, searchTerm: this._inputValue, ref: (el) => {
|
|
28233
28316
|
if (el)
|
|
28234
28317
|
this.refOptions[index] = el;
|
|
28235
28318
|
}, selected: this._value === option.value, disabled: option.disabled ? true : false, onClick: (event) => {
|
|
@@ -28573,7 +28656,7 @@ class KolSingleSelect {
|
|
|
28573
28656
|
"state": [32],
|
|
28574
28657
|
"inputHasFocus": [32],
|
|
28575
28658
|
"getValue": [64],
|
|
28576
|
-
"
|
|
28659
|
+
"focus": [64]
|
|
28577
28660
|
},
|
|
28578
28661
|
"$listeners$": [[8, "focusout", "handleFocusOut"], [8, "blur", "handleWindowBlur"], [0, "keydown", "handleKeyDown"], [1, "mousemove", "handleMouseEvent"]],
|
|
28579
28662
|
"$lazyBundleId$": "-",
|
|
@@ -28592,10 +28675,14 @@ class KolSkipNav {
|
|
|
28592
28675
|
};
|
|
28593
28676
|
}
|
|
28594
28677
|
render() {
|
|
28595
|
-
return (hAsync("nav", { key: '
|
|
28678
|
+
return (hAsync("nav", { key: '637034fc1c6fda05c7bcec9c78005208e9dcfb13', class: "kol-skip-nav", "aria-label": this.state._label }, hAsync("ul", { key: '3b28c0e6ecad1b303773f2e18ad4fec27fe1d75f', class: "kol-skip-nav__list" }, this.state._links.map((link, index) => {
|
|
28596
28679
|
return (hAsync("li", { class: "kol-skip-nav__list-item", key: index }, hAsync(KolLinkWcTag, Object.assign({}, link, { ref: index === 0 ? (el) => (this.firstLinkRef = el) : undefined }))));
|
|
28597
28680
|
}))));
|
|
28598
28681
|
}
|
|
28682
|
+
async focus() {
|
|
28683
|
+
var _a;
|
|
28684
|
+
return Promise.resolve((_a = this.firstLinkRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
28685
|
+
}
|
|
28599
28686
|
validateLabel(value, _oldValue, initial = false) {
|
|
28600
28687
|
if (!initial) {
|
|
28601
28688
|
removeNavLabel(this.state._label);
|
|
@@ -28615,10 +28702,6 @@ class KolSkipNav {
|
|
|
28615
28702
|
disconnectedCallback() {
|
|
28616
28703
|
removeNavLabel(this.state._label);
|
|
28617
28704
|
}
|
|
28618
|
-
async kolFocus() {
|
|
28619
|
-
var _a;
|
|
28620
|
-
await ((_a = this.firstLinkRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
28621
|
-
}
|
|
28622
28705
|
static get watchers() { return {
|
|
28623
28706
|
"_label": ["validateLabel"],
|
|
28624
28707
|
"_links": ["validateLinks"]
|
|
@@ -28633,7 +28716,7 @@ class KolSkipNav {
|
|
|
28633
28716
|
"_label": [1],
|
|
28634
28717
|
"_links": [1],
|
|
28635
28718
|
"state": [32],
|
|
28636
|
-
"
|
|
28719
|
+
"focus": [64]
|
|
28637
28720
|
},
|
|
28638
28721
|
"$listeners$": undefined,
|
|
28639
28722
|
"$lazyBundleId$": "-",
|
|
@@ -28668,7 +28751,7 @@ class KolSpin {
|
|
|
28668
28751
|
}
|
|
28669
28752
|
render() {
|
|
28670
28753
|
var _a, _b;
|
|
28671
|
-
return (hAsync(Host, { key: '
|
|
28754
|
+
return (hAsync(Host, { key: '99834f746128bfbbb7ded21f1a866f06560ab218', class: "kol-spin" }, this.state._show ? (hAsync(Fragment, null, hAsync("span", { class: clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`) }, renderSpin(this.state._variant)), hAsync("span", { "aria-busy": "true", class: "visually-hidden", role: "alert" }, (_a = this.state._label) !== null && _a !== void 0 ? _a : this.translateActionRunning))) : (this.showToggled && (hAsync("span", { "aria-busy": "false", class: "visually-hidden", role: "alert" }, (_b = this.state._label) !== null && _b !== void 0 ? _b : this.translateActionDone)))));
|
|
28672
28755
|
}
|
|
28673
28756
|
validateShow(value) {
|
|
28674
28757
|
this.showToggled = this.state._show === true && this._show === false;
|
|
@@ -28749,16 +28832,16 @@ class KolSplitButton {
|
|
|
28749
28832
|
async getValue() {
|
|
28750
28833
|
return this._value;
|
|
28751
28834
|
}
|
|
28752
|
-
async
|
|
28835
|
+
async focus() {
|
|
28753
28836
|
var _a;
|
|
28754
|
-
|
|
28837
|
+
return Promise.resolve((_a = this.primaryButtonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
28755
28838
|
}
|
|
28756
28839
|
render() {
|
|
28757
28840
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
28758
|
-
return (hAsync("div", { key: '
|
|
28841
|
+
return (hAsync("div", { key: '04257bc7bd39a7eeef11eecc283bffd36e087eab', class: "kol-split-button" }, hAsync("div", { key: '3e501cb61b88142df1a21fc642f9a6948787c325', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: '0afa33e93f49d8f8b051a39af8effe4910e1e194', class: clsx('kol-split-button__button', {
|
|
28759
28842
|
[this._variant]: this._variant !== 'custom',
|
|
28760
28843
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
28761
|
-
}), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _id: this._id, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _buttonVariant: this._variant }), hAsync("div", { key: '
|
|
28844
|
+
}), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _id: this._id, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _buttonVariant: this._variant }), hAsync("div", { key: '26320736e5ec8d7e679636f282846ae536e13e24', class: "kol-split-button__horizontal-line" }), hAsync(KolButtonWcTag, { key: '286b1351dfb4d41e3ee9d000a1204fa82414e626', class: "kol-split-button__secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "kolicon-chevron-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler })), hAsync(KolPopoverWcTag, { key: 'c79ed674b02e40ede6a1d5b24f5660f35a5f90df', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: 'a986253f3b75a21f217daf926895d87da9912f07' }))));
|
|
28762
28845
|
}
|
|
28763
28846
|
async closePopup() {
|
|
28764
28847
|
this.handleOnClose();
|
|
@@ -28793,7 +28876,7 @@ class KolSplitButton {
|
|
|
28793
28876
|
"_variant": [1],
|
|
28794
28877
|
"state": [32],
|
|
28795
28878
|
"getValue": [64],
|
|
28796
|
-
"
|
|
28879
|
+
"focus": [64],
|
|
28797
28880
|
"closePopup": [64]
|
|
28798
28881
|
},
|
|
28799
28882
|
"$listeners$": undefined,
|
|
@@ -28906,7 +28989,7 @@ class KolTableSettings {
|
|
|
28906
28989
|
}
|
|
28907
28990
|
render() {
|
|
28908
28991
|
const columns = this.getPrimaryRow();
|
|
28909
|
-
return (hAsync(KolPopoverButtonWcTag, { key: '
|
|
28992
|
+
return (hAsync(KolPopoverButtonWcTag, { key: 'b9f7fa675371c9042e66da153ea646b941fc4448', ref: (el) => (this.popoverRef = el), class: "kol-table-settings", _icons: "kolicon-settings", _label: this.translateTableSettings, _popoverAlign: "top", _hideLabel: true }, hAsync("div", { key: '96c3923ce5d67533880afd470574c1af59cbfbf8', class: "kol-table-settings__content" }, hAsync(KolHeadingTag, { key: 'fb5adec2ea8e71ab9a4ab6b93da9011d27e7fe9e', _label: this.translateTableSettings, _level: 0 }), this.errorMessage && hAsync(KolAlertWcTag, { key: '54ef90681a3a473a2b66a3beeda77b324d041511', _type: "error", _label: this.errorMessage, _variant: "msg", class: "kol-table-settings__error-message" }), hAsync("form", { key: '13bf29a5c1400c5e1808f3e7400d74d8bad6bd27', onSubmit: this.handleSubmit.bind(this) }, hAsync("div", { key: '249b4f195ddf1250d2ff72303cad98eb61f6ea44', class: "kol-table-settings__columns-container" }, hAsync("div", { key: 'bf273c67a3722948134948e755fa577af2cb15a1', 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: "codicon codicon-arrow-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: "codicon codicon-arrow-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: 'f1881eaf8342c2dca7eef52375dab228789cea10', class: "kol-table-settings__actions" }, hAsync(KolButtonWcTag, { key: 'bee2d9f94c46600fade1a5e4a9accd4d65613f20', _label: this.translateTableSettingsCancel, _buttonVariant: "secondary", _on: { onClick: () => this.handleCancel() }, "data-testid": "table-settings-cancel" }), hAsync(KolButtonWcTag, { key: '0f882fb01330b5a1c367fb2e8278da2fc90503f6', _label: this.translateTableSettingsApply, _buttonVariant: "primary", _type: "submit", "data-testid": "table-settings-apply" }))))));
|
|
28910
28993
|
}
|
|
28911
28994
|
get host() { return getElement(this); }
|
|
28912
28995
|
static get watchers() { return {
|
|
@@ -29290,7 +29373,7 @@ class KolTableStateful {
|
|
|
29290
29373
|
horizontal: (_d = (_c = this.state._headers.horizontal) === null || _c === void 0 ? void 0 : _c.map((row) => row.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell), sortOrder: this.getHeaderCellSortOrder(cell) }))))) !== null && _d !== void 0 ? _d : [],
|
|
29291
29374
|
vertical: (_f = (_e = this.state._headers.vertical) === null || _e === void 0 ? void 0 : _e.map((column) => column.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell), sortOrder: this.getHeaderCellSortOrder(cell) }))))) !== null && _f !== void 0 ? _f : [],
|
|
29292
29375
|
};
|
|
29293
|
-
return (hAsync(Host, { key: '
|
|
29376
|
+
return (hAsync(Host, { key: 'dc74281384656aebe2d8241ab5bbbc51a38831b0', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: '32435816a2a41743771744fc00d51d59a1ebb56f', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
|
|
29294
29377
|
onSort: (_, payload) => {
|
|
29295
29378
|
this.handleSort(payload);
|
|
29296
29379
|
},
|
|
@@ -29347,7 +29430,7 @@ let KolTableStateless$1 = class KolTableStateless {
|
|
|
29347
29430
|
registerInstance(this, hostRef);
|
|
29348
29431
|
}
|
|
29349
29432
|
render() {
|
|
29350
|
-
return (hAsync(KolTableStatelessWcTag, { key: '
|
|
29433
|
+
return (hAsync(KolTableStatelessWcTag, { key: '4c5c1b12708ab46c691730bf842bfb62661a9234', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection, _hasSettingsMenu: this._hasSettingsMenu }));
|
|
29351
29434
|
}
|
|
29352
29435
|
static get style() { return {
|
|
29353
29436
|
default: defaultStyleCss$7
|
|
@@ -29925,12 +30008,12 @@ class KolTableStateless {
|
|
|
29925
30008
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
29926
30009
|
this.checkboxRefs = [];
|
|
29927
30010
|
const horizontalHeaders = this.state._headerCells.horizontal;
|
|
29928
|
-
return (hAsync("div", { key: '
|
|
30011
|
+
return (hAsync("div", { key: '6990e9985ff47becaa51738e9639fba36554da52', class: "kol-table" }, this.state._hasSettingsMenu && hAsync(KolTableSettingsWcTag, { key: '98351e79e149ccce5461fb6571ce6b816dd9c816', _horizontalHeaderCells: horizontalHeaders !== null && horizontalHeaders !== void 0 ? horizontalHeaders : [] }), hAsync("div", { key: '559c67276958b7794a11c0870c6dfcb317238247', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '701b3765f2a5556bfea3b2bcd75d0ae54dd2b846', class: "kol-table__table", style: {
|
|
29929
30012
|
minWidth: this.getTableMinWidth(),
|
|
29930
|
-
} }, hAsync("caption", { key: '
|
|
30013
|
+
} }, hAsync("caption", { key: 'aa732ab98e7a0a51bb5ec4bb070d88c39a63794c', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(horizontalHeaders) && (hAsync("thead", { key: '080ad661adbad52d23c0dad31c39b266dc97b160', class: "kol-table__head" }, [
|
|
29931
30014
|
horizontalHeaders.map((cols, rowIndex) => (hAsync("tr", { class: "kol-table__head-row", key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) && cols.map((cell, colIndex) => this.renderHeadingCell(cell, rowIndex, colIndex, false))))),
|
|
29932
30015
|
this.renderSpacer('head', horizontalHeaders),
|
|
29933
|
-
])), hAsync("tbody", { key: '
|
|
30016
|
+
])), hAsync("tbody", { key: '0bed96fe3264fc18528265ec9f717a293c5caef6', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
|
|
29934
30017
|
}
|
|
29935
30018
|
get host() { return getElement(this); }
|
|
29936
30019
|
static get watchers() { return {
|
|
@@ -30169,9 +30252,9 @@ class KolTabs {
|
|
|
30169
30252
|
}, _icons: "kolicon-plus", "data-testid": "tabs-create-button" }))));
|
|
30170
30253
|
}
|
|
30171
30254
|
render() {
|
|
30172
|
-
return (hAsync("div", { key: '
|
|
30255
|
+
return (hAsync("div", { key: 'd2ead3f3fa8c12ae4e4d658ced80bd9915e358ca', ref: (el) => {
|
|
30173
30256
|
this.tabPanelsElement = el;
|
|
30174
|
-
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
30257
|
+
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: 'a0e9d89632c7dd6af0c0d9ed9f53e6a4d9829fe5', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
|
|
30175
30258
|
}
|
|
30176
30259
|
validateAlign(value) {
|
|
30177
30260
|
validateAlign(this, value);
|
|
@@ -30369,9 +30452,9 @@ class KolTextarea {
|
|
|
30369
30452
|
var _a;
|
|
30370
30453
|
return (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.value;
|
|
30371
30454
|
}
|
|
30372
|
-
async
|
|
30455
|
+
async focus() {
|
|
30373
30456
|
var _a;
|
|
30374
|
-
(_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
30457
|
+
return Promise.resolve((_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
30375
30458
|
}
|
|
30376
30459
|
getFormFieldProps() {
|
|
30377
30460
|
return {
|
|
@@ -30397,7 +30480,7 @@ class KolTextarea {
|
|
|
30397
30480
|
} });
|
|
30398
30481
|
}
|
|
30399
30482
|
render() {
|
|
30400
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
30483
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '55fb2285f0d4035a7468359c26d7eae0333ebe2d' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '2db1a595b9eef777a40f716b8596a03e03144aa7', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: '14d56cb30389a03cbb82ca2b76ee96eb60488e9e' }, this.getTextAreaProps())))));
|
|
30401
30484
|
}
|
|
30402
30485
|
constructor(hostRef) {
|
|
30403
30486
|
registerInstance(this, hostRef);
|
|
@@ -30598,7 +30681,7 @@ class KolTextarea {
|
|
|
30598
30681
|
"state": [32],
|
|
30599
30682
|
"inputHasFocus": [32],
|
|
30600
30683
|
"getValue": [64],
|
|
30601
|
-
"
|
|
30684
|
+
"focus": [64]
|
|
30602
30685
|
},
|
|
30603
30686
|
"$listeners$": undefined,
|
|
30604
30687
|
"$lazyBundleId$": "-",
|
|
@@ -30669,7 +30752,7 @@ class KolToastContainer {
|
|
|
30669
30752
|
}
|
|
30670
30753
|
}
|
|
30671
30754
|
render() {
|
|
30672
|
-
return (hAsync(Host, { key: '
|
|
30755
|
+
return (hAsync(Host, { key: '40e9e249cceebf6d433444192d5199a2d7864f34', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: '68a998df0fe18affd0db5e06fdfb92c9aee4abd8', _label: this.translateToastCloseAll, class: "kol-toast-container__button-close-all", _on: {
|
|
30673
30756
|
onClick: () => {
|
|
30674
30757
|
void this.closeAll();
|
|
30675
30758
|
},
|
|
@@ -30723,7 +30806,7 @@ class KolToolbar {
|
|
|
30723
30806
|
return Object.assign(Object.assign({}, rest), { _icons, _disabled });
|
|
30724
30807
|
}
|
|
30725
30808
|
render() {
|
|
30726
|
-
return (hAsync("div", { key: '
|
|
30809
|
+
return (hAsync("div", { key: 'b8bf5d060d2390c8c4bbf3345d731074ff297541', class: `kol-toolbar kol-toolbar--orientation-${this.state._orientation}`, role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem)));
|
|
30727
30810
|
}
|
|
30728
30811
|
validateLabel(value) {
|
|
30729
30812
|
validateLabel(this, value);
|
|
@@ -30770,7 +30853,7 @@ class KolToolbar {
|
|
|
30770
30853
|
if ((_d = (_c = this.state._items) === null || _c === void 0 ? void 0 : _c[nextIndex]) === null || _d === void 0 ? void 0 : _d._disabled)
|
|
30771
30854
|
return;
|
|
30772
30855
|
this.currentIndex = nextIndex;
|
|
30773
|
-
void ((_e = this.getCurrentToolbarItem(nextIndex)) === null || _e === void 0 ? void 0 : _e.
|
|
30856
|
+
void ((_e = this.getCurrentToolbarItem(nextIndex)) === null || _e === void 0 ? void 0 : _e.focus());
|
|
30774
30857
|
}
|
|
30775
30858
|
handleBlur(event) {
|
|
30776
30859
|
if (event.target === this.host)
|
|
@@ -30962,7 +31045,7 @@ class KolTooltipWc {
|
|
|
30962
31045
|
getDocument().removeEventListener('keyup', this.hideTooltipByEscape);
|
|
30963
31046
|
}
|
|
30964
31047
|
render() {
|
|
30965
|
-
return (hAsync(Host, { key: '
|
|
31048
|
+
return (hAsync(Host, { key: 'efee2bbf85c5acdd5a489a249bd7bcf7b2cd3dc2', class: "kol-tooltip" }, this.state._label !== '' && (hAsync("div", { key: '99955951f3dd9d2c04e330be7f783ff9ebb7250f', class: "kol-tooltip__floating", ref: this.catchTooltipElement }, hAsync("div", { key: 'b023b51d943b2ffe5cb0773edb26a3c94e60829f', class: "kol-tooltip__arrow", ref: this.catchArrowElement }), hAsync(KolSpanFc, { key: 'ca17df24e680c94f6c1859104937c390f401e81c', class: "kol-tooltip__content", id: this.state._id, badgeText: this._badgeText, label: this.state._label })))));
|
|
30966
31049
|
}
|
|
30967
31050
|
validateBadgeText(value) {
|
|
30968
31051
|
validateBadgeText(this, value);
|
|
@@ -31040,7 +31123,7 @@ class KolTree {
|
|
|
31040
31123
|
registerInstance(this, hostRef);
|
|
31041
31124
|
}
|
|
31042
31125
|
render() {
|
|
31043
|
-
return (hAsync(KolTreeWcTag, { key: '
|
|
31126
|
+
return (hAsync(KolTreeWcTag, { key: '0a42e480a9fe270180fa75f07b87bfb00a634ac9', _label: this._label }, hAsync("slot", { key: '19c9f71d5a62202b0022adff62b36a277797dd0c' })));
|
|
31044
31127
|
}
|
|
31045
31128
|
static get style() { return {
|
|
31046
31129
|
default: defaultStyleCss$2
|
|
@@ -31063,27 +31146,24 @@ class KolTreeItem {
|
|
|
31063
31146
|
constructor(hostRef) {
|
|
31064
31147
|
registerInstance(this, hostRef);
|
|
31065
31148
|
}
|
|
31066
|
-
async
|
|
31067
|
-
|
|
31068
|
-
|
|
31069
|
-
}
|
|
31149
|
+
async focus() {
|
|
31150
|
+
var _a;
|
|
31151
|
+
return Promise.resolve((_a = this.element) === null || _a === void 0 ? void 0 : _a.focus());
|
|
31070
31152
|
}
|
|
31071
31153
|
async expand() {
|
|
31072
|
-
|
|
31073
|
-
|
|
31074
|
-
}
|
|
31154
|
+
var _a;
|
|
31155
|
+
return Promise.resolve((_a = this.element) === null || _a === void 0 ? void 0 : _a.expand());
|
|
31075
31156
|
}
|
|
31076
31157
|
async collapse() {
|
|
31077
|
-
|
|
31078
|
-
|
|
31079
|
-
}
|
|
31158
|
+
var _a;
|
|
31159
|
+
return Promise.resolve((_a = this.element) === null || _a === void 0 ? void 0 : _a.collapse());
|
|
31080
31160
|
}
|
|
31081
31161
|
async isOpen() {
|
|
31082
31162
|
var _a, _b;
|
|
31083
31163
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
31084
31164
|
}
|
|
31085
31165
|
render() {
|
|
31086
|
-
return (hAsync(KolTreeItemWcTag, { key: '
|
|
31166
|
+
return (hAsync(KolTreeItemWcTag, { key: '92fa2ccaf67dfa24531f8fca4c802c2bbfc03916', _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: '164f21da0af88f1021068e5e310d1487707f7059' })));
|
|
31087
31167
|
}
|
|
31088
31168
|
static get style() { return {
|
|
31089
31169
|
default: defaultStyleCss$1
|
|
@@ -31096,7 +31176,7 @@ class KolTreeItem {
|
|
|
31096
31176
|
"_label": [1],
|
|
31097
31177
|
"_open": [4],
|
|
31098
31178
|
"_href": [1],
|
|
31099
|
-
"
|
|
31179
|
+
"focus": [64],
|
|
31100
31180
|
"expand": [64],
|
|
31101
31181
|
"collapse": [64],
|
|
31102
31182
|
"isOpen": [64]
|
|
@@ -31121,12 +31201,12 @@ class KolTreeItemWc {
|
|
|
31121
31201
|
}
|
|
31122
31202
|
render() {
|
|
31123
31203
|
const { _href, _active, _hasChildren, _open, _label } = this.state;
|
|
31124
|
-
return (hAsync(Host, { key: '
|
|
31204
|
+
return (hAsync(Host, { key: 'e99bc051fe9fe90cd4a5aaf861d61d0d512c808a', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { key: 'e0ae86b656eab778f80852a40dd84cda832695a9', class: "kol-tree-item", style: {
|
|
31125
31205
|
'--level': `${this.level}`,
|
|
31126
|
-
} }, hAsync(KolLinkWcTag, { key: '
|
|
31206
|
+
} }, hAsync(KolLinkWcTag, { key: '3ffea17f30ab8e461e936d691d7fd4389f04bf2c', class: clsx('kol-tree-item__link', {
|
|
31127
31207
|
'kol-tree-item__link--first-level': this.level === 0,
|
|
31128
31208
|
'kol-tree-item__link--active': _active,
|
|
31129
|
-
}), _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, hAsync("span", { key: '
|
|
31209
|
+
}), _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, hAsync("span", { key: 'dfd6fa644efe7efe4700ec74a5f1c50e82262494', class: "kol-tree-item__link-inner", slot: "expert" }, _hasChildren ? (hAsync("span", { class: "kol-tree-item__toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, hAsync(KolIconTag, { class: "kol-tree-item__toggle-button-icon", _icons: `kolicon kolicon-${_open ? 'chevron-down' : 'chevron-right'}`, _label: '' }))) : (hAsync("span", { class: "kol-tree-item__toggle-button-placeholder" })), hAsync("span", { key: 'ef4714af7a6a63c447b3df2647dc605d5c9693b9', class: "kol-tree-item__text" }, _label))), hAsync("ul", { key: '34f5c43c0d6b3ecc0d78d6eb2101aa451e5d1cb2', class: "kol-tree-item__children", hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: '1ef6c1855acdebee823d68f7d0849fcd79d5d558' })))));
|
|
31130
31210
|
}
|
|
31131
31211
|
validateActive(value) {
|
|
31132
31212
|
validateActive(this, value || false);
|
|
@@ -31164,12 +31244,14 @@ class KolTreeItemWc {
|
|
|
31164
31244
|
var _a, _b;
|
|
31165
31245
|
this.state = Object.assign(Object.assign({}, this.state), { _hasChildren: Boolean((_b = (_a = this.host.querySelector('slot')) === null || _a === void 0 ? void 0 : _a.assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a).length) });
|
|
31166
31246
|
}
|
|
31167
|
-
async
|
|
31168
|
-
|
|
31247
|
+
async focus() {
|
|
31248
|
+
var _a;
|
|
31249
|
+
return Promise.resolve((_a = this.linkElement) === null || _a === void 0 ? void 0 : _a.focus());
|
|
31169
31250
|
}
|
|
31170
31251
|
async handleExpandClick(event) {
|
|
31252
|
+
var _a;
|
|
31171
31253
|
event.preventDefault();
|
|
31172
|
-
await this.linkElement.
|
|
31254
|
+
await ((_a = this.linkElement) === null || _a === void 0 ? void 0 : _a.focus());
|
|
31173
31255
|
await this.expand();
|
|
31174
31256
|
}
|
|
31175
31257
|
async expand() {
|
|
@@ -31178,8 +31260,9 @@ class KolTreeItemWc {
|
|
|
31178
31260
|
}
|
|
31179
31261
|
}
|
|
31180
31262
|
async handleCollapseClick(event) {
|
|
31263
|
+
var _a;
|
|
31181
31264
|
event.preventDefault();
|
|
31182
|
-
this.linkElement.focus();
|
|
31265
|
+
await ((_a = this.linkElement) === null || _a === void 0 ? void 0 : _a.focus());
|
|
31183
31266
|
await this.collapse();
|
|
31184
31267
|
}
|
|
31185
31268
|
async collapse() {
|
|
@@ -31208,7 +31291,7 @@ class KolTreeItemWc {
|
|
|
31208
31291
|
"_href": [1],
|
|
31209
31292
|
"level": [32],
|
|
31210
31293
|
"state": [32],
|
|
31211
|
-
"
|
|
31294
|
+
"focus": [64],
|
|
31212
31295
|
"expand": [64],
|
|
31213
31296
|
"collapse": [64],
|
|
31214
31297
|
"isOpen": [64]
|
|
@@ -31230,7 +31313,7 @@ class KolTreeWc {
|
|
|
31230
31313
|
validateLabel(this, value);
|
|
31231
31314
|
}
|
|
31232
31315
|
render() {
|
|
31233
|
-
return (hAsync(Host, { key: '
|
|
31316
|
+
return (hAsync(Host, { key: '6e1fc1f0d6757fec0658d28ff54fe73a58b60fa9', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("nav", { key: 'dfc733503c12e36fc8e6fc958273555f4e698237', class: "kol-tree", "aria-label": this.state._label }, hAsync("ul", { key: '9c68ce61a9bfbe5ade976515eaa43e2d9fbf380d', class: "kol-tree__treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: 'db660a5bc5cb5544f2c35e9e14f2a61d6e06ac69' })))));
|
|
31234
31317
|
}
|
|
31235
31318
|
static isTreeItem(element) {
|
|
31236
31319
|
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
|
@@ -31293,7 +31376,7 @@ class KolTreeWc {
|
|
|
31293
31376
|
return elementsWithInclude.filter((element) => element.include).map((element) => element.value);
|
|
31294
31377
|
}
|
|
31295
31378
|
async handleKeyDown(event) {
|
|
31296
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
31379
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
31297
31380
|
const openItems = await this.getOpenTreeItemElements();
|
|
31298
31381
|
const currentTreeItem = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(KolTreeItemTag);
|
|
31299
31382
|
const hasModifierKeyPressed = event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;
|
|
@@ -31303,12 +31386,12 @@ class KolTreeWc {
|
|
|
31303
31386
|
const currentIndex = openItems === null || openItems === void 0 ? void 0 : openItems.findIndex((elem) => elem === currentTreeItem);
|
|
31304
31387
|
switch (event.key) {
|
|
31305
31388
|
case 'ArrowDown': {
|
|
31306
|
-
await ((_b = openItems[currentIndex + 1]) === null || _b === void 0 ? void 0 : _b.
|
|
31389
|
+
await ((_b = openItems[currentIndex + 1]) === null || _b === void 0 ? void 0 : _b.focus());
|
|
31307
31390
|
event.preventDefault();
|
|
31308
31391
|
break;
|
|
31309
31392
|
}
|
|
31310
31393
|
case 'ArrowUp': {
|
|
31311
|
-
await ((_c = openItems[currentIndex - 1]) === null || _c === void 0 ? void 0 : _c.
|
|
31394
|
+
await ((_c = openItems[currentIndex - 1]) === null || _c === void 0 ? void 0 : _c.focus());
|
|
31312
31395
|
event.preventDefault();
|
|
31313
31396
|
break;
|
|
31314
31397
|
}
|
|
@@ -31316,7 +31399,7 @@ class KolTreeWc {
|
|
|
31316
31399
|
case 'ArrowRight': {
|
|
31317
31400
|
event.preventDefault();
|
|
31318
31401
|
if (await currentTreeItem.isOpen()) {
|
|
31319
|
-
await ((_d = openItems[currentIndex + 1]) === null || _d === void 0 ? void 0 : _d.
|
|
31402
|
+
await ((_d = openItems[currentIndex + 1]) === null || _d === void 0 ? void 0 : _d.focus());
|
|
31320
31403
|
}
|
|
31321
31404
|
else {
|
|
31322
31405
|
await currentTreeItem.expand();
|
|
@@ -31331,17 +31414,17 @@ class KolTreeWc {
|
|
|
31331
31414
|
}
|
|
31332
31415
|
else {
|
|
31333
31416
|
const parentIndex = openItems.findIndex((item) => item === currentTreeItem.parentElement);
|
|
31334
|
-
parentIndex !== -1 && (await ((_e = openItems[parentIndex]) === null || _e === void 0 ? void 0 : _e.
|
|
31417
|
+
parentIndex !== -1 && (await ((_e = openItems[parentIndex]) === null || _e === void 0 ? void 0 : _e.focus()));
|
|
31335
31418
|
}
|
|
31336
31419
|
break;
|
|
31337
31420
|
}
|
|
31338
31421
|
case 'Home': {
|
|
31339
|
-
await ((_f = openItems[0]) === null || _f === void 0 ? void 0 : _f.
|
|
31422
|
+
await ((_f = openItems[0]) === null || _f === void 0 ? void 0 : _f.focus());
|
|
31340
31423
|
event.preventDefault();
|
|
31341
31424
|
break;
|
|
31342
31425
|
}
|
|
31343
31426
|
case 'End': {
|
|
31344
|
-
await ((_g = openItems[openItems.length - 1]) === null || _g === void 0 ? void 0 : _g.
|
|
31427
|
+
await ((_g = openItems[openItems.length - 1]) === null || _g === void 0 ? void 0 : _g.focus());
|
|
31345
31428
|
event.preventDefault();
|
|
31346
31429
|
break;
|
|
31347
31430
|
}
|
|
@@ -31354,14 +31437,14 @@ class KolTreeWc {
|
|
|
31354
31437
|
.slice(startIndex, startIndex + openItems.length)
|
|
31355
31438
|
.findIndex((item) => { var _a; return (_a = item.getAttribute('_label')) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase().startsWith(char); });
|
|
31356
31439
|
if (matchIndex !== -1) {
|
|
31357
|
-
await wrapAroundItems[startIndex + matchIndex].
|
|
31440
|
+
await ((_j = wrapAroundItems[startIndex + matchIndex]) === null || _j === void 0 ? void 0 : _j.focus());
|
|
31358
31441
|
event.preventDefault();
|
|
31359
31442
|
}
|
|
31360
31443
|
}
|
|
31361
31444
|
break;
|
|
31362
31445
|
}
|
|
31363
31446
|
case '*': {
|
|
31364
|
-
const siblings = (
|
|
31447
|
+
const siblings = (_k = currentTreeItem.parentElement) === null || _k === void 0 ? void 0 : _k.querySelectorAll(KolTreeItemTag);
|
|
31365
31448
|
siblings === null || siblings === void 0 ? void 0 : siblings.forEach((element) => {
|
|
31366
31449
|
void element.expand();
|
|
31367
31450
|
});
|
|
@@ -31427,7 +31510,7 @@ class KolVersion {
|
|
|
31427
31510
|
};
|
|
31428
31511
|
}
|
|
31429
31512
|
render() {
|
|
31430
|
-
return (hAsync(Host, { key: '
|
|
31513
|
+
return (hAsync(Host, { key: 'c2c4090511476f2b782e5ec11eeefb14e84aeef8', class: "kol-version" }, hAsync(KolBadgeTag, { key: '8cca6fc737968718a4ade9c153711209b562c9bf', _color: "#bec5c9", _icons: {
|
|
31431
31514
|
left: { icon: 'kolicon-version', label: this.translateVersion },
|
|
31432
31515
|
}, _label: this.state._label })));
|
|
31433
31516
|
}
|
|
@@ -31488,6 +31571,8 @@ registerComponents([
|
|
|
31488
31571
|
KolCardWc,
|
|
31489
31572
|
KolCombobox,
|
|
31490
31573
|
KolDetails,
|
|
31574
|
+
KolDialog,
|
|
31575
|
+
KolDialogWc,
|
|
31491
31576
|
KolDrawer,
|
|
31492
31577
|
KolForm,
|
|
31493
31578
|
KolHeading,
|