@public-ui/hydrate 3.0.0-rc.10 → 3.0.0-rc.11

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.
Files changed (3) hide show
  1. package/dist/index.js +17 -6
  2. package/dist/index.mjs +17 -6
  3. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -15333,8 +15333,8 @@ const CustomSuggestionsOptionFc = ({ index, ref, selected, onClick, onMouseOver,
15333
15333
  };
15334
15334
  var CustomSuggestionsOptionFc$1 = CustomSuggestionsOptionFc;
15335
15335
 
15336
- const CustomSuggestionsOptionsGroupFc = ({ blockSuggestionMouseOver, onKeyDown }, children) => {
15337
- return (hAsync("ul", { role: "listbox", class: clsx('kol-custom-suggestions-options-group', {
15336
+ const CustomSuggestionsOptionsGroupFc = ({ blockSuggestionMouseOver, onKeyDown, style }, children) => {
15337
+ return (hAsync("ul", { role: "listbox", style: style, class: clsx('kol-custom-suggestions-options-group', {
15338
15338
  'kol-custom-suggestions-options-group--cursor-hidden': blockSuggestionMouseOver,
15339
15339
  }), onKeyDown: onKeyDown }, children));
15340
15340
  };
@@ -23592,6 +23592,9 @@ class SingleSelectController extends InputIconController {
23592
23592
  validateHideClearButton(value) {
23593
23593
  watchBoolean(this.component, '_hideClearButton', value);
23594
23594
  }
23595
+ validateRows(value) {
23596
+ watchNumber(this.component, '_rows', value);
23597
+ }
23595
23598
  componentWillLoad() {
23596
23599
  super.componentWillLoad();
23597
23600
  this.validateOptions(this.component._options);
@@ -23599,10 +23602,11 @@ class SingleSelectController extends InputIconController {
23599
23602
  this.validateValue(this.component._value);
23600
23603
  this.validatePlaceholder(this.component._placeholder);
23601
23604
  this.validateHideClearButton(this.component._hideClearButton);
23605
+ this.validateRows(this.component._rows);
23602
23606
  }
23603
23607
  }
23604
23608
 
23605
- const defaultStyleCss$c = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%;\n /* 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 .badge-text-hint {\n background-color: lightgray;\n color: black;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-custom-suggestions-option {\n cursor: pointer;\n white-space: normal;\n overflow-wrap: break-word;\n word-wrap: break-word;\n line-height: 1.5;\n box-sizing: border-box;\n }\n .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n cursor: none !important;\n }\n}\n@layer kol-component {\n .kol-custom-suggestions-options-group {\n display: block;\n position: absolute;\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 2;\n background-color: white;\n max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-custom-suggestions-toggle {\n align-items: center;\n display: flex;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-custom-suggestions-toggle:not(:disabled) {\n cursor: pointer;\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n content: \"*\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .kol-input-container {\n align-items: center;\n background-color: white;\n display: grid;\n grid-template-columns: 1fr;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n}\n@layer kol-component {\n .kol-input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input:focus {\n outline: none;\n }\n}\n@layer kol-component {\n .kol-single-select__delete {\n cursor: pointer;\n }\n .kol-single-select__delete--disabled {\n cursor: not-allowed;\n }\n .kol-single-select__no-results-message {\n cursor: default;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n }\n}";
23609
+ const defaultStyleCss$c = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%;\n /* 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 .badge-text-hint {\n background-color: lightgray;\n color: black;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-custom-suggestions-option {\n cursor: pointer;\n white-space: normal;\n overflow-wrap: break-word;\n word-wrap: break-word;\n line-height: 1.5;\n box-sizing: border-box;\n }\n .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n cursor: none !important;\n }\n}\n@layer kol-component {\n .kol-custom-suggestions-options-group {\n display: block;\n position: absolute;\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 2;\n background-color: white;\n max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-custom-suggestions-toggle {\n align-items: center;\n display: flex;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-custom-suggestions-toggle:not(:disabled) {\n cursor: pointer;\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n content: \"*\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .kol-input-container {\n align-items: center;\n background-color: white;\n display: grid;\n grid-template-columns: 1fr;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n}\n@layer kol-component {\n .kol-input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input:focus {\n outline: none;\n }\n}\n@layer kol-component {\n .kol-single-select__delete {\n cursor: pointer;\n }\n .kol-single-select__delete--disabled {\n cursor: not-allowed;\n }\n .kol-single-select__no-results-message {\n cursor: default;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n }\n .kol-single-select .kol-custom-suggestions-options-group {\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}";
23606
23610
  var KolSingleSelectDefaultStyle0 = defaultStyleCss$c;
23607
23611
 
23608
23612
  class KolSingleSelect {
@@ -23717,13 +23721,14 @@ class KolSingleSelect {
23717
23721
  } });
23718
23722
  }
23719
23723
  render() {
23720
- return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'ec3747f22ac846d38911cd95c7459ea384ae985a' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'e2d7f951550e3bd3eaf4ef31088df4a570c7d852', state: this.state }, hAsync("div", { key: '80e7bbd2c47355eddb11aab6c9682d1df2e386b3', class: "kol-single-select__group" }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '60fc8dff63875f302faacdee8e7b802629e7106f' }, this.getInputProps())), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: '734bf8b1b2249aa1bd17c77576dc2897ef7f6666', _icons: "codicon codicon-close", "data-testid": "single-select-delete", _label: translate('kol-delete-selection'), onClick: () => {
23724
+ var _a;
23725
+ return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'cdb72de6f61b1615cd32870580153774691c6b43' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '2cefeed94b8376156b6ad75e777319ca2db9c656', state: this.state }, hAsync("div", { key: 'b4ef7f976dc946bc1f38bc41d5a942b2ea4ced93', class: "kol-single-select__group" }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '492a3beb4fca89b1d1303caf71df136515c5fba0' }, this.getInputProps())), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: 'e6af67ff63addc06e3a2b83d5b477f333b5a68f2', _icons: "codicon codicon-close", "data-testid": "single-select-delete", _label: translate('kol-delete-selection'), onClick: () => {
23721
23726
  var _a;
23722
23727
  this.clearSelection();
23723
23728
  (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
23724
23729
  }, class: clsx('kol-single-select__delete', {
23725
23730
  'kol-single-select__delete--disabled': this.state._disabled,
23726
- }) })), hAsync(CustomSuggestionsToggleFc$1, { key: '363d2176f5be007551ebf1575236f784c8fae14e', onClick: this.toggleListbox.bind(this), disabled: this.state._disabled })), this._isOpen && !(this.state._disabled === true) && (hAsync(CustomSuggestionsOptionsGroupFc$1, { key: '572a0bffa400ba25653a84db7172c0c9697902a9', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc$1, { index: index, option: option.label, ref: (el) => {
23731
+ }) })), hAsync(CustomSuggestionsToggleFc$1, { key: 'd6cb818ee47ff1b65c3ca2b88a941d27a89cdf2e', onClick: this.toggleListbox.bind(this), disabled: this.state._disabled })), this._isOpen && !(this.state._disabled === true) && (hAsync(CustomSuggestionsOptionsGroupFc$1, { key: '06327f8bcc101cc0a836d293300a506bd99ecd1b', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` } }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc$1, { index: index, option: option.label, ref: (el) => {
23727
23732
  if (el)
23728
23733
  this.refOptions[index] = el;
23729
23734
  }, selected: this._value === option.value, onClick: (event) => {
@@ -23898,6 +23903,7 @@ class KolSingleSelect {
23898
23903
  this._touched = false;
23899
23904
  this._value = undefined;
23900
23905
  this._hideClearButton = false;
23906
+ this._rows = undefined;
23901
23907
  this.state = {
23902
23908
  _hideMsg: false,
23903
23909
  _id: `id-${nonce()}`,
@@ -23972,6 +23978,9 @@ class KolSingleSelect {
23972
23978
  validateHideClearButton(value) {
23973
23979
  this.controller.validateHideClearButton(value);
23974
23980
  }
23981
+ validateRows(value) {
23982
+ this.controller.validateRows(value);
23983
+ }
23975
23984
  handleMouseEvent() {
23976
23985
  this.blockSuggestionMouseOver = false;
23977
23986
  }
@@ -24023,7 +24032,8 @@ class KolSingleSelect {
24023
24032
  "_syncValueBySelector": ["validateSyncValueBySelector"],
24024
24033
  "_touched": ["validateTouched"],
24025
24034
  "_value": ["validateValue"],
24026
- "_hideClearButton ": ["validateHideClearButton"]
24035
+ "_hideClearButton ": ["validateHideClearButton"],
24036
+ "_rows": ["validateRows"]
24027
24037
  }; }
24028
24038
  static get style() { return {
24029
24039
  default: KolSingleSelectDefaultStyle0
@@ -24052,6 +24062,7 @@ class KolSingleSelect {
24052
24062
  "_touched": [1540],
24053
24063
  "_value": [1544],
24054
24064
  "_hideClearButton": [4, "_hide-clear-button"],
24065
+ "_rows": [2],
24055
24066
  "_isOpen": [32],
24056
24067
  "_filteredOptions": [32],
24057
24068
  "_inputValue": [32],
package/dist/index.mjs CHANGED
@@ -15329,8 +15329,8 @@ const CustomSuggestionsOptionFc = ({ index, ref, selected, onClick, onMouseOver,
15329
15329
  };
15330
15330
  var CustomSuggestionsOptionFc$1 = CustomSuggestionsOptionFc;
15331
15331
 
15332
- const CustomSuggestionsOptionsGroupFc = ({ blockSuggestionMouseOver, onKeyDown }, children) => {
15333
- return (hAsync("ul", { role: "listbox", class: clsx('kol-custom-suggestions-options-group', {
15332
+ const CustomSuggestionsOptionsGroupFc = ({ blockSuggestionMouseOver, onKeyDown, style }, children) => {
15333
+ return (hAsync("ul", { role: "listbox", style: style, class: clsx('kol-custom-suggestions-options-group', {
15334
15334
  'kol-custom-suggestions-options-group--cursor-hidden': blockSuggestionMouseOver,
15335
15335
  }), onKeyDown: onKeyDown }, children));
15336
15336
  };
@@ -23588,6 +23588,9 @@ class SingleSelectController extends InputIconController {
23588
23588
  validateHideClearButton(value) {
23589
23589
  watchBoolean(this.component, '_hideClearButton', value);
23590
23590
  }
23591
+ validateRows(value) {
23592
+ watchNumber(this.component, '_rows', value);
23593
+ }
23591
23594
  componentWillLoad() {
23592
23595
  super.componentWillLoad();
23593
23596
  this.validateOptions(this.component._options);
@@ -23595,10 +23598,11 @@ class SingleSelectController extends InputIconController {
23595
23598
  this.validateValue(this.component._value);
23596
23599
  this.validatePlaceholder(this.component._placeholder);
23597
23600
  this.validateHideClearButton(this.component._hideClearButton);
23601
+ this.validateRows(this.component._rows);
23598
23602
  }
23599
23603
  }
23600
23604
 
23601
- const defaultStyleCss$c = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%;\n /* 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 .badge-text-hint {\n background-color: lightgray;\n color: black;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-custom-suggestions-option {\n cursor: pointer;\n white-space: normal;\n overflow-wrap: break-word;\n word-wrap: break-word;\n line-height: 1.5;\n box-sizing: border-box;\n }\n .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n cursor: none !important;\n }\n}\n@layer kol-component {\n .kol-custom-suggestions-options-group {\n display: block;\n position: absolute;\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 2;\n background-color: white;\n max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-custom-suggestions-toggle {\n align-items: center;\n display: flex;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-custom-suggestions-toggle:not(:disabled) {\n cursor: pointer;\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n content: \"*\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .kol-input-container {\n align-items: center;\n background-color: white;\n display: grid;\n grid-template-columns: 1fr;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n}\n@layer kol-component {\n .kol-input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input:focus {\n outline: none;\n }\n}\n@layer kol-component {\n .kol-single-select__delete {\n cursor: pointer;\n }\n .kol-single-select__delete--disabled {\n cursor: not-allowed;\n }\n .kol-single-select__no-results-message {\n cursor: default;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n }\n}";
23605
+ const defaultStyleCss$c = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%;\n /* 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 .badge-text-hint {\n background-color: lightgray;\n color: black;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-alert {\n display: grid;\n }\n .kol-alert__container {\n place-items: center;\n display: flex;\n }\n .kol-alert__container-content {\n flex-grow: 1;\n }\n .kol-alert__close-button {\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-custom-suggestions-option {\n cursor: pointer;\n white-space: normal;\n overflow-wrap: break-word;\n word-wrap: break-word;\n line-height: 1.5;\n box-sizing: border-box;\n }\n .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n cursor: none !important;\n }\n}\n@layer kol-component {\n .kol-custom-suggestions-options-group {\n display: block;\n position: absolute;\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 2;\n background-color: white;\n max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n }\n}\n@layer kol-component {\n .kol-custom-suggestions-toggle {\n align-items: center;\n display: flex;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .kol-custom-suggestions-toggle:not(:disabled) {\n cursor: pointer;\n }\n}\n@layer kol-component {\n .kol-form-field {\n display: grid;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n cursor: pointer;\n }\n .kol-form-field--disabled .kol-form-field__label {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__label-text::after {\n content: \"*\";\n }\n .kol-form-field--disabled .kol-form-field__hint {\n opacity: 0.5;\n }\n .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .kol-input-container {\n align-items: center;\n background-color: white;\n display: grid;\n grid-template-columns: 1fr;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start) {\n grid-template-columns: auto 1fr;\n }\n .kol-input-container:has(> .kol-input-container__adornment--end) {\n grid-template-columns: 1fr auto;\n }\n .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n grid-template-columns: auto 1fr auto;\n }\n .kol-input-container__container {\n position: relative;\n }\n .kol-input-container__adornment {\n display: flex;\n align-items: center;\n }\n .kol-input-container__adornment .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n}\n@layer kol-component {\n .kol-input {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n min-width: var(--a11y-min-size);\n width: 100%;\n }\n .kol-input:focus {\n outline: none;\n }\n}\n@layer kol-component {\n .kol-single-select__delete {\n cursor: pointer;\n }\n .kol-single-select__delete--disabled {\n cursor: not-allowed;\n }\n .kol-single-select__no-results-message {\n cursor: default;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n }\n .kol-single-select .kol-custom-suggestions-options-group {\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}";
23602
23606
  var KolSingleSelectDefaultStyle0 = defaultStyleCss$c;
23603
23607
 
23604
23608
  class KolSingleSelect {
@@ -23713,13 +23717,14 @@ class KolSingleSelect {
23713
23717
  } });
23714
23718
  }
23715
23719
  render() {
23716
- return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'ec3747f22ac846d38911cd95c7459ea384ae985a' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'e2d7f951550e3bd3eaf4ef31088df4a570c7d852', state: this.state }, hAsync("div", { key: '80e7bbd2c47355eddb11aab6c9682d1df2e386b3', class: "kol-single-select__group" }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '60fc8dff63875f302faacdee8e7b802629e7106f' }, this.getInputProps())), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: '734bf8b1b2249aa1bd17c77576dc2897ef7f6666', _icons: "codicon codicon-close", "data-testid": "single-select-delete", _label: translate('kol-delete-selection'), onClick: () => {
23720
+ var _a;
23721
+ return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'cdb72de6f61b1615cd32870580153774691c6b43' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '2cefeed94b8376156b6ad75e777319ca2db9c656', state: this.state }, hAsync("div", { key: 'b4ef7f976dc946bc1f38bc41d5a942b2ea4ced93', class: "kol-single-select__group" }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '492a3beb4fca89b1d1303caf71df136515c5fba0' }, this.getInputProps())), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: 'e6af67ff63addc06e3a2b83d5b477f333b5a68f2', _icons: "codicon codicon-close", "data-testid": "single-select-delete", _label: translate('kol-delete-selection'), onClick: () => {
23717
23722
  var _a;
23718
23723
  this.clearSelection();
23719
23724
  (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
23720
23725
  }, class: clsx('kol-single-select__delete', {
23721
23726
  'kol-single-select__delete--disabled': this.state._disabled,
23722
- }) })), hAsync(CustomSuggestionsToggleFc$1, { key: '363d2176f5be007551ebf1575236f784c8fae14e', onClick: this.toggleListbox.bind(this), disabled: this.state._disabled })), this._isOpen && !(this.state._disabled === true) && (hAsync(CustomSuggestionsOptionsGroupFc$1, { key: '572a0bffa400ba25653a84db7172c0c9697902a9', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc$1, { index: index, option: option.label, ref: (el) => {
23727
+ }) })), hAsync(CustomSuggestionsToggleFc$1, { key: 'd6cb818ee47ff1b65c3ca2b88a941d27a89cdf2e', onClick: this.toggleListbox.bind(this), disabled: this.state._disabled })), this._isOpen && !(this.state._disabled === true) && (hAsync(CustomSuggestionsOptionsGroupFc$1, { key: '06327f8bcc101cc0a836d293300a506bd99ecd1b', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` } }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc$1, { index: index, option: option.label, ref: (el) => {
23723
23728
  if (el)
23724
23729
  this.refOptions[index] = el;
23725
23730
  }, selected: this._value === option.value, onClick: (event) => {
@@ -23894,6 +23899,7 @@ class KolSingleSelect {
23894
23899
  this._touched = false;
23895
23900
  this._value = undefined;
23896
23901
  this._hideClearButton = false;
23902
+ this._rows = undefined;
23897
23903
  this.state = {
23898
23904
  _hideMsg: false,
23899
23905
  _id: `id-${nonce()}`,
@@ -23968,6 +23974,9 @@ class KolSingleSelect {
23968
23974
  validateHideClearButton(value) {
23969
23975
  this.controller.validateHideClearButton(value);
23970
23976
  }
23977
+ validateRows(value) {
23978
+ this.controller.validateRows(value);
23979
+ }
23971
23980
  handleMouseEvent() {
23972
23981
  this.blockSuggestionMouseOver = false;
23973
23982
  }
@@ -24019,7 +24028,8 @@ class KolSingleSelect {
24019
24028
  "_syncValueBySelector": ["validateSyncValueBySelector"],
24020
24029
  "_touched": ["validateTouched"],
24021
24030
  "_value": ["validateValue"],
24022
- "_hideClearButton ": ["validateHideClearButton"]
24031
+ "_hideClearButton ": ["validateHideClearButton"],
24032
+ "_rows": ["validateRows"]
24023
24033
  }; }
24024
24034
  static get style() { return {
24025
24035
  default: KolSingleSelectDefaultStyle0
@@ -24048,6 +24058,7 @@ class KolSingleSelect {
24048
24058
  "_touched": [1540],
24049
24059
  "_value": [1544],
24050
24060
  "_hideClearButton": [4, "_hide-clear-button"],
24061
+ "_rows": [2],
24051
24062
  "_isOpen": [32],
24052
24063
  "_filteredOptions": [32],
24053
24064
  "_inputValue": [32],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/hydrate",
3
- "version": "3.0.0-rc.10",
3
+ "version": "3.0.0-rc.11",
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": "3.0.0-rc.10"
49
+ "@public-ui/components": "3.0.0-rc.11"
50
50
  },
51
51
  "peerDependencies": {
52
- "@public-ui/components": "3.0.0-rc.10"
52
+ "@public-ui/components": "3.0.0-rc.11"
53
53
  },
54
54
  "sideEffects": false,
55
55
  "type": "commonjs",