@public-ui/components/dist/cjs/kol-single-select.cjs.entry.js

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

/*!
 * KoliBri - The accessible HTML-Standard
 */
"use strict";var index=require("./index-C4Loo2IH.js"),clsx=require("./clsx-CkZlkaek.js"),componentNames=require("./component-names-CuI-0Pbo.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-Ci-xqnPO.js"),controllerIcon=require("./controller-icon-CAY0twi1.js"),InputStateWrapper=require("./InputStateWrapper-BIdMwlc6.js"),CustomSuggestionsOptionsGroup=require("./CustomSuggestionsOptionsGroup-C9tnqFEC.js"),i18n=require("./i18n-DNWGj4j8.js"),dev_utils=require("./dev.utils-L6CxXgBo.js"),common=require("./common-Cd2qH809.js"),controller=require("./controller-01_8sWT5.js"),placeholder=require("./placeholder-BncK-3gZ.js"),required=require("./required-CXU7vdyH.js");require("./access-and-short-key-BExF929g.js"),require("./disabled-DT-7CUov.js"),require("./hide-label-DdGk9NfD.js"),require("./label-Nicf9N_T.js"),require("./tooltip-align-WJPFINTL.js"),require("./align-CGG5V8xM.js"),require("./events-cX8h6I3p.js"),require("./associated.controller-jhz1Ef5Z.js"),require("./bootstrap-DmmGbpjB.js"),require("./i18n-BnIFsVIa.js"),require("./isObject-DMA85Fq4.js"),require("./tslib.es6-7DbU_BSw.js"),require("./reuse-Cs36Ddzu.js"),require("./InternalUnderlinedBadgeText-LsIWMiab.js"),require("./Alert-yK5O3Czw.js"),require("./bem-Bu0VYjZa.js"),require("./browser-D7A31aEp.js"),require("./Heading-CqQULYGY.js"),require("./Icon-B7eZlK-8.js"),require("./icons-D_PtPRwb.js"),require("./Input-mtjTLTjx.js"),require("./orientation-BGODo_Ua.js");class SingleSelectController extends controllerIcon.InputIconController{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;Array.isArray(n)&&n.length>0&&(this.keyOptionMap.clear(),controller.fillKeyOptionMap(this.keyOptionMap,n))},this.component=e}validateOptions(e){controller.validateOptions(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){required.validateRequired(this.component,e)}validateValue(e){common.watchValidator(this.component,"_value",e=>void 0!==e,new Set(["KoliBriUnknown"]),e)}validatePlaceholder(e){placeholder.validatePlaceholder(this.component,e)}validateHideClearButton(e){common.watchBoolean(this.component,"_hideClearButton",e)}validateRows(e){common.watchNumber(this.component,"_rows",e)}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder),this.validateHideClearButton(this.component._hideClearButton),this.validateRows(this.component._rows)}}const defaultStyleCss='/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\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    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\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: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\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  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\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    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    line-height: 1.5;\n    white-space: normal;\n    cursor: pointer;\n    overflow-wrap: break-word;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n  .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n    cursor: not-allowed;\n  }\n  .kol-custom-suggestions-options-group {\n    background-color: white;\n    display: block;\n    position: absolute;\n    z-index: 2;\n    max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style-type: none;\n  }\n  .kol-custom-suggestions-toggle {\n    display: flex;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n  .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n    cursor: not-allowed;\n  }\n  .kol-form-field {\n    display: grid;\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  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\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  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-single-select__delete .kol-button {\n    cursor: pointer;\n  }\n  .kol-single-select__delete--disabled .kol-button {\n    cursor: not-allowed;\n  }\n  .kol-single-select__no-results-message {\n    display: flex;\n    min-height: calc(50 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n  .kol-single-select .kol-custom-suggestions-options-group {\n    max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * var(--visible-options, 5) + 2 * 1rem / var(--kolibri-root-font-size, 16)) !important;\n  }\n  .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n    cursor: pointer;\n  }\n  .kol-custom-suggestions-toggle--disabled {\n    opacity: 0.5;\n  }\n}',KolSingleSelect=class{async getValue(){return this._value}async kolFocus(){var e;null===(e=this.refInput)||void 0===e||e.focus()}onBlur(){var e,t,n;const i=null===(e=this.state._options)||void 0===e?void 0:e.find(e=>{var t,n;return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase())===(null===(n=this._inputValue)||void 0===n?void 0:n.toLowerCase())});i?this.selectOption(i):(this._inputValue=null===(n=null===(t=this.state._options)||void 0===t?void 0:t.find(e=>e.value===this._value))||void 0===n?void 0:n.label,this._filteredOptions=[...this.state._options]),this._isOpen=!1}createEventWithTarget(e,t){const n=new CustomEvent(e,{bubbles:!0,detail:t});return this.refInput&&(Object.defineProperty(n,"target",{value:this.refInput}),Object.defineProperty(n,"currentTarget",{value:this.refInput})),n}clearSelection(){if(!(!0===this.state._disabled)){const e=null;this._focusedOptionIndex=-1,this._value=e,this._inputValue="",this._filteredOptions=[...this.state._options];const t=this.createEventWithTarget("input",{name:this.state._name,value:e}),n=this.createEventWithTarget("change",{name:this.state._name,value:e});this.controller.onFacade.onInput(t,!0,{value:e}),this.controller.onFacade.onChange(n,{value:e})}}selectOption(e){var t,n;if(e.value===this._value)return this._inputValue=e.label,void(this._filteredOptions=[...this.state._options]);this._value=e.value,this._inputValue=e.label;const i=this.createEventWithTarget("input",{name:null!==(t=this.state._name)&&void 0!==t?t:"",value:e.value}),o=this.createEventWithTarget("change",{name:null!==(n=this.state._name)&&void 0!==n?n:"",value:e.value});this.controller.onFacade.onInput(i,!1,e.value),this.controller.onFacade.onChange(o,e.value),this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this._value)}onInput(e){const t=e.target;this._inputValue=t.value,this._isOpen=!0,this.setFilteredOptionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(e.preventDefault(),this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredOptionsByQuery(e){""===(null==e?void 0:e.trim())?this._filteredOptions=[...this.state._options]:Array.isArray(this.state._options)&&this.state._options.length>0&&e.length>0&&(this._filteredOptions=this.state._options.filter(t=>{var n,i;return null===(i=null===(n=t.label)||void 0===n?void 0:n.toLowerCase())||void 0===i?void 0:i.includes(null==e?void 0:e.toLowerCase())}))}moveFocus(e){if(!this._filteredOptions)return;let t=this._focusedOptionIndex+e,n=0,i=!1;const o=this._filteredOptions.length;for(;n<o;){t>=this._filteredOptions.length&&(t=0),t<0&&(t=this._filteredOptions.length-1);if(!this._filteredOptions[t].disabled){i=!0;break}t+=e,n++}i&&(this._focusedOptionIndex=t,this.focusOption(this._focusedOptionIndex))}focusOption(e){if(this.refOptions){const t=this.refOptions[e];null==t||t.focus()}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),n=Array.isArray(this._filteredOptions)&&this._filteredOptions.findIndex(e=>e.label.toLowerCase().startsWith(t)&&!e.disabled);"number"==typeof n&&n>=0&&(this._focusedOptionIndex=n,this.focusOption(n))}getFormFieldProps(){return{state:this.state,class:"kol-single-select",tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getInputProps(){const{ariaDescribedBy:e}=FormFieldStateWrapper.getRenderStates(this.state),t=!0===this.state._disabled;return Object.assign(Object.assign({"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,"aria-autocomplete":"both","aria-controls":"listbox","aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-keyshortcuts":this.state._shortKey,accessKey:this.state._accessKey,autocapitalize:"off",autocorrect:"off",class:"kol-single-select__input",disabled:t,name:this.state._name,placeholder:this.state._placeholder,ref:this.catchRef,required:this.state._required,state:this.state,type:"text",value:this._inputValue},this.controller.onFacade),{onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onInput:this.onInput.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){var e;const t=!0===this.state._disabled;return index.h(FormFieldStateWrapper.FormFieldStateWrapper,Object.assign({key:"022bd32dfdbc965f0311456da17cf56032cdbb4e"},this.getFormFieldProps()),index.h(controllerIcon.InputContainerStateWrapperFc,{key:"65092ea7e9b0a6a6beab48b75cb2129a5240e94e",state:this.state},index.h("div",{key:"aa18c4f22ac372d12d21d3098666630874f35d9a",class:"kol-single-select__group"},index.h(InputStateWrapper.InputStateWrapper,Object.assign({key:"357c2dd70789f13cc3d6f6f71503a4f588eadde4"},this.getInputProps())),this._inputValue&&!this.state._hideClearButton&&index.h(componentNames.KolButtonWcTag,{key:"36713c8e322d38ff76f3fa4d8eddc52995dd1551",_icons:"codicon codicon-close",_label:this.translateDeleteSelection,_hideLabel:!0,_buttonVariant:"ghost",_disabled:t,"data-testid":"single-select-delete",class:clsx.clsx("kol-single-select__delete",{"kol-single-select__delete--disabled":t}),_on:{onClick:()=>{var e;this.clearSelection(),null===(e=this.refInput)||void 0===e||e.focus()}}}),index.h(componentNames.KolIconTag,{key:"9edf8cc32fcd57b8dc1b6c5c2bb848e5331b4c84",_icons:"codicon codicon-triangle-down",_label:"",class:clsx.clsx("kol-custom-suggestions-toggle",{"kol-custom-suggestions-toggle--disabled":t}),onClick:this.toggleListbox.bind(this)})),this._isOpen&&!t&&index.h(CustomSuggestionsOptionsGroup.CustomSuggestionsOptionsGroupFc,{key:"2d6d172165735e5a9f9dae7b5c11839ffe6a76eb",blockSuggestionMouseOver:this.blockSuggestionMouseOver,onKeyDown:this.handleKeyDownDropdown.bind(this),style:{"--visible-options":`${null!==(e=this._rows)&&void 0!==e?e:5}`}},Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0?this._filteredOptions.map((e,t)=>index.h(CustomSuggestionsOptionsGroup.CustomSuggestionsOptionFc,{index:t,option:e.label,searchTerm:this._inputValue,ref:e=>{e&&(this.refOptions[t]=e)},selected:this._value===e.value,disabled:!!e.disabled,onClick:t=>{var n;e.disabled||(this.selectOption(e),null===(n=this.refInput)||void 0===n||n.focus(),this.toggleListbox(t),this._isOpen=!1)},onMouseOver:()=>{this.blockSuggestionMouseOver||(this._focusedOptionIndex=t,this.focusOption(t))},onFocus:()=>{e.disabled||(this._focusedOptionIndex=t,this.focusOption(t))},onKeyDown:t=>{var n;e.disabled||"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(e),null===(n=this.refInput)||void 0===n||n.focus(),this.toggleListbox(t),t.preventDefault())}})):index.h("li",{class:"kol-single-select__no-results-message"},this.translateNoResultsMessage," "))))}handleFocusOut(){setTimeout(()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur()},0)}handleWindowBlur(){this.onBlur()}handleKeyDown(e){var t,n;const i=(t,n)=>{var i;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(i=this.refInput)||void 0===i||i.focus()),null==n||n()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,i(!0,()=>this.moveFocus(1));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,i(!0,()=>this.moveFocus(-1));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":this._isOpen=!1,i(!1);break;case" ":this._isOpen?Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0&&(this.selectOption(this._filteredOptions[this._focusedOptionIndex]),null===(n=this.refInput)||void 0===n||n.focus(),i(!1)):this.toggleListbox(e);break;case"NumpadEnter":case"Enter":this.toggleListbox(e),this._isOpen=!1;break;case"Home":this.blockSuggestionMouseOver=!0,i(void 0,()=>{this._isOpen&&(this._focusedOptionIndex=0,this.focusOption(this._focusedOptionIndex))});break;case"End":this.blockSuggestionMouseOver=!0,i(void 0,()=>{this._isOpen&&(this._focusedOptionIndex=this._filteredOptions?this._filteredOptions.length-1:0,this.focusOption(this._focusedOptionIndex))});break;case"PageUp":this.blockSuggestionMouseOver=!0,i(void 0,()=>this._isOpen&&this.moveFocus(-10));break;case"PageDown":this.blockSuggestionMouseOver=!0,i(void 0,()=>this._isOpen&&this.moveFocus(10))}}constructor(e){index.registerInstance(this,e),this.refOptions=[],this.translateDeleteSelection=i18n.translate("kol-delete-selection"),this.translateNoResultsMessage=i18n.translate("kol-no-results-message"),this.catchRef=e=>{this.refInput=e},this.toggleListbox=e=>{var t;null==e||e.preventDefault();if(!(!0===this.state._disabled))if(null===(t=this.refInput)||void 0===t||t.focus(),this._isOpen)this._isOpen=!1;else{this._isOpen=!0;const e=Array.isArray(this._filteredOptions)?this._filteredOptions.findIndex(e=>e.label===this._inputValue):-1;this._focusedOptionIndex=e>=0?e:-1,this.focusOption(this._focusedOptionIndex)}},this._focusedOptionIndex=-1,this._isOpen=!1,this._filteredOptions=[],this._inputValue="",this.blockSuggestionMouseOver=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._required=!1,this._tooltipAlign="top",this._touched=!1,this._value=null,this._hideClearButton=!1,this.state={_hideMsg:!1,_id:`id-${dev_utils.nonce()}`,_label:"",_options:[],_hideClearButton:!1},this.inputHasFocus=!1,this.controller=new SingleSelectController(this,"single-select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e),this._filteredOptions=e,this.updateInputValue(this._value)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.oldValue=e,this.updateInputValue(e)}validateHideClearButton(e){this.controller.validateHideClearButton(e)}validateRows(e){this.controller.validateRows(e)}handleMouseEvent(){this.blockSuggestionMouseOver=!1}updateInputValue(e){if(Array.isArray(this._options)){const t=this._options.find(t=>t.value===e);this._inputValue=t?String(t.label):""}}componentWillLoad(){this.refOptions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.oldValue=this._value,this._filteredOptions=this.state._options,this.updateInputValue(this._value)}onChange(e){var t,n;this.oldValue!==(null===(t=this.refInput)||void 0===t?void 0:t.value)&&(this.oldValue=null===(n=this.refInput)||void 0===n?void 0:n.value),this._isOpen||this.controller.onFacade.onChange(e,this._value)}onClick(e){var t;this.toggleListbox(e),null===(t=this.refInput)||void 0===t||t.focus(),this.controller.onFacade.onClick(e)}get host(){return index.getElement(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"],_hideClearButton:["validateHideClearButton"],_rows:["validateRows"]}}};KolSingleSelect.style={default:defaultStyleCss},exports.kol_single_select=KolSingleSelect;