@public-ui/hydrate 2.2.11-rc.1 → 2.2.11-rc.3
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 +42 -19
- package/dist/index.mjs +42 -19
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -12687,16 +12687,21 @@ const flip$1 = function (options) {
|
|
|
12687
12687
|
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
12688
12688
|
const nextPlacement = placements[nextIndex];
|
|
12689
12689
|
if (nextPlacement) {
|
|
12690
|
-
|
|
12691
|
-
|
|
12692
|
-
|
|
12693
|
-
|
|
12694
|
-
|
|
12695
|
-
|
|
12696
|
-
|
|
12697
|
-
|
|
12698
|
-
|
|
12699
|
-
|
|
12690
|
+
var _overflowsData$;
|
|
12691
|
+
const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
|
|
12692
|
+
const hasInitialMainAxisOverflow = ((_overflowsData$ = overflowsData[0]) == null ? void 0 : _overflowsData$.overflows[0]) > 0;
|
|
12693
|
+
if (!ignoreCrossAxisOverflow || hasInitialMainAxisOverflow) {
|
|
12694
|
+
// Try next placement and re-run the lifecycle.
|
|
12695
|
+
return {
|
|
12696
|
+
data: {
|
|
12697
|
+
index: nextIndex,
|
|
12698
|
+
overflows: overflowsData
|
|
12699
|
+
},
|
|
12700
|
+
reset: {
|
|
12701
|
+
placement: nextPlacement
|
|
12702
|
+
}
|
|
12703
|
+
};
|
|
12704
|
+
}
|
|
12700
12705
|
}
|
|
12701
12706
|
|
|
12702
12707
|
// First, find the candidates that fit on the mainAxis side of overflow,
|
|
@@ -13778,6 +13783,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
13778
13783
|
scrollTop: 0
|
|
13779
13784
|
};
|
|
13780
13785
|
const offsets = createCoords(0);
|
|
13786
|
+
|
|
13787
|
+
// If the <body> scrollbar appears on the left (e.g. RTL systems). Use
|
|
13788
|
+
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
13789
|
+
function setLeftRTLScrollbarOffset() {
|
|
13790
|
+
offsets.x = getWindowScrollBarX(documentElement);
|
|
13791
|
+
}
|
|
13781
13792
|
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
13782
13793
|
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
13783
13794
|
scroll = getNodeScroll(offsetParent);
|
|
@@ -13787,11 +13798,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
13787
13798
|
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
13788
13799
|
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
13789
13800
|
} else if (documentElement) {
|
|
13790
|
-
|
|
13791
|
-
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
13792
|
-
offsets.x = getWindowScrollBarX(documentElement);
|
|
13801
|
+
setLeftRTLScrollbarOffset();
|
|
13793
13802
|
}
|
|
13794
13803
|
}
|
|
13804
|
+
if (isFixed && !isOffsetParentAnElement && documentElement) {
|
|
13805
|
+
setLeftRTLScrollbarOffset();
|
|
13806
|
+
}
|
|
13795
13807
|
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
13796
13808
|
const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
|
|
13797
13809
|
const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
|
|
@@ -13968,7 +13980,7 @@ function observeMove(element, onMove) {
|
|
|
13968
13980
|
// Handle <iframe>s
|
|
13969
13981
|
root: root.ownerDocument
|
|
13970
13982
|
});
|
|
13971
|
-
} catch (
|
|
13983
|
+
} catch (_e) {
|
|
13972
13984
|
io = new IntersectionObserver(handleObserve, options);
|
|
13973
13985
|
}
|
|
13974
13986
|
io.observe(element);
|
|
@@ -14972,6 +14984,9 @@ class SingleSelectController extends InputIconController {
|
|
|
14972
14984
|
validateHideClearButton(value) {
|
|
14973
14985
|
watchBoolean(this.component, '_hideClearButton', value);
|
|
14974
14986
|
}
|
|
14987
|
+
validateRows(value) {
|
|
14988
|
+
watchNumber(this.component, '_rows', value);
|
|
14989
|
+
}
|
|
14975
14990
|
componentWillLoad() {
|
|
14976
14991
|
super.componentWillLoad();
|
|
14977
14992
|
this.validateOptions(this.component._options);
|
|
@@ -14979,10 +14994,11 @@ class SingleSelectController extends InputIconController {
|
|
|
14979
14994
|
this.validateValue(this.component._value);
|
|
14980
14995
|
this.validatePlaceholder(this.component._placeholder);
|
|
14981
14996
|
this.validateHideClearButton(this.component._hideClearButton);
|
|
14997
|
+
this.validateRows(this.component._rows);
|
|
14982
14998
|
}
|
|
14983
14999
|
}
|
|
14984
15000
|
|
|
14985
|
-
const defaultStyleCss$c = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n background-color: lightgray;\n color: black;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\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 /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\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 option,\n select,\n textarea {\n background-color: transparent;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\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-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n overflow: hidden;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n overflow: hidden;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n align-items: center;\n background-color: white;\n cursor: pointer;\n display: flex;\n }\n button:not([role=link]) {\n min-height: auto;\n }\n .input > .kol-icon {\n display: grid;\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .single-select {\n position: relative;\n }\n .single-select.disabled, .single-select.disabled * {\n cursor: not-allowed !important;\n }\n .single-select__group {\n display: inline-flex;\n align-items: center;\n }\n .single-select__input {\n flex-grow: 1;\n }\n .single-select__button {\n height: auto;\n width: var(--a11y-min-size);\n }\n .single-select__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(
|
|
15001
|
+
const defaultStyleCss$c = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n background-color: lightgray;\n color: black;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\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 /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\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 option,\n select,\n textarea {\n background-color: transparent;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\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-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n overflow: hidden;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n overflow: hidden;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n align-items: center;\n background-color: white;\n cursor: pointer;\n display: flex;\n }\n button:not([role=link]) {\n min-height: auto;\n }\n .input > .kol-icon {\n display: grid;\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .single-select {\n position: relative;\n }\n .single-select.disabled, .single-select.disabled * {\n cursor: not-allowed !important;\n }\n .single-select__group {\n display: inline-flex;\n align-items: center;\n }\n .single-select__input {\n flex-grow: 1;\n }\n .single-select__button {\n height: auto;\n width: var(--a11y-min-size);\n }\n .single-select__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((40rem / var(--kolibri-root-font-size, 16)) * var(--visible-options, 5) + (2rem / var(--kolibri-root-font-size, 16))) !important;\n }\n .single-select__item.highlighted {\n background-color: #f0f0f0;\n }\n .single-select__listbox--cursor-hidden .single-select__item {\n cursor: none !important;\n }\n .single-select__no-results-message {\n cursor: default;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
14986
15002
|
var KolSingleSelectDefaultStyle0 = defaultStyleCss$c;
|
|
14987
15003
|
|
|
14988
15004
|
class KolSingleSelect {
|
|
@@ -15078,19 +15094,20 @@ class KolSingleSelect {
|
|
|
15078
15094
|
}
|
|
15079
15095
|
}
|
|
15080
15096
|
render() {
|
|
15097
|
+
var _a;
|
|
15081
15098
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
15082
15099
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
15083
|
-
return (hAsync(Host, { key: '
|
|
15100
|
+
return (hAsync(Host, { key: 'cc3133a2f097fab6e9c082d6f91d8fa1e74c21bf', class: "kol-single-select" }, hAsync("div", { key: '55ff97af5cbbe984e8400e844b6e5097b9f5235b', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputTag, { key: 'e879c998480f468b8b35c345085518665665d3c4', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _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, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, role: `presentation` }, hAsync("span", { key: 'd54ea356639f88482b0552b0358a81acb05039c5', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '63be6784d1c397d03d9587cd6d47b485333b171f', slot: "input" }, hAsync("div", { key: '5af3aef92dbf40921e10717bcf33bf6a76a65695', class: "single-select__group" }, hAsync("input", Object.assign({ key: 'e6c9f147ed7d121354832108cedc992c9cdec92a', ref: this.catchRef, class: "single-select__input", "data-testid": "single-select-input", type: "text", "aria-autocomplete": "both", "aria-controls": "listbox", value: this._inputValue, 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-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onClick: this.toggleListbox.bind(this), onFocus: (event) => {
|
|
15084
15101
|
this.controller.onFacade.onFocus(event);
|
|
15085
15102
|
this.inputHasFocus = true;
|
|
15086
15103
|
}, onBlur: (event) => {
|
|
15087
15104
|
this.controller.onFacade.onBlur(event);
|
|
15088
15105
|
this.inputHasFocus = false;
|
|
15089
|
-
}, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: '
|
|
15106
|
+
}, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: 'f566da1880518328039aeafc028be7b06db6c686', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
|
|
15090
15107
|
var _a;
|
|
15091
15108
|
this.clearSelection();
|
|
15092
15109
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
15093
|
-
}, class: "single-select__delete" })), hAsync("button", { key: '
|
|
15110
|
+
}, class: "single-select__delete" })), hAsync("button", { key: 'ab50e96d8427167d4e0c9c8a636c5c8b3cd352cc', tabindex: "-1", class: "single-select__button", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '42a1c2428ef79014282cc40fd937bd22a482a052', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: 'dce5f46ed13d22f036c53ae5c0d73278d59ba91f', role: "listbox", class: clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden'), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
|
|
15094
15111
|
if (el)
|
|
15095
15112
|
this.refOptions[index] = el;
|
|
15096
15113
|
}, tabIndex: -1, role: "option", "aria-selected": this._value === option.value ? 'true' : undefined, onClick: (event) => {
|
|
@@ -15272,6 +15289,7 @@ class KolSingleSelect {
|
|
|
15272
15289
|
this._touched = false;
|
|
15273
15290
|
this._value = undefined;
|
|
15274
15291
|
this._hideClearButton = false;
|
|
15292
|
+
this._rows = undefined;
|
|
15275
15293
|
this.state = {
|
|
15276
15294
|
_hideError: false,
|
|
15277
15295
|
_id: `id-${nonce()}`,
|
|
@@ -15355,6 +15373,9 @@ class KolSingleSelect {
|
|
|
15355
15373
|
validateHideClearButton(value) {
|
|
15356
15374
|
this.controller.validateHideClearButton(value);
|
|
15357
15375
|
}
|
|
15376
|
+
validateRows(value) {
|
|
15377
|
+
this.controller.validateRows(value);
|
|
15378
|
+
}
|
|
15358
15379
|
handleMouseEvent() {
|
|
15359
15380
|
this.blockSuggestionMouseOver = false;
|
|
15360
15381
|
}
|
|
@@ -15405,7 +15426,8 @@ class KolSingleSelect {
|
|
|
15405
15426
|
"_tabIndex": ["validateTabIndex"],
|
|
15406
15427
|
"_touched": ["validateTouched"],
|
|
15407
15428
|
"_value": ["validateValue"],
|
|
15408
|
-
"_hideClearButton ": ["validateHideClearButton"]
|
|
15429
|
+
"_hideClearButton ": ["validateHideClearButton"],
|
|
15430
|
+
"_rows": ["validateRows"]
|
|
15409
15431
|
}; }
|
|
15410
15432
|
static get style() { return {
|
|
15411
15433
|
default: KolSingleSelectDefaultStyle0
|
|
@@ -15436,6 +15458,7 @@ class KolSingleSelect {
|
|
|
15436
15458
|
"_touched": [1540],
|
|
15437
15459
|
"_value": [1544],
|
|
15438
15460
|
"_hideClearButton": [4, "_hide-clear-button"],
|
|
15461
|
+
"_rows": [2],
|
|
15439
15462
|
"_isOpen": [32],
|
|
15440
15463
|
"_hasOpened": [32],
|
|
15441
15464
|
"_filteredOptions": [32],
|
package/dist/index.mjs
CHANGED
|
@@ -12683,16 +12683,21 @@ const flip$1 = function (options) {
|
|
|
12683
12683
|
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
12684
12684
|
const nextPlacement = placements[nextIndex];
|
|
12685
12685
|
if (nextPlacement) {
|
|
12686
|
-
|
|
12687
|
-
|
|
12688
|
-
|
|
12689
|
-
|
|
12690
|
-
|
|
12691
|
-
|
|
12692
|
-
|
|
12693
|
-
|
|
12694
|
-
|
|
12695
|
-
|
|
12686
|
+
var _overflowsData$;
|
|
12687
|
+
const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
|
|
12688
|
+
const hasInitialMainAxisOverflow = ((_overflowsData$ = overflowsData[0]) == null ? void 0 : _overflowsData$.overflows[0]) > 0;
|
|
12689
|
+
if (!ignoreCrossAxisOverflow || hasInitialMainAxisOverflow) {
|
|
12690
|
+
// Try next placement and re-run the lifecycle.
|
|
12691
|
+
return {
|
|
12692
|
+
data: {
|
|
12693
|
+
index: nextIndex,
|
|
12694
|
+
overflows: overflowsData
|
|
12695
|
+
},
|
|
12696
|
+
reset: {
|
|
12697
|
+
placement: nextPlacement
|
|
12698
|
+
}
|
|
12699
|
+
};
|
|
12700
|
+
}
|
|
12696
12701
|
}
|
|
12697
12702
|
|
|
12698
12703
|
// First, find the candidates that fit on the mainAxis side of overflow,
|
|
@@ -13774,6 +13779,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
13774
13779
|
scrollTop: 0
|
|
13775
13780
|
};
|
|
13776
13781
|
const offsets = createCoords(0);
|
|
13782
|
+
|
|
13783
|
+
// If the <body> scrollbar appears on the left (e.g. RTL systems). Use
|
|
13784
|
+
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
13785
|
+
function setLeftRTLScrollbarOffset() {
|
|
13786
|
+
offsets.x = getWindowScrollBarX(documentElement);
|
|
13787
|
+
}
|
|
13777
13788
|
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
13778
13789
|
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
13779
13790
|
scroll = getNodeScroll(offsetParent);
|
|
@@ -13783,11 +13794,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
13783
13794
|
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
13784
13795
|
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
13785
13796
|
} else if (documentElement) {
|
|
13786
|
-
|
|
13787
|
-
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
13788
|
-
offsets.x = getWindowScrollBarX(documentElement);
|
|
13797
|
+
setLeftRTLScrollbarOffset();
|
|
13789
13798
|
}
|
|
13790
13799
|
}
|
|
13800
|
+
if (isFixed && !isOffsetParentAnElement && documentElement) {
|
|
13801
|
+
setLeftRTLScrollbarOffset();
|
|
13802
|
+
}
|
|
13791
13803
|
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
13792
13804
|
const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
|
|
13793
13805
|
const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
|
|
@@ -13964,7 +13976,7 @@ function observeMove(element, onMove) {
|
|
|
13964
13976
|
// Handle <iframe>s
|
|
13965
13977
|
root: root.ownerDocument
|
|
13966
13978
|
});
|
|
13967
|
-
} catch (
|
|
13979
|
+
} catch (_e) {
|
|
13968
13980
|
io = new IntersectionObserver(handleObserve, options);
|
|
13969
13981
|
}
|
|
13970
13982
|
io.observe(element);
|
|
@@ -14968,6 +14980,9 @@ class SingleSelectController extends InputIconController {
|
|
|
14968
14980
|
validateHideClearButton(value) {
|
|
14969
14981
|
watchBoolean(this.component, '_hideClearButton', value);
|
|
14970
14982
|
}
|
|
14983
|
+
validateRows(value) {
|
|
14984
|
+
watchNumber(this.component, '_rows', value);
|
|
14985
|
+
}
|
|
14971
14986
|
componentWillLoad() {
|
|
14972
14987
|
super.componentWillLoad();
|
|
14973
14988
|
this.validateOptions(this.component._options);
|
|
@@ -14975,10 +14990,11 @@ class SingleSelectController extends InputIconController {
|
|
|
14975
14990
|
this.validateValue(this.component._value);
|
|
14976
14991
|
this.validatePlaceholder(this.component._placeholder);
|
|
14977
14992
|
this.validateHideClearButton(this.component._hideClearButton);
|
|
14993
|
+
this.validateRows(this.component._rows);
|
|
14978
14994
|
}
|
|
14979
14995
|
}
|
|
14980
14996
|
|
|
14981
|
-
const defaultStyleCss$c = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n background-color: lightgray;\n color: black;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\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 /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\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 option,\n select,\n textarea {\n background-color: transparent;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\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-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n overflow: hidden;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n overflow: hidden;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n align-items: center;\n background-color: white;\n cursor: pointer;\n display: flex;\n }\n button:not([role=link]) {\n min-height: auto;\n }\n .input > .kol-icon {\n display: grid;\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .single-select {\n position: relative;\n }\n .single-select.disabled, .single-select.disabled * {\n cursor: not-allowed !important;\n }\n .single-select__group {\n display: inline-flex;\n align-items: center;\n }\n .single-select__input {\n flex-grow: 1;\n }\n .single-select__button {\n height: auto;\n width: var(--a11y-min-size);\n }\n .single-select__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(
|
|
14997
|
+
const defaultStyleCss$c = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n .badge-text-hint {\n background-color: lightgray;\n color: black;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\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 /* input[type='checkbox'], */\n /* input[type='radio'], */\n /* input[type='range'], */\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 option,\n select,\n textarea {\n background-color: transparent;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n /* needed hack for vertical alignment */\n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n /* needed hack for vertical alignment */\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-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n overflow: hidden;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n overflow: hidden;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n align-items: center;\n background-color: white;\n cursor: pointer;\n display: flex;\n }\n button:not([role=link]) {\n min-height: auto;\n }\n .input > .kol-icon {\n display: grid;\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .single-select {\n position: relative;\n }\n .single-select.disabled, .single-select.disabled * {\n cursor: not-allowed !important;\n }\n .single-select__group {\n display: inline-flex;\n align-items: center;\n }\n .single-select__input {\n flex-grow: 1;\n }\n .single-select__button {\n height: auto;\n width: var(--a11y-min-size);\n }\n .single-select__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((40rem / var(--kolibri-root-font-size, 16)) * var(--visible-options, 5) + (2rem / var(--kolibri-root-font-size, 16))) !important;\n }\n .single-select__item.highlighted {\n background-color: #f0f0f0;\n }\n .single-select__listbox--cursor-hidden .single-select__item {\n cursor: none !important;\n }\n .single-select__no-results-message {\n cursor: default;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
14982
14998
|
var KolSingleSelectDefaultStyle0 = defaultStyleCss$c;
|
|
14983
14999
|
|
|
14984
15000
|
class KolSingleSelect {
|
|
@@ -15074,19 +15090,20 @@ class KolSingleSelect {
|
|
|
15074
15090
|
}
|
|
15075
15091
|
}
|
|
15076
15092
|
render() {
|
|
15093
|
+
var _a;
|
|
15077
15094
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
15078
15095
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
15079
|
-
return (hAsync(Host, { key: '
|
|
15096
|
+
return (hAsync(Host, { key: 'cc3133a2f097fab6e9c082d6f91d8fa1e74c21bf', class: "kol-single-select" }, hAsync("div", { key: '55ff97af5cbbe984e8400e844b6e5097b9f5235b', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputTag, { key: 'e879c998480f468b8b35c345085518665665d3c4', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _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, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, role: `presentation` }, hAsync("span", { key: 'd54ea356639f88482b0552b0358a81acb05039c5', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "badge-text-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '63be6784d1c397d03d9587cd6d47b485333b171f', slot: "input" }, hAsync("div", { key: '5af3aef92dbf40921e10717bcf33bf6a76a65695', class: "single-select__group" }, hAsync("input", Object.assign({ key: 'e6c9f147ed7d121354832108cedc992c9cdec92a', ref: this.catchRef, class: "single-select__input", "data-testid": "single-select-input", type: "text", "aria-autocomplete": "both", "aria-controls": "listbox", value: this._inputValue, 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-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onClick: this.toggleListbox.bind(this), onFocus: (event) => {
|
|
15080
15097
|
this.controller.onFacade.onFocus(event);
|
|
15081
15098
|
this.inputHasFocus = true;
|
|
15082
15099
|
}, onBlur: (event) => {
|
|
15083
15100
|
this.controller.onFacade.onBlur(event);
|
|
15084
15101
|
this.inputHasFocus = false;
|
|
15085
|
-
}, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: '
|
|
15102
|
+
}, placeholder: this.state._placeholder })), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: 'f566da1880518328039aeafc028be7b06db6c686', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
|
|
15086
15103
|
var _a;
|
|
15087
15104
|
this.clearSelection();
|
|
15088
15105
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
15089
|
-
}, class: "single-select__delete" })), hAsync("button", { key: '
|
|
15106
|
+
}, class: "single-select__delete" })), hAsync("button", { key: 'ab50e96d8427167d4e0c9c8a636c5c8b3cd352cc', tabindex: "-1", class: "single-select__button", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '42a1c2428ef79014282cc40fd937bd22a482a052', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: 'dce5f46ed13d22f036c53ae5c0d73278d59ba91f', role: "listbox", class: clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden'), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
|
|
15090
15107
|
if (el)
|
|
15091
15108
|
this.refOptions[index] = el;
|
|
15092
15109
|
}, tabIndex: -1, role: "option", "aria-selected": this._value === option.value ? 'true' : undefined, onClick: (event) => {
|
|
@@ -15268,6 +15285,7 @@ class KolSingleSelect {
|
|
|
15268
15285
|
this._touched = false;
|
|
15269
15286
|
this._value = undefined;
|
|
15270
15287
|
this._hideClearButton = false;
|
|
15288
|
+
this._rows = undefined;
|
|
15271
15289
|
this.state = {
|
|
15272
15290
|
_hideError: false,
|
|
15273
15291
|
_id: `id-${nonce()}`,
|
|
@@ -15351,6 +15369,9 @@ class KolSingleSelect {
|
|
|
15351
15369
|
validateHideClearButton(value) {
|
|
15352
15370
|
this.controller.validateHideClearButton(value);
|
|
15353
15371
|
}
|
|
15372
|
+
validateRows(value) {
|
|
15373
|
+
this.controller.validateRows(value);
|
|
15374
|
+
}
|
|
15354
15375
|
handleMouseEvent() {
|
|
15355
15376
|
this.blockSuggestionMouseOver = false;
|
|
15356
15377
|
}
|
|
@@ -15401,7 +15422,8 @@ class KolSingleSelect {
|
|
|
15401
15422
|
"_tabIndex": ["validateTabIndex"],
|
|
15402
15423
|
"_touched": ["validateTouched"],
|
|
15403
15424
|
"_value": ["validateValue"],
|
|
15404
|
-
"_hideClearButton ": ["validateHideClearButton"]
|
|
15425
|
+
"_hideClearButton ": ["validateHideClearButton"],
|
|
15426
|
+
"_rows": ["validateRows"]
|
|
15405
15427
|
}; }
|
|
15406
15428
|
static get style() { return {
|
|
15407
15429
|
default: KolSingleSelectDefaultStyle0
|
|
@@ -15432,6 +15454,7 @@ class KolSingleSelect {
|
|
|
15432
15454
|
"_touched": [1540],
|
|
15433
15455
|
"_value": [1544],
|
|
15434
15456
|
"_hideClearButton": [4, "_hide-clear-button"],
|
|
15457
|
+
"_rows": [2],
|
|
15435
15458
|
"_isOpen": [32],
|
|
15436
15459
|
"_hasOpened": [32],
|
|
15437
15460
|
"_filteredOptions": [32],
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/hydrate",
|
|
3
|
-
"version": "2.2.11-rc.
|
|
3
|
+
"version": "2.2.11-rc.3",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"homepage": "https://public-ui.github.io",
|
|
6
6
|
"repository": {
|
|
@@ -46,10 +46,10 @@
|
|
|
46
46
|
],
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"rimraf": "6.0.1",
|
|
49
|
-
"@public-ui/components": "2.2.11-rc.
|
|
49
|
+
"@public-ui/components": "2.2.11-rc.3"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
|
-
"@public-ui/components": "2.2.11-rc.
|
|
52
|
+
"@public-ui/components": "2.2.11-rc.3"
|
|
53
53
|
},
|
|
54
54
|
"sideEffects": false,
|
|
55
55
|
"type": "commonjs",
|