@public-ui/components 3.0.7-rc.6 → 3.0.7

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,r as e,g as i}from"./index-k_YQEFTw.js";import{c as n}from"./clsx-eK3rPvPS.js";import{e as s}from"./component-names-CkE54Ym7.js";import{g as o,F as a}from"./FormFieldStateWrapper-CrJwhFBs.js";import{I as l,a as r}from"./controller-icon-Bwn5cD3d.js";import{I as h}from"./InputStateWrapper-JMouj3OZ.js";import{C as d,a as c,b as u}from"./CustomSuggestionsToggle-dQnvSA7r.js";import{t as p}from"./i18n-CdSCDnmA.js";import{n as f}from"./dev.utils-D6Xe7v8L.js";import{w as m,d as v,N as b}from"./common-8fBdMvJM.js";import{f as g,b as k}from"./controller-Dl-T77Mb.js";import{v as y}from"./placeholder-6URRds0_.js";import{v as _}from"./required-G86n77y0.js";import"./access-and-short-key-bcID78Ha.js";import"./disabled-BydergHu.js";import"./hide-label-DRunOux4.js";import"./label-CdtNxOKu.js";import"./tooltip-align-_VI7LehI.js";import"./align-CyK0wp7d.js";import"./events-CoPFQEiC.js";import"./associated.controller-BKIODHIT.js";import"./bootstrap-BiRnv4fV.js";import"./i18n-ZF6JbdVP.js";import"./isObject-DvSELytj.js";import"./tslib.es6-CxX45GIN.js";import"./reuse-CX4AQDkS.js";import"./InternalUnderlinedBadgeText-CqMSlZjX.js";import"./Alert-C9CYntkU.js";import"./bem-CHTjklyp.js";import"./browser-Ba2Wl_kh.js";import"./Heading-BABFoi4L.js";import"./Icon-CxnyTTIM.js";import"./icons-72ER78AW.js";import"./Input-MeXv-BCK.js";import"./orientation-5kQWqijN.js";class w extends l{constructor(t,e,n){super(t,e,n),this.keyOptionMap=new Map,this.afterPatchOptions=(t,e,n,i)=>{"_value"===i&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const n=e.has("_options")?e.get("_options"):this.component.state._options;Array.isArray(n)&&n.length>0&&(this.keyOptionMap.clear(),g(this.keyOptionMap,n))},this.component=t}validateOptions(t){k(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(t){_(this.component,t)}validateValue(t){m(this.component,"_value",t=>void 0!==t,new Set(["KoliBriUnknown"]),t)}validatePlaceholder(t){y(this.component,t)}validateHideClearButton(t){v(this.component,"_hideClearButton",t)}validateRows(t){b(this.component,"_rows",t)}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder),this.validateHideClearButton(this.component._hideClearButton),this.validateRows(this.component._rows)}}const x="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: 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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    line-height: 1.5;\n    white-space: normal;\n    cursor: pointer;\n    overflow-wrap: break-word;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n  .kol-custom-suggestions-options-group {\n    background-color: white;\n    display: block;\n    position: absolute;\n    z-index: 2;\n    max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style-type: none;\n  }\n  .kol-custom-suggestions-toggle {\n    display: flex;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n  }\n  .kol-custom-suggestions-toggle:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-single-select__delete {\n    cursor: pointer;\n  }\n  .kol-single-select__delete--disabled {\n    cursor: not-allowed;\n  }\n  .kol-single-select__no-results-message {\n    display: flex;\n    min-height: calc(50 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n  .kol-single-select .kol-custom-suggestions-options-group {\n    max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * var(--visible-options, 5) + 2 * 1rem / var(--kolibri-root-font-size, 16)) !important;\n  }\n}",j=class{async getValue(){return this._value}async kolFocus(){var t;null===(t=this.refInput)||void 0===t||t.focus()}onBlur(){var t,e,n;const i=null===(t=this.state._options)||void 0===t?void 0:t.find(t=>{var e,n;return(null===(e=t.label)||void 0===e?void 0:e.toLowerCase())===(null===(n=this._inputValue)||void 0===n?void 0:n.toLowerCase())});i?this.selectOption(i):(this._inputValue=null===(n=null===(e=this.state._options)||void 0===e?void 0:e.find(t=>t.value===this._value))||void 0===n?void 0:n.label,this._filteredOptions=[...this.state._options]),this._isOpen=!1,this._hasOpened=!1}createEventWithTarget(t,e){const n=new CustomEvent(t,{bubbles:!0,detail:e});return this.refInput&&(Object.defineProperty(n,"target",{value:this.refInput}),Object.defineProperty(n,"currentTarget",{value:this.refInput})),n}clearSelection(){if(!(!0===this.state._disabled)){const t=null;this._focusedOptionIndex=-1,this._value=t,this._inputValue="",this._filteredOptions=[...this.state._options];const e=this.createEventWithTarget("input",{name:this.state._name,value:t}),n=this.createEventWithTarget("change",{name:this.state._name,value:t});this.controller.onFacade.onInput(e,!0,{value:t}),this.controller.onFacade.onChange(n,{value:t})}}selectOption(t){var e,n;if(t.value===this._value)return this._inputValue=t.label,void(this._filteredOptions=[...this.state._options]);this._value=t.value,this._inputValue=t.label;const i=this.createEventWithTarget("input",{name:null!==(e=this.state._name)&&void 0!==e?e:"",value:t.value}),o=this.createEventWithTarget("change",{name:null!==(n=this.state._name)&&void 0!==n?n:"",value:t.value});this.controller.onFacade.onInput(i,!1,t.value),this.controller.onFacade.onChange(o,t.value),this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this._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 n,i;return null===(i=null===(n=e.label)||void 0===n?void 0:n.toLowerCase())||void 0===i?void 0:i.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(),n=Array.isArray(this._filteredOptions)&&this._filteredOptions.findIndex(t=>t.label.toLowerCase().startsWith(e));"number"==typeof n&&(this._focusedOptionIndex=n,this.focusOption(n))}getFormFieldProps(){return{state:this.state,class:"kol-single-select",tooltipAlign:this._tooltipAlign,onClick:()=>{var t;return null===(t=this.refInput)||void 0===t?void 0:t.focus()},alert:this.showAsAlert()}}getInputProps(){const{ariaDescribedBy:t}=o(this.state),e=!0===this.state._disabled;return Object.assign(Object.assign({"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,"aria-autocomplete":"both","aria-controls":"listbox","aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-keyshortcuts":this.state._shortKey,accessKey:this.state._accessKey,autocapitalize:"off",autocorrect:"off",class:"kol-single-select__input",disabled:e,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:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})}render(){var e;const i=!0===this.state._disabled;return t(a,Object.assign({key:"e2cf3b85addd01646a534c14892c8891b800b7ce"},this.getFormFieldProps()),t(r,{key:"4aa11a93338d3244adbc24b2fdbeb210f6bcefc7",state:this.state},t("div",{key:"fefbbd217a319c3755d49a4d533e000f0ff7bce5",class:"kol-single-select__group"},t(h,Object.assign({key:"1bcf38931fccff130458d6bc1ddcbdbe0a3cc182"},this.getInputProps())),this._inputValue&&!this.state._hideClearButton&&t(s,{key:"32667712e9b5f58dae75aeb54f616a5d1cbcd759",_icons:"codicon codicon-close","data-testid":"single-select-delete",_label:this.translateDeleteSelection,onClick:()=>{var t;this.clearSelection(),null===(t=this.refInput)||void 0===t||t.focus()},class:n("kol-single-select__delete",{"kol-single-select__delete--disabled":i})}),t(d,{key:"72a745808952b57d8a5a22edf4170e6ee6cbf57a",onClick:this.toggleListbox.bind(this),disabled:i})),this._isOpen&&!i&&t(c,{key:"212d41e037edd61b5b798218172ed38104cc5111",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(u,{index:n,option:e.label,searchTerm:this._inputValue,ref:t=>{t&&(this.refOptions[n]=t)},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"},this.translateNoResultsMessage," "))))}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,n;const i=(e,n)=>{var i;t.preventDefault(),void 0!==e&&(this._isOpen=e,e||null===(i=this.refInput)||void 0===i||i.focus()),null==n||n()};switch(t.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===(e=this.refInput)||void 0===e||e.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(t);break;case"NumpadEnter":case"Enter":this.toggleListbox(t),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.translateDeleteSelection=p("kol-delete-selection"),this.translateNoResultsMessage=p("kol-no-results-message"),this.catchRef=t=>{this.refInput=t},this.toggleListbox=t=>{var e;null==t||t.preventDefault();if(!(!0===this.state._disabled||this._hasOpened)){this._isOpen=!0,this._hasOpened=!0,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:-1,this.focusOption(this._focusedOptionIndex)}},this._focusedOptionIndex=-1,this._isOpen=!1,this._filteredOptions=[],this._inputValue="",this.blockSuggestionMouseOver=!1,this._hasOpened=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._required=!1,this._tooltipAlign="top",this._touched=!1,this._value=null,this._hideClearButton=!1,this.state={_hideMsg:!1,_id:`id-${f()}`,_label:"",_options:[],_hideClearButton:!1},this.inputHasFocus=!1,this.controller=new w(this,"single-select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateHideMsg(t){this.controller.validateHideMsg(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)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t),this.oldValue=t,this.updateInputValue(t)}validateHideClearButton(t){this.controller.validateHideClearButton(t)}validateRows(t){this.controller.validateRows(t)}handleMouseEvent(){this.blockSuggestionMouseOver=!1}updateInputValue(t){if(Array.isArray(this._options)){const e=this._options.find(e=>e.value===t);this._inputValue=e?String(e.label):""}}componentWillLoad(){this.refOptions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.oldValue=this._value,this._filteredOptions=this.state._options,this.updateInputValue(this._value)}onChange(t){var e,n;this.oldValue!==(null===(e=this.refInput)||void 0===e?void 0:e.value)&&(this.oldValue=null===(n=this.refInput)||void 0===n?void 0:n.value),this._isOpen||this.controller.onFacade.onChange(t,this._value)}onClick(t){this.toggleListbox(t),this.controller.onFacade.onClick(t)}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};
+import{h as t,r as e,g as i}from"./index-C0tYQjse.js";import{c as n}from"./clsx-eK3rPvPS.js";import{e as s}from"./component-names-CkE54Ym7.js";import{g as o,F as a}from"./FormFieldStateWrapper-B7_kb8IA.js";import{I as l,a as r}from"./controller-icon-D4RNw8pj.js";import{I as h}from"./InputStateWrapper-DaQ8avzZ.js";import{C as d,a as c,b as u}from"./CustomSuggestionsToggle-CdwPbwxK.js";import{t as p}from"./i18n-CdSCDnmA.js";import{n as f}from"./dev.utils-zTBHc_Bd.js";import{w as m,d as v,N as b}from"./common-8fBdMvJM.js";import{f as g,b as k}from"./controller-B1zWaVmT.js";import{v as y}from"./placeholder-6URRds0_.js";import{v as _}from"./required-G86n77y0.js";import"./access-and-short-key-bcID78Ha.js";import"./disabled-BydergHu.js";import"./hide-label-DRunOux4.js";import"./label-CdtNxOKu.js";import"./tooltip-align-_VI7LehI.js";import"./align-CyK0wp7d.js";import"./events-CoPFQEiC.js";import"./associated.controller-BKIODHIT.js";import"./bootstrap-BiRnv4fV.js";import"./i18n-ZF6JbdVP.js";import"./isObject-DvSELytj.js";import"./tslib.es6-CxX45GIN.js";import"./reuse-CX4AQDkS.js";import"./InternalUnderlinedBadgeText-CiCiGezF.js";import"./Alert-DNIbRJ_i.js";import"./bem-CHTjklyp.js";import"./browser-Ba2Wl_kh.js";import"./Heading-C9bOV9H2.js";import"./Icon-Bi9w3ZUM.js";import"./icons-72ER78AW.js";import"./Input-BfvGE7MZ.js";import"./orientation-5kQWqijN.js";class w extends l{constructor(t,e,n){super(t,e,n),this.keyOptionMap=new Map,this.afterPatchOptions=(t,e,n,i)=>{"_value"===i&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const n=e.has("_options")?e.get("_options"):this.component.state._options;Array.isArray(n)&&n.length>0&&(this.keyOptionMap.clear(),g(this.keyOptionMap,n))},this.component=t}validateOptions(t){k(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(t){_(this.component,t)}validateValue(t){m(this.component,"_value",t=>void 0!==t,new Set(["KoliBriUnknown"]),t)}validatePlaceholder(t){y(this.component,t)}validateHideClearButton(t){v(this.component,"_hideClearButton",t)}validateRows(t){b(this.component,"_rows",t)}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder),this.validateHideClearButton(this.component._hideClearButton),this.validateRows(this.component._rows)}}const x="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: 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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    line-height: 1.5;\n    white-space: normal;\n    cursor: pointer;\n    overflow-wrap: break-word;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n  .kol-custom-suggestions-options-group {\n    background-color: white;\n    display: block;\n    position: absolute;\n    z-index: 2;\n    max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style-type: none;\n  }\n  .kol-custom-suggestions-toggle {\n    display: flex;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n  }\n  .kol-custom-suggestions-toggle:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-single-select__delete {\n    cursor: pointer;\n  }\n  .kol-single-select__delete--disabled {\n    cursor: not-allowed;\n  }\n  .kol-single-select__no-results-message {\n    display: flex;\n    min-height: calc(50 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n  .kol-single-select .kol-custom-suggestions-options-group {\n    max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * var(--visible-options, 5) + 2 * 1rem / var(--kolibri-root-font-size, 16)) !important;\n  }\n}",j=class{async getValue(){return this._value}async kolFocus(){var t;null===(t=this.refInput)||void 0===t||t.focus()}onBlur(){var t,e,n;const i=null===(t=this.state._options)||void 0===t?void 0:t.find(t=>{var e,n;return(null===(e=t.label)||void 0===e?void 0:e.toLowerCase())===(null===(n=this._inputValue)||void 0===n?void 0:n.toLowerCase())});i?this.selectOption(i):(this._inputValue=null===(n=null===(e=this.state._options)||void 0===e?void 0:e.find(t=>t.value===this._value))||void 0===n?void 0:n.label,this._filteredOptions=[...this.state._options]),this._isOpen=!1,this._hasOpened=!1}createEventWithTarget(t,e){const n=new CustomEvent(t,{bubbles:!0,detail:e});return this.refInput&&(Object.defineProperty(n,"target",{value:this.refInput}),Object.defineProperty(n,"currentTarget",{value:this.refInput})),n}clearSelection(){if(!(!0===this.state._disabled)){const t=null;this._focusedOptionIndex=-1,this._value=t,this._inputValue="",this._filteredOptions=[...this.state._options];const e=this.createEventWithTarget("input",{name:this.state._name,value:t}),n=this.createEventWithTarget("change",{name:this.state._name,value:t});this.controller.onFacade.onInput(e,!0,{value:t}),this.controller.onFacade.onChange(n,{value:t})}}selectOption(t){var e,n;if(t.value===this._value)return this._inputValue=t.label,void(this._filteredOptions=[...this.state._options]);this._value=t.value,this._inputValue=t.label;const i=this.createEventWithTarget("input",{name:null!==(e=this.state._name)&&void 0!==e?e:"",value:t.value}),o=this.createEventWithTarget("change",{name:null!==(n=this.state._name)&&void 0!==n?n:"",value:t.value});this.controller.onFacade.onInput(i,!1,t.value),this.controller.onFacade.onChange(o,t.value),this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this._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 n,i;return null===(i=null===(n=e.label)||void 0===n?void 0:n.toLowerCase())||void 0===i?void 0:i.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(),n=Array.isArray(this._filteredOptions)&&this._filteredOptions.findIndex(t=>t.label.toLowerCase().startsWith(e));"number"==typeof n&&(this._focusedOptionIndex=n,this.focusOption(n))}getFormFieldProps(){return{state:this.state,class:"kol-single-select",tooltipAlign:this._tooltipAlign,onClick:()=>{var t;return null===(t=this.refInput)||void 0===t?void 0:t.focus()},alert:this.showAsAlert()}}getInputProps(){const{ariaDescribedBy:t}=o(this.state),e=!0===this.state._disabled;return Object.assign(Object.assign({"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,"aria-autocomplete":"both","aria-controls":"listbox","aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-keyshortcuts":this.state._shortKey,accessKey:this.state._accessKey,autocapitalize:"off",autocorrect:"off",class:"kol-single-select__input",disabled:e,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:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})}render(){var e;const i=!0===this.state._disabled;return t(a,Object.assign({key:"e2cf3b85addd01646a534c14892c8891b800b7ce"},this.getFormFieldProps()),t(r,{key:"4aa11a93338d3244adbc24b2fdbeb210f6bcefc7",state:this.state},t("div",{key:"fefbbd217a319c3755d49a4d533e000f0ff7bce5",class:"kol-single-select__group"},t(h,Object.assign({key:"1bcf38931fccff130458d6bc1ddcbdbe0a3cc182"},this.getInputProps())),this._inputValue&&!this.state._hideClearButton&&t(s,{key:"32667712e9b5f58dae75aeb54f616a5d1cbcd759",_icons:"codicon codicon-close","data-testid":"single-select-delete",_label:this.translateDeleteSelection,onClick:()=>{var t;this.clearSelection(),null===(t=this.refInput)||void 0===t||t.focus()},class:n("kol-single-select__delete",{"kol-single-select__delete--disabled":i})}),t(d,{key:"72a745808952b57d8a5a22edf4170e6ee6cbf57a",onClick:this.toggleListbox.bind(this),disabled:i})),this._isOpen&&!i&&t(c,{key:"212d41e037edd61b5b798218172ed38104cc5111",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(u,{index:n,option:e.label,searchTerm:this._inputValue,ref:t=>{t&&(this.refOptions[n]=t)},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"},this.translateNoResultsMessage," "))))}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,n;const i=(e,n)=>{var i;t.preventDefault(),void 0!==e&&(this._isOpen=e,e||null===(i=this.refInput)||void 0===i||i.focus()),null==n||n()};switch(t.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===(e=this.refInput)||void 0===e||e.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(t);break;case"NumpadEnter":case"Enter":this.toggleListbox(t),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.translateDeleteSelection=p("kol-delete-selection"),this.translateNoResultsMessage=p("kol-no-results-message"),this.catchRef=t=>{this.refInput=t},this.toggleListbox=t=>{var e;null==t||t.preventDefault();if(!(!0===this.state._disabled||this._hasOpened)){this._isOpen=!0,this._hasOpened=!0,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:-1,this.focusOption(this._focusedOptionIndex)}},this._focusedOptionIndex=-1,this._isOpen=!1,this._filteredOptions=[],this._inputValue="",this.blockSuggestionMouseOver=!1,this._hasOpened=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._required=!1,this._tooltipAlign="top",this._touched=!1,this._value=null,this._hideClearButton=!1,this.state={_hideMsg:!1,_id:`id-${f()}`,_label:"",_options:[],_hideClearButton:!1},this.inputHasFocus=!1,this.controller=new w(this,"single-select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateHideMsg(t){this.controller.validateHideMsg(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)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t),this.oldValue=t,this.updateInputValue(t)}validateHideClearButton(t){this.controller.validateHideClearButton(t)}validateRows(t){this.controller.validateRows(t)}handleMouseEvent(){this.blockSuggestionMouseOver=!1}updateInputValue(t){if(Array.isArray(this._options)){const e=this._options.find(e=>e.value===t);this._inputValue=e?String(e.label):""}}componentWillLoad(){this.refOptions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.oldValue=this._value,this._filteredOptions=this.state._options,this.updateInputValue(this._value)}onChange(t){var e,n;this.oldValue!==(null===(e=this.refInput)||void 0===e?void 0:e.value)&&(this.oldValue=null===(n=this.refInput)||void 0===n?void 0:n.value),this._isOpen||this.controller.onFacade.onChange(t,this._value)}onClick(t){this.toggleListbox(t),this.controller.onFacade.onClick(t)}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-skip-nav.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-k_YQEFTw.js";import"./common-8fBdMvJM.js";import{v as t}from"./label-CdtNxOKu.js";import{r as i,a as o}from"./unique-nav-labels-C_NhdgGz.js";import{w as l}from"./validation-DoIjmu3L.js";import{f as a}from"./component-names-CkE54Ym7.js";const s="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: 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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-skip-nav__list {\n    display: grid;\n    place-items: center;\n    list-style: none;\n  }\n  .kol-skip-nav__list-item {\n    height: 0;\n  }\n  .kol-skip-nav .kol-link {\n    position: absolute;\n    left: calc(-99999 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .kol-skip-nav .kol-link:focus {\n    background-color: #fff;\n    position: unset;\n    left: unset;\n  }\n}",r=class{constructor(e){n(this,e),this.state={_label:"",_links:[]}}render(){return e("nav",{key:"a515409957ec96cb079350271ee28d62c99b93c3",class:"kol-skip-nav","aria-label":this.state._label},e("ul",{key:"de4b6fb648d18295d68eec0372b7c97cfcfb8e6a",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,l=!1){l||i(this.state._label),t(this,n,{required:!0}),o(this.state._label)}validateLinks(n){l("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"]}}};r.style={default:s};export{r as kol_skip_nav};
+import{r as n,h as e}from"./index-C0tYQjse.js";import"./common-8fBdMvJM.js";import{v as t}from"./label-CdtNxOKu.js";import{r as i,a as o}from"./unique-nav-labels-C_NhdgGz.js";import{w as l}from"./validation-DoIjmu3L.js";import{f as a}from"./component-names-CkE54Ym7.js";const s="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: 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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-skip-nav__list {\n    display: grid;\n    place-items: center;\n    list-style: none;\n  }\n  .kol-skip-nav__list-item {\n    height: 0;\n  }\n  .kol-skip-nav .kol-link {\n    position: absolute;\n    left: calc(-99999 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .kol-skip-nav .kol-link:focus {\n    background-color: #fff;\n    position: unset;\n    left: unset;\n  }\n}",r=class{constructor(e){n(this,e),this.state={_label:"",_links:[]}}render(){return e("nav",{key:"a515409957ec96cb079350271ee28d62c99b93c3",class:"kol-skip-nav","aria-label":this.state._label},e("ul",{key:"de4b6fb648d18295d68eec0372b7c97cfcfb8e6a",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,l=!1){l||i(this.state._label),t(this,n,{required:!0}),o(this.state._label)}validateLinks(n){l("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"]}}};r.style={default:s};export{r as kol_skip_nav};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,F as i,H as t}from"./index-k_YQEFTw.js";import{w as o}from"./common-8fBdMvJM.js";import{v as r}from"./label-CdtNxOKu.js";import{v as a}from"./show-DsV_Vx8g.js";import{t as l}from"./i18n-CdSCDnmA.js";import{c as s}from"./clsx-eK3rPvPS.js";import"./i18n-ZF6JbdVP.js";const d=["cycle","dot","none"],c=(n,e)=>{o(n,"_variant",n=>"string"==typeof n&&d.includes(n),new Set(d),e)},p="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: 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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @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  .kol-spin__spinner--cycle {\n    width: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__loader {\n    border-radius: 50%;\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n    animation: 2s linear infinite rotate;\n  }\n  .kol-spin__loader::before {\n    border-radius: 50%;\n    position: absolute;\n    inset: 0;\n    content: \"\";\n    animation: 3s linear infinite prixClipFix;\n    border: 5px solid #333;\n  }\n}\n@layer kol-component {\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(16 * 1rem / 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  .kol-spin__spinner--dot {\n    width: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element {\n    border-radius: 50%;\n    position: absolute;\n    top: calc(0.16 * 1rem / var(--kolibri-root-font-size, 16));\n    width: calc(12.8 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(12.8 * 1rem / var(--kolibri-root-font-size, 16));\n    animation-timing-function: cubic-bezier(0, 1, 1, 0);\n    border: calc(0.16 * 1rem / var(--kolibri-root-font-size, 16)) solid #fff;\n  }\n  .kol-spin__spinner-element--1 {\n    background-color: #000;\n    left: calc(0.16 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 0;\n    animation: 1s infinite spin1;\n  }\n  .kol-spin__spinner-element--2 {\n    background-color: #000;\n    left: calc(0.16 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n    animation: 1s infinite spin2;\n  }\n  .kol-spin__spinner-element--3 {\n    background-color: #000;\n    left: calc(17.6 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n    animation: 1s infinite spin2;\n  }\n  .kol-spin__spinner-element--neutral {\n    background-color: #666;\n    left: calc(33.6 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 0;\n    animation: 1s infinite spin3;\n  }\n}\n@layer kol-component {\n  .kol-spin__spinner {\n    display: block;\n    position: relative;\n    padding: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}";function h(n){switch(n){case"cycle":return e("span",{class:"kol-spin__loader"});case"none":return e("slot",{name:"expert"});default:return e(i,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.translateActionRunning=l("kol-action-running"),this.translateActionDone=l("kol-action-done"),this._show=!1,this._variant="dot",this.state={_variant:"dot",_label:void 0}}render(){var n,o;return e(t,{key:"9dd909b1cffebc86488be3dbe4b7b87eeab59f17",class:"kol-spin"},this.state._show?e(i,null,e("span",{class:s("kol-spin__spinner",`kol-spin__spinner--${this.state._variant}`)},h(this.state._variant)),e("span",{"aria-busy":"true",class:"visually-hidden",role:"alert"},null!==(n=this.state._label)&&void 0!==n?n:this.translateActionRunning)):this.showToggled&&e("span",{"aria-busy":"false",class:"visually-hidden",role:"alert"},null!==(o=this.state._label)&&void 0!==o?o:this.translateActionDone))}validateShow(n){this.showToggled=!0===this.state._show&&!1===this._show,a(this,n)}validateLabel(n){r(this,n)}validateVariant(n){c(this,n)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant),this.validateLabel(this._label)}static get watchers(){return{_show:["validateShow"],_label:["validateLabel"],_variant:["validateVariant"]}}};m.style={default:p};export{m as kol_spin};
+import{r as n,h as e,F as i,H as t}from"./index-C0tYQjse.js";import{w as o}from"./common-8fBdMvJM.js";import{v as r}from"./label-CdtNxOKu.js";import{v as a}from"./show-DsV_Vx8g.js";import{t as l}from"./i18n-CdSCDnmA.js";import{c as s}from"./clsx-eK3rPvPS.js";import"./i18n-ZF6JbdVP.js";const d=["cycle","dot","none"],c=(n,e)=>{o(n,"_variant",n=>"string"==typeof n&&d.includes(n),new Set(d),e)},p="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: 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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @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  .kol-spin__spinner--cycle {\n    width: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__loader {\n    border-radius: 50%;\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n    animation: 2s linear infinite rotate;\n  }\n  .kol-spin__loader::before {\n    border-radius: 50%;\n    position: absolute;\n    inset: 0;\n    content: \"\";\n    animation: 3s linear infinite prixClipFix;\n    border: 5px solid #333;\n  }\n}\n@layer kol-component {\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(16 * 1rem / 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  .kol-spin__spinner--dot {\n    width: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-spin__spinner-element {\n    border-radius: 50%;\n    position: absolute;\n    top: calc(0.16 * 1rem / var(--kolibri-root-font-size, 16));\n    width: calc(12.8 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(12.8 * 1rem / var(--kolibri-root-font-size, 16));\n    animation-timing-function: cubic-bezier(0, 1, 1, 0);\n    border: calc(0.16 * 1rem / var(--kolibri-root-font-size, 16)) solid #fff;\n  }\n  .kol-spin__spinner-element--1 {\n    background-color: #000;\n    left: calc(0.16 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 0;\n    animation: 1s infinite spin1;\n  }\n  .kol-spin__spinner-element--2 {\n    background-color: #000;\n    left: calc(0.16 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n    animation: 1s infinite spin2;\n  }\n  .kol-spin__spinner-element--3 {\n    background-color: #000;\n    left: calc(17.6 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n    animation: 1s infinite spin2;\n  }\n  .kol-spin__spinner-element--neutral {\n    background-color: #666;\n    left: calc(33.6 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 0;\n    animation: 1s infinite spin3;\n  }\n}\n@layer kol-component {\n  .kol-spin__spinner {\n    display: block;\n    position: relative;\n    padding: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}";function h(n){switch(n){case"cycle":return e("span",{class:"kol-spin__loader"});case"none":return e("slot",{name:"expert"});default:return e(i,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.translateActionRunning=l("kol-action-running"),this.translateActionDone=l("kol-action-done"),this._show=!1,this._variant="dot",this.state={_variant:"dot",_label:void 0}}render(){var n,o;return e(t,{key:"9dd909b1cffebc86488be3dbe4b7b87eeab59f17",class:"kol-spin"},this.state._show?e(i,null,e("span",{class:s("kol-spin__spinner",`kol-spin__spinner--${this.state._variant}`)},h(this.state._variant)),e("span",{"aria-busy":"true",class:"visually-hidden",role:"alert"},null!==(n=this.state._label)&&void 0!==n?n:this.translateActionRunning)):this.showToggled&&e("span",{"aria-busy":"false",class:"visually-hidden",role:"alert"},null!==(o=this.state._label)&&void 0!==o?o:this.translateActionDone))}validateShow(n){this.showToggled=!0===this.state._show&&!1===this._show,a(this,n)}validateLabel(n){r(this,n)}validateVariant(n){c(this,n)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant),this.validateLabel(this._label)}static get watchers(){return{_show:["validateShow"],_label:["validateLabel"],_variant:["validateVariant"]}}};m.style={default:p};export{m as kol_spin};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as t}from"./index-k_YQEFTw.js";import{c as e}from"./clsx-eK3rPvPS.js";import{l as o,d as i}from"./component-names-CkE54Ym7.js";import{t as a}from"./i18n-CdSCDnmA.js";import"./common-8fBdMvJM.js";import"./i18n-ZF6JbdVP.js";const s="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: 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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-popover {\n    position: absolute;\n    height: 0;\n  }\n  .kol-popover__content {\n    opacity: 0;\n    background-color: #fff;\n    position: absolute;\n    min-width: max-content;\n    min-height: max-content;\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    rotate: 0.125turn;\n    background-color: inherit;\n    position: absolute;\n    z-index: -1;\n    width: var(--font-size);\n    height: var(--font-size);\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  .kol-split-button {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n  .kol-split-button__root {\n    display: flex;\n    position: relative;\n    width: 100%;\n    align-items: stretch;\n  }\n  .kol-split-button__button {\n    min-width: 0;\n    flex: 1 1 auto;\n    text-align: left;\n  }\n  .kol-split-button .kol-popover {\n    z-index: 1;\n  }\n  .kol-split-button .kol-popover__content {\n    margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-popover__arrow {\n    display: none;\n  }\n}",l=class{constructor(t){n(this,t),this.catchPrimaryRef=n=>{this.primaryButtonWcRef=n},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.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._disabled=!1,this._hideLabel=!1,this._tooltipAlign="top",this._type="button",this._variant="normal",this.state={_show:!1}}async getValue(){return this._value}async kolFocus(){var n;await(null===(n=this.primaryButtonWcRef)||void 0===n?void 0:n.kolFocus())}render(){const n="kol-split-button-dropdown-label";return t("div",{key:"67a86a6af18abdadc7795d185f0e443d7d1cab23",class:"kol-split-button"},t("div",{key:"94b53f9e9dec6eb7bc70470a4bcddca448e7e819",class:"kol-split-button__root"},t(i,{key:"5a652b64ea63b64e4ca33a359bf8696f9d3765a0",class:e("kol-split-button__button",{[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0}),ref:this.catchPrimaryRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons,_id:this._id,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_buttonVariant:this._variant}),t("div",{key:"b6d371beb64aa076bed2d852f8c1cc52068b5266",class:"kol-split-button__horizontal-line"}),t(i,{key:"4f9ff72efa44c71946f03f0d808e73d2e8fe9b4c",class:"kol-split-button__secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?a(`${n}-close`):a(`${n}-open`),_on:this.clickToggleHandler})),t(o,{key:"11b05e88170ec37e776456395243d9d4b6cfc454",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},t("slot",{key:"1540264728f2896e7b24af8ad1f14a21021a22df"})))}async closePopup(){return this.handleOnClose(),Promise.resolve()}static get delegatesFocus(){return!0}};l.style={default:s};export{l as kol_split_button};
+import{r as n,h as t}from"./index-C0tYQjse.js";import{c as e}from"./clsx-eK3rPvPS.js";import{l as o,d as i}from"./component-names-CkE54Ym7.js";import{t as a}from"./i18n-CdSCDnmA.js";import"./common-8fBdMvJM.js";import"./i18n-ZF6JbdVP.js";const s="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: 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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-popover {\n    position: absolute;\n    height: 0;\n  }\n  .kol-popover__content {\n    opacity: 0;\n    background-color: #fff;\n    position: absolute;\n    min-width: max-content;\n    min-height: max-content;\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    rotate: 0.125turn;\n    background-color: inherit;\n    position: absolute;\n    z-index: -1;\n    width: var(--font-size);\n    height: var(--font-size);\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  .kol-split-button {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n  .kol-split-button__root {\n    display: flex;\n    position: relative;\n    width: 100%;\n    align-items: stretch;\n  }\n  .kol-split-button__button {\n    min-width: 0;\n    flex: 1 1 auto;\n    text-align: left;\n  }\n  .kol-split-button .kol-popover {\n    z-index: 1;\n  }\n  .kol-split-button .kol-popover__content {\n    margin-top: calc(2 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-popover__arrow {\n    display: none;\n  }\n}",l=class{constructor(t){n(this,t),this.catchPrimaryRef=n=>{this.primaryButtonWcRef=n},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.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._disabled=!1,this._hideLabel=!1,this._tooltipAlign="top",this._type="button",this._variant="normal",this.state={_show:!1}}async getValue(){return this._value}async kolFocus(){var n;await(null===(n=this.primaryButtonWcRef)||void 0===n?void 0:n.kolFocus())}render(){const n="kol-split-button-dropdown-label";return t("div",{key:"67a86a6af18abdadc7795d185f0e443d7d1cab23",class:"kol-split-button"},t("div",{key:"94b53f9e9dec6eb7bc70470a4bcddca448e7e819",class:"kol-split-button__root"},t(i,{key:"5a652b64ea63b64e4ca33a359bf8696f9d3765a0",class:e("kol-split-button__button",{[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0}),ref:this.catchPrimaryRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons,_id:this._id,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_buttonVariant:this._variant}),t("div",{key:"b6d371beb64aa076bed2d852f8c1cc52068b5266",class:"kol-split-button__horizontal-line"}),t(i,{key:"4f9ff72efa44c71946f03f0d808e73d2e8fe9b4c",class:"kol-split-button__secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?a(`${n}-close`):a(`${n}-open`),_on:this.clickToggleHandler})),t(o,{key:"11b05e88170ec37e776456395243d9d4b6cfc454",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},t("slot",{key:"1540264728f2896e7b24af8ad1f14a21021a22df"})))}async closePopup(){return this.handleOnClose(),Promise.resolve()}static get delegatesFocus(){return!0}};l.style={default:s};export{l as kol_split_button};

package/dist/kolibri/kol-table-settings-wc.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e,g as s}from"./index-k_YQEFTw.js";import{t as i,b as a,u as n,v as l,d as o,j as c}from"./component-names-CkE54Ym7.js";import{t as b}from"./i18n-CdSCDnmA.js";import{d,K as h}from"./events-CoPFQEiC.js";import"./common-8fBdMvJM.js";import"./i18n-ZF6JbdVP.js";const r=class{constructor(e){t(this,e),this.tableSettings={columns:[]},this.errorMessage=null,this.translateTableSettings=b("kol-table-settings"),this.translateTableSettingsCancel=b("kol-table-settings-cancel"),this.translateTableSettingsApply=b("kol-table-settings-apply"),this.translateErrorAllInvisible=b("kol-table-settings-error-all-invisible"),this.translateColumnNotHidable=b("kol-table-settings-column-not-hidable"),this._tableSettings={columns:[]}}handleTableSettingsChange(e){this.tableSettings=Object.assign(Object.assign({},e),{columns:this.sortColumnsByPosition(e.columns)})}componentWillLoad(){this.handleTableSettingsChange(this._tableSettings)}sortColumnsByPosition(e){return[...e].sort((e,t)=>e.position-t.position)}moveColumn(e,t){const s=[...this.tableSettings.columns],a=s.findIndex(t=>t.key===e),i="up"===t?a-1:a+1,n=s[a],l=s[i],o=s.map(e=>e.key===n.key?Object.assign(Object.assign({},e),{position:l.position}):e.key===l.key?Object.assign(Object.assign({},e),{position:n.position}):e);this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.sortColumnsByPosition(o)})}handleVisibilityChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map(s=>s.key===e&&!1!==s.hidable?Object.assign(Object.assign({},s),{visible:Boolean(t)}):s)})}handleWidthChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map(s=>s.key===e?Object.assign(Object.assign({},s),{width:Number(t)}):s)})}handleCancel(){var e;null===(e=this.popoverRef)||void 0===e||e.hidePopover()}handleSubmit(e){var t;e.preventDefault();const s=this.tableSettings.columns.some(e=>e.visible);s?this.host&&(this.errorMessage=null,d(this.host,h.settingsChange,this.tableSettings),null===(t=this.popoverRef)||void 0===t||t.hidePopover()):this.errorMessage=this.translateErrorAllInvisible}render(){const t=[...this.tableSettings.columns].sort((e,t)=>e.position-t.position);return e(c,{key:"288e4bfa1603123ff6b0583773b653c63eaffba9",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"codicon codicon-settings-gear",_label:this.translateTableSettings,_popoverAlign:"top",_hideLabel:!0},e("div",{key:"706ec018c3820841a5190b789ba677b8c6972ae9",class:"kol-table-settings__content"},e(i,{key:"2b5a093ea990cefefbb896c18242a273602caebf",_label:this.translateTableSettings,_level:0}),this.errorMessage&&e(a,{key:"99a55cf8c94c3c5c43168df0422b0f0475e148f8",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),e("form",{key:"f2c50ec4c6908828986c16b48a33afa15973fb2c",onSubmit:this.handleSubmit.bind(this)},e("div",{key:"3d64c39b071fab5c60603553fe5d18bd134a97c9",class:"kol-table-settings__columns-container"},e("div",{key:"2dbc24d4e2db6ae3cdde932f48b2abe00898a691",class:"kol-table-settings__columns"},t.map((s,a)=>e("div",{key:s.key,class:"kol-table-settings__column"},e(n,{_checked:s.visible,_label:`${s.label}${!1===s.hidable?` (${this.translateColumnNotHidable})`:""}`,_value:!0,_hideLabel:!0,_disabled:!1===s.hidable,_on:{onInput:(e,t)=>this.handleVisibilityChange(s.key,t)}}),e("span",null,s.label),e(l,{_hideLabel:!0,_value:s.width,_label:b("kol-table-settings-column-width",{placeholders:{column:s.label}}),_min:1,_on:{onInput:(e,t)=>this.handleWidthChange(s.key,t)}}),e(o,{_icons:"codicon codicon-arrow-up",_label:b("kol-table-settings-move-up",{placeholders:{column:s.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(s.key,"up")},_disabled:0===a,"data-testid":"table-settings-move-up"}),e(o,{_icons:"codicon codicon-arrow-down",_label:b("kol-table-settings-move-down",{placeholders:{column:s.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(s.key,"down")},_disabled:a===t.length-1,"data-testid":"table-settings-move-down"}))))),e("div",{key:"36b93145f47e6893726c1ae6a4b7dd06a4dbed4e",class:"kol-table-settings__actions"},e(o,{key:"c09b3a9d39c62bbeb9d45dabcfe0543e7ea8e205",_label:this.translateTableSettingsCancel,_buttonVariant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),e(o,{key:"4ff5204b15b6117c0bd2897e04425e810719ffb2",_label:this.translateTableSettingsApply,_buttonVariant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return s(this)}static get watchers(){return{_tableSettings:["handleTableSettingsChange"]}}};export{r as kol_table_settings_wc};
+import{r as t,h as e,g as s}from"./index-C0tYQjse.js";import{t as i,b as a,u as n,v as l,d as o,j as c}from"./component-names-CkE54Ym7.js";import{t as b}from"./i18n-CdSCDnmA.js";import{d,K as h}from"./events-CoPFQEiC.js";import"./common-8fBdMvJM.js";import"./i18n-ZF6JbdVP.js";const r=class{constructor(e){t(this,e),this.tableSettings={columns:[]},this.errorMessage=null,this.translateTableSettings=b("kol-table-settings"),this.translateTableSettingsCancel=b("kol-table-settings-cancel"),this.translateTableSettingsApply=b("kol-table-settings-apply"),this.translateErrorAllInvisible=b("kol-table-settings-error-all-invisible"),this.translateColumnNotHidable=b("kol-table-settings-column-not-hidable"),this._tableSettings={columns:[]}}handleTableSettingsChange(e){this.tableSettings=Object.assign(Object.assign({},e),{columns:this.sortColumnsByPosition(e.columns)})}componentWillLoad(){this.handleTableSettingsChange(this._tableSettings)}sortColumnsByPosition(e){return[...e].sort((e,t)=>e.position-t.position)}moveColumn(e,t){const s=[...this.tableSettings.columns],a=s.findIndex(t=>t.key===e),i="up"===t?a-1:a+1,n=s[a],l=s[i],o=s.map(e=>e.key===n.key?Object.assign(Object.assign({},e),{position:l.position}):e.key===l.key?Object.assign(Object.assign({},e),{position:n.position}):e);this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.sortColumnsByPosition(o)})}handleVisibilityChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map(s=>s.key===e&&!1!==s.hidable?Object.assign(Object.assign({},s),{visible:Boolean(t)}):s)})}handleWidthChange(e,t){this.tableSettings=Object.assign(Object.assign({},this.tableSettings),{columns:this.tableSettings.columns.map(s=>s.key===e?Object.assign(Object.assign({},s),{width:Number(t)}):s)})}handleCancel(){var e;null===(e=this.popoverRef)||void 0===e||e.hidePopover()}handleSubmit(e){var t;e.preventDefault();const s=this.tableSettings.columns.some(e=>e.visible);s?this.host&&(this.errorMessage=null,d(this.host,h.settingsChange,this.tableSettings),null===(t=this.popoverRef)||void 0===t||t.hidePopover()):this.errorMessage=this.translateErrorAllInvisible}render(){const t=[...this.tableSettings.columns].sort((e,t)=>e.position-t.position);return e(c,{key:"288e4bfa1603123ff6b0583773b653c63eaffba9",ref:e=>this.popoverRef=e,class:"kol-table-settings",_icons:"codicon codicon-settings-gear",_label:this.translateTableSettings,_popoverAlign:"top",_hideLabel:!0},e("div",{key:"706ec018c3820841a5190b789ba677b8c6972ae9",class:"kol-table-settings__content"},e(i,{key:"2b5a093ea990cefefbb896c18242a273602caebf",_label:this.translateTableSettings,_level:0}),this.errorMessage&&e(a,{key:"99a55cf8c94c3c5c43168df0422b0f0475e148f8",_type:"error",_label:this.errorMessage,_variant:"msg",class:"kol-table-settings__error-message"}),e("form",{key:"f2c50ec4c6908828986c16b48a33afa15973fb2c",onSubmit:this.handleSubmit.bind(this)},e("div",{key:"3d64c39b071fab5c60603553fe5d18bd134a97c9",class:"kol-table-settings__columns-container"},e("div",{key:"2dbc24d4e2db6ae3cdde932f48b2abe00898a691",class:"kol-table-settings__columns"},t.map((s,a)=>e("div",{key:s.key,class:"kol-table-settings__column"},e(n,{_checked:s.visible,_label:`${s.label}${!1===s.hidable?` (${this.translateColumnNotHidable})`:""}`,_value:!0,_hideLabel:!0,_disabled:!1===s.hidable,_on:{onInput:(e,t)=>this.handleVisibilityChange(s.key,t)}}),e("span",null,s.label),e(l,{_hideLabel:!0,_value:s.width,_label:b("kol-table-settings-column-width",{placeholders:{column:s.label}}),_min:1,_on:{onInput:(e,t)=>this.handleWidthChange(s.key,t)}}),e(o,{_icons:"codicon codicon-arrow-up",_label:b("kol-table-settings-move-up",{placeholders:{column:s.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(s.key,"up")},_disabled:0===a,"data-testid":"table-settings-move-up"}),e(o,{_icons:"codicon codicon-arrow-down",_label:b("kol-table-settings-move-down",{placeholders:{column:s.label}}),_hideLabel:!0,_buttonVariant:"ghost",_on:{onClick:()=>this.moveColumn(s.key,"down")},_disabled:a===t.length-1,"data-testid":"table-settings-move-down"}))))),e("div",{key:"36b93145f47e6893726c1ae6a4b7dd06a4dbed4e",class:"kol-table-settings__actions"},e(o,{key:"c09b3a9d39c62bbeb9d45dabcfe0543e7ea8e205",_label:this.translateTableSettingsCancel,_buttonVariant:"secondary",_on:{onClick:()=>this.handleCancel()},"data-testid":"table-settings-cancel"}),e(o,{key:"4ff5204b15b6117c0bd2897e04425e810719ffb2",_label:this.translateTableSettingsApply,_buttonVariant:"primary",_type:"submit","data-testid":"table-settings-apply"})))))}get host(){return s(this)}static get watchers(){return{_tableSettings:["handleTableSettingsChange"]}}};export{r as kol_table_settings_wc};

package/dist/kolibri/kol-table-stateful.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as e,g as i}from"./index-k_YQEFTw.js";import{i as o,m as a}from"./component-names-CkE54Ym7.js";import{t as l}from"./i18n-CdSCDnmA.js";import{d as s,w as r,s as d,O as h,e as c,p,o as b,j as u}from"./common-8fBdMvJM.js";import{v as f,a as m,b as g,c as _,d as k,e as v}from"./table-settings-DSZObo-2.js";import{v as y}from"./label-CdtNxOKu.js";import{C as w}from"./keyboard-D6PoWr38.js";import{K as x,d as S}from"./events-CoPFQEiC.js";import"./i18n-ZF6JbdVP.js";const z=(t,n,e={})=>{s(t,"_allowMultiSort",n,Object.assign({defaultValue:!1},e))},j=["top","bottom","both"],C=(t,n)=>{r(t,"_paginationPosition",t=>"string"==typeof t&&j.includes(t),new Set([`PaginationPositionPropType {${j.join(", ")}`]),n,{defaultValue:"bottom"})},O='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: 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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    place-items: center;\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-button__text {\n    width: 100%;\n    margin: auto;\n  }\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  }\n  .kol-table-settings .kol-popover-button__popover {\n    background: #fff;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border: 1px solid #d1d5db;\n  }\n  .kol-table-settings__columns-container {\n    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    display: grid;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content minmax(max-content, 1fr) calc(100 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n  .kol-table {\n    display: block;\n    position: relative;\n    max-width: 100%;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n    text-align: start;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    display: flex;\n    position: relative;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    border-style: solid;\n    margin: 0;\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: "";\n  }\n  .kol-table__selection-input--checkbox {\n    background-color: rgb(255, 255, 255);\n    display: flex;\n    position: relative;\n    width: calc(var(--a11y-min-size) / 2);\n    height: calc(var(--a11y-min-size) / 2);\n    border-width: 2px;\n    align-items: center;\n    justify-content: center;\n    line-height: 1.5;\n  }\n  .kol-table__selection-input--radio {\n    border-radius: 100%;\n    display: flex;\n    width: 1.5em;\n    min-width: 1.5em;\n    height: 1.5em;\n    min-height: 1.5em;\n    padding: 0;\n    border-width: 2px;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    width: 0.75em;\n    height: 0.75em;\n    margin: auto;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n  .kol-pagination {\n    display: grid;\n    gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: "•••";\n  }\n  .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n    display: grid;\n    place-items: center;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  @media (min-width: 1024px) {\n    .kol-pagination {\n      display: flex;\n    }\n  }\n  @media (max-width: 1024px) {\n    .kol-pagination {\n      flex-direction: column;\n    }\n  }\n}',T=[10,20,50,100],P=t=>!0===t||""===t||"object"==typeof t&&null!==t,A=class{constructor(n){t(this,n),this.catchRef=t=>{this.tableWcRef=t},this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this._paginationPosition="bottom",this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom",_hasSettingsMenu:!1},this.handlePagination={onClick:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,n),d(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePage:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,n),d(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePageSize:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,n),d(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),d(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=()=>{if(this.disableSort)return void d(this,"_sortedData",this.state._data);const t=[...this.state._data];this.sortData.length>0&&t.sort((t,n)=>{for(let e=0;e<this.sortData.length;e++){const i=this.sortData[e],a=i.compareFn(t,n);if(0!==a)return"ASC"===i.direction?a:-a}return 0}),d(this,"_sortedData",t)}}validateAllowMultiSort(t){z(this,t,{defaultValue:!1})}validateData(t){f(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){m(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){C(this,t)}validateHasSettingsMenu(t){g(this,t)}changeCellSort(t){var n;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key===(null===(n=this.sortData[0])||void 0===n?void 0:n.key)||(this.sortData=[]);const e=this.sortData.findIndex(n=>n.key===t.key);if(e>=0){const t=this.sortData[e];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(e,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData()}}validateHeaders(t){h(t,()=>{b(t,()=>{try{t=p(t)}catch(t){}r(this,"_headers",t=>"object"==typeof t&&null!==t,new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var n,e,i,a;const o=t=>{let n=!1;t.forEach(t=>{if("function"==typeof t.compareFn&&!t.key)return void u("[KolTableStateful] A sortable column requires the 'key' property.");const e=t.key;if(!e)return;const i=t.sortDirection;"ASC"!==i&&"DESC"!==i||"function"==typeof t.compareFn&&((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:e,compareFn:t.compareFn,direction:i}),n=!0)}),n&&setTimeout(()=>this.updateSortedData())},l=t;null===(n=l.horizontal)||void 0===n||n.forEach(o),null===(e=l.vertical)||void 0===e||e.forEach(o),l.horizontal&&l.vertical&&(null===(i=l.horizontal)||void 0===i?void 0:i.length)>0&&(null===(a=l.vertical)||void 0===a?void 0:a.length)>0&&(this.disableSort=!0,u("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})})})}validateLabel(t){y(this,t,{required:!0})}validateMinWidth(t){c(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){_(this,t)}validateOn(t){k(this,t)}validateTableSettings(t){v(this,t)}validatePagination(t){try{t=p(t)}catch(t){}this.showPagination=P(t),r(this,"_pagination",P,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener(x.selectionChange,this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener(x.selectionChange,this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateTableSettings(this._tableSettings),this.validateHasSettingsMenu(this._hasSettingsMenu)}selectDisplayedData(t,n,e){return"number"==typeof n&&n>0&&"number"==typeof e&&e>0?(this.pageStartSlice=n*(e-1),this.pageEndSlice=n*e>t.length?t.length:n*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(t){const e=l("kol-table-pagination-label",{placeholders:{label:`${this.state._label} (${l(`kol-pagination-position-${t}`)})`}});return n("div",{class:`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`},n("span",{role:"status","aria-live":"polite"},l("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),n("div",{class:"kol-table-stateful__pagination-wrapper"},n(o,{class:"test",_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||T,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:e})))}getHeaderCellSortState(t){if(!this.disableSort&&"function"==typeof t.compareFn){if(t.key){const n=this.sortData.find(n=>n.key===t.key);if(null==n?void 0:n.direction)return n.direction}return"NOS"}}handleSort({key:t}){const n=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find(n=>n.key===t);n&&this.changeCellSort(n)}getSelectedData(t){var n;const e=this.state._selection;if(e){const i=null!==(n=e.keyPropertyName)&&void 0!==n?n:"id",a=Array.isArray(t)?t:[t],o=new Set(a.map(String)),l=this.state._sortedData.filter(t=>o.has(String(t[i])));if(!1===(null==e?void 0:e.multiple))return l[0];if(i)return l}return null}handleSelectionChange(t,n){var e;const i=this.state._selection;i&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},i),{selectedKeys:Array.isArray(n)?n:[n]})}));const a=this.getSelectedData(n);"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e[w.onSelectionChange])&&this.state._on[w.onSelectionChange](t,a),this.host&&S(this.host,x.selectionChange,a)}async getSelection(){var t;const n=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(n)}render(){var t,i,o,l,s,r;const d=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(i=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==i?i:10:this.state._sortedData.length,this.state._pagination._page||1),h="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("top"):null,c="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("bottom"):null,p={horizontal:null!==(l=null===(o=this.state._headers.horizontal)||void 0===o?void 0:o.map(t=>t.map(t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))&&void 0!==l?l:[],vertical:null!==(r=null===(s=this.state._headers.vertical)||void 0===s?void 0:s.map(t=>t.map(t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))&&void 0!==r?r:[]};return n(e,{key:"aa9cf31c3414d328fdbddb0fcbec72ce81364eb8",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&h,n(a,{key:"8d1977bed3cf32eba781ac9b50dd05956f87fd2b",ref:this.catchRef,_data:d,_headerCells:p,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection,_tableSettings:this.state._tableSettings,_hasSettingsMenu:this.state._hasSettingsMenu}),this.pageEndSlice>0&&this.showPagination&&c)}get host(){return i(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_hasSettingsMenu:["validateHasSettingsMenu"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_tableSettings:["validateTableSettings"],_pagination:["validatePagination"]}}};A.style={default:O};export{A as kol_table_stateful};
+import{r as t,h as n,H as e,g as i}from"./index-C0tYQjse.js";import{i as o,m as a}from"./component-names-CkE54Ym7.js";import{t as l}from"./i18n-CdSCDnmA.js";import{d as s,w as r,s as d,O as h,e as c,p,o as b,j as u}from"./common-8fBdMvJM.js";import{v as f,a as m,b as g,c as _,d as k,e as v}from"./table-settings-DSZObo-2.js";import{v as y}from"./label-CdtNxOKu.js";import{C as w}from"./keyboard-D6PoWr38.js";import{K as x,d as S}from"./events-CoPFQEiC.js";import"./i18n-ZF6JbdVP.js";const z=(t,n,e={})=>{s(t,"_allowMultiSort",n,Object.assign({defaultValue:!1},e))},j=["top","bottom","both"],C=(t,n)=>{r(t,"_paginationPosition",t=>"string"==typeof t&&j.includes(t),new Set([`PaginationPositionPropType {${j.join(", ")}`]),n,{defaultValue:"bottom"})},O='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: 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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    place-items: center;\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-button__text {\n    width: 100%;\n    margin: auto;\n  }\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  }\n  .kol-table-settings .kol-popover-button__popover {\n    background: #fff;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border: 1px solid #d1d5db;\n  }\n  .kol-table-settings__columns-container {\n    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    display: grid;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content minmax(max-content, 1fr) calc(100 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n  .kol-table {\n    display: block;\n    position: relative;\n    max-width: 100%;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n    text-align: start;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    display: flex;\n    position: relative;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    border-style: solid;\n    margin: 0;\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: "";\n  }\n  .kol-table__selection-input--checkbox {\n    background-color: rgb(255, 255, 255);\n    display: flex;\n    position: relative;\n    width: calc(var(--a11y-min-size) / 2);\n    height: calc(var(--a11y-min-size) / 2);\n    border-width: 2px;\n    align-items: center;\n    justify-content: center;\n    line-height: 1.5;\n  }\n  .kol-table__selection-input--radio {\n    border-radius: 100%;\n    display: flex;\n    width: 1.5em;\n    min-width: 1.5em;\n    height: 1.5em;\n    min-height: 1.5em;\n    padding: 0;\n    border-width: 2px;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    width: 0.75em;\n    height: 0.75em;\n    margin: auto;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n  .kol-pagination {\n    display: grid;\n    gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: "•••";\n  }\n  .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n    display: grid;\n    place-items: center;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  @media (min-width: 1024px) {\n    .kol-pagination {\n      display: flex;\n    }\n  }\n  @media (max-width: 1024px) {\n    .kol-pagination {\n      flex-direction: column;\n    }\n  }\n}',P=[10,20,50,100],T=t=>!0===t||""===t||"object"==typeof t&&null!==t,A=class{constructor(n){t(this,n),this.catchRef=t=>{this.tableWcRef=t},this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this._paginationPosition="bottom",this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom",_hasSettingsMenu:!1},this.handlePagination={onClick:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,n),d(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePage:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,n),d(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePageSize:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,n),d(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),d(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=()=>{if(this.disableSort)return void d(this,"_sortedData",this.state._data);const t=[...this.state._data];this.sortData.length>0&&t.sort((t,n)=>{for(let e=0;e<this.sortData.length;e++){const i=this.sortData[e],a=i.compareFn(t,n);if(0!==a)return"ASC"===i.direction?a:-a}return 0}),d(this,"_sortedData",t)}}validateAllowMultiSort(t){z(this,t,{defaultValue:!1})}validateData(t){f(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){m(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){C(this,t)}validateHasSettingsMenu(t){g(this,t)}changeCellSort(t){var n;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key===(null===(n=this.sortData[0])||void 0===n?void 0:n.key)||(this.sortData=[]);const e=this.sortData.findIndex(n=>n.key===t.key);if(e>=0){const t=this.sortData[e];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(e,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData()}}validateHeaders(t){h(t,()=>{b(t,()=>{try{t=p(t)}catch(t){}r(this,"_headers",t=>"object"==typeof t&&null!==t,new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var n,e,i,a;const o=t=>{let n=!1;t.forEach(t=>{if("function"==typeof t.compareFn&&!t.key)return void u("[KolTableStateful] A sortable column requires the 'key' property.");const e=t.key;if(!e)return;const i=t.sortDirection;"ASC"!==i&&"DESC"!==i||"function"==typeof t.compareFn&&((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:e,compareFn:t.compareFn,direction:i}),n=!0)}),n&&setTimeout(()=>this.updateSortedData())},l=t;null===(n=l.horizontal)||void 0===n||n.forEach(o),null===(e=l.vertical)||void 0===e||e.forEach(o),l.horizontal&&l.vertical&&(null===(i=l.horizontal)||void 0===i?void 0:i.length)>0&&(null===(a=l.vertical)||void 0===a?void 0:a.length)>0&&(this.disableSort=!0,u("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})})})}validateLabel(t){y(this,t,{required:!0})}validateMinWidth(t){c(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){_(this,t)}validateOn(t){k(this,t)}validateTableSettings(t){v(this,t)}validatePagination(t){try{t=p(t)}catch(t){}this.showPagination=T(t),r(this,"_pagination",T,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener(x.selectionChange,this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener(x.selectionChange,this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateTableSettings(this._tableSettings),this.validateHasSettingsMenu(this._hasSettingsMenu)}selectDisplayedData(t,n,e){return"number"==typeof n&&n>0&&"number"==typeof e&&e>0?(this.pageStartSlice=n*(e-1),this.pageEndSlice=n*e>t.length?t.length:n*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(t){const e=l("kol-table-pagination-label",{placeholders:{label:`${this.state._label} (${l(`kol-pagination-position-${t}`)})`}});return n("div",{class:`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`},n("span",{role:"status","aria-live":"polite"},l("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),n("div",{class:"kol-table-stateful__pagination-wrapper"},n(o,{class:"test",_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||P,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:e})))}getHeaderCellSortState(t){if(!this.disableSort&&"function"==typeof t.compareFn){if(t.key){const n=this.sortData.find(n=>n.key===t.key);if(null==n?void 0:n.direction)return n.direction}return"NOS"}}handleSort({key:t}){const n=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find(n=>n.key===t);n&&this.changeCellSort(n)}getSelectedData(t){var n;const e=this.state._selection;if(e){const i=null!==(n=e.keyPropertyName)&&void 0!==n?n:"id",a=Array.isArray(t)?t:[t],o=new Set(a.map(String)),l=this.state._sortedData.filter(t=>o.has(String(t[i])));if(!1===(null==e?void 0:e.multiple))return l[0];if(i)return l}return null}handleSelectionChange(t,n){var e;const i=this.state._selection;i&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},i),{selectedKeys:Array.isArray(n)?n:[n]})}));const a=this.getSelectedData(n);"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e[w.onSelectionChange])&&this.state._on[w.onSelectionChange](t,a),this.host&&S(this.host,x.selectionChange,a)}async getSelection(){var t;const n=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(n)}render(){var t,i,o,l,s,r;const d=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(i=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==i?i:10:this.state._sortedData.length,this.state._pagination._page||1),h="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("top"):null,c="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("bottom"):null,p={horizontal:null!==(l=null===(o=this.state._headers.horizontal)||void 0===o?void 0:o.map(t=>t.map(t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))&&void 0!==l?l:[],vertical:null!==(r=null===(s=this.state._headers.vertical)||void 0===s?void 0:s.map(t=>t.map(t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))&&void 0!==r?r:[]};return n(e,{key:"aa9cf31c3414d328fdbddb0fcbec72ce81364eb8",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&h,n(a,{key:"8d1977bed3cf32eba781ac9b50dd05956f87fd2b",ref:this.catchRef,_data:d,_headerCells:p,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection,_tableSettings:this.state._tableSettings,_hasSettingsMenu:this.state._hasSettingsMenu}),this.pageEndSlice>0&&this.showPagination&&c)}get host(){return i(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_hasSettingsMenu:["validateHasSettingsMenu"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_tableSettings:["validateTableSettings"],_pagination:["validatePagination"]}}};A.style={default:O};export{A as kol_table_stateful};

package/dist/kolibri/kol-table-stateless-wc.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e,F as n,g as r}from"./index-k_YQEFTw.js";import{c as i}from"./clsx-eK3rPvPS.js";import{e as a,a as o,d as l,w as s}from"./component-names-CkE54Ym7.js";import{t as c}from"./i18n-CdSCDnmA.js";import{O as u,o as f,p as d,w as h,s as v}from"./common-8fBdMvJM.js";import{b,v as _,a as p,f as y,c as k,e as j}from"./table-settings-DSZObo-2.js";import{v as m}from"./label-CdtNxOKu.js";import{C as g}from"./keyboard-D6PoWr38.js";import{n as w}from"./dev.utils-D6Xe7v8L.js";import{d as S,K as A}from"./events-CoPFQEiC.js";import{i as O,c as $,r as C,a as D,f as x,b as M,S as F}from"./isObject-DvSELytj.js";import"./i18n-ZF6JbdVP.js";const P=(e,t)=>{u(t,()=>{f(t,()=>{try{t=d(t)}catch(e){}h(e,"_headerCells",e=>"object"==typeof e&&null!==e&&(void 0===e.horizontal||Array.isArray(e.horizontal)&&void 0===e.horizontal.find(e=>!Array.isArray(e)))&&(void 0===e.vertical||Array.isArray(e.vertical)&&void 0===e.vertical.find(e=>!Array.isArray(e)))&&!0,new Set(["TableHeaderCellsPropType"]),t)})})};var W="[object AsyncFunction]",E="[object Function]",K="[object GeneratorFunction]",T="[object Proxy]";function H(e){if(!O(e))return!1;var t=$(e);return t==E||t==K||t==W||t==T}var R=C["__core-js_shared__"],N=function(){var e=/[^.]+$/.exec(R&&R.keys&&R.keys.IE_PROTO||"");return e?"Symbol(src)_1."+e:""}();function B(e){return!!N&&N in e}var L=Function.prototype,z=L.toString;function I(e){if(null!=e){try{return z.call(e)}catch(e){}try{return e+""}catch(e){}}return""}var U=/[\\^$.*+?()[\]{}|]/g,V=/^\[object .+?Constructor\]$/,J=Function.prototype,Q=Object.prototype,Y=J.toString,Z=Q.hasOwnProperty,q=RegExp("^"+Y.call(Z).replace(U,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");function G(e){return!(!O(e)||B(e))&&(H(e)?q:V).test(I(e))}function X(e,t){return null==e?void 0:e[t]}function tt(e,t){var n=X(e,t);return G(n)?n:void 0}var et=tt(C,"WeakMap"),nt=9007199254740991,rt=/^(?:0|[1-9]\d*)$/;function it(e,t){var n=typeof e;return!!(t=null==t?nt:t)&&("number"==n||"symbol"!=n&&rt.test(e))&&e>-1&&e%1==0&&e<t}function at(e,t){return e===t||e!=e&&t!=t}var ot=9007199254740991;function lt(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=ot}function st(e){return null!=e&&lt(e.length)&&!H(e)}var ct=Object.prototype;function ut(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||ct)}function ft(e,t){for(var n=-1,r=Array(e);++n<e;)r[n]=t(n);return r}var dt="[object Arguments]";function ht(e){return D(e)&&$(e)==dt}var vt=Object.prototype,bt=vt.hasOwnProperty,_t=vt.propertyIsEnumerable,pt=ht(function(){return arguments}())?ht:function(e){return D(e)&&bt.call(e,"callee")&&!_t.call(e,"callee")};function yt(){return!1}var kt="object"==typeof exports&&exports&&!exports.nodeType&&exports,jt=kt&&"object"==typeof module&&module&&!module.nodeType&&module,mt=jt&&jt.exports===kt,gt=mt?C.Buffer:void 0,wt=gt?gt.isBuffer:void 0,St=wt||yt,At="[object Arguments]",Ot="[object Array]",$t="[object Boolean]",Ct="[object Date]",Dt="[object Error]",xt="[object Function]",Mt="[object Map]",Ft="[object Number]",Pt="[object Object]",Wt="[object RegExp]",Et="[object Set]",Kt="[object String]",Tt="[object WeakMap]",Ht="[object ArrayBuffer]",Rt="[object DataView]",Nt="[object Float32Array]",Bt="[object Float64Array]",Lt="[object Int8Array]",zt="[object Int16Array]",It="[object Int32Array]",Ut="[object Uint8Array]",Vt="[object Uint8ClampedArray]",Jt="[object Uint16Array]",Qt="[object Uint32Array]",Yt={};function Zt(e){return D(e)&&lt(e.length)&&!!Yt[$(e)]}function qt(e){return function(t){return e(t)}}Yt[Nt]=Yt[Bt]=Yt[Lt]=Yt[zt]=Yt[It]=Yt[Ut]=Yt[Vt]=Yt[Jt]=Yt[Qt]=!0,Yt[At]=Yt[Ot]=Yt[Ht]=Yt[$t]=Yt[Rt]=Yt[Ct]=Yt[Dt]=Yt[xt]=Yt[Mt]=Yt[Ft]=Yt[Pt]=Yt[Wt]=Yt[Et]=Yt[Kt]=Yt[Tt]=!1;var Gt="object"==typeof exports&&exports&&!exports.nodeType&&exports,Xt=Gt&&"object"==typeof module&&module&&!module.nodeType&&module,te=Xt&&Xt.exports===Gt,ee=te&&x.process,ne=function(){try{var e=Xt&&Xt.require&&Xt.require("util").types;return e||ee&&ee.binding&&ee.binding("util")}catch(e){}}(),re=ne&&ne.isTypedArray,ie=re?qt(re):Zt,ae=Object.prototype,oe=ae.hasOwnProperty;function le(e,t){var n=M(e),r=!n&&pt(e),a=!n&&!r&&St(e),i=!n&&!r&&!a&&ie(e),o=n||r||a||i,l=o?ft(e.length,String):[],s=l.length;for(var c in e)!oe.call(e,c)||o&&("length"==c||a&&("offset"==c||"parent"==c)||i&&("buffer"==c||"byteLength"==c||"byteOffset"==c)||it(c,s))||l.push(c);return l}function se(e,t){return function(n){return e(t(n))}}var ce=se(Object.keys,Object),ue=Object.prototype,fe=ue.hasOwnProperty;function de(e){if(!ut(e))return ce(e);var t=[];for(var n in Object(e))fe.call(e,n)&&"constructor"!=n&&t.push(n);return t}function he(e){return st(e)?le(e):de(e)}var ve=tt(Object,"create");function be(){this.__data__=ve?ve(null):{},this.size=0}function _e(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t}var pe="__lodash_hash_undefined__",ye=Object.prototype,ke=ye.hasOwnProperty;function je(e){var t=this.__data__;if(ve){var n=t[e];return n===pe?void 0:n}return ke.call(t,e)?t[e]:void 0}var me=Object.prototype,ge=me.hasOwnProperty;function we(e){var t=this.__data__;return ve?void 0!==t[e]:ge.call(t,e)}var Se="__lodash_hash_undefined__";function Ae(e,t){var n=this.__data__;return this.size+=this.has(e)?0:1,n[e]=ve&&void 0===t?Se:t,this}function Oe(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}function $e(){this.__data__=[],this.size=0}function Ce(e,t){for(var n=e.length;n--;)if(at(e[n][0],t))return n;return-1}Oe.prototype.clear=be,Oe.prototype.delete=_e,Oe.prototype.get=je,Oe.prototype.has=we,Oe.prototype.set=Ae;var De=Array.prototype,xe=De.splice;function Me(e){var t=this.__data__,n=Ce(t,e);return!(n<0)&&(n==t.length-1?t.pop():xe.call(t,n,1),--this.size,!0)}function Fe(e){var t=this.__data__,n=Ce(t,e);return n<0?void 0:t[n][1]}function Pe(e){return Ce(this.__data__,e)>-1}function We(e,t){var n=this.__data__,r=Ce(n,e);return r<0?(++this.size,n.push([e,t])):n[r][1]=t,this}function Ee(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}Ee.prototype.clear=$e,Ee.prototype.delete=Me,Ee.prototype.get=Fe,Ee.prototype.has=Pe,Ee.prototype.set=We;var Ke=tt(C,"Map");function Te(){this.size=0,this.__data__={hash:new Oe,map:new(Ke||Ee),string:new Oe}}function He(e){var t=typeof e;return"string"==t||"number"==t||"symbol"==t||"boolean"==t?"__proto__"!==e:null===e}function Re(e,t){var n=e.__data__;return He(t)?n["string"==typeof t?"string":"hash"]:n.map}function Ne(e){var t=Re(this,e).delete(e);return this.size-=t?1:0,t}function Be(e){return Re(this,e).get(e)}function Le(e){return Re(this,e).has(e)}function ze(e,t){var n=Re(this,e),r=n.size;return n.set(e,t),this.size+=n.size==r?0:1,this}function Ie(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}function Ue(e,t){for(var n=-1,r=t.length,a=e.length;++n<r;)e[a+n]=t[n];return e}function Ve(){this.__data__=new Ee,this.size=0}function Je(e){var t=this.__data__,n=t.delete(e);return this.size=t.size,n}function Qe(e){return this.__data__.get(e)}function Ye(e){return this.__data__.has(e)}Ie.prototype.clear=Te,Ie.prototype.delete=Ne,Ie.prototype.get=Be,Ie.prototype.has=Le,Ie.prototype.set=ze;var Ze=200;function qe(e,t){var n=this.__data__;if(n instanceof Ee){var r=n.__data__;if(!Ke||r.length<Ze-1)return r.push([e,t]),this.size=++n.size,this;n=this.__data__=new Ie(r)}return n.set(e,t),this.size=n.size,this}function Ge(e){var t=this.__data__=new Ee(e);this.size=t.size}function Xe(e,t){for(var n=-1,r=null==e?0:e.length,a=0,i=[];++n<r;){var o=e[n];t(o,n,e)&&(i[a++]=o)}return i}function tn(){return[]}Ge.prototype.clear=Ve,Ge.prototype.delete=Je,Ge.prototype.get=Qe,Ge.prototype.has=Ye,Ge.prototype.set=qe;var en=Object.prototype,nn=en.propertyIsEnumerable,rn=Object.getOwnPropertySymbols,an=rn?function(e){return null==e?[]:(e=Object(e),Xe(rn(e),function(t){return nn.call(e,t)}))}:tn;function on(e,t,n){var r=t(e);return M(e)?r:Ue(r,n(e))}function ln(e){return on(e,he,an)}var sn=tt(C,"DataView"),cn=tt(C,"Promise"),un=tt(C,"Set"),fn="[object Map]",dn="[object Object]",hn="[object Promise]",vn="[object Set]",bn="[object WeakMap]",_n="[object DataView]",pn=I(sn),yn=I(Ke),kn=I(cn),jn=I(un),mn=I(et),gn=$;(sn&&gn(new sn(new ArrayBuffer(1)))!=_n||Ke&&gn(new Ke)!=fn||cn&&gn(cn.resolve())!=hn||un&&gn(new un)!=vn||et&&gn(new et)!=bn)&&(gn=function(e){var t=$(e),n=t==dn?e.constructor:void 0,r=n?I(n):"";if(r)switch(r){case pn:return _n;case yn:return fn;case kn:return hn;case jn:return vn;case mn:return bn}return t});var wn=C.Uint8Array,Sn="__lodash_hash_undefined__";function An(e){return this.__data__.set(e,Sn),this}function On(e){return this.__data__.has(e)}function $n(e){var t=-1,n=null==e?0:e.length;for(this.__data__=new Ie;++t<n;)this.add(e[t])}function Cn(e,t){for(var n=-1,r=null==e?0:e.length;++n<r;)if(t(e[n],n,e))return!0;return!1}function Dn(e,t){return e.has(t)}$n.prototype.add=$n.prototype.push=An,$n.prototype.has=On;var xn=1,Mn=2;function Fn(e,t,n,r,a,i){var o=n&xn,l=e.length,s=t.length;if(l!=s&&!(o&&s>l))return!1;var c=i.get(e),h=i.get(t);if(c&&h)return c==t&&h==e;var d=-1,u=!0,b=n&Mn?new $n:void 0;for(i.set(e,t),i.set(t,e);++d<l;){var _=e[d],v=t[d];if(r)var f=o?r(v,_,d,t,e,i):r(_,v,d,e,t,i);if(void 0!==f){if(f)continue;u=!1;break}if(b){if(!Cn(t,function(e,t){if(!Dn(b,t)&&(_===e||a(_,e,n,r,i)))return b.push(t)})){u=!1;break}}else if(_!==v&&!a(_,v,n,r,i)){u=!1;break}}return i.delete(e),i.delete(t),u}function Pn(e){var t=-1,n=Array(e.size);return e.forEach(function(e,r){n[++t]=[r,e]}),n}function Wn(e){var t=-1,n=Array(e.size);return e.forEach(function(e){n[++t]=e}),n}var En=1,Kn=2,Tn="[object Boolean]",Hn="[object Date]",Rn="[object Error]",Nn="[object Map]",Bn="[object Number]",Ln="[object RegExp]",zn="[object Set]",In="[object String]",Un="[object Symbol]",Vn="[object ArrayBuffer]",Jn="[object DataView]",Qn=F?F.prototype:void 0,Yn=Qn?Qn.valueOf:void 0;function Zn(e,t,n,r,a,i,o){switch(n){case Jn:if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case Vn:return!(e.byteLength!=t.byteLength||!i(new wn(e),new wn(t)));case Tn:case Hn:case Bn:return at(+e,+t);case Rn:return e.name==t.name&&e.message==t.message;case Ln:case In:return e==t+"";case Nn:var l=Pn;case zn:var s=r&En;if(l||(l=Wn),e.size!=t.size&&!s)return!1;var c=o.get(e);if(c)return c==t;r|=Kn,o.set(e,t);var h=Fn(l(e),l(t),r,a,i,o);return o.delete(e),h;case Un:if(Yn)return Yn.call(e)==Yn.call(t)}return!1}var qn=1,Gn=Object.prototype,Xn=Gn.hasOwnProperty;function tr(e,t,n,r,a,i){var o=n&qn,l=ln(e),s=l.length;if(s!=ln(t).length&&!o)return!1;for(var c=s;c--;){var h=l[c];if(!(o?h in t:Xn.call(t,h)))return!1}var d=i.get(e),u=i.get(t);if(d&&u)return d==t&&u==e;var b=!0;i.set(e,t),i.set(t,e);for(var _=o;++c<s;){var v=e[h=l[c]],f=t[h];if(r)var p=o?r(f,v,h,t,e,i):r(v,f,h,e,t,i);if(!(void 0===p?v===f||a(v,f,n,r,i):p)){b=!1;break}_||(_="constructor"==h)}if(b&&!_){var y=e.constructor,g=t.constructor;y==g||!("constructor"in e)||!("constructor"in t)||"function"==typeof y&&y instanceof y&&"function"==typeof g&&g instanceof g||(b=!1)}return i.delete(e),i.delete(t),b}var er=1,nr="[object Arguments]",rr="[object Array]",ir="[object Object]",ar=Object.prototype,or=ar.hasOwnProperty;function lr(e,t,n,r,a,i){var o=M(e),l=M(t),s=o?rr:gn(e),c=l?rr:gn(t),h=(s=s==nr?ir:s)==ir,d=(c=c==nr?ir:c)==ir,u=s==c;if(u&&St(e)){if(!St(t))return!1;o=!0,h=!1}if(u&&!h)return i||(i=new Ge),o||ie(e)?Fn(e,t,n,r,a,i):Zn(e,t,s,n,r,a,i);if(!(n&er)){var b=h&&or.call(e,"__wrapped__"),_=d&&or.call(t,"__wrapped__");if(b||_){var v=b?e.value():e,f=_?t.value():t;return i||(i=new Ge),a(v,f,n,r,i)}}return!!u&&(i||(i=new Ge),tr(e,t,n,r,a,i))}function sr(e,t,n,r,a){return e===t||(null==e||null==t||!D(e)&&!D(t)?e!=e&&t!=t:lr(e,t,n,r,sr,a))}function cr(e,t){return sr(e,t)}const ur=/^\d+(\.\d+)?([a-z]+|%)?$/,fr=(e,t,n)=>{h(e,"_minWidth",e=>"string"==typeof e&&ur.test(e),new Set(["String","/^\\d+(\\.\\d+)?([a-z]+|%)?$/"]),t,n)},dr=class{constructor(n){t(this,n),this.translateNoEntries=c("kol-no-entries"),this.state={_data:[],_headerCells:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_hasSettingsMenu:!1},this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.translateSort=c("kol-sort"),this.tableDivElementHasScrollbar=!1,this.renderTableRow=(t,n,r,a=!1)=>{var o,l;let s=String(n);return this.horizontal&&(null===(o=t[0])||void 0===o?void 0:o.data)&&(s=null!==(l=this.getDataKey(t[0].data))&&void 0!==l?l:s),e("tr",{class:i("kol-table__row",{"kol-table__row--body":!a,"kol-table__row--footer":a}),key:`row-${s}`},this.renderSelectionCell(t,n),t.map((e,t)=>this.renderTableCell(e,n,t,r)))},this.renderTableCell=(t,n,r,a)=>{const o=this.getColumnSettings(t);if(o&&!o.visible)return"";let l=`${n}-${r}-${t.label}`;if(t.data){const e=this.getDataKey(t.data);l=e?`${e}-${this.horizontal?r:n}`:l}return t.headerCell?this.renderHeadingCell(t,n,r,a):e("td",{key:`cell-${l}`,class:i("kol-table__cell kol-table__cell--body",{[`kol-table__cell--align-${t.textAlign}`]:t.textAlign}),colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:(null==o?void 0:o.width)?`${o.width}ch`:t.width},ref:"function"==typeof t.render?e=>{this.cellRender(t,e)}:void 0},"function"!=typeof t.render?t.label:"")}}validateHasSettingsMenu(e){b(this,e)}validateData(e){_(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){p(this,e)}validateHeaderCells(e){P(this,e),cr(this.previousHeaderCells,this.state._headerCells)||this.initializeTableSettings(),this.previousHeaderCells=this.state._headerCells}validateLabel(e){m(this,e,{required:!0})}validateMinWidth(e){fr(this,e)}validateOn(e){y(this,e)}validateSelection(e){k(this,e)}validateTableSettings(e){j(this,e)}handleKeyDown(e){var t;if("ArrowUp"===e.key||"ArrowDown"===e.key){const n=null===(t=this.tableDivElement)||void 0===t?void 0:t.querySelector(":focus");let r=this.checkboxRefs.indexOf(n);r>-1&&(e.preventDefault(),"ArrowDown"===e.key?(r=(r+1)%this.checkboxRefs.length,this.checkboxRefs[r].focus()):"ArrowUp"===e.key&&(e.preventDefault(),r=(r+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[r].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}handleSettingsChange(e){v(this,"_tableSettings",e.detail)}disconnectedCallback(){var e;null===(e=this.tableDivElementResizeObserver)||void 0===e||e.disconnect()}checkDivElementScrollbar(){this.tableDivElement&&(this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth)}updateDataToKeyMap(e){e.forEach(e=>{this.dataToKeyMap.has(e)||this.dataToKeyMap.set(e,w())}),this.dataToKeyMap.forEach((t,n)=>{e.includes(n)||this.dataToKeyMap.delete(n)})}getDataKey(e){return this.dataToKeyMap.get(e)}cellRender(e,t){t&&(clearTimeout(this.cellsToRenderTimeouts.get(t)),this.cellsToRenderTimeouts.set(t,setTimeout(()=>{if("function"==typeof e.render){const n=e.render(t,e,e.data,this.state._data);"string"==typeof n&&(t.textContent=n)}})))}getNumberOfCols(e,t){let n=0;return e.forEach(e=>{let t=0;Array.isArray(e)&&e.forEach(e=>{var n;return t+=null!==(n=e.colSpan)&&void 0!==n?n:1}),n<t&&(n=t)}),0===n&&(n=t.length),n}getNumberOfRows(e,t){var n;let r=0;return e.forEach(e=>{let t=0;Array.isArray(e)&&e.forEach(e=>{var n;return t+=null!==(n=e.rowSpan)&&void 0!==n?n:1}),r<t&&(r=t)}),0===r?r=t.length:r-=(null===(n=this.state._dataFoot)||void 0===n?void 0:n.length)||0,r}getThePrimaryHeadersWithKeyOrRenderFunction(e){const t=[];return e.forEach(e=>{e.forEach(e=>{"string"!=typeof e.key&&"function"!=typeof e.render||t.push(e)})}),t}getPrimaryHeaders(e){var t,n;let r=this.getThePrimaryHeadersWithKeyOrRenderFunction(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===r.length&&(r=this.getThePrimaryHeadersWithKeyOrRenderFunction(null!==(n=e.vertical)&&void 0!==n?n:[]),r.length>0&&(this.horizontal=!1)),r}getColumnPositionMap(){var e;const t=new Map;return null===(e=this.state._tableSettings)||void 0===e||e.columns.forEach(e=>{t.set(e.key,e.position)}),t}sortByColumnPosition(e){const t=this.getColumnPositionMap();return[...e].sort((e,n)=>{var r,a,i,o;return(null!==(a=t.get(null!==(r=e.key)&&void 0!==r?r:""))&&void 0!==a?a:Number.MAX_SAFE_INTEGER)-(null!==(o=t.get(null!==(i=n.key)&&void 0!==i?i:""))&&void 0!==o?o:Number.MAX_SAFE_INTEGER)})}createDataField(e,t,n){var r;t.horizontal=Array.isArray(null==t?void 0:t.horizontal)?t.horizontal:[],t.vertical=Array.isArray(null==t?void 0:t.vertical)?t.vertical:[];const a=this.getPrimaryHeaders(t),i=this.getNumberOfCols(t.horizontal,e);let o=this.getNumberOfRows(t.vertical,e),l=0;n&&(l=o,o+=(null===(r=this.state._dataFoot)||void 0===r?void 0:r.length)||0);const s=[],c=[],h=[];t.vertical.forEach((e,t)=>{c[t]=0,h[t]=[]});const d=this.sortByColumnPosition(a);for(let r=l;r<o;r++){const a=[];t.vertical.forEach((e,t)=>{let n=0;if(h[t].forEach(e=>n+=e),n<=r){const i=e[r-n+c[t]];if("object"==typeof i){a.push(Object.assign(Object.assign({},i),{headerCell:!0,data:{}}));let e=1;if("number"==typeof i.rowSpan&&i.rowSpan>1&&(e=i.rowSpan),h[t].push(e),"number"==typeof i.colSpan&&i.colSpan>1)for(let n=1;n<i.colSpan;n++)h[t+n].push(e);c[t]++}}});for(let t=0;t<i;t++)if(!0===this.horizontal){const i=n&&this.state._dataFoot?this.state._dataFoot[r-l]:e[r];"object"!=typeof d[t]||null===d[t]||"object"!=typeof i||null===i||"string"!=typeof d[t].key&&"function"!=typeof d[t].render||a.push(Object.assign(Object.assign({},d[t]),{colSpan:void 0,data:i,label:i[d[t].key],rowSpan:void 0}))}else"object"!=typeof d[r]||null===d[r]||"object"!=typeof e[t]||null===e[t]||"string"!=typeof d[r].key&&"function"!=typeof d[r].render||a.push(Object.assign(Object.assign({},d[r]),{colSpan:void 0,data:e[t],label:e[t][d[r].key],rowSpan:void 0}));s.push(a)}if(0===e.length){let e=0,n=0;Array.isArray(t.horizontal)&&t.horizontal.length>0&&t.horizontal[0].forEach(t=>{e+=t.colSpan||1}),Array.isArray(t.vertical)&&t.vertical.length>0&&(e-=t.vertical.length,t.vertical[0].forEach(e=>{n+=e.rowSpan||1}));const r={colSpan:e,label:this.translateNoEntries,render:void 0,rowSpan:Math.max(n,1)};0===s.length?s.push([r]):s[0].push(r)}return s}handleSelectionChangeCallbackAndEvent(e,t){var n;"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n[g.onSelectionChange])&&this.state._on[g.onSelectionChange](e,t),this.host&&S(this.host,A.selectionChange,t)}initializeTableSettings(){if(this._tableSettings)return;const e=this.getPrimaryHeaders(this.state._headerCells);this.state._tableSettings||(this.state._tableSettings={columns:[]}),this.state._tableSettings.columns=e.filter(e=>e.key).map((e,t)=>{var n;return{hidable:!1!==e.hidable,key:null!==(n=e.key)&&void 0!==n?n:w(),label:e.label,position:t,visible:!0}})}componentWillLoad(){this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaderCells(this._headerCells),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validateSelection(this._selection),this.validateTableSettings(this._tableSettings),this.validateHasSettingsMenu(this._hasSettingsMenu)}renderSelectionCell(t,n){var r;const l=this.state._selection;if(!l)return"";const s=this.getSelectionKeyPropertyName(),c=null===(r=t[0])||void 0===r?void 0:r.data;if(!c)return"";const h=c[s],d=l.multiple||void 0===l.multiple,u=(()=>{const e=null==l?void 0:l.selectedKeys;return(void 0===e?[]:Array.isArray(e)?e:[e]).some(e=>String(e)===String(h))})(),b=(()=>{const e=null==l?void 0:l.disabledKeys;return(void 0===e?[]:Array.isArray(e)?e:[e]).some(e=>String(e)===String(h))})(),_=l.label(c),v={name:"selection",checked:u,disabled:b,id:String(h),"aria-label":_};return e("td",{key:`tbody-${n}-selection`,class:"kol-table__cell kol-table__cell--selection"},e("div",{class:i("kol-table__selection",{"kol-table__selection--checked":u})},d?e("label",{class:i("kol-table__selection-label",{"kol-table__selection-label--disabled":b})},e(a,{class:"kol-table__selection-icon",_icons:"codicon "+(u?"codicon-check":""),_label:""}),e("input",Object.assign({class:i("kol-table__selection-input kol-table__selection-input--checkbox"),ref:e=>e&&this.checkboxRefs.push(e)},v,{type:"checkbox",onInput:e=>{const t=(()=>{const e=null==l?void 0:l.selectedKeys;return void 0===e?[]:Array.isArray(e)?e:[e]})(),n=u?t.filter(e=>String(e)!==String(h)):[...t,h];this.handleSelectionChangeCallbackAndEvent(e,null!=n?n:[])}}))):e("label",{class:"kol-table__selection-label"},e("input",Object.assign({class:i("kol-table__selection-input kol-table__selection-input--radio")},v,{type:"radio",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,h)}}))),e(o,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${h}-label`,_label:_})))}getColumnSettings(e){var t;return null===(t=this.state._tableSettings)||void 0===t?void 0:t.columns.find(t=>t.key===e.key)}getSelectionKeyPropertyName(){var e,t;return null!==(t=null===(e=this.state._selection)||void 0===e?void 0:e.keyPropertyName)&&void 0!==t?t:"id"}getDataWithSelectionEnabled(){const e=this.getSelectionKeyPropertyName();return this.state._data.filter(t=>{var n;const r=null===(n=this.state._selection)||void 0===n?void 0:n.disabledKeys;return!(void 0===r?[]:Array.isArray(r)?r:[r]).some(n=>String(n)===String(t[e]))})}getSelectedKeysWithoutDisabledKeys(){const e=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})(),t=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.disabledKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})();return e.filter(e=>!t.some(t=>String(t)===String(e)))}getSelectedKeysWithDisabledKeysOnly(){const e=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})(),t=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.disabledKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})();return e.filter(e=>t.some(t=>String(t)===String(e)))}getRevertedSelection(e){var t;const n=this.getSelectionKeyPropertyName(),r=null!==(t=this.getSelectedKeysWithDisabledKeysOnly())&&void 0!==t?t:[];return e&&r.push(...this.getDataWithSelectionEnabled().map(e=>null==e?void 0:e[n])),r}getTableMinWidth(){var e,t;const n=null!==(t=null===(e=this.state._tableSettings)||void 0===e?void 0:e.columns.filter(e=>e.visible).reduce((e,t)=>{var n;return e+(null!==(n=t.width)&&void 0!==n?n:0)},0))&&void 0!==t?t:0;return"auto"===this.state._minWidth?`${n}ch`:`max(${this.state._minWidth}, ${n}ch)`}renderHeadingSelectionCell(){var t,n;const r=this.state._selection;if(!r)return e("th",{class:"kol-table__cell kol-table__cell--header",key:"thead-0"});if(!1===r.multiple)return e("td",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header kol-table__cell--selection"});const l=null!==(n=null===(t=this.getSelectedKeysWithoutDisabledKeys())||void 0===t?void 0:t.length)&&void 0!==n?n:0,s=l===this.getDataWithSelectionEnabled().length,h=0!==l&&!s;let d="kol-table-selection-indeterminate";s&&!h&&(d="kol-table-selection-none"),0===l&&(d="kol-table-selection-all");const u=c(d);return e("th",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header kol-table__cell--selection"},e("div",{class:i("kol-table__selection",{"kol-table__selection--indeterminate":h,"kol-table__selection--checked":s})},e("label",{class:"kol-table__selection-label"},e(a,{class:"kol-table__selection-icon",_icons:"codicon "+(h?"codicon-remove":s?"codicon-check":""),_label:""}),e("input",{class:i("kol-table__selection-input kol-table__selection-input--checkbox"),"data-testid":"selection-checkbox-all",ref:e=>e&&this.checkboxRefs.push(e),name:"selection",checked:s&&!h,indeterminate:h,"aria-label":u,type:"checkbox",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,this.getRevertedSelection(!s))}})),e(o,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${d}-label`,_label:u})))}renderHeaderTdCell(){return e(n,null,Array.isArray(this.state._headerCells.horizontal)&&this.state._headerCells.horizontal.length>0&&Array.isArray(this.state._headerCells.vertical)&&this.state._headerCells.vertical.length>0&&Array.isArray(this.state._headerCells.horizontal)&&e("td",{"aria-hidden":"true",colSpan:this.state._headerCells.vertical.length,rowSpan:this.state._headerCells.horizontal.length}))}renderHeadingCell(t,n,r,a){const o=this.getColumnSettings(t);if(o&&!o.visible)return"";let s="none",c="codicon codicon-fold";if(t.sortDirection)switch(t.sortDirection){case"ASC":c="codicon codicon-chevron-up",s="ascending";break;case"DESC":c="codicon codicon-chevron-down",s="descending";break;default:s="none"}const h=a?"row":"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col";return e("th",{key:`${n}-${r}-${t.label}`,class:i("kol-table__cell kol-table__cell--header",{[`kol-table__cell--align-${t.textAlign}`]:t.textAlign,[`kol-table__cell--${s}`]:s}),scope:h,colSpan:t.colSpan,rowSpan:t.rowSpan,style:{width:(null==o?void 0:o.width)?`${o.width}ch`:t.width},"aria-sort":s,"data-sort":`sort-${t.sortDirection}`},t.sortDirection?e(l,{class:"kol-table__sort-button",exportparts:"icon",_icons:{right:c},_label:t.label,_ariaDescription:this.translateSort,_on:{onClick:e=>{var n;"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onSort)&&t.key&&t.sortDirection&&this.state._on.onSort(e,{key:t.key,currentSortDirection:t.sortDirection}),this.host&&S(this.host,A.sort,{key:t.key,currentSortDirection:t.sortDirection})}}}):t.label)}renderSpacer(t,n){var r,a;const o=(null===(r=this.state._headerCells.vertical)||void 0===r?void 0:r.length)||0,l=null===(a=null==n?void 0:n[0])||void 0===a?void 0:a.reduce((e,t)=>e+(t.colSpan||1),0),s=this.state._selection?1:0;return e("tr",{"aria-hidden":"true",class:i("kol-table__spacer",`kol-table__spacer--${t}`)},e("td",{class:i(`kol-table__spacer-line kol-table__spacer-line--${t}`),colSpan:o+l+s}))}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return null;const t=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return e("tfoot",{class:"kol-table__footer"},[this.renderSpacer("foot",t),t.map((e,t)=>this.renderTableRow(e,t,!0,!0))])}render(){var t;const n=this.createDataField(this.state._data,this.state._headerCells);this.checkboxRefs=[];const r=null===(t=this.state._headerCells.horizontal)||void 0===t?void 0:t.map(e=>this.sortByColumnPosition(e));return e("div",{key:"6e331ba78cf709e99b1581ab7561c6575ab11fc3",class:"kol-table"},this.state._hasSettingsMenu&&e(s,{key:"550e2baf4bf306cf4cf704fbbc9670c328e86f8c",_tableSettings:this.state._tableSettings}),e("div",{key:"07ce276517d6705ae28d3d149e9b0085feb1b1a7",ref:e=>this.tableDivElement=e,class:"kol-table__scroll-container",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},e("table",{key:"61b6fb981849c3a30e121f20300e0bc5af3191a8",class:"kol-table__table",style:{minWidth:this.getTableMinWidth()}},e("caption",{key:"bc5578af4e2734c9e346c008ea4bfe543250114d",class:"kol-table__focus-element kol-table__caption",id:"caption",tabindex:this.tableDivElementHasScrollbar?"0":void 0},this.state._label),Array.isArray(r)&&e("thead",{key:"9e756ff97fa21b958739ca54e027b8e5486d7928",class:"kol-table__head"},[r.map((t,n)=>e("tr",{class:"kol-table__head-row",key:`thead-${n}`},this.state._selection&&this.renderHeadingSelectionCell(),0===n&&this.renderHeaderTdCell(),Array.isArray(t)&&t.map((e,t)=>this.renderHeadingCell(e,n,t,!1)))),this.renderSpacer("head",r)]),e("tbody",{key:"bab154fa144e9453a002fd6aeb94226d351b2955",class:"kol-table__body"},n.map((e,t)=>this.renderTableRow(e,t,!0))),this.renderFoot())))}get host(){return r(this)}static get watchers(){return{_hasSettingsMenu:["validateHasSettingsMenu"],_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_on:["validateOn"],_selection:["validateSelection"],_tableSettings:["validateTableSettings"]}}};export{dr as kol_table_stateless_wc};
+import{r as t,h as e,F as n,g as r}from"./index-C0tYQjse.js";import{c as i}from"./clsx-eK3rPvPS.js";import{e as a,a as o,d as s,w as l}from"./component-names-CkE54Ym7.js";import{t as c}from"./i18n-CdSCDnmA.js";import{O as u,o as f,p as d,w as h,s as v}from"./common-8fBdMvJM.js";import{b,v as _,a as p,f as y,c as k,e as j}from"./table-settings-DSZObo-2.js";import{v as m}from"./label-CdtNxOKu.js";import{C as g}from"./keyboard-D6PoWr38.js";import{n as w}from"./dev.utils-zTBHc_Bd.js";import{d as S,K as A}from"./events-CoPFQEiC.js";import{i as O,c as $,r as C,a as D,f as x,b as M,S as F}from"./isObject-DvSELytj.js";import"./i18n-ZF6JbdVP.js";const P=(e,t)=>{u(t,()=>{f(t,()=>{try{t=d(t)}catch(e){}h(e,"_headerCells",e=>"object"==typeof e&&null!==e&&(void 0===e.horizontal||Array.isArray(e.horizontal)&&void 0===e.horizontal.find(e=>!Array.isArray(e)))&&(void 0===e.vertical||Array.isArray(e.vertical)&&void 0===e.vertical.find(e=>!Array.isArray(e)))&&!0,new Set(["TableHeaderCellsPropType"]),t)})})};var W="[object AsyncFunction]",E="[object Function]",K="[object GeneratorFunction]",T="[object Proxy]";function H(e){if(!O(e))return!1;var t=$(e);return t==E||t==K||t==W||t==T}var R=C["__core-js_shared__"],B=function(){var e=/[^.]+$/.exec(R&&R.keys&&R.keys.IE_PROTO||"");return e?"Symbol(src)_1."+e:""}();function N(e){return!!B&&B in e}var z=Function.prototype,I=z.toString;function L(e){if(null!=e){try{return I.call(e)}catch(e){}try{return e+""}catch(e){}}return""}var U=/[\\^$.*+?()[\]{}|]/g,V=/^\[object .+?Constructor\]$/,J=Function.prototype,Q=Object.prototype,Y=J.toString,Z=Q.hasOwnProperty,q=RegExp("^"+Y.call(Z).replace(U,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");function G(e){return!(!O(e)||N(e))&&(H(e)?q:V).test(L(e))}function X(e,t){return null==e?void 0:e[t]}function tt(e,t){var n=X(e,t);return G(n)?n:void 0}var et=tt(C,"WeakMap"),nt=9007199254740991,rt=/^(?:0|[1-9]\d*)$/;function it(e,t){var n=typeof e;return!!(t=null==t?nt:t)&&("number"==n||"symbol"!=n&&rt.test(e))&&e>-1&&e%1==0&&e<t}function at(e,t){return e===t||e!=e&&t!=t}var ot=9007199254740991;function st(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=ot}function lt(e){return null!=e&&st(e.length)&&!H(e)}var ct=Object.prototype;function ut(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||ct)}function ft(e,t){for(var n=-1,r=Array(e);++n<e;)r[n]=t(n);return r}var dt="[object Arguments]";function ht(e){return D(e)&&$(e)==dt}var vt=Object.prototype,bt=vt.hasOwnProperty,_t=vt.propertyIsEnumerable,pt=ht(function(){return arguments}())?ht:function(e){return D(e)&&bt.call(e,"callee")&&!_t.call(e,"callee")};function yt(){return!1}var kt="object"==typeof exports&&exports&&!exports.nodeType&&exports,jt=kt&&"object"==typeof module&&module&&!module.nodeType&&module,mt=jt&&jt.exports===kt,gt=mt?C.Buffer:void 0,wt=gt?gt.isBuffer:void 0,St=wt||yt,At="[object Arguments]",Ot="[object Array]",$t="[object Boolean]",Ct="[object Date]",Dt="[object Error]",xt="[object Function]",Mt="[object Map]",Ft="[object Number]",Pt="[object Object]",Wt="[object RegExp]",Et="[object Set]",Kt="[object String]",Tt="[object WeakMap]",Ht="[object ArrayBuffer]",Rt="[object DataView]",Bt="[object Float32Array]",Nt="[object Float64Array]",zt="[object Int8Array]",It="[object Int16Array]",Lt="[object Int32Array]",Ut="[object Uint8Array]",Vt="[object Uint8ClampedArray]",Jt="[object Uint16Array]",Qt="[object Uint32Array]",Yt={};function Zt(e){return D(e)&&st(e.length)&&!!Yt[$(e)]}function qt(e){return function(t){return e(t)}}Yt[Bt]=Yt[Nt]=Yt[zt]=Yt[It]=Yt[Lt]=Yt[Ut]=Yt[Vt]=Yt[Jt]=Yt[Qt]=!0,Yt[At]=Yt[Ot]=Yt[Ht]=Yt[$t]=Yt[Rt]=Yt[Ct]=Yt[Dt]=Yt[xt]=Yt[Mt]=Yt[Ft]=Yt[Pt]=Yt[Wt]=Yt[Et]=Yt[Kt]=Yt[Tt]=!1;var Gt="object"==typeof exports&&exports&&!exports.nodeType&&exports,Xt=Gt&&"object"==typeof module&&module&&!module.nodeType&&module,te=Xt&&Xt.exports===Gt,ee=te&&x.process,ne=function(){try{var e=Xt&&Xt.require&&Xt.require("util").types;return e||ee&&ee.binding&&ee.binding("util")}catch(e){}}(),re=ne&&ne.isTypedArray,ie=re?qt(re):Zt,ae=Object.prototype,oe=ae.hasOwnProperty;function se(e,t){var n=M(e),r=!n&&pt(e),a=!n&&!r&&St(e),i=!n&&!r&&!a&&ie(e),o=n||r||a||i,l=o?ft(e.length,String):[],s=l.length;for(var c in e)!oe.call(e,c)||o&&("length"==c||a&&("offset"==c||"parent"==c)||i&&("buffer"==c||"byteLength"==c||"byteOffset"==c)||it(c,s))||l.push(c);return l}function le(e,t){return function(n){return e(t(n))}}var ce=le(Object.keys,Object),ue=Object.prototype,fe=ue.hasOwnProperty;function de(e){if(!ut(e))return ce(e);var t=[];for(var n in Object(e))fe.call(e,n)&&"constructor"!=n&&t.push(n);return t}function he(e){return lt(e)?se(e):de(e)}var ve=tt(Object,"create");function be(){this.__data__=ve?ve(null):{},this.size=0}function _e(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t}var pe="__lodash_hash_undefined__",ye=Object.prototype,ke=ye.hasOwnProperty;function je(e){var t=this.__data__;if(ve){var n=t[e];return n===pe?void 0:n}return ke.call(t,e)?t[e]:void 0}var me=Object.prototype,ge=me.hasOwnProperty;function we(e){var t=this.__data__;return ve?void 0!==t[e]:ge.call(t,e)}var Se="__lodash_hash_undefined__";function Ae(e,t){var n=this.__data__;return this.size+=this.has(e)?0:1,n[e]=ve&&void 0===t?Se:t,this}function Oe(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}function $e(){this.__data__=[],this.size=0}function Ce(e,t){for(var n=e.length;n--;)if(at(e[n][0],t))return n;return-1}Oe.prototype.clear=be,Oe.prototype.delete=_e,Oe.prototype.get=je,Oe.prototype.has=we,Oe.prototype.set=Ae;var De=Array.prototype,xe=De.splice;function Me(e){var t=this.__data__,n=Ce(t,e);return!(n<0)&&(n==t.length-1?t.pop():xe.call(t,n,1),--this.size,!0)}function Fe(e){var t=this.__data__,n=Ce(t,e);return n<0?void 0:t[n][1]}function Pe(e){return Ce(this.__data__,e)>-1}function We(e,t){var n=this.__data__,r=Ce(n,e);return r<0?(++this.size,n.push([e,t])):n[r][1]=t,this}function Ee(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}Ee.prototype.clear=$e,Ee.prototype.delete=Me,Ee.prototype.get=Fe,Ee.prototype.has=Pe,Ee.prototype.set=We;var Ke=tt(C,"Map");function Te(){this.size=0,this.__data__={hash:new Oe,map:new(Ke||Ee),string:new Oe}}function He(e){var t=typeof e;return"string"==t||"number"==t||"symbol"==t||"boolean"==t?"__proto__"!==e:null===e}function Re(e,t){var n=e.__data__;return He(t)?n["string"==typeof t?"string":"hash"]:n.map}function Be(e){var t=Re(this,e).delete(e);return this.size-=t?1:0,t}function Ne(e){return Re(this,e).get(e)}function ze(e){return Re(this,e).has(e)}function Ie(e,t){var n=Re(this,e),r=n.size;return n.set(e,t),this.size+=n.size==r?0:1,this}function Le(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}function Ue(e,t){for(var n=-1,r=t.length,a=e.length;++n<r;)e[a+n]=t[n];return e}function Ve(){this.__data__=new Ee,this.size=0}function Je(e){var t=this.__data__,n=t.delete(e);return this.size=t.size,n}function Qe(e){return this.__data__.get(e)}function Ye(e){return this.__data__.has(e)}Le.prototype.clear=Te,Le.prototype.delete=Be,Le.prototype.get=Ne,Le.prototype.has=ze,Le.prototype.set=Ie;var Ze=200;function qe(e,t){var n=this.__data__;if(n instanceof Ee){var r=n.__data__;if(!Ke||r.length<Ze-1)return r.push([e,t]),this.size=++n.size,this;n=this.__data__=new Le(r)}return n.set(e,t),this.size=n.size,this}function Ge(e){var t=this.__data__=new Ee(e);this.size=t.size}function Xe(e,t){for(var n=-1,r=null==e?0:e.length,a=0,i=[];++n<r;){var o=e[n];t(o,n,e)&&(i[a++]=o)}return i}function tn(){return[]}Ge.prototype.clear=Ve,Ge.prototype.delete=Je,Ge.prototype.get=Qe,Ge.prototype.has=Ye,Ge.prototype.set=qe;var en=Object.prototype,nn=en.propertyIsEnumerable,rn=Object.getOwnPropertySymbols,an=rn?function(e){return null==e?[]:(e=Object(e),Xe(rn(e),function(t){return nn.call(e,t)}))}:tn;function on(e,t,n){var r=t(e);return M(e)?r:Ue(r,n(e))}function sn(e){return on(e,he,an)}var ln=tt(C,"DataView"),cn=tt(C,"Promise"),un=tt(C,"Set"),fn="[object Map]",dn="[object Object]",hn="[object Promise]",vn="[object Set]",bn="[object WeakMap]",_n="[object DataView]",pn=L(ln),yn=L(Ke),kn=L(cn),jn=L(un),mn=L(et),gn=$;(ln&&gn(new ln(new ArrayBuffer(1)))!=_n||Ke&&gn(new Ke)!=fn||cn&&gn(cn.resolve())!=hn||un&&gn(new un)!=vn||et&&gn(new et)!=bn)&&(gn=function(e){var t=$(e),n=t==dn?e.constructor:void 0,r=n?L(n):"";if(r)switch(r){case pn:return _n;case yn:return fn;case kn:return hn;case jn:return vn;case mn:return bn}return t});var wn=C.Uint8Array,Sn="__lodash_hash_undefined__";function An(e){return this.__data__.set(e,Sn),this}function On(e){return this.__data__.has(e)}function $n(e){var t=-1,n=null==e?0:e.length;for(this.__data__=new Le;++t<n;)this.add(e[t])}function Cn(e,t){for(var n=-1,r=null==e?0:e.length;++n<r;)if(t(e[n],n,e))return!0;return!1}function Dn(e,t){return e.has(t)}$n.prototype.add=$n.prototype.push=An,$n.prototype.has=On;var xn=1,Mn=2;function Fn(e,t,n,r,a,i){var o=n&xn,l=e.length,s=t.length;if(l!=s&&!(o&&s>l))return!1;var c=i.get(e),h=i.get(t);if(c&&h)return c==t&&h==e;var d=-1,u=!0,b=n&Mn?new $n:void 0;for(i.set(e,t),i.set(t,e);++d<l;){var _=e[d],v=t[d];if(r)var f=o?r(v,_,d,t,e,i):r(_,v,d,e,t,i);if(void 0!==f){if(f)continue;u=!1;break}if(b){if(!Cn(t,function(e,t){if(!Dn(b,t)&&(_===e||a(_,e,n,r,i)))return b.push(t)})){u=!1;break}}else if(_!==v&&!a(_,v,n,r,i)){u=!1;break}}return i.delete(e),i.delete(t),u}function Pn(e){var t=-1,n=Array(e.size);return e.forEach(function(e,r){n[++t]=[r,e]}),n}function Wn(e){var t=-1,n=Array(e.size);return e.forEach(function(e){n[++t]=e}),n}var En=1,Kn=2,Tn="[object Boolean]",Hn="[object Date]",Rn="[object Error]",Bn="[object Map]",Nn="[object Number]",zn="[object RegExp]",In="[object Set]",Ln="[object String]",Un="[object Symbol]",Vn="[object ArrayBuffer]",Jn="[object DataView]",Qn=F?F.prototype:void 0,Yn=Qn?Qn.valueOf:void 0;function Zn(e,t,n,r,a,i,o){switch(n){case Jn:if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case Vn:return!(e.byteLength!=t.byteLength||!i(new wn(e),new wn(t)));case Tn:case Hn:case Nn:return at(+e,+t);case Rn:return e.name==t.name&&e.message==t.message;case zn:case Ln:return e==t+"";case Bn:var l=Pn;case In:var s=r&En;if(l||(l=Wn),e.size!=t.size&&!s)return!1;var c=o.get(e);if(c)return c==t;r|=Kn,o.set(e,t);var h=Fn(l(e),l(t),r,a,i,o);return o.delete(e),h;case Un:if(Yn)return Yn.call(e)==Yn.call(t)}return!1}var qn=1,Gn=Object.prototype,Xn=Gn.hasOwnProperty;function tr(e,t,n,r,a,i){var o=n&qn,l=sn(e),s=l.length;if(s!=sn(t).length&&!o)return!1;for(var c=s;c--;){var h=l[c];if(!(o?h in t:Xn.call(t,h)))return!1}var d=i.get(e),u=i.get(t);if(d&&u)return d==t&&u==e;var b=!0;i.set(e,t),i.set(t,e);for(var _=o;++c<s;){var v=e[h=l[c]],f=t[h];if(r)var p=o?r(f,v,h,t,e,i):r(v,f,h,e,t,i);if(!(void 0===p?v===f||a(v,f,n,r,i):p)){b=!1;break}_||(_="constructor"==h)}if(b&&!_){var y=e.constructor,g=t.constructor;y==g||!("constructor"in e)||!("constructor"in t)||"function"==typeof y&&y instanceof y&&"function"==typeof g&&g instanceof g||(b=!1)}return i.delete(e),i.delete(t),b}var er=1,nr="[object Arguments]",rr="[object Array]",ir="[object Object]",ar=Object.prototype,or=ar.hasOwnProperty;function sr(e,t,n,r,a,i){var o=M(e),l=M(t),s=o?rr:gn(e),c=l?rr:gn(t),h=(s=s==nr?ir:s)==ir,d=(c=c==nr?ir:c)==ir,u=s==c;if(u&&St(e)){if(!St(t))return!1;o=!0,h=!1}if(u&&!h)return i||(i=new Ge),o||ie(e)?Fn(e,t,n,r,a,i):Zn(e,t,s,n,r,a,i);if(!(n&er)){var b=h&&or.call(e,"__wrapped__"),_=d&&or.call(t,"__wrapped__");if(b||_){var v=b?e.value():e,f=_?t.value():t;return i||(i=new Ge),a(v,f,n,r,i)}}return!!u&&(i||(i=new Ge),tr(e,t,n,r,a,i))}function lr(e,t,n,r,a){return e===t||(null==e||null==t||!D(e)&&!D(t)?e!=e&&t!=t:sr(e,t,n,r,lr,a))}function cr(e,t){return lr(e,t)}const ur=/^\d+(\.\d+)?([a-z]+|%)?$/,fr=(e,t,n)=>{h(e,"_minWidth",e=>"string"==typeof e&&ur.test(e),new Set(["String","/^\\d+(\\.\\d+)?([a-z]+|%)?$/"]),t,n)},dr=class{constructor(n){t(this,n),this.translateNoEntries=c("kol-no-entries"),this.state={_data:[],_headerCells:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_hasSettingsMenu:!1},this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.translateSort=c("kol-sort"),this.tableDivElementHasScrollbar=!1,this.renderTableRow=(t,n,r,a=!1)=>{var o,l;let s=String(n);return this.horizontal&&(null===(o=t[0])||void 0===o?void 0:o.data)&&(s=null!==(l=this.getDataKey(t[0].data))&&void 0!==l?l:s),e("tr",{class:i("kol-table__row",{"kol-table__row--body":!a,"kol-table__row--footer":a}),key:`row-${s}`},this.renderSelectionCell(t,n),t.map((e,t)=>this.renderTableCell(e,n,t,r)))},this.renderTableCell=(t,n,r,a)=>{const o=this.getColumnSettings(t);if(o&&!o.visible)return"";let l=`${n}-${r}-${t.label}`;if(t.data){const e=this.getDataKey(t.data);l=e?`${e}-${this.horizontal?r:n}`:l}return t.headerCell?this.renderHeadingCell(t,n,r,a):e("td",{key:`cell-${l}`,class:i("kol-table__cell kol-table__cell--body",{[`kol-table__cell--align-${t.textAlign}`]:t.textAlign}),colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:(null==o?void 0:o.width)?`${o.width}ch`:t.width},ref:"function"==typeof t.render?e=>{this.cellRender(t,e)}:void 0},"function"!=typeof t.render?t.label:"")}}validateHasSettingsMenu(e){b(this,e)}validateData(e){_(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){p(this,e)}validateHeaderCells(e){P(this,e),cr(this.previousHeaderCells,this.state._headerCells)||this.initializeTableSettings(),this.previousHeaderCells=this.state._headerCells}validateLabel(e){m(this,e,{required:!0})}validateMinWidth(e){fr(this,e)}validateOn(e){y(this,e)}validateSelection(e){k(this,e)}validateTableSettings(e){j(this,e)}handleKeyDown(e){var t;if("ArrowUp"===e.key||"ArrowDown"===e.key){const n=null===(t=this.tableDivElement)||void 0===t?void 0:t.querySelector(":focus");let r=this.checkboxRefs.indexOf(n);r>-1&&(e.preventDefault(),"ArrowDown"===e.key?(r=(r+1)%this.checkboxRefs.length,this.checkboxRefs[r].focus()):"ArrowUp"===e.key&&(e.preventDefault(),r=(r+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[r].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}handleSettingsChange(e){v(this,"_tableSettings",e.detail)}disconnectedCallback(){var e;null===(e=this.tableDivElementResizeObserver)||void 0===e||e.disconnect()}checkDivElementScrollbar(){this.tableDivElement&&(this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth)}updateDataToKeyMap(e){e.forEach(e=>{this.dataToKeyMap.has(e)||this.dataToKeyMap.set(e,w())}),this.dataToKeyMap.forEach((t,n)=>{e.includes(n)||this.dataToKeyMap.delete(n)})}getDataKey(e){return this.dataToKeyMap.get(e)}cellRender(e,t){t&&(clearTimeout(this.cellsToRenderTimeouts.get(t)),this.cellsToRenderTimeouts.set(t,setTimeout(()=>{if("function"==typeof e.render){const n=e.render(t,e,e.data,this.state._data);"string"==typeof n&&(t.textContent=n)}})))}getNumberOfCols(e,t){let n=0;return e.forEach(e=>{let t=0;Array.isArray(e)&&e.forEach(e=>{var n;return t+=null!==(n=e.colSpan)&&void 0!==n?n:1}),n<t&&(n=t)}),0===n&&(n=t.length),n}getNumberOfRows(e,t){var n;let r=0;return e.forEach(e=>{let t=0;Array.isArray(e)&&e.forEach(e=>{var n;return t+=null!==(n=e.rowSpan)&&void 0!==n?n:1}),r<t&&(r=t)}),0===r?r=t.length:r-=(null===(n=this.state._dataFoot)||void 0===n?void 0:n.length)||0,r}getThePrimaryHeadersWithKeyOrRenderFunction(e){const t=[];return e.forEach(e=>{e.forEach(e=>{"string"!=typeof e.key&&"function"!=typeof e.render||t.push(e)})}),t}getPrimaryHeaders(e){var t,n;let r=this.getThePrimaryHeadersWithKeyOrRenderFunction(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===r.length&&(r=this.getThePrimaryHeadersWithKeyOrRenderFunction(null!==(n=e.vertical)&&void 0!==n?n:[]),r.length>0&&(this.horizontal=!1)),r}getColumnPositionMap(){var e;const t=new Map;return null===(e=this.state._tableSettings)||void 0===e||e.columns.forEach(e=>{t.set(e.key,e.position)}),t}sortByColumnPosition(e){const t=this.getColumnPositionMap();return[...e].sort((e,n)=>{var r,a,i,o;return(null!==(a=t.get(null!==(r=e.key)&&void 0!==r?r:""))&&void 0!==a?a:Number.MAX_SAFE_INTEGER)-(null!==(o=t.get(null!==(i=n.key)&&void 0!==i?i:""))&&void 0!==o?o:Number.MAX_SAFE_INTEGER)})}createDataField(e,t,n){var r;t.horizontal=Array.isArray(null==t?void 0:t.horizontal)?t.horizontal:[],t.vertical=Array.isArray(null==t?void 0:t.vertical)?t.vertical:[];const a=this.getPrimaryHeaders(t),i=this.getNumberOfCols(t.horizontal,e);let o=this.getNumberOfRows(t.vertical,e),l=0;n&&(l=o,o+=(null===(r=this.state._dataFoot)||void 0===r?void 0:r.length)||0);const s=[],c=[],h=[];t.vertical.forEach((e,t)=>{c[t]=0,h[t]=[]});const d=this.sortByColumnPosition(a);for(let r=l;r<o;r++){const a=[];t.vertical.forEach((e,t)=>{let n=0;if(h[t].forEach(e=>n+=e),n<=r){const i=e[r-n+c[t]];if("object"==typeof i){a.push(Object.assign(Object.assign({},i),{headerCell:!0,data:{}}));let e=1;if("number"==typeof i.rowSpan&&i.rowSpan>1&&(e=i.rowSpan),h[t].push(e),"number"==typeof i.colSpan&&i.colSpan>1)for(let n=1;n<i.colSpan;n++)h[t+n].push(e);c[t]++}}});for(let t=0;t<i;t++)if(!0===this.horizontal){const i=n&&this.state._dataFoot?this.state._dataFoot[r-l]:e[r];"object"!=typeof d[t]||null===d[t]||"object"!=typeof i||null===i||"string"!=typeof d[t].key&&"function"!=typeof d[t].render||a.push(Object.assign(Object.assign({},d[t]),{colSpan:void 0,data:i,label:i[d[t].key],rowSpan:void 0}))}else"object"!=typeof d[r]||null===d[r]||"object"!=typeof e[t]||null===e[t]||"string"!=typeof d[r].key&&"function"!=typeof d[r].render||a.push(Object.assign(Object.assign({},d[r]),{colSpan:void 0,data:e[t],label:e[t][d[r].key],rowSpan:void 0}));s.push(a)}if(0===e.length){let e=0,n=0;Array.isArray(t.horizontal)&&t.horizontal.length>0&&t.horizontal[0].forEach(t=>{e+=t.colSpan||1}),Array.isArray(t.vertical)&&t.vertical.length>0&&(e-=t.vertical.length,t.vertical[0].forEach(e=>{n+=e.rowSpan||1}));const r={colSpan:e,label:this.translateNoEntries,render:void 0,rowSpan:Math.max(n,1)};0===s.length?s.push([r]):s[0].push(r)}return s}handleSelectionChangeCallbackAndEvent(e,t){var n;"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n[g.onSelectionChange])&&this.state._on[g.onSelectionChange](e,t),this.host&&S(this.host,A.selectionChange,t)}initializeTableSettings(){if(this._tableSettings)return;const e=this.getPrimaryHeaders(this.state._headerCells);this.state._tableSettings||(this.state._tableSettings={columns:[]}),this.state._tableSettings.columns=e.filter(e=>e.key).map((e,t)=>{var n;return{hidable:!1!==e.hidable,key:null!==(n=e.key)&&void 0!==n?n:w(),label:e.label,position:t,visible:!0}})}componentWillLoad(){this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaderCells(this._headerCells),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validateSelection(this._selection),this.validateTableSettings(this._tableSettings),this.validateHasSettingsMenu(this._hasSettingsMenu)}renderSelectionCell(t,n){var r;const l=this.state._selection;if(!l)return"";const s=this.getSelectionKeyPropertyName(),c=null===(r=t[0])||void 0===r?void 0:r.data;if(!c)return"";const h=c[s],d=l.multiple||void 0===l.multiple,u=(()=>{const e=null==l?void 0:l.selectedKeys;return(void 0===e?[]:Array.isArray(e)?e:[e]).some(e=>String(e)===String(h))})(),b=(()=>{const e=null==l?void 0:l.disabledKeys;return(void 0===e?[]:Array.isArray(e)?e:[e]).some(e=>String(e)===String(h))})(),_=l.label(c),v={name:"selection",checked:u,disabled:b,id:String(h),"aria-label":_};return e("td",{key:`tbody-${n}-selection`,class:"kol-table__cell kol-table__cell--selection"},e("div",{class:i("kol-table__selection",{"kol-table__selection--checked":u})},d?e("label",{class:i("kol-table__selection-label",{"kol-table__selection-label--disabled":b})},e(a,{class:"kol-table__selection-icon",_icons:"codicon "+(u?"codicon-check":""),_label:""}),e("input",Object.assign({class:i("kol-table__selection-input kol-table__selection-input--checkbox"),ref:e=>e&&this.checkboxRefs.push(e)},v,{type:"checkbox",onInput:e=>{const t=(()=>{const e=null==l?void 0:l.selectedKeys;return void 0===e?[]:Array.isArray(e)?e:[e]})(),n=u?t.filter(e=>String(e)!==String(h)):[...t,h];this.handleSelectionChangeCallbackAndEvent(e,null!=n?n:[])}}))):e("label",{class:"kol-table__selection-label"},e("input",Object.assign({class:i("kol-table__selection-input kol-table__selection-input--radio")},v,{type:"radio",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,h)}}))),e(o,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${h}-label`,_label:_})))}getColumnSettings(e){var t;return null===(t=this.state._tableSettings)||void 0===t?void 0:t.columns.find(t=>t.key===e.key)}getSelectionKeyPropertyName(){var e,t;return null!==(t=null===(e=this.state._selection)||void 0===e?void 0:e.keyPropertyName)&&void 0!==t?t:"id"}getDataWithSelectionEnabled(){const e=this.getSelectionKeyPropertyName();return this.state._data.filter(t=>{var n;const r=null===(n=this.state._selection)||void 0===n?void 0:n.disabledKeys;return!(void 0===r?[]:Array.isArray(r)?r:[r]).some(n=>String(n)===String(t[e]))})}getSelectedKeysWithoutDisabledKeys(){const e=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})(),t=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.disabledKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})();return e.filter(e=>!t.some(t=>String(t)===String(e)))}getSelectedKeysWithDisabledKeysOnly(){const e=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})(),t=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.disabledKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})();return e.filter(e=>t.some(t=>String(t)===String(e)))}getRevertedSelection(e){var t;const n=this.getSelectionKeyPropertyName(),r=null!==(t=this.getSelectedKeysWithDisabledKeysOnly())&&void 0!==t?t:[];return e&&r.push(...this.getDataWithSelectionEnabled().map(e=>null==e?void 0:e[n])),r}getTableMinWidth(){var e,t;const n=null!==(t=null===(e=this.state._tableSettings)||void 0===e?void 0:e.columns.filter(e=>e.visible).reduce((e,t)=>{var n;return e+(null!==(n=t.width)&&void 0!==n?n:0)},0))&&void 0!==t?t:0;return"auto"===this.state._minWidth?`${n}ch`:`max(${this.state._minWidth}, ${n}ch)`}renderHeadingSelectionCell(){var t,n;const r=this.state._selection;if(!r)return e("th",{class:"kol-table__cell kol-table__cell--header",key:"thead-0"});if(!1===r.multiple)return e("td",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header kol-table__cell--selection"});const l=null!==(n=null===(t=this.getSelectedKeysWithoutDisabledKeys())||void 0===t?void 0:t.length)&&void 0!==n?n:0,s=l===this.getDataWithSelectionEnabled().length,h=0!==l&&!s;let d="kol-table-selection-indeterminate";s&&!h&&(d="kol-table-selection-none"),0===l&&(d="kol-table-selection-all");const u=c(d);return e("th",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header kol-table__cell--selection"},e("div",{class:i("kol-table__selection",{"kol-table__selection--indeterminate":h,"kol-table__selection--checked":s})},e("label",{class:"kol-table__selection-label"},e(a,{class:"kol-table__selection-icon",_icons:"codicon "+(h?"codicon-remove":s?"codicon-check":""),_label:""}),e("input",{class:i("kol-table__selection-input kol-table__selection-input--checkbox"),"data-testid":"selection-checkbox-all",ref:e=>e&&this.checkboxRefs.push(e),name:"selection",checked:s&&!h,indeterminate:h,"aria-label":u,type:"checkbox",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,this.getRevertedSelection(!s))}})),e(o,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${d}-label`,_label:u})))}renderHeaderTdCell(){return e(n,null,Array.isArray(this.state._headerCells.horizontal)&&this.state._headerCells.horizontal.length>0&&Array.isArray(this.state._headerCells.vertical)&&this.state._headerCells.vertical.length>0&&Array.isArray(this.state._headerCells.horizontal)&&e("td",{"aria-hidden":"true",colSpan:this.state._headerCells.vertical.length,rowSpan:this.state._headerCells.horizontal.length}))}renderHeadingCell(t,n,r,a){const o=this.getColumnSettings(t);if(o&&!o.visible)return"";let l="none",c="codicon codicon-fold";if(t.sortDirection)switch(t.sortDirection){case"ASC":c="codicon codicon-chevron-up",l="ascending";break;case"DESC":c="codicon codicon-chevron-down",l="descending";break;default:l="none"}const h=a?"row":"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col";return e("th",{key:`${n}-${r}-${t.label}`,class:i("kol-table__cell kol-table__cell--header",{[`kol-table__cell--align-${t.textAlign}`]:t.textAlign,[`kol-table__cell--${l}`]:l}),scope:h,colSpan:t.colSpan,rowSpan:t.rowSpan,style:{width:(null==o?void 0:o.width)?`${o.width}ch`:t.width},"aria-sort":l,"data-sort":`sort-${t.sortDirection}`},t.sortDirection?e(s,{class:"kol-table__sort-button",exportparts:"icon",_icons:{right:c},_label:t.label,_ariaDescription:this.translateSort,_on:{onClick:e=>{var n;"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onSort)&&t.key&&t.sortDirection&&this.state._on.onSort(e,{key:t.key,currentSortDirection:t.sortDirection}),this.host&&S(this.host,A.sort,{key:t.key,currentSortDirection:t.sortDirection})}}}):t.label)}renderSpacer(t,n){var r,a;const o=(null===(r=this.state._headerCells.vertical)||void 0===r?void 0:r.length)||0,l=null===(a=null==n?void 0:n[0])||void 0===a?void 0:a.reduce((e,t)=>e+(t.colSpan||1),0),s=this.state._selection?1:0;return e("tr",{"aria-hidden":"true",class:i("kol-table__spacer",`kol-table__spacer--${t}`)},e("td",{class:i(`kol-table__spacer-line kol-table__spacer-line--${t}`),colSpan:o+l+s}))}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return null;const t=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return e("tfoot",{class:"kol-table__footer"},[this.renderSpacer("foot",t),t.map((e,t)=>this.renderTableRow(e,t,!0,!0))])}render(){var t;const n=this.createDataField(this.state._data,this.state._headerCells);this.checkboxRefs=[];const r=null===(t=this.state._headerCells.horizontal)||void 0===t?void 0:t.map(e=>this.sortByColumnPosition(e));return e("div",{key:"6e331ba78cf709e99b1581ab7561c6575ab11fc3",class:"kol-table"},this.state._hasSettingsMenu&&e(l,{key:"550e2baf4bf306cf4cf704fbbc9670c328e86f8c",_tableSettings:this.state._tableSettings}),e("div",{key:"07ce276517d6705ae28d3d149e9b0085feb1b1a7",ref:e=>this.tableDivElement=e,class:"kol-table__scroll-container",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},e("table",{key:"61b6fb981849c3a30e121f20300e0bc5af3191a8",class:"kol-table__table",style:{minWidth:this.getTableMinWidth()}},e("caption",{key:"bc5578af4e2734c9e346c008ea4bfe543250114d",class:"kol-table__focus-element kol-table__caption",id:"caption",tabindex:this.tableDivElementHasScrollbar?"0":void 0},this.state._label),Array.isArray(r)&&e("thead",{key:"9e756ff97fa21b958739ca54e027b8e5486d7928",class:"kol-table__head"},[r.map((t,n)=>e("tr",{class:"kol-table__head-row",key:`thead-${n}`},this.state._selection&&this.renderHeadingSelectionCell(),0===n&&this.renderHeaderTdCell(),Array.isArray(t)&&t.map((e,t)=>this.renderHeadingCell(e,n,t,!1)))),this.renderSpacer("head",r)]),e("tbody",{key:"bab154fa144e9453a002fd6aeb94226d351b2955",class:"kol-table__body"},n.map((e,t)=>this.renderTableRow(e,t,!0))),this.renderFoot())))}get host(){return r(this)}static get watchers(){return{_hasSettingsMenu:["validateHasSettingsMenu"],_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_on:["validateOn"],_selection:["validateSelection"],_tableSettings:["validateTableSettings"]}}};export{dr as kol_table_stateless_wc};