@public-ui/components 3.0.0-alpha.0 → 3.0.0-be4b07a21043aa6a0cb628307b66a710b79a4b78.0

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,F as e,H as i,r as n,g as s}from"./index-a0b4dca2.js";import{n as o}from"./dev.utils-5d039f3c.js";import{s as a,t as l}from"./events-29e84d75.js";import{I as r}from"./controller-icon-30817124.js";import{f as h,b as d}from"./controller-b379ae04.js";import{b as c,i as u}from"./prop.validators-c5e6ad2d.js";import{i as p,d as f}from"./component-names-aa3cbc3c.js";import{g as b}from"./controller-ae3a41a0.js";import{t as m}from"./i18n-5fe08f1c.js";import{c as v}from"./clsx-09a06a12.js";import{I as y}from"./InternalUnderlinedBadgeText-3e2de35c.js";import{s as g,b as k}from"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./icons-f3b7aabd.js";import"./common-54bf85ba.js";import"./label-d70e7c34.js";import"./index-541b643a.js";import"./associated.controller-bce3d721.js";import"./access-and-short-key-864aafba.js";import"./tooltip-align-c001aae2.js";import"./align-3f029493.js";import"./hide-label-db0db59c.js";import"./i18n-7ea9f137.js";class w extends r{constructor(t,e,i){super(t,e,i),this.keyOptionMap=new Map,this.afterPatchOptions=(t,e,i,n)=>{"_value"===n&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const i=e.has("_options")?e.get("_options"):this.component.state._options;Array.isArray(i)&&i.length>0&&(this.keyOptionMap.clear(),h(this.keyOptionMap,i))},this.component=t}validateOptions(t){d(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(t){c(this.component,"_required",t)}validateValue(t){u(this.component,"_value",t)}validatePlaceholder(t){u(this.component,"_placeholder",t)}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder)}}const _="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :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=_,z=class{async getValue(){return this.state._value}async kolFocus(){var t;null===(t=this.refInput)||void 0===t||t.focus()}onBlur(){var t;Array.isArray(this.state._options)&&this.state._options.length>0&&!this.state._options.some((t=>t.label===this._inputValue))&&(this._inputValue=null===(t=this.state._options.find((t=>t.value===this.state._value)))||void 0===t?void 0:t.label,this._filteredOptions=[...this.state._options]),this._isOpen=!1}clearSelection(){this.state._disabled||(this._focusedOptionIndex=-1,this.state._value="",this._inputValue="",this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this.state._value))}selectOption(t,e){this.state._value=e.value,this._inputValue=e.label,this.controller.onFacade.onChange(t,e.value),this.controller.onFacade.onInput(t,!1,e.value),this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this.state._value)}onInput(t){const e=t.target;this._inputValue=e.value,this._isOpen=!0,this.setFilteredOptionsByQuery(e.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(t){1===t.key.length&&/[a-z0-9]/i.test(t.key)&&(t.preventDefault(),this._isOpen=!0,this.focusSuggestionStartingWith(t.key))}setFilteredOptionsByQuery(t){""===(null==t?void 0:t.trim())?this._filteredOptions=[...this.state._options]:Array.isArray(this.state._options)&&this.state._options.length>0&&t.length>0&&(this._filteredOptions=this.state._options.filter((e=>{var i,n;return null===(n=null===(i=e.label)||void 0===i?void 0:i.toLowerCase())||void 0===n?void 0:n.includes(null==t?void 0:t.toLowerCase())})))}moveFocus(t){if(!this._filteredOptions)return;let e=this._focusedOptionIndex+t;e>=this._filteredOptions.length&&(e=0),e<0&&(e=this._filteredOptions.length-1),this._focusedOptionIndex=e,this.focusOption(this._focusedOptionIndex)}focusOption(t){if(this.refOptions){const e=this.refOptions[t];null==e||e.focus()}}focusSuggestionStartingWith(t){const e=t.toLowerCase(),i=Array.isArray(this._filteredOptions)&&this._filteredOptions.findIndex((t=>t.label.toLowerCase().startsWith(e)));"number"==typeof i&&(this._focusedOptionIndex=i,this.focusOption(i))}render(){const n=g(this.state._label),{ariaDescribedBy:s}=b(this.state);return t(i,{key:"6658e0bebb883a05591e2daaa4267ffb93a1ab13",class:"kol-single-select"},t("div",{key:"15e169ffe4a08ef6deb322c8457bacc25baca5d5",class:`single-select ${!0===this.state._disabled?"disabled":""} `},t(p,{key:"8c7c96c2ff1a31992baa943d99f309d0cc1adf96",_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,role:"presentation"},t("span",{key:"65fbbe685ba439be2a42a4fc0ebe12629ebb6267",slot:"label"},n?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?t(e,null,t(y,{badgeText:k(this.state._accessKey||this.state._shortKey),label:this.state._label})," ",t("span",{class:"access-key-hint","aria-hidden":"true"},k(this.state._accessKey||this.state._shortKey))):t("span",null,this.state._label)),t("div",{key:"0a4e20765064ce5d4d9c46010caf71d391cd6dcc",slot:"input"},t("div",{key:"d5dff50c04756d8c32ae329260a694a44262dd9d",class:"single-select__group"},t("input",Object.assign({key:"13e2e8bef8a84eccdff400a4b13b39886cd3d58c",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),onClick:this.toggleListbox.bind(this),onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1},placeholder:this.state._placeholder})),this._inputValue&&t(f,{key:"868c15c5893d80187d1c252ec6a2e4f2fe987e96",_icons:"codicon codicon-close",_label:m("kol-delete-selection"),onClick:()=>{var t;this.clearSelection(),null===(t=this.refInput)||void 0===t||t.focus()},class:"single-select__delete"}),t("button",{key:"ce952130423851c2c36387ff74840ade1b74e902",tabindex:"-1",class:"single-select__button",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled},t(f,{key:"70b05fd38284405f574699cb6427600305dc03f6",_icons:"codicon codicon-triangle-down",_label:m("kol-dropdown")}))),this._isOpen&&!(!0===this.state._disabled)&&t("ul",{key:"6da18670b1b4b4c0cd357e3982c872f479f725aa",role:"listbox",class:v("single-select__listbox",this.blockSuggestionMouseOver&&"single-select__listbox--cursor-hidden"),onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0?this._filteredOptions.map(((e,i)=>t("li",{id:`option-${i}`,key:`-${i}`,ref:t=>{t&&(this.refOptions[i]=t)},tabIndex:-1,role:"option","aria-selected":this.state._value===e.value,onClick:t=>{var i;this.selectOption(t,e),null===(i=this.refInput)||void 0===i||i.focus(),this.toggleListbox(t)},onMouseOver:()=>{this.blockSuggestionMouseOver||(this._focusedOptionIndex=i,this.focusOption(i))},onFocus:()=>{this._focusedOptionIndex=i,this.focusOption(i)},class:"single-select__item",onKeyDown:t=>{var i;"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(t,e),null===(i=this.refInput)||void 0===i||i.focus(),this.toggleListbox(t),t.preventDefault())}},t("input",{class:"visually-hidden",type:"radio",name:"options",id:`option-radio-${i}`,value:e.value,checked:this.state._value===e.value||i===this._focusedOptionIndex}),t("label",{htmlFor:`option-radio-${i}`,class:"radio-label"},e.label)))):t("li",{class:"single-select__no-results-message"},m("kol-no-results-message")," "))))))}handleFocusOut(){setTimeout((()=>{var t;(null===(t=this.host)||void 0===t?void 0:t.contains(document.activeElement))||this.onBlur()}),0)}handleWindowBlur(){this.onBlur()}handleKeyDown(t){var e,i;const n=(e,i)=>{var n;t.preventDefault(),void 0!==e&&(this._isOpen=e,e||null===(n=this.refInput)||void 0===n||n.focus()),null==i||i()};switch(t.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,n(!0,(()=>this.moveFocus(1)));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,n(!0,(()=>this.moveFocus(-1)));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus());break;case"Esc":case"Escape":n(!1);break;case" ":this._isOpen?Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0&&(this.selectOption(t,this._filteredOptions[this._focusedOptionIndex]),null===(i=this.refInput)||void 0===i||i.focus(),n(!1)):this.toggleListbox(t);break;case"NumpadEnter":case"Enter":this.toggleListbox(t);break;case"Home":this.blockSuggestionMouseOver=!0,n(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=0,this.focusOption(this._focusedOptionIndex))}));break;case"End":this.blockSuggestionMouseOver=!0,n(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=this._filteredOptions?this._filteredOptions.length-1:0,this.focusOption(this._focusedOptionIndex))}));break;case"PageUp":this.blockSuggestionMouseOver=!0,n(void 0,(()=>this._isOpen&&this.moveFocus(-10)));break;case"PageDown":this.blockSuggestionMouseOver=!0,n(void 0,(()=>this._isOpen&&this.moveFocus(10)))}}constructor(t){n(this,t),this.refOptions=[],this.catchRef=t=>{this.refInput=t},this.toggleListbox=t=>{var e;if(null==t||t.preventDefault(),!this.state._disabled&&(this._isOpen=!this._isOpen,this._isOpen)){null===(e=this.refInput)||void 0===e||e.focus();const t=Array.isArray(this._filteredOptions)?this._filteredOptions.findIndex((t=>t.label===this._inputValue)):-1;this._focusedOptionIndex=t>=0?t: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=void 0,this._disabled=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${o()}`,_label:"",_options:[],_value:""},this.inputHasFocus=!1,this.controller=new w(this,"single-select",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t),this._filteredOptions=t,this.updateInputValue(this._value)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t),this.oldValue=t,this.updateInputValue(t)}handleMouseEvent(){this.blockSuggestionMouseOver=!1}updateInputValue(t){if(Array.isArray(this._options)){const e=this._options.find((e=>e.value===t));this._inputValue=e?e.label:""}}componentWillLoad(){this.refOptions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.oldValue=this._value,this._filteredOptions=this._options,this.updateInputValue(this._value)}onChange(t){var e,i,n,s;this.oldValue!==(null===(e=this.refInput)||void 0===e?void 0:e.value)&&(this.oldValue=null===(i=this.refInput)||void 0===i?void 0:i.value),a(t),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(t,this._value&&this.oldValue!==(null===(s=this.refInput)||void 0===s?void 0:s.value))}static get delegatesFocus(){return!0}get host(){return s(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};z.style={default:x};export{z as kol_single_select};
+import{h as t,r as e,g as i}from"./index-edc52e9a.js";import{c as n}from"./clsx-09a06a12.js";import{d as s}from"./component-names-7ee7402b.js";import{K as o}from"./InputStateWrapper-0ed64599.js";import{g as a,C as l,a as r,b as h}from"./CustomSuggestionsOptionsGroup-47ceeab4.js";import{t as d}from"./i18n-efbafc80.js";import{n as c}from"./dev.utils-929e1acf.js";import{I as u,K as f}from"./controller-icon-995c428f.js";import{f as p,b as m}from"./controller-063d5c45.js";import{b,w as v,i as g,k}from"./prop.validators-88c9b979.js";import{K as y}from"./getRenderStates-b88b42f9.js";import"./tslib.es6-1173d062.js";import"./Input-b793aff5.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";import"./dev.utils-fab45cbc.js";import"./InternalUnderlinedBadgeText-e8c91d26.js";import"./isArray-7a60fa7f.js";import"./isObject-ffcbbb76.js";import"./Icon-f05b8711.js";import"./icons-d25189f5.js";import"./common-54bf85ba.js";import"./label-2ad83395.js";import"./index-671d0471.js";import"./events-5886c68b.js";import"./associated.controller-1ab80645.js";import"./access-and-short-key-54e15dc2.js";import"./tooltip-align-e56f6624.js";import"./align-2b579693.js";import"./hide-label-46f53ae1.js";import"./Alert-481331b1.js";import"./bem-e4c3a2e6.js";import"./browser-f629a56a.js";import"./Heading-eeec6af2.js";class _ extends u{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;Array.isArray(n)&&n.length>0&&(this.keyOptionMap.clear(),p(this.keyOptionMap,n))},this.component=e}validateOptions(e){m(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){b(this.component,"_required",e)}validateValue(e){v(this.component,"_value",(e=>void 0!==e),new Set(["KoliBriUnknown"]),e)}validatePlaceholder(e){g(this.component,"_placeholder",e)}validateHideClearButton(e){b(this.component,"_hideClearButton",e)}validateRows(e){k(this.component,"_rows",e)}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder),this.validateHideClearButton(this.component._hideClearButton),this.validateRows(this.component._rows)}}const 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: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-custom-suggestions-option {\n    cursor: pointer;\n    white-space: normal;\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n    line-height: 1.5;\n    box-sizing: border-box;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n}\n@layer kol-component {\n  .kol-custom-suggestions-options-group {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-custom-suggestions-toggle {\n    align-items: center;\n    display: flex;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-custom-suggestions-toggle:not(:disabled) {\n    cursor: pointer;\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}\n@layer kol-component {\n  .kol-single-select__delete {\n    cursor: pointer;\n  }\n  .kol-single-select__delete--disabled {\n    cursor: not-allowed;\n  }\n  .kol-single-select__no-results-message {\n    cursor: default;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-single-select .kol-custom-suggestions-options-group {\n    max-height: calc((40rem / var(--kolibri-root-font-size, 16)) * var(--visible-options, 5) + (2rem / var(--kolibri-root-font-size, 16))) !important;\n  }\n}",x=w,j=class{async getValue(){return this._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._value)))||void 0===e?void 0:e.label,this._filteredOptions=[...this.state._options]),this._isOpen=!1,this._hasOpened=!1}clearSelection(){if(!this.state._disabled){const e="";this._focusedOptionIndex=-1,this._value=e,this._inputValue=e,this._filteredOptions=[...this.state._options],this.controller.onFacade.onInput(new CustomEvent("input",{bubbles:!0,detail:{name:this.state._name,value:e}}),!0,e),this.controller.onFacade.onChange(new CustomEvent("change",{bubbles:!0,detail:{name:this.state._name,value:e}}),e)}}selectOption(e){this._value=e.value,this._inputValue=e.label,this.controller.onFacade.onInput(new CustomEvent("input",{bubbles:!0,detail:{name:this.state._name,value:e.value}}),!1,e.value),this.controller.onFacade.onChange(new CustomEvent("change",{bubbles:!0,detail:{name:this.state._name,value:e.value}}),e.value),this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this._value)}onInput(e){const t=e.target;this._inputValue=t.value,this._isOpen=!0,this.setFilteredOptionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(e.preventDefault(),this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredOptionsByQuery(e){""===(null==e?void 0:e.trim())?this._filteredOptions=[...this.state._options]:Array.isArray(this.state._options)&&this.state._options.length>0&&e.length>0&&(this._filteredOptions=this.state._options.filter((t=>{var n,i;return null===(i=null===(n=t.label)||void 0===n?void 0:n.toLowerCase())||void 0===i?void 0:i.includes(null==e?void 0:e.toLowerCase())})))}moveFocus(e){if(!this._filteredOptions)return;let t=this._focusedOptionIndex+e;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(),n=Array.isArray(this._filteredOptions)&&this._filteredOptions.findIndex((e=>e.label.toLowerCase().startsWith(t)));"number"==typeof n&&(this._focusedOptionIndex=n,this.focusOption(n))}getFormFieldProps(){return{state:this.state,class:"kol-single-select",tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.refInput)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getInputProps(){const{ariaDescribedBy:e}=a(this.state);return Object.assign(Object.assign({"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,"aria-autocomplete":"both","aria-controls":"listbox","aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,accessKey:this.state._accessKey,autocapitalize:"off",autocorrect:"off",class:"kol-single-select__input",disabled:this.state._disabled,name:this.state._name,placeholder:this.state._placeholder,ref:this.catchRef,required:this.state._required,state:this.state,type:"text",value:this._inputValue},this.controller.onFacade),{onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onInput:this.onInput.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){var e;return t(y,Object.assign({key:"cdb72de6f61b1615cd32870580153774691c6b43"},this.getFormFieldProps()),t(f,{key:"2cefeed94b8376156b6ad75e777319ca2db9c656",state:this.state},t("div",{key:"b4ef7f976dc946bc1f38bc41d5a942b2ea4ced93",class:"kol-single-select__group"},t(o,Object.assign({key:"492a3beb4fca89b1d1303caf71df136515c5fba0"},this.getInputProps())),this._inputValue&&!this.state._hideClearButton&&t(s,{key:"e6af67ff63addc06e3a2b83d5b477f333b5a68f2",_icons:"codicon codicon-close","data-testid":"single-select-delete",_label:d("kol-delete-selection"),onClick:()=>{var e;this.clearSelection(),null===(e=this.refInput)||void 0===e||e.focus()},class:n("kol-single-select__delete",{"kol-single-select__delete--disabled":this.state._disabled})}),t(l,{key:"d6cb818ee47ff1b65c3ca2b88a941d27a89cdf2e",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled})),this._isOpen&&!(!0===this.state._disabled)&&t(r,{key:"06327f8bcc101cc0a836d293300a506bd99ecd1b",blockSuggestionMouseOver:this.blockSuggestionMouseOver,onKeyDown:this.handleKeyDownDropdown.bind(this),style:{"--visible-options":`${null!==(e=this._rows)&&void 0!==e?e:5}`}},Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0?this._filteredOptions.map(((e,n)=>t(h,{index:n,option:e.label,ref:e=>{e&&(this.refOptions[n]=e)},selected:this._value===e.value,onClick:t=>{var n;this.selectOption(e),null===(n=this.refInput)||void 0===n||n.focus(),this.toggleListbox(t),this._isOpen=!1,this._hasOpened=!1},onMouseOver:()=>{this.blockSuggestionMouseOver||(this._focusedOptionIndex=n,this.focusOption(n))},onFocus:()=>{this._focusedOptionIndex=n,this.focusOption(n)},onKeyDown:t=>{var n;"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(e),null===(n=this.refInput)||void 0===n||n.focus(),this.toggleListbox(t),t.preventDefault())}}))):t("li",{class:"kol-single-select__no-results-message"},d("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,n;const i=(t,n)=>{var i;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(i=this.refInput)||void 0===i||i.focus()),null==n||n()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(1)));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(-1)));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":this._hasOpened=!1,this._isOpen=!1,i(!1);break;case" ":this._isOpen?Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0&&(this.selectOption(this._filteredOptions[this._focusedOptionIndex]),null===(n=this.refInput)||void 0===n||n.focus(),i(!1)):this.toggleListbox(e);break;case"NumpadEnter":case"Enter":this.toggleListbox(e),this._hasOpened=!1,this._isOpen=!1;break;case"Home":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=0,this.focusOption(this._focusedOptionIndex))}));break;case"End":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=this._filteredOptions?this._filteredOptions.length-1:0,this.focusOption(this._focusedOptionIndex))}));break;case"PageUp":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(-10)));break;case"PageDown":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(10)))}}constructor(t){e(this,t),this.refOptions=[],this.catchRef=e=>{this.refInput=e},this.toggleListbox=e=>{var t;if(null==e||e.preventDefault(),!this.state._disabled&&!this._hasOpened){this._isOpen=!0,this._hasOpened=!0,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:-1,this.focusOption(this._focusedOptionIndex)}},this._focusedOptionIndex=-1,this._isOpen=!1,this._filteredOptions=[],this._inputValue="",this.blockSuggestionMouseOver=!1,this._hasOpened=!1,this._accessKey=void 0,this._placeholder=void 0,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this._hideClearButton=!1,this._rows=void 0,this.state={_hideMsg:!1,_id:`id-${c()}`,_label:"",_options:[],_hideClearButton:!1},this.inputHasFocus=!1,this.controller=new _(this,"single-select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e),this._filteredOptions=e,this.updateInputValue(this._value)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.oldValue=e,this.updateInputValue(e)}validateHideClearButton(e){this.controller.validateHideClearButton(e)}validateRows(e){this.controller.validateRows(e)}handleMouseEvent(){this.blockSuggestionMouseOver=!1}updateInputValue(e){if(Array.isArray(this._options)){const t=this._options.find((t=>t.value===e));this._inputValue=t?String(t.label):""}}componentWillLoad(){this.refOptions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.oldValue=this._value,this._filteredOptions=this.state._options,this.updateInputValue(this._value)}onChange(e){var t,n;this.oldValue!==(null===(t=this.refInput)||void 0===t?void 0:t.value)&&(this.oldValue=null===(n=this.refInput)||void 0===n?void 0:n.value),this._isOpen||this.controller.onFacade.onChange(e,this._value)}onClick(e){this.toggleListbox(e),this.controller.onFacade.onClick(e)}static get delegatesFocus(){return!0}get host(){return i(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"],"_hideClearButton ":["validateHideClearButton"],_rows:["validateRows"]}}};j.style={default:x};export{j 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","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","KolInputTag","_accessKey","_alert","showAsAlert","_hideError","_hideLabel","_hint","_icons","_id","_msg","_shortKey","_tooltipAlign","_touched","role","slot","Fragment","InternalUnderlinedBadgeText","badgeText","buildBadgeTextString","Object","assign","ref","catchRef","type","accessKey","join","undefined","autoCapitalize","autoCorrect","disabled","_name","required","spellcheck","bind","onClick","toggleListbox","onFocus","inputHasFocus","placeholder","KolIconTag","translate","tabindex","clsx","blockSuggestionMouseOver","onKeyDown","map","id","el","tabIndex","onMouseOver","e","checked","htmlFor","handleFocusOut","setTimeout","contains","document","activeElement","handleWindowBlur","handleKeyDown","handleEvent","isOpen","callback","hostRef","selectedIndex","nonce","Boolean","validateAccessKey","validateAlert","validateDisabled","validateHideError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMsg","validateName","validateOn","updateInputValue","validateShortKey","validateSyncValueBySelector","validateTabIndex","validateTouched","oldValue","handleMouseEvent","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 { Option, OptionsPropType, SelectOption, SingleSelectProps, SingleSelectWatches, W3CInputValue } from '../../schema';\nimport { validateOptions, watchBoolean, watchString } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\n\nimport type { Generic } from 'adopted-style-sheets';\n\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\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\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 '../style';\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\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\tShortKeyPropType,\n\tSingleSelectAPI,\n\tSingleSelectStates,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { buildBadgeTextString, 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, KolInputTag } from '../../core/component-names';\nimport { InternalUnderlinedBadgeText } from '../../functional-components';\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: {\n\t\tdelegatesFocus: true,\n\t},\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<KolInputTag\n\t\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t\t_alert={this.showAsAlert()}\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_shortKey={this.state._shortKey}\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' || typeof this.state._shortKey === 'string' ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey || this.state._shortKey)} 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{buildBadgeTextString(this.state._accessKey || this.state._shortKey)}\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\tonClick={this.toggleListbox.bind(this)}\n\t\t\t\t\t\t\t\t\tonFocus={(event) => {\n\t\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\t\t\t\t\t\t\tthis.inputHasFocus = true;\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonBlur={(event) => {\n\t\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\t\t\t\t\t\t\tthis.inputHasFocus = false;\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\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</KolInputTag>\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 * @deprecated Will be removed in v3. Use automatic behaviour instead.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean;\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?: Stringified<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 * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\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\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new SingleSelectController(this, 'single-select', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\tif (this.state._alert === undefined) {\n\t\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t\t}\n\t\treturn this.state._alert;\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?: Stringified<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('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(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._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":[]}
+{"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","watchValidator","v","undefined","Set","validatePlaceholder","watchString","validateHideClearButton","validateRows","watchNumber","componentWillLoad","_required","_placeholder","_hideClearButton","_rows","defaultStyleCss","KolSingleSelectDefaultStyle0","KolSingleSelect","getValue","kolFocus","_a","refInput","focus","onBlur","some","option","label","_inputValue","find","_filteredOptions","_isOpen","_hasOpened","clearSelection","_disabled","emptyValue","_focusedOptionIndex","controller","onFacade","onInput","CustomEvent","bubbles","detail","_name","onChange","selectOption","event","target","setFilteredOptionsByQuery","handleKeyDownDropdown","test","preventDefault","focusSuggestionStartingWith","query","trim","filter","_b","toLowerCase","includes","moveFocus","delta","newIndex","focusOption","index","refOptions","optionElement","char","charLowerCase","findIndex","startsWith","getFormFieldProps","class","tooltipAlign","_tooltipAlign","onClick","alert","showAsAlert","getInputProps","ariaDescribedBy","getRenderStates","Object","assign","join","_hideLabel","_label","accessKey","_accessKey","autocapitalize","autocorrect","disabled","placeholder","ref","catchRef","required","type","bind","onFocus","inputHasFocus","render","h","KolFormFieldStateWrapperFc","KolInputContainerFc","KolInputStateWrapperFc","KolIconTag","_icons","translate","clsx","CustomSuggestionsToggleFc","toggleListbox","CustomSuggestionsOptionsGroupFc","blockSuggestionMouseOver","onKeyDown","style","map","CustomSuggestionsOptionFc","el","selected","onMouseOver","e","handleFocusOut","setTimeout","contains","document","activeElement","handleWindowBlur","handleKeyDown","handleEvent","isOpen","callback","hostRef","selectedIndex","_hideMsg","_id","nonce","Boolean","_touched","validateAccessKey","validateDisabled","validateHideMsg","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMsg","validateName","validateOn","updateInputValue","validateShortKey","validateSyncValueBySelector","validateTouched","oldValue","handleMouseEvent","matchedOption","String"],"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 { Option, OptionsPropType, SelectOption, SingleSelectProps, SingleSelectWatches, StencilUnknown, W3CInputValue } from '../../schema';\nimport { validateOptions, watchBoolean, watchNumber, watchString, watchValidator } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\n\nimport type { Generic } from 'adopted-style-sheets';\n\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\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateValue(value?: StencilUnknown): void {\n\t\twatchValidator(this.component, '_value', (v) => v !== undefined, new Set([`StencilUnknown`]), value);\n\t}\n\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\n\tpublic validateHideClearButton(value?: boolean): void {\n\t\twatchBoolean(this.component, '_hideClearButton', value);\n\t}\n\n\tpublic validateRows(value?: number): void {\n\t\twatchNumber(this.component, '_rows', 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\tthis.validateHideClearButton(this.component._hideClearButton);\n\t\tthis.validateRows(this.component._rows);\n\t}\n}\n","@use '../../styles/global' as *;\n@use '../../styles/kol-alert-mixin' as *;\n@use '../../styles/kol-custom-suggestions-option' as *;\n@use '../../styles/kol-custom-suggestions-options-group' as *;\n@use '../../styles/kol-custom-suggestions-toggle' as *;\n@use '../../styles/kol-form-field-mixin' as *;\n@use '../../styles/kol-input-container-mixin' as *;\n@use '../../styles/kol-input-mixin' as *;\n@use '../@shared/mixins' as *;\n\n@include kol-alert;\n@include kol-custom-suggestions-option;\n@include kol-custom-suggestions-options-group;\n@include kol-custom-suggestions-toggle;\n@include kol-form-field;\n@include kol-input-container;\n@include kol-input;\n\n$option-height: rem(40);\n$visible-options: var(--visible-options, 5);\n\n@layer kol-component {\n\t.kol-single-select {\n\t\t&__delete {\n\t\t\tcursor: pointer;\n\n\t\t\t&--disabled {\n\t\t\t\tcursor: not-allowed;\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\n\t\t.kol-custom-suggestions-options-group {\n\t\t\tmax-height: calc($option-height * $visible-options + rem(2)) !important;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport type {\n\tHideMsgPropType,\n\tIconsHorizontalPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tOption,\n\tOptionsPropType,\n\tRowsPropType,\n\tShortKeyPropType,\n\tSingleSelectAPI,\n\tSingleSelectStates,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\n\nimport clsx from 'clsx';\nimport { KolIconTag } from '../../core/component-names';\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper';\nimport type { InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';\nimport KolInputStateWrapperFc from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';\nimport CustomSuggestionsOptionFc from '../../functional-components/CustomSuggestionsOption/CustomSuggestionsOption';\nimport CustomSuggestionsOptionsGroupFc from '../../functional-components/CustomSuggestionsOptionsGroup';\nimport CustomSuggestionsToggleFc from '../../functional-components/CustomSuggestionsToggle';\nimport { translate } from '../../i18n';\nimport type { EventDetail } from '../../schema/interfaces/EventDetail';\nimport { nonce } from '../../utils/dev.utils';\nimport { getRenderStates } from '../input/controller';\nimport { SingleSelectController } from './controller';\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: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolSingleSelect implements SingleSelectAPI {\n\t@Element() private readonly host?: HTMLKolSingleSelectElement;\n\tprivate refInput?: HTMLInputElement;\n\tprivate refOptions: HTMLLIElement[] = [];\n\tprivate oldValue?: StencilUnknown;\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown | undefined> {\n\t\treturn this._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\tif (!this._hasOpened) {\n\t\t\t\tthis._isOpen = true;\n\t\t\t\tthis._hasOpened = true;\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 : -1;\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._value)?.label as string;\n\t\t\tthis._filteredOptions = [...this.state._options];\n\t\t}\n\t\tthis._isOpen = false;\n\t\tthis._hasOpened = false;\n\t}\n\n\tprivate clearSelection() {\n\t\tif (this.state._disabled) {\n\t\t\treturn;\n\t\t} else {\n\t\t\tconst emptyValue = '';\n\t\t\tthis._focusedOptionIndex = -1;\n\t\t\tthis._value = emptyValue;\n\t\t\tthis._inputValue = emptyValue;\n\t\t\tthis._filteredOptions = [...this.state._options];\n\n\t\t\tthis.controller.onFacade.onInput(\n\t\t\t\tnew CustomEvent<EventDetail>('input', { bubbles: true, detail: { name: this.state._name as string, value: emptyValue } }),\n\t\t\t\ttrue,\n\t\t\t\temptyValue,\n\t\t\t);\n\t\t\tthis.controller.onFacade.onChange(\n\t\t\t\tnew CustomEvent<EventDetail>('change', { bubbles: true, detail: { name: this.state._name as string, value: emptyValue } }),\n\t\t\t\temptyValue,\n\t\t\t);\n\t\t}\n\t}\n\n\tprivate selectOption(option: Option<string>) {\n\t\tthis._value = option.value;\n\t\tthis._inputValue = option.label as string;\n\t\tthis.controller.onFacade.onInput(\n\t\t\tnew CustomEvent<EventDetail>('input', { bubbles: true, detail: { name: this.state._name as string, value: option.value } }),\n\t\t\tfalse,\n\t\t\toption.value,\n\t\t);\n\t\tthis.controller.onFacade.onChange(\n\t\t\tnew CustomEvent<EventDetail>('change', { bubbles: true, detail: { name: this.state._name as string, value: option.value } }),\n\t\t\toption.value,\n\t\t);\n\n\t\tthis._filteredOptions = [...this.state._options];\n\n\t\tthis.controller.setFormAssociatedValue(this._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\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: 'kol-single-select',\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\tonClick: () => this.refInput?.focus(),\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getInputProps(): InputStateWrapperProps {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\n\t\treturn {\n\t\t\t'aria-activedescendant': this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined,\n\t\t\t'aria-autocomplete': 'both',\n\t\t\t'aria-controls': 'listbox',\n\t\t\t'aria-describedby': ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined,\n\t\t\t'aria-label': this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined,\n\t\t\taccessKey: this.state._accessKey,\n\t\t\tautocapitalize: 'off',\n\t\t\tautocorrect: 'off',\n\t\t\tclass: 'kol-single-select__input',\n\t\t\tdisabled: this.state._disabled,\n\t\t\tname: this.state._name,\n\t\t\tplaceholder: this.state._placeholder,\n\t\t\tref: this.catchRef,\n\t\t\trequired: this.state._required,\n\t\t\tstate: this.state,\n\t\t\ttype: 'text',\n\t\t\tvalue: this._inputValue,\n\t\t\t...this.controller.onFacade,\n\t\t\tonChange: this.onChange.bind(this),\n\t\t\tonClick: this.onClick.bind(this),\n\t\t\tonInput: this.onInput.bind(this),\n\t\t\tonFocus: (event) => {\n\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\tthis.inputHasFocus = true;\n\t\t\t},\n\t\t\tonBlur: (event) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerFc state={this.state}>\n\t\t\t\t\t<div class=\"kol-single-select__group\">\n\t\t\t\t\t\t<KolInputStateWrapperFc {...this.getInputProps()} />\n\n\t\t\t\t\t\t{this._inputValue && !this.state._hideClearButton && (\n\t\t\t\t\t\t\t<KolIconTag\n\t\t\t\t\t\t\t\t_icons=\"codicon codicon-close\"\n\t\t\t\t\t\t\t\tdata-testid=\"single-select-delete\"\n\t\t\t\t\t\t\t\t_label={translate('kol-delete-selection')}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tthis.clearSelection();\n\t\t\t\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tclass={clsx('kol-single-select__delete', {\n\t\t\t\t\t\t\t\t\t'kol-single-select__delete--disabled': this.state._disabled,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<CustomSuggestionsToggleFc onClick={this.toggleListbox.bind(this)} disabled={this.state._disabled} />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this._isOpen && !(this.state._disabled === true) && (\n\t\t\t\t\t\t<CustomSuggestionsOptionsGroupFc\n\t\t\t\t\t\t\tblockSuggestionMouseOver={this.blockSuggestionMouseOver}\n\t\t\t\t\t\t\tonKeyDown={this.handleKeyDownDropdown.bind(this)}\n\t\t\t\t\t\t\tstyle={{ '--visible-options': `${this._rows ?? 5}` }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (\n\t\t\t\t\t\t\t\tthis._filteredOptions.map((option, index) => (\n\t\t\t\t\t\t\t\t\t<CustomSuggestionsOptionFc\n\t\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\t\toption={option.label}\n\t\t\t\t\t\t\t\t\t\tref={(el) => {\n\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}}\n\t\t\t\t\t\t\t\t\t\tselected={this._value === (option as Option<string>).value}\n\t\t\t\t\t\t\t\t\t\tonClick={(event: Event) => {\n\t\t\t\t\t\t\t\t\t\t\tthis.selectOption(option as Option<string>);\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\tthis.toggleListbox(event);\n\t\t\t\t\t\t\t\t\t\t\tthis._isOpen = false;\n\t\t\t\t\t\t\t\t\t\t\tthis._hasOpened = false;\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonMouseOver={() => {\n\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\tthis._focusedOptionIndex = index;\n\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}\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonFocus={() => {\n\t\t\t\t\t\t\t\t\t\t\tthis._focusedOptionIndex = index;\n\t\t\t\t\t\t\t\t\t\t\tthis.focusOption(index);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\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\tthis.selectOption(option as Option<string>);\n\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\tthis.toggleListbox(e);\n\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}\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))\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<li class=\"kol-single-select__no-results-message\">{translate('kol-no-results-message')} </li>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</CustomSuggestionsOptionsGroupFc>\n\t\t\t\t\t)}\n\t\t\t\t</KolInputContainerFc>\n\t\t\t</KolFormFieldStateWrapperFc>\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\tthis._hasOpened = false;\n\t\t\t\tthis._isOpen = false;\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(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\t\t\t\tthis._hasOpened = false;\n\t\t\t\tthis._isOpen = false;\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@State()\n\tprivate _hasOpened = false;\n\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 * 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 `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideMsg?: 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?: IconsHorizontalPropType;\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?: Stringified<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 * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\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 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, reflect: true }) public _value?: StencilUnknown;\n\n\t/**\n\t * Defines the whether the clear button should be hidden.\n\t */\n\t@Prop() public _hideClearButton?: boolean = false;\n\n\t/**\n\t * Maximum number of visible rows in the options dropdown before scrolling.\n\t */\n\t@Prop() public _rows?: RowsPropType;\n\n\t@State() public state: SingleSelectStates = {\n\t\t_hideMsg: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_options: [],\n\t\t_hideClearButton: false,\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new SingleSelectController(this, 'single-select', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\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('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(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?: IconsHorizontalPropType): 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?: Stringified<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('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(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('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: StencilUnknown): void {\n\t\tthis.controller.validateValue(value);\n\t\tthis.oldValue = value;\n\t\tthis.updateInputValue(value);\n\t}\n\n\t@Watch('_hideClearButton ')\n\tpublic validateHideClearButton(value?: boolean): void {\n\t\tthis.controller.validateHideClearButton(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: number): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Listen('mousemove')\n\tpublic handleMouseEvent() {\n\t\tthis.blockSuggestionMouseOver = false;\n\t}\n\n\tprivate updateInputValue(value?: StencilUnknown) {\n\t\tif (Array.isArray(this._options)) {\n\t\t\tconst matchedOption = this._options.find((option) => option.value === value);\n\t\t\tthis._inputValue = matchedOption ? String(matchedOption.label) : '';\n\t\t}\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.refOptions = [];\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.oldValue = this._value;\n\t\tthis._filteredOptions = this.state._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\n\t\tif (!this._isOpen) {\n\t\t\tthis.controller.onFacade.onChange(event, this._value);\n\t\t}\n\t}\n\n\tprivate onClick(event: MouseEvent): void {\n\t\tthis.toggleListbox(event);\n\t\tthis.controller.onFacade.onClick(event);\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-a0b4dca2.js";import{r as i,a as o}from"./unique-nav-labels-768d04e9.js";import{w as a}from"./validation-1a210179.js";import{g as s}from"./component-names-aa3cbc3c.js";import{v as l}from"./label-d70e7c34.js";import"./dev.utils-fab45cbc.js";import"./prop.validators-c5e6ad2d.js";import"./index-541b643a.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: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\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: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .kol-link-wc a:focus {\n    background-color: #fff;\n    left: unset;\n    position: unset;\n  }\n}",d=r,c=class{constructor(e){n(this,e),this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return e(t,{key:"6e76bfaea6d277a2a59b95c5c8bf4d50e004984c",class:"kol-skip-nav"},e("nav",{key:"8d31acaf25be80b544835cc0e6e0b2ff162e35ac","aria-label":this.state._label},e("ul",{key:"cef3daed0fbe95002a45dfd5a575fbdcf00836ce"},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"]}}};c.style={default:d};export{c as kol_skip_nav};
+import{r as n,h as e}from"./index-edc52e9a.js";import{r as t,a as i}from"./unique-nav-labels-768d04e9.js";import{w as o}from"./validation-901089bc.js";import{e as a}from"./component-names-7ee7402b.js";import{v as l}from"./label-2ad83395.js";import"./dev.utils-fab45cbc.js";import"./prop.validators-88c9b979.js";import"./index-671d0471.js";const s="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-skip-nav {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-skip-nav__list {\n    display: grid;\n    list-style: none;\n    place-items: center;\n  }\n  .kol-skip-nav__list-item {\n    height: 0;\n  }\n  .kol-skip-nav .kol-link {\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .kol-skip-nav .kol-link:focus {\n    background-color: #fff;\n    left: unset;\n    position: unset;\n  }\n}",r=s,d=class{constructor(e){n(this,e),this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return e("nav",{key:"6696f974f96add5529fce40c73c96429d6d46c14",class:"kol-skip-nav","aria-label":this.state._label},e("ul",{key:"44472c7c253cb6bdffd89d999d9b5f11a39bad22",class:"kol-skip-nav__list"},this.state._links.map(((n,t)=>e("li",{class:"kol-skip-nav__list-item",key:t},e(a,Object.assign({},n)))))))}validateLabel(n,e,o=!1){o||t(this.state._label),l(this,n,{required:!0}),i(this.state._label)}validateLinks(n){o("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){t(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};d.style={default:r};export{d as kol_skip_nav};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSkipNavDefaultStyle0","KolSkipNav","_label","_links","render","h","Host","key","class","this","state","map","link","index","KolLinkWcTag","Object","assign","validateLabel","value","_oldValue","initial","removeNavLabel","required","addNavLabel","validateLinks","watchNavLinks","componentWillLoad","undefined","disconnectedCallback"],"sources":["src/components/skip-nav/style.scss?tag=kol-skip-nav&mode=default&encapsulation=shadow","src/components/skip-nav/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\tul {\n\t\tdisplay: grid;\n\t\tlist-style: none;\n\t\tplace-items: center;\n\t}\n\n\tul li {\n\t\theight: 0;\n\t}\n\n\t.kol-link-wc a {\n\t\tleft: rem(-99999);\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1;\n\t}\n\n\t.kol-link-wc a:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tposition: unset;\n\t}\n}\n","import type { LabelPropType, LinkProps, SkipNavAPI, SkipNavStates, Stringified } from '../../schema';\nimport { validateLabel } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from '../nav/validation';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkWcTag } from '../../core/component-names';\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements SkipNavAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-skip-nav\">\n\t\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t\t<KolLinkWcTag {...link}></KolLinkWcTag>\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: SkipNavStates = {\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":";;;0VAAA,MAAMA,EAAkB,2lJACxB,MAAAC,EAAeD,E,MCeFE,EAAU,M,gFA6BiB,CACtCC,OAAQ,GACRC,OAAQ,G,CA9BF,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,gBACXH,EAAA,OAAAE,IAAA,wDAAiBE,KAAKC,MAAMR,QAC3BG,EAAA,MAAAE,IAAA,4CACEE,KAAKC,MAAMP,OAAOQ,KAAI,CAACC,EAAiBC,IAEvCR,EAAA,MAAIE,IAAKM,GACRR,EAACS,EAAYC,OAAAC,OAAA,GAAKJ,S,CA0BnB,aAAAK,CAAcC,EAAuBC,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAeZ,KAAKC,MAAMR,O,CAE3Be,EAAcR,KAAMS,EAAO,CAC1BI,SAAU,OAEXC,EAAYd,KAAKC,MAAMR,O,CAIjB,aAAAsB,CAAcN,GACpBO,EAAc,aAAchB,KAAMS,E,CAG5B,iBAAAQ,GACNjB,KAAKQ,cAAcR,KAAKP,OAAQyB,UAAW,MAC3ClB,KAAKe,cAAcf,KAAKN,O,CAGlB,oBAAAyB,GACNP,EAAeZ,KAAKC,MAAMR,O","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolSkipNavDefaultStyle0","KolSkipNav","_label","_links","render","h","key","class","this","state","map","link","index","KolLinkWcTag","Object","assign","validateLabel","value","_oldValue","initial","removeNavLabel","required","addNavLabel","validateLinks","watchNavLinks","componentWillLoad","undefined","disconnectedCallback"],"sources":["src/components/skip-nav/style.scss?tag=kol-skip-nav&mode=default&encapsulation=shadow","src/components/skip-nav/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-skip-nav {\n\t\tfont-size: rem(16);\n\n\t\t&__list {\n\t\t\tdisplay: grid;\n\t\t\tlist-style: none;\n\t\t\tplace-items: center;\n\t\t}\n\n\t\t&__list-item {\n\t\t\theight: 0;\n\t\t}\n\n\t\t.kol-link {\n\t\t\tleft: rem(-99999);\n\t\t\toverflow: hidden;\n\t\t\tposition: absolute;\n\t\t\tz-index: 9999999;\n\t\t\tline-height: 1;\n\n\t\t\t&:focus {\n\t\t\t\tbackground-color: #fff;\n\t\t\t\tleft: unset;\n\t\t\t\tposition: unset;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { LabelPropType, LinkProps, SkipNavAPI, SkipNavStates, Stringified } from '../../schema';\nimport { validateLabel } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from '../nav/validation';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkWcTag } from '../../core/component-names';\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements SkipNavAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav class=\"kol-skip-nav\" aria-label={this.state._label}>\n\t\t\t\t<ul class=\"kol-skip-nav__list\">\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li class=\"kol-skip-nav__list-item\" key={index}>\n\t\t\t\t\t\t\t\t<KolLinkWcTag {...link}></KolLinkWcTag>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: SkipNavStates = {\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":";;;mVAAA,MAAMA,EAAkB,ksJACxB,MAAAC,EAAeD,E,MCeFE,EAAU,M,gFA2BiB,CACtCC,OAAQ,GACRC,OAAQ,G,CA5BF,MAAAC,GACN,OACCC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,eAAc,aAAaC,KAAKC,MAAMP,QAChDG,EAAA,MAAAC,IAAA,2CAAIC,MAAM,sBACRC,KAAKC,MAAMN,OAAOO,KAAI,CAACC,EAAiBC,IAEvCP,EAAA,MAAIE,MAAM,0BAA0BD,IAAKM,GACxCP,EAACQ,EAAYC,OAAAC,OAAA,GAAKJ,Q,CAyBlB,aAAAK,CAAcC,EAAuBC,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAeZ,KAAKC,MAAMP,O,CAE3Bc,EAAcR,KAAMS,EAAO,CAC1BI,SAAU,OAEXC,EAAYd,KAAKC,MAAMP,O,CAIjB,aAAAqB,CAAcN,GACpBO,EAAc,aAAchB,KAAMS,E,CAG5B,iBAAAQ,GACNjB,KAAKQ,cAAcR,KAAKN,OAAQwB,UAAW,MAC3ClB,KAAKe,cAAcf,KAAKL,O,CAGlB,oBAAAwB,GACNP,EAAeZ,KAAKC,MAAMP,O","ignoreList":[]}

package/dist/kolibri/kol-spin.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as i,F as t}from"./index-a0b4dca2.js";import{t as o}from"./i18n-5fe08f1c.js";import{v as a}from"./show-5d826542.js";import{w as r}from"./prop.validators-c5e6ad2d.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./index-541b643a.js";import"./dev.utils-fab45cbc.js";const s=["cycle","dot","none"],l=(n,e)=>{r(n,"_variant",(n=>"string"==typeof n&&s.includes(n)),new Set(s),e)},d="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\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  .spin.cycle {\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\n    height: calc(48rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin.cycle > .loader {\n    display: block;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    position: relative;\n    animation: 2s linear infinite rotate;\n  }\n  .spin.cycle > .loader::before {\n    content: \"\";\n    box-sizing: border-box;\n    position: absolute;\n    inset: 0;\n    border-radius: 50%;\n    border: calc(5rem / var(--kolibri-root-font-size, 16)) solid #333;\n    animation: 3s linear infinite prixClipFix;\n  }\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes prixClipFix {\n    0% {\n      border-color: #fff;\n      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n    }\n    25% {\n      border-color: #666;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n    }\n    50% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n    }\n    75% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n    }\n    100% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n    }\n  }\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .spin.cycle > .loader {\n      animation-duration: 4s;\n    }\n    .spin.cycle > .loader::before {\n      animation-duration: 6s;\n    }\n  }\n}\n@layer kol-component {\n  .spin.dot {\n    height: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin.dot > span {\n    animation-timing-function: cubic-bezier(0, 1, 1, 0);\n    border-radius: 50%;\n    border: calc(0.16rem / var(--kolibri-root-font-size, 16)) solid #fff;\n    height: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    top: calc(0.16rem / var(--kolibri-root-font-size, 16));\n    width: calc(12.8rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin.dot > span:first-child {\n    background-color: #000;\n    z-index: 0;\n    animation: 1s infinite spin1;\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin.dot > span:nth-child(2) {\n    background-color: #000;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin.dot > span:nth-child(3) {\n    background-color: #000;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: calc(17.6rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin.dot > span:nth-child(4) {\n    background-color: #666;\n    z-index: 0;\n    animation: 1s infinite spin3;\n    left: calc(33.6rem / var(--kolibri-root-font-size, 16));\n  }\n  @keyframes spin1 {\n    0% {\n      transform: scale(0);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n  @keyframes spin2 {\n    0% {\n      transform: translate(0, 0);\n    }\n    100% {\n      transform: translate(calc(16rem / var(--kolibri-root-font-size, 16)), 0);\n    }\n  }\n  @keyframes spin3 {\n    0% {\n      transform: scale(1);\n    }\n    100% {\n      transform: scale(0);\n    }\n  }\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .spin.dot > span:first-child,\n    .spin.dot > span:nth-child(2),\n    .spin.dot > span:nth-child(3),\n    .spin.dot > span:nth-child(4) {\n      animation-duration: 2s;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .spin {\n    display: block;\n    padding: calc(2rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n}",c=d;function p(n){switch(n){case"cycle":return e("span",{class:"loader"});case"none":return e("slot",{name:"expert"});default:return e(t,null,e("span",{class:"bg-spin-1"}),e("span",{class:"bg-spin-2"}),e("span",{class:"bg-spin-3"}),e("span",{class:"bg-neutral"}))}}const h=class{constructor(e){n(this,e),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return e(i,{key:"e628b9baf0da099609e89bcf61a2503b11acfb31",class:"kol-spin"},this.state._show?e("span",{"aria-busy":"true","aria-label":o("kol-action-running"),"aria-live":"polite",class:{spin:!0,[this.state._variant]:!0},role:"alert"},p(this.state._variant)):this.showToggled&&e("span",{"aria-label":o("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(n){this.showToggled=!0===this.state._show&&!1===this._show,a(this,n)}validateVariant(n){l(this,n)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};h.style={default:c};export{h as kol_spin};
+import{r as n,h as e,H as i,F as o}from"./index-edc52e9a.js";import{t}from"./i18n-efbafc80.js";import{c as r}from"./clsx-09a06a12.js";import{v as a}from"./show-c3a76659.js";import{w as s}from"./prop.validators-88c9b979.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";import"./index-671d0471.js";import"./dev.utils-fab45cbc.js";const l=["cycle","dot","none"],c=(n,e)=>{s(n,"_variant",(n=>"string"==typeof n&&l.includes(n)),new Set(l),e)},d="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-spin__spinner--cycle {\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\n    height: calc(48rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__loader {\n    display: block;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    position: relative;\n    animation: 2s linear infinite rotate;\n  }\n  .kol-spin__loader::before {\n    content: \"\";\n    box-sizing: border-box;\n    position: absolute;\n    inset: 0;\n    border-radius: 50%;\n    border: 5px solid #333;\n    animation: 3s linear infinite prixClipFix;\n  }\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes prixClipFix {\n    0% {\n      border-color: #fff;\n      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n    }\n    25% {\n      border-color: #666;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n    }\n    50% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n    }\n    75% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n    }\n    100% {\n      border-color: #000;\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n    }\n  }\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .kol-spin__loader {\n      animation-duration: 4s;\n    }\n    .kol-spin__loader::before {\n      animation-duration: 6s;\n    }\n  }\n}\n@layer kol-component {\n  .kol-spin__spinner--dot {\n    height: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element {\n    animation-timing-function: cubic-bezier(0, 1, 1, 0);\n    border-radius: 50%;\n    border: calc(0.16rem / var(--kolibri-root-font-size, 16)) solid #fff;\n    height: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    top: calc(0.16rem / var(--kolibri-root-font-size, 16));\n    width: calc(12.8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--1 {\n    background-color: #000;\n    z-index: 0;\n    animation: 1s infinite spin1;\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--2 {\n    background-color: #000;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--3 {\n    background-color: #000;\n    z-index: 1;\n    animation: 1s infinite spin2;\n    left: calc(17.6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element--neutral {\n    background-color: #666;\n    z-index: 0;\n    animation: 1s infinite spin3;\n    left: calc(33.6rem / var(--kolibri-root-font-size, 16));\n  }\n  @keyframes spin1 {\n    0% {\n      transform: scale(0);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n  @keyframes spin2 {\n    0% {\n      transform: translate(0, 0);\n    }\n    100% {\n      transform: translate(calc(16rem / var(--kolibri-root-font-size, 16)), 0);\n    }\n  }\n  @keyframes spin3 {\n    0% {\n      transform: scale(1);\n    }\n    100% {\n      transform: scale(0);\n    }\n  }\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n  @media (prefers-reduced-motion) {\n    .kol-spin__spinner-element {\n      animation-duration: 2s;\n    }\n  }\n}\n@layer kol-component {\n  .kol-spin {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner {\n    display: block;\n    padding: calc(2rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n}",p=d;function h(n){switch(n){case"cycle":return e("span",{class:"kol-spin__loader"});case"none":return e("slot",{name:"expert"});default:return e(o,null,e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--1"}),e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--2"}),e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--3"}),e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--neutral"}))}}const m=class{constructor(e){n(this,e),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return e(i,{key:"728409fcfcd08192157e7b2e561ec6c0c1f482c7",class:"kol-spin"},this.state._show?e("span",{"aria-busy":"true","aria-label":t("kol-action-running"),"aria-live":"polite",class:r("kol-spin__spinner",`kol-spin__spinner--${this.state._variant}`),role:"alert"},h(this.state._variant)):this.showToggled&&e("span",{"aria-label":t("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(n){this.showToggled=!0===this.state._show&&!1===this._show,a(this,n)}validateVariant(n){c(this,n)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};m.style={default:p};export{m as kol_spin};

package/dist/kolibri/kol-spin.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["spinVariantPropTypeOptions","validateSpinVariant","component","value","watchValidator","includes","Set","defaultStyleCss","KolSpinDefaultStyle0","renderSpin","variant","h","class","name","Fragment","KolSpin","this","showToggled","_variant","render","Host","key","state","_show","translate","spin","role","validateShow","validateVariant","componentWillLoad"],"sources":["src/schema/props/variant/spin.ts","src/components/spin/style.scss?tag=kol-spin&mode=default&encapsulation=shadow","src/components/spin/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../../utils/prop.validators';\n\n/* types */\n/**\n * Loading-spinner\n * - https://github.com/vineethtrv/css-loader\n */\nconst spinVariantPropTypeOptions = ['cycle', 'dot', 'none'] as const;\nexport type SpinVariantPropType = (typeof spinVariantPropTypeOptions)[number];\n\n/**\n * Defines the variant of spin navigation.\n */\nexport type PropSpinVariant = {\n\tvariant: SpinVariantPropType;\n};\n\n/* validator */\nexport const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'_variant',\n\t\t(value) => typeof value === 'string' && spinVariantPropTypeOptions.includes(value),\n\t\tnew Set(spinVariantPropTypeOptions),\n\t\tvalue,\n\t);\n};\n","@import '../@shared/mixins';\n@import '../style';\n@import './cycle';\n@import './dot';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.spin {\n\t\tdisplay: block;\n\t\tpadding: rem(2);\n\t\tposition: relative;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { validateShow, validateSpinVariant } from '../../schema';\nimport { Component, Fragment, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type { ShowPropType, SpinAPI, SpinStates, SpinVariantPropType } from '../../schema';\nfunction renderSpin(variant: SpinVariantPropType): JSX.Element {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <span class=\"loader\"></span>;\n\t\tcase 'none':\n\t\t\treturn <slot name=\"expert\"></slot>;\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<span class=\"bg-spin-1\"></span>\n\t\t\t\t\t<span class=\"bg-spin-2\"></span>\n\t\t\t\t\t<span class=\"bg-spin-3\"></span>\n\t\t\t\t\t<span class=\"bg-neutral\"></span>\n\t\t\t\t</>\n\t\t\t);\n\t}\n}\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements SpinAPI {\n\tprivate showToggled = false;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-spin\">\n\t\t\t\t{this.state._show ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-busy=\"true\"\n\t\t\t\t\t\taria-label={translate('kol-action-running')}\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\tspin: true,\n\t\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t\t\t/* [`spin--${this.state._variant}`]: true, witch benefit have this notation? */\n\t\t\t\t\t\t}}\n\t\t\t\t\t\trole=\"alert\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderSpin(this.state._variant)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label={translate('kol-action-done')} aria-busy=\"false\" aria-live=\"polite\" role=\"alert\"></span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: SpinVariantPropType = 'dot';\n\n\t@State() public state: SpinStates = {\n\t\t_variant: 'dot',\n\t};\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\tvalidateShow(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: SpinVariantPropType): void {\n\t\tvalidateSpinVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"mappings":";;;gTASA,MAAMA,EAA6B,CAAC,QAAS,MAAO,QAW7C,MAAMC,EAAsB,CAACC,EAAsCC,KACzEC,EACCF,EACA,YACCC,UAAiBA,IAAU,UAAYH,EAA2BK,SAASF,IAC5E,IAAIG,IAAIN,GACRG,EACA,EC3BF,MAAMI,EAAkB,i8PACxB,MAAAC,EAAeD,ECMf,SAASE,EAAWC,GACnB,OAAQA,GACP,IAAK,QACJ,OAAOC,EAAA,QAAMC,MAAM,WACpB,IAAK,OACJ,OAAOD,EAAA,QAAME,KAAK,WACnB,QACC,OACCF,EAAAG,EAAA,KACCH,EAAA,QAAMC,MAAM,cACZD,EAAA,QAAMC,MAAM,cACZD,EAAA,QAAMC,MAAM,cACZD,EAAA,QAAMC,MAAM,gBAIjB,C,MASaG,EAAO,M,yBACXC,KAAAC,YAAc,M,WA8B2C,M,cAKjB,M,WAEZ,CACnCC,SAAU,M,CApCJ,MAAAC,GACN,OACCR,EAACS,EAAI,CAAAC,IAAA,2CAACT,MAAM,YACVI,KAAKM,MAAMC,MACXZ,EAAA,oBACW,OAAM,aACJa,EAAU,sBAAqB,YACjC,SACVZ,MAAO,CACNa,KAAM,KACN,CAACT,KAAKM,MAAMJ,UAAW,MAGxBQ,KAAK,SAEJjB,EAAWO,KAAKM,MAAMJ,WAGxBF,KAAKC,aAAeN,EAAA,qBAAkBa,EAAU,mBAAkB,YAAY,QAAO,YAAW,SAASE,KAAK,U,CAsB3G,YAAAC,CAAaxB,GACnBa,KAAKC,YAAcD,KAAKM,MAAMC,QAAU,MAAQP,KAAKO,QAAU,MAC/DI,EAAaX,KAAMb,E,CAIb,eAAAyB,CAAgBzB,GACtBF,EAAoBe,KAAMb,E,CAGpB,iBAAA0B,GACNb,KAAKW,aAAaX,KAAKO,OACvBP,KAAKY,gBAAgBZ,KAAKE,S","ignoreList":[]}
+{"version":3,"names":["spinVariantPropTypeOptions","validateSpinVariant","component","value","watchValidator","includes","Set","defaultStyleCss","KolSpinDefaultStyle0","renderSpin","variant","h","class","name","Fragment","KolSpin","this","showToggled","_variant","render","Host","key","state","_show","translate","clsx","role","validateShow","validateVariant","componentWillLoad"],"sources":["src/schema/props/variant/spin.ts","src/components/spin/style.scss?tag=kol-spin&mode=default&encapsulation=shadow","src/components/spin/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../../utils/prop.validators';\n\n/* types */\n/**\n * Loading-spinner\n * - https://github.com/vineethtrv/css-loader\n */\nconst spinVariantPropTypeOptions = ['cycle', 'dot', 'none'] as const;\nexport type SpinVariantPropType = (typeof spinVariantPropTypeOptions)[number];\n\n/**\n * Defines the variant of spin navigation.\n */\nexport type PropSpinVariant = {\n\tvariant: SpinVariantPropType;\n};\n\n/* validator */\nexport const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'_variant',\n\t\t(value) => typeof value === 'string' && spinVariantPropTypeOptions.includes(value),\n\t\tnew Set(spinVariantPropTypeOptions),\n\t\tvalue,\n\t);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use './cycle' as *;\n@use './dot' as *;\n\n@layer kol-component {\n\t.kol-spin {\n\t\tfont-size: rem(16);\n\n\t\t&__spinner {\n\t\t\tdisplay: block;\n\t\t\tpadding: rem(2);\n\t\t\tposition: relative;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { validateShow, validateSpinVariant } from '../../schema';\nimport { Component, Fragment, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type { ShowPropType, SpinAPI, SpinStates, SpinVariantPropType } from '../../schema';\nimport clsx from 'clsx';\nfunction renderSpin(variant: SpinVariantPropType): JSX.Element {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <span class=\"kol-spin__loader\"></span>;\n\t\tcase 'none':\n\t\t\treturn <slot name=\"expert\"></slot>;\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--1\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--2\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--3\"></span>\n\t\t\t\t\t<span class=\"kol-spin__spinner-element kol-spin__spinner-element--neutral\"></span>\n\t\t\t\t</>\n\t\t\t);\n\t}\n}\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements SpinAPI {\n\tprivate showToggled = false;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-spin\">\n\t\t\t\t{this.state._show ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-busy=\"true\"\n\t\t\t\t\t\taria-label={translate('kol-action-running')}\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\tclass={clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`)}\n\t\t\t\t\t\trole=\"alert\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderSpin(this.state._variant)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label={translate('kol-action-done')} aria-busy=\"false\" aria-live=\"polite\" role=\"alert\"></span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: SpinVariantPropType = 'dot';\n\n\t@State() public state: SpinStates = {\n\t\t_variant: 'dot',\n\t};\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\tvalidateShow(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: SpinVariantPropType): void {\n\t\tvalidateSpinVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"mappings":";;;kVASA,MAAMA,EAA6B,CAAC,QAAS,MAAO,QAW7C,MAAMC,EAAsB,CAACC,EAAsCC,KACzEC,EACCF,EACA,YACCC,UAAiBA,IAAU,UAAYH,EAA2BK,SAASF,IAC5E,IAAIG,IAAIN,GACRG,EACA,EC3BF,MAAMI,EAAkB,+3PACxB,MAAAC,EAAeD,ECOf,SAASE,EAAWC,GACnB,OAAQA,GACP,IAAK,QACJ,OAAOC,EAAA,QAAMC,MAAM,qBACpB,IAAK,OACJ,OAAOD,EAAA,QAAME,KAAK,WACnB,QACC,OACCF,EAAAG,EAAA,KACCH,EAAA,QAAMC,MAAM,2DACZD,EAAA,QAAMC,MAAM,2DACZD,EAAA,QAAMC,MAAM,2DACZD,EAAA,QAAMC,MAAM,kEAIjB,C,MASaG,EAAO,M,yBACXC,KAAAC,YAAc,M,WA0B2C,M,cAKjB,M,WAEZ,CACnCC,SAAU,M,CAhCJ,MAAAC,GACN,OACCR,EAACS,EAAI,CAAAC,IAAA,2CAACT,MAAM,YACVI,KAAKM,MAAMC,MACXZ,EAAA,oBACW,OAAM,aACJa,EAAU,sBAAqB,YACjC,SACVZ,MAAOa,EAAK,oBAAqB,sBAAsBT,KAAKM,MAAMJ,YAClEQ,KAAK,SAEJjB,EAAWO,KAAKM,MAAMJ,WAGxBF,KAAKC,aAAeN,EAAA,qBAAkBa,EAAU,mBAAkB,YAAY,QAAO,YAAW,SAASE,KAAK,U,CAsB3G,YAAAC,CAAaxB,GACnBa,KAAKC,YAAcD,KAAKM,MAAMC,QAAU,MAAQP,KAAKO,QAAU,MAC/DI,EAAaX,KAAMb,E,CAIb,eAAAyB,CAAgBzB,GACtBF,EAAoBe,KAAMb,E,CAGpB,iBAAA0B,GACNb,KAAKW,aAAaX,KAAKO,OACvBP,KAAKY,gBAAgBZ,KAAKE,S","ignoreList":[]}

package/dist/kolibri/kol-split-button.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as t,H as e}from"./index-a0b4dca2.js";import{t as i}from"./i18n-5fe08f1c.js";import{m as o,a}from"./component-names-aa3cbc3c.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";const s="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\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  .kol-popover {\n    height: 0;\n    position: absolute;\n  }\n  .kol-popover .popover {\n    background-color: #fff;\n    min-height: max-content;\n    min-width: max-content;\n    opacity: 0;\n    position: absolute;\n  }\n  .kol-popover .show {\n    animation: 0.3s ease-in forwards fadeInOpacity;\n  }\n  .kol-popover .disappear {\n    animation: 0.3s ease-in backwards fadeInOpacity;\n  }\n  .kol-popover .arrow {\n    background-color: inherit;\n    height: var(--font-size);\n    position: absolute;\n    rotate: 0.125turn;\n    width: var(--font-size);\n    z-index: -1;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: flex;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .split-button-root {\n    display: flex;\n    position: relative;\n  }\n  .main-button {\n    flex-grow: 1;\n    text-align: left;\n  }\n  .kol-popover .popover {\n    margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-popover .arrow {\n    display: none;\n  }\n}",l=s,r=class{constructor(t){n(this,t),this.clickButtonHandler={onClick:n=>{var t,e;"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onClick)?null===(e=this._on)||void 0===e||e.onClick(n,this._value):this.toggleDropdown()}},this.clickToggleHandler={onClick:()=>this.toggleDropdown()},this.toggleDropdown=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!this.state._show})},this.handleOnClose=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!1})},this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_show:!1}}render(){const n="kol-split-button-dropdown-label";return t(e,{key:"2f1e3276fc7262816358d8934cbde20322cb1887",class:"kol-split-button"},t("div",{key:"611c5853c87ea3c820fc201fc78bb002fe51e00c",class:"split-button-root"},t(a,{key:"08ee693d9ec4b913c29fb7df7a9d32e15fa5ea56",class:{"main-button":!0,button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),t("div",{key:"09dcc5c6e327bf53eaa851387fea894900f2743e",class:"horizontal-line"}),t(a,{key:"858ef4d341323e15460d7cc4a0abbcf6353747ed",class:"secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?i(`${n}-close`):i(`${n}-open`),_on:this.clickToggleHandler})),t(o,{key:"d58578bdea30b8913b457f845104e5a20cb28620",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},t("slot",{key:"0b0240b76fec5a37705d6a4bbe735cde8a25b135"})))}async closePopup(){return this.handleOnClose(),Promise.resolve()}static get delegatesFocus(){return!0}};r.style={default:l};export{r as kol_split_button};
+import{r as n,h as t}from"./index-edc52e9a.js";import{t as e}from"./i18n-efbafc80.js";import{k as o,a as i}from"./component-names-7ee7402b.js";import{c as s}from"./clsx-09a06a12.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";const a="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-popover {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: 0;\n    position: absolute;\n  }\n  .kol-popover__content {\n    background-color: #fff;\n    min-height: max-content;\n    min-width: max-content;\n    opacity: 0;\n    position: absolute;\n  }\n  .kol-popover__content--visible {\n    animation: 0.3s ease-in forwards fadeInOpacity;\n  }\n  .kol-popover__content--disappear {\n    animation: 0.3s ease-in backwards fadeInOpacity;\n  }\n  .kol-popover__arrow {\n    background-color: inherit;\n    height: var(--font-size);\n    position: absolute;\n    rotate: 0.125turn;\n    width: var(--font-size);\n    z-index: -1;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-split-button {\n    display: flex;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .kol-split-button__root {\n    display: flex;\n    position: relative;\n  }\n  .kol-split-button__button {\n    flex-grow: 1;\n    text-align: left;\n  }\n  .kol-split-button .kol-popover__content {\n    margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-popover__arrow {\n    display: none;\n  }\n}",l=a,r=class{constructor(t){n(this,t),this.clickButtonHandler={onClick:n=>{var t,e;n.stopPropagation(),"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onClick)?null===(e=this._on)||void 0===e||e.onClick(n,this._value):this.toggleDropdown()}},this.clickToggleHandler={onClick:n=>{n.stopPropagation(),this.toggleDropdown()}},this.toggleDropdown=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!this.state._show})},this.handleOnClose=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!1})},this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_show:!1}}render(){const n="kol-split-button-dropdown-label";return t("div",{key:"0c88a85fb8276e85ec24cb2e4c6d5b4ea5f4def5",class:"kol-split-button"},t("div",{key:"dc3714e07c2520223c2b8cad45898e9815282681",class:"kol-split-button__root"},t(i,{key:"b7f61444b57f22216b4614c2a713c33585183ba1",class:s("kol-split-button__button",{[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0}),_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),t("div",{key:"fcb8212ab113127e25ebea6b1b69e90fa2c767ae",class:"kol-split-button__horizontal-line"}),t(i,{key:"81fe77362ce48e18fa23d20c6801a8d2cd224a15",class:"kol-split-button__secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?e(`${n}-close`):e(`${n}-open`),_on:this.clickToggleHandler})),t(o,{key:"a70171de4785124fec0f53ece004864f1ef0d2f7",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},t("slot",{key:"9ce7ea4b4157712fed4b866c18f50842fbd83704"})))}async closePopup(){return this.handleOnClose(),Promise.resolve()}static get delegatesFocus(){return!0}};r.style={default:l};export{r as kol_split_button};