@public-ui/components 2.1.8-rc.0 → 2.1.9-rc.0

package/dist/kolibri/kol-single-select.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as e,F as t,H as i,r as n,g as s}from"./index-cf24d1fe.js";import{n as a}from"./dev.utils-44ef1bde.js";import{s as o,t as l}from"./events-29e84d75.js";import{I as h}from"./controller-icon-78e12429.js";import{f as r,b as d}from"./controller-fe5a6b8d.js";import{b as c,i as u}from"./prop.validators-5a58fa40.js";import{v as p,g as f}from"./controller-ec60cfa6.js";import{l as b,g as m}from"./component-names-0a8a1a6c.js";import{I as v}from"./InternalUnderlinedAccessKey-b2266b5a.js";import{t as y}from"./i18n-8640d789.js";import{c as g}from"./clsx-09a06a12.js";import{s as k}from"./reuse-523ba2ac.js";import"./dev.utils-fab45cbc.js";import"./icons-b0b05e20.js";import"./common-54bf85ba.js";import"./label-084ed1e7.js";import"./index-5728f164.js";import"./associated.controller-15cdd804.js";import"./hide-label-1d403517.js";import"./tab-index-86f3bbae.js";import"./tooltip-align-e140b328.js";import"./align-78bab7b5.js";import"./i18n-7ea9f137.js";class _ extends h{constructor(e,t,i){super(e,t,i),this.keyOptionMap=new Map,this.afterPatchOptions=(e,t,i,n)=>{"_value"===n&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const i=t.has("_options")?t.get("_options"):this.component.state._options;Array.isArray(i)&&i.length>0&&(this.keyOptionMap.clear(),r(this.keyOptionMap,i))},this.component=e}validateOptions(e){d(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){c(this.component,"_required",e)}validateValue(e){u(this.component,"_value",e)}validateMsg(e){p(this.component,e)}validatePlaceholder(e){u(this.component,"_placeholder",e)}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder)}}const w="/*\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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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    /*\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  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* 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  select,\n  select[multiple] option,\n  textarea {\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-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\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: var(--a11y-min-size);\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}",x=w,z=class{async getValue(){return this.state._value}async kolFocus(){var e;null===(e=this.refInput)||void 0===e||e.focus()}onBlur(){var e;Array.isArray(this.state._options)&&this.state._options.length>0&&!this.state._options.some((e=>e.label===this._inputValue))&&(this._inputValue=null===(e=this.state._options.find((e=>e.value===this.state._value)))||void 0===e?void 0:e.label,this._filteredOptions=[...this.state._options]),this._isOpen=!1}clearSelection(){this.state._disabled||(this._focusedOptionIndex=-1,this.state._value="",this._inputValue="",this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this.state._value))}selectOption(e,t){this.state._value=t.value,this._inputValue=t.label,this.controller.onFacade.onChange(e,t.value),this.controller.onFacade.onInput(e,!1,t.value),this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this.state._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 i,n;return null===(n=null===(i=t.label)||void 0===i?void 0:i.toLowerCase())||void 0===n?void 0:n.includes(null==e?void 0:e.toLowerCase())})))}moveFocus(e){if(!this._filteredOptions)return;let t=this._focusedOptionIndex+e;t>=this._filteredOptions.length&&(t=0),t<0&&(t=this._filteredOptions.length-1),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(),i=Array.isArray(this._filteredOptions)&&this._filteredOptions.findIndex((e=>e.label.toLowerCase().startsWith(t)));"number"==typeof i&&(this._focusedOptionIndex=i,this.focusOption(i))}render(){const n=k(this.state._label),{ariaDescribedBy:s}=f(this.state);return e(i,{key:"6632738ce79fd7abfc1b0bc067904d544cde10ba",class:"kol-single-select"},e("div",{key:"36a27b4a40e8852831420282a0cb85f3edc3d60a",class:`single-select ${!0===this.state._disabled?"disabled":""} `},e(b,{key:"afa776c0f013c322fb2a19a7ca305bb58a2701ef",_accessKey:this.state._accessKey,_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,role:"presentation"},e("span",{key:"ab137cc937967e4c69e1cb38078f2f7d906c0cf2",slot:"label"},n?e("slot",{name:"expert"}):"string"==typeof this.state._accessKey?e(t,null,e(v,{accessKey:this.state._accessKey,label:this.state._label})," ",e("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):e("span",null,this.state._label)),e("div",{key:"9e6f4178c2000d3c858fca7e8a782b255d739fdb",slot:"input"},e("div",{key:"363af0c87cafb931c104aa6645dfb4b394149cc2",class:"single-select__group"},e("input",Object.assign({key:"19117c459f3879cf93bf0b83daae0b5d2135319f",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,spellcheck:"false"},this.controller.onFacade,{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),placeholder:this.state._placeholder,onClick:this.toggleListbox.bind(this)})),this._inputValue&&e(m,{key:"3d7d302de15eb18d75c0576fefd97a95bb1f845f",_icons:"codicon codicon-close",_label:y("kol-delete-selection"),onClick:()=>{var e;this.clearSelection(),null===(e=this.refInput)||void 0===e||e.focus()},class:"single-select__delete"}),e("button",{key:"19bc6add00f14fe17e1592ede5d2f57888c6f24d",tabindex:"-1",class:"single-select__button",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled},e(m,{key:"4ff71a635386b7c68e2b4e941fd49d2410d6d973",_icons:"codicon codicon-triangle-down",_label:y("kol-dropdown")}))),this._isOpen&&!(!0===this.state._disabled)&&e("ul",{key:"dfd6401798800cd78eb68a1b42d969a6b098b058",role:"listbox",class:g("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(((t,i)=>e("li",{id:`option-${i}`,key:`-${i}`,ref:e=>{e&&(this.refOptions[i]=e)},tabIndex:-1,role:"option","aria-selected":this.state._value===t.value,onClick:e=>{var i;this.selectOption(e,t),null===(i=this.refInput)||void 0===i||i.focus(),this.toggleListbox(e)},onMouseOver:()=>{this.blockSuggestionMouseOver||(this._focusedOptionIndex=i,this.focusOption(i))},onFocus:()=>{this._focusedOptionIndex=i,this.focusOption(i)},class:"single-select__item",onKeyDown:e=>{var i;"Enter"!==e.key&&"NumpadEnter"!==e.key||(this.selectOption(e,t),null===(i=this.refInput)||void 0===i||i.focus(),this.toggleListbox(e),e.preventDefault())}},e("input",{class:"visually-hidden",type:"radio",name:"options",id:`option-radio-${i}`,value:t.value,checked:this.state._value===t.value||i===this._focusedOptionIndex}),e("label",{htmlFor:`option-radio-${i}`,class:"radio-label"},t.label)))):e("li",{class:"single-select__no-results-message"},y("kol-no-results-message")," "))))))}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,i;const n=(t,i)=>{var n;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(n=this.refInput)||void 0===n||n.focus()),null==i||i()};switch(e.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===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":n(!1);break;case" ":this._isOpen?Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0&&(this.selectOption(e,this._filteredOptions[this._focusedOptionIndex]),null===(i=this.refInput)||void 0===i||i.focus(),n(!1)):this.toggleListbox(e);break;case"NumpadEnter":case"Enter":this.toggleListbox(e);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(e){n(this,e),this.refOptions=[],this.catchRef=e=>{this.refInput=e},this.toggleListbox=e=>{var t;if(null==e||e.preventDefault(),!this.state._disabled&&(this._isOpen=!this._isOpen,this._isOpen)){null===(t=this.refInput)||void 0===t||t.focus();const e=Array.isArray(this._filteredOptions)?this._filteredOptions.findIndex((e=>e.label===this._inputValue)):-1;this._focusedOptionIndex=e>=0?e:0,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=!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._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${a()}`,_label:"",_options:[],_value:""},this.controller=new _(this,"single-select",this.host)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideError(e){this.controller.validateHideError(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}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.oldValue=e}handleMouseEvent(){this.blockSuggestionMouseOver=!1}componentWillLoad(){if(this.refOptions=[],this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.oldValue=this._value,this._filteredOptions=this._options,Array.isArray(this._options)){const e=this._options.find((e=>e.value===this._value));this._inputValue=e?e.label:""}}onChange(e){var t,i,n,s;this.oldValue!==(null===(t=this.refInput)||void 0===t?void 0:t.value)&&(this.oldValue=null===(i=this.refInput)||void 0===i?void 0:i.value),o(e),l("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(e,this._value&&this.oldValue!==(null===(s=this.refInput)||void 0===s?void 0:s.value))}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"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};z.style={default:x};export{z as kol_single_select};
+import{h as e,F as t,H as i,r as n,g as s}from"./index-d62ddd65.js";import{n as a}from"./dev.utils-e45b01b6.js";import{s as o,t as l}from"./events-29e84d75.js";import{I as h}from"./controller-icon-1320c05c.js";import{f as r,b as d}from"./controller-724a3665.js";import{b as c,i as u}from"./prop.validators-543d0c7b.js";import{v as p,g as f}from"./controller-f99ec155.js";import{k as b,g as m}from"./component-names-7f2c991e.js";import{I as v}from"./InternalUnderlinedAccessKey-47cbf33a.js";import{t as y}from"./i18n-8640d789.js";import{c as g}from"./clsx-09a06a12.js";import{s as k}from"./reuse-523ba2ac.js";import"./dev.utils-fab45cbc.js";import"./icons-33fc85f1.js";import"./common-54bf85ba.js";import"./label-541a8424.js";import"./index-fcc5bd94.js";import"./associated.controller-4715556c.js";import"./hide-label-7d9e8ee6.js";import"./tab-index-aa2012d4.js";import"./tooltip-align-01afdf25.js";import"./align-51311afa.js";import"./i18n-7ea9f137.js";class _ extends h{constructor(e,t,i){super(e,t,i),this.keyOptionMap=new Map,this.afterPatchOptions=(e,t,i,n)=>{"_value"===n&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const i=t.has("_options")?t.get("_options"):this.component.state._options;Array.isArray(i)&&i.length>0&&(this.keyOptionMap.clear(),r(this.keyOptionMap,i))},this.component=e}validateOptions(e){d(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){c(this.component,"_required",e)}validateValue(e){u(this.component,"_value",e)}validateMsg(e){p(this.component,e)}validatePlaceholder(e){u(this.component,"_placeholder",e)}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder)}}const w="/*\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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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    /*\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  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* 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  select,\n  select[multiple] option,\n  textarea {\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  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\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: var(--a11y-min-size);\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}",x=w,z=class{async getValue(){return this.state._value}async kolFocus(){var e;null===(e=this.refInput)||void 0===e||e.focus()}onBlur(){var e;Array.isArray(this.state._options)&&this.state._options.length>0&&!this.state._options.some((e=>e.label===this._inputValue))&&(this._inputValue=null===(e=this.state._options.find((e=>e.value===this.state._value)))||void 0===e?void 0:e.label,this._filteredOptions=[...this.state._options]),this._isOpen=!1}clearSelection(){this.state._disabled||(this._focusedOptionIndex=-1,this.state._value="",this._inputValue="",this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this.state._value))}selectOption(e,t){this.state._value=t.value,this._inputValue=t.label,this.controller.onFacade.onChange(e,t.value),this.controller.onFacade.onInput(e,!1,t.value),this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this.state._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 i,n;return null===(n=null===(i=t.label)||void 0===i?void 0:i.toLowerCase())||void 0===n?void 0:n.includes(null==e?void 0:e.toLowerCase())})))}moveFocus(e){if(!this._filteredOptions)return;let t=this._focusedOptionIndex+e;t>=this._filteredOptions.length&&(t=0),t<0&&(t=this._filteredOptions.length-1),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(),i=Array.isArray(this._filteredOptions)&&this._filteredOptions.findIndex((e=>e.label.toLowerCase().startsWith(t)));"number"==typeof i&&(this._focusedOptionIndex=i,this.focusOption(i))}render(){const n=k(this.state._label),{ariaDescribedBy:s}=f(this.state);return e(i,{key:"5bff866e04f82793be7e3bf755da15fb786b665c",class:"kol-single-select"},e("div",{key:"5d5f5a6dba90fffcc447ed4dcbaad4ade4bbc847",class:`single-select ${!0===this.state._disabled?"disabled":""} `},e(b,{key:"21531149c1ad0631f00d5517c98dba532c80d946",_accessKey:this.state._accessKey,_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,role:"presentation"},e("span",{key:"bce83f1163f91218a622df381a6f1180c2ee852d",slot:"label"},n?e("slot",{name:"expert"}):"string"==typeof this.state._accessKey?e(t,null,e(v,{accessKey:this.state._accessKey,label:this.state._label})," ",e("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):e("span",null,this.state._label)),e("div",{key:"96d34b4d112c0486cbe42ea8245c5163d6d1dd2f",slot:"input"},e("div",{key:"2dbda01c2edff63bb1c83a638c55f56855ca0d81",class:"single-select__group"},e("input",Object.assign({key:"f2b8e8acf519f7f2947cc859c1f2245f4e0c45e5",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,spellcheck:"false"},this.controller.onFacade,{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),placeholder:this.state._placeholder,onClick:this.toggleListbox.bind(this)})),this._inputValue&&e(m,{key:"7f47559049cf8411184fd13f18994b3a17e45c6a",_icons:"codicon codicon-close",_label:y("kol-delete-selection"),onClick:()=>{var e;this.clearSelection(),null===(e=this.refInput)||void 0===e||e.focus()},class:"single-select__delete"}),e("button",{key:"88e39fd5b8507a53ba6d4b0aa8bb8b3d38adbfd7",tabindex:"-1",class:"single-select__button",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled},e(m,{key:"985de34ebd7ee9d9870c488a4d2312286c4e06d4",_icons:"codicon codicon-triangle-down",_label:y("kol-dropdown")}))),this._isOpen&&!(!0===this.state._disabled)&&e("ul",{key:"3ecea1248687412e9e5a015aa0f3961cad0fb6ec",role:"listbox",class:g("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(((t,i)=>e("li",{id:`option-${i}`,key:`-${i}`,ref:e=>{e&&(this.refOptions[i]=e)},tabIndex:-1,role:"option","aria-selected":this.state._value===t.value,onClick:e=>{var i;this.selectOption(e,t),null===(i=this.refInput)||void 0===i||i.focus(),this.toggleListbox(e)},onMouseOver:()=>{this.blockSuggestionMouseOver||(this._focusedOptionIndex=i,this.focusOption(i))},onFocus:()=>{this._focusedOptionIndex=i,this.focusOption(i)},class:"single-select__item",onKeyDown:e=>{var i;"Enter"!==e.key&&"NumpadEnter"!==e.key||(this.selectOption(e,t),null===(i=this.refInput)||void 0===i||i.focus(),this.toggleListbox(e),e.preventDefault())}},e("input",{class:"visually-hidden",type:"radio",name:"options",id:`option-radio-${i}`,value:t.value,checked:this.state._value===t.value||i===this._focusedOptionIndex}),e("label",{htmlFor:`option-radio-${i}`,class:"radio-label"},t.label)))):e("li",{class:"single-select__no-results-message"},y("kol-no-results-message")," "))))))}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,i;const n=(t,i)=>{var n;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(n=this.refInput)||void 0===n||n.focus()),null==i||i()};switch(e.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===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":n(!1);break;case" ":this._isOpen?Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0&&(this.selectOption(e,this._filteredOptions[this._focusedOptionIndex]),null===(i=this.refInput)||void 0===i||i.focus(),n(!1)):this.toggleListbox(e);break;case"NumpadEnter":case"Enter":this.toggleListbox(e);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(e){n(this,e),this.refOptions=[],this.catchRef=e=>{this.refInput=e},this.toggleListbox=e=>{var t;if(null==e||e.preventDefault(),!this.state._disabled&&(this._isOpen=!this._isOpen,this._isOpen)){null===(t=this.refInput)||void 0===t||t.focus();const e=Array.isArray(this._filteredOptions)?this._filteredOptions.findIndex((e=>e.label===this._inputValue)):-1;this._focusedOptionIndex=e>=0?e:0,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=!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._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${a()}`,_label:"",_options:[],_value:""},this.controller=new _(this,"single-select",this.host)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideError(e){this.controller.validateHideError(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)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.oldValue=e,this.updateInputValue(e)}handleMouseEvent(){this.blockSuggestionMouseOver=!1}updateInputValue(e){if(Array.isArray(this._options)){const t=this._options.find((t=>t.value===e));this._inputValue=t?t.label:""}}componentWillLoad(){this.refOptions=[],this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.oldValue=this._value,this._filteredOptions=this._options,this.updateInputValue(this._value)}onChange(e){var t,i,n,s;this.oldValue!==(null===(t=this.refInput)||void 0===t?void 0:t.value)&&(this.oldValue=null===(i=this.refInput)||void 0===i?void 0:i.value),o(e),l("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(e,this._value&&this.oldValue!==(null===(s=this.refInput)||void 0===s?void 0:s.value))}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"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};z.style={default:x};export{z as kol_single_select};

package/dist/kolibri/kol-single-select.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["SingleSelectController","InputIconController","constructor","component","name","host","super","this","keyOptionMap","Map","afterPatchOptions","value","_state","_component","key","setFormAssociatedValue","beforePatchOptions","_value","nextState","options","has","get","state","_options","Array","isArray","length","clear","fillKeyOptionMap","validateOptions","hooks","afterPatch","beforePatch","validateRequired","watchBoolean","validateValue","watchString","validateMsg","validatePlaceholder","componentWillLoad","_required","_placeholder","defaultStyleCss","KolSingleSelectDefaultStyle0","KolSingleSelect","getValue","kolFocus","_a","refInput","focus","onBlur","some","option","label","_inputValue","find","_filteredOptions","_isOpen","clearSelection","_disabled","_focusedOptionIndex","controller","selectOption","event","onFacade","onChange","onInput","target","setFilteredOptionsByQuery","handleKeyDownDropdown","test","preventDefault","focusSuggestionStartingWith","query","trim","filter","_b","toLowerCase","includes","moveFocus","delta","newIndex","focusOption","index","refOptions","optionElement","char","charLowerCase","findIndex","startsWith","render","hasExpertSlot","showExpertSlot","_label","ariaDescribedBy","getRenderStates","h","Host","class","KolInputWcTag","_accessKey","_hideError","_hideLabel","_hint","_icons","_id","_msg","_tooltipAlign","_touched","role","slot","Fragment","InternalUnderlinedAccessKey","accessKey","Object","assign","ref","catchRef","type","join","undefined","autoCapitalize","autoCorrect","disabled","_name","required","spellcheck","bind","placeholder","onClick","toggleListbox","KolIconTag","translate","tabindex","clsx","blockSuggestionMouseOver","onKeyDown","map","id","el","tabIndex","onMouseOver","onFocus","e","checked","htmlFor","handleFocusOut","setTimeout","contains","document","activeElement","handleWindowBlur","handleKeyDown","handleEvent","isOpen","callback","hostRef","selectedIndex","nonce","validateAccessKey","validateAlert","validateDisabled","validateHideError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateName","validateOn","validateSyncValueBySelector","validateTabIndex","validateTouched","oldValue","handleMouseEvent","_alert","matchedOption","stopPropagation","tryToDispatchKoliBriEvent","_c","_on","_d"],"sources":["src/components/single-select/controller.ts","src/components/single-select/style.scss?tag=kol-single-select&mode=default&encapsulation=shadow","src/components/single-select/shadow.tsx"],"sourcesContent":["import type { SingleSelectWatches, SingleSelectProps, MsgPropType, OptionsPropType, Option, SelectOption, W3CInputValue } from '../../schema';\nimport { watchBoolean, watchString, validateMsg, validateOptions } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\n\nimport type { Generic } from 'adopted-style-sheets';\nexport class SingleSelectController extends InputIconController implements SingleSelectWatches {\n\tprotected readonly component: Generic.Element.Component & SingleSelectProps;\n\tprivate readonly keyOptionMap = new Map<string, Option<string>>();\n\n\tpublic constructor(component: Generic.Element.Component & SingleSelectProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tprotected readonly afterPatchOptions = (value: unknown, _state: Record<string, unknown>, _component: Generic.Element.Component, key: string): void => {\n\t\tif (key === '_value') {\n\t\t\tthis.setFormAssociatedValue(value as string);\n\t\t}\n\t};\n\n\tprotected readonly beforePatchOptions = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst options = nextState.has('_options') ? nextState.get('_options') : this.component.state._options;\n\t\tif (Array.isArray(options) && options.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, options as SelectOption<W3CInputValue>[]);\n\t\t}\n\t};\n\n\tpublic validateOptions(value?: OptionsPropType): void {\n\t\tvalidateOptions(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value);\n\t}\n\tpublic validateMsg(value?: MsgPropType): void {\n\t\tvalidateMsg(this.component, value);\n\t}\n\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateOptions(this.component._options);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateValue(this.component._value);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t}\n}\n","@import '../@shared/mixins';\n@import '../input-line';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.single-select {\n\t\tposition: relative;\n\n\t\t&.disabled,\n\t\t&.disabled * {\n\t\t\tcursor: not-allowed !important;\n\t\t}\n\n\t\t&__group {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t&__input {\n\t\t\tflex-grow: 1;\n\t\t}\n\n\t\t&__button {\n\t\t\theight: var(--a11y-min-size);\n\t\t\twidth: var(--a11y-min-size);\n\t\t}\n\n\t\t&__listbox {\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\tlist-style-type: none;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\toverflow-y: auto;\n\t\t\toverflow-x: hidden;\n\t\t\tz-index: 2;\n\t\t\tbackground-color: white;\n\t\t\tmax-height: rem(250);\n\t\t}\n\n\t\t&__item {\n\t\t\t&.highlighted {\n\t\t\t\tbackground-color: #f0f0f0;\n\t\t\t}\n\t\t\t.single-select__listbox--cursor-hidden & {\n\t\t\t\tcursor: none !important;\n\t\t\t}\n\t\t}\n\n\t\t&__no-results-message {\n\t\t\tcursor: default;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tmin-height: rem(50);\n\t\t}\n\t}\n}\n","import type {\n\tHideErrorPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tOption,\n\tOptionsPropType,\n\tSingleSelectAPI,\n\tSingleSelectStates,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { showExpertSlot } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, Fragment, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { SingleSelectController } from './controller';\nimport { KolIconTag, KolInputWcTag } from '../../core/component-names';\nimport { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';\nimport { getRenderStates } from '../input/controller';\nimport { translate } from '../../i18n';\nimport clsx from 'clsx';\n\n/**\n * @slot - The input field label.\n */\n@Component({\n\ttag: 'kol-single-select',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSingleSelect implements SingleSelectAPI {\n\t@Element() private readonly host?: HTMLKolSingleSelectElement;\n\tprivate refInput?: HTMLInputElement;\n\tprivate refOptions: HTMLLIElement[] = [];\n\tprivate oldValue?: string;\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<string | undefined> {\n\t\treturn this.state._value;\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.refInput?.focus();\n\t}\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.refInput = ref;\n\t};\n\n\tprivate toggleListbox = (event: Event) => {\n\t\tevent?.preventDefault();\n\t\tif (this.state._disabled) {\n\t\t\treturn;\n\t\t} else {\n\t\t\tthis._isOpen = !this._isOpen;\n\t\t\tif (this._isOpen) {\n\t\t\t\tthis.refInput?.focus();\n\t\t\t\tconst selectedIndex = Array.isArray(this._filteredOptions) ? this._filteredOptions.findIndex((option) => option.label === this._inputValue) : -1;\n\t\t\t\tthis._focusedOptionIndex = selectedIndex >= 0 ? selectedIndex : 0;\n\t\t\t\tthis.focusOption(this._focusedOptionIndex);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate onBlur() {\n\t\tif (Array.isArray(this.state._options) && this.state._options.length > 0 && !this.state._options.some((option) => option.label === this._inputValue)) {\n\t\t\tthis._inputValue = this.state._options.find((option) => (option as Option<string>).value === this.state._value)?.label as string;\n\t\t\tthis._filteredOptions = [...this.state._options];\n\t\t}\n\t\tthis._isOpen = false;\n\t}\n\n\tprivate clearSelection() {\n\t\tif (this.state._disabled) {\n\t\t\treturn;\n\t\t} else {\n\t\t\tthis._focusedOptionIndex = -1;\n\t\t\tthis.state._value = '';\n\t\t\tthis._inputValue = '';\n\t\t\tthis._filteredOptions = [...this.state._options];\n\n\t\t\tthis.controller.setFormAssociatedValue(this.state._value);\n\t\t}\n\t}\n\n\tprivate selectOption(event: Event, option: Option<string>) {\n\t\tthis.state._value = option.value;\n\t\tthis._inputValue = option.label as string;\n\t\tthis.controller.onFacade.onChange(event, option.value);\n\t\tthis.controller.onFacade.onInput(event, false, option.value);\n\n\t\tthis._filteredOptions = [...this.state._options];\n\n\t\tthis.controller.setFormAssociatedValue(this.state._value);\n\t}\n\n\tprivate onInput(event: Event) {\n\t\tconst target = event.target as HTMLInputElement;\n\t\tthis._inputValue = target.value;\n\t\tthis._isOpen = true;\n\t\tthis.setFilteredOptionsByQuery(target.value);\n\t\tthis._focusedOptionIndex = -1;\n\t}\n\n\tprivate handleKeyDownDropdown(event: KeyboardEvent) {\n\t\tif (event.key.length === 1 && /[a-z0-9]/i.test(event.key)) {\n\t\t\tevent.preventDefault();\n\t\t\tthis._isOpen = true;\n\t\t\tthis.focusSuggestionStartingWith(event.key);\n\t\t}\n\t}\n\n\tprivate setFilteredOptionsByQuery(query: string) {\n\t\tif (query?.trim() === '') {\n\t\t\tthis._filteredOptions = [...this.state._options];\n\t\t} else if (Array.isArray(this.state._options) && this.state._options.length > 0 && query.length > 0) {\n\t\t\tthis._filteredOptions = this.state._options.filter((option) => {\n\t\t\t\treturn (option.label as string)?.toLowerCase()?.includes(query?.toLowerCase());\n\t\t\t});\n\t\t}\n\t}\n\n\tprivate _focusedOptionIndex: number = -1;\n\n\tprivate moveFocus(delta: number) {\n\t\tif (!this._filteredOptions) {\n\t\t\treturn;\n\t\t}\n\t\tlet newIndex = this._focusedOptionIndex + delta;\n\n\t\tif (newIndex >= this._filteredOptions.length) {\n\t\t\tnewIndex = 0;\n\t\t}\n\n\t\tif (newIndex < 0) {\n\t\t\tnewIndex = this._filteredOptions.length - 1;\n\t\t}\n\n\t\tthis._focusedOptionIndex = newIndex;\n\t\tthis.focusOption(this._focusedOptionIndex);\n\t}\n\n\tprivate focusOption(index: number) {\n\t\tif (this.refOptions) {\n\t\t\tconst optionElement = this.refOptions[index];\n\t\t\toptionElement?.focus();\n\t\t}\n\t}\n\n\tprivate focusSuggestionStartingWith(char: string) {\n\t\tconst charLowerCase = char.toLowerCase();\n\n\t\tconst index =\n\t\t\tArray.isArray(this._filteredOptions) && this._filteredOptions.findIndex((option) => (option.label as string).toLowerCase().startsWith(charLowerCase));\n\n\t\tif (typeof index === 'number') {\n\t\t\tthis._focusedOptionIndex = index;\n\t\t\tthis.focusOption(index);\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\n\t\treturn (\n\t\t\t<Host class=\"kol-single-select\">\n\t\t\t\t<div class={`single-select ${this.state._disabled === true ? 'disabled' : ''} `}>\n\t\t\t\t\t<KolInputWcTag\n\t\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t\t_msg={this.state._msg}\n\t\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t\t<span class=\"access-key-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t{this.state._accessKey}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t\t<div class=\"single-select__group\">\n\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\t\t\tclass=\"single-select__input\"\n\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\taria-autocomplete=\"both\"\n\t\t\t\t\t\t\t\t\taria-controls=\"listbox\"\n\t\t\t\t\t\t\t\t\tvalue={this._inputValue}\n\t\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\t\taria-activedescendant={this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined}\n\t\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\t\tonInput={this.onInput.bind(this)}\n\t\t\t\t\t\t\t\t\tonChange={this.onChange.bind(this)}\n\t\t\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\t\t\tonClick={this.toggleListbox.bind(this)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{this._inputValue && (\n\t\t\t\t\t\t\t\t\t<KolIconTag\n\t\t\t\t\t\t\t\t\t\t_icons=\"codicon codicon-close\"\n\t\t\t\t\t\t\t\t\t\t_label={translate('kol-delete-selection')}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tthis.clearSelection();\n\t\t\t\t\t\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tclass=\"single-select__delete\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t<button tabindex=\"-1\" class=\"single-select__button\" onClick={this.toggleListbox.bind(this)} disabled={this.state._disabled}>\n\t\t\t\t\t\t\t\t\t<KolIconTag _icons=\"codicon codicon-triangle-down\" _label={translate('kol-dropdown')} />\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{this._isOpen && !(this.state._disabled === true) && (\n\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\t\t\t\t\tclass={clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden')}\n\t\t\t\t\t\t\t\t\tonKeyDown={this.handleKeyDownDropdown.bind(this)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\tthis._filteredOptions.map((option, index) => (\n\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\tid={`option-${index}`}\n\t\t\t\t\t\t\t\t\t\t\t\tkey={`-${index}`}\n\t\t\t\t\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) this.refOptions[index] = el;\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-selected={this.state._value === (option as Option<string>).value}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={(event: Event) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.selectOption(event, option as Option<string>);\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.toggleListbox(event);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonMouseOver={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (!this.blockSuggestionMouseOver) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis._focusedOptionIndex = index;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.focusOption(index);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonFocus={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis._focusedOptionIndex = index;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.focusOption(index);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"single-select__item\"\n\t\t\t\t\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (e.key === 'Enter' || e.key === 'NumpadEnter') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.selectOption(e, option as Option<string>);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.toggleListbox(e);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"visually-hidden\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tname=\"options\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tid={`option-radio-${index}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\tvalue={(option as Option<string>).value}\n\t\t\t\t\t\t\t\t\t\t\t\t\tchecked={this.state._value === (option as Option<string>).value || index === this._focusedOptionIndex}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t\t\t\t\t<label htmlFor={`option-radio-${index}`} class=\"radio-label\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t))\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<li class=\"single-select__no-results-message\">{translate('kol-no-results-message')} </li>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</KolInputWcTag>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('focusout', { target: 'window' })\n\tpublic handleFocusOut() {\n\t\tsetTimeout(() => {\n\t\t\tif (!this.host?.contains(document.activeElement)) {\n\t\t\t\tthis.onBlur();\n\t\t\t}\n\t\t}, 0);\n\t}\n\t@Listen('blur', { target: 'window' })\n\tpublic handleWindowBlur() {\n\t\tthis.onBlur();\n\t}\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent) {\n\t\tconst handleEvent = (isOpen?: boolean, callback?: () => void): void => {\n\t\t\tevent.preventDefault();\n\n\t\t\tif (isOpen !== undefined) {\n\t\t\t\tthis._isOpen = isOpen;\n\t\t\t\tif (!isOpen) {\n\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t}\n\t\t\t}\n\t\t\tcallback?.();\n\t\t};\n\n\t\tswitch (event.key) {\n\t\t\tcase 'Down':\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(true, () => this.moveFocus(1));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Up':\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(true, () => this.moveFocus(-1));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Tab':\n\t\t\t\tif (this._isOpen) {\n\t\t\t\t\tthis._isOpen = !this._isOpen;\n\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'Esc':\n\t\t\tcase 'Escape': {\n\t\t\t\thandleEvent(false);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase ' ': {\n\t\t\t\tif (this._isOpen) {\n\t\t\t\t\tif (Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0) {\n\t\t\t\t\t\tthis.selectOption(event, this._filteredOptions[this._focusedOptionIndex] as Option<string>);\n\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\thandleEvent(false);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tthis.toggleListbox(event);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'NumpadEnter':\n\t\t\tcase 'Enter': {\n\t\t\t\tthis.toggleListbox(event);\n\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Home': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => {\n\t\t\t\t\tif (this._isOpen) {\n\t\t\t\t\t\tthis._focusedOptionIndex = 0;\n\t\t\t\t\t\tthis.focusOption(this._focusedOptionIndex);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'End': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => {\n\t\t\t\t\tif (this._isOpen) {\n\t\t\t\t\t\tthis._focusedOptionIndex = this._filteredOptions ? this._filteredOptions.length - 1 : 0;\n\t\t\t\t\t\tthis.focusOption(this._focusedOptionIndex);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'PageUp': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => this._isOpen && this.moveFocus(-10));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'PageDown': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => this._isOpen && this.moveFocus(10));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate readonly controller: SingleSelectController;\n\t@State()\n\tprivate _isOpen = false;\n\t@State()\n\tprivate _filteredOptions?: OptionsPropType = [];\n\t@State()\n\tprivate _inputValue: string = '';\n\t@State()\n\tprivate blockSuggestionMouseOver: boolean = false;\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: MsgPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from.\n\t */\n\t@Prop() public _options!: OptionsPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true }) public _value?: string;\n\n\t@State() public state: SingleSelectStates = {\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_options: [],\n\t\t_value: '',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SingleSelectController(this, 'single-select', this.host);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: MsgPropType): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t\tthis._filteredOptions = value;\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t\tthis.oldValue = value;\n\t}\n\n\t@Listen('mousemove')\n\tpublic handleMouseEvent() {\n\t\tthis.blockSuggestionMouseOver = false;\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.refOptions = [];\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.oldValue = this._value;\n\t\tthis._filteredOptions = this._options;\n\n\t\tif (Array.isArray(this._options)) {\n\t\t\tconst matchedOption = this._options.find((option) => (option as Option<string>).value === this._value);\n\t\t\tthis._inputValue = matchedOption ? (matchedOption.label as string) : '';\n\t\t}\n\t}\n\n\tprivate onChange(event: Event): void {\n\t\tif (this.oldValue !== this.refInput?.value) {\n\t\t\tthis.oldValue = this.refInput?.value;\n\t\t}\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('change', this.host, this._value);\n\n\t\t// Callback\n\t\tif (typeof this.state._on?.onChange === 'function' && !this._isOpen) {\n\t\t\tthis.state._on.onChange(event, this._value && this.oldValue !== this.refInput?.value);\n\t\t}\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["SingleSelectController","InputIconController","constructor","component","name","host","super","this","keyOptionMap","Map","afterPatchOptions","value","_state","_component","key","setFormAssociatedValue","beforePatchOptions","_value","nextState","options","has","get","state","_options","Array","isArray","length","clear","fillKeyOptionMap","validateOptions","hooks","afterPatch","beforePatch","validateRequired","watchBoolean","validateValue","watchString","validateMsg","validatePlaceholder","componentWillLoad","_required","_placeholder","defaultStyleCss","KolSingleSelectDefaultStyle0","KolSingleSelect","getValue","kolFocus","_a","refInput","focus","onBlur","some","option","label","_inputValue","find","_filteredOptions","_isOpen","clearSelection","_disabled","_focusedOptionIndex","controller","selectOption","event","onFacade","onChange","onInput","target","setFilteredOptionsByQuery","handleKeyDownDropdown","test","preventDefault","focusSuggestionStartingWith","query","trim","filter","_b","toLowerCase","includes","moveFocus","delta","newIndex","focusOption","index","refOptions","optionElement","char","charLowerCase","findIndex","startsWith","render","hasExpertSlot","showExpertSlot","_label","ariaDescribedBy","getRenderStates","h","Host","class","KolInputWcTag","_accessKey","_hideError","_hideLabel","_hint","_icons","_id","_msg","_tooltipAlign","_touched","role","slot","Fragment","InternalUnderlinedAccessKey","accessKey","Object","assign","ref","catchRef","type","join","undefined","autoCapitalize","autoCorrect","disabled","_name","required","spellcheck","bind","placeholder","onClick","toggleListbox","KolIconTag","translate","tabindex","clsx","blockSuggestionMouseOver","onKeyDown","map","id","el","tabIndex","onMouseOver","onFocus","e","checked","htmlFor","handleFocusOut","setTimeout","contains","document","activeElement","handleWindowBlur","handleKeyDown","handleEvent","isOpen","callback","hostRef","selectedIndex","nonce","validateAccessKey","validateAlert","validateDisabled","validateHideError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateName","validateOn","updateInputValue","validateSyncValueBySelector","validateTabIndex","validateTouched","oldValue","handleMouseEvent","matchedOption","_alert","stopPropagation","tryToDispatchKoliBriEvent","_c","_on","_d"],"sources":["src/components/single-select/controller.ts","src/components/single-select/style.scss?tag=kol-single-select&mode=default&encapsulation=shadow","src/components/single-select/shadow.tsx"],"sourcesContent":["import type { SingleSelectWatches, SingleSelectProps, MsgPropType, OptionsPropType, Option, SelectOption, W3CInputValue } from '../../schema';\nimport { watchBoolean, watchString, validateMsg, validateOptions } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\n\nimport type { Generic } from 'adopted-style-sheets';\nexport class SingleSelectController extends InputIconController implements SingleSelectWatches {\n\tprotected readonly component: Generic.Element.Component & SingleSelectProps;\n\tprivate readonly keyOptionMap = new Map<string, Option<string>>();\n\n\tpublic constructor(component: Generic.Element.Component & SingleSelectProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tprotected readonly afterPatchOptions = (value: unknown, _state: Record<string, unknown>, _component: Generic.Element.Component, key: string): void => {\n\t\tif (key === '_value') {\n\t\t\tthis.setFormAssociatedValue(value as string);\n\t\t}\n\t};\n\n\tprotected readonly beforePatchOptions = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst options = nextState.has('_options') ? nextState.get('_options') : this.component.state._options;\n\t\tif (Array.isArray(options) && options.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, options as SelectOption<W3CInputValue>[]);\n\t\t}\n\t};\n\n\tpublic validateOptions(value?: OptionsPropType): void {\n\t\tvalidateOptions(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value);\n\t}\n\tpublic validateMsg(value?: MsgPropType): void {\n\t\tvalidateMsg(this.component, value);\n\t}\n\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateOptions(this.component._options);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateValue(this.component._value);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t}\n}\n","@import '../@shared/mixins';\n@import '../input-line';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.single-select {\n\t\tposition: relative;\n\n\t\t&.disabled,\n\t\t&.disabled * {\n\t\t\tcursor: not-allowed !important;\n\t\t}\n\n\t\t&__group {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t&__input {\n\t\t\tflex-grow: 1;\n\t\t}\n\n\t\t&__button {\n\t\t\theight: var(--a11y-min-size);\n\t\t\twidth: var(--a11y-min-size);\n\t\t}\n\n\t\t&__listbox {\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\tlist-style-type: none;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\toverflow-y: auto;\n\t\t\toverflow-x: hidden;\n\t\t\tz-index: 2;\n\t\t\tbackground-color: white;\n\t\t\tmax-height: rem(250);\n\t\t}\n\n\t\t&__item {\n\t\t\t&.highlighted {\n\t\t\t\tbackground-color: #f0f0f0;\n\t\t\t}\n\t\t\t.single-select__listbox--cursor-hidden & {\n\t\t\t\tcursor: none !important;\n\t\t\t}\n\t\t}\n\n\t\t&__no-results-message {\n\t\t\tcursor: default;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tmin-height: rem(50);\n\t\t}\n\t}\n}\n","import type {\n\tHideErrorPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tOption,\n\tOptionsPropType,\n\tSingleSelectAPI,\n\tSingleSelectStates,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { showExpertSlot } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, Fragment, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { SingleSelectController } from './controller';\nimport { KolIconTag, KolInputWcTag } from '../../core/component-names';\nimport { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';\nimport { getRenderStates } from '../input/controller';\nimport { translate } from '../../i18n';\nimport clsx from 'clsx';\n\n/**\n * @slot - The input field label.\n */\n@Component({\n\ttag: 'kol-single-select',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSingleSelect implements SingleSelectAPI {\n\t@Element() private readonly host?: HTMLKolSingleSelectElement;\n\tprivate refInput?: HTMLInputElement;\n\tprivate refOptions: HTMLLIElement[] = [];\n\tprivate oldValue?: string;\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<string | undefined> {\n\t\treturn this.state._value;\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.refInput?.focus();\n\t}\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.refInput = ref;\n\t};\n\n\tprivate toggleListbox = (event: Event) => {\n\t\tevent?.preventDefault();\n\t\tif (this.state._disabled) {\n\t\t\treturn;\n\t\t} else {\n\t\t\tthis._isOpen = !this._isOpen;\n\t\t\tif (this._isOpen) {\n\t\t\t\tthis.refInput?.focus();\n\t\t\t\tconst selectedIndex = Array.isArray(this._filteredOptions) ? this._filteredOptions.findIndex((option) => option.label === this._inputValue) : -1;\n\t\t\t\tthis._focusedOptionIndex = selectedIndex >= 0 ? selectedIndex : 0;\n\t\t\t\tthis.focusOption(this._focusedOptionIndex);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate onBlur() {\n\t\tif (Array.isArray(this.state._options) && this.state._options.length > 0 && !this.state._options.some((option) => option.label === this._inputValue)) {\n\t\t\tthis._inputValue = this.state._options.find((option) => (option as Option<string>).value === this.state._value)?.label as string;\n\t\t\tthis._filteredOptions = [...this.state._options];\n\t\t}\n\t\tthis._isOpen = false;\n\t}\n\n\tprivate clearSelection() {\n\t\tif (this.state._disabled) {\n\t\t\treturn;\n\t\t} else {\n\t\t\tthis._focusedOptionIndex = -1;\n\t\t\tthis.state._value = '';\n\t\t\tthis._inputValue = '';\n\t\t\tthis._filteredOptions = [...this.state._options];\n\n\t\t\tthis.controller.setFormAssociatedValue(this.state._value);\n\t\t}\n\t}\n\n\tprivate selectOption(event: Event, option: Option<string>) {\n\t\tthis.state._value = option.value;\n\t\tthis._inputValue = option.label as string;\n\t\tthis.controller.onFacade.onChange(event, option.value);\n\t\tthis.controller.onFacade.onInput(event, false, option.value);\n\n\t\tthis._filteredOptions = [...this.state._options];\n\n\t\tthis.controller.setFormAssociatedValue(this.state._value);\n\t}\n\n\tprivate onInput(event: Event) {\n\t\tconst target = event.target as HTMLInputElement;\n\t\tthis._inputValue = target.value;\n\t\tthis._isOpen = true;\n\t\tthis.setFilteredOptionsByQuery(target.value);\n\t\tthis._focusedOptionIndex = -1;\n\t}\n\n\tprivate handleKeyDownDropdown(event: KeyboardEvent) {\n\t\tif (event.key.length === 1 && /[a-z0-9]/i.test(event.key)) {\n\t\t\tevent.preventDefault();\n\t\t\tthis._isOpen = true;\n\t\t\tthis.focusSuggestionStartingWith(event.key);\n\t\t}\n\t}\n\n\tprivate setFilteredOptionsByQuery(query: string) {\n\t\tif (query?.trim() === '') {\n\t\t\tthis._filteredOptions = [...this.state._options];\n\t\t} else if (Array.isArray(this.state._options) && this.state._options.length > 0 && query.length > 0) {\n\t\t\tthis._filteredOptions = this.state._options.filter((option) => {\n\t\t\t\treturn (option.label as string)?.toLowerCase()?.includes(query?.toLowerCase());\n\t\t\t});\n\t\t}\n\t}\n\n\tprivate _focusedOptionIndex: number = -1;\n\n\tprivate moveFocus(delta: number) {\n\t\tif (!this._filteredOptions) {\n\t\t\treturn;\n\t\t}\n\t\tlet newIndex = this._focusedOptionIndex + delta;\n\n\t\tif (newIndex >= this._filteredOptions.length) {\n\t\t\tnewIndex = 0;\n\t\t}\n\n\t\tif (newIndex < 0) {\n\t\t\tnewIndex = this._filteredOptions.length - 1;\n\t\t}\n\n\t\tthis._focusedOptionIndex = newIndex;\n\t\tthis.focusOption(this._focusedOptionIndex);\n\t}\n\n\tprivate focusOption(index: number) {\n\t\tif (this.refOptions) {\n\t\t\tconst optionElement = this.refOptions[index];\n\t\t\toptionElement?.focus();\n\t\t}\n\t}\n\n\tprivate focusSuggestionStartingWith(char: string) {\n\t\tconst charLowerCase = char.toLowerCase();\n\n\t\tconst index =\n\t\t\tArray.isArray(this._filteredOptions) && this._filteredOptions.findIndex((option) => (option.label as string).toLowerCase().startsWith(charLowerCase));\n\n\t\tif (typeof index === 'number') {\n\t\t\tthis._focusedOptionIndex = index;\n\t\t\tthis.focusOption(index);\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\n\t\treturn (\n\t\t\t<Host class=\"kol-single-select\">\n\t\t\t\t<div class={`single-select ${this.state._disabled === true ? 'disabled' : ''} `}>\n\t\t\t\t\t<KolInputWcTag\n\t\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t\t_msg={this.state._msg}\n\t\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t\t<span class=\"access-key-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t{this.state._accessKey}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t\t<div class=\"single-select__group\">\n\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\t\t\tclass=\"single-select__input\"\n\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\taria-autocomplete=\"both\"\n\t\t\t\t\t\t\t\t\taria-controls=\"listbox\"\n\t\t\t\t\t\t\t\t\tvalue={this._inputValue}\n\t\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\t\taria-activedescendant={this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined}\n\t\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\t\tonInput={this.onInput.bind(this)}\n\t\t\t\t\t\t\t\t\tonChange={this.onChange.bind(this)}\n\t\t\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\t\t\tonClick={this.toggleListbox.bind(this)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{this._inputValue && (\n\t\t\t\t\t\t\t\t\t<KolIconTag\n\t\t\t\t\t\t\t\t\t\t_icons=\"codicon codicon-close\"\n\t\t\t\t\t\t\t\t\t\t_label={translate('kol-delete-selection')}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tthis.clearSelection();\n\t\t\t\t\t\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tclass=\"single-select__delete\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t<button tabindex=\"-1\" class=\"single-select__button\" onClick={this.toggleListbox.bind(this)} disabled={this.state._disabled}>\n\t\t\t\t\t\t\t\t\t<KolIconTag _icons=\"codicon codicon-triangle-down\" _label={translate('kol-dropdown')} />\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{this._isOpen && !(this.state._disabled === true) && (\n\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\t\t\t\t\tclass={clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden')}\n\t\t\t\t\t\t\t\t\tonKeyDown={this.handleKeyDownDropdown.bind(this)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\tthis._filteredOptions.map((option, index) => (\n\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\tid={`option-${index}`}\n\t\t\t\t\t\t\t\t\t\t\t\tkey={`-${index}`}\n\t\t\t\t\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) this.refOptions[index] = el;\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-selected={this.state._value === (option as Option<string>).value}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={(event: Event) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.selectOption(event, option as Option<string>);\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.toggleListbox(event);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonMouseOver={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (!this.blockSuggestionMouseOver) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis._focusedOptionIndex = index;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.focusOption(index);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonFocus={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis._focusedOptionIndex = index;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.focusOption(index);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"single-select__item\"\n\t\t\t\t\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (e.key === 'Enter' || e.key === 'NumpadEnter') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.selectOption(e, option as Option<string>);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.toggleListbox(e);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"visually-hidden\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tname=\"options\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tid={`option-radio-${index}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\tvalue={(option as Option<string>).value}\n\t\t\t\t\t\t\t\t\t\t\t\t\tchecked={this.state._value === (option as Option<string>).value || index === this._focusedOptionIndex}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t\t\t\t\t<label htmlFor={`option-radio-${index}`} class=\"radio-label\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t))\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<li class=\"single-select__no-results-message\">{translate('kol-no-results-message')} </li>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</KolInputWcTag>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('focusout', { target: 'window' })\n\tpublic handleFocusOut() {\n\t\tsetTimeout(() => {\n\t\t\tif (!this.host?.contains(document.activeElement)) {\n\t\t\t\tthis.onBlur();\n\t\t\t}\n\t\t}, 0);\n\t}\n\t@Listen('blur', { target: 'window' })\n\tpublic handleWindowBlur() {\n\t\tthis.onBlur();\n\t}\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent) {\n\t\tconst handleEvent = (isOpen?: boolean, callback?: () => void): void => {\n\t\t\tevent.preventDefault();\n\n\t\t\tif (isOpen !== undefined) {\n\t\t\t\tthis._isOpen = isOpen;\n\t\t\t\tif (!isOpen) {\n\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t}\n\t\t\t}\n\t\t\tcallback?.();\n\t\t};\n\n\t\tswitch (event.key) {\n\t\t\tcase 'Down':\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(true, () => this.moveFocus(1));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Up':\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(true, () => this.moveFocus(-1));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Tab':\n\t\t\t\tif (this._isOpen) {\n\t\t\t\t\tthis._isOpen = !this._isOpen;\n\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'Esc':\n\t\t\tcase 'Escape': {\n\t\t\t\thandleEvent(false);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase ' ': {\n\t\t\t\tif (this._isOpen) {\n\t\t\t\t\tif (Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0) {\n\t\t\t\t\t\tthis.selectOption(event, this._filteredOptions[this._focusedOptionIndex] as Option<string>);\n\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\thandleEvent(false);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tthis.toggleListbox(event);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'NumpadEnter':\n\t\t\tcase 'Enter': {\n\t\t\t\tthis.toggleListbox(event);\n\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Home': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => {\n\t\t\t\t\tif (this._isOpen) {\n\t\t\t\t\t\tthis._focusedOptionIndex = 0;\n\t\t\t\t\t\tthis.focusOption(this._focusedOptionIndex);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'End': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => {\n\t\t\t\t\tif (this._isOpen) {\n\t\t\t\t\t\tthis._focusedOptionIndex = this._filteredOptions ? this._filteredOptions.length - 1 : 0;\n\t\t\t\t\t\tthis.focusOption(this._focusedOptionIndex);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'PageUp': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => this._isOpen && this.moveFocus(-10));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'PageDown': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => this._isOpen && this.moveFocus(10));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate readonly controller: SingleSelectController;\n\t@State()\n\tprivate _isOpen = false;\n\t@State()\n\tprivate _filteredOptions?: OptionsPropType = [];\n\t@State()\n\tprivate _inputValue: string = '';\n\t@State()\n\tprivate blockSuggestionMouseOver: boolean = false;\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: MsgPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from.\n\t */\n\t@Prop() public _options!: OptionsPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true }) public _value?: string;\n\n\t@State() public state: SingleSelectStates = {\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_options: [],\n\t\t_value: '',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SingleSelectController(this, 'single-select', this.host);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: MsgPropType): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t\tthis._filteredOptions = value;\n\t\tthis.updateInputValue(this._value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t\tthis.oldValue = value;\n\t\tthis.updateInputValue(value);\n\t}\n\n\t@Listen('mousemove')\n\tpublic handleMouseEvent() {\n\t\tthis.blockSuggestionMouseOver = false;\n\t}\n\n\tprivate updateInputValue(value?: string) {\n\t\tif (Array.isArray(this._options)) {\n\t\t\tconst matchedOption = this._options.find((option) => (option as Option<string>).value === value);\n\t\t\tthis._inputValue = matchedOption ? (matchedOption.label as string) : '';\n\t\t}\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.refOptions = [];\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.oldValue = this._value;\n\t\tthis._filteredOptions = this._options;\n\t\tthis.updateInputValue(this._value);\n\t}\n\n\tprivate onChange(event: Event): void {\n\t\tif (this.oldValue !== this.refInput?.value) {\n\t\t\tthis.oldValue = this.refInput?.value;\n\t\t}\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('change', this.host, this._value);\n\n\t\t// Callback\n\t\tif (typeof this.state._on?.onChange === 'function' && !this._isOpen) {\n\t\t\tthis.state._on.onChange(event, this._value && this.oldValue !== this.refInput?.value);\n\t\t}\n\t}\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/kolibri/kol-skip-nav.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-cf24d1fe.js";import{r as i,a as o}from"./unique-nav-labels-768d04e9.js";import{w as a}from"./validation-d958b624.js";import{n as s}from"./component-names-0a8a1a6c.js";import{v as l}from"./label-084ed1e7.js";import"./dev.utils-fab45cbc.js";import"./prop.validators-5a58fa40.js";import"./index-5728f164.js";const r="/*\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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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    /*\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    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  ul {\n    display: grid;\n    list-style: none;\n    place-items: center;\n  }\n  ul li {\n    height: 0;\n  }\n  .kol-link-wc a {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1em;\n  }\n  .kol-link-wc a:focus {\n    background-color: #fff;\n    left: unset;\n    position: unset;\n  }\n}",d=r,h=class{constructor(e){n(this,e),this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return e(t,{key:"4e6cc58e69b97bfdafd1f342755908836984e6c0",class:"kol-skip-nav"},e("nav",{key:"436a02841a32b66e829b2f80021a0530cd404f68","aria-label":this.state._label},e("ul",{key:"f3475e1b8c53cb26b3cd00b21c1ce5eac570bc61"},this.state._links.map(((n,t)=>e("li",{key:t},e(s,Object.assign({},n))))))))}validateLabel(n,e,t=!1){t||i(this.state._label),l(this,n,{required:!0}),o(this.state._label)}validateLinks(n){a("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){i(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};h.style={default:d};export{h as kol_skip_nav};
+import{r as n,h as e,H as t}from"./index-d62ddd65.js";import{r as i,a as o}from"./unique-nav-labels-768d04e9.js";import{w as a}from"./validation-25fb8bf6.js";import{m as s}from"./component-names-7f2c991e.js";import{v as l}from"./label-541a8424.js";import"./dev.utils-fab45cbc.js";import"./prop.validators-543d0c7b.js";import"./index-fcc5bd94.js";const r="/*\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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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    /*\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    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  ul {\n    display: grid;\n    list-style: none;\n    place-items: center;\n  }\n  ul li {\n    height: 0;\n  }\n  .kol-link-wc a {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1em;\n  }\n  .kol-link-wc a:focus {\n    background-color: #fff;\n    left: unset;\n    position: unset;\n  }\n}",d=r,h=class{constructor(e){n(this,e),this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return e(t,{key:"fecb65c3459444209944ef2be84806c0909de41e",class:"kol-skip-nav"},e("nav",{key:"504d741b0dd97fbe8661ff5321600bd151d7a808","aria-label":this.state._label},e("ul",{key:"499e536d5a4baa2fffd5fe6c7457fb2b7f225426"},this.state._links.map(((n,t)=>e("li",{key:t},e(s,Object.assign({},n))))))))}validateLabel(n,e,t=!1){t||i(this.state._label),l(this,n,{required:!0}),o(this.state._label)}validateLinks(n){a("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){i(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};h.style={default:d};export{h as kol_skip_nav};