@public-ui/hydrate 3.0.0-0edf6aa20a9ac9faa46ebe0e45a8c62841b05164.0 → 3.0.0-638ed75dd472d3e3ad4c1c3a3c72d705e6022731.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +318 -439
- package/dist/index.mjs +318 -439
- package/package.json +3 -3
package/dist/index.mjs
CHANGED
|
@@ -123,7 +123,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
|
|
|
123
123
|
|
|
124
124
|
|
|
125
125
|
const NAMESPACE = 'kolibri';
|
|
126
|
-
const BUILD = /* kolibri */ { allRenderFn: false, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender:
|
|
126
|
+
const BUILD = /* kolibri */ { allRenderFn: false, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: true, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: true, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
|
|
127
127
|
|
|
128
128
|
/*
|
|
129
129
|
Stencil Hydrate Platform v4.20.0 | MIT Licensed | https://stenciljs.com
|
|
@@ -1302,9 +1302,6 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
|
|
|
1302
1302
|
maybePromise = safeCall(instance, "componentWillLoad");
|
|
1303
1303
|
}
|
|
1304
1304
|
}
|
|
1305
|
-
{
|
|
1306
|
-
maybePromise = enqueue(maybePromise, () => safeCall(instance, "componentWillRender"));
|
|
1307
|
-
}
|
|
1308
1305
|
endSchedule();
|
|
1309
1306
|
return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
|
|
1310
1307
|
};
|
|
@@ -3672,35 +3669,6 @@ const watchJsonArrayString = (component, propName, itemValidation, value, arrayV
|
|
|
3672
3669
|
});
|
|
3673
3670
|
});
|
|
3674
3671
|
};
|
|
3675
|
-
const BOOLEAN = /^(true|false)$/;
|
|
3676
|
-
const INTEGER = /^-?(0|[1-9]\d*)$/;
|
|
3677
|
-
const FLOAT = /^-?(0.|[1-9]\d*.)\d*[1-9]$/;
|
|
3678
|
-
const mapString2Unknown = (value) => {
|
|
3679
|
-
const typeStr = typeof value;
|
|
3680
|
-
const oldValue = `${value}`;
|
|
3681
|
-
if (typeof value === 'string') {
|
|
3682
|
-
if (BOOLEAN.test(value)) {
|
|
3683
|
-
value = value === 'true';
|
|
3684
|
-
}
|
|
3685
|
-
else if (INTEGER.test(value)) {
|
|
3686
|
-
value = parseInt(value);
|
|
3687
|
-
}
|
|
3688
|
-
else if (FLOAT.test(value)) {
|
|
3689
|
-
value = parseFloat(value);
|
|
3690
|
-
}
|
|
3691
|
-
else if (JSON_CHARS.test(value)) {
|
|
3692
|
-
try {
|
|
3693
|
-
value = parseJson(value);
|
|
3694
|
-
}
|
|
3695
|
-
catch (e) {
|
|
3696
|
-
}
|
|
3697
|
-
}
|
|
3698
|
-
}
|
|
3699
|
-
if (typeStr !== typeof value) {
|
|
3700
|
-
devHint(`You have used a stringified property value (${oldValue} to ${JSON.stringify(value)}) which type switched from ${typeStr} to ${typeof value}!`);
|
|
3701
|
-
}
|
|
3702
|
-
return value;
|
|
3703
|
-
};
|
|
3704
3672
|
const stringifyJson = (value) => {
|
|
3705
3673
|
try {
|
|
3706
3674
|
return JSON.stringify(value).replace(/"/g, "'");
|
|
@@ -3755,14 +3723,6 @@ try {
|
|
|
3755
3723
|
catch (e) {
|
|
3756
3724
|
processEnv = 'production';
|
|
3757
3725
|
}
|
|
3758
|
-
const handleSlotContent = (hostRef, slotRef, slotName) => {
|
|
3759
|
-
if (hostRef && slotRef && typeof slotName === 'string') {
|
|
3760
|
-
const content = hostRef.querySelector(`[slot="${slotName}"]`);
|
|
3761
|
-
if (content) {
|
|
3762
|
-
slotRef.appendChild(content);
|
|
3763
|
-
}
|
|
3764
|
-
}
|
|
3765
|
-
};
|
|
3766
3726
|
const showExpertSlot = (label) => label === '';
|
|
3767
3727
|
const buildBadgeTextString = (accessKey, shortKey) => {
|
|
3768
3728
|
return accessKey || shortKey || '';
|
|
@@ -4234,29 +4194,17 @@ const validateMsg = (component, value) => {
|
|
|
4234
4194
|
}
|
|
4235
4195
|
catch (e) {
|
|
4236
4196
|
}
|
|
4237
|
-
watchValidator(component, `_msg`, (value) => isObject$2(value) &&
|
|
4238
|
-
defaultValue: {
|
|
4239
|
-
_description: '',
|
|
4240
|
-
_type: 'error',
|
|
4241
|
-
},
|
|
4242
|
-
});
|
|
4197
|
+
watchValidator(component, `_msg`, (value) => (isObject$2(value) && isString$3(value === null || value === void 0 ? void 0 : value._description, 1)) || (value === null || value === void 0 ? void 0 : value._type) === undefined, new Set(['MsgPropType']), value);
|
|
4243
4198
|
});
|
|
4244
4199
|
};
|
|
4245
|
-
function isMsgEmpty(msg) {
|
|
4246
|
-
if (!msg) {
|
|
4247
|
-
return true;
|
|
4248
|
-
}
|
|
4249
|
-
return msg._type === 'error' && !msg._description;
|
|
4250
|
-
}
|
|
4251
4200
|
function convertMsgToInternMsg(msg) {
|
|
4252
|
-
if (!msg
|
|
4201
|
+
if (!msg) {
|
|
4253
4202
|
return undefined;
|
|
4254
4203
|
}
|
|
4255
4204
|
return transformObjectProperties(msg);
|
|
4256
4205
|
}
|
|
4257
|
-
function
|
|
4258
|
-
const
|
|
4259
|
-
const showMsg = hasValidMsg && (touched === true || (msg === null || msg === void 0 ? void 0 : msg.type) !== 'error');
|
|
4206
|
+
function checkHasMsg(msg, touched) {
|
|
4207
|
+
const showMsg = msg ? touched === true || (msg === null || msg === void 0 ? void 0 : msg.type) !== 'error' : false;
|
|
4260
4208
|
return showMsg;
|
|
4261
4209
|
}
|
|
4262
4210
|
|
|
@@ -4461,7 +4409,7 @@ var KoliBriProgressVariantEnum;
|
|
|
4461
4409
|
KoliBriProgressVariantEnum["cycle"] = "cycle";
|
|
4462
4410
|
})(KoliBriProgressVariantEnum || (KoliBriProgressVariantEnum = {}));
|
|
4463
4411
|
|
|
4464
|
-
const defaultStyleCss$M = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
4412
|
+
const defaultStyleCss$M = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-abbr {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
4465
4413
|
var KolAbbrDefaultStyle0 = defaultStyleCss$M;
|
|
4466
4414
|
|
|
4467
4415
|
class KolAbbr {
|
|
@@ -4768,7 +4716,7 @@ class KolAccordion {
|
|
|
4768
4716
|
}; }
|
|
4769
4717
|
}
|
|
4770
4718
|
|
|
4771
|
-
const defaultStyleCss$K = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
4719
|
+
const defaultStyleCss$K = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\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 place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-alert {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
4772
4720
|
var KolAlertDefaultStyle0 = defaultStyleCss$K;
|
|
4773
4721
|
|
|
4774
4722
|
class KolAlert {
|
|
@@ -4860,6 +4808,8 @@ var locale_de = {
|
|
|
4860
4808
|
'hide-password': 'ausblenden',
|
|
4861
4809
|
'no-results-message': 'Keine Ergebnisse gefunden.',
|
|
4862
4810
|
'delete-selection': 'Auswahl entfernen',
|
|
4811
|
+
'filename-text': 'Datei auswählen oder hier ablegen...',
|
|
4812
|
+
'data-browse-text': 'Datei auswählen',
|
|
4863
4813
|
};
|
|
4864
4814
|
|
|
4865
4815
|
var locale_en = {
|
|
@@ -4912,6 +4862,8 @@ var locale_en = {
|
|
|
4912
4862
|
'hide-password': 'Hide',
|
|
4913
4863
|
'no-results-message': 'No results found.',
|
|
4914
4864
|
'delete-selection': 'Delete selection',
|
|
4865
|
+
'filename-text': 'Choose a file or drop it here...',
|
|
4866
|
+
'data-browse-text': 'Browse',
|
|
4915
4867
|
};
|
|
4916
4868
|
|
|
4917
4869
|
const mapLocaleKeys = (locale) => Object.keys(locale).reduce((a, c) => ((a[`${'kol'}-${c}`] = locale[c]), a), {});
|
|
@@ -4989,7 +4941,9 @@ if (processEnv === 'test') {
|
|
|
4989
4941
|
}
|
|
4990
4942
|
|
|
4991
4943
|
const Icon = ({ ariaLabel, icon }) => {
|
|
4992
|
-
return hAsync(
|
|
4944
|
+
return (hAsync(Fragment, null,
|
|
4945
|
+
hAsync("span", { class: "visually-hidden" }, ariaLabel),
|
|
4946
|
+
hAsync(KolIconTag, { class: "kol-alert__heading-icon", _label: "", _icons: icon })));
|
|
4993
4947
|
};
|
|
4994
4948
|
const AlertIcon = ({ type, label }) => {
|
|
4995
4949
|
switch (type) {
|
|
@@ -13868,7 +13822,7 @@ const LabelFc = ({ hasExpertSlot, accessKey, shortKey, label, showBadge = true }
|
|
|
13868
13822
|
return (hAsync(Fragment, null,
|
|
13869
13823
|
hAsync(InternalUnderlinedBadgeText, { badgeText: badgeText, label: label }),
|
|
13870
13824
|
"\u00A0",
|
|
13871
|
-
hAsync("span", { class: "
|
|
13825
|
+
hAsync("span", { class: "badge-text-hint", "aria-hidden": "true" }, badgeText)));
|
|
13872
13826
|
};
|
|
13873
13827
|
const KolFormFieldLabelFc = (_a) => {
|
|
13874
13828
|
var { component: Component = 'label', id, baseClassName = 'kol-form-field', class: classNames, accessKey, shortKey, label, hideLabel, hasExpertSlot, showBadge } = _a, other = __rest(_a, ["component", "id", "baseClassName", "class", "accessKey", "shortKey", "label", "hideLabel", "hasExpertSlot", "showBadge"]);
|
|
@@ -13927,7 +13881,7 @@ const KolFormFieldFc = (props, children) => {
|
|
|
13927
13881
|
const showHint = !renderNoHint;
|
|
13928
13882
|
const showTooltip = !renderNoTooltip;
|
|
13929
13883
|
const hasExpertSlot = showExpertSlot(label);
|
|
13930
|
-
const showMsg =
|
|
13884
|
+
const showMsg = checkHasMsg(msg, touched);
|
|
13931
13885
|
const badgeText = buildBadgeTextString(accessKey, shortKey);
|
|
13932
13886
|
const useTooltipInsteadOfLabel = showTooltip && !hasExpertSlot && hideLabel;
|
|
13933
13887
|
let stateCssClasses = {
|
|
@@ -13941,7 +13895,7 @@ const KolFormFieldFc = (props, children) => {
|
|
|
13941
13895
|
if (showMsg) {
|
|
13942
13896
|
stateCssClasses = Object.assign(Object.assign({}, stateCssClasses), { [`kol-form-field--${(msg === null || msg === void 0 ? void 0 : msg.type) || 'error'}`]: true, [`kol-form-field--${getModifierClassNameByMsgType(msg)}`]: true });
|
|
13943
13897
|
}
|
|
13944
|
-
return (hAsync(Component, Object.assign({ class: clsx('kol-form-field', stateCssClasses, classNames)
|
|
13898
|
+
return (hAsync(Component, Object.assign({ class: clsx('kol-form-field', stateCssClasses, classNames) }, other),
|
|
13945
13899
|
showLabel && (hAsync(KolFieldControlLabelFc, Object.assign({}, (formFieldLabelProps || {}), { id: id, hasExpertSlot: hasExpertSlot, hideLabel: hideLabel, label: label, accessKey: accessKey, shortKey: shortKey }))),
|
|
13946
13900
|
hAsync(InputContainer$1, Object.assign({}, formFieldInputProps),
|
|
13947
13901
|
children,
|
|
@@ -13973,7 +13927,7 @@ const Container = (_a, children) => {
|
|
|
13973
13927
|
};
|
|
13974
13928
|
const KolInputContainerFc = (props, children) => {
|
|
13975
13929
|
const { class: classNames, startAdornment, endAdornment, disabled, msg, touched, containerProps, startAdornmentProps, endAdornmentProps } = props, other = __rest(props, ["class", "startAdornment", "endAdornment", "disabled", "msg", "touched", "containerProps", "startAdornmentProps", "endAdornmentProps"]);
|
|
13976
|
-
const showMsg =
|
|
13930
|
+
const showMsg = checkHasMsg(msg, touched);
|
|
13977
13931
|
const stateCssClasses = {
|
|
13978
13932
|
['kol-input-container--disabled']: disabled,
|
|
13979
13933
|
[`kol-input-container--${(msg === null || msg === void 0 ? void 0 : msg.type) || 'error'}`]: showMsg,
|
|
@@ -14011,7 +13965,7 @@ function getDefaultProps({ ariaDescribedBy, hideLabel, label }) {
|
|
|
14011
13965
|
|
|
14012
13966
|
const InputFc = (props) => {
|
|
14013
13967
|
const { class: classNames, msg, required, disabled, touched, readonly, ariaDescribedBy, hideLabel, label, suggestions, value } = props, other = __rest(props, ["class", "msg", "required", "disabled", "touched", "readonly", "ariaDescribedBy", "hideLabel", "label", "suggestions", "value"]);
|
|
14014
|
-
const showMsg =
|
|
13968
|
+
const showMsg = checkHasMsg(msg, touched);
|
|
14015
13969
|
const stateCssClasses = {
|
|
14016
13970
|
['kol-input--disabled']: Boolean(disabled),
|
|
14017
13971
|
['kol-input--required']: Boolean(required),
|
|
@@ -14028,7 +13982,7 @@ var KolInputFc = InputFc;
|
|
|
14028
13982
|
|
|
14029
13983
|
const TextAreaFc = (props) => {
|
|
14030
13984
|
const { class: classNames, msg, touched, readonly, disabled, required, ariaDescribedBy, hideLabel, label } = props, other = __rest(props, ["class", "msg", "touched", "readonly", "disabled", "required", "ariaDescribedBy", "hideLabel", "label"]);
|
|
14031
|
-
const showMsg =
|
|
13985
|
+
const showMsg = checkHasMsg(msg, touched);
|
|
14032
13986
|
const stateCssClasses = {
|
|
14033
13987
|
['kol-textarea--disabled']: Boolean(disabled),
|
|
14034
13988
|
['kol-textarea--required']: Boolean(required),
|
|
@@ -14050,7 +14004,7 @@ const SuggestionsFc = (_a) => {
|
|
|
14050
14004
|
};
|
|
14051
14005
|
var KolSuggestionsFc = SuggestionsFc;
|
|
14052
14006
|
|
|
14053
|
-
const defaultStyleCss$I = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
14007
|
+
const defaultStyleCss$I = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-badge {\n display: inline-flex;\n place-items: center;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-badge .kol-badge__smart-button .button {\n color: inherit;\n }\n}";
|
|
14054
14008
|
var KolBadgeDefaultStyle0 = defaultStyleCss$I;
|
|
14055
14009
|
|
|
14056
14010
|
featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
|
|
@@ -14218,7 +14172,7 @@ class KolBreadcrumb {
|
|
|
14218
14172
|
}; }
|
|
14219
14173
|
}
|
|
14220
14174
|
|
|
14221
|
-
const defaultStyleCss$G = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
14175
|
+
const defaultStyleCss$G = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\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 font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n display: inline-flex;\n place-items: center;\n text-align: center;\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 margin: auto;\n width: 100%;\n }\n}";
|
|
14222
14176
|
var KolButtonDefaultStyle0 = defaultStyleCss$G;
|
|
14223
14177
|
|
|
14224
14178
|
class KolButton {
|
|
@@ -14243,7 +14197,6 @@ class KolButton {
|
|
|
14243
14197
|
this._role = undefined;
|
|
14244
14198
|
this._shortKey = undefined;
|
|
14245
14199
|
this._syncValueBySelector = undefined;
|
|
14246
|
-
this._tabIndex = undefined;
|
|
14247
14200
|
this._tooltipAlign = 'top';
|
|
14248
14201
|
this._type = 'button';
|
|
14249
14202
|
this._value = undefined;
|
|
@@ -14257,7 +14210,7 @@ class KolButton {
|
|
|
14257
14210
|
await ((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
14258
14211
|
}
|
|
14259
14212
|
render() {
|
|
14260
|
-
return (hAsync(KolButtonWcTag, { key: '
|
|
14213
|
+
return (hAsync(KolButtonWcTag, { key: 'f34321904090810781ad2592f7ccd6b9f86c32ef', 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, _label: this._label, _name: this._name, _on: this._on, _role: this._role, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: 'b598870f3d8a3cb3dde1eee9319a5423ffd83135', name: "expert", slot: "expert" })));
|
|
14261
14214
|
}
|
|
14262
14215
|
static get delegatesFocus() { return true; }
|
|
14263
14216
|
static get style() { return {
|
|
@@ -14283,7 +14236,6 @@ class KolButton {
|
|
|
14283
14236
|
"_role": [1],
|
|
14284
14237
|
"_shortKey": [1, "_short-key"],
|
|
14285
14238
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
14286
|
-
"_tabIndex": [2, "_tab-index"],
|
|
14287
14239
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
14288
14240
|
"_type": [1],
|
|
14289
14241
|
"_value": [8],
|
|
@@ -14297,7 +14249,7 @@ class KolButton {
|
|
|
14297
14249
|
}; }
|
|
14298
14250
|
}
|
|
14299
14251
|
|
|
14300
|
-
const defaultStyleCss$F = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
14252
|
+
const defaultStyleCss$F = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n align-items: baseline;\n display: inline-flex;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-button__text .kol-span__label {\n text-decoration-line: underline;\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__icon {\n display: inline-flex;\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
14301
14253
|
var KolButtonLinkDefaultStyle0 = defaultStyleCss$F;
|
|
14302
14254
|
|
|
14303
14255
|
class KolButtonLink {
|
|
@@ -14321,7 +14273,6 @@ class KolButtonLink {
|
|
|
14321
14273
|
this._role = undefined;
|
|
14322
14274
|
this._shortKey = undefined;
|
|
14323
14275
|
this._syncValueBySelector = undefined;
|
|
14324
|
-
this._tabIndex = undefined;
|
|
14325
14276
|
this._tooltipAlign = 'top';
|
|
14326
14277
|
this._type = 'button';
|
|
14327
14278
|
this._value = undefined;
|
|
@@ -14334,7 +14285,7 @@ class KolButtonLink {
|
|
|
14334
14285
|
await ((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
14335
14286
|
}
|
|
14336
14287
|
render() {
|
|
14337
|
-
return (hAsync(KolButtonWcTag, { key: '
|
|
14288
|
+
return (hAsync(KolButtonWcTag, { key: '3dd15fd88e94a135a3ef5fe9261ff673f9e3a31e', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: "link", _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value }, hAsync("slot", { key: '2cd5b822f53a2adeba5b67acc9bf3d2fadde3b85', name: "expert", slot: "expert" })));
|
|
14338
14289
|
}
|
|
14339
14290
|
static get delegatesFocus() { return true; }
|
|
14340
14291
|
static get style() { return {
|
|
@@ -14359,7 +14310,6 @@ class KolButtonLink {
|
|
|
14359
14310
|
"_role": [1],
|
|
14360
14311
|
"_shortKey": [1, "_short-key"],
|
|
14361
14312
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
14362
|
-
"_tabIndex": [2, "_tab-index"],
|
|
14363
14313
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
14364
14314
|
"_type": [1],
|
|
14365
14315
|
"_value": [8],
|
|
@@ -14855,7 +14805,7 @@ class KolButtonWc {
|
|
|
14855
14805
|
}; }
|
|
14856
14806
|
}
|
|
14857
14807
|
|
|
14858
|
-
const defaultStyleCss$E = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
14808
|
+
const defaultStyleCss$E = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-card {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n height: 100%;\n position: relative;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-card__close-button {\n position: absolute;\n top: 0;\n right: 0;\n }\n}";
|
|
14859
14809
|
var KolCardDefaultStyle0 = defaultStyleCss$E;
|
|
14860
14810
|
|
|
14861
14811
|
class KolCard {
|
|
@@ -15216,18 +15166,18 @@ class ComboboxController extends InputIconController {
|
|
|
15216
15166
|
}
|
|
15217
15167
|
|
|
15218
15168
|
const getRenderStates$1 = (state) => {
|
|
15219
|
-
var _a
|
|
15220
|
-
const
|
|
15221
|
-
const
|
|
15169
|
+
var _a;
|
|
15170
|
+
const isMessageValid = ((_a = state._msg) === null || _a === void 0 ? void 0 : _a._type) === 'error';
|
|
15171
|
+
const hasMsg = isMessageValid && state._touched === true;
|
|
15222
15172
|
const hasHint = typeof state._hint === 'string' && state._hint.length > 0;
|
|
15223
15173
|
const ariaDescribedBy = [];
|
|
15224
|
-
if (
|
|
15174
|
+
if (hasMsg === true) {
|
|
15225
15175
|
ariaDescribedBy.push(`${state._id}-error`);
|
|
15226
15176
|
}
|
|
15227
15177
|
if (hasHint === true) {
|
|
15228
15178
|
ariaDescribedBy.push(`${state._id}-hint`);
|
|
15229
15179
|
}
|
|
15230
|
-
return {
|
|
15180
|
+
return { hasMsg, hasHint, ariaDescribedBy };
|
|
15231
15181
|
};
|
|
15232
15182
|
|
|
15233
15183
|
const getRenderStates = (state) => {
|
|
@@ -15307,7 +15257,7 @@ var KolInputStateWrapperFc = InputStateWrapper;
|
|
|
15307
15257
|
|
|
15308
15258
|
const KolButtonFc = (props) => {
|
|
15309
15259
|
const { label, icons, hideLabel, disabled, onClick } = props, other = __rest(props, ["label", "icons", "hideLabel", "disabled", "onClick"]);
|
|
15310
|
-
return hAsync(KolButtonWcTag, Object.assign({
|
|
15260
|
+
return hAsync(KolButtonWcTag, Object.assign({ _label: label, _disabled: disabled, _icons: icons, _hideLabel: hideLabel, _on: { onClick } }, other));
|
|
15311
15261
|
};
|
|
15312
15262
|
var KolButtonFc$1 = KolButtonFc;
|
|
15313
15263
|
|
|
@@ -15356,13 +15306,13 @@ const InputContainerStateWrapperFc = ({ state, endAdornment: defaultEndAdornment
|
|
|
15356
15306
|
}
|
|
15357
15307
|
}
|
|
15358
15308
|
if (leftIconProps) {
|
|
15359
|
-
startAdornment.push(hAsync(KolIconButtonFc$1, Object.assign({ componentName: "icon" }, (isObject$1(leftIconProps) ? leftIconProps : {}))));
|
|
15309
|
+
startAdornment.push(hAsync(KolIconButtonFc$1, Object.assign({ componentName: "icon", class: "kol-input-container__icon" }, (isObject$1(leftIconProps) ? leftIconProps : {}))));
|
|
15360
15310
|
}
|
|
15361
15311
|
if (isObject$1(smartButton)) {
|
|
15362
|
-
endAdornment.push(hAsync(KolIconButtonFc$1, Object.assign({ componentName: "button" }, smartButton, { hideLabel: true, disabled: disabled })));
|
|
15312
|
+
endAdornment.push(hAsync(KolIconButtonFc$1, Object.assign({ componentName: "button", class: "kol-input-container__smart-button" }, smartButton, { hideLabel: true, disabled: disabled })));
|
|
15363
15313
|
}
|
|
15364
15314
|
if (rightIconProps) {
|
|
15365
|
-
endAdornment.push(hAsync(KolIconButtonFc$1, Object.assign({ componentName: "icon" }, (isObject$1(rightIconProps) ? rightIconProps : {}))));
|
|
15315
|
+
endAdornment.push(hAsync(KolIconButtonFc$1, Object.assign({ componentName: "icon", class: "kol-input-container__icon" }, (isObject$1(rightIconProps) ? rightIconProps : {}))));
|
|
15366
15316
|
}
|
|
15367
15317
|
return (hAsync(KolInputContainerFc$1, { disabled: disabled, msg: msg, touched: touched, startAdornment: startAdornment, endAdornment: endAdornment }, children));
|
|
15368
15318
|
};
|
|
@@ -15386,7 +15336,7 @@ const CustomSuggestionsOptionsGroupFc = ({ blockSuggestionMouseOver, onKeyDown }
|
|
|
15386
15336
|
};
|
|
15387
15337
|
var CustomSuggestionsOptionsGroupFc$1 = CustomSuggestionsOptionsGroupFc;
|
|
15388
15338
|
|
|
15389
|
-
const defaultStyleCss$D = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
15339
|
+
const defaultStyleCss$D = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\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 place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-custom-suggestions-option {\n cursor: pointer;\n white-space: normal;\n overflow-wrap: break-word;\n word-wrap: break-word;\n line-height: 1.5;\n box-sizing: border-box;\n }\n .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n cursor: none !important;\n }\n}\n@layer kol-component {\n .kol-custom-suggestions-options-group {\n display: block;\n position: absolute;\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 2;\n background-color: white;\n max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-custom-suggestions-toggle {\n align-items: center;\n cursor: pointer;\n display: flex;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}\n@layer kol-component {\n .kol-input-container {\n align-items: center;\n background-color: white;\n cursor: pointer;\n display: grid;\n grid-template-columns: 1fr;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\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}\n@layer kol-component {\n .kol-input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input:focus {\n outline: none;\n }\n}";
|
|
15390
15340
|
var KolComboboxDefaultStyle0 = defaultStyleCss$D;
|
|
15391
15341
|
|
|
15392
15342
|
class KolCombobox {
|
|
@@ -15397,10 +15347,10 @@ class KolCombobox {
|
|
|
15397
15347
|
var _a;
|
|
15398
15348
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
15399
15349
|
}
|
|
15400
|
-
selectOption(
|
|
15350
|
+
selectOption(option) {
|
|
15401
15351
|
var _a;
|
|
15402
|
-
this.controller.onFacade.onInput(
|
|
15403
|
-
this.controller.onFacade.onChange(
|
|
15352
|
+
this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: option } }), true, option);
|
|
15353
|
+
this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: option } }), option);
|
|
15404
15354
|
this.controller.setFormAssociatedValue(option);
|
|
15405
15355
|
this.state._value = option;
|
|
15406
15356
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
@@ -15483,13 +15433,13 @@ class KolCombobox {
|
|
|
15483
15433
|
}, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder });
|
|
15484
15434
|
}
|
|
15485
15435
|
render() {
|
|
15486
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
15436
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '3d6514acdb1077d5a3ac4eee4601f608d194bcb1' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '56543650f4d108e710f2cf5b27c4f2471dc97f18', state: this.state }, hAsync("div", { key: 'c696456759ce6b25bccc6fd0c4cb8d70319f535d', class: "kol-combobox__group" }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '4b61314c413daef430de5db343361c003e8a72a4' }, this.getInputProps())), hAsync(CustomSuggestionsToggleFc$1, { key: '07a27103624970737b1a3b2595b431cf273a543d', onClick: this.toggleListbox.bind(this), disabled: this.state._disabled })), this._isOpen && !(this.state._disabled === true) && (hAsync(CustomSuggestionsOptionsGroupFc$1, { key: '43df3a57a5ca0d7b7437e6ffb18f8551cc29bc5e', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
|
|
15487
15437
|
this._filteredSuggestions.length > 0 &&
|
|
15488
15438
|
this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc$1, { index: index, option: option, ref: (el) => {
|
|
15489
15439
|
if (el)
|
|
15490
15440
|
this.refSuggestions[index] = el;
|
|
15491
|
-
}, selected: this.state._value === option, onClick: (
|
|
15492
|
-
this.selectOption(
|
|
15441
|
+
}, selected: this.state._value === option, onClick: () => {
|
|
15442
|
+
this.selectOption(option);
|
|
15493
15443
|
this.toggleListbox();
|
|
15494
15444
|
}, onMouseOver: () => {
|
|
15495
15445
|
if (!this.blockSuggestionMouseOver) {
|
|
@@ -15499,7 +15449,7 @@ class KolCombobox {
|
|
|
15499
15449
|
this.focusOption(index);
|
|
15500
15450
|
}, onKeyDown: (e) => {
|
|
15501
15451
|
if (e.key === 'Enter' || e.key === 'NumpadEnter') {
|
|
15502
|
-
this.selectOption(
|
|
15452
|
+
this.selectOption(option);
|
|
15503
15453
|
this.toggleListbox();
|
|
15504
15454
|
e.preventDefault();
|
|
15505
15455
|
}
|
|
@@ -15624,7 +15574,6 @@ class KolCombobox {
|
|
|
15624
15574
|
this._required = false;
|
|
15625
15575
|
this._shortKey = undefined;
|
|
15626
15576
|
this._syncValueBySelector = undefined;
|
|
15627
|
-
this._tabIndex = undefined;
|
|
15628
15577
|
this._tooltipAlign = 'top';
|
|
15629
15578
|
this._touched = false;
|
|
15630
15579
|
this._value = undefined;
|
|
@@ -15692,9 +15641,6 @@ class KolCombobox {
|
|
|
15692
15641
|
validateSyncValueBySelector(value) {
|
|
15693
15642
|
this.controller.validateSyncValueBySelector(value);
|
|
15694
15643
|
}
|
|
15695
|
-
validateTabIndex(value) {
|
|
15696
|
-
this.controller.validateTabIndex(value);
|
|
15697
|
-
}
|
|
15698
15644
|
validateTouched(value) {
|
|
15699
15645
|
this.controller.validateTouched(value);
|
|
15700
15646
|
}
|
|
@@ -15754,7 +15700,6 @@ class KolCombobox {
|
|
|
15754
15700
|
"_suggestions": ["validateSuggestions"],
|
|
15755
15701
|
"_required": ["validateRequired"],
|
|
15756
15702
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
15757
|
-
"_tabIndex": ["validateTabIndex"],
|
|
15758
15703
|
"_touched": ["validateTouched"],
|
|
15759
15704
|
"_value": ["validateValue"]
|
|
15760
15705
|
}; }
|
|
@@ -15781,7 +15726,6 @@ class KolCombobox {
|
|
|
15781
15726
|
"_required": [4],
|
|
15782
15727
|
"_shortKey": [1, "_short-key"],
|
|
15783
15728
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
15784
|
-
"_tabIndex": [2, "_tab-index"],
|
|
15785
15729
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
15786
15730
|
"_touched": [1540],
|
|
15787
15731
|
"_value": [1537],
|
|
@@ -16058,7 +16002,7 @@ class KolDrawer {
|
|
|
16058
16002
|
}; }
|
|
16059
16003
|
}
|
|
16060
16004
|
|
|
16061
|
-
const defaultStyleCss$A = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
16005
|
+
const defaultStyleCss$A = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n @layer kol-component {\n :host {\n display: inline-block;\n }\n .kol-link {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n align-items: baseline;\n display: inline-flex;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-link__text .kol-span__label {\n text-decoration-line: underline;\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__icon {\n display: inline-flex;\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n }\n @layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n }\n .kol-form {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
16062
16006
|
var KolFormDefaultStyle0 = defaultStyleCss$A;
|
|
16063
16007
|
|
|
16064
16008
|
class KolForm {
|
|
@@ -16415,7 +16359,6 @@ class InputRadioController extends InputCheckboxRadioController {
|
|
|
16415
16359
|
});
|
|
16416
16360
|
}
|
|
16417
16361
|
validateValue(value) {
|
|
16418
|
-
value = mapString2Unknown(value);
|
|
16419
16362
|
value = Array.isArray(value) ? value[0] : value;
|
|
16420
16363
|
setState(this.component, '_value', value, {
|
|
16421
16364
|
afterPatch: this.afterPatchOptions,
|
|
@@ -16490,7 +16433,7 @@ const KolFieldControlFc = (props, children) => {
|
|
|
16490
16433
|
const { class: classNames, id, disabled, label, hideLabel, labelAlign, renderNoTooltip, hint, renderNoHint, tooltipAlign, accessKey, shortKey, msg, touched, required, readonly, fieldControlInputProps, fieldControlLabelProps, fieldControlTooltipProps, fieldControlHintProps } = props, other = __rest(props, ["class", "id", "disabled", "label", "hideLabel", "labelAlign", "renderNoTooltip", "hint", "renderNoHint", "tooltipAlign", "accessKey", "shortKey", "msg", "touched", "required", "readonly", "fieldControlInputProps", "fieldControlLabelProps", "fieldControlTooltipProps", "fieldControlHintProps"]);
|
|
16491
16434
|
const canShowHint = !renderNoHint;
|
|
16492
16435
|
const canShowTooltip = !renderNoTooltip;
|
|
16493
|
-
const showMsg =
|
|
16436
|
+
const showMsg = checkHasMsg(msg, touched);
|
|
16494
16437
|
const hasExpertSlot = showExpertSlot(label);
|
|
16495
16438
|
const useTooltipInsteadOfLabel = canShowTooltip && !hasExpertSlot && hideLabel;
|
|
16496
16439
|
const badgeText = buildBadgeTextString(accessKey, shortKey);
|
|
@@ -16560,7 +16503,7 @@ const InputWrapperFc = (_a) => {
|
|
|
16560
16503
|
const CheckboxFc = (_a) => {
|
|
16561
16504
|
var _b;
|
|
16562
16505
|
var { class: classNames, variant = 'default', icon, inputProps } = _a, other = __rest(_a, ["class", "variant", "icon", "inputProps"]);
|
|
16563
|
-
const showMsg =
|
|
16506
|
+
const showMsg = checkHasMsg(inputProps === null || inputProps === void 0 ? void 0 : inputProps.msg, inputProps === null || inputProps === void 0 ? void 0 : inputProps.touched);
|
|
16564
16507
|
const cssVariants = {
|
|
16565
16508
|
[`kol-checkbox--variant-${variant}`]: true,
|
|
16566
16509
|
[`kol-checkbox--checked`]: inputProps === null || inputProps === void 0 ? void 0 : inputProps.checked,
|
|
@@ -16607,7 +16550,7 @@ const CheckboxStateWrapper = (_a) => {
|
|
|
16607
16550
|
};
|
|
16608
16551
|
var KolCheckboxStateWrapperFc = CheckboxStateWrapper;
|
|
16609
16552
|
|
|
16610
|
-
const defaultStyleCss$w = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}\n@layer kol-component {\n .kol-field-control {\n min-height: var(--a11y-min-size);\n display: grid;\n grid-template-columns: auto 1fr;\n grid-template-areas: \"input label\";\n grid-template-rows: auto;\n align-items: center;\n justify-content: left;\n }\n .kol-field-control:has(.kol-field-control__hint) {\n grid-template-columns: auto 1fr;\n grid-template-areas: \"input label\" \"hint hint\";\n grid-template-rows: auto auto;\n }\n .kol-field-control--label-align-left:not(.kol-field-control--hide-label) {\n grid-template-columns: 1fr auto;\n grid-template-areas: \"label input\";\n grid-template-rows: auto;\n }\n .kol-field-control--label-align-left:not(.kol-field-control--hide-label):has(.kol-field-control__hint) {\n grid-template-columns: 1fr auto;\n grid-template-areas: \"label input\" \"hint hint\";\n grid-template-rows: auto auto;\n }\n .kol-field-control__input {\n grid-area: input;\n display: flex;\n min-height: var(--a11y-min-size);\n align-items: center;\n }\n .kol-field-control__label {\n align-items: center;\n cursor: pointer;\n display: flex;\n flex-grow: 1;\n grid-area: label;\n min-height: var(--a11y-min-size);\n }\n .kol-field-control__label--visually-hidden {\n height: 0;\n margin: 0;\n padding: 0;\n visibility: hidden;\n }\n .kol-field-control__label-text::after {\n content: \"\";\n }\n .kol-field-control__tooltip .span-label::after {\n content: \"\";\n }\n .kol-field-control__hint {\n grid-area: hint;\n }\n .kol-field-control--disabled .kol-field-control__label {\n cursor: not-allowed;\n opacity: 0.5;\n }\n .kol-field-control--required .kol-field-control__label-text::after {\n content: \"*\";\n }\n .kol-field-control--required .kol-field-control__tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n }\n .kol-checkbox {\n position: relative;\n display: flex;\n align-items: center;\n }\n .kol-checkbox .kol-input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n appearance: none;\n background-color: #fff;\n cursor: pointer;\n transition: 0.5s;\n margin: 0;\n border-style: solid;\n border-width: 2px;\n }\n .kol-checkbox .kol-input:before {\n content: \"\";\n cursor: pointer;\n }\n .kol-checkbox .kol-input:disabled:before {\n cursor: not-allowed;\n }\n /**\n * Variant: Checkbox\n */\n .kol-checkbox--variant-default {\n height: var(--a11y-min-size);\n justify-content: center;\n position: relative;\n width: var(--a11y-min-size);\n }\n .kol-checkbox--variant-default .kol-icon {\n display: flex;\n inset: auto;\n position: absolute;\n z-index: 1;\n pointer-events: none;\n }\n .kol-checkbox--variant-default .kol-icon::part(icon) {\n display: none;\n }\n .kol-checkbox--variant-default .kol-input {\n width: calc(22rem / var(--kolibri-root-font-size, 16));\n height: calc(22rem / var(--kolibri-root-font-size, 16));\n }\n .kol-checkbox--variant-default.kol-checkbox--checked .kol-icon::part(icon), .kol-checkbox--variant-default.kol-checkbox--indeterminate .kol-icon::part(icon) {\n display: block;\n }\n /**\n * Variant: Switch\n */\n .kol-checkbox--variant-switch {\n position: relative;\n }\n .kol-checkbox--variant-switch .kol-input {\n display: inline-block;\n height: 1.7em;\n min-width: 3.2em;\n position: relative;\n width: 3.2em;\n }\n .kol-checkbox--variant-switch .kol-input::before {\n background-color: #000;\n height: 1.2em;\n left: calc(0.25em - (2rem / var(--kolibri-root-font-size, 16)));\n top: calc(0.25em - (2rem / var(--kolibri-root-font-size, 16)));\n position: absolute;\n transition: 0.5s;\n width: 1.2em;\n }\n .kol-checkbox--variant-switch .kol-input:checked::before {\n transform: translateX(1.5em);\n }\n .kol-checkbox--variant-switch .kol-input:indeterminate::before {\n transform: translateX(0.75em);\n }\n .kol-checkbox--variant-switch .kol-icon {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.2em;\n height: 1.2em;\n position: absolute;\n z-index: 1;\n top: 50%;\n left: calc(4rem / var(--kolibri-root-font-size, 16));\n transform: translate(0, -50%);\n transition: 0.5s;\n color: #000;\n }\n .kol-checkbox--variant-switch.kol-checkbox--checked .kol-icon {\n transform: translate(1.5em, -50%);\n }\n .kol-checkbox--variant-switch.kol-checkbox--indeterminate .kol-icon {\n transform: translate(0.75em, -50%);\n }\n /**\n * Variant: Button\n */\n .kol-checkbox--variant-button {\n width: var(--a11y-min-size);\n }\n .kol-checkbox--variant-button .kol-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n }\n}";
|
|
16553
|
+
const defaultStyleCss$w = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}\n@layer kol-component {\n .kol-field-control {\n min-height: var(--a11y-min-size);\n display: grid;\n grid-template-columns: auto 1fr;\n grid-template-areas: \"input label\";\n grid-template-rows: auto;\n align-items: center;\n justify-content: left;\n }\n .kol-field-control:has(.kol-field-control__hint) {\n grid-template-columns: auto 1fr;\n grid-template-areas: \"input label\" \"hint hint\";\n grid-template-rows: auto auto;\n }\n .kol-field-control--label-align-left:not(.kol-field-control--hide-label) {\n grid-template-columns: 1fr auto;\n grid-template-areas: \"label input\";\n grid-template-rows: auto;\n }\n .kol-field-control--label-align-left:not(.kol-field-control--hide-label):has(.kol-field-control__hint) {\n grid-template-columns: 1fr auto;\n grid-template-areas: \"label input\" \"hint hint\";\n grid-template-rows: auto auto;\n }\n .kol-field-control__input {\n grid-area: input;\n display: flex;\n min-height: var(--a11y-min-size);\n align-items: center;\n }\n .kol-field-control__label {\n align-items: center;\n cursor: pointer;\n display: flex;\n flex-grow: 1;\n grid-area: label;\n min-height: var(--a11y-min-size);\n }\n .kol-field-control__label--visually-hidden {\n height: 0;\n margin: 0;\n padding: 0;\n visibility: hidden;\n }\n .kol-field-control__label-text::after {\n content: \"\";\n }\n .kol-field-control__tooltip .span-label::after {\n content: \"\";\n }\n .kol-field-control__hint {\n grid-area: hint;\n }\n .kol-field-control--disabled .kol-field-control__label {\n cursor: not-allowed;\n opacity: 0.5;\n }\n .kol-field-control--required .kol-field-control__label-text::after {\n content: \"*\";\n }\n .kol-field-control--required .kol-field-control__tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n }\n .kol-checkbox {\n position: relative;\n display: flex;\n align-items: center;\n }\n .kol-checkbox .kol-input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n appearance: none;\n background-color: #fff;\n cursor: pointer;\n transition: 0.5s;\n margin: 0;\n border-style: solid;\n border-width: 2px;\n }\n .kol-checkbox .kol-input:before {\n content: \"\";\n cursor: pointer;\n }\n .kol-checkbox .kol-input:disabled:before {\n cursor: not-allowed;\n }\n /**\n * Variant: Checkbox\n */\n .kol-checkbox--variant-default {\n height: var(--a11y-min-size);\n justify-content: center;\n position: relative;\n width: var(--a11y-min-size);\n }\n .kol-checkbox--variant-default .kol-icon {\n display: flex;\n inset: auto;\n position: absolute;\n z-index: 1;\n pointer-events: none;\n }\n .kol-checkbox--variant-default .kol-icon::part(icon) {\n display: none;\n }\n .kol-checkbox--variant-default .kol-input {\n width: calc(22rem / var(--kolibri-root-font-size, 16));\n height: calc(22rem / var(--kolibri-root-font-size, 16));\n }\n .kol-checkbox--variant-default.kol-checkbox--checked .kol-icon::part(icon), .kol-checkbox--variant-default.kol-checkbox--indeterminate .kol-icon::part(icon) {\n display: block;\n }\n /**\n * Variant: Switch\n */\n .kol-checkbox--variant-switch {\n position: relative;\n }\n .kol-checkbox--variant-switch .kol-input {\n display: inline-block;\n height: 1.7em;\n min-width: 3.2em;\n position: relative;\n width: 3.2em;\n }\n .kol-checkbox--variant-switch .kol-input::before {\n background-color: #000;\n height: 1.2em;\n left: calc(0.25em - (2rem / var(--kolibri-root-font-size, 16)));\n top: calc(0.25em - (2rem / var(--kolibri-root-font-size, 16)));\n position: absolute;\n transition: 0.5s;\n width: 1.2em;\n }\n .kol-checkbox--variant-switch .kol-input:checked::before {\n transform: translateX(1.5em);\n }\n .kol-checkbox--variant-switch .kol-input:indeterminate::before {\n transform: translateX(0.75em);\n }\n .kol-checkbox--variant-switch .kol-icon {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.2em;\n height: 1.2em;\n position: absolute;\n z-index: 1;\n top: 50%;\n left: calc(4rem / var(--kolibri-root-font-size, 16));\n transform: translate(0, -50%);\n transition: 0.5s;\n color: #000;\n }\n .kol-checkbox--variant-switch.kol-checkbox--checked .kol-icon {\n transform: translate(1.5em, -50%);\n }\n .kol-checkbox--variant-switch.kol-checkbox--indeterminate .kol-icon {\n transform: translate(0.75em, -50%);\n }\n /**\n * Variant: Button\n */\n .kol-checkbox--variant-button {\n width: var(--a11y-min-size);\n }\n .kol-checkbox--variant-button .kol-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n }\n}";
|
|
16611
16554
|
var KolInputCheckboxDefaultStyle0 = defaultStyleCss$w;
|
|
16612
16555
|
|
|
16613
16556
|
class KolInputCheckbox {
|
|
@@ -16703,7 +16646,6 @@ class KolInputCheckbox {
|
|
|
16703
16646
|
this._required = false;
|
|
16704
16647
|
this._shortKey = undefined;
|
|
16705
16648
|
this._syncValueBySelector = undefined;
|
|
16706
|
-
this._tabIndex = undefined;
|
|
16707
16649
|
this._tooltipAlign = 'top';
|
|
16708
16650
|
this._touched = false;
|
|
16709
16651
|
this._value = true;
|
|
@@ -16780,9 +16722,6 @@ class KolInputCheckbox {
|
|
|
16780
16722
|
validateSyncValueBySelector(value) {
|
|
16781
16723
|
this.controller.validateSyncValueBySelector(value);
|
|
16782
16724
|
}
|
|
16783
|
-
validateTabIndex(value) {
|
|
16784
|
-
this.controller.validateTabIndex(value);
|
|
16785
|
-
}
|
|
16786
16725
|
validateTouched(value) {
|
|
16787
16726
|
this.controller.validateTouched(value);
|
|
16788
16727
|
}
|
|
@@ -16816,7 +16755,6 @@ class KolInputCheckbox {
|
|
|
16816
16755
|
"_required": ["validateRequired"],
|
|
16817
16756
|
"_shortKey": ["validateShortKey"],
|
|
16818
16757
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
16819
|
-
"_tabIndex": ["validateTabIndex"],
|
|
16820
16758
|
"_touched": ["validateTouched"],
|
|
16821
16759
|
"_value": ["validateValue"],
|
|
16822
16760
|
"_variant": ["validateVariant"]
|
|
@@ -16845,7 +16783,6 @@ class KolInputCheckbox {
|
|
|
16845
16783
|
"_required": [4],
|
|
16846
16784
|
"_shortKey": [1, "_short-key"],
|
|
16847
16785
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
16848
|
-
"_tabIndex": [2, "_tab-index"],
|
|
16849
16786
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
16850
16787
|
"_touched": [1540],
|
|
16851
16788
|
"_value": [8],
|
|
@@ -16884,37 +16821,50 @@ class InputColorController extends InputIconController {
|
|
|
16884
16821
|
}
|
|
16885
16822
|
}
|
|
16886
16823
|
|
|
16887
|
-
const defaultStyleCss$v = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
16824
|
+
const defaultStyleCss$v = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\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 place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}\n@layer kol-component {\n .kol-input-container {\n align-items: center;\n background-color: white;\n cursor: pointer;\n display: grid;\n grid-template-columns: 1fr;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\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}\n@layer kol-component {\n .kol-input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input:focus {\n outline: none;\n }\n}\n.kol-input-color__input--color {\n cursor: pointer;\n flex-grow: 1;\n}\n.kol-input-color__input--text {\n width: calc(112rem / var(--kolibri-root-font-size, 16));\n}\n.kol-input-color__inputs-wrapper {\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: calc(6rem / var(--kolibri-root-font-size, 16)) !important;\n}";
|
|
16888
16825
|
var KolInputColorDefaultStyle0 = defaultStyleCss$v;
|
|
16889
16826
|
|
|
16890
16827
|
class KolInputColor {
|
|
16891
16828
|
async getValue() {
|
|
16892
16829
|
var _a;
|
|
16893
|
-
return (_a = this.
|
|
16830
|
+
return (_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.value;
|
|
16894
16831
|
}
|
|
16895
16832
|
async kolFocus() {
|
|
16896
16833
|
var _a;
|
|
16897
|
-
(_a = this.
|
|
16834
|
+
(_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.focus();
|
|
16835
|
+
}
|
|
16836
|
+
get hasSuggestions() {
|
|
16837
|
+
return Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
16898
16838
|
}
|
|
16899
16839
|
getFormFieldProps() {
|
|
16900
16840
|
return {
|
|
16901
16841
|
state: this.state,
|
|
16902
16842
|
class: 'kol-input-color',
|
|
16903
16843
|
tooltipAlign: this._tooltipAlign,
|
|
16904
|
-
onClick: () => { var _a; return (_a = this.
|
|
16844
|
+
onClick: () => { var _a; return (_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.focus(); },
|
|
16905
16845
|
alert: this.showAsAlert(),
|
|
16906
16846
|
};
|
|
16907
16847
|
}
|
|
16908
|
-
|
|
16909
|
-
return Object.assign(Object.assign({ ref: this.
|
|
16848
|
+
getInputColorProps() {
|
|
16849
|
+
return Object.assign(Object.assign({}, this.getGenericInputProps()), { ref: this.catchColorRef, type: 'color', name: this.state._name ? `${this.state._name}-color` : undefined, list: this.hasSuggestions ? `${this.state._id}-list` : undefined, id: undefined, 'aria-hidden': 'true', tabIndex: -1, onInput: this.onColorInput });
|
|
16850
|
+
}
|
|
16851
|
+
getInputTextProps() {
|
|
16852
|
+
return Object.assign(Object.assign({}, this.getGenericInputProps()), { ref: this.catchRef, type: 'text', name: this.state._name ? `${this.state._name}-text` : undefined, list: this.hasSuggestions ? `${this.state._id}-list` : undefined, onInput: this.onTextInput });
|
|
16853
|
+
}
|
|
16854
|
+
getGenericInputProps() {
|
|
16855
|
+
const _a = this.state, other = __rest(_a, ["_suggestions"]);
|
|
16856
|
+
return Object.assign(Object.assign({ state: Object.assign(Object.assign({}, other), { _suggestions: [] }) }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus });
|
|
16910
16857
|
}
|
|
16911
16858
|
render() {
|
|
16912
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
16859
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '812d98db5ffb942aa0d3a9699fc3339b8447bdc6' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '98ef2352406c9fd7452c47636cd5d86488d6c334', state: this.state, class: "kol-input-color__inputs-wrapper" }, hAsync("div", { key: 'cdecef9a66e2e25f7983058e85cebef3a2e48fa1', class: "kol-input-color__inputs-wrapper" }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '011c332e653bce93aa813e3108c186472df7ce64', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), hAsync(KolInputStateWrapperFc, Object.assign({ key: '6465998ba4a70c042a09ce628299582567e0f89a', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
|
|
16913
16860
|
}
|
|
16914
16861
|
constructor(hostRef) {
|
|
16915
16862
|
registerInstance(this, hostRef);
|
|
16916
16863
|
this.catchRef = (ref) => {
|
|
16917
|
-
this.
|
|
16864
|
+
this.refInputText = ref;
|
|
16865
|
+
};
|
|
16866
|
+
this.catchColorRef = (ref) => {
|
|
16867
|
+
this.refInputColor = ref;
|
|
16918
16868
|
};
|
|
16919
16869
|
this.onBlur = (event) => {
|
|
16920
16870
|
this.controller.onFacade.onBlur(event);
|
|
@@ -16924,9 +16874,23 @@ class KolInputColor {
|
|
|
16924
16874
|
this.controller.onFacade.onFocus(event);
|
|
16925
16875
|
this.inputHasFocus = true;
|
|
16926
16876
|
};
|
|
16927
|
-
this.
|
|
16928
|
-
|
|
16929
|
-
this._value =
|
|
16877
|
+
this.onColorInput = (event) => {
|
|
16878
|
+
const value = event.target.value;
|
|
16879
|
+
this.state._value = value;
|
|
16880
|
+
if (this.refInputText) {
|
|
16881
|
+
this.refInputText.value = value;
|
|
16882
|
+
}
|
|
16883
|
+
this.controller.onFacade.onInput(event);
|
|
16884
|
+
};
|
|
16885
|
+
this.onTextInput = (event) => {
|
|
16886
|
+
let value = event.target.value;
|
|
16887
|
+
if (!value.startsWith('#')) {
|
|
16888
|
+
value = `#${value}`;
|
|
16889
|
+
}
|
|
16890
|
+
this._value = value;
|
|
16891
|
+
if (this.refInputColor) {
|
|
16892
|
+
this.refInputColor.value = value;
|
|
16893
|
+
}
|
|
16930
16894
|
this.controller.onFacade.onInput(event);
|
|
16931
16895
|
};
|
|
16932
16896
|
this._accessKey = undefined;
|
|
@@ -16945,7 +16909,6 @@ class KolInputColor {
|
|
|
16945
16909
|
this._smartButton = undefined;
|
|
16946
16910
|
this._suggestions = undefined;
|
|
16947
16911
|
this._syncValueBySelector = undefined;
|
|
16948
|
-
this._tabIndex = undefined;
|
|
16949
16912
|
this._tooltipAlign = 'top';
|
|
16950
16913
|
this._touched = false;
|
|
16951
16914
|
this._value = undefined;
|
|
@@ -17010,15 +16973,17 @@ class KolInputColor {
|
|
|
17010
16973
|
validateSyncValueBySelector(value) {
|
|
17011
16974
|
this.controller.validateSyncValueBySelector(value);
|
|
17012
16975
|
}
|
|
17013
|
-
validateTabIndex(value) {
|
|
17014
|
-
this.controller.validateTabIndex(value);
|
|
17015
|
-
}
|
|
17016
16976
|
validateTouched(value) {
|
|
17017
16977
|
this.controller.validateTouched(value);
|
|
17018
16978
|
}
|
|
17019
16979
|
validateValue(value) {
|
|
17020
16980
|
this.controller.validateValue(value);
|
|
17021
16981
|
}
|
|
16982
|
+
componentDidLoad() {
|
|
16983
|
+
if (!this._value && this.refInputColor) {
|
|
16984
|
+
this._value = this.refInputColor.value;
|
|
16985
|
+
}
|
|
16986
|
+
}
|
|
17022
16987
|
componentWillLoad() {
|
|
17023
16988
|
this._touched = this._touched === true;
|
|
17024
16989
|
this.controller.componentWillLoad();
|
|
@@ -17042,7 +17007,6 @@ class KolInputColor {
|
|
|
17042
17007
|
"_smartButton": ["validateSmartButton"],
|
|
17043
17008
|
"_suggestions": ["validateSuggestions"],
|
|
17044
17009
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
17045
|
-
"_tabIndex": ["validateTabIndex"],
|
|
17046
17010
|
"_touched": ["validateTouched"],
|
|
17047
17011
|
"_value": ["validateValue"]
|
|
17048
17012
|
}; }
|
|
@@ -17069,7 +17033,6 @@ class KolInputColor {
|
|
|
17069
17033
|
"_smartButton": [1, "_smart-button"],
|
|
17070
17034
|
"_suggestions": [1],
|
|
17071
17035
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
17072
|
-
"_tabIndex": [2, "_tab-index"],
|
|
17073
17036
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
17074
17037
|
"_touched": [1540],
|
|
17075
17038
|
"_value": [513],
|
|
@@ -17233,7 +17196,7 @@ InputDateController.isoTimeRegex = /^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/;
|
|
|
17233
17196
|
InputDateController.isoWeekRegex = /^\d{4}-W(?:[0-4]\d|5[0-3])$/;
|
|
17234
17197
|
InputDateController.DEFAULT_MAX_DATE = new Date(9999, 11, 31, 23, 59, 59);
|
|
17235
17198
|
|
|
17236
|
-
const defaultStyleCss$u = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
17199
|
+
const defaultStyleCss$u = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\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 place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}\n@layer kol-component {\n .kol-input-container {\n align-items: center;\n background-color: white;\n cursor: pointer;\n display: grid;\n grid-template-columns: 1fr;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\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}\n@layer kol-component {\n .kol-input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input:focus {\n outline: none;\n }\n}";
|
|
17237
17200
|
var KolInputDateDefaultStyle0 = defaultStyleCss$u;
|
|
17238
17201
|
|
|
17239
17202
|
class KolInputDate {
|
|
@@ -17281,7 +17244,7 @@ class KolInputDate {
|
|
|
17281
17244
|
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 });
|
|
17282
17245
|
}
|
|
17283
17246
|
render() {
|
|
17284
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
17247
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '9912a9d2bdfc1b20c8a230adb3ddee9bc0ac76b2' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '28e010d417be9bd11db007d3cc249f1454bc29b7', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '670d0d278fc42acf956088c2bed1aa1cb49b1f20' }, this.getInputProps())))));
|
|
17285
17248
|
}
|
|
17286
17249
|
constructor(hostRef) {
|
|
17287
17250
|
registerInstance(this, hostRef);
|
|
@@ -17337,7 +17300,6 @@ class KolInputDate {
|
|
|
17337
17300
|
this._suggestions = undefined;
|
|
17338
17301
|
this._syncValueBySelector = undefined;
|
|
17339
17302
|
this._step = undefined;
|
|
17340
|
-
this._tabIndex = undefined;
|
|
17341
17303
|
this._tooltipAlign = 'top';
|
|
17342
17304
|
this._touched = false;
|
|
17343
17305
|
this._type = 'date';
|
|
@@ -17420,9 +17382,6 @@ class KolInputDate {
|
|
|
17420
17382
|
validateSyncValueBySelector(value) {
|
|
17421
17383
|
this.controller.validateSyncValueBySelector(value);
|
|
17422
17384
|
}
|
|
17423
|
-
validateTabIndex(value) {
|
|
17424
|
-
this.controller.validateTabIndex(value);
|
|
17425
|
-
}
|
|
17426
17385
|
validateTouched(value) {
|
|
17427
17386
|
this.controller.validateTouched(value);
|
|
17428
17387
|
}
|
|
@@ -17469,7 +17428,6 @@ class KolInputDate {
|
|
|
17469
17428
|
"_suggestions": ["validateSuggestions"],
|
|
17470
17429
|
"_step": ["validateStep"],
|
|
17471
17430
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
17472
|
-
"_tabIndex": ["validateTabIndex"],
|
|
17473
17431
|
"_touched": ["validateTouched"],
|
|
17474
17432
|
"_type": ["validateType"],
|
|
17475
17433
|
"_value": ["validateValue"]
|
|
@@ -17502,7 +17460,6 @@ class KolInputDate {
|
|
|
17502
17460
|
"_suggestions": [1],
|
|
17503
17461
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
17504
17462
|
"_step": [2],
|
|
17505
|
-
"_tabIndex": [2, "_tab-index"],
|
|
17506
17463
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
17507
17464
|
"_touched": [1540],
|
|
17508
17465
|
"_type": [1],
|
|
@@ -17636,7 +17593,7 @@ class InputEmailController extends InputTextEmailController {
|
|
|
17636
17593
|
}
|
|
17637
17594
|
}
|
|
17638
17595
|
|
|
17639
|
-
const defaultStyleCss$t = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
17596
|
+
const defaultStyleCss$t = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\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 place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}\n@layer kol-component {\n .kol-input-container {\n align-items: center;\n background-color: white;\n cursor: pointer;\n display: grid;\n grid-template-columns: 1fr;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\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}\n@layer kol-component {\n .kol-input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input:focus {\n outline: none;\n }\n}";
|
|
17640
17597
|
var KolInputEmailDefaultStyle0 = defaultStyleCss$t;
|
|
17641
17598
|
|
|
17642
17599
|
class KolInputEmail {
|
|
@@ -17669,7 +17626,7 @@ class KolInputEmail {
|
|
|
17669
17626
|
} });
|
|
17670
17627
|
}
|
|
17671
17628
|
render() {
|
|
17672
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
17629
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'e842b53e938660d9a70ac2713284e03b4eb3f19a' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '369160e7fd2186c30e058a9c63b5e49fc9436931', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'f048e81903b7ec46d450d19444e1302f41a4fc53' }, this.getInputProps())))));
|
|
17673
17630
|
}
|
|
17674
17631
|
constructor(hostRef) {
|
|
17675
17632
|
registerInstance(this, hostRef);
|
|
@@ -17713,7 +17670,6 @@ class KolInputEmail {
|
|
|
17713
17670
|
this._smartButton = undefined;
|
|
17714
17671
|
this._suggestions = undefined;
|
|
17715
17672
|
this._syncValueBySelector = undefined;
|
|
17716
|
-
this._tabIndex = undefined;
|
|
17717
17673
|
this._tooltipAlign = 'top';
|
|
17718
17674
|
this._touched = false;
|
|
17719
17675
|
this._value = undefined;
|
|
@@ -17801,9 +17757,6 @@ class KolInputEmail {
|
|
|
17801
17757
|
validateSyncValueBySelector(value) {
|
|
17802
17758
|
this.controller.validateSyncValueBySelector(value);
|
|
17803
17759
|
}
|
|
17804
|
-
validateTabIndex(value) {
|
|
17805
|
-
this.controller.validateTabIndex(value);
|
|
17806
|
-
}
|
|
17807
17760
|
validateTouched(value) {
|
|
17808
17761
|
this.controller.validateTouched(value);
|
|
17809
17762
|
}
|
|
@@ -17842,7 +17795,6 @@ class KolInputEmail {
|
|
|
17842
17795
|
"_suggestions": ["validateSuggestions"],
|
|
17843
17796
|
"_smartButton": ["validateSmartButton"],
|
|
17844
17797
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
17845
|
-
"_tabIndex": ["validateTabIndex"],
|
|
17846
17798
|
"_touched": ["validateTouched"],
|
|
17847
17799
|
"_value": ["validateValue"]
|
|
17848
17800
|
}; }
|
|
@@ -17876,7 +17828,6 @@ class KolInputEmail {
|
|
|
17876
17828
|
"_smartButton": [1, "_smart-button"],
|
|
17877
17829
|
"_suggestions": [1],
|
|
17878
17830
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
17879
|
-
"_tabIndex": [2, "_tab-index"],
|
|
17880
17831
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
17881
17832
|
"_touched": [1540],
|
|
17882
17833
|
"_value": [1537],
|
|
@@ -17913,7 +17864,7 @@ class InputFileController extends InputIconController {
|
|
|
17913
17864
|
}
|
|
17914
17865
|
}
|
|
17915
17866
|
|
|
17916
|
-
const defaultStyleCss$s = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
17867
|
+
const defaultStyleCss$s = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\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 place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}\n@layer kol-component {\n .kol-input-container {\n align-items: center;\n background-color: white;\n cursor: pointer;\n display: grid;\n grid-template-columns: 1fr;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\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}\n@layer kol-component {\n .kol-input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input:focus {\n outline: none;\n }\n}\n@layer kol-component {\n .kol-input {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n cursor: pointer;\n }\n .kol-input-container {\n padding: 0 0 0 calc(8rem / var(--kolibri-root-font-size, 16)) !important;\n }\n .kol-input-container__container {\n display: flex;\n align-items: center;\n overflow: hidden;\n height: var(--a11y-min-size);\n }\n .kol-input-container__filename {\n flex-grow: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n grid-template-columns: auto 1fr;\n }\n}";
|
|
17917
17868
|
var KolInputFileDefaultStyle0 = defaultStyleCss$s;
|
|
17918
17869
|
|
|
17919
17870
|
class KolInputFile {
|
|
@@ -17944,16 +17895,42 @@ class KolInputFile {
|
|
|
17944
17895
|
} });
|
|
17945
17896
|
}
|
|
17946
17897
|
render() {
|
|
17947
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
17898
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '949ac3fb00b24772337e2520066fc3cceb64d052' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '4ffeb202b81c69ad78eb4d78941e2264f40dfed7', state: this.state }, hAsync("span", { key: '58b70947cae5c1eeadeab645e16b5155f44eae96', class: "kol-input-container__filename" }, this.filename), hAsync(KolInputStateWrapperFc, Object.assign({ key: 'dada3cf1cdc340ebf79743add31551d3d28612ac' }, this.getInputProps())), hAsync(KolButtonWcTag, { key: 'bc4e3a8888cd8e2d51ef7f2757a841645b735971', class: "kol-input-container__button", _label: translate('kol-data-browse-text'), _variant: "primary", _disabled: this._disabled }))));
|
|
17948
17899
|
}
|
|
17949
17900
|
constructor(hostRef) {
|
|
17950
17901
|
registerInstance(this, hostRef);
|
|
17951
17902
|
this.catchRef = (ref) => {
|
|
17952
17903
|
this.inputRef = ref;
|
|
17953
17904
|
};
|
|
17905
|
+
this.onDragOver = (event) => {
|
|
17906
|
+
var _a, _b, _c;
|
|
17907
|
+
event.preventDefault();
|
|
17908
|
+
(_c = (_b = (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.classList.add('kol-input-container--is-dragover');
|
|
17909
|
+
};
|
|
17910
|
+
this.onDragLeave = () => {
|
|
17911
|
+
var _a, _b, _c;
|
|
17912
|
+
(_c = (_b = (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.classList.remove('kol-input-container--is-dragover');
|
|
17913
|
+
};
|
|
17914
|
+
this.onDrop = (event) => {
|
|
17915
|
+
var _a, _b, _c, _d;
|
|
17916
|
+
event.preventDefault();
|
|
17917
|
+
(_c = (_b = (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.classList.remove('kol-input-container--is-dragover');
|
|
17918
|
+
if ((_d = event.dataTransfer) === null || _d === void 0 ? void 0 : _d.files.length) {
|
|
17919
|
+
const files = event.dataTransfer.files;
|
|
17920
|
+
this.filename = Array.from(files)
|
|
17921
|
+
.map((file) => file.name)
|
|
17922
|
+
.join(', ');
|
|
17923
|
+
this.controller.setFormAssociatedValue(files);
|
|
17924
|
+
}
|
|
17925
|
+
};
|
|
17954
17926
|
this.onChange = (event) => {
|
|
17955
17927
|
if (this.inputRef instanceof HTMLInputElement && this.inputRef.type === 'file') {
|
|
17956
17928
|
const value = this.inputRef.files;
|
|
17929
|
+
this.filename = (value === null || value === void 0 ? void 0 : value.length)
|
|
17930
|
+
? Array.from(value)
|
|
17931
|
+
.map((file) => file.name)
|
|
17932
|
+
.join(', ')
|
|
17933
|
+
: translate('kol-filename-text');
|
|
17957
17934
|
this.controller.onFacade.onChange(event, value);
|
|
17958
17935
|
this.controller.setFormAssociatedValue(value);
|
|
17959
17936
|
}
|
|
@@ -17981,9 +17958,9 @@ class KolInputFile {
|
|
|
17981
17958
|
this._shortKey = undefined;
|
|
17982
17959
|
this._smartButton = undefined;
|
|
17983
17960
|
this._syncValueBySelector = undefined;
|
|
17984
|
-
this._tabIndex = undefined;
|
|
17985
17961
|
this._tooltipAlign = 'top';
|
|
17986
17962
|
this._touched = false;
|
|
17963
|
+
this.filename = translate('kol-filename-text');
|
|
17987
17964
|
this.state = {
|
|
17988
17965
|
_hideMsg: false,
|
|
17989
17966
|
_id: `id-${nonce()}`,
|
|
@@ -18046,9 +18023,6 @@ class KolInputFile {
|
|
|
18046
18023
|
validateSyncValueBySelector(value) {
|
|
18047
18024
|
this.controller.validateSyncValueBySelector(value);
|
|
18048
18025
|
}
|
|
18049
|
-
validateTabIndex(value) {
|
|
18050
|
-
this.controller.validateTabIndex(value);
|
|
18051
|
-
}
|
|
18052
18026
|
validateTouched(value) {
|
|
18053
18027
|
this.controller.validateTouched(value);
|
|
18054
18028
|
}
|
|
@@ -18056,6 +18030,13 @@ class KolInputFile {
|
|
|
18056
18030
|
this._touched = this._touched === true;
|
|
18057
18031
|
this.controller.componentWillLoad();
|
|
18058
18032
|
}
|
|
18033
|
+
componentDidLoad() {
|
|
18034
|
+
var _a, _b;
|
|
18035
|
+
const container = (_b = (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement;
|
|
18036
|
+
container === null || container === void 0 ? void 0 : container.addEventListener('dragover', this.onDragOver);
|
|
18037
|
+
container === null || container === void 0 ? void 0 : container.addEventListener('dragleave', this.onDragLeave);
|
|
18038
|
+
container === null || container === void 0 ? void 0 : container.addEventListener('drop', this.onDrop);
|
|
18039
|
+
}
|
|
18059
18040
|
static get delegatesFocus() { return true; }
|
|
18060
18041
|
get host() { return getElement(this); }
|
|
18061
18042
|
static get watchers() { return {
|
|
@@ -18076,7 +18057,6 @@ class KolInputFile {
|
|
|
18076
18057
|
"_shortKey": ["validateShortKey"],
|
|
18077
18058
|
"_smartButton": ["validateSmartButton"],
|
|
18078
18059
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
18079
|
-
"_tabIndex": ["validateTabIndex"],
|
|
18080
18060
|
"_touched": ["validateTouched"]
|
|
18081
18061
|
}; }
|
|
18082
18062
|
static get style() { return {
|
|
@@ -18103,9 +18083,9 @@ class KolInputFile {
|
|
|
18103
18083
|
"_shortKey": [1, "_short-key"],
|
|
18104
18084
|
"_smartButton": [1, "_smart-button"],
|
|
18105
18085
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
18106
|
-
"_tabIndex": [2, "_tab-index"],
|
|
18107
18086
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
18108
18087
|
"_touched": [1540],
|
|
18088
|
+
"filename": [32],
|
|
18109
18089
|
"state": [32],
|
|
18110
18090
|
"inputHasFocus": [32],
|
|
18111
18091
|
"getValue": [64],
|
|
@@ -18199,7 +18179,7 @@ class InputNumberController extends InputIconController {
|
|
|
18199
18179
|
}
|
|
18200
18180
|
}
|
|
18201
18181
|
|
|
18202
|
-
const defaultStyleCss$r = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
18182
|
+
const defaultStyleCss$r = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\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 place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}\n@layer kol-component {\n .kol-input-container {\n align-items: center;\n background-color: white;\n cursor: pointer;\n display: grid;\n grid-template-columns: 1fr;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\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}\n@layer kol-component {\n .kol-input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input:focus {\n outline: none;\n }\n}";
|
|
18203
18183
|
var KolInputNumberDefaultStyle0 = defaultStyleCss$r;
|
|
18204
18184
|
|
|
18205
18185
|
class KolInputNumber {
|
|
@@ -18232,7 +18212,7 @@ class KolInputNumber {
|
|
|
18232
18212
|
} });
|
|
18233
18213
|
}
|
|
18234
18214
|
render() {
|
|
18235
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
18215
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '56dad7cc43b19c34fe38c7cdd5a8e5d36902a924' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'fbcc6e3fd5d51d64cf022bfa5bd8f84712c69354', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '099d76ef245d59934481bbeddadaa5a38e11ea3d' }, this.getInputProps())))));
|
|
18236
18216
|
}
|
|
18237
18217
|
constructor(hostRef) {
|
|
18238
18218
|
registerInstance(this, hostRef);
|
|
@@ -18274,7 +18254,6 @@ class KolInputNumber {
|
|
|
18274
18254
|
this._suggestions = undefined;
|
|
18275
18255
|
this._step = undefined;
|
|
18276
18256
|
this._syncValueBySelector = undefined;
|
|
18277
|
-
this._tabIndex = undefined;
|
|
18278
18257
|
this._tooltipAlign = 'top';
|
|
18279
18258
|
this._touched = false;
|
|
18280
18259
|
this._value = undefined;
|
|
@@ -18358,9 +18337,6 @@ class KolInputNumber {
|
|
|
18358
18337
|
validateSyncValueBySelector(value) {
|
|
18359
18338
|
this.controller.validateSyncValueBySelector(value);
|
|
18360
18339
|
}
|
|
18361
|
-
validateTabIndex(value) {
|
|
18362
|
-
this.controller.validateTabIndex(value);
|
|
18363
|
-
}
|
|
18364
18340
|
validateTouched(value) {
|
|
18365
18341
|
this.controller.validateTouched(value);
|
|
18366
18342
|
}
|
|
@@ -18398,7 +18374,6 @@ class KolInputNumber {
|
|
|
18398
18374
|
"_suggestions": ["validateSuggestions"],
|
|
18399
18375
|
"_step": ["validateStep"],
|
|
18400
18376
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
18401
|
-
"_tabIndex": ["validateTabIndex"],
|
|
18402
18377
|
"_touched": ["validateTouched"],
|
|
18403
18378
|
"_value": ["validateValue"]
|
|
18404
18379
|
}; }
|
|
@@ -18431,7 +18406,6 @@ class KolInputNumber {
|
|
|
18431
18406
|
"_suggestions": [1],
|
|
18432
18407
|
"_step": [2],
|
|
18433
18408
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
18434
|
-
"_tabIndex": [2, "_tab-index"],
|
|
18435
18409
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
18436
18410
|
"_touched": [1540],
|
|
18437
18411
|
"_value": [1538],
|
|
@@ -18446,7 +18420,7 @@ class KolInputNumber {
|
|
|
18446
18420
|
}; }
|
|
18447
18421
|
}
|
|
18448
18422
|
|
|
18449
|
-
const defaultStyleCss$q = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
18423
|
+
const defaultStyleCss$q = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\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 place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}\n@layer kol-component {\n .kol-input-container {\n align-items: center;\n background-color: white;\n cursor: pointer;\n display: grid;\n grid-template-columns: 1fr;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\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}\n@layer kol-component {\n .kol-input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input:focus {\n outline: none;\n }\n}\n@layer kol-component {\n .kol-input-password {\n --kol-tooltip-width: calc(160rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
18450
18424
|
var KolInputPasswordDefaultStyle0 = defaultStyleCss$q;
|
|
18451
18425
|
|
|
18452
18426
|
class KolInputPassword {
|
|
@@ -18489,7 +18463,7 @@ class KolInputPassword {
|
|
|
18489
18463
|
}, icon: `codicon codicon-eye-${this._passwordVisible ? 'closed' : 'watch'}`, disabled: this._disabled }));
|
|
18490
18464
|
}
|
|
18491
18465
|
render() {
|
|
18492
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
18466
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '07a013136b24b9e4e2cec1af871ab3b39de3dbbf' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '75eee8117e45990ca8727f96ca3289da3839e2e3', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '4769d23e3e8933225c9e2142d5b2b2fe4aeb45fc' }, this.getInputProps())))));
|
|
18493
18467
|
}
|
|
18494
18468
|
constructor(hostRef) {
|
|
18495
18469
|
registerInstance(this, hostRef);
|
|
@@ -18531,7 +18505,6 @@ class KolInputPassword {
|
|
|
18531
18505
|
this._shortKey = undefined;
|
|
18532
18506
|
this._smartButton = undefined;
|
|
18533
18507
|
this._syncValueBySelector = undefined;
|
|
18534
|
-
this._tabIndex = undefined;
|
|
18535
18508
|
this._tooltipAlign = 'top';
|
|
18536
18509
|
this._touched = false;
|
|
18537
18510
|
this._value = undefined;
|
|
@@ -18621,9 +18594,6 @@ class KolInputPassword {
|
|
|
18621
18594
|
validateSyncValueBySelector(value) {
|
|
18622
18595
|
this.controller.validateSyncValueBySelector(value);
|
|
18623
18596
|
}
|
|
18624
|
-
validateTabIndex(value) {
|
|
18625
|
-
this.controller.validateTabIndex(value);
|
|
18626
|
-
}
|
|
18627
18597
|
validateTouched(value) {
|
|
18628
18598
|
this.controller.validateTouched(value);
|
|
18629
18599
|
}
|
|
@@ -18661,7 +18631,6 @@ class KolInputPassword {
|
|
|
18661
18631
|
"_shortKey": ["validateShortKey"],
|
|
18662
18632
|
"_smartButton": ["validateSmartButton"],
|
|
18663
18633
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
18664
|
-
"_tabIndex": ["validateTabIndex"],
|
|
18665
18634
|
"_touched": ["validateTouched"],
|
|
18666
18635
|
"_value": ["validateValue"]
|
|
18667
18636
|
}; }
|
|
@@ -18693,7 +18662,6 @@ class KolInputPassword {
|
|
|
18693
18662
|
"_shortKey": [1, "_short-key"],
|
|
18694
18663
|
"_smartButton": [1, "_smart-button"],
|
|
18695
18664
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
18696
|
-
"_tabIndex": [2, "_tab-index"],
|
|
18697
18665
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
18698
18666
|
"_touched": [1540],
|
|
18699
18667
|
"_value": [1537],
|
|
@@ -18710,7 +18678,7 @@ class KolInputPassword {
|
|
|
18710
18678
|
}; }
|
|
18711
18679
|
}
|
|
18712
18680
|
|
|
18713
|
-
const defaultStyleCss$p = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n display: block;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\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 place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-field-control {\n min-height: var(--a11y-min-size);\n display: grid;\n grid-template-columns: auto 1fr;\n grid-template-areas: \"input label\";\n grid-template-rows: auto;\n align-items: center;\n justify-content: left;\n }\n .kol-field-control:has(.kol-field-control__hint) {\n grid-template-columns: auto 1fr;\n grid-template-areas: \"input label\" \"hint hint\";\n grid-template-rows: auto auto;\n }\n .kol-field-control--label-align-left:not(.kol-field-control--hide-label) {\n grid-template-columns: 1fr auto;\n grid-template-areas: \"label input\";\n grid-template-rows: auto;\n }\n .kol-field-control--label-align-left:not(.kol-field-control--hide-label):has(.kol-field-control__hint) {\n grid-template-columns: 1fr auto;\n grid-template-areas: \"label input\" \"hint hint\";\n grid-template-rows: auto auto;\n }\n .kol-field-control__input {\n grid-area: input;\n display: flex;\n min-height: var(--a11y-min-size);\n align-items: center;\n }\n .kol-field-control__label {\n align-items: center;\n cursor: pointer;\n display: flex;\n flex-grow: 1;\n grid-area: label;\n min-height: var(--a11y-min-size);\n }\n .kol-field-control__label--visually-hidden {\n height: 0;\n margin: 0;\n padding: 0;\n visibility: hidden;\n }\n .kol-field-control__label-text::after {\n content: \"\";\n }\n .kol-field-control__tooltip .span-label::after {\n content: \"\";\n }\n .kol-field-control__hint {\n grid-area: hint;\n }\n .kol-field-control--disabled .kol-field-control__label {\n cursor: not-allowed;\n opacity: 0.5;\n }\n .kol-field-control--required .kol-field-control__label-text::after {\n content: \"*\";\n }\n .kol-field-control--required .kol-field-control__tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}\n@layer kol-component {\n .kol-input-container {\n align-items: center;\n background-color: white;\n cursor: pointer;\n display: grid;\n grid-template-columns: 1fr;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\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}\n@layer kol-component {\n .kol-form-field {\n --border-width: 2px;\n --input-size: 1.5em;\n }\n .kol-form-field__label {\n display: contents;\n }\n .kol-form-field__input {\n display: flex;\n flex-direction: column;\n }\n .kol-form-field__input--orientation-horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n align-items: flex-start;\n }\n .kol-form-field--disabled {\n opacity: unset;\n }\n .kol-input-radio {\n appearance: none;\n border-width: var(--border-width);\n border-style: solid;\n border-radius: 100%;\n cursor: pointer;\n display: flex;\n height: var(--input-size);\n margin: 0;\n min-height: var(--input-size);\n min-width: var(--input-size);\n padding: 0;\n width: var(--input-size);\n }\n .kol-input-radio:before {\n border-radius: 100%;\n content: \"\";\n margin: auto;\n height: calc(var(--input-size) / 2);\n width: calc(var(--input-size) / 2);\n }\n .kol-input-radio:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .kol-input-radio:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n .kol-input-radio:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n}";
|
|
18681
|
+
const defaultStyleCss$p = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\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 place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-field-control {\n min-height: var(--a11y-min-size);\n display: grid;\n grid-template-columns: auto 1fr;\n grid-template-areas: \"input label\";\n grid-template-rows: auto;\n align-items: center;\n justify-content: left;\n }\n .kol-field-control:has(.kol-field-control__hint) {\n grid-template-columns: auto 1fr;\n grid-template-areas: \"input label\" \"hint hint\";\n grid-template-rows: auto auto;\n }\n .kol-field-control--label-align-left:not(.kol-field-control--hide-label) {\n grid-template-columns: 1fr auto;\n grid-template-areas: \"label input\";\n grid-template-rows: auto;\n }\n .kol-field-control--label-align-left:not(.kol-field-control--hide-label):has(.kol-field-control__hint) {\n grid-template-columns: 1fr auto;\n grid-template-areas: \"label input\" \"hint hint\";\n grid-template-rows: auto auto;\n }\n .kol-field-control__input {\n grid-area: input;\n display: flex;\n min-height: var(--a11y-min-size);\n align-items: center;\n }\n .kol-field-control__label {\n align-items: center;\n cursor: pointer;\n display: flex;\n flex-grow: 1;\n grid-area: label;\n min-height: var(--a11y-min-size);\n }\n .kol-field-control__label--visually-hidden {\n height: 0;\n margin: 0;\n padding: 0;\n visibility: hidden;\n }\n .kol-field-control__label-text::after {\n content: \"\";\n }\n .kol-field-control__tooltip .span-label::after {\n content: \"\";\n }\n .kol-field-control__hint {\n grid-area: hint;\n }\n .kol-field-control--disabled .kol-field-control__label {\n cursor: not-allowed;\n opacity: 0.5;\n }\n .kol-field-control--required .kol-field-control__label-text::after {\n content: \"*\";\n }\n .kol-field-control--required .kol-field-control__tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}\n@layer kol-component {\n .kol-input-container {\n align-items: center;\n background-color: white;\n cursor: pointer;\n display: grid;\n grid-template-columns: 1fr;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\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}\n@layer kol-component {\n .kol-form-field {\n --border-width: 2px;\n --input-size: 1.5em;\n }\n .kol-form-field__label {\n display: contents;\n }\n .kol-form-field__input {\n display: flex;\n flex-direction: column;\n }\n .kol-form-field__input--orientation-horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n align-items: flex-start;\n }\n .kol-form-field--disabled {\n opacity: unset;\n }\n .kol-input-radio {\n appearance: none;\n border-width: var(--border-width);\n border-style: solid;\n border-radius: 100%;\n cursor: pointer;\n display: flex;\n height: var(--input-size);\n margin: 0;\n min-height: var(--input-size);\n min-width: var(--input-size);\n padding: 0;\n width: var(--input-size);\n }\n .kol-input-radio:before {\n border-radius: 100%;\n content: \"\";\n margin: auto;\n height: calc(var(--input-size) / 2);\n width: calc(var(--input-size) / 2);\n }\n .kol-input-radio:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .kol-input-radio:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n .kol-input-radio:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n}";
|
|
18714
18682
|
var KolInputRadioDefaultStyle0 = defaultStyleCss$p;
|
|
18715
18683
|
|
|
18716
18684
|
class KolInputRadio {
|
|
@@ -18739,7 +18707,7 @@ class KolInputRadio {
|
|
|
18739
18707
|
};
|
|
18740
18708
|
}
|
|
18741
18709
|
render() {
|
|
18742
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
18710
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'ca3fb9fac13602ade77aaefdaa4080bc7bea9d87' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
|
|
18743
18711
|
}
|
|
18744
18712
|
getOptionProps(option, id) {
|
|
18745
18713
|
const obj = {
|
|
@@ -18822,7 +18790,6 @@ class KolInputRadio {
|
|
|
18822
18790
|
this._required = false;
|
|
18823
18791
|
this._shortKey = undefined;
|
|
18824
18792
|
this._syncValueBySelector = undefined;
|
|
18825
|
-
this._tabIndex = undefined;
|
|
18826
18793
|
this._tooltipAlign = 'top';
|
|
18827
18794
|
this._touched = false;
|
|
18828
18795
|
this._value = undefined;
|
|
@@ -18887,9 +18854,6 @@ class KolInputRadio {
|
|
|
18887
18854
|
validateSyncValueBySelector(value) {
|
|
18888
18855
|
this.controller.validateSyncValueBySelector(value);
|
|
18889
18856
|
}
|
|
18890
|
-
validateTabIndex(value) {
|
|
18891
|
-
this.controller.validateTabIndex(value);
|
|
18892
|
-
}
|
|
18893
18857
|
validateTouched(value) {
|
|
18894
18858
|
this.controller.validateTouched(value);
|
|
18895
18859
|
}
|
|
@@ -18919,7 +18883,6 @@ class KolInputRadio {
|
|
|
18919
18883
|
"_required": ["validateRequired"],
|
|
18920
18884
|
"_shortKey": ["validateShortKey"],
|
|
18921
18885
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
18922
|
-
"_tabIndex": ["validateTabIndex"],
|
|
18923
18886
|
"_touched": ["validateTouched"],
|
|
18924
18887
|
"_value": ["validateValue"]
|
|
18925
18888
|
}; }
|
|
@@ -18945,7 +18908,6 @@ class KolInputRadio {
|
|
|
18945
18908
|
"_required": [4],
|
|
18946
18909
|
"_shortKey": [1, "_short-key"],
|
|
18947
18910
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
18948
|
-
"_tabIndex": [2, "_tab-index"],
|
|
18949
18911
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
18950
18912
|
"_touched": [1540],
|
|
18951
18913
|
"_value": [1544],
|
|
@@ -18996,7 +18958,7 @@ class InputRangeController extends InputIconController {
|
|
|
18996
18958
|
}
|
|
18997
18959
|
}
|
|
18998
18960
|
|
|
18999
|
-
const defaultStyleCss$o = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
18961
|
+
const defaultStyleCss$o = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\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 place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}\n@layer kol-component {\n .kol-input-container {\n align-items: center;\n background-color: white;\n cursor: pointer;\n display: grid;\n grid-template-columns: 1fr;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\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}\n@layer kol-component {\n .kol-input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input:focus {\n outline: none;\n }\n}\n@layer kol-component {\n .kol-input-range__inputs-wrapper {\n align-items: center;\n display: flex;\n flex-direction: row;\n flex-grow: 1;\n }\n .kol-input-range__input--number {\n width: var(--kolibri-input-range--input-number--width);\n }\n .kol-input-range__input--range {\n appearance: none;\n background-color: #d3d3d3;\n border: 1px solid #000;\n display: inline-block;\n flex-grow: 1;\n height: calc(8rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n padding: 0;\n margin: 0;\n /* Design-Hack - related with flex-grow */\n width: 0;\n }\n .kol-input-range__input--range::-webkit-slider-thumb {\n box-sizing: border-box;\n background-color: #000;\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n border-radius: 20px;\n cursor: pointer;\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--range::-moz-range-thumb {\n box-sizing: border-box;\n background-color: #000;\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n border-radius: 20px;\n cursor: pointer;\n -moz-appearance: none;\n }\n}";
|
|
19000
18962
|
var KolInputRangeDefaultStyle0 = defaultStyleCss$o;
|
|
19001
18963
|
|
|
19002
18964
|
class KolInputRange {
|
|
@@ -19059,7 +19021,7 @@ class KolInputRange {
|
|
|
19059
19021
|
const inputsWrapperStyle = {
|
|
19060
19022
|
'--kolibri-input-range--input-number--width': `calc(${String((_a = this.state._max) !== null && _a !== void 0 ? _a : 1000).length}ch + 1.5em)`,
|
|
19061
19023
|
};
|
|
19062
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
19024
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '4a6836447f059020a9ad81c8058d4cff27b48517' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '7926959cd72b898651b2dd97903c7821dcb423f0', state: this.state }, hAsync("div", { key: 'cf6e5f4a830f6d141812ee2a74a98536a7d9f4d7', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'f4f46d35488c55f1a024d2f199d823d7edf0773c', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), hAsync(KolInputStateWrapperFc, Object.assign({ key: 'c2cc76917792912cd1603d008d02f6caf2491b6c', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && hAsync(KolSuggestionsFc, { key: '437bbf7b6a4747ff654d32e6d9c62df1a6b3682f', id: this.state._id, suggestions: this.state._suggestions }))));
|
|
19063
19025
|
}
|
|
19064
19026
|
constructor(hostRef) {
|
|
19065
19027
|
registerInstance(this, hostRef);
|
|
@@ -19109,7 +19071,6 @@ class KolInputRange {
|
|
|
19109
19071
|
this._step = undefined;
|
|
19110
19072
|
this._suggestions = undefined;
|
|
19111
19073
|
this._syncValueBySelector = undefined;
|
|
19112
|
-
this._tabIndex = undefined;
|
|
19113
19074
|
this._tooltipAlign = 'top';
|
|
19114
19075
|
this._touched = false;
|
|
19115
19076
|
this._value = undefined;
|
|
@@ -19180,9 +19141,6 @@ class KolInputRange {
|
|
|
19180
19141
|
validateSyncValueBySelector(value) {
|
|
19181
19142
|
this.controller.validateSyncValueBySelector(value);
|
|
19182
19143
|
}
|
|
19183
|
-
validateTabIndex(value) {
|
|
19184
|
-
this.controller.validateTabIndex(value);
|
|
19185
|
-
}
|
|
19186
19144
|
validateTouched(value) {
|
|
19187
19145
|
this.controller.validateTouched(value);
|
|
19188
19146
|
}
|
|
@@ -19214,7 +19172,6 @@ class KolInputRange {
|
|
|
19214
19172
|
"_step": ["validateStep"],
|
|
19215
19173
|
"_suggestions": ["validateSuggestions"],
|
|
19216
19174
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
19217
|
-
"_tabIndex": ["validateTabIndex"],
|
|
19218
19175
|
"_touched": ["validateTouched"],
|
|
19219
19176
|
"_value": ["validateValue"]
|
|
19220
19177
|
}; }
|
|
@@ -19243,7 +19200,6 @@ class KolInputRange {
|
|
|
19243
19200
|
"_step": [2],
|
|
19244
19201
|
"_suggestions": [1],
|
|
19245
19202
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
19246
|
-
"_tabIndex": [2, "_tab-index"],
|
|
19247
19203
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
19248
19204
|
"_touched": [1540],
|
|
19249
19205
|
"_value": [1538],
|
|
@@ -19258,7 +19214,7 @@ class KolInputRange {
|
|
|
19258
19214
|
}; }
|
|
19259
19215
|
}
|
|
19260
19216
|
|
|
19261
|
-
const defaultStyleCss$n = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
19217
|
+
const defaultStyleCss$n = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\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 place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}\n@layer kol-component {\n .kol-input-container {\n align-items: center;\n background-color: white;\n cursor: pointer;\n display: grid;\n grid-template-columns: 1fr;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\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}\n@layer kol-component {\n .kol-input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input:focus {\n outline: none;\n }\n}";
|
|
19262
19218
|
var KolInputTextDefaultStyle0 = defaultStyleCss$n;
|
|
19263
19219
|
|
|
19264
19220
|
class KolInputText {
|
|
@@ -19285,7 +19241,7 @@ class KolInputText {
|
|
|
19285
19241
|
return Object.assign(Object.assign({ ref: this.catchRef, state: this.state }, this.controller.onFacade), { onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown });
|
|
19286
19242
|
}
|
|
19287
19243
|
render() {
|
|
19288
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
19244
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '969dad6773e87aad3880e2788cfc0a75ba69f595' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '0a18924294df1f16046e5300424cb6295cddb540', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '6ff75757597a63bdd977320509afde8627a6b7c4' }, this.getInputProps())))));
|
|
19289
19245
|
}
|
|
19290
19246
|
constructor(hostRef) {
|
|
19291
19247
|
registerInstance(this, hostRef);
|
|
@@ -19346,7 +19302,6 @@ class KolInputText {
|
|
|
19346
19302
|
this._suggestions = undefined;
|
|
19347
19303
|
this._smartButton = undefined;
|
|
19348
19304
|
this._syncValueBySelector = undefined;
|
|
19349
|
-
this._tabIndex = undefined;
|
|
19350
19305
|
this._tooltipAlign = 'top';
|
|
19351
19306
|
this._touched = false;
|
|
19352
19307
|
this._type = 'text';
|
|
@@ -19436,9 +19391,6 @@ class KolInputText {
|
|
|
19436
19391
|
validateSyncValueBySelector(value) {
|
|
19437
19392
|
this.controller.validateSyncValueBySelector(value);
|
|
19438
19393
|
}
|
|
19439
|
-
validateTabIndex(value) {
|
|
19440
|
-
this.controller.validateTabIndex(value);
|
|
19441
|
-
}
|
|
19442
19394
|
validateTouched(value) {
|
|
19443
19395
|
this.controller.validateTouched(value);
|
|
19444
19396
|
}
|
|
@@ -19482,7 +19434,6 @@ class KolInputText {
|
|
|
19482
19434
|
"_suggestions": ["validateSuggestions"],
|
|
19483
19435
|
"_smartButton": ["validateSmartButton"],
|
|
19484
19436
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
19485
|
-
"_tabIndex": ["validateTabIndex"],
|
|
19486
19437
|
"_touched": ["validateTouched"],
|
|
19487
19438
|
"_type": ["validateType"],
|
|
19488
19439
|
"_value": ["validateValue"]
|
|
@@ -19517,7 +19468,6 @@ class KolInputText {
|
|
|
19517
19468
|
"_suggestions": [1],
|
|
19518
19469
|
"_smartButton": [1, "_smart-button"],
|
|
19519
19470
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
19520
|
-
"_tabIndex": [2, "_tab-index"],
|
|
19521
19471
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
19522
19472
|
"_touched": [1540],
|
|
19523
19473
|
"_type": [1],
|
|
@@ -19533,108 +19483,6 @@ class KolInputText {
|
|
|
19533
19483
|
}; }
|
|
19534
19484
|
}
|
|
19535
19485
|
|
|
19536
|
-
class KolInputWc {
|
|
19537
|
-
constructor(hostRef) {
|
|
19538
|
-
registerInstance(this, hostRef);
|
|
19539
|
-
this.slotName = 'input';
|
|
19540
|
-
this.catchInputSlot = (slot) => {
|
|
19541
|
-
handleSlotContent(this.host, slot, this.slotName);
|
|
19542
|
-
};
|
|
19543
|
-
this._accessKey = undefined;
|
|
19544
|
-
this._alert = true;
|
|
19545
|
-
this._currentLength = undefined;
|
|
19546
|
-
this._disabled = false;
|
|
19547
|
-
this._hasCounter = false;
|
|
19548
|
-
this._hideMsg = false;
|
|
19549
|
-
this._hideLabel = false;
|
|
19550
|
-
this._hint = '';
|
|
19551
|
-
this._icons = undefined;
|
|
19552
|
-
this._id = undefined;
|
|
19553
|
-
this._label = undefined;
|
|
19554
|
-
this._maxLength = undefined;
|
|
19555
|
-
this._msg = undefined;
|
|
19556
|
-
this._readOnly = false;
|
|
19557
|
-
this._renderNoLabel = false;
|
|
19558
|
-
this._required = false;
|
|
19559
|
-
this._shortKey = undefined;
|
|
19560
|
-
this._slotName = undefined;
|
|
19561
|
-
this._suggestions = undefined;
|
|
19562
|
-
this._smartButton = undefined;
|
|
19563
|
-
this._tooltipAlign = 'top';
|
|
19564
|
-
this._touched = false;
|
|
19565
|
-
}
|
|
19566
|
-
componentWillRender() {
|
|
19567
|
-
this.slotName = this._slotName ? this._slotName : 'input';
|
|
19568
|
-
}
|
|
19569
|
-
getIconStyles(icon) {
|
|
19570
|
-
return icon && typeof icon === 'object' && icon.style ? icon.style : {};
|
|
19571
|
-
}
|
|
19572
|
-
render() {
|
|
19573
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
19574
|
-
const hasValidMsg = typeof this._msg === 'object' && this._msg !== null && typeof ((_a = this._msg) === null || _a === void 0 ? void 0 : _a._description) === 'string' && ((_b = this._msg) === null || _b === void 0 ? void 0 : _b._description.length) > 0;
|
|
19575
|
-
const showMsg = hasValidMsg && (this._touched === true || ((_c = this._msg) === null || _c === void 0 ? void 0 : _c._type) !== 'error');
|
|
19576
|
-
const hasExpertSlot = showExpertSlot(this._label);
|
|
19577
|
-
const hasHint = typeof this._hint === 'string' && this._hint.length > 0;
|
|
19578
|
-
const useTooltipInsteadOfLabel = !hasExpertSlot && this._hideLabel;
|
|
19579
|
-
return (hAsync(Host, { key: '895d1db912502217a9188a8fffb5eee5a515002a', class: clsx('kol-input', this.getModifierClassNameByMsgType(showMsg), {
|
|
19580
|
-
disabled: this._disabled === true,
|
|
19581
|
-
[((_d = this._msg) === null || _d === void 0 ? void 0 : _d._type) || 'error']: showMsg === true,
|
|
19582
|
-
'read-only': this._readOnly === true,
|
|
19583
|
-
required: this._required === true,
|
|
19584
|
-
touched: this._touched === true,
|
|
19585
|
-
'hidden-msg': this._hideMsg === true,
|
|
19586
|
-
}) }, hAsync("label", { key: '0382c62b359cdca9913f3214982391f10d175133', class: "input-label", id: !useTooltipInsteadOfLabel ? `${this._id}-label` : undefined, hidden: useTooltipInsteadOfLabel, htmlFor: this._id }, hAsync("span", { key: 'dfe7d7f03b85be2a10828045d405bfb00aead8c1', class: "input-label-span" }, hAsync("slot", { key: 'b2a61ee178a52cc826eabf2749b831b4e6ffe6bb', name: "label" }))), hasHint && (hAsync("span", { key: '56bbbd36b3e2b80cba6e2bf5a7ca47b3c06ab448', class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { key: '2186f37486b67ef44134ec2fba19efe82b7bb90d', class: {
|
|
19587
|
-
input: true,
|
|
19588
|
-
'icon-left': typeof ((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) === 'object',
|
|
19589
|
-
'icon-right': typeof ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) === 'object',
|
|
19590
|
-
} }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: 'fd0042f000230bae0c40a59bb80d5f731a9c04b2', _label: "", _icons: ((_h = this._icons) === null || _h === void 0 ? void 0 : _h.left).icon, style: this.getIconStyles((_j = this._icons) === null || _j === void 0 ? void 0 : _j.left) })), hAsync("div", { key: '012d1a828235b8883337467d241da4b484313eb7', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { key: 'c26c0190e47cefc539ff3e45a1d76ad925285fb8', _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_k = this._icons) === null || _k === void 0 ? void 0 : _k.right) && (hAsync(KolIconTag, { key: '3aeb395e25c37aef03ee9d965fb35bd606a6d16e', _label: "", _icons: ((_l = this._icons) === null || _l === void 0 ? void 0 : _l.right).icon, style: this.getIconStyles((_m = this._icons) === null || _m === void 0 ? void 0 : _m.right) }))), useTooltipInsteadOfLabel && (hAsync(KolTooltipWcTag, { key: '3fe6409e80655b640fe6d0420769a59e6f6a7039', "aria-hidden": "true", class: "input-tooltip", _badgeText: this._accessKey || this._shortKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), showMsg && hAsync(KolFormFieldMsgFc, { key: 'b2e05a9477c21175e8653843e49ee01ad80ac5a6', alert: this._alert, hideMsg: this._hideMsg, msg: convertMsgToInternMsg(this._msg), id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { key: 'c15058bc2cc679c37faa3bff5613153b3da24280', id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync("span", { key: '1a828df0444187fd11dbb6314647f11bf510b8dd', class: "counter", "aria-atomic": "true", "aria-live": "polite", "data-testid": "input-counter" }, this._currentLength, this._maxLength && (hAsync(Fragment, null, hAsync("span", { key: '891959a26aa385267621e12a57eba6402ec5e27d', "aria-label": translate('kol-of'), role: "img" }, "/"), this._maxLength)), ' ', hAsync("span", { key: 'a05fb3ac64237c178c26dace4cded75357fddf25' }, translate('kol-characters'))))));
|
|
19591
|
-
}
|
|
19592
|
-
getModifierClassNameByMsgType(showMsg) {
|
|
19593
|
-
var _a, _b;
|
|
19594
|
-
if (showMsg && ((_a = this._msg) === null || _a === void 0 ? void 0 : _a._type)) {
|
|
19595
|
-
return {
|
|
19596
|
-
default: 'msg-type-default',
|
|
19597
|
-
info: 'msg-type-info',
|
|
19598
|
-
success: 'msg-type-success',
|
|
19599
|
-
warning: 'msg-type-warning',
|
|
19600
|
-
error: 'msg-type-error',
|
|
19601
|
-
}[(_b = this._msg) === null || _b === void 0 ? void 0 : _b._type];
|
|
19602
|
-
}
|
|
19603
|
-
}
|
|
19604
|
-
get host() { return getElement(this); }
|
|
19605
|
-
static get cmpMeta() { return {
|
|
19606
|
-
"$flags$": 4,
|
|
19607
|
-
"$tagName$": "kol-input",
|
|
19608
|
-
"$members$": {
|
|
19609
|
-
"_accessKey": [1, "_access-key"],
|
|
19610
|
-
"_alert": [4],
|
|
19611
|
-
"_currentLength": [2, "_current-length"],
|
|
19612
|
-
"_disabled": [4],
|
|
19613
|
-
"_hasCounter": [4, "_has-counter"],
|
|
19614
|
-
"_hideMsg": [4, "_hide-msg"],
|
|
19615
|
-
"_hideLabel": [4, "_hide-label"],
|
|
19616
|
-
"_hint": [1],
|
|
19617
|
-
"_icons": [16],
|
|
19618
|
-
"_id": [1],
|
|
19619
|
-
"_label": [1],
|
|
19620
|
-
"_maxLength": [2, "_max-length"],
|
|
19621
|
-
"_msg": [16],
|
|
19622
|
-
"_readOnly": [4, "_read-only"],
|
|
19623
|
-
"_renderNoLabel": [4, "_render-no-label"],
|
|
19624
|
-
"_required": [4],
|
|
19625
|
-
"_shortKey": [1, "_short-key"],
|
|
19626
|
-
"_slotName": [1, "_slot-name"],
|
|
19627
|
-
"_suggestions": [1],
|
|
19628
|
-
"_smartButton": [1, "_smart-button"],
|
|
19629
|
-
"_tooltipAlign": [1, "_tooltip-align"],
|
|
19630
|
-
"_touched": [4]
|
|
19631
|
-
},
|
|
19632
|
-
"$listeners$": undefined,
|
|
19633
|
-
"$lazyBundleId$": "-",
|
|
19634
|
-
"$attrsToReflect$": []
|
|
19635
|
-
}; }
|
|
19636
|
-
}
|
|
19637
|
-
|
|
19638
19486
|
const defaultStyleCss$m = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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-kolibri {\n display: inline-block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n max-height: 100%;\n }\n .kol-kolibri__text {\n font-size: calc(90rem / var(--kolibri-root-font-size, 16));\n letter-spacing: normal;\n word-spacing: normal;\n }\n}";
|
|
19639
19487
|
var KolKolibriDefaultStyle0 = defaultStyleCss$m;
|
|
19640
19488
|
|
|
@@ -19667,7 +19515,7 @@ class KolKolibri {
|
|
|
19667
19515
|
}
|
|
19668
19516
|
render() {
|
|
19669
19517
|
const fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
|
|
19670
|
-
return (hAsync("svg", { key: '
|
|
19518
|
+
return (hAsync("svg", { key: '490680370f1d5c2e66bd77f3afcd0749d54d0c6e', class: "kol-kolibri", role: "img", "aria-label": translate('kol-kolibri-logo'), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", fill: fillColor }, hAsync("path", { key: 'b5d0186d1d0a1c007a0a9fa84321e4edf0e02dcf', d: "M353 322L213 304V434L353 322Z" }), hAsync("path", { key: 'd933f88df67a0e4b2e5c34a6dfb1c5c963a758da', d: "M209 564V304L149 434L209 564Z" }), hAsync("path", { key: '8b3eb704585bac0bfceb99371d6922f4b94b170e', d: "M357 316L417 250L361 210L275 244L357 316Z" }), hAsync("path", { key: 'e07349bac5c63d8aa2cdec0929e6663d055491e9', d: "M329 218L237 92L250 222L272 241L329 218Z" }), hAsync("path", { key: '648c28da54defcd245c3dfab02732d7e57ccbd18', d: "M353 318L35 36L213 300L353 318Z" }), hAsync("path", { key: '14a0de9c0455a5a3c8b65cf12b1b47449666448c', d: "M391 286L565 272L421 252L391 286Z" }), this.state._labeled === true && (hAsync("text", { key: '5e4b6bee08779e34bee19d36ef2efee24312ed62', class: "kol-kolibri__text", x: "250", y: "525", fill: fillColor }, "KoliBri"))));
|
|
19671
19519
|
}
|
|
19672
19520
|
validateColor(value) {
|
|
19673
19521
|
validateColor(this, value, {
|
|
@@ -19707,7 +19555,7 @@ class KolKolibri {
|
|
|
19707
19555
|
}; }
|
|
19708
19556
|
}
|
|
19709
19557
|
|
|
19710
|
-
const defaultStyleCss$l = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
19558
|
+
const defaultStyleCss$l = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n align-items: baseline;\n display: inline-flex;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-link__text .kol-span__label {\n text-decoration-line: underline;\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__icon {\n display: inline-flex;\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
19711
19559
|
var KolLinkDefaultStyle0 = defaultStyleCss$l;
|
|
19712
19560
|
|
|
19713
19561
|
class KolLink {
|
|
@@ -19728,7 +19576,6 @@ class KolLink {
|
|
|
19728
19576
|
this._on = undefined;
|
|
19729
19577
|
this._role = undefined;
|
|
19730
19578
|
this._shortKey = undefined;
|
|
19731
|
-
this._tabIndex = undefined;
|
|
19732
19579
|
this._target = undefined;
|
|
19733
19580
|
this._tooltipAlign = 'right';
|
|
19734
19581
|
}
|
|
@@ -19737,7 +19584,7 @@ class KolLink {
|
|
|
19737
19584
|
await ((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
19738
19585
|
}
|
|
19739
19586
|
render() {
|
|
19740
|
-
return (hAsync(KolLinkWcTag, { key: '
|
|
19587
|
+
return (hAsync(KolLinkWcTag, { key: '965a19f20c69923d4a0891604fba8aa15f9a1973', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaDescription: this._ariaDescription, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: this._role, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: '86e618b375530f5c25757599f3ba713392a3a1f3', name: "expert", slot: "expert" })));
|
|
19741
19588
|
}
|
|
19742
19589
|
static get delegatesFocus() { return true; }
|
|
19743
19590
|
static get style() { return {
|
|
@@ -19759,7 +19606,6 @@ class KolLink {
|
|
|
19759
19606
|
"_on": [16],
|
|
19760
19607
|
"_role": [1],
|
|
19761
19608
|
"_shortKey": [1, "_short-key"],
|
|
19762
|
-
"_tabIndex": [2, "_tab-index"],
|
|
19763
19609
|
"_target": [1],
|
|
19764
19610
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
19765
19611
|
"kolFocus": [64]
|
|
@@ -19770,7 +19616,7 @@ class KolLink {
|
|
|
19770
19616
|
}; }
|
|
19771
19617
|
}
|
|
19772
19618
|
|
|
19773
|
-
const defaultStyleCss$k = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
19619
|
+
const defaultStyleCss$k = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\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 font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n display: inline-flex;\n place-items: center;\n text-align: center;\n text-decoration-line: none;\n }\n .kol-link::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"\";\n }\n .kol-link__text {\n margin: auto;\n width: 100%;\n }\n}";
|
|
19774
19620
|
var KolLinkButtonDefaultStyle0 = defaultStyleCss$k;
|
|
19775
19621
|
|
|
19776
19622
|
class KolLinkButton {
|
|
@@ -19792,7 +19638,6 @@ class KolLinkButton {
|
|
|
19792
19638
|
this._on = undefined;
|
|
19793
19639
|
this._role = undefined;
|
|
19794
19640
|
this._shortKey = undefined;
|
|
19795
|
-
this._tabIndex = undefined;
|
|
19796
19641
|
this._target = undefined;
|
|
19797
19642
|
this._tooltipAlign = 'right';
|
|
19798
19643
|
this._variant = 'normal';
|
|
@@ -19802,7 +19647,7 @@ class KolLinkButton {
|
|
|
19802
19647
|
await ((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
19803
19648
|
}
|
|
19804
19649
|
render() {
|
|
19805
|
-
return (hAsync(KolLinkWcTag, { key: '
|
|
19650
|
+
return (hAsync(KolLinkWcTag, { key: '63b766a0b393724d79e346a7d23318b5a044d5b8', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _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, _role: "button", _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign, _variant: this._variant }, hAsync("slot", { key: 'c2cdcf59de68e99b8fa026bb7f2f5e99169b945c', name: "expert", slot: "expert" })));
|
|
19806
19651
|
}
|
|
19807
19652
|
static get delegatesFocus() { return true; }
|
|
19808
19653
|
static get style() { return {
|
|
@@ -19825,7 +19670,6 @@ class KolLinkButton {
|
|
|
19825
19670
|
"_on": [16],
|
|
19826
19671
|
"_role": [1],
|
|
19827
19672
|
"_shortKey": [1, "_short-key"],
|
|
19828
|
-
"_tabIndex": [2, "_tab-index"],
|
|
19829
19673
|
"_target": [1],
|
|
19830
19674
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
19831
19675
|
"_variant": [1],
|
|
@@ -19916,7 +19760,7 @@ class KolLinkWc {
|
|
|
19916
19760
|
const { isExternal, tagAttrs } = this.getRenderValues();
|
|
19917
19761
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
19918
19762
|
const hasAriaDescription = Boolean((_b = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length);
|
|
19919
|
-
return (hAsync(Host, { key: '
|
|
19763
|
+
return (hAsync(Host, { key: '587357d002a1ea7744990f5ce802f96af6baef5a' }, hAsync("a", Object.assign({ key: '7f3fc17c83bbcfdc184b5edea97d25ce06f55227', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-describedby": hasAriaDescription ? this.internalDescriptionById : 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'
|
|
19920
19764
|
? `${this.state._label}${isExternal ? ` (${translate('kol-open-link-in-tab')})` : ''}`
|
|
19921
19765
|
: undefined, class: clsx('kol-link', {
|
|
19922
19766
|
'kol-link--disabled': this.state._disabled === true,
|
|
@@ -19924,7 +19768,7 @@ class KolLinkWc {
|
|
|
19924
19768
|
'kol-link--hide-label': this.state._hideLabel === true,
|
|
19925
19769
|
[`kol-link--${this.state._variant}`]: this.state._role === 'button' && this.state._variant !== 'custom',
|
|
19926
19770
|
[this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
19927
|
-
}) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc$1, { key: '
|
|
19771
|
+
}) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc$1, { key: 'b806611a5bb089b415a07d55dd6c070c9703c886', 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: '5a40e834255ae54cf719dd51a521e92874c89c47', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: 'f757a3dc5c051df590dc7048ae15a26e8c28ea8b', class: "kol-link__icon", _label: this.state._hideLabel ? '' : translate('kol-open-link-in-tab'), _icons: 'codicon codicon-link-external', "aria-hidden": this.state._hideLabel }))), hAsync(KolTooltipWcTag, { key: '1fd1e9b9fcae9a8505f29cc6962d742670d96f84', "aria-hidden": "true", class: "kol-link__tooltip", hidden: hasExpertSlot || !this.state._hideLabel, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href }), hasAriaDescription && (hAsync("span", { key: '4d5d88f8b21c251476b31533e8c54318fd087b27', class: "visually-hidden", id: this.internalDescriptionById }, this.state._ariaDescription))));
|
|
19928
19772
|
}
|
|
19929
19773
|
validateAccessKey(value) {
|
|
19930
19774
|
validateAccessKey(this, value);
|
|
@@ -20076,7 +19920,7 @@ const validateModalVariant = (component, value) => {
|
|
|
20076
19920
|
watchValidator(component, '_variant', (value) => typeof value === 'string' && ModalVariantPropTypeOptions.includes(value), new Set(ModalVariantPropTypeOptions), value);
|
|
20077
19921
|
};
|
|
20078
19922
|
|
|
20079
|
-
const defaultStyleCss$j = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
19923
|
+
const defaultStyleCss$j = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-modal {\n border: 0;\n padding: 0;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .kol-modal::backdrop {\n background-color: rgba(0, 0, 0, 0.33);\n }\n .kol-modal__close-button {\n position: absolute;\n top: calc(1rem / var(--kolibri-root-font-size, 16));\n right: calc(1rem / var(--kolibri-root-font-size, 16));\n z-index: 1;\n }\n}";
|
|
20080
19924
|
var KolModalDefaultStyle0 = defaultStyleCss$j;
|
|
20081
19925
|
|
|
20082
19926
|
class KolModal {
|
|
@@ -20115,11 +19959,11 @@ class KolModal {
|
|
|
20115
19959
|
(_b = (_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
20116
19960
|
}
|
|
20117
19961
|
render() {
|
|
20118
|
-
return (hAsync("dialog", { key: '
|
|
19962
|
+
return (hAsync("dialog", { key: 'a7746d9555c2d6e0172e184e370562e7bf7d8967', class: clsx('kol-modal', { 'kol-modal__card': this.state._variant === 'card' }), ref: (el) => {
|
|
20119
19963
|
this.refDialog = el;
|
|
20120
19964
|
}, style: {
|
|
20121
19965
|
width: this.state._width,
|
|
20122
|
-
}, "aria-label": this.state._label, onClose: this.handleNativeCloseEvent.bind(this) }, hAsync("div", { key: '
|
|
19966
|
+
}, "aria-label": this.state._label, onClose: this.handleNativeCloseEvent.bind(this) }, hAsync("div", { key: 'af55fc367328cff9c1495518b39b92941101d9be', tabindex: "-1" }, hAsync("slot", { key: 'e83efa707edf86463258ec35c174f2553a8405bf' })), this.state._variant === 'card' && (hAsync(KolButtonWcTag, { key: '234abb9a34c39e748a74471fb87595f9d144b994', class: "kol-modal__close-button", "data-testid": "modal-close-button", _hideLabel: true, _icons: {
|
|
20123
19967
|
left: {
|
|
20124
19968
|
icon: 'codicon codicon-close',
|
|
20125
19969
|
},
|
|
@@ -20181,7 +20025,7 @@ class KolModal {
|
|
|
20181
20025
|
}; }
|
|
20182
20026
|
}
|
|
20183
20027
|
|
|
20184
|
-
const defaultStyleCss$i = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
20028
|
+
const defaultStyleCss$i = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-nav {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n display: grid;\n place-items: center;\n }\n .kol-nav--horizontal {\n width: 100%;\n }\n .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n width: 100%;\n }\n .kol-nav__list {\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .kol-nav__list--vertical {\n flex-direction: column;\n }\n .kol-nav__list--horizontal {\n flex-wrap: wrap;\n }\n .kol-nav__entry-wrapper {\n display: flex;\n }\n .kol-nav__entry {\n flex-grow: 1;\n }\n}";
|
|
20185
20029
|
var KolNavDefaultStyle0 = defaultStyleCss$i;
|
|
20186
20030
|
|
|
20187
20031
|
const entryIsLink = (entryProps) => {
|
|
@@ -20296,9 +20140,9 @@ class KolNav {
|
|
|
20296
20140
|
const collapsible = this.state._collapsible === true;
|
|
20297
20141
|
const hideLabel = this.state._hideLabel === true;
|
|
20298
20142
|
const orientation = this.state._orientation;
|
|
20299
|
-
return (hAsync("div", { key: '
|
|
20143
|
+
return (hAsync("div", { key: '52f1ba2a69870cd208aa9514b5cf8b4a99c8d3ab', class: clsx('kol-nav', `kol-nav--${orientation}`, {
|
|
20300
20144
|
'kol-nav--is-compact': this.state._hideLabel,
|
|
20301
|
-
}) }, hAsync("nav", { key: '
|
|
20145
|
+
}) }, hAsync("nav", { key: '0ae9239598bde270bfefe8ee1e3077e9a2e80f88', class: "kol-nav__navigation", "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: '5b0555e0638e3029604e32d3e5496b88b6af288c', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })), hasCompactButton && (hAsync("div", { key: '6e9f2a774c4b77eee0b2dcc306868e7b69bfcb5b', class: "kol-nav__compact" }, hAsync(KolButtonTag, { key: '5c87da3c9b3e6884dbba58e5e29c2db9dfa04455', _ariaControls: "nav", _ariaExpanded: !hideLabel, _icons: hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
|
|
20302
20146
|
onClick: () => {
|
|
20303
20147
|
this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel === false });
|
|
20304
20148
|
},
|
|
@@ -20379,7 +20223,7 @@ class KolNav {
|
|
|
20379
20223
|
}; }
|
|
20380
20224
|
}
|
|
20381
20225
|
|
|
20382
|
-
const defaultStyleCss$h = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
20226
|
+
const defaultStyleCss$h = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n /* TODO. Once #7126 is completed, move :host block into .kol-pagination */\n :host {\n align-items: center;\n display: grid;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n grid-template-columns: 1fr auto;\n }\n .kol-pagination__navigation-list {\n align-items: center;\n display: inline-flex;\n flex-wrap: wrap;\n gap: 0.5em;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .kol-pagination__separator:before {\n content: \"•••\";\n }\n}";
|
|
20383
20227
|
var KolPaginationDefaultStyle0 = defaultStyleCss$h;
|
|
20384
20228
|
|
|
20385
20229
|
const leftDoubleArrowIcon = {
|
|
@@ -22907,7 +22751,7 @@ class KolPopover {
|
|
|
22907
22751
|
});
|
|
22908
22752
|
}
|
|
22909
22753
|
render() {
|
|
22910
|
-
return (hAsync(Host, { key: '
|
|
22754
|
+
return (hAsync(Host, { key: '23e4ea8f366f0263df0099ee1f804412ccd05892', ref: this.catchHostAndTriggerElement, class: "kol-popover" }, hAsync("div", { key: 'f0b966725406619aecf64015f1cdebe11c24b047', class: clsx('kol-popover__content', { 'kol-popover__content--visible': this.state._visible }), ref: this.catchPopoverElement, hidden: !this.state._show }, hAsync("div", { key: '629b53f52ff434ef87738dfccb8c346a15f39c40', class: clsx('kol-popover__arrow', `kol-popover__arrow--${this.state._align}`), ref: this.catchArrowElement }), hAsync("slot", { key: 'afa7350520898288c61b7f65b07978c9a81c7289' }))));
|
|
22911
22755
|
}
|
|
22912
22756
|
validateAlign(value) {
|
|
22913
22757
|
validateAlign(this, value);
|
|
@@ -22944,7 +22788,7 @@ class KolPopover {
|
|
|
22944
22788
|
}; }
|
|
22945
22789
|
}
|
|
22946
22790
|
|
|
22947
|
-
const defaultStyleCss$g = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
22791
|
+
const defaultStyleCss$g = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\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 font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n display: inline-flex;\n place-items: center;\n text-align: center;\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 margin: auto;\n width: 100%;\n }\n}\n@layer kol-component {\n .kol-popover-button__button {\n display: inline-block;\n }\n .kol-popover-button__popover {\n border: 1px solid #000;\n margin: 0;\n padding: 0;\n }\n}";
|
|
22948
22792
|
var KolPopoverButtonDefaultStyle0 = defaultStyleCss$g;
|
|
22949
22793
|
|
|
22950
22794
|
class KolPopoverButton {
|
|
@@ -23015,7 +22859,7 @@ class KolPopoverButton {
|
|
|
23015
22859
|
(_b = this.refPopover) === null || _b === void 0 ? void 0 : _b.removeEventListener('beforetoggle', this.handleBeforeToggle.bind(this));
|
|
23016
22860
|
}
|
|
23017
22861
|
render() {
|
|
23018
|
-
return (hAsync("div", { key: '
|
|
22862
|
+
return (hAsync("div", { key: '0f09dcb4095886dfbd3351112c6e9ebc39b3d553', class: "kol-popover-button" }, hAsync(KolButtonWcTag, { key: 'd69a388a0d5412ff91043bd9521359348f082027', _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, _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, _variant: this._variant, "data-testid": "popover-button", class: "kol-popover-button__button", ref: (element) => (this.refButton = element), onClick: this.handleButtonClick.bind(this) }, hAsync("slot", { key: 'fc96bed50258667092c01a190c390eb1d98c75eb', name: "expert", slot: "expert" })), hAsync("div", { key: 'a9ba5e29b8a45401d0cf1af87fe964bb4ca9115c', ref: (element) => (this.refPopover = element), "data-testid": "popover-content", popover: "auto", id: "popover", class: "kol-popover-button__popover" }, hAsync("slot", { key: '8abca166277b763b2ab3f5a0c1c7aee9cde58a8d' }))));
|
|
23019
22863
|
}
|
|
23020
22864
|
validatePopoverAlign(value) {
|
|
23021
22865
|
validatePopoverAlign(this, value);
|
|
@@ -23064,21 +22908,17 @@ class KolPopoverButton {
|
|
|
23064
22908
|
}; }
|
|
23065
22909
|
}
|
|
23066
22910
|
|
|
23067
|
-
const defaultStyleCss$f = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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-progress {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-progress__bar {\n
|
|
22911
|
+
const defaultStyleCss$f = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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-progress {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-progress__bar {\n display: grid;\n grid-template-columns: 1fr auto;\n grid-template-areas: \"LABEL LABEL LABEL\" \"BAR VALUE UNIT\";\n align-items: center;\n column-gap: 0.05rem;\n }\n .kol-progress__bar-label {\n grid-column-end: 2;\n grid-area: LABEL;\n }\n .kol-progress__bar svg {\n grid-area: BAR;\n }\n .kol-progress__bar-value {\n grid-area: VALUE;\n text-align: right;\n }\n .kol-progress__bar-unit {\n grid-area: UNIT;\n }\n .kol-progress__bar-border {\n fill: transparent;\n stroke: black;\n }\n .kol-progress__bar-background {\n fill: lightgray;\n stroke: white;\n }\n .kol-progress__bar-progress {\n fill: #0075ff;\n stroke: transparent;\n }\n @media (prefers-reduced-motion: no-preference) {\n .kol-progress__bar-progress {\n transition: 250ms ease-in-out 50ms;\n }\n }\n .kol-progress__cycle {\n display: grid;\n grid-template-columns: auto;\n grid-template-areas: \"ALL\";\n justify-items: center;\n align-content: center;\n }\n .kol-progress__cycle > * {\n grid-area: ALL;\n }\n .kol-progress__cycle-text {\n text-align: center;\n display: flex;\n justify-content: center;\n flex-direction: column;\n font-size: x-small;\n }\n .kol-progress__cycle-text * {\n background-color: white;\n }\n .kol-progress__cycle-background {\n fill: transparent;\n stroke: lightgray;\n }\n .kol-progress__cycle-border {\n fill: transparent;\n stroke: black;\n }\n .kol-progress__cycle-whitespace {\n fill: transparent;\n stroke: white;\n }\n .kol-progress__cycle-progress {\n fill: transparent;\n stroke: #0075ff;\n transform-origin: 50% 50%;\n transform: rotate(-90deg);\n }\n @media (prefers-reduced-motion: no-preference) {\n .kol-progress__cycle-progress {\n transition: 250ms ease-in-out 50ms;\n }\n }\n}";
|
|
23068
22912
|
var KolProgressDefaultStyle0 = defaultStyleCss$f;
|
|
23069
22913
|
|
|
23070
22914
|
const VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);
|
|
23071
22915
|
const CycleSvg = ({ state }) => {
|
|
23072
22916
|
const fullCircle = 342;
|
|
23073
|
-
|
|
23074
|
-
const textPositionBottom = '57%';
|
|
23075
|
-
const valueY = state._label ? textPositionBottom : '50%';
|
|
23076
|
-
return (hAsync("svg", { class: "kol-progress__cycle", width: "100", viewBox: "0 0 120 120", xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { class: "kol-progress__cycle-background", cx: "60", cy: "60", r: "54.5", fill: "currentColor", stroke: "currentColor", "stroke-width": "8" }), hAsync("circle", { class: "kol-progress__cycle-whitespace", cx: "60", cy: "60", r: "59", fill: "currentColor", stroke: "currentColor", "stroke-width": "3" }), hAsync("circle", { class: "kol-progress__cycle-border", cx: "60", cy: "60", r: "59", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" }), hAsync("circle", { class: "kol-progress__cycle-whitespace", cx: "60", cy: "60", r: "51", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" }), hAsync("circle", { class: "kol-progress__cycle-border", cx: "60", cy: "60", r: "50", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" }), hAsync("circle", { class: "kol-progress__cycle-progress", fill: "currentColor", stroke: "currentColor", "stroke-linecap": "round", "stroke-dasharray": `${Math.round((state._value / state._max) * fullCircle)}px ${fullCircle}px`, "stroke-width": "6", cx: "60", cy: "60", r: "54.5" }), state._label && (hAsync("text", { "aria-hidden": "true", x: "50%", y: textPositionTop, "text-anchor": "middle", fill: "currentColor" }, state._label)), hAsync("text", { "aria-hidden": "true", x: "50%", y: valueY, "text-anchor": "middle", fill: "currentColor" }, state._value, state._unit)));
|
|
22917
|
+
return (hAsync("svg", { width: "100", viewBox: "0 0 120 120", xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { class: "kol-progress__cycle-background", cx: "60", cy: "60", r: "54.5", fill: "currentColor", stroke: "currentColor", "stroke-width": "8" }), hAsync("circle", { class: "kol-progress__cycle-whitespace", cx: "60", cy: "60", r: "59", fill: "currentColor", stroke: "currentColor", "stroke-width": "3" }), hAsync("circle", { class: "kol-progress__cycle-border", cx: "60", cy: "60", r: "59", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" }), hAsync("circle", { class: "kol-progress__cycle-whitespace", cx: "60", cy: "60", r: "51", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" }), hAsync("circle", { class: "kol-progress__cycle-border", cx: "60", cy: "60", r: "50", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" }), hAsync("circle", { class: "kol-progress__cycle-progress", fill: "currentColor", stroke: "currentColor", "stroke-linecap": "round", "stroke-dasharray": `${Math.round((state._value / state._max) * fullCircle)}px ${fullCircle}px`, "stroke-width": "6", cx: "60", cy: "60", r: "54.5" })));
|
|
23077
22918
|
};
|
|
23078
22919
|
const BarSvg = ({ state }) => {
|
|
23079
|
-
const textLabelPadding = 'var(--kolibri-text-label-padding, 45px)';
|
|
23080
22920
|
const percentage = 100 * (state._value / state._max);
|
|
23081
|
-
return (hAsync("
|
|
22921
|
+
return (hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "12", overflow: "visible" }, hAsync("rect", { class: "kol-progress__bar-background", x: "1", y: "1", height: "11", rx: "5", fill: "currentColor", stroke: "currentColor", "stroke-width": "3", style: { width: `100%` } }), hAsync("rect", { class: "kol-progress__bar-border", x: "1", y: "1", height: "11", rx: "5", fill: "currentColor", stroke: "currentColor", "stroke-width": "1", style: { width: `100%` } }), hAsync("rect", { class: "kol-progress__bar-progress", x: "3", y: "3", height: "7", rx: "3.5", fill: "currentColor", stroke: "currentColor", "stroke-width": "3", style: { width: `calc(${percentage}% - 4px)` } })));
|
|
23082
22922
|
};
|
|
23083
22923
|
const createProgressSVG = (state) => {
|
|
23084
22924
|
switch (state._variant) {
|
|
@@ -23090,7 +22930,7 @@ const createProgressSVG = (state) => {
|
|
|
23090
22930
|
throw new Error(`Progress variant ${state._variant} not implemented.`);
|
|
23091
22931
|
}
|
|
23092
22932
|
};
|
|
23093
|
-
class
|
|
22933
|
+
class KolProgress {
|
|
23094
22934
|
constructor(hostRef) {
|
|
23095
22935
|
registerInstance(this, hostRef);
|
|
23096
22936
|
this._label = undefined;
|
|
@@ -23107,7 +22947,13 @@ class KolProcess {
|
|
|
23107
22947
|
};
|
|
23108
22948
|
}
|
|
23109
22949
|
render() {
|
|
23110
|
-
|
|
22950
|
+
const isPercentage = this.state._unit === '%';
|
|
22951
|
+
const liveProgressValue = isPercentage ? `${Math.round((this.state._liveValue / this.state._max) * 100)}` : this.state._liveValue;
|
|
22952
|
+
const displayValue = isPercentage ? Math.round((this.state._value / this.state._max) * 100) : this.state._value;
|
|
22953
|
+
return (hAsync("div", { key: 'a3cb72fa70f83e640758aa2a9a9b05f3144586d1', class: "kol-progress" }, hAsync("div", { key: '3f9f7a83fa9fe5f0e01ab96051b0f058afeb6ba0', "aria-hidden": "true", class: {
|
|
22954
|
+
'kol-progress__cycle': this.state._variant === 'cycle',
|
|
22955
|
+
'kol-progress__bar': this.state._variant === 'bar',
|
|
22956
|
+
} }, this.state._variant === 'bar' && this.state._label && hAsync("div", { key: 'e53ad6ee7ff680988179e7b57208cb0361783d31', class: "kol-progress__bar-label" }, this.state._label), createProgressSVG(this.state), this.state._variant == 'cycle' && (hAsync("div", { key: '10a3aabfee33e6093dd63a028482854fb47735ac', class: "kol-progress__cycle-text" }, this.state._label && hAsync("div", { key: 'd83981b1b6376f07474f1ec2e5909efb5e436ff6', class: "kol-progress__cycle-label" }, this.state._label), hAsync("div", { key: '9bde39e955af81f1fd1e97039485c051e8837be3', class: "kol-progress__cycle-value" }, `${displayValue} ${this.state._unit}`))), this.state._variant == 'bar' && (hAsync("div", { key: 'b8b3317b036e8026d83cca7e4d4d49dd744a02f5', class: "kol-progress__bar-value", style: { width: `${`${(isPercentage ? 100 : this.state._max) + 1}`.length}ch` } }, displayValue)), this.state._variant == 'bar' && hAsync("div", { key: 'ae0e71db447b5f49db88ccddb143975883a9ae41', class: "kol-progress__bar-unit" }, this.state._unit)), hAsync("progress", { key: 'dfad86c10b981a615481c51f15f54217a2f65f62', class: "visually-hidden", "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: '751c3a8f4cb2d0b7bd99da19ee91c94975df4cbe', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, isPercentage ? `${liveProgressValue} %` : `${liveProgressValue} von ${this.state._max} ${this.state._unit}`)));
|
|
23111
22957
|
}
|
|
23112
22958
|
validateLabel(value) {
|
|
23113
22959
|
validateLabel(this, value);
|
|
@@ -23140,6 +22986,7 @@ class KolProcess {
|
|
|
23140
22986
|
this.validateUnit(this._unit);
|
|
23141
22987
|
this.validateValue(this._value);
|
|
23142
22988
|
this.validateVariant(this._variant);
|
|
22989
|
+
this.state = Object.assign(Object.assign({}, this.state), { _liveValue: this.state._value });
|
|
23143
22990
|
this.interval = setInterval(() => {
|
|
23144
22991
|
if (this.state._liveValue !== this.state._value) {
|
|
23145
22992
|
this.state = Object.assign(Object.assign({}, this.state), { _liveValue: this.state._value });
|
|
@@ -23216,7 +23063,7 @@ class KolQuote {
|
|
|
23216
23063
|
}
|
|
23217
23064
|
render() {
|
|
23218
23065
|
const hasExpertSlot = showExpertSlot(this.state._quote);
|
|
23219
|
-
return (hAsync("figure", { key: '
|
|
23066
|
+
return (hAsync("figure", { key: 'f07eb04f1dbb792992f4e6420d60f448c0379400', 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: '5267c180d2ff61707c24ea4a3124ecc27d98a59c', class: "kol-quote__figcaption" }, hAsync("cite", { key: '5d883772dfc3da26bdc453952e9cb699409431a8', class: "kol-quote__cite" }, hAsync(KolLinkTag, { key: 'fb6da781ed5f1a302a576cba3a33780e93fe4fbf', _href: this.state._href, _label: this.state._label, _target: "_blank" }))))));
|
|
23220
23067
|
}
|
|
23221
23068
|
static get watchers() { return {
|
|
23222
23069
|
"_label": ["validateLabel"],
|
|
@@ -23334,7 +23181,7 @@ const NativeOptionFc = (_a) => {
|
|
|
23334
23181
|
return (hAsync("option", Object.assign({ class: clsx(`${baseClassName}__option`, {
|
|
23335
23182
|
[`${baseClassName}__option--selected`]: isSelected,
|
|
23336
23183
|
[`${baseClassName}__option--disabled`]: disabled,
|
|
23337
|
-
}, classNames), selected: isSelected, disabled: disabled, value: index || value }, other), label));
|
|
23184
|
+
}, classNames), selected: isSelected, disabled: disabled, "aria-hidden": disabled ? 'true' : undefined, value: index || value }, other), label));
|
|
23338
23185
|
};
|
|
23339
23186
|
var NativeOptionFc$1 = NativeOptionFc;
|
|
23340
23187
|
|
|
@@ -23362,7 +23209,7 @@ var NativeOptionListFc$1 = NativeOptionListFc;
|
|
|
23362
23209
|
|
|
23363
23210
|
const NativeSelectFc = (props) => {
|
|
23364
23211
|
const { class: classNames, msg, touched, disabled, required, options, value, OptionProps, OptionGroupProps, ariaDescribedBy, hideLabel, label } = props, other = __rest(props, ["class", "msg", "touched", "disabled", "required", "options", "value", "OptionProps", "OptionGroupProps", "ariaDescribedBy", "hideLabel", "label"]);
|
|
23365
|
-
const showMsg =
|
|
23212
|
+
const showMsg = checkHasMsg(msg, touched);
|
|
23366
23213
|
const stateCssClasses = {
|
|
23367
23214
|
['kol-select--disabled']: Boolean(disabled),
|
|
23368
23215
|
['kol-select--required']: Boolean(required),
|
|
@@ -23401,7 +23248,7 @@ const SelectStateWrapper = (_a) => {
|
|
|
23401
23248
|
};
|
|
23402
23249
|
var KolSelectStateWrapperFc = SelectStateWrapper;
|
|
23403
23250
|
|
|
23404
|
-
const defaultStyleCss$d = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
23251
|
+
const defaultStyleCss$d = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\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 place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}\n@layer kol-component {\n .kol-input-container {\n align-items: center;\n background-color: white;\n cursor: pointer;\n display: grid;\n grid-template-columns: 1fr;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\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}\n@layer kol-component {\n .kol-select {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n cursor: pointer;\n width: 100%;\n /* needed hack for vertical alignment */\n }\n .kol-select:not([multiple], [size]) {\n height: 2.75em;\n }\n .kol-select:focus {\n outline: none;\n }\n .kol-select__option:checked::before {\n content: \"✓ \";\n }\n .kol-select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}";
|
|
23405
23252
|
var KolSelectDefaultStyle0 = defaultStyleCss$d;
|
|
23406
23253
|
|
|
23407
23254
|
class KolSelect {
|
|
@@ -23433,13 +23280,13 @@ class KolSelect {
|
|
|
23433
23280
|
} });
|
|
23434
23281
|
}
|
|
23435
23282
|
render() {
|
|
23436
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
23283
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'd3054533a7a846b4d8d1f305065e6f07783712b0' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '517e617d9640f588d73f66bc29fe2756e47a5691', state: this.state }, hAsync("form", { key: '8098561b7d31c6207b042d3791c648689b178cbe', onSubmit: (event) => {
|
|
23437
23284
|
event.preventDefault();
|
|
23438
23285
|
propagateSubmitEventToForm({
|
|
23439
23286
|
form: this.host,
|
|
23440
23287
|
ref: this.selectRef,
|
|
23441
23288
|
});
|
|
23442
|
-
} }, hAsync("input", { key: '
|
|
23289
|
+
} }, hAsync("input", { key: '3bac2e05597048d5967abda5517b284d537011f5', type: "submit", hidden: true }), hAsync(KolSelectStateWrapperFc, Object.assign({ key: '61e0ed903b7dfa734013104279fe3d015abb94ae' }, this.getSelectProps()))))));
|
|
23443
23290
|
}
|
|
23444
23291
|
constructor(hostRef) {
|
|
23445
23292
|
registerInstance(this, hostRef);
|
|
@@ -23650,21 +23497,25 @@ class SingleSelectController extends InputIconController {
|
|
|
23650
23497
|
watchBoolean(this.component, '_required', value);
|
|
23651
23498
|
}
|
|
23652
23499
|
validateValue(value) {
|
|
23653
|
-
|
|
23500
|
+
watchValidator(this.component, '_value', (v) => v !== undefined, new Set([`StencilUnknown`]), value);
|
|
23654
23501
|
}
|
|
23655
23502
|
validatePlaceholder(value) {
|
|
23656
23503
|
watchString(this.component, '_placeholder', value);
|
|
23657
23504
|
}
|
|
23505
|
+
validateHideClearButton(value) {
|
|
23506
|
+
watchBoolean(this.component, '_hideClearButton', value);
|
|
23507
|
+
}
|
|
23658
23508
|
componentWillLoad() {
|
|
23659
23509
|
super.componentWillLoad();
|
|
23660
23510
|
this.validateOptions(this.component._options);
|
|
23661
23511
|
this.validateRequired(this.component._required);
|
|
23662
23512
|
this.validateValue(this.component._value);
|
|
23663
23513
|
this.validatePlaceholder(this.component._placeholder);
|
|
23514
|
+
this.validateHideClearButton(this.component._hideClearButton);
|
|
23664
23515
|
}
|
|
23665
23516
|
}
|
|
23666
23517
|
|
|
23667
|
-
const defaultStyleCss$c = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
23518
|
+
const defaultStyleCss$c = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\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 place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-custom-suggestions-option {\n cursor: pointer;\n white-space: normal;\n overflow-wrap: break-word;\n word-wrap: break-word;\n line-height: 1.5;\n box-sizing: border-box;\n }\n .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n cursor: none !important;\n }\n}\n@layer kol-component {\n .kol-custom-suggestions-options-group {\n display: block;\n position: absolute;\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 2;\n background-color: white;\n max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-custom-suggestions-toggle {\n align-items: center;\n cursor: pointer;\n display: flex;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}\n@layer kol-component {\n .kol-input-container {\n align-items: center;\n background-color: white;\n cursor: pointer;\n display: grid;\n grid-template-columns: 1fr;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\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}\n@layer kol-component {\n .kol-input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input:focus {\n outline: none;\n }\n}\n@layer kol-component {\n .kol-single-select__no-results-message {\n cursor: default;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
23668
23519
|
var KolSingleSelectDefaultStyle0 = defaultStyleCss$c;
|
|
23669
23520
|
|
|
23670
23521
|
class KolSingleSelect {
|
|
@@ -23693,15 +23544,15 @@ class KolSingleSelect {
|
|
|
23693
23544
|
this._value = emptyValue;
|
|
23694
23545
|
this._inputValue = emptyValue;
|
|
23695
23546
|
this._filteredOptions = [...this.state._options];
|
|
23696
|
-
this.controller.onFacade.onInput(new
|
|
23697
|
-
this.controller.onFacade.onChange(new
|
|
23547
|
+
this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: emptyValue } }), true, emptyValue);
|
|
23548
|
+
this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: emptyValue } }), emptyValue);
|
|
23698
23549
|
}
|
|
23699
23550
|
}
|
|
23700
|
-
selectOption(
|
|
23551
|
+
selectOption(option) {
|
|
23701
23552
|
this._value = option.value;
|
|
23702
23553
|
this._inputValue = option.label;
|
|
23703
|
-
this.controller.onFacade.onInput(
|
|
23704
|
-
this.controller.onFacade.onChange(
|
|
23554
|
+
this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: option.value } }), false, option.value);
|
|
23555
|
+
this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: option.value } }), option.value);
|
|
23705
23556
|
this._filteredOptions = [...this.state._options];
|
|
23706
23557
|
this.controller.setFormAssociatedValue(this._value);
|
|
23707
23558
|
}
|
|
@@ -23778,16 +23629,16 @@ class KolSingleSelect {
|
|
|
23778
23629
|
} });
|
|
23779
23630
|
}
|
|
23780
23631
|
render() {
|
|
23781
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
23632
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '8e5be7b1cf05e0d6fbcde06221f8693eaac0a636' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'c3aa7b6a99ebe12025c867c1ec9cddc219c58b9c', state: this.state }, hAsync("div", { key: '7c5da425cb8a73ba1a40de5dbb0349c69c1f6d40', class: "kol-single-select__group" }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'de63fe6633398b7482eac608e2077e76a6f03509' }, this.getInputProps())), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: 'fe76fca42a3f3eaa060e00ec7f4ba408a2a1b2ca', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
|
|
23782
23633
|
var _a;
|
|
23783
23634
|
this.clearSelection();
|
|
23784
23635
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23785
|
-
}, class: "kol-single-select__delete" })), hAsync(CustomSuggestionsToggleFc$1, { key: '
|
|
23636
|
+
}, class: "kol-single-select__delete" })), hAsync(CustomSuggestionsToggleFc$1, { key: '0a9a9747e69bbdbd2826e85416e2ee0b4abb58d1', onClick: this.toggleListbox.bind(this), disabled: this.state._disabled })), this._isOpen && !(this.state._disabled === true) && (hAsync(CustomSuggestionsOptionsGroupFc$1, { key: '8df5c1c1c845feed7ed177ac0cfaba95a3591fa7', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc$1, { index: index, option: option.label, ref: (el) => {
|
|
23786
23637
|
if (el)
|
|
23787
23638
|
this.refOptions[index] = el;
|
|
23788
23639
|
}, selected: this._value === option.value, onClick: (event) => {
|
|
23789
23640
|
var _a;
|
|
23790
|
-
this.selectOption(
|
|
23641
|
+
this.selectOption(option);
|
|
23791
23642
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23792
23643
|
this.toggleListbox(event);
|
|
23793
23644
|
}, onMouseOver: () => {
|
|
@@ -23801,7 +23652,7 @@ class KolSingleSelect {
|
|
|
23801
23652
|
}, onKeyDown: (e) => {
|
|
23802
23653
|
var _a;
|
|
23803
23654
|
if (e.key === 'Enter' || e.key === 'NumpadEnter') {
|
|
23804
|
-
this.selectOption(
|
|
23655
|
+
this.selectOption(option);
|
|
23805
23656
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23806
23657
|
this.toggleListbox(e);
|
|
23807
23658
|
e.preventDefault();
|
|
@@ -23859,7 +23710,7 @@ class KolSingleSelect {
|
|
|
23859
23710
|
case ' ': {
|
|
23860
23711
|
if (this._isOpen) {
|
|
23861
23712
|
if (Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0) {
|
|
23862
|
-
this.selectOption(
|
|
23713
|
+
this.selectOption(this._filteredOptions[this._focusedOptionIndex]);
|
|
23863
23714
|
(_b = this.refInput) === null || _b === void 0 ? void 0 : _b.focus();
|
|
23864
23715
|
handleEvent(false);
|
|
23865
23716
|
}
|
|
@@ -23949,15 +23800,16 @@ class KolSingleSelect {
|
|
|
23949
23800
|
this._required = false;
|
|
23950
23801
|
this._shortKey = undefined;
|
|
23951
23802
|
this._syncValueBySelector = undefined;
|
|
23952
|
-
this._tabIndex = undefined;
|
|
23953
23803
|
this._tooltipAlign = 'top';
|
|
23954
23804
|
this._touched = false;
|
|
23955
23805
|
this._value = undefined;
|
|
23806
|
+
this._hideClearButton = false;
|
|
23956
23807
|
this.state = {
|
|
23957
23808
|
_hideMsg: false,
|
|
23958
23809
|
_id: `id-${nonce()}`,
|
|
23959
23810
|
_label: '',
|
|
23960
23811
|
_options: [],
|
|
23812
|
+
_hideClearButton: false,
|
|
23961
23813
|
};
|
|
23962
23814
|
this.inputHasFocus = false;
|
|
23963
23815
|
this.controller = new SingleSelectController(this, 'single-select', this.host);
|
|
@@ -24015,9 +23867,6 @@ class KolSingleSelect {
|
|
|
24015
23867
|
validateSyncValueBySelector(value) {
|
|
24016
23868
|
this.controller.validateSyncValueBySelector(value);
|
|
24017
23869
|
}
|
|
24018
|
-
validateTabIndex(value) {
|
|
24019
|
-
this.controller.validateTabIndex(value);
|
|
24020
|
-
}
|
|
24021
23870
|
validateTouched(value) {
|
|
24022
23871
|
this.controller.validateTouched(value);
|
|
24023
23872
|
}
|
|
@@ -24026,13 +23875,16 @@ class KolSingleSelect {
|
|
|
24026
23875
|
this.oldValue = value;
|
|
24027
23876
|
this.updateInputValue(value);
|
|
24028
23877
|
}
|
|
23878
|
+
validateHideClearButton(value) {
|
|
23879
|
+
this.controller.validateHideClearButton(value);
|
|
23880
|
+
}
|
|
24029
23881
|
handleMouseEvent() {
|
|
24030
23882
|
this.blockSuggestionMouseOver = false;
|
|
24031
23883
|
}
|
|
24032
23884
|
updateInputValue(value) {
|
|
24033
23885
|
if (Array.isArray(this._options)) {
|
|
24034
23886
|
const matchedOption = this._options.find((option) => option.value === value);
|
|
24035
|
-
this._inputValue = matchedOption ? matchedOption.label : '';
|
|
23887
|
+
this._inputValue = matchedOption ? String(matchedOption.label) : '';
|
|
24036
23888
|
}
|
|
24037
23889
|
}
|
|
24038
23890
|
componentWillLoad() {
|
|
@@ -24075,9 +23927,9 @@ class KolSingleSelect {
|
|
|
24075
23927
|
"_required": ["validateRequired"],
|
|
24076
23928
|
"_shortKey": ["validateShortKey"],
|
|
24077
23929
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
24078
|
-
"_tabIndex": ["validateTabIndex"],
|
|
24079
23930
|
"_touched": ["validateTouched"],
|
|
24080
|
-
"_value": ["validateValue"]
|
|
23931
|
+
"_value": ["validateValue"],
|
|
23932
|
+
"_hideClearButton ": ["validateHideClearButton"]
|
|
24081
23933
|
}; }
|
|
24082
23934
|
static get style() { return {
|
|
24083
23935
|
default: KolSingleSelectDefaultStyle0
|
|
@@ -24102,10 +23954,10 @@ class KolSingleSelect {
|
|
|
24102
23954
|
"_required": [4],
|
|
24103
23955
|
"_shortKey": [1, "_short-key"],
|
|
24104
23956
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
24105
|
-
"_tabIndex": [2, "_tab-index"],
|
|
24106
23957
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
24107
23958
|
"_touched": [1540],
|
|
24108
|
-
"_value": [
|
|
23959
|
+
"_value": [1544],
|
|
23960
|
+
"_hideClearButton": [4, "_hide-clear-button"],
|
|
24109
23961
|
"_isOpen": [32],
|
|
24110
23962
|
"_filteredOptions": [32],
|
|
24111
23963
|
"_inputValue": [32],
|
|
@@ -24135,7 +23987,7 @@ class KolSkipNav {
|
|
|
24135
23987
|
};
|
|
24136
23988
|
}
|
|
24137
23989
|
render() {
|
|
24138
|
-
return (hAsync("nav", { key: '
|
|
23990
|
+
return (hAsync("nav", { key: '7badd7161e104a4a34438f5fcd0df57e2551be48', class: "kol-skip-nav", "aria-label": this.state._label }, hAsync("ul", { key: 'a0b0df6095bf210d86194e39867da48c15c84f6f', class: "kol-skip-nav__list" }, this.state._links.map((link, index) => {
|
|
24139
23991
|
return (hAsync("li", { class: "kol-skip-nav__list-item", key: index }, hAsync(KolLinkWcTag, Object.assign({}, link))));
|
|
24140
23992
|
}))));
|
|
24141
23993
|
}
|
|
@@ -24203,7 +24055,7 @@ class KolSpin {
|
|
|
24203
24055
|
};
|
|
24204
24056
|
}
|
|
24205
24057
|
render() {
|
|
24206
|
-
return (hAsync(Host, { key: '
|
|
24058
|
+
return (hAsync(Host, { key: 'e7f061ad2797ab70fd472969c95271389b7566dc', class: "kol-spin" }, this.state._show ? (hAsync("span", { "aria-busy": "true", "aria-label": translate('kol-action-running'), "aria-live": "polite", class: clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`), role: "alert" }, renderSpin(this.state._variant))) : (this.showToggled && hAsync("span", { "aria-label": translate('kol-action-done'), "aria-busy": "false", "aria-live": "polite", role: "alert" }))));
|
|
24207
24059
|
}
|
|
24208
24060
|
validateShow(value) {
|
|
24209
24061
|
this.showToggled = this.state._show === true && this._show === false;
|
|
@@ -24237,7 +24089,7 @@ class KolSpin {
|
|
|
24237
24089
|
}; }
|
|
24238
24090
|
}
|
|
24239
24091
|
|
|
24240
|
-
const defaultStyleCss$9 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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-popover {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n height: 0;\n position: absolute;\n }\n .kol-popover__content {\n background-color: #fff;\n min-height: max-content;\n min-width: max-content;\n opacity: 0;\n position: absolute;\n }\n .kol-popover__content--visible {\n animation: 0.3s ease-in forwards fadeInOpacity;\n }\n .kol-popover__content--disappear {\n animation: 0.3s ease-in backwards fadeInOpacity;\n }\n .kol-popover__arrow {\n background-color: inherit;\n height: var(--font-size);\n position: absolute;\n rotate: 0.125turn;\n width: var(--font-size);\n z-index: -1;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
24092
|
+
const defaultStyleCss$9 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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-popover {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n height: 0;\n position: absolute;\n }\n .kol-popover__content {\n background-color: #fff;\n min-height: max-content;\n min-width: max-content;\n opacity: 0;\n position: absolute;\n }\n .kol-popover__content--visible {\n animation: 0.3s ease-in forwards fadeInOpacity;\n }\n .kol-popover__content--disappear {\n animation: 0.3s ease-in backwards fadeInOpacity;\n }\n .kol-popover__arrow {\n background-color: inherit;\n height: var(--font-size);\n position: absolute;\n rotate: 0.125turn;\n width: var(--font-size);\n z-index: -1;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-split-button {\n display: flex;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .kol-split-button__root {\n display: flex;\n position: relative;\n }\n .kol-split-button__button {\n flex-grow: 1;\n text-align: left;\n }\n .kol-split-button .kol-popover__content {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-split-button .kol-popover__arrow {\n display: none;\n }\n}";
|
|
24241
24093
|
var KolSplitButtonDefaultStyle0 = defaultStyleCss$9;
|
|
24242
24094
|
|
|
24243
24095
|
class KolSplitButton {
|
|
@@ -24280,7 +24132,6 @@ class KolSplitButton {
|
|
|
24280
24132
|
this._on = undefined;
|
|
24281
24133
|
this._role = undefined;
|
|
24282
24134
|
this._syncValueBySelector = undefined;
|
|
24283
|
-
this._tabIndex = undefined;
|
|
24284
24135
|
this._tooltipAlign = 'top';
|
|
24285
24136
|
this._type = 'button';
|
|
24286
24137
|
this._value = undefined;
|
|
@@ -24291,10 +24142,10 @@ class KolSplitButton {
|
|
|
24291
24142
|
}
|
|
24292
24143
|
render() {
|
|
24293
24144
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
24294
|
-
return (hAsync("div", { key: '
|
|
24145
|
+
return (hAsync("div", { key: '8664ae7759dd4cb7d8c5477d20ab215ee97c818e', class: "kol-split-button" }, hAsync("div", { key: '845da58929b4ae57bf7c669bdbd075e9c54c5b25', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: '3baa6c9734b6fad135ac3fe356456a64604303b7', class: clsx('kol-split-button__button', {
|
|
24295
24146
|
[this._variant]: this._variant !== 'custom',
|
|
24296
24147
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
24297
|
-
}), _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _role: this._role, _syncValueBySelector: this._syncValueBySelector,
|
|
24148
|
+
}), _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: '69977b0689cc052c17ba02c8318123c22aa7f714', class: "kol-split-button__horizontal-line" }), hAsync(KolButtonWcTag, { key: 'b68d4897bd234cf268036f26aecdffde859b0406', class: "kol-split-button__secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler })), hAsync(KolPopoverWcTag, { key: '46e3f5ebfe9e81c0228918441c8da74af810b607', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: '11e9744c98e4ff6433df16437b4336a5616342f5' }))));
|
|
24298
24149
|
}
|
|
24299
24150
|
async closePopup() {
|
|
24300
24151
|
this.handleOnClose();
|
|
@@ -24321,7 +24172,6 @@ class KolSplitButton {
|
|
|
24321
24172
|
"_on": [16],
|
|
24322
24173
|
"_role": [1],
|
|
24323
24174
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
24324
|
-
"_tabIndex": [2, "_tab-index"],
|
|
24325
24175
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
24326
24176
|
"_type": [1],
|
|
24327
24177
|
"_value": [8],
|
|
@@ -24372,7 +24222,7 @@ var KeyboardKey;
|
|
|
24372
24222
|
KeyboardKey["Space"] = " ";
|
|
24373
24223
|
})(KeyboardKey || (KeyboardKey = {}));
|
|
24374
24224
|
|
|
24375
|
-
const defaultStyleCss$8 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
24225
|
+
const defaultStyleCss$8 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-table {\n display: block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n }\n .kol-table__table {\n width: 100%;\n }\n .kol-table__caption {\n text-align: start;\n }\n .kol-table__focus-element {\n font-size: 0;\n }\n .kol-table__focus-element:focus {\n outline: 0 !important;\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n .kol-table__sort-button .kol-button {\n color: inherit;\n }\n .kol-table__body {\n text-align: left;\n }\n .kol-table__body .kol-button__text {\n justify-items: start;\n }\n .kol-table__cell--align-left {\n text-align: left;\n }\n .kol-table__cell--align-left .kol-button__text {\n justify-items: start;\n }\n .kol-table__cell--align-center {\n text-align: center;\n }\n .kol-table__cell--align-center .kol-button__text {\n justify-items: center;\n }\n .kol-table__cell--align-right {\n text-align: right;\n }\n .kol-table__cell--align-right .kol-button__text {\n justify-items: end;\n }\n .kol-table__cell--selection {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection-label {\n align-items: center;\n cursor: pointer;\n display: flex;\n height: var(--a11y-min-size);\n justify-content: center;\n position: relative;\n width: var(--a11y-min-size);\n }\n .kol-table__selection-label--disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-icon {\n display: block;\n inset: auto;\n position: absolute;\n z-index: 1;\n }\n .kol-table__selection-input {\n appearance: none;\n border-style: solid;\n cursor: pointer;\n margin: 0;\n }\n .kol-table__selection-input:disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-input:before {\n content: \"\";\n }\n .kol-table__selection-input--checkbox {\n position: relative;\n display: flex;\n height: calc(var(--a11y-min-size) / 2);\n width: calc(var(--a11y-min-size) / 2);\n align-items: center;\n justify-content: center;\n background-color: rgb(255, 255, 255);\n border-width: 2px;\n line-height: 1.5;\n transition: all 0.5s ease 0s;\n }\n .kol-table__selection-input--radio {\n display: flex;\n border-width: 2px;\n border-radius: 100%;\n height: 1.5em;\n min-height: 1.5em;\n min-width: 1.5em;\n padding: 0;\n width: 1.5em;\n }\n .kol-table__selection-input--radio:before {\n border-radius: 100%;\n margin: auto;\n height: 0.75em;\n width: 0.75em;\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .kol-table__selection-input--radio:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n display: grid;\n place-items: center;\n }\n @media (min-width: 1024px) {\n .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n grid-auto-flow: column;\n }\n }\n .kol-pagination {\n display: flex;\n flex-wrap: wrap;\n }\n @media (min-width: 1024px) {\n .kol-pagination {\n display: flex;\n }\n }\n @media (max-width: 1024px) {\n .kol-pagination {\n flex-direction: column;\n }\n }\n}";
|
|
24376
24226
|
var KolTableStatefulDefaultStyle0 = defaultStyleCss$8;
|
|
24377
24227
|
|
|
24378
24228
|
const PAGINATION_OPTIONS = [10, 20, 50, 100];
|
|
@@ -24698,7 +24548,7 @@ class KolTableStateful {
|
|
|
24698
24548
|
horizontal: (_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) })))),
|
|
24699
24549
|
vertical: (_d = this.state._headers.vertical) === null || _d === void 0 ? void 0 : _d.map((column) => column.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) })))),
|
|
24700
24550
|
};
|
|
24701
|
-
return (hAsync(Host, { key: '
|
|
24551
|
+
return (hAsync(Host, { key: '918c775559ae9b707dbdfff227cf41a91e15a5c9', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: '78afe40143ab93577d9d19d111768a4874d4475b', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
|
|
24702
24552
|
onSort: (_, payload) => {
|
|
24703
24553
|
this.handleSort(payload);
|
|
24704
24554
|
},
|
|
@@ -24746,7 +24596,7 @@ class KolTableStateful {
|
|
|
24746
24596
|
}; }
|
|
24747
24597
|
}
|
|
24748
24598
|
|
|
24749
|
-
const defaultStyleCss$7 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
24599
|
+
const defaultStyleCss$7 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-table {\n display: block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n }\n .kol-table__table {\n width: 100%;\n }\n .kol-table__caption {\n text-align: start;\n }\n .kol-table__focus-element {\n font-size: 0;\n }\n .kol-table__focus-element:focus {\n outline: 0 !important;\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n .kol-table__sort-button .kol-button {\n color: inherit;\n }\n .kol-table__body {\n text-align: left;\n }\n .kol-table__body .kol-button__text {\n justify-items: start;\n }\n .kol-table__cell--align-left {\n text-align: left;\n }\n .kol-table__cell--align-left .kol-button__text {\n justify-items: start;\n }\n .kol-table__cell--align-center {\n text-align: center;\n }\n .kol-table__cell--align-center .kol-button__text {\n justify-items: center;\n }\n .kol-table__cell--align-right {\n text-align: right;\n }\n .kol-table__cell--align-right .kol-button__text {\n justify-items: end;\n }\n .kol-table__cell--selection {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .kol-table__spacer {\n display: none;\n }\n .kol-table__selection-label {\n align-items: center;\n cursor: pointer;\n display: flex;\n height: var(--a11y-min-size);\n justify-content: center;\n position: relative;\n width: var(--a11y-min-size);\n }\n .kol-table__selection-label--disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-icon {\n display: block;\n inset: auto;\n position: absolute;\n z-index: 1;\n }\n .kol-table__selection-input {\n appearance: none;\n border-style: solid;\n cursor: pointer;\n margin: 0;\n }\n .kol-table__selection-input:disabled {\n cursor: not-allowed;\n }\n .kol-table__selection-input:before {\n content: \"\";\n }\n .kol-table__selection-input--checkbox {\n position: relative;\n display: flex;\n height: calc(var(--a11y-min-size) / 2);\n width: calc(var(--a11y-min-size) / 2);\n align-items: center;\n justify-content: center;\n background-color: rgb(255, 255, 255);\n border-width: 2px;\n line-height: 1.5;\n transition: all 0.5s ease 0s;\n }\n .kol-table__selection-input--radio {\n display: flex;\n border-width: 2px;\n border-radius: 100%;\n height: 1.5em;\n min-height: 1.5em;\n min-width: 1.5em;\n padding: 0;\n width: 1.5em;\n }\n .kol-table__selection-input--radio:before {\n border-radius: 100%;\n margin: auto;\n height: 0.75em;\n width: 0.75em;\n }\n .kol-table__selection-input--radio:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .kol-table__selection-input--radio:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n}";
|
|
24750
24600
|
var KolTableStatelessDefaultStyle0 = defaultStyleCss$7;
|
|
24751
24601
|
|
|
24752
24602
|
class KolTableStateless$1 {
|
|
@@ -24761,7 +24611,7 @@ class KolTableStateless$1 {
|
|
|
24761
24611
|
this._selection = undefined;
|
|
24762
24612
|
}
|
|
24763
24613
|
render() {
|
|
24764
|
-
return (hAsync(KolTableStatelessWcTag, { key: '
|
|
24614
|
+
return (hAsync(KolTableStatelessWcTag, { key: 'eb182937b833b381bd5bcdaa991456dd13d1e1a7', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection }));
|
|
24765
24615
|
}
|
|
24766
24616
|
static get style() { return {
|
|
24767
24617
|
default: KolTableStatelessDefaultStyle0
|
|
@@ -25111,21 +24961,25 @@ class KolTableStateless {
|
|
|
25111
24961
|
const selection = this.state._selection;
|
|
25112
24962
|
if (!selection)
|
|
25113
24963
|
return '';
|
|
25114
|
-
const keyPropertyName = (
|
|
25115
|
-
const firstCellData = (
|
|
24964
|
+
const keyPropertyName = this.getSelectionKeyPropertyName();
|
|
24965
|
+
const firstCellData = (_a = row[0]) === null || _a === void 0 ? void 0 : _a.data;
|
|
25116
24966
|
if (!firstCellData)
|
|
25117
24967
|
return '';
|
|
25118
24968
|
const keyProperty = firstCellData[keyPropertyName];
|
|
25119
24969
|
const isMultiple = selection.multiple || selection.multiple === undefined;
|
|
25120
|
-
const selected = (
|
|
24970
|
+
const selected = (_b = selection === null || selection === void 0 ? void 0 : selection.selectedKeys) === null || _b === void 0 ? void 0 : _b.includes(keyProperty);
|
|
24971
|
+
const disabled = (_c = selection === null || selection === void 0 ? void 0 : selection.disabledKeys) === null || _c === void 0 ? void 0 : _c.includes(keyProperty);
|
|
25121
24972
|
const label = selection.label(firstCellData);
|
|
25122
24973
|
const props = {
|
|
25123
24974
|
name: 'selection',
|
|
25124
24975
|
checked: selected,
|
|
24976
|
+
disabled,
|
|
25125
24977
|
id: keyProperty,
|
|
25126
24978
|
['aria-label']: label,
|
|
25127
24979
|
};
|
|
25128
|
-
return (hAsync("td", { key: `tbody-${rowIndex}-selection`, class: "kol-table__cell kol-table__cell--selection" }, hAsync("div", { class: clsx('kol-table__selection', { 'kol-table__selection--checked': selected }) }, isMultiple ? (hAsync("label", { class:
|
|
24980
|
+
return (hAsync("td", { key: `tbody-${rowIndex}-selection`, class: "kol-table__cell kol-table__cell--selection" }, hAsync("div", { class: clsx('kol-table__selection', { 'kol-table__selection--checked': selected }) }, isMultiple ? (hAsync("label", { class: clsx('kol-table__selection-label', {
|
|
24981
|
+
'kol-table__selection-label--disabled': disabled,
|
|
24982
|
+
}) }, hAsync(KolIconTag, { class: "kol-table__selection-icon", _icons: `codicon ${selected ? 'codicon-check' : ''}`, _label: "" }), hAsync("input", Object.assign({ class: clsx('kol-table__selection-input kol-table__selection-input--checkbox'), ref: (el) => el && this.checkboxRefs.push(el) }, props, { type: "checkbox", onInput: (event) => {
|
|
25129
24983
|
var _a, _b;
|
|
25130
24984
|
const updatedSelectedKeys = !selected
|
|
25131
24985
|
? [...((_a = selection === null || selection === void 0 ? void 0 : selection.selectedKeys) !== null && _a !== void 0 ? _a : []), keyProperty]
|
|
@@ -25135,14 +24989,38 @@ class KolTableStateless {
|
|
|
25135
24989
|
this.handleSelectionChangeCallbackAndEvent(event, keyProperty);
|
|
25136
24990
|
} })))), hAsync(KolTooltipWcTag, { "aria-hidden": "true", class: "kol-table__selection-input-tooltip", _align: "right", _id: `${keyProperty}-label`, _label: label }))));
|
|
25137
24991
|
}
|
|
24992
|
+
getSelectionKeyPropertyName() {
|
|
24993
|
+
var _a, _b;
|
|
24994
|
+
return (_b = (_a = this.state._selection) === null || _a === void 0 ? void 0 : _a.keyPropertyName) !== null && _b !== void 0 ? _b : 'id';
|
|
24995
|
+
}
|
|
24996
|
+
getDataWithSelectionEnabled() {
|
|
24997
|
+
const keyPropertyName = this.getSelectionKeyPropertyName();
|
|
24998
|
+
return this.state._data.filter((item) => { var _a, _b; return !((_b = (_a = this.state._selection) === null || _a === void 0 ? void 0 : _a.disabledKeys) === null || _b === void 0 ? void 0 : _b.includes(item[keyPropertyName])); });
|
|
24999
|
+
}
|
|
25000
|
+
getSelectedKeysWithoutDisabledKeys() {
|
|
25001
|
+
var _a, _b;
|
|
25002
|
+
return (_b = (_a = this.state._selection) === null || _a === void 0 ? void 0 : _a.selectedKeys) === null || _b === void 0 ? void 0 : _b.filter((key) => { var _a, _b; return !((_b = (_a = this.state._selection) === null || _a === void 0 ? void 0 : _a.disabledKeys) === null || _b === void 0 ? void 0 : _b.includes(key)); });
|
|
25003
|
+
}
|
|
25004
|
+
getSelectedKeysWithDisabledKeysOnly() {
|
|
25005
|
+
var _a, _b;
|
|
25006
|
+
return (_b = (_a = this.state._selection) === null || _a === void 0 ? void 0 : _a.selectedKeys) === null || _b === void 0 ? void 0 : _b.filter((key) => { var _a, _b; return (_b = (_a = this.state._selection) === null || _a === void 0 ? void 0 : _a.disabledKeys) === null || _b === void 0 ? void 0 : _b.includes(key); });
|
|
25007
|
+
}
|
|
25008
|
+
getRevertedSelection(selectAll) {
|
|
25009
|
+
var _a;
|
|
25010
|
+
const keyPropertyName = this.getSelectionKeyPropertyName();
|
|
25011
|
+
const selection = (_a = this.getSelectedKeysWithDisabledKeysOnly()) !== null && _a !== void 0 ? _a : [];
|
|
25012
|
+
if (selectAll) {
|
|
25013
|
+
selection.push(...this.getDataWithSelectionEnabled().map((el) => el === null || el === void 0 ? void 0 : el[keyPropertyName]));
|
|
25014
|
+
}
|
|
25015
|
+
return selection;
|
|
25016
|
+
}
|
|
25138
25017
|
renderHeadingSelectionCell() {
|
|
25139
25018
|
var _a, _b;
|
|
25140
25019
|
const selection = this.state._selection;
|
|
25141
25020
|
if (!selection || (!selection.multiple && selection.multiple !== undefined))
|
|
25142
25021
|
return hAsync("th", { class: "kol-table__cell kol-table__cell--header", key: `thead-0` });
|
|
25143
|
-
const
|
|
25144
|
-
const
|
|
25145
|
-
const dataLength = this.state._data.length;
|
|
25022
|
+
const selectedKeyLength = (_b = (_a = this.getSelectedKeysWithoutDisabledKeys()) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
|
|
25023
|
+
const dataLength = this.getDataWithSelectionEnabled().length;
|
|
25146
25024
|
const isChecked = selectedKeyLength === dataLength;
|
|
25147
25025
|
const indeterminate = selectedKeyLength !== 0 && !isChecked;
|
|
25148
25026
|
let translationKey = 'kol-table-selection-indeterminate';
|
|
@@ -25156,9 +25034,8 @@ class KolTableStateless {
|
|
|
25156
25034
|
return (hAsync("th", { key: `thead-0-selection`, class: "kol-table__cell kol-table__cell--header" }, hAsync("div", { class: clsx('kol-table__selection', {
|
|
25157
25035
|
'kol-table__selection--indeterminate': indeterminate,
|
|
25158
25036
|
'kol-table__selection--checked': isChecked,
|
|
25159
|
-
}) }, hAsync("label", { class: "kol-table__selection-label" }, hAsync(KolIconTag, { class: "kol-table__selection-icon", _icons: `codicon ${indeterminate ? 'codicon-remove' : isChecked ? 'codicon-check' : ''}`, _label: "" }), hAsync("input", { class: clsx('kol-table__selection-input kol-table__selection-input--checkbox'), ref: (el) => el && this.checkboxRefs.push(el), name: "selection", checked: isChecked && !indeterminate, "aria-label": label, type: "checkbox", onInput: (event) => {
|
|
25160
|
-
|
|
25161
|
-
this.handleSelectionChangeCallbackAndEvent(event, selections);
|
|
25037
|
+
}) }, hAsync("label", { class: "kol-table__selection-label" }, hAsync(KolIconTag, { class: "kol-table__selection-icon", _icons: `codicon ${indeterminate ? 'codicon-remove' : isChecked ? 'codicon-check' : ''}`, _label: "" }), hAsync("input", { class: clsx('kol-table__selection-input kol-table__selection-input--checkbox'), "data-testid": "selection-checkbox-all", ref: (el) => el && this.checkboxRefs.push(el), name: "selection", checked: isChecked && !indeterminate, indeterminate: indeterminate, "aria-label": label, type: "checkbox", onInput: (event) => {
|
|
25038
|
+
this.handleSelectionChangeCallbackAndEvent(event, this.getRevertedSelection(!isChecked));
|
|
25162
25039
|
} })), hAsync(KolTooltipWcTag, { "aria-hidden": "true", class: "kol-table__selection-input-tooltip", _align: "right", _id: `${translationKey}-label`, _label: label }))));
|
|
25163
25040
|
}
|
|
25164
25041
|
renderHeaderTdCell() {
|
|
@@ -25227,12 +25104,12 @@ class KolTableStateless {
|
|
|
25227
25104
|
render() {
|
|
25228
25105
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
25229
25106
|
this.checkboxRefs = [];
|
|
25230
|
-
return (hAsync("div", { key: '
|
|
25107
|
+
return (hAsync("div", { key: '1ac04635486fff8f0456beb99c6b96654248f9e4', ref: (element) => (this.tableDivElement = element), class: "kol-table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: 'e4457e9e80dd358d4caffcbcc6f7990bbf36ca20', class: "kol-table__table", style: {
|
|
25231
25108
|
minWidth: this.state._minWidth,
|
|
25232
|
-
} }, hAsync("div", { key: '
|
|
25109
|
+
} }, hAsync("div", { key: '905b4322a63f51170cfcdb0b458c6b6cb129d4ad', class: "kol-table__focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: '4003583d910f3471e6d3d5bc585e83d3a2e0ec9a', class: "kol-table__caption", id: "caption" }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: 'cf7cb9cb892f50e4ba149a4c7b1c0695d23c1d62', class: "kol-table__head" }, [
|
|
25233
25110
|
this.state._headerCells.horizontal.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))))),
|
|
25234
25111
|
this.renderSpacer('head', this.state._headerCells.horizontal),
|
|
25235
|
-
])), hAsync("tbody", { key: '
|
|
25112
|
+
])), hAsync("tbody", { key: 'd83f3334e830da14222a9e44ce1682005171d755', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot())));
|
|
25236
25113
|
}
|
|
25237
25114
|
get host() { return getElement(this); }
|
|
25238
25115
|
static get watchers() { return {
|
|
@@ -25264,7 +25141,7 @@ class KolTableStateless {
|
|
|
25264
25141
|
}; }
|
|
25265
25142
|
}
|
|
25266
25143
|
|
|
25267
|
-
const defaultStyleCss$6 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
25144
|
+
const defaultStyleCss$6 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-tabs {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n display: var(--display);\n grid-template-rows: var(--grid-template-rows);\n grid-template-columns: var(--grid-template-columns);\n }\n .kol-tabs--align-right {\n --display: grid;\n --grid-template-columns: 1fr auto;\n --button-group-flex-direction: column;\n --button-group-order: 2;\n }\n .kol-tabs--align-left {\n --display: grid;\n --grid-template-columns: auto 1fr;\n --button-group-flex-direction: column;\n --button-group-order: 0;\n }\n .kol-tabs--align-bottom {\n --display: grid;\n --grid-template-rows: 1fr auto;\n --button-group-order: 2;\n }\n .kol-tabs__tabs-align-top {\n --display: grid;\n --grid-template-rows: auto 1fr;\n --button-group-order: 0;\n }\n .kol-tabs__content {\n overflow: auto;\n }\n .kol-tabs__button-group {\n display: flex;\n flex-wrap: wrap;\n flex-direction: var(--button-group-flex-direction);\n order: var(--button-group-order);\n }\n .kol-tabs__button-group .kol-button {\n border-bottom-color: transparent;\n border-bottom-style: solid;\n display: block;\n }\n .kol-tabs__panel {\n height: 100%;\n }\n}";
|
|
25268
25145
|
var KolTabsDefaultStyle0 = defaultStyleCss$6;
|
|
25269
25146
|
|
|
25270
25147
|
class KolTabs {
|
|
@@ -25368,25 +25245,40 @@ class KolTabs {
|
|
|
25368
25245
|
nextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));
|
|
25369
25246
|
}
|
|
25370
25247
|
};
|
|
25371
|
-
this.
|
|
25372
|
-
var _a, _b, _c;
|
|
25373
|
-
if (this.tabPanelHost
|
|
25374
|
-
|
|
25375
|
-
|
|
25376
|
-
|
|
25377
|
-
|
|
25378
|
-
|
|
25379
|
-
|
|
25380
|
-
|
|
25381
|
-
|
|
25382
|
-
|
|
25383
|
-
|
|
25384
|
-
|
|
25385
|
-
|
|
25386
|
-
|
|
25387
|
-
|
|
25248
|
+
this.refreshTabPanels = () => {
|
|
25249
|
+
var _a, _b, _c, _d;
|
|
25250
|
+
if (!this.tabPanelHost)
|
|
25251
|
+
return;
|
|
25252
|
+
while (this.tabPanelHost.firstChild) {
|
|
25253
|
+
this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);
|
|
25254
|
+
}
|
|
25255
|
+
for (let i = 0; i < ((_a = this.state._tabs) === null || _a === void 0 ? void 0 : _a.length); i++) {
|
|
25256
|
+
const div = document.createElement('div');
|
|
25257
|
+
div.setAttribute('aria-labelledby', `${this.state._label.replace(/\s/g, '-')}-tab-${i}`);
|
|
25258
|
+
div.setAttribute('id', `tabpanel-${i}`);
|
|
25259
|
+
div.setAttribute('role', 'tabpanel');
|
|
25260
|
+
div.setAttribute('hidden', '');
|
|
25261
|
+
const slot = document.createElement('slot');
|
|
25262
|
+
slot.setAttribute('name', `tabpanel-slot-${i}`);
|
|
25263
|
+
div.appendChild(slot);
|
|
25264
|
+
(_b = this.tabPanelHost) === null || _b === void 0 ? void 0 : _b.appendChild(div);
|
|
25265
|
+
if (typeof HTMLCollection !== 'undefined' && ((_c = this.host) === null || _c === void 0 ? void 0 : _c.children) instanceof HTMLCollection && ((_d = this.host) === null || _d === void 0 ? void 0 : _d.children[i])) {
|
|
25266
|
+
this.host.children[i].setAttribute('slot', `tabpanel-slot-${i}`);
|
|
25388
25267
|
}
|
|
25389
25268
|
}
|
|
25269
|
+
this.updateVisiblePanel();
|
|
25270
|
+
};
|
|
25271
|
+
this.updateVisiblePanel = () => {
|
|
25272
|
+
if (!this.tabPanelHost)
|
|
25273
|
+
return;
|
|
25274
|
+
Array.from(this.tabPanelHost.children).forEach((child, i) => {
|
|
25275
|
+
if (i === this.state._selected) {
|
|
25276
|
+
child.removeAttribute('hidden');
|
|
25277
|
+
}
|
|
25278
|
+
else {
|
|
25279
|
+
child.setAttribute('hidden', '');
|
|
25280
|
+
}
|
|
25281
|
+
});
|
|
25390
25282
|
};
|
|
25391
25283
|
this.onCreate = (event) => {
|
|
25392
25284
|
var _a, _b;
|
|
@@ -25453,9 +25345,9 @@ class KolTabs {
|
|
|
25453
25345
|
} }))));
|
|
25454
25346
|
}
|
|
25455
25347
|
render() {
|
|
25456
|
-
return (hAsync("div", { key: '
|
|
25348
|
+
return (hAsync("div", { key: '9ff9dfe0a05d073e21d4272052505b74386dbee9', ref: (el) => {
|
|
25457
25349
|
this.tabPanelsElement = el;
|
|
25458
|
-
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
25350
|
+
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: 'be475a72b9b037fb1ad6c6b78d05495572a917fb', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
|
|
25459
25351
|
}
|
|
25460
25352
|
validateAlign(value) {
|
|
25461
25353
|
validateAlign(this, value);
|
|
@@ -25519,6 +25411,7 @@ class KolTabs {
|
|
|
25519
25411
|
watchJsonArrayString(this, '_tabs', (item) => typeof item === 'object' && item !== null && typeof item._label === 'string' && item._label.length > 0, value, undefined, {
|
|
25520
25412
|
hooks: {
|
|
25521
25413
|
beforePatch: this.syncSelectedAndTabs,
|
|
25414
|
+
afterPatch: this.refreshTabPanels,
|
|
25522
25415
|
},
|
|
25523
25416
|
});
|
|
25524
25417
|
uiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);
|
|
@@ -25532,17 +25425,7 @@ class KolTabs {
|
|
|
25532
25425
|
this.validateBehavior(this._behavior);
|
|
25533
25426
|
}
|
|
25534
25427
|
componentDidRender() {
|
|
25535
|
-
this.
|
|
25536
|
-
if (this.tabPanelHost instanceof HTMLDivElement) {
|
|
25537
|
-
for (let i = 0; i < this.tabPanelHost.children.length; i++) {
|
|
25538
|
-
if (i !== this.state._selected) {
|
|
25539
|
-
this.tabPanelHost.children[i].setAttribute('hidden', '');
|
|
25540
|
-
}
|
|
25541
|
-
else {
|
|
25542
|
-
this.tabPanelHost.children[i].removeAttribute('hidden');
|
|
25543
|
-
}
|
|
25544
|
-
}
|
|
25545
|
-
}
|
|
25428
|
+
this.refreshTabPanels();
|
|
25546
25429
|
}
|
|
25547
25430
|
focusTabById(index) {
|
|
25548
25431
|
if (this.tabPanelsElement) {
|
|
@@ -25682,7 +25565,7 @@ class TextareaController extends InputIconController {
|
|
|
25682
25565
|
}
|
|
25683
25566
|
}
|
|
25684
25567
|
|
|
25685
|
-
const defaultStyleCss$5 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
25568
|
+
const defaultStyleCss$5 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\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 place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}\n@layer kol-component {\n .kol-input-container {\n align-items: center;\n background-color: white;\n cursor: pointer;\n display: grid;\n grid-template-columns: 1fr;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\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}\n@layer kol-component {\n .kol-textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n .kol-textarea:focus {\n outline: none;\n }\n}";
|
|
25686
25569
|
var KolTextareaDefaultStyle0 = defaultStyleCss$5;
|
|
25687
25570
|
|
|
25688
25571
|
const increaseTextareaHeight = (el) => {
|
|
@@ -25727,7 +25610,7 @@ class KolTextarea {
|
|
|
25727
25610
|
} });
|
|
25728
25611
|
}
|
|
25729
25612
|
render() {
|
|
25730
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
25613
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'e3a13e495ab24faabac001d83e45f1be38574755' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'fed37c3c3481e90d9c361722b9b063537a7b61ae', state: this.state }, hAsync(KolTextAreaStateWrapperFc, Object.assign({ key: '02f52e10e7f1cc372b01efa467170e5c87643975' }, this.getTextAreaProps())))));
|
|
25731
25614
|
}
|
|
25732
25615
|
constructor(hostRef) {
|
|
25733
25616
|
registerInstance(this, hostRef);
|
|
@@ -25767,7 +25650,6 @@ class KolTextarea {
|
|
|
25767
25650
|
this._shortKey = undefined;
|
|
25768
25651
|
this._spellCheck = undefined;
|
|
25769
25652
|
this._syncValueBySelector = undefined;
|
|
25770
|
-
this._tabIndex = undefined;
|
|
25771
25653
|
this._tooltipAlign = 'top';
|
|
25772
25654
|
this._touched = false;
|
|
25773
25655
|
this._value = undefined;
|
|
@@ -25852,9 +25734,6 @@ class KolTextarea {
|
|
|
25852
25734
|
validateSyncValueBySelector(value) {
|
|
25853
25735
|
this.controller.validateSyncValueBySelector(value);
|
|
25854
25736
|
}
|
|
25855
|
-
validateTabIndex(value) {
|
|
25856
|
-
this.controller.validateTabIndex(value);
|
|
25857
|
-
}
|
|
25858
25737
|
validateTouched(value) {
|
|
25859
25738
|
this.controller.validateTouched(value);
|
|
25860
25739
|
}
|
|
@@ -25904,7 +25783,6 @@ class KolTextarea {
|
|
|
25904
25783
|
"_shortKey": ["validateShortKey"],
|
|
25905
25784
|
"_spellCheck": ["validateSpellCheck"],
|
|
25906
25785
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
25907
|
-
"_tabIndex": ["validateTabIndex"],
|
|
25908
25786
|
"_touched": ["validateTouched"],
|
|
25909
25787
|
"_value": ["validateValue"]
|
|
25910
25788
|
}; }
|
|
@@ -25937,7 +25815,6 @@ class KolTextarea {
|
|
|
25937
25815
|
"_shortKey": [1, "_short-key"],
|
|
25938
25816
|
"_spellCheck": [4, "_spell-check"],
|
|
25939
25817
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
25940
|
-
"_tabIndex": [2, "_tab-index"],
|
|
25941
25818
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
25942
25819
|
"_touched": [1540],
|
|
25943
25820
|
"_value": [1537],
|
|
@@ -25952,7 +25829,7 @@ class KolTextarea {
|
|
|
25952
25829
|
}; }
|
|
25953
25830
|
}
|
|
25954
25831
|
|
|
25955
|
-
const defaultStyleCss$4 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.
|
|
25832
|
+
const defaultStyleCss$4 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\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 place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n :host {\n display: flex;\n flex-direction: column;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n position: fixed;\n z-index: 200;\n }\n .kol-toast-container__close-all {\n align-self: flex-end;\n }\n}";
|
|
25956
25833
|
var KolToastContainerDefaultStyle0 = defaultStyleCss$4;
|
|
25957
25834
|
|
|
25958
25835
|
const TRANSITION_TIMEOUT = 300;
|
|
@@ -26009,7 +25886,7 @@ class KolToastContainer {
|
|
|
26009
25886
|
}
|
|
26010
25887
|
}
|
|
26011
25888
|
render() {
|
|
26012
|
-
return (hAsync(Host, { key: '
|
|
25889
|
+
return (hAsync(Host, { key: '55fa134e2ab24c27732607e6d7eabe4037496ec9', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: 'e0ca6068b37ced7ef9fa67ac1d16fd1605b7e0dd', _label: translate('kol-toast-close-all'), class: "kol-toast-container__button-close-all", _on: {
|
|
26013
25890
|
onClick: () => {
|
|
26014
25891
|
void this.closeAll();
|
|
26015
25892
|
},
|
|
@@ -26032,7 +25909,7 @@ class KolToastContainer {
|
|
|
26032
25909
|
}; }
|
|
26033
25910
|
}
|
|
26034
25911
|
|
|
26035
|
-
const defaultStyleCss$3 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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-toolbar {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n display: flex;\n align-items: center;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n }\n .kol-toolbar:focus-within {\n outline: 1px solid;\n outline-offset: 2px;\n }\n}";
|
|
25912
|
+
const defaultStyleCss$3 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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 font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-toolbar {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n display: flex;\n align-items: center;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n }\n .kol-toolbar:focus-within {\n outline: 1px solid;\n outline-offset: 2px;\n }\n}";
|
|
26036
25913
|
var KolToolbarDefaultStyle0 = defaultStyleCss$3;
|
|
26037
25914
|
|
|
26038
25915
|
class KolToolbar {
|
|
@@ -26043,13 +25920,13 @@ class KolToolbar {
|
|
|
26043
25920
|
const tabIndex = index === this.currentIndex && !(element === null || element === void 0 ? void 0 : element._disabled) ? 0 : -1;
|
|
26044
25921
|
const props = {
|
|
26045
25922
|
key: index,
|
|
26046
|
-
class: 'kol-toolbar__item',
|
|
25923
|
+
class: 'button normal kol-toolbar__item',
|
|
26047
25924
|
_tabIndex: tabIndex,
|
|
26048
25925
|
};
|
|
26049
25926
|
const catchRef = (element) => {
|
|
26050
25927
|
element && this.indexToElement.set(index, element);
|
|
26051
25928
|
};
|
|
26052
|
-
return '_href' in element ? (hAsync(
|
|
25929
|
+
return '_href' in element ? (hAsync(KolLinkWcTag, Object.assign({}, element, props, { ref: catchRef }))) : (hAsync(KolButtonWcTag, Object.assign({}, element, props, { ref: catchRef })));
|
|
26053
25930
|
};
|
|
26054
25931
|
this.state = {
|
|
26055
25932
|
_label: '',
|
|
@@ -26060,7 +25937,7 @@ class KolToolbar {
|
|
|
26060
25937
|
this._items = undefined;
|
|
26061
25938
|
}
|
|
26062
25939
|
render() {
|
|
26063
|
-
return (hAsync("div", { key: '
|
|
25940
|
+
return (hAsync("div", { key: 'aab24777402d87ca0c539b44af6650f34279f3ea', class: "kol-toolbar", role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem)));
|
|
26064
25941
|
}
|
|
26065
25942
|
validateLabel(value) {
|
|
26066
25943
|
validateLabel(this, value);
|
|
@@ -26258,7 +26135,7 @@ class KolTooltipWc {
|
|
|
26258
26135
|
this.showOrHideTooltip();
|
|
26259
26136
|
}
|
|
26260
26137
|
render() {
|
|
26261
|
-
return (hAsync(Host, { key: '
|
|
26138
|
+
return (hAsync(Host, { key: 'c8923e8a3b413eebb844208f1d14cf4e6f72a8d1', class: "kol-tooltip" }, this.state._label !== '' && (hAsync("div", { key: 'e2ca8d2ca01701f66077bcd4fb5c4938184b4d99', class: "kol-tooltip__floating", ref: this.catchTooltipElement }, hAsync("div", { key: '291a7e3c3798f8c59a634f2350271d866b087dc4', class: "kol-tooltip__arrow", ref: this.catchArrowElement }), hAsync(KolSpanFc$1, { key: 'ac24958dc2afe6461addc96ae3811fe55d2aaa10', class: "kol-tooltip__content", id: this.state._id, badgeText: this._badgeText, label: this.state._label })))));
|
|
26262
26139
|
}
|
|
26263
26140
|
validateBadgeText(value) {
|
|
26264
26141
|
validateBadgeText(this, value);
|
|
@@ -26336,7 +26213,7 @@ class KolTree {
|
|
|
26336
26213
|
this._label = undefined;
|
|
26337
26214
|
}
|
|
26338
26215
|
render() {
|
|
26339
|
-
return (hAsync(KolTreeWcTag, { key: '
|
|
26216
|
+
return (hAsync(KolTreeWcTag, { key: 'd80ef53eb88006c0247391eefe6e13dbcfb06b81', _label: this._label }, hAsync("slot", { key: '7bd6fbba7b91939d863f0048a06ce2a74d4524fa' })));
|
|
26340
26217
|
}
|
|
26341
26218
|
static get style() { return {
|
|
26342
26219
|
default: KolTreeDefaultStyle0
|
|
@@ -26353,7 +26230,7 @@ class KolTree {
|
|
|
26353
26230
|
}; }
|
|
26354
26231
|
}
|
|
26355
26232
|
|
|
26356
|
-
const defaultStyleCss$1 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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-tree-item {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tree-item__link .kol-link {\n
|
|
26233
|
+
const defaultStyleCss$1 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\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 * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\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 * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: 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 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}\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 clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\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 border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 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}\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 }\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: grid;\n place-items: 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 place-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 cursor: not-allowed;\n opacity: 0.5;\n outline: none;\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-tree-item {\n --indentation: var(--tree-item-indentation, calc(10rem / var(--kolibri-root-font-size, 16)));\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tree-item__link .kol-link {\n align-items: center;\n display: inline-flex;\n min-height: var(--a11y-min-size);\n padding-left: max(var(--indentation) * var(--level) + (8rem / var(--kolibri-root-font-size, 16)), 8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tree-item__link--first-level .kol-link {\n padding-left: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tree-item__link-inner {\n display: flex;\n align-items: center;\n }\n .kol-tree-item__children {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n .kol-tree-item .kol-span {\n place-items: unset;\n }\n .kol-tree-item__toggle-button, .kol-tree-item__toggle-button-placeholder {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n display: inline-flex;\n justify-content: center;\n align-items: center;\n }\n}";
|
|
26357
26234
|
var KolTreeItemDefaultStyle0 = defaultStyleCss$1;
|
|
26358
26235
|
|
|
26359
26236
|
class KolTreeItem {
|
|
@@ -26384,7 +26261,7 @@ class KolTreeItem {
|
|
|
26384
26261
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
26385
26262
|
}
|
|
26386
26263
|
render() {
|
|
26387
|
-
return (hAsync(KolTreeItemWcTag, { key: '
|
|
26264
|
+
return (hAsync(KolTreeItemWcTag, { key: '3032a3d111e3e5e128780afc16db7ff73fa9d4c4', _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: 'a080cb772039fe0c9e7699926c87f1cf94933ea8' })));
|
|
26388
26265
|
}
|
|
26389
26266
|
static get style() { return {
|
|
26390
26267
|
default: KolTreeItemDefaultStyle0
|
|
@@ -26427,12 +26304,12 @@ class KolTreeItemWc {
|
|
|
26427
26304
|
}
|
|
26428
26305
|
render() {
|
|
26429
26306
|
const { _href, _active, _hasChildren, _open, _label } = this.state;
|
|
26430
|
-
return (hAsync(Host, { key: '
|
|
26307
|
+
return (hAsync(Host, { key: '9786599b014c24c91df8d989067808fa98bf4759', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { key: '107a15885ecad10f614e29e6a5bf3cff7456430f', class: "kol-tree-item", style: {
|
|
26431
26308
|
'--level': `${this.level}`,
|
|
26432
|
-
} }, hAsync(KolLinkWcTag, { key: '
|
|
26309
|
+
} }, hAsync(KolLinkWcTag, { key: '8f0f2df8d04cb67d0d382659bb2277b47763b256', class: clsx('kol-tree-item__link', {
|
|
26433
26310
|
'kol-tree-item__link--first-level': this.level === 0,
|
|
26434
26311
|
'kol-tree-item__link--active': _active,
|
|
26435
|
-
}), _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: '
|
|
26312
|
+
}), _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: '926b0e17c429d2141b1dfde8ac457ea5eac28edb', 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: `codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`, _label: '' }))) : (hAsync("span", { class: "kol-tree-item__toggle-button-placeholder" })), _label)), hAsync("ul", { key: '663df524827510a66e8a99bdd65178fe3fd28ff5', class: "kol-tree-item__children", hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: '06f8cd9206bbc7f3aa92e6e3682eb6be04dc75e3' })))));
|
|
26436
26313
|
}
|
|
26437
26314
|
validateActive(value) {
|
|
26438
26315
|
validateActive(this, value || false);
|
|
@@ -26537,7 +26414,7 @@ class KolTreeWc {
|
|
|
26537
26414
|
validateLabel(this, value);
|
|
26538
26415
|
}
|
|
26539
26416
|
render() {
|
|
26540
|
-
return (hAsync(Host, { key: '
|
|
26417
|
+
return (hAsync(Host, { key: '2e097d024c19c4e809e27805ad12cdf4eadfd038', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("nav", { key: '9f23c7a5071ae9e7af8cd93c0f80098b4b593854', class: "kol-tree", "aria-label": this.state._label }, hAsync("ul", { key: 'aaa8d6cce48afca57ec0181bf8b22c3fdef39973', class: "kol-tree__treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: 'a133ede01d7c41852d097cb1c88f0750cb6492ed' })))));
|
|
26541
26418
|
}
|
|
26542
26419
|
static isTreeItem(element) {
|
|
26543
26420
|
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
|
@@ -26603,6 +26480,7 @@ class KolTreeWc {
|
|
|
26603
26480
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
26604
26481
|
const openItems = await this.getOpenTreeItemElements();
|
|
26605
26482
|
const currentTreeItem = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(KolTreeItemTag);
|
|
26483
|
+
const hasModifierKeyPressed = event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;
|
|
26606
26484
|
if (!openItems || !currentTreeItem) {
|
|
26607
26485
|
return;
|
|
26608
26486
|
}
|
|
@@ -26652,15 +26530,17 @@ class KolTreeWc {
|
|
|
26652
26530
|
break;
|
|
26653
26531
|
}
|
|
26654
26532
|
case (_h = event.key.match(/[a-zA-Z0-9]/)) === null || _h === void 0 ? void 0 : _h.input: {
|
|
26655
|
-
|
|
26656
|
-
|
|
26657
|
-
|
|
26658
|
-
|
|
26659
|
-
|
|
26660
|
-
|
|
26661
|
-
|
|
26662
|
-
|
|
26663
|
-
|
|
26533
|
+
if (!hasModifierKeyPressed) {
|
|
26534
|
+
const char = event.key.toLowerCase();
|
|
26535
|
+
const startIndex = openItems.indexOf(currentTreeItem) + 1;
|
|
26536
|
+
const wrapAroundItems = openItems.concat(openItems);
|
|
26537
|
+
const matchIndex = wrapAroundItems
|
|
26538
|
+
.slice(startIndex, startIndex + openItems.length)
|
|
26539
|
+
.findIndex((item) => { var _a; return (_a = item.getAttribute('_label')) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase().startsWith(char); });
|
|
26540
|
+
if (matchIndex !== -1) {
|
|
26541
|
+
await wrapAroundItems[startIndex + matchIndex].focusLink();
|
|
26542
|
+
event.preventDefault();
|
|
26543
|
+
}
|
|
26664
26544
|
}
|
|
26665
26545
|
break;
|
|
26666
26546
|
}
|
|
@@ -26732,7 +26612,7 @@ class KolVersion {
|
|
|
26732
26612
|
};
|
|
26733
26613
|
}
|
|
26734
26614
|
render() {
|
|
26735
|
-
return (hAsync(Host, { key: '
|
|
26615
|
+
return (hAsync(Host, { key: '0dff30fe462330d3563acd3aa73aaef26677a973', class: "kol-version" }, hAsync(KolBadgeTag, { key: '7a720cd897c9f0d9ecb76e04395fd9f441335b96', _color: "#bec5c9", _icons: {
|
|
26736
26616
|
left: { icon: 'codicon codicon-versions', label: translate('kol-version') },
|
|
26737
26617
|
}, _label: this.state._label })));
|
|
26738
26618
|
}
|
|
@@ -26807,7 +26687,6 @@ registerComponents([
|
|
|
26807
26687
|
KolInputRadio,
|
|
26808
26688
|
KolInputRange,
|
|
26809
26689
|
KolInputText,
|
|
26810
|
-
KolInputWc,
|
|
26811
26690
|
KolKolibri,
|
|
26812
26691
|
KolLink,
|
|
26813
26692
|
KolLinkButton,
|
|
@@ -26817,7 +26696,7 @@ registerComponents([
|
|
|
26817
26696
|
KolPagination,
|
|
26818
26697
|
KolPopover,
|
|
26819
26698
|
KolPopoverButton,
|
|
26820
|
-
|
|
26699
|
+
KolProgress,
|
|
26821
26700
|
KolQuote,
|
|
26822
26701
|
KolSelect,
|
|
26823
26702
|
KolSingleSelect,
|