@public-ui/hydrate 4.0.0-beta.0 → 4.0.0-beta.1
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.mjs
CHANGED
|
@@ -144,7 +144,7 @@ function _mergeNamespaces(n, m) {
|
|
|
144
144
|
|
|
145
145
|
const NAMESPACE = 'kolibri';
|
|
146
146
|
const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
|
|
147
|
-
const Env = /* kolibri */ {"kolibriVersion":"4.0.0-beta.
|
|
147
|
+
const Env = /* kolibri */ {"kolibriVersion":"4.0.0-beta.1"};
|
|
148
148
|
|
|
149
149
|
function getDefaultExportFromCjs (x) {
|
|
150
150
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
@@ -574,47 +574,48 @@ var TagEnum;
|
|
|
574
574
|
TagEnum[TagEnum["card"] = 8] = "card";
|
|
575
575
|
TagEnum[TagEnum["combobox"] = 9] = "combobox";
|
|
576
576
|
TagEnum[TagEnum["details"] = 10] = "details";
|
|
577
|
-
TagEnum[TagEnum["
|
|
578
|
-
TagEnum[TagEnum["
|
|
579
|
-
TagEnum[TagEnum["
|
|
580
|
-
TagEnum[TagEnum["
|
|
581
|
-
TagEnum[TagEnum["
|
|
582
|
-
TagEnum[TagEnum["
|
|
583
|
-
TagEnum[TagEnum["input-
|
|
584
|
-
TagEnum[TagEnum["input-
|
|
585
|
-
TagEnum[TagEnum["input-
|
|
586
|
-
TagEnum[TagEnum["input-
|
|
587
|
-
TagEnum[TagEnum["input-
|
|
588
|
-
TagEnum[TagEnum["input-
|
|
589
|
-
TagEnum[TagEnum["input-
|
|
590
|
-
TagEnum[TagEnum["input-
|
|
591
|
-
TagEnum[TagEnum["input-
|
|
592
|
-
TagEnum[TagEnum["
|
|
593
|
-
TagEnum[TagEnum["
|
|
594
|
-
TagEnum[TagEnum["link
|
|
595
|
-
TagEnum[TagEnum["
|
|
596
|
-
TagEnum[TagEnum["
|
|
597
|
-
TagEnum[TagEnum["
|
|
598
|
-
TagEnum[TagEnum["
|
|
599
|
-
TagEnum[TagEnum["
|
|
600
|
-
TagEnum[TagEnum["
|
|
601
|
-
TagEnum[TagEnum["
|
|
602
|
-
TagEnum[TagEnum["
|
|
603
|
-
TagEnum[TagEnum["
|
|
604
|
-
TagEnum[TagEnum["
|
|
605
|
-
TagEnum[TagEnum["
|
|
606
|
-
TagEnum[TagEnum["
|
|
607
|
-
TagEnum[TagEnum["
|
|
608
|
-
TagEnum[TagEnum["
|
|
609
|
-
TagEnum[TagEnum["table
|
|
610
|
-
TagEnum[TagEnum["table-
|
|
611
|
-
TagEnum[TagEnum["
|
|
612
|
-
TagEnum[TagEnum["
|
|
613
|
-
TagEnum[TagEnum["
|
|
614
|
-
TagEnum[TagEnum["
|
|
615
|
-
TagEnum[TagEnum["
|
|
616
|
-
TagEnum[TagEnum["
|
|
617
|
-
TagEnum[TagEnum["tree
|
|
577
|
+
TagEnum[TagEnum["dialog"] = 11] = "dialog";
|
|
578
|
+
TagEnum[TagEnum["drawer"] = 12] = "drawer";
|
|
579
|
+
TagEnum[TagEnum["form"] = 13] = "form";
|
|
580
|
+
TagEnum[TagEnum["heading"] = 14] = "heading";
|
|
581
|
+
TagEnum[TagEnum["icon"] = 15] = "icon";
|
|
582
|
+
TagEnum[TagEnum["image"] = 16] = "image";
|
|
583
|
+
TagEnum[TagEnum["input-checkbox"] = 17] = "input-checkbox";
|
|
584
|
+
TagEnum[TagEnum["input-color"] = 18] = "input-color";
|
|
585
|
+
TagEnum[TagEnum["input-date"] = 19] = "input-date";
|
|
586
|
+
TagEnum[TagEnum["input-email"] = 20] = "input-email";
|
|
587
|
+
TagEnum[TagEnum["input-file"] = 21] = "input-file";
|
|
588
|
+
TagEnum[TagEnum["input-number"] = 22] = "input-number";
|
|
589
|
+
TagEnum[TagEnum["input-password"] = 23] = "input-password";
|
|
590
|
+
TagEnum[TagEnum["input-radio"] = 24] = "input-radio";
|
|
591
|
+
TagEnum[TagEnum["input-range"] = 25] = "input-range";
|
|
592
|
+
TagEnum[TagEnum["input-text"] = 26] = "input-text";
|
|
593
|
+
TagEnum[TagEnum["kolibri"] = 27] = "kolibri";
|
|
594
|
+
TagEnum[TagEnum["link"] = 28] = "link";
|
|
595
|
+
TagEnum[TagEnum["link-button"] = 29] = "link-button";
|
|
596
|
+
TagEnum[TagEnum["logo"] = 30] = "logo";
|
|
597
|
+
TagEnum[TagEnum["modal"] = 31] = "modal";
|
|
598
|
+
TagEnum[TagEnum["nav"] = 32] = "nav";
|
|
599
|
+
TagEnum[TagEnum["pagination"] = 33] = "pagination";
|
|
600
|
+
TagEnum[TagEnum["popover-button"] = 34] = "popover-button";
|
|
601
|
+
TagEnum[TagEnum["progress"] = 35] = "progress";
|
|
602
|
+
TagEnum[TagEnum["quote"] = 36] = "quote";
|
|
603
|
+
TagEnum[TagEnum["select"] = 37] = "select";
|
|
604
|
+
TagEnum[TagEnum["single-select"] = 38] = "single-select";
|
|
605
|
+
TagEnum[TagEnum["skip-nav"] = 39] = "skip-nav";
|
|
606
|
+
TagEnum[TagEnum["spin"] = 40] = "spin";
|
|
607
|
+
TagEnum[TagEnum["split-button"] = 41] = "split-button";
|
|
608
|
+
TagEnum[TagEnum["symbol"] = 42] = "symbol";
|
|
609
|
+
TagEnum[TagEnum["table"] = 43] = "table";
|
|
610
|
+
TagEnum[TagEnum["table-stateful"] = 44] = "table-stateful";
|
|
611
|
+
TagEnum[TagEnum["table-stateless"] = 45] = "table-stateless";
|
|
612
|
+
TagEnum[TagEnum["tabs"] = 46] = "tabs";
|
|
613
|
+
TagEnum[TagEnum["textarea"] = 47] = "textarea";
|
|
614
|
+
TagEnum[TagEnum["toast-container"] = 48] = "toast-container";
|
|
615
|
+
TagEnum[TagEnum["toolbar"] = 49] = "toolbar";
|
|
616
|
+
TagEnum[TagEnum["tooltip"] = 50] = "tooltip";
|
|
617
|
+
TagEnum[TagEnum["tree"] = 51] = "tree";
|
|
618
|
+
TagEnum[TagEnum["tree-item"] = 52] = "tree-item";
|
|
618
619
|
})(TagEnum || (TagEnum = {}));
|
|
619
620
|
|
|
620
621
|
const getWindow$1 = () => {
|
|
@@ -6068,6 +6069,7 @@ let KolBadgeTag = 'kol-badge';
|
|
|
6068
6069
|
let KolButtonTag = 'kol-button';
|
|
6069
6070
|
let KolButtonWcTag = 'kol-button-wc';
|
|
6070
6071
|
let KolCardWcTag = 'kol-card-wc';
|
|
6072
|
+
let KolDialogWcTag = 'kol-dialog-wc';
|
|
6071
6073
|
let KolFormTag = 'kol-form';
|
|
6072
6074
|
let KolHeadingTag = 'kol-heading';
|
|
6073
6075
|
let KolIconTag = 'kol-icon';
|
|
@@ -6087,7 +6089,7 @@ let KolTreeItemWcTag = 'kol-tree-item-wc';
|
|
|
6087
6089
|
let KolTreeTag = 'kol-tree';
|
|
6088
6090
|
let KolTreeWcTag = 'kol-tree-wc';
|
|
6089
6091
|
|
|
6090
|
-
const defaultStyleCss$
|
|
6092
|
+
const defaultStyleCss$N = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}";
|
|
6091
6093
|
|
|
6092
6094
|
class KolAbbr {
|
|
6093
6095
|
constructor(hostRef) {
|
|
@@ -6109,7 +6111,7 @@ class KolAbbr {
|
|
|
6109
6111
|
"_label": ["validateLabel"]
|
|
6110
6112
|
}; }
|
|
6111
6113
|
static get style() { return {
|
|
6112
|
-
default: defaultStyleCss$
|
|
6114
|
+
default: defaultStyleCss$N
|
|
6113
6115
|
}; }
|
|
6114
6116
|
static get cmpMeta() { return {
|
|
6115
6117
|
"$flags$": 297,
|
|
@@ -6296,7 +6298,7 @@ const watchHeadingLevel = (component, value) => {
|
|
|
6296
6298
|
validateLevel(component, value);
|
|
6297
6299
|
};
|
|
6298
6300
|
|
|
6299
|
-
const defaultStyleCss$
|
|
6301
|
+
const defaultStyleCss$M = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n @media (prefers-reduced-motion) {\n .collapsible__wrapper-animation, .collapsible__wrapper {\n transition-duration: 0s;\n }\n }\n .collapsible {\n /* @see https://github.com/public-ui/kolibri/issues/5952 */\n }\n @media print {\n :not(.collapsible--open) .collapsible__wrapper-animation {\n display: none;\n }\n }\n .collapsible__wrapper {\n /* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */\n transform: translateZ(0);\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.3s;\n }\n .collapsible__wrapper-animation {\n opacity: 0;\n transform: scaleY(0);\n transform-origin: top;\n min-height: 0;\n /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n visibility: hidden;\n transition: transform 0.3s, opacity 0.3s, visibility 0.3s;\n }\n .collapsible--open .collapsible__wrapper {\n grid-template-rows: 1fr;\n }\n .collapsible--open .collapsible__wrapper-animation {\n opacity: 1;\n transform: scaleY(1);\n visibility: visible;\n }\n .collapsible {\n /*\n * Inside a button, the caption text is always centered.\n * So we have to align the text to the left.\n */\n }\n .collapsible__heading-button button .kol-span {\n align-items: flex-start;\n }\n .collapsible--open:focus-within {\n position: relative;\n z-index: 100;\n }\n}";
|
|
6300
6302
|
|
|
6301
6303
|
featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
|
|
6302
6304
|
|
|
@@ -6330,9 +6332,9 @@ class KolAccordion {
|
|
|
6330
6332
|
_on: {},
|
|
6331
6333
|
};
|
|
6332
6334
|
}
|
|
6333
|
-
async
|
|
6335
|
+
async focus() {
|
|
6334
6336
|
var _a;
|
|
6335
|
-
|
|
6337
|
+
return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
6336
6338
|
}
|
|
6337
6339
|
render() {
|
|
6338
6340
|
const { _open, _label, _disabled, _level } = this.state;
|
|
@@ -6356,7 +6358,7 @@ class KolAccordion {
|
|
|
6356
6358
|
animationClass: `${rootClass}__wrapper-animation`,
|
|
6357
6359
|
},
|
|
6358
6360
|
};
|
|
6359
|
-
return (hAsync(KolCollapsibleFc, Object.assign({ key: '
|
|
6361
|
+
return (hAsync(KolCollapsibleFc, Object.assign({ key: '033717b5a67b6f63ebea447be031a9c234339e43' }, props), hAsync("slot", { key: '08b68dbec91743fdfabdee75a07a451713951dc6' })));
|
|
6360
6362
|
}
|
|
6361
6363
|
validateDisabled(value) {
|
|
6362
6364
|
validateDisabled(this, value);
|
|
@@ -6391,7 +6393,7 @@ class KolAccordion {
|
|
|
6391
6393
|
"_open": ["validateOpen"]
|
|
6392
6394
|
}; }
|
|
6393
6395
|
static get style() { return {
|
|
6394
|
-
default: defaultStyleCss$
|
|
6396
|
+
default: defaultStyleCss$M
|
|
6395
6397
|
}; }
|
|
6396
6398
|
static get cmpMeta() { return {
|
|
6397
6399
|
"$flags$": 297,
|
|
@@ -6403,7 +6405,7 @@ class KolAccordion {
|
|
|
6403
6405
|
"_on": [16],
|
|
6404
6406
|
"_open": [1540],
|
|
6405
6407
|
"state": [32],
|
|
6406
|
-
"
|
|
6408
|
+
"focus": [64]
|
|
6407
6409
|
},
|
|
6408
6410
|
"$listeners$": undefined,
|
|
6409
6411
|
"$lazyBundleId$": "-",
|
|
@@ -6411,7 +6413,7 @@ class KolAccordion {
|
|
|
6411
6413
|
}; }
|
|
6412
6414
|
}
|
|
6413
6415
|
|
|
6414
|
-
const defaultStyleCss$
|
|
6416
|
+
const defaultStyleCss$L = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
6415
6417
|
|
|
6416
6418
|
class KolAlert {
|
|
6417
6419
|
constructor(hostRef) {
|
|
@@ -6429,7 +6431,7 @@ class KolAlert {
|
|
|
6429
6431
|
return (hAsync(KolAlertWcTag, { key: 'bf51c76e2d6568eea0d1a0c3047da6987aa249d8', _alert: this._alert, _hasCloser: this._hasCloser, _label: this._label, _level: this._level, _on: this._on, _type: this._type, _variant: this._variant }, hAsync("slot", { key: 'b754666af76f0fcbb15ffeaa4d11b2f61d93abc4' })));
|
|
6430
6432
|
}
|
|
6431
6433
|
static get style() { return {
|
|
6432
|
-
default: defaultStyleCss$
|
|
6434
|
+
default: defaultStyleCss$L
|
|
6433
6435
|
}; }
|
|
6434
6436
|
static get cmpMeta() { return {
|
|
6435
6437
|
"$flags$": 297,
|
|
@@ -6907,7 +6909,7 @@ class KolAlertWc {
|
|
|
6907
6909
|
}; }
|
|
6908
6910
|
}
|
|
6909
6911
|
|
|
6910
|
-
const defaultStyleCss$
|
|
6912
|
+
const defaultStyleCss$K = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-avatar,\n .kol-avatar__image,\n .kol-avatar__initials {\n border-radius: 50%;\n }\n .kol-avatar {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n width: calc(100 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(100 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-avatar__image, .kol-avatar__initials {\n width: 100%;\n height: 100%;\n }\n .kol-avatar__initials {\n background-color: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
6911
6913
|
|
|
6912
6914
|
class KolAvatar {
|
|
6913
6915
|
constructor(hostRef) {
|
|
@@ -6918,7 +6920,7 @@ class KolAvatar {
|
|
|
6918
6920
|
return hAsync(KolAvatarWcTag, { key: 'b50d593f2fcc07fb3a1c8a92786df6ddcbc917cf', _color: this._color, _src: this._src, _label: this._label });
|
|
6919
6921
|
}
|
|
6920
6922
|
static get style() { return {
|
|
6921
|
-
default: defaultStyleCss$
|
|
6923
|
+
default: defaultStyleCss$K
|
|
6922
6924
|
}; }
|
|
6923
6925
|
static get cmpMeta() { return {
|
|
6924
6926
|
"$flags$": 297,
|
|
@@ -18559,7 +18561,7 @@ const ToastItemFc = (_a) => {
|
|
|
18559
18561
|
return (hAsync("div", { class: clsx('kol-toast-item', `kol-toast-item--${status}`) }, hAsync(KolAlertFc, { class: "kol-toast-item__alert", alert: true, label: label, level: 0, hasCloser: true, type: type, variant: variant || 'card', onCloserClick: onClose }, hAsync("div", Object.assign({}, other), description))));
|
|
18560
18562
|
};
|
|
18561
18563
|
|
|
18562
|
-
const defaultStyleCss$
|
|
18564
|
+
const defaultStyleCss$J = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-badge {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: inline-flex;\n place-items: center;\n }\n .kol-badge .kol-badge__smart-button .button {\n color: inherit;\n }\n}";
|
|
18563
18565
|
|
|
18564
18566
|
featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
|
|
18565
18567
|
class KolBadge {
|
|
@@ -18588,18 +18590,18 @@ class KolBadge {
|
|
|
18588
18590
|
renderSmartButton(props) {
|
|
18589
18591
|
return (hAsync(KolButtonWcTag, { ref: this.catchSmartButtonRef, class: "kol-badge__smart-button", _ariaControls: this.id, _ariaDescription: props._ariaDescription, _buttonVariant: props._variant, _customClass: props._customClass, _disabled: props._disabled, _hideLabel: true, _icons: props._icons, _id: props._id, _label: props._label, _on: props._on, _tooltipAlign: props._tooltipAlign }));
|
|
18590
18592
|
}
|
|
18591
|
-
async
|
|
18593
|
+
async focus() {
|
|
18592
18594
|
var _a;
|
|
18593
|
-
|
|
18595
|
+
return Promise.resolve((_a = this.smartButtonRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
18594
18596
|
}
|
|
18595
18597
|
render() {
|
|
18596
18598
|
const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;
|
|
18597
|
-
return (hAsync("span", { key: '
|
|
18599
|
+
return (hAsync("span", { key: 'fe86a1a3e242f1ea2b439364882543151b319ea6', class: clsx('kol-badge', {
|
|
18598
18600
|
'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
|
|
18599
18601
|
}), style: {
|
|
18600
18602
|
backgroundColor: this.bgColorStr,
|
|
18601
18603
|
color: this.colorStr,
|
|
18602
|
-
} }, hAsync(KolSpanFc, { key: '
|
|
18604
|
+
} }, hAsync(KolSpanFc, { key: '2880c59a62931e41d78381e5c5b1a81f3e27d256', class: "kol-badge__label", id: hasSmartButton ? this.id : undefined, allowMarkdown: true, icons: this.state._icons, label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton)));
|
|
18603
18605
|
}
|
|
18604
18606
|
validateIcons(value) {
|
|
18605
18607
|
validateIcons(this, value);
|
|
@@ -18633,7 +18635,7 @@ class KolBadge {
|
|
|
18633
18635
|
"_smartButton": ["validateSmartButton"]
|
|
18634
18636
|
}; }
|
|
18635
18637
|
static get style() { return {
|
|
18636
|
-
default: defaultStyleCss$
|
|
18638
|
+
default: defaultStyleCss$J
|
|
18637
18639
|
}; }
|
|
18638
18640
|
static get cmpMeta() { return {
|
|
18639
18641
|
"$flags$": 297,
|
|
@@ -18644,7 +18646,7 @@ class KolBadge {
|
|
|
18644
18646
|
"_label": [1],
|
|
18645
18647
|
"_smartButton": [1, "_smart-button"],
|
|
18646
18648
|
"state": [32],
|
|
18647
|
-
"
|
|
18649
|
+
"focus": [64]
|
|
18648
18650
|
},
|
|
18649
18651
|
"$listeners$": undefined,
|
|
18650
18652
|
"$lazyBundleId$": "-",
|
|
@@ -18670,7 +18672,7 @@ const watchNavLinks = (className, component, value) => {
|
|
|
18670
18672
|
uiUxHintMillerscheZahl(className, component.state._links.length);
|
|
18671
18673
|
};
|
|
18672
18674
|
|
|
18673
|
-
const defaultStyleCss$
|
|
18675
|
+
const defaultStyleCss$I = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n display: inline-block;\n }\n .kol-link {\n display: inline-flex;\n max-width: fit-content;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-link--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\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}";
|
|
18674
18676
|
|
|
18675
18677
|
class KolBreadcrumb {
|
|
18676
18678
|
constructor(hostRef) {
|
|
@@ -18712,7 +18714,7 @@ class KolBreadcrumb {
|
|
|
18712
18714
|
"_links": ["validateLinks"]
|
|
18713
18715
|
}; }
|
|
18714
18716
|
static get style() { return {
|
|
18715
|
-
default: defaultStyleCss$
|
|
18717
|
+
default: defaultStyleCss$I
|
|
18716
18718
|
}; }
|
|
18717
18719
|
static get cmpMeta() { return {
|
|
18718
18720
|
"$flags$": 297,
|
|
@@ -18728,7 +18730,7 @@ class KolBreadcrumb {
|
|
|
18728
18730
|
}; }
|
|
18729
18731
|
}
|
|
18730
18732
|
|
|
18731
|
-
const defaultStyleCss$
|
|
18733
|
+
const defaultStyleCss$H = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n display: inline-block;\n }\n .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n text-decoration-line: none;\n }\n .kol-button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-button__text {\n flex: 1 0 100%;\n }\n}";
|
|
18732
18734
|
|
|
18733
18735
|
class KolButton {
|
|
18734
18736
|
constructor(hostRef) {
|
|
@@ -18746,15 +18748,15 @@ class KolButton {
|
|
|
18746
18748
|
async getValue() {
|
|
18747
18749
|
return this._value;
|
|
18748
18750
|
}
|
|
18749
|
-
async
|
|
18751
|
+
async focus() {
|
|
18750
18752
|
var _a;
|
|
18751
|
-
|
|
18753
|
+
return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
18752
18754
|
}
|
|
18753
18755
|
render() {
|
|
18754
|
-
return (hAsync(KolButtonWcTag, { key: '
|
|
18756
|
+
return (hAsync(KolButtonWcTag, { key: 'f11e1608010be61b889bfa56beaaf4713bfd501d', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _buttonVariant: this._variant }, hAsync("slot", { key: 'f806eae7a76f2f04dc87d97054f332eb9f67da0b', name: "expert", slot: "expert" })));
|
|
18755
18757
|
}
|
|
18756
18758
|
static get style() { return {
|
|
18757
|
-
default: defaultStyleCss$
|
|
18759
|
+
default: defaultStyleCss$H
|
|
18758
18760
|
}; }
|
|
18759
18761
|
static get cmpMeta() { return {
|
|
18760
18762
|
"$flags$": 297,
|
|
@@ -18782,7 +18784,7 @@ class KolButton {
|
|
|
18782
18784
|
"_value": [8],
|
|
18783
18785
|
"_variant": [1],
|
|
18784
18786
|
"getValue": [64],
|
|
18785
|
-
"
|
|
18787
|
+
"focus": [64]
|
|
18786
18788
|
},
|
|
18787
18789
|
"$listeners$": undefined,
|
|
18788
18790
|
"$lazyBundleId$": "-",
|
|
@@ -18790,7 +18792,7 @@ class KolButton {
|
|
|
18790
18792
|
}; }
|
|
18791
18793
|
}
|
|
18792
18794
|
|
|
18793
|
-
const defaultStyleCss$
|
|
18795
|
+
const defaultStyleCss$G = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n display: inline-block;\n }\n .kol-button {\n display: inline-flex;\n max-width: fit-content;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-button--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\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}";
|
|
18794
18796
|
|
|
18795
18797
|
class KolButtonLink {
|
|
18796
18798
|
constructor(hostRef) {
|
|
@@ -18807,15 +18809,15 @@ class KolButtonLink {
|
|
|
18807
18809
|
async getValue() {
|
|
18808
18810
|
return this._value;
|
|
18809
18811
|
}
|
|
18810
|
-
async
|
|
18812
|
+
async focus() {
|
|
18811
18813
|
var _a;
|
|
18812
|
-
|
|
18814
|
+
return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
18813
18815
|
}
|
|
18814
18816
|
render() {
|
|
18815
|
-
return (hAsync(KolButtonWcTag, { key: '
|
|
18817
|
+
return (hAsync(KolButtonWcTag, { key: '4f24a85aab00b98b53b93aa18f9050cfd58d37c3', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value }, hAsync("slot", { key: '4282c9c9226bc23d50f97a63477354872fa77f42', name: "expert", slot: "expert" })));
|
|
18816
18818
|
}
|
|
18817
18819
|
static get style() { return {
|
|
18818
|
-
default: defaultStyleCss$
|
|
18820
|
+
default: defaultStyleCss$G
|
|
18819
18821
|
}; }
|
|
18820
18822
|
static get cmpMeta() { return {
|
|
18821
18823
|
"$flags$": 297,
|
|
@@ -18841,7 +18843,7 @@ class KolButtonLink {
|
|
|
18841
18843
|
"_type": [1],
|
|
18842
18844
|
"_value": [8],
|
|
18843
18845
|
"getValue": [64],
|
|
18844
|
-
"
|
|
18846
|
+
"focus": [64]
|
|
18845
18847
|
},
|
|
18846
18848
|
"$listeners$": undefined,
|
|
18847
18849
|
"$lazyBundleId$": "-",
|
|
@@ -19114,9 +19116,9 @@ class AssociatedInputController {
|
|
|
19114
19116
|
}
|
|
19115
19117
|
|
|
19116
19118
|
class KolButtonWc {
|
|
19117
|
-
async
|
|
19119
|
+
async focus() {
|
|
19118
19120
|
var _a;
|
|
19119
|
-
(_a = this.buttonRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
19121
|
+
return Promise.resolve((_a = this.buttonRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
19120
19122
|
}
|
|
19121
19123
|
render() {
|
|
19122
19124
|
var _a;
|
|
@@ -19125,14 +19127,14 @@ class KolButtonWc {
|
|
|
19125
19127
|
const badgeText = this.state._accessKey || this.state._shortKey;
|
|
19126
19128
|
const isDisabled = this.state._disabled === true;
|
|
19127
19129
|
const hideLabel = this.state._hideLabel === true;
|
|
19128
|
-
return (hAsync(Host, { key: '
|
|
19130
|
+
return (hAsync(Host, { key: '99416124052f5a18686e2ea0fc8db9e9f9066a01' }, hAsync("button", { key: '07fe0e9be0846dd5609e707000dc9b6e86bdb348', ref: (ref) => (this.buttonRef = ref), accessKey: this.state._accessKey, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-haspopup": this._ariaHasPopup, "aria-keyshortcuts": this.state._shortKey, "aria-label": hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: clsx('kol-button', {
|
|
19129
19131
|
'kol-button--disabled': isDisabled,
|
|
19130
19132
|
[`kol-button--${this.state._buttonVariant}`]: this.state._buttonVariant !== 'custom',
|
|
19131
19133
|
'kol-button--inline': this.state._inline === true,
|
|
19132
19134
|
'kol-button--standalone': this.state._inline === false,
|
|
19133
19135
|
'kol-button--hide-label': hideLabel,
|
|
19134
19136
|
[this.state._customClass]: this.state._buttonVariant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
19135
|
-
}), disabled: isDisabled, id: this.state._id, name: this.state._name, onClick: this.onClick, onMouseDown: this.onMouseDown, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }, hAsync(KolSpanFc, { key: '
|
|
19137
|
+
}), disabled: isDisabled, id: this.state._id, name: this.state._name, onClick: this.onClick, onMouseDown: this.onMouseDown, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }, hAsync(KolSpanFc, { key: 'a72dca8e86940ccc9f9525b9f726dee12f6884a3', class: "kol-button__text", badgeText: badgeText, icons: this.state._icons, hideLabel: hideLabel, label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: '2d4a2a369fc496087ce41b021e771e7e9c421adf', name: "expert", slot: "expert" }))), hideLabel && (hAsync(KolTooltipWcTag, { key: 'a6f0f7f8b41875c2a98f1125120e38c22afb8658', ref: (ref) => (this.tooltipRef = ref), "aria-hidden": "true", hidden: hasExpertSlot, class: "kol-button__tooltip", _badgeText: badgeText, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' }))));
|
|
19136
19138
|
}
|
|
19137
19139
|
constructor(hostRef) {
|
|
19138
19140
|
registerInstance(this, hostRef);
|
|
@@ -19337,7 +19339,7 @@ class KolButtonWc {
|
|
|
19337
19339
|
"_value": [8],
|
|
19338
19340
|
"_buttonVariant": [1, "_button-variant"],
|
|
19339
19341
|
"state": [32],
|
|
19340
|
-
"
|
|
19342
|
+
"focus": [64]
|
|
19341
19343
|
},
|
|
19342
19344
|
"$listeners$": undefined,
|
|
19343
19345
|
"$lazyBundleId$": "-",
|
|
@@ -19345,7 +19347,7 @@ class KolButtonWc {
|
|
|
19345
19347
|
}; }
|
|
19346
19348
|
}
|
|
19347
19349
|
|
|
19348
|
-
const defaultStyleCss$
|
|
19350
|
+
const defaultStyleCss$F = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-card {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: grid;\n height: 100%;\n overflow: visible;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-template-areas: \"header close\" \"content content\";\n grid-template-columns: 1fr min-content;\n grid-template-rows: min-content 1fr;\n }\n .kol-card__header {\n align-self: start;\n grid-area: header;\n }\n .kol-card__content {\n align-self: stretch;\n grid-area: content;\n }\n .kol-card__close-button {\n grid-area: close;\n }\n}";
|
|
19349
19351
|
|
|
19350
19352
|
class KolCard {
|
|
19351
19353
|
constructor(hostRef) {
|
|
@@ -19357,7 +19359,7 @@ class KolCard {
|
|
|
19357
19359
|
return (hAsync(KolCardWcTag, { key: 'db950a543bc2f41a1e0786c9ac3d4cb0fce5cf97', _on: this._on, _hasCloser: this._hasCloser, _label: this._label, _level: this._level }, hAsync("slot", { key: 'f7ad1dd60427b5e2ae00f0e2260309a025d1ed44' })));
|
|
19358
19360
|
}
|
|
19359
19361
|
static get style() { return {
|
|
19360
|
-
default: defaultStyleCss$
|
|
19362
|
+
default: defaultStyleCss$F
|
|
19361
19363
|
}; }
|
|
19362
19364
|
static get cmpMeta() { return {
|
|
19363
19365
|
"$flags$": 297,
|
|
@@ -19399,7 +19401,7 @@ class KolCardWc {
|
|
|
19399
19401
|
this.validateOnValue = (value) => typeof value === 'object' && value !== null && typeof value.onClose === 'function';
|
|
19400
19402
|
}
|
|
19401
19403
|
render() {
|
|
19402
|
-
return (hAsync(Host, { key: '
|
|
19404
|
+
return (hAsync(Host, { key: 'de517413c990072e7e7faca2916c0c5243ad9495' }, hAsync("div", { key: '01f98d52d173677f5e314e2dce9425cc19cdaadc', "aria-labelledby": this.nonce, class: "kol-card", role: "group" }, hAsync(KolHeadingFc, { key: 'd2ce693140449135323ff1601af712982aae9325', class: "kol-card__header", id: this.nonce, level: this.state._level }, this.state._label), hAsync("div", { key: '155c2d42406dbb9ba02f6a29ec92f10d93b8c38d', class: "kol-card__content" }, hAsync("slot", { key: 'f3c23f1168273dbfbb515b1d83b7f087d9d019ca' })), this.state._hasCloser && (hAsync(KolButtonWcTag, { key: '7df6b94d298481022c30aae8712d8a8a9995b4e8', class: "kol-card__close-button", "data-testid": "card-close-button", _hideLabel: true, _icons: {
|
|
19403
19405
|
left: {
|
|
19404
19406
|
icon: 'kolicon-cross',
|
|
19405
19407
|
},
|
|
@@ -19932,15 +19934,15 @@ class ComboboxController extends InputIconController {
|
|
|
19932
19934
|
}
|
|
19933
19935
|
}
|
|
19934
19936
|
|
|
19935
|
-
const defaultStyleCss$D = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-option {\n line-height: 1.5;\n white-space: normal;\n cursor: pointer;\n overflow-wrap: break-word;\n }\n .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n cursor: none !important;\n }\n .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n cursor: not-allowed;\n }\n .kol-custom-suggestions-options-group {\n background-color: white;\n display: block;\n position: absolute;\n z-index: 2;\n max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n overflow-y: auto;\n list-style-type: none;\n }\n .kol-custom-suggestions-toggle {\n display: flex;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: default;\n }\n .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n cursor: not-allowed;\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-combobox__delete .kol-button {\n cursor: pointer;\n }\n .kol-combobox__delete--disabled .kol-button {\n cursor: not-allowed;\n }\n .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n cursor: pointer;\n }\n .kol-custom-suggestions-toggle--disabled {\n opacity: 0.5;\n }\n}";
|
|
19937
|
+
const defaultStyleCss$E = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-option {\n line-height: 1.5;\n white-space: normal;\n cursor: pointer;\n overflow-wrap: break-word;\n }\n .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n cursor: none !important;\n }\n .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n cursor: not-allowed;\n }\n .kol-custom-suggestions-options-group {\n background-color: white;\n display: block;\n position: absolute;\n z-index: 2;\n max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n overflow-y: auto;\n list-style-type: none;\n }\n .kol-custom-suggestions-toggle {\n display: flex;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n align-items: center;\n justify-content: center;\n cursor: default;\n }\n .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n cursor: not-allowed;\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-combobox__delete .kol-button {\n cursor: pointer;\n }\n .kol-combobox__delete--disabled .kol-button {\n cursor: not-allowed;\n }\n .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n cursor: pointer;\n }\n .kol-custom-suggestions-toggle--disabled {\n opacity: 0.5;\n }\n}";
|
|
19936
19938
|
|
|
19937
19939
|
class KolCombobox {
|
|
19938
19940
|
async getValue() {
|
|
19939
19941
|
return this.state._value;
|
|
19940
19942
|
}
|
|
19941
|
-
async
|
|
19943
|
+
async focus() {
|
|
19942
19944
|
var _a;
|
|
19943
|
-
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
19945
|
+
return Promise.resolve((_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus());
|
|
19944
19946
|
}
|
|
19945
19947
|
selectOption(option) {
|
|
19946
19948
|
var _a;
|
|
@@ -20047,15 +20049,15 @@ class KolCombobox {
|
|
|
20047
20049
|
}
|
|
20048
20050
|
render() {
|
|
20049
20051
|
const isDisabled = this.state._disabled === true;
|
|
20050
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
20052
|
+
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', {
|
|
20051
20053
|
'kol-combobox__delete--disabled': isDisabled,
|
|
20052
20054
|
}), _on: {
|
|
20053
20055
|
onClick: () => {
|
|
20054
20056
|
this.clearSelection();
|
|
20055
20057
|
},
|
|
20056
|
-
} })), hAsync(KolIconTag, { key: '
|
|
20058
|
+
} })), hAsync(KolIconTag, { key: 'e26e181a6c4f4a3fc1035823c88b35123447a10f', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
20057
20059
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
20058
|
-
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '
|
|
20060
|
+
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: 'c7d248cdee473e36a53d275a1b02a29cdaa9d77a', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
|
|
20059
20061
|
this._filteredSuggestions.length > 0 &&
|
|
20060
20062
|
this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { disabled: false, index: index, option: option, searchTerm: this.state._value, ref: (el) => {
|
|
20061
20063
|
if (el)
|
|
@@ -20332,7 +20334,7 @@ class KolCombobox {
|
|
|
20332
20334
|
"_value": ["validateValue"]
|
|
20333
20335
|
}; }
|
|
20334
20336
|
static get style() { return {
|
|
20335
|
-
default: defaultStyleCss$
|
|
20337
|
+
default: defaultStyleCss$E
|
|
20336
20338
|
}; }
|
|
20337
20339
|
static get cmpMeta() { return {
|
|
20338
20340
|
"$flags$": 297,
|
|
@@ -20364,7 +20366,7 @@ class KolCombobox {
|
|
|
20364
20366
|
"state": [32],
|
|
20365
20367
|
"inputHasFocus": [32],
|
|
20366
20368
|
"getValue": [64],
|
|
20367
|
-
"
|
|
20369
|
+
"focus": [64]
|
|
20368
20370
|
},
|
|
20369
20371
|
"$listeners$": [[0, "keydown", "handleKeyDown"], [8, "click", "handleWindowClick"], [1, "mousemove", "handleMouseEvent"], [8, "focusout", "handleFocusOut"], [8, "blur", "handleWindowBlur"]],
|
|
20370
20372
|
"$lazyBundleId$": "-",
|
|
@@ -20372,7 +20374,7 @@ class KolCombobox {
|
|
|
20372
20374
|
}; }
|
|
20373
20375
|
}
|
|
20374
20376
|
|
|
20375
|
-
const defaultStyleCss$
|
|
20377
|
+
const defaultStyleCss$D = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n @media (prefers-reduced-motion) {\n .collapsible__wrapper-animation, .collapsible__wrapper {\n transition-duration: 0s;\n }\n }\n .collapsible {\n /* @see https://github.com/public-ui/kolibri/issues/5952 */\n }\n @media print {\n :not(.collapsible--open) .collapsible__wrapper-animation {\n display: none;\n }\n }\n .collapsible__wrapper {\n /* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */\n transform: translateZ(0);\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.3s;\n }\n .collapsible__wrapper-animation {\n opacity: 0;\n transform: scaleY(0);\n transform-origin: top;\n min-height: 0;\n /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n visibility: hidden;\n transition: transform 0.3s, opacity 0.3s, visibility 0.3s;\n }\n .collapsible--open .collapsible__wrapper {\n grid-template-rows: 1fr;\n }\n .collapsible--open .collapsible__wrapper-animation {\n opacity: 1;\n transform: scaleY(1);\n visibility: visible;\n }\n .collapsible {\n /*\n * Inside a button, the caption text is always centered.\n * So we have to align the text to the left.\n */\n }\n .collapsible__heading-button button .kol-span {\n align-items: flex-start;\n }\n .collapsible--open:focus-within {\n position: relative;\n z-index: 100;\n }\n}\n@layer kol-component {\n .kol-details__heading-button {\n display: flex;\n }\n .kol-details__heading-button .kol-button {\n min-height: auto;\n }\n .kol-details__heading-button .kol-button .kol-span__label {\n border-bottom-color: grey;\n border-bottom-style: solid;\n }\n .collapsible--open .kol-details__heading-button .kol-icon::part(icon) {\n transform: rotate(90deg);\n }\n}";
|
|
20376
20378
|
|
|
20377
20379
|
class KolDetails {
|
|
20378
20380
|
constructor(hostRef) {
|
|
@@ -20401,9 +20403,9 @@ class KolDetails {
|
|
|
20401
20403
|
_on: {},
|
|
20402
20404
|
};
|
|
20403
20405
|
}
|
|
20404
|
-
async
|
|
20406
|
+
async focus() {
|
|
20405
20407
|
var _a;
|
|
20406
|
-
|
|
20408
|
+
return Promise.resolve((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
20407
20409
|
}
|
|
20408
20410
|
render() {
|
|
20409
20411
|
const { _open, _label, _disabled, _level } = this.state;
|
|
@@ -20428,7 +20430,7 @@ class KolDetails {
|
|
|
20428
20430
|
animationClass: `${rootClass}__wrapper-animation`,
|
|
20429
20431
|
},
|
|
20430
20432
|
};
|
|
20431
|
-
return (hAsync(KolCollapsibleFc, Object.assign({ key: '
|
|
20433
|
+
return (hAsync(KolCollapsibleFc, Object.assign({ key: '07bc611d260c54c24d5d46161db69ad2d77a85d0' }, props), hAsync("slot", { key: '1a188f043828b0a2cfad16b4e034606961a8722e' })));
|
|
20432
20434
|
}
|
|
20433
20435
|
validateDisabled(value) {
|
|
20434
20436
|
validateDisabled(this, value);
|
|
@@ -20463,7 +20465,7 @@ class KolDetails {
|
|
|
20463
20465
|
"_open": ["validateOpen"]
|
|
20464
20466
|
}; }
|
|
20465
20467
|
static get style() { return {
|
|
20466
|
-
default: defaultStyleCss$
|
|
20468
|
+
default: defaultStyleCss$D
|
|
20467
20469
|
}; }
|
|
20468
20470
|
static get cmpMeta() { return {
|
|
20469
20471
|
"$flags$": 297,
|
|
@@ -20475,7 +20477,7 @@ class KolDetails {
|
|
|
20475
20477
|
"_on": [16],
|
|
20476
20478
|
"_open": [1540],
|
|
20477
20479
|
"state": [32],
|
|
20478
|
-
"
|
|
20480
|
+
"focus": [64]
|
|
20479
20481
|
},
|
|
20480
20482
|
"$listeners$": undefined,
|
|
20481
20483
|
"$lazyBundleId$": "-",
|
|
@@ -20483,6 +20485,53 @@ class KolDetails {
|
|
|
20483
20485
|
}; }
|
|
20484
20486
|
}
|
|
20485
20487
|
|
|
20488
|
+
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}";
|
|
20489
|
+
|
|
20490
|
+
class KolDialog {
|
|
20491
|
+
constructor(hostRef) {
|
|
20492
|
+
registerInstance(this, hostRef);
|
|
20493
|
+
this.catchRef = (ref) => {
|
|
20494
|
+
this.dialogRef = ref;
|
|
20495
|
+
};
|
|
20496
|
+
this._width = '100%';
|
|
20497
|
+
this._variant = 'blank';
|
|
20498
|
+
}
|
|
20499
|
+
async openModal() {
|
|
20500
|
+
var _a;
|
|
20501
|
+
await ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.openModal());
|
|
20502
|
+
}
|
|
20503
|
+
async closeModal() {
|
|
20504
|
+
var _a;
|
|
20505
|
+
await ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.closeModal());
|
|
20506
|
+
}
|
|
20507
|
+
render() {
|
|
20508
|
+
return (hAsync(KolDialogWcTag, { key: '24744fff4cfebb9ef188926e5390064ce7ec6931', ref: this.catchRef, _label: this._label, _on: this._on, _variant: this._variant, _width: this._width }, hAsync("slot", { key: 'c8844dc7d6b9d16567ce400ae10f992018c6849d' })));
|
|
20509
|
+
}
|
|
20510
|
+
static get style() { return {
|
|
20511
|
+
default: defaultStyleCss$C
|
|
20512
|
+
}; }
|
|
20513
|
+
static get cmpMeta() { return {
|
|
20514
|
+
"$flags$": 297,
|
|
20515
|
+
"$tagName$": "kol-dialog",
|
|
20516
|
+
"$members$": {
|
|
20517
|
+
"_label": [1],
|
|
20518
|
+
"_on": [16],
|
|
20519
|
+
"_width": [1],
|
|
20520
|
+
"_variant": [1],
|
|
20521
|
+
"openModal": [64],
|
|
20522
|
+
"closeModal": [64]
|
|
20523
|
+
},
|
|
20524
|
+
"$listeners$": undefined,
|
|
20525
|
+
"$lazyBundleId$": "-",
|
|
20526
|
+
"$attrsToReflect$": []
|
|
20527
|
+
}; }
|
|
20528
|
+
}
|
|
20529
|
+
|
|
20530
|
+
const DialogVariantPropTypeOptions = ['blank', 'card'];
|
|
20531
|
+
const validateDialogVariant = (component, value) => {
|
|
20532
|
+
watchValidator(component, '_variant', (value) => typeof value === 'string' && DialogVariantPropTypeOptions.includes(value), new Set(DialogVariantPropTypeOptions), value);
|
|
20533
|
+
};
|
|
20534
|
+
|
|
20486
20535
|
let openTooltips = 0;
|
|
20487
20536
|
const tooltipOpened = () => {
|
|
20488
20537
|
openTooltips++;
|
|
@@ -20496,6 +20545,102 @@ const handleCancelOverlay = (event) => {
|
|
|
20496
20545
|
}
|
|
20497
20546
|
};
|
|
20498
20547
|
|
|
20548
|
+
class KolDialogWc {
|
|
20549
|
+
constructor(hostRef) {
|
|
20550
|
+
registerInstance(this, hostRef);
|
|
20551
|
+
this.on = {
|
|
20552
|
+
onClose: async () => {
|
|
20553
|
+
await this.closeModal();
|
|
20554
|
+
},
|
|
20555
|
+
};
|
|
20556
|
+
this._width = '100%';
|
|
20557
|
+
this._variant = 'blank';
|
|
20558
|
+
this.state = {
|
|
20559
|
+
_label: '',
|
|
20560
|
+
_width: '100%',
|
|
20561
|
+
};
|
|
20562
|
+
}
|
|
20563
|
+
disconnectedCallback() {
|
|
20564
|
+
void this.closeModal();
|
|
20565
|
+
}
|
|
20566
|
+
handleNativeCloseEvent() {
|
|
20567
|
+
var _a, _b;
|
|
20568
|
+
(_b = (_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
20569
|
+
if (this.host) {
|
|
20570
|
+
dispatchDomEvent(this.host, KolEvent.close);
|
|
20571
|
+
}
|
|
20572
|
+
}
|
|
20573
|
+
async openModal() {
|
|
20574
|
+
var _a;
|
|
20575
|
+
(_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.showModal();
|
|
20576
|
+
}
|
|
20577
|
+
async closeModal() {
|
|
20578
|
+
var _a, _b;
|
|
20579
|
+
(_b = (_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
20580
|
+
}
|
|
20581
|
+
render() {
|
|
20582
|
+
return (hAsync("dialog", { key: '288b2934310b2d34013f55e0f4636263e2be22aa', "aria-label": this.state._label, class: clsx('kol-dialog', 'kol-modal', {
|
|
20583
|
+
'kol-dialog__blank': this.state._variant === 'blank',
|
|
20584
|
+
'kol-dialog__card': this.state._variant === 'card',
|
|
20585
|
+
'kol-modal__blank': this.state._variant === 'blank',
|
|
20586
|
+
'kol-modal__card': this.state._variant === 'card',
|
|
20587
|
+
}), onCancel: handleCancelOverlay, onClose: this.handleNativeCloseEvent.bind(this), ref: (el) => {
|
|
20588
|
+
this.refDialog = el;
|
|
20589
|
+
}, style: {
|
|
20590
|
+
width: this.state._width,
|
|
20591
|
+
} }, 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' })))));
|
|
20592
|
+
}
|
|
20593
|
+
validateLabel(value) {
|
|
20594
|
+
validateLabel(this, value, {
|
|
20595
|
+
required: true,
|
|
20596
|
+
});
|
|
20597
|
+
}
|
|
20598
|
+
validateOn(value) {
|
|
20599
|
+
if (typeof value === 'object' && value !== null) {
|
|
20600
|
+
const callbacks = {};
|
|
20601
|
+
if (typeof value.onClose === 'function' || value.onClose === true) {
|
|
20602
|
+
callbacks.onClose = value.onClose;
|
|
20603
|
+
}
|
|
20604
|
+
setState(this, '_on', callbacks);
|
|
20605
|
+
}
|
|
20606
|
+
}
|
|
20607
|
+
validateWidth(value) {
|
|
20608
|
+
validateWidth(this, value);
|
|
20609
|
+
}
|
|
20610
|
+
validateVariant(value) {
|
|
20611
|
+
validateDialogVariant(this, value);
|
|
20612
|
+
}
|
|
20613
|
+
componentWillLoad() {
|
|
20614
|
+
this.validateLabel(this._label);
|
|
20615
|
+
this.validateOn(this._on);
|
|
20616
|
+
this.validateWidth(this._width);
|
|
20617
|
+
this.validateVariant(this._variant);
|
|
20618
|
+
}
|
|
20619
|
+
get host() { return getElement(this); }
|
|
20620
|
+
static get watchers() { return {
|
|
20621
|
+
"_label": ["validateLabel"],
|
|
20622
|
+
"_on": ["validateOn"],
|
|
20623
|
+
"_width": ["validateWidth"],
|
|
20624
|
+
"_variant": ["validateVariant"]
|
|
20625
|
+
}; }
|
|
20626
|
+
static get cmpMeta() { return {
|
|
20627
|
+
"$flags$": 260,
|
|
20628
|
+
"$tagName$": "kol-dialog-wc",
|
|
20629
|
+
"$members$": {
|
|
20630
|
+
"_label": [1],
|
|
20631
|
+
"_on": [16],
|
|
20632
|
+
"_width": [1],
|
|
20633
|
+
"_variant": [1],
|
|
20634
|
+
"state": [32],
|
|
20635
|
+
"openModal": [64],
|
|
20636
|
+
"closeModal": [64]
|
|
20637
|
+
},
|
|
20638
|
+
"$listeners$": undefined,
|
|
20639
|
+
"$lazyBundleId$": "-",
|
|
20640
|
+
"$attrsToReflect$": []
|
|
20641
|
+
}; }
|
|
20642
|
+
}
|
|
20643
|
+
|
|
20499
20644
|
const defaultStyleCss$B = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-card {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: grid;\n height: 100%;\n overflow: visible;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-template-areas: \"header close\" \"content content\";\n grid-template-columns: 1fr min-content;\n grid-template-rows: min-content 1fr;\n }\n .kol-card__header {\n align-self: start;\n grid-area: header;\n }\n .kol-card__content {\n align-self: stretch;\n grid-area: content;\n }\n .kol-card__close-button {\n grid-area: close;\n }\n .kol-drawer__dialog {\n padding: 0;\n border: none;\n }\n .kol-drawer__wrapper {\n position: fixed;\n overflow: auto;\n }\n .kol-drawer__wrapper--left, .kol-drawer__wrapper--right {\n top: 0;\n max-width: 100vw;\n height: 100vh;\n }\n .kol-drawer__wrapper--left .kol-drawer__content, .kol-drawer__wrapper--right .kol-drawer__content {\n height: 100%;\n }\n .kol-drawer__wrapper--left {\n left: 0;\n }\n .kol-drawer__wrapper--right {\n right: 0;\n }\n .kol-drawer__wrapper--bottom, .kol-drawer__wrapper--top {\n left: 0;\n width: 100vw;\n max-height: 100vh;\n }\n .kol-drawer__wrapper--bottom .kol-drawer__content, .kol-drawer__wrapper--top .kol-drawer__content {\n width: 100%;\n }\n .kol-drawer__wrapper--bottom {\n bottom: 0;\n }\n .kol-drawer__wrapper--top {\n top: 0;\n }\n .kol-drawer__content {\n position: relative;\n }\n}";
|
|
20500
20645
|
|
|
20501
20646
|
class KolDrawer {
|
|
@@ -20542,7 +20687,7 @@ class KolDrawer {
|
|
|
20542
20687
|
} }, hAsync("div", { class: "kol-drawer__content" }, hAsync("slot", null))));
|
|
20543
20688
|
}
|
|
20544
20689
|
render() {
|
|
20545
|
-
return (hAsync(Host, { key: '
|
|
20690
|
+
return (hAsync(Host, { key: 'cfa97c9b25f63360c569b66dae0d10fe881e7964', class: "kol-drawer" }, hAsync("dialog", { key: 'a4baf31338ad1b3f95a51ab35ac260f23b0e891e', "aria-label": this.state._label, class: "kol-drawer__dialog", onCancel: handleCancelOverlay, ref: this.getRef }, this.renderDialogContent())));
|
|
20546
20691
|
}
|
|
20547
20692
|
validateLabel(value) {
|
|
20548
20693
|
validateLabel(this, value, {
|
|
@@ -20695,7 +20840,7 @@ class KolForm {
|
|
|
20695
20840
|
}
|
|
20696
20841
|
render() {
|
|
20697
20842
|
const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
|
|
20698
|
-
return (hAsync(Host, { key: '
|
|
20843
|
+
return (hAsync(Host, { key: '24abdec4e796efe805b3e29fa9f2e4d0189e64d4' }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
|
|
20699
20844
|
}
|
|
20700
20845
|
scrollToErrorList() {
|
|
20701
20846
|
var _a;
|
|
@@ -20785,7 +20930,7 @@ class KolHeading {
|
|
|
20785
20930
|
}
|
|
20786
20931
|
render() {
|
|
20787
20932
|
const { _secondaryHeadline, _label, _level } = this.state;
|
|
20788
|
-
return (hAsync(KolHeadingFc, { key: '
|
|
20933
|
+
return (hAsync(KolHeadingFc, { key: 'e0215bf6a8c6689b9661f08a0216f36bf6d2f332', secondaryHeadline: _secondaryHeadline, level: _level }, _label, hAsync("slot", { key: '1cd10de7df8a97779b57dd91247f6d3505e10f61', name: "expert", slot: "expert" })));
|
|
20789
20934
|
}
|
|
20790
20935
|
static get watchers() { return {
|
|
20791
20936
|
"_label": ["validateLabel"],
|
|
@@ -20830,12 +20975,12 @@ const bem = c();
|
|
|
20830
20975
|
const BEM_CLASS_ICON = bem('kol-icon');
|
|
20831
20976
|
const BEM_CLASS_ICON__ICON = bem('kol-icon', 'icon');
|
|
20832
20977
|
|
|
20833
|
-
const defaultStyleCss$y = "/* forward the rem function */\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=
|
|
20978
|
+
const defaultStyleCss$y = "/* forward the rem function */\n@font-face {\n font-family: \"kolicons\";\n src: url(\"kolicons.eot?t=1766411598417\"); /* IE9*/\n src: url(\"kolicons.eot?t=1766411598417#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1766411598417\") format(\"woff2\"), url(\"kolicons.woff?t=1766411598417\") format(\"woff\"), url(\"kolicons.ttf?t=1766411598417\") format(\"truetype\"), url(\"kolicons.svg?t=1766411598417#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}";
|
|
20834
20979
|
|
|
20835
20980
|
class KolIcon {
|
|
20836
20981
|
render() {
|
|
20837
20982
|
const hasAriaLabel = this.state._label.length > 0;
|
|
20838
|
-
return (hAsync(Host, { key: '
|
|
20983
|
+
return (hAsync(Host, { key: '0310e88acca66642d5a2f1b0783c4b51e7d57178', exportparts: "icon", class: BEM_CLASS_ICON }, hAsync("i", { key: 'defda52dda0896dfc3aa3271e34a679cad2d81de', "aria-hidden": hasAriaLabel ? undefined : 'true', "aria-label": hasAriaLabel ? this.state._label : undefined, class: clsx(BEM_CLASS_ICON__ICON, this.state._icons), part: "icon", role: hasAriaLabel ? 'img' : 'presentation' })));
|
|
20839
20984
|
}
|
|
20840
20985
|
constructor(hostRef) {
|
|
20841
20986
|
registerInstance(this, hostRef);
|
|
@@ -20912,7 +21057,7 @@ class KolImage {
|
|
|
20912
21057
|
this.validateSrcset(this._srcset);
|
|
20913
21058
|
}
|
|
20914
21059
|
render() {
|
|
20915
|
-
return (hAsync("img", { key: '
|
|
21060
|
+
return (hAsync("img", { key: 'c17e012e1bef61d097f2b64d9b22714ef02a793e', class: "kol-image", alt: this.state._alt, loading: this.state._loading, sizes: this.state._sizes, src: this.state._src, srcset: this.state._srcset }));
|
|
20916
21061
|
}
|
|
20917
21062
|
static get watchers() { return {
|
|
20918
21063
|
"_alt": ["validateAlt"],
|
|
@@ -21206,9 +21351,9 @@ class KolInputCheckbox {
|
|
|
21206
21351
|
async getValue() {
|
|
21207
21352
|
return this.getModelValue();
|
|
21208
21353
|
}
|
|
21209
|
-
async
|
|
21354
|
+
async focus() {
|
|
21210
21355
|
var _a;
|
|
21211
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
21356
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
21212
21357
|
}
|
|
21213
21358
|
getFormFieldProps() {
|
|
21214
21359
|
return {
|
|
@@ -21257,7 +21402,7 @@ class KolInputCheckbox {
|
|
|
21257
21402
|
return this.state._icons.unchecked;
|
|
21258
21403
|
}
|
|
21259
21404
|
render() {
|
|
21260
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
21405
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'ec5131cbe333e9c70beb3093e6049cd2a7b29ee3' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(FieldControlStateWrapper, Object.assign({ key: '9ca2d1404c837728bc0aa590ae41c9a4f2922286' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(CheckboxStateWrapper, Object.assign({ key: 'f8611e8d234ba85cacf861bb4ef328bfdff24b3f' }, this.getInputProps())))));
|
|
21261
21406
|
}
|
|
21262
21407
|
constructor(hostRef) {
|
|
21263
21408
|
registerInstance(this, hostRef);
|
|
@@ -21431,7 +21576,7 @@ class KolInputCheckbox {
|
|
|
21431
21576
|
"state": [32],
|
|
21432
21577
|
"inputHasFocus": [32],
|
|
21433
21578
|
"getValue": [64],
|
|
21434
|
-
"
|
|
21579
|
+
"focus": [64]
|
|
21435
21580
|
},
|
|
21436
21581
|
"$listeners$": undefined,
|
|
21437
21582
|
"$lazyBundleId$": "-",
|
|
@@ -21469,9 +21614,9 @@ class KolInputColor {
|
|
|
21469
21614
|
var _a;
|
|
21470
21615
|
return (_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.value;
|
|
21471
21616
|
}
|
|
21472
|
-
async
|
|
21617
|
+
async focus() {
|
|
21473
21618
|
var _a;
|
|
21474
|
-
(_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.focus();
|
|
21619
|
+
return Promise.resolve((_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.focus());
|
|
21475
21620
|
}
|
|
21476
21621
|
get hasSuggestions() {
|
|
21477
21622
|
return Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
@@ -21495,7 +21640,7 @@ class KolInputColor {
|
|
|
21495
21640
|
return Object.assign(Object.assign({ state: Object.assign(Object.assign({}, other), { _suggestions: [] }) }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus });
|
|
21496
21641
|
}
|
|
21497
21642
|
render() {
|
|
21498
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
21643
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'd7f090923ef2b8df82a290ee833f2df41827e0a5' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'fb34b66b8a3e2b738126404f243f3e8d8f60518d', state: this.state, class: "kol-input-color__inputs-wrapper" }, hAsync("div", { key: '411e03c780c12cb63d2a8a845d98246dc6e1d988', class: "kol-input-color__inputs-wrapper" }, hAsync(InputStateWrapper, Object.assign({ key: '36e1c82a36db19f6c9d099bfa59c9a700bc9e52a', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), hAsync(InputStateWrapper, Object.assign({ key: 'f78dc8e52058280fd86bc860ce5e5d6156fd2dc2', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
|
|
21499
21644
|
}
|
|
21500
21645
|
constructor(hostRef) {
|
|
21501
21646
|
registerInstance(this, hostRef);
|
|
@@ -21664,7 +21809,7 @@ class KolInputColor {
|
|
|
21664
21809
|
"state": [32],
|
|
21665
21810
|
"inputHasFocus": [32],
|
|
21666
21811
|
"getValue": [64],
|
|
21667
|
-
"
|
|
21812
|
+
"focus": [64]
|
|
21668
21813
|
},
|
|
21669
21814
|
"$listeners$": undefined,
|
|
21670
21815
|
"$lazyBundleId$": "-",
|
|
@@ -21828,9 +21973,9 @@ class KolInputDate {
|
|
|
21828
21973
|
var _a;
|
|
21829
21974
|
return this.inputRef && this.remapValue((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value);
|
|
21830
21975
|
}
|
|
21831
|
-
async
|
|
21976
|
+
async focus() {
|
|
21832
21977
|
var _a;
|
|
21833
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
21978
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
21834
21979
|
}
|
|
21835
21980
|
async reset() {
|
|
21836
21981
|
this.state = Object.assign(Object.assign({}, this.state), { _value: null });
|
|
@@ -21870,7 +22015,7 @@ class KolInputDate {
|
|
|
21870
22015
|
return Object.assign(Object.assign({ ref: this.catchRef, state: this.state }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onChange: this.onChange, onInput: this.onInput });
|
|
21871
22016
|
}
|
|
21872
22017
|
render() {
|
|
21873
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22018
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '59e86a706c43960542852d52a626bef671dffa23' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b54ca89fe36ea8ffd5bf34a8cffb4069cd2988e4', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'ac2aff3346ffe47c2737af4edba6a80d172135d5' }, this.getInputProps())))));
|
|
21874
22019
|
}
|
|
21875
22020
|
constructor(hostRef) {
|
|
21876
22021
|
registerInstance(this, hostRef);
|
|
@@ -22087,7 +22232,7 @@ class KolInputDate {
|
|
|
22087
22232
|
"state": [32],
|
|
22088
22233
|
"inputHasFocus": [32],
|
|
22089
22234
|
"getValue": [64],
|
|
22090
|
-
"
|
|
22235
|
+
"focus": [64],
|
|
22091
22236
|
"reset": [64]
|
|
22092
22237
|
},
|
|
22093
22238
|
"$listeners$": undefined,
|
|
@@ -22221,9 +22366,9 @@ class KolInputEmail {
|
|
|
22221
22366
|
var _a;
|
|
22222
22367
|
return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
|
|
22223
22368
|
}
|
|
22224
|
-
async
|
|
22369
|
+
async focus() {
|
|
22225
22370
|
var _a;
|
|
22226
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
22371
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
22227
22372
|
}
|
|
22228
22373
|
getFormFieldProps() {
|
|
22229
22374
|
return {
|
|
@@ -22247,7 +22392,7 @@ class KolInputEmail {
|
|
|
22247
22392
|
} });
|
|
22248
22393
|
}
|
|
22249
22394
|
render() {
|
|
22250
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22395
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'b928aefae94934a5228743ae822ae084a06020ae' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '1ac6b8e275457032564a4cbcd637832d1dbbd7d1', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '47435cb931d3da58fa1c84db183d04037c6fdb6b' }, this.getInputProps())))));
|
|
22251
22396
|
}
|
|
22252
22397
|
constructor(hostRef) {
|
|
22253
22398
|
registerInstance(this, hostRef);
|
|
@@ -22442,7 +22587,7 @@ class KolInputEmail {
|
|
|
22442
22587
|
"state": [32],
|
|
22443
22588
|
"inputHasFocus": [32],
|
|
22444
22589
|
"getValue": [64],
|
|
22445
|
-
"
|
|
22590
|
+
"focus": [64]
|
|
22446
22591
|
},
|
|
22447
22592
|
"$listeners$": undefined,
|
|
22448
22593
|
"$lazyBundleId$": "-",
|
|
@@ -22479,9 +22624,9 @@ class KolInputFile {
|
|
|
22479
22624
|
var _a;
|
|
22480
22625
|
return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.files;
|
|
22481
22626
|
}
|
|
22482
|
-
async
|
|
22627
|
+
async focus() {
|
|
22483
22628
|
var _a;
|
|
22484
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
22629
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
22485
22630
|
}
|
|
22486
22631
|
async reset() {
|
|
22487
22632
|
this.controller.setFormAssociatedValue('');
|
|
@@ -22509,7 +22654,7 @@ class KolInputFile {
|
|
|
22509
22654
|
} });
|
|
22510
22655
|
}
|
|
22511
22656
|
render() {
|
|
22512
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22657
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'a14988909e629c6489b2ce2f407dda7bae698bf3' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'ba6804552442038f26ce7d4addd67ef09a0b15fd', state: this.state }, hAsync("span", { key: 'bde71a76d0c08a6b4c6147f5668c0e2c15089081', class: clsx('kol-input-container__filename', { 'kol-input-container__filename--has-file': this.hasFileSelected }) }, this.filename), hAsync(InputStateWrapper, Object.assign({ key: '3abd09ca85cfdaee144eb7166eece0a71e8312d5' }, this.getInputProps())), hAsync(KolButtonWcTag, { key: '7736d06eb59743e25bfad68b90cf8d7cf48b85db', class: "kol-input-container__button", _label: this.translateDataBrowseText, _buttonVariant: "primary", _disabled: this._disabled }))));
|
|
22513
22658
|
}
|
|
22514
22659
|
constructor(hostRef) {
|
|
22515
22660
|
registerInstance(this, hostRef);
|
|
@@ -22696,7 +22841,7 @@ class KolInputFile {
|
|
|
22696
22841
|
"state": [32],
|
|
22697
22842
|
"inputHasFocus": [32],
|
|
22698
22843
|
"getValue": [64],
|
|
22699
|
-
"
|
|
22844
|
+
"focus": [64],
|
|
22700
22845
|
"reset": [64]
|
|
22701
22846
|
},
|
|
22702
22847
|
"$listeners$": undefined,
|
|
@@ -22758,9 +22903,9 @@ class KolInputNumber {
|
|
|
22758
22903
|
async getValue() {
|
|
22759
22904
|
return this.remapValue(this.state._value);
|
|
22760
22905
|
}
|
|
22761
|
-
async
|
|
22906
|
+
async focus() {
|
|
22762
22907
|
var _a;
|
|
22763
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
22908
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
22764
22909
|
}
|
|
22765
22910
|
setInitialValueType(value) {
|
|
22766
22911
|
if (this.controller.isNumberString(value)) {
|
|
@@ -22822,7 +22967,7 @@ class KolInputNumber {
|
|
|
22822
22967
|
}, disabled: this._disabled || this._readOnly }, hAsync(KolIconFc, { icons: "kolicon-minus", label: "" })));
|
|
22823
22968
|
}
|
|
22824
22969
|
render() {
|
|
22825
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
22970
|
+
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())))));
|
|
22826
22971
|
}
|
|
22827
22972
|
constructor(hostRef) {
|
|
22828
22973
|
registerInstance(this, hostRef);
|
|
@@ -23018,7 +23163,7 @@ class KolInputNumber {
|
|
|
23018
23163
|
"_initialValueType": [32],
|
|
23019
23164
|
"inputHasFocus": [32],
|
|
23020
23165
|
"getValue": [64],
|
|
23021
|
-
"
|
|
23166
|
+
"focus": [64]
|
|
23022
23167
|
},
|
|
23023
23168
|
"$listeners$": undefined,
|
|
23024
23169
|
"$lazyBundleId$": "-",
|
|
@@ -23033,9 +23178,9 @@ class KolInputPassword {
|
|
|
23033
23178
|
var _a;
|
|
23034
23179
|
return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
|
|
23035
23180
|
}
|
|
23036
|
-
async
|
|
23181
|
+
async focus() {
|
|
23037
23182
|
var _a;
|
|
23038
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23183
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
23039
23184
|
}
|
|
23040
23185
|
getFormFieldProps() {
|
|
23041
23186
|
return {
|
|
@@ -23069,7 +23214,7 @@ class KolInputPassword {
|
|
|
23069
23214
|
}, icon: `${this._passwordVisible ? 'kolicon-eye-closed' : 'kolicon-eye'}`, disabled: this._disabled }));
|
|
23070
23215
|
}
|
|
23071
23216
|
render() {
|
|
23072
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23217
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'd6361d33d0044122bb523d59e9f40ab85c189586' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'a814d107185bbd10e0c1a877efbeb0099479e532', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(InputStateWrapper, Object.assign({ key: '446355c1043fd63b01502ec193a65c5087ccd061' }, this.getInputProps())))));
|
|
23073
23218
|
}
|
|
23074
23219
|
constructor(hostRef) {
|
|
23075
23220
|
registerInstance(this, hostRef);
|
|
@@ -23266,7 +23411,7 @@ class KolInputPassword {
|
|
|
23266
23411
|
"_passwordVisible": [32],
|
|
23267
23412
|
"inputHasFocus": [32],
|
|
23268
23413
|
"getValue": [64],
|
|
23269
|
-
"
|
|
23414
|
+
"focus": [64]
|
|
23270
23415
|
},
|
|
23271
23416
|
"$listeners$": undefined,
|
|
23272
23417
|
"$lazyBundleId$": "-",
|
|
@@ -23318,9 +23463,9 @@ class KolInputRadio {
|
|
|
23318
23463
|
async getValue() {
|
|
23319
23464
|
return this._value;
|
|
23320
23465
|
}
|
|
23321
|
-
async
|
|
23466
|
+
async focus() {
|
|
23322
23467
|
var _a;
|
|
23323
|
-
(_a = this.getFocusableInput()) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23468
|
+
return Promise.resolve((_a = this.getFocusableInput()) === null || _a === void 0 ? void 0 : _a.focus());
|
|
23324
23469
|
}
|
|
23325
23470
|
getFocusableInput() {
|
|
23326
23471
|
const options = this.state._options;
|
|
@@ -23357,7 +23502,7 @@ class KolInputRadio {
|
|
|
23357
23502
|
};
|
|
23358
23503
|
}
|
|
23359
23504
|
render() {
|
|
23360
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23505
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '92d8248e7753a62c69731e9df04859569cdced72' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
|
|
23361
23506
|
}
|
|
23362
23507
|
calculateDisabled(option) {
|
|
23363
23508
|
return Boolean(this.state._disabled) || Boolean(option.disabled);
|
|
@@ -23554,7 +23699,7 @@ class KolInputRadio {
|
|
|
23554
23699
|
"state": [32],
|
|
23555
23700
|
"inputHasFocus": [32],
|
|
23556
23701
|
"getValue": [64],
|
|
23557
|
-
"
|
|
23702
|
+
"focus": [64]
|
|
23558
23703
|
},
|
|
23559
23704
|
"$listeners$": undefined,
|
|
23560
23705
|
"$lazyBundleId$": "-",
|
|
@@ -23601,9 +23746,9 @@ class InputRangeController extends InputIconController {
|
|
|
23601
23746
|
const defaultStyleCss$o = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n display: flex;\n place-items: center;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__closer {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n display: grid;\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n content: \"*\"/\"\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\"/\"\";\n }\n .kol-input-container {\n background-color: transparent;\n display: grid;\n width: 100%;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n align-items: center;\n grid-template-columns: 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input {\n background-color: transparent;\n width: 100%;\n min-width: var(--a11y-min-size);\n }\n .kol-input:focus {\n outline: none;\n }\n .kol-input-range__inputs-wrapper {\n display: flex;\n flex-grow: 1;\n flex-direction: row;\n align-items: center;\n }\n .kol-input-range__input--number {\n width: var(--kolibri-input-range--input-number--width);\n }\n .kol-input-range__input--range {\n background-color: #d3d3d3;\n display: inline-block;\n /* Design-Hack - related with flex-grow */\n width: 0;\n height: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n padding: 0;\n flex-grow: 1;\n line-height: 1.5;\n appearance: none;\n border: 1px solid #000;\n }\n .kol-input-range__input:not(:disabled).kol-input-range__input--range::-webkit-slider-thumb {\n cursor: pointer;\n }\n .kol-input-range__input--range::-webkit-slider-thumb {\n background-color: #000;\n border-radius: 20px;\n width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n -webkit-appearance: none;\n }\n @media (prefers-contrast: more) or (forced-colors: active) {\n .kol-input-range__input--range::-webkit-slider-thumb {\n outline: 1px solid currentColor;\n }\n }\n .kol-input-range__input:not(:disabled).kol-input-range__input--range::-moz-range-thumb {\n cursor: pointer;\n }\n .kol-input-range__input--range::-moz-range-thumb {\n background-color: #000;\n border-radius: 20px;\n width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n -moz-appearance: none;\n }\n}";
|
|
23602
23747
|
|
|
23603
23748
|
class KolInputRange {
|
|
23604
|
-
async
|
|
23749
|
+
async focus() {
|
|
23605
23750
|
var _a;
|
|
23606
|
-
(_a = this.refInputNumber) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23751
|
+
return Promise.resolve((_a = this.refInputNumber) === null || _a === void 0 ? void 0 : _a.focus());
|
|
23607
23752
|
}
|
|
23608
23753
|
getSanitizedFloatValue(value) {
|
|
23609
23754
|
const floatValue = parseFloat(value);
|
|
@@ -23673,7 +23818,7 @@ class KolInputRange {
|
|
|
23673
23818
|
const inputsWrapperStyle = {
|
|
23674
23819
|
'--kolibri-input-range--input-number--width': `calc(${String(this.state._max).length}ch + 2em)`,
|
|
23675
23820
|
};
|
|
23676
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
23821
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '128521202cad30daac6a5e334513aad511029f3b' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '98d1c89be7699bb28677a790637886806715d8e0', state: this.state }, hAsync("div", { key: '9627b928c7ee9e73ce5f480497ad17c7a033b62c', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, hAsync(InputStateWrapper, Object.assign({ key: 'c36646209ed76278516782cb8ecd3548cb3c37e6', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), hAsync(InputStateWrapper, Object.assign({ key: 'ef934123d89354c534fca7af38ad10219cc82ef6', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && hAsync(SuggestionsFc, { key: '3a2b0903e406bcc81271762351fc2464067fdc0a', id: this.state._id, suggestions: this.state._suggestions }))));
|
|
23677
23822
|
}
|
|
23678
23823
|
constructor(hostRef) {
|
|
23679
23824
|
registerInstance(this, hostRef);
|
|
@@ -23858,7 +24003,7 @@ class KolInputRange {
|
|
|
23858
24003
|
"state": [32],
|
|
23859
24004
|
"_initialValueType": [32],
|
|
23860
24005
|
"inputHasFocus": [32],
|
|
23861
|
-
"
|
|
24006
|
+
"focus": [64],
|
|
23862
24007
|
"getValue": [64]
|
|
23863
24008
|
},
|
|
23864
24009
|
"$listeners$": undefined,
|
|
@@ -23874,9 +24019,9 @@ class KolInputText {
|
|
|
23874
24019
|
var _a;
|
|
23875
24020
|
return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
|
|
23876
24021
|
}
|
|
23877
|
-
async
|
|
24022
|
+
async focus() {
|
|
23878
24023
|
var _a;
|
|
23879
|
-
(_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
24024
|
+
return Promise.resolve((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
23880
24025
|
}
|
|
23881
24026
|
async selectionStart() {
|
|
23882
24027
|
var _a;
|
|
@@ -23919,7 +24064,7 @@ class KolInputText {
|
|
|
23919
24064
|
return Object.assign(Object.assign({ ref: this.catchRef, state: this.state, ariaDescribedBy }, this.controller.onFacade), { onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown });
|
|
23920
24065
|
}
|
|
23921
24066
|
render() {
|
|
23922
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
24067
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'ec2cfd8fbf4c25e0c67c2a40dac12689abf21ebc' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '4dbf08a6efd9e6aeba414911e28eb542f1a9f931', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'e72fa71c0713918915a4c99ff36624c413dc2709' }, this.getInputProps())))));
|
|
23923
24068
|
}
|
|
23924
24069
|
constructor(hostRef) {
|
|
23925
24070
|
registerInstance(this, hostRef);
|
|
@@ -24139,7 +24284,7 @@ class KolInputText {
|
|
|
24139
24284
|
"state": [32],
|
|
24140
24285
|
"inputHasFocus": [32],
|
|
24141
24286
|
"getValue": [64],
|
|
24142
|
-
"
|
|
24287
|
+
"focus": [64],
|
|
24143
24288
|
"selectionStart": [64],
|
|
24144
24289
|
"selectioconEnd": [64],
|
|
24145
24290
|
"setSelectionRange": [64],
|
|
@@ -24184,7 +24329,7 @@ class KolKolibri {
|
|
|
24184
24329
|
}
|
|
24185
24330
|
render() {
|
|
24186
24331
|
const fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
|
|
24187
|
-
return (hAsync("svg", { key: '
|
|
24332
|
+
return (hAsync("svg", { key: '4c7a91b347f1030b6243bcd73fe80f18ea4870d9', class: "kol-kolibri", role: "img", "aria-label": this.translateKolibriLogo, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", fill: fillColor }, hAsync("path", { key: 'acfbbaa7bac5f630eabf483f3072c293d23ced9c', d: "M353 322L213 304V434L353 322Z" }), hAsync("path", { key: '950473ab86c2b6101bef184b6388a0c9a313fbb3', d: "M209 564V304L149 434L209 564Z" }), hAsync("path", { key: '113e568b1cbf311a9f1c656526d7712c6a0dc129', d: "M357 316L417 250L361 210L275 244L357 316Z" }), hAsync("path", { key: '23b033e7e9884099469fea1ca2fef1af56a2ea29', d: "M329 218L237 92L250 222L272 241L329 218Z" }), hAsync("path", { key: '61c8946c0a73d39039b3008f29a9f1750ed90af2', d: "M353 318L35 36L213 300L353 318Z" }), hAsync("path", { key: '8c76c669b7edbfdada18a00e82c8760c3eb55987', d: "M391 286L565 272L421 252L391 286Z" }), this.state._labeled === true && (hAsync("text", { key: '01f6d92e065a1b17072de2438671cdd208a416f2', class: "kol-kolibri__text", x: "250", y: "525", fill: fillColor }, "KoliBri"))));
|
|
24188
24333
|
}
|
|
24189
24334
|
validateColor(value) {
|
|
24190
24335
|
validateColor(this, value, {
|
|
@@ -24237,12 +24382,12 @@ class KolLink {
|
|
|
24237
24382
|
this._inline = true;
|
|
24238
24383
|
this._tooltipAlign = 'right';
|
|
24239
24384
|
}
|
|
24240
|
-
async
|
|
24385
|
+
async focus() {
|
|
24241
24386
|
var _a;
|
|
24242
|
-
|
|
24387
|
+
return Promise.resolve((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
24243
24388
|
}
|
|
24244
24389
|
render() {
|
|
24245
|
-
return (hAsync(KolLinkWcTag, { key: '
|
|
24390
|
+
return (hAsync(KolLinkWcTag, { key: '5e0f4af8177fdafc0ba16a394edc95f5d6893700', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _inline: this._inline, _label: this._label, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: 'c8d72e1786756ae591534397e749430e1c45d875', name: "expert", slot: "expert" })));
|
|
24246
24391
|
}
|
|
24247
24392
|
static get style() { return {
|
|
24248
24393
|
default: defaultStyleCss$l
|
|
@@ -24268,7 +24413,7 @@ class KolLink {
|
|
|
24268
24413
|
"_shortKey": [1, "_short-key"],
|
|
24269
24414
|
"_target": [1],
|
|
24270
24415
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
24271
|
-
"
|
|
24416
|
+
"focus": [64]
|
|
24272
24417
|
},
|
|
24273
24418
|
"$listeners$": undefined,
|
|
24274
24419
|
"$lazyBundleId$": "-",
|
|
@@ -24289,12 +24434,12 @@ class KolLinkButton {
|
|
|
24289
24434
|
this._tooltipAlign = 'right';
|
|
24290
24435
|
this._variant = 'normal';
|
|
24291
24436
|
}
|
|
24292
|
-
async
|
|
24437
|
+
async focus() {
|
|
24293
24438
|
var _a;
|
|
24294
|
-
|
|
24439
|
+
return Promise.resolve((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
24295
24440
|
}
|
|
24296
24441
|
render() {
|
|
24297
|
-
return (hAsync(KolLinkWcTag, { key: '
|
|
24442
|
+
return (hAsync(KolLinkWcTag, { key: 'a9d694a90a5814edc15412794c3af252fdbc7665', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign, _buttonVariant: this._variant }, hAsync("slot", { key: 'fbbcf6a131b99d68279875ee92e8f1a5273270c9', name: "expert", slot: "expert" })));
|
|
24298
24443
|
}
|
|
24299
24444
|
static get style() { return {
|
|
24300
24445
|
default: defaultStyleCss$k
|
|
@@ -24320,7 +24465,7 @@ class KolLinkButton {
|
|
|
24320
24465
|
"_target": [1],
|
|
24321
24466
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
24322
24467
|
"_variant": [1],
|
|
24323
|
-
"
|
|
24468
|
+
"focus": [64]
|
|
24324
24469
|
},
|
|
24325
24470
|
"$listeners$": undefined,
|
|
24326
24471
|
"$lazyBundleId$": "-",
|
|
@@ -24387,16 +24532,16 @@ class KolLinkWc {
|
|
|
24387
24532
|
_icons: {},
|
|
24388
24533
|
};
|
|
24389
24534
|
}
|
|
24390
|
-
async
|
|
24535
|
+
async focus() {
|
|
24391
24536
|
var _a;
|
|
24392
|
-
(_a = this.anchorRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
24537
|
+
return Promise.resolve((_a = this.anchorRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
24393
24538
|
}
|
|
24394
24539
|
render() {
|
|
24395
24540
|
var _a;
|
|
24396
24541
|
const { isExternal, tagAttrs } = this.getRenderValues();
|
|
24397
24542
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
24398
24543
|
const ariaDescription = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim();
|
|
24399
|
-
return (hAsync(Host, { key: '
|
|
24544
|
+
return (hAsync(Host, { key: '036d5449e5e5ba234434e744d8af66052329a192' }, hAsync("a", Object.assign({ key: 'b20d668b61b1f0c279f5cf37d434927c69478891', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": typeof this.state._ariaExpanded === 'boolean' ? String(this.state._ariaExpanded) : undefined, "aria-owns": this.state._ariaOwns, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
|
|
24400
24545
|
? `${this.state._label}${isExternal ? ` (${this.translateOpenLinkInTab})` : ''}`
|
|
24401
24546
|
: undefined, "aria-keyshortcuts": this.state._shortKey, class: clsx('kol-link', {
|
|
24402
24547
|
'kol-link--disabled': this.state._disabled === true,
|
|
@@ -24406,7 +24551,7 @@ class KolLinkWc {
|
|
|
24406
24551
|
'kol-link--inline': this.state._inline === true,
|
|
24407
24552
|
'kol-link--standalone': this.state._inline === false,
|
|
24408
24553
|
[this.state._customClass]: this.state._buttonVariant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
24409
|
-
}) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: '
|
|
24554
|
+
}) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: '90a4bc4ffd0a6b87c9097120d3539bc69bdda156', class: "kol-link__text", badgeText: this.state._accessKey || this.state._shortKey, icons: this.state._icons, hideLabel: this.state._hideLabel, label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: '1aca2a1ed6caf2a68f7f6260b328ec7b6c993794', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: 'c20d6e6b9e7d09c6ff48a059f9ec0388076c721e', class: "kol-link__icon", _label: this.state._hideLabel ? '' : this.translateOpenLinkInTab, _icons: 'kolicon-link-external', "aria-hidden": this.state._hideLabel }))), this.state._hideLabel === true && (hAsync(KolTooltipWcTag, { key: '5f5b325f8e61e71f666bf45e067b1a487a8e296e', "aria-hidden": "true", class: "kol-link__tooltip", ref: (ref) => (this.tooltipRef = ref), hidden: hasExpertSlot, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href }))));
|
|
24410
24555
|
}
|
|
24411
24556
|
validateAccessKey(value) {
|
|
24412
24557
|
validateAccessKey(this, value);
|
|
@@ -24557,7 +24702,7 @@ class KolLinkWc {
|
|
|
24557
24702
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
24558
24703
|
"_buttonVariant": [1, "_button-variant"],
|
|
24559
24704
|
"state": [32],
|
|
24560
|
-
"
|
|
24705
|
+
"focus": [64]
|
|
24561
24706
|
},
|
|
24562
24707
|
"$listeners$": undefined,
|
|
24563
24708
|
"$lazyBundleId$": "-",
|
|
@@ -24565,89 +24710,28 @@ class KolLinkWc {
|
|
|
24565
24710
|
}; }
|
|
24566
24711
|
}
|
|
24567
24712
|
|
|
24568
|
-
const
|
|
24569
|
-
const validateModalVariant = (component, value) => {
|
|
24570
|
-
watchValidator(component, '_variant', (value) => typeof value === 'string' && ModalVariantPropTypeOptions.includes(value), new Set(ModalVariantPropTypeOptions), value);
|
|
24571
|
-
};
|
|
24572
|
-
|
|
24573
|
-
const defaultStyleCss$j = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n.kol-card {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: grid;\n height: 100%;\n overflow: visible;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-template-areas: \"header close\" \"content content\";\n grid-template-columns: 1fr min-content;\n grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n align-self: start;\n grid-area: header;\n}\n.kol-card__content {\n align-self: stretch;\n grid-area: content;\n}\n.kol-card__close-button {\n grid-area: close;\n}\n\n@layer kol-component {\n .kol-modal {\n min-height: var(--a11y-min-size);\n padding: 0;\n border: 0;\n }\n .kol-modal::backdrop {\n background-color: rgba(0, 0, 0, 0.1);\n }\n .kol-modal__close-button {\n position: absolute;\n top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n z-index: 1;\n }\n}";
|
|
24713
|
+
const defaultStyleCss$j = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without verifying the contrast ratio of its background and font colors.\n * By initially setting the background color to white and the font color to black,\n * the contrast ratio is ensured and explicit adjustment is forced.\n */\n color: black;\n background-color: white;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n /*\n * Text should be aligned left by default to provide a predictable starting point.\n */\n text-align: left;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n }\n /*\n * All interactive elements should have a minimum size of to-rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n button,\n .kol-input .input {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the text color from his parent element.\n */\n color: inherit;\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n .visually-hidden {\n position: fixed;\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n}\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n width: 100%;\n margin: 0;\n padding: 0;\n border: none;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n color: black;\n background-color: lightgray;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: flex;\n flex-flow: column;\n align-items: center;\n justify-content: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n align-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n opacity: 0.5;\n outline: none;\n cursor: not-allowed;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n opacity: 0;\n display: none;\n position: fixed;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width, max-content);\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 90vw;\n max-height: 90vh;\n animation-direction: normal;\n /* Can be used to specify the animation duration from the outside. 250ms by default. */\n animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n animation-fill-mode: forwards;\n animation-iteration-count: 1;\n animation-timing-function: ease-in;\n }\n .kol-tooltip__floating.hide {\n animation-name: hideTooltip;\n }\n .kol-tooltip__floating.show {\n animation-name: showTooltip;\n }\n .kol-tooltip__arrow {\n transform: rotate(45deg);\n color: #000;\n background-color: #fff;\n position: absolute;\n z-index: 999;\n width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip__content {\n color: #000;\n background-color: #fff;\n position: relative;\n z-index: 1000;\n }\n @keyframes hideTooltip {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n display: none;\n }\n }\n @keyframes showTooltip {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n.kol-card {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n display: grid;\n height: 100%;\n overflow: visible;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-template-areas: \"header close\" \"content content\";\n grid-template-columns: 1fr min-content;\n grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n align-self: start;\n grid-area: header;\n}\n.kol-card__content {\n align-self: stretch;\n grid-area: content;\n}\n.kol-card__close-button {\n grid-area: close;\n}\n\n@layer kol-component {\n .kol-dialog,\n .kol-modal {\n min-height: var(--a11y-min-size);\n padding: 0;\n border: 0;\n }\n .kol-dialog::backdrop,\n .kol-modal::backdrop {\n background-color: rgba(0, 0, 0, 0.1);\n }\n .kol-dialog__close-button,\n .kol-modal__close-button {\n position: absolute;\n top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n z-index: 1;\n }\n}";
|
|
24574
24714
|
|
|
24575
24715
|
class KolModal {
|
|
24576
24716
|
constructor(hostRef) {
|
|
24577
24717
|
registerInstance(this, hostRef);
|
|
24578
|
-
this.
|
|
24579
|
-
|
|
24580
|
-
await this.closeModal();
|
|
24581
|
-
},
|
|
24718
|
+
this.catchRef = (ref) => {
|
|
24719
|
+
this.dialogRef = ref;
|
|
24582
24720
|
};
|
|
24583
24721
|
this._width = '100%';
|
|
24584
24722
|
this._variant = 'blank';
|
|
24585
|
-
this.state = {
|
|
24586
|
-
_label: '',
|
|
24587
|
-
_width: '100%',
|
|
24588
|
-
};
|
|
24589
|
-
}
|
|
24590
|
-
disconnectedCallback() {
|
|
24591
|
-
void this.closeModal();
|
|
24592
|
-
}
|
|
24593
|
-
handleNativeCloseEvent() {
|
|
24594
|
-
var _a, _b;
|
|
24595
|
-
(_b = (_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
24596
|
-
if (this.host) {
|
|
24597
|
-
dispatchDomEvent(this.host, KolEvent.close);
|
|
24598
|
-
}
|
|
24599
24723
|
}
|
|
24600
24724
|
async openModal() {
|
|
24601
24725
|
var _a;
|
|
24602
|
-
(_a = this.
|
|
24726
|
+
await ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.openModal());
|
|
24603
24727
|
}
|
|
24604
24728
|
async closeModal() {
|
|
24605
|
-
var _a
|
|
24606
|
-
|
|
24729
|
+
var _a;
|
|
24730
|
+
await ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.closeModal());
|
|
24607
24731
|
}
|
|
24608
24732
|
render() {
|
|
24609
|
-
return (hAsync(
|
|
24610
|
-
'kol-modal__blank': this.state._variant === 'blank',
|
|
24611
|
-
'kol-modal__card': this.state._variant === 'card',
|
|
24612
|
-
}), onCancel: handleCancelOverlay, onClose: this.handleNativeCloseEvent.bind(this), ref: (el) => {
|
|
24613
|
-
this.refDialog = el;
|
|
24614
|
-
}, style: {
|
|
24615
|
-
width: this.state._width,
|
|
24616
|
-
} }, this.state._variant === 'blank' && hAsync("slot", { key: 'ed6110b0ddd43e0d544c3420965e93253b4c37db' }), this.state._variant === 'card' && (hAsync(KolCardWcTag, { key: '8d041e7c444343a6d5fe9fe7dffc08837bfbefb6', _label: this.state._label, _hasCloser: true, _on: this.on }, hAsync("slot", { key: '804e674e6376a29f6c2e357a70a5603f3ce777c1' })))));
|
|
24617
|
-
}
|
|
24618
|
-
validateLabel(value) {
|
|
24619
|
-
validateLabel(this, value, {
|
|
24620
|
-
required: true,
|
|
24621
|
-
});
|
|
24622
|
-
}
|
|
24623
|
-
validateOn(value) {
|
|
24624
|
-
if (typeof value === 'object' && value !== null) {
|
|
24625
|
-
const callbacks = {};
|
|
24626
|
-
if (typeof value.onClose === 'function' || value.onClose === true) {
|
|
24627
|
-
callbacks.onClose = value.onClose;
|
|
24628
|
-
}
|
|
24629
|
-
setState(this, '_on', callbacks);
|
|
24630
|
-
}
|
|
24631
|
-
}
|
|
24632
|
-
validateWidth(value) {
|
|
24633
|
-
validateWidth(this, value);
|
|
24634
|
-
}
|
|
24635
|
-
validateVariant(value) {
|
|
24636
|
-
validateModalVariant(this, value);
|
|
24733
|
+
return (hAsync(KolDialogWcTag, { key: '127b4504fccd6dd10ac9fc7fa198102f2e774ed5', ref: this.catchRef, _label: this._label, _on: this._on, _variant: this._variant, _width: this._width }, hAsync("slot", { key: '663f015f3f2f5b067539d9f7789289ca55e79225' })));
|
|
24637
24734
|
}
|
|
24638
|
-
componentWillLoad() {
|
|
24639
|
-
this.validateLabel(this._label);
|
|
24640
|
-
this.validateOn(this._on);
|
|
24641
|
-
this.validateWidth(this._width);
|
|
24642
|
-
this.validateVariant(this._variant);
|
|
24643
|
-
}
|
|
24644
|
-
get host() { return getElement(this); }
|
|
24645
|
-
static get watchers() { return {
|
|
24646
|
-
"_label": ["validateLabel"],
|
|
24647
|
-
"_on": ["validateOn"],
|
|
24648
|
-
"_width": ["validateWidth"],
|
|
24649
|
-
"_variant": ["validateVariant"]
|
|
24650
|
-
}; }
|
|
24651
24735
|
static get style() { return {
|
|
24652
24736
|
default: defaultStyleCss$j
|
|
24653
24737
|
}; }
|
|
@@ -24659,7 +24743,6 @@ class KolModal {
|
|
|
24659
24743
|
"_on": [16],
|
|
24660
24744
|
"_width": [1],
|
|
24661
24745
|
"_variant": [1],
|
|
24662
|
-
"state": [32],
|
|
24663
24746
|
"openModal": [64],
|
|
24664
24747
|
"closeModal": [64]
|
|
24665
24748
|
},
|
|
@@ -24797,9 +24880,9 @@ class KolNav {
|
|
|
24797
24880
|
}
|
|
24798
24881
|
render() {
|
|
24799
24882
|
const collapsible = this.state._collapsible === true;
|
|
24800
|
-
return (hAsync("div", { key: '
|
|
24883
|
+
return (hAsync("div", { key: 'c5d68a1e9267bf338e45d238b9f7661e44a2e378', class: clsx('kol-nav', {
|
|
24801
24884
|
'kol-nav--is-compact': this.state._hideLabel,
|
|
24802
|
-
}) }, hAsync("nav", { key: '
|
|
24885
|
+
}) }, hAsync("nav", { key: '17473413770976a81f562e3bd9f17ae11b654b2b', "aria-label": this.state._label, class: "kol-nav__navigation", id: this.navId }, hAsync(this.linkList, { key: '0623790874a038d9df84ffb301efea8559ee0a4c', collapsible: collapsible, deep: 0, links: this.state._links, id: this.listId })), this.state._hasCompactButton && (hAsync("div", { key: '6d54e0a8ac6af286ecc70abc98f076f481bab771', class: "kol-nav__compact" }, hAsync(KolButtonWcTag, { key: '6a37dc386c94294196ce9543a132c6d63406d7dd', class: "kol-nav__toggle-button", _ariaControls: this.navId, _ariaExpanded: !this.state._hideLabel, _icons: this.state._hideLabel ? 'kolicon-chevron-right' : 'kolicon-chevron-left', _hideLabel: true, _label: translate(this.state._hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
|
|
24803
24886
|
onClick: () => {
|
|
24804
24887
|
this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: !this.state._hideLabel });
|
|
24805
24888
|
},
|
|
@@ -24886,7 +24969,7 @@ class KolPagination {
|
|
|
24886
24969
|
this._tooltipAlign = 'top';
|
|
24887
24970
|
}
|
|
24888
24971
|
render() {
|
|
24889
|
-
return (hAsync(KolPaginationWcTag, { key: '
|
|
24972
|
+
return (hAsync(KolPaginationWcTag, { key: '1676901a636d4529bff96b9b85e49977f93beaad', _boundaryCount: this._boundaryCount, _label: this._label, _customClass: this._customClass, _on: this._on, _hasButtons: this._hasButtons, _page: this._page, _pageSize: this._pageSize, _pageSizeOptions: this._pageSizeOptions, _siblingCount: this._siblingCount, _tooltipAlign: this._tooltipAlign, _max: this._max }));
|
|
24890
24973
|
}
|
|
24891
24974
|
static get style() { return {
|
|
24892
24975
|
default: defaultStyleCss$h
|
|
@@ -27077,7 +27160,7 @@ class KolPopover {
|
|
|
27077
27160
|
}
|
|
27078
27161
|
}
|
|
27079
27162
|
render() {
|
|
27080
|
-
return (hAsync(Host, { key: '
|
|
27163
|
+
return (hAsync(Host, { key: '2f8909c00120d1d00d56f0a891bf137e968b482f', ref: this.catchHostAndTriggerElement, class: "kol-popover" }, hAsync("div", { key: 'd04819e7919b23042debe87158f189889c95e9ca', class: clsx('kol-popover__content', { 'kol-popover__content--visible': this.state._visible }), ref: this.catchPopoverElement, popover: "auto" }, hAsync("div", { key: 'e5a08ef22c2ee7c3dc8f1ca25a9b34a14f6076b9', class: clsx('kol-popover__arrow', `kol-popover__arrow--${this.state._align}`), ref: this.catchArrowElement }), hAsync("slot", { key: 'e7d525b678723312037a84233c3d810663c8d4cd' }))));
|
|
27081
27164
|
}
|
|
27082
27165
|
validateAlign(value) {
|
|
27083
27166
|
validateAlign(this, value);
|
|
@@ -27166,12 +27249,12 @@ let KolPopoverButton$1 = class KolPopoverButton {
|
|
|
27166
27249
|
var _a;
|
|
27167
27250
|
void ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.showPopover());
|
|
27168
27251
|
}
|
|
27169
|
-
async
|
|
27252
|
+
async focus() {
|
|
27170
27253
|
var _a;
|
|
27171
|
-
|
|
27254
|
+
return Promise.resolve((_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus());
|
|
27172
27255
|
}
|
|
27173
27256
|
render() {
|
|
27174
|
-
return (hAsync(KolPopoverButtonWcTag, { key: '
|
|
27257
|
+
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' })));
|
|
27175
27258
|
}
|
|
27176
27259
|
static get style() { return {
|
|
27177
27260
|
default: defaultStyleCss$g
|
|
@@ -27204,7 +27287,7 @@ let KolPopoverButton$1 = class KolPopoverButton {
|
|
|
27204
27287
|
"_variant": [1],
|
|
27205
27288
|
"hidePopover": [64],
|
|
27206
27289
|
"showPopover": [64],
|
|
27207
|
-
"
|
|
27290
|
+
"focus": [64]
|
|
27208
27291
|
},
|
|
27209
27292
|
"$listeners$": undefined,
|
|
27210
27293
|
"$lazyBundleId$": "-",
|
|
@@ -27237,9 +27320,9 @@ class KolPopoverButton {
|
|
|
27237
27320
|
var _a;
|
|
27238
27321
|
void ((_a = this.refPopover) === null || _a === void 0 ? void 0 : _a.showPopover());
|
|
27239
27322
|
}
|
|
27240
|
-
async
|
|
27323
|
+
async focus() {
|
|
27241
27324
|
var _a;
|
|
27242
|
-
|
|
27325
|
+
return Promise.resolve((_a = this.refButton) === null || _a === void 0 ? void 0 : _a.focus());
|
|
27243
27326
|
}
|
|
27244
27327
|
handleBeforeToggle(event) {
|
|
27245
27328
|
if (event.newState === 'closed') {
|
|
@@ -27295,11 +27378,11 @@ class KolPopoverButton {
|
|
|
27295
27378
|
(_c = this.cleanupAutoPositioning) === null || _c === void 0 ? void 0 : _c.call(this);
|
|
27296
27379
|
}
|
|
27297
27380
|
render() {
|
|
27298
|
-
return (hAsync("div", { key: '
|
|
27381
|
+
return (hAsync("div", { key: '07f745de533bf0d6c5a96cdf3abd801e50205d68', class: clsx('kol-popover-button', {
|
|
27299
27382
|
'kol-popover-button--open': this.popoverOpen,
|
|
27300
27383
|
'kol-popover-button--inline': this.state._inline === true,
|
|
27301
27384
|
'kol-popover-button--standalone': this.state._inline === false,
|
|
27302
|
-
}) }, hAsync(KolButtonWcTag, { key: '
|
|
27385
|
+
}) }, 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' }))));
|
|
27303
27386
|
}
|
|
27304
27387
|
validateInline(value) {
|
|
27305
27388
|
validateInline(this, value, {
|
|
@@ -27348,7 +27431,7 @@ class KolPopoverButton {
|
|
|
27348
27431
|
"popoverOpen": [32],
|
|
27349
27432
|
"hidePopover": [64],
|
|
27350
27433
|
"showPopover": [64],
|
|
27351
|
-
"
|
|
27434
|
+
"focus": [64]
|
|
27352
27435
|
},
|
|
27353
27436
|
"$listeners$": undefined,
|
|
27354
27437
|
"$lazyBundleId$": "-",
|
|
@@ -27392,10 +27475,10 @@ class KolProgress {
|
|
|
27392
27475
|
const isPercentage = this.state._unit === '%';
|
|
27393
27476
|
const liveProgressValue = isPercentage ? `${Math.round((this.state._liveValue / this.state._max) * 100)}` : this.state._liveValue;
|
|
27394
27477
|
const displayValue = isPercentage ? Math.round((this.state._value / this.state._max) * 100) : this.state._value;
|
|
27395
|
-
return (hAsync("div", { key: '
|
|
27478
|
+
return (hAsync("div", { key: 'fc7f5cdf4798854b0b41945c69f7feb3af75d50c', class: "kol-progress" }, hAsync("div", { key: '5ab61be685c82aceb117af33b6ad578dc12a3775', "aria-hidden": "true", class: {
|
|
27396
27479
|
'kol-progress__cycle': this.state._variant === 'cycle',
|
|
27397
27480
|
'kol-progress__bar': this.state._variant === 'bar',
|
|
27398
|
-
} }, this.state._variant === 'bar' && this.state._label && hAsync("div", { key: '
|
|
27481
|
+
} }, this.state._variant === 'bar' && this.state._label && hAsync("div", { key: 'f9917e700dc7d6c3b78f705b600b499529bbb2b7', class: "kol-progress__bar-label" }, this.state._label), createProgressSVG(this.state), this.state._variant === 'cycle' && (hAsync("div", { key: 'bb719478ebe2e5226e538bc8d07207d5c6cbc1c1', class: "kol-progress__cycle-text" }, this.state._label && hAsync("div", { key: '777582abb2582950a50e77e1d477dfe52a2abbec', class: "kol-progress__cycle-label" }, this.state._label), hAsync("div", { key: 'a5a04f2c22a3536ea8e95bc5d858f9b1ddb3b462', class: "kol-progress__cycle-value" }, `${displayValue} ${this.state._unit}`))), this.state._variant === 'bar' && (hAsync("div", { key: 'b89f4d178376b85b78f085e56aacc80df07f44b1', class: "kol-progress__bar-value", style: { width: `${`${(isPercentage ? 100 : this.state._max) + 1}`.length}ch` } }, displayValue)), this.state._variant === 'bar' && hAsync("div", { key: 'd35b3c9d91c8a78a994da485d80e8faf29cb23b5', class: "kol-progress__bar-unit" }, this.state._unit)), hAsync("progress", { key: 'b4d92e59e667619e4c6aadd8cbf0ae20f1d325ea', class: "visually-hidden", "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: '73d21662ce19a724bede515ff55ec4f62bcd6fa0', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, isPercentage ? `${liveProgressValue} %` : `${liveProgressValue} von ${this.state._max} ${this.state._unit}`)));
|
|
27399
27482
|
}
|
|
27400
27483
|
validateLabel(value) {
|
|
27401
27484
|
validateLabel(this, value);
|
|
@@ -27499,7 +27582,7 @@ class KolQuote {
|
|
|
27499
27582
|
}
|
|
27500
27583
|
render() {
|
|
27501
27584
|
const hasExpertSlot = showExpertSlot(this.state._quote);
|
|
27502
|
-
return (hAsync("figure", { key: '
|
|
27585
|
+
return (hAsync("figure", { key: '5a572554f7b6414184f1fc8d65d7ac53b75cc4d9', class: clsx('kol-quote', `kol-quote--${this.state._variant}`) }, this.state._variant === 'block' ? (hAsync("blockquote", { class: "kol-quote__blockquote", cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { class: "kol-quote__quote", cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))), typeof this.state._label === 'string' && this.state._label.length > 0 && (hAsync("figcaption", { key: '788f491a43a848e2c36902775577f562618fd3a9', class: "kol-quote__figcaption" }, hAsync("cite", { key: '2929cd673b3d0f545214c6a64f91d850fe54d896', class: "kol-quote__cite" }, hAsync(KolLinkTag, { key: '905b4a78d4d9d3cba9c85072edd8b1af148c2470', _href: this.state._href, _label: this.state._label, _target: "_blank" }))))));
|
|
27503
27586
|
}
|
|
27504
27587
|
static get watchers() { return {
|
|
27505
27588
|
"_label": ["validateLabel"],
|
|
@@ -27547,12 +27630,12 @@ class KolSelect {
|
|
|
27547
27630
|
var _a;
|
|
27548
27631
|
return (_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.getValue();
|
|
27549
27632
|
}
|
|
27550
|
-
async
|
|
27633
|
+
async focus() {
|
|
27551
27634
|
var _a;
|
|
27552
|
-
|
|
27635
|
+
return Promise.resolve((_a = this.selectWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
27553
27636
|
}
|
|
27554
27637
|
render() {
|
|
27555
|
-
return (hAsync(Host, { key: '
|
|
27638
|
+
return (hAsync(Host, { key: 'a926c7058a8e4d63d2eac02fa4cfb0cc72613117', class: "kol-select" }, hAsync(KolSelectWcTag, { key: 'ecd27ebee8519a944361c7a0184f413f99d3c3ad', ref: this.catchRef, _accessKey: this._accessKey, _disabled: this._disabled, _hideLabel: this._hideLabel, _hint: this._hint, _icons: this._icons, _id: this._id, _label: this._label, _msg: this._msg, _multiple: this._multiple, _name: this._name, _on: this._on, _options: this._options, _required: this._required, _rows: this._rows, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _touched: this._touched, _value: this._value }, hAsync("slot", { key: 'eb93d88c9ed9dc97d1d14caac719a4760d7a6571', name: "expert", slot: "expert" }))));
|
|
27556
27639
|
}
|
|
27557
27640
|
static get style() { return {
|
|
27558
27641
|
default: defaultStyleCss$d
|
|
@@ -27583,7 +27666,7 @@ class KolSelect {
|
|
|
27583
27666
|
"_touched": [1540],
|
|
27584
27667
|
"_value": [1544],
|
|
27585
27668
|
"getValue": [64],
|
|
27586
|
-
"
|
|
27669
|
+
"focus": [64]
|
|
27587
27670
|
},
|
|
27588
27671
|
"$listeners$": undefined,
|
|
27589
27672
|
"$lazyBundleId$": "-",
|
|
@@ -27786,9 +27869,9 @@ class KolSelectWc {
|
|
|
27786
27869
|
return Array.isArray(this.state._value) && this.state._value.length > 0 ? this.state._value[0] : this.state._value;
|
|
27787
27870
|
}
|
|
27788
27871
|
}
|
|
27789
|
-
async
|
|
27872
|
+
async focus() {
|
|
27790
27873
|
var _a;
|
|
27791
|
-
(_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
27874
|
+
return Promise.resolve((_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
27792
27875
|
}
|
|
27793
27876
|
getFormFieldProps() {
|
|
27794
27877
|
return {
|
|
@@ -27811,11 +27894,11 @@ class KolSelectWc {
|
|
|
27811
27894
|
} });
|
|
27812
27895
|
}
|
|
27813
27896
|
render() {
|
|
27814
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
27897
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '0dae16977914072f768715d0724d104681423011' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'f861a46e09370d1d9b0988583f21f3e7cb0ac95c', state: this.state }, hAsync("form", { key: '4018d6786323c59fc03a1e1808f2c294f538fd03', onSubmit: (event) => {
|
|
27815
27898
|
event.preventDefault();
|
|
27816
27899
|
propagateSubmitEventToForm({
|
|
27817
27900
|
form: this.host});
|
|
27818
|
-
} }, hAsync("input", { key: '
|
|
27901
|
+
} }, hAsync("input", { key: '4cf5976ab6f9e5936df90835f38d90075b47e0c6', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: '8f9f45475b6ea1c0c1e852896c4bc025bc0e5a4e' }, this.getSelectProps()))))));
|
|
27819
27902
|
}
|
|
27820
27903
|
constructor(hostRef) {
|
|
27821
27904
|
registerInstance(this, hostRef);
|
|
@@ -27985,7 +28068,7 @@ class KolSelectWc {
|
|
|
27985
28068
|
"state": [32],
|
|
27986
28069
|
"inputHasFocus": [32],
|
|
27987
28070
|
"getValue": [64],
|
|
27988
|
-
"
|
|
28071
|
+
"focus": [64]
|
|
27989
28072
|
},
|
|
27990
28073
|
"$listeners$": undefined,
|
|
27991
28074
|
"$lazyBundleId$": "-",
|
|
@@ -28051,9 +28134,9 @@ class KolSingleSelect {
|
|
|
28051
28134
|
async getValue() {
|
|
28052
28135
|
return this._value;
|
|
28053
28136
|
}
|
|
28054
|
-
async
|
|
28137
|
+
async focus() {
|
|
28055
28138
|
var _a;
|
|
28056
|
-
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
28139
|
+
return Promise.resolve((_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus());
|
|
28057
28140
|
}
|
|
28058
28141
|
onBlur() {
|
|
28059
28142
|
var _a, _b, _c;
|
|
@@ -28217,7 +28300,7 @@ class KolSingleSelect {
|
|
|
28217
28300
|
render() {
|
|
28218
28301
|
var _a;
|
|
28219
28302
|
const isDisabled = this.state._disabled === true;
|
|
28220
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
28303
|
+
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', {
|
|
28221
28304
|
'kol-single-select__delete--disabled': isDisabled,
|
|
28222
28305
|
}), _on: {
|
|
28223
28306
|
onClick: () => {
|
|
@@ -28225,9 +28308,9 @@ class KolSingleSelect {
|
|
|
28225
28308
|
this.clearSelection();
|
|
28226
28309
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
28227
28310
|
},
|
|
28228
|
-
} })), hAsync(KolIconTag, { key: '
|
|
28311
|
+
} })), hAsync(KolIconTag, { key: 'b2fdbd0166bc7b254f97cc1d7e3c171f3fde8034', _icons: "kolicon-chevron-down", _label: "", class: clsx('kol-custom-suggestions-toggle', {
|
|
28229
28312
|
'kol-custom-suggestions-toggle--disabled': isDisabled,
|
|
28230
|
-
}), onClick: this.toggleListbox.bind(this) })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '
|
|
28313
|
+
}), 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) => {
|
|
28231
28314
|
if (el)
|
|
28232
28315
|
this.refOptions[index] = el;
|
|
28233
28316
|
}, selected: this._value === option.value, disabled: option.disabled ? true : false, onClick: (event) => {
|
|
@@ -28571,7 +28654,7 @@ class KolSingleSelect {
|
|
|
28571
28654
|
"state": [32],
|
|
28572
28655
|
"inputHasFocus": [32],
|
|
28573
28656
|
"getValue": [64],
|
|
28574
|
-
"
|
|
28657
|
+
"focus": [64]
|
|
28575
28658
|
},
|
|
28576
28659
|
"$listeners$": [[8, "focusout", "handleFocusOut"], [8, "blur", "handleWindowBlur"], [0, "keydown", "handleKeyDown"], [1, "mousemove", "handleMouseEvent"]],
|
|
28577
28660
|
"$lazyBundleId$": "-",
|
|
@@ -28590,10 +28673,14 @@ class KolSkipNav {
|
|
|
28590
28673
|
};
|
|
28591
28674
|
}
|
|
28592
28675
|
render() {
|
|
28593
|
-
return (hAsync("nav", { key: '
|
|
28676
|
+
return (hAsync("nav", { key: '637034fc1c6fda05c7bcec9c78005208e9dcfb13', class: "kol-skip-nav", "aria-label": this.state._label }, hAsync("ul", { key: '3b28c0e6ecad1b303773f2e18ad4fec27fe1d75f', class: "kol-skip-nav__list" }, this.state._links.map((link, index) => {
|
|
28594
28677
|
return (hAsync("li", { class: "kol-skip-nav__list-item", key: index }, hAsync(KolLinkWcTag, Object.assign({}, link, { ref: index === 0 ? (el) => (this.firstLinkRef = el) : undefined }))));
|
|
28595
28678
|
}))));
|
|
28596
28679
|
}
|
|
28680
|
+
async focus() {
|
|
28681
|
+
var _a;
|
|
28682
|
+
return Promise.resolve((_a = this.firstLinkRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
28683
|
+
}
|
|
28597
28684
|
validateLabel(value, _oldValue, initial = false) {
|
|
28598
28685
|
if (!initial) {
|
|
28599
28686
|
removeNavLabel(this.state._label);
|
|
@@ -28613,10 +28700,6 @@ class KolSkipNav {
|
|
|
28613
28700
|
disconnectedCallback() {
|
|
28614
28701
|
removeNavLabel(this.state._label);
|
|
28615
28702
|
}
|
|
28616
|
-
async kolFocus() {
|
|
28617
|
-
var _a;
|
|
28618
|
-
await ((_a = this.firstLinkRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
28619
|
-
}
|
|
28620
28703
|
static get watchers() { return {
|
|
28621
28704
|
"_label": ["validateLabel"],
|
|
28622
28705
|
"_links": ["validateLinks"]
|
|
@@ -28631,7 +28714,7 @@ class KolSkipNav {
|
|
|
28631
28714
|
"_label": [1],
|
|
28632
28715
|
"_links": [1],
|
|
28633
28716
|
"state": [32],
|
|
28634
|
-
"
|
|
28717
|
+
"focus": [64]
|
|
28635
28718
|
},
|
|
28636
28719
|
"$listeners$": undefined,
|
|
28637
28720
|
"$lazyBundleId$": "-",
|
|
@@ -28666,7 +28749,7 @@ class KolSpin {
|
|
|
28666
28749
|
}
|
|
28667
28750
|
render() {
|
|
28668
28751
|
var _a, _b;
|
|
28669
|
-
return (hAsync(Host, { key: '
|
|
28752
|
+
return (hAsync(Host, { key: '99834f746128bfbbb7ded21f1a866f06560ab218', class: "kol-spin" }, this.state._show ? (hAsync(Fragment, null, hAsync("span", { class: clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`) }, renderSpin(this.state._variant)), hAsync("span", { "aria-busy": "true", class: "visually-hidden", role: "alert" }, (_a = this.state._label) !== null && _a !== void 0 ? _a : this.translateActionRunning))) : (this.showToggled && (hAsync("span", { "aria-busy": "false", class: "visually-hidden", role: "alert" }, (_b = this.state._label) !== null && _b !== void 0 ? _b : this.translateActionDone)))));
|
|
28670
28753
|
}
|
|
28671
28754
|
validateShow(value) {
|
|
28672
28755
|
this.showToggled = this.state._show === true && this._show === false;
|
|
@@ -28747,16 +28830,16 @@ class KolSplitButton {
|
|
|
28747
28830
|
async getValue() {
|
|
28748
28831
|
return this._value;
|
|
28749
28832
|
}
|
|
28750
|
-
async
|
|
28833
|
+
async focus() {
|
|
28751
28834
|
var _a;
|
|
28752
|
-
|
|
28835
|
+
return Promise.resolve((_a = this.primaryButtonWcRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
28753
28836
|
}
|
|
28754
28837
|
render() {
|
|
28755
28838
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
28756
|
-
return (hAsync("div", { key: '
|
|
28839
|
+
return (hAsync("div", { key: '04257bc7bd39a7eeef11eecc283bffd36e087eab', class: "kol-split-button" }, hAsync("div", { key: '3e501cb61b88142df1a21fc642f9a6948787c325', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: '0afa33e93f49d8f8b051a39af8effe4910e1e194', class: clsx('kol-split-button__button', {
|
|
28757
28840
|
[this._variant]: this._variant !== 'custom',
|
|
28758
28841
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
28759
|
-
}), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _id: this._id, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _buttonVariant: this._variant }), hAsync("div", { key: '
|
|
28842
|
+
}), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _id: this._id, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _buttonVariant: this._variant }), hAsync("div", { key: '26320736e5ec8d7e679636f282846ae536e13e24', class: "kol-split-button__horizontal-line" }), hAsync(KolButtonWcTag, { key: '286b1351dfb4d41e3ee9d000a1204fa82414e626', class: "kol-split-button__secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "kolicon-chevron-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler })), hAsync(KolPopoverWcTag, { key: 'c79ed674b02e40ede6a1d5b24f5660f35a5f90df', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: 'a986253f3b75a21f217daf926895d87da9912f07' }))));
|
|
28760
28843
|
}
|
|
28761
28844
|
async closePopup() {
|
|
28762
28845
|
this.handleOnClose();
|
|
@@ -28791,7 +28874,7 @@ class KolSplitButton {
|
|
|
28791
28874
|
"_variant": [1],
|
|
28792
28875
|
"state": [32],
|
|
28793
28876
|
"getValue": [64],
|
|
28794
|
-
"
|
|
28877
|
+
"focus": [64],
|
|
28795
28878
|
"closePopup": [64]
|
|
28796
28879
|
},
|
|
28797
28880
|
"$listeners$": undefined,
|
|
@@ -28904,7 +28987,7 @@ class KolTableSettings {
|
|
|
28904
28987
|
}
|
|
28905
28988
|
render() {
|
|
28906
28989
|
const columns = this.getPrimaryRow();
|
|
28907
|
-
return (hAsync(KolPopoverButtonWcTag, { key: '
|
|
28990
|
+
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" }))))));
|
|
28908
28991
|
}
|
|
28909
28992
|
get host() { return getElement(this); }
|
|
28910
28993
|
static get watchers() { return {
|
|
@@ -29288,7 +29371,7 @@ class KolTableStateful {
|
|
|
29288
29371
|
horizontal: (_d = (_c = this.state._headers.horizontal) === null || _c === void 0 ? void 0 : _c.map((row) => row.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell), sortOrder: this.getHeaderCellSortOrder(cell) }))))) !== null && _d !== void 0 ? _d : [],
|
|
29289
29372
|
vertical: (_f = (_e = this.state._headers.vertical) === null || _e === void 0 ? void 0 : _e.map((column) => column.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell), sortOrder: this.getHeaderCellSortOrder(cell) }))))) !== null && _f !== void 0 ? _f : [],
|
|
29290
29373
|
};
|
|
29291
|
-
return (hAsync(Host, { key: '
|
|
29374
|
+
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: {
|
|
29292
29375
|
onSort: (_, payload) => {
|
|
29293
29376
|
this.handleSort(payload);
|
|
29294
29377
|
},
|
|
@@ -29345,7 +29428,7 @@ let KolTableStateless$1 = class KolTableStateless {
|
|
|
29345
29428
|
registerInstance(this, hostRef);
|
|
29346
29429
|
}
|
|
29347
29430
|
render() {
|
|
29348
|
-
return (hAsync(KolTableStatelessWcTag, { key: '
|
|
29431
|
+
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 }));
|
|
29349
29432
|
}
|
|
29350
29433
|
static get style() { return {
|
|
29351
29434
|
default: defaultStyleCss$7
|
|
@@ -29923,12 +30006,12 @@ class KolTableStateless {
|
|
|
29923
30006
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
29924
30007
|
this.checkboxRefs = [];
|
|
29925
30008
|
const horizontalHeaders = this.state._headerCells.horizontal;
|
|
29926
|
-
return (hAsync("div", { key: '
|
|
30009
|
+
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: {
|
|
29927
30010
|
minWidth: this.getTableMinWidth(),
|
|
29928
|
-
} }, hAsync("caption", { key: '
|
|
30011
|
+
} }, 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" }, [
|
|
29929
30012
|
horizontalHeaders.map((cols, rowIndex) => (hAsync("tr", { class: "kol-table__head-row", key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) && cols.map((cell, colIndex) => this.renderHeadingCell(cell, rowIndex, colIndex, false))))),
|
|
29930
30013
|
this.renderSpacer('head', horizontalHeaders),
|
|
29931
|
-
])), hAsync("tbody", { key: '
|
|
30014
|
+
])), hAsync("tbody", { key: '0bed96fe3264fc18528265ec9f717a293c5caef6', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
|
|
29932
30015
|
}
|
|
29933
30016
|
get host() { return getElement(this); }
|
|
29934
30017
|
static get watchers() { return {
|
|
@@ -30167,9 +30250,9 @@ class KolTabs {
|
|
|
30167
30250
|
}, _icons: "kolicon-plus", "data-testid": "tabs-create-button" }))));
|
|
30168
30251
|
}
|
|
30169
30252
|
render() {
|
|
30170
|
-
return (hAsync("div", { key: '
|
|
30253
|
+
return (hAsync("div", { key: 'd2ead3f3fa8c12ae4e4d658ced80bd9915e358ca', ref: (el) => {
|
|
30171
30254
|
this.tabPanelsElement = el;
|
|
30172
|
-
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
30255
|
+
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: 'a0e9d89632c7dd6af0c0d9ed9f53e6a4d9829fe5', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
|
|
30173
30256
|
}
|
|
30174
30257
|
validateAlign(value) {
|
|
30175
30258
|
validateAlign(this, value);
|
|
@@ -30367,9 +30450,9 @@ class KolTextarea {
|
|
|
30367
30450
|
var _a;
|
|
30368
30451
|
return (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.value;
|
|
30369
30452
|
}
|
|
30370
|
-
async
|
|
30453
|
+
async focus() {
|
|
30371
30454
|
var _a;
|
|
30372
|
-
(_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus();
|
|
30455
|
+
return Promise.resolve((_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus());
|
|
30373
30456
|
}
|
|
30374
30457
|
getFormFieldProps() {
|
|
30375
30458
|
return {
|
|
@@ -30395,7 +30478,7 @@ class KolTextarea {
|
|
|
30395
30478
|
} });
|
|
30396
30479
|
}
|
|
30397
30480
|
render() {
|
|
30398
|
-
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '
|
|
30481
|
+
return (hAsync(FormFieldStateWrapper, Object.assign({ key: '55fb2285f0d4035a7468359c26d7eae0333ebe2d' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '2db1a595b9eef777a40f716b8596a03e03144aa7', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: '14d56cb30389a03cbb82ca2b76ee96eb60488e9e' }, this.getTextAreaProps())))));
|
|
30399
30482
|
}
|
|
30400
30483
|
constructor(hostRef) {
|
|
30401
30484
|
registerInstance(this, hostRef);
|
|
@@ -30596,7 +30679,7 @@ class KolTextarea {
|
|
|
30596
30679
|
"state": [32],
|
|
30597
30680
|
"inputHasFocus": [32],
|
|
30598
30681
|
"getValue": [64],
|
|
30599
|
-
"
|
|
30682
|
+
"focus": [64]
|
|
30600
30683
|
},
|
|
30601
30684
|
"$listeners$": undefined,
|
|
30602
30685
|
"$lazyBundleId$": "-",
|
|
@@ -30667,7 +30750,7 @@ class KolToastContainer {
|
|
|
30667
30750
|
}
|
|
30668
30751
|
}
|
|
30669
30752
|
render() {
|
|
30670
|
-
return (hAsync(Host, { key: '
|
|
30753
|
+
return (hAsync(Host, { key: '40e9e249cceebf6d433444192d5199a2d7864f34', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: '68a998df0fe18affd0db5e06fdfb92c9aee4abd8', _label: this.translateToastCloseAll, class: "kol-toast-container__button-close-all", _on: {
|
|
30671
30754
|
onClick: () => {
|
|
30672
30755
|
void this.closeAll();
|
|
30673
30756
|
},
|
|
@@ -30721,7 +30804,7 @@ class KolToolbar {
|
|
|
30721
30804
|
return Object.assign(Object.assign({}, rest), { _icons, _disabled });
|
|
30722
30805
|
}
|
|
30723
30806
|
render() {
|
|
30724
|
-
return (hAsync("div", { key: '
|
|
30807
|
+
return (hAsync("div", { key: 'b8bf5d060d2390c8c4bbf3345d731074ff297541', class: `kol-toolbar kol-toolbar--orientation-${this.state._orientation}`, role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem)));
|
|
30725
30808
|
}
|
|
30726
30809
|
validateLabel(value) {
|
|
30727
30810
|
validateLabel(this, value);
|
|
@@ -30768,7 +30851,7 @@ class KolToolbar {
|
|
|
30768
30851
|
if ((_d = (_c = this.state._items) === null || _c === void 0 ? void 0 : _c[nextIndex]) === null || _d === void 0 ? void 0 : _d._disabled)
|
|
30769
30852
|
return;
|
|
30770
30853
|
this.currentIndex = nextIndex;
|
|
30771
|
-
void ((_e = this.getCurrentToolbarItem(nextIndex)) === null || _e === void 0 ? void 0 : _e.
|
|
30854
|
+
void ((_e = this.getCurrentToolbarItem(nextIndex)) === null || _e === void 0 ? void 0 : _e.focus());
|
|
30772
30855
|
}
|
|
30773
30856
|
handleBlur(event) {
|
|
30774
30857
|
if (event.target === this.host)
|
|
@@ -30960,7 +31043,7 @@ class KolTooltipWc {
|
|
|
30960
31043
|
getDocument().removeEventListener('keyup', this.hideTooltipByEscape);
|
|
30961
31044
|
}
|
|
30962
31045
|
render() {
|
|
30963
|
-
return (hAsync(Host, { key: '
|
|
31046
|
+
return (hAsync(Host, { key: 'efee2bbf85c5acdd5a489a249bd7bcf7b2cd3dc2', class: "kol-tooltip" }, this.state._label !== '' && (hAsync("div", { key: '99955951f3dd9d2c04e330be7f783ff9ebb7250f', class: "kol-tooltip__floating", ref: this.catchTooltipElement }, hAsync("div", { key: 'b023b51d943b2ffe5cb0773edb26a3c94e60829f', class: "kol-tooltip__arrow", ref: this.catchArrowElement }), hAsync(KolSpanFc, { key: 'ca17df24e680c94f6c1859104937c390f401e81c', class: "kol-tooltip__content", id: this.state._id, badgeText: this._badgeText, label: this.state._label })))));
|
|
30964
31047
|
}
|
|
30965
31048
|
validateBadgeText(value) {
|
|
30966
31049
|
validateBadgeText(this, value);
|
|
@@ -31038,7 +31121,7 @@ class KolTree {
|
|
|
31038
31121
|
registerInstance(this, hostRef);
|
|
31039
31122
|
}
|
|
31040
31123
|
render() {
|
|
31041
|
-
return (hAsync(KolTreeWcTag, { key: '
|
|
31124
|
+
return (hAsync(KolTreeWcTag, { key: '0a42e480a9fe270180fa75f07b87bfb00a634ac9', _label: this._label }, hAsync("slot", { key: '19c9f71d5a62202b0022adff62b36a277797dd0c' })));
|
|
31042
31125
|
}
|
|
31043
31126
|
static get style() { return {
|
|
31044
31127
|
default: defaultStyleCss$2
|
|
@@ -31061,27 +31144,24 @@ class KolTreeItem {
|
|
|
31061
31144
|
constructor(hostRef) {
|
|
31062
31145
|
registerInstance(this, hostRef);
|
|
31063
31146
|
}
|
|
31064
|
-
async
|
|
31065
|
-
|
|
31066
|
-
|
|
31067
|
-
}
|
|
31147
|
+
async focus() {
|
|
31148
|
+
var _a;
|
|
31149
|
+
return Promise.resolve((_a = this.element) === null || _a === void 0 ? void 0 : _a.focus());
|
|
31068
31150
|
}
|
|
31069
31151
|
async expand() {
|
|
31070
|
-
|
|
31071
|
-
|
|
31072
|
-
}
|
|
31152
|
+
var _a;
|
|
31153
|
+
return Promise.resolve((_a = this.element) === null || _a === void 0 ? void 0 : _a.expand());
|
|
31073
31154
|
}
|
|
31074
31155
|
async collapse() {
|
|
31075
|
-
|
|
31076
|
-
|
|
31077
|
-
}
|
|
31156
|
+
var _a;
|
|
31157
|
+
return Promise.resolve((_a = this.element) === null || _a === void 0 ? void 0 : _a.collapse());
|
|
31078
31158
|
}
|
|
31079
31159
|
async isOpen() {
|
|
31080
31160
|
var _a, _b;
|
|
31081
31161
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
31082
31162
|
}
|
|
31083
31163
|
render() {
|
|
31084
|
-
return (hAsync(KolTreeItemWcTag, { key: '
|
|
31164
|
+
return (hAsync(KolTreeItemWcTag, { key: '92fa2ccaf67dfa24531f8fca4c802c2bbfc03916', _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: '164f21da0af88f1021068e5e310d1487707f7059' })));
|
|
31085
31165
|
}
|
|
31086
31166
|
static get style() { return {
|
|
31087
31167
|
default: defaultStyleCss$1
|
|
@@ -31094,7 +31174,7 @@ class KolTreeItem {
|
|
|
31094
31174
|
"_label": [1],
|
|
31095
31175
|
"_open": [4],
|
|
31096
31176
|
"_href": [1],
|
|
31097
|
-
"
|
|
31177
|
+
"focus": [64],
|
|
31098
31178
|
"expand": [64],
|
|
31099
31179
|
"collapse": [64],
|
|
31100
31180
|
"isOpen": [64]
|
|
@@ -31119,12 +31199,12 @@ class KolTreeItemWc {
|
|
|
31119
31199
|
}
|
|
31120
31200
|
render() {
|
|
31121
31201
|
const { _href, _active, _hasChildren, _open, _label } = this.state;
|
|
31122
|
-
return (hAsync(Host, { key: '
|
|
31202
|
+
return (hAsync(Host, { key: 'e99bc051fe9fe90cd4a5aaf861d61d0d512c808a', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { key: 'e0ae86b656eab778f80852a40dd84cda832695a9', class: "kol-tree-item", style: {
|
|
31123
31203
|
'--level': `${this.level}`,
|
|
31124
|
-
} }, hAsync(KolLinkWcTag, { key: '
|
|
31204
|
+
} }, hAsync(KolLinkWcTag, { key: '3ffea17f30ab8e461e936d691d7fd4389f04bf2c', class: clsx('kol-tree-item__link', {
|
|
31125
31205
|
'kol-tree-item__link--first-level': this.level === 0,
|
|
31126
31206
|
'kol-tree-item__link--active': _active,
|
|
31127
|
-
}), _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, hAsync("span", { key: '
|
|
31207
|
+
}), _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, hAsync("span", { key: 'dfd6fa644efe7efe4700ec74a5f1c50e82262494', class: "kol-tree-item__link-inner", slot: "expert" }, _hasChildren ? (hAsync("span", { class: "kol-tree-item__toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, hAsync(KolIconTag, { class: "kol-tree-item__toggle-button-icon", _icons: `kolicon kolicon-${_open ? 'chevron-down' : 'chevron-right'}`, _label: '' }))) : (hAsync("span", { class: "kol-tree-item__toggle-button-placeholder" })), hAsync("span", { key: 'ef4714af7a6a63c447b3df2647dc605d5c9693b9', class: "kol-tree-item__text" }, _label))), hAsync("ul", { key: '34f5c43c0d6b3ecc0d78d6eb2101aa451e5d1cb2', class: "kol-tree-item__children", hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: '1ef6c1855acdebee823d68f7d0849fcd79d5d558' })))));
|
|
31128
31208
|
}
|
|
31129
31209
|
validateActive(value) {
|
|
31130
31210
|
validateActive(this, value || false);
|
|
@@ -31162,12 +31242,14 @@ class KolTreeItemWc {
|
|
|
31162
31242
|
var _a, _b;
|
|
31163
31243
|
this.state = Object.assign(Object.assign({}, this.state), { _hasChildren: Boolean((_b = (_a = this.host.querySelector('slot')) === null || _a === void 0 ? void 0 : _a.assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a).length) });
|
|
31164
31244
|
}
|
|
31165
|
-
async
|
|
31166
|
-
|
|
31245
|
+
async focus() {
|
|
31246
|
+
var _a;
|
|
31247
|
+
return Promise.resolve((_a = this.linkElement) === null || _a === void 0 ? void 0 : _a.focus());
|
|
31167
31248
|
}
|
|
31168
31249
|
async handleExpandClick(event) {
|
|
31250
|
+
var _a;
|
|
31169
31251
|
event.preventDefault();
|
|
31170
|
-
await this.linkElement.
|
|
31252
|
+
await ((_a = this.linkElement) === null || _a === void 0 ? void 0 : _a.focus());
|
|
31171
31253
|
await this.expand();
|
|
31172
31254
|
}
|
|
31173
31255
|
async expand() {
|
|
@@ -31176,8 +31258,9 @@ class KolTreeItemWc {
|
|
|
31176
31258
|
}
|
|
31177
31259
|
}
|
|
31178
31260
|
async handleCollapseClick(event) {
|
|
31261
|
+
var _a;
|
|
31179
31262
|
event.preventDefault();
|
|
31180
|
-
this.linkElement.focus();
|
|
31263
|
+
await ((_a = this.linkElement) === null || _a === void 0 ? void 0 : _a.focus());
|
|
31181
31264
|
await this.collapse();
|
|
31182
31265
|
}
|
|
31183
31266
|
async collapse() {
|
|
@@ -31206,7 +31289,7 @@ class KolTreeItemWc {
|
|
|
31206
31289
|
"_href": [1],
|
|
31207
31290
|
"level": [32],
|
|
31208
31291
|
"state": [32],
|
|
31209
|
-
"
|
|
31292
|
+
"focus": [64],
|
|
31210
31293
|
"expand": [64],
|
|
31211
31294
|
"collapse": [64],
|
|
31212
31295
|
"isOpen": [64]
|
|
@@ -31228,7 +31311,7 @@ class KolTreeWc {
|
|
|
31228
31311
|
validateLabel(this, value);
|
|
31229
31312
|
}
|
|
31230
31313
|
render() {
|
|
31231
|
-
return (hAsync(Host, { key: '
|
|
31314
|
+
return (hAsync(Host, { key: '6e1fc1f0d6757fec0658d28ff54fe73a58b60fa9', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("nav", { key: 'dfc733503c12e36fc8e6fc958273555f4e698237', class: "kol-tree", "aria-label": this.state._label }, hAsync("ul", { key: '9c68ce61a9bfbe5ade976515eaa43e2d9fbf380d', class: "kol-tree__treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: 'db660a5bc5cb5544f2c35e9e14f2a61d6e06ac69' })))));
|
|
31232
31315
|
}
|
|
31233
31316
|
static isTreeItem(element) {
|
|
31234
31317
|
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
|
@@ -31291,7 +31374,7 @@ class KolTreeWc {
|
|
|
31291
31374
|
return elementsWithInclude.filter((element) => element.include).map((element) => element.value);
|
|
31292
31375
|
}
|
|
31293
31376
|
async handleKeyDown(event) {
|
|
31294
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
31377
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
31295
31378
|
const openItems = await this.getOpenTreeItemElements();
|
|
31296
31379
|
const currentTreeItem = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(KolTreeItemTag);
|
|
31297
31380
|
const hasModifierKeyPressed = event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;
|
|
@@ -31301,12 +31384,12 @@ class KolTreeWc {
|
|
|
31301
31384
|
const currentIndex = openItems === null || openItems === void 0 ? void 0 : openItems.findIndex((elem) => elem === currentTreeItem);
|
|
31302
31385
|
switch (event.key) {
|
|
31303
31386
|
case 'ArrowDown': {
|
|
31304
|
-
await ((_b = openItems[currentIndex + 1]) === null || _b === void 0 ? void 0 : _b.
|
|
31387
|
+
await ((_b = openItems[currentIndex + 1]) === null || _b === void 0 ? void 0 : _b.focus());
|
|
31305
31388
|
event.preventDefault();
|
|
31306
31389
|
break;
|
|
31307
31390
|
}
|
|
31308
31391
|
case 'ArrowUp': {
|
|
31309
|
-
await ((_c = openItems[currentIndex - 1]) === null || _c === void 0 ? void 0 : _c.
|
|
31392
|
+
await ((_c = openItems[currentIndex - 1]) === null || _c === void 0 ? void 0 : _c.focus());
|
|
31310
31393
|
event.preventDefault();
|
|
31311
31394
|
break;
|
|
31312
31395
|
}
|
|
@@ -31314,7 +31397,7 @@ class KolTreeWc {
|
|
|
31314
31397
|
case 'ArrowRight': {
|
|
31315
31398
|
event.preventDefault();
|
|
31316
31399
|
if (await currentTreeItem.isOpen()) {
|
|
31317
|
-
await ((_d = openItems[currentIndex + 1]) === null || _d === void 0 ? void 0 : _d.
|
|
31400
|
+
await ((_d = openItems[currentIndex + 1]) === null || _d === void 0 ? void 0 : _d.focus());
|
|
31318
31401
|
}
|
|
31319
31402
|
else {
|
|
31320
31403
|
await currentTreeItem.expand();
|
|
@@ -31329,17 +31412,17 @@ class KolTreeWc {
|
|
|
31329
31412
|
}
|
|
31330
31413
|
else {
|
|
31331
31414
|
const parentIndex = openItems.findIndex((item) => item === currentTreeItem.parentElement);
|
|
31332
|
-
parentIndex !== -1 && (await ((_e = openItems[parentIndex]) === null || _e === void 0 ? void 0 : _e.
|
|
31415
|
+
parentIndex !== -1 && (await ((_e = openItems[parentIndex]) === null || _e === void 0 ? void 0 : _e.focus()));
|
|
31333
31416
|
}
|
|
31334
31417
|
break;
|
|
31335
31418
|
}
|
|
31336
31419
|
case 'Home': {
|
|
31337
|
-
await ((_f = openItems[0]) === null || _f === void 0 ? void 0 : _f.
|
|
31420
|
+
await ((_f = openItems[0]) === null || _f === void 0 ? void 0 : _f.focus());
|
|
31338
31421
|
event.preventDefault();
|
|
31339
31422
|
break;
|
|
31340
31423
|
}
|
|
31341
31424
|
case 'End': {
|
|
31342
|
-
await ((_g = openItems[openItems.length - 1]) === null || _g === void 0 ? void 0 : _g.
|
|
31425
|
+
await ((_g = openItems[openItems.length - 1]) === null || _g === void 0 ? void 0 : _g.focus());
|
|
31343
31426
|
event.preventDefault();
|
|
31344
31427
|
break;
|
|
31345
31428
|
}
|
|
@@ -31352,14 +31435,14 @@ class KolTreeWc {
|
|
|
31352
31435
|
.slice(startIndex, startIndex + openItems.length)
|
|
31353
31436
|
.findIndex((item) => { var _a; return (_a = item.getAttribute('_label')) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase().startsWith(char); });
|
|
31354
31437
|
if (matchIndex !== -1) {
|
|
31355
|
-
await wrapAroundItems[startIndex + matchIndex].
|
|
31438
|
+
await ((_j = wrapAroundItems[startIndex + matchIndex]) === null || _j === void 0 ? void 0 : _j.focus());
|
|
31356
31439
|
event.preventDefault();
|
|
31357
31440
|
}
|
|
31358
31441
|
}
|
|
31359
31442
|
break;
|
|
31360
31443
|
}
|
|
31361
31444
|
case '*': {
|
|
31362
|
-
const siblings = (
|
|
31445
|
+
const siblings = (_k = currentTreeItem.parentElement) === null || _k === void 0 ? void 0 : _k.querySelectorAll(KolTreeItemTag);
|
|
31363
31446
|
siblings === null || siblings === void 0 ? void 0 : siblings.forEach((element) => {
|
|
31364
31447
|
void element.expand();
|
|
31365
31448
|
});
|
|
@@ -31425,7 +31508,7 @@ class KolVersion {
|
|
|
31425
31508
|
};
|
|
31426
31509
|
}
|
|
31427
31510
|
render() {
|
|
31428
|
-
return (hAsync(Host, { key: '
|
|
31511
|
+
return (hAsync(Host, { key: 'c2c4090511476f2b782e5ec11eeefb14e84aeef8', class: "kol-version" }, hAsync(KolBadgeTag, { key: '8cca6fc737968718a4ade9c153711209b562c9bf', _color: "#bec5c9", _icons: {
|
|
31429
31512
|
left: { icon: 'kolicon-version', label: this.translateVersion },
|
|
31430
31513
|
}, _label: this.state._label })));
|
|
31431
31514
|
}
|
|
@@ -31486,6 +31569,8 @@ registerComponents([
|
|
|
31486
31569
|
KolCardWc,
|
|
31487
31570
|
KolCombobox,
|
|
31488
31571
|
KolDetails,
|
|
31572
|
+
KolDialog,
|
|
31573
|
+
KolDialogWc,
|
|
31489
31574
|
KolDrawer,
|
|
31490
31575
|
KolForm,
|
|
31491
31576
|
KolHeading,
|