@public-ui/hydrate 2.1.3 → 2.1.4-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +386 -188
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -2745,7 +2745,7 @@ const featureHint = (msg, done = false, options) => {
|
|
|
2745
2745
|
});
|
|
2746
2746
|
}
|
|
2747
2747
|
};
|
|
2748
|
-
devHint(`
|
|
2748
|
+
devHint(`We appreciate any feedback, comments, screenshots, or demo links of an application based on KoliBri (kolibri@itzbund.de). Thank you!`);
|
|
2749
2749
|
const uiUxCache = new Set();
|
|
2750
2750
|
const uiUxHint = (msg, options) => {
|
|
2751
2751
|
if (uiUxCache.has(msg) === false || !!(options === null || options === void 0 ? void 0 : options.force)) {
|
|
@@ -2758,20 +2758,19 @@ const uiUxHint = (msg, options) => {
|
|
|
2758
2758
|
}
|
|
2759
2759
|
};
|
|
2760
2760
|
const a11yHintDisabled = () => {
|
|
2761
|
-
a11yHint(`"Disabled"
|
|
2761
|
+
a11yHint(`"Disabled" limits accessibility and visibility. From an accessibility perspective, we recommend using the readonly attribute instead of disabled.\n- https://uxdesign.cc/is-it-ok-to-grey-out-disabled-buttons-8afa74a0fae`);
|
|
2762
2762
|
};
|
|
2763
2763
|
const a11yHintLabelingLandmarks = (value) => {
|
|
2764
2764
|
if (typeof value !== 'string' || value === '') {
|
|
2765
|
-
a11yHint(`
|
|
2765
|
+
a11yHint(`Some structural elements, such as the nav tag, can be used multiple times on a webpage. To distinguish between similarly named structural elements, it is necessary to set an ARIA label.\n- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role#accessibility_concerns`);
|
|
2766
2766
|
}
|
|
2767
2767
|
};
|
|
2768
2768
|
const uiUxHintMillerscheZahl = (className, length = 8) => {
|
|
2769
2769
|
if (length > 7) {
|
|
2770
|
-
uiUxHint(`[${className}]
|
|
2770
|
+
uiUxHint(`[${className}] Within navigation structures, it is recommended to use no more than 7 menu items.
|
|
2771
2771
|
|
|
2772
|
-
|
|
2773
|
-
- https://
|
|
2774
|
-
- https://de.wikipedia.org/wiki/Millersche_Zahl`);
|
|
2772
|
+
Link:
|
|
2773
|
+
- https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two`);
|
|
2775
2774
|
}
|
|
2776
2775
|
};
|
|
2777
2776
|
|
|
@@ -3560,7 +3559,7 @@ const setState = (component, propName, value, hooks = {}) => {
|
|
|
3560
3559
|
patchState(component);
|
|
3561
3560
|
};
|
|
3562
3561
|
const logWarn = (component, propName, value, requiredGeneric) => {
|
|
3563
|
-
devHint(`[${component.constructor.name}]
|
|
3562
|
+
devHint(`[${component.constructor.name}] The property value: (${value}) for '${propName}' is not valid. Allowed values are: ${Array.from(requiredGeneric).join(', ')}`);
|
|
3564
3563
|
};
|
|
3565
3564
|
function watchValidator(component, propName, validationFunction, requiredGeneric, value, options = {}) {
|
|
3566
3565
|
if (validationFunction(value)) {
|
|
@@ -3608,14 +3607,14 @@ const watchJsonArrayString = (component, propName, itemValidation, value, arrayV
|
|
|
3608
3607
|
else {
|
|
3609
3608
|
objectObjectHandler(invalid, () => {
|
|
3610
3609
|
Log.debug(invalid);
|
|
3611
|
-
throw new Error(`↑
|
|
3610
|
+
throw new Error(`↑ The schema for the property (_options) is not valid. The value will not be changed.`);
|
|
3612
3611
|
});
|
|
3613
3612
|
}
|
|
3614
3613
|
}
|
|
3615
3614
|
else {
|
|
3616
3615
|
objectObjectHandler(value, () => {
|
|
3617
3616
|
Log.debug(value);
|
|
3618
|
-
throw new Error(`↑
|
|
3617
|
+
throw new Error(`↑ The schema for the property (_options) is not valid. The value will not be changed.`);
|
|
3619
3618
|
});
|
|
3620
3619
|
}
|
|
3621
3620
|
}
|
|
@@ -3660,7 +3659,7 @@ const stringifyJson = (value) => {
|
|
|
3660
3659
|
}
|
|
3661
3660
|
catch (error) {
|
|
3662
3661
|
Log.warn(['stringifyJson', value]);
|
|
3663
|
-
Log.error(`↑
|
|
3662
|
+
Log.error(`↑ The JSON could not be converted to a string. A stringifiable JSON is expected.`);
|
|
3664
3663
|
throw new Error();
|
|
3665
3664
|
}
|
|
3666
3665
|
};
|
|
@@ -3677,7 +3676,7 @@ const parseJson = (value) => {
|
|
|
3677
3676
|
}
|
|
3678
3677
|
catch (error) {
|
|
3679
3678
|
Log.warn(['parseJson', value]);
|
|
3680
|
-
Log.error(`↑
|
|
3679
|
+
Log.error(`↑ The JSON string could not be parsed. Make sure that single quotes in the text are escaped (‘).`);
|
|
3681
3680
|
}
|
|
3682
3681
|
}
|
|
3683
3682
|
}
|
|
@@ -3730,7 +3729,7 @@ const validateInputSelectOptions = (option) => {
|
|
|
3730
3729
|
option.disabled = option.disabled === true;
|
|
3731
3730
|
option.label = `${option.label}`.trim();
|
|
3732
3731
|
if (hasEnoughReadableChars(option.label, 3) === false && containsOnlyNumbers(option.label) === false) {
|
|
3733
|
-
a11yHint(`
|
|
3732
|
+
a11yHint(`A differing Aria-Label (${option.label}) is not accessible. A differing Aria-Label should consist of at least three readable characters.`);
|
|
3734
3733
|
}
|
|
3735
3734
|
if (Array.isArray(option.options)) {
|
|
3736
3735
|
return (option.options.find((item) => {
|
|
@@ -3823,6 +3822,12 @@ const validateAriaExpanded = (component, value) => {
|
|
|
3823
3822
|
watchBoolean(component, '_ariaExpanded', value);
|
|
3824
3823
|
};
|
|
3825
3824
|
|
|
3825
|
+
const validateAriaOwns = (component, value) => {
|
|
3826
|
+
watchString(component, '_ariaOwns', value, {
|
|
3827
|
+
defaultValue: undefined,
|
|
3828
|
+
});
|
|
3829
|
+
};
|
|
3830
|
+
|
|
3826
3831
|
const validateAriaSelected = (component, value) => {
|
|
3827
3832
|
watchBoolean(component, '_ariaSelected', value);
|
|
3828
3833
|
};
|
|
@@ -4151,6 +4156,10 @@ const validateMax = (component, value, options) => {
|
|
|
4151
4156
|
watchNumber(component, '_max', value, options);
|
|
4152
4157
|
};
|
|
4153
4158
|
|
|
4159
|
+
const validateModal = (component, value) => {
|
|
4160
|
+
watchBoolean(component, '_modal', value);
|
|
4161
|
+
};
|
|
4162
|
+
|
|
4154
4163
|
const validateMsg = (component, value) => {
|
|
4155
4164
|
watchValidator(component, `_msg`, (value) => typeof value === 'object', new Set(['Object']), value);
|
|
4156
4165
|
};
|
|
@@ -4354,11 +4363,13 @@ let KolSpanWcTag = 'kol-span-wc';
|
|
|
4354
4363
|
let KolTableStatefulTag = 'kol-table-stateful';
|
|
4355
4364
|
let KolTableStatelessWcTag = 'kol-table-stateless-wc';
|
|
4356
4365
|
let KolTooltipWcTag = 'kol-tooltip-wc';
|
|
4366
|
+
let KolTreeItemTag = 'kol-tree-item';
|
|
4357
4367
|
let KolTreeItemWcTag = 'kol-tree-item-wc';
|
|
4368
|
+
let KolTreeTag = 'kol-tree';
|
|
4358
4369
|
let KolTreeWcTag = 'kol-tree-wc';
|
|
4359
4370
|
|
|
4360
|
-
const defaultStyleCss$
|
|
4361
|
-
var KolAbbrDefaultStyle0 = defaultStyleCss$
|
|
4371
|
+
const defaultStyleCss$O = "@layer kol-global {\n .sc-kol-abbr-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-abbr-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-abbr-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-abbr-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .sc-kol-abbr-default-h > abbr {\n cursor: help;\n }\n}";
|
|
4372
|
+
var KolAbbrDefaultStyle0 = defaultStyleCss$O;
|
|
4362
4373
|
|
|
4363
4374
|
class KolAbbr {
|
|
4364
4375
|
constructor(hostRef) {
|
|
@@ -4416,8 +4427,8 @@ const watchHeadingLevel = (component, value) => {
|
|
|
4416
4427
|
});
|
|
4417
4428
|
};
|
|
4418
4429
|
|
|
4419
|
-
const defaultStyleCss$
|
|
4420
|
-
var KolAccordionDefaultStyle0 = defaultStyleCss$
|
|
4430
|
+
const defaultStyleCss$N = "@layer kol-global {\n .sc-kol-accordion-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-accordion-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-accordion-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-accordion-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .sc-kol-accordion-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n \n .wrapper {\n display: grid;\n grid-template-rows: 0fr;\n overflow: hidden;\n transition: grid-template-rows 0.3s;\n }\n .accordion.open .wrapper {\n grid-template-rows: 1fr;\n }\n .animation-wrapper {\n min-height: 0;\n transition: visibility 0.3s;\n \n visibility: hidden;\n }\n .accordion.open .animation-wrapper {\n visibility: visible;\n }\n @media (prefers-reduced-motion) {\n .animation-wrapper,\n .wrapper {\n transition-duration: 0s;\n }\n }\n \n @media print {\n .accordion:not(.open) .animation-wrapper {\n display: none;\n }\n }\n \n .accordion .kol-heading-wc .kol-button-wc button .kol-span-wc {\n justify-items: start;\n }\n}";
|
|
4431
|
+
var KolAccordionDefaultStyle0 = defaultStyleCss$N;
|
|
4421
4432
|
|
|
4422
4433
|
featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
|
|
4423
4434
|
|
|
@@ -4512,8 +4523,8 @@ class KolAccordion {
|
|
|
4512
4523
|
}; }
|
|
4513
4524
|
}
|
|
4514
4525
|
|
|
4515
|
-
const defaultStyleCss$
|
|
4516
|
-
var KolAlertDefaultStyle0 = defaultStyleCss$
|
|
4526
|
+
const defaultStyleCss$M = "@layer kol-global {\n .sc-kol-alert-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-alert-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-alert-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-alert-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .sc-kol-alert-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n \n outline: transparent solid 1px;\n }\n}";
|
|
4527
|
+
var KolAlertDefaultStyle0 = defaultStyleCss$M;
|
|
4517
4528
|
|
|
4518
4529
|
class KolAlert {
|
|
4519
4530
|
constructor(hostRef) {
|
|
@@ -4850,8 +4861,8 @@ class KolAlertWc {
|
|
|
4850
4861
|
}; }
|
|
4851
4862
|
}
|
|
4852
4863
|
|
|
4853
|
-
const defaultStyleCss$
|
|
4854
|
-
var KolAvatarDefaultStyle0 = defaultStyleCss$
|
|
4864
|
+
const defaultStyleCss$L = "@layer kol-global {\n .sc-kol-avatar-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-avatar-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-avatar-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-avatar-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .sc-kol-avatar-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .container {\n border-radius: 50%;\n overflow: hidden;\n \n outline: transparent solid 1px;\n \n width: 100px;\n height: 100px;\n }\n .image {\n width: 100%;\n height: 100%;\n }\n .initials {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n \n background: #d3d3d3;\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
4865
|
+
var KolAvatarDefaultStyle0 = defaultStyleCss$L;
|
|
4855
4866
|
|
|
4856
4867
|
class KolAvatar {
|
|
4857
4868
|
constructor(hostRef) {
|
|
@@ -4937,8 +4948,8 @@ class KolAvatarWc {
|
|
|
4937
4948
|
}; }
|
|
4938
4949
|
}
|
|
4939
4950
|
|
|
4940
|
-
const defaultStyleCss$
|
|
4941
|
-
var KolBadgeDefaultStyle0 = defaultStyleCss$
|
|
4951
|
+
const defaultStyleCss$K = "@layer kol-global {\n .sc-kol-badge-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-badge-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-badge-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n \n .sc-kol-badge-default-h > span {\n display: inline-flex;\n place-items: center;\n \n outline: transparent solid 1px;\n }\n .sc-kol-badge-default-h > span > .kol-button-wc button {\n color: inherit;\n }\n}";
|
|
4952
|
+
var KolBadgeDefaultStyle0 = defaultStyleCss$K;
|
|
4942
4953
|
|
|
4943
4954
|
featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
|
|
4944
4955
|
class KolBadge {
|
|
@@ -5038,8 +5049,8 @@ const watchNavLinks = (className, component, value) => {
|
|
|
5038
5049
|
uiUxHintMillerscheZahl(className, component.state._links.length);
|
|
5039
5050
|
};
|
|
5040
5051
|
|
|
5041
|
-
const defaultStyleCss$
|
|
5042
|
-
var KolBreadcrumbDefaultStyle0 = defaultStyleCss$
|
|
5052
|
+
const defaultStyleCss$J = "@layer kol-global {\n .sc-kol-breadcrumb-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-breadcrumb-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-breadcrumb-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-breadcrumb-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n li,\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n gap: 0.5em;\n flex-wrap: wrap;\n place-items: center;\n }\n .kol-icon::part(separator) {\n font-weight: 900;\n font-size: 0.7em;\n }\n .kol-icon::part(separator):before {\n content: \"\\f054\";\n font-family: \"Font Awesome 6 Free\";\n }\n}";
|
|
5053
|
+
var KolBreadcrumbDefaultStyle0 = defaultStyleCss$J;
|
|
5043
5054
|
|
|
5044
5055
|
class KolBreadcrumb {
|
|
5045
5056
|
constructor(hostRef) {
|
|
@@ -5099,8 +5110,8 @@ class KolBreadcrumb {
|
|
|
5099
5110
|
}; }
|
|
5100
5111
|
}
|
|
5101
5112
|
|
|
5102
|
-
const defaultStyleCss$
|
|
5103
|
-
var KolButtonDefaultStyle0 = defaultStyleCss$
|
|
5113
|
+
const defaultStyleCss$I = "@charset \"UTF-8\";\n\n@layer kol-global {\n .sc-kol-button-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-button-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-button-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-button-default-h {\n font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n display: inline-block;\n }\n :is(a, button) {\n display: inline-flex;\n place-items: center;\n text-align: center;\n text-decoration-line: none;\n }\n :is(a, button)::before {\n \n content: \"\";\n }\n \n :is(a, button) > .kol-span-wc {\n margin: auto;\n width: 100%;\n }\n}\n/*!@**/*.sc-kol-button-default {\n color: hotpink !important;\n}";
|
|
5114
|
+
var KolButtonDefaultStyle0 = defaultStyleCss$I;
|
|
5104
5115
|
|
|
5105
5116
|
class KolButton {
|
|
5106
5117
|
constructor(hostRef) {
|
|
@@ -5173,8 +5184,8 @@ class KolButton {
|
|
|
5173
5184
|
}; }
|
|
5174
5185
|
}
|
|
5175
5186
|
|
|
5176
|
-
const defaultStyleCss$
|
|
5177
|
-
var KolButtonGroupDefaultStyle0 = defaultStyleCss$
|
|
5187
|
+
const defaultStyleCss$H = "@layer kol-global {\n .sc-kol-button-group-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-button-group-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-button-group-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-button-group-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .sc-kol-button-group-default-h > .kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n }\n}";
|
|
5188
|
+
var KolButtonGroupDefaultStyle0 = defaultStyleCss$H;
|
|
5178
5189
|
|
|
5179
5190
|
class KolButtonGroup {
|
|
5180
5191
|
constructor(hostRef) {
|
|
@@ -5216,8 +5227,8 @@ class KolButtonGroupWc {
|
|
|
5216
5227
|
}; }
|
|
5217
5228
|
}
|
|
5218
5229
|
|
|
5219
|
-
const defaultStyleCss$
|
|
5220
|
-
var KolButtonLinkDefaultStyle0 = defaultStyleCss$
|
|
5230
|
+
const defaultStyleCss$G = "@layer kol-global {\n .sc-kol-button-link-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-button-link-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-button-link-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-button-link-default-h {\n display: inline-block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) {\n align-items: baseline;\n display: inline-flex;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n :is(a, button) .kol-span-wc .span-label {\n text-decoration-line: underline;\n }\n a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.2em;\n }\n .skip {\n left: -99999px;\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n }\n .skip:focus {\n background-color: #fff;\n left: unset;\n padding: 1em;\n position: unset;\n }\n .kol-icon.external-link-icon {\n display: inline-flex;\n }\n}";
|
|
5231
|
+
var KolButtonLinkDefaultStyle0 = defaultStyleCss$G;
|
|
5221
5232
|
|
|
5222
5233
|
class KolButtonLink {
|
|
5223
5234
|
constructor(hostRef) {
|
|
@@ -5379,6 +5390,7 @@ const propagateSubmitEventToForm = (options = {}) => {
|
|
|
5379
5390
|
};
|
|
5380
5391
|
|
|
5381
5392
|
const isAssociatedTagName = (name) => name === 'KOL-BUTTON' ||
|
|
5393
|
+
name === 'KOL-COMBOBOX' ||
|
|
5382
5394
|
name === 'KOL-INPUT-CHECKBOX' ||
|
|
5383
5395
|
name === 'KOL-INPUT-COLOR' ||
|
|
5384
5396
|
name === 'KOL-INPUT-DATE' ||
|
|
@@ -5529,7 +5541,7 @@ class AssociatedInputController {
|
|
|
5529
5541
|
},
|
|
5530
5542
|
});
|
|
5531
5543
|
if (typeof value === 'undefined') {
|
|
5532
|
-
devHint(`
|
|
5544
|
+
devHint(`A name on input fields or switches is not strictly required, but it might be relevant for the autocomplete function and for the static submission of the input field.`);
|
|
5533
5545
|
}
|
|
5534
5546
|
}
|
|
5535
5547
|
validateSyncValueBySelector(value) {
|
|
@@ -5749,8 +5761,8 @@ class KolButtonWc {
|
|
|
5749
5761
|
}; }
|
|
5750
5762
|
}
|
|
5751
5763
|
|
|
5752
|
-
const defaultStyleCss$
|
|
5753
|
-
var KolCardDefaultStyle0 = defaultStyleCss$
|
|
5764
|
+
const defaultStyleCss$F = "@layer kol-global {\n .sc-kol-card-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-card-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-card-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-card-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .sc-kol-card-default-h > div.card {\n height: 100%;\n position: relative;\n \n outline: transparent solid 1px;\n }\n .close {\n position: absolute;\n top: 0;\n right: 0;\n }\n}";
|
|
5765
|
+
var KolCardDefaultStyle0 = defaultStyleCss$F;
|
|
5754
5766
|
|
|
5755
5767
|
class KolCard {
|
|
5756
5768
|
constructor(hostRef) {
|
|
@@ -5876,12 +5888,10 @@ class InputController extends ControlledInputController {
|
|
|
5876
5888
|
validateTooltipAlign(this.component, value);
|
|
5877
5889
|
}
|
|
5878
5890
|
validateError(value) {
|
|
5879
|
-
const message =
|
|
5880
|
-
|
|
5881
|
-
|
|
5882
|
-
|
|
5883
|
-
}
|
|
5884
|
-
: undefined;
|
|
5891
|
+
const message = {
|
|
5892
|
+
_description: value || '',
|
|
5893
|
+
_type: 'error',
|
|
5894
|
+
};
|
|
5885
5895
|
this.validateMsg(message);
|
|
5886
5896
|
}
|
|
5887
5897
|
validateHideError(value) {
|
|
@@ -5919,7 +5929,7 @@ class InputController extends ControlledInputController {
|
|
|
5919
5929
|
minLength: 1,
|
|
5920
5930
|
});
|
|
5921
5931
|
if (value === '' || typeof value === 'undefined') {
|
|
5922
|
-
devHint(`
|
|
5932
|
+
devHint(`A unique ID on the input fields is not strictly required, but it might be relevant for E2E tests.`);
|
|
5923
5933
|
}
|
|
5924
5934
|
}
|
|
5925
5935
|
validateLabel(value) {
|
|
@@ -6121,19 +6131,23 @@ const getRenderStates = (state) => {
|
|
|
6121
6131
|
return { hasError, hasHint, ariaDescribedBy };
|
|
6122
6132
|
};
|
|
6123
6133
|
|
|
6124
|
-
const defaultStyleCss$
|
|
6125
|
-
var KolComboboxDefaultStyle0 = defaultStyleCss$
|
|
6134
|
+
const defaultStyleCss$E = "@layer kol-global {\n .sc-kol-combobox-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-combobox-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-combobox-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-combobox-default-h {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n \n \n \n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n \n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n \n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-combobox-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .combobox {\n position: relative;\n }\n .combobox.disabled, .combobox.disabled * {\n cursor: not-allowed !important;\n }\n .combobox.disabled {\n opacity: 0.5;\n outline: none;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n }\n .combobox__input {\n flex-grow: 1;\n }\n .combobox__listbox {\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}";
|
|
6135
|
+
var KolComboboxDefaultStyle0 = defaultStyleCss$E;
|
|
6126
6136
|
|
|
6127
6137
|
class KolCombobox {
|
|
6128
6138
|
async getValue() {
|
|
6129
6139
|
return this._value;
|
|
6130
6140
|
}
|
|
6131
|
-
selectOption(option) {
|
|
6141
|
+
selectOption(event, option) {
|
|
6142
|
+
this.controller.onFacade.onInput(event, true, option);
|
|
6143
|
+
this.controller.onFacade.onChange(event, option);
|
|
6144
|
+
this.controller.setFormAssociatedValue(option);
|
|
6132
6145
|
this.state._value = option;
|
|
6133
6146
|
}
|
|
6134
6147
|
onInput(event) {
|
|
6135
6148
|
const target = event.target;
|
|
6136
6149
|
this._value = target.value;
|
|
6150
|
+
this.controller.onFacade.onInput(event);
|
|
6137
6151
|
this.setFilteredSuggestionsByQuery(target.value);
|
|
6138
6152
|
}
|
|
6139
6153
|
handleKeyDownDropdown(event) {
|
|
@@ -6164,14 +6178,13 @@ class KolCombobox {
|
|
|
6164
6178
|
if (newIndex < 0) {
|
|
6165
6179
|
newIndex = this._filteredSuggestions.length - 1;
|
|
6166
6180
|
}
|
|
6167
|
-
this.
|
|
6168
|
-
this.focusOption(this._focusedOptionIndex);
|
|
6181
|
+
this.focusOption(newIndex);
|
|
6169
6182
|
}
|
|
6170
6183
|
focusOption(index) {
|
|
6184
|
+
this._focusedOptionIndex = index;
|
|
6171
6185
|
if (this.refSuggestions) {
|
|
6172
6186
|
const optionElement = this.refSuggestions[index];
|
|
6173
6187
|
optionElement === null || optionElement === void 0 ? void 0 : optionElement.focus();
|
|
6174
|
-
this._value = optionElement.textContent || '';
|
|
6175
6188
|
}
|
|
6176
6189
|
}
|
|
6177
6190
|
focusSuggestionStartingWith(char) {
|
|
@@ -6180,24 +6193,28 @@ class KolCombobox {
|
|
|
6180
6193
|
this._filteredSuggestions.length > 0 &&
|
|
6181
6194
|
this._filteredSuggestions.findIndex((option) => option.toLowerCase().startsWith(charLowerCase));
|
|
6182
6195
|
if (typeof index === 'number') {
|
|
6183
|
-
this._focusedOptionIndex = index;
|
|
6184
6196
|
this.focusOption(index);
|
|
6185
6197
|
}
|
|
6186
6198
|
}
|
|
6187
6199
|
render() {
|
|
6188
6200
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
6189
6201
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
6190
|
-
return (hAsync(Host, { key: '
|
|
6202
|
+
return (hAsync(Host, { key: '6ec722d9e87bf898fb08ec7d1d41b87726d5906d', class: "kol-combobox" }, hAsync("div", { key: '469969bc4d8c1b90bebf05439d6fb1b3979cf31d', class: `combobox ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputWcTag, { key: '26f31df5cb2e7904a0b8210aecf705af57547cb4', _accessKey: this.state._accessKey, _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '64b9e44d46c9a8907ee3b6fd7be928f02253766f', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'f57ea642aca3caf12523a190d439f3fd60996d4c', slot: "input" }, hAsync("div", { key: '9201b3aeb83d656da51d525e81698f3679c61267', class: "combobox__group" }, hAsync("input", Object.assign({ key: '8a054f8e64e5a0573d4bda19a2fe6b201f7e2dec', class: "combobox__input", type: "text", role: "combobox", "aria-autocomplete": "both", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-controls": "listbox", value: this.state._value, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-labelledby": this.state._id, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, name: this.state._name, required: this.state._required, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput.bind(this), onClick: this.toggleListbox.bind(this), onChange: this.onChange.bind(this), placeholder: this.state._placeholder })), hAsync("span", { key: '2388a17109c311a0bca3c08ba12928b794f0eb7c', class: { combobox__icon: true } }, hAsync(KolIconTag, { key: 'c1161b16e198e7c4e16d267066affd78a5c7ac67', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown'), onClick: this.toggleListbox.bind(this) }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: '43a849ac87f34878ded4b37e21f9836d56f53b8f', role: "listbox", "aria-label": "", class: { combobox__listbox: true }, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
|
|
6191
6203
|
this._filteredSuggestions.length > 0 &&
|
|
6192
6204
|
this._filteredSuggestions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
|
|
6193
6205
|
if (el)
|
|
6194
6206
|
this.refSuggestions[index] = el;
|
|
6195
|
-
}, "data-index": index, tabIndex: 0, role: "option", "aria-selected": this.state._value === option, onClick: () => {
|
|
6196
|
-
this.selectOption(option);
|
|
6207
|
+
}, "data-index": index, tabIndex: 0, role: "option", "aria-selected": this.state._value === option, onClick: (e) => {
|
|
6208
|
+
this.selectOption(e, option);
|
|
6197
6209
|
this.toggleListbox();
|
|
6210
|
+
}, onMouseOver: () => {
|
|
6211
|
+
this.focusOption(index);
|
|
6212
|
+
}, onFocus: () => {
|
|
6213
|
+
this.focusOption(index);
|
|
6198
6214
|
}, class: "combobox__item", onKeyDown: (e) => {
|
|
6199
6215
|
if (e.key === 'Enter' || e.key === 'NumpadEnter') {
|
|
6200
|
-
this.selectOption(option);
|
|
6216
|
+
this.selectOption(e, option);
|
|
6217
|
+
this.toggleListbox();
|
|
6201
6218
|
e.preventDefault();
|
|
6202
6219
|
}
|
|
6203
6220
|
} }, option))))))))));
|
|
@@ -6234,8 +6251,7 @@ class KolCombobox {
|
|
|
6234
6251
|
case 'Home': {
|
|
6235
6252
|
handleEvent(undefined, () => {
|
|
6236
6253
|
if (this._isOpen) {
|
|
6237
|
-
this.
|
|
6238
|
-
this.focusOption(this._focusedOptionIndex);
|
|
6254
|
+
this.focusOption(0);
|
|
6239
6255
|
}
|
|
6240
6256
|
});
|
|
6241
6257
|
break;
|
|
@@ -6243,8 +6259,7 @@ class KolCombobox {
|
|
|
6243
6259
|
case 'End': {
|
|
6244
6260
|
handleEvent(undefined, () => {
|
|
6245
6261
|
if (this._isOpen) {
|
|
6246
|
-
this.
|
|
6247
|
-
this.focusOption(this._focusedOptionIndex);
|
|
6262
|
+
this.focusOption(this._filteredSuggestions ? this._filteredSuggestions.length - 1 : 0);
|
|
6248
6263
|
}
|
|
6249
6264
|
});
|
|
6250
6265
|
break;
|
|
@@ -6267,6 +6282,7 @@ class KolCombobox {
|
|
|
6267
6282
|
constructor(hostRef) {
|
|
6268
6283
|
registerInstance(this, hostRef);
|
|
6269
6284
|
this.refSuggestions = [];
|
|
6285
|
+
this._focusedOptionIndex = -1;
|
|
6270
6286
|
this.toggleListbox = () => {
|
|
6271
6287
|
if (this.state._disabled === true) {
|
|
6272
6288
|
this._isOpen = false;
|
|
@@ -6275,12 +6291,10 @@ class KolCombobox {
|
|
|
6275
6291
|
this._isOpen = !this._isOpen;
|
|
6276
6292
|
if (this._isOpen && Array.isArray(this._filteredSuggestions) && this._filteredSuggestions.length > 0) {
|
|
6277
6293
|
const selectedIndex = this._filteredSuggestions.findIndex((option) => option === this._value);
|
|
6278
|
-
this.
|
|
6279
|
-
this.focusOption(this._focusedOptionIndex);
|
|
6294
|
+
this.focusOption(selectedIndex >= 0 ? selectedIndex : 0);
|
|
6280
6295
|
}
|
|
6281
6296
|
}
|
|
6282
6297
|
};
|
|
6283
|
-
this._focusedOptionIndex = -1;
|
|
6284
6298
|
this._isOpen = false;
|
|
6285
6299
|
this._filteredSuggestions = undefined;
|
|
6286
6300
|
this._accessKey = undefined;
|
|
@@ -6370,6 +6384,7 @@ class KolCombobox {
|
|
|
6370
6384
|
}
|
|
6371
6385
|
validateValue(value) {
|
|
6372
6386
|
this.controller.validateValue(value);
|
|
6387
|
+
this.controller.setFormAssociatedValue(value);
|
|
6373
6388
|
}
|
|
6374
6389
|
componentWillLoad() {
|
|
6375
6390
|
this.refSuggestions = [];
|
|
@@ -6385,7 +6400,7 @@ class KolCombobox {
|
|
|
6385
6400
|
stopPropagation(event);
|
|
6386
6401
|
tryToDispatchKoliBriEvent('change', this.host, this._value);
|
|
6387
6402
|
this.controller.setFormAssociatedValue(this._value);
|
|
6388
|
-
if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onChange) === 'function') {
|
|
6403
|
+
if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onChange) === 'function' && !this._isOpen) {
|
|
6389
6404
|
this.state._on.onChange(event, this._value);
|
|
6390
6405
|
}
|
|
6391
6406
|
}
|
|
@@ -6515,8 +6530,8 @@ class DetailsAnimationController {
|
|
|
6515
6530
|
}
|
|
6516
6531
|
}
|
|
6517
6532
|
|
|
6518
|
-
const defaultStyleCss$
|
|
6519
|
-
var KolDetailsDefaultStyle0 = defaultStyleCss$
|
|
6533
|
+
const defaultStyleCss$D = "@layer kol-global {\n .sc-kol-details-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-details-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-details-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-details-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .sc-kol-details-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n details {\n display: grid;\n }\n details > summary {\n cursor: pointer;\n display: flex;\n place-items: center;\n }\n details > summary > span {\n border-bottom-color: grey;\n border-bottom-style: solid;\n }\n details > summary:focus > span,\n details > summary:hover > span,\n details[open] > summary > span {\n border-bottom-color: #000;\n }\n .content {\n overflow: hidden;\n }\n details > .kol-indented-text {\n margin: 0.25em 0 0 0.5em;\n }\n .icon.is-open::part(icon) {\n transform: rotate(90deg);\n }\n}";
|
|
6534
|
+
var KolDetailsDefaultStyle0 = defaultStyleCss$D;
|
|
6520
6535
|
|
|
6521
6536
|
class KolDetails {
|
|
6522
6537
|
constructor(hostRef) {
|
|
@@ -6618,6 +6633,138 @@ class KolDetails {
|
|
|
6618
6633
|
}; }
|
|
6619
6634
|
}
|
|
6620
6635
|
|
|
6636
|
+
const defaultStyleCss$C = "@layer kol-global {\n .sc-kol-drawer-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-drawer-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-drawer-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .drawer__dialog {\n padding: 0;\n border: none;\n }\n .drawer__wrapper {\n position: fixed;\n width: auto;\n overflow: auto;\n background: white;\n }\n .drawer__wrapper--left {\n top: 0;\n left: 0;\n height: 100vh;\n max-height: 100%;\n }\n .drawer__wrapper--right {\n top: 0;\n right: 0;\n height: 100vh;\n max-height: 100%;\n }\n .drawer__wrapper--top {\n left: 0;\n top: 0;\n width: 100vw;\n max-width: 100%;\n }\n .drawer__wrapper--bottom {\n left: 0;\n bottom: 0;\n width: 100vw;\n max-width: 100%;\n }\n .drawer__content {\n position: relative;\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
6637
|
+
var KolDrawerDefaultStyle0 = defaultStyleCss$C;
|
|
6638
|
+
|
|
6639
|
+
class KolDrawer {
|
|
6640
|
+
constructor(hostRef) {
|
|
6641
|
+
registerInstance(this, hostRef);
|
|
6642
|
+
this.getWrapperRef = (el) => (this.dialogWrapperElement = el);
|
|
6643
|
+
this.getRef = (el) => (this.dialogElement = el);
|
|
6644
|
+
this._open = undefined;
|
|
6645
|
+
this._align = undefined;
|
|
6646
|
+
this._label = undefined;
|
|
6647
|
+
this._modal = undefined;
|
|
6648
|
+
this._on = undefined;
|
|
6649
|
+
this.state = {
|
|
6650
|
+
_label: '',
|
|
6651
|
+
_open: false,
|
|
6652
|
+
_align: 'left',
|
|
6653
|
+
};
|
|
6654
|
+
}
|
|
6655
|
+
async open() {
|
|
6656
|
+
var _a, _b;
|
|
6657
|
+
this.state = Object.assign(Object.assign({}, this.state), { _open: true });
|
|
6658
|
+
if (this.state._modal) {
|
|
6659
|
+
(_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.showModal();
|
|
6660
|
+
}
|
|
6661
|
+
else {
|
|
6662
|
+
(_b = this.dialogElement) === null || _b === void 0 ? void 0 : _b.show();
|
|
6663
|
+
}
|
|
6664
|
+
}
|
|
6665
|
+
async close() {
|
|
6666
|
+
this.state = Object.assign(Object.assign({}, this.state), { _open: false });
|
|
6667
|
+
const wrapper = this.dialogWrapperElement;
|
|
6668
|
+
if (!wrapper)
|
|
6669
|
+
return;
|
|
6670
|
+
const computedStyle = window.getComputedStyle(wrapper);
|
|
6671
|
+
if (computedStyle.animationName === 'none') {
|
|
6672
|
+
this.handleCloseDialog();
|
|
6673
|
+
}
|
|
6674
|
+
}
|
|
6675
|
+
renderDialogContent() {
|
|
6676
|
+
const align = this.state._align;
|
|
6677
|
+
return (hAsync("div", { ref: this.getWrapperRef, class: `drawer__wrapper drawer__wrapper--${align} ${this.state._open ? 'drawer__wrapper--open' : 'is-closing'}`, "aria-label": this.state._label }, hAsync("div", { class: "drawer__content" }, hAsync("slot", null))));
|
|
6678
|
+
}
|
|
6679
|
+
render() {
|
|
6680
|
+
const isModal = this.state._modal;
|
|
6681
|
+
return (hAsync(Host, { key: '002834bc0b77fb80001f8a7c5b565b9e45c8de03', class: `kol-drawer drawer ${isModal ? 'drawer--modal' : ''}`, ref: (el) => (this.hostElement = el) }, hAsync("dialog", { key: '5d27b28c355b4eb6ab1c3e3d21f4c3a6746a7fbf', class: "drawer__dialog", ref: this.getRef }, this.renderDialogContent())));
|
|
6682
|
+
}
|
|
6683
|
+
validateLabel(value) {
|
|
6684
|
+
validateLabel(this, value, {
|
|
6685
|
+
required: true,
|
|
6686
|
+
});
|
|
6687
|
+
}
|
|
6688
|
+
validateAlign(value) {
|
|
6689
|
+
validateAlign(this, value);
|
|
6690
|
+
}
|
|
6691
|
+
validateModal(value) {
|
|
6692
|
+
validateModal(this, value);
|
|
6693
|
+
}
|
|
6694
|
+
async validateOpen(value) {
|
|
6695
|
+
if (typeof value === 'boolean') {
|
|
6696
|
+
validateOpen(this, value);
|
|
6697
|
+
value ? await this.open() : await this.close();
|
|
6698
|
+
}
|
|
6699
|
+
}
|
|
6700
|
+
validateOn(value) {
|
|
6701
|
+
if (typeof value === 'object' && value !== null) {
|
|
6702
|
+
const callbacks = {};
|
|
6703
|
+
if (typeof value.onClose === 'function') {
|
|
6704
|
+
callbacks.onClose = value.onClose;
|
|
6705
|
+
}
|
|
6706
|
+
setState(this, '_on', callbacks);
|
|
6707
|
+
}
|
|
6708
|
+
}
|
|
6709
|
+
handleCloseDialog() {
|
|
6710
|
+
var _a, _b, _c;
|
|
6711
|
+
(_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.close();
|
|
6712
|
+
(_c = (_b = this._on) === null || _b === void 0 ? void 0 : _b.onClose) === null || _c === void 0 ? void 0 : _c.call(_b);
|
|
6713
|
+
}
|
|
6714
|
+
handleClose() {
|
|
6715
|
+
}
|
|
6716
|
+
handleAnimationEnd(e) {
|
|
6717
|
+
const animationEvent = e;
|
|
6718
|
+
if (animationEvent.animationName.includes('slideOut')) {
|
|
6719
|
+
this.handleCloseDialog();
|
|
6720
|
+
}
|
|
6721
|
+
}
|
|
6722
|
+
componentDidLoad() {
|
|
6723
|
+
var _a, _b;
|
|
6724
|
+
(_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.addEventListener('animationend', this.handleAnimationEnd.bind(this));
|
|
6725
|
+
(_b = this.dialogElement) === null || _b === void 0 ? void 0 : _b.addEventListener('close', this.handleClose.bind(this));
|
|
6726
|
+
}
|
|
6727
|
+
disconnectedCallback() {
|
|
6728
|
+
var _a, _b;
|
|
6729
|
+
(_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('animationend', this.handleAnimationEnd.bind(this));
|
|
6730
|
+
(_b = this.dialogElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('close', this.handleClose.bind(this));
|
|
6731
|
+
}
|
|
6732
|
+
async componentWillLoad() {
|
|
6733
|
+
this.validateLabel(this._label);
|
|
6734
|
+
await this.validateOpen(this._open);
|
|
6735
|
+
this.validateAlign(this._align);
|
|
6736
|
+
this.validateModal(this._modal);
|
|
6737
|
+
this.validateOn(this._on);
|
|
6738
|
+
}
|
|
6739
|
+
static get watchers() { return {
|
|
6740
|
+
"_label": ["validateLabel"],
|
|
6741
|
+
"_align": ["validateAlign"],
|
|
6742
|
+
"_modal": ["validateModal"],
|
|
6743
|
+
"_open": ["validateOpen"],
|
|
6744
|
+
"_on": ["validateOn"]
|
|
6745
|
+
}; }
|
|
6746
|
+
static get style() { return {
|
|
6747
|
+
default: KolDrawerDefaultStyle0
|
|
6748
|
+
}; }
|
|
6749
|
+
static get cmpMeta() { return {
|
|
6750
|
+
"$flags$": 41,
|
|
6751
|
+
"$tagName$": "kol-drawer",
|
|
6752
|
+
"$members$": {
|
|
6753
|
+
"_open": [4],
|
|
6754
|
+
"_align": [1],
|
|
6755
|
+
"_label": [1],
|
|
6756
|
+
"_modal": [4],
|
|
6757
|
+
"_on": [16],
|
|
6758
|
+
"state": [32],
|
|
6759
|
+
"open": [64],
|
|
6760
|
+
"close": [64]
|
|
6761
|
+
},
|
|
6762
|
+
"$listeners$": undefined,
|
|
6763
|
+
"$lazyBundleId$": "-",
|
|
6764
|
+
"$attrsToReflect$": []
|
|
6765
|
+
}; }
|
|
6766
|
+
}
|
|
6767
|
+
|
|
6621
6768
|
class KolForm {
|
|
6622
6769
|
constructor(hostRef) {
|
|
6623
6770
|
registerInstance(this, hostRef);
|
|
@@ -6655,10 +6802,10 @@ class KolForm {
|
|
|
6655
6802
|
this.state = {};
|
|
6656
6803
|
}
|
|
6657
6804
|
render() {
|
|
6658
|
-
return (hAsync(Host, { key: '
|
|
6805
|
+
return (hAsync(Host, { key: '005270f9d4c739b5f2b399546d91dc8559bb45db', class: "kol-form" }, this._errorList && this._errorList.length > 0 && (hAsync(KolAlertTag, { key: '7acdf57b3f0954ee26df575334f7521d1898a597', _type: "error" }, translate('kol-error-list-message'), hAsync("nav", { key: 'f16799bcbb7f60baec798674acb9f38c28424ce0', "aria-label": translate('kol-error-list') }, hAsync("ul", { key: '8c86a5fa750031073142d383d1806bcae7a9eec6' }, this._errorList.map((error, index) => (hAsync("li", { key: index }, hAsync(KolLinkTag, { _href: error.selector, _label: error.message, _on: { onClick: this.handleLinkClick }, ref: (el) => {
|
|
6659
6806
|
if (index === 0)
|
|
6660
6807
|
this.errorListElement = el;
|
|
6661
|
-
} })))))))), hAsync("form", { key: '
|
|
6808
|
+
} })))))))), hAsync("form", { key: 'a626ea1dc80b465abfc4153b4c2217a462e3faf0', method: "post", onSubmit: this.onSubmit, onReset: this.onReset, autoComplete: "off", noValidate: true }, this.state._requiredText === true ? (hAsync("p", null, hAsync(KolIndentedTextTag, null, translate('kol-form-description')))) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (hAsync("p", null, hAsync(KolIndentedTextTag, null, this.state._requiredText))) : null, hAsync("slot", { key: '05b129e368edc5151a8e3b19bc696b749be3db2a' }))));
|
|
6662
6809
|
}
|
|
6663
6810
|
async focusErrorList() {
|
|
6664
6811
|
setTimeout(() => {
|
|
@@ -6723,7 +6870,7 @@ class KolHeading {
|
|
|
6723
6870
|
this._variant = undefined;
|
|
6724
6871
|
}
|
|
6725
6872
|
render() {
|
|
6726
|
-
return (hAsync(KolHeadingWcTag, { key: '
|
|
6873
|
+
return (hAsync(KolHeadingWcTag, { key: '6ad0f63801b30d55ce6a1c5c5bafc2c9ec623752', _label: this._label, _level: this._level, _secondaryHeadline: this._secondaryHeadline, _variant: this._variant, class: "kol-heading" }, hAsync("slot", { key: '38aed341a23661c627cd84fa0f16f3d424541713', name: "expert", slot: "expert" })));
|
|
6727
6874
|
}
|
|
6728
6875
|
static get style() { return {
|
|
6729
6876
|
default: KolHeadingDefaultStyle0
|
|
@@ -6801,7 +6948,7 @@ class KolHeadingWc {
|
|
|
6801
6948
|
this.validateVariant(this._variant);
|
|
6802
6949
|
}
|
|
6803
6950
|
render() {
|
|
6804
|
-
return (hAsync(Host, { key: '
|
|
6951
|
+
return (hAsync(Host, { key: '16152887a63517d019bee1e1aa4669c32a581a37', class: "kol-heading-wc" }, typeof this.state._secondaryHeadline === 'string' && this.state._secondaryHeadline.length > 0 ? (hAsync("hgroup", null, this.renderHeadline(this.state._label, this.state._level), this.state._secondaryHeadline && this.renderSecondaryHeadline(this.state._secondaryHeadline, this.state._level + 1))) : (this.renderHeadline(this.state._label, this.state._level))));
|
|
6805
6952
|
}
|
|
6806
6953
|
static get watchers() { return {
|
|
6807
6954
|
"_label": ["validateLabel"],
|
|
@@ -6840,7 +6987,7 @@ class KolIcon {
|
|
|
6840
6987
|
}
|
|
6841
6988
|
render() {
|
|
6842
6989
|
const ariaShow = this.state._label.length > 0;
|
|
6843
|
-
return (hAsync(Host, { key: '
|
|
6990
|
+
return (hAsync(Host, { key: '3083ab3b7dfac62823b415deed2a943624e3d3d7', exportparts: "icon", class: "kol-icon" }, hAsync("i", { key: '197b0e98fa4672a91bd6f7e8836c99b26c62eeaf', "aria-hidden": ariaShow ? undefined : 'true', "aria-label": ariaShow ? this.state._label : undefined, class: this.state._icons, part: "icon", role: "img" })));
|
|
6844
6991
|
}
|
|
6845
6992
|
validateIcons(value) {
|
|
6846
6993
|
watchString(this, '_icons', value, {
|
|
@@ -6921,7 +7068,7 @@ class KolImage {
|
|
|
6921
7068
|
this.validateSrcset(this._srcset);
|
|
6922
7069
|
}
|
|
6923
7070
|
render() {
|
|
6924
|
-
return (hAsync(Host, { key: '
|
|
7071
|
+
return (hAsync(Host, { key: 'eea8ad6a0b03687005b477fec030de58aa049891', class: "kol-image" }, hAsync("img", { key: 'd00475bd0c8df6a965ae402879910a430231b4a1', alt: this.state._alt, loading: this.state._loading, sizes: this.state._sizes, src: this.state._src, srcset: this.state._srcset })));
|
|
6925
7072
|
}
|
|
6926
7073
|
static get watchers() { return {
|
|
6927
7074
|
"_alt": ["validateAlt"],
|
|
@@ -6959,7 +7106,7 @@ class KolIndentedText {
|
|
|
6959
7106
|
this.state = {};
|
|
6960
7107
|
}
|
|
6961
7108
|
render() {
|
|
6962
|
-
return (hAsync(Host, { key: '
|
|
7109
|
+
return (hAsync(Host, { key: '674c96016710a7da20d2818387457838785b3356', class: "kol-indented-text-wc" }, hAsync("div", { key: 'b8f4bc81340ef597d42df3ab5e997a4eacb12267' }, hAsync("slot", { key: '29084aadeed639db76fed6a9a3bdf46facf5ef52' }))));
|
|
6963
7110
|
}
|
|
6964
7111
|
static get style() { return {
|
|
6965
7112
|
default: KolIndentedTextDefaultStyle0
|
|
@@ -7111,13 +7258,13 @@ class KolInputCheckbox {
|
|
|
7111
7258
|
render() {
|
|
7112
7259
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
7113
7260
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
7114
|
-
return (hAsync(Host, { key: '
|
|
7261
|
+
return (hAsync(Host, { key: 'c6e77b07be323b6960575e6fbb3158f2eacbe300', class: "kol-input-checkbox" }, hAsync(KolInputWcTag, { key: 'dea203766cd16d41f80421663c0ec2d71bf2029d', class: {
|
|
7115
7262
|
checkbox: true,
|
|
7116
7263
|
[this.state._variant]: true,
|
|
7117
7264
|
'hide-label': !!this.state._hideLabel,
|
|
7118
7265
|
checked: this.state._checked,
|
|
7119
7266
|
indeterminate: this.state._indeterminate,
|
|
7120
|
-
}, "data-role": this.state._variant === 'button' ? 'button' : undefined, _accessKey: this.state._accessKey, _alert: this.state._alert, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '
|
|
7267
|
+
}, "data-role": this.state._variant === 'button' ? 'button' : undefined, _accessKey: this.state._accessKey, _alert: this.state._alert, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '2020579556bed07bde3673b1276dce6cc460e2a5', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("label", { key: '78634c64c17aa360bf778c5b1e1a1e3fca09510d', slot: "input", class: "checkbox-container" }, hAsync(KolIconTag, { key: '076dc9636b5cbc9b0565dc38872f1c9950497bd5', class: "icon", _icons: this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked, _label: "" }), hAsync("input", Object.assign({ key: '5266c704d458674d356b67451b16d742c085ed6a', class: `checkbox-input-element${this.state._variant === 'button' ? ' visually-hidden' : ''}`, ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, checked: this.state._checked, disabled: this.state._disabled, id: this.state._id, indeterminate: this.state._indeterminate, name: this.state._name, required: this.state._required, tabIndex: this.state._tabIndex, type: "checkbox" }, this.controller.onFacade, { onInput: this.onInput, onChange: this.onChange, onClick: undefined }))))));
|
|
7121
7268
|
}
|
|
7122
7269
|
constructor(hostRef) {
|
|
7123
7270
|
registerInstance(this, hostRef);
|
|
@@ -7346,10 +7493,10 @@ class KolInputColor {
|
|
|
7346
7493
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
7347
7494
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
7348
7495
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
7349
|
-
return (hAsync(Host, { key: '
|
|
7496
|
+
return (hAsync(Host, { key: '12278adc12bc82bcf4646106d8783af67c840524', class: "kol-input-color" }, hAsync(KolInputWcTag, { key: 'b58479cd2cc206cb9da92c4c74eacdd971c70683', class: {
|
|
7350
7497
|
color: true,
|
|
7351
7498
|
'hide-label': !!this.state._hideLabel,
|
|
7352
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _hideError: this.state._hideError, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '
|
|
7499
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _hideError: this.state._hideError, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '1d221113837a1596de6e62d1f1426a3e05fd5c53', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'caeaa254044eb1a2e2413eaec95b0328daceff5b', slot: "input" }, hAsync("input", Object.assign({ key: '44a355b06a33f9066a662e9db5118d96cb72d09b', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, name: this.state._name, slot: "input", spellcheck: "false", type: "color", value: this.state._value }, this.controller.onFacade))))));
|
|
7353
7500
|
}
|
|
7354
7501
|
constructor(hostRef) {
|
|
7355
7502
|
registerInstance(this, hostRef);
|
|
@@ -7658,10 +7805,10 @@ class KolInputDate {
|
|
|
7658
7805
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
7659
7806
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
7660
7807
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
7661
|
-
return (hAsync(Host, { key: '
|
|
7808
|
+
return (hAsync(Host, { key: '72050460b3ee98b5dbf0428e53cc4efbde40bd4f', class: { 'kol-input-date': true, 'has-value': this.state._hasValue } }, hAsync(KolInputWcTag, { key: '2cae7d74a5099ce2be3df73e8b4e8d0ddbedb0a9', class: {
|
|
7662
7809
|
[this.state._type]: true,
|
|
7663
7810
|
'hide-label': !!this.state._hideLabel,
|
|
7664
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '
|
|
7811
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '2b7702c7797d2ea10765ae939e73045ee7af55c7', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '9bc4be80064e8421beb5ce285a7e1acd598ad131', slot: "input" }, hAsync("input", Object.assign({ key: '600631feb425d57a2eae743c696ef2a394246c30', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, step: this.state._step, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown }))))));
|
|
7665
7812
|
}
|
|
7666
7813
|
constructor(hostRef) {
|
|
7667
7814
|
registerInstance(this, hostRef);
|
|
@@ -7991,10 +8138,10 @@ class KolInputEmail {
|
|
|
7991
8138
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
7992
8139
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
7993
8140
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
7994
|
-
return (hAsync(Host, { key: '
|
|
8141
|
+
return (hAsync(Host, { key: 'f60ec3462b131d7376943c3436695cc5f59929de', class: {
|
|
7995
8142
|
'kol-input-email': true,
|
|
7996
8143
|
'has-value': this.state._hasValue,
|
|
7997
|
-
} }, hAsync(KolInputWcTag, { key: '
|
|
8144
|
+
} }, hAsync(KolInputWcTag, { key: '2819f8e7942706ef3eaa288d82f9c0e09ff340e1', class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'e5e1918575ceb7331b3eba904418dbe77f236694', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'bb364ee95a539bcbf7645733943c80a9c9ac2917', slot: "input" }, hAsync("input", Object.assign({ key: '94d7e12786c8974d4e843a8cf10cbdd17b90b4eb', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, multiple: this.state._multiple, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: "email", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput }))))));
|
|
7998
8145
|
}
|
|
7999
8146
|
constructor(hostRef) {
|
|
8000
8147
|
registerInstance(this, hostRef);
|
|
@@ -8253,10 +8400,10 @@ class KolInputFile {
|
|
|
8253
8400
|
render() {
|
|
8254
8401
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
8255
8402
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
8256
|
-
return (hAsync(Host, { key: '
|
|
8403
|
+
return (hAsync(Host, { key: '70527644af89e9894413ed9e6530725633dfb94f', class: "kol-input-file" }, hAsync(KolInputWcTag, { key: '1d4d28a8d35215d1f201bf1ce6e267e80af96a45', class: {
|
|
8257
8404
|
file: true,
|
|
8258
8405
|
'hide-label': !!this.state._hideLabel,
|
|
8259
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '
|
|
8406
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '5b94e7b33c625ff27046c09cb4991377735ee004', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '94cb6517d3092ce9fc7af91f679a2ac4cfd67755', slot: "input" }, hAsync("input", Object.assign({ key: '44119e673f3cdd1121c905c339542b016214ede8', ref: this.catchRef, title: "", accept: this.state._accept, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, spellcheck: "false", type: "file", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput }))))));
|
|
8260
8407
|
}
|
|
8261
8408
|
constructor(hostRef) {
|
|
8262
8409
|
registerInstance(this, hostRef);
|
|
@@ -8530,13 +8677,13 @@ class KolInputNumber {
|
|
|
8530
8677
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
8531
8678
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
8532
8679
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
8533
|
-
return (hAsync(Host, { key: '
|
|
8680
|
+
return (hAsync(Host, { key: '7c942a16c6f0b9955a470e716b345054788dac88', class: {
|
|
8534
8681
|
'kol-input-number': true,
|
|
8535
8682
|
'has-value': this.state._hasValue,
|
|
8536
|
-
} }, hAsync(KolInputWcTag, { key: '
|
|
8683
|
+
} }, hAsync(KolInputWcTag, { key: '49c04c405b6f4fda566fe1e95e0d733fefe001df', class: {
|
|
8537
8684
|
number: true,
|
|
8538
8685
|
'hide-label': !!this.state._hideLabel,
|
|
8539
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '
|
|
8686
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: 'd508a9a3f668a93fc5cbabfe952d7b584499026e', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'f70f34639c08ceb1a6302bf733ca4983236f60c4', slot: "input" }, hAsync("input", Object.assign({ key: '7d1c3578ca40fa71499021c5d56130cf48751240', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, placeholder: this.state._placeholder, step: this.state._step, spellcheck: "false", type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown }))))));
|
|
8540
8687
|
}
|
|
8541
8688
|
constructor(hostRef) {
|
|
8542
8689
|
registerInstance(this, hostRef);
|
|
@@ -8762,13 +8909,13 @@ class KolInputPassword {
|
|
|
8762
8909
|
var _a;
|
|
8763
8910
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
8764
8911
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
8765
|
-
return (hAsync(Host, { key: '
|
|
8912
|
+
return (hAsync(Host, { key: 'ea5897bd368a1283a3d7d700930076c09eb11279', class: {
|
|
8766
8913
|
'kol-input-password': true,
|
|
8767
8914
|
'has-value': this.state._hasValue,
|
|
8768
|
-
} }, hAsync(KolInputWcTag, { key: '
|
|
8915
|
+
} }, hAsync(KolInputWcTag, { key: '24283ff4bdde3bb0d65e9f6fd05e7f10c65dc95d', class: {
|
|
8769
8916
|
'hide-label': !!this.state._hideLabel,
|
|
8770
8917
|
password: true,
|
|
8771
|
-
}, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '
|
|
8918
|
+
}, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '8f6584a8f778e3678ea2fcdf958dc2ccdea35bfb', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '75ba6ee425bd6ae83af778380d295d38a5bc3883', slot: "input" }, hAsync("input", Object.assign({ key: '46311342eb97825b8c319abd73a591ec3f82711d', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: this._passwordVisible ? 'text' : 'password', value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput })), this._variant === 'visibility-toggle' && this.ref && ((_a = this.ref.value) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (hAsync(KolButtonWcTag, { class: "password-toggle-button", _label: this._passwordVisible ? translate('kol-hide-password') : translate('kol-show-password'), _variant: "ghost", _on: {
|
|
8772
8919
|
onClick: () => {
|
|
8773
8920
|
this._passwordVisible = !this._passwordVisible;
|
|
8774
8921
|
},
|
|
@@ -8840,7 +8987,7 @@ class KolInputPassword {
|
|
|
8840
8987
|
validateAutoComplete(value) {
|
|
8841
8988
|
this.controller.validateAutoComplete(value);
|
|
8842
8989
|
if (value === 'on') {
|
|
8843
|
-
devHint(`[KolInputPassword]
|
|
8990
|
+
devHint(`[KolInputPassword] The 'autocomplete' option should not be set to "on" for a password input field`);
|
|
8844
8991
|
}
|
|
8845
8992
|
}
|
|
8846
8993
|
validateDisabled(value) {
|
|
@@ -9007,14 +9154,14 @@ class KolInputRadio {
|
|
|
9007
9154
|
render() {
|
|
9008
9155
|
const { ariaDescribedBy, hasError } = getRenderStates(this.state);
|
|
9009
9156
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
9010
|
-
return (hAsync(Host, { key: '
|
|
9157
|
+
return (hAsync(Host, { key: '86b677936fe9165f668334c11564698c2c18746f', class: "kol-input-radio" }, hAsync("fieldset", { key: 'f6abab7ceee78e206a3a0e45c93596530e41ffdb', class: {
|
|
9011
9158
|
fieldset: true,
|
|
9012
9159
|
disabled: this.state._disabled === true,
|
|
9013
9160
|
error: hasError === true,
|
|
9014
9161
|
required: this.state._required === true,
|
|
9015
9162
|
'hidden-error': this._hideError === true,
|
|
9016
9163
|
[this.state._orientation]: true,
|
|
9017
|
-
} }, hAsync("legend", { key: '
|
|
9164
|
+
} }, hAsync("legend", { key: '711fa62fdb66d0a7dfc2cb0d7d1d21bf8b2bfd7e', class: "block w-full mb-1 leading-normal" }, hAsync("span", { key: '819e17c927a25b4ebad3749d13484ce5c2f9ef6e' }, hAsync("span", { key: 'dc6206a96bd67252732b89cc90da0abbba1c74b1', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this._accessKey === 'string' ? (hAsync(InternalUnderlinedAccessKey, { accessKey: this._accessKey, label: this._label })) : (this._label)))), this.state._options.map((option, index) => {
|
|
9018
9165
|
const customId = `${this.state._id}-${index}`;
|
|
9019
9166
|
const slotName = `radio-${index}`;
|
|
9020
9167
|
const selected = this.state._value === option.value;
|
|
@@ -9027,7 +9174,7 @@ class KolInputRadio {
|
|
|
9027
9174
|
padding: this.state._hideLabel ? '0' : undefined,
|
|
9028
9175
|
visibility: this.state._hideLabel ? 'hidden' : undefined,
|
|
9029
9176
|
} }, hAsync("span", null, hAsync("span", { class: "radio-label-span-inner" }, option.label))))));
|
|
9030
|
-
}), hasError && hAsync(FormFieldMsg, { key: '
|
|
9177
|
+
}), hasError && hAsync(FormFieldMsg, { key: '760ba7509479d2682c81f9708c5524a79c8d3e78', _alert: this.state._alert, _hideError: this.state._hideError, _msg: this.state._msg, _id: this.state._id }))));
|
|
9031
9178
|
}
|
|
9032
9179
|
constructor(hostRef) {
|
|
9033
9180
|
registerInstance(this, hostRef);
|
|
@@ -9289,13 +9436,13 @@ class KolInputRange {
|
|
|
9289
9436
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
9290
9437
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
9291
9438
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
9292
|
-
return (hAsync(Host, { key: '
|
|
9439
|
+
return (hAsync(Host, { key: '06a9a8451479014d3a2742239680bf0775bc2139', class: "kol-input-range" }, hAsync(KolInputWcTag, { key: '0beef62d205934ad3dd3adad00ea33fa736902d8', class: {
|
|
9293
9440
|
range: true,
|
|
9294
9441
|
'hide-label': !!this.state._hideLabel,
|
|
9295
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '
|
|
9442
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '8b5721dbd67a8115eae5d8050a990c1d03782921', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'acb3457b3a77962b6f94fea31529ee20b0e9e49f', slot: "input" }, hAsync("div", { key: 'dd6411145181d264476a59f1c48217aa36d4604e', class: "inputs-wrapper", style: {
|
|
9296
9443
|
'--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',
|
|
9297
|
-
} }, hAsync("input", Object.assign({ key: '
|
|
9298
|
-
hAsync("datalist", { key: '
|
|
9444
|
+
} }, hAsync("input", Object.assign({ key: '874cb60b00ec0a1d22127e3f5de492dffb78ee25', ref: this.catchInputRangeRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-hidden": "true", autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-range` : undefined, spellcheck: "false", step: this.state._step, tabIndex: -1, type: "range", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange })), hAsync("input", Object.assign({ key: 'be7b014ab1082e66a553f74c371c7915bd742817', ref: this.catchInputNumberRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-number` : undefined, step: this.state._step, type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onChange: this.onChange }))), hasSuggestions && [
|
|
9445
|
+
hAsync("datalist", { key: 'b4156f2bbd9f3b7d3c1b6a3d7fb072fd1623368c', id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
|
|
9299
9446
|
]))));
|
|
9300
9447
|
}
|
|
9301
9448
|
constructor(hostRef) {
|
|
@@ -9511,13 +9658,13 @@ class KolInputText {
|
|
|
9511
9658
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
9512
9659
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
9513
9660
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
9514
|
-
return (hAsync(Host, { key: '
|
|
9661
|
+
return (hAsync(Host, { key: '96f4d125a686ddd2913cb7e0ce0bcc4f6bd4cbce', class: {
|
|
9515
9662
|
'has-value': this.state._hasValue,
|
|
9516
9663
|
'kol-input-text': true,
|
|
9517
|
-
} }, hAsync(KolInputWcTag, { key: '
|
|
9664
|
+
} }, hAsync(KolInputWcTag, { key: '36ab21f90409094c131b92f56b85f5691fc66e84', class: {
|
|
9518
9665
|
[this.state._type]: true,
|
|
9519
9666
|
'hide-label': !!this.state._hideLabel,
|
|
9520
|
-
}, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _suggestions: this.state._suggestions, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '
|
|
9667
|
+
}, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _suggestions: this.state._suggestions, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '92258a27bf785587a2db0b690162373d51824fae', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'c3b0151f4e3060753c0887d802fd55bf15ead09b', slot: "input" }, hAsync("input", Object.assign({ key: '98e90d33f10c3f5a72e585040b97fd093f785d17', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput, onKeyDown: this.onKeyDown }))))));
|
|
9521
9668
|
}
|
|
9522
9669
|
constructor(hostRef) {
|
|
9523
9670
|
registerInstance(this, hostRef);
|
|
@@ -9793,18 +9940,18 @@ class KolInputWc {
|
|
|
9793
9940
|
const hasExpertSlot = showExpertSlot(this._label);
|
|
9794
9941
|
const hasHint = typeof this._hint === 'string' && this._hint.length > 0;
|
|
9795
9942
|
const useTooltopInsteadOfLabel = !hasExpertSlot && this._hideLabel;
|
|
9796
|
-
return (hAsync(Host, { key: '
|
|
9943
|
+
return (hAsync(Host, { key: '8f4ba7be771e2794dba0bbea4c93de58237f2b02', class: clsx('kol-input', this.getModifierClassNameByMsgType(), {
|
|
9797
9944
|
disabled: this._disabled === true,
|
|
9798
9945
|
error: hasError === true,
|
|
9799
9946
|
'read-only': this._readOnly === true,
|
|
9800
9947
|
required: this._required === true,
|
|
9801
9948
|
touched: this._touched === true,
|
|
9802
9949
|
'hidden-error': this._hideError === true,
|
|
9803
|
-
}) }, hAsync("label", { key: '
|
|
9950
|
+
}) }, hAsync("label", { key: 'c4397e40e8d492187c1bae3bbe4be1b6449bc9d9', class: "input-label", id: !useTooltopInsteadOfLabel ? `${this._id}-label` : undefined, hidden: useTooltopInsteadOfLabel, htmlFor: this._id }, hAsync("span", { key: '543c3749b69fdde2ebc88ae7a342143f352b4e01', class: "input-label-span" }, hAsync("slot", { key: 'f1c24dabbbd1d75dbe37ee774b3ad52567bbefbf', name: "label" }))), hasHint && (hAsync("span", { key: 'adb87f975d975a866e22a55838eafb409f362729', class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { key: '38f52cdf606c001800b0f93a9e48542b3c0d59e3', class: {
|
|
9804
9951
|
input: true,
|
|
9805
9952
|
'icon-left': typeof ((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) === 'object',
|
|
9806
9953
|
'icon-right': typeof ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) === 'object',
|
|
9807
|
-
} }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: '
|
|
9954
|
+
} }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: '5af1b04137afa941269af05dd35a684c21384d46', _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: 'a32419d39395a44a61ee9abd6d3b3f785345c6ab', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { key: 'f09aecd73a43a2452a83b31badc9a9d8a48e202a', _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: '49140be539ede37df384be1dce9f3db2d4f774d9', _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) }))), useTooltopInsteadOfLabel && (hAsync(KolTooltipWcTag, { key: '9192e8e543ade06f365baacc1c7e5012d48e6d94', "aria-hidden": "true", class: "input-tooltip", _accessKey: this._accessKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), showFormFieldMsg && hAsync(FormFieldMsg, { key: 'cc846ab34c1aa368b16a135a40dd59ae03268a5d', _alert: this._alert, _hideError: this._hideError, _msg: this._msg, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { key: '015c7ff9403fc46bcbd3056e6ec757af46044418', id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync("span", { key: 'b558e392516d0ed5fbb41a327b467f9e330a4980', class: "counter", "aria-atomic": "true", "aria-live": "polite" }, this._currentLength, this._maxLength && (hAsync(Fragment, null, hAsync("span", { key: '9ea2c55e5a88a3ea87f295b76b88540fd004ebe0', "aria-label": translate('kol-of'), role: "img" }, "/"), this._maxLength)), ' ', hAsync("span", { key: '613f73ee31fb7fada22737c9a2172bb17d37264f' }, translate('kol-characters'))))));
|
|
9808
9955
|
}
|
|
9809
9956
|
getModifierClassNameByMsgType() {
|
|
9810
9957
|
var _a, _b;
|
|
@@ -9883,7 +10030,7 @@ class KolKolibri {
|
|
|
9883
10030
|
}
|
|
9884
10031
|
render() {
|
|
9885
10032
|
const fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
|
|
9886
|
-
return (hAsync(Host, { key: '
|
|
10033
|
+
return (hAsync(Host, { key: '848156de9170117ffdedde1a12f72b2c24fb2a11', class: "kol-kolibri" }, hAsync("svg", { key: '7cde143186c9d70d2b62759e0b8682b66ca55338', 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: 'a544b4892fce5dae895546901452dad04acbc72a', d: "M353 322L213 304V434L353 322Z" }), hAsync("path", { key: '73ad3de5b24cf887e7b5791ba5d449eae04226e3', d: "M209 564V304L149 434L209 564Z" }), hAsync("path", { key: 'a0585763be4aff3f61ecc1d3534bddac28d976a4', d: "M357 316L417 250L361 210L275 244L357 316Z" }), hAsync("path", { key: '8138d7a57e0230ea9699e9f5d19fc54f8d095bf1', d: "M329 218L237 92L250 222L272 241L329 218Z" }), hAsync("path", { key: '3cc8481cf01928f0f39bcc45e6de53e90398ad40', d: "M353 318L35 36L213 300L353 318Z" }), hAsync("path", { key: 'c4a97edf0bf361a5bf34f6a468daf984eda0736e', d: "M391 286L565 272L421 252L391 286Z" }), this.state._labeled === true && (hAsync("text", { key: 'cdb74da516faf671d98402d5f83352c07086ae37', x: "250", y: "525", fill: fillColor }, "KoliBri")))));
|
|
9887
10034
|
}
|
|
9888
10035
|
validateColor(value) {
|
|
9889
10036
|
validateColor(this, value, {
|
|
@@ -9947,7 +10094,7 @@ class KolLink {
|
|
|
9947
10094
|
this._tooltipAlign = 'right';
|
|
9948
10095
|
}
|
|
9949
10096
|
render() {
|
|
9950
|
-
return (hAsync(Host, { key: '
|
|
10097
|
+
return (hAsync(Host, { key: '4c5a3b453eb75d28f7d9f2178bf060befc388215', class: "kol-link" }, hAsync(KolLinkWcTag, { key: '4dda3e3b01076322d1b69127bdaffe2a647fb92a', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: this._role, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: '571fc9a7565443fea650504728a1e5c56d8f2648', name: "expert", slot: "expert" }))));
|
|
9951
10098
|
}
|
|
9952
10099
|
get host() { return getElement(this); }
|
|
9953
10100
|
static get style() { return {
|
|
@@ -10003,11 +10150,11 @@ class KolLinkButton {
|
|
|
10003
10150
|
this._variant = 'normal';
|
|
10004
10151
|
}
|
|
10005
10152
|
render() {
|
|
10006
|
-
return (hAsync(Host, { key: '
|
|
10153
|
+
return (hAsync(Host, { key: 'd5228dea8b70b7c3ae5179ad65acc960d19bd56d', class: "kol-link-button" }, hAsync(KolLinkWcTag, { key: '2133362600a94bf784e4756b721e40071035b594', ref: this.catchRef, class: {
|
|
10007
10154
|
button: true,
|
|
10008
10155
|
[this._variant]: this._variant !== 'custom',
|
|
10009
10156
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
10010
|
-
}, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: "button", _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: '
|
|
10157
|
+
}, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: "button", _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: 'e5d63b9bb8224378685193f3b2a95fa89549699c', name: "expert", slot: "expert" }))));
|
|
10011
10158
|
}
|
|
10012
10159
|
get host() { return getElement(this); }
|
|
10013
10160
|
static get style() { return {
|
|
@@ -10070,10 +10217,10 @@ class KolLinkGroup {
|
|
|
10070
10217
|
}
|
|
10071
10218
|
render() {
|
|
10072
10219
|
const ListTag = this.isUl ? 'ul' : 'ol';
|
|
10073
|
-
return (hAsync(Host, { key: '
|
|
10220
|
+
return (hAsync(Host, { key: 'e1358fcd3cf6415d8847992ee32d90bbcada6e35', class: "kol-link-group" }, hAsync(ListTag, { key: '5f7747dae40ab94612914e94a5aa126acb644f75', "aria-label": this.state._label, class: {
|
|
10074
10221
|
vertical: this.state._orientation === 'vertical',
|
|
10075
10222
|
horizontal: this.state._orientation === 'horizontal',
|
|
10076
|
-
} }, hAsync(ListItem, { key: '
|
|
10223
|
+
} }, hAsync(ListItem, { key: '9a5b36776720a38d0476f2f5fd34dd734e3aeab5', links: this.state._links, orientation: this.state._orientation, listStyleType: this.state._listStyleType }))));
|
|
10077
10224
|
}
|
|
10078
10225
|
validateLabel(value, _oldValue, initial = false) {
|
|
10079
10226
|
if (!initial && this.state._label) {
|
|
@@ -10186,12 +10333,14 @@ class KolLinkWc {
|
|
|
10186
10333
|
download: typeof this.state._download === 'string' ? this.state._download : undefined,
|
|
10187
10334
|
};
|
|
10188
10335
|
if (this.state._hideLabel === true && !this.state._label) {
|
|
10189
|
-
devHint(`[KolLink]
|
|
10336
|
+
devHint(`[KolLink] An aria-label must be set when _hide-label is set.`);
|
|
10190
10337
|
}
|
|
10191
10338
|
return { isExternal, tagAttrs };
|
|
10192
10339
|
};
|
|
10193
10340
|
this._accessKey = undefined;
|
|
10194
10341
|
this._ariaCurrentValue = undefined;
|
|
10342
|
+
this._ariaExpanded = undefined;
|
|
10343
|
+
this._ariaOwns = undefined;
|
|
10195
10344
|
this._disabled = false;
|
|
10196
10345
|
this._download = undefined;
|
|
10197
10346
|
this._hideLabel = false;
|
|
@@ -10212,13 +10361,13 @@ class KolLinkWc {
|
|
|
10212
10361
|
render() {
|
|
10213
10362
|
const { isExternal, tagAttrs } = this.getRenderValues();
|
|
10214
10363
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
10215
|
-
return (hAsync(Host, { key: '
|
|
10364
|
+
return (hAsync(Host, { key: 'ba7667ded942c997fc52b057a0f9ce8e2bf79daa', class: "kol-link-wc" }, hAsync("a", Object.assign({ key: '906dd600d85d83dd073e53393e24773f836f5612', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": this.state._ariaExpanded ? 'true' : undefined, "aria-owns": this.state._ariaOwns, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
|
|
10216
10365
|
? `${this.state._label}${isExternal ? ` (${translate('kol-open-link-in-tab')})` : ''}`
|
|
10217
10366
|
: undefined, class: {
|
|
10218
10367
|
disabled: this.state._disabled === true,
|
|
10219
10368
|
'external-link': isExternal,
|
|
10220
10369
|
'hide-label': this.state._hideLabel === true,
|
|
10221
|
-
} }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanWcTag, { key: '
|
|
10370
|
+
} }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanWcTag, { key: '0049db400816f9fe77dec4a71b97a6e3c6d4b701', _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: '0f265de4576987908cca965a43bfe261e9ee70bb', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: 'ea163b0f51cdefb92edbe8382608d87ef7d20b5f', class: "external-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: '8eb7db57a9866a93fd275702142a3dd20fd5cb7d', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this.state._accessKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href })));
|
|
10222
10371
|
}
|
|
10223
10372
|
validateAccessKey(value) {
|
|
10224
10373
|
validateAccessKey(this, value);
|
|
@@ -10226,6 +10375,12 @@ class KolLinkWc {
|
|
|
10226
10375
|
validateAriaCurrentValue(value) {
|
|
10227
10376
|
validateAriaCurrentValue(this, value);
|
|
10228
10377
|
}
|
|
10378
|
+
validateAriaExpanded(value) {
|
|
10379
|
+
validateAriaExpanded(this, value);
|
|
10380
|
+
}
|
|
10381
|
+
validateAriaOwns(value) {
|
|
10382
|
+
validateAriaOwns(this, value);
|
|
10383
|
+
}
|
|
10229
10384
|
validateDisabled(value) {
|
|
10230
10385
|
validateDisabled(this, value);
|
|
10231
10386
|
}
|
|
@@ -10264,6 +10419,8 @@ class KolLinkWc {
|
|
|
10264
10419
|
componentWillLoad() {
|
|
10265
10420
|
this.validateAccessKey(this._accessKey);
|
|
10266
10421
|
this.validateAriaCurrentValue(this._ariaCurrentValue);
|
|
10422
|
+
this.validateAriaExpanded(this._ariaExpanded);
|
|
10423
|
+
this.validateAriaOwns(this._ariaOwns);
|
|
10267
10424
|
this.validateDisabled(this._disabled);
|
|
10268
10425
|
this.validateDownload(this._download);
|
|
10269
10426
|
this.validateHideLabel(this._hideLabel);
|
|
@@ -10288,6 +10445,8 @@ class KolLinkWc {
|
|
|
10288
10445
|
static get watchers() { return {
|
|
10289
10446
|
"_accessKey": ["validateAccessKey"],
|
|
10290
10447
|
"_ariaCurrentValue": ["validateAriaCurrentValue"],
|
|
10448
|
+
"_ariaExpanded": ["validateAriaExpanded"],
|
|
10449
|
+
"_ariaOwns": ["validateAriaOwns"],
|
|
10291
10450
|
"_disabled": ["validateDisabled"],
|
|
10292
10451
|
"_download": ["validateDownload"],
|
|
10293
10452
|
"_hideLabel": ["validateHideLabel"],
|
|
@@ -10306,6 +10465,8 @@ class KolLinkWc {
|
|
|
10306
10465
|
"$members$": {
|
|
10307
10466
|
"_accessKey": [1, "_access-key"],
|
|
10308
10467
|
"_ariaCurrentValue": [1, "_aria-current-value"],
|
|
10468
|
+
"_ariaExpanded": [4, "_aria-expanded"],
|
|
10469
|
+
"_ariaOwns": [1, "_aria-owns"],
|
|
10309
10470
|
"_disabled": [4],
|
|
10310
10471
|
"_download": [1],
|
|
10311
10472
|
"_hideLabel": [4, "_hide-label"],
|
|
@@ -10524,7 +10685,7 @@ class KolLogo {
|
|
|
10524
10685
|
setState(this, '_org', value);
|
|
10525
10686
|
}
|
|
10526
10687
|
else {
|
|
10527
|
-
devHint(`
|
|
10688
|
+
devHint(`The abbreviation (${value}) used is not defined!`);
|
|
10528
10689
|
}
|
|
10529
10690
|
}
|
|
10530
10691
|
componentWillLoad() {
|
|
@@ -10532,7 +10693,7 @@ class KolLogo {
|
|
|
10532
10693
|
}
|
|
10533
10694
|
render() {
|
|
10534
10695
|
var _a;
|
|
10535
|
-
return (hAsync(Host, { key: '
|
|
10696
|
+
return (hAsync(Host, { key: 'eb43c9514719417f729a1c73826c19a0a92e2c9f', class: "kol-logo" }, hAsync("svg", { key: '840038582973d0c4b49a8db280684e1946527afa', "aria-label": translate('kol-logo-description', { placeholders: { orgShort: this.state._org, orgLong: getAriaLabel(this.state._org) } }), role: "img", viewBox: "0 0 225 100" }, hAsync("rect", { key: 'cd8095e12985f67a4e7b267716898e6fff8add07', width: "100%", height: "100%", fill: "white" }), hAsync("svg", { key: '537fcddc64e406319c6af1703cde8f61dd49ba7e', x: "0", y: "4", height: "75" }, hAsync(Adler, { key: '8987c99b9a13c2a627b2442af58b39aad06c7842' })), hAsync("svg", { key: '9acb90fbb65c4c75d850e3fa91881c4481a3c8c7', x: "40.5", y: "3.5", height: "100" }, hAsync("rect", { key: 'b8a4e853d12cb71016b6b16138198a7a1f8035a4', width: "5", height: "30" }), hAsync("rect", { key: '7190ab2cb4c32823d1cd49335f51aa731b183250', y: "30", width: "5", height: "30", fill: "red" }), hAsync("rect", { key: '2b1d9740b8690c731b37be6407c314cd677d7d6e', y: "60", width: "5", height: "30", fill: "#fc0" })), hAsync("svg", { key: '9ce09f41d0797e663f18b49ff699ca645bb38693', x: "50", y: "0" }, hAsync("text", { key: '2a6146524db3b04d7f56efc6749a9b15c95e1418', x: "0", y: "-0.05em", "font-family": "BundesSans Web", style: { backgroundColor: 'white', color: 'black' } }, BUND_LOGO_TEXT_MAP.has(this.state._org) ? (hAsync("tspan", null, (_a = BUND_LOGO_TEXT_MAP.get(this.state._org)) === null || _a === void 0 ? void 0 : _a.map((text, index) => {
|
|
10536
10697
|
return (hAsync("tspan", { x: "0", dy: "1.1em", key: `kol-logo-text-${index}` }, text));
|
|
10537
10698
|
}))) : (hAsync("tspan", { fill: "red" }, hAsync("tspan", { x: "0", dy: "1.1em" }, "Der Schl\u00FCsselwert"), hAsync("tspan", { x: "0", dy: "1.1em", "font-weight": "bold" }, "'", this.state._org, "'"), hAsync("tspan", { x: "0", dy: "1.1em" }, "ist nicht definiert."), hAsync("tspan", { x: "0", dy: "1.1em" }, "oder freigegeben."))))))));
|
|
10538
10699
|
}
|
|
@@ -10644,7 +10805,7 @@ class ModalService {
|
|
|
10644
10805
|
}
|
|
10645
10806
|
openModal(modalRef, activeElement) {
|
|
10646
10807
|
if (modalRef instanceof HTMLElement === false) {
|
|
10647
|
-
Log.warn(`[KolModalService]
|
|
10808
|
+
Log.warn(`[KolModalService] The DOM reference of the modal is not valid.`);
|
|
10648
10809
|
}
|
|
10649
10810
|
else {
|
|
10650
10811
|
this.modalStack.set(modalRef, {
|
|
@@ -10656,7 +10817,7 @@ class ModalService {
|
|
|
10656
10817
|
closeModal(modalRef) {
|
|
10657
10818
|
var _a;
|
|
10658
10819
|
if (modalRef instanceof HTMLElement === false) {
|
|
10659
|
-
Log.warn(`[KolModalService]
|
|
10820
|
+
Log.warn(`[KolModalService] The DOM reference of the modal is not valid.`);
|
|
10660
10821
|
}
|
|
10661
10822
|
else {
|
|
10662
10823
|
const activeElement = (_a = this.modalStack.get(modalRef)) === null || _a === void 0 ? void 0 : _a.activeElement;
|
|
@@ -10704,16 +10865,16 @@ class KolModal {
|
|
|
10704
10865
|
}
|
|
10705
10866
|
}
|
|
10706
10867
|
render() {
|
|
10707
|
-
return (hAsync(Host, { key: '
|
|
10868
|
+
return (hAsync(Host, { key: '8dcce275d7ded560756ed8fa4bef54ee4d3a20e2', class: "kol-modal", ref: (el) => {
|
|
10708
10869
|
this.hostElement = el;
|
|
10709
|
-
} }, this.state._activeElement && (hAsync("div", { key: '
|
|
10870
|
+
} }, this.state._activeElement && (hAsync("div", { key: '7706d586dcddf9cf5a23040d01aa318e8dd460ba', class: "overlay" }, hAsync("div", { key: '5d32e1415e11d4f598035f68a6353bf4516174df', class: "modal", style: {
|
|
10710
10871
|
width: this.state._width,
|
|
10711
10872
|
}, "aria-label": this.state._label, "aria-modal": "true", role: "dialog", onKeyDown: this.onKeyDown, ref: (el) => {
|
|
10712
10873
|
if (el) {
|
|
10713
10874
|
el.setAttribute('tabindex', '0');
|
|
10714
10875
|
setTimeout(() => el.focus(), 250);
|
|
10715
10876
|
}
|
|
10716
|
-
} }, hAsync("slot", { key: '
|
|
10877
|
+
} }, hAsync("slot", { key: 'cbd31db78f6c1070fad845022b3efd6f247ead54' }))))));
|
|
10717
10878
|
}
|
|
10718
10879
|
validateActiveElement(value) {
|
|
10719
10880
|
watchValidator(this, '_activeElement', (value) => typeof value === 'object' || value === null, new Set(['HTMLElement', 'null']), value, {
|
|
@@ -10888,11 +11049,11 @@ class KolNav {
|
|
|
10888
11049
|
const collapsible = this.state._collapsible === true;
|
|
10889
11050
|
const hideLabel = this.state._hideLabel === true;
|
|
10890
11051
|
const orientation = this.state._orientation;
|
|
10891
|
-
return (hAsync(Host, { key: '
|
|
11052
|
+
return (hAsync(Host, { key: 'ad305888a9a44b97ab2c5c17ecb746bedfc29ea0', class: "kol-nav" }, hAsync("div", { key: '347730ba86f73875ed8aec6de6c0d0e5bd98bd66', class: {
|
|
10892
11053
|
nav: true,
|
|
10893
11054
|
[orientation]: true,
|
|
10894
11055
|
'is-compact': this.state._hideLabel,
|
|
10895
|
-
} }, hAsync("nav", { key: '
|
|
11056
|
+
} }, hAsync("nav", { key: '9e80ad4e14e09fb5cd268802d06ae72d47cae9ad', "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: '9806875ae93b0320bbf82979c8ed4a5a0466f630', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })), hasCompactButton && (hAsync("div", { key: '26e0048f9c260311519592828553e34fdb9b51fe', class: "compact" }, hAsync(KolButtonTag, { key: '23dee1535d08bede377ee8add4d5ea31e7d7e3b3', _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: {
|
|
10896
11057
|
onClick: () => {
|
|
10897
11058
|
this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel === false });
|
|
10898
11059
|
},
|
|
@@ -10922,7 +11083,7 @@ class KolNav {
|
|
|
10922
11083
|
}
|
|
10923
11084
|
validateLinks(value) {
|
|
10924
11085
|
watchNavLinks('KolNav', this, value);
|
|
10925
|
-
devHint(`[KolNav]
|
|
11086
|
+
devHint(`[KolNav] The navigation structure is not yet validated recursively.`);
|
|
10926
11087
|
}
|
|
10927
11088
|
validateOrientation(value) {
|
|
10928
11089
|
watchValidator(this, '_orientation', (value) => value === 'horizontal' || value === 'vertical', new Set(['Orientation {horizontal, vertical}']), value, {
|
|
@@ -11643,9 +11804,10 @@ async function detectOverflow(state, options) {
|
|
|
11643
11804
|
strategy
|
|
11644
11805
|
}));
|
|
11645
11806
|
const rect = elementContext === 'floating' ? {
|
|
11646
|
-
...rects.floating,
|
|
11647
11807
|
x,
|
|
11648
|
-
y
|
|
11808
|
+
y,
|
|
11809
|
+
width: rects.floating.width,
|
|
11810
|
+
height: rects.floating.height
|
|
11649
11811
|
} : rects.reference;
|
|
11650
11812
|
const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
|
|
11651
11813
|
const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
|
|
@@ -11895,10 +12057,12 @@ const flip$1 = function (options) {
|
|
|
11895
12057
|
return {};
|
|
11896
12058
|
}
|
|
11897
12059
|
const side = getSide(placement);
|
|
12060
|
+
const initialSideAxis = getSideAxis(initialPlacement);
|
|
11898
12061
|
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
|
|
11899
12062
|
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
11900
12063
|
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
|
|
11901
|
-
|
|
12064
|
+
const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
|
|
12065
|
+
if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
|
|
11902
12066
|
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
|
11903
12067
|
}
|
|
11904
12068
|
const placements = [initialPlacement, ...fallbackPlacements];
|
|
@@ -11944,8 +12108,17 @@ const flip$1 = function (options) {
|
|
|
11944
12108
|
switch (fallbackStrategy) {
|
|
11945
12109
|
case 'bestFit':
|
|
11946
12110
|
{
|
|
11947
|
-
var _overflowsData$
|
|
11948
|
-
const placement = (_overflowsData$
|
|
12111
|
+
var _overflowsData$filter2;
|
|
12112
|
+
const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
|
|
12113
|
+
if (hasFallbackAxisSideDirection) {
|
|
12114
|
+
const currentSideAxis = getSideAxis(d.placement);
|
|
12115
|
+
return currentSideAxis === initialSideAxis ||
|
|
12116
|
+
// Create a bias to the `y` side axis due to horizontal
|
|
12117
|
+
// reading directions favoring greater width.
|
|
12118
|
+
currentSideAxis === 'y';
|
|
12119
|
+
}
|
|
12120
|
+
return true;
|
|
12121
|
+
}).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
|
|
11949
12122
|
if (placement) {
|
|
11950
12123
|
resetPlacement = placement;
|
|
11951
12124
|
}
|
|
@@ -12185,6 +12358,8 @@ async function convertValueToCoords(state, options) {
|
|
|
12185
12358
|
const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
|
|
12186
12359
|
const crossAxisMulti = rtl && isVertical ? -1 : 1;
|
|
12187
12360
|
const rawValue = evaluate(options, state);
|
|
12361
|
+
|
|
12362
|
+
// eslint-disable-next-line prefer-const
|
|
12188
12363
|
let {
|
|
12189
12364
|
mainAxis,
|
|
12190
12365
|
crossAxis,
|
|
@@ -12435,16 +12610,16 @@ const size = function (options) {
|
|
|
12435
12610
|
widthSide = side;
|
|
12436
12611
|
heightSide = alignment === 'end' ? 'top' : 'bottom';
|
|
12437
12612
|
}
|
|
12438
|
-
const
|
|
12439
|
-
const
|
|
12613
|
+
const maximumClippingHeight = height - overflow.top - overflow.bottom;
|
|
12614
|
+
const maximumClippingWidth = width - overflow.left - overflow.right;
|
|
12615
|
+
const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
|
|
12616
|
+
const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
|
|
12440
12617
|
const noShift = !state.middlewareData.shift;
|
|
12441
12618
|
let availableHeight = overflowAvailableHeight;
|
|
12442
12619
|
let availableWidth = overflowAvailableWidth;
|
|
12443
12620
|
if (isYAxis) {
|
|
12444
|
-
const maximumClippingWidth = width - overflow.left - overflow.right;
|
|
12445
12621
|
availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
|
|
12446
12622
|
} else {
|
|
12447
|
-
const maximumClippingHeight = height - overflow.top - overflow.bottom;
|
|
12448
12623
|
availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
|
|
12449
12624
|
}
|
|
12450
12625
|
if (noShift && !alignment) {
|
|
@@ -12568,8 +12743,8 @@ function getNodeScroll(element) {
|
|
|
12568
12743
|
};
|
|
12569
12744
|
}
|
|
12570
12745
|
return {
|
|
12571
|
-
scrollLeft: element.
|
|
12572
|
-
scrollTop: element.
|
|
12746
|
+
scrollLeft: element.scrollX,
|
|
12747
|
+
scrollTop: element.scrollY
|
|
12573
12748
|
};
|
|
12574
12749
|
}
|
|
12575
12750
|
function getParentNode(node) {
|
|
@@ -13411,7 +13586,7 @@ class KolPopover {
|
|
|
13411
13586
|
});
|
|
13412
13587
|
}
|
|
13413
13588
|
render() {
|
|
13414
|
-
return (hAsync(Host, { key: '
|
|
13589
|
+
return (hAsync(Host, { key: 'dcd0715b7b5ecee1797490a75861bb3660964c20', ref: this.catchHostAndTriggerElement, class: "kol-popover-wc" }, hAsync("div", { key: 'e5808e300a3b8a0382209c2d1e08e9d8b5628c5a', class: { popover: true, show: this.state._visible }, ref: this.catchPopoverElement, hidden: !this.state._show }, hAsync("div", { key: '57c5027c81f48377698c2e83a0437f7096e3f2b2', class: `arrow ${this.state._align}`, ref: this.catchArrowElement }), hAsync("slot", { key: '4a353c9f9ff9dad823e92b583be96c6fe45b3eb6' }))));
|
|
13415
13590
|
}
|
|
13416
13591
|
validateAlign(value) {
|
|
13417
13592
|
validateAlign(this, value);
|
|
@@ -13487,7 +13662,7 @@ class KolProcess {
|
|
|
13487
13662
|
};
|
|
13488
13663
|
}
|
|
13489
13664
|
render() {
|
|
13490
|
-
return (hAsync(Host, { key: '
|
|
13665
|
+
return (hAsync(Host, { key: '17d27a543723ef58650e2a409b3c2933517cebee', class: "kol-progress" }, createProgressSVG(this.state), hAsync("progress", { key: 'cce18c631b55e1819f0ab6605e431c3b7f558a0c', "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: '8a1f04ddde885c765637d56a18c5b631e1dd318b', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, this.state._liveValue, " von ", this.state._max, " ", this.state._unit)));
|
|
13491
13666
|
}
|
|
13492
13667
|
validateLabel(value) {
|
|
13493
13668
|
validateLabel(this, value);
|
|
@@ -13596,9 +13771,9 @@ class KolQuote {
|
|
|
13596
13771
|
}
|
|
13597
13772
|
render() {
|
|
13598
13773
|
const hasExpertSlot = showExpertSlot(this.state._quote);
|
|
13599
|
-
return (hAsync(Host, { key: '
|
|
13774
|
+
return (hAsync(Host, { key: '9b9860e687b3cec1527f758dcd362f8687a66f44', class: "kol-quote" }, hAsync("figure", { key: '1f3197be1bcbc754cd1ad3eb96186f6c7fd495f3', class: {
|
|
13600
13775
|
[this.state._variant]: true,
|
|
13601
|
-
} }, this.state._variant === 'block' ? (hAsync("blockquote", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { 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: '
|
|
13776
|
+
} }, this.state._variant === 'block' ? (hAsync("blockquote", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { 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: '5274e285aa6e13b3888b95d901c396ad99b952d2' }, hAsync("cite", { key: '2be67c626d0f904b40da9005362dbad7a0058775' }, hAsync(KolLinkTag, { key: '60b247245e6f7ad8377dd6d106495eaf4157ca67', _href: this.state._href, _label: this.state._label, _target: "_blank" })))))));
|
|
13602
13777
|
}
|
|
13603
13778
|
static get watchers() { return {
|
|
13604
13779
|
"_label": ["validateLabel"],
|
|
@@ -13729,16 +13904,16 @@ class KolSelect {
|
|
|
13729
13904
|
render() {
|
|
13730
13905
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
13731
13906
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
13732
|
-
return (hAsync(Host, { key: '
|
|
13907
|
+
return (hAsync(Host, { key: 'fd481e56e39c3c0a0b06bb9a70cf02b90fcd3a47', class: { 'kol-select': true, 'has-value': this.state._hasValue } }, hAsync(KolInputWcTag, { key: 'ff5035b9f766a02a92f7b338e9ea2e61db9eb316', class: {
|
|
13733
13908
|
'hide-label': !!this.state._hideLabel,
|
|
13734
13909
|
select: true,
|
|
13735
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '
|
|
13910
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '4add8d3341dc825c6169629a8bd06fbae71058dd', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '72294f2fa2f45e737a02585c03a810e951f67faa', slot: "input" }, hAsync("form", { key: '7754b2e7fe44983ecd880ad5e46cedb75b7009f4', onSubmit: (event) => {
|
|
13736
13911
|
event.preventDefault();
|
|
13737
13912
|
propagateSubmitEventToForm({
|
|
13738
13913
|
form: this.host,
|
|
13739
13914
|
ref: this.ref,
|
|
13740
13915
|
});
|
|
13741
|
-
} }, hAsync("input", { key: '
|
|
13916
|
+
} }, hAsync("input", { key: 'd238ef9ac51dad83ddeac0e077e946b2b76134c8', type: "submit", hidden: true }), hAsync("select", Object.assign({ key: 'c98e51573261bdecdc831fcf031d7f09417c7b86', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this) }), this.state._options.map((option, index) => {
|
|
13742
13917
|
const key = `-${index}`;
|
|
13743
13918
|
if (Array.isArray(option.options)) {
|
|
13744
13919
|
return this.renderOptgroup(option, key);
|
|
@@ -13948,7 +14123,7 @@ class KolSkipNav {
|
|
|
13948
14123
|
};
|
|
13949
14124
|
}
|
|
13950
14125
|
render() {
|
|
13951
|
-
return (hAsync(Host, { key: '
|
|
14126
|
+
return (hAsync(Host, { key: '9eb245b91aa6124e6116c653b249536af5b5cde0', class: "kol-skip-nav" }, hAsync("nav", { key: '4ebc5267976efdc13374fe16475cd1faad237916', "aria-label": this.state._label }, hAsync("ul", { key: '6ba51aa3395bae954992a4ba71068136da3b3b82' }, this.state._links.map((link, index) => {
|
|
13952
14127
|
return (hAsync("li", { key: index }, hAsync(KolLinkWcTag, Object.assign({}, link))));
|
|
13953
14128
|
})))));
|
|
13954
14129
|
}
|
|
@@ -14004,7 +14179,7 @@ class KolSpan {
|
|
|
14004
14179
|
this._label = undefined;
|
|
14005
14180
|
}
|
|
14006
14181
|
render() {
|
|
14007
|
-
return (hAsync(KolSpanWcTag, { key: '
|
|
14182
|
+
return (hAsync(KolSpanWcTag, { key: '8fb014c28ff509a829798007f239eff09badb7fa', _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _accessKey: this._accessKey, class: "kol-span" }, hAsync("slot", { key: '8ac9ed04dcf44846dbb8624687746c1ac34708a5', name: "expert", slot: "expert" })));
|
|
14008
14183
|
}
|
|
14009
14184
|
static get style() { return {
|
|
14010
14185
|
default: KolSpanDefaultStyle0
|
|
@@ -22368,10 +22543,10 @@ class KolSpanWc {
|
|
|
22368
22543
|
render() {
|
|
22369
22544
|
var _a, _b, _c, _d, _e;
|
|
22370
22545
|
const hideExpertSlot = !showExpertSlot(this.state._label);
|
|
22371
|
-
return (hAsync(Host, { key: '
|
|
22546
|
+
return (hAsync(Host, { key: '0a15150866920a51833e591397e7ff1624c89fc7', class: {
|
|
22372
22547
|
'kol-span-wc': true,
|
|
22373
22548
|
'hide-label': !!this.state._hideLabel,
|
|
22374
|
-
} }, this.state._icons.top && (hAsync(KolIconTag, { key: '
|
|
22549
|
+
} }, this.state._icons.top && (hAsync(KolIconTag, { key: 'a13817ec7df7d39bbe765123bd36bbb1f58aa237', class: "icon top", style: this.state._icons.top.style, _label: (_a = this.state._icons.top.label) !== null && _a !== void 0 ? _a : '', _icons: this.state._icons.top.icon })), hAsync("span", { key: '6f86eba44456d1ab64d17a679c5c6e124dc1e66c' }, this.state._icons.left && (hAsync(KolIconTag, { key: 'd08648696cbde3838c671d1166bd216faf4a5bd4', class: "icon left", style: this.state._icons.left.style, _label: (_b = this.state._icons.left.label) !== null && _b !== void 0 ? _b : '', _icons: this.state._icons.left.icon })), !this.state._hideLabel && hideExpertSlot ? (this.state._allowMarkdown && typeof this.state._label === 'string' && this.state._label.length > 0 ? (hAsync("span", { class: "span-label md", innerHTML: md(this.state._label) })) : (hAsync("span", { class: "span-label" }, this.state._accessKey && this.state._label.length ? (hAsync(InternalUnderlinedAccessKey, { label: this.state._label, accessKey: this.state._accessKey })) : ((_c = this.state._label) !== null && _c !== void 0 ? _c : '')))) : (''), hAsync("span", { key: '9aa519bb4c73ac14bdcf3296374c838478f34f50', "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { key: 'b4c670498ef4074f0a04d45e4e384860144d6a37', name: "expert" })), this.state._accessKey && (hAsync("span", { key: '7a5fcc6fc5937789164c2382906232df5d788151', class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey)), this.state._icons.right && (hAsync(KolIconTag, { key: '786f8ddd5168addd92a9dd12ca85dc1925bb30ac', class: "icon right", style: this.state._icons.right.style, _label: (_d = this.state._icons.right.label) !== null && _d !== void 0 ? _d : '', _icons: this.state._icons.right.icon }))), this.state._icons.bottom && (hAsync(KolIconTag, { key: '5897ff2924688326e318d2f3a910f4ee2f3a333a', class: "icon bottom", style: this.state._icons.bottom.style, _label: (_e = this.state._icons.bottom.label) !== null && _e !== void 0 ? _e : '', _icons: this.state._icons.bottom.icon }))));
|
|
22375
22550
|
}
|
|
22376
22551
|
validateAccessKey(value) {
|
|
22377
22552
|
validateAccessKey(this, value);
|
|
@@ -22449,7 +22624,7 @@ class KolSpin {
|
|
|
22449
22624
|
};
|
|
22450
22625
|
}
|
|
22451
22626
|
render() {
|
|
22452
|
-
return (hAsync(Host, { key: '
|
|
22627
|
+
return (hAsync(Host, { key: '1341f6f7b72ff1c95f3a73f163364342172d5cad', class: "kol-spin" }, this.state._show ? (hAsync("span", { "aria-busy": "true", "aria-label": translate('kol-action-running'), "aria-live": "polite", class: {
|
|
22453
22628
|
spin: true,
|
|
22454
22629
|
[this.state._variant]: true,
|
|
22455
22630
|
}, role: "alert" }, renderSpin(this.state._variant))) : (this.showToggled && hAsync("span", { "aria-label": translate('kol-action-done'), "aria-busy": "false", "aria-live": "polite", role: "alert" }))));
|
|
@@ -22555,12 +22730,12 @@ class KolSplitButton {
|
|
|
22555
22730
|
}
|
|
22556
22731
|
render() {
|
|
22557
22732
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
22558
|
-
return (hAsync(Host, { key: '
|
|
22733
|
+
return (hAsync(Host, { key: 'a527306b3af651544bf317a61dee2398c1390034', class: "kol-split-button" }, hAsync(KolButtonWcTag, { key: '8b72ca7871e344472433e3e63cbcc3282ae653b7', class: {
|
|
22559
22734
|
'main-button': true,
|
|
22560
22735
|
button: true,
|
|
22561
22736
|
[this._variant]: this._variant !== 'custom',
|
|
22562
22737
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
22563
|
-
}, _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, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: '
|
|
22738
|
+
}, _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, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: '40a3ce6bc755a453d9823706b89bed3638aa7608', class: "horizontal-line" }), hAsync(KolButtonWcTag, { key: '4ad3cc5acdb289695cc73edc65b285aed4b7aa94', class: "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("div", { key: '056b57cd9712ef379f49c894f749c32d43404986', class: "popover", ref: this.catchDropdownElements }, hAsync("div", { key: '814797a3e331a3e0352da52e82dfa33b3f27eddf', class: "popover-content" }, hAsync("slot", { key: '3ba6188d4b04dac4703cbe3d486d487c983a3324' })))));
|
|
22564
22739
|
}
|
|
22565
22740
|
static get style() { return {
|
|
22566
22741
|
default: KolSplitButtonDefaultStyle0
|
|
@@ -22606,7 +22781,7 @@ class KolSymbol {
|
|
|
22606
22781
|
};
|
|
22607
22782
|
}
|
|
22608
22783
|
render() {
|
|
22609
|
-
return (hAsync(Host, { key: '
|
|
22784
|
+
return (hAsync(Host, { key: '5a17cb366a4268e6010c15c5a82f72a53313ecad', class: "kol-symbol" }, hAsync("span", { key: '00ac2ef03b17992d53ee2975ba2513b0e857fd1f', "aria-label": this.state._label, role: "term" }, this.state._symbol)));
|
|
22610
22785
|
}
|
|
22611
22786
|
validateLabel(value) {
|
|
22612
22787
|
validateLabel(this, value, {
|
|
@@ -22655,7 +22830,7 @@ class KolTable {
|
|
|
22655
22830
|
this._on = undefined;
|
|
22656
22831
|
}
|
|
22657
22832
|
render() {
|
|
22658
|
-
return (hAsync(KolTableStatefulTag, { key: '
|
|
22833
|
+
return (hAsync(KolTableStatefulTag, { key: 'c65b251dc7c47eda8c7fa491a83608370dd0da2a', _allowMultiSort: this._allowMultiSort, _data: this._data, _dataFoot: this._dataFoot, _headers: this._headers, _label: this._label, _minWidth: this._minWidth, _pagination: this._pagination, _paginationPosition: this._paginationPosition, _selection: this._selection, _on: this._on }));
|
|
22659
22834
|
}
|
|
22660
22835
|
static get cmpMeta() { return {
|
|
22661
22836
|
"$flags$": 9,
|
|
@@ -23048,7 +23223,7 @@ class KolTableStateful {
|
|
|
23048
23223
|
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) })))),
|
|
23049
23224
|
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) })))),
|
|
23050
23225
|
};
|
|
23051
|
-
return (hAsync(Host, { key: '
|
|
23226
|
+
return (hAsync(Host, { key: 'bdce96077b735bf0a23e6bd2de10e79a55e244c6', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: '0306216fc6f81b985e95f4178213e1a11f23f9bc', _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
|
|
23052
23227
|
onSort: (_, payload) => {
|
|
23053
23228
|
this.handleSort(payload);
|
|
23054
23229
|
},
|
|
@@ -23111,7 +23286,7 @@ class KolTableStateless$1 {
|
|
|
23111
23286
|
this._selection = undefined;
|
|
23112
23287
|
}
|
|
23113
23288
|
render() {
|
|
23114
|
-
return (hAsync(Host, { key: '
|
|
23289
|
+
return (hAsync(Host, { key: 'd8c2f6eed229d8b9d475dfdb9678a3ed3055cecd', class: "kol-table-stateless" }, hAsync(KolTableStatelessWcTag, { key: 'f0b6f632885da05dd020af5318c287cacb117f3c', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection })));
|
|
23115
23290
|
}
|
|
23116
23291
|
static get style() { return {
|
|
23117
23292
|
default: KolTableStatelessDefaultStyle0
|
|
@@ -23490,9 +23665,9 @@ class KolTableStateless {
|
|
|
23490
23665
|
}
|
|
23491
23666
|
render() {
|
|
23492
23667
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
23493
|
-
return (hAsync(Host, { key: '
|
|
23668
|
+
return (hAsync(Host, { key: '6ff227efb6562cc4802f7f3cdcc07da9b15f6144', class: "kol-table-stateless-wc" }, hAsync("div", { key: 'f85881b7a6221b40b72d938398111391b6d1a66e', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '855e72ca4c4770fda2cedd5c894ec81c9207405f', style: {
|
|
23494
23669
|
minWidth: this.state._minWidth,
|
|
23495
|
-
} }, hAsync("div", { key: '
|
|
23670
|
+
} }, hAsync("div", { key: 'a793e72c2157d6a857111b2fe96e0463d43e18ba', class: "focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: 'cb84389391bcaa93093d86d7b96e41265befad1c', id: "caption" }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: '887ede1cde2c05062e7279143e75cf76c5e30f4a' }, this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, this.state._selection && hAsync("td", { key: "thead-selection", class: "selection-header-cell" }), cols.map((cell, colIndex) => {
|
|
23496
23671
|
if (cell.asTd === true) {
|
|
23497
23672
|
return (hAsync("td", { key: `thead-${rowIndex}-${colIndex}-${cell.label}`, class: {
|
|
23498
23673
|
[cell.textAlign]: typeof cell.textAlign === 'string' && cell.textAlign.length > 0,
|
|
@@ -23508,7 +23683,7 @@ class KolTableStateless {
|
|
|
23508
23683
|
else {
|
|
23509
23684
|
return this.renderHeadingCell(cell, rowIndex, colIndex);
|
|
23510
23685
|
}
|
|
23511
|
-
})))))), hAsync("tbody", { key: '
|
|
23686
|
+
})))))), hAsync("tbody", { key: '87c7b41c699b02f2fe8802befd7f5d5013b2d4be' }, dataField.map(this.renderTableRow)), this.renderFoot()))));
|
|
23512
23687
|
}
|
|
23513
23688
|
get host() { return getElement(this); }
|
|
23514
23689
|
static get watchers() { return {
|
|
@@ -23628,7 +23803,7 @@ class KolTabs {
|
|
|
23628
23803
|
return this.selectNextNotDisabledTab(selected - 1, tabs, false, initialSelected || selected);
|
|
23629
23804
|
}
|
|
23630
23805
|
else {
|
|
23631
|
-
devHint(`[KolTabs]
|
|
23806
|
+
devHint(`[KolTabs] All tabs are disabled, and therefore no tab can be displayed.`);
|
|
23632
23807
|
}
|
|
23633
23808
|
}
|
|
23634
23809
|
}
|
|
@@ -23699,11 +23874,11 @@ class KolTabs {
|
|
|
23699
23874
|
} }))));
|
|
23700
23875
|
}
|
|
23701
23876
|
render() {
|
|
23702
|
-
return (hAsync(Host, { key: '
|
|
23877
|
+
return (hAsync(Host, { key: '1092ece9e1623621dcd253ff8d32eb1470471993', class: "kol-tabs" }, hAsync("div", { key: '42c75328542b14057998aaa615c692e15870e5ce', ref: (el) => {
|
|
23703
23878
|
this.tabPanelsElement = el;
|
|
23704
23879
|
}, class: {
|
|
23705
23880
|
[`tabs-align-${this.state._align}`]: true,
|
|
23706
|
-
} }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
23881
|
+
} }, this.renderButtonGroup(), hAsync("div", { key: '89eb64ffefa3234cb2ba93532a775cc2e1cf0968', class: "tabs-content", ref: this.catchTabPanelHost }))));
|
|
23707
23882
|
}
|
|
23708
23883
|
validateAlign(value) {
|
|
23709
23884
|
validateAlign(this, value);
|
|
@@ -23723,23 +23898,23 @@ class KolTabs {
|
|
|
23723
23898
|
this.onCreateLabel = value.onCreate.label;
|
|
23724
23899
|
}
|
|
23725
23900
|
else {
|
|
23726
|
-
Log.debug(`[KolTabs]
|
|
23901
|
+
Log.debug(`[KolTabs] The label text for New in {
|
|
23727
23902
|
onCreate: {
|
|
23728
23903
|
label: string (!),
|
|
23729
23904
|
callback: Function
|
|
23730
23905
|
}
|
|
23731
|
-
}
|
|
23906
|
+
} is not set correctly.`);
|
|
23732
23907
|
}
|
|
23733
23908
|
if (typeof value.onCreate.callback === 'function') {
|
|
23734
23909
|
callbacks.onCreate = value.onCreate.callback;
|
|
23735
23910
|
}
|
|
23736
23911
|
else {
|
|
23737
|
-
Log.debug(`[KolTabs]
|
|
23912
|
+
Log.debug(`[KolTabs] The onCreate callback function for New in {
|
|
23738
23913
|
onCreate: {
|
|
23739
23914
|
label: string,
|
|
23740
23915
|
callback: Function (!)
|
|
23741
23916
|
}
|
|
23742
|
-
}
|
|
23917
|
+
} is not set correctly.`);
|
|
23743
23918
|
}
|
|
23744
23919
|
}
|
|
23745
23920
|
else {
|
|
@@ -23908,7 +24083,7 @@ class KolTextarea {
|
|
|
23908
24083
|
render() {
|
|
23909
24084
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
23910
24085
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
23911
|
-
return (hAsync(Host, { key: '
|
|
24086
|
+
return (hAsync(Host, { key: '24a6029ebb52ba8812c6a991809ef3cb08eb1aa2', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync(KolInputWcTag, { key: 'd86ab8845597fa1475b633433b5583b16a3c40de', class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '2d172fbf3d65b23d21f9c854f6773b2cc8881f06', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '9b94ac51bca6e7e16423728fd4ad9c57c4f3f556', slot: "input" }, hAsync("textarea", Object.assign({ key: '3f1255f181f1dc35cd875aede0985de3aaec78f1', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, rows: this.state._rows, placeholder: this.state._placeholder, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput, style: {
|
|
23912
24087
|
resize: this.state._resize,
|
|
23913
24088
|
}, value: this.state._value }))))));
|
|
23914
24089
|
}
|
|
@@ -24193,7 +24368,7 @@ class KolToastContainer {
|
|
|
24193
24368
|
}
|
|
24194
24369
|
}
|
|
24195
24370
|
render() {
|
|
24196
|
-
return (hAsync(Host, { key: '
|
|
24371
|
+
return (hAsync(Host, { key: '36c5561666fee5691aa7f732dcd90f5e4fe75457', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: 'fe4187d5afff3547776ba89b695386bef8e05c93', _label: translate('kol-toast-close-all'), class: "close-all", _on: {
|
|
24197
24372
|
onClick: () => {
|
|
24198
24373
|
void this.closeAll();
|
|
24199
24374
|
},
|
|
@@ -24216,7 +24391,7 @@ class KolToastContainer {
|
|
|
24216
24391
|
}; }
|
|
24217
24392
|
}
|
|
24218
24393
|
|
|
24219
|
-
const defaultStyleCss$3 = "@layer kol-global {\n .sc-kol-toolbar-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-toolbar-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-toolbar-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-toolbar-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toolbar {\n display: flex;\n align-items: center;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toolbar:focus-within {\n outline: 1px solid;\n outline-offset: 2px;\n }\n}";
|
|
24394
|
+
const defaultStyleCss$3 = "@layer kol-global {\n .sc-kol-toolbar-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-toolbar-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-toolbar-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-toolbar-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toolbar {\n display: flex;\n align-items: center;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n }\n .toolbar:focus-within {\n outline: 1px solid;\n outline-offset: 2px;\n }\n}";
|
|
24220
24395
|
var KolToolbarDefaultStyle0 = defaultStyleCss$3;
|
|
24221
24396
|
|
|
24222
24397
|
const TOOLBAR_ITEM_TAG_NAME = 'kol-toolbar-item';
|
|
@@ -24245,7 +24420,7 @@ class KolToolbar {
|
|
|
24245
24420
|
this._items = undefined;
|
|
24246
24421
|
}
|
|
24247
24422
|
render() {
|
|
24248
|
-
return (hAsync(Host, { key: '
|
|
24423
|
+
return (hAsync(Host, { key: '9f6ed1dc6f76f186fb82cf82c06560692ff3e170', class: "kol-toolbar" }, hAsync("div", { key: '0a90aa25fa7522291ebc34adfdd21ac09152bea2', class: "toolbar", role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem))));
|
|
24249
24424
|
}
|
|
24250
24425
|
validateLabel(value) {
|
|
24251
24426
|
validateLabel(this, value);
|
|
@@ -24446,7 +24621,7 @@ class KolTooltipWc {
|
|
|
24446
24621
|
this.showOrHideTooltip();
|
|
24447
24622
|
}
|
|
24448
24623
|
render() {
|
|
24449
|
-
return (hAsync(Host, { key: '
|
|
24624
|
+
return (hAsync(Host, { key: '1c7cc2feefe8a7c96cd7b018295299ecefcedbe4', class: "kol-tooltip-wc" }, this.state._label !== '' && (hAsync("div", { key: 'f6bb8c33a660b5748eb14dfa4a2398da38e9be39', class: "tooltip-floating", ref: this.catchTooltipElement }, hAsync("div", { key: '900eb0ed9b258c432dd0662dd4f93eb9f894df50', class: "tooltip-area tooltip-arrow", ref: this.catchArrowElement }), hAsync(KolSpanWcTag, { key: '60ccad7c22d86c8d168212223e59ba6790a546c0', class: "tooltip-area tooltip-content", id: this.state._id, _accessKey: this._accessKey, _label: this.state._label })))));
|
|
24450
24625
|
}
|
|
24451
24626
|
validateAccessKey(value) {
|
|
24452
24627
|
validateAccessKey(this, value);
|
|
@@ -24516,7 +24691,7 @@ class KolTooltipWc {
|
|
|
24516
24691
|
}; }
|
|
24517
24692
|
}
|
|
24518
24693
|
|
|
24519
|
-
const defaultStyleCss$2 = "@layer kol-global {\n .sc-kol-tree-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-tree-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-tree-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-tree-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .tree:focus-within {\n outline: 1px solid;\n outline-offset: 2px;\n }\n}";
|
|
24694
|
+
const defaultStyleCss$2 = "@layer kol-global {\n .sc-kol-tree-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\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 font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-tree-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-tree-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \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-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-tree-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .tree ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n .tree:focus-within {\n outline: 1px solid;\n outline-offset: 2px;\n }\n}";
|
|
24520
24695
|
var KolTreeDefaultStyle0 = defaultStyleCss$2;
|
|
24521
24696
|
|
|
24522
24697
|
class KolTree {
|
|
@@ -24525,7 +24700,7 @@ class KolTree {
|
|
|
24525
24700
|
this._label = undefined;
|
|
24526
24701
|
}
|
|
24527
24702
|
render() {
|
|
24528
|
-
return (hAsync(Host, { key: '
|
|
24703
|
+
return (hAsync(Host, { key: 'dcecaa4251615a78aaa446af89fbdfdd81cc8029', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: 'ccf2f97fab1be1ea608ac67ed358bc8211ed390f', _label: this._label }, hAsync("slot", { key: '891e12670a8bcacc1c219544bbf915705ae6f963' }))));
|
|
24529
24704
|
}
|
|
24530
24705
|
static get style() { return {
|
|
24531
24706
|
default: KolTreeDefaultStyle0
|
|
@@ -24542,7 +24717,7 @@ class KolTree {
|
|
|
24542
24717
|
}; }
|
|
24543
24718
|
}
|
|
24544
24719
|
|
|
24545
|
-
const defaultStyleCss$1 = "@layer kol-component {\n .sc-kol-tree-item-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
24720
|
+
const defaultStyleCss$1 = "@layer kol-component {\n .sc-kol-tree-item-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n .tree-link.first-level > a {\n padding-left: calc(6rem / var(--kolibri-root-font-size, 16));\n }\n .tree-link > a {\n padding-right: calc(6rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(1.4rem * var(--level));\n padding-top: calc(6.4rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(6.4rem / var(--kolibri-root-font-size, 16));\n }\n a .kol-span-wc {\n display: block;\n }\n}";
|
|
24546
24721
|
var KolTreeItemDefaultStyle0 = defaultStyleCss$1;
|
|
24547
24722
|
|
|
24548
24723
|
class KolTreeItem {
|
|
@@ -24573,7 +24748,7 @@ class KolTreeItem {
|
|
|
24573
24748
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
24574
24749
|
}
|
|
24575
24750
|
render() {
|
|
24576
|
-
return (hAsync(KolTreeItemWcTag, { key: '
|
|
24751
|
+
return (hAsync(KolTreeItemWcTag, { key: 'ef6ed03ba5870a8becbb286898a5911b5525a21c', class: "kol-tree-item", _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: 'f51d43a0a36cfd224a53324068d5ed28e4d9d079' })));
|
|
24577
24752
|
}
|
|
24578
24753
|
static get style() { return {
|
|
24579
24754
|
default: KolTreeItemDefaultStyle0
|
|
@@ -24600,6 +24775,11 @@ class KolTreeItem {
|
|
|
24600
24775
|
class KolTreeItemWc {
|
|
24601
24776
|
constructor(hostRef) {
|
|
24602
24777
|
registerInstance(this, hostRef);
|
|
24778
|
+
this.groupId = `tree-group-${nonce()}`;
|
|
24779
|
+
this.renderIcon = (props) => {
|
|
24780
|
+
return hAsync(KolIconTag, { class: "toggle-button-icon", _label: props.label, _icons: props.icon });
|
|
24781
|
+
};
|
|
24782
|
+
this.level = undefined;
|
|
24603
24783
|
this.state = {
|
|
24604
24784
|
_active: false,
|
|
24605
24785
|
_hasChildren: false,
|
|
@@ -24613,11 +24793,17 @@ class KolTreeItemWc {
|
|
|
24613
24793
|
this._href = undefined;
|
|
24614
24794
|
}
|
|
24615
24795
|
render() {
|
|
24616
|
-
|
|
24796
|
+
const { _href, _active, _hasChildren, _open, _label } = this.state;
|
|
24797
|
+
return (hAsync(Host, { key: 'a7478410c633314ba5b7a9e8588b5b9484efeb94', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-item-wc" }, hAsync("li", { key: '6c3ad7b0e013ec83d92f0d05a222d0696aa98729', class: "tree-item", style: {
|
|
24798
|
+
'--level': `${this.level}`,
|
|
24799
|
+
} }, hAsync(KolLinkWcTag, { key: 'fbd0b31027e032f6df61652df29a0b37ef67a104', class: {
|
|
24617
24800
|
'tree-link': true,
|
|
24618
|
-
|
|
24619
|
-
|
|
24620
|
-
|
|
24801
|
+
'first-level': this.level === 0,
|
|
24802
|
+
active: Boolean(_active),
|
|
24803
|
+
}, _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _open, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, hAsync("span", { key: '361d16b78885085be82c83e6fe4b8bd83e8274d7', slot: "expert" }, _hasChildren && (hAsync("span", { key: '3a742c6ea9fa940854cb21f1607ab0490c091558', class: "toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, this.renderIcon({
|
|
24804
|
+
icon: `codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`,
|
|
24805
|
+
label: _open ? 'Vorschläge öffnen' : 'Vorschläge schließen',
|
|
24806
|
+
}))), ' ', _label)), hAsync("ul", { key: '087a87f28d8f06d72cee95f9ab553f7f79e16496', hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: '8e286b2265806859a9bd61809c6387331df607f3' })))));
|
|
24621
24807
|
}
|
|
24622
24808
|
validateActive(value) {
|
|
24623
24809
|
validateActive(this, value || false);
|
|
@@ -24637,13 +24823,23 @@ class KolTreeItemWc {
|
|
|
24637
24823
|
this.validateOpen(this._open);
|
|
24638
24824
|
this.validateHref(this._href);
|
|
24639
24825
|
this.checkForChildren();
|
|
24826
|
+
this.determineTreeItemDepth();
|
|
24827
|
+
}
|
|
24828
|
+
determineTreeItemDepth() {
|
|
24829
|
+
let level = 0;
|
|
24830
|
+
let traverseItem = this.host.parentNode.host.parentNode;
|
|
24831
|
+
while (traverseItem !== null && traverseItem.tagName.toLowerCase() !== KolTreeTag && traverseItem !== document.body) {
|
|
24832
|
+
traverseItem = traverseItem.parentElement;
|
|
24833
|
+
level += 1;
|
|
24834
|
+
}
|
|
24835
|
+
this.level = level;
|
|
24640
24836
|
}
|
|
24641
24837
|
handleSlotchange() {
|
|
24642
24838
|
this.checkForChildren();
|
|
24643
24839
|
}
|
|
24644
24840
|
checkForChildren() {
|
|
24645
|
-
var _a;
|
|
24646
|
-
this.state = Object.assign(Object.assign({}, this.state), { _hasChildren: Boolean((_a = this.host.querySelector('slot')) === null || _a === void 0 ? void 0 : _a.assignedElements().length) });
|
|
24841
|
+
var _a, _b;
|
|
24842
|
+
this.state = Object.assign(Object.assign({}, this.state), { _hasChildren: Boolean((_b = (_a = this.host.querySelector('slot')) === null || _a === void 0 ? void 0 : _a.assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a).length) });
|
|
24647
24843
|
}
|
|
24648
24844
|
async focusLink() {
|
|
24649
24845
|
this.linkElement.focus();
|
|
@@ -24687,6 +24883,7 @@ class KolTreeItemWc {
|
|
|
24687
24883
|
"_label": [1],
|
|
24688
24884
|
"_open": [4],
|
|
24689
24885
|
"_href": [1],
|
|
24886
|
+
"level": [32],
|
|
24690
24887
|
"state": [32],
|
|
24691
24888
|
"focusLink": [64],
|
|
24692
24889
|
"expand": [64],
|
|
@@ -24699,8 +24896,6 @@ class KolTreeItemWc {
|
|
|
24699
24896
|
}; }
|
|
24700
24897
|
}
|
|
24701
24898
|
|
|
24702
|
-
const TREE_ITEM_TAG_NAME = 'kol-tree-item';
|
|
24703
|
-
|
|
24704
24899
|
class KolTreeWc {
|
|
24705
24900
|
constructor(hostRef) {
|
|
24706
24901
|
registerInstance(this, hostRef);
|
|
@@ -24713,10 +24908,10 @@ class KolTreeWc {
|
|
|
24713
24908
|
validateLabel(this, value);
|
|
24714
24909
|
}
|
|
24715
24910
|
render() {
|
|
24716
|
-
return (hAsync(Host, { key: '
|
|
24911
|
+
return (hAsync(Host, { key: 'd8edad29edf6c40702763ed84d2eff012c17c511', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-wc" }, hAsync("nav", { key: 'f35ee92ece4bdb6375c016cbabba84d8cfa6be25', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: '0c2d424ec9f9dcb9d2a115f445cc2aff5dff5864', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: '5caf2660158c816c84caacc9301a8ce1b22910e3' })))));
|
|
24717
24912
|
}
|
|
24718
24913
|
static isTreeItem(element) {
|
|
24719
|
-
return (element === null || element === void 0 ? void 0 : element.tagName) ===
|
|
24914
|
+
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
|
24720
24915
|
}
|
|
24721
24916
|
componentWillLoad() {
|
|
24722
24917
|
this.validateLabel(this._label);
|
|
@@ -24736,22 +24931,24 @@ class KolTreeWc {
|
|
|
24736
24931
|
this.handleTreeChange();
|
|
24737
24932
|
}
|
|
24738
24933
|
observeTopLevelItems() {
|
|
24739
|
-
|
|
24934
|
+
var _a;
|
|
24935
|
+
(_a = this.getTopLevelTreeItems()) === null || _a === void 0 ? void 0 : _a.forEach((treeItem) => {
|
|
24740
24936
|
var _a;
|
|
24741
24937
|
(_a = this.observer) === null || _a === void 0 ? void 0 : _a.observe(treeItem, { childList: true, subtree: true });
|
|
24742
24938
|
});
|
|
24743
24939
|
}
|
|
24744
24940
|
getTopLevelTreeItems() {
|
|
24745
|
-
var _a;
|
|
24746
|
-
return ((_a = this.host.querySelector('slot')) === null || _a === void 0 ? void 0 : _a.assignedNodes()).filter(KolTreeWc.isTreeItem);
|
|
24941
|
+
var _a, _b, _c;
|
|
24942
|
+
return (_c = (_b = (_a = this.host.querySelector('slot')) === null || _a === void 0 ? void 0 : _a.assignedNodes) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.filter(KolTreeWc.isTreeItem);
|
|
24747
24943
|
}
|
|
24748
24944
|
handleTreeChange() {
|
|
24749
24945
|
this.treeItemElements = this.getTreeItemElements();
|
|
24750
24946
|
void this.ensureActiveItemVisibility();
|
|
24751
24947
|
}
|
|
24752
24948
|
getTreeItemElements() {
|
|
24753
|
-
|
|
24754
|
-
|
|
24949
|
+
var _a;
|
|
24950
|
+
return (_a = this.getTopLevelTreeItems()) === null || _a === void 0 ? void 0 : _a.reduce((accumulator, currentValue) => {
|
|
24951
|
+
const children = currentValue.querySelectorAll(KolTreeItemTag);
|
|
24755
24952
|
return [...accumulator, currentValue, ...children];
|
|
24756
24953
|
}, []);
|
|
24757
24954
|
}
|
|
@@ -24776,7 +24973,7 @@ class KolTreeWc {
|
|
|
24776
24973
|
async handleKeyDown(event) {
|
|
24777
24974
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
24778
24975
|
const openItems = await this.getOpenTreeItemElements();
|
|
24779
|
-
const currentTreeItem = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(
|
|
24976
|
+
const currentTreeItem = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(KolTreeItemTag);
|
|
24780
24977
|
if (!openItems || !currentTreeItem) {
|
|
24781
24978
|
return;
|
|
24782
24979
|
}
|
|
@@ -24839,7 +25036,7 @@ class KolTreeWc {
|
|
|
24839
25036
|
break;
|
|
24840
25037
|
}
|
|
24841
25038
|
case '*': {
|
|
24842
|
-
const siblings = (_j = currentTreeItem.parentElement) === null || _j === void 0 ? void 0 : _j.querySelectorAll(
|
|
25039
|
+
const siblings = (_j = currentTreeItem.parentElement) === null || _j === void 0 ? void 0 : _j.querySelectorAll(KolTreeItemTag);
|
|
24843
25040
|
siblings === null || siblings === void 0 ? void 0 : siblings.forEach((element) => {
|
|
24844
25041
|
void element.expand();
|
|
24845
25042
|
});
|
|
@@ -24848,19 +25045,19 @@ class KolTreeWc {
|
|
|
24848
25045
|
}
|
|
24849
25046
|
}
|
|
24850
25047
|
async handleFocusOut(event) {
|
|
24851
|
-
if (event.relatedTarget && !event.relatedTarget.closest(
|
|
25048
|
+
if (event.relatedTarget && !event.relatedTarget.closest(KolTreeTag)) {
|
|
24852
25049
|
await this.ensureActiveItemVisibility();
|
|
24853
25050
|
}
|
|
24854
25051
|
}
|
|
24855
25052
|
async ensureActiveItemVisibility() {
|
|
24856
25053
|
const findActiveItem = () => {
|
|
24857
|
-
var _a;
|
|
24858
|
-
const rootNodes = ((_a = this.host.querySelector('slot')) === null || _a === void 0 ? void 0 : _a.assignedNodes()).filter(KolTreeWc.isTreeItem);
|
|
25054
|
+
var _a, _b, _c, _d;
|
|
25055
|
+
const rootNodes = (_d = (_c = (_b = (_a = this.host.querySelector('slot')) === null || _a === void 0 ? void 0 : _a.assignedNodes) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.filter(KolTreeWc.isTreeItem)) !== null && _d !== void 0 ? _d : [];
|
|
24859
25056
|
for (const rootNode of rootNodes) {
|
|
24860
25057
|
if (rootNode._active) {
|
|
24861
25058
|
return rootNode;
|
|
24862
25059
|
}
|
|
24863
|
-
const childMatch = rootNode.querySelector(
|
|
25060
|
+
const childMatch = rootNode.querySelector(`${KolTreeItemTag}[_active="true"]`);
|
|
24864
25061
|
if (childMatch && childMatch._active) {
|
|
24865
25062
|
return childMatch;
|
|
24866
25063
|
}
|
|
@@ -24906,7 +25103,7 @@ class KolVersion {
|
|
|
24906
25103
|
};
|
|
24907
25104
|
}
|
|
24908
25105
|
render() {
|
|
24909
|
-
return (hAsync(Host, { key: '
|
|
25106
|
+
return (hAsync(Host, { key: '51981d335a1e807d075a5547cb3f1e52b9ce80cc', class: "kol-version" }, hAsync(KolBadgeTag, { key: 'f2441045e818b8da85adad32303a1a9a289c26c3', _color: "#bec5c9", _icons: {
|
|
24910
25107
|
left: { icon: 'codicon codicon-versions', label: translate('kol-version') },
|
|
24911
25108
|
}, _label: this.state._label })));
|
|
24912
25109
|
}
|
|
@@ -24954,6 +25151,7 @@ registerComponents([
|
|
|
24954
25151
|
KolCard,
|
|
24955
25152
|
KolCombobox,
|
|
24956
25153
|
KolDetails,
|
|
25154
|
+
KolDrawer,
|
|
24957
25155
|
KolForm,
|
|
24958
25156
|
KolHeading,
|
|
24959
25157
|
KolHeadingWc,
|