@public-ui/components 3.0.0-rc.5 → 3.0.0-rc.6

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-87a7393a.js"),componentNames=require("./component-names-cf0c0d8a.js"),i18n=require("./i18n-1d085d07.js"),events=require("./events-fc641593.js"),callback=require("./callback-ab215ba6.js"),prop_validators=require("./prop.validators-96dfedce.js"),label=require("./label-b8654499.js");require("./i18n-737701e2.js"),require("./reuse-8cfefa9b.js"),require("./common-1ab929ac.js"),require("./index-38f5f0b2.js"),require("./dev.utils-58fde089.js");const paginationPositionPropTypeOptions=["top","bottom","both"],validatePaginationPosition=(t,e)=>{prop_validators.watchValidator(t,"_paginationPosition",(t=>"string"==typeof t&&paginationPositionPropTypeOptions.includes(t)),new Set([`PaginationPositionPropType {${paginationPositionPropTypeOptions.join(", ")}`]),e,{defaultValue:"bottom"})},defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__focus-element:focus {\n    outline: 0 !important;\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto Highlight;\n    outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto -webkit-focus-ring-color;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\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    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\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}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}",KolTableStatefulDefaultStyle0=defaultStyleCss,PAGINATION_OPTIONS=[10,20,50,100],paginationValidator=t=>!0===t||""===t||"object"==typeof t&&null!==t,KolTableStateful=class{constructor(t){index.registerInstance(this,t),this.catchRef=t=>{this.tableWcRef=t},this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.handlePagination={onClick:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onClick)&&this.state._pagination._on.onClick(t,e),prop_validators.setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:e}))},onChangePage:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onChangePage)&&this.state._pagination._on.onChangePage(t,e),prop_validators.setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:e}))},onChangePageSize:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,e),prop_validators.setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:e})),prop_validators.setState(this,"_pageSize",e)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=()=>{if(this.disableSort)return void prop_validators.setState(this,"_sortedData",this.state._data);let t=this.state._data;this.sortData.length>0&&(t=this.state._data.sort(((t,e)=>{for(let n=0;n<this.sortData.length;n++){const i=this.sortData[n],a=i.compareFn(t,e);if(0!==a)return"ASC"===i.direction?a:-a}return 0}))),prop_validators.setState(this,"_sortedData",t)},this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0,this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"}}validateAllowMultiSort(t){prop_validators.watchValidator(this,"_allowMultiSort",(()=>!0),new Set(["boolean"]),t,{defaultValue:!1})}validateData(t){callback.validateTableData(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){callback.validateTableDataFoot(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){validatePaginationPosition(this,t)}changeCellSort(t){var e;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key==(null===(e=this.sortData[0])||void 0===e?void 0:e.key)||(this.sortData=[]);const n=this.sortData.findIndex((e=>e.key===t.key));if(n>=0){const t=this.sortData[n];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(n,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){prop_validators.emptyStringByArrayHandler(t,(()=>{prop_validators.objectObjectHandler(t,(()=>{try{t=prop_validators.parseJson(t)}catch(t){}prop_validators.watchValidator(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var e,n,i,a;const o=t=>{let e=!1;t.forEach((t=>{const n=t.key;if(!n)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:n,compareFn:t.compareFn,direction:i}),e=!0)})),e&&setTimeout((()=>this.updateSortedData()))},l=t;null===(e=l.horizontal)||void 0===e||e.forEach(o),null===(n=l.vertical)||void 0===n||n.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,prop_validators.devHint("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){label.validateLabel(this,t,{required:!0})}validateMinWidth(t){prop_validators.watchString(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){callback.validateTableSelection(this,t)}validateOn(t){callback.validateTableStatefulCallbacks(this,t)}validatePagination(t){try{t=prop_validators.parseJson(t)}catch(t){}this.showPagination=paginationValidator(t),prop_validators.watchValidator(this,"_pagination",paginationValidator,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener(events.KolEvent.selectionChange,this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener(events.KolEvent.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.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateOn(this._on)}selectDisplayedData(t,e,n){return"number"==typeof e&&e>0&&"number"==typeof n&&n>0?(this.pageStartSlice=e*(n-1),this.pageEndSlice=e*n>t.length?t.length:e*n,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(){return index.h("div",{class:`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`},index.h("span",null,i18n.translate("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"}})),index.h("div",{class:"kol-table-stateful__pagination-wrapper"},index.h(componentNames.KolPaginationTag,{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||PAGINATION_OPTIONS,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:i18n.translate("kol-table-pagination-label",{placeholders:{label:this.state._label}})})))}getHeaderCellSortState(t){if(!this.disableSort&&"function"==typeof t.compareFn){if(t.key){const e=this.sortData.find((e=>e.key===t.key));if(null==e?void 0:e.direction)return e.direction}return"NOS"}}handleSort({key:t}){const e=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((e=>e.key===t));e&&this.changeCellSort(e)}getSelectedData(t){var e;const n=this.state._selection;if(n){const i=null!==(e=n.keyPropertyName)&&void 0!==e?e:"id",a=this.state._sortedData.filter((e=>t.includes(e[i])));if(!1===(null==n?void 0:n.multiple))return a[0];if(i)return a}return null}handleSelectionChange(t,e){var n;const i=this.state._selection;i&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},i),{selectedKeys:"object"==typeof e?e:[e]})}));const a=this.getSelectedData(e);"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n[callback.Callback.onSelectionChange])&&this.state._on[callback.Callback.onSelectionChange](t,a),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.selectionChange,a)}async getSelection(){var t;const e=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(e)}render(){var t,e,n,i;const a=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(e=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==e?e:10:this.state._sortedData.length,this.state._pagination._page||1),o="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,l="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,s={horizontal:null===(n=this.state._headers.horizontal)||void 0===n?void 0:n.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))),vertical:null===(i=this.state._headers.vertical)||void 0===i?void 0:i.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)})))))};return index.h(index.Host,{key:"e060a717d5efd96fb63fdc4f4de37fc34ed0c710",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&o,index.h(componentNames.KolTableStatelessWcTag,{key:"a415e591ec24f4cc1793205689d90e6366b4a654",ref:this.catchRef,_data:a,_headerCells:s,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,e)=>{this.handleSort(e)},onSelectionChange:(t,e)=>{this.handleSelectionChange(t,e)}},_selection:this.state._selection}),this.pageEndSlice>0&&this.showPagination&&l)}get host(){return index.getElement(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_pagination:["validatePagination"]}}};KolTableStateful.style={default:KolTableStatefulDefaultStyle0},exports.kol_table_stateful=KolTableStateful;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-5eda7e82.js"),componentNames=require("./component-names-74abfa2e.js"),i18n=require("./i18n-cdacfb29.js"),events=require("./events-fc641593.js"),callback=require("./callback-ab215ba6.js"),prop_validators=require("./prop.validators-96dfedce.js"),label=require("./label-b8654499.js");require("./i18n-583e3c4b.js"),require("./reuse-8cfefa9b.js"),require("./common-1ab929ac.js"),require("./index-38f5f0b2.js"),require("./dev.utils-58fde089.js");const paginationPositionPropTypeOptions=["top","bottom","both"],validatePaginationPosition=(t,e)=>{prop_validators.watchValidator(t,"_paginationPosition",(t=>"string"==typeof t&&paginationPositionPropTypeOptions.includes(t)),new Set([`PaginationPositionPropType {${paginationPositionPropTypeOptions.join(", ")}`]),e,{defaultValue:"bottom"})},defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__focus-element:focus {\n    outline: 0 !important;\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__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    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\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}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}",KolTableStatefulDefaultStyle0=defaultStyleCss,PAGINATION_OPTIONS=[10,20,50,100],paginationValidator=t=>!0===t||""===t||"object"==typeof t&&null!==t,KolTableStateful=class{constructor(t){index.registerInstance(this,t),this.catchRef=t=>{this.tableWcRef=t},this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.handlePagination={onClick:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onClick)&&this.state._pagination._on.onClick(t,e),prop_validators.setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:e}))},onChangePage:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onChangePage)&&this.state._pagination._on.onChangePage(t,e),prop_validators.setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:e}))},onChangePageSize:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,e),prop_validators.setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:e})),prop_validators.setState(this,"_pageSize",e)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=()=>{if(this.disableSort)return void prop_validators.setState(this,"_sortedData",this.state._data);let t=this.state._data;this.sortData.length>0&&(t=this.state._data.sort(((t,e)=>{for(let n=0;n<this.sortData.length;n++){const i=this.sortData[n],a=i.compareFn(t,e);if(0!==a)return"ASC"===i.direction?a:-a}return 0}))),prop_validators.setState(this,"_sortedData",t)},this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0,this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"}}validateAllowMultiSort(t){prop_validators.watchValidator(this,"_allowMultiSort",(()=>!0),new Set(["boolean"]),t,{defaultValue:!1})}validateData(t){callback.validateTableData(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){callback.validateTableDataFoot(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){validatePaginationPosition(this,t)}changeCellSort(t){var e;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key==(null===(e=this.sortData[0])||void 0===e?void 0:e.key)||(this.sortData=[]);const n=this.sortData.findIndex((e=>e.key===t.key));if(n>=0){const t=this.sortData[n];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(n,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){prop_validators.emptyStringByArrayHandler(t,(()=>{prop_validators.objectObjectHandler(t,(()=>{try{t=prop_validators.parseJson(t)}catch(t){}prop_validators.watchValidator(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var e,n,i,a;const o=t=>{let e=!1;t.forEach((t=>{const n=t.key;if(!n)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:n,compareFn:t.compareFn,direction:i}),e=!0)})),e&&setTimeout((()=>this.updateSortedData()))},l=t;null===(e=l.horizontal)||void 0===e||e.forEach(o),null===(n=l.vertical)||void 0===n||n.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,prop_validators.devHint("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){label.validateLabel(this,t,{required:!0})}validateMinWidth(t){prop_validators.watchString(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){callback.validateTableSelection(this,t)}validateOn(t){callback.validateTableStatefulCallbacks(this,t)}validatePagination(t){try{t=prop_validators.parseJson(t)}catch(t){}this.showPagination=paginationValidator(t),prop_validators.watchValidator(this,"_pagination",paginationValidator,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener(events.KolEvent.selectionChange,this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener(events.KolEvent.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.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateOn(this._on)}selectDisplayedData(t,e,n){return"number"==typeof e&&e>0&&"number"==typeof n&&n>0?(this.pageStartSlice=e*(n-1),this.pageEndSlice=e*n>t.length?t.length:e*n,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(){return index.h("div",{class:`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`},index.h("span",null,i18n.translate("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"}})),index.h("div",{class:"kol-table-stateful__pagination-wrapper"},index.h(componentNames.KolPaginationTag,{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||PAGINATION_OPTIONS,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:i18n.translate("kol-table-pagination-label",{placeholders:{label:this.state._label}})})))}getHeaderCellSortState(t){if(!this.disableSort&&"function"==typeof t.compareFn){if(t.key){const e=this.sortData.find((e=>e.key===t.key));if(null==e?void 0:e.direction)return e.direction}return"NOS"}}handleSort({key:t}){const e=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((e=>e.key===t));e&&this.changeCellSort(e)}getSelectedData(t){var e;const n=this.state._selection;if(n){const i=null!==(e=n.keyPropertyName)&&void 0!==e?e:"id",a=this.state._sortedData.filter((e=>t.includes(e[i])));if(!1===(null==n?void 0:n.multiple))return a[0];if(i)return a}return null}handleSelectionChange(t,e){var n;const i=this.state._selection;i&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},i),{selectedKeys:"object"==typeof e?e:[e]})}));const a=this.getSelectedData(e);"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n[callback.Callback.onSelectionChange])&&this.state._on[callback.Callback.onSelectionChange](t,a),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.selectionChange,a)}async getSelection(){var t;const e=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(e)}render(){var t,e,n,i;const a=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(e=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==e?e:10:this.state._sortedData.length,this.state._pagination._page||1),o="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,l="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,s={horizontal:null===(n=this.state._headers.horizontal)||void 0===n?void 0:n.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))),vertical:null===(i=this.state._headers.vertical)||void 0===i?void 0:i.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)})))))};return index.h(index.Host,{key:"1e026e043f695d20e937288daf1eb41b48ce929b",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&o,index.h(componentNames.KolTableStatelessWcTag,{key:"37a5318636dcbea2fb4222ec882cb19d85c0e570",ref:this.catchRef,_data:a,_headerCells:s,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,e)=>{this.handleSort(e)},onSelectionChange:(t,e)=>{this.handleSelectionChange(t,e)}},_selection:this.state._selection}),this.pageEndSlice>0&&this.showPagination&&l)}get host(){return index.getElement(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_pagination:["validatePagination"]}}};KolTableStateful.style={default:KolTableStatefulDefaultStyle0},exports.kol_table_stateful=KolTableStateful;

package/dist/cjs/kol-table-stateful.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"kol-table-stateful.entry.cjs.js","mappings":"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","names":["watchValidator","setState","validateTableData","validateTableDataFoot","emptyStringByArrayHandler","objectObjectHandler","parseJson","devHint","validateLabel","watchString","validateTableSelection","validateTableStatefulCallbacks","KolEvent","h","translate","KolPaginationTag","Callback","dispatchDomEvent","Host","KolTableStatelessWcTag"],"sources":["src/schema/props/pagination-position.ts","src/components/table-stateful/style.scss?tag=kol-table-stateful&mode=default&encapsulation=shadow","src/components/table-stateful/shadow.tsx"],"sourcesContent":["/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils/prop.validators';\n\nconst paginationPositionPropTypeOptions = ['top', 'bottom', 'both'] as const;\nexport type PaginationPositionPropType = (typeof paginationPositionPropTypeOptions)[number];\n\n/**\n * Defines which position should be used for presentation.\n */\nexport type PropPaginationPosition = {\n\tpaginationPosition: PaginationPositionPropType;\n};\n\n/* validator */\nexport const validatePaginationPosition = (component: Generic.Element.Component, value?: PaginationPositionPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_paginationPosition`,\n\t\t(value) => typeof value === 'string' && paginationPositionPropTypeOptions.includes(value),\n\t\tnew Set([`PaginationPositionPropType {${paginationPositionPropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t\t{\n\t\t\tdefaultValue: 'bottom',\n\t\t},\n\t);\n};\n","@import '../@shared/mixins';\n@import '../../styles/global';\n@import '../@shared/kol-table-stateless-mixin';\n\n@include kol-table-stateless-styles;\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.kol-table-stateful {\n\t\t&__pagination,\n\t\t&__pagination-wrapper {\n\t\t\tdisplay: grid;\n\t\t\tplace-items: center;\n\t\t\t@media (min-width: 1024px) {\n\t\t\t\tgrid-auto-flow: column;\n\t\t\t}\n\t\t}\n\t}\n\n\t.kol-pagination {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\t@media (min-width: 1024px) {\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t@media (max-width: 1024px) {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n}\n","/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { KolPaginationTag, KolTableStatelessWcTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport type {\n\tKoliBriDataCompareFn,\n\tKoliBriPaginationButtonCallbacks,\n\tKoliBriSortDirection,\n\tKoliBriTableDataType,\n\tKoliBriTableHeaderCellWithLogic,\n\tKoliBriTableHeaders,\n\tKoliBriTablePaginationProps,\n\tLabelPropType,\n\tPaginationPositionPropType,\n\tSortEventPayload,\n\tStringified,\n\tTableAPI,\n\tTableDataFootPropType,\n\tTableDataPropType,\n\tTableHeaderCells,\n\tTableSelectionPropType,\n\tTableStatefulCallbacksPropType,\n\tTableStates,\n} from '../../schema';\nimport {\n\tdevHint,\n\temptyStringByArrayHandler,\n\tobjectObjectHandler,\n\tparseJson,\n\tsetState,\n\tvalidateLabel,\n\tvalidatePaginationPosition,\n\tvalidateTableData,\n\tvalidateTableDataFoot,\n\tvalidateTableSelection,\n\tvalidateTableStatefulCallbacks,\n\twatchString,\n\twatchValidator,\n} from '../../schema';\nimport { Callback } from '../../schema/enums';\nimport type { MinWidthPropType } from '../../schema/props/min-width';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\nconst PAGINATION_OPTIONS = [10, 20, 50, 100];\n\nconst paginationValidator = (value: unknown) => value === true || value === '' /* true */ || (typeof value === 'object' && value !== null);\n\ntype SortData = {\n\tlabel: string;\n\tkey: string;\n\tcompareFn: KoliBriDataCompareFn;\n\tdirection: KoliBriSortDirection;\n};\n\n@Component({\n\ttag: 'kol-table-stateful',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTableStateful implements TableAPI {\n\t@Element() private readonly host?: HTMLKolTableStatelessWcElement;\n\tprivate tableWcRef?: HTMLKolTableStatelessWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolTableStatelessWcElement) => {\n\t\tthis.tableWcRef = ref;\n\t};\n\n\tprivate sortData: SortData[] = [];\n\tprivate showPagination = false;\n\tprivate pageStartSlice = 0;\n\tprivate pageEndSlice = 10;\n\tprivate disableSort = false;\n\n\t/**\n\t * Defines whether to allow multi sort.\n\t */\n\t@Prop() public _allowMultiSort?: boolean;\n\n\t/**\n\t * Defines the primary table data.\n\t */\n\t@Prop() public _data!: Stringified<KoliBriTableDataType[]>;\n\n\t/**\n\t * Defines the data for the table footer.\n\t */\n\t@Prop() public _dataFoot?: Stringified<KoliBriTableDataType[]>;\n\n\t/**\n\t * Defines the horizontal and vertical table headers.\n\t */\n\t@Prop() public _headers!: Stringified<KoliBriTableHeaders>;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Defines the table min-width (CSS width values).\n\t */\n\t@Prop() public _minWidth!: MinWidthPropType;\n\n\t/**\n\t * Defines whether to show the data distributed over multiple pages.\n\t */\n\t@Prop() public _pagination?: boolean | Stringified<KoliBriTablePaginationProps>;\n\t/**\n\t * Controls the position of the pagination.\n\t */\n\t@Prop() public _paginationPosition?: PaginationPositionPropType = 'bottom';\n\t/**\n\t * Defines how rows can be selected and the current selection.\n\t */\n\t@Prop() public _selection?: TableSelectionPropType;\n\t/**\n\t * Defines the callback functions for table events.\n\t */\n\t@Prop() public _on?: TableStatefulCallbacksPropType;\n\n\t@State() public state: TableStates = {\n\t\t_allowMultiSort: false,\n\t\t_data: [],\n\t\t_dataFoot: [],\n\t\t_headers: {\n\t\t\thorizontal: [],\n\t\t\tvertical: [],\n\t\t},\n\t\t_label: '', // ⚠ required\n\t\t_minWidth: 'auto',\n\t\t_pagination: {\n\t\t\t_page: 1,\n\t\t\t_pageSize: 10,\n\t\t\t_max: 0,\n\t\t},\n\t\t_sortedData: [],\n\t\t_paginationPosition: 'bottom',\n\t};\n\n\t@Watch('_allowMultiSort')\n\tpublic validateAllowMultiSort(value?: boolean): void {\n\t\twatchValidator(this, '_allowMultiSort', () => true, new Set(['boolean']), value, {\n\t\t\tdefaultValue: false,\n\t\t});\n\t}\n\n\t@Watch('_data')\n\tpublic validateData(value?: TableDataPropType): void {\n\t\tvalidateTableData(this, value, {\n\t\t\tafterPatch: () => {\n\t\t\t\t// TODO: kein guter Hack (endless loop)\n\t\t\t\tsetTimeout(this.updateSortedData);\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_dataFoot')\n\tpublic validateDataFoot(value?: TableDataFootPropType): void {\n\t\tvalidateTableDataFoot(this, value, {\n\t\t\tafterPatch: () => {\n\t\t\t\tsetTimeout(this.updateSortedData);\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_paginationPosition')\n\tpublic validatePaginationPosition(value?: PaginationPositionPropType): void {\n\t\tvalidatePaginationPosition(this, value);\n\t}\n\n\t/**\n\t * Handles sorting logic for table columns.\n\t * If multi-sort is enabled (`_allowMultiSort`), multiple columns can be sorted at once.\n\t * Otherwise, sorting is cleared when switching between columns.\n\t */\n\tprivate changeCellSort(headerCell: KoliBriTableHeaderCellWithLogic) {\n\t\tif (typeof headerCell.compareFn === 'function') {\n\t\t\tif (!this.state._allowMultiSort && headerCell.key != this.sortData[0]?.key) {\n\t\t\t\t// clear when another column is sorted and multi sort is not allowed\n\t\t\t\tthis.sortData = [];\n\t\t\t}\n\n\t\t\tconst index = this.sortData.findIndex((value) => value.key === headerCell.key);\n\t\t\tif (index >= 0) {\n\t\t\t\tconst settings = this.sortData[index];\n\t\t\t\tswitch (settings.direction) {\n\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\tsettings.direction = 'DESC';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\tthis.sortData.splice(index, 1);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tsettings.direction = 'ASC';\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t} else if (headerCell.key) {\n\t\t\t\tthis.sortData.push({\n\t\t\t\t\tlabel: headerCell.label,\n\t\t\t\t\tkey: headerCell.key,\n\t\t\t\t\tcompareFn: headerCell.compareFn,\n\t\t\t\t\tdirection: 'ASC',\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tthis.updateSortedData();\n\t\t}\n\t}\n\n\t@Watch('_headers')\n\tpublic validateHeaders(value?: Stringified<KoliBriTableHeaders>): void {\n\t\t/**\n\t\t * - es darf maximal ein Header als primary markiert werden (last win)\n\t\t * - der primary-Header entscheidet implizit über _order und _orientation\n\t\t *   - primary-Headers müssen das key-Property setzen\n\t\t *   - nicht primary-Headers müssen das key-Property nicht setzen (wird ignoriert)\n\t\t *   - _order: wird durch den primary-Header geregelt\n\t\t *   - _orientation: wird durch den primary-Header geregelt\n\t\t * - sobald ein Header sortierbar ist, darf es nur noch entweder horizontale\n\t\t *   oder vertikale Header geben, aber nicht mehr beides\n\t\t */\n\t\temptyStringByArrayHandler(value, () => {\n\t\t\tobjectObjectHandler(value, () => {\n\t\t\t\ttry {\n\t\t\t\t\tvalue = parseJson<KoliBriTableHeaders>(value);\n\t\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t\t} catch (e) {\n\t\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t\t}\n\t\t\t\twatchValidator(this, '_headers', (value): boolean => typeof value === 'object' && value !== null, new Set(['KoliBriTableHeaders']), value, {\n\t\t\t\t\thooks: {\n\t\t\t\t\t\tbeforePatch: (nextValue: unknown) => {\n\t\t\t\t\t\t\tconst applySort = (headers: KoliBriTableHeaderCellWithLogic[]) => {\n\t\t\t\t\t\t\t\tlet hasSortedCells = false;\n\t\t\t\t\t\t\t\theaders.forEach((cell) => {\n\t\t\t\t\t\t\t\t\tconst key = cell.key;\n\t\t\t\t\t\t\t\t\tif (!key) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tconst sortDirection = cell.sortDirection;\n\t\t\t\t\t\t\t\t\tif (sortDirection === 'ASC' || sortDirection === 'DESC') {\n\t\t\t\t\t\t\t\t\t\tif (typeof cell.compareFn === 'function') {\n\t\t\t\t\t\t\t\t\t\t\tif (this.state._allowMultiSort || this.sortData.length === 0) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.sortData.push({ label: cell.label, key, compareFn: cell.compareFn, direction: sortDirection });\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\thasSortedCells = true;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\tif (hasSortedCells) {\n\t\t\t\t\t\t\t\t\tsetTimeout(() => this.updateSortedData());\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\tconst headers: KoliBriTableHeaders = nextValue as KoliBriTableHeaders;\n\t\t\t\t\t\t\theaders.horizontal?.forEach(applySort);\n\t\t\t\t\t\t\theaders.vertical?.forEach(applySort);\n\n\t\t\t\t\t\t\tif (headers.horizontal && headers.vertical && headers.horizontal?.length > 0 && headers.vertical?.length > 0) {\n\t\t\t\t\t\t\t\tthis.disableSort = true;\n\t\t\t\t\t\t\t\tdevHint(\n\t\t\t\t\t\t\t\t\t`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)`,\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_minWidth')\n\tpublic validateMinWidth(value?: string): void {\n\t\twatchString(this, '_minWidth', value, {\n\t\t\tdefaultValue: undefined,\n\t\t});\n\t}\n\n\t@Watch('_selection')\n\tpublic validateSelection(value?: TableSelectionPropType): void {\n\t\tvalidateTableSelection(this, value);\n\t}\n\t@Watch('_on')\n\tpublic validateOn(value?: TableStatefulCallbacksPropType): void {\n\t\tvalidateTableStatefulCallbacks(this, value);\n\t}\n\n\tprivate readonly handlePagination: KoliBriPaginationButtonCallbacks = {\n\t\tonClick: (event: Event, page: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onClick === 'function') {\n\t\t\t\tthis.state._pagination._on.onClick(event, page);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_page: page,\n\t\t\t});\n\t\t},\n\t\tonChangePage: (event: Event, page: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onChangePage === 'function') {\n\t\t\t\tthis.state._pagination._on.onChangePage(event, page);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_page: page,\n\t\t\t});\n\t\t},\n\t\tonChangePageSize: (event: Event, pageSize: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onChangePageSize === 'function') {\n\t\t\t\tthis.state._pagination._on.onChangePageSize(event, pageSize);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_pageSize: pageSize,\n\t\t\t});\n\t\t\tsetState(this, '_pageSize', pageSize);\n\t\t},\n\t};\n\n\t@Watch('_pagination')\n\tpublic validatePagination(value?: boolean | Stringified<KoliBriTablePaginationProps>): void {\n\t\ttry {\n\t\t\tvalue = parseJson<boolean | KoliBriTablePaginationProps>(value);\n\t\t\t// eslint-disable-next-line no-empty\n\t\t} catch (e) {\n\t\t\t// value behält den ursprünglichen Wert\n\t\t}\n\n\t\tthis.showPagination = paginationValidator(value);\n\n\t\twatchValidator<boolean | Stringified<KoliBriTablePaginationProps>>(\n\t\t\tthis,\n\t\t\t'_pagination',\n\t\t\tpaginationValidator,\n\t\t\tnew Set(['boolean', 'KoliBriTablePagination']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: {\n\t\t\t\t\t_page: 1,\n\t\t\t\t\t_pageSize: 10,\n\t\t\t\t\t_max: 0,\n\t\t\t\t},\n\t\t\t},\n\t\t);\n\t}\n\n\tprivate onSelectionChange = (event: Event): void => {\n\t\t/* Stop propagation for selectionChange event from table-stateless component because table-stateful emits its own selectionChange event. */\n\t\tevent.stopPropagation();\n\t};\n\n\tpublic componentDidLoad(): void {\n\t\tthis.tableWcRef?.addEventListener(KolEvent.selectionChange, this.onSelectionChange);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.tableWcRef?.removeEventListener(KolEvent.selectionChange, this.onSelectionChange);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAllowMultiSort(this._allowMultiSort);\n\t\tthis.validateData(this._data);\n\t\tthis.validateDataFoot(this._dataFoot);\n\t\tthis.validateHeaders(this._headers);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMinWidth(this._minWidth);\n\t\tthis.validatePagination(this._pagination);\n\t\tthis.validatePaginationPosition(this._paginationPosition);\n\t\tthis.validateSelection(this._selection);\n\t\tthis.validateOn(this._on);\n\t}\n\n\tprivate selectDisplayedData(data: KoliBriTableDataType[], pageSize: number, page: number): KoliBriTableDataType[] {\n\t\tif (typeof pageSize === 'number' && pageSize > 0 && typeof page === 'number' && page > 0) {\n\t\t\tthis.pageStartSlice = pageSize * (page - 1);\n\t\t\tthis.pageEndSlice = pageSize * page > data.length ? data.length : pageSize * page;\n\t\t\treturn data.slice(this.pageStartSlice, this.pageEndSlice);\n\t\t} else {\n\t\t\tthis.pageStartSlice = 0;\n\t\t\tthis.pageEndSlice = data.length;\n\t\t\treturn data;\n\t\t}\n\t}\n\n\tprivate updateSortedData = () => {\n\t\tif (this.disableSort) {\n\t\t\tsetState(this, '_sortedData', this.state._data);\n\t\t\treturn;\n\t\t}\n\n\t\tlet sortedData: KoliBriTableDataType[] = this.state._data;\n\t\tif (this.sortData.length > 0) {\n\t\t\tsortedData = this.state._data.sort((a: KoliBriTableDataType, b: KoliBriTableDataType) => {\n\t\t\t\tfor (let index = 0; index < this.sortData.length; index++) {\n\t\t\t\t\tconst data = this.sortData[index];\n\t\t\t\t\tconst result = data.compareFn(a, b);\n\t\t\t\t\tif (result !== 0) {\n\t\t\t\t\t\treturn data.direction === 'ASC' ? result : -result;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn 0;\n\t\t\t});\n\t\t}\n\t\tsetState(this, '_sortedData', sortedData);\n\t};\n\n\t/**\n\t * Renders the pagination controls for the table, showing the current visible data range\n\t * and providing navigation between different pages.\n\t *\n\t * @returns {JSX.Element} The rendered pagination controls including page range and navigation.\n\t */\n\tprivate renderPagination(): JSX.Element {\n\t\treturn (\n\t\t\t<div class={`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`}>\n\t\t\t\t<span>\n\t\t\t\t\t{translate('kol-table-visible-range', {\n\t\t\t\t\t\tplaceholders: {\n\t\t\t\t\t\t\tstart: this.pageEndSlice > 0 ? (this.pageStartSlice + 1).toString() : '0',\n\t\t\t\t\t\t\tend: this.pageEndSlice.toString(),\n\t\t\t\t\t\t\ttotal:\n\t\t\t\t\t\t\t\tthis.state._pagination && this.state._pagination._max > 0\n\t\t\t\t\t\t\t\t\t? this.state._pagination._max.toString()\n\t\t\t\t\t\t\t\t\t: Array.isArray(this.state._data)\n\t\t\t\t\t\t\t\t\t\t? this.state._data.length.toString()\n\t\t\t\t\t\t\t\t\t\t: '0',\n\t\t\t\t\t\t},\n\t\t\t\t\t})}\n\t\t\t\t</span>\n\t\t\t\t<div class=\"kol-table-stateful__pagination-wrapper\">\n\t\t\t\t\t<KolPaginationTag\n\t\t\t\t\t\tclass=\"test\"\n\t\t\t\t\t\t_boundaryCount={this.state._pagination._boundaryCount}\n\t\t\t\t\t\t_customClass={this.state._pagination._customClass}\n\t\t\t\t\t\t_on={this.handlePagination}\n\t\t\t\t\t\t_page={this.state._pagination._page}\n\t\t\t\t\t\t_pageSize={this.state._pagination._pageSize}\n\t\t\t\t\t\t_pageSizeOptions={this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS}\n\t\t\t\t\t\t_siblingCount={this.state._pagination._siblingCount}\n\t\t\t\t\t\t_tooltipAlign=\"bottom\"\n\t\t\t\t\t\t_max={this.state._pagination._max || this.state._pagination._max || this.state._data.length}\n\t\t\t\t\t\t_label={translate('kol-table-pagination-label', { placeholders: { label: this.state._label } })}\n\t\t\t\t\t></KolPaginationTag>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate getHeaderCellSortState(headerCell: KoliBriTableHeaderCellWithLogic): KoliBriSortDirection | undefined {\n\t\tif (!this.disableSort && typeof headerCell.compareFn === 'function') {\n\t\t\tif (headerCell.key) {\n\t\t\t\tconst data = this.sortData.find((value) => value.key === headerCell.key);\n\t\t\t\tif (data?.direction) {\n\t\t\t\t\treturn data.direction;\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn 'NOS';\n\t\t}\n\t}\n\n\tprivate handleSort({ key }: SortEventPayload) {\n\t\tconst headerCell = [...(this.state._headers.horizontal || []).flat(), ...(this.state._headers.vertical || []).flat()].find((cell) => cell.key === key);\n\t\tif (headerCell) {\n\t\t\tthis.changeCellSort(headerCell);\n\t\t}\n\t}\n\n\tprivate getSelectedData(selectedKeys: string[] | string): null | KoliBriTableDataType | KoliBriTableDataType[] {\n\t\tconst selection = this.state._selection;\n\t\tif (selection) {\n\t\t\tconst keyPropertyName = selection.keyPropertyName ?? 'id';\n\t\t\tconst data = this.state._sortedData.filter((item) => selectedKeys.includes(item[keyPropertyName] as string));\n\t\t\tif (selection?.multiple === false) {\n\t\t\t\treturn data[0];\n\t\t\t}\n\n\t\t\tif (keyPropertyName) return data;\n\t\t}\n\t\treturn null;\n\t}\n\tprivate handleSelectionChange(event: Event, value: string[] | string): void {\n\t\tconst selection = this.state._selection;\n\t\tif (selection)\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_selection: {\n\t\t\t\t\t...selection,\n\t\t\t\t\tselectedKeys: typeof value === 'object' ? value : [value],\n\t\t\t\t},\n\t\t\t};\n\t\tconst selectedData = this.getSelectedData(value);\n\n\t\tif (typeof this.state._on?.[Callback.onSelectionChange] === 'function') {\n\t\t\tthis.state._on[Callback.onSelectionChange](event, selectedData);\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.selectionChange, selectedData);\n\t\t}\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getSelection(): Promise<KoliBriTableDataType[] | KoliBriTableDataType | null> {\n\t\tconst selectedKeys: string[] = this.state._selection?.selectedKeys || [];\n\t\treturn this.getSelectedData(selectedKeys);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst displayedData: KoliBriTableDataType[] = this.selectDisplayedData(\n\t\t\tthis.state._sortedData,\n\t\t\tthis.showPagination ? (this.state._pagination?._pageSize ?? 10) : this.state._sortedData.length,\n\t\t\tthis.state._pagination._page || 1,\n\t\t);\n\t\tconst paginationTop = this._paginationPosition === 'top' || this._paginationPosition === 'both' ? this.renderPagination() : null;\n\t\tconst paginationBottom = this._paginationPosition === 'bottom' || this._paginationPosition === 'both' ? this.renderPagination() : null;\n\n\t\tconst headerCells: TableHeaderCells = {\n\t\t\thorizontal: this.state._headers.horizontal?.map((row) => row.map((cell) => ({ ...cell, sortDirection: this.getHeaderCellSortState(cell) }))),\n\t\t\tvertical: this.state._headers.vertical?.map((column) => column.map((cell) => ({ ...cell, sortDirection: this.getHeaderCellSortState(cell) }))),\n\t\t};\n\t\treturn (\n\t\t\t<Host class=\"kol-table-stateful\">\n\t\t\t\t{this.pageEndSlice > 0 && this.showPagination && paginationTop}\n\t\t\t\t<KolTableStatelessWcTag\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_data={displayedData}\n\t\t\t\t\t_headerCells={headerCells}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_dataFoot={this.state._dataFoot}\n\t\t\t\t\t_minWidth={this.state._minWidth}\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonSort: (_: MouseEvent, payload: SortEventPayload) => {\n\t\t\t\t\t\t\tthis.handleSort(payload);\n\t\t\t\t\t\t},\n\t\t\t\t\t\tonSelectionChange: (event: Event, value: string[] | string) => {\n\t\t\t\t\t\t\tthis.handleSelectionChange(event, value);\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\t_selection={this.state._selection}\n\t\t\t\t/>\n\t\t\t\t{this.pageEndSlice > 0 && this.showPagination && paginationBottom}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"kol-table-stateful.entry.cjs.js","mappings":"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","names":["watchValidator","setState","validateTableData","validateTableDataFoot","emptyStringByArrayHandler","objectObjectHandler","parseJson","devHint","validateLabel","watchString","validateTableSelection","validateTableStatefulCallbacks","KolEvent","h","translate","KolPaginationTag","Callback","dispatchDomEvent","Host","KolTableStatelessWcTag"],"sources":["src/schema/props/pagination-position.ts","src/components/table-stateful/style.scss?tag=kol-table-stateful&mode=default&encapsulation=shadow","src/components/table-stateful/shadow.tsx"],"sourcesContent":["/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils/prop.validators';\n\nconst paginationPositionPropTypeOptions = ['top', 'bottom', 'both'] as const;\nexport type PaginationPositionPropType = (typeof paginationPositionPropTypeOptions)[number];\n\n/**\n * Defines which position should be used for presentation.\n */\nexport type PropPaginationPosition = {\n\tpaginationPosition: PaginationPositionPropType;\n};\n\n/* validator */\nexport const validatePaginationPosition = (component: Generic.Element.Component, value?: PaginationPositionPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_paginationPosition`,\n\t\t(value) => typeof value === 'string' && paginationPositionPropTypeOptions.includes(value),\n\t\tnew Set([`PaginationPositionPropType {${paginationPositionPropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t\t{\n\t\t\tdefaultValue: 'bottom',\n\t\t},\n\t);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../@shared/kol-table-stateless-mixin' as *;\n\n@include kol-table-stateless-styles;\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.kol-table-stateful {\n\t\t&__pagination,\n\t\t&__pagination-wrapper {\n\t\t\tdisplay: grid;\n\t\t\tplace-items: center;\n\n\t\t\t@media (min-width: 1024px) {\n\t\t\t\tgrid-auto-flow: column;\n\t\t\t}\n\t\t}\n\t}\n\n\t.kol-pagination {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\n\t\t@media (min-width: 1024px) {\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t@media (max-width: 1024px) {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n}\n","/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { KolPaginationTag, KolTableStatelessWcTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport type {\n\tKoliBriDataCompareFn,\n\tKoliBriPaginationButtonCallbacks,\n\tKoliBriSortDirection,\n\tKoliBriTableDataType,\n\tKoliBriTableHeaderCellWithLogic,\n\tKoliBriTableHeaders,\n\tKoliBriTablePaginationProps,\n\tLabelPropType,\n\tPaginationPositionPropType,\n\tSortEventPayload,\n\tStringified,\n\tTableAPI,\n\tTableDataFootPropType,\n\tTableDataPropType,\n\tTableHeaderCells,\n\tTableSelectionPropType,\n\tTableStatefulCallbacksPropType,\n\tTableStates,\n} from '../../schema';\nimport {\n\tdevHint,\n\temptyStringByArrayHandler,\n\tobjectObjectHandler,\n\tparseJson,\n\tsetState,\n\tvalidateLabel,\n\tvalidatePaginationPosition,\n\tvalidateTableData,\n\tvalidateTableDataFoot,\n\tvalidateTableSelection,\n\tvalidateTableStatefulCallbacks,\n\twatchString,\n\twatchValidator,\n} from '../../schema';\nimport { Callback } from '../../schema/enums';\nimport type { MinWidthPropType } from '../../schema/props/min-width';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\nconst PAGINATION_OPTIONS = [10, 20, 50, 100];\n\nconst paginationValidator = (value: unknown) => value === true || value === '' /* true */ || (typeof value === 'object' && value !== null);\n\ntype SortData = {\n\tlabel: string;\n\tkey: string;\n\tcompareFn: KoliBriDataCompareFn;\n\tdirection: KoliBriSortDirection;\n};\n\n@Component({\n\ttag: 'kol-table-stateful',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTableStateful implements TableAPI {\n\t@Element() private readonly host?: HTMLKolTableStatelessWcElement;\n\tprivate tableWcRef?: HTMLKolTableStatelessWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolTableStatelessWcElement) => {\n\t\tthis.tableWcRef = ref;\n\t};\n\n\tprivate sortData: SortData[] = [];\n\tprivate showPagination = false;\n\tprivate pageStartSlice = 0;\n\tprivate pageEndSlice = 10;\n\tprivate disableSort = false;\n\n\t/**\n\t * Defines whether to allow multi sort.\n\t */\n\t@Prop() public _allowMultiSort?: boolean;\n\n\t/**\n\t * Defines the primary table data.\n\t */\n\t@Prop() public _data!: Stringified<KoliBriTableDataType[]>;\n\n\t/**\n\t * Defines the data for the table footer.\n\t */\n\t@Prop() public _dataFoot?: Stringified<KoliBriTableDataType[]>;\n\n\t/**\n\t * Defines the horizontal and vertical table headers.\n\t */\n\t@Prop() public _headers!: Stringified<KoliBriTableHeaders>;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Defines the table min-width (CSS width values).\n\t */\n\t@Prop() public _minWidth!: MinWidthPropType;\n\n\t/**\n\t * Defines whether to show the data distributed over multiple pages.\n\t */\n\t@Prop() public _pagination?: boolean | Stringified<KoliBriTablePaginationProps>;\n\t/**\n\t * Controls the position of the pagination.\n\t */\n\t@Prop() public _paginationPosition?: PaginationPositionPropType = 'bottom';\n\t/**\n\t * Defines how rows can be selected and the current selection.\n\t */\n\t@Prop() public _selection?: TableSelectionPropType;\n\t/**\n\t * Defines the callback functions for table events.\n\t */\n\t@Prop() public _on?: TableStatefulCallbacksPropType;\n\n\t@State() public state: TableStates = {\n\t\t_allowMultiSort: false,\n\t\t_data: [],\n\t\t_dataFoot: [],\n\t\t_headers: {\n\t\t\thorizontal: [],\n\t\t\tvertical: [],\n\t\t},\n\t\t_label: '', // ⚠ required\n\t\t_minWidth: 'auto',\n\t\t_pagination: {\n\t\t\t_page: 1,\n\t\t\t_pageSize: 10,\n\t\t\t_max: 0,\n\t\t},\n\t\t_sortedData: [],\n\t\t_paginationPosition: 'bottom',\n\t};\n\n\t@Watch('_allowMultiSort')\n\tpublic validateAllowMultiSort(value?: boolean): void {\n\t\twatchValidator(this, '_allowMultiSort', () => true, new Set(['boolean']), value, {\n\t\t\tdefaultValue: false,\n\t\t});\n\t}\n\n\t@Watch('_data')\n\tpublic validateData(value?: TableDataPropType): void {\n\t\tvalidateTableData(this, value, {\n\t\t\tafterPatch: () => {\n\t\t\t\t// TODO: kein guter Hack (endless loop)\n\t\t\t\tsetTimeout(this.updateSortedData);\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_dataFoot')\n\tpublic validateDataFoot(value?: TableDataFootPropType): void {\n\t\tvalidateTableDataFoot(this, value, {\n\t\t\tafterPatch: () => {\n\t\t\t\tsetTimeout(this.updateSortedData);\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_paginationPosition')\n\tpublic validatePaginationPosition(value?: PaginationPositionPropType): void {\n\t\tvalidatePaginationPosition(this, value);\n\t}\n\n\t/**\n\t * Handles sorting logic for table columns.\n\t * If multi-sort is enabled (`_allowMultiSort`), multiple columns can be sorted at once.\n\t * Otherwise, sorting is cleared when switching between columns.\n\t */\n\tprivate changeCellSort(headerCell: KoliBriTableHeaderCellWithLogic) {\n\t\tif (typeof headerCell.compareFn === 'function') {\n\t\t\tif (!this.state._allowMultiSort && headerCell.key != this.sortData[0]?.key) {\n\t\t\t\t// clear when another column is sorted and multi sort is not allowed\n\t\t\t\tthis.sortData = [];\n\t\t\t}\n\n\t\t\tconst index = this.sortData.findIndex((value) => value.key === headerCell.key);\n\t\t\tif (index >= 0) {\n\t\t\t\tconst settings = this.sortData[index];\n\t\t\t\tswitch (settings.direction) {\n\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\tsettings.direction = 'DESC';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\tthis.sortData.splice(index, 1);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tsettings.direction = 'ASC';\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t} else if (headerCell.key) {\n\t\t\t\tthis.sortData.push({\n\t\t\t\t\tlabel: headerCell.label,\n\t\t\t\t\tkey: headerCell.key,\n\t\t\t\t\tcompareFn: headerCell.compareFn,\n\t\t\t\t\tdirection: 'ASC',\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tthis.updateSortedData();\n\t\t}\n\t}\n\n\t@Watch('_headers')\n\tpublic validateHeaders(value?: Stringified<KoliBriTableHeaders>): void {\n\t\t/**\n\t\t * - es darf maximal ein Header als primary markiert werden (last win)\n\t\t * - der primary-Header entscheidet implizit über _order und _orientation\n\t\t *   - primary-Headers müssen das key-Property setzen\n\t\t *   - nicht primary-Headers müssen das key-Property nicht setzen (wird ignoriert)\n\t\t *   - _order: wird durch den primary-Header geregelt\n\t\t *   - _orientation: wird durch den primary-Header geregelt\n\t\t * - sobald ein Header sortierbar ist, darf es nur noch entweder horizontale\n\t\t *   oder vertikale Header geben, aber nicht mehr beides\n\t\t */\n\t\temptyStringByArrayHandler(value, () => {\n\t\t\tobjectObjectHandler(value, () => {\n\t\t\t\ttry {\n\t\t\t\t\tvalue = parseJson<KoliBriTableHeaders>(value);\n\t\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t\t} catch (e) {\n\t\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t\t}\n\t\t\t\twatchValidator(this, '_headers', (value): boolean => typeof value === 'object' && value !== null, new Set(['KoliBriTableHeaders']), value, {\n\t\t\t\t\thooks: {\n\t\t\t\t\t\tbeforePatch: (nextValue: unknown) => {\n\t\t\t\t\t\t\tconst applySort = (headers: KoliBriTableHeaderCellWithLogic[]) => {\n\t\t\t\t\t\t\t\tlet hasSortedCells = false;\n\t\t\t\t\t\t\t\theaders.forEach((cell) => {\n\t\t\t\t\t\t\t\t\tconst key = cell.key;\n\t\t\t\t\t\t\t\t\tif (!key) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tconst sortDirection = cell.sortDirection;\n\t\t\t\t\t\t\t\t\tif (sortDirection === 'ASC' || sortDirection === 'DESC') {\n\t\t\t\t\t\t\t\t\t\tif (typeof cell.compareFn === 'function') {\n\t\t\t\t\t\t\t\t\t\t\tif (this.state._allowMultiSort || this.sortData.length === 0) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.sortData.push({ label: cell.label, key, compareFn: cell.compareFn, direction: sortDirection });\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\thasSortedCells = true;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\tif (hasSortedCells) {\n\t\t\t\t\t\t\t\t\tsetTimeout(() => this.updateSortedData());\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\tconst headers: KoliBriTableHeaders = nextValue as KoliBriTableHeaders;\n\t\t\t\t\t\t\theaders.horizontal?.forEach(applySort);\n\t\t\t\t\t\t\theaders.vertical?.forEach(applySort);\n\n\t\t\t\t\t\t\tif (headers.horizontal && headers.vertical && headers.horizontal?.length > 0 && headers.vertical?.length > 0) {\n\t\t\t\t\t\t\t\tthis.disableSort = true;\n\t\t\t\t\t\t\t\tdevHint(\n\t\t\t\t\t\t\t\t\t`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)`,\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_minWidth')\n\tpublic validateMinWidth(value?: string): void {\n\t\twatchString(this, '_minWidth', value, {\n\t\t\tdefaultValue: undefined,\n\t\t});\n\t}\n\n\t@Watch('_selection')\n\tpublic validateSelection(value?: TableSelectionPropType): void {\n\t\tvalidateTableSelection(this, value);\n\t}\n\t@Watch('_on')\n\tpublic validateOn(value?: TableStatefulCallbacksPropType): void {\n\t\tvalidateTableStatefulCallbacks(this, value);\n\t}\n\n\tprivate readonly handlePagination: KoliBriPaginationButtonCallbacks = {\n\t\tonClick: (event: Event, page: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onClick === 'function') {\n\t\t\t\tthis.state._pagination._on.onClick(event, page);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_page: page,\n\t\t\t});\n\t\t},\n\t\tonChangePage: (event: Event, page: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onChangePage === 'function') {\n\t\t\t\tthis.state._pagination._on.onChangePage(event, page);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_page: page,\n\t\t\t});\n\t\t},\n\t\tonChangePageSize: (event: Event, pageSize: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onChangePageSize === 'function') {\n\t\t\t\tthis.state._pagination._on.onChangePageSize(event, pageSize);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_pageSize: pageSize,\n\t\t\t});\n\t\t\tsetState(this, '_pageSize', pageSize);\n\t\t},\n\t};\n\n\t@Watch('_pagination')\n\tpublic validatePagination(value?: boolean | Stringified<KoliBriTablePaginationProps>): void {\n\t\ttry {\n\t\t\tvalue = parseJson<boolean | KoliBriTablePaginationProps>(value);\n\t\t\t// eslint-disable-next-line no-empty\n\t\t} catch (e) {\n\t\t\t// value behält den ursprünglichen Wert\n\t\t}\n\n\t\tthis.showPagination = paginationValidator(value);\n\n\t\twatchValidator<boolean | Stringified<KoliBriTablePaginationProps>>(\n\t\t\tthis,\n\t\t\t'_pagination',\n\t\t\tpaginationValidator,\n\t\t\tnew Set(['boolean', 'KoliBriTablePagination']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: {\n\t\t\t\t\t_page: 1,\n\t\t\t\t\t_pageSize: 10,\n\t\t\t\t\t_max: 0,\n\t\t\t\t},\n\t\t\t},\n\t\t);\n\t}\n\n\tprivate onSelectionChange = (event: Event): void => {\n\t\t/* Stop propagation for selectionChange event from table-stateless component because table-stateful emits its own selectionChange event. */\n\t\tevent.stopPropagation();\n\t};\n\n\tpublic componentDidLoad(): void {\n\t\tthis.tableWcRef?.addEventListener(KolEvent.selectionChange, this.onSelectionChange);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.tableWcRef?.removeEventListener(KolEvent.selectionChange, this.onSelectionChange);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAllowMultiSort(this._allowMultiSort);\n\t\tthis.validateData(this._data);\n\t\tthis.validateDataFoot(this._dataFoot);\n\t\tthis.validateHeaders(this._headers);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMinWidth(this._minWidth);\n\t\tthis.validatePagination(this._pagination);\n\t\tthis.validatePaginationPosition(this._paginationPosition);\n\t\tthis.validateSelection(this._selection);\n\t\tthis.validateOn(this._on);\n\t}\n\n\tprivate selectDisplayedData(data: KoliBriTableDataType[], pageSize: number, page: number): KoliBriTableDataType[] {\n\t\tif (typeof pageSize === 'number' && pageSize > 0 && typeof page === 'number' && page > 0) {\n\t\t\tthis.pageStartSlice = pageSize * (page - 1);\n\t\t\tthis.pageEndSlice = pageSize * page > data.length ? data.length : pageSize * page;\n\t\t\treturn data.slice(this.pageStartSlice, this.pageEndSlice);\n\t\t} else {\n\t\t\tthis.pageStartSlice = 0;\n\t\t\tthis.pageEndSlice = data.length;\n\t\t\treturn data;\n\t\t}\n\t}\n\n\tprivate updateSortedData = () => {\n\t\tif (this.disableSort) {\n\t\t\tsetState(this, '_sortedData', this.state._data);\n\t\t\treturn;\n\t\t}\n\n\t\tlet sortedData: KoliBriTableDataType[] = this.state._data;\n\t\tif (this.sortData.length > 0) {\n\t\t\tsortedData = this.state._data.sort((a: KoliBriTableDataType, b: KoliBriTableDataType) => {\n\t\t\t\tfor (let index = 0; index < this.sortData.length; index++) {\n\t\t\t\t\tconst data = this.sortData[index];\n\t\t\t\t\tconst result = data.compareFn(a, b);\n\t\t\t\t\tif (result !== 0) {\n\t\t\t\t\t\treturn data.direction === 'ASC' ? result : -result;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn 0;\n\t\t\t});\n\t\t}\n\t\tsetState(this, '_sortedData', sortedData);\n\t};\n\n\t/**\n\t * Renders the pagination controls for the table, showing the current visible data range\n\t * and providing navigation between different pages.\n\t *\n\t * @returns {JSX.Element} The rendered pagination controls including page range and navigation.\n\t */\n\tprivate renderPagination(): JSX.Element {\n\t\treturn (\n\t\t\t<div class={`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`}>\n\t\t\t\t<span>\n\t\t\t\t\t{translate('kol-table-visible-range', {\n\t\t\t\t\t\tplaceholders: {\n\t\t\t\t\t\t\tstart: this.pageEndSlice > 0 ? (this.pageStartSlice + 1).toString() : '0',\n\t\t\t\t\t\t\tend: this.pageEndSlice.toString(),\n\t\t\t\t\t\t\ttotal:\n\t\t\t\t\t\t\t\tthis.state._pagination && this.state._pagination._max > 0\n\t\t\t\t\t\t\t\t\t? this.state._pagination._max.toString()\n\t\t\t\t\t\t\t\t\t: Array.isArray(this.state._data)\n\t\t\t\t\t\t\t\t\t\t? this.state._data.length.toString()\n\t\t\t\t\t\t\t\t\t\t: '0',\n\t\t\t\t\t\t},\n\t\t\t\t\t})}\n\t\t\t\t</span>\n\t\t\t\t<div class=\"kol-table-stateful__pagination-wrapper\">\n\t\t\t\t\t<KolPaginationTag\n\t\t\t\t\t\tclass=\"test\"\n\t\t\t\t\t\t_boundaryCount={this.state._pagination._boundaryCount}\n\t\t\t\t\t\t_customClass={this.state._pagination._customClass}\n\t\t\t\t\t\t_on={this.handlePagination}\n\t\t\t\t\t\t_page={this.state._pagination._page}\n\t\t\t\t\t\t_pageSize={this.state._pagination._pageSize}\n\t\t\t\t\t\t_pageSizeOptions={this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS}\n\t\t\t\t\t\t_siblingCount={this.state._pagination._siblingCount}\n\t\t\t\t\t\t_tooltipAlign=\"bottom\"\n\t\t\t\t\t\t_max={this.state._pagination._max || this.state._pagination._max || this.state._data.length}\n\t\t\t\t\t\t_label={translate('kol-table-pagination-label', { placeholders: { label: this.state._label } })}\n\t\t\t\t\t></KolPaginationTag>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate getHeaderCellSortState(headerCell: KoliBriTableHeaderCellWithLogic): KoliBriSortDirection | undefined {\n\t\tif (!this.disableSort && typeof headerCell.compareFn === 'function') {\n\t\t\tif (headerCell.key) {\n\t\t\t\tconst data = this.sortData.find((value) => value.key === headerCell.key);\n\t\t\t\tif (data?.direction) {\n\t\t\t\t\treturn data.direction;\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn 'NOS';\n\t\t}\n\t}\n\n\tprivate handleSort({ key }: SortEventPayload) {\n\t\tconst headerCell = [...(this.state._headers.horizontal || []).flat(), ...(this.state._headers.vertical || []).flat()].find((cell) => cell.key === key);\n\t\tif (headerCell) {\n\t\t\tthis.changeCellSort(headerCell);\n\t\t}\n\t}\n\n\tprivate getSelectedData(selectedKeys: string[] | string): null | KoliBriTableDataType | KoliBriTableDataType[] {\n\t\tconst selection = this.state._selection;\n\t\tif (selection) {\n\t\t\tconst keyPropertyName = selection.keyPropertyName ?? 'id';\n\t\t\tconst data = this.state._sortedData.filter((item) => selectedKeys.includes(item[keyPropertyName] as string));\n\t\t\tif (selection?.multiple === false) {\n\t\t\t\treturn data[0];\n\t\t\t}\n\n\t\t\tif (keyPropertyName) return data;\n\t\t}\n\t\treturn null;\n\t}\n\tprivate handleSelectionChange(event: Event, value: string[] | string): void {\n\t\tconst selection = this.state._selection;\n\t\tif (selection)\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_selection: {\n\t\t\t\t\t...selection,\n\t\t\t\t\tselectedKeys: typeof value === 'object' ? value : [value],\n\t\t\t\t},\n\t\t\t};\n\t\tconst selectedData = this.getSelectedData(value);\n\n\t\tif (typeof this.state._on?.[Callback.onSelectionChange] === 'function') {\n\t\t\tthis.state._on[Callback.onSelectionChange](event, selectedData);\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.selectionChange, selectedData);\n\t\t}\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getSelection(): Promise<KoliBriTableDataType[] | KoliBriTableDataType | null> {\n\t\tconst selectedKeys: string[] = this.state._selection?.selectedKeys || [];\n\t\treturn this.getSelectedData(selectedKeys);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst displayedData: KoliBriTableDataType[] = this.selectDisplayedData(\n\t\t\tthis.state._sortedData,\n\t\t\tthis.showPagination ? (this.state._pagination?._pageSize ?? 10) : this.state._sortedData.length,\n\t\t\tthis.state._pagination._page || 1,\n\t\t);\n\t\tconst paginationTop = this._paginationPosition === 'top' || this._paginationPosition === 'both' ? this.renderPagination() : null;\n\t\tconst paginationBottom = this._paginationPosition === 'bottom' || this._paginationPosition === 'both' ? this.renderPagination() : null;\n\n\t\tconst headerCells: TableHeaderCells = {\n\t\t\thorizontal: this.state._headers.horizontal?.map((row) => row.map((cell) => ({ ...cell, sortDirection: this.getHeaderCellSortState(cell) }))),\n\t\t\tvertical: this.state._headers.vertical?.map((column) => column.map((cell) => ({ ...cell, sortDirection: this.getHeaderCellSortState(cell) }))),\n\t\t};\n\t\treturn (\n\t\t\t<Host class=\"kol-table-stateful\">\n\t\t\t\t{this.pageEndSlice > 0 && this.showPagination && paginationTop}\n\t\t\t\t<KolTableStatelessWcTag\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_data={displayedData}\n\t\t\t\t\t_headerCells={headerCells}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_dataFoot={this.state._dataFoot}\n\t\t\t\t\t_minWidth={this.state._minWidth}\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonSort: (_: MouseEvent, payload: SortEventPayload) => {\n\t\t\t\t\t\t\tthis.handleSort(payload);\n\t\t\t\t\t\t},\n\t\t\t\t\t\tonSelectionChange: (event: Event, value: string[] | string) => {\n\t\t\t\t\t\t\tthis.handleSelectionChange(event, value);\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\t_selection={this.state._selection}\n\t\t\t\t/>\n\t\t\t\t{this.pageEndSlice > 0 && this.showPagination && paginationBottom}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-87a7393a.js"),clsx=require("./clsx-dd4d6dd1.js"),componentNames=require("./component-names-cf0c0d8a.js"),i18n=require("./i18n-1d085d07.js"),prop_validators=require("./prop.validators-96dfedce.js"),dev_utils=require("./dev.utils-9710b298.js"),events=require("./events-fc641593.js"),callback=require("./callback-ab215ba6.js"),label=require("./label-b8654499.js");require("./i18n-737701e2.js"),require("./reuse-8cfefa9b.js"),require("./index-38f5f0b2.js"),require("./dev.utils-58fde089.js"),require("./common-1ab929ac.js");const validateTableHeaderCells=(e,t)=>{prop_validators.emptyStringByArrayHandler(t,(()=>{prop_validators.objectObjectHandler(t,(()=>{try{t=prop_validators.parseJson(t)}catch(e){}prop_validators.watchValidator(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)}))}))},HEADER_CELL_WIDTH_VALIDATOR=/^\d+(\.\d+)?([a-z]+|%)?$/,validateMinWidth=(e,t,l)=>{prop_validators.watchValidator(e,"_minWidth",(e=>"string"==typeof e&&HEADER_CELL_WIDTH_VALIDATOR.test(e)),new Set(["String","/^\\d+(\\.\\d+)?([a-z]+|%)?$/"]),t,l)},KolTableStateless=class{constructor(e){index.registerInstance(this,e),this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.renderTableRow=(e,t,l,a=!1)=>{var i,o;let s=String(t);return this.horizontal&&(null===(i=e[0])||void 0===i?void 0:i.data)&&(s=null!==(o=this.getDataKey(e[0].data))&&void 0!==o?o:s),index.h("tr",{class:clsx.clsx("kol-table__row",{"kol-table__row--body":!a,"kol-table__row--footer":a}),key:`row-${s}`},this.renderSelectionCell(e,t),e.map(((e,a)=>this.renderTableCell(e,t,a,l))))},this.renderTableCell=(e,t,l,a)=>{let i=`${t}-${l}-${e.label}`;if(e.data){const a=this.getDataKey(e.data);i=a?`${a}-${this.horizontal?l:t}`:i}return e.headerCell?this.renderHeadingCell(e,t,l,a):index.h("td",{key:`cell-${i}`,class:clsx.clsx("kol-table__cell kol-table__cell--body",{[`kol-table__cell--align-${e.textAlign}`]:e.textAlign}),colSpan:e.colSpan,rowSpan:e.rowSpan,style:{textAlign:e.textAlign,width:e.width},ref:"function"==typeof e.render?t=>{this.cellRender(e,t)}:void 0},"function"!=typeof e.render?e.label:"")},this.state={_data:[],_headerCells:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto"},this.tableDivElementHasScrollbar=!1,this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}validateData(e){callback.validateTableData(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){callback.validateTableDataFoot(this,e)}validateHeaderCells(e){validateTableHeaderCells(this,e)}validateLabel(e){label.validateLabel(this,e,{required:!0})}validateMinWidth(e){validateMinWidth(this,e)}validateOn(e){callback.validateTableCallbacks(this,e)}validateSelection(e){callback.validateTableSelection(this,e)}handleKeyDown(e){var t;if("ArrowUp"===e.key||"ArrowDown"===e.key){const l=null===(t=this.tableDivElement)||void 0===t?void 0:t.querySelector(":focus");let a=this.checkboxRefs.indexOf(l);a>-1&&(e.preventDefault(),"ArrowDown"===e.key?(a=(a+1)%this.checkboxRefs.length,this.checkboxRefs[a].focus()):"ArrowUp"===e.key&&(e.preventDefault(),a=(a+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[a].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}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,dev_utils.nonce())})),this.dataToKeyMap.forEach(((t,l)=>{e.includes(l)||this.dataToKeyMap.delete(l)}))}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 l=e.render(t,e,e.data,this.state._data);"string"==typeof l&&(t.textContent=l)}}))))}getNumberOfCols(e,t){let l=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var l;return t+=null!==(l=e.colSpan)&&void 0!==l?l:1})),l<t&&(l=t)})),0===l&&(l=t.length),l}getNumberOfRows(e,t){var l;let a=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var l;return t+=null!==(l=e.rowSpan)&&void 0!==l?l:1})),a<t&&(a=t)})),0===a?a=t.length:a-=(null===(l=this.state._dataFoot)||void 0===l?void 0:l.length)||0,a}getThePrimaryHeadersWithKeysIfExists(e){const t=[];return e.forEach((e=>{e.forEach((e=>{"string"==typeof e.key&&t.push(e)}))})),t}getPrimaryHeaders(e){var t,l;let a=this.getThePrimaryHeadersWithKeysIfExists(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===a.length&&(a=this.getThePrimaryHeadersWithKeysIfExists(null!==(l=e.vertical)&&void 0!==l?l:[]),a.length>0&&(this.horizontal=!1)),a}createDataField(e,t,l){var a;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 i=this.getPrimaryHeaders(t),o=this.getNumberOfCols(t.horizontal,e);let s=this.getNumberOfRows(t.vertical,e),n=0;l&&(n=s,s+=(null===(a=this.state._dataFoot)||void 0===a?void 0:a.length)||0);const r=[],c=[],d=[];t.vertical.forEach(((e,t)=>{c[t]=0,d[t]=[]}));for(let a=n;a<s;a++){const s=[];t.vertical.forEach(((e,t)=>{let l=0;if(d[t].forEach((e=>l+=e)),l<=a){const i=e[a-l+c[t]];if("object"==typeof i){s.push(Object.assign(Object.assign({},i),{headerCell:!0,data:{}}));let e=1;if("number"==typeof i.rowSpan&&i.rowSpan>1&&(e=i.rowSpan),d[t].push(e),"number"==typeof i.colSpan&&i.colSpan>1)for(let l=1;l<i.colSpan;l++)d[t+l].push(e);c[t]++}}}));for(let t=0;t<o;t++)if(!0===this.horizontal){const o=l&&this.state._dataFoot?this.state._dataFoot[a-n]:e[a];"object"==typeof i[t]&&null!==i[t]&&"string"==typeof i[t].key&&"object"==typeof o&&null!==o&&s.push(Object.assign(Object.assign({},i[t]),{colSpan:void 0,data:o,label:o[i[t].key],rowSpan:void 0}))}else"object"==typeof i[a]&&null!==i[a]&&"string"==typeof i[a].key&&"object"==typeof e[t]&&null!==e[t]&&s.push(Object.assign(Object.assign({},i[a]),{colSpan:void 0,data:e[t],label:e[t][i[a].key],rowSpan:void 0}));r.push(s)}if(0===e.length){let e=0,l=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=>{l+=e.rowSpan||1})));const a={colSpan:e,label:i18n.translate("kol-no-entries"),render:void 0,rowSpan:Math.max(l,1)};0===r.length?r.push([a]):r[0].push(a)}return r}handleSelectionChangeCallbackAndEvent(e,t){var l;"function"==typeof(null===(l=this.state._on)||void 0===l?void 0:l[callback.Callback.onSelectionChange])&&this.state._on[callback.Callback.onSelectionChange](e,t),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.selectionChange,t)}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)}renderSelectionCell(e,t){var l,a,i;const o=this.state._selection;if(!o)return"";const s=null!==(l=o.keyPropertyName)&&void 0!==l?l:"id",n=null===(a=e[0])||void 0===a?void 0:a.data;if(!n)return"";const r=n[s],c=o.multiple||void 0===o.multiple,d=null===(i=null==o?void 0:o.selectedKeys)||void 0===i?void 0:i.includes(r),h=o.label(n),b={name:"selection",checked:d,id:r,"aria-label":h};return index.h("td",{key:`tbody-${t}-selection`,class:"kol-table__cell kol-table__cell--selection"},index.h("div",{class:clsx.clsx("kol-table__selection",{"kol-table__selection--checked":d})},c?index.h("label",{class:"kol-table__selection-label"},index.h(componentNames.KolIconTag,{class:"kol-table__selection-icon",_icons:"codicon "+(d?"codicon-check":""),_label:""}),index.h("input",Object.assign({class:clsx.clsx("kol-table__selection-input kol-table__selection-input--checkbox"),ref:e=>e&&this.checkboxRefs.push(e)},b,{type:"checkbox",onInput:e=>{var t,l;const a=d?null===(l=null==o?void 0:o.selectedKeys)||void 0===l?void 0:l.filter((e=>e!==r)):[...null!==(t=null==o?void 0:o.selectedKeys)&&void 0!==t?t:[],r];this.handleSelectionChangeCallbackAndEvent(e,null!=a?a:[])}}))):index.h("label",{class:"kol-table__selection-label"},index.h("input",Object.assign({class:clsx.clsx("kol-table__selection-input kol-table__selection-input--radio")},b,{type:"radio",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,r)}}))),index.h(componentNames.KolTooltipWcTag,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${r}-label`,_label:h})))}renderHeadingSelectionCell(){var e,t;const l=this.state._selection;if(!l||!l.multiple&&void 0!==l.multiple)return index.h("th",{class:"kol-table__cell kol-table__cell--header",key:"thead-0"});const a=null!==(e=l.keyPropertyName)&&void 0!==e?e:"id",i=null===(t=l.selectedKeys)||void 0===t?void 0:t.length,o=i===this.state._data.length,s=0!==i&&!o;let n="kol-table-selection-indeterminate";o&&!s&&(n="kol-table-selection-none"),0===i&&(n="kol-table-selection-all");const r=i18n.translate(n);return index.h("th",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header"},index.h("div",{class:clsx.clsx("kol-table__selection",{"kol-table__selection--indeterminate":s,"kol-table__selection--checked":o})},index.h("label",{class:"kol-table__selection-label"},index.h(componentNames.KolIconTag,{class:"kol-table__selection-icon",_icons:"codicon "+(s?"codicon-remove":o?"codicon-check":""),_label:""}),index.h("input",{class:clsx.clsx("kol-table__selection-input kol-table__selection-input--checkbox"),ref:e=>e&&this.checkboxRefs.push(e),name:"selection",checked:o&&!s,"aria-label":r,type:"checkbox",onInput:e=>{const t=o?[]:this.state._data.map((e=>null==e?void 0:e[a]));this.handleSelectionChangeCallbackAndEvent(e,t)}})),index.h(componentNames.KolTooltipWcTag,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${n}-label`,_label:r})))}renderHeaderTdCell(){return index.h(index.Fragment,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)&&index.h("td",{"aria-hidden":"true",colSpan:this.state._headerCells.vertical.length,rowSpan:this.state._headerCells.horizontal.length}))}renderHeadingCell(e,t,l,a){let i,o="codicon codicon-fold";if(e.sortDirection)switch(e.sortDirection){case"ASC":o="codicon codicon-chevron-up",i="ascending";break;case"DESC":o="codicon codicon-chevron-down",i="descending"}const s=a?"row":"number"==typeof e.colSpan&&e.colSpan>1?"colgroup":"col";return index.h("th",{key:`${t}-${l}-${e.label}`,class:clsx.clsx("kol-table__cell kol-table__cell--header",{[`kol-table__cell--align-${e.textAlign}`]:e.textAlign,[`kol-table__cell--${i}`]:i}),scope:s,colSpan:e.colSpan,rowSpan:e.rowSpan,style:{width:e.width},"aria-sort":i,"data-sort":`sort-${e.sortDirection}`},e.sortDirection?index.h(componentNames.KolButtonWcTag,{class:"kol-table__sort-button",exportparts:"icon",_icons:{right:o},_label:e.label,_on:{onClick:t=>{var l;"function"==typeof(null===(l=this.state._on)||void 0===l?void 0:l.onSort)&&e.key&&e.sortDirection&&this.state._on.onSort(t,{key:e.key,currentSortDirection:e.sortDirection}),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.sort,{key:e.key,currentSortDirection:e.sortDirection})}}}):e.label)}renderSpacer(e,t){var l,a;const i=(null===(l=this.state._headerCells.vertical)||void 0===l?void 0:l.length)||0,o=null===(a=null==t?void 0:t[0])||void 0===a?void 0:a.reduce(((e,t)=>e+(t.colSpan||1)),0),s=this.state._selection?1:0;return index.h("tr",{"aria-hidden":"true",class:clsx.clsx("kol-table__spacer",`kol-table__spacer--${e}`)},index.h("td",{class:clsx.clsx(`kol-table__spacer-line kol-table__spacer-line--${e}`),colSpan:i+o+s}))}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return null;const e=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return index.h("tfoot",{class:"kol-table__footer"},[this.renderSpacer("foot",e),e.map(((e,t)=>this.renderTableRow(e,t,!0,!0)))])}render(){const e=this.createDataField(this.state._data,this.state._headerCells);return this.checkboxRefs=[],index.h("div",{key:"3a3e95a3993c3a10dc7342da4534249ee014979f",ref:e=>this.tableDivElement=e,class:"kol-table",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},index.h("table",{key:"a576fe89e8549a7686cec0af5cc9f9d064870768",class:"kol-table__table",style:{minWidth:this.state._minWidth}},index.h("div",{key:"1440b0c066cbff9b3e007d0a3a29f908e498c7b5",class:"kol-table__focus-element",tabindex:this.tableDivElementHasScrollbar?"0":void 0,"aria-describedby":"caption"}," "),index.h("caption",{key:"0e0ed2a572adf7576f854f0aa524cf5184d8c089",class:"kol-table__caption",id:"caption"},this.state._label),Array.isArray(this.state._headerCells.horizontal)&&index.h("thead",{key:"ca8178d06124396db66ec7acb990152e4cd64976",class:"kol-table__head"},[this.state._headerCells.horizontal.map(((e,t)=>index.h("tr",{class:"kol-table__head-row",key:`thead-${t}`},this.state._selection&&this.renderHeadingSelectionCell(),0===t&&this.renderHeaderTdCell(),Array.isArray(e)&&e.map(((e,l)=>this.renderHeadingCell(e,t,l,!1)))))),this.renderSpacer("head",this.state._headerCells.horizontal)]),index.h("tbody",{key:"945142452f85ef86c130b3cc7863a2532eb40f6f",class:"kol-table__body"},e.map(((e,t)=>this.renderTableRow(e,t,!0)))),this.renderFoot()))}get host(){return index.getElement(this)}static get watchers(){return{_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_on:["validateOn"],_selection:["validateSelection"]}}};exports.kol_table_stateless_wc=KolTableStateless;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-5eda7e82.js"),clsx=require("./clsx-dd4d6dd1.js"),componentNames=require("./component-names-74abfa2e.js"),i18n=require("./i18n-cdacfb29.js"),prop_validators=require("./prop.validators-96dfedce.js"),dev_utils=require("./dev.utils-0fbf39d5.js"),events=require("./events-fc641593.js"),callback=require("./callback-ab215ba6.js"),label=require("./label-b8654499.js");require("./i18n-583e3c4b.js"),require("./reuse-8cfefa9b.js"),require("./index-38f5f0b2.js"),require("./dev.utils-58fde089.js"),require("./common-1ab929ac.js");const validateTableHeaderCells=(e,t)=>{prop_validators.emptyStringByArrayHandler(t,(()=>{prop_validators.objectObjectHandler(t,(()=>{try{t=prop_validators.parseJson(t)}catch(e){}prop_validators.watchValidator(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)}))}))},HEADER_CELL_WIDTH_VALIDATOR=/^\d+(\.\d+)?([a-z]+|%)?$/,validateMinWidth=(e,t,l)=>{prop_validators.watchValidator(e,"_minWidth",(e=>"string"==typeof e&&HEADER_CELL_WIDTH_VALIDATOR.test(e)),new Set(["String","/^\\d+(\\.\\d+)?([a-z]+|%)?$/"]),t,l)},KolTableStateless=class{constructor(e){index.registerInstance(this,e),this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.renderTableRow=(e,t,l,a=!1)=>{var i,o;let s=String(t);return this.horizontal&&(null===(i=e[0])||void 0===i?void 0:i.data)&&(s=null!==(o=this.getDataKey(e[0].data))&&void 0!==o?o:s),index.h("tr",{class:clsx.clsx("kol-table__row",{"kol-table__row--body":!a,"kol-table__row--footer":a}),key:`row-${s}`},this.renderSelectionCell(e,t),e.map(((e,a)=>this.renderTableCell(e,t,a,l))))},this.renderTableCell=(e,t,l,a)=>{let i=`${t}-${l}-${e.label}`;if(e.data){const a=this.getDataKey(e.data);i=a?`${a}-${this.horizontal?l:t}`:i}return e.headerCell?this.renderHeadingCell(e,t,l,a):index.h("td",{key:`cell-${i}`,class:clsx.clsx("kol-table__cell kol-table__cell--body",{[`kol-table__cell--align-${e.textAlign}`]:e.textAlign}),colSpan:e.colSpan,rowSpan:e.rowSpan,style:{textAlign:e.textAlign,width:e.width},ref:"function"==typeof e.render?t=>{this.cellRender(e,t)}:void 0},"function"!=typeof e.render?e.label:"")},this.state={_data:[],_headerCells:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto"},this.tableDivElementHasScrollbar=!1,this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}validateData(e){callback.validateTableData(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){callback.validateTableDataFoot(this,e)}validateHeaderCells(e){validateTableHeaderCells(this,e)}validateLabel(e){label.validateLabel(this,e,{required:!0})}validateMinWidth(e){validateMinWidth(this,e)}validateOn(e){callback.validateTableCallbacks(this,e)}validateSelection(e){callback.validateTableSelection(this,e)}handleKeyDown(e){var t;if("ArrowUp"===e.key||"ArrowDown"===e.key){const l=null===(t=this.tableDivElement)||void 0===t?void 0:t.querySelector(":focus");let a=this.checkboxRefs.indexOf(l);a>-1&&(e.preventDefault(),"ArrowDown"===e.key?(a=(a+1)%this.checkboxRefs.length,this.checkboxRefs[a].focus()):"ArrowUp"===e.key&&(e.preventDefault(),a=(a+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[a].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}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,dev_utils.nonce())})),this.dataToKeyMap.forEach(((t,l)=>{e.includes(l)||this.dataToKeyMap.delete(l)}))}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 l=e.render(t,e,e.data,this.state._data);"string"==typeof l&&(t.textContent=l)}}))))}getNumberOfCols(e,t){let l=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var l;return t+=null!==(l=e.colSpan)&&void 0!==l?l:1})),l<t&&(l=t)})),0===l&&(l=t.length),l}getNumberOfRows(e,t){var l;let a=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var l;return t+=null!==(l=e.rowSpan)&&void 0!==l?l:1})),a<t&&(a=t)})),0===a?a=t.length:a-=(null===(l=this.state._dataFoot)||void 0===l?void 0:l.length)||0,a}getThePrimaryHeadersWithKeysIfExists(e){const t=[];return e.forEach((e=>{e.forEach((e=>{"string"==typeof e.key&&t.push(e)}))})),t}getPrimaryHeaders(e){var t,l;let a=this.getThePrimaryHeadersWithKeysIfExists(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===a.length&&(a=this.getThePrimaryHeadersWithKeysIfExists(null!==(l=e.vertical)&&void 0!==l?l:[]),a.length>0&&(this.horizontal=!1)),a}createDataField(e,t,l){var a;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 i=this.getPrimaryHeaders(t),o=this.getNumberOfCols(t.horizontal,e);let s=this.getNumberOfRows(t.vertical,e),n=0;l&&(n=s,s+=(null===(a=this.state._dataFoot)||void 0===a?void 0:a.length)||0);const r=[],c=[],d=[];t.vertical.forEach(((e,t)=>{c[t]=0,d[t]=[]}));for(let a=n;a<s;a++){const s=[];t.vertical.forEach(((e,t)=>{let l=0;if(d[t].forEach((e=>l+=e)),l<=a){const i=e[a-l+c[t]];if("object"==typeof i){s.push(Object.assign(Object.assign({},i),{headerCell:!0,data:{}}));let e=1;if("number"==typeof i.rowSpan&&i.rowSpan>1&&(e=i.rowSpan),d[t].push(e),"number"==typeof i.colSpan&&i.colSpan>1)for(let l=1;l<i.colSpan;l++)d[t+l].push(e);c[t]++}}}));for(let t=0;t<o;t++)if(!0===this.horizontal){const o=l&&this.state._dataFoot?this.state._dataFoot[a-n]:e[a];"object"==typeof i[t]&&null!==i[t]&&"string"==typeof i[t].key&&"object"==typeof o&&null!==o&&s.push(Object.assign(Object.assign({},i[t]),{colSpan:void 0,data:o,label:o[i[t].key],rowSpan:void 0}))}else"object"==typeof i[a]&&null!==i[a]&&"string"==typeof i[a].key&&"object"==typeof e[t]&&null!==e[t]&&s.push(Object.assign(Object.assign({},i[a]),{colSpan:void 0,data:e[t],label:e[t][i[a].key],rowSpan:void 0}));r.push(s)}if(0===e.length){let e=0,l=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=>{l+=e.rowSpan||1})));const a={colSpan:e,label:i18n.translate("kol-no-entries"),render:void 0,rowSpan:Math.max(l,1)};0===r.length?r.push([a]):r[0].push(a)}return r}handleSelectionChangeCallbackAndEvent(e,t){var l;"function"==typeof(null===(l=this.state._on)||void 0===l?void 0:l[callback.Callback.onSelectionChange])&&this.state._on[callback.Callback.onSelectionChange](e,t),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.selectionChange,t)}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)}renderSelectionCell(e,t){var l,a,i;const o=this.state._selection;if(!o)return"";const s=null!==(l=o.keyPropertyName)&&void 0!==l?l:"id",n=null===(a=e[0])||void 0===a?void 0:a.data;if(!n)return"";const r=n[s],c=o.multiple||void 0===o.multiple,d=null===(i=null==o?void 0:o.selectedKeys)||void 0===i?void 0:i.includes(r),h=o.label(n),b={name:"selection",checked:d,id:r,"aria-label":h};return index.h("td",{key:`tbody-${t}-selection`,class:"kol-table__cell kol-table__cell--selection"},index.h("div",{class:clsx.clsx("kol-table__selection",{"kol-table__selection--checked":d})},c?index.h("label",{class:"kol-table__selection-label"},index.h(componentNames.KolIconTag,{class:"kol-table__selection-icon",_icons:"codicon "+(d?"codicon-check":""),_label:""}),index.h("input",Object.assign({class:clsx.clsx("kol-table__selection-input kol-table__selection-input--checkbox"),ref:e=>e&&this.checkboxRefs.push(e)},b,{type:"checkbox",onInput:e=>{var t,l;const a=d?null===(l=null==o?void 0:o.selectedKeys)||void 0===l?void 0:l.filter((e=>e!==r)):[...null!==(t=null==o?void 0:o.selectedKeys)&&void 0!==t?t:[],r];this.handleSelectionChangeCallbackAndEvent(e,null!=a?a:[])}}))):index.h("label",{class:"kol-table__selection-label"},index.h("input",Object.assign({class:clsx.clsx("kol-table__selection-input kol-table__selection-input--radio")},b,{type:"radio",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,r)}}))),index.h(componentNames.KolTooltipWcTag,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${r}-label`,_label:h})))}renderHeadingSelectionCell(){var e,t;const l=this.state._selection;if(!l||!l.multiple&&void 0!==l.multiple)return index.h("th",{class:"kol-table__cell kol-table__cell--header",key:"thead-0"});const a=null!==(e=l.keyPropertyName)&&void 0!==e?e:"id",i=null===(t=l.selectedKeys)||void 0===t?void 0:t.length,o=i===this.state._data.length,s=0!==i&&!o;let n="kol-table-selection-indeterminate";o&&!s&&(n="kol-table-selection-none"),0===i&&(n="kol-table-selection-all");const r=i18n.translate(n);return index.h("th",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header"},index.h("div",{class:clsx.clsx("kol-table__selection",{"kol-table__selection--indeterminate":s,"kol-table__selection--checked":o})},index.h("label",{class:"kol-table__selection-label"},index.h(componentNames.KolIconTag,{class:"kol-table__selection-icon",_icons:"codicon "+(s?"codicon-remove":o?"codicon-check":""),_label:""}),index.h("input",{class:clsx.clsx("kol-table__selection-input kol-table__selection-input--checkbox"),ref:e=>e&&this.checkboxRefs.push(e),name:"selection",checked:o&&!s,"aria-label":r,type:"checkbox",onInput:e=>{const t=o?[]:this.state._data.map((e=>null==e?void 0:e[a]));this.handleSelectionChangeCallbackAndEvent(e,t)}})),index.h(componentNames.KolTooltipWcTag,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${n}-label`,_label:r})))}renderHeaderTdCell(){return index.h(index.Fragment,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)&&index.h("td",{"aria-hidden":"true",colSpan:this.state._headerCells.vertical.length,rowSpan:this.state._headerCells.horizontal.length}))}renderHeadingCell(e,t,l,a){let i,o="codicon codicon-fold";if(e.sortDirection)switch(e.sortDirection){case"ASC":o="codicon codicon-chevron-up",i="ascending";break;case"DESC":o="codicon codicon-chevron-down",i="descending"}const s=a?"row":"number"==typeof e.colSpan&&e.colSpan>1?"colgroup":"col";return index.h("th",{key:`${t}-${l}-${e.label}`,class:clsx.clsx("kol-table__cell kol-table__cell--header",{[`kol-table__cell--align-${e.textAlign}`]:e.textAlign,[`kol-table__cell--${i}`]:i}),scope:s,colSpan:e.colSpan,rowSpan:e.rowSpan,style:{width:e.width},"aria-sort":i,"data-sort":`sort-${e.sortDirection}`},e.sortDirection?index.h(componentNames.KolButtonWcTag,{class:"kol-table__sort-button",exportparts:"icon",_icons:{right:o},_label:e.label,_on:{onClick:t=>{var l;"function"==typeof(null===(l=this.state._on)||void 0===l?void 0:l.onSort)&&e.key&&e.sortDirection&&this.state._on.onSort(t,{key:e.key,currentSortDirection:e.sortDirection}),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.sort,{key:e.key,currentSortDirection:e.sortDirection})}}}):e.label)}renderSpacer(e,t){var l,a;const i=(null===(l=this.state._headerCells.vertical)||void 0===l?void 0:l.length)||0,o=null===(a=null==t?void 0:t[0])||void 0===a?void 0:a.reduce(((e,t)=>e+(t.colSpan||1)),0),s=this.state._selection?1:0;return index.h("tr",{"aria-hidden":"true",class:clsx.clsx("kol-table__spacer",`kol-table__spacer--${e}`)},index.h("td",{class:clsx.clsx(`kol-table__spacer-line kol-table__spacer-line--${e}`),colSpan:i+o+s}))}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return null;const e=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return index.h("tfoot",{class:"kol-table__footer"},[this.renderSpacer("foot",e),e.map(((e,t)=>this.renderTableRow(e,t,!0,!0)))])}render(){const e=this.createDataField(this.state._data,this.state._headerCells);return this.checkboxRefs=[],index.h("div",{key:"549f622afff7df86761eeb498ac70bfc92ca4f44",ref:e=>this.tableDivElement=e,class:"kol-table",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},index.h("table",{key:"242c10f27b1ea14903682bb34bbca46241861f73",class:"kol-table__table",style:{minWidth:this.state._minWidth}},index.h("div",{key:"0d0fae894ca516d219767925319ecf2d3b593d04",class:"kol-table__focus-element",tabindex:this.tableDivElementHasScrollbar?"0":void 0,"aria-describedby":"caption"}," "),index.h("caption",{key:"5868d1151e41c69e755f5a77d9e382da88b73b12",class:"kol-table__caption",id:"caption"},this.state._label),Array.isArray(this.state._headerCells.horizontal)&&index.h("thead",{key:"c8110a9b667623f0c1c6e1cd3c360dd5be0beb77",class:"kol-table__head"},[this.state._headerCells.horizontal.map(((e,t)=>index.h("tr",{class:"kol-table__head-row",key:`thead-${t}`},this.state._selection&&this.renderHeadingSelectionCell(),0===t&&this.renderHeaderTdCell(),Array.isArray(e)&&e.map(((e,l)=>this.renderHeadingCell(e,t,l,!1)))))),this.renderSpacer("head",this.state._headerCells.horizontal)]),index.h("tbody",{key:"dd8e78f291f236dc16c39bc0eea7d756b3a1fb69",class:"kol-table__body"},e.map(((e,t)=>this.renderTableRow(e,t,!0)))),this.renderFoot()))}get host(){return index.getElement(this)}static get watchers(){return{_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_on:["validateOn"],_selection:["validateSelection"]}}};exports.kol_table_stateless_wc=KolTableStateless;

package/dist/cjs/kol-table-stateless.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-87a7393a.js"),componentNames=require("./component-names-cf0c0d8a.js"),defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__focus-element:focus {\n    outline: 0 !important;\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto Highlight;\n    outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto -webkit-focus-ring-color;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\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    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\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}",KolTableStatelessDefaultStyle0=defaultStyleCss,KolTableStateless=class{constructor(n){index.registerInstance(this,n),this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}render(){return index.h(componentNames.KolTableStatelessWcTag,{key:"048855cd40a5b65261de66ea0ef42be89f37557e",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection})}};KolTableStateless.style={default:KolTableStatelessDefaultStyle0},exports.kol_table_stateless=KolTableStateless;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-5eda7e82.js"),componentNames=require("./component-names-74abfa2e.js"),defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__focus-element:focus {\n    outline: 0 !important;\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__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    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\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}",KolTableStatelessDefaultStyle0=defaultStyleCss,KolTableStateless=class{constructor(n){index.registerInstance(this,n),this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}render(){return index.h(componentNames.KolTableStatelessWcTag,{key:"09eea3b93727bb01ed67c8949a15bcd109505c49",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection})}};KolTableStateless.style={default:KolTableStatelessDefaultStyle0},exports.kol_table_stateless=KolTableStateless;

package/dist/cjs/kol-table-stateless.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"kol-table-stateless.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,ogRAAogR,CAAC;AAC7hR,uCAAe,eAAe;;MCmBjB,iBAAiB;;;;;;;;;;;IAoCtB,MAAM;QACZ,QACCA,QAACC,qCAAsB,qDACtB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,UAAU,EAAE,IAAI,CAAC,UAAU,GAC1B,EACD;KACF;;;;;;;;","names":["h","KolTableStatelessWcTag"],"sources":["src/components/table-stateless/style.scss?tag=kol-table-stateless&mode=default&encapsulation=shadow","src/components/table-stateless/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../../styles/global';\n@import '../@shared/kol-table-stateless-mixin';\n@import '../host-display-block';\n\n@include kol-table-stateless-styles;\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Prop } from '@stencil/core';\nimport { KolTableStatelessWcTag } from '../../core/component-names';\nimport type {\n\tTableCallbacksPropType,\n\tTableDataFootPropType,\n\tTableDataPropType,\n\tTableHeaderCellsPropType,\n\tTableSelectionPropType,\n\tTableStatelessProps,\n} from '../../schema';\nimport type { MinWidthPropType } from '../../schema/props/min-width';\n\n@Component({\n\ttag: 'kol-table-stateless',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTableStateless implements TableStatelessProps {\n\t/**\n\t * Defines the primary table data.\n\t */\n\t@Prop() public _data!: TableDataPropType;\n\n\t/**\n\t * Defines the data for the table footer.\n\t */\n\t@Prop() public _dataFoot?: TableDataFootPropType;\n\n\t/**\n\t * Defines the horizontal and vertical table headers.\n\t */\n\t@Prop() public _headerCells!: TableHeaderCellsPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Defines the table min-width (CSS width values).\n\t */\n\t@Prop() public _minWidth!: MinWidthPropType;\n\n\t/**\n\t * Defines the callback functions for table events.\n\t */\n\t@Prop() public _on?: TableCallbacksPropType;\n\n\t/**\n\t * Defines how rows can be selected and the current selection.\n\t */\n\t@Prop() public _selection?: TableSelectionPropType;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTableStatelessWcTag\n\t\t\t\t_data={this._data}\n\t\t\t\t_dataFoot={this._dataFoot}\n\t\t\t\t_headerCells={this._headerCells}\n\t\t\t\t_label={this._label}\n\t\t\t\t_minWidth={this._minWidth}\n\t\t\t\t_on={this._on}\n\t\t\t\t_selection={this._selection}\n\t\t\t/>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"kol-table-stateless.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,8uQAA8uQ,CAAC;AACvwQ,uCAAe,eAAe;;MCmBjB,iBAAiB;;;;;;;;;;;IAoCtB,MAAM;QACZ,QACCA,QAACC,qCAAsB,qDACtB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,UAAU,EAAE,IAAI,CAAC,UAAU,GAC1B,EACD;KACF;;;;;;;;","names":["h","KolTableStatelessWcTag"],"sources":["src/components/table-stateless/style.scss?tag=kol-table-stateless&mode=default&encapsulation=shadow","src/components/table-stateless/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../@shared/kol-table-stateless-mixin' as *;\n@use '../host-display-block' as *;\n\n@include kol-table-stateless-styles;\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Prop } from '@stencil/core';\nimport { KolTableStatelessWcTag } from '../../core/component-names';\nimport type {\n\tTableCallbacksPropType,\n\tTableDataFootPropType,\n\tTableDataPropType,\n\tTableHeaderCellsPropType,\n\tTableSelectionPropType,\n\tTableStatelessProps,\n} from '../../schema';\nimport type { MinWidthPropType } from '../../schema/props/min-width';\n\n@Component({\n\ttag: 'kol-table-stateless',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTableStateless implements TableStatelessProps {\n\t/**\n\t * Defines the primary table data.\n\t */\n\t@Prop() public _data!: TableDataPropType;\n\n\t/**\n\t * Defines the data for the table footer.\n\t */\n\t@Prop() public _dataFoot?: TableDataFootPropType;\n\n\t/**\n\t * Defines the horizontal and vertical table headers.\n\t */\n\t@Prop() public _headerCells!: TableHeaderCellsPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Defines the table min-width (CSS width values).\n\t */\n\t@Prop() public _minWidth!: MinWidthPropType;\n\n\t/**\n\t * Defines the callback functions for table events.\n\t */\n\t@Prop() public _on?: TableCallbacksPropType;\n\n\t/**\n\t * Defines how rows can be selected and the current selection.\n\t */\n\t@Prop() public _selection?: TableSelectionPropType;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTableStatelessWcTag\n\t\t\t\t_data={this._data}\n\t\t\t\t_dataFoot={this._dataFoot}\n\t\t\t\t_headerCells={this._headerCells}\n\t\t\t\t_label={this._label}\n\t\t\t\t_minWidth={this._minWidth}\n\t\t\t\t_on={this._on}\n\t\t\t\t_selection={this._selection}\n\t\t\t/>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/cjs/kol-tabs.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-87a7393a.js"),i18n=require("./i18n-1d085d07.js"),componentNames=require("./component-names-cf0c0d8a.js"),events=require("./events-fc641593.js"),clsx=require("./clsx-dd4d6dd1.js"),prop_validators=require("./prop.validators-96dfedce.js"),align=require("./align-b9732b91.js"),label=require("./label-b8654499.js"),dev_utils=require("./dev.utils-58fde089.js");require("./i18n-737701e2.js"),require("./reuse-8cfefa9b.js"),require("./index-38f5f0b2.js");const tabBehaviorPropTypeOptions=["select-automatic","select-manual"],validateTabBehavior=(e,t)=>{prop_validators.watchValidator(e,"_behavior",(e=>"string"==typeof e&&tabBehaviorPropTypeOptions.includes(e)),new Set([`KoliBriTabBehavior {${tabBehaviorPropTypeOptions.join(", ")}`]),t)};var KeyboardKey;!function(e){e.ArrowDown="ArrowDown",e.ArrowLeft="ArrowLeft",e.ArrowRight="ArrowRight",e.ArrowUp="ArrowUp",e.Enter="Enter",e.Space=" "}(KeyboardKey||(KeyboardKey={}));const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-tabs {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: var(--display);\n    grid-template-rows: var(--grid-template-rows);\n    grid-template-columns: var(--grid-template-columns);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-flex-direction: column;\n    --button-group-order: 2;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-flex-direction: column;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: grid;\n    --grid-template-rows: 1fr auto;\n    --button-group-order: 2;\n  }\n  .kol-tabs__tabs-align-top {\n    --display: grid;\n    --grid-template-rows: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs__content {\n    overflow: auto;\n  }\n  .kol-tabs__button-group {\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: var(--button-group-flex-direction);\n    order: var(--button-group-order);\n  }\n  .kol-tabs__button-group .kol-button {\n    border-bottom-color: transparent;\n    border-bottom-style: solid;\n    display: block;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n}",KolTabsDefaultStyle0=defaultStyleCss,KolTabs=class{constructor(e){index.registerInstance(this,e),this.onCreateLabel=`${i18n.translate("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(e,t,n=1)=>{const a=t+n;return a<e.length?e[a]._disabled?this.nextPossibleTabIndex(e,t,n+1):a:t},this.prevPossibleTabIndex=(e,t,n=1)=>{const a=t-n;return a>=0?e[a]._disabled?this.prevPossibleTabIndex(e,t,n+1):a:t},this.onKeyDown=e=>{switch(e.key){case KeyboardKey.ArrowRight:this.goToNextTab(e);break;case KeyboardKey.ArrowLeft:this.goToPreviousTab(e);break;case KeyboardKey.Space:case KeyboardKey.Enter:this.activateFocusedTab(e)}},this.onClickSelect=(e,t)=>{this.selectNextTabEvent(e,t)},this.onMouseDown=e=>{e.preventDefault()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=e=>{this.tabPanelHost=e},this.selectNextNotDisabledTab=(e,t,n=!0,a)=>{if(e>t.length-1&&(e=t.length-1),e<0&&(e=0),Array.isArray(t)&&t[e]&&t[e]._disabled){if(!0===n){if(e<t.length-1)return this.selectNextNotDisabledTab(e+1,t,!0,a||e);e=a||e,n=!1}if(!1===n){if(e>0)return this.selectNextNotDisabledTab(e-1,t,!1,a||e);prop_validators.devHint("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return e},this.syncSelectedAndTabs=(e,t,n,a)=>{let o,i;o="_selected"===a?e:this.state._selected,i="_tabs"===a?e:this.state._tabs,i.length>0&&t.set("_selected",this.selectNextNotDisabledTab(o,i))},this.handleTabPanels=()=>{var e,t,n;if(this.tabPanelHost instanceof HTMLDivElement)for(let a=this.tabPanelHost.children.length;a<this.state._tabs.length;a++){const o=document.createElement("div");o.setAttribute("class","kol-tab__panel"),o.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${a}`),o.setAttribute("id",`tabpanel-${a}`),o.setAttribute("role","tabpanel"),o.setAttribute("hidden","");const i=document.createElement("slot");i.setAttribute("name",`tabpanel-slot-${a}`),o.appendChild(i),this.tabPanelHost.appendChild(o),(null===(e=this.host)||void 0===e?void 0:e.children)instanceof HTMLCollection&&(null===(t=this.host)||void 0===t?void 0:t.children[a])&&(null===(n=this.host)||void 0===n||n.children[a].setAttribute("slot",`tabpanel-slot-${a}`))}},this.onCreate=e=>{var t,n;e.preventDefault(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onCreate)&&(null===(n=this.state._on)||void 0===n||n.onCreate(e))},this.onBlur=()=>{this.currentFocusIndex=void 0},this._align="top",this._behavior=void 0,this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]}}getCurrentFocusIndex(){return"number"==typeof this.currentFocusIndex?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return"select-manual"===this._behavior?"selectFocusOnly":"activateCompletely"}goToNextTab(e){const t=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(e,t,this.getKeyboardTabChangeMode())}goToPreviousTab(e){const t=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(e,t,this.getKeyboardTabChangeMode())}activateFocusedTab(e){"number"==typeof this.currentFocusIndex&&this.onSelect(e,this.currentFocusIndex)}selectNextTabEvent(e,t,n="activateCompletely"){var a,o;if(this.currentFocusIndex=t,this.focusTabById(t),"activateCompletely"===n){this._selected=t;null===(o=null===(a=this.state._tabs[t]._on)||void 0===a?void 0:a.onSelect)||void 0===o||o.call(a,e,t),this.onSelect(e,t)}}renderButtonGroup(){return index.h("div",{"aria-label":this.state._label,class:"kol-tabs__button-group",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map(((e,t)=>index.h(componentNames.KolButtonWcTag,{_disabled:e._disabled,_icons:e._icons,_hideLabel:e._hideLabel,_label:e._label,_on:this.callbacks,_tabIndex:this.state._selected===t?0:-1,_tooltipAlign:e._tooltipAlign,_variant:this.state._selected===t?"custom":void 0,_customClass:this.state._selected===t?"selected":void 0,_ariaControls:`tabpanel-${t}`,_ariaSelected:this.state._selected===t,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${t}`,_role:"tab",_value:t}))),this.showCreateTab&&index.h(componentNames.KolButtonWcTag,{class:"kol-tabs_button-create",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return index.h("div",{key:"592fb62ac9fe48dbf63d7dfef9ce4e75406a2acf",ref:e=>{this.tabPanelsElement=e},class:clsx.clsx("kol-tabs",`kol-tabs--align-${this.state._align}`)},this.renderButtonGroup(),index.h("div",{key:"5102f215e596aabaa44212a86ca29b0224d58bf5",class:"kol-tabs__content",ref:this.catchTabPanelHost}))}validateAlign(e){align.validateAlign(this,e)}validateBehavior(e){validateTabBehavior(this,e)}validateLabel(e){label.validateLabel(this,e,{required:!0})}validateOn(e){if("object"==typeof e&&null!==e){prop_validators.featureHint("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const t={};"function"!=typeof e.onCreate&&"object"!=typeof e.onCreate||("object"==typeof e.onCreate?("string"==typeof e.onCreate.label&&e.onCreate.label.length>0?this.onCreateLabel=e.onCreate.label:dev_utils.Log.debug("[KolTabs] The label text for New in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} is not set correctly."),"function"==typeof e.onCreate.callback?t.onCreate=e.onCreate.callback:dev_utils.Log.debug("[KolTabs] The onCreate callback function for New in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} is not set correctly.")):t.onCreate=e.onCreate,this.showCreateTab="function"==typeof t.onCreate),"function"==typeof e.onSelect&&(t.onSelect=e.onSelect),prop_validators.setState(this,"_on",t)}}validateSelected(e){prop_validators.watchNumber(this,"_selected",e,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(e){prop_validators.watchJsonArrayString(this,"_tabs",(e=>"object"==typeof e&&null!==e&&"string"==typeof e._label&&e._label.length>0),e,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),prop_validators.uiUxHintMillerscheZahl("KolTabs",this.state._tabs.length)}componentWillLoad(){this.validateAlign(this._align),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateBehavior(this._behavior)}componentDidRender(){if(this.handleTabPanels(),this.tabPanelHost instanceof HTMLDivElement)for(let e=0;e<this.tabPanelHost.children.length;e++)e!==this.state._selected?this.tabPanelHost.children[e].setAttribute("hidden",""):this.tabPanelHost.children[e].removeAttribute("hidden")}focusTabById(e){if(this.tabPanelsElement){const t=prop_validators.koliBriQuerySelector(`button#${this.state._label.replace(/\s/g,"-")}-tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}onSelect(e,t){var n,a;null===(a=null===(n=this._on)||void 0===n?void 0:n.onSelect)||void 0===a||a.call(n,e,t),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.select,t),this.focusTabById(t)}get host(){return index.getElement(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};KolTabs.style={default:KolTabsDefaultStyle0},exports.kol_tabs=KolTabs;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-5eda7e82.js"),i18n=require("./i18n-cdacfb29.js"),componentNames=require("./component-names-74abfa2e.js"),events=require("./events-fc641593.js"),clsx=require("./clsx-dd4d6dd1.js"),prop_validators=require("./prop.validators-96dfedce.js"),align=require("./align-b9732b91.js"),label=require("./label-b8654499.js"),dev_utils=require("./dev.utils-58fde089.js");require("./i18n-583e3c4b.js"),require("./reuse-8cfefa9b.js"),require("./index-38f5f0b2.js");const tabBehaviorPropTypeOptions=["select-automatic","select-manual"],validateTabBehavior=(e,t)=>{prop_validators.watchValidator(e,"_behavior",(e=>"string"==typeof e&&tabBehaviorPropTypeOptions.includes(e)),new Set([`KoliBriTabBehavior {${tabBehaviorPropTypeOptions.join(", ")}`]),t)};var KeyboardKey;!function(e){e.ArrowDown="ArrowDown",e.ArrowLeft="ArrowLeft",e.ArrowRight="ArrowRight",e.ArrowUp="ArrowUp",e.Enter="Enter",e.Space=" "}(KeyboardKey||(KeyboardKey={}));const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-tabs {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: var(--display);\n    grid-template-rows: var(--grid-template-rows);\n    grid-template-columns: var(--grid-template-columns);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-flex-direction: column;\n    --button-group-order: 2;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-flex-direction: column;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: grid;\n    --grid-template-rows: 1fr auto;\n    --button-group-order: 2;\n  }\n  .kol-tabs__tabs-align-top {\n    --display: grid;\n    --grid-template-rows: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs__content {\n    overflow: auto;\n  }\n  .kol-tabs__button-group {\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: var(--button-group-flex-direction);\n    order: var(--button-group-order);\n  }\n  .kol-tabs__button-group .kol-button {\n    border-bottom-color: transparent;\n    border-bottom-style: solid;\n    display: block;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n}",KolTabsDefaultStyle0=defaultStyleCss,KolTabs=class{constructor(e){index.registerInstance(this,e),this.onCreateLabel=`${i18n.translate("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(e,t,n=1)=>{const o=t+n;return o<e.length?e[o]._disabled?this.nextPossibleTabIndex(e,t,n+1):o:t},this.prevPossibleTabIndex=(e,t,n=1)=>{const o=t-n;return o>=0?e[o]._disabled?this.prevPossibleTabIndex(e,t,n+1):o:t},this.onKeyDown=e=>{switch(e.key){case KeyboardKey.ArrowRight:this.goToNextTab(e);break;case KeyboardKey.ArrowLeft:this.goToPreviousTab(e);break;case KeyboardKey.Space:case KeyboardKey.Enter:this.activateFocusedTab(e)}},this.onClickSelect=(e,t)=>{this.selectNextTabEvent(e,t)},this.onMouseDown=e=>{e.preventDefault()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=e=>{this.tabPanelHost=e},this.selectNextNotDisabledTab=(e,t,n=!0,o)=>{if(e>t.length-1&&(e=t.length-1),e<0&&(e=0),Array.isArray(t)&&t[e]&&t[e]._disabled){if(!0===n){if(e<t.length-1)return this.selectNextNotDisabledTab(e+1,t,!0,o||e);e=o||e,n=!1}if(!1===n){if(e>0)return this.selectNextNotDisabledTab(e-1,t,!1,o||e);prop_validators.devHint("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return e},this.syncSelectedAndTabs=(e,t,n,o)=>{let a,i;a="_selected"===o?e:this.state._selected,i="_tabs"===o?e:this.state._tabs,i.length>0&&t.set("_selected",this.selectNextNotDisabledTab(a,i))},this.handleTabPanels=()=>{var e,t,n;if(this.tabPanelHost instanceof HTMLDivElement)for(let o=this.tabPanelHost.children.length;o<this.state._tabs.length;o++){const a=document.createElement("div");a.setAttribute("class","kol-tab__panel"),a.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${o}`),a.setAttribute("id",`tabpanel-${o}`),a.setAttribute("role","tabpanel"),a.setAttribute("hidden","");const i=document.createElement("slot");i.setAttribute("name",`tabpanel-slot-${o}`),a.appendChild(i),this.tabPanelHost.appendChild(a),(null===(e=this.host)||void 0===e?void 0:e.children)instanceof HTMLCollection&&(null===(t=this.host)||void 0===t?void 0:t.children[o])&&(null===(n=this.host)||void 0===n||n.children[o].setAttribute("slot",`tabpanel-slot-${o}`))}},this.onCreate=e=>{var t,n;e.preventDefault(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onCreate)&&(null===(n=this.state._on)||void 0===n||n.onCreate(e))},this.onBlur=()=>{this.currentFocusIndex=void 0},this._align="top",this._behavior=void 0,this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]}}getCurrentFocusIndex(){return"number"==typeof this.currentFocusIndex?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return"select-manual"===this._behavior?"selectFocusOnly":"activateCompletely"}goToNextTab(e){const t=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(e,t,this.getKeyboardTabChangeMode())}goToPreviousTab(e){const t=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(e,t,this.getKeyboardTabChangeMode())}activateFocusedTab(e){"number"==typeof this.currentFocusIndex&&this.onSelect(e,this.currentFocusIndex)}selectNextTabEvent(e,t,n="activateCompletely"){var o,a;if(this.currentFocusIndex=t,this.focusTabById(t),"activateCompletely"===n){this._selected=t;null===(a=null===(o=this.state._tabs[t]._on)||void 0===o?void 0:o.onSelect)||void 0===a||a.call(o,e,t),this.onSelect(e,t)}}renderButtonGroup(){return index.h("div",{"aria-label":this.state._label,class:"kol-tabs__button-group",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map(((e,t)=>index.h(componentNames.KolButtonWcTag,{_disabled:e._disabled,_icons:e._icons,_hideLabel:e._hideLabel,_label:e._label,_on:this.callbacks,_tabIndex:this.state._selected===t?0:-1,_tooltipAlign:e._tooltipAlign,_variant:this.state._selected===t?"custom":void 0,_customClass:this.state._selected===t?"selected":void 0,_ariaControls:`tabpanel-${t}`,_ariaSelected:this.state._selected===t,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${t}`,_role:"tab",_value:t}))),this.showCreateTab&&index.h(componentNames.KolButtonWcTag,{class:"kol-tabs_button-create",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return index.h("div",{key:"52a70c1d286ac580104880d963304de6fd22032d",ref:e=>{this.tabPanelsElement=e},class:clsx.clsx("kol-tabs",`kol-tabs--align-${this.state._align}`)},this.renderButtonGroup(),index.h("div",{key:"6402be3ce0ba5b6959581ebb8b3e57d2d7035253",class:"kol-tabs__content",ref:this.catchTabPanelHost}))}validateAlign(e){align.validateAlign(this,e)}validateBehavior(e){validateTabBehavior(this,e)}validateLabel(e){label.validateLabel(this,e,{required:!0})}validateOn(e){if("object"==typeof e&&null!==e){prop_validators.featureHint("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const t={};"function"!=typeof e.onCreate&&"object"!=typeof e.onCreate||("object"==typeof e.onCreate?("string"==typeof e.onCreate.label&&e.onCreate.label.length>0?this.onCreateLabel=e.onCreate.label:dev_utils.Log.debug("[KolTabs] The label text for New in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} is not set correctly."),"function"==typeof e.onCreate.callback?t.onCreate=e.onCreate.callback:dev_utils.Log.debug("[KolTabs] The onCreate callback function for New in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} is not set correctly.")):t.onCreate=e.onCreate,this.showCreateTab="function"==typeof t.onCreate),"function"==typeof e.onSelect&&(t.onSelect=e.onSelect),prop_validators.setState(this,"_on",t)}}validateSelected(e){prop_validators.watchNumber(this,"_selected",e,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(e){prop_validators.watchJsonArrayString(this,"_tabs",(e=>"object"==typeof e&&null!==e&&"string"==typeof e._label&&e._label.length>0),e,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),prop_validators.uiUxHintMillerscheZahl("KolTabs",this.state._tabs.length)}componentWillLoad(){this.validateAlign(this._align),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateBehavior(this._behavior)}componentDidRender(){if(this.handleTabPanels(),this.tabPanelHost instanceof HTMLDivElement)for(let e=0;e<this.tabPanelHost.children.length;e++)e!==this.state._selected?this.tabPanelHost.children[e].setAttribute("hidden",""):this.tabPanelHost.children[e].removeAttribute("hidden")}focusTabById(e){if(this.tabPanelsElement){const t=prop_validators.koliBriQuerySelector(`button#${this.state._label.replace(/\s/g,"-")}-tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}onSelect(e,t){var n,o;null===(o=null===(n=this._on)||void 0===n?void 0:n.onSelect)||void 0===o||o.call(n,e,t),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.select,t),this.focusTabById(t)}get host(){return index.getElement(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};KolTabs.style={default:KolTabsDefaultStyle0},exports.kol_tabs=KolTabs;