@public-ui/hydrate 2.1.2 → 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 +450 -216
- 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
|
};
|
|
@@ -3934,7 +3939,7 @@ const handleColorChange = (value) => {
|
|
|
3934
3939
|
break;
|
|
3935
3940
|
}
|
|
3936
3941
|
case null:
|
|
3937
|
-
|
|
3942
|
+
Log.warn(`_color was empty or invalid (${JSON.stringify(value)})`, { forceLog: true });
|
|
3938
3943
|
colorContrast = createContrastColorPair({
|
|
3939
3944
|
background: '#000',
|
|
3940
3945
|
foreground: '#000',
|
|
@@ -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) {
|
|
@@ -4597,6 +4608,8 @@ var locale_de = {
|
|
|
4597
4608
|
'nav-label-open': 'Untermenü zu {{label}} öffnen',
|
|
4598
4609
|
'nav-label-close': 'Untermenü zu {{label}} schließen',
|
|
4599
4610
|
'close-alert': 'Benachrichtigung {{label}} schließen',
|
|
4611
|
+
'show-password': 'einblenden',
|
|
4612
|
+
'hide-password': 'ausblenden',
|
|
4600
4613
|
};
|
|
4601
4614
|
|
|
4602
4615
|
var locale_en = {
|
|
@@ -4642,6 +4655,8 @@ var locale_en = {
|
|
|
4642
4655
|
'nav-label-open': 'Submenu for {{label}} open',
|
|
4643
4656
|
'nav-label-close': 'Submenu for {{label}} close',
|
|
4644
4657
|
'close-alert': 'Notification {{label}} close',
|
|
4658
|
+
'show-password': 'Show',
|
|
4659
|
+
'hide-password': 'Hide',
|
|
4645
4660
|
};
|
|
4646
4661
|
|
|
4647
4662
|
const mapLocaleKeys = (locale) => Object.keys(locale).reduce((a, c) => ((a[`${'kol'}-${c}`] = locale[c]), a), {});
|
|
@@ -4846,8 +4861,8 @@ class KolAlertWc {
|
|
|
4846
4861
|
}; }
|
|
4847
4862
|
}
|
|
4848
4863
|
|
|
4849
|
-
const defaultStyleCss$
|
|
4850
|
-
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;
|
|
4851
4866
|
|
|
4852
4867
|
class KolAvatar {
|
|
4853
4868
|
constructor(hostRef) {
|
|
@@ -4933,8 +4948,8 @@ class KolAvatarWc {
|
|
|
4933
4948
|
}; }
|
|
4934
4949
|
}
|
|
4935
4950
|
|
|
4936
|
-
const defaultStyleCss$
|
|
4937
|
-
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;
|
|
4938
4953
|
|
|
4939
4954
|
featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
|
|
4940
4955
|
class KolBadge {
|
|
@@ -5019,7 +5034,7 @@ class KolBadge {
|
|
|
5019
5034
|
const UNIQUE_LABELS = new Set();
|
|
5020
5035
|
function addNavLabel(ariaLabel) {
|
|
5021
5036
|
if (UNIQUE_LABELS.has(ariaLabel)) {
|
|
5022
|
-
|
|
5037
|
+
Log.error(`There already is a nav element with the label "${ariaLabel}"`, { forceLog: true });
|
|
5023
5038
|
}
|
|
5024
5039
|
else {
|
|
5025
5040
|
UNIQUE_LABELS.add(ariaLabel);
|
|
@@ -5034,8 +5049,8 @@ const watchNavLinks = (className, component, value) => {
|
|
|
5034
5049
|
uiUxHintMillerscheZahl(className, component.state._links.length);
|
|
5035
5050
|
};
|
|
5036
5051
|
|
|
5037
|
-
const defaultStyleCss$
|
|
5038
|
-
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;
|
|
5039
5054
|
|
|
5040
5055
|
class KolBreadcrumb {
|
|
5041
5056
|
constructor(hostRef) {
|
|
@@ -5095,8 +5110,8 @@ class KolBreadcrumb {
|
|
|
5095
5110
|
}; }
|
|
5096
5111
|
}
|
|
5097
5112
|
|
|
5098
|
-
const defaultStyleCss$
|
|
5099
|
-
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;
|
|
5100
5115
|
|
|
5101
5116
|
class KolButton {
|
|
5102
5117
|
constructor(hostRef) {
|
|
@@ -5169,8 +5184,8 @@ class KolButton {
|
|
|
5169
5184
|
}; }
|
|
5170
5185
|
}
|
|
5171
5186
|
|
|
5172
|
-
const defaultStyleCss$
|
|
5173
|
-
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;
|
|
5174
5189
|
|
|
5175
5190
|
class KolButtonGroup {
|
|
5176
5191
|
constructor(hostRef) {
|
|
@@ -5212,8 +5227,8 @@ class KolButtonGroupWc {
|
|
|
5212
5227
|
}; }
|
|
5213
5228
|
}
|
|
5214
5229
|
|
|
5215
|
-
const defaultStyleCss$
|
|
5216
|
-
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;
|
|
5217
5232
|
|
|
5218
5233
|
class KolButtonLink {
|
|
5219
5234
|
constructor(hostRef) {
|
|
@@ -5375,6 +5390,7 @@ const propagateSubmitEventToForm = (options = {}) => {
|
|
|
5375
5390
|
};
|
|
5376
5391
|
|
|
5377
5392
|
const isAssociatedTagName = (name) => name === 'KOL-BUTTON' ||
|
|
5393
|
+
name === 'KOL-COMBOBOX' ||
|
|
5378
5394
|
name === 'KOL-INPUT-CHECKBOX' ||
|
|
5379
5395
|
name === 'KOL-INPUT-COLOR' ||
|
|
5380
5396
|
name === 'KOL-INPUT-DATE' ||
|
|
@@ -5525,7 +5541,7 @@ class AssociatedInputController {
|
|
|
5525
5541
|
},
|
|
5526
5542
|
});
|
|
5527
5543
|
if (typeof value === 'undefined') {
|
|
5528
|
-
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.`);
|
|
5529
5545
|
}
|
|
5530
5546
|
}
|
|
5531
5547
|
validateSyncValueBySelector(value) {
|
|
@@ -5745,8 +5761,8 @@ class KolButtonWc {
|
|
|
5745
5761
|
}; }
|
|
5746
5762
|
}
|
|
5747
5763
|
|
|
5748
|
-
const defaultStyleCss$
|
|
5749
|
-
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;
|
|
5750
5766
|
|
|
5751
5767
|
class KolCard {
|
|
5752
5768
|
constructor(hostRef) {
|
|
@@ -5872,12 +5888,10 @@ class InputController extends ControlledInputController {
|
|
|
5872
5888
|
validateTooltipAlign(this.component, value);
|
|
5873
5889
|
}
|
|
5874
5890
|
validateError(value) {
|
|
5875
|
-
const message =
|
|
5876
|
-
|
|
5877
|
-
|
|
5878
|
-
|
|
5879
|
-
}
|
|
5880
|
-
: undefined;
|
|
5891
|
+
const message = {
|
|
5892
|
+
_description: value || '',
|
|
5893
|
+
_type: 'error',
|
|
5894
|
+
};
|
|
5881
5895
|
this.validateMsg(message);
|
|
5882
5896
|
}
|
|
5883
5897
|
validateHideError(value) {
|
|
@@ -5915,7 +5929,7 @@ class InputController extends ControlledInputController {
|
|
|
5915
5929
|
minLength: 1,
|
|
5916
5930
|
});
|
|
5917
5931
|
if (value === '' || typeof value === 'undefined') {
|
|
5918
|
-
devHint(`
|
|
5932
|
+
devHint(`A unique ID on the input fields is not strictly required, but it might be relevant for E2E tests.`);
|
|
5919
5933
|
}
|
|
5920
5934
|
}
|
|
5921
5935
|
validateLabel(value) {
|
|
@@ -6117,19 +6131,23 @@ const getRenderStates = (state) => {
|
|
|
6117
6131
|
return { hasError, hasHint, ariaDescribedBy };
|
|
6118
6132
|
};
|
|
6119
6133
|
|
|
6120
|
-
const defaultStyleCss$
|
|
6121
|
-
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;
|
|
6122
6136
|
|
|
6123
6137
|
class KolCombobox {
|
|
6124
6138
|
async getValue() {
|
|
6125
6139
|
return this._value;
|
|
6126
6140
|
}
|
|
6127
|
-
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);
|
|
6128
6145
|
this.state._value = option;
|
|
6129
6146
|
}
|
|
6130
6147
|
onInput(event) {
|
|
6131
6148
|
const target = event.target;
|
|
6132
6149
|
this._value = target.value;
|
|
6150
|
+
this.controller.onFacade.onInput(event);
|
|
6133
6151
|
this.setFilteredSuggestionsByQuery(target.value);
|
|
6134
6152
|
}
|
|
6135
6153
|
handleKeyDownDropdown(event) {
|
|
@@ -6150,7 +6168,6 @@ class KolCombobox {
|
|
|
6150
6168
|
}
|
|
6151
6169
|
}
|
|
6152
6170
|
moveFocus(delta) {
|
|
6153
|
-
console.log(this._focusedOptionIndex);
|
|
6154
6171
|
if (!this._filteredSuggestions) {
|
|
6155
6172
|
return;
|
|
6156
6173
|
}
|
|
@@ -6161,14 +6178,13 @@ class KolCombobox {
|
|
|
6161
6178
|
if (newIndex < 0) {
|
|
6162
6179
|
newIndex = this._filteredSuggestions.length - 1;
|
|
6163
6180
|
}
|
|
6164
|
-
this.
|
|
6165
|
-
this.focusOption(this._focusedOptionIndex);
|
|
6181
|
+
this.focusOption(newIndex);
|
|
6166
6182
|
}
|
|
6167
6183
|
focusOption(index) {
|
|
6184
|
+
this._focusedOptionIndex = index;
|
|
6168
6185
|
if (this.refSuggestions) {
|
|
6169
6186
|
const optionElement = this.refSuggestions[index];
|
|
6170
6187
|
optionElement === null || optionElement === void 0 ? void 0 : optionElement.focus();
|
|
6171
|
-
this._value = optionElement.textContent || '';
|
|
6172
6188
|
}
|
|
6173
6189
|
}
|
|
6174
6190
|
focusSuggestionStartingWith(char) {
|
|
@@ -6177,24 +6193,28 @@ class KolCombobox {
|
|
|
6177
6193
|
this._filteredSuggestions.length > 0 &&
|
|
6178
6194
|
this._filteredSuggestions.findIndex((option) => option.toLowerCase().startsWith(charLowerCase));
|
|
6179
6195
|
if (typeof index === 'number') {
|
|
6180
|
-
this._focusedOptionIndex = index;
|
|
6181
6196
|
this.focusOption(index);
|
|
6182
6197
|
}
|
|
6183
6198
|
}
|
|
6184
6199
|
render() {
|
|
6185
6200
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
6186
6201
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
6187
|
-
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) &&
|
|
6188
6203
|
this._filteredSuggestions.length > 0 &&
|
|
6189
6204
|
this._filteredSuggestions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
|
|
6190
6205
|
if (el)
|
|
6191
6206
|
this.refSuggestions[index] = el;
|
|
6192
|
-
}, "data-index": index, tabIndex: 0, role: "option", "aria-selected": this.state._value === option, onClick: () => {
|
|
6193
|
-
this.selectOption(option);
|
|
6207
|
+
}, "data-index": index, tabIndex: 0, role: "option", "aria-selected": this.state._value === option, onClick: (e) => {
|
|
6208
|
+
this.selectOption(e, option);
|
|
6194
6209
|
this.toggleListbox();
|
|
6210
|
+
}, onMouseOver: () => {
|
|
6211
|
+
this.focusOption(index);
|
|
6212
|
+
}, onFocus: () => {
|
|
6213
|
+
this.focusOption(index);
|
|
6195
6214
|
}, class: "combobox__item", onKeyDown: (e) => {
|
|
6196
6215
|
if (e.key === 'Enter' || e.key === 'NumpadEnter') {
|
|
6197
|
-
this.selectOption(option);
|
|
6216
|
+
this.selectOption(e, option);
|
|
6217
|
+
this.toggleListbox();
|
|
6198
6218
|
e.preventDefault();
|
|
6199
6219
|
}
|
|
6200
6220
|
} }, option))))))))));
|
|
@@ -6231,8 +6251,7 @@ class KolCombobox {
|
|
|
6231
6251
|
case 'Home': {
|
|
6232
6252
|
handleEvent(undefined, () => {
|
|
6233
6253
|
if (this._isOpen) {
|
|
6234
|
-
this.
|
|
6235
|
-
this.focusOption(this._focusedOptionIndex);
|
|
6254
|
+
this.focusOption(0);
|
|
6236
6255
|
}
|
|
6237
6256
|
});
|
|
6238
6257
|
break;
|
|
@@ -6240,8 +6259,7 @@ class KolCombobox {
|
|
|
6240
6259
|
case 'End': {
|
|
6241
6260
|
handleEvent(undefined, () => {
|
|
6242
6261
|
if (this._isOpen) {
|
|
6243
|
-
this.
|
|
6244
|
-
this.focusOption(this._focusedOptionIndex);
|
|
6262
|
+
this.focusOption(this._filteredSuggestions ? this._filteredSuggestions.length - 1 : 0);
|
|
6245
6263
|
}
|
|
6246
6264
|
});
|
|
6247
6265
|
break;
|
|
@@ -6264,6 +6282,7 @@ class KolCombobox {
|
|
|
6264
6282
|
constructor(hostRef) {
|
|
6265
6283
|
registerInstance(this, hostRef);
|
|
6266
6284
|
this.refSuggestions = [];
|
|
6285
|
+
this._focusedOptionIndex = -1;
|
|
6267
6286
|
this.toggleListbox = () => {
|
|
6268
6287
|
if (this.state._disabled === true) {
|
|
6269
6288
|
this._isOpen = false;
|
|
@@ -6272,12 +6291,10 @@ class KolCombobox {
|
|
|
6272
6291
|
this._isOpen = !this._isOpen;
|
|
6273
6292
|
if (this._isOpen && Array.isArray(this._filteredSuggestions) && this._filteredSuggestions.length > 0) {
|
|
6274
6293
|
const selectedIndex = this._filteredSuggestions.findIndex((option) => option === this._value);
|
|
6275
|
-
this.
|
|
6276
|
-
this.focusOption(this._focusedOptionIndex);
|
|
6294
|
+
this.focusOption(selectedIndex >= 0 ? selectedIndex : 0);
|
|
6277
6295
|
}
|
|
6278
6296
|
}
|
|
6279
6297
|
};
|
|
6280
|
-
this._focusedOptionIndex = -1;
|
|
6281
6298
|
this._isOpen = false;
|
|
6282
6299
|
this._filteredSuggestions = undefined;
|
|
6283
6300
|
this._accessKey = undefined;
|
|
@@ -6367,6 +6384,7 @@ class KolCombobox {
|
|
|
6367
6384
|
}
|
|
6368
6385
|
validateValue(value) {
|
|
6369
6386
|
this.controller.validateValue(value);
|
|
6387
|
+
this.controller.setFormAssociatedValue(value);
|
|
6370
6388
|
}
|
|
6371
6389
|
componentWillLoad() {
|
|
6372
6390
|
this.refSuggestions = [];
|
|
@@ -6382,7 +6400,7 @@ class KolCombobox {
|
|
|
6382
6400
|
stopPropagation(event);
|
|
6383
6401
|
tryToDispatchKoliBriEvent('change', this.host, this._value);
|
|
6384
6402
|
this.controller.setFormAssociatedValue(this._value);
|
|
6385
|
-
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) {
|
|
6386
6404
|
this.state._on.onChange(event, this._value);
|
|
6387
6405
|
}
|
|
6388
6406
|
}
|
|
@@ -6512,8 +6530,8 @@ class DetailsAnimationController {
|
|
|
6512
6530
|
}
|
|
6513
6531
|
}
|
|
6514
6532
|
|
|
6515
|
-
const defaultStyleCss$
|
|
6516
|
-
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;
|
|
6517
6535
|
|
|
6518
6536
|
class KolDetails {
|
|
6519
6537
|
constructor(hostRef) {
|
|
@@ -6615,6 +6633,138 @@ class KolDetails {
|
|
|
6615
6633
|
}; }
|
|
6616
6634
|
}
|
|
6617
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
|
+
|
|
6618
6768
|
class KolForm {
|
|
6619
6769
|
constructor(hostRef) {
|
|
6620
6770
|
registerInstance(this, hostRef);
|
|
@@ -6652,10 +6802,10 @@ class KolForm {
|
|
|
6652
6802
|
this.state = {};
|
|
6653
6803
|
}
|
|
6654
6804
|
render() {
|
|
6655
|
-
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) => {
|
|
6656
6806
|
if (index === 0)
|
|
6657
6807
|
this.errorListElement = el;
|
|
6658
|
-
} })))))))), 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' }))));
|
|
6659
6809
|
}
|
|
6660
6810
|
async focusErrorList() {
|
|
6661
6811
|
setTimeout(() => {
|
|
@@ -6720,7 +6870,7 @@ class KolHeading {
|
|
|
6720
6870
|
this._variant = undefined;
|
|
6721
6871
|
}
|
|
6722
6872
|
render() {
|
|
6723
|
-
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" })));
|
|
6724
6874
|
}
|
|
6725
6875
|
static get style() { return {
|
|
6726
6876
|
default: KolHeadingDefaultStyle0
|
|
@@ -6798,7 +6948,7 @@ class KolHeadingWc {
|
|
|
6798
6948
|
this.validateVariant(this._variant);
|
|
6799
6949
|
}
|
|
6800
6950
|
render() {
|
|
6801
|
-
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))));
|
|
6802
6952
|
}
|
|
6803
6953
|
static get watchers() { return {
|
|
6804
6954
|
"_label": ["validateLabel"],
|
|
@@ -6837,7 +6987,7 @@ class KolIcon {
|
|
|
6837
6987
|
}
|
|
6838
6988
|
render() {
|
|
6839
6989
|
const ariaShow = this.state._label.length > 0;
|
|
6840
|
-
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" })));
|
|
6841
6991
|
}
|
|
6842
6992
|
validateIcons(value) {
|
|
6843
6993
|
watchString(this, '_icons', value, {
|
|
@@ -6918,7 +7068,7 @@ class KolImage {
|
|
|
6918
7068
|
this.validateSrcset(this._srcset);
|
|
6919
7069
|
}
|
|
6920
7070
|
render() {
|
|
6921
|
-
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 })));
|
|
6922
7072
|
}
|
|
6923
7073
|
static get watchers() { return {
|
|
6924
7074
|
"_alt": ["validateAlt"],
|
|
@@ -6956,7 +7106,7 @@ class KolIndentedText {
|
|
|
6956
7106
|
this.state = {};
|
|
6957
7107
|
}
|
|
6958
7108
|
render() {
|
|
6959
|
-
return (hAsync(Host, { key: '
|
|
7109
|
+
return (hAsync(Host, { key: '674c96016710a7da20d2818387457838785b3356', class: "kol-indented-text-wc" }, hAsync("div", { key: 'b8f4bc81340ef597d42df3ab5e997a4eacb12267' }, hAsync("slot", { key: '29084aadeed639db76fed6a9a3bdf46facf5ef52' }))));
|
|
6960
7110
|
}
|
|
6961
7111
|
static get style() { return {
|
|
6962
7112
|
default: KolIndentedTextDefaultStyle0
|
|
@@ -7099,32 +7249,33 @@ const defaultStyleCss$x = "@layer kol-global {\n .sc-kol-input-checkbox-default
|
|
|
7099
7249
|
var KolInputCheckboxDefaultStyle0 = defaultStyleCss$x;
|
|
7100
7250
|
|
|
7101
7251
|
class KolInputCheckbox {
|
|
7252
|
+
getModelValue() {
|
|
7253
|
+
return this._checked ? this.state._value : null;
|
|
7254
|
+
}
|
|
7102
7255
|
async getValue() {
|
|
7103
|
-
|
|
7104
|
-
return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.checked;
|
|
7256
|
+
return this.getModelValue();
|
|
7105
7257
|
}
|
|
7106
7258
|
render() {
|
|
7107
7259
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
7108
7260
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
7109
|
-
return (hAsync(Host, { key: '
|
|
7261
|
+
return (hAsync(Host, { key: 'c6e77b07be323b6960575e6fbb3158f2eacbe300', class: "kol-input-checkbox" }, hAsync(KolInputWcTag, { key: 'dea203766cd16d41f80421663c0ec2d71bf2029d', class: {
|
|
7110
7262
|
checkbox: true,
|
|
7111
7263
|
[this.state._variant]: true,
|
|
7112
7264
|
'hide-label': !!this.state._hideLabel,
|
|
7113
7265
|
checked: this.state._checked,
|
|
7114
7266
|
indeterminate: this.state._indeterminate,
|
|
7115
|
-
}, "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 }))))));
|
|
7116
7268
|
}
|
|
7117
7269
|
constructor(hostRef) {
|
|
7118
7270
|
registerInstance(this, hostRef);
|
|
7119
7271
|
this.catchRef = (ref) => {
|
|
7120
|
-
this.ref = ref;
|
|
7121
7272
|
propagateFocus(this.host, ref);
|
|
7122
7273
|
};
|
|
7123
7274
|
this.onInput = (event) => {
|
|
7124
7275
|
var _a;
|
|
7125
7276
|
this._checked = !this._checked;
|
|
7126
7277
|
this._indeterminate = false;
|
|
7127
|
-
const value = this.
|
|
7278
|
+
const value = this.getModelValue();
|
|
7128
7279
|
tryToDispatchKoliBriEvent('input', this.host, value);
|
|
7129
7280
|
if (typeof ((_a = this._on) === null || _a === void 0 ? void 0 : _a.onInput) === 'function') {
|
|
7130
7281
|
this._on.onInput(event, value);
|
|
@@ -7132,7 +7283,7 @@ class KolInputCheckbox {
|
|
|
7132
7283
|
};
|
|
7133
7284
|
this.onChange = (event) => {
|
|
7134
7285
|
var _a;
|
|
7135
|
-
const value = this.
|
|
7286
|
+
const value = this.getModelValue();
|
|
7136
7287
|
tryToDispatchKoliBriEvent('change', this.host, value);
|
|
7137
7288
|
this.controller.setFormAssociatedCheckboxValue(value);
|
|
7138
7289
|
if (typeof ((_a = this._on) === null || _a === void 0 ? void 0 : _a.onChange) === 'function') {
|
|
@@ -7342,10 +7493,10 @@ class KolInputColor {
|
|
|
7342
7493
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
7343
7494
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
7344
7495
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
7345
|
-
return (hAsync(Host, { key: '
|
|
7496
|
+
return (hAsync(Host, { key: '12278adc12bc82bcf4646106d8783af67c840524', class: "kol-input-color" }, hAsync(KolInputWcTag, { key: 'b58479cd2cc206cb9da92c4c74eacdd971c70683', class: {
|
|
7346
7497
|
color: true,
|
|
7347
7498
|
'hide-label': !!this.state._hideLabel,
|
|
7348
|
-
}, _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))))));
|
|
7349
7500
|
}
|
|
7350
7501
|
constructor(hostRef) {
|
|
7351
7502
|
registerInstance(this, hostRef);
|
|
@@ -7654,10 +7805,10 @@ class KolInputDate {
|
|
|
7654
7805
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
7655
7806
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
7656
7807
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
7657
|
-
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: {
|
|
7658
7809
|
[this.state._type]: true,
|
|
7659
7810
|
'hide-label': !!this.state._hideLabel,
|
|
7660
|
-
}, _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 }))))));
|
|
7661
7812
|
}
|
|
7662
7813
|
constructor(hostRef) {
|
|
7663
7814
|
registerInstance(this, hostRef);
|
|
@@ -7875,6 +8026,11 @@ class KolInputDate {
|
|
|
7875
8026
|
}; }
|
|
7876
8027
|
}
|
|
7877
8028
|
|
|
8029
|
+
const PasswordVariantPropTypeOptions = ['default', 'visibility-toggle'];
|
|
8030
|
+
const validatePasswordVariant = (component, value) => {
|
|
8031
|
+
watchValidator(component, '_variant', (value) => typeof value === 'string' && PasswordVariantPropTypeOptions.includes(value), new Set(PasswordVariantPropTypeOptions), value);
|
|
8032
|
+
};
|
|
8033
|
+
|
|
7878
8034
|
class InputPasswordController extends InputIconController {
|
|
7879
8035
|
constructor(component, name, host) {
|
|
7880
8036
|
super(component, name, host);
|
|
@@ -7886,6 +8042,9 @@ class InputPasswordController extends InputIconController {
|
|
|
7886
8042
|
validateHasCounter(value) {
|
|
7887
8043
|
validateHasCounter(this.component, value);
|
|
7888
8044
|
}
|
|
8045
|
+
validateVariant(value) {
|
|
8046
|
+
validatePasswordVariant(this.component, value);
|
|
8047
|
+
}
|
|
7889
8048
|
validateMaxLength(value) {
|
|
7890
8049
|
watchNumber(this.component, '_maxLength', value, {
|
|
7891
8050
|
min: 0,
|
|
@@ -7917,6 +8076,7 @@ class InputPasswordController extends InputIconController {
|
|
|
7917
8076
|
this.validateReadOnly(this.component._readOnly);
|
|
7918
8077
|
this.validateRequired(this.component._required);
|
|
7919
8078
|
this.validateValue(this.component._value);
|
|
8079
|
+
this.validateVariant(this.component._variant);
|
|
7920
8080
|
}
|
|
7921
8081
|
}
|
|
7922
8082
|
|
|
@@ -7978,10 +8138,10 @@ class KolInputEmail {
|
|
|
7978
8138
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
7979
8139
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
7980
8140
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
7981
|
-
return (hAsync(Host, { key: '
|
|
8141
|
+
return (hAsync(Host, { key: 'f60ec3462b131d7376943c3436695cc5f59929de', class: {
|
|
7982
8142
|
'kol-input-email': true,
|
|
7983
8143
|
'has-value': this.state._hasValue,
|
|
7984
|
-
} }, 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 }))))));
|
|
7985
8145
|
}
|
|
7986
8146
|
constructor(hostRef) {
|
|
7987
8147
|
registerInstance(this, hostRef);
|
|
@@ -8240,10 +8400,10 @@ class KolInputFile {
|
|
|
8240
8400
|
render() {
|
|
8241
8401
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
8242
8402
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
8243
|
-
return (hAsync(Host, { key: '
|
|
8403
|
+
return (hAsync(Host, { key: '70527644af89e9894413ed9e6530725633dfb94f', class: "kol-input-file" }, hAsync(KolInputWcTag, { key: '1d4d28a8d35215d1f201bf1ce6e267e80af96a45', class: {
|
|
8244
8404
|
file: true,
|
|
8245
8405
|
'hide-label': !!this.state._hideLabel,
|
|
8246
|
-
}, _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 }))))));
|
|
8247
8407
|
}
|
|
8248
8408
|
constructor(hostRef) {
|
|
8249
8409
|
registerInstance(this, hostRef);
|
|
@@ -8517,13 +8677,13 @@ class KolInputNumber {
|
|
|
8517
8677
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
8518
8678
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
8519
8679
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
8520
|
-
return (hAsync(Host, { key: '
|
|
8680
|
+
return (hAsync(Host, { key: '7c942a16c6f0b9955a470e716b345054788dac88', class: {
|
|
8521
8681
|
'kol-input-number': true,
|
|
8522
8682
|
'has-value': this.state._hasValue,
|
|
8523
|
-
} }, hAsync(KolInputWcTag, { key: '
|
|
8683
|
+
} }, hAsync(KolInputWcTag, { key: '49c04c405b6f4fda566fe1e95e0d733fefe001df', class: {
|
|
8524
8684
|
number: true,
|
|
8525
8685
|
'hide-label': !!this.state._hideLabel,
|
|
8526
|
-
}, _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 }))))));
|
|
8527
8687
|
}
|
|
8528
8688
|
constructor(hostRef) {
|
|
8529
8689
|
registerInstance(this, hostRef);
|
|
@@ -8737,7 +8897,7 @@ class KolInputNumber {
|
|
|
8737
8897
|
}; }
|
|
8738
8898
|
}
|
|
8739
8899
|
|
|
8740
|
-
const defaultStyleCss$r = "@layer kol-global {\n .sc-kol-input-password-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-input-password-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-input-password-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-input-password-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\n@layer kol-global {\n .sc-kol-input-password-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-input-password-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-input-password-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-input-password-default-h {\n display: block;\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}\n@layer kol-component {\n .sc-kol-input-password-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
8900
|
+
const defaultStyleCss$r = "@layer kol-global {\n .sc-kol-input-password-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-input-password-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-input-password-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-input-password-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\n@layer kol-global {\n .sc-kol-input-password-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-input-password-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-input-password-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-input-password-default-h {\n display: block;\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}\n@layer kol-component {\n .sc-kol-input-password-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .password-toggle-button {\n position: absolute;\n transform: translateX(-100%);\n }\n .kol-tooltip-wc {\n --kol-tooltip-width: 10rem;\n }\n}";
|
|
8741
8901
|
var KolInputPasswordDefaultStyle0 = defaultStyleCss$r;
|
|
8742
8902
|
|
|
8743
8903
|
class KolInputPassword {
|
|
@@ -8746,15 +8906,20 @@ class KolInputPassword {
|
|
|
8746
8906
|
return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
|
|
8747
8907
|
}
|
|
8748
8908
|
render() {
|
|
8909
|
+
var _a;
|
|
8749
8910
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
8750
8911
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
8751
|
-
return (hAsync(Host, { key: '
|
|
8912
|
+
return (hAsync(Host, { key: 'ea5897bd368a1283a3d7d700930076c09eb11279', class: {
|
|
8752
8913
|
'kol-input-password': true,
|
|
8753
8914
|
'has-value': this.state._hasValue,
|
|
8754
|
-
} }, hAsync(KolInputWcTag, { key: '
|
|
8915
|
+
} }, hAsync(KolInputWcTag, { key: '24283ff4bdde3bb0d65e9f6fd05e7f10c65dc95d', class: {
|
|
8755
8916
|
'hide-label': !!this.state._hideLabel,
|
|
8756
8917
|
password: true,
|
|
8757
|
-
}, _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: {
|
|
8919
|
+
onClick: () => {
|
|
8920
|
+
this._passwordVisible = !this._passwordVisible;
|
|
8921
|
+
},
|
|
8922
|
+
}, _hideLabel: true, _icons: this._passwordVisible ? 'codicon codicon-eye-closed' : 'codicon codicon-eye-watch' })) : ('')))));
|
|
8758
8923
|
}
|
|
8759
8924
|
constructor(hostRef) {
|
|
8760
8925
|
registerInstance(this, hostRef);
|
|
@@ -8800,6 +8965,7 @@ class KolInputPassword {
|
|
|
8800
8965
|
this._tooltipAlign = 'top';
|
|
8801
8966
|
this._touched = false;
|
|
8802
8967
|
this._value = undefined;
|
|
8968
|
+
this._variant = 'default';
|
|
8803
8969
|
this.state = {
|
|
8804
8970
|
_autoComplete: 'off',
|
|
8805
8971
|
_currentLength: 0,
|
|
@@ -8807,7 +8973,9 @@ class KolInputPassword {
|
|
|
8807
8973
|
_hideError: false,
|
|
8808
8974
|
_id: `id-${nonce()}`,
|
|
8809
8975
|
_label: '',
|
|
8976
|
+
_variant: 'default',
|
|
8810
8977
|
};
|
|
8978
|
+
this._passwordVisible = false;
|
|
8811
8979
|
this.controller = new InputPasswordController(this, 'password', this.host);
|
|
8812
8980
|
}
|
|
8813
8981
|
validateAccessKey(value) {
|
|
@@ -8819,12 +8987,15 @@ class KolInputPassword {
|
|
|
8819
8987
|
validateAutoComplete(value) {
|
|
8820
8988
|
this.controller.validateAutoComplete(value);
|
|
8821
8989
|
if (value === 'on') {
|
|
8822
|
-
devHint(`[KolInputPassword]
|
|
8990
|
+
devHint(`[KolInputPassword] The 'autocomplete' option should not be set to "on" for a password input field`);
|
|
8823
8991
|
}
|
|
8824
8992
|
}
|
|
8825
8993
|
validateDisabled(value) {
|
|
8826
8994
|
this.controller.validateDisabled(value);
|
|
8827
8995
|
}
|
|
8996
|
+
validateVariant(value) {
|
|
8997
|
+
this.controller.validateVariant(value);
|
|
8998
|
+
}
|
|
8828
8999
|
validateError(value) {
|
|
8829
9000
|
this.controller.validateError(value);
|
|
8830
9001
|
}
|
|
@@ -8901,6 +9072,7 @@ class KolInputPassword {
|
|
|
8901
9072
|
"_alert": ["validateAlert"],
|
|
8902
9073
|
"_autoComplete": ["validateAutoComplete"],
|
|
8903
9074
|
"_disabled": ["validateDisabled"],
|
|
9075
|
+
"_variant": ["validateVariant"],
|
|
8904
9076
|
"_error": ["validateError"],
|
|
8905
9077
|
"_hasCounter": ["validateHasCounter"],
|
|
8906
9078
|
"_hideError": ["validateHideError"],
|
|
@@ -8956,7 +9128,9 @@ class KolInputPassword {
|
|
|
8956
9128
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
8957
9129
|
"_touched": [1540],
|
|
8958
9130
|
"_value": [1],
|
|
9131
|
+
"_variant": [1],
|
|
8959
9132
|
"state": [32],
|
|
9133
|
+
"_passwordVisible": [32],
|
|
8960
9134
|
"getValue": [64]
|
|
8961
9135
|
},
|
|
8962
9136
|
"$listeners$": undefined,
|
|
@@ -8980,14 +9154,14 @@ class KolInputRadio {
|
|
|
8980
9154
|
render() {
|
|
8981
9155
|
const { ariaDescribedBy, hasError } = getRenderStates(this.state);
|
|
8982
9156
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
8983
|
-
return (hAsync(Host, { key: '
|
|
9157
|
+
return (hAsync(Host, { key: '86b677936fe9165f668334c11564698c2c18746f', class: "kol-input-radio" }, hAsync("fieldset", { key: 'f6abab7ceee78e206a3a0e45c93596530e41ffdb', class: {
|
|
8984
9158
|
fieldset: true,
|
|
8985
9159
|
disabled: this.state._disabled === true,
|
|
8986
9160
|
error: hasError === true,
|
|
8987
9161
|
required: this.state._required === true,
|
|
8988
9162
|
'hidden-error': this._hideError === true,
|
|
8989
9163
|
[this.state._orientation]: true,
|
|
8990
|
-
} }, 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) => {
|
|
8991
9165
|
const customId = `${this.state._id}-${index}`;
|
|
8992
9166
|
const slotName = `radio-${index}`;
|
|
8993
9167
|
const selected = this.state._value === option.value;
|
|
@@ -9000,7 +9174,7 @@ class KolInputRadio {
|
|
|
9000
9174
|
padding: this.state._hideLabel ? '0' : undefined,
|
|
9001
9175
|
visibility: this.state._hideLabel ? 'hidden' : undefined,
|
|
9002
9176
|
} }, hAsync("span", null, hAsync("span", { class: "radio-label-span-inner" }, option.label))))));
|
|
9003
|
-
}), 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 }))));
|
|
9004
9178
|
}
|
|
9005
9179
|
constructor(hostRef) {
|
|
9006
9180
|
registerInstance(this, hostRef);
|
|
@@ -9262,13 +9436,13 @@ class KolInputRange {
|
|
|
9262
9436
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
9263
9437
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
9264
9438
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
9265
|
-
return (hAsync(Host, { key: '
|
|
9439
|
+
return (hAsync(Host, { key: '06a9a8451479014d3a2742239680bf0775bc2139', class: "kol-input-range" }, hAsync(KolInputWcTag, { key: '0beef62d205934ad3dd3adad00ea33fa736902d8', class: {
|
|
9266
9440
|
range: true,
|
|
9267
9441
|
'hide-label': !!this.state._hideLabel,
|
|
9268
|
-
}, _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: {
|
|
9269
9443
|
'--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',
|
|
9270
|
-
} }, hAsync("input", Object.assign({ key: '
|
|
9271
|
-
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 })))),
|
|
9272
9446
|
]))));
|
|
9273
9447
|
}
|
|
9274
9448
|
constructor(hostRef) {
|
|
@@ -9484,13 +9658,13 @@ class KolInputText {
|
|
|
9484
9658
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
9485
9659
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
9486
9660
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
9487
|
-
return (hAsync(Host, { key: '
|
|
9661
|
+
return (hAsync(Host, { key: '96f4d125a686ddd2913cb7e0ce0bcc4f6bd4cbce', class: {
|
|
9488
9662
|
'has-value': this.state._hasValue,
|
|
9489
9663
|
'kol-input-text': true,
|
|
9490
|
-
} }, hAsync(KolInputWcTag, { key: '
|
|
9664
|
+
} }, hAsync(KolInputWcTag, { key: '36ab21f90409094c131b92f56b85f5691fc66e84', class: {
|
|
9491
9665
|
[this.state._type]: true,
|
|
9492
9666
|
'hide-label': !!this.state._hideLabel,
|
|
9493
|
-
}, _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 }))))));
|
|
9494
9668
|
}
|
|
9495
9669
|
constructor(hostRef) {
|
|
9496
9670
|
registerInstance(this, hostRef);
|
|
@@ -9766,18 +9940,18 @@ class KolInputWc {
|
|
|
9766
9940
|
const hasExpertSlot = showExpertSlot(this._label);
|
|
9767
9941
|
const hasHint = typeof this._hint === 'string' && this._hint.length > 0;
|
|
9768
9942
|
const useTooltopInsteadOfLabel = !hasExpertSlot && this._hideLabel;
|
|
9769
|
-
return (hAsync(Host, { key: '
|
|
9943
|
+
return (hAsync(Host, { key: '8f4ba7be771e2794dba0bbea4c93de58237f2b02', class: clsx('kol-input', this.getModifierClassNameByMsgType(), {
|
|
9770
9944
|
disabled: this._disabled === true,
|
|
9771
9945
|
error: hasError === true,
|
|
9772
9946
|
'read-only': this._readOnly === true,
|
|
9773
9947
|
required: this._required === true,
|
|
9774
9948
|
touched: this._touched === true,
|
|
9775
9949
|
'hidden-error': this._hideError === true,
|
|
9776
|
-
}) }, 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: {
|
|
9777
9951
|
input: true,
|
|
9778
9952
|
'icon-left': typeof ((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) === 'object',
|
|
9779
9953
|
'icon-right': typeof ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) === 'object',
|
|
9780
|
-
} }, ((_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'))))));
|
|
9781
9955
|
}
|
|
9782
9956
|
getModifierClassNameByMsgType() {
|
|
9783
9957
|
var _a, _b;
|
|
@@ -9856,7 +10030,7 @@ class KolKolibri {
|
|
|
9856
10030
|
}
|
|
9857
10031
|
render() {
|
|
9858
10032
|
const fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
|
|
9859
|
-
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")))));
|
|
9860
10034
|
}
|
|
9861
10035
|
validateColor(value) {
|
|
9862
10036
|
validateColor(this, value, {
|
|
@@ -9896,7 +10070,7 @@ class KolKolibri {
|
|
|
9896
10070
|
}; }
|
|
9897
10071
|
}
|
|
9898
10072
|
|
|
9899
|
-
const defaultStyleCss$m = "@layer kol-global {\n .sc-kol-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-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-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-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: underline;\n }\n a:is(:focus, :hover):not([aria-disabled]),\n button:is(:focus, :hover):not([disabled]) {\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}";
|
|
10073
|
+
const defaultStyleCss$m = "@layer kol-global {\n .sc-kol-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-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-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-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}";
|
|
9900
10074
|
var KolLinkDefaultStyle0 = defaultStyleCss$m;
|
|
9901
10075
|
|
|
9902
10076
|
class KolLink {
|
|
@@ -9920,7 +10094,7 @@ class KolLink {
|
|
|
9920
10094
|
this._tooltipAlign = 'right';
|
|
9921
10095
|
}
|
|
9922
10096
|
render() {
|
|
9923
|
-
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" }))));
|
|
9924
10098
|
}
|
|
9925
10099
|
get host() { return getElement(this); }
|
|
9926
10100
|
static get style() { return {
|
|
@@ -9976,11 +10150,11 @@ class KolLinkButton {
|
|
|
9976
10150
|
this._variant = 'normal';
|
|
9977
10151
|
}
|
|
9978
10152
|
render() {
|
|
9979
|
-
return (hAsync(Host, { key: '
|
|
10153
|
+
return (hAsync(Host, { key: 'd5228dea8b70b7c3ae5179ad65acc960d19bd56d', class: "kol-link-button" }, hAsync(KolLinkWcTag, { key: '2133362600a94bf784e4756b721e40071035b594', ref: this.catchRef, class: {
|
|
9980
10154
|
button: true,
|
|
9981
10155
|
[this._variant]: this._variant !== 'custom',
|
|
9982
10156
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
9983
|
-
}, _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" }))));
|
|
9984
10158
|
}
|
|
9985
10159
|
get host() { return getElement(this); }
|
|
9986
10160
|
static get style() { return {
|
|
@@ -10043,10 +10217,10 @@ class KolLinkGroup {
|
|
|
10043
10217
|
}
|
|
10044
10218
|
render() {
|
|
10045
10219
|
const ListTag = this.isUl ? 'ul' : 'ol';
|
|
10046
|
-
return (hAsync(Host, { key: '
|
|
10220
|
+
return (hAsync(Host, { key: 'e1358fcd3cf6415d8847992ee32d90bbcada6e35', class: "kol-link-group" }, hAsync(ListTag, { key: '5f7747dae40ab94612914e94a5aa126acb644f75', "aria-label": this.state._label, class: {
|
|
10047
10221
|
vertical: this.state._orientation === 'vertical',
|
|
10048
10222
|
horizontal: this.state._orientation === 'horizontal',
|
|
10049
|
-
} }, hAsync(ListItem, { key: '
|
|
10223
|
+
} }, hAsync(ListItem, { key: '9a5b36776720a38d0476f2f5fd34dd734e3aeab5', links: this.state._links, orientation: this.state._orientation, listStyleType: this.state._listStyleType }))));
|
|
10050
10224
|
}
|
|
10051
10225
|
validateLabel(value, _oldValue, initial = false) {
|
|
10052
10226
|
if (!initial && this.state._label) {
|
|
@@ -10159,12 +10333,14 @@ class KolLinkWc {
|
|
|
10159
10333
|
download: typeof this.state._download === 'string' ? this.state._download : undefined,
|
|
10160
10334
|
};
|
|
10161
10335
|
if (this.state._hideLabel === true && !this.state._label) {
|
|
10162
|
-
devHint(`[KolLink]
|
|
10336
|
+
devHint(`[KolLink] An aria-label must be set when _hide-label is set.`);
|
|
10163
10337
|
}
|
|
10164
10338
|
return { isExternal, tagAttrs };
|
|
10165
10339
|
};
|
|
10166
10340
|
this._accessKey = undefined;
|
|
10167
10341
|
this._ariaCurrentValue = undefined;
|
|
10342
|
+
this._ariaExpanded = undefined;
|
|
10343
|
+
this._ariaOwns = undefined;
|
|
10168
10344
|
this._disabled = false;
|
|
10169
10345
|
this._download = undefined;
|
|
10170
10346
|
this._hideLabel = false;
|
|
@@ -10185,13 +10361,13 @@ class KolLinkWc {
|
|
|
10185
10361
|
render() {
|
|
10186
10362
|
const { isExternal, tagAttrs } = this.getRenderValues();
|
|
10187
10363
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
10188
|
-
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'
|
|
10189
10365
|
? `${this.state._label}${isExternal ? ` (${translate('kol-open-link-in-tab')})` : ''}`
|
|
10190
10366
|
: undefined, class: {
|
|
10191
10367
|
disabled: this.state._disabled === true,
|
|
10192
10368
|
'external-link': isExternal,
|
|
10193
10369
|
'hide-label': this.state._hideLabel === true,
|
|
10194
|
-
} }, 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 })));
|
|
10195
10371
|
}
|
|
10196
10372
|
validateAccessKey(value) {
|
|
10197
10373
|
validateAccessKey(this, value);
|
|
@@ -10199,6 +10375,12 @@ class KolLinkWc {
|
|
|
10199
10375
|
validateAriaCurrentValue(value) {
|
|
10200
10376
|
validateAriaCurrentValue(this, value);
|
|
10201
10377
|
}
|
|
10378
|
+
validateAriaExpanded(value) {
|
|
10379
|
+
validateAriaExpanded(this, value);
|
|
10380
|
+
}
|
|
10381
|
+
validateAriaOwns(value) {
|
|
10382
|
+
validateAriaOwns(this, value);
|
|
10383
|
+
}
|
|
10202
10384
|
validateDisabled(value) {
|
|
10203
10385
|
validateDisabled(this, value);
|
|
10204
10386
|
}
|
|
@@ -10237,6 +10419,8 @@ class KolLinkWc {
|
|
|
10237
10419
|
componentWillLoad() {
|
|
10238
10420
|
this.validateAccessKey(this._accessKey);
|
|
10239
10421
|
this.validateAriaCurrentValue(this._ariaCurrentValue);
|
|
10422
|
+
this.validateAriaExpanded(this._ariaExpanded);
|
|
10423
|
+
this.validateAriaOwns(this._ariaOwns);
|
|
10240
10424
|
this.validateDisabled(this._disabled);
|
|
10241
10425
|
this.validateDownload(this._download);
|
|
10242
10426
|
this.validateHideLabel(this._hideLabel);
|
|
@@ -10261,6 +10445,8 @@ class KolLinkWc {
|
|
|
10261
10445
|
static get watchers() { return {
|
|
10262
10446
|
"_accessKey": ["validateAccessKey"],
|
|
10263
10447
|
"_ariaCurrentValue": ["validateAriaCurrentValue"],
|
|
10448
|
+
"_ariaExpanded": ["validateAriaExpanded"],
|
|
10449
|
+
"_ariaOwns": ["validateAriaOwns"],
|
|
10264
10450
|
"_disabled": ["validateDisabled"],
|
|
10265
10451
|
"_download": ["validateDownload"],
|
|
10266
10452
|
"_hideLabel": ["validateHideLabel"],
|
|
@@ -10279,6 +10465,8 @@ class KolLinkWc {
|
|
|
10279
10465
|
"$members$": {
|
|
10280
10466
|
"_accessKey": [1, "_access-key"],
|
|
10281
10467
|
"_ariaCurrentValue": [1, "_aria-current-value"],
|
|
10468
|
+
"_ariaExpanded": [4, "_aria-expanded"],
|
|
10469
|
+
"_ariaOwns": [1, "_aria-owns"],
|
|
10282
10470
|
"_disabled": [4],
|
|
10283
10471
|
"_download": [1],
|
|
10284
10472
|
"_hideLabel": [4, "_hide-label"],
|
|
@@ -10497,7 +10685,7 @@ class KolLogo {
|
|
|
10497
10685
|
setState(this, '_org', value);
|
|
10498
10686
|
}
|
|
10499
10687
|
else {
|
|
10500
|
-
devHint(`
|
|
10688
|
+
devHint(`The abbreviation (${value}) used is not defined!`);
|
|
10501
10689
|
}
|
|
10502
10690
|
}
|
|
10503
10691
|
componentWillLoad() {
|
|
@@ -10505,7 +10693,7 @@ class KolLogo {
|
|
|
10505
10693
|
}
|
|
10506
10694
|
render() {
|
|
10507
10695
|
var _a;
|
|
10508
|
-
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) => {
|
|
10509
10697
|
return (hAsync("tspan", { x: "0", dy: "1.1em", key: `kol-logo-text-${index}` }, text));
|
|
10510
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."))))))));
|
|
10511
10699
|
}
|
|
@@ -10617,7 +10805,7 @@ class ModalService {
|
|
|
10617
10805
|
}
|
|
10618
10806
|
openModal(modalRef, activeElement) {
|
|
10619
10807
|
if (modalRef instanceof HTMLElement === false) {
|
|
10620
|
-
Log.warn(`[KolModalService]
|
|
10808
|
+
Log.warn(`[KolModalService] The DOM reference of the modal is not valid.`);
|
|
10621
10809
|
}
|
|
10622
10810
|
else {
|
|
10623
10811
|
this.modalStack.set(modalRef, {
|
|
@@ -10629,7 +10817,7 @@ class ModalService {
|
|
|
10629
10817
|
closeModal(modalRef) {
|
|
10630
10818
|
var _a;
|
|
10631
10819
|
if (modalRef instanceof HTMLElement === false) {
|
|
10632
|
-
Log.warn(`[KolModalService]
|
|
10820
|
+
Log.warn(`[KolModalService] The DOM reference of the modal is not valid.`);
|
|
10633
10821
|
}
|
|
10634
10822
|
else {
|
|
10635
10823
|
const activeElement = (_a = this.modalStack.get(modalRef)) === null || _a === void 0 ? void 0 : _a.activeElement;
|
|
@@ -10677,16 +10865,16 @@ class KolModal {
|
|
|
10677
10865
|
}
|
|
10678
10866
|
}
|
|
10679
10867
|
render() {
|
|
10680
|
-
return (hAsync(Host, { key: '
|
|
10868
|
+
return (hAsync(Host, { key: '8dcce275d7ded560756ed8fa4bef54ee4d3a20e2', class: "kol-modal", ref: (el) => {
|
|
10681
10869
|
this.hostElement = el;
|
|
10682
|
-
} }, this.state._activeElement && (hAsync("div", { key: '
|
|
10870
|
+
} }, this.state._activeElement && (hAsync("div", { key: '7706d586dcddf9cf5a23040d01aa318e8dd460ba', class: "overlay" }, hAsync("div", { key: '5d32e1415e11d4f598035f68a6353bf4516174df', class: "modal", style: {
|
|
10683
10871
|
width: this.state._width,
|
|
10684
10872
|
}, "aria-label": this.state._label, "aria-modal": "true", role: "dialog", onKeyDown: this.onKeyDown, ref: (el) => {
|
|
10685
10873
|
if (el) {
|
|
10686
10874
|
el.setAttribute('tabindex', '0');
|
|
10687
10875
|
setTimeout(() => el.focus(), 250);
|
|
10688
10876
|
}
|
|
10689
|
-
} }, hAsync("slot", { key: '
|
|
10877
|
+
} }, hAsync("slot", { key: 'cbd31db78f6c1070fad845022b3efd6f247ead54' }))))));
|
|
10690
10878
|
}
|
|
10691
10879
|
validateActiveElement(value) {
|
|
10692
10880
|
watchValidator(this, '_activeElement', (value) => typeof value === 'object' || value === null, new Set(['HTMLElement', 'null']), value, {
|
|
@@ -10861,11 +11049,11 @@ class KolNav {
|
|
|
10861
11049
|
const collapsible = this.state._collapsible === true;
|
|
10862
11050
|
const hideLabel = this.state._hideLabel === true;
|
|
10863
11051
|
const orientation = this.state._orientation;
|
|
10864
|
-
return (hAsync(Host, { key: '
|
|
11052
|
+
return (hAsync(Host, { key: 'ad305888a9a44b97ab2c5c17ecb746bedfc29ea0', class: "kol-nav" }, hAsync("div", { key: '347730ba86f73875ed8aec6de6c0d0e5bd98bd66', class: {
|
|
10865
11053
|
nav: true,
|
|
10866
11054
|
[orientation]: true,
|
|
10867
11055
|
'is-compact': this.state._hideLabel,
|
|
10868
|
-
} }, 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: {
|
|
10869
11057
|
onClick: () => {
|
|
10870
11058
|
this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel === false });
|
|
10871
11059
|
},
|
|
@@ -10895,7 +11083,7 @@ class KolNav {
|
|
|
10895
11083
|
}
|
|
10896
11084
|
validateLinks(value) {
|
|
10897
11085
|
watchNavLinks('KolNav', this, value);
|
|
10898
|
-
devHint(`[KolNav]
|
|
11086
|
+
devHint(`[KolNav] The navigation structure is not yet validated recursively.`);
|
|
10899
11087
|
}
|
|
10900
11088
|
validateOrientation(value) {
|
|
10901
11089
|
watchValidator(this, '_orientation', (value) => value === 'horizontal' || value === 'vertical', new Set(['Orientation {horizontal, vertical}']), value, {
|
|
@@ -11413,12 +11601,21 @@ function getPaddingObject(padding) {
|
|
|
11413
11601
|
};
|
|
11414
11602
|
}
|
|
11415
11603
|
function rectToClientRect(rect) {
|
|
11604
|
+
const {
|
|
11605
|
+
x,
|
|
11606
|
+
y,
|
|
11607
|
+
width,
|
|
11608
|
+
height
|
|
11609
|
+
} = rect;
|
|
11416
11610
|
return {
|
|
11417
|
-
|
|
11418
|
-
|
|
11419
|
-
|
|
11420
|
-
|
|
11421
|
-
|
|
11611
|
+
width,
|
|
11612
|
+
height,
|
|
11613
|
+
top: y,
|
|
11614
|
+
left: x,
|
|
11615
|
+
right: x + width,
|
|
11616
|
+
bottom: y + height,
|
|
11617
|
+
x,
|
|
11618
|
+
y
|
|
11422
11619
|
};
|
|
11423
11620
|
}
|
|
11424
11621
|
|
|
@@ -11607,9 +11804,10 @@ async function detectOverflow(state, options) {
|
|
|
11607
11804
|
strategy
|
|
11608
11805
|
}));
|
|
11609
11806
|
const rect = elementContext === 'floating' ? {
|
|
11610
|
-
...rects.floating,
|
|
11611
11807
|
x,
|
|
11612
|
-
y
|
|
11808
|
+
y,
|
|
11809
|
+
width: rects.floating.width,
|
|
11810
|
+
height: rects.floating.height
|
|
11613
11811
|
} : rects.reference;
|
|
11614
11812
|
const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
|
|
11615
11813
|
const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
|
|
@@ -11859,10 +12057,12 @@ const flip$1 = function (options) {
|
|
|
11859
12057
|
return {};
|
|
11860
12058
|
}
|
|
11861
12059
|
const side = getSide(placement);
|
|
12060
|
+
const initialSideAxis = getSideAxis(initialPlacement);
|
|
11862
12061
|
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
|
|
11863
12062
|
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
11864
12063
|
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
|
|
11865
|
-
|
|
12064
|
+
const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
|
|
12065
|
+
if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
|
|
11866
12066
|
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
|
11867
12067
|
}
|
|
11868
12068
|
const placements = [initialPlacement, ...fallbackPlacements];
|
|
@@ -11908,8 +12108,17 @@ const flip$1 = function (options) {
|
|
|
11908
12108
|
switch (fallbackStrategy) {
|
|
11909
12109
|
case 'bestFit':
|
|
11910
12110
|
{
|
|
11911
|
-
var _overflowsData$
|
|
11912
|
-
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];
|
|
11913
12122
|
if (placement) {
|
|
11914
12123
|
resetPlacement = placement;
|
|
11915
12124
|
}
|
|
@@ -12149,6 +12358,8 @@ async function convertValueToCoords(state, options) {
|
|
|
12149
12358
|
const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
|
|
12150
12359
|
const crossAxisMulti = rtl && isVertical ? -1 : 1;
|
|
12151
12360
|
const rawValue = evaluate(options, state);
|
|
12361
|
+
|
|
12362
|
+
// eslint-disable-next-line prefer-const
|
|
12152
12363
|
let {
|
|
12153
12364
|
mainAxis,
|
|
12154
12365
|
crossAxis,
|
|
@@ -12399,16 +12610,16 @@ const size = function (options) {
|
|
|
12399
12610
|
widthSide = side;
|
|
12400
12611
|
heightSide = alignment === 'end' ? 'top' : 'bottom';
|
|
12401
12612
|
}
|
|
12402
|
-
const
|
|
12403
|
-
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);
|
|
12404
12617
|
const noShift = !state.middlewareData.shift;
|
|
12405
12618
|
let availableHeight = overflowAvailableHeight;
|
|
12406
12619
|
let availableWidth = overflowAvailableWidth;
|
|
12407
12620
|
if (isYAxis) {
|
|
12408
|
-
const maximumClippingWidth = width - overflow.left - overflow.right;
|
|
12409
12621
|
availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
|
|
12410
12622
|
} else {
|
|
12411
|
-
const maximumClippingHeight = height - overflow.top - overflow.bottom;
|
|
12412
12623
|
availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
|
|
12413
12624
|
}
|
|
12414
12625
|
if (noShift && !alignment) {
|
|
@@ -12485,6 +12696,15 @@ function isOverflowElement(element) {
|
|
|
12485
12696
|
function isTableElement(element) {
|
|
12486
12697
|
return ['table', 'td', 'th'].includes(getNodeName(element));
|
|
12487
12698
|
}
|
|
12699
|
+
function isTopLayer(element) {
|
|
12700
|
+
return [':popover-open', ':modal'].some(selector => {
|
|
12701
|
+
try {
|
|
12702
|
+
return element.matches(selector);
|
|
12703
|
+
} catch (e) {
|
|
12704
|
+
return false;
|
|
12705
|
+
}
|
|
12706
|
+
});
|
|
12707
|
+
}
|
|
12488
12708
|
function isContainingBlock(element) {
|
|
12489
12709
|
const webkit = isWebKit();
|
|
12490
12710
|
const css = getComputedStyle(element);
|
|
@@ -12495,11 +12715,13 @@ function isContainingBlock(element) {
|
|
|
12495
12715
|
function getContainingBlock(element) {
|
|
12496
12716
|
let currentNode = getParentNode(element);
|
|
12497
12717
|
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
12718
|
+
if (isTopLayer(currentNode)) {
|
|
12719
|
+
return null;
|
|
12720
|
+
}
|
|
12498
12721
|
if (isContainingBlock(currentNode)) {
|
|
12499
12722
|
return currentNode;
|
|
12500
|
-
} else {
|
|
12501
|
-
currentNode = getParentNode(currentNode);
|
|
12502
12723
|
}
|
|
12724
|
+
currentNode = getParentNode(currentNode);
|
|
12503
12725
|
}
|
|
12504
12726
|
return null;
|
|
12505
12727
|
}
|
|
@@ -12521,8 +12743,8 @@ function getNodeScroll(element) {
|
|
|
12521
12743
|
};
|
|
12522
12744
|
}
|
|
12523
12745
|
return {
|
|
12524
|
-
scrollLeft: element.
|
|
12525
|
-
scrollTop: element.
|
|
12746
|
+
scrollLeft: element.scrollX,
|
|
12747
|
+
scrollTop: element.scrollY
|
|
12526
12748
|
};
|
|
12527
12749
|
}
|
|
12528
12750
|
function getParentNode(node) {
|
|
@@ -12694,17 +12916,6 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
|
|
|
12694
12916
|
});
|
|
12695
12917
|
}
|
|
12696
12918
|
|
|
12697
|
-
const topLayerSelectors = [':popover-open', ':modal'];
|
|
12698
|
-
function isTopLayer(element) {
|
|
12699
|
-
return topLayerSelectors.some(selector => {
|
|
12700
|
-
try {
|
|
12701
|
-
return element.matches(selector);
|
|
12702
|
-
} catch (e) {
|
|
12703
|
-
return false;
|
|
12704
|
-
}
|
|
12705
|
-
});
|
|
12706
|
-
}
|
|
12707
|
-
|
|
12708
12919
|
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
12709
12920
|
let {
|
|
12710
12921
|
elements,
|
|
@@ -13375,7 +13586,7 @@ class KolPopover {
|
|
|
13375
13586
|
});
|
|
13376
13587
|
}
|
|
13377
13588
|
render() {
|
|
13378
|
-
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' }))));
|
|
13379
13590
|
}
|
|
13380
13591
|
validateAlign(value) {
|
|
13381
13592
|
validateAlign(this, value);
|
|
@@ -13451,7 +13662,7 @@ class KolProcess {
|
|
|
13451
13662
|
};
|
|
13452
13663
|
}
|
|
13453
13664
|
render() {
|
|
13454
|
-
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)));
|
|
13455
13666
|
}
|
|
13456
13667
|
validateLabel(value) {
|
|
13457
13668
|
validateLabel(this, value);
|
|
@@ -13560,9 +13771,9 @@ class KolQuote {
|
|
|
13560
13771
|
}
|
|
13561
13772
|
render() {
|
|
13562
13773
|
const hasExpertSlot = showExpertSlot(this.state._quote);
|
|
13563
|
-
return (hAsync(Host, { key: '
|
|
13774
|
+
return (hAsync(Host, { key: '9b9860e687b3cec1527f758dcd362f8687a66f44', class: "kol-quote" }, hAsync("figure", { key: '1f3197be1bcbc754cd1ad3eb96186f6c7fd495f3', class: {
|
|
13564
13775
|
[this.state._variant]: true,
|
|
13565
|
-
} }, 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" })))))));
|
|
13566
13777
|
}
|
|
13567
13778
|
static get watchers() { return {
|
|
13568
13779
|
"_label": ["validateLabel"],
|
|
@@ -13693,16 +13904,16 @@ class KolSelect {
|
|
|
13693
13904
|
render() {
|
|
13694
13905
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
13695
13906
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
13696
|
-
return (hAsync(Host, { key: '
|
|
13907
|
+
return (hAsync(Host, { key: 'fd481e56e39c3c0a0b06bb9a70cf02b90fcd3a47', class: { 'kol-select': true, 'has-value': this.state._hasValue } }, hAsync(KolInputWcTag, { key: 'ff5035b9f766a02a92f7b338e9ea2e61db9eb316', class: {
|
|
13697
13908
|
'hide-label': !!this.state._hideLabel,
|
|
13698
13909
|
select: true,
|
|
13699
|
-
}, _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) => {
|
|
13700
13911
|
event.preventDefault();
|
|
13701
13912
|
propagateSubmitEventToForm({
|
|
13702
13913
|
form: this.host,
|
|
13703
13914
|
ref: this.ref,
|
|
13704
13915
|
});
|
|
13705
|
-
} }, 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) => {
|
|
13706
13917
|
const key = `-${index}`;
|
|
13707
13918
|
if (Array.isArray(option.options)) {
|
|
13708
13919
|
return this.renderOptgroup(option, key);
|
|
@@ -13912,7 +14123,7 @@ class KolSkipNav {
|
|
|
13912
14123
|
};
|
|
13913
14124
|
}
|
|
13914
14125
|
render() {
|
|
13915
|
-
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) => {
|
|
13916
14127
|
return (hAsync("li", { key: index }, hAsync(KolLinkWcTag, Object.assign({}, link))));
|
|
13917
14128
|
})))));
|
|
13918
14129
|
}
|
|
@@ -13968,7 +14179,7 @@ class KolSpan {
|
|
|
13968
14179
|
this._label = undefined;
|
|
13969
14180
|
}
|
|
13970
14181
|
render() {
|
|
13971
|
-
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" })));
|
|
13972
14183
|
}
|
|
13973
14184
|
static get style() { return {
|
|
13974
14185
|
default: KolSpanDefaultStyle0
|
|
@@ -22332,10 +22543,10 @@ class KolSpanWc {
|
|
|
22332
22543
|
render() {
|
|
22333
22544
|
var _a, _b, _c, _d, _e;
|
|
22334
22545
|
const hideExpertSlot = !showExpertSlot(this.state._label);
|
|
22335
|
-
return (hAsync(Host, { key: '
|
|
22546
|
+
return (hAsync(Host, { key: '0a15150866920a51833e591397e7ff1624c89fc7', class: {
|
|
22336
22547
|
'kol-span-wc': true,
|
|
22337
22548
|
'hide-label': !!this.state._hideLabel,
|
|
22338
|
-
} }, 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 }))));
|
|
22339
22550
|
}
|
|
22340
22551
|
validateAccessKey(value) {
|
|
22341
22552
|
validateAccessKey(this, value);
|
|
@@ -22413,7 +22624,7 @@ class KolSpin {
|
|
|
22413
22624
|
};
|
|
22414
22625
|
}
|
|
22415
22626
|
render() {
|
|
22416
|
-
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: {
|
|
22417
22628
|
spin: true,
|
|
22418
22629
|
[this.state._variant]: true,
|
|
22419
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" }))));
|
|
@@ -22519,12 +22730,12 @@ class KolSplitButton {
|
|
|
22519
22730
|
}
|
|
22520
22731
|
render() {
|
|
22521
22732
|
const i18nDropdownLabel = 'kol-split-button-dropdown-label';
|
|
22522
|
-
return (hAsync(Host, { key: '
|
|
22733
|
+
return (hAsync(Host, { key: 'a527306b3af651544bf317a61dee2398c1390034', class: "kol-split-button" }, hAsync(KolButtonWcTag, { key: '8b72ca7871e344472433e3e63cbcc3282ae653b7', class: {
|
|
22523
22734
|
'main-button': true,
|
|
22524
22735
|
button: true,
|
|
22525
22736
|
[this._variant]: this._variant !== 'custom',
|
|
22526
22737
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
22527
|
-
}, _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' })))));
|
|
22528
22739
|
}
|
|
22529
22740
|
static get style() { return {
|
|
22530
22741
|
default: KolSplitButtonDefaultStyle0
|
|
@@ -22570,7 +22781,7 @@ class KolSymbol {
|
|
|
22570
22781
|
};
|
|
22571
22782
|
}
|
|
22572
22783
|
render() {
|
|
22573
|
-
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)));
|
|
22574
22785
|
}
|
|
22575
22786
|
validateLabel(value) {
|
|
22576
22787
|
validateLabel(this, value, {
|
|
@@ -22619,7 +22830,7 @@ class KolTable {
|
|
|
22619
22830
|
this._on = undefined;
|
|
22620
22831
|
}
|
|
22621
22832
|
render() {
|
|
22622
|
-
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 }));
|
|
22623
22834
|
}
|
|
22624
22835
|
static get cmpMeta() { return {
|
|
22625
22836
|
"$flags$": 9,
|
|
@@ -23012,7 +23223,7 @@ class KolTableStateful {
|
|
|
23012
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) })))),
|
|
23013
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) })))),
|
|
23014
23225
|
};
|
|
23015
|
-
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: {
|
|
23016
23227
|
onSort: (_, payload) => {
|
|
23017
23228
|
this.handleSort(payload);
|
|
23018
23229
|
},
|
|
@@ -23075,7 +23286,7 @@ class KolTableStateless$1 {
|
|
|
23075
23286
|
this._selection = undefined;
|
|
23076
23287
|
}
|
|
23077
23288
|
render() {
|
|
23078
|
-
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 })));
|
|
23079
23290
|
}
|
|
23080
23291
|
static get style() { return {
|
|
23081
23292
|
default: KolTableStatelessDefaultStyle0
|
|
@@ -23454,9 +23665,9 @@ class KolTableStateless {
|
|
|
23454
23665
|
}
|
|
23455
23666
|
render() {
|
|
23456
23667
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
23457
|
-
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: {
|
|
23458
23669
|
minWidth: this.state._minWidth,
|
|
23459
|
-
} }, 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) => {
|
|
23460
23671
|
if (cell.asTd === true) {
|
|
23461
23672
|
return (hAsync("td", { key: `thead-${rowIndex}-${colIndex}-${cell.label}`, class: {
|
|
23462
23673
|
[cell.textAlign]: typeof cell.textAlign === 'string' && cell.textAlign.length > 0,
|
|
@@ -23472,7 +23683,7 @@ class KolTableStateless {
|
|
|
23472
23683
|
else {
|
|
23473
23684
|
return this.renderHeadingCell(cell, rowIndex, colIndex);
|
|
23474
23685
|
}
|
|
23475
|
-
})))))), hAsync("tbody", { key: '
|
|
23686
|
+
})))))), hAsync("tbody", { key: '87c7b41c699b02f2fe8802befd7f5d5013b2d4be' }, dataField.map(this.renderTableRow)), this.renderFoot()))));
|
|
23476
23687
|
}
|
|
23477
23688
|
get host() { return getElement(this); }
|
|
23478
23689
|
static get watchers() { return {
|
|
@@ -23592,7 +23803,7 @@ class KolTabs {
|
|
|
23592
23803
|
return this.selectNextNotDisabledTab(selected - 1, tabs, false, initialSelected || selected);
|
|
23593
23804
|
}
|
|
23594
23805
|
else {
|
|
23595
|
-
devHint(`[KolTabs]
|
|
23806
|
+
devHint(`[KolTabs] All tabs are disabled, and therefore no tab can be displayed.`);
|
|
23596
23807
|
}
|
|
23597
23808
|
}
|
|
23598
23809
|
}
|
|
@@ -23663,11 +23874,11 @@ class KolTabs {
|
|
|
23663
23874
|
} }))));
|
|
23664
23875
|
}
|
|
23665
23876
|
render() {
|
|
23666
|
-
return (hAsync(Host, { key: '
|
|
23877
|
+
return (hAsync(Host, { key: '1092ece9e1623621dcd253ff8d32eb1470471993', class: "kol-tabs" }, hAsync("div", { key: '42c75328542b14057998aaa615c692e15870e5ce', ref: (el) => {
|
|
23667
23878
|
this.tabPanelsElement = el;
|
|
23668
23879
|
}, class: {
|
|
23669
23880
|
[`tabs-align-${this.state._align}`]: true,
|
|
23670
|
-
} }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
23881
|
+
} }, this.renderButtonGroup(), hAsync("div", { key: '89eb64ffefa3234cb2ba93532a775cc2e1cf0968', class: "tabs-content", ref: this.catchTabPanelHost }))));
|
|
23671
23882
|
}
|
|
23672
23883
|
validateAlign(value) {
|
|
23673
23884
|
validateAlign(this, value);
|
|
@@ -23687,23 +23898,23 @@ class KolTabs {
|
|
|
23687
23898
|
this.onCreateLabel = value.onCreate.label;
|
|
23688
23899
|
}
|
|
23689
23900
|
else {
|
|
23690
|
-
Log.debug(`[KolTabs]
|
|
23901
|
+
Log.debug(`[KolTabs] The label text for New in {
|
|
23691
23902
|
onCreate: {
|
|
23692
23903
|
label: string (!),
|
|
23693
23904
|
callback: Function
|
|
23694
23905
|
}
|
|
23695
|
-
}
|
|
23906
|
+
} is not set correctly.`);
|
|
23696
23907
|
}
|
|
23697
23908
|
if (typeof value.onCreate.callback === 'function') {
|
|
23698
23909
|
callbacks.onCreate = value.onCreate.callback;
|
|
23699
23910
|
}
|
|
23700
23911
|
else {
|
|
23701
|
-
Log.debug(`[KolTabs]
|
|
23912
|
+
Log.debug(`[KolTabs] The onCreate callback function for New in {
|
|
23702
23913
|
onCreate: {
|
|
23703
23914
|
label: string,
|
|
23704
23915
|
callback: Function (!)
|
|
23705
23916
|
}
|
|
23706
|
-
}
|
|
23917
|
+
} is not set correctly.`);
|
|
23707
23918
|
}
|
|
23708
23919
|
}
|
|
23709
23920
|
else {
|
|
@@ -23872,7 +24083,7 @@ class KolTextarea {
|
|
|
23872
24083
|
render() {
|
|
23873
24084
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
23874
24085
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
23875
|
-
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: {
|
|
23876
24087
|
resize: this.state._resize,
|
|
23877
24088
|
}, value: this.state._value }))))));
|
|
23878
24089
|
}
|
|
@@ -24157,7 +24368,7 @@ class KolToastContainer {
|
|
|
24157
24368
|
}
|
|
24158
24369
|
}
|
|
24159
24370
|
render() {
|
|
24160
|
-
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: {
|
|
24161
24372
|
onClick: () => {
|
|
24162
24373
|
void this.closeAll();
|
|
24163
24374
|
},
|
|
@@ -24180,7 +24391,7 @@ class KolToastContainer {
|
|
|
24180
24391
|
}; }
|
|
24181
24392
|
}
|
|
24182
24393
|
|
|
24183
|
-
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}";
|
|
24184
24395
|
var KolToolbarDefaultStyle0 = defaultStyleCss$3;
|
|
24185
24396
|
|
|
24186
24397
|
const TOOLBAR_ITEM_TAG_NAME = 'kol-toolbar-item';
|
|
@@ -24209,7 +24420,7 @@ class KolToolbar {
|
|
|
24209
24420
|
this._items = undefined;
|
|
24210
24421
|
}
|
|
24211
24422
|
render() {
|
|
24212
|
-
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))));
|
|
24213
24424
|
}
|
|
24214
24425
|
validateLabel(value) {
|
|
24215
24426
|
validateLabel(this, value);
|
|
@@ -24410,7 +24621,7 @@ class KolTooltipWc {
|
|
|
24410
24621
|
this.showOrHideTooltip();
|
|
24411
24622
|
}
|
|
24412
24623
|
render() {
|
|
24413
|
-
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 })))));
|
|
24414
24625
|
}
|
|
24415
24626
|
validateAccessKey(value) {
|
|
24416
24627
|
validateAccessKey(this, value);
|
|
@@ -24480,7 +24691,7 @@ class KolTooltipWc {
|
|
|
24480
24691
|
}; }
|
|
24481
24692
|
}
|
|
24482
24693
|
|
|
24483
|
-
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}";
|
|
24484
24695
|
var KolTreeDefaultStyle0 = defaultStyleCss$2;
|
|
24485
24696
|
|
|
24486
24697
|
class KolTree {
|
|
@@ -24489,7 +24700,7 @@ class KolTree {
|
|
|
24489
24700
|
this._label = undefined;
|
|
24490
24701
|
}
|
|
24491
24702
|
render() {
|
|
24492
|
-
return (hAsync(Host, { key: '
|
|
24703
|
+
return (hAsync(Host, { key: 'dcecaa4251615a78aaa446af89fbdfdd81cc8029', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: 'ccf2f97fab1be1ea608ac67ed358bc8211ed390f', _label: this._label }, hAsync("slot", { key: '891e12670a8bcacc1c219544bbf915705ae6f963' }))));
|
|
24493
24704
|
}
|
|
24494
24705
|
static get style() { return {
|
|
24495
24706
|
default: KolTreeDefaultStyle0
|
|
@@ -24506,7 +24717,7 @@ class KolTree {
|
|
|
24506
24717
|
}; }
|
|
24507
24718
|
}
|
|
24508
24719
|
|
|
24509
|
-
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}";
|
|
24510
24721
|
var KolTreeItemDefaultStyle0 = defaultStyleCss$1;
|
|
24511
24722
|
|
|
24512
24723
|
class KolTreeItem {
|
|
@@ -24537,7 +24748,7 @@ class KolTreeItem {
|
|
|
24537
24748
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
24538
24749
|
}
|
|
24539
24750
|
render() {
|
|
24540
|
-
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' })));
|
|
24541
24752
|
}
|
|
24542
24753
|
static get style() { return {
|
|
24543
24754
|
default: KolTreeItemDefaultStyle0
|
|
@@ -24564,6 +24775,11 @@ class KolTreeItem {
|
|
|
24564
24775
|
class KolTreeItemWc {
|
|
24565
24776
|
constructor(hostRef) {
|
|
24566
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;
|
|
24567
24783
|
this.state = {
|
|
24568
24784
|
_active: false,
|
|
24569
24785
|
_hasChildren: false,
|
|
@@ -24577,11 +24793,17 @@ class KolTreeItemWc {
|
|
|
24577
24793
|
this._href = undefined;
|
|
24578
24794
|
}
|
|
24579
24795
|
render() {
|
|
24580
|
-
|
|
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: {
|
|
24581
24800
|
'tree-link': true,
|
|
24582
|
-
|
|
24583
|
-
|
|
24584
|
-
|
|
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' })))));
|
|
24585
24807
|
}
|
|
24586
24808
|
validateActive(value) {
|
|
24587
24809
|
validateActive(this, value || false);
|
|
@@ -24601,13 +24823,23 @@ class KolTreeItemWc {
|
|
|
24601
24823
|
this.validateOpen(this._open);
|
|
24602
24824
|
this.validateHref(this._href);
|
|
24603
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;
|
|
24604
24836
|
}
|
|
24605
24837
|
handleSlotchange() {
|
|
24606
24838
|
this.checkForChildren();
|
|
24607
24839
|
}
|
|
24608
24840
|
checkForChildren() {
|
|
24609
|
-
var _a;
|
|
24610
|
-
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) });
|
|
24611
24843
|
}
|
|
24612
24844
|
async focusLink() {
|
|
24613
24845
|
this.linkElement.focus();
|
|
@@ -24651,6 +24883,7 @@ class KolTreeItemWc {
|
|
|
24651
24883
|
"_label": [1],
|
|
24652
24884
|
"_open": [4],
|
|
24653
24885
|
"_href": [1],
|
|
24886
|
+
"level": [32],
|
|
24654
24887
|
"state": [32],
|
|
24655
24888
|
"focusLink": [64],
|
|
24656
24889
|
"expand": [64],
|
|
@@ -24663,8 +24896,6 @@ class KolTreeItemWc {
|
|
|
24663
24896
|
}; }
|
|
24664
24897
|
}
|
|
24665
24898
|
|
|
24666
|
-
const TREE_ITEM_TAG_NAME = 'kol-tree-item';
|
|
24667
|
-
|
|
24668
24899
|
class KolTreeWc {
|
|
24669
24900
|
constructor(hostRef) {
|
|
24670
24901
|
registerInstance(this, hostRef);
|
|
@@ -24677,10 +24908,10 @@ class KolTreeWc {
|
|
|
24677
24908
|
validateLabel(this, value);
|
|
24678
24909
|
}
|
|
24679
24910
|
render() {
|
|
24680
|
-
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' })))));
|
|
24681
24912
|
}
|
|
24682
24913
|
static isTreeItem(element) {
|
|
24683
|
-
return (element === null || element === void 0 ? void 0 : element.tagName) ===
|
|
24914
|
+
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
|
24684
24915
|
}
|
|
24685
24916
|
componentWillLoad() {
|
|
24686
24917
|
this.validateLabel(this._label);
|
|
@@ -24700,22 +24931,24 @@ class KolTreeWc {
|
|
|
24700
24931
|
this.handleTreeChange();
|
|
24701
24932
|
}
|
|
24702
24933
|
observeTopLevelItems() {
|
|
24703
|
-
|
|
24934
|
+
var _a;
|
|
24935
|
+
(_a = this.getTopLevelTreeItems()) === null || _a === void 0 ? void 0 : _a.forEach((treeItem) => {
|
|
24704
24936
|
var _a;
|
|
24705
24937
|
(_a = this.observer) === null || _a === void 0 ? void 0 : _a.observe(treeItem, { childList: true, subtree: true });
|
|
24706
24938
|
});
|
|
24707
24939
|
}
|
|
24708
24940
|
getTopLevelTreeItems() {
|
|
24709
|
-
var _a;
|
|
24710
|
-
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);
|
|
24711
24943
|
}
|
|
24712
24944
|
handleTreeChange() {
|
|
24713
24945
|
this.treeItemElements = this.getTreeItemElements();
|
|
24714
24946
|
void this.ensureActiveItemVisibility();
|
|
24715
24947
|
}
|
|
24716
24948
|
getTreeItemElements() {
|
|
24717
|
-
|
|
24718
|
-
|
|
24949
|
+
var _a;
|
|
24950
|
+
return (_a = this.getTopLevelTreeItems()) === null || _a === void 0 ? void 0 : _a.reduce((accumulator, currentValue) => {
|
|
24951
|
+
const children = currentValue.querySelectorAll(KolTreeItemTag);
|
|
24719
24952
|
return [...accumulator, currentValue, ...children];
|
|
24720
24953
|
}, []);
|
|
24721
24954
|
}
|
|
@@ -24740,7 +24973,7 @@ class KolTreeWc {
|
|
|
24740
24973
|
async handleKeyDown(event) {
|
|
24741
24974
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
24742
24975
|
const openItems = await this.getOpenTreeItemElements();
|
|
24743
|
-
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);
|
|
24744
24977
|
if (!openItems || !currentTreeItem) {
|
|
24745
24978
|
return;
|
|
24746
24979
|
}
|
|
@@ -24803,7 +25036,7 @@ class KolTreeWc {
|
|
|
24803
25036
|
break;
|
|
24804
25037
|
}
|
|
24805
25038
|
case '*': {
|
|
24806
|
-
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);
|
|
24807
25040
|
siblings === null || siblings === void 0 ? void 0 : siblings.forEach((element) => {
|
|
24808
25041
|
void element.expand();
|
|
24809
25042
|
});
|
|
@@ -24812,19 +25045,19 @@ class KolTreeWc {
|
|
|
24812
25045
|
}
|
|
24813
25046
|
}
|
|
24814
25047
|
async handleFocusOut(event) {
|
|
24815
|
-
if (event.relatedTarget && !event.relatedTarget.closest(
|
|
25048
|
+
if (event.relatedTarget && !event.relatedTarget.closest(KolTreeTag)) {
|
|
24816
25049
|
await this.ensureActiveItemVisibility();
|
|
24817
25050
|
}
|
|
24818
25051
|
}
|
|
24819
25052
|
async ensureActiveItemVisibility() {
|
|
24820
25053
|
const findActiveItem = () => {
|
|
24821
|
-
var _a;
|
|
24822
|
-
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 : [];
|
|
24823
25056
|
for (const rootNode of rootNodes) {
|
|
24824
25057
|
if (rootNode._active) {
|
|
24825
25058
|
return rootNode;
|
|
24826
25059
|
}
|
|
24827
|
-
const childMatch = rootNode.querySelector(
|
|
25060
|
+
const childMatch = rootNode.querySelector(`${KolTreeItemTag}[_active="true"]`);
|
|
24828
25061
|
if (childMatch && childMatch._active) {
|
|
24829
25062
|
return childMatch;
|
|
24830
25063
|
}
|
|
@@ -24870,7 +25103,7 @@ class KolVersion {
|
|
|
24870
25103
|
};
|
|
24871
25104
|
}
|
|
24872
25105
|
render() {
|
|
24873
|
-
return (hAsync(Host, { key: '
|
|
25106
|
+
return (hAsync(Host, { key: '51981d335a1e807d075a5547cb3f1e52b9ce80cc', class: "kol-version" }, hAsync(KolBadgeTag, { key: 'f2441045e818b8da85adad32303a1a9a289c26c3', _color: "#bec5c9", _icons: {
|
|
24874
25107
|
left: { icon: 'codicon codicon-versions', label: translate('kol-version') },
|
|
24875
25108
|
}, _label: this.state._label })));
|
|
24876
25109
|
}
|
|
@@ -24918,6 +25151,7 @@ registerComponents([
|
|
|
24918
25151
|
KolCard,
|
|
24919
25152
|
KolCombobox,
|
|
24920
25153
|
KolDetails,
|
|
25154
|
+
KolDrawer,
|
|
24921
25155
|
KolForm,
|
|
24922
25156
|
KolHeading,
|
|
24923
25157
|
KolHeadingWc,
|