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

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

/*!
 * KoliBri - The accessible HTML-Standard
 */
import{h as t,F as e,H as i,r as n,g as s}from"./index-f0de5c73.js";import{c as o}from"./clsx-09a06a12.js";import{l as a,g as l}from"./component-names-6ca7e863.js";import{t as r}from"./i18n-5fe08f1c.js";import{n as h}from"./dev.utils-0b748391.js";import{s as d,t as c}from"./events-29e84d75.js";import{g as u}from"./controller-1a0e05c9.js";import{I as p}from"./InternalUnderlinedBadgeText-6a05da16.js";import{I as f}from"./controller-icon-f9b7e1f9.js";import{f as b,b as m}from"./controller-4a9a50f2.js";import{b as v,w as y,i as g}from"./prop.validators-64749272.js";import{s as k,b as w}from"./reuse-32931294.js";import"./i18n-7ea9f137.js";import"./dev.utils-fab45cbc.js";import"./associated.controller-5bee50ee.js";import"./access-and-short-key-e094398d.js";import"./hide-label-8c202307.js";import"./label-e8ec0e3a.js";import"./common-0f1f2276.js";import"./tooltip-align-5902aa96.js";import"./align-878fb132.js";import"./icons-c857b77d.js";import"./index-da3e0c00.js";class _ extends f{constructor(t,e,i){super(t,e,i),this.keyOptionMap=new Map,this.afterPatchOptions=(t,e,i,n)=>{"_value"===n&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const i=e.has("_options")?e.get("_options"):this.component.state._options;Array.isArray(i)&&i.length>0&&(this.keyOptionMap.clear(),b(this.keyOptionMap,i))},this.component=t}validateOptions(t){m(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(t){v(this.component,"_required",t)}validateValue(t){y(this.component,"_value",(t=>void 0!==t),new Set(["KoliBriUnknown"]),t)}validatePlaceholder(t){g(this.component,"_placeholder",t)}validateHideClearButton(t){v(this.component,"_hideClearButton",t)}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)}}const x="/*\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}\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  }\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(250rem / var(--kolibri-root-font-size, 16));\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}",z=x,j=class{async getValue(){return this.state._value}async kolFocus(){var t;null===(t=this.refInput)||void 0===t||t.focus()}onBlur(){var t;Array.isArray(this.state._options)&&this.state._options.length>0&&!this.state._options.some((t=>t.label===this._inputValue))&&(this._inputValue=null===(t=this.state._options.find((t=>t.value===this.state._value)))||void 0===t?void 0:t.label,this._filteredOptions=[...this.state._options]),this._isOpen=!1}clearSelection(){if(!this.state._disabled){const t="";this._focusedOptionIndex=-1,this.state._value=t,this._inputValue=t,this._filteredOptions=[...this.state._options],this.controller.onFacade.onInput(new CustomEvent("input",{bubbles:!0,detail:{name:this.state._name,value:t}}),!0,t),this.controller.onFacade.onChange(new CustomEvent("change",{bubbles:!0,detail:{name:this.state._name,value:t}}),t)}}selectOption(t){this.state._value=t.value,this._inputValue=t.label,this.controller.onFacade.onInput(new CustomEvent("input",{bubbles:!0,detail:{name:this.state._name,value:t.value}}),!1,t.value),this.controller.onFacade.onChange(new CustomEvent("change",{bubbles:!0,detail:{name:this.state._name,value:t.value}}),t.value),this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this.state._value)}onInput(t){const e=t.target;this._inputValue=e.value,this._isOpen=!0,this.setFilteredOptionsByQuery(e.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(t){1===t.key.length&&/[a-z0-9]/i.test(t.key)&&(t.preventDefault(),this._isOpen=!0,this.focusSuggestionStartingWith(t.key))}setFilteredOptionsByQuery(t){""===(null==t?void 0:t.trim())?this._filteredOptions=[...this.state._options]:Array.isArray(this.state._options)&&this.state._options.length>0&&t.length>0&&(this._filteredOptions=this.state._options.filter((e=>{var i,n;return null===(n=null===(i=e.label)||void 0===i?void 0:i.toLowerCase())||void 0===n?void 0:n.includes(null==t?void 0:t.toLowerCase())})))}moveFocus(t){if(!this._filteredOptions)return;let e=this._focusedOptionIndex+t;e>=this._filteredOptions.length&&(e=0),e<0&&(e=this._filteredOptions.length-1),this._focusedOptionIndex=e,this.focusOption(this._focusedOptionIndex)}focusOption(t){if(this.refOptions){const e=this.refOptions[t];null==e||e.focus()}}focusSuggestionStartingWith(t){const e=t.toLowerCase(),i=Array.isArray(this._filteredOptions)&&this._filteredOptions.findIndex((t=>t.label.toLowerCase().startsWith(e)));"number"==typeof i&&(this._focusedOptionIndex=i,this.focusOption(i))}render(){const n=k(this.state._label),{ariaDescribedBy:s}=u(this.state);return t(i,{key:"c16b15abce522dbf9e8fe7fbe83c76e91e66c0da",class:"kol-single-select"},t("div",{key:"e885aedb21b761dfac8c13c39a93607198069024",class:`single-select ${!0===this.state._disabled?"disabled":""} `},t(a,{key:"dc8756189d7da027f63dba36b273789701dfcde5",_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"},t("span",{key:"ba8a16c77bacdb484d94ba76533d496d54d9d07d",slot:"label"},n?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?t(e,null,t(p,{badgeText:w(this.state._accessKey||this.state._shortKey),label:this.state._label})," ",t("span",{class:"badge-text-hint","aria-hidden":"true"},w(this.state._accessKey||this.state._shortKey))):t("span",null,this.state._label)),t("div",{key:"68c252ea5dd083e46bb4ca5ef6de35887eb4e5fa",slot:"input"},t("div",{key:"58c09e10de6865e27fafd21f91d794afa655f901",class:"single-select__group"},t("input",Object.assign({key:"8fcfb48aa4e7a7cde5bccf55899bf8817518e19a",ref:this.catchRef,class:"single-select__input",type:"text","aria-autocomplete":"both","aria-controls":"listbox",value:this._inputValue,accessKey:this.state._accessKey,"aria-describedby":s.length>0?s.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,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:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1},placeholder:this.state._placeholder})),this._inputValue&&!this.state._hideClearButton&&t(l,{key:"fc92990d158414ae4941a06b4923c56bdc64024a",_icons:"codicon codicon-close",_label:r("kol-delete-selection"),onClick:()=>{var t;this.clearSelection(),null===(t=this.refInput)||void 0===t||t.focus()},class:"single-select__delete"}),t("button",{key:"9232df1e36900d29b415dfaf1cc6ffe6f694e968",tabindex:"-1",class:"single-select__button",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled},t(l,{key:"58d589c37ed39b3c28cfb0526af00d48e5e8b407",_icons:"codicon codicon-triangle-down",_label:r("kol-dropdown")}))),this._isOpen&&!(!0===this.state._disabled)&&t("ul",{key:"6187a9e55efff714d82a90565ecf54407d1d90c8",role:"listbox",class:o("single-select__listbox",this.blockSuggestionMouseOver&&"single-select__listbox--cursor-hidden"),onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0?this._filteredOptions.map(((e,i)=>t("li",{id:`option-${i}`,key:`-${i}`,ref:t=>{t&&(this.refOptions[i]=t)},tabIndex:-1,role:"option","aria-selected":this.state._value===e.value?"true":void 0,onClick:t=>{var i;this.selectOption(e),null===(i=this.refInput)||void 0===i||i.focus(),this.toggleListbox(t)},onMouseOver:()=>{this.blockSuggestionMouseOver||(this._focusedOptionIndex=i,this.focusOption(i))},onFocus:()=>{this._focusedOptionIndex=i,this.focusOption(i)},class:"single-select__item",onKeyDown:t=>{var i;"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(e),null===(i=this.refInput)||void 0===i||i.focus(),this.toggleListbox(t),t.preventDefault())}},t("input",{class:"visually-hidden",type:"radio",name:"options",id:`option-radio-${i}`,value:e.value,checked:this.state._value===e.value||i===this._focusedOptionIndex}),t("label",{htmlFor:`option-radio-${i}`,class:"radio-label"},e.label)))):t("li",{class:"single-select__no-results-message"},r("kol-no-results-message")," "))))))}handleFocusOut(){setTimeout((()=>{var t;(null===(t=this.host)||void 0===t?void 0:t.contains(document.activeElement))||this.onBlur()}),0)}handleWindowBlur(){this.onBlur()}handleKeyDown(t){var e,i;const n=(e,i)=>{var n;t.preventDefault(),void 0!==e&&(this._isOpen=e,e||null===(n=this.refInput)||void 0===n||n.focus()),null==i||i()};switch(t.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,n(!0,(()=>this.moveFocus(1)));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,n(!0,(()=>this.moveFocus(-1)));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus());break;case"Esc":case"Escape":n(!1);break;case" ":this._isOpen?Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0&&(this.selectOption(this._filteredOptions[this._focusedOptionIndex]),null===(i=this.refInput)||void 0===i||i.focus(),n(!1)):this.toggleListbox(t);break;case"NumpadEnter":case"Enter":this.toggleListbox(t);break;case"Home":this.blockSuggestionMouseOver=!0,n(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=0,this.focusOption(this._focusedOptionIndex))}));break;case"End":this.blockSuggestionMouseOver=!0,n(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=this._filteredOptions?this._filteredOptions.length-1:0,this.focusOption(this._focusedOptionIndex))}));break;case"PageUp":this.blockSuggestionMouseOver=!0,n(void 0,(()=>this._isOpen&&this.moveFocus(-10)));break;case"PageDown":this.blockSuggestionMouseOver=!0,n(void 0,(()=>this._isOpen&&this.moveFocus(10)))}}constructor(t){n(this,t),this.refOptions=[],this.catchRef=t=>{this.refInput=t},this.toggleListbox=t=>{var e;if(null==t||t.preventDefault(),!this.state._disabled&&(this._isOpen=!this._isOpen,this._isOpen)){null===(e=this.refInput)||void 0===e||e.focus();const t=Array.isArray(this._filteredOptions)?this._filteredOptions.findIndex((t=>t.label===this._inputValue)):-1,i=this.refOptions[t];null==i||i.scrollIntoView({block:"nearest"}),this.focusOption(this._focusedOptionIndex)}},this._focusedOptionIndex=-1,this._isOpen=!1,this._filteredOptions=[],this._inputValue="",this.blockSuggestionMouseOver=!1,this._accessKey=void 0,this._placeholder=void 0,this._alert=void 0,this._disabled=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this._hideClearButton=!1,this.state={_hideError:!1,_id:`id-${h()}`,_label:"",_options:[],_value:"",_hideClearButton:!1},this.inputHasFocus=!1,this.controller=new _(this,"single-select",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t),this._filteredOptions=t,this.updateInputValue(this._value)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t),this.oldValue=t,this.updateInputValue(t)}validateHideClearButton(t){this.controller.validateHideClearButton(t)}handleMouseEvent(){this.blockSuggestionMouseOver=!1}updateInputValue(t){if(Array.isArray(this._options)){const e=this._options.find((e=>e.value===t));this._inputValue=e?String(e.label):""}}componentWillLoad(){this.refOptions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.oldValue=this._value,this._filteredOptions=this._options,this.updateInputValue(this._value)}onChange(t){var e,i,n,o;this.oldValue!==(null===(e=this.refInput)||void 0===e?void 0:e.value)&&(this.oldValue=null===(i=this.refInput)||void 0===i?void 0:i.value),d(t),c("change",this.host,this._value),"function"!=typeof(null===(n=this.state._on)||void 0===n?void 0:n.onChange)||this._isOpen||this.state._on.onChange(t,this._value&&this.oldValue!==(null===(o=this.refInput)||void 0===o?void 0:o.value))}static get delegatesFocus(){return!0}get host(){return s(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"],"_hideClearButton ":["validateHideClearButton"]}}};j.style={default:z};export{j as kol_single_select};