@public-ui/components 2.0.0-rc.12 → 2.0.0-rc.13

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","PAGINATION_OPTIONS","CELL_REFS","Map","KolTable","this","horizontal","sortDirections","sortData","showPagination","pageStartSlice","pageEndSlice","disableSort","sortedColumnHead","label","key","sortDirection","ariaLive","setSortDirection","sort","direction","clear","set","sortFunction","handlePagination","onClick","event","page","_a","state","_pagination","_on","setState","Object","assign","_page","onChangePage","onChangePageSize","pageSize","_pageSize","beforePatchPagination","nextValue","_nextState","_component","updateSortedData","cell","_data","sortedData","length","a","b","index","data","result","compareFn","translate","placeholders","column","multi","sortText","get","reverse","renderTableRow","row","rowIndex","h","map","col","colIndex","renderTableCell","asTd","headerCell","undefined","shortSortDirection","sortButtonIcon","find","value","scope","rowSpan","colSpan","style","textAlign","width","class","exportparts","_icons","_hideLabel","_label","colLabel","changeCellSort","_variant","ref","render","el","cellRender","renderFoot","rows","createDataField","_dataFoot","_headers","_allowMultiSort","vertical","_max","_sortedData","validateAllowMultiSort","watchValidator","Set","defaultValue","validateData","emptyStringByArrayHandler","objectObjectHandler","parseJson","e","Array","isArray","dataTupel","afterPatch","setTimeout","validateDataFoot","findIndex","settings","splice","push","validateHeaders","hooks","beforePatch","applySort","headers","hasSortedCells","forEach","_b","_c","_d","devHint","validateLabel","validateMinWidth","watchString","validatePagination","componentWillLoad","_minWidth","getNumberOfCols","horizontalHeaders","max","count","getNumberOfRows","verticalHeaders","filterHeaderKeys","primaryHeader","cells","getPrimaryHeader","isFoot","maxCols","maxRows","startRow","dataField","rowCount","rowSpans","_row","i","dataRow","headerCells","rowsTotal","k","j","colspan","rowspan","emptyCell","Math","selectDisplayedData","slice","clearTimeout","html","textContent","displayedData","Host","height","overflow","_boundaryCount","_customClass","_pageSizeOptions","_siblingCount","_tooltipAlign","tabindex","minWidth","cols"],"sources":["src/components/table/style.css?tag=kol-table&mode=default&encapsulation=shadow","src/components/table/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n@layer kol-component {\n\t:host {\n\t\tdisplay: grid;\n\t}\n\n\t:host > div.table {\n\t\tmax-width: 100%;\n\t\torder: 1;\n\t\toverflow-x: auto;\n\t\toverflow-y: hidden;\n\t}\n\n\t:host > div.table table {\n\t\twidth: 100%;\n\t}\n\n\tth > div {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr auto;\n\t\tplace-items: center;\n\t}\n\n\tdiv.pagination {\n\t\torder: 2;\n\t}\n\n\tdiv.pagination,\n\tdiv.pagination > div:last-child {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t@media (min-width: 1024px) {\n\t\tdiv.pagination,\n\t\tdiv.pagination > div:last-child {\n\t\t\tgrid-auto-flow: column;\n\t\t}\n\n\t\tdiv.pagination kol-pagination {\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n}\n","/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\nimport { Generic } from '@a11y-ui/core';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { devHint } from '../../utils/a11y.tipps';\nimport { emptyStringByArrayHandler, objectObjectHandler, parseJson, setState, watchString, watchValidator } from '../../utils/prop.validators';\nimport { KoliBriPaginationButtonCallbacks } from '../pagination/types';\nimport {\n\tAPI,\n\tKoliBriDataCompareFn,\n\tKoliBriSortDirection,\n\tKoliBriSortFunction,\n\tKoliBriTableCell,\n\tKoliBriTableDataType,\n\tKoliBriTableHeaderCell,\n\tKoliBriTableHeaderCellAndData,\n\tKoliBriTableHeaders,\n\tKoliBriTablePaginationProps,\n\tKoliBriTableRender,\n\tKoliBriTableSelectedHead,\n\tStates,\n} from './types';\n\nconst PAGINATION_OPTIONS = [10, 20, 50, 100];\n\nconst CELL_REFS = new Map<HTMLElement, ReturnType<typeof setTimeout>>();\n\ntype SortData = {\n\tlabel: string;\n\tkey: string;\n\tcompareFn: KoliBriDataCompareFn;\n\tdirection: KoliBriSortDirection;\n};\n\n@Component({\n\ttag: 'kol-table',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTable implements API {\n\tprivate horizontal = true;\n\t/**\n\t * @deprecated only for backward compatibility\n\t */\n\tprivate sortFunction?: KoliBriSortFunction;\n\t/**\n\t * @deprecated only for backward compatibility\n\t */\n\tprivate sortDirections: Map<KoliBriSortFunction, KoliBriSortDirection> = new Map();\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 * @deprecated only for backward compatibility\n\t */\n\tprivate sortedColumnHead: KoliBriTableSelectedHead = { label: '', key: '', sortDirection: 'NOS' };\n\tprivate ariaLive = '';\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.\n\t */\n\t@Prop() public _minWidth?: string;\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\n\t@State() public state: States = {\n\t\t_allowMultiSort: false,\n\t\t_label: '…', // ⚠ required\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_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};\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?: Stringified<KoliBriTableDataType[]>): void {\n\t\temptyStringByArrayHandler(value, () => {\n\t\t\tobjectObjectHandler(value, () => {\n\t\t\t\tif (typeof value === 'undefined') {\n\t\t\t\t\tvalue = [];\n\t\t\t\t}\n\t\t\t\ttry {\n\t\t\t\t\tvalue = parseJson<KoliBriTableDataType[]>(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\tif (Array.isArray(value) && value.find((dataTupel: KoliBriTableDataType) => !(typeof dataTupel === 'object' && dataTupel !== null)) === undefined) {\n\t\t\t\t\tsetState(this, '_data', value, {\n\t\t\t\t\t\tafterPatch: () => {\n\t\t\t\t\t\t\t// TODO: kein guter Hack (endless loop)\n\t\t\t\t\t\t\tsetTimeout(this.updateSortedData);\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('_dataFoot')\n\tpublic validateDataFoot(value?: Stringified<KoliBriTableDataType[]>): void {\n\t\temptyStringByArrayHandler(value, () => {\n\t\t\tobjectObjectHandler(value, () => {\n\t\t\t\tif (typeof value === 'undefined') {\n\t\t\t\t\tvalue = [];\n\t\t\t\t}\n\t\t\t\ttry {\n\t\t\t\t\tvalue = parseJson<KoliBriTableDataType[]>(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\tif (Array.isArray(value) && value.find((dataTupel: KoliBriTableDataType) => !(typeof dataTupel === 'object' && dataTupel !== null)) === undefined) {\n\t\t\t\t\tsetState(this, '_dataFoot', value, {\n\t\t\t\t\t\tafterPatch: () => {\n\t\t\t\t\t\t\tsetTimeout(this.updateSortedData);\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/**\n\t * @deprecated only for backward compatibility\n\t */\n\tprivate setSortDirection = (sort: KoliBriSortFunction, direction: KoliBriSortDirection) => {\n\t\t/**\n\t\t * Durch des Clearen, ist es nicht möglich eine Mehr-Spalten-Sortierung\n\t\t * darzustellen. Das wäre der Fall, wenn man ggf. Daten in außerhalb der\n\t\t * Komponente sortiert und diese sortiert von außen rein gibt und der\n\t\t * Sortierungsalgorithmus mehrere Spalten zusammen sortierte.\n\t\t *\n\t\t * Beachte auch col.sort !== this.sortFunction\n\t\t */\n\t\tthis.sortDirections.clear();\n\t\tthis.sortDirections.set(sort, direction);\n\t\tthis.sortFunction = sort;\n\t};\n\n\tprivate changeCellSort(headerCell: KoliBriTableHeaderCell) {\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(headerCell as KoliBriTableSelectedHead);\n\t\t} else if (typeof headerCell.sort === 'function') {\n\t\t\tthis.sortFunction = headerCell.sort;\n\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\tcase 'ASC':\n\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'DESC');\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'DESC':\n\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'NOS');\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'ASC');\n\t\t\t}\n\t\t\tthis.updateSortedData(headerCell as KoliBriTableSelectedHead);\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: KoliBriTableHeaderCell[]) => {\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} else if (typeof cell.sort === 'function') {\n\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(cell.sort, sortDirection);\n\t\t\t\t\t\t\t\t\t\t\tsetTimeout(() => this.updateSortedData({ key, label: cell.label, sortDirection }));\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}\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\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\tprivate readonly beforePatchPagination: Generic.Element.NextStateHooksCallback = (nextValue, _nextState, _component, key): void => {\n\t\tif (key === '_pagination') {\n\t\t\tthis.showPagination = nextValue === true || nextValue === '' /* true */ || (typeof nextValue === 'object' && nextValue !== null);\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<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\t\twatchValidator(this, '_pagination', () => true, new Set(['boolean', 'KoliBriTablePagination']), value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchPagination,\n\t\t\t},\n\t\t});\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}\n\n\tprivate getNumberOfCols(horizontalHeaders: KoliBriTableHeaderCell[][], data: KoliBriTableDataType[]): number {\n\t\tlet max = 0;\n\t\thorizontalHeaders.forEach((row) => {\n\t\t\tlet count = 0;\n\t\t\trow.forEach((col) => (count += col.colSpan ?? 1));\n\t\t\tif (max < count) {\n\t\t\t\tmax = count;\n\t\t\t}\n\t\t});\n\t\tif (max === 0) {\n\t\t\tmax = data.length;\n\t\t}\n\t\treturn max;\n\t}\n\n\tprivate getNumberOfRows(verticalHeaders: KoliBriTableHeaderCell[][], data: KoliBriTableDataType[]): number {\n\t\tlet max = 0;\n\t\tverticalHeaders.forEach((col) => {\n\t\t\tlet count = 0;\n\t\t\tcol.forEach((row) => (count += row.rowSpan ?? 1));\n\t\t\tif (max < count) {\n\t\t\t\tmax = count;\n\t\t\t}\n\t\t});\n\t\tif (max === 0) {\n\t\t\tmax = data.length;\n\t\t} else {\n\t\t\tmax -= this.state._dataFoot.length;\n\t\t}\n\t\treturn max;\n\t}\n\n\tprivate filterHeaderKeys(headers: KoliBriTableHeaderCell[][]): KoliBriTableHeaderCell[] {\n\t\tconst primaryHeader: KoliBriTableHeaderCell[] = [];\n\t\theaders.forEach((cells) => {\n\t\t\tcells.forEach((cell) => {\n\t\t\t\tif (typeof cell.key === 'string') {\n\t\t\t\t\tprimaryHeader.push(cell);\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t\treturn primaryHeader;\n\t}\n\n\tprivate getPrimaryHeader(headers: KoliBriTableHeaders): KoliBriTableHeaderCell[] {\n\t\tlet primaryHeader: KoliBriTableHeaderCell[] = this.filterHeaderKeys(headers.horizontal ?? []);\n\t\tthis.horizontal = true;\n\t\tif (primaryHeader.length === 0) {\n\t\t\tprimaryHeader = this.filterHeaderKeys(headers.vertical ?? []);\n\t\t\tif (primaryHeader.length > 0) {\n\t\t\t\tthis.horizontal = false;\n\t\t\t}\n\t\t}\n\t\treturn primaryHeader;\n\t}\n\n\tprivate createDataField(data: KoliBriTableDataType[], headers: KoliBriTableHeaders, isFoot?: boolean): KoliBriTableCell[][] {\n\t\theaders.horizontal = Array.isArray(headers?.horizontal) ? headers.horizontal : [];\n\t\theaders.vertical = Array.isArray(headers?.vertical) ? headers.vertical : [];\n\t\tconst primaryHeader = this.getPrimaryHeader(headers);\n\t\tconst maxCols = this.getNumberOfCols(headers.horizontal, data);\n\t\tlet maxRows = this.getNumberOfRows(headers.vertical, data);\n\t\tlet startRow = 0;\n\t\tif (isFoot) {\n\t\t\tstartRow = maxRows;\n\t\t\tmaxRows += this.state._dataFoot.length;\n\t\t}\n\t\tconst dataField: KoliBriTableCell[][] = [];\n\n\t\tconst rowCount: number[] = [];\n\t\tconst rowSpans: number[][] = [];\n\t\theaders.vertical.forEach((_row, index) => {\n\t\t\trowCount[index] = 0;\n\t\t\trowSpans[index] = [];\n\t\t});\n\n\t\tfor (let i = startRow; i < maxRows; i++) {\n\t\t\tconst dataRow: KoliBriTableHeaderCellAndData[] = [];\n\t\t\theaders.vertical.forEach((headerCells, index) => {\n\t\t\t\tlet rowsTotal = 0;\n\t\t\t\trowSpans[index].forEach((value) => (rowsTotal += value));\n\t\t\t\tif (rowsTotal <= i) {\n\t\t\t\t\tconst rows = headerCells[i - rowsTotal + rowCount[index]];\n\t\t\t\t\tif (typeof rows === 'object') {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...rows,\n\t\t\t\t\t\t\tasTd: false,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: {} as KoliBriTableDataType,\n\t\t\t\t\t\t});\n\t\t\t\t\t\tlet rowSpan = 1;\n\t\t\t\t\t\tif (typeof rows.rowSpan === 'number' && rows.rowSpan > 1) {\n\t\t\t\t\t\t\trowSpan = rows.rowSpan;\n\t\t\t\t\t\t}\n\t\t\t\t\t\trowSpans[index].push(rowSpan);\n\t\t\t\t\t\tif (typeof rows.colSpan === 'number' && rows.colSpan > 1) {\n\t\t\t\t\t\t\tfor (let k = 1; k < rows.colSpan; k++) {\n\t\t\t\t\t\t\t\trowSpans[index + k].push(rowSpan);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\trowCount[index]++;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t\tfor (let j = 0; j < maxCols; j++) {\n\t\t\t\tif (this.horizontal === true) {\n\t\t\t\t\tconst row = isFoot ? this.state._dataFoot[i - startRow] : data[i];\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof primaryHeader[j] === 'object' &&\n\t\t\t\t\t\tprimaryHeader[j] !== null &&\n\t\t\t\t\t\ttypeof primaryHeader[j].key === 'string' &&\n\t\t\t\t\t\ttypeof row === 'object' &&\n\t\t\t\t\t\trow !== null\n\t\t\t\t\t) {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...primaryHeader[j],\n\t\t\t\t\t\t\tcolSpan: undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: row,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tlabel: row[primaryHeader[j].key as unknown as string] as string,\n\t\t\t\t\t\t\trowSpan: undefined,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof primaryHeader[i] === 'object' &&\n\t\t\t\t\t\tprimaryHeader[i] !== null &&\n\t\t\t\t\t\ttypeof primaryHeader[i].key === 'string' &&\n\t\t\t\t\t\ttypeof data[j] === 'object' &&\n\t\t\t\t\t\tdata[j] !== null\n\t\t\t\t\t) {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...primaryHeader[i],\n\t\t\t\t\t\t\tcolSpan: undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: data[j],\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tlabel: data[j][primaryHeader[i].key as unknown as number] as string,\n\t\t\t\t\t\t\trowSpan: undefined,\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\tdataField.push(dataRow);\n\t\t}\n\t\tif (data.length === 0) {\n\t\t\tlet colspan = 0;\n\t\t\tlet rowspan = 0;\n\t\t\tif (Array.isArray(headers.horizontal) && headers.horizontal.length > 0) {\n\t\t\t\theaders.horizontal[0].forEach((col) => {\n\t\t\t\t\tcolspan += col.colSpan || 1;\n\t\t\t\t});\n\t\t\t}\n\t\t\tif (Array.isArray(headers.vertical) && headers.vertical.length > 0) {\n\t\t\t\tcolspan -= headers.vertical.length;\n\t\t\t\theaders.vertical[0].forEach((row) => {\n\t\t\t\t\trowspan += row.rowSpan || 1;\n\t\t\t\t});\n\t\t\t}\n\t\t\tconst emptyCell = {\n\t\t\t\tcolSpan: colspan,\n\t\t\t\tlabel: translate('kol-no-entries'),\n\t\t\t\trender: undefined,\n\t\t\t\trowSpan: Math.max(rowspan, 1),\n\t\t\t};\n\t\t\tif (dataField.length === 0) {\n\t\t\t\tdataField.push([emptyCell]);\n\t\t\t} else {\n\t\t\t\tdataField[0].push(emptyCell);\n\t\t\t}\n\t\t}\n\t\treturn dataField;\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 cellRender(col: KoliBriTableHeaderCellAndData & { render: KoliBriTableRender }, el?: HTMLElement): void {\n\t\tif (el /* SSR instanceof HTMLElement */) {\n\t\t\tclearTimeout(CELL_REFS.get(el));\n\t\t\tCELL_REFS.set(\n\t\t\t\tel,\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tclearTimeout(CELL_REFS.get(el));\n\t\t\t\t\tconst html = col.render(\n\t\t\t\t\t\tel,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tasTd: col.asTd,\n\t\t\t\t\t\t\tlabel: col.label,\n\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t\t} as KoliBriTableHeaderCell,\n\t\t\t\t\t\tcol.data,\n\t\t\t\t\t\tthis.state._data\n\t\t\t\t\t);\n\t\t\t\t\tif (typeof html === 'string') {\n\t\t\t\t\t\tel.textContent = html;\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t}\n\n\t/**\n\t *\n\t * @param cell only used for old single sort. Can be removed when sort is removed.\n\t */\n\tprivate updateSortedData = (cell: KoliBriTableSelectedHead = this.sortedColumnHead) => {\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\n\t\t\tif (this.sortData.length === 1) {\n\t\t\t\tthis.ariaLive = translate(`kol-sort-${this.sortData[0].direction === 'ASC' ? 'ascending' : 'descending'}`, {\n\t\t\t\t\tplaceholders: { column: this.sortData[0].label, multi: '' },\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tlet sortText = '';\n\t\t\t\tfor (let index = 1; index < this.sortData.length - 1; index++) {\n\t\t\t\t\tconst data = this.sortData[index];\n\t\t\t\t\tsortText += translate(`kol-sort-then-${data.direction === 'ASC' ? 'ascending' : 'descending'}`, { placeholders: { column: data.label } });\n\t\t\t\t}\n\t\t\t\tsortText += translate(`kol-sort-then-last-${this.sortData[this.sortData.length - 1].direction === 'ASC' ? 'ascending' : 'descending'}`, {\n\t\t\t\t\tplaceholders: { column: this.sortData[this.sortData.length - 1].label },\n\t\t\t\t});\n\t\t\t\tthis.ariaLive = translate(`kol-sort-${this.sortData[0].direction === 'ASC' ? 'ascending' : 'descending'}`, {\n\t\t\t\t\tplaceholders: { column: this.sortData[0].label, multi: sortText },\n\t\t\t\t});\n\t\t\t}\n\t\t} else if (typeof this.sortFunction === 'function') {\n\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\tcase 'ASC':\n\t\t\t\t\tsortedData = this.sortFunction([...this.state._data]);\n\t\t\t\t\tthis.ariaLive = translate('kol-sort-ascending', { placeholders: { column: cell.label } });\n\t\t\t\t\tthis.sortedColumnHead = { label: cell.label, key: cell.key, sortDirection: 'ASC' };\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'DESC':\n\t\t\t\t\tsortedData = this.sortFunction([...this.state._data]).reverse();\n\t\t\t\t\tthis.ariaLive = translate('kol-sort-descending', { placeholders: { column: cell.label } });\n\t\t\t\t\tthis.sortedColumnHead = { label: cell.label, key: cell.key, sortDirection: 'DESC' };\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'NOS':\n\t\t\t\tdefault:\n\t\t\t\t\tsortedData = [...this.state._data];\n\t\t\t\t\tthis.sortedColumnHead = { label: '', key: '', sortDirection: 'NOS' };\n\t\t\t\t\tthis.ariaLive = translate('kol-sort-none', { placeholders: { column: cell.label } });\n\t\t\t}\n\t\t} else {\n\t\t\tthis.ariaLive = translate('kol-table-sort-none');\n\t\t}\n\t\tsetState(this, '_sortedData', sortedData);\n\t};\n\n\tprivate readonly renderTableRow = (row: KoliBriTableCell[], rowIndex: number): JSX.Element => {\n\t\treturn <tr key={`tbody-${rowIndex}`}>{row.map((col, colIndex) => this.renderTableCell(col, rowIndex, colIndex))}</tr>;\n\t};\n\tprivate readonly renderTableCell = (cell: KoliBriTableCell, rowIndex: number, colIndex: number): JSX.Element => {\n\t\tif (cell.asTd === false) {\n\t\t\tconst headerCell: KoliBriTableHeaderCell = cell;\n\t\t\tlet sortDirection = undefined;\n\t\t\tlet shortSortDirection: KoliBriSortDirection = 'NOS';\n\t\t\tlet sortButtonIcon = 'codicon codicon-fold';\n\t\t\tif (!this.disableSort) {\n\t\t\t\tif (headerCell.key) {\n\t\t\t\t\tconst data = this.sortData.find((value) => value.key === headerCell.key);\n\t\t\t\t\tif (data) {\n\t\t\t\t\t\tshortSortDirection = data.direction;\n\t\t\t\t\t\tswitch (data.direction) {\n\t\t\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-up';\n\t\t\t\t\t\t\t\tsortDirection = 'ascending';\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-down';\n\t\t\t\t\t\t\t\tsortDirection = 'descending';\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (headerCell.key === this.sortedColumnHead.key) {\n\t\t\t\t\tshortSortDirection = this.sortedColumnHead.sortDirection;\n\t\t\t\t\tswitch (this.sortedColumnHead.sortDirection) {\n\t\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-up';\n\t\t\t\t\t\t\tsortDirection = 'ascending';\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-down';\n\t\t\t\t\t\t\tsortDirection = 'descending';\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<th // role=\"rowheader\"\n\t\t\t\t\tkey={`tbody-${rowIndex}-${colIndex}-${headerCell.label}`}\n\t\t\t\t\tscope={typeof headerCell.rowSpan === 'number' && headerCell.rowSpan > 1 ? 'rowgroup' : 'row'}\n\t\t\t\t\tcolSpan={headerCell.colSpan}\n\t\t\t\t\trowSpan={headerCell.rowSpan}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\ttextAlign: headerCell.textAlign,\n\t\t\t\t\t\twidth: headerCell.width,\n\t\t\t\t\t}}\n\t\t\t\t\taria-sort={sortDirection}\n\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\t\t\tdata-sort={`sort-${shortSortDirection}`}\n\t\t\t\t>\n\t\t\t\t\t<div class=\"w-full flex gap-1 items-center\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t'w-full': true,\n\t\t\t\t\t\t\t\t[headerCell.textAlign as string]: typeof headerCell.textAlign === 'string' && headerCell.textAlign.length > 0,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tstyle={{ textAlign: headerCell.textAlign }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{headerCell.label}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{!this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function') && (\n\t\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t_icons={sortButtonIcon}\n\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t_label={translate('kol-change-order', { placeholders: { colLabel: headerCell.label } })}\n\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\tonClick: () => this.changeCellSort(headerCell),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</th>\n\t\t\t);\n\t\t} else {\n\t\t\treturn (\n\t\t\t\t<td // role=\"gridcell\"\n\t\t\t\t\tkey={`tbody-${rowIndex}-${colIndex}-${cell.label}`}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[cell.textAlign as string]: typeof cell.textAlign === 'string' && cell.textAlign.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\tcolSpan={cell.colSpan}\n\t\t\t\t\trowSpan={cell.rowSpan}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\ttextAlign: cell.textAlign,\n\t\t\t\t\t\twidth: cell.width,\n\t\t\t\t\t}}\n\t\t\t\t\tref={\n\t\t\t\t\t\ttypeof cell.render === 'function'\n\t\t\t\t\t\t\t? (el) => {\n\t\t\t\t\t\t\t\t\tthis.cellRender(cell as KoliBriTableHeaderCellAndData & { render: KoliBriTableRender }, el);\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{typeof cell.render !== 'function' ? cell.label : ''}\n\t\t\t\t</td>\n\t\t\t);\n\t\t}\n\t};\n\n\tprivate readonly renderFoot = (): JSX.Element => {\n\t\tconst rows: KoliBriTableCell[][] = this.createDataField(this.state._dataFoot, this.state._headers, true);\n\t\treturn <tfoot>{rows.map(this.renderTableRow)}</tfoot>;\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 dataField = this.createDataField(displayedData, this.state._headers);\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div style={{ height: '0', width: '0', overflow: 'hidden' }} aria-live=\"assertive\">\n\t\t\t\t\t{this.ariaLive}\n\t\t\t\t</div>\n\t\t\t\t{this.pageEndSlice > 0 && this.showPagination && (\n\t\t\t\t\t<div class=\"pagination\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\tEinträge {this.pageEndSlice > 0 ? this.pageStartSlice + 1 : 0} bis {this.pageEndSlice} von{' '}\n\t\t\t\t\t\t\t{this.state._pagination._max || (Array.isArray(this.state._data) ? this.state._data.length : 0)} angezeigt\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<kol-pagination\n\t\t\t\t\t\t\t\t_boundaryCount={this.state._pagination._boundaryCount}\n\t\t\t\t\t\t\t\t_customClass={this.state._pagination._customClass}\n\t\t\t\t\t\t\t\t_on={this.handlePagination}\n\t\t\t\t\t\t\t\t_page={this.state._pagination._page}\n\t\t\t\t\t\t\t\t_pageSize={this.state._pagination._pageSize}\n\t\t\t\t\t\t\t\t_pageSizeOptions={this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS}\n\t\t\t\t\t\t\t\t_siblingCount={this.state._pagination._siblingCount}\n\t\t\t\t\t\t\t\t_tooltipAlign=\"bottom\"\n\t\t\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\t\t_label={translate('kol-table-pagination-label', { placeholders: { label: this.state._label } })}\n\t\t\t\t\t\t\t></kol-pagination>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div class=\"table\" tabindex=\"0\">\n\t\t\t\t\t<table\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tminWidth: this.state._minWidth,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<caption>{this.state._label}</caption>\n\t\t\t\t\t\t{Array.isArray(this.state._headers.horizontal) && (\n\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t{this.state._headers.horizontal.map((cols, rowIndex) => (\n\t\t\t\t\t\t\t\t\t<tr key={`thead-${rowIndex}`}>\n\t\t\t\t\t\t\t\t\t\t{cols.map((col, colIndex) => {\n\t\t\t\t\t\t\t\t\t\t\tif (col.asTd === true) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td // role=\"gridcell\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={`thead-${rowIndex}-${colIndex}-${col.label}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[col.textAlign as string]: typeof col.textAlign === 'string' && col.textAlign.length > 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolSpan={col.colSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trowSpan={col.rowSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tref={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttypeof col.render === 'function'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? (el) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.cellRender(col as KoliBriTableHeaderCellAndData & { render: KoliBriTableRender }, el);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{typeof col.render !== 'function' ? col.label : ''}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tconst headerCell: KoliBriTableHeaderCell = col;\n\t\t\t\t\t\t\t\t\t\t\t\tlet sortDirection = undefined;\n\t\t\t\t\t\t\t\t\t\t\t\tlet shortSortDirection: KoliBriSortDirection = 'NOS';\n\t\t\t\t\t\t\t\t\t\t\t\tlet sortButtonIcon = 'codicon codicon-fold';\n\t\t\t\t\t\t\t\t\t\t\t\tif (headerCell.key) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst data = this.sortData.find((value) => value.key === headerCell.key);\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (data) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tshortSortDirection = data.direction;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tswitch (data.direction) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-up';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortDirection = 'ascending';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-down';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortDirection = 'descending';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tif (headerCell.key === this.sortedColumnHead.key) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tshortSortDirection = this.sortedColumnHead.sortDirection;\n\t\t\t\t\t\t\t\t\t\t\t\t\tswitch (this.sortedColumnHead.sortDirection) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-up';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortDirection = 'ascending';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-down';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortDirection = 'descending';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th // role=\"columnheader\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={`thead-${rowIndex}-${colIndex}-${headerCell.label}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tscope={typeof headerCell.colSpan === 'number' && headerCell.colSpan > 1 ? 'colgroup' : 'col'}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolSpan={headerCell.colSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trowSpan={headerCell.rowSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-sort={sortDirection}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-sort={`sort-${shortSortDirection}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"w-full flex gap-1 items-center\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'w-full': true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[col.textAlign as string]: typeof col.textAlign === 'string' && col.textAlign.length > 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{col.label}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{!this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function') && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_icons={sortButtonIcon}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_label={translate('kol-change-order', { placeholders: { colLabel: col.label } })}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick: () => this.changeCellSort(headerCell),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<tbody>{dataField.map(this.renderTableRow)}</tbody>\n\t\t\t\t\t\t{this.state._dataFoot.length > 0 ? this.renderFoot() : ''}\n\t\t\t\t\t</table>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["defaultStyleCss","PAGINATION_OPTIONS","CELL_REFS","Map","KolTable","this","horizontal","sortDirections","sortData","showPagination","pageStartSlice","pageEndSlice","disableSort","sortedColumnHead","label","key","sortDirection","ariaLive","setSortDirection","sort","direction","clear","set","sortFunction","handlePagination","onClick","event","page","_a","state","_pagination","_on","setState","Object","assign","_page","onChangePage","onChangePageSize","pageSize","_pageSize","beforePatchPagination","nextValue","_nextState","_component","updateSortedData","cell","_data","sortedData","length","a","b","index","data","result","compareFn","translate","placeholders","column","multi","sortText","get","reverse","renderTableRow","row","rowIndex","h","map","col","colIndex","renderTableCell","asTd","headerCell","undefined","shortSortDirection","sortButtonIcon","find","value","scope","rowSpan","colSpan","style","textAlign","width","class","exportparts","_icons","_hideLabel","_label","colLabel","changeCellSort","_variant","ref","render","el","cellRender","renderFoot","rows","createDataField","_dataFoot","_headers","_allowMultiSort","vertical","_max","_sortedData","validateAllowMultiSort","watchValidator","Set","defaultValue","validateData","emptyStringByArrayHandler","objectObjectHandler","parseJson","e","Array","isArray","dataTupel","afterPatch","setTimeout","validateDataFoot","findIndex","settings","splice","push","validateHeaders","hooks","beforePatch","applySort","headers","hasSortedCells","forEach","_b","_c","_d","devHint","validateLabel","validateMinWidth","watchString","validatePagination","componentWillLoad","_minWidth","getNumberOfCols","horizontalHeaders","max","count","getNumberOfRows","verticalHeaders","filterHeaderKeys","primaryHeader","cells","getPrimaryHeader","isFoot","maxCols","maxRows","startRow","dataField","rowCount","rowSpans","_row","i","dataRow","headerCells","rowsTotal","k","j","colspan","rowspan","emptyCell","Math","selectDisplayedData","slice","clearTimeout","html","textContent","displayedData","Host","height","overflow","_boundaryCount","_customClass","_pageSizeOptions","_siblingCount","_tooltipAlign","tabindex","minWidth","cols"],"sources":["src/components/table/style.css?tag=kol-table&mode=default&encapsulation=shadow","src/components/table/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n@layer kol-component {\n\t:host {\n\t\tdisplay: grid;\n\t}\n\n\t:host > div.table {\n\t\tmax-width: 100%;\n\t\torder: 1;\n\t\toverflow-x: auto;\n\t\toverflow-y: hidden;\n\t}\n\n\t:host > div.table table {\n\t\twidth: 100%;\n\t}\n\n\tth > div {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr auto;\n\t\tplace-items: center;\n\t}\n\n\tdiv.pagination {\n\t\torder: 2;\n\t}\n\n\tdiv.pagination,\n\tdiv.pagination > div:last-child {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t@media (min-width: 1024px) {\n\t\tdiv.pagination,\n\t\tdiv.pagination > div:last-child {\n\t\t\tgrid-auto-flow: column;\n\t\t}\n\n\t\tdiv.pagination kol-pagination {\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n}\n","/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\nimport { Generic } from '@a11y-ui/core';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { devHint } from '../../utils/a11y.tipps';\nimport { emptyStringByArrayHandler, objectObjectHandler, parseJson, setState, watchString, watchValidator } from '../../utils/prop.validators';\nimport { KoliBriPaginationButtonCallbacks } from '../pagination/types';\nimport {\n\tAPI,\n\tKoliBriDataCompareFn,\n\tKoliBriSortDirection,\n\tKoliBriSortFunction,\n\tKoliBriTableCell,\n\tKoliBriTableDataType,\n\tKoliBriTableHeaderCell,\n\tKoliBriTableHeaderCellAndData,\n\tKoliBriTableHeaders,\n\tKoliBriTablePaginationProps,\n\tKoliBriTableRender,\n\tKoliBriTableSelectedHead,\n\tStates,\n} from './types';\n\nconst PAGINATION_OPTIONS = [10, 20, 50, 100];\n\nconst CELL_REFS = new Map<HTMLElement, ReturnType<typeof setTimeout>>();\n\ntype SortData = {\n\tlabel: string;\n\tkey: string;\n\tcompareFn: KoliBriDataCompareFn;\n\tdirection: KoliBriSortDirection;\n};\n\n@Component({\n\ttag: 'kol-table',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTable implements API {\n\tprivate horizontal = true;\n\t/**\n\t * @deprecated only for backward compatibility\n\t */\n\tprivate sortFunction?: KoliBriSortFunction;\n\t/**\n\t * @deprecated only for backward compatibility\n\t */\n\tprivate sortDirections: Map<KoliBriSortFunction, KoliBriSortDirection> = new Map();\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 * @deprecated only for backward compatibility\n\t */\n\tprivate sortedColumnHead: KoliBriTableSelectedHead = { label: '', key: '', sortDirection: 'NOS' };\n\tprivate ariaLive = '';\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.\n\t */\n\t@Prop() public _minWidth?: string;\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\n\t@State() public state: States = {\n\t\t_allowMultiSort: false,\n\t\t_label: '…', // ⚠ required\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_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};\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?: Stringified<KoliBriTableDataType[]>): void {\n\t\temptyStringByArrayHandler(value, () => {\n\t\t\tobjectObjectHandler(value, () => {\n\t\t\t\tif (typeof value === 'undefined') {\n\t\t\t\t\tvalue = [];\n\t\t\t\t}\n\t\t\t\ttry {\n\t\t\t\t\tvalue = parseJson<KoliBriTableDataType[]>(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\tif (Array.isArray(value) && value.find((dataTupel: KoliBriTableDataType) => !(typeof dataTupel === 'object' && dataTupel !== null)) === undefined) {\n\t\t\t\t\tsetState(this, '_data', value, {\n\t\t\t\t\t\tafterPatch: () => {\n\t\t\t\t\t\t\t// TODO: kein guter Hack (endless loop)\n\t\t\t\t\t\t\tsetTimeout(this.updateSortedData);\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('_dataFoot')\n\tpublic validateDataFoot(value?: Stringified<KoliBriTableDataType[]>): void {\n\t\temptyStringByArrayHandler(value, () => {\n\t\t\tobjectObjectHandler(value, () => {\n\t\t\t\tif (typeof value === 'undefined') {\n\t\t\t\t\tvalue = [];\n\t\t\t\t}\n\t\t\t\ttry {\n\t\t\t\t\tvalue = parseJson<KoliBriTableDataType[]>(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\tif (Array.isArray(value) && value.find((dataTupel: KoliBriTableDataType) => !(typeof dataTupel === 'object' && dataTupel !== null)) === undefined) {\n\t\t\t\t\tsetState(this, '_dataFoot', value, {\n\t\t\t\t\t\tafterPatch: () => {\n\t\t\t\t\t\t\tsetTimeout(this.updateSortedData);\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/**\n\t * @deprecated only for backward compatibility\n\t */\n\tprivate setSortDirection = (sort: KoliBriSortFunction, direction: KoliBriSortDirection) => {\n\t\t/**\n\t\t * Durch des Clearen, ist es nicht möglich eine Mehr-Spalten-Sortierung\n\t\t * darzustellen. Das wäre der Fall, wenn man ggf. Daten in außerhalb der\n\t\t * Komponente sortiert und diese sortiert von außen rein gibt und der\n\t\t * Sortierungsalgorithmus mehrere Spalten zusammen sortierte.\n\t\t *\n\t\t * Beachte auch col.sort !== this.sortFunction\n\t\t */\n\t\tthis.sortDirections.clear();\n\t\tthis.sortDirections.set(sort, direction);\n\t\tthis.sortFunction = sort;\n\t};\n\n\tprivate changeCellSort(headerCell: KoliBriTableHeaderCell) {\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(headerCell as KoliBriTableSelectedHead);\n\t\t} else if (typeof headerCell.sort === 'function') {\n\t\t\tthis.sortFunction = headerCell.sort;\n\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\tcase 'ASC':\n\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'DESC');\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'DESC':\n\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'NOS');\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'ASC');\n\t\t\t}\n\t\t\tthis.updateSortedData(headerCell as KoliBriTableSelectedHead);\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: KoliBriTableHeaderCell[]) => {\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} else if (typeof cell.sort === 'function') {\n\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(cell.sort, sortDirection);\n\t\t\t\t\t\t\t\t\t\t\tsetTimeout(() => this.updateSortedData({ key, label: cell.label, sortDirection }));\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}\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\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\tprivate readonly beforePatchPagination: Generic.Element.NextStateHooksCallback = (nextValue, _nextState, _component, key): void => {\n\t\tif (key === '_pagination') {\n\t\t\tthis.showPagination = nextValue === true || nextValue === '' /* true */ || (typeof nextValue === 'object' && nextValue !== null);\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<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\t\twatchValidator(this, '_pagination', () => true, new Set(['boolean', 'KoliBriTablePagination']), value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchPagination,\n\t\t\t},\n\t\t});\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}\n\n\tprivate getNumberOfCols(horizontalHeaders: KoliBriTableHeaderCell[][], data: KoliBriTableDataType[]): number {\n\t\tlet max = 0;\n\t\thorizontalHeaders.forEach((row) => {\n\t\t\tlet count = 0;\n\t\t\trow.forEach((col) => (count += col.colSpan ?? 1));\n\t\t\tif (max < count) {\n\t\t\t\tmax = count;\n\t\t\t}\n\t\t});\n\t\tif (max === 0) {\n\t\t\tmax = data.length;\n\t\t}\n\t\treturn max;\n\t}\n\n\tprivate getNumberOfRows(verticalHeaders: KoliBriTableHeaderCell[][], data: KoliBriTableDataType[]): number {\n\t\tlet max = 0;\n\t\tverticalHeaders.forEach((col) => {\n\t\t\tlet count = 0;\n\t\t\tcol.forEach((row) => (count += row.rowSpan ?? 1));\n\t\t\tif (max < count) {\n\t\t\t\tmax = count;\n\t\t\t}\n\t\t});\n\t\tif (max === 0) {\n\t\t\tmax = data.length;\n\t\t} else {\n\t\t\tmax -= this.state._dataFoot.length;\n\t\t}\n\t\treturn max;\n\t}\n\n\tprivate filterHeaderKeys(headers: KoliBriTableHeaderCell[][]): KoliBriTableHeaderCell[] {\n\t\tconst primaryHeader: KoliBriTableHeaderCell[] = [];\n\t\theaders.forEach((cells) => {\n\t\t\tcells.forEach((cell) => {\n\t\t\t\tif (typeof cell.key === 'string') {\n\t\t\t\t\tprimaryHeader.push(cell);\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t\treturn primaryHeader;\n\t}\n\n\tprivate getPrimaryHeader(headers: KoliBriTableHeaders): KoliBriTableHeaderCell[] {\n\t\tlet primaryHeader: KoliBriTableHeaderCell[] = this.filterHeaderKeys(headers.horizontal ?? []);\n\t\tthis.horizontal = true;\n\t\tif (primaryHeader.length === 0) {\n\t\t\tprimaryHeader = this.filterHeaderKeys(headers.vertical ?? []);\n\t\t\tif (primaryHeader.length > 0) {\n\t\t\t\tthis.horizontal = false;\n\t\t\t}\n\t\t}\n\t\treturn primaryHeader;\n\t}\n\n\tprivate createDataField(data: KoliBriTableDataType[], headers: KoliBriTableHeaders, isFoot?: boolean): KoliBriTableCell[][] {\n\t\theaders.horizontal = Array.isArray(headers?.horizontal) ? headers.horizontal : [];\n\t\theaders.vertical = Array.isArray(headers?.vertical) ? headers.vertical : [];\n\t\tconst primaryHeader = this.getPrimaryHeader(headers);\n\t\tconst maxCols = this.getNumberOfCols(headers.horizontal, data);\n\t\tlet maxRows = this.getNumberOfRows(headers.vertical, data);\n\t\tlet startRow = 0;\n\t\tif (isFoot) {\n\t\t\tstartRow = maxRows;\n\t\t\tmaxRows += this.state._dataFoot.length;\n\t\t}\n\t\tconst dataField: KoliBriTableCell[][] = [];\n\n\t\tconst rowCount: number[] = [];\n\t\tconst rowSpans: number[][] = [];\n\t\theaders.vertical.forEach((_row, index) => {\n\t\t\trowCount[index] = 0;\n\t\t\trowSpans[index] = [];\n\t\t});\n\n\t\tfor (let i = startRow; i < maxRows; i++) {\n\t\t\tconst dataRow: KoliBriTableHeaderCellAndData[] = [];\n\t\t\theaders.vertical.forEach((headerCells, index) => {\n\t\t\t\tlet rowsTotal = 0;\n\t\t\t\trowSpans[index].forEach((value) => (rowsTotal += value));\n\t\t\t\tif (rowsTotal <= i) {\n\t\t\t\t\tconst rows = headerCells[i - rowsTotal + rowCount[index]];\n\t\t\t\t\tif (typeof rows === 'object') {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...rows,\n\t\t\t\t\t\t\tasTd: false,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: {} as KoliBriTableDataType,\n\t\t\t\t\t\t});\n\t\t\t\t\t\tlet rowSpan = 1;\n\t\t\t\t\t\tif (typeof rows.rowSpan === 'number' && rows.rowSpan > 1) {\n\t\t\t\t\t\t\trowSpan = rows.rowSpan;\n\t\t\t\t\t\t}\n\t\t\t\t\t\trowSpans[index].push(rowSpan);\n\t\t\t\t\t\tif (typeof rows.colSpan === 'number' && rows.colSpan > 1) {\n\t\t\t\t\t\t\tfor (let k = 1; k < rows.colSpan; k++) {\n\t\t\t\t\t\t\t\trowSpans[index + k].push(rowSpan);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\trowCount[index]++;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t\tfor (let j = 0; j < maxCols; j++) {\n\t\t\t\tif (this.horizontal === true) {\n\t\t\t\t\tconst row = isFoot ? this.state._dataFoot[i - startRow] : data[i];\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof primaryHeader[j] === 'object' &&\n\t\t\t\t\t\tprimaryHeader[j] !== null &&\n\t\t\t\t\t\ttypeof primaryHeader[j].key === 'string' &&\n\t\t\t\t\t\ttypeof row === 'object' &&\n\t\t\t\t\t\trow !== null\n\t\t\t\t\t) {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...primaryHeader[j],\n\t\t\t\t\t\t\tcolSpan: undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: row,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tlabel: row[primaryHeader[j].key as unknown as string] as string,\n\t\t\t\t\t\t\trowSpan: undefined,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof primaryHeader[i] === 'object' &&\n\t\t\t\t\t\tprimaryHeader[i] !== null &&\n\t\t\t\t\t\ttypeof primaryHeader[i].key === 'string' &&\n\t\t\t\t\t\ttypeof data[j] === 'object' &&\n\t\t\t\t\t\tdata[j] !== null\n\t\t\t\t\t) {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...primaryHeader[i],\n\t\t\t\t\t\t\tcolSpan: undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: data[j],\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tlabel: data[j][primaryHeader[i].key as unknown as number] as string,\n\t\t\t\t\t\t\trowSpan: undefined,\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\tdataField.push(dataRow);\n\t\t}\n\t\tif (data.length === 0) {\n\t\t\tlet colspan = 0;\n\t\t\tlet rowspan = 0;\n\t\t\tif (Array.isArray(headers.horizontal) && headers.horizontal.length > 0) {\n\t\t\t\theaders.horizontal[0].forEach((col) => {\n\t\t\t\t\tcolspan += col.colSpan || 1;\n\t\t\t\t});\n\t\t\t}\n\t\t\tif (Array.isArray(headers.vertical) && headers.vertical.length > 0) {\n\t\t\t\tcolspan -= headers.vertical.length;\n\t\t\t\theaders.vertical[0].forEach((row) => {\n\t\t\t\t\trowspan += row.rowSpan || 1;\n\t\t\t\t});\n\t\t\t}\n\t\t\tconst emptyCell = {\n\t\t\t\tcolSpan: colspan,\n\t\t\t\tlabel: translate('kol-no-entries'),\n\t\t\t\trender: undefined,\n\t\t\t\trowSpan: Math.max(rowspan, 1),\n\t\t\t};\n\t\t\tif (dataField.length === 0) {\n\t\t\t\tdataField.push([emptyCell]);\n\t\t\t} else {\n\t\t\t\tdataField[0].push(emptyCell);\n\t\t\t}\n\t\t}\n\t\treturn dataField;\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 cellRender(col: KoliBriTableHeaderCellAndData & { render: KoliBriTableRender }, el?: HTMLElement): void {\n\t\tif (el /* SSR instanceof HTMLElement */) {\n\t\t\tclearTimeout(CELL_REFS.get(el));\n\t\t\tCELL_REFS.set(\n\t\t\t\tel,\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tclearTimeout(CELL_REFS.get(el));\n\t\t\t\t\tconst html = col.render(\n\t\t\t\t\t\tel,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tasTd: col.asTd,\n\t\t\t\t\t\t\tlabel: col.label,\n\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t\t} as KoliBriTableHeaderCell,\n\t\t\t\t\t\tcol.data,\n\t\t\t\t\t\tthis.state._data\n\t\t\t\t\t);\n\t\t\t\t\tif (typeof html === 'string') {\n\t\t\t\t\t\tel.textContent = html;\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t}\n\n\t/**\n\t *\n\t * @param cell only used for old single sort. Can be removed when sort is removed.\n\t */\n\tprivate updateSortedData = (cell: KoliBriTableSelectedHead = this.sortedColumnHead) => {\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\n\t\t\tif (this.sortData.length === 1) {\n\t\t\t\tthis.ariaLive = translate(`kol-sort-${this.sortData[0].direction === 'ASC' ? 'ascending' : 'descending'}`, {\n\t\t\t\t\tplaceholders: { column: this.sortData[0].label, multi: '' },\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tlet sortText = '';\n\t\t\t\tfor (let index = 1; index < this.sortData.length - 1; index++) {\n\t\t\t\t\tconst data = this.sortData[index];\n\t\t\t\t\tsortText += translate(`kol-sort-then-${data.direction === 'ASC' ? 'ascending' : 'descending'}`, { placeholders: { column: data.label } });\n\t\t\t\t}\n\t\t\t\tsortText += translate(`kol-sort-then-last-${this.sortData[this.sortData.length - 1].direction === 'ASC' ? 'ascending' : 'descending'}`, {\n\t\t\t\t\tplaceholders: { column: this.sortData[this.sortData.length - 1].label },\n\t\t\t\t});\n\t\t\t\tthis.ariaLive = translate(`kol-sort-${this.sortData[0].direction === 'ASC' ? 'ascending' : 'descending'}`, {\n\t\t\t\t\tplaceholders: { column: this.sortData[0].label, multi: sortText },\n\t\t\t\t});\n\t\t\t}\n\t\t} else if (typeof this.sortFunction === 'function') {\n\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\tcase 'ASC':\n\t\t\t\t\tsortedData = this.sortFunction([...this.state._data]);\n\t\t\t\t\tthis.ariaLive = translate('kol-sort-ascending', { placeholders: { column: cell.label } });\n\t\t\t\t\tthis.sortedColumnHead = { label: cell.label, key: cell.key, sortDirection: 'ASC' };\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'DESC':\n\t\t\t\t\tsortedData = this.sortFunction([...this.state._data]).reverse();\n\t\t\t\t\tthis.ariaLive = translate('kol-sort-descending', { placeholders: { column: cell.label } });\n\t\t\t\t\tthis.sortedColumnHead = { label: cell.label, key: cell.key, sortDirection: 'DESC' };\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'NOS':\n\t\t\t\tdefault:\n\t\t\t\t\tsortedData = [...this.state._data];\n\t\t\t\t\tthis.sortedColumnHead = { label: '', key: '', sortDirection: 'NOS' };\n\t\t\t\t\tthis.ariaLive = translate('kol-sort-none', { placeholders: { column: cell.label } });\n\t\t\t}\n\t\t} else {\n\t\t\tthis.ariaLive = translate('kol-table-sort-none');\n\t\t}\n\t\tsetState(this, '_sortedData', sortedData);\n\t};\n\n\tprivate readonly renderTableRow = (row: KoliBriTableCell[], rowIndex: number): JSX.Element => {\n\t\treturn <tr key={`tbody-${rowIndex}`}>{row.map((col, colIndex) => this.renderTableCell(col, rowIndex, colIndex))}</tr>;\n\t};\n\tprivate readonly renderTableCell = (cell: KoliBriTableCell, rowIndex: number, colIndex: number): JSX.Element => {\n\t\tif (cell.asTd === false) {\n\t\t\tconst headerCell: KoliBriTableHeaderCell = cell;\n\t\t\tlet sortDirection = undefined;\n\t\t\tlet shortSortDirection: KoliBriSortDirection = 'NOS';\n\t\t\tlet sortButtonIcon = 'codicon codicon-fold';\n\t\t\tif (!this.disableSort) {\n\t\t\t\tif (headerCell.key) {\n\t\t\t\t\tconst data = this.sortData.find((value) => value.key === headerCell.key);\n\t\t\t\t\tif (data) {\n\t\t\t\t\t\tshortSortDirection = data.direction;\n\t\t\t\t\t\tswitch (data.direction) {\n\t\t\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-up';\n\t\t\t\t\t\t\t\tsortDirection = 'ascending';\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-down';\n\t\t\t\t\t\t\t\tsortDirection = 'descending';\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (headerCell.key === this.sortedColumnHead.key) {\n\t\t\t\t\tshortSortDirection = this.sortedColumnHead.sortDirection;\n\t\t\t\t\tswitch (this.sortedColumnHead.sortDirection) {\n\t\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-up';\n\t\t\t\t\t\t\tsortDirection = 'ascending';\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-down';\n\t\t\t\t\t\t\tsortDirection = 'descending';\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<th // role=\"rowheader\"\n\t\t\t\t\tkey={`tbody-${rowIndex}-${colIndex}-${headerCell.label}`}\n\t\t\t\t\tscope={typeof headerCell.rowSpan === 'number' && headerCell.rowSpan > 1 ? 'rowgroup' : 'row'}\n\t\t\t\t\tcolSpan={headerCell.colSpan}\n\t\t\t\t\trowSpan={headerCell.rowSpan}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\ttextAlign: headerCell.textAlign,\n\t\t\t\t\t\twidth: headerCell.width,\n\t\t\t\t\t}}\n\t\t\t\t\taria-sort={sortDirection}\n\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\t\t\tdata-sort={`sort-${shortSortDirection}`}\n\t\t\t\t>\n\t\t\t\t\t<div class=\"w-full flex gap-1 items-center\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t'w-full': true,\n\t\t\t\t\t\t\t\t[headerCell.textAlign as string]: typeof headerCell.textAlign === 'string' && headerCell.textAlign.length > 0,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tstyle={{ textAlign: headerCell.textAlign }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{headerCell.label}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{!this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function') && (\n\t\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t_icons={sortButtonIcon}\n\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t_label={translate('kol-change-order', { placeholders: { colLabel: headerCell.label } })}\n\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\tonClick: () => this.changeCellSort(headerCell),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</th>\n\t\t\t);\n\t\t} else {\n\t\t\treturn (\n\t\t\t\t<td // role=\"gridcell\"\n\t\t\t\t\tkey={`tbody-${rowIndex}-${colIndex}-${cell.label}`}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[cell.textAlign as string]: typeof cell.textAlign === 'string' && cell.textAlign.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\tcolSpan={cell.colSpan}\n\t\t\t\t\trowSpan={cell.rowSpan}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\ttextAlign: cell.textAlign,\n\t\t\t\t\t\twidth: cell.width,\n\t\t\t\t\t}}\n\t\t\t\t\tref={\n\t\t\t\t\t\ttypeof cell.render === 'function'\n\t\t\t\t\t\t\t? (el) => {\n\t\t\t\t\t\t\t\t\tthis.cellRender(cell as KoliBriTableHeaderCellAndData & { render: KoliBriTableRender }, el);\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{typeof cell.render !== 'function' ? cell.label : ''}\n\t\t\t\t</td>\n\t\t\t);\n\t\t}\n\t};\n\n\tprivate readonly renderFoot = (): JSX.Element => {\n\t\tconst rows: KoliBriTableCell[][] = this.createDataField(this.state._dataFoot, this.state._headers, true);\n\t\treturn <tfoot>{rows.map(this.renderTableRow)}</tfoot>;\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 dataField = this.createDataField(displayedData, this.state._headers);\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div style={{ height: '0', width: '0', overflow: 'hidden' }} aria-live=\"assertive\">\n\t\t\t\t\t{this.ariaLive}\n\t\t\t\t</div>\n\t\t\t\t{this.pageEndSlice > 0 && this.showPagination && (\n\t\t\t\t\t<div class=\"pagination\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\tEinträge {this.pageEndSlice > 0 ? this.pageStartSlice + 1 : 0} bis {this.pageEndSlice} von{' '}\n\t\t\t\t\t\t\t{this.state._pagination._max || (Array.isArray(this.state._data) ? this.state._data.length : 0)} angezeigt\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<kol-pagination\n\t\t\t\t\t\t\t\t_boundaryCount={this.state._pagination._boundaryCount}\n\t\t\t\t\t\t\t\t_customClass={this.state._pagination._customClass}\n\t\t\t\t\t\t\t\t_on={this.handlePagination}\n\t\t\t\t\t\t\t\t_page={this.state._pagination._page}\n\t\t\t\t\t\t\t\t_pageSize={this.state._pagination._pageSize}\n\t\t\t\t\t\t\t\t_pageSizeOptions={this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS}\n\t\t\t\t\t\t\t\t_siblingCount={this.state._pagination._siblingCount}\n\t\t\t\t\t\t\t\t_tooltipAlign=\"bottom\"\n\t\t\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\t\t_label={translate('kol-table-pagination-label', { placeholders: { label: this.state._label } })}\n\t\t\t\t\t\t\t></kol-pagination>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div class=\"table\" tabindex=\"0\">\n\t\t\t\t\t<table\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tminWidth: this.state._minWidth,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<caption>{this.state._label}</caption>\n\t\t\t\t\t\t{Array.isArray(this.state._headers.horizontal) && (\n\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t{this.state._headers.horizontal.map((cols, rowIndex) => (\n\t\t\t\t\t\t\t\t\t<tr key={`thead-${rowIndex}`}>\n\t\t\t\t\t\t\t\t\t\t{cols.map((col, colIndex) => {\n\t\t\t\t\t\t\t\t\t\t\tif (col.asTd === true) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td // role=\"gridcell\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={`thead-${rowIndex}-${colIndex}-${col.label}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[col.textAlign as string]: typeof col.textAlign === 'string' && col.textAlign.length > 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolSpan={col.colSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trowSpan={col.rowSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tref={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttypeof col.render === 'function'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? (el) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.cellRender(col as KoliBriTableHeaderCellAndData & { render: KoliBriTableRender }, el);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{typeof col.render !== 'function' ? col.label : ''}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tconst headerCell: KoliBriTableHeaderCell = col;\n\t\t\t\t\t\t\t\t\t\t\t\tlet sortDirection = undefined;\n\t\t\t\t\t\t\t\t\t\t\t\tlet shortSortDirection: KoliBriSortDirection = 'NOS';\n\t\t\t\t\t\t\t\t\t\t\t\tlet sortButtonIcon = 'codicon codicon-fold';\n\t\t\t\t\t\t\t\t\t\t\t\tif (headerCell.key) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst data = this.sortData.find((value) => value.key === headerCell.key);\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (data) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tshortSortDirection = data.direction;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tswitch (data.direction) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-up';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortDirection = 'ascending';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-down';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortDirection = 'descending';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tif (headerCell.key === this.sortedColumnHead.key) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tshortSortDirection = this.sortedColumnHead.sortDirection;\n\t\t\t\t\t\t\t\t\t\t\t\t\tswitch (this.sortedColumnHead.sortDirection) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-up';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortDirection = 'ascending';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-down';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortDirection = 'descending';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th // role=\"columnheader\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={`thead-${rowIndex}-${colIndex}-${headerCell.label}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tscope={typeof headerCell.colSpan === 'number' && headerCell.colSpan > 1 ? 'colgroup' : 'col'}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolSpan={headerCell.colSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trowSpan={headerCell.rowSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-sort={sortDirection}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-sort={`sort-${shortSortDirection}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"w-full flex gap-1 items-center\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'w-full': true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[col.textAlign as string]: typeof col.textAlign === 'string' && col.textAlign.length > 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{col.label}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{!this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function') && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_icons={sortButtonIcon}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_label={translate('kol-change-order', { placeholders: { colLabel: col.label } })}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick: () => this.changeCellSort(headerCell),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<tbody>{dataField.map(this.renderTableRow)}</tbody>\n\t\t\t\t\t\t{this.state._dataFoot.length > 0 ? this.renderFoot() : ''}\n\t\t\t\t\t</table>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as i,g as e}from"./index-e9d20d00.js";import{a as o}from"./i18n-0541aaa5.js";import{a as s}from"./alignment-2edac6cf.js";import{v as a}from"./label-86b7dd9a.js";import{d as l,f as r,c as d}from"./a11y.tipps-69a12284.js";import{L as h}from"./dev.utils-04fa5759.js";import{s as u,e as b,c,k as p}from"./prop.validators-ddc1812f.js";import"./index-8700da1a.js";import"./reuse-d79ab469.js";const f="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\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\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tkol-button-group-wc {\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t}\n\n\tkol-button-group-wc button {\n\t\tborder-bottom-color: transparent;\n\t\tborder-bottom-style: solid;\n\t\tdisplay: block;\n\t}\n\n\tdiv.grid,\n\tdiv[role='tabpanel'] {\n\t\theight: 100%;\n\t}\n\n\t:host > .tabs-align-right {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\n\t:host > .tabs-align-right kol-button-group-wc {\n\t\tdisplay: grid;\n\t\torder: 2;\n\t}\n\n\t:host > .tabs-align-left {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: auto 1fr;\n\t}\n\n\t:host > .tabs-align-left kol-button-group-wc {\n\t\tdisplay: grid;\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-bottom {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: 1fr auto;\n\t}\n\n\t:host > .tabs-align-bottom kol-button-group-wc {\n\t\torder: 2;\n\t}\n\n\t:host > .tabs-align-bottom kol-button-group-wc > div {\n\t\tdisplay: flex;\n\t}\n\n\t:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n\t\tmargin: 0 1em 0 0;\n\t}\n\n\t:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n\t\tmargin: 0 1em;\n\t}\n\n\t:host > .tabs-align-top {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: auto 1fr;\n\t}\n\n\t:host > .tabs-align-top kol-button-group-wc {\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-top kol-button-group-wc > div {\n\t\tdisplay: flex;\n\t}\n\n\t:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n\t\tmargin: 0 1em 0 0;\n\t}\n\n\t:host > .tabs-align-top > kol-button-group-wc > div > div {\n\t\tmargin: 0 1em;\n\t}\n\n\t:host > div {\n\t\tdisplay: grid;\n\t}\n\n\t:host > .tabs-align-left kol-button-group-wc,\n\t:host > .tabs-align-top kol-button-group-wc {\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-bottom kol-button-group-wc,\n\t:host > .tabs-align-right kol-button-group-wc {\n\t\torder: 1;\n\t}\n\n\t:host > div.tabs-align-left kol-button-group-wc > div,\n\t:host > div.tabs-align-left kol-button-group-wc > div > div,\n\t:host > div.tabs-align-right kol-button-group-wc > div,\n\t:host > div.tabs-align-right kol-button-group-wc > div > div {\n\t\tdisplay: grid;\n\t}\n\n\t:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n\t:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n\t\twidth: 100%;\n\t}\n\n\t:host > div.tabs-align-bottom kol-button-group-wc div,\n\t:host > div.tabs-align-top kol-button-group-wc div {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n}\n",g=class{constructor(n){t(this,n),this.onCreateLabel=`${o("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,n,e)=>{if(e>0){if(n+e<t.length)return t[n+e]._disabled?this.nextPossibleTabIndex(t,n,e+1):n+e}else if(e<0&&n+e>=0)return t[n+e]._disabled?this.nextPossibleTabIndex(t,n,e-1):n+e;return n},this.onKeyDown=t=>{const n=setTimeout((()=>{clearTimeout(n);let e=null;switch(t.key){case"ArrowRight":e=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,1);break;case"ArrowLeft":e=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,-1)}null!==e&&this.onSelect(t,e,!0)}),250)},this.onClickSelect=(t,n)=>{this.onSelect(t,n,!0)},this.onMouseDown=t=>{t.preventDefault(),t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,n,e=!0,i)=>{if(t>n.length-1&&(t=n.length-1),t<0&&(t=0),Array.isArray(n)&&n[t]&&n[t]._disabled){if(!0===e){if(t<n.length-1)return this.selectNextNotDisabledTab(t+1,n,!0,i||t);t=i||t,e=!1}if(!1===e){if(t>0)return this.selectNextNotDisabledTab(t-1,n,!1,i||t);l("[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.")}}return t},this.syncSelectedAndTabs=(t,n,e,i)=>{let a,o;a="_selected"===i?t:this.state._selected,o="_tabs"===i?t:this.state._tabs,o.length>0&&n.set("_selected",this.selectNextNotDisabledTab(a,o))},this.handleTabPanels=()=>{var t,n,e;if(this.tabPanelHost instanceof HTMLDivElement)for(let i=this.tabPanelHost.children.length;i<this.state._tabs.length;i++){const a=document.createElement("div");a.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${i}`),a.setAttribute("id",`tabpanel-${i}`),a.setAttribute("role","tabpanel"),a.setAttribute("hidden","");const o=document.createElement("slot");o.setAttribute("name",`tabpanel-slot-${i}`),a.appendChild(o),this.tabPanelHost.appendChild(a),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(n=this.host)||void 0===n?void 0:n.children[i])&&(null===(e=this.host)||void 0===e||e.children[i].setAttribute("slot",`tabpanel-slot-${i}`))}},this.onCreate=t=>{var n,e;t.preventDefault(),t.stopPropagation(),"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onCreate)&&(null===(e=this.state._on)||void 0===e||e.onCreate(t))},this._align="top",this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this.state={_align:"top",_label:"…",_selected:0,_tabs:[]}}renderButtonGroup(){return n("kol-button-group-wc",{class:"tabs-button-group",role:"tablist","aria-label":this.state._label,onKeyDown:this.onKeyDown},this.state._tabs.map(((t,e)=>n("kol-button-wc",{_disabled:t._disabled,_icons:t._icons,_hideLabel:t._hideLabel,_label:t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_variant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${e}`,_role:"tab",_value:e}))),this.showCreateTab&&n("kol-button-wc",{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return n(i,null,n("div",{ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._align}`]:!0}},this.renderButtonGroup(),n("div",{class:"tabs-content",ref:this.catchTabPanelHost})))}validateAlign(t){s(this,t)}validateLabel(t){a(this,t)}validateOn(t){if("object"==typeof t&&null!==t){r("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const n={};"function"!=typeof t.onCreate&&"object"!=typeof t.onCreate||("object"==typeof t.onCreate?("string"==typeof t.onCreate.label&&t.onCreate.label.length>0?this.onCreateLabel=t.onCreate.label:h.debug("[KolTabs] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt."),"function"==typeof t.onCreate.callback?n.onCreate=t.onCreate.callback:h.debug("[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.")):n.onCreate=t.onCreate,this.showCreateTab="function"==typeof n.onCreate),"function"==typeof t.onSelect&&(n.onSelect=t.onSelect),u(this,"_on",n)}}validateSelected(t){b(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){c(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),d("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)}componentDidRender(){if(this.handleTabPanels(),this.tabPanelHost instanceof HTMLDivElement)for(let t=0;t<this.tabPanelHost.children.length;t++)t!==this.state._selected?this.tabPanelHost.children[t].setAttribute("hidden",""):this.tabPanelHost.children[t].removeAttribute("hidden")}onSelect(t,n,e=!1){var i,a;this._selected=n,"function"==typeof(null===(i=this._on)||void 0===i?void 0:i.onSelect)&&(null===(a=this._on)||void 0===a||a.onSelect(t,n)),!0===e&&(this.selectedTimeout=setTimeout((()=>{if(clearTimeout(this.selectedTimeout),this.tabPanelsElement){const t=p(`button#${this.state._label.replace(/\s/g,"-")}-tab-${n}`,this.tabPanelsElement);null==t||t.focus()}}),250))}get host(){return e(this)}static get watchers(){return{_align:["validateAlign"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};g.style={default:f};export{g as kol_tabs};
+import{r as t,h as n,H as i,g as e}from"./index-e9d20d00.js";import{a as o}from"./i18n-4c7dd514.js";import{a as s}from"./alignment-d30f46a0.js";import{v as a}from"./label-9700d24c.js";import{d as l,f as r,c as d}from"./a11y.tipps-76f7d989.js";import{L as h}from"./dev.utils-b86b7cfe.js";import{s as u,e as c,c as b,k as p}from"./prop.validators-17590a9e.js";import"./index-5c4aa7d8.js";import"./reuse-d79ab469.js";const f="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\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\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tkol-button-group-wc {\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t}\n\n\tkol-button-group-wc button {\n\t\tborder-bottom-color: transparent;\n\t\tborder-bottom-style: solid;\n\t\tdisplay: block;\n\t}\n\n\tdiv.grid,\n\tdiv[role='tabpanel'] {\n\t\theight: 100%;\n\t}\n\n\t:host > .tabs-align-right {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\n\t:host > .tabs-align-right kol-button-group-wc {\n\t\tdisplay: grid;\n\t\torder: 2;\n\t}\n\n\t:host > .tabs-align-left {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: auto 1fr;\n\t}\n\n\t:host > .tabs-align-left kol-button-group-wc {\n\t\tdisplay: grid;\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-bottom {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: 1fr auto;\n\t}\n\n\t:host > .tabs-align-bottom kol-button-group-wc {\n\t\torder: 2;\n\t}\n\n\t:host > .tabs-align-bottom kol-button-group-wc > div {\n\t\tdisplay: flex;\n\t}\n\n\t:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n\t\tmargin: 0 1em 0 0;\n\t}\n\n\t:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n\t\tmargin: 0 1em;\n\t}\n\n\t:host > .tabs-align-top {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: auto 1fr;\n\t}\n\n\t:host > .tabs-align-top kol-button-group-wc {\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-top kol-button-group-wc > div {\n\t\tdisplay: flex;\n\t}\n\n\t:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n\t\tmargin: 0 1em 0 0;\n\t}\n\n\t:host > .tabs-align-top > kol-button-group-wc > div > div {\n\t\tmargin: 0 1em;\n\t}\n\n\t:host > div {\n\t\tdisplay: grid;\n\t}\n\n\t:host > .tabs-align-left kol-button-group-wc,\n\t:host > .tabs-align-top kol-button-group-wc {\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-bottom kol-button-group-wc,\n\t:host > .tabs-align-right kol-button-group-wc {\n\t\torder: 1;\n\t}\n\n\t:host > div.tabs-align-left kol-button-group-wc > div,\n\t:host > div.tabs-align-left kol-button-group-wc > div > div,\n\t:host > div.tabs-align-right kol-button-group-wc > div,\n\t:host > div.tabs-align-right kol-button-group-wc > div > div {\n\t\tdisplay: grid;\n\t}\n\n\t:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n\t:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n\t\twidth: 100%;\n\t}\n\n\t:host > div.tabs-align-bottom kol-button-group-wc div,\n\t:host > div.tabs-align-top kol-button-group-wc div {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n}\n",g=class{constructor(n){t(this,n),this.onCreateLabel=`${o("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,n,e)=>{if(e>0){if(n+e<t.length)return t[n+e]._disabled?this.nextPossibleTabIndex(t,n,e+1):n+e}else if(e<0&&n+e>=0)return t[n+e]._disabled?this.nextPossibleTabIndex(t,n,e-1):n+e;return n},this.onKeyDown=t=>{const n=setTimeout((()=>{clearTimeout(n);let e=null;switch(t.key){case"ArrowRight":e=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,1);break;case"ArrowLeft":e=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,-1)}null!==e&&this.onSelect(t,e,!0)}),250)},this.onClickSelect=(t,n)=>{this.onSelect(t,n,!0)},this.onMouseDown=t=>{t.preventDefault(),t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,n,e=!0,i)=>{if(t>n.length-1&&(t=n.length-1),t<0&&(t=0),Array.isArray(n)&&n[t]&&n[t]._disabled){if(!0===e){if(t<n.length-1)return this.selectNextNotDisabledTab(t+1,n,!0,i||t);t=i||t,e=!1}if(!1===e){if(t>0)return this.selectNextNotDisabledTab(t-1,n,!1,i||t);l("[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.")}}return t},this.syncSelectedAndTabs=(t,n,e,i)=>{let o,a;o="_selected"===i?t:this.state._selected,a="_tabs"===i?t:this.state._tabs,a.length>0&&n.set("_selected",this.selectNextNotDisabledTab(o,a))},this.handleTabPanels=()=>{var t,n,e;if(this.tabPanelHost instanceof HTMLDivElement)for(let i=this.tabPanelHost.children.length;i<this.state._tabs.length;i++){const o=document.createElement("div");o.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${i}`),o.setAttribute("id",`tabpanel-${i}`),o.setAttribute("role","tabpanel"),o.setAttribute("hidden","");const a=document.createElement("slot");a.setAttribute("name",`tabpanel-slot-${i}`),o.appendChild(a),this.tabPanelHost.appendChild(o),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(n=this.host)||void 0===n?void 0:n.children[i])&&(null===(e=this.host)||void 0===e||e.children[i].setAttribute("slot",`tabpanel-slot-${i}`))}},this.onCreate=t=>{var n,e;t.preventDefault(),t.stopPropagation(),"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onCreate)&&(null===(e=this.state._on)||void 0===e||e.onCreate(t))},this._align="top",this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this.state={_align:"top",_label:"…",_selected:0,_tabs:[]}}renderButtonGroup(){return n("kol-button-group-wc",{class:"tabs-button-group",role:"tablist","aria-label":this.state._label,onKeyDown:this.onKeyDown},this.state._tabs.map(((t,e)=>n("kol-button-wc",{_disabled:t._disabled,_icons:t._icons,_hideLabel:t._hideLabel,_label:t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_variant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${e}`,_role:"tab",_value:e}))),this.showCreateTab&&n("kol-button-wc",{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return n(i,null,n("div",{ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._align}`]:!0}},this.renderButtonGroup(),n("div",{class:"tabs-content",ref:this.catchTabPanelHost})))}validateAlign(t){s(this,t)}validateLabel(t){a(this,t)}validateOn(t){if("object"==typeof t&&null!==t){r("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const n={};"function"!=typeof t.onCreate&&"object"!=typeof t.onCreate||("object"==typeof t.onCreate?("string"==typeof t.onCreate.label&&t.onCreate.label.length>0?this.onCreateLabel=t.onCreate.label:h.debug("[KolTabs] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt."),"function"==typeof t.onCreate.callback?n.onCreate=t.onCreate.callback:h.debug("[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.")):n.onCreate=t.onCreate,this.showCreateTab="function"==typeof n.onCreate),"function"==typeof t.onSelect&&(n.onSelect=t.onSelect),u(this,"_on",n)}}validateSelected(t){c(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){b(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),d("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)}componentDidRender(){if(this.handleTabPanels(),this.tabPanelHost instanceof HTMLDivElement)for(let t=0;t<this.tabPanelHost.children.length;t++)t!==this.state._selected?this.tabPanelHost.children[t].setAttribute("hidden",""):this.tabPanelHost.children[t].removeAttribute("hidden")}onSelect(t,n,e=!1){var i,o;this._selected=n,"function"==typeof(null===(i=this._on)||void 0===i?void 0:i.onSelect)&&(null===(o=this._on)||void 0===o||o.onSelect(t,n)),!0===e&&(this.selectedTimeout=setTimeout((()=>{if(clearTimeout(this.selectedTimeout),this.tabPanelsElement){const t=p(`button#${this.state._label.replace(/\s/g,"-")}-tab-${n}`,this.tabPanelsElement);null==t||t.focus()}}),250))}get host(){return e(this)}static get watchers(){return{_align:["validateAlign"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};g.style={default:f};export{g as kol_tabs};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolTabs","this","onCreateLabel","translate","showCreateTab","nextPossibleTabIndex","tabs","offset","step","length","_disabled","onKeyDown","event","timeout","setTimeout","clearTimeout","selectedIndex","key","state","_tabs","_selected","onSelect","onClickSelect","index","onMouseDown","preventDefault","stopPropagation","callbacks","onClick","catchTabPanelHost","el","tabPanelHost","selectNextNotDisabledTab","selected","upOrDown","initialSelected","Array","isArray","devHint","syncSelectedAndTabs","nextValue","nextState","_component","set","handleTabPanels","HTMLDivElement","i","children","div","document","createElement","setAttribute","_label","replace","slot","appendChild","_a","host","HTMLCollection","_b","_c","onCreate","_on","_align","renderButtonGroup","h","class","role","map","button","_icons","_hideLabel","_tabIndex","_tooltipAlign","_variant","undefined","_customClass","_ariaControls","_ariaSelected","_id","_role","_value","render","Host","ref","tabPanelsElement","validateAlign","value","validateLabel","validateOn","featureHint","label","Log","debug","callback","setState","validateSelected","watchNumber","hooks","beforePatch","validateTabs","watchJsonArrayString","item","uiUxHintMillerscheZahl","componentWillLoad","componentDidRender","removeAttribute","focus","selectedTimeout","koliBriQuerySelector"],"sources":["src/components/tabs/style.css?tag=kol-tabs&mode=default&encapsulation=shadow","src/components/tabs/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n@layer kol-component {\n\tkol-button-group-wc {\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t}\n\n\tkol-button-group-wc button {\n\t\tborder-bottom-color: transparent;\n\t\tborder-bottom-style: solid;\n\t\tdisplay: block;\n\t}\n\n\tdiv.grid,\n\tdiv[role='tabpanel'] {\n\t\theight: 100%;\n\t}\n\n\t:host > .tabs-align-right {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\n\t:host > .tabs-align-right kol-button-group-wc {\n\t\tdisplay: grid;\n\t\torder: 2;\n\t}\n\n\t:host > .tabs-align-left {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: auto 1fr;\n\t}\n\n\t:host > .tabs-align-left kol-button-group-wc {\n\t\tdisplay: grid;\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-bottom {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: 1fr auto;\n\t}\n\n\t:host > .tabs-align-bottom kol-button-group-wc {\n\t\torder: 2;\n\t}\n\n\t:host > .tabs-align-bottom kol-button-group-wc > div {\n\t\tdisplay: flex;\n\t}\n\n\t:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n\t\tmargin: 0 1em 0 0;\n\t}\n\n\t:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n\t\tmargin: 0 1em;\n\t}\n\n\t:host > .tabs-align-top {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: auto 1fr;\n\t}\n\n\t:host > .tabs-align-top kol-button-group-wc {\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-top kol-button-group-wc > div {\n\t\tdisplay: flex;\n\t}\n\n\t:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n\t\tmargin: 0 1em 0 0;\n\t}\n\n\t:host > .tabs-align-top > kol-button-group-wc > div > div {\n\t\tmargin: 0 1em;\n\t}\n\n\t:host > div {\n\t\tdisplay: grid;\n\t}\n\n\t:host > .tabs-align-left kol-button-group-wc,\n\t:host > .tabs-align-top kol-button-group-wc {\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-bottom kol-button-group-wc,\n\t:host > .tabs-align-right kol-button-group-wc {\n\t\torder: 1;\n\t}\n\n\t:host > div.tabs-align-left kol-button-group-wc > div,\n\t:host > div.tabs-align-left kol-button-group-wc > div > div,\n\t:host > div.tabs-align-right kol-button-group-wc > div,\n\t:host > div.tabs-align-right kol-button-group-wc > div > div {\n\t\tdisplay: grid;\n\t}\n\n\t:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n\t:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n\t\twidth: 100%;\n\t}\n\n\t:host > div.tabs-align-bottom kol-button-group-wc div,\n\t:host > div.tabs-align-top kol-button-group-wc div {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n}\n","import { Generic } from '@a11y-ui/core';\nimport { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { Stringified } from '../../types/common';\nimport { AlignPropType, validateAlign } from '../../types/props/align';\nimport { ButtonCallbacksPropType } from '../../types/props/button-callbacks';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { StencilUnknown } from '../../types/unknown';\nimport { devHint, featureHint, uiUxHintMillerscheZahl } from '../../utils/a11y.tipps';\nimport { Log } from '../../utils/dev.utils';\nimport { koliBriQuerySelector, setState, watchJsonArrayString, watchNumber } from '../../utils/prop.validators';\nimport { API, KoliBriTabsCallbacks, States, TabButtonProps } from './types';\n\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements API {\n\t@Element() private readonly host?: HTMLKolTabsElement;\n\tprivate tabPanelsElement?: HTMLElement;\n\tprivate onCreateLabel = `${translate('kol-new')} …`;\n\tprivate showCreateTab = false;\n\tprivate selectedTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate nextPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step: number): number => {\n\t\tif (step > 0) {\n\t\t\tif (offset + step < tabs.length) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t} else if (step < 0) {\n\t\t\tif (offset + step >= 0) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step - 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t}\n\t\treturn offset;\n\t};\n\n\tprivate onKeyDown = (event: KeyboardEvent) => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tlet selectedIndex: number | null = null;\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, 1);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, -1);\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t\tif (selectedIndex !== null) {\n\t\t\t\tthis.onSelect(event, selectedIndex, true);\n\t\t\t}\n\t\t}, 250);\n\t};\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.onSelect(event, index, true);\n\t};\n\n\t// private readonly onClickClose = (event: Event, button: TabButtonProps, index: number) => {\n\t// \tevent.preventDefault();\n\t// \tevent.stopPropagation();\n\t// \tthis.onClose(button, event, index);\n\t// };\n\n\tprivate readonly onMouseDown = (event: Event): void => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t};\n\n\tprivate readonly callbacks: ButtonCallbacksPropType<number> = {\n\t\tonClick: this.onClickSelect,\n\t\tonMouseDown: this.onMouseDown,\n\t};\n\n\tprivate renderButtonGroup() {\n\t\treturn (\n\t\t\t<kol-button-group-wc class=\"tabs-button-group\" role=\"tablist\" aria-label={this.state._label} onKeyDown={this.onKeyDown}>\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t_disabled={button._disabled}\n\t\t\t\t\t\t_icons={button._icons}\n\t\t\t\t\t\t_hideLabel={button._hideLabel}\n\t\t\t\t\t\t_label={button._label} // TODO: ariaLabel-Konzept prüfen\n\t\t\t\t\t\t_on={this.callbacks as ButtonCallbacksPropType<StencilUnknown>}\n\t\t\t\t\t\t_tabIndex={this.state._selected === index ? 0 : -1}\n\t\t\t\t\t\t_tooltipAlign={button._tooltipAlign}\n\t\t\t\t\t\t_variant={this.state._selected === index ? 'custom' : undefined}\n\t\t\t\t\t\t_customClass={this.state._selected === index ? 'selected' : undefined}\n\t\t\t\t\t\t_ariaControls={`tabpanel-${index}`}\n\t\t\t\t\t\t_ariaSelected={this.state._selected === index}\n\t\t\t\t\t\t_id={`${this.state._label.replace(/\\s/g, '-')}-tab-${index}`}\n\t\t\t\t\t\t_role=\"tab\"\n\t\t\t\t\t\t_value={index}\n\t\t\t\t\t></kol-button-wc>\n\t\t\t\t))}\n\t\t\t\t{this.showCreateTab && (\n\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\tclass=\"create-button\"\n\t\t\t\t\t\t_label={this.onCreateLabel}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: this.onCreate,\n\t\t\t\t\t\t}}\n\t\t\t\t\t></kol-button-wc>\n\t\t\t\t)}\n\t\t\t</kol-button-group-wc>\n\t\t);\n\t}\n\n\tprivate tabPanelHost?: HTMLDivElement;\n\n\tprivate readonly catchTabPanelHost = (el?: HTMLDivElement) => {\n\t\tthis.tabPanelHost = el;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.tabPanelsElement = el as HTMLElement;\n\t\t\t\t\t}}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[`tabs-align-${this.state._align}`]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.renderButtonGroup()}\n\t\t\t\t\t<div class=\"tabs-content\" ref={this.catchTabPanelHost}>\n\t\t\t\t\t\t{/* <slot /> */}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the position of the tab captions.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.\n\t */\n\t@Prop() public _on?: KoliBriTabsCallbacks;\n\n\t/**\n\t * Defines which tab is active.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _selected?: number = 0;\n\n\t/**\n\t * Defines the tab captions.\n\t */\n\t@Prop() public _tabs!: Stringified<TabButtonProps[]>;\n\n\t@State() public state: States = {\n\t\t_align: 'top',\n\t\t_label: '…', // ⚠ required\n\t\t_selected: 0,\n\t\t_tabs: [],\n\t};\n\n\tprivate selectNextNotDisabledTab = (selected: number, tabs: TabButtonProps[], upOrDown = true, initialSelected?: number): number => {\n\t\tif (selected > tabs.length - 1) {\n\t\t\tselected = tabs.length - 1;\n\t\t}\n\t\tif (selected < 0) {\n\t\t\tselected = 0;\n\t\t}\n\t\tif (Array.isArray(tabs) && tabs[selected]) {\n\t\t\tif (tabs[selected]._disabled) {\n\t\t\t\tif (upOrDown === true) {\n\t\t\t\t\tif (selected < tabs.length - 1) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected + 1, tabs, true, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tselected = initialSelected || selected;\n\t\t\t\t\t\tupOrDown = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (upOrDown === false) {\n\t\t\t\t\tif (selected > 0) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected - 1, tabs, false, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdevHint(`[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.`);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn selected;\n\t};\n\n\tprivate syncSelectedAndTabs = (nextValue: unknown, nextState: Map<string, unknown>, _component: Generic.Element.Component, key: string) => {\n\t\tlet selected: number;\n\t\tif (key === '_selected') {\n\t\t\tselected = nextValue as number;\n\t\t} else {\n\t\t\tselected = this.state._selected;\n\t\t}\n\t\tlet tabs: TabButtonProps[];\n\t\tif (key === '_tabs') {\n\t\t\ttabs = nextValue as TabButtonProps[];\n\t\t} else {\n\t\t\ttabs = this.state._tabs;\n\t\t}\n\t\tif (tabs.length > 0) {\n\t\t\tnextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));\n\t\t}\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType) {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriTabsCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tfeatureHint('[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.');\n\t\t\tconst callbacks: KoliBriTabsCallbacks = {};\n\t\t\tif (typeof value.onCreate === 'function' || typeof value.onCreate === 'object') {\n\t\t\t\tif (typeof value.onCreate === 'object') {\n\t\t\t\t\tif (typeof value.onCreate.label === 'string' && value.onCreate.label.length > 0) {\n\t\t\t\t\t\tthis.onCreateLabel = value.onCreate.label;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tLog.debug(\n\t\t\t\t\t\t\t`[KolTabs] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt.`\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\tif (typeof value.onCreate.callback === 'function') {\n\t\t\t\t\t\tcallbacks.onCreate = value.onCreate.callback;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tLog.debug(\n\t\t\t\t\t\t\t`[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.`\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tcallbacks.onCreate = value.onCreate;\n\t\t\t\t}\n\t\t\t\tthis.showCreateTab = typeof callbacks.onCreate === 'function';\n\t\t\t}\n\t\t\tif (typeof value.onSelect === 'function') {\n\t\t\t\tcallbacks.onSelect = value.onSelect;\n\t\t\t}\n\t\t\tsetState<KoliBriTabsCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_selected')\n\tpublic validateSelected(value?: number): void {\n\t\twatchNumber(this, '_selected', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_tabs')\n\tpublic validateTabs(value?: Stringified<TabButtonProps[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis,\n\t\t\t'_tabs',\n\t\t\t(item: TabButtonProps) => typeof item === 'object' && item !== null && typeof item._label === 'string' && item._label.length > 0,\n\t\t\tvalue,\n\t\t\tundefined,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t\tuiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t}\n\n\tprivate readonly handleTabPanels = () => {\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = this.tabPanelHost.children.length; i < this.state._tabs.length; i++) {\n\t\t\t\tconst div = document.createElement('div');\n\t\t\t\tdiv.setAttribute('aria-labelledby', `${this.state._label.replace(/\\s/g, '-')}-tab-${i}`);\n\t\t\t\tdiv.setAttribute('id', `tabpanel-${i}`);\n\t\t\t\tdiv.setAttribute('role', 'tabpanel');\n\t\t\t\tdiv.setAttribute('hidden', '');\n\t\t\t\tconst slot = document.createElement('slot');\n\t\t\t\tslot.setAttribute('name', `tabpanel-slot-${i}`);\n\t\t\t\tdiv.appendChild(slot);\n\t\t\t\tthis.tabPanelHost.appendChild(div);\n\t\t\t\tif (this.host?.children instanceof HTMLCollection && this.host?.children[i] /* SSR instanceof HTMLElement */) {\n\t\t\t\t\t// div.appendChild(this.host?.children[0]);\n\t\t\t\t\tthis.host?.children[i].setAttribute('slot', `tabpanel-slot-${i}`);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic componentDidRender(): void {\n\t\tthis.handleTabPanels();\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = 0; i < this.tabPanelHost.children.length; i++) {\n\t\t\t\tif (i !== this.state._selected) {\n\t\t\t\t\tthis.tabPanelHost.children[i].setAttribute('hidden', '');\n\t\t\t\t} else {\n\t\t\t\t\tthis.tabPanelHost.children[i].removeAttribute('hidden');\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate onSelect(event: CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, index: number, focus = false): void {\n\t\tthis._selected = index;\n\t\tif (typeof this._on?.onSelect === 'function') {\n\t\t\tthis._on?.onSelect(event, index);\n\t\t}\n\t\tif (focus === true) {\n\t\t\t// TODO: prüfen, ob hier noch was offen ist\n\t\t\t// devHint('[KolTabs] Tab-Fokus-verschieben geht im Moment nicht.');\n\t\t\tthis.selectedTimeout = setTimeout(() => {\n\t\t\t\tclearTimeout(this.selectedTimeout);\n\t\t\t\tif (this.tabPanelsElement /* SSR instanceof HTMLElement */) {\n\t\t\t\t\tconst button: HTMLElement | null = koliBriQuerySelector(`button#${this.state._label.replace(/\\s/g, '-')}-tab-${index}`, this.tabPanelsElement);\n\t\t\t\t\tbutton?.focus();\n\t\t\t\t}\n\t\t\t}, 250);\n\t\t}\n\t}\n\n\tprivate onCreate = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onCreate === 'function') {\n\t\t\tthis.state._on?.onCreate(event);\n\t\t}\n\t};\n}\n"],"mappings":"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"}
+{"version":3,"names":["defaultStyleCss","KolTabs","this","onCreateLabel","translate","showCreateTab","nextPossibleTabIndex","tabs","offset","step","length","_disabled","onKeyDown","event","timeout","setTimeout","clearTimeout","selectedIndex","key","state","_tabs","_selected","onSelect","onClickSelect","index","onMouseDown","preventDefault","stopPropagation","callbacks","onClick","catchTabPanelHost","el","tabPanelHost","selectNextNotDisabledTab","selected","upOrDown","initialSelected","Array","isArray","devHint","syncSelectedAndTabs","nextValue","nextState","_component","set","handleTabPanels","HTMLDivElement","i","children","div","document","createElement","setAttribute","_label","replace","slot","appendChild","_a","host","HTMLCollection","_b","_c","onCreate","_on","_align","renderButtonGroup","h","class","role","map","button","_icons","_hideLabel","_tabIndex","_tooltipAlign","_variant","undefined","_customClass","_ariaControls","_ariaSelected","_id","_role","_value","render","Host","ref","tabPanelsElement","validateAlign","value","validateLabel","validateOn","featureHint","label","Log","debug","callback","setState","validateSelected","watchNumber","hooks","beforePatch","validateTabs","watchJsonArrayString","item","uiUxHintMillerscheZahl","componentWillLoad","componentDidRender","removeAttribute","focus","selectedTimeout","koliBriQuerySelector"],"sources":["src/components/tabs/style.css?tag=kol-tabs&mode=default&encapsulation=shadow","src/components/tabs/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n@layer kol-component {\n\tkol-button-group-wc {\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t}\n\n\tkol-button-group-wc button {\n\t\tborder-bottom-color: transparent;\n\t\tborder-bottom-style: solid;\n\t\tdisplay: block;\n\t}\n\n\tdiv.grid,\n\tdiv[role='tabpanel'] {\n\t\theight: 100%;\n\t}\n\n\t:host > .tabs-align-right {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\n\t:host > .tabs-align-right kol-button-group-wc {\n\t\tdisplay: grid;\n\t\torder: 2;\n\t}\n\n\t:host > .tabs-align-left {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: auto 1fr;\n\t}\n\n\t:host > .tabs-align-left kol-button-group-wc {\n\t\tdisplay: grid;\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-bottom {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: 1fr auto;\n\t}\n\n\t:host > .tabs-align-bottom kol-button-group-wc {\n\t\torder: 2;\n\t}\n\n\t:host > .tabs-align-bottom kol-button-group-wc > div {\n\t\tdisplay: flex;\n\t}\n\n\t:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n\t\tmargin: 0 1em 0 0;\n\t}\n\n\t:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n\t\tmargin: 0 1em;\n\t}\n\n\t:host > .tabs-align-top {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: auto 1fr;\n\t}\n\n\t:host > .tabs-align-top kol-button-group-wc {\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-top kol-button-group-wc > div {\n\t\tdisplay: flex;\n\t}\n\n\t:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n\t\tmargin: 0 1em 0 0;\n\t}\n\n\t:host > .tabs-align-top > kol-button-group-wc > div > div {\n\t\tmargin: 0 1em;\n\t}\n\n\t:host > div {\n\t\tdisplay: grid;\n\t}\n\n\t:host > .tabs-align-left kol-button-group-wc,\n\t:host > .tabs-align-top kol-button-group-wc {\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-bottom kol-button-group-wc,\n\t:host > .tabs-align-right kol-button-group-wc {\n\t\torder: 1;\n\t}\n\n\t:host > div.tabs-align-left kol-button-group-wc > div,\n\t:host > div.tabs-align-left kol-button-group-wc > div > div,\n\t:host > div.tabs-align-right kol-button-group-wc > div,\n\t:host > div.tabs-align-right kol-button-group-wc > div > div {\n\t\tdisplay: grid;\n\t}\n\n\t:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n\t:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n\t\twidth: 100%;\n\t}\n\n\t:host > div.tabs-align-bottom kol-button-group-wc div,\n\t:host > div.tabs-align-top kol-button-group-wc div {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n}\n","import { Generic } from '@a11y-ui/core';\nimport { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { Stringified } from '../../types/common';\nimport { AlignPropType, validateAlign } from '../../types/props/align';\nimport { ButtonCallbacksPropType } from '../../types/props/button-callbacks';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { StencilUnknown } from '../../types/unknown';\nimport { devHint, featureHint, uiUxHintMillerscheZahl } from '../../utils/a11y.tipps';\nimport { Log } from '../../utils/dev.utils';\nimport { koliBriQuerySelector, setState, watchJsonArrayString, watchNumber } from '../../utils/prop.validators';\nimport { API, KoliBriTabsCallbacks, States, TabButtonProps } from './types';\n\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements API {\n\t@Element() private readonly host?: HTMLKolTabsElement;\n\tprivate tabPanelsElement?: HTMLElement;\n\tprivate onCreateLabel = `${translate('kol-new')} …`;\n\tprivate showCreateTab = false;\n\tprivate selectedTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate nextPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step: number): number => {\n\t\tif (step > 0) {\n\t\t\tif (offset + step < tabs.length) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t} else if (step < 0) {\n\t\t\tif (offset + step >= 0) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step - 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t}\n\t\treturn offset;\n\t};\n\n\tprivate onKeyDown = (event: KeyboardEvent) => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tlet selectedIndex: number | null = null;\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, 1);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, -1);\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t\tif (selectedIndex !== null) {\n\t\t\t\tthis.onSelect(event, selectedIndex, true);\n\t\t\t}\n\t\t}, 250);\n\t};\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.onSelect(event, index, true);\n\t};\n\n\t// private readonly onClickClose = (event: Event, button: TabButtonProps, index: number) => {\n\t// \tevent.preventDefault();\n\t// \tevent.stopPropagation();\n\t// \tthis.onClose(button, event, index);\n\t// };\n\n\tprivate readonly onMouseDown = (event: Event): void => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t};\n\n\tprivate readonly callbacks: ButtonCallbacksPropType<number> = {\n\t\tonClick: this.onClickSelect,\n\t\tonMouseDown: this.onMouseDown,\n\t};\n\n\tprivate renderButtonGroup() {\n\t\treturn (\n\t\t\t<kol-button-group-wc class=\"tabs-button-group\" role=\"tablist\" aria-label={this.state._label} onKeyDown={this.onKeyDown}>\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t_disabled={button._disabled}\n\t\t\t\t\t\t_icons={button._icons}\n\t\t\t\t\t\t_hideLabel={button._hideLabel}\n\t\t\t\t\t\t_label={button._label} // TODO: ariaLabel-Konzept prüfen\n\t\t\t\t\t\t_on={this.callbacks as ButtonCallbacksPropType<StencilUnknown>}\n\t\t\t\t\t\t_tabIndex={this.state._selected === index ? 0 : -1}\n\t\t\t\t\t\t_tooltipAlign={button._tooltipAlign}\n\t\t\t\t\t\t_variant={this.state._selected === index ? 'custom' : undefined}\n\t\t\t\t\t\t_customClass={this.state._selected === index ? 'selected' : undefined}\n\t\t\t\t\t\t_ariaControls={`tabpanel-${index}`}\n\t\t\t\t\t\t_ariaSelected={this.state._selected === index}\n\t\t\t\t\t\t_id={`${this.state._label.replace(/\\s/g, '-')}-tab-${index}`}\n\t\t\t\t\t\t_role=\"tab\"\n\t\t\t\t\t\t_value={index}\n\t\t\t\t\t></kol-button-wc>\n\t\t\t\t))}\n\t\t\t\t{this.showCreateTab && (\n\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\tclass=\"create-button\"\n\t\t\t\t\t\t_label={this.onCreateLabel}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: this.onCreate,\n\t\t\t\t\t\t}}\n\t\t\t\t\t></kol-button-wc>\n\t\t\t\t)}\n\t\t\t</kol-button-group-wc>\n\t\t);\n\t}\n\n\tprivate tabPanelHost?: HTMLDivElement;\n\n\tprivate readonly catchTabPanelHost = (el?: HTMLDivElement) => {\n\t\tthis.tabPanelHost = el;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.tabPanelsElement = el as HTMLElement;\n\t\t\t\t\t}}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[`tabs-align-${this.state._align}`]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.renderButtonGroup()}\n\t\t\t\t\t<div class=\"tabs-content\" ref={this.catchTabPanelHost}>\n\t\t\t\t\t\t{/* <slot /> */}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the position of the tab captions.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.\n\t */\n\t@Prop() public _on?: KoliBriTabsCallbacks;\n\n\t/**\n\t * Defines which tab is active.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _selected?: number = 0;\n\n\t/**\n\t * Defines the tab captions.\n\t */\n\t@Prop() public _tabs!: Stringified<TabButtonProps[]>;\n\n\t@State() public state: States = {\n\t\t_align: 'top',\n\t\t_label: '…', // ⚠ required\n\t\t_selected: 0,\n\t\t_tabs: [],\n\t};\n\n\tprivate selectNextNotDisabledTab = (selected: number, tabs: TabButtonProps[], upOrDown = true, initialSelected?: number): number => {\n\t\tif (selected > tabs.length - 1) {\n\t\t\tselected = tabs.length - 1;\n\t\t}\n\t\tif (selected < 0) {\n\t\t\tselected = 0;\n\t\t}\n\t\tif (Array.isArray(tabs) && tabs[selected]) {\n\t\t\tif (tabs[selected]._disabled) {\n\t\t\t\tif (upOrDown === true) {\n\t\t\t\t\tif (selected < tabs.length - 1) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected + 1, tabs, true, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tselected = initialSelected || selected;\n\t\t\t\t\t\tupOrDown = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (upOrDown === false) {\n\t\t\t\t\tif (selected > 0) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected - 1, tabs, false, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdevHint(`[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.`);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn selected;\n\t};\n\n\tprivate syncSelectedAndTabs = (nextValue: unknown, nextState: Map<string, unknown>, _component: Generic.Element.Component, key: string) => {\n\t\tlet selected: number;\n\t\tif (key === '_selected') {\n\t\t\tselected = nextValue as number;\n\t\t} else {\n\t\t\tselected = this.state._selected;\n\t\t}\n\t\tlet tabs: TabButtonProps[];\n\t\tif (key === '_tabs') {\n\t\t\ttabs = nextValue as TabButtonProps[];\n\t\t} else {\n\t\t\ttabs = this.state._tabs;\n\t\t}\n\t\tif (tabs.length > 0) {\n\t\t\tnextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));\n\t\t}\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType) {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriTabsCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tfeatureHint('[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.');\n\t\t\tconst callbacks: KoliBriTabsCallbacks = {};\n\t\t\tif (typeof value.onCreate === 'function' || typeof value.onCreate === 'object') {\n\t\t\t\tif (typeof value.onCreate === 'object') {\n\t\t\t\t\tif (typeof value.onCreate.label === 'string' && value.onCreate.label.length > 0) {\n\t\t\t\t\t\tthis.onCreateLabel = value.onCreate.label;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tLog.debug(\n\t\t\t\t\t\t\t`[KolTabs] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt.`\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\tif (typeof value.onCreate.callback === 'function') {\n\t\t\t\t\t\tcallbacks.onCreate = value.onCreate.callback;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tLog.debug(\n\t\t\t\t\t\t\t`[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.`\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tcallbacks.onCreate = value.onCreate;\n\t\t\t\t}\n\t\t\t\tthis.showCreateTab = typeof callbacks.onCreate === 'function';\n\t\t\t}\n\t\t\tif (typeof value.onSelect === 'function') {\n\t\t\t\tcallbacks.onSelect = value.onSelect;\n\t\t\t}\n\t\t\tsetState<KoliBriTabsCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_selected')\n\tpublic validateSelected(value?: number): void {\n\t\twatchNumber(this, '_selected', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_tabs')\n\tpublic validateTabs(value?: Stringified<TabButtonProps[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis,\n\t\t\t'_tabs',\n\t\t\t(item: TabButtonProps) => typeof item === 'object' && item !== null && typeof item._label === 'string' && item._label.length > 0,\n\t\t\tvalue,\n\t\t\tundefined,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t\tuiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t}\n\n\tprivate readonly handleTabPanels = () => {\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = this.tabPanelHost.children.length; i < this.state._tabs.length; i++) {\n\t\t\t\tconst div = document.createElement('div');\n\t\t\t\tdiv.setAttribute('aria-labelledby', `${this.state._label.replace(/\\s/g, '-')}-tab-${i}`);\n\t\t\t\tdiv.setAttribute('id', `tabpanel-${i}`);\n\t\t\t\tdiv.setAttribute('role', 'tabpanel');\n\t\t\t\tdiv.setAttribute('hidden', '');\n\t\t\t\tconst slot = document.createElement('slot');\n\t\t\t\tslot.setAttribute('name', `tabpanel-slot-${i}`);\n\t\t\t\tdiv.appendChild(slot);\n\t\t\t\tthis.tabPanelHost.appendChild(div);\n\t\t\t\tif (this.host?.children instanceof HTMLCollection && this.host?.children[i] /* SSR instanceof HTMLElement */) {\n\t\t\t\t\t// div.appendChild(this.host?.children[0]);\n\t\t\t\t\tthis.host?.children[i].setAttribute('slot', `tabpanel-slot-${i}`);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic componentDidRender(): void {\n\t\tthis.handleTabPanels();\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = 0; i < this.tabPanelHost.children.length; i++) {\n\t\t\t\tif (i !== this.state._selected) {\n\t\t\t\t\tthis.tabPanelHost.children[i].setAttribute('hidden', '');\n\t\t\t\t} else {\n\t\t\t\t\tthis.tabPanelHost.children[i].removeAttribute('hidden');\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate onSelect(event: CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, index: number, focus = false): void {\n\t\tthis._selected = index;\n\t\tif (typeof this._on?.onSelect === 'function') {\n\t\t\tthis._on?.onSelect(event, index);\n\t\t}\n\t\tif (focus === true) {\n\t\t\t// TODO: prüfen, ob hier noch was offen ist\n\t\t\t// devHint('[KolTabs] Tab-Fokus-verschieben geht im Moment nicht.');\n\t\t\tthis.selectedTimeout = setTimeout(() => {\n\t\t\t\tclearTimeout(this.selectedTimeout);\n\t\t\t\tif (this.tabPanelsElement /* SSR instanceof HTMLElement */) {\n\t\t\t\t\tconst button: HTMLElement | null = koliBriQuerySelector(`button#${this.state._label.replace(/\\s/g, '-')}-tab-${index}`, this.tabPanelsElement);\n\t\t\t\t\tbutton?.focus();\n\t\t\t\t}\n\t\t\t}, 250);\n\t\t}\n\t}\n\n\tprivate onCreate = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onCreate === 'function') {\n\t\t\tthis.state._on?.onCreate(event);\n\t\t}\n\t};\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,F as e,H as n,r as i,g as a}from"./index-e9d20d00.js";import{n as s}from"./dev.utils-04fa5759.js";import{a as l,e as o,d as r,w as h,s as d}from"./prop.validators-ddc1812f.js";import{a as p,s as c}from"./reuse-d79ab469.js";import{I as u,g as f}from"./controller-9719e479.js";import{I as m}from"./InternalUnderlinedAccessKey-2c5af489.js";import{v as y}from"./rows-37d20439.js";import"./a11y.tipps-69a12284.js";import"./hide-label-215760de.js";import"./label-86b7dd9a.js";import"./events-fa760b68.js";import"./tab-index-13abc639.js";import"./associated.controller-8e65ccdf.js";const v=["both","horizontal","vertical","none"];class b extends u{constructor(t,e,n){super(t,e,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=t}validateHasCounter(t){l(this.component,"_hasCounter",t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(t){o(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(t){r(this.component,"_placeholder",t)}validateReadOnly(t){l(this.component,"_readOnly",t)}validateResize(t){h(this.component,"_resize",(t=>"string"==typeof t&&v.includes(t)),new Set(`String {${v.join(", ")}`),t)}validateRequired(t){l(this.component,"_required",t)}validateRows(t){y(this.component,t)}validateValue(t){r(this.component,"_value",t,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const g="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\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\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t/* input[type='checkbox'], */\n\t/* input[type='radio'], */\n\t/* input[type='range'], */\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n",_=t=>{t.style.overflow="hidden";const e=t.rows,n=t.clientHeight/e;t.rows=1;const a=Math.round(t.scrollHeight/n);return t.rows=e,a},x=class{async getValue(){var t;return null===(t=this.ref)||void 0===t?void 0:t.value}render(){const{ariaDescribedBy:a}=f(this.state),i=c(this.state._label);return t(n,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{textarea:!0,"hide-label":!!this.state._hideLabel,"has-counter":!!this.state._hasCounter},_accessKey:this.state._accessKey,_alert:this.state._alert,_currentLength:this.state._currentLength,_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_label:this.state._label,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},i?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey?t(e,null,t(m,{accessKey:this.state._accessKey,label:this.state._label})," ",t("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):t("span",null,this.state._label)),t("div",{slot:"input"},t("textarea",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":a.length>0?a.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,maxlength:this.state._maxLength,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,rows:this.state._rows,placeholder:this.state._placeholder,spellcheck:"false"},this.controller.onFacade,{onKeyUp:this.onKeyUp,style:{resize:this.state._resize},value:this.state._value})))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,p(this.host,this.ref)},this.onKeyUp=()=>{this.ref instanceof HTMLTextAreaElement&&(d(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=_(this.ref)))},this._accessKey=void 0,this._adjustHeight=!1,this._alert=!0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._id=void 0,this._label=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=!1,this._resize="vertical",this._required=!1,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${s()}`,_label:"",_resize:"vertical"},this.controller=new b(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAdjustHeight(t){this.controller.validateAdjustHeight(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateResize(t){this.controller.validateResize(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};x.style={default:g};export{x as kol_textarea};
+import{h as t,F as e,H as n,r as i,g as a}from"./index-e9d20d00.js";import{n as s}from"./dev.utils-b86b7cfe.js";import{a as l,e as o,d as r,w as h,s as d}from"./prop.validators-17590a9e.js";import{a as c,s as p}from"./reuse-d79ab469.js";import{I as u,g as m}from"./controller-a3de638f.js";import{I as f}from"./InternalUnderlinedAccessKey-2c5af489.js";import{v as y}from"./rows-94cb79bb.js";import"./a11y.tipps-76f7d989.js";import"./hide-label-084e2864.js";import"./label-9700d24c.js";import"./events-fa760b68.js";import"./tab-index-fbb584a0.js";import"./associated.controller-3ce25c94.js";const v=["both","horizontal","vertical","none"];class b extends u{constructor(t,e,n){super(t,e,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=t}validateHasCounter(t){l(this.component,"_hasCounter",t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(t){o(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(t){r(this.component,"_placeholder",t)}validateReadOnly(t){l(this.component,"_readOnly",t)}validateResize(t){h(this.component,"_resize",(t=>"string"==typeof t&&v.includes(t)),new Set(`String {${v.join(", ")}`),t)}validateRequired(t){l(this.component,"_required",t)}validateRows(t){y(this.component,t)}validateValue(t){r(this.component,"_value",t,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const g="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\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\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t/* input[type='checkbox'], */\n\t/* input[type='radio'], */\n\t/* input[type='range'], */\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, option, select, textarea, .input-label) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n",_=t=>{t.style.overflow="hidden";const e=t.rows,n=t.clientHeight/e;t.rows=1;const a=Math.round(t.scrollHeight/n);return t.rows=e,a},x=class{async getValue(){var t;return null===(t=this.ref)||void 0===t?void 0:t.value}render(){const{ariaDescribedBy:a}=m(this.state),i=p(this.state._label);return t(n,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{textarea:!0,"hide-label":!!this.state._hideLabel,"has-counter":!!this.state._hasCounter},_accessKey:this.state._accessKey,_alert:this.state._alert,_currentLength:this.state._currentLength,_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_label:this.state._label,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},i?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey?t(e,null,t(f,{accessKey:this.state._accessKey,label:this.state._label})," ",t("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):t("span",null,this.state._label)),t("div",{slot:"input"},t("textarea",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":a.length>0?a.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,maxlength:this.state._maxLength,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,rows:this.state._rows,placeholder:this.state._placeholder,spellcheck:"false"},this.controller.onFacade,{onKeyUp:this.onKeyUp,style:{resize:this.state._resize},value:this.state._value})))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,c(this.host,this.ref)},this.onKeyUp=()=>{this.ref instanceof HTMLTextAreaElement&&(d(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=_(this.ref)))},this._accessKey=void 0,this._adjustHeight=!1,this._alert=!0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._id=void 0,this._label=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=!1,this._resize="vertical",this._required=!1,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${s()}`,_label:"",_resize:"vertical"},this.controller=new b(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAdjustHeight(t){this.controller.validateAdjustHeight(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateResize(t){this.controller.validateResize(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};x.style={default:g};export{x as kol_textarea};