@public-ui/hydrate 3.0.0-0edf6aa20a9ac9faa46ebe0e45a8c62841b05164.0 → 3.0.0-887b7986b55acd713750f46753265f8330a1342a.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 +314 -435
- package/dist/index.mjs +314 -435
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -127,7 +127,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
|
|
|
127
127
|
|
|
128
128
|
|
|
129
129
|
const NAMESPACE = 'kolibri';
|
|
130
|
-
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:
|
|
130
|
+
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 };
|
|
131
131
|
|
|
132
132
|
/*
|
|
133
133
|
Stencil Hydrate Platform v4.20.0 | MIT Licensed | https://stenciljs.com
|
|
@@ -1306,9 +1306,6 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
|
|
|
1306
1306
|
maybePromise = safeCall(instance, "componentWillLoad");
|
|
1307
1307
|
}
|
|
1308
1308
|
}
|
|
1309
|
-
{
|
|
1310
|
-
maybePromise = enqueue(maybePromise, () => safeCall(instance, "componentWillRender"));
|
|
1311
|
-
}
|
|
1312
1309
|
endSchedule();
|
|
1313
1310
|
return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
|
|
1314
1311
|
};
|
|
@@ -3676,35 +3673,6 @@ const watchJsonArrayString = (component, propName, itemValidation, value, arrayV
|
|
|
3676
3673
|
});
|
|
3677
3674
|
});
|
|
3678
3675
|
};
|
|
3679
|
-
const BOOLEAN = /^(true|false)$/;
|
|
3680
|
-
const INTEGER = /^-?(0|[1-9]\d*)$/;
|
|
3681
|
-
const FLOAT = /^-?(0.|[1-9]\d*.)\d*[1-9]$/;
|
|
3682
|
-
const mapString2Unknown = (value) => {
|
|
3683
|
-
const typeStr = typeof value;
|
|
3684
|
-
const oldValue = `${value}`;
|
|
3685
|
-
if (typeof value === 'string') {
|
|
3686
|
-
if (BOOLEAN.test(value)) {
|
|
3687
|
-
value = value === 'true';
|
|
3688
|
-
}
|
|
3689
|
-
else if (INTEGER.test(value)) {
|
|
3690
|
-
value = parseInt(value);
|
|
3691
|
-
}
|
|
3692
|
-
else if (FLOAT.test(value)) {
|
|
3693
|
-
value = parseFloat(value);
|
|
3694
|
-
}
|
|
3695
|
-
else if (JSON_CHARS.test(value)) {
|
|
3696
|
-
try {
|
|
3697
|
-
value = parseJson(value);
|
|
3698
|
-
}
|
|
3699
|
-
catch (e) {
|
|
3700
|
-
}
|
|
3701
|
-
}
|
|
3702
|
-
}
|
|
3703
|
-
if (typeStr !== typeof value) {
|
|
3704
|
-
devHint(`You have used a stringified property value (${oldValue} to ${JSON.stringify(value)}) which type switched from ${typeStr} to ${typeof value}!`);
|
|
3705
|
-
}
|
|
3706
|
-
return value;
|
|
3707
|
-
};
|
|
3708
3676
|
const stringifyJson = (value) => {
|
|
3709
3677
|
try {
|
|
3710
3678
|
return JSON.stringify(value).replace(/"/g, "'");
|
|
@@ -3759,14 +3727,6 @@ try {
|
|
|
3759
3727
|
catch (e) {
|
|
3760
3728
|
processEnv = 'production';
|
|
3761
3729
|
}
|
|
3762
|
-
const handleSlotContent = (hostRef, slotRef, slotName) => {
|
|
3763
|
-
if (hostRef && slotRef && typeof slotName === 'string') {
|
|
3764
|
-
const content = hostRef.querySelector(`[slot="${slotName}"]`);
|
|
3765
|
-
if (content) {
|
|
3766
|
-
slotRef.appendChild(content);
|
|
3767
|
-
}
|
|
3768
|
-
}
|
|
3769
|
-
};
|
|
3770
3730
|
const showExpertSlot = (label) => label === '';
|
|
3771
3731
|
const buildBadgeTextString = (accessKey, shortKey) => {
|
|
3772
3732
|
return accessKey || shortKey || '';
|
|
@@ -4238,29 +4198,17 @@ const validateMsg = (component, value) => {
|
|
|
4238
4198
|
}
|
|
4239
4199
|
catch (e) {
|
|
4240
4200
|
}
|
|
4241
|
-
watchValidator(component, `_msg`, (value) => isObject$2(value) &&
|
|
4242
|
-
defaultValue: {
|
|
4243
|
-
_description: '',
|
|
4244
|
-
_type: 'error',
|
|
4245
|
-
},
|
|
4246
|
-
});
|
|
4201
|
+
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);
|
|
4247
4202
|
});
|
|
4248
4203
|
};
|
|
4249
|
-
function isMsgEmpty(msg) {
|
|
4250
|
-
if (!msg) {
|
|
4251
|
-
return true;
|
|
4252
|
-
}
|
|
4253
|
-
return msg._type === 'error' && !msg._description;
|
|
4254
|
-
}
|
|
4255
4204
|
function convertMsgToInternMsg(msg) {
|
|
4256
|
-
if (!msg
|
|
4205
|
+
if (!msg) {
|
|
4257
4206
|
return undefined;
|
|
4258
4207
|
}
|
|
4259
4208
|
return transformObjectProperties(msg);
|
|
4260
4209
|
}
|
|
4261
|
-
function
|
|
4262
|
-
const
|
|
4263
|
-
const showMsg = hasValidMsg && (touched === true || (msg === null || msg === void 0 ? void 0 : msg.type) !== 'error');
|
|
4210
|
+
function checkHasMsg(msg, touched) {
|
|
4211
|
+
const showMsg = msg ? touched === true || (msg === null || msg === void 0 ? void 0 : msg.type) !== 'error' : false;
|
|
4264
4212
|
return showMsg;
|
|
4265
4213
|
}
|
|
4266
4214
|
|
|
@@ -4465,7 +4413,7 @@ var KoliBriProgressVariantEnum;
|
|
|
4465
4413
|
KoliBriProgressVariantEnum["cycle"] = "cycle";
|
|
4466
4414
|
})(KoliBriProgressVariantEnum || (KoliBriProgressVariantEnum = {}));
|
|
4467
4415
|
|
|
4468
|
-
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.
|
|
4416
|
+
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}";
|
|
4469
4417
|
var KolAbbrDefaultStyle0 = defaultStyleCss$M;
|
|
4470
4418
|
|
|
4471
4419
|
class KolAbbr {
|
|
@@ -4772,7 +4720,7 @@ class KolAccordion {
|
|
|
4772
4720
|
}; }
|
|
4773
4721
|
}
|
|
4774
4722
|
|
|
4775
|
-
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.
|
|
4723
|
+
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}";
|
|
4776
4724
|
var KolAlertDefaultStyle0 = defaultStyleCss$K;
|
|
4777
4725
|
|
|
4778
4726
|
class KolAlert {
|
|
@@ -4864,6 +4812,8 @@ var locale_de = {
|
|
|
4864
4812
|
'hide-password': 'ausblenden',
|
|
4865
4813
|
'no-results-message': 'Keine Ergebnisse gefunden.',
|
|
4866
4814
|
'delete-selection': 'Auswahl entfernen',
|
|
4815
|
+
'filename-text': 'Datei auswählen oder hier ablegen...',
|
|
4816
|
+
'data-browse-text': 'Datei auswählen',
|
|
4867
4817
|
};
|
|
4868
4818
|
|
|
4869
4819
|
var locale_en = {
|
|
@@ -4916,6 +4866,8 @@ var locale_en = {
|
|
|
4916
4866
|
'hide-password': 'Hide',
|
|
4917
4867
|
'no-results-message': 'No results found.',
|
|
4918
4868
|
'delete-selection': 'Delete selection',
|
|
4869
|
+
'filename-text': 'Choose a file or drop it here...',
|
|
4870
|
+
'data-browse-text': 'Browse',
|
|
4919
4871
|
};
|
|
4920
4872
|
|
|
4921
4873
|
const mapLocaleKeys = (locale) => Object.keys(locale).reduce((a, c) => ((a[`${'kol'}-${c}`] = locale[c]), a), {});
|
|
@@ -4993,7 +4945,9 @@ if (processEnv === 'test') {
|
|
|
4993
4945
|
}
|
|
4994
4946
|
|
|
4995
4947
|
const Icon = ({ ariaLabel, icon }) => {
|
|
4996
|
-
return hAsync(
|
|
4948
|
+
return (hAsync(Fragment, null,
|
|
4949
|
+
hAsync("span", { class: "visually-hidden" }, ariaLabel),
|
|
4950
|
+
hAsync(KolIconTag, { class: "kol-alert__heading-icon", _label: "", _icons: icon })));
|
|
4997
4951
|
};
|
|
4998
4952
|
const AlertIcon = ({ type, label }) => {
|
|
4999
4953
|
switch (type) {
|
|
@@ -13872,7 +13826,7 @@ const LabelFc = ({ hasExpertSlot, accessKey, shortKey, label, showBadge = true }
|
|
|
13872
13826
|
return (hAsync(Fragment, null,
|
|
13873
13827
|
hAsync(InternalUnderlinedBadgeText, { badgeText: badgeText, label: label }),
|
|
13874
13828
|
"\u00A0",
|
|
13875
|
-
hAsync("span", { class: "
|
|
13829
|
+
hAsync("span", { class: "badge-text-hint", "aria-hidden": "true" }, badgeText)));
|
|
13876
13830
|
};
|
|
13877
13831
|
const KolFormFieldLabelFc = (_a) => {
|
|
13878
13832
|
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"]);
|
|
@@ -13931,7 +13885,7 @@ const KolFormFieldFc = (props, children) => {
|
|
|
13931
13885
|
const showHint = !renderNoHint;
|
|
13932
13886
|
const showTooltip = !renderNoTooltip;
|
|
13933
13887
|
const hasExpertSlot = showExpertSlot(label);
|
|
13934
|
-
const showMsg =
|
|
13888
|
+
const showMsg = checkHasMsg(msg, touched);
|
|
13935
13889
|
const badgeText = buildBadgeTextString(accessKey, shortKey);
|
|
13936
13890
|
const useTooltipInsteadOfLabel = showTooltip && !hasExpertSlot && hideLabel;
|
|
13937
13891
|
let stateCssClasses = {
|
|
@@ -13945,7 +13899,7 @@ const KolFormFieldFc = (props, children) => {
|
|
|
13945
13899
|
if (showMsg) {
|
|
13946
13900
|
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 });
|
|
13947
13901
|
}
|
|
13948
|
-
return (hAsync(Component, Object.assign({ class: clsx('kol-form-field', stateCssClasses, classNames)
|
|
13902
|
+
return (hAsync(Component, Object.assign({ class: clsx('kol-form-field', stateCssClasses, classNames) }, other),
|
|
13949
13903
|
showLabel && (hAsync(KolFieldControlLabelFc, Object.assign({}, (formFieldLabelProps || {}), { id: id, hasExpertSlot: hasExpertSlot, hideLabel: hideLabel, label: label, accessKey: accessKey, shortKey: shortKey }))),
|
|
13950
13904
|
hAsync(InputContainer$1, Object.assign({}, formFieldInputProps),
|
|
13951
13905
|
children,
|
|
@@ -13977,7 +13931,7 @@ const Container = (_a, children) => {
|
|
|
13977
13931
|
};
|
|
13978
13932
|
const KolInputContainerFc = (props, children) => {
|
|
13979
13933
|
const { class: classNames, startAdornment, endAdornment, disabled, msg, touched, containerProps, startAdornmentProps, endAdornmentProps } = props, other = __rest(props, ["class", "startAdornment", "endAdornment", "disabled", "msg", "touched", "containerProps", "startAdornmentProps", "endAdornmentProps"]);
|
|
13980
|
-
const showMsg =
|
|
13934
|
+
const showMsg = checkHasMsg(msg, touched);
|
|
13981
13935
|
const stateCssClasses = {
|
|
13982
13936
|
['kol-input-container--disabled']: disabled,
|
|
13983
13937
|
[`kol-input-container--${(msg === null || msg === void 0 ? void 0 : msg.type) || 'error'}`]: showMsg,
|
|
@@ -14015,7 +13969,7 @@ function getDefaultProps({ ariaDescribedBy, hideLabel, label }) {
|
|
|
14015
13969
|
|
|
14016
13970
|
const InputFc = (props) => {
|
|
14017
13971
|
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"]);
|
|
14018
|
-
const showMsg =
|
|
13972
|
+
const showMsg = checkHasMsg(msg, touched);
|
|
14019
13973
|
const stateCssClasses = {
|
|
14020
13974
|
['kol-input--disabled']: Boolean(disabled),
|
|
14021
13975
|
['kol-input--required']: Boolean(required),
|
|
@@ -14032,7 +13986,7 @@ var KolInputFc = InputFc;
|
|
|
14032
13986
|
|
|
14033
13987
|
const TextAreaFc = (props) => {
|
|
14034
13988
|
const { class: classNames, msg, touched, readonly, disabled, required, ariaDescribedBy, hideLabel, label } = props, other = __rest(props, ["class", "msg", "touched", "readonly", "disabled", "required", "ariaDescribedBy", "hideLabel", "label"]);
|
|
14035
|
-
const showMsg =
|
|
13989
|
+
const showMsg = checkHasMsg(msg, touched);
|
|
14036
13990
|
const stateCssClasses = {
|
|
14037
13991
|
['kol-textarea--disabled']: Boolean(disabled),
|
|
14038
13992
|
['kol-textarea--required']: Boolean(required),
|
|
@@ -14054,7 +14008,7 @@ const SuggestionsFc = (_a) => {
|
|
|
14054
14008
|
};
|
|
14055
14009
|
var KolSuggestionsFc = SuggestionsFc;
|
|
14056
14010
|
|
|
14057
|
-
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.
|
|
14011
|
+
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}";
|
|
14058
14012
|
var KolBadgeDefaultStyle0 = defaultStyleCss$I;
|
|
14059
14013
|
|
|
14060
14014
|
featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
|
|
@@ -14222,7 +14176,7 @@ class KolBreadcrumb {
|
|
|
14222
14176
|
}; }
|
|
14223
14177
|
}
|
|
14224
14178
|
|
|
14225
|
-
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.
|
|
14179
|
+
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}";
|
|
14226
14180
|
var KolButtonDefaultStyle0 = defaultStyleCss$G;
|
|
14227
14181
|
|
|
14228
14182
|
class KolButton {
|
|
@@ -14247,7 +14201,6 @@ class KolButton {
|
|
|
14247
14201
|
this._role = undefined;
|
|
14248
14202
|
this._shortKey = undefined;
|
|
14249
14203
|
this._syncValueBySelector = undefined;
|
|
14250
|
-
this._tabIndex = undefined;
|
|
14251
14204
|
this._tooltipAlign = 'top';
|
|
14252
14205
|
this._type = 'button';
|
|
14253
14206
|
this._value = undefined;
|
|
@@ -14261,7 +14214,7 @@ class KolButton {
|
|
|
14261
14214
|
await ((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
14262
14215
|
}
|
|
14263
14216
|
render() {
|
|
14264
|
-
return (hAsync(KolButtonWcTag, { key: '
|
|
14217
|
+
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" })));
|
|
14265
14218
|
}
|
|
14266
14219
|
static get delegatesFocus() { return true; }
|
|
14267
14220
|
static get style() { return {
|
|
@@ -14287,7 +14240,6 @@ class KolButton {
|
|
|
14287
14240
|
"_role": [1],
|
|
14288
14241
|
"_shortKey": [1, "_short-key"],
|
|
14289
14242
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
14290
|
-
"_tabIndex": [2, "_tab-index"],
|
|
14291
14243
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
14292
14244
|
"_type": [1],
|
|
14293
14245
|
"_value": [8],
|
|
@@ -14301,7 +14253,7 @@ class KolButton {
|
|
|
14301
14253
|
}; }
|
|
14302
14254
|
}
|
|
14303
14255
|
|
|
14304
|
-
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.
|
|
14256
|
+
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}";
|
|
14305
14257
|
var KolButtonLinkDefaultStyle0 = defaultStyleCss$F;
|
|
14306
14258
|
|
|
14307
14259
|
class KolButtonLink {
|
|
@@ -14325,7 +14277,6 @@ class KolButtonLink {
|
|
|
14325
14277
|
this._role = undefined;
|
|
14326
14278
|
this._shortKey = undefined;
|
|
14327
14279
|
this._syncValueBySelector = undefined;
|
|
14328
|
-
this._tabIndex = undefined;
|
|
14329
14280
|
this._tooltipAlign = 'top';
|
|
14330
14281
|
this._type = 'button';
|
|
14331
14282
|
this._value = undefined;
|
|
@@ -14338,7 +14289,7 @@ class KolButtonLink {
|
|
|
14338
14289
|
await ((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
14339
14290
|
}
|
|
14340
14291
|
render() {
|
|
14341
|
-
return (hAsync(KolButtonWcTag, { key: '
|
|
14292
|
+
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" })));
|
|
14342
14293
|
}
|
|
14343
14294
|
static get delegatesFocus() { return true; }
|
|
14344
14295
|
static get style() { return {
|
|
@@ -14363,7 +14314,6 @@ class KolButtonLink {
|
|
|
14363
14314
|
"_role": [1],
|
|
14364
14315
|
"_shortKey": [1, "_short-key"],
|
|
14365
14316
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
14366
|
-
"_tabIndex": [2, "_tab-index"],
|
|
14367
14317
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
14368
14318
|
"_type": [1],
|
|
14369
14319
|
"_value": [8],
|
|
@@ -14859,7 +14809,7 @@ class KolButtonWc {
|
|
|
14859
14809
|
}; }
|
|
14860
14810
|
}
|
|
14861
14811
|
|
|
14862
|
-
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.
|
|
14812
|
+
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}";
|
|
14863
14813
|
var KolCardDefaultStyle0 = defaultStyleCss$E;
|
|
14864
14814
|
|
|
14865
14815
|
class KolCard {
|
|
@@ -15220,18 +15170,18 @@ class ComboboxController extends InputIconController {
|
|
|
15220
15170
|
}
|
|
15221
15171
|
|
|
15222
15172
|
const getRenderStates$1 = (state) => {
|
|
15223
|
-
var _a
|
|
15224
|
-
const
|
|
15225
|
-
const
|
|
15173
|
+
var _a;
|
|
15174
|
+
const isMessageValid = ((_a = state._msg) === null || _a === void 0 ? void 0 : _a._type) === 'error';
|
|
15175
|
+
const hasMsg = isMessageValid && state._touched === true;
|
|
15226
15176
|
const hasHint = typeof state._hint === 'string' && state._hint.length > 0;
|
|
15227
15177
|
const ariaDescribedBy = [];
|
|
15228
|
-
if (
|
|
15178
|
+
if (hasMsg === true) {
|
|
15229
15179
|
ariaDescribedBy.push(`${state._id}-error`);
|
|
15230
15180
|
}
|
|
15231
15181
|
if (hasHint === true) {
|
|
15232
15182
|
ariaDescribedBy.push(`${state._id}-hint`);
|
|
15233
15183
|
}
|
|
15234
|
-
return {
|
|
15184
|
+
return { hasMsg, hasHint, ariaDescribedBy };
|
|
15235
15185
|
};
|
|
15236
15186
|
|
|
15237
15187
|
const getRenderStates = (state) => {
|
|
@@ -15390,7 +15340,7 @@ const CustomSuggestionsOptionsGroupFc = ({ blockSuggestionMouseOver, onKeyDown }
|
|
|
15390
15340
|
};
|
|
15391
15341
|
var CustomSuggestionsOptionsGroupFc$1 = CustomSuggestionsOptionsGroupFc;
|
|
15392
15342
|
|
|
15393
|
-
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.
|
|
15343
|
+
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}";
|
|
15394
15344
|
var KolComboboxDefaultStyle0 = defaultStyleCss$D;
|
|
15395
15345
|
|
|
15396
15346
|
class KolCombobox {
|
|
@@ -15401,10 +15351,10 @@ class KolCombobox {
|
|
|
15401
15351
|
var _a;
|
|
15402
15352
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
15403
15353
|
}
|
|
15404
|
-
selectOption(
|
|
15354
|
+
selectOption(option) {
|
|
15405
15355
|
var _a;
|
|
15406
|
-
this.controller.onFacade.onInput(
|
|
15407
|
-
this.controller.onFacade.onChange(
|
|
15356
|
+
this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: option } }), true, option);
|
|
15357
|
+
this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: option } }), option);
|
|
15408
15358
|
this.controller.setFormAssociatedValue(option);
|
|
15409
15359
|
this.state._value = option;
|
|
15410
15360
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
@@ -15487,13 +15437,13 @@ class KolCombobox {
|
|
|
15487
15437
|
}, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder });
|
|
15488
15438
|
}
|
|
15489
15439
|
render() {
|
|
15490
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
15440
|
+
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) &&
|
|
15491
15441
|
this._filteredSuggestions.length > 0 &&
|
|
15492
15442
|
this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc$1, { index: index, option: option, ref: (el) => {
|
|
15493
15443
|
if (el)
|
|
15494
15444
|
this.refSuggestions[index] = el;
|
|
15495
|
-
}, selected: this.state._value === option, onClick: (
|
|
15496
|
-
this.selectOption(
|
|
15445
|
+
}, selected: this.state._value === option, onClick: () => {
|
|
15446
|
+
this.selectOption(option);
|
|
15497
15447
|
this.toggleListbox();
|
|
15498
15448
|
}, onMouseOver: () => {
|
|
15499
15449
|
if (!this.blockSuggestionMouseOver) {
|
|
@@ -15503,7 +15453,7 @@ class KolCombobox {
|
|
|
15503
15453
|
this.focusOption(index);
|
|
15504
15454
|
}, onKeyDown: (e) => {
|
|
15505
15455
|
if (e.key === 'Enter' || e.key === 'NumpadEnter') {
|
|
15506
|
-
this.selectOption(
|
|
15456
|
+
this.selectOption(option);
|
|
15507
15457
|
this.toggleListbox();
|
|
15508
15458
|
e.preventDefault();
|
|
15509
15459
|
}
|
|
@@ -15628,7 +15578,6 @@ class KolCombobox {
|
|
|
15628
15578
|
this._required = false;
|
|
15629
15579
|
this._shortKey = undefined;
|
|
15630
15580
|
this._syncValueBySelector = undefined;
|
|
15631
|
-
this._tabIndex = undefined;
|
|
15632
15581
|
this._tooltipAlign = 'top';
|
|
15633
15582
|
this._touched = false;
|
|
15634
15583
|
this._value = undefined;
|
|
@@ -15696,9 +15645,6 @@ class KolCombobox {
|
|
|
15696
15645
|
validateSyncValueBySelector(value) {
|
|
15697
15646
|
this.controller.validateSyncValueBySelector(value);
|
|
15698
15647
|
}
|
|
15699
|
-
validateTabIndex(value) {
|
|
15700
|
-
this.controller.validateTabIndex(value);
|
|
15701
|
-
}
|
|
15702
15648
|
validateTouched(value) {
|
|
15703
15649
|
this.controller.validateTouched(value);
|
|
15704
15650
|
}
|
|
@@ -15758,7 +15704,6 @@ class KolCombobox {
|
|
|
15758
15704
|
"_suggestions": ["validateSuggestions"],
|
|
15759
15705
|
"_required": ["validateRequired"],
|
|
15760
15706
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
15761
|
-
"_tabIndex": ["validateTabIndex"],
|
|
15762
15707
|
"_touched": ["validateTouched"],
|
|
15763
15708
|
"_value": ["validateValue"]
|
|
15764
15709
|
}; }
|
|
@@ -15785,7 +15730,6 @@ class KolCombobox {
|
|
|
15785
15730
|
"_required": [4],
|
|
15786
15731
|
"_shortKey": [1, "_short-key"],
|
|
15787
15732
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
15788
|
-
"_tabIndex": [2, "_tab-index"],
|
|
15789
15733
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
15790
15734
|
"_touched": [1540],
|
|
15791
15735
|
"_value": [1537],
|
|
@@ -16062,7 +16006,7 @@ class KolDrawer {
|
|
|
16062
16006
|
}; }
|
|
16063
16007
|
}
|
|
16064
16008
|
|
|
16065
|
-
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.
|
|
16009
|
+
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}";
|
|
16066
16010
|
var KolFormDefaultStyle0 = defaultStyleCss$A;
|
|
16067
16011
|
|
|
16068
16012
|
class KolForm {
|
|
@@ -16419,7 +16363,6 @@ class InputRadioController extends InputCheckboxRadioController {
|
|
|
16419
16363
|
});
|
|
16420
16364
|
}
|
|
16421
16365
|
validateValue(value) {
|
|
16422
|
-
value = mapString2Unknown(value);
|
|
16423
16366
|
value = Array.isArray(value) ? value[0] : value;
|
|
16424
16367
|
setState(this.component, '_value', value, {
|
|
16425
16368
|
afterPatch: this.afterPatchOptions,
|
|
@@ -16494,7 +16437,7 @@ const KolFieldControlFc = (props, children) => {
|
|
|
16494
16437
|
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"]);
|
|
16495
16438
|
const canShowHint = !renderNoHint;
|
|
16496
16439
|
const canShowTooltip = !renderNoTooltip;
|
|
16497
|
-
const showMsg =
|
|
16440
|
+
const showMsg = checkHasMsg(msg, touched);
|
|
16498
16441
|
const hasExpertSlot = showExpertSlot(label);
|
|
16499
16442
|
const useTooltipInsteadOfLabel = canShowTooltip && !hasExpertSlot && hideLabel;
|
|
16500
16443
|
const badgeText = buildBadgeTextString(accessKey, shortKey);
|
|
@@ -16564,7 +16507,7 @@ const InputWrapperFc = (_a) => {
|
|
|
16564
16507
|
const CheckboxFc = (_a) => {
|
|
16565
16508
|
var _b;
|
|
16566
16509
|
var { class: classNames, variant = 'default', icon, inputProps } = _a, other = __rest(_a, ["class", "variant", "icon", "inputProps"]);
|
|
16567
|
-
const showMsg =
|
|
16510
|
+
const showMsg = checkHasMsg(inputProps === null || inputProps === void 0 ? void 0 : inputProps.msg, inputProps === null || inputProps === void 0 ? void 0 : inputProps.touched);
|
|
16568
16511
|
const cssVariants = {
|
|
16569
16512
|
[`kol-checkbox--variant-${variant}`]: true,
|
|
16570
16513
|
[`kol-checkbox--checked`]: inputProps === null || inputProps === void 0 ? void 0 : inputProps.checked,
|
|
@@ -16611,7 +16554,7 @@ const CheckboxStateWrapper = (_a) => {
|
|
|
16611
16554
|
};
|
|
16612
16555
|
var KolCheckboxStateWrapperFc = CheckboxStateWrapper;
|
|
16613
16556
|
|
|
16614
|
-
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}";
|
|
16557
|
+
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}";
|
|
16615
16558
|
var KolInputCheckboxDefaultStyle0 = defaultStyleCss$w;
|
|
16616
16559
|
|
|
16617
16560
|
class KolInputCheckbox {
|
|
@@ -16707,7 +16650,6 @@ class KolInputCheckbox {
|
|
|
16707
16650
|
this._required = false;
|
|
16708
16651
|
this._shortKey = undefined;
|
|
16709
16652
|
this._syncValueBySelector = undefined;
|
|
16710
|
-
this._tabIndex = undefined;
|
|
16711
16653
|
this._tooltipAlign = 'top';
|
|
16712
16654
|
this._touched = false;
|
|
16713
16655
|
this._value = true;
|
|
@@ -16784,9 +16726,6 @@ class KolInputCheckbox {
|
|
|
16784
16726
|
validateSyncValueBySelector(value) {
|
|
16785
16727
|
this.controller.validateSyncValueBySelector(value);
|
|
16786
16728
|
}
|
|
16787
|
-
validateTabIndex(value) {
|
|
16788
|
-
this.controller.validateTabIndex(value);
|
|
16789
|
-
}
|
|
16790
16729
|
validateTouched(value) {
|
|
16791
16730
|
this.controller.validateTouched(value);
|
|
16792
16731
|
}
|
|
@@ -16820,7 +16759,6 @@ class KolInputCheckbox {
|
|
|
16820
16759
|
"_required": ["validateRequired"],
|
|
16821
16760
|
"_shortKey": ["validateShortKey"],
|
|
16822
16761
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
16823
|
-
"_tabIndex": ["validateTabIndex"],
|
|
16824
16762
|
"_touched": ["validateTouched"],
|
|
16825
16763
|
"_value": ["validateValue"],
|
|
16826
16764
|
"_variant": ["validateVariant"]
|
|
@@ -16849,7 +16787,6 @@ class KolInputCheckbox {
|
|
|
16849
16787
|
"_required": [4],
|
|
16850
16788
|
"_shortKey": [1, "_short-key"],
|
|
16851
16789
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
16852
|
-
"_tabIndex": [2, "_tab-index"],
|
|
16853
16790
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
16854
16791
|
"_touched": [1540],
|
|
16855
16792
|
"_value": [8],
|
|
@@ -16888,37 +16825,50 @@ class InputColorController extends InputIconController {
|
|
|
16888
16825
|
}
|
|
16889
16826
|
}
|
|
16890
16827
|
|
|
16891
|
-
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.
|
|
16828
|
+
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}";
|
|
16892
16829
|
var KolInputColorDefaultStyle0 = defaultStyleCss$v;
|
|
16893
16830
|
|
|
16894
16831
|
class KolInputColor {
|
|
16895
16832
|
async getValue() {
|
|
16896
16833
|
var _a;
|
|
16897
|
-
return (_a = this.
|
|
16834
|
+
return (_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.value;
|
|
16898
16835
|
}
|
|
16899
16836
|
async kolFocus() {
|
|
16900
16837
|
var _a;
|
|
16901
|
-
(_a = this.
|
|
16838
|
+
(_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.focus();
|
|
16839
|
+
}
|
|
16840
|
+
get hasSuggestions() {
|
|
16841
|
+
return Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
16902
16842
|
}
|
|
16903
16843
|
getFormFieldProps() {
|
|
16904
16844
|
return {
|
|
16905
16845
|
state: this.state,
|
|
16906
16846
|
class: 'kol-input-color',
|
|
16907
16847
|
tooltipAlign: this._tooltipAlign,
|
|
16908
|
-
onClick: () => { var _a; return (_a = this.
|
|
16848
|
+
onClick: () => { var _a; return (_a = this.refInputText) === null || _a === void 0 ? void 0 : _a.focus(); },
|
|
16909
16849
|
alert: this.showAsAlert(),
|
|
16910
16850
|
};
|
|
16911
16851
|
}
|
|
16912
|
-
|
|
16913
|
-
return Object.assign(Object.assign({ ref: this.
|
|
16852
|
+
getInputColorProps() {
|
|
16853
|
+
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 });
|
|
16854
|
+
}
|
|
16855
|
+
getInputTextProps() {
|
|
16856
|
+
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 });
|
|
16857
|
+
}
|
|
16858
|
+
getGenericInputProps() {
|
|
16859
|
+
const _a = this.state, other = __rest(_a, ["_suggestions"]);
|
|
16860
|
+
return Object.assign(Object.assign({ state: Object.assign(Object.assign({}, other), { _suggestions: [] }) }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus });
|
|
16914
16861
|
}
|
|
16915
16862
|
render() {
|
|
16916
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
16863
|
+
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()))))));
|
|
16917
16864
|
}
|
|
16918
16865
|
constructor(hostRef) {
|
|
16919
16866
|
registerInstance(this, hostRef);
|
|
16920
16867
|
this.catchRef = (ref) => {
|
|
16921
|
-
this.
|
|
16868
|
+
this.refInputText = ref;
|
|
16869
|
+
};
|
|
16870
|
+
this.catchColorRef = (ref) => {
|
|
16871
|
+
this.refInputColor = ref;
|
|
16922
16872
|
};
|
|
16923
16873
|
this.onBlur = (event) => {
|
|
16924
16874
|
this.controller.onFacade.onBlur(event);
|
|
@@ -16928,9 +16878,23 @@ class KolInputColor {
|
|
|
16928
16878
|
this.controller.onFacade.onFocus(event);
|
|
16929
16879
|
this.inputHasFocus = true;
|
|
16930
16880
|
};
|
|
16931
|
-
this.
|
|
16932
|
-
|
|
16933
|
-
this._value =
|
|
16881
|
+
this.onColorInput = (event) => {
|
|
16882
|
+
const value = event.target.value;
|
|
16883
|
+
this.state._value = value;
|
|
16884
|
+
if (this.refInputText) {
|
|
16885
|
+
this.refInputText.value = value;
|
|
16886
|
+
}
|
|
16887
|
+
this.controller.onFacade.onInput(event);
|
|
16888
|
+
};
|
|
16889
|
+
this.onTextInput = (event) => {
|
|
16890
|
+
let value = event.target.value;
|
|
16891
|
+
if (!value.startsWith('#')) {
|
|
16892
|
+
value = `#${value}`;
|
|
16893
|
+
}
|
|
16894
|
+
this._value = value;
|
|
16895
|
+
if (this.refInputColor) {
|
|
16896
|
+
this.refInputColor.value = value;
|
|
16897
|
+
}
|
|
16934
16898
|
this.controller.onFacade.onInput(event);
|
|
16935
16899
|
};
|
|
16936
16900
|
this._accessKey = undefined;
|
|
@@ -16949,7 +16913,6 @@ class KolInputColor {
|
|
|
16949
16913
|
this._smartButton = undefined;
|
|
16950
16914
|
this._suggestions = undefined;
|
|
16951
16915
|
this._syncValueBySelector = undefined;
|
|
16952
|
-
this._tabIndex = undefined;
|
|
16953
16916
|
this._tooltipAlign = 'top';
|
|
16954
16917
|
this._touched = false;
|
|
16955
16918
|
this._value = undefined;
|
|
@@ -17014,15 +16977,17 @@ class KolInputColor {
|
|
|
17014
16977
|
validateSyncValueBySelector(value) {
|
|
17015
16978
|
this.controller.validateSyncValueBySelector(value);
|
|
17016
16979
|
}
|
|
17017
|
-
validateTabIndex(value) {
|
|
17018
|
-
this.controller.validateTabIndex(value);
|
|
17019
|
-
}
|
|
17020
16980
|
validateTouched(value) {
|
|
17021
16981
|
this.controller.validateTouched(value);
|
|
17022
16982
|
}
|
|
17023
16983
|
validateValue(value) {
|
|
17024
16984
|
this.controller.validateValue(value);
|
|
17025
16985
|
}
|
|
16986
|
+
componentDidLoad() {
|
|
16987
|
+
if (!this._value && this.refInputColor) {
|
|
16988
|
+
this._value = this.refInputColor.value;
|
|
16989
|
+
}
|
|
16990
|
+
}
|
|
17026
16991
|
componentWillLoad() {
|
|
17027
16992
|
this._touched = this._touched === true;
|
|
17028
16993
|
this.controller.componentWillLoad();
|
|
@@ -17046,7 +17011,6 @@ class KolInputColor {
|
|
|
17046
17011
|
"_smartButton": ["validateSmartButton"],
|
|
17047
17012
|
"_suggestions": ["validateSuggestions"],
|
|
17048
17013
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
17049
|
-
"_tabIndex": ["validateTabIndex"],
|
|
17050
17014
|
"_touched": ["validateTouched"],
|
|
17051
17015
|
"_value": ["validateValue"]
|
|
17052
17016
|
}; }
|
|
@@ -17073,7 +17037,6 @@ class KolInputColor {
|
|
|
17073
17037
|
"_smartButton": [1, "_smart-button"],
|
|
17074
17038
|
"_suggestions": [1],
|
|
17075
17039
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
17076
|
-
"_tabIndex": [2, "_tab-index"],
|
|
17077
17040
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
17078
17041
|
"_touched": [1540],
|
|
17079
17042
|
"_value": [513],
|
|
@@ -17237,7 +17200,7 @@ InputDateController.isoTimeRegex = /^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/;
|
|
|
17237
17200
|
InputDateController.isoWeekRegex = /^\d{4}-W(?:[0-4]\d|5[0-3])$/;
|
|
17238
17201
|
InputDateController.DEFAULT_MAX_DATE = new Date(9999, 11, 31, 23, 59, 59);
|
|
17239
17202
|
|
|
17240
|
-
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.
|
|
17203
|
+
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}";
|
|
17241
17204
|
var KolInputDateDefaultStyle0 = defaultStyleCss$u;
|
|
17242
17205
|
|
|
17243
17206
|
class KolInputDate {
|
|
@@ -17285,7 +17248,7 @@ class KolInputDate {
|
|
|
17285
17248
|
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 });
|
|
17286
17249
|
}
|
|
17287
17250
|
render() {
|
|
17288
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
17251
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '9912a9d2bdfc1b20c8a230adb3ddee9bc0ac76b2' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '28e010d417be9bd11db007d3cc249f1454bc29b7', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '670d0d278fc42acf956088c2bed1aa1cb49b1f20' }, this.getInputProps())))));
|
|
17289
17252
|
}
|
|
17290
17253
|
constructor(hostRef) {
|
|
17291
17254
|
registerInstance(this, hostRef);
|
|
@@ -17341,7 +17304,6 @@ class KolInputDate {
|
|
|
17341
17304
|
this._suggestions = undefined;
|
|
17342
17305
|
this._syncValueBySelector = undefined;
|
|
17343
17306
|
this._step = undefined;
|
|
17344
|
-
this._tabIndex = undefined;
|
|
17345
17307
|
this._tooltipAlign = 'top';
|
|
17346
17308
|
this._touched = false;
|
|
17347
17309
|
this._type = 'date';
|
|
@@ -17424,9 +17386,6 @@ class KolInputDate {
|
|
|
17424
17386
|
validateSyncValueBySelector(value) {
|
|
17425
17387
|
this.controller.validateSyncValueBySelector(value);
|
|
17426
17388
|
}
|
|
17427
|
-
validateTabIndex(value) {
|
|
17428
|
-
this.controller.validateTabIndex(value);
|
|
17429
|
-
}
|
|
17430
17389
|
validateTouched(value) {
|
|
17431
17390
|
this.controller.validateTouched(value);
|
|
17432
17391
|
}
|
|
@@ -17473,7 +17432,6 @@ class KolInputDate {
|
|
|
17473
17432
|
"_suggestions": ["validateSuggestions"],
|
|
17474
17433
|
"_step": ["validateStep"],
|
|
17475
17434
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
17476
|
-
"_tabIndex": ["validateTabIndex"],
|
|
17477
17435
|
"_touched": ["validateTouched"],
|
|
17478
17436
|
"_type": ["validateType"],
|
|
17479
17437
|
"_value": ["validateValue"]
|
|
@@ -17506,7 +17464,6 @@ class KolInputDate {
|
|
|
17506
17464
|
"_suggestions": [1],
|
|
17507
17465
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
17508
17466
|
"_step": [2],
|
|
17509
|
-
"_tabIndex": [2, "_tab-index"],
|
|
17510
17467
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
17511
17468
|
"_touched": [1540],
|
|
17512
17469
|
"_type": [1],
|
|
@@ -17640,7 +17597,7 @@ class InputEmailController extends InputTextEmailController {
|
|
|
17640
17597
|
}
|
|
17641
17598
|
}
|
|
17642
17599
|
|
|
17643
|
-
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.
|
|
17600
|
+
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}";
|
|
17644
17601
|
var KolInputEmailDefaultStyle0 = defaultStyleCss$t;
|
|
17645
17602
|
|
|
17646
17603
|
class KolInputEmail {
|
|
@@ -17673,7 +17630,7 @@ class KolInputEmail {
|
|
|
17673
17630
|
} });
|
|
17674
17631
|
}
|
|
17675
17632
|
render() {
|
|
17676
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
17633
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'e842b53e938660d9a70ac2713284e03b4eb3f19a' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '369160e7fd2186c30e058a9c63b5e49fc9436931', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'f048e81903b7ec46d450d19444e1302f41a4fc53' }, this.getInputProps())))));
|
|
17677
17634
|
}
|
|
17678
17635
|
constructor(hostRef) {
|
|
17679
17636
|
registerInstance(this, hostRef);
|
|
@@ -17717,7 +17674,6 @@ class KolInputEmail {
|
|
|
17717
17674
|
this._smartButton = undefined;
|
|
17718
17675
|
this._suggestions = undefined;
|
|
17719
17676
|
this._syncValueBySelector = undefined;
|
|
17720
|
-
this._tabIndex = undefined;
|
|
17721
17677
|
this._tooltipAlign = 'top';
|
|
17722
17678
|
this._touched = false;
|
|
17723
17679
|
this._value = undefined;
|
|
@@ -17805,9 +17761,6 @@ class KolInputEmail {
|
|
|
17805
17761
|
validateSyncValueBySelector(value) {
|
|
17806
17762
|
this.controller.validateSyncValueBySelector(value);
|
|
17807
17763
|
}
|
|
17808
|
-
validateTabIndex(value) {
|
|
17809
|
-
this.controller.validateTabIndex(value);
|
|
17810
|
-
}
|
|
17811
17764
|
validateTouched(value) {
|
|
17812
17765
|
this.controller.validateTouched(value);
|
|
17813
17766
|
}
|
|
@@ -17846,7 +17799,6 @@ class KolInputEmail {
|
|
|
17846
17799
|
"_suggestions": ["validateSuggestions"],
|
|
17847
17800
|
"_smartButton": ["validateSmartButton"],
|
|
17848
17801
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
17849
|
-
"_tabIndex": ["validateTabIndex"],
|
|
17850
17802
|
"_touched": ["validateTouched"],
|
|
17851
17803
|
"_value": ["validateValue"]
|
|
17852
17804
|
}; }
|
|
@@ -17880,7 +17832,6 @@ class KolInputEmail {
|
|
|
17880
17832
|
"_smartButton": [1, "_smart-button"],
|
|
17881
17833
|
"_suggestions": [1],
|
|
17882
17834
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
17883
|
-
"_tabIndex": [2, "_tab-index"],
|
|
17884
17835
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
17885
17836
|
"_touched": [1540],
|
|
17886
17837
|
"_value": [1537],
|
|
@@ -17917,7 +17868,7 @@ class InputFileController extends InputIconController {
|
|
|
17917
17868
|
}
|
|
17918
17869
|
}
|
|
17919
17870
|
|
|
17920
|
-
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.
|
|
17871
|
+
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}";
|
|
17921
17872
|
var KolInputFileDefaultStyle0 = defaultStyleCss$s;
|
|
17922
17873
|
|
|
17923
17874
|
class KolInputFile {
|
|
@@ -17948,16 +17899,42 @@ class KolInputFile {
|
|
|
17948
17899
|
} });
|
|
17949
17900
|
}
|
|
17950
17901
|
render() {
|
|
17951
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
17902
|
+
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 }))));
|
|
17952
17903
|
}
|
|
17953
17904
|
constructor(hostRef) {
|
|
17954
17905
|
registerInstance(this, hostRef);
|
|
17955
17906
|
this.catchRef = (ref) => {
|
|
17956
17907
|
this.inputRef = ref;
|
|
17957
17908
|
};
|
|
17909
|
+
this.onDragOver = (event) => {
|
|
17910
|
+
var _a, _b, _c;
|
|
17911
|
+
event.preventDefault();
|
|
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.add('kol-input-container--is-dragover');
|
|
17913
|
+
};
|
|
17914
|
+
this.onDragLeave = () => {
|
|
17915
|
+
var _a, _b, _c;
|
|
17916
|
+
(_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');
|
|
17917
|
+
};
|
|
17918
|
+
this.onDrop = (event) => {
|
|
17919
|
+
var _a, _b, _c, _d;
|
|
17920
|
+
event.preventDefault();
|
|
17921
|
+
(_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');
|
|
17922
|
+
if ((_d = event.dataTransfer) === null || _d === void 0 ? void 0 : _d.files.length) {
|
|
17923
|
+
const files = event.dataTransfer.files;
|
|
17924
|
+
this.filename = Array.from(files)
|
|
17925
|
+
.map((file) => file.name)
|
|
17926
|
+
.join(', ');
|
|
17927
|
+
this.controller.setFormAssociatedValue(files);
|
|
17928
|
+
}
|
|
17929
|
+
};
|
|
17958
17930
|
this.onChange = (event) => {
|
|
17959
17931
|
if (this.inputRef instanceof HTMLInputElement && this.inputRef.type === 'file') {
|
|
17960
17932
|
const value = this.inputRef.files;
|
|
17933
|
+
this.filename = (value === null || value === void 0 ? void 0 : value.length)
|
|
17934
|
+
? Array.from(value)
|
|
17935
|
+
.map((file) => file.name)
|
|
17936
|
+
.join(', ')
|
|
17937
|
+
: translate('kol-filename-text');
|
|
17961
17938
|
this.controller.onFacade.onChange(event, value);
|
|
17962
17939
|
this.controller.setFormAssociatedValue(value);
|
|
17963
17940
|
}
|
|
@@ -17985,9 +17962,9 @@ class KolInputFile {
|
|
|
17985
17962
|
this._shortKey = undefined;
|
|
17986
17963
|
this._smartButton = undefined;
|
|
17987
17964
|
this._syncValueBySelector = undefined;
|
|
17988
|
-
this._tabIndex = undefined;
|
|
17989
17965
|
this._tooltipAlign = 'top';
|
|
17990
17966
|
this._touched = false;
|
|
17967
|
+
this.filename = translate('kol-filename-text');
|
|
17991
17968
|
this.state = {
|
|
17992
17969
|
_hideMsg: false,
|
|
17993
17970
|
_id: `id-${nonce()}`,
|
|
@@ -18050,9 +18027,6 @@ class KolInputFile {
|
|
|
18050
18027
|
validateSyncValueBySelector(value) {
|
|
18051
18028
|
this.controller.validateSyncValueBySelector(value);
|
|
18052
18029
|
}
|
|
18053
|
-
validateTabIndex(value) {
|
|
18054
|
-
this.controller.validateTabIndex(value);
|
|
18055
|
-
}
|
|
18056
18030
|
validateTouched(value) {
|
|
18057
18031
|
this.controller.validateTouched(value);
|
|
18058
18032
|
}
|
|
@@ -18060,6 +18034,13 @@ class KolInputFile {
|
|
|
18060
18034
|
this._touched = this._touched === true;
|
|
18061
18035
|
this.controller.componentWillLoad();
|
|
18062
18036
|
}
|
|
18037
|
+
componentDidLoad() {
|
|
18038
|
+
var _a, _b;
|
|
18039
|
+
const container = (_b = (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement;
|
|
18040
|
+
container === null || container === void 0 ? void 0 : container.addEventListener('dragover', this.onDragOver);
|
|
18041
|
+
container === null || container === void 0 ? void 0 : container.addEventListener('dragleave', this.onDragLeave);
|
|
18042
|
+
container === null || container === void 0 ? void 0 : container.addEventListener('drop', this.onDrop);
|
|
18043
|
+
}
|
|
18063
18044
|
static get delegatesFocus() { return true; }
|
|
18064
18045
|
get host() { return getElement(this); }
|
|
18065
18046
|
static get watchers() { return {
|
|
@@ -18080,7 +18061,6 @@ class KolInputFile {
|
|
|
18080
18061
|
"_shortKey": ["validateShortKey"],
|
|
18081
18062
|
"_smartButton": ["validateSmartButton"],
|
|
18082
18063
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
18083
|
-
"_tabIndex": ["validateTabIndex"],
|
|
18084
18064
|
"_touched": ["validateTouched"]
|
|
18085
18065
|
}; }
|
|
18086
18066
|
static get style() { return {
|
|
@@ -18107,9 +18087,9 @@ class KolInputFile {
|
|
|
18107
18087
|
"_shortKey": [1, "_short-key"],
|
|
18108
18088
|
"_smartButton": [1, "_smart-button"],
|
|
18109
18089
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
18110
|
-
"_tabIndex": [2, "_tab-index"],
|
|
18111
18090
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
18112
18091
|
"_touched": [1540],
|
|
18092
|
+
"filename": [32],
|
|
18113
18093
|
"state": [32],
|
|
18114
18094
|
"inputHasFocus": [32],
|
|
18115
18095
|
"getValue": [64],
|
|
@@ -18203,7 +18183,7 @@ class InputNumberController extends InputIconController {
|
|
|
18203
18183
|
}
|
|
18204
18184
|
}
|
|
18205
18185
|
|
|
18206
|
-
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.
|
|
18186
|
+
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}";
|
|
18207
18187
|
var KolInputNumberDefaultStyle0 = defaultStyleCss$r;
|
|
18208
18188
|
|
|
18209
18189
|
class KolInputNumber {
|
|
@@ -18236,7 +18216,7 @@ class KolInputNumber {
|
|
|
18236
18216
|
} });
|
|
18237
18217
|
}
|
|
18238
18218
|
render() {
|
|
18239
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
18219
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '56dad7cc43b19c34fe38c7cdd5a8e5d36902a924' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'fbcc6e3fd5d51d64cf022bfa5bd8f84712c69354', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '099d76ef245d59934481bbeddadaa5a38e11ea3d' }, this.getInputProps())))));
|
|
18240
18220
|
}
|
|
18241
18221
|
constructor(hostRef) {
|
|
18242
18222
|
registerInstance(this, hostRef);
|
|
@@ -18278,7 +18258,6 @@ class KolInputNumber {
|
|
|
18278
18258
|
this._suggestions = undefined;
|
|
18279
18259
|
this._step = undefined;
|
|
18280
18260
|
this._syncValueBySelector = undefined;
|
|
18281
|
-
this._tabIndex = undefined;
|
|
18282
18261
|
this._tooltipAlign = 'top';
|
|
18283
18262
|
this._touched = false;
|
|
18284
18263
|
this._value = undefined;
|
|
@@ -18362,9 +18341,6 @@ class KolInputNumber {
|
|
|
18362
18341
|
validateSyncValueBySelector(value) {
|
|
18363
18342
|
this.controller.validateSyncValueBySelector(value);
|
|
18364
18343
|
}
|
|
18365
|
-
validateTabIndex(value) {
|
|
18366
|
-
this.controller.validateTabIndex(value);
|
|
18367
|
-
}
|
|
18368
18344
|
validateTouched(value) {
|
|
18369
18345
|
this.controller.validateTouched(value);
|
|
18370
18346
|
}
|
|
@@ -18402,7 +18378,6 @@ class KolInputNumber {
|
|
|
18402
18378
|
"_suggestions": ["validateSuggestions"],
|
|
18403
18379
|
"_step": ["validateStep"],
|
|
18404
18380
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
18405
|
-
"_tabIndex": ["validateTabIndex"],
|
|
18406
18381
|
"_touched": ["validateTouched"],
|
|
18407
18382
|
"_value": ["validateValue"]
|
|
18408
18383
|
}; }
|
|
@@ -18435,7 +18410,6 @@ class KolInputNumber {
|
|
|
18435
18410
|
"_suggestions": [1],
|
|
18436
18411
|
"_step": [2],
|
|
18437
18412
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
18438
|
-
"_tabIndex": [2, "_tab-index"],
|
|
18439
18413
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
18440
18414
|
"_touched": [1540],
|
|
18441
18415
|
"_value": [1538],
|
|
@@ -18450,7 +18424,7 @@ class KolInputNumber {
|
|
|
18450
18424
|
}; }
|
|
18451
18425
|
}
|
|
18452
18426
|
|
|
18453
|
-
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.
|
|
18427
|
+
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}";
|
|
18454
18428
|
var KolInputPasswordDefaultStyle0 = defaultStyleCss$q;
|
|
18455
18429
|
|
|
18456
18430
|
class KolInputPassword {
|
|
@@ -18493,7 +18467,7 @@ class KolInputPassword {
|
|
|
18493
18467
|
}, icon: `codicon codicon-eye-${this._passwordVisible ? 'closed' : 'watch'}`, disabled: this._disabled }));
|
|
18494
18468
|
}
|
|
18495
18469
|
render() {
|
|
18496
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
18470
|
+
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())))));
|
|
18497
18471
|
}
|
|
18498
18472
|
constructor(hostRef) {
|
|
18499
18473
|
registerInstance(this, hostRef);
|
|
@@ -18535,7 +18509,6 @@ class KolInputPassword {
|
|
|
18535
18509
|
this._shortKey = undefined;
|
|
18536
18510
|
this._smartButton = undefined;
|
|
18537
18511
|
this._syncValueBySelector = undefined;
|
|
18538
|
-
this._tabIndex = undefined;
|
|
18539
18512
|
this._tooltipAlign = 'top';
|
|
18540
18513
|
this._touched = false;
|
|
18541
18514
|
this._value = undefined;
|
|
@@ -18625,9 +18598,6 @@ class KolInputPassword {
|
|
|
18625
18598
|
validateSyncValueBySelector(value) {
|
|
18626
18599
|
this.controller.validateSyncValueBySelector(value);
|
|
18627
18600
|
}
|
|
18628
|
-
validateTabIndex(value) {
|
|
18629
|
-
this.controller.validateTabIndex(value);
|
|
18630
|
-
}
|
|
18631
18601
|
validateTouched(value) {
|
|
18632
18602
|
this.controller.validateTouched(value);
|
|
18633
18603
|
}
|
|
@@ -18665,7 +18635,6 @@ class KolInputPassword {
|
|
|
18665
18635
|
"_shortKey": ["validateShortKey"],
|
|
18666
18636
|
"_smartButton": ["validateSmartButton"],
|
|
18667
18637
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
18668
|
-
"_tabIndex": ["validateTabIndex"],
|
|
18669
18638
|
"_touched": ["validateTouched"],
|
|
18670
18639
|
"_value": ["validateValue"]
|
|
18671
18640
|
}; }
|
|
@@ -18697,7 +18666,6 @@ class KolInputPassword {
|
|
|
18697
18666
|
"_shortKey": [1, "_short-key"],
|
|
18698
18667
|
"_smartButton": [1, "_smart-button"],
|
|
18699
18668
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
18700
|
-
"_tabIndex": [2, "_tab-index"],
|
|
18701
18669
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
18702
18670
|
"_touched": [1540],
|
|
18703
18671
|
"_value": [1537],
|
|
@@ -18714,7 +18682,7 @@ class KolInputPassword {
|
|
|
18714
18682
|
}; }
|
|
18715
18683
|
}
|
|
18716
18684
|
|
|
18717
|
-
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}";
|
|
18685
|
+
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}";
|
|
18718
18686
|
var KolInputRadioDefaultStyle0 = defaultStyleCss$p;
|
|
18719
18687
|
|
|
18720
18688
|
class KolInputRadio {
|
|
@@ -18743,7 +18711,7 @@ class KolInputRadio {
|
|
|
18743
18711
|
};
|
|
18744
18712
|
}
|
|
18745
18713
|
render() {
|
|
18746
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
18714
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'ca3fb9fac13602ade77aaefdaa4080bc7bea9d87' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
|
|
18747
18715
|
}
|
|
18748
18716
|
getOptionProps(option, id) {
|
|
18749
18717
|
const obj = {
|
|
@@ -18826,7 +18794,6 @@ class KolInputRadio {
|
|
|
18826
18794
|
this._required = false;
|
|
18827
18795
|
this._shortKey = undefined;
|
|
18828
18796
|
this._syncValueBySelector = undefined;
|
|
18829
|
-
this._tabIndex = undefined;
|
|
18830
18797
|
this._tooltipAlign = 'top';
|
|
18831
18798
|
this._touched = false;
|
|
18832
18799
|
this._value = undefined;
|
|
@@ -18891,9 +18858,6 @@ class KolInputRadio {
|
|
|
18891
18858
|
validateSyncValueBySelector(value) {
|
|
18892
18859
|
this.controller.validateSyncValueBySelector(value);
|
|
18893
18860
|
}
|
|
18894
|
-
validateTabIndex(value) {
|
|
18895
|
-
this.controller.validateTabIndex(value);
|
|
18896
|
-
}
|
|
18897
18861
|
validateTouched(value) {
|
|
18898
18862
|
this.controller.validateTouched(value);
|
|
18899
18863
|
}
|
|
@@ -18923,7 +18887,6 @@ class KolInputRadio {
|
|
|
18923
18887
|
"_required": ["validateRequired"],
|
|
18924
18888
|
"_shortKey": ["validateShortKey"],
|
|
18925
18889
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
18926
|
-
"_tabIndex": ["validateTabIndex"],
|
|
18927
18890
|
"_touched": ["validateTouched"],
|
|
18928
18891
|
"_value": ["validateValue"]
|
|
18929
18892
|
}; }
|
|
@@ -18949,7 +18912,6 @@ class KolInputRadio {
|
|
|
18949
18912
|
"_required": [4],
|
|
18950
18913
|
"_shortKey": [1, "_short-key"],
|
|
18951
18914
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
18952
|
-
"_tabIndex": [2, "_tab-index"],
|
|
18953
18915
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
18954
18916
|
"_touched": [1540],
|
|
18955
18917
|
"_value": [1544],
|
|
@@ -19000,7 +18962,7 @@ class InputRangeController extends InputIconController {
|
|
|
19000
18962
|
}
|
|
19001
18963
|
}
|
|
19002
18964
|
|
|
19003
|
-
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.
|
|
18965
|
+
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}";
|
|
19004
18966
|
var KolInputRangeDefaultStyle0 = defaultStyleCss$o;
|
|
19005
18967
|
|
|
19006
18968
|
class KolInputRange {
|
|
@@ -19063,7 +19025,7 @@ class KolInputRange {
|
|
|
19063
19025
|
const inputsWrapperStyle = {
|
|
19064
19026
|
'--kolibri-input-range--input-number--width': `calc(${String((_a = this.state._max) !== null && _a !== void 0 ? _a : 1000).length}ch + 1.5em)`,
|
|
19065
19027
|
};
|
|
19066
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
19028
|
+
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 }))));
|
|
19067
19029
|
}
|
|
19068
19030
|
constructor(hostRef) {
|
|
19069
19031
|
registerInstance(this, hostRef);
|
|
@@ -19113,7 +19075,6 @@ class KolInputRange {
|
|
|
19113
19075
|
this._step = undefined;
|
|
19114
19076
|
this._suggestions = undefined;
|
|
19115
19077
|
this._syncValueBySelector = undefined;
|
|
19116
|
-
this._tabIndex = undefined;
|
|
19117
19078
|
this._tooltipAlign = 'top';
|
|
19118
19079
|
this._touched = false;
|
|
19119
19080
|
this._value = undefined;
|
|
@@ -19184,9 +19145,6 @@ class KolInputRange {
|
|
|
19184
19145
|
validateSyncValueBySelector(value) {
|
|
19185
19146
|
this.controller.validateSyncValueBySelector(value);
|
|
19186
19147
|
}
|
|
19187
|
-
validateTabIndex(value) {
|
|
19188
|
-
this.controller.validateTabIndex(value);
|
|
19189
|
-
}
|
|
19190
19148
|
validateTouched(value) {
|
|
19191
19149
|
this.controller.validateTouched(value);
|
|
19192
19150
|
}
|
|
@@ -19218,7 +19176,6 @@ class KolInputRange {
|
|
|
19218
19176
|
"_step": ["validateStep"],
|
|
19219
19177
|
"_suggestions": ["validateSuggestions"],
|
|
19220
19178
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
19221
|
-
"_tabIndex": ["validateTabIndex"],
|
|
19222
19179
|
"_touched": ["validateTouched"],
|
|
19223
19180
|
"_value": ["validateValue"]
|
|
19224
19181
|
}; }
|
|
@@ -19247,7 +19204,6 @@ class KolInputRange {
|
|
|
19247
19204
|
"_step": [2],
|
|
19248
19205
|
"_suggestions": [1],
|
|
19249
19206
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
19250
|
-
"_tabIndex": [2, "_tab-index"],
|
|
19251
19207
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
19252
19208
|
"_touched": [1540],
|
|
19253
19209
|
"_value": [1538],
|
|
@@ -19262,7 +19218,7 @@ class KolInputRange {
|
|
|
19262
19218
|
}; }
|
|
19263
19219
|
}
|
|
19264
19220
|
|
|
19265
|
-
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.
|
|
19221
|
+
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}";
|
|
19266
19222
|
var KolInputTextDefaultStyle0 = defaultStyleCss$n;
|
|
19267
19223
|
|
|
19268
19224
|
class KolInputText {
|
|
@@ -19289,7 +19245,7 @@ class KolInputText {
|
|
|
19289
19245
|
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 });
|
|
19290
19246
|
}
|
|
19291
19247
|
render() {
|
|
19292
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
19248
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '969dad6773e87aad3880e2788cfc0a75ba69f595' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '0a18924294df1f16046e5300424cb6295cddb540', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '6ff75757597a63bdd977320509afde8627a6b7c4' }, this.getInputProps())))));
|
|
19293
19249
|
}
|
|
19294
19250
|
constructor(hostRef) {
|
|
19295
19251
|
registerInstance(this, hostRef);
|
|
@@ -19350,7 +19306,6 @@ class KolInputText {
|
|
|
19350
19306
|
this._suggestions = undefined;
|
|
19351
19307
|
this._smartButton = undefined;
|
|
19352
19308
|
this._syncValueBySelector = undefined;
|
|
19353
|
-
this._tabIndex = undefined;
|
|
19354
19309
|
this._tooltipAlign = 'top';
|
|
19355
19310
|
this._touched = false;
|
|
19356
19311
|
this._type = 'text';
|
|
@@ -19440,9 +19395,6 @@ class KolInputText {
|
|
|
19440
19395
|
validateSyncValueBySelector(value) {
|
|
19441
19396
|
this.controller.validateSyncValueBySelector(value);
|
|
19442
19397
|
}
|
|
19443
|
-
validateTabIndex(value) {
|
|
19444
|
-
this.controller.validateTabIndex(value);
|
|
19445
|
-
}
|
|
19446
19398
|
validateTouched(value) {
|
|
19447
19399
|
this.controller.validateTouched(value);
|
|
19448
19400
|
}
|
|
@@ -19486,7 +19438,6 @@ class KolInputText {
|
|
|
19486
19438
|
"_suggestions": ["validateSuggestions"],
|
|
19487
19439
|
"_smartButton": ["validateSmartButton"],
|
|
19488
19440
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
19489
|
-
"_tabIndex": ["validateTabIndex"],
|
|
19490
19441
|
"_touched": ["validateTouched"],
|
|
19491
19442
|
"_type": ["validateType"],
|
|
19492
19443
|
"_value": ["validateValue"]
|
|
@@ -19521,7 +19472,6 @@ class KolInputText {
|
|
|
19521
19472
|
"_suggestions": [1],
|
|
19522
19473
|
"_smartButton": [1, "_smart-button"],
|
|
19523
19474
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
19524
|
-
"_tabIndex": [2, "_tab-index"],
|
|
19525
19475
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
19526
19476
|
"_touched": [1540],
|
|
19527
19477
|
"_type": [1],
|
|
@@ -19537,108 +19487,6 @@ class KolInputText {
|
|
|
19537
19487
|
}; }
|
|
19538
19488
|
}
|
|
19539
19489
|
|
|
19540
|
-
class KolInputWc {
|
|
19541
|
-
constructor(hostRef) {
|
|
19542
|
-
registerInstance(this, hostRef);
|
|
19543
|
-
this.slotName = 'input';
|
|
19544
|
-
this.catchInputSlot = (slot) => {
|
|
19545
|
-
handleSlotContent(this.host, slot, this.slotName);
|
|
19546
|
-
};
|
|
19547
|
-
this._accessKey = undefined;
|
|
19548
|
-
this._alert = true;
|
|
19549
|
-
this._currentLength = undefined;
|
|
19550
|
-
this._disabled = false;
|
|
19551
|
-
this._hasCounter = false;
|
|
19552
|
-
this._hideMsg = false;
|
|
19553
|
-
this._hideLabel = false;
|
|
19554
|
-
this._hint = '';
|
|
19555
|
-
this._icons = undefined;
|
|
19556
|
-
this._id = undefined;
|
|
19557
|
-
this._label = undefined;
|
|
19558
|
-
this._maxLength = undefined;
|
|
19559
|
-
this._msg = undefined;
|
|
19560
|
-
this._readOnly = false;
|
|
19561
|
-
this._renderNoLabel = false;
|
|
19562
|
-
this._required = false;
|
|
19563
|
-
this._shortKey = undefined;
|
|
19564
|
-
this._slotName = undefined;
|
|
19565
|
-
this._suggestions = undefined;
|
|
19566
|
-
this._smartButton = undefined;
|
|
19567
|
-
this._tooltipAlign = 'top';
|
|
19568
|
-
this._touched = false;
|
|
19569
|
-
}
|
|
19570
|
-
componentWillRender() {
|
|
19571
|
-
this.slotName = this._slotName ? this._slotName : 'input';
|
|
19572
|
-
}
|
|
19573
|
-
getIconStyles(icon) {
|
|
19574
|
-
return icon && typeof icon === 'object' && icon.style ? icon.style : {};
|
|
19575
|
-
}
|
|
19576
|
-
render() {
|
|
19577
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
19578
|
-
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;
|
|
19579
|
-
const showMsg = hasValidMsg && (this._touched === true || ((_c = this._msg) === null || _c === void 0 ? void 0 : _c._type) !== 'error');
|
|
19580
|
-
const hasExpertSlot = showExpertSlot(this._label);
|
|
19581
|
-
const hasHint = typeof this._hint === 'string' && this._hint.length > 0;
|
|
19582
|
-
const useTooltipInsteadOfLabel = !hasExpertSlot && this._hideLabel;
|
|
19583
|
-
return (hAsync(Host, { key: '895d1db912502217a9188a8fffb5eee5a515002a', class: clsx('kol-input', this.getModifierClassNameByMsgType(showMsg), {
|
|
19584
|
-
disabled: this._disabled === true,
|
|
19585
|
-
[((_d = this._msg) === null || _d === void 0 ? void 0 : _d._type) || 'error']: showMsg === true,
|
|
19586
|
-
'read-only': this._readOnly === true,
|
|
19587
|
-
required: this._required === true,
|
|
19588
|
-
touched: this._touched === true,
|
|
19589
|
-
'hidden-msg': this._hideMsg === true,
|
|
19590
|
-
}) }, 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: {
|
|
19591
|
-
input: true,
|
|
19592
|
-
'icon-left': typeof ((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) === 'object',
|
|
19593
|
-
'icon-right': typeof ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) === 'object',
|
|
19594
|
-
} }, ((_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'))))));
|
|
19595
|
-
}
|
|
19596
|
-
getModifierClassNameByMsgType(showMsg) {
|
|
19597
|
-
var _a, _b;
|
|
19598
|
-
if (showMsg && ((_a = this._msg) === null || _a === void 0 ? void 0 : _a._type)) {
|
|
19599
|
-
return {
|
|
19600
|
-
default: 'msg-type-default',
|
|
19601
|
-
info: 'msg-type-info',
|
|
19602
|
-
success: 'msg-type-success',
|
|
19603
|
-
warning: 'msg-type-warning',
|
|
19604
|
-
error: 'msg-type-error',
|
|
19605
|
-
}[(_b = this._msg) === null || _b === void 0 ? void 0 : _b._type];
|
|
19606
|
-
}
|
|
19607
|
-
}
|
|
19608
|
-
get host() { return getElement(this); }
|
|
19609
|
-
static get cmpMeta() { return {
|
|
19610
|
-
"$flags$": 4,
|
|
19611
|
-
"$tagName$": "kol-input",
|
|
19612
|
-
"$members$": {
|
|
19613
|
-
"_accessKey": [1, "_access-key"],
|
|
19614
|
-
"_alert": [4],
|
|
19615
|
-
"_currentLength": [2, "_current-length"],
|
|
19616
|
-
"_disabled": [4],
|
|
19617
|
-
"_hasCounter": [4, "_has-counter"],
|
|
19618
|
-
"_hideMsg": [4, "_hide-msg"],
|
|
19619
|
-
"_hideLabel": [4, "_hide-label"],
|
|
19620
|
-
"_hint": [1],
|
|
19621
|
-
"_icons": [16],
|
|
19622
|
-
"_id": [1],
|
|
19623
|
-
"_label": [1],
|
|
19624
|
-
"_maxLength": [2, "_max-length"],
|
|
19625
|
-
"_msg": [16],
|
|
19626
|
-
"_readOnly": [4, "_read-only"],
|
|
19627
|
-
"_renderNoLabel": [4, "_render-no-label"],
|
|
19628
|
-
"_required": [4],
|
|
19629
|
-
"_shortKey": [1, "_short-key"],
|
|
19630
|
-
"_slotName": [1, "_slot-name"],
|
|
19631
|
-
"_suggestions": [1],
|
|
19632
|
-
"_smartButton": [1, "_smart-button"],
|
|
19633
|
-
"_tooltipAlign": [1, "_tooltip-align"],
|
|
19634
|
-
"_touched": [4]
|
|
19635
|
-
},
|
|
19636
|
-
"$listeners$": undefined,
|
|
19637
|
-
"$lazyBundleId$": "-",
|
|
19638
|
-
"$attrsToReflect$": []
|
|
19639
|
-
}; }
|
|
19640
|
-
}
|
|
19641
|
-
|
|
19642
19490
|
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}";
|
|
19643
19491
|
var KolKolibriDefaultStyle0 = defaultStyleCss$m;
|
|
19644
19492
|
|
|
@@ -19671,7 +19519,7 @@ class KolKolibri {
|
|
|
19671
19519
|
}
|
|
19672
19520
|
render() {
|
|
19673
19521
|
const fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
|
|
19674
|
-
return (hAsync("svg", { key: '
|
|
19522
|
+
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"))));
|
|
19675
19523
|
}
|
|
19676
19524
|
validateColor(value) {
|
|
19677
19525
|
validateColor(this, value, {
|
|
@@ -19711,7 +19559,7 @@ class KolKolibri {
|
|
|
19711
19559
|
}; }
|
|
19712
19560
|
}
|
|
19713
19561
|
|
|
19714
|
-
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.
|
|
19562
|
+
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}";
|
|
19715
19563
|
var KolLinkDefaultStyle0 = defaultStyleCss$l;
|
|
19716
19564
|
|
|
19717
19565
|
class KolLink {
|
|
@@ -19732,7 +19580,6 @@ class KolLink {
|
|
|
19732
19580
|
this._on = undefined;
|
|
19733
19581
|
this._role = undefined;
|
|
19734
19582
|
this._shortKey = undefined;
|
|
19735
|
-
this._tabIndex = undefined;
|
|
19736
19583
|
this._target = undefined;
|
|
19737
19584
|
this._tooltipAlign = 'right';
|
|
19738
19585
|
}
|
|
@@ -19741,7 +19588,7 @@ class KolLink {
|
|
|
19741
19588
|
await ((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
19742
19589
|
}
|
|
19743
19590
|
render() {
|
|
19744
|
-
return (hAsync(KolLinkWcTag, { key: '
|
|
19591
|
+
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" })));
|
|
19745
19592
|
}
|
|
19746
19593
|
static get delegatesFocus() { return true; }
|
|
19747
19594
|
static get style() { return {
|
|
@@ -19763,7 +19610,6 @@ class KolLink {
|
|
|
19763
19610
|
"_on": [16],
|
|
19764
19611
|
"_role": [1],
|
|
19765
19612
|
"_shortKey": [1, "_short-key"],
|
|
19766
|
-
"_tabIndex": [2, "_tab-index"],
|
|
19767
19613
|
"_target": [1],
|
|
19768
19614
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
19769
19615
|
"kolFocus": [64]
|
|
@@ -19774,7 +19620,7 @@ class KolLink {
|
|
|
19774
19620
|
}; }
|
|
19775
19621
|
}
|
|
19776
19622
|
|
|
19777
|
-
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.
|
|
19623
|
+
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}";
|
|
19778
19624
|
var KolLinkButtonDefaultStyle0 = defaultStyleCss$k;
|
|
19779
19625
|
|
|
19780
19626
|
class KolLinkButton {
|
|
@@ -19796,7 +19642,6 @@ class KolLinkButton {
|
|
|
19796
19642
|
this._on = undefined;
|
|
19797
19643
|
this._role = undefined;
|
|
19798
19644
|
this._shortKey = undefined;
|
|
19799
|
-
this._tabIndex = undefined;
|
|
19800
19645
|
this._target = undefined;
|
|
19801
19646
|
this._tooltipAlign = 'right';
|
|
19802
19647
|
this._variant = 'normal';
|
|
@@ -19806,7 +19651,7 @@ class KolLinkButton {
|
|
|
19806
19651
|
await ((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
|
|
19807
19652
|
}
|
|
19808
19653
|
render() {
|
|
19809
|
-
return (hAsync(KolLinkWcTag, { key: '
|
|
19654
|
+
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" })));
|
|
19810
19655
|
}
|
|
19811
19656
|
static get delegatesFocus() { return true; }
|
|
19812
19657
|
static get style() { return {
|
|
@@ -19829,7 +19674,6 @@ class KolLinkButton {
|
|
|
19829
19674
|
"_on": [16],
|
|
19830
19675
|
"_role": [1],
|
|
19831
19676
|
"_shortKey": [1, "_short-key"],
|
|
19832
|
-
"_tabIndex": [2, "_tab-index"],
|
|
19833
19677
|
"_target": [1],
|
|
19834
19678
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
19835
19679
|
"_variant": [1],
|
|
@@ -19920,7 +19764,7 @@ class KolLinkWc {
|
|
|
19920
19764
|
const { isExternal, tagAttrs } = this.getRenderValues();
|
|
19921
19765
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
19922
19766
|
const hasAriaDescription = Boolean((_b = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length);
|
|
19923
|
-
return (hAsync(Host, { key: '
|
|
19767
|
+
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'
|
|
19924
19768
|
? `${this.state._label}${isExternal ? ` (${translate('kol-open-link-in-tab')})` : ''}`
|
|
19925
19769
|
: undefined, class: clsx('kol-link', {
|
|
19926
19770
|
'kol-link--disabled': this.state._disabled === true,
|
|
@@ -19928,7 +19772,7 @@ class KolLinkWc {
|
|
|
19928
19772
|
'kol-link--hide-label': this.state._hideLabel === true,
|
|
19929
19773
|
[`kol-link--${this.state._variant}`]: this.state._role === 'button' && this.state._variant !== 'custom',
|
|
19930
19774
|
[this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
19931
|
-
}) }, 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: '
|
|
19775
|
+
}) }, 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))));
|
|
19932
19776
|
}
|
|
19933
19777
|
validateAccessKey(value) {
|
|
19934
19778
|
validateAccessKey(this, value);
|
|
@@ -20080,7 +19924,7 @@ const validateModalVariant = (component, value) => {
|
|
|
20080
19924
|
watchValidator(component, '_variant', (value) => typeof value === 'string' && ModalVariantPropTypeOptions.includes(value), new Set(ModalVariantPropTypeOptions), value);
|
|
20081
19925
|
};
|
|
20082
19926
|
|
|
20083
|
-
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.
|
|
19927
|
+
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}";
|
|
20084
19928
|
var KolModalDefaultStyle0 = defaultStyleCss$j;
|
|
20085
19929
|
|
|
20086
19930
|
class KolModal {
|
|
@@ -20119,11 +19963,11 @@ class KolModal {
|
|
|
20119
19963
|
(_b = (_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
20120
19964
|
}
|
|
20121
19965
|
render() {
|
|
20122
|
-
return (hAsync("dialog", { key: '
|
|
19966
|
+
return (hAsync("dialog", { key: 'a7746d9555c2d6e0172e184e370562e7bf7d8967', class: clsx('kol-modal', { 'kol-modal__card': this.state._variant === 'card' }), ref: (el) => {
|
|
20123
19967
|
this.refDialog = el;
|
|
20124
19968
|
}, style: {
|
|
20125
19969
|
width: this.state._width,
|
|
20126
|
-
}, "aria-label": this.state._label, onClose: this.handleNativeCloseEvent.bind(this) }, hAsync("div", { key: '
|
|
19970
|
+
}, "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: {
|
|
20127
19971
|
left: {
|
|
20128
19972
|
icon: 'codicon codicon-close',
|
|
20129
19973
|
},
|
|
@@ -20185,7 +20029,7 @@ class KolModal {
|
|
|
20185
20029
|
}; }
|
|
20186
20030
|
}
|
|
20187
20031
|
|
|
20188
|
-
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.
|
|
20032
|
+
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}";
|
|
20189
20033
|
var KolNavDefaultStyle0 = defaultStyleCss$i;
|
|
20190
20034
|
|
|
20191
20035
|
const entryIsLink = (entryProps) => {
|
|
@@ -20300,9 +20144,9 @@ class KolNav {
|
|
|
20300
20144
|
const collapsible = this.state._collapsible === true;
|
|
20301
20145
|
const hideLabel = this.state._hideLabel === true;
|
|
20302
20146
|
const orientation = this.state._orientation;
|
|
20303
|
-
return (hAsync("div", { key: '
|
|
20147
|
+
return (hAsync("div", { key: '52f1ba2a69870cd208aa9514b5cf8b4a99c8d3ab', class: clsx('kol-nav', `kol-nav--${orientation}`, {
|
|
20304
20148
|
'kol-nav--is-compact': this.state._hideLabel,
|
|
20305
|
-
}) }, hAsync("nav", { key: '
|
|
20149
|
+
}) }, 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: {
|
|
20306
20150
|
onClick: () => {
|
|
20307
20151
|
this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel === false });
|
|
20308
20152
|
},
|
|
@@ -20383,7 +20227,7 @@ class KolNav {
|
|
|
20383
20227
|
}; }
|
|
20384
20228
|
}
|
|
20385
20229
|
|
|
20386
|
-
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.
|
|
20230
|
+
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}";
|
|
20387
20231
|
var KolPaginationDefaultStyle0 = defaultStyleCss$h;
|
|
20388
20232
|
|
|
20389
20233
|
const leftDoubleArrowIcon = {
|
|
@@ -22911,7 +22755,7 @@ class KolPopover {
|
|
|
22911
22755
|
});
|
|
22912
22756
|
}
|
|
22913
22757
|
render() {
|
|
22914
|
-
return (hAsync(Host, { key: '
|
|
22758
|
+
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' }))));
|
|
22915
22759
|
}
|
|
22916
22760
|
validateAlign(value) {
|
|
22917
22761
|
validateAlign(this, value);
|
|
@@ -22948,7 +22792,7 @@ class KolPopover {
|
|
|
22948
22792
|
}; }
|
|
22949
22793
|
}
|
|
22950
22794
|
|
|
22951
|
-
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.
|
|
22795
|
+
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}";
|
|
22952
22796
|
var KolPopoverButtonDefaultStyle0 = defaultStyleCss$g;
|
|
22953
22797
|
|
|
22954
22798
|
class KolPopoverButton {
|
|
@@ -23019,7 +22863,7 @@ class KolPopoverButton {
|
|
|
23019
22863
|
(_b = this.refPopover) === null || _b === void 0 ? void 0 : _b.removeEventListener('beforetoggle', this.handleBeforeToggle.bind(this));
|
|
23020
22864
|
}
|
|
23021
22865
|
render() {
|
|
23022
|
-
return (hAsync("div", { key: '
|
|
22866
|
+
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' }))));
|
|
23023
22867
|
}
|
|
23024
22868
|
validatePopoverAlign(value) {
|
|
23025
22869
|
validatePopoverAlign(this, value);
|
|
@@ -23068,21 +22912,17 @@ class KolPopoverButton {
|
|
|
23068
22912
|
}; }
|
|
23069
22913
|
}
|
|
23070
22914
|
|
|
23071
|
-
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
|
|
22915
|
+
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}";
|
|
23072
22916
|
var KolProgressDefaultStyle0 = defaultStyleCss$f;
|
|
23073
22917
|
|
|
23074
22918
|
const VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);
|
|
23075
22919
|
const CycleSvg = ({ state }) => {
|
|
23076
22920
|
const fullCircle = 342;
|
|
23077
|
-
|
|
23078
|
-
const textPositionBottom = '57%';
|
|
23079
|
-
const valueY = state._label ? textPositionBottom : '50%';
|
|
23080
|
-
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)));
|
|
22921
|
+
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" })));
|
|
23081
22922
|
};
|
|
23082
22923
|
const BarSvg = ({ state }) => {
|
|
23083
|
-
const textLabelPadding = 'var(--kolibri-text-label-padding, 45px)';
|
|
23084
22924
|
const percentage = 100 * (state._value / state._max);
|
|
23085
|
-
return (hAsync("
|
|
22925
|
+
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)` } })));
|
|
23086
22926
|
};
|
|
23087
22927
|
const createProgressSVG = (state) => {
|
|
23088
22928
|
switch (state._variant) {
|
|
@@ -23094,7 +22934,7 @@ const createProgressSVG = (state) => {
|
|
|
23094
22934
|
throw new Error(`Progress variant ${state._variant} not implemented.`);
|
|
23095
22935
|
}
|
|
23096
22936
|
};
|
|
23097
|
-
class
|
|
22937
|
+
class KolProgress {
|
|
23098
22938
|
constructor(hostRef) {
|
|
23099
22939
|
registerInstance(this, hostRef);
|
|
23100
22940
|
this._label = undefined;
|
|
@@ -23111,7 +22951,13 @@ class KolProcess {
|
|
|
23111
22951
|
};
|
|
23112
22952
|
}
|
|
23113
22953
|
render() {
|
|
23114
|
-
|
|
22954
|
+
const isPercentage = this.state._unit === '%';
|
|
22955
|
+
const liveProgressValue = isPercentage ? `${Math.round((this.state._liveValue / this.state._max) * 100)}` : this.state._liveValue;
|
|
22956
|
+
const displayValue = isPercentage ? Math.round((this.state._value / this.state._max) * 100) : this.state._value;
|
|
22957
|
+
return (hAsync("div", { key: 'a3cb72fa70f83e640758aa2a9a9b05f3144586d1', class: "kol-progress" }, hAsync("div", { key: '3f9f7a83fa9fe5f0e01ab96051b0f058afeb6ba0', "aria-hidden": "true", class: {
|
|
22958
|
+
'kol-progress__cycle': this.state._variant === 'cycle',
|
|
22959
|
+
'kol-progress__bar': this.state._variant === 'bar',
|
|
22960
|
+
} }, 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}`)));
|
|
23115
22961
|
}
|
|
23116
22962
|
validateLabel(value) {
|
|
23117
22963
|
validateLabel(this, value);
|
|
@@ -23144,6 +22990,7 @@ class KolProcess {
|
|
|
23144
22990
|
this.validateUnit(this._unit);
|
|
23145
22991
|
this.validateValue(this._value);
|
|
23146
22992
|
this.validateVariant(this._variant);
|
|
22993
|
+
this.state = Object.assign(Object.assign({}, this.state), { _liveValue: this.state._value });
|
|
23147
22994
|
this.interval = setInterval(() => {
|
|
23148
22995
|
if (this.state._liveValue !== this.state._value) {
|
|
23149
22996
|
this.state = Object.assign(Object.assign({}, this.state), { _liveValue: this.state._value });
|
|
@@ -23220,7 +23067,7 @@ class KolQuote {
|
|
|
23220
23067
|
}
|
|
23221
23068
|
render() {
|
|
23222
23069
|
const hasExpertSlot = showExpertSlot(this.state._quote);
|
|
23223
|
-
return (hAsync("figure", { key: '
|
|
23070
|
+
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" }))))));
|
|
23224
23071
|
}
|
|
23225
23072
|
static get watchers() { return {
|
|
23226
23073
|
"_label": ["validateLabel"],
|
|
@@ -23338,7 +23185,7 @@ const NativeOptionFc = (_a) => {
|
|
|
23338
23185
|
return (hAsync("option", Object.assign({ class: clsx(`${baseClassName}__option`, {
|
|
23339
23186
|
[`${baseClassName}__option--selected`]: isSelected,
|
|
23340
23187
|
[`${baseClassName}__option--disabled`]: disabled,
|
|
23341
|
-
}, classNames), selected: isSelected, disabled: disabled, value: index || value }, other), label));
|
|
23188
|
+
}, classNames), selected: isSelected, disabled: disabled, "aria-hidden": disabled ? 'true' : undefined, value: index || value }, other), label));
|
|
23342
23189
|
};
|
|
23343
23190
|
var NativeOptionFc$1 = NativeOptionFc;
|
|
23344
23191
|
|
|
@@ -23366,7 +23213,7 @@ var NativeOptionListFc$1 = NativeOptionListFc;
|
|
|
23366
23213
|
|
|
23367
23214
|
const NativeSelectFc = (props) => {
|
|
23368
23215
|
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"]);
|
|
23369
|
-
const showMsg =
|
|
23216
|
+
const showMsg = checkHasMsg(msg, touched);
|
|
23370
23217
|
const stateCssClasses = {
|
|
23371
23218
|
['kol-select--disabled']: Boolean(disabled),
|
|
23372
23219
|
['kol-select--required']: Boolean(required),
|
|
@@ -23405,7 +23252,7 @@ const SelectStateWrapper = (_a) => {
|
|
|
23405
23252
|
};
|
|
23406
23253
|
var KolSelectStateWrapperFc = SelectStateWrapper;
|
|
23407
23254
|
|
|
23408
|
-
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.
|
|
23255
|
+
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}";
|
|
23409
23256
|
var KolSelectDefaultStyle0 = defaultStyleCss$d;
|
|
23410
23257
|
|
|
23411
23258
|
class KolSelect {
|
|
@@ -23437,13 +23284,13 @@ class KolSelect {
|
|
|
23437
23284
|
} });
|
|
23438
23285
|
}
|
|
23439
23286
|
render() {
|
|
23440
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
23287
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'd3054533a7a846b4d8d1f305065e6f07783712b0' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '517e617d9640f588d73f66bc29fe2756e47a5691', state: this.state }, hAsync("form", { key: '8098561b7d31c6207b042d3791c648689b178cbe', onSubmit: (event) => {
|
|
23441
23288
|
event.preventDefault();
|
|
23442
23289
|
propagateSubmitEventToForm({
|
|
23443
23290
|
form: this.host,
|
|
23444
23291
|
ref: this.selectRef,
|
|
23445
23292
|
});
|
|
23446
|
-
} }, hAsync("input", { key: '
|
|
23293
|
+
} }, hAsync("input", { key: '3bac2e05597048d5967abda5517b284d537011f5', type: "submit", hidden: true }), hAsync(KolSelectStateWrapperFc, Object.assign({ key: '61e0ed903b7dfa734013104279fe3d015abb94ae' }, this.getSelectProps()))))));
|
|
23447
23294
|
}
|
|
23448
23295
|
constructor(hostRef) {
|
|
23449
23296
|
registerInstance(this, hostRef);
|
|
@@ -23654,21 +23501,25 @@ class SingleSelectController extends InputIconController {
|
|
|
23654
23501
|
watchBoolean(this.component, '_required', value);
|
|
23655
23502
|
}
|
|
23656
23503
|
validateValue(value) {
|
|
23657
|
-
|
|
23504
|
+
watchValidator(this.component, '_value', (v) => v !== undefined, new Set([`StencilUnknown`]), value);
|
|
23658
23505
|
}
|
|
23659
23506
|
validatePlaceholder(value) {
|
|
23660
23507
|
watchString(this.component, '_placeholder', value);
|
|
23661
23508
|
}
|
|
23509
|
+
validateHideClearButton(value) {
|
|
23510
|
+
watchBoolean(this.component, '_hideClearButton', value);
|
|
23511
|
+
}
|
|
23662
23512
|
componentWillLoad() {
|
|
23663
23513
|
super.componentWillLoad();
|
|
23664
23514
|
this.validateOptions(this.component._options);
|
|
23665
23515
|
this.validateRequired(this.component._required);
|
|
23666
23516
|
this.validateValue(this.component._value);
|
|
23667
23517
|
this.validatePlaceholder(this.component._placeholder);
|
|
23518
|
+
this.validateHideClearButton(this.component._hideClearButton);
|
|
23668
23519
|
}
|
|
23669
23520
|
}
|
|
23670
23521
|
|
|
23671
|
-
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.
|
|
23522
|
+
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}";
|
|
23672
23523
|
var KolSingleSelectDefaultStyle0 = defaultStyleCss$c;
|
|
23673
23524
|
|
|
23674
23525
|
class KolSingleSelect {
|
|
@@ -23697,15 +23548,15 @@ class KolSingleSelect {
|
|
|
23697
23548
|
this._value = emptyValue;
|
|
23698
23549
|
this._inputValue = emptyValue;
|
|
23699
23550
|
this._filteredOptions = [...this.state._options];
|
|
23700
|
-
this.controller.onFacade.onInput(new
|
|
23701
|
-
this.controller.onFacade.onChange(new
|
|
23551
|
+
this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: emptyValue } }), true, emptyValue);
|
|
23552
|
+
this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: emptyValue } }), emptyValue);
|
|
23702
23553
|
}
|
|
23703
23554
|
}
|
|
23704
|
-
selectOption(
|
|
23555
|
+
selectOption(option) {
|
|
23705
23556
|
this._value = option.value;
|
|
23706
23557
|
this._inputValue = option.label;
|
|
23707
|
-
this.controller.onFacade.onInput(
|
|
23708
|
-
this.controller.onFacade.onChange(
|
|
23558
|
+
this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: option.value } }), false, option.value);
|
|
23559
|
+
this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: option.value } }), option.value);
|
|
23709
23560
|
this._filteredOptions = [...this.state._options];
|
|
23710
23561
|
this.controller.setFormAssociatedValue(this._value);
|
|
23711
23562
|
}
|
|
@@ -23782,16 +23633,16 @@ class KolSingleSelect {
|
|
|
23782
23633
|
} });
|
|
23783
23634
|
}
|
|
23784
23635
|
render() {
|
|
23785
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
23636
|
+
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: () => {
|
|
23786
23637
|
var _a;
|
|
23787
23638
|
this.clearSelection();
|
|
23788
23639
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23789
|
-
}, class: "kol-single-select__delete" })), hAsync(CustomSuggestionsToggleFc$1, { key: '
|
|
23640
|
+
}, 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) => {
|
|
23790
23641
|
if (el)
|
|
23791
23642
|
this.refOptions[index] = el;
|
|
23792
23643
|
}, selected: this._value === option.value, onClick: (event) => {
|
|
23793
23644
|
var _a;
|
|
23794
|
-
this.selectOption(
|
|
23645
|
+
this.selectOption(option);
|
|
23795
23646
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23796
23647
|
this.toggleListbox(event);
|
|
23797
23648
|
}, onMouseOver: () => {
|
|
@@ -23805,7 +23656,7 @@ class KolSingleSelect {
|
|
|
23805
23656
|
}, onKeyDown: (e) => {
|
|
23806
23657
|
var _a;
|
|
23807
23658
|
if (e.key === 'Enter' || e.key === 'NumpadEnter') {
|
|
23808
|
-
this.selectOption(
|
|
23659
|
+
this.selectOption(option);
|
|
23809
23660
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23810
23661
|
this.toggleListbox(e);
|
|
23811
23662
|
e.preventDefault();
|
|
@@ -23863,7 +23714,7 @@ class KolSingleSelect {
|
|
|
23863
23714
|
case ' ': {
|
|
23864
23715
|
if (this._isOpen) {
|
|
23865
23716
|
if (Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0) {
|
|
23866
|
-
this.selectOption(
|
|
23717
|
+
this.selectOption(this._filteredOptions[this._focusedOptionIndex]);
|
|
23867
23718
|
(_b = this.refInput) === null || _b === void 0 ? void 0 : _b.focus();
|
|
23868
23719
|
handleEvent(false);
|
|
23869
23720
|
}
|
|
@@ -23953,15 +23804,16 @@ class KolSingleSelect {
|
|
|
23953
23804
|
this._required = false;
|
|
23954
23805
|
this._shortKey = undefined;
|
|
23955
23806
|
this._syncValueBySelector = undefined;
|
|
23956
|
-
this._tabIndex = undefined;
|
|
23957
23807
|
this._tooltipAlign = 'top';
|
|
23958
23808
|
this._touched = false;
|
|
23959
23809
|
this._value = undefined;
|
|
23810
|
+
this._hideClearButton = false;
|
|
23960
23811
|
this.state = {
|
|
23961
23812
|
_hideMsg: false,
|
|
23962
23813
|
_id: `id-${nonce()}`,
|
|
23963
23814
|
_label: '',
|
|
23964
23815
|
_options: [],
|
|
23816
|
+
_hideClearButton: false,
|
|
23965
23817
|
};
|
|
23966
23818
|
this.inputHasFocus = false;
|
|
23967
23819
|
this.controller = new SingleSelectController(this, 'single-select', this.host);
|
|
@@ -24019,9 +23871,6 @@ class KolSingleSelect {
|
|
|
24019
23871
|
validateSyncValueBySelector(value) {
|
|
24020
23872
|
this.controller.validateSyncValueBySelector(value);
|
|
24021
23873
|
}
|
|
24022
|
-
validateTabIndex(value) {
|
|
24023
|
-
this.controller.validateTabIndex(value);
|
|
24024
|
-
}
|
|
24025
23874
|
validateTouched(value) {
|
|
24026
23875
|
this.controller.validateTouched(value);
|
|
24027
23876
|
}
|
|
@@ -24030,13 +23879,16 @@ class KolSingleSelect {
|
|
|
24030
23879
|
this.oldValue = value;
|
|
24031
23880
|
this.updateInputValue(value);
|
|
24032
23881
|
}
|
|
23882
|
+
validateHideClearButton(value) {
|
|
23883
|
+
this.controller.validateHideClearButton(value);
|
|
23884
|
+
}
|
|
24033
23885
|
handleMouseEvent() {
|
|
24034
23886
|
this.blockSuggestionMouseOver = false;
|
|
24035
23887
|
}
|
|
24036
23888
|
updateInputValue(value) {
|
|
24037
23889
|
if (Array.isArray(this._options)) {
|
|
24038
23890
|
const matchedOption = this._options.find((option) => option.value === value);
|
|
24039
|
-
this._inputValue = matchedOption ? matchedOption.label : '';
|
|
23891
|
+
this._inputValue = matchedOption ? String(matchedOption.label) : '';
|
|
24040
23892
|
}
|
|
24041
23893
|
}
|
|
24042
23894
|
componentWillLoad() {
|
|
@@ -24079,9 +23931,9 @@ class KolSingleSelect {
|
|
|
24079
23931
|
"_required": ["validateRequired"],
|
|
24080
23932
|
"_shortKey": ["validateShortKey"],
|
|
24081
23933
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
24082
|
-
"_tabIndex": ["validateTabIndex"],
|
|
24083
23934
|
"_touched": ["validateTouched"],
|
|
24084
|
-
"_value": ["validateValue"]
|
|
23935
|
+
"_value": ["validateValue"],
|
|
23936
|
+
"_hideClearButton ": ["validateHideClearButton"]
|
|
24085
23937
|
}; }
|
|
24086
23938
|
static get style() { return {
|
|
24087
23939
|
default: KolSingleSelectDefaultStyle0
|
|
@@ -24106,10 +23958,10 @@ class KolSingleSelect {
|
|
|
24106
23958
|
"_required": [4],
|
|
24107
23959
|
"_shortKey": [1, "_short-key"],
|
|
24108
23960
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
24109
|
-
"_tabIndex": [2, "_tab-index"],
|
|
24110
23961
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
24111
23962
|
"_touched": [1540],
|
|
24112
|
-
"_value": [
|
|
23963
|
+
"_value": [1544],
|
|
23964
|
+
"_hideClearButton": [4, "_hide-clear-button"],
|
|
24113
23965
|
"_isOpen": [32],
|
|
24114
23966
|
"_filteredOptions": [32],
|
|
24115
23967
|
"_inputValue": [32],
|
|
@@ -24139,7 +23991,7 @@ class KolSkipNav {
|
|
|
24139
23991
|
};
|
|
24140
23992
|
}
|
|
24141
23993
|
render() {
|
|
24142
|
-
return (hAsync("nav", { key: '
|
|
23994
|
+
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) => {
|
|
24143
23995
|
return (hAsync("li", { class: "kol-skip-nav__list-item", key: index }, hAsync(KolLinkWcTag, Object.assign({}, link))));
|
|
24144
23996
|
}))));
|
|
24145
23997
|
}
|
|
@@ -24207,7 +24059,7 @@ class KolSpin {
|
|
|
24207
24059
|
};
|
|
24208
24060
|
}
|
|
24209
24061
|
render() {
|
|
24210
|
-
return (hAsync(Host, { key: '
|
|
24062
|
+
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" }))));
|
|
24211
24063
|
}
|
|
24212
24064
|
validateShow(value) {
|
|
24213
24065
|
this.showToggled = this.state._show === true && this._show === false;
|
|
@@ -24241,7 +24093,7 @@ class KolSpin {
|
|
|
24241
24093
|
}; }
|
|
24242
24094
|
}
|
|
24243
24095
|
|
|
24244
|
-
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.
|
|
24096
|
+
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}";
|
|
24245
24097
|
var KolSplitButtonDefaultStyle0 = defaultStyleCss$9;
|
|
24246
24098
|
|
|
24247
24099
|
class KolSplitButton {
|
|
@@ -24284,7 +24136,6 @@ class KolSplitButton {
|
|
|
24284
24136
|
this._on = undefined;
|
|
24285
24137
|
this._role = undefined;
|
|
24286
24138
|
this._syncValueBySelector = undefined;
|
|
24287
|
-
this._tabIndex = undefined;
|
|
24288
24139
|
this._tooltipAlign = 'top';
|
|
24289
24140
|
this._type = 'button';
|
|
24290
24141
|
this._value = undefined;
|
|
@@ -24295,10 +24146,10 @@ class KolSplitButton {
|
|
|
24295
24146
|
}
|
|
24296
24147
|
render() {
|
|
24297
24148
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
24298
|
-
return (hAsync("div", { key: '
|
|
24149
|
+
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', {
|
|
24299
24150
|
[this._variant]: this._variant !== 'custom',
|
|
24300
24151
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
24301
|
-
}), _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,
|
|
24152
|
+
}), _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' }))));
|
|
24302
24153
|
}
|
|
24303
24154
|
async closePopup() {
|
|
24304
24155
|
this.handleOnClose();
|
|
@@ -24325,7 +24176,6 @@ class KolSplitButton {
|
|
|
24325
24176
|
"_on": [16],
|
|
24326
24177
|
"_role": [1],
|
|
24327
24178
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
24328
|
-
"_tabIndex": [2, "_tab-index"],
|
|
24329
24179
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
24330
24180
|
"_type": [1],
|
|
24331
24181
|
"_value": [8],
|
|
@@ -24376,7 +24226,7 @@ var KeyboardKey;
|
|
|
24376
24226
|
KeyboardKey["Space"] = " ";
|
|
24377
24227
|
})(KeyboardKey || (KeyboardKey = {}));
|
|
24378
24228
|
|
|
24379
|
-
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.
|
|
24229
|
+
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}";
|
|
24380
24230
|
var KolTableStatefulDefaultStyle0 = defaultStyleCss$8;
|
|
24381
24231
|
|
|
24382
24232
|
const PAGINATION_OPTIONS = [10, 20, 50, 100];
|
|
@@ -24702,7 +24552,7 @@ class KolTableStateful {
|
|
|
24702
24552
|
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) })))),
|
|
24703
24553
|
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) })))),
|
|
24704
24554
|
};
|
|
24705
|
-
return (hAsync(Host, { key: '
|
|
24555
|
+
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: {
|
|
24706
24556
|
onSort: (_, payload) => {
|
|
24707
24557
|
this.handleSort(payload);
|
|
24708
24558
|
},
|
|
@@ -24750,7 +24600,7 @@ class KolTableStateful {
|
|
|
24750
24600
|
}; }
|
|
24751
24601
|
}
|
|
24752
24602
|
|
|
24753
|
-
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.
|
|
24603
|
+
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}";
|
|
24754
24604
|
var KolTableStatelessDefaultStyle0 = defaultStyleCss$7;
|
|
24755
24605
|
|
|
24756
24606
|
class KolTableStateless$1 {
|
|
@@ -24765,7 +24615,7 @@ class KolTableStateless$1 {
|
|
|
24765
24615
|
this._selection = undefined;
|
|
24766
24616
|
}
|
|
24767
24617
|
render() {
|
|
24768
|
-
return (hAsync(KolTableStatelessWcTag, { key: '
|
|
24618
|
+
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 }));
|
|
24769
24619
|
}
|
|
24770
24620
|
static get style() { return {
|
|
24771
24621
|
default: KolTableStatelessDefaultStyle0
|
|
@@ -25115,21 +24965,25 @@ class KolTableStateless {
|
|
|
25115
24965
|
const selection = this.state._selection;
|
|
25116
24966
|
if (!selection)
|
|
25117
24967
|
return '';
|
|
25118
|
-
const keyPropertyName = (
|
|
25119
|
-
const firstCellData = (
|
|
24968
|
+
const keyPropertyName = this.getSelectionKeyPropertyName();
|
|
24969
|
+
const firstCellData = (_a = row[0]) === null || _a === void 0 ? void 0 : _a.data;
|
|
25120
24970
|
if (!firstCellData)
|
|
25121
24971
|
return '';
|
|
25122
24972
|
const keyProperty = firstCellData[keyPropertyName];
|
|
25123
24973
|
const isMultiple = selection.multiple || selection.multiple === undefined;
|
|
25124
|
-
const selected = (
|
|
24974
|
+
const selected = (_b = selection === null || selection === void 0 ? void 0 : selection.selectedKeys) === null || _b === void 0 ? void 0 : _b.includes(keyProperty);
|
|
24975
|
+
const disabled = (_c = selection === null || selection === void 0 ? void 0 : selection.disabledKeys) === null || _c === void 0 ? void 0 : _c.includes(keyProperty);
|
|
25125
24976
|
const label = selection.label(firstCellData);
|
|
25126
24977
|
const props = {
|
|
25127
24978
|
name: 'selection',
|
|
25128
24979
|
checked: selected,
|
|
24980
|
+
disabled,
|
|
25129
24981
|
id: keyProperty,
|
|
25130
24982
|
['aria-label']: label,
|
|
25131
24983
|
};
|
|
25132
|
-
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:
|
|
24984
|
+
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', {
|
|
24985
|
+
'kol-table__selection-label--disabled': disabled,
|
|
24986
|
+
}) }, 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) => {
|
|
25133
24987
|
var _a, _b;
|
|
25134
24988
|
const updatedSelectedKeys = !selected
|
|
25135
24989
|
? [...((_a = selection === null || selection === void 0 ? void 0 : selection.selectedKeys) !== null && _a !== void 0 ? _a : []), keyProperty]
|
|
@@ -25139,14 +24993,38 @@ class KolTableStateless {
|
|
|
25139
24993
|
this.handleSelectionChangeCallbackAndEvent(event, keyProperty);
|
|
25140
24994
|
} })))), hAsync(KolTooltipWcTag, { "aria-hidden": "true", class: "kol-table__selection-input-tooltip", _align: "right", _id: `${keyProperty}-label`, _label: label }))));
|
|
25141
24995
|
}
|
|
24996
|
+
getSelectionKeyPropertyName() {
|
|
24997
|
+
var _a, _b;
|
|
24998
|
+
return (_b = (_a = this.state._selection) === null || _a === void 0 ? void 0 : _a.keyPropertyName) !== null && _b !== void 0 ? _b : 'id';
|
|
24999
|
+
}
|
|
25000
|
+
getDataWithSelectionEnabled() {
|
|
25001
|
+
const keyPropertyName = this.getSelectionKeyPropertyName();
|
|
25002
|
+
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])); });
|
|
25003
|
+
}
|
|
25004
|
+
getSelectedKeysWithoutDisabledKeys() {
|
|
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
|
+
getSelectedKeysWithDisabledKeysOnly() {
|
|
25009
|
+
var _a, _b;
|
|
25010
|
+
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); });
|
|
25011
|
+
}
|
|
25012
|
+
getRevertedSelection(selectAll) {
|
|
25013
|
+
var _a;
|
|
25014
|
+
const keyPropertyName = this.getSelectionKeyPropertyName();
|
|
25015
|
+
const selection = (_a = this.getSelectedKeysWithDisabledKeysOnly()) !== null && _a !== void 0 ? _a : [];
|
|
25016
|
+
if (selectAll) {
|
|
25017
|
+
selection.push(...this.getDataWithSelectionEnabled().map((el) => el === null || el === void 0 ? void 0 : el[keyPropertyName]));
|
|
25018
|
+
}
|
|
25019
|
+
return selection;
|
|
25020
|
+
}
|
|
25142
25021
|
renderHeadingSelectionCell() {
|
|
25143
25022
|
var _a, _b;
|
|
25144
25023
|
const selection = this.state._selection;
|
|
25145
25024
|
if (!selection || (!selection.multiple && selection.multiple !== undefined))
|
|
25146
25025
|
return hAsync("th", { class: "kol-table__cell kol-table__cell--header", key: `thead-0` });
|
|
25147
|
-
const
|
|
25148
|
-
const
|
|
25149
|
-
const dataLength = this.state._data.length;
|
|
25026
|
+
const selectedKeyLength = (_b = (_a = this.getSelectedKeysWithoutDisabledKeys()) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
|
|
25027
|
+
const dataLength = this.getDataWithSelectionEnabled().length;
|
|
25150
25028
|
const isChecked = selectedKeyLength === dataLength;
|
|
25151
25029
|
const indeterminate = selectedKeyLength !== 0 && !isChecked;
|
|
25152
25030
|
let translationKey = 'kol-table-selection-indeterminate';
|
|
@@ -25160,9 +25038,8 @@ class KolTableStateless {
|
|
|
25160
25038
|
return (hAsync("th", { key: `thead-0-selection`, class: "kol-table__cell kol-table__cell--header" }, hAsync("div", { class: clsx('kol-table__selection', {
|
|
25161
25039
|
'kol-table__selection--indeterminate': indeterminate,
|
|
25162
25040
|
'kol-table__selection--checked': isChecked,
|
|
25163
|
-
}) }, 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) => {
|
|
25164
|
-
|
|
25165
|
-
this.handleSelectionChangeCallbackAndEvent(event, selections);
|
|
25041
|
+
}) }, 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) => {
|
|
25042
|
+
this.handleSelectionChangeCallbackAndEvent(event, this.getRevertedSelection(!isChecked));
|
|
25166
25043
|
} })), hAsync(KolTooltipWcTag, { "aria-hidden": "true", class: "kol-table__selection-input-tooltip", _align: "right", _id: `${translationKey}-label`, _label: label }))));
|
|
25167
25044
|
}
|
|
25168
25045
|
renderHeaderTdCell() {
|
|
@@ -25231,12 +25108,12 @@ class KolTableStateless {
|
|
|
25231
25108
|
render() {
|
|
25232
25109
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
25233
25110
|
this.checkboxRefs = [];
|
|
25234
|
-
return (hAsync("div", { key: '
|
|
25111
|
+
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: {
|
|
25235
25112
|
minWidth: this.state._minWidth,
|
|
25236
|
-
} }, hAsync("div", { key: '
|
|
25113
|
+
} }, 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" }, [
|
|
25237
25114
|
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))))),
|
|
25238
25115
|
this.renderSpacer('head', this.state._headerCells.horizontal),
|
|
25239
|
-
])), hAsync("tbody", { key: '
|
|
25116
|
+
])), hAsync("tbody", { key: 'd83f3334e830da14222a9e44ce1682005171d755', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot())));
|
|
25240
25117
|
}
|
|
25241
25118
|
get host() { return getElement(this); }
|
|
25242
25119
|
static get watchers() { return {
|
|
@@ -25268,7 +25145,7 @@ class KolTableStateless {
|
|
|
25268
25145
|
}; }
|
|
25269
25146
|
}
|
|
25270
25147
|
|
|
25271
|
-
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.
|
|
25148
|
+
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}";
|
|
25272
25149
|
var KolTabsDefaultStyle0 = defaultStyleCss$6;
|
|
25273
25150
|
|
|
25274
25151
|
class KolTabs {
|
|
@@ -25372,25 +25249,40 @@ class KolTabs {
|
|
|
25372
25249
|
nextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));
|
|
25373
25250
|
}
|
|
25374
25251
|
};
|
|
25375
|
-
this.
|
|
25376
|
-
var _a, _b, _c;
|
|
25377
|
-
if (this.tabPanelHost
|
|
25378
|
-
|
|
25379
|
-
|
|
25380
|
-
|
|
25381
|
-
|
|
25382
|
-
|
|
25383
|
-
|
|
25384
|
-
|
|
25385
|
-
|
|
25386
|
-
|
|
25387
|
-
|
|
25388
|
-
|
|
25389
|
-
|
|
25390
|
-
|
|
25391
|
-
|
|
25252
|
+
this.refreshTabPanels = () => {
|
|
25253
|
+
var _a, _b, _c, _d;
|
|
25254
|
+
if (!this.tabPanelHost)
|
|
25255
|
+
return;
|
|
25256
|
+
while (this.tabPanelHost.firstChild) {
|
|
25257
|
+
this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);
|
|
25258
|
+
}
|
|
25259
|
+
for (let i = 0; i < ((_a = this.state._tabs) === null || _a === void 0 ? void 0 : _a.length); i++) {
|
|
25260
|
+
const div = document.createElement('div');
|
|
25261
|
+
div.setAttribute('aria-labelledby', `${this.state._label.replace(/\s/g, '-')}-tab-${i}`);
|
|
25262
|
+
div.setAttribute('id', `tabpanel-${i}`);
|
|
25263
|
+
div.setAttribute('role', 'tabpanel');
|
|
25264
|
+
div.setAttribute('hidden', '');
|
|
25265
|
+
const slot = document.createElement('slot');
|
|
25266
|
+
slot.setAttribute('name', `tabpanel-slot-${i}`);
|
|
25267
|
+
div.appendChild(slot);
|
|
25268
|
+
(_b = this.tabPanelHost) === null || _b === void 0 ? void 0 : _b.appendChild(div);
|
|
25269
|
+
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])) {
|
|
25270
|
+
this.host.children[i].setAttribute('slot', `tabpanel-slot-${i}`);
|
|
25392
25271
|
}
|
|
25393
25272
|
}
|
|
25273
|
+
this.updateVisiblePanel();
|
|
25274
|
+
};
|
|
25275
|
+
this.updateVisiblePanel = () => {
|
|
25276
|
+
if (!this.tabPanelHost)
|
|
25277
|
+
return;
|
|
25278
|
+
Array.from(this.tabPanelHost.children).forEach((child, i) => {
|
|
25279
|
+
if (i === this.state._selected) {
|
|
25280
|
+
child.removeAttribute('hidden');
|
|
25281
|
+
}
|
|
25282
|
+
else {
|
|
25283
|
+
child.setAttribute('hidden', '');
|
|
25284
|
+
}
|
|
25285
|
+
});
|
|
25394
25286
|
};
|
|
25395
25287
|
this.onCreate = (event) => {
|
|
25396
25288
|
var _a, _b;
|
|
@@ -25457,9 +25349,9 @@ class KolTabs {
|
|
|
25457
25349
|
} }))));
|
|
25458
25350
|
}
|
|
25459
25351
|
render() {
|
|
25460
|
-
return (hAsync("div", { key: '
|
|
25352
|
+
return (hAsync("div", { key: '9ff9dfe0a05d073e21d4272052505b74386dbee9', ref: (el) => {
|
|
25461
25353
|
this.tabPanelsElement = el;
|
|
25462
|
-
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
25354
|
+
}, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: 'be475a72b9b037fb1ad6c6b78d05495572a917fb', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
|
|
25463
25355
|
}
|
|
25464
25356
|
validateAlign(value) {
|
|
25465
25357
|
validateAlign(this, value);
|
|
@@ -25523,6 +25415,7 @@ class KolTabs {
|
|
|
25523
25415
|
watchJsonArrayString(this, '_tabs', (item) => typeof item === 'object' && item !== null && typeof item._label === 'string' && item._label.length > 0, value, undefined, {
|
|
25524
25416
|
hooks: {
|
|
25525
25417
|
beforePatch: this.syncSelectedAndTabs,
|
|
25418
|
+
afterPatch: this.refreshTabPanels,
|
|
25526
25419
|
},
|
|
25527
25420
|
});
|
|
25528
25421
|
uiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);
|
|
@@ -25536,17 +25429,7 @@ class KolTabs {
|
|
|
25536
25429
|
this.validateBehavior(this._behavior);
|
|
25537
25430
|
}
|
|
25538
25431
|
componentDidRender() {
|
|
25539
|
-
this.
|
|
25540
|
-
if (this.tabPanelHost instanceof HTMLDivElement) {
|
|
25541
|
-
for (let i = 0; i < this.tabPanelHost.children.length; i++) {
|
|
25542
|
-
if (i !== this.state._selected) {
|
|
25543
|
-
this.tabPanelHost.children[i].setAttribute('hidden', '');
|
|
25544
|
-
}
|
|
25545
|
-
else {
|
|
25546
|
-
this.tabPanelHost.children[i].removeAttribute('hidden');
|
|
25547
|
-
}
|
|
25548
|
-
}
|
|
25549
|
-
}
|
|
25432
|
+
this.refreshTabPanels();
|
|
25550
25433
|
}
|
|
25551
25434
|
focusTabById(index) {
|
|
25552
25435
|
if (this.tabPanelsElement) {
|
|
@@ -25686,7 +25569,7 @@ class TextareaController extends InputIconController {
|
|
|
25686
25569
|
}
|
|
25687
25570
|
}
|
|
25688
25571
|
|
|
25689
|
-
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.
|
|
25572
|
+
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}";
|
|
25690
25573
|
var KolTextareaDefaultStyle0 = defaultStyleCss$5;
|
|
25691
25574
|
|
|
25692
25575
|
const increaseTextareaHeight = (el) => {
|
|
@@ -25731,7 +25614,7 @@ class KolTextarea {
|
|
|
25731
25614
|
} });
|
|
25732
25615
|
}
|
|
25733
25616
|
render() {
|
|
25734
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
25617
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'e3a13e495ab24faabac001d83e45f1be38574755' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'fed37c3c3481e90d9c361722b9b063537a7b61ae', state: this.state }, hAsync(KolTextAreaStateWrapperFc, Object.assign({ key: '02f52e10e7f1cc372b01efa467170e5c87643975' }, this.getTextAreaProps())))));
|
|
25735
25618
|
}
|
|
25736
25619
|
constructor(hostRef) {
|
|
25737
25620
|
registerInstance(this, hostRef);
|
|
@@ -25771,7 +25654,6 @@ class KolTextarea {
|
|
|
25771
25654
|
this._shortKey = undefined;
|
|
25772
25655
|
this._spellCheck = undefined;
|
|
25773
25656
|
this._syncValueBySelector = undefined;
|
|
25774
|
-
this._tabIndex = undefined;
|
|
25775
25657
|
this._tooltipAlign = 'top';
|
|
25776
25658
|
this._touched = false;
|
|
25777
25659
|
this._value = undefined;
|
|
@@ -25856,9 +25738,6 @@ class KolTextarea {
|
|
|
25856
25738
|
validateSyncValueBySelector(value) {
|
|
25857
25739
|
this.controller.validateSyncValueBySelector(value);
|
|
25858
25740
|
}
|
|
25859
|
-
validateTabIndex(value) {
|
|
25860
|
-
this.controller.validateTabIndex(value);
|
|
25861
|
-
}
|
|
25862
25741
|
validateTouched(value) {
|
|
25863
25742
|
this.controller.validateTouched(value);
|
|
25864
25743
|
}
|
|
@@ -25908,7 +25787,6 @@ class KolTextarea {
|
|
|
25908
25787
|
"_shortKey": ["validateShortKey"],
|
|
25909
25788
|
"_spellCheck": ["validateSpellCheck"],
|
|
25910
25789
|
"_syncValueBySelector": ["validateSyncValueBySelector"],
|
|
25911
|
-
"_tabIndex": ["validateTabIndex"],
|
|
25912
25790
|
"_touched": ["validateTouched"],
|
|
25913
25791
|
"_value": ["validateValue"]
|
|
25914
25792
|
}; }
|
|
@@ -25941,7 +25819,6 @@ class KolTextarea {
|
|
|
25941
25819
|
"_shortKey": [1, "_short-key"],
|
|
25942
25820
|
"_spellCheck": [4, "_spell-check"],
|
|
25943
25821
|
"_syncValueBySelector": [1, "_sync-value-by-selector"],
|
|
25944
|
-
"_tabIndex": [2, "_tab-index"],
|
|
25945
25822
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
25946
25823
|
"_touched": [1540],
|
|
25947
25824
|
"_value": [1537],
|
|
@@ -25956,7 +25833,7 @@ class KolTextarea {
|
|
|
25956
25833
|
}; }
|
|
25957
25834
|
}
|
|
25958
25835
|
|
|
25959
|
-
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.
|
|
25836
|
+
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}";
|
|
25960
25837
|
var KolToastContainerDefaultStyle0 = defaultStyleCss$4;
|
|
25961
25838
|
|
|
25962
25839
|
const TRANSITION_TIMEOUT = 300;
|
|
@@ -26013,7 +25890,7 @@ class KolToastContainer {
|
|
|
26013
25890
|
}
|
|
26014
25891
|
}
|
|
26015
25892
|
render() {
|
|
26016
|
-
return (hAsync(Host, { key: '
|
|
25893
|
+
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: {
|
|
26017
25894
|
onClick: () => {
|
|
26018
25895
|
void this.closeAll();
|
|
26019
25896
|
},
|
|
@@ -26036,7 +25913,7 @@ class KolToastContainer {
|
|
|
26036
25913
|
}; }
|
|
26037
25914
|
}
|
|
26038
25915
|
|
|
26039
|
-
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}";
|
|
25916
|
+
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}";
|
|
26040
25917
|
var KolToolbarDefaultStyle0 = defaultStyleCss$3;
|
|
26041
25918
|
|
|
26042
25919
|
class KolToolbar {
|
|
@@ -26047,13 +25924,13 @@ class KolToolbar {
|
|
|
26047
25924
|
const tabIndex = index === this.currentIndex && !(element === null || element === void 0 ? void 0 : element._disabled) ? 0 : -1;
|
|
26048
25925
|
const props = {
|
|
26049
25926
|
key: index,
|
|
26050
|
-
class: 'kol-toolbar__item',
|
|
25927
|
+
class: 'button normal kol-toolbar__item',
|
|
26051
25928
|
_tabIndex: tabIndex,
|
|
26052
25929
|
};
|
|
26053
25930
|
const catchRef = (element) => {
|
|
26054
25931
|
element && this.indexToElement.set(index, element);
|
|
26055
25932
|
};
|
|
26056
|
-
return '_href' in element ? (hAsync(
|
|
25933
|
+
return '_href' in element ? (hAsync(KolLinkWcTag, Object.assign({}, element, props, { ref: catchRef }))) : (hAsync(KolButtonWcTag, Object.assign({}, element, props, { ref: catchRef })));
|
|
26057
25934
|
};
|
|
26058
25935
|
this.state = {
|
|
26059
25936
|
_label: '',
|
|
@@ -26064,7 +25941,7 @@ class KolToolbar {
|
|
|
26064
25941
|
this._items = undefined;
|
|
26065
25942
|
}
|
|
26066
25943
|
render() {
|
|
26067
|
-
return (hAsync("div", { key: '
|
|
25944
|
+
return (hAsync("div", { key: 'aab24777402d87ca0c539b44af6650f34279f3ea', class: "kol-toolbar", role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem)));
|
|
26068
25945
|
}
|
|
26069
25946
|
validateLabel(value) {
|
|
26070
25947
|
validateLabel(this, value);
|
|
@@ -26262,7 +26139,7 @@ class KolTooltipWc {
|
|
|
26262
26139
|
this.showOrHideTooltip();
|
|
26263
26140
|
}
|
|
26264
26141
|
render() {
|
|
26265
|
-
return (hAsync(Host, { key: '
|
|
26142
|
+
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 })))));
|
|
26266
26143
|
}
|
|
26267
26144
|
validateBadgeText(value) {
|
|
26268
26145
|
validateBadgeText(this, value);
|
|
@@ -26340,7 +26217,7 @@ class KolTree {
|
|
|
26340
26217
|
this._label = undefined;
|
|
26341
26218
|
}
|
|
26342
26219
|
render() {
|
|
26343
|
-
return (hAsync(KolTreeWcTag, { key: '
|
|
26220
|
+
return (hAsync(KolTreeWcTag, { key: 'd80ef53eb88006c0247391eefe6e13dbcfb06b81', _label: this._label }, hAsync("slot", { key: '7bd6fbba7b91939d863f0048a06ce2a74d4524fa' })));
|
|
26344
26221
|
}
|
|
26345
26222
|
static get style() { return {
|
|
26346
26223
|
default: KolTreeDefaultStyle0
|
|
@@ -26357,7 +26234,7 @@ class KolTree {
|
|
|
26357
26234
|
}; }
|
|
26358
26235
|
}
|
|
26359
26236
|
|
|
26360
|
-
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
|
|
26237
|
+
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}";
|
|
26361
26238
|
var KolTreeItemDefaultStyle0 = defaultStyleCss$1;
|
|
26362
26239
|
|
|
26363
26240
|
class KolTreeItem {
|
|
@@ -26388,7 +26265,7 @@ class KolTreeItem {
|
|
|
26388
26265
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
26389
26266
|
}
|
|
26390
26267
|
render() {
|
|
26391
|
-
return (hAsync(KolTreeItemWcTag, { key: '
|
|
26268
|
+
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' })));
|
|
26392
26269
|
}
|
|
26393
26270
|
static get style() { return {
|
|
26394
26271
|
default: KolTreeItemDefaultStyle0
|
|
@@ -26431,12 +26308,12 @@ class KolTreeItemWc {
|
|
|
26431
26308
|
}
|
|
26432
26309
|
render() {
|
|
26433
26310
|
const { _href, _active, _hasChildren, _open, _label } = this.state;
|
|
26434
|
-
return (hAsync(Host, { key: '
|
|
26311
|
+
return (hAsync(Host, { key: '9786599b014c24c91df8d989067808fa98bf4759', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { key: '107a15885ecad10f614e29e6a5bf3cff7456430f', class: "kol-tree-item", style: {
|
|
26435
26312
|
'--level': `${this.level}`,
|
|
26436
|
-
} }, hAsync(KolLinkWcTag, { key: '
|
|
26313
|
+
} }, hAsync(KolLinkWcTag, { key: '8f0f2df8d04cb67d0d382659bb2277b47763b256', class: clsx('kol-tree-item__link', {
|
|
26437
26314
|
'kol-tree-item__link--first-level': this.level === 0,
|
|
26438
26315
|
'kol-tree-item__link--active': _active,
|
|
26439
|
-
}), _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: '
|
|
26316
|
+
}), _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' })))));
|
|
26440
26317
|
}
|
|
26441
26318
|
validateActive(value) {
|
|
26442
26319
|
validateActive(this, value || false);
|
|
@@ -26541,7 +26418,7 @@ class KolTreeWc {
|
|
|
26541
26418
|
validateLabel(this, value);
|
|
26542
26419
|
}
|
|
26543
26420
|
render() {
|
|
26544
|
-
return (hAsync(Host, { key: '
|
|
26421
|
+
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' })))));
|
|
26545
26422
|
}
|
|
26546
26423
|
static isTreeItem(element) {
|
|
26547
26424
|
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
|
@@ -26607,6 +26484,7 @@ class KolTreeWc {
|
|
|
26607
26484
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
26608
26485
|
const openItems = await this.getOpenTreeItemElements();
|
|
26609
26486
|
const currentTreeItem = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(KolTreeItemTag);
|
|
26487
|
+
const hasModifierKeyPressed = event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;
|
|
26610
26488
|
if (!openItems || !currentTreeItem) {
|
|
26611
26489
|
return;
|
|
26612
26490
|
}
|
|
@@ -26656,15 +26534,17 @@ class KolTreeWc {
|
|
|
26656
26534
|
break;
|
|
26657
26535
|
}
|
|
26658
26536
|
case (_h = event.key.match(/[a-zA-Z0-9]/)) === null || _h === void 0 ? void 0 : _h.input: {
|
|
26659
|
-
|
|
26660
|
-
|
|
26661
|
-
|
|
26662
|
-
|
|
26663
|
-
|
|
26664
|
-
|
|
26665
|
-
|
|
26666
|
-
|
|
26667
|
-
|
|
26537
|
+
if (!hasModifierKeyPressed) {
|
|
26538
|
+
const char = event.key.toLowerCase();
|
|
26539
|
+
const startIndex = openItems.indexOf(currentTreeItem) + 1;
|
|
26540
|
+
const wrapAroundItems = openItems.concat(openItems);
|
|
26541
|
+
const matchIndex = wrapAroundItems
|
|
26542
|
+
.slice(startIndex, startIndex + openItems.length)
|
|
26543
|
+
.findIndex((item) => { var _a; return (_a = item.getAttribute('_label')) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase().startsWith(char); });
|
|
26544
|
+
if (matchIndex !== -1) {
|
|
26545
|
+
await wrapAroundItems[startIndex + matchIndex].focusLink();
|
|
26546
|
+
event.preventDefault();
|
|
26547
|
+
}
|
|
26668
26548
|
}
|
|
26669
26549
|
break;
|
|
26670
26550
|
}
|
|
@@ -26736,7 +26616,7 @@ class KolVersion {
|
|
|
26736
26616
|
};
|
|
26737
26617
|
}
|
|
26738
26618
|
render() {
|
|
26739
|
-
return (hAsync(Host, { key: '
|
|
26619
|
+
return (hAsync(Host, { key: '0dff30fe462330d3563acd3aa73aaef26677a973', class: "kol-version" }, hAsync(KolBadgeTag, { key: '7a720cd897c9f0d9ecb76e04395fd9f441335b96', _color: "#bec5c9", _icons: {
|
|
26740
26620
|
left: { icon: 'codicon codicon-versions', label: translate('kol-version') },
|
|
26741
26621
|
}, _label: this.state._label })));
|
|
26742
26622
|
}
|
|
@@ -26811,7 +26691,6 @@ registerComponents([
|
|
|
26811
26691
|
KolInputRadio,
|
|
26812
26692
|
KolInputRange,
|
|
26813
26693
|
KolInputText,
|
|
26814
|
-
KolInputWc,
|
|
26815
26694
|
KolKolibri,
|
|
26816
26695
|
KolLink,
|
|
26817
26696
|
KolLinkButton,
|
|
@@ -26821,7 +26700,7 @@ registerComponents([
|
|
|
26821
26700
|
KolPagination,
|
|
26822
26701
|
KolPopover,
|
|
26823
26702
|
KolPopoverButton,
|
|
26824
|
-
|
|
26703
|
+
KolProgress,
|
|
26825
26704
|
KolQuote,
|
|
26826
26705
|
KolSelect,
|
|
26827
26706
|
KolSingleSelect,
|