@public-ui/components 1.5.2-rc.2 → 1.5.2-rc.3

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","PAGINATION_OPTIONS","CELL_REFS","Map","KolTable","this","horizontal","sortDirections","showPagination","pageStartSlice","pageEndSlice","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","key","updateSortedData","sortedData","_data","get","reverse","_caption","_headers","vertical","_total","_sortedData","validateCaption","value","watchString","required","validateData","emptyStringByArrayHandler","objectObjectHandler","parseJson","e","Array","isArray","find","dataTupel","undefined","afterPatch","timeout","setTimeout","clearTimeout","validateHeaders","watchValidator","Set","hooks","beforePatch","headers","forEach","header","cell","sortDirection","_b","validateMinWidth","defaultValue","validatePagination","componentWillLoad","_minWidth","getNumberOfCols","horizontalHeaders","data","max","row","count","col","colSpan","length","getNumberOfRows","verticalHeaders","rowSpan","filterHeaderKeys","primaryHeader","cells","push","getPrimaryHeader","createDataField","maxCols","maxRows","dataField","rowCount","rowSpans","_row","index","i","dataRow","sum","rows","asTd","k","j","label","colspan","rowspan","emptyCell","translate","render","Math","selectDisplayedData","slice","cellRender","el","html","textAlign","width","innerHTML","displayedData","h","Host","class","_boundaryCount","_customClass","_pageSizeOptions","_siblingCount","_tooltipAlign","tabindex","style","minWidth","map","cols","rowIdx","colIdx","ref","scope","exportparts","_ariaLabel","placeholders","colLabel","_icon","_iconOnly","_label","_variant"],"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:host {\n\tdisplay: grid;\n}\n:host > div.table {\n\tmax-width: 100%;\n\torder: 1;\n\toverflow-x: auto;\n\toverflow-y: hidden;\n}\n:host > div.table table {\n\twidth: 100%;\n}\nth > div {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n\tplace-items: center;\n}\ndiv.pagination {\n\torder: 2;\n}\ndiv.pagination,\ndiv.pagination > div:last-child {\n\tdisplay: grid;\n\tplace-items: center;\n}\n@media (min-width: 1024px) {\n\tdiv.pagination,\n\tdiv.pagination > div:last-child {\n\t\tgrid-auto-flow: column;\n\t}\n\tdiv.pagination kol-pagination {\n\t\tdisplay: flex;\n\t}\n}\n","/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport {\n\tKoliBriDataType,\n\tKoliBriSortDirection,\n\tKoliBriSortFunction,\n\tKoliBriTableCell,\n\tKoliBriTableHeaderCell,\n\tKoliBriTableHeaders,\n\tKoliBriTablePaginationProps,\n\tKoliBriTablePaginationStates,\n} from '../../types/table';\nimport { emptyStringByArrayHandler, objectObjectHandler, parseJson, setState, watchString, watchValidator } from '../../utils/prop.validators';\nimport { KoliBriPaginationButtonCallbacks } from '../pagination/types';\nimport { translate } from '../../i18n';\n\ntype KoliBriTableHeaderCellAndData = KoliBriTableHeaderCell & {\n\tdata: KoliBriDataType;\n};\n\ntype RequiredProps = {\n\tcaption: string;\n\tdata: Stringified<KoliBriDataType[]>;\n\theaders: Stringified<KoliBriTableHeaders>;\n};\ntype OptionalProps = {\n\tminWidth: string;\n\tpagination: boolean | Stringified<KoliBriTablePaginationProps>;\n};\n\ntype RequiredStates = {\n\tcaption: string;\n\tdata: KoliBriDataType[];\n\theaders: KoliBriTableHeaders;\n\tpagination: KoliBriTablePaginationStates;\n\tsortedData: KoliBriDataType[];\n};\ntype OptionalStates = {\n\tminWidth: string;\n\tsortDirection: KoliBriSortDirection;\n};\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nconst PAGINATION_OPTIONS = [10, 20, 50, 100];\n\nconst CELL_REFS = new Map<HTMLElement, ReturnType<typeof setTimeout>>();\n\n@Component({\n\ttag: 'kol-table',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTable implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\t// https://github.com/ionic-team/stencil/issues/2895 // was ist damit?\n\tprivate horizontal = true;\n\tprivate sortFunction?: KoliBriSortFunction;\n\tprivate sortDirections: Map<KoliBriSortFunction, KoliBriSortDirection> = new Map();\n\tprivate showPagination = false;\n\tprivate pageStartSlice = 0;\n\tprivate pageEndSlice = 10;\n\n\t/**\n\t * Gibt den  Titel oder eine Legende mit Erklärungen zur Tabelle an.\n\t */\n\t@Prop() public _caption!: string;\n\n\t/**\n\t * Gibt die Daten an, die für die Erstellung der Tabelle verwendet werden.\n\t */\n\t@Prop() public _data!: Stringified<KoliBriDataType[]>;\n\n\t/**\n\t * Gibt die horizontalen und vertikalen Header für die Tabelle an.\n\t */\n\t@Prop() public _headers!: Stringified<KoliBriTableHeaders>;\n\n\t/**\n\t * Gibt an, die minimale Breite der Tabelle an.\n\t */\n\t@Prop() public _minWidth?: string;\n\n\t/**\n\t * Gibt an, ob die Daten geteilt in Seiten angezeigt wird.\n\t */\n\t@Prop() public _pagination?: boolean | Stringified<KoliBriTablePaginationProps>;\n\n\t@State() public state: States = {\n\t\t_caption: '…', // ⚠ required\n\t\t_data: [],\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_total: 0,\n\t\t},\n\t\t_sortedData: [],\n\t};\n\n\t@Watch('_caption')\n\tpublic validateCaption(value?: string): void {\n\t\twatchString(this, '_caption', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_data')\n\tpublic validateData(value?: Stringified<KoliBriDataType[]>): 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<KoliBriDataType[]>(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: KoliBriDataType) => !(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\tconst timeout = setTimeout(() => {\n\t\t\t\t\t\t\t\tclearTimeout(timeout);\n\t\t\t\t\t\t\t\tthis.updateSortedData();\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\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\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 headers: KoliBriTableHeaders = nextValue as KoliBriTableHeaders;\n\t\t\t\t\t\t\theaders.horizontal?.forEach((header) => {\n\t\t\t\t\t\t\t\theader.forEach((cell) => {\n\t\t\t\t\t\t\t\t\tif (typeof cell.sort === 'function' && typeof cell.sortDirection === 'string') {\n\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(cell.sort, cell.sortDirection);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\theaders.vertical?.forEach((header) => {\n\t\t\t\t\t\t\t\theader.forEach((cell) => {\n\t\t\t\t\t\t\t\t\tif (typeof cell.sort === 'function' && typeof cell.sortDirection === 'string') {\n\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(cell.sort, cell.sortDirection);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\t}\n\n\t@Watch('_minWidth')\n\tpublic validateMinWidth(value?: string): void {\n\t\twatchString(this, '_minWidth', value, {\n\t\t\tdefaultValue: undefined,\n\t\t});\n\t}\n\n\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.validateCaption(this._caption);\n\t\tthis.validateData(this._data);\n\t\tthis.validateHeaders(this._headers);\n\t\tthis.validateMinWidth(this._minWidth);\n\t\tthis.validatePagination(this._pagination);\n\t}\n\n\tprivate getNumberOfCols(horizontalHeaders: KoliBriTableHeaderCell[][], data: KoliBriDataType[]): 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: KoliBriDataType[]): 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}\n\t\treturn max;\n\t}\n\n\t// TODO: hier muss noch die order beachtet werden bei colspan und rowspan\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: KoliBriDataType[], headers: KoliBriTableHeaders): 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\tconst maxRows = this.getNumberOfRows(headers.vertical, data);\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 = 0; i < maxRows; i++) {\n\t\t\tconst dataRow: KoliBriTableHeaderCellAndData[] = [];\n\t\t\theaders.vertical.forEach((cells, index) => {\n\t\t\t\tlet sum = 0;\n\t\t\t\trowSpans[index].forEach((value) => (sum += value));\n\t\t\t\tif (sum <= i) {\n\t\t\t\t\tconst rows = cells[i - sum + 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 KoliBriDataType,\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\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 data[i] === 'object' &&\n\t\t\t\t\t\tdata[i] !== 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: data[i],\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[i][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: KoliBriDataType[], pageSize: number, page: number): KoliBriDataType[] {\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, 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\tif (typeof col.render === 'function') {\n\t\t\t\t\t\tconst html = col.render(\n\t\t\t\t\t\t\tel,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tasTd: col.asTd,\n\t\t\t\t\t\t\t\tlabel: col.label,\n\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t\t\t} as KoliBriTableHeaderCell,\n\t\t\t\t\t\t\tcol.data,\n\t\t\t\t\t\t\tthis.state._data\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (typeof html === 'string') {\n\t\t\t\t\t\t\tel.innerHTML = html;\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\tprivate updateSortedData = () => {\n\t\tlet sortedData: KoliBriDataType[] = this.state._data;\n\t\tif (typeof this.sortFunction === 'function') {\n\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\tcase 'NOS':\n\t\t\t\t\tsortedData = [...this.state._data];\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ASC':\n\t\t\t\t\tsortedData = this.sortFunction([...this.state._data]);\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tsortedData = this.sortFunction([...this.state._data]).reverse();\n\t\t\t}\n\t\t}\n\t\tsetState(this, '_sortedData', sortedData);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst displayedData: KoliBriDataType[] = 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{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._total || (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_total={this.state._pagination._total || this.state._data.length}\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{/*\n\t\t\t\t  - https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable\n\t\t\t\t\t- https://www.a11yproject.com/posts/how-to-use-the-tabindex-attribute/\n\t\t\t\t\t- https://ux.stackexchange.com/questions/119952/when-is-it-wrong-to-put-tabindex-0-on-non-interactive-content\n\n\t\t\t\t\tNicht <div tabindex=\"0\">\n\n\t\t\t\t\tDOCH!!!\n\t\t\t\t\thttps://dequeuniversity.com/rules/axe/4.4/scrollable-region-focusable?application=AxeChrome\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\t// role=\"grid\"\n\t\t\t\t\t\t// aria-readonly=\"true\"\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._caption}</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, rowIdx) => (\n\t\t\t\t\t\t\t\t\t<tr key={`thead-${rowIdx}`}>\n\t\t\t\t\t\t\t\t\t\t{cols.map((col, colIdx) => {\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-${rowIdx}-${colIdx}-${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, 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\tinnerHTML={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\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-${rowIdx}-${colIdx}-${col.label}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tscope={typeof col.colSpan === 'number' && col.colSpan > 1 ? 'colgroup' : 'col'}\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\taria-sort={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttypeof col.sort === 'function'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? col.sort !== this.sortFunction ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  this.sortDirections.get(col.sort) === 'NOS' ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  this.sortDirections.get(col.sort) === undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'none'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: this.sortDirections.get(col.sort) === 'ASC'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'ascending'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'descending'\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\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-sort={`sort-${this.sortDirections.get(col.sort!) as string}`}\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\tinnerHTML={col.label}\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></div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{typeof col.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_ariaLabel={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_icon={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcol.sort !== this.sortFunction ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortDirections.get(col.sort) === 'NOS' ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortDirections.get(col.sort) === undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'codicon codicon-fold'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: this.sortDirections.get(col.sort) === 'ASC'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'codicon codicon-chevron-up'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'codicon codicon-chevron-down'\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_iconOnly\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: () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (typeof col.sort === 'function') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortFunction = col.sort;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'DESC');\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'NOS');\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'ASC');\n\t\t\t\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\t\t\tthis.updateSortedData();\n\t\t\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\t},\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 aria-atomic=\"true\" aria-live=\"polite\" aria-relevant=\"additions removals\"> */}\n\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t{dataField.map((row, rowIdx) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<tr key={`tbody-${rowIdx}`}>\n\t\t\t\t\t\t\t\t\t\t{row.map((col, colIdx) => {\n\t\t\t\t\t\t\t\t\t\t\tif (col.asTd === false) {\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=\"rowheader\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={`tbody-${rowIdx}-${colIdx}-${col.label}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tscope={typeof col.rowSpan === 'number' && col.rowSpan > 1 ? 'rowgroup' : 'row'}\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\taria-sort={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttypeof col.sort === 'function'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? col.sort !== this.sortFunction ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  this.sortDirections.get(col.sort) === 'NOS' ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  this.sortDirections.get(col.sort) === undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'none'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: this.sortDirections.get(col.sort) === 'ASC'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'ascending'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'descending'\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\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-sort={`sort-${this.sortDirections.get(col.sort!) as string}`}\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\tinnerHTML={col.label}\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></div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{typeof col.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_ariaLabel={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_icon={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcol.sort !== this.sortFunction ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortDirections.get(col.sort) === 'NOS' ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortDirections.get(col.sort) === undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'codicon codicon-fold'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: this.sortDirections.get(col.sort) === 'ASC'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'codicon codicon-chevron-up'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'codicon codicon-chevron-down'\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_iconOnly\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: () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (typeof col.sort === 'function') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortFunction = col.sort;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'DESC');\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'NOS');\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'ASC');\n\t\t\t\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\t\t\tthis.updateSortedData();\n\t\t\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\t},\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} else {\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={`tbody-${rowIdx}-${colIdx}-${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, 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\tinnerHTML={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}\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})}\n\t\t\t\t\t\t</tbody>\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","showPagination","pageStartSlice","pageEndSlice","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","key","updateSortedData","sortedData","_data","get","reverse","_caption","_headers","vertical","_total","_sortedData","validateCaption","value","watchString","required","validateData","emptyStringByArrayHandler","objectObjectHandler","parseJson","e","Array","isArray","find","dataTupel","undefined","afterPatch","timeout","setTimeout","clearTimeout","validateHeaders","watchValidator","Set","hooks","beforePatch","headers","forEach","header","cell","sortDirection","_b","validateMinWidth","defaultValue","validatePagination","componentWillLoad","_minWidth","getNumberOfCols","horizontalHeaders","data","max","row","count","col","colSpan","length","getNumberOfRows","verticalHeaders","rowSpan","filterHeaderKeys","primaryHeader","cells","push","getPrimaryHeader","createDataField","maxCols","maxRows","dataField","rowCount","rowSpans","_row","index","i","dataRow","sum","rows","asTd","k","j","label","colspan","rowspan","emptyCell","translate","render","Math","selectDisplayedData","slice","cellRender","el","html","textAlign","width","innerHTML","displayedData","h","Host","class","_boundaryCount","_customClass","_pageSizeOptions","_siblingCount","_tooltipAlign","tabindex","style","minWidth","map","cols","rowIdx","colIdx","ref","scope","exportparts","_ariaLabel","placeholders","colLabel","_icon","_iconOnly","_label","_variant"],"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:host {\n\tdisplay: grid;\n}\n:host > div.table {\n\tmax-width: 100%;\n\torder: 1;\n\toverflow-x: auto;\n\toverflow-y: hidden;\n}\n:host > div.table table {\n\twidth: 100%;\n}\nth > div {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n\tplace-items: center;\n}\ndiv.pagination {\n\torder: 2;\n}\ndiv.pagination,\ndiv.pagination > div:last-child {\n\tdisplay: grid;\n\tplace-items: center;\n}\n@media (min-width: 1024px) {\n\tdiv.pagination,\n\tdiv.pagination > div:last-child {\n\t\tgrid-auto-flow: column;\n\t}\n\tdiv.pagination kol-pagination {\n\t\tdisplay: flex;\n\t}\n}\n","/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport {\n\tKoliBriDataType,\n\tKoliBriSortDirection,\n\tKoliBriSortFunction,\n\tKoliBriTableCell,\n\tKoliBriTableHeaderCell,\n\tKoliBriTableHeaders,\n\tKoliBriTablePaginationProps,\n\tKoliBriTablePaginationStates,\n} from '../../types/table';\nimport { emptyStringByArrayHandler, objectObjectHandler, parseJson, setState, watchString, watchValidator } from '../../utils/prop.validators';\nimport { KoliBriPaginationButtonCallbacks } from '../pagination/types';\nimport { translate } from '../../i18n';\n\ntype KoliBriTableHeaderCellAndData = KoliBriTableHeaderCell & {\n\tdata: KoliBriDataType;\n};\n\ntype RequiredProps = {\n\tcaption: string;\n\tdata: Stringified<KoliBriDataType[]>;\n\theaders: Stringified<KoliBriTableHeaders>;\n};\ntype OptionalProps = {\n\tminWidth: string;\n\tpagination: boolean | Stringified<KoliBriTablePaginationProps>;\n};\n\ntype RequiredStates = {\n\tcaption: string;\n\tdata: KoliBriDataType[];\n\theaders: KoliBriTableHeaders;\n\tpagination: KoliBriTablePaginationStates;\n\tsortedData: KoliBriDataType[];\n};\ntype OptionalStates = {\n\tminWidth: string;\n\tsortDirection: KoliBriSortDirection;\n};\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nconst PAGINATION_OPTIONS = [10, 20, 50, 100];\n\nconst CELL_REFS = new Map<HTMLElement, ReturnType<typeof setTimeout>>();\n\n@Component({\n\ttag: 'kol-table',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTable implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\t// https://github.com/ionic-team/stencil/issues/2895 // was ist damit?\n\tprivate horizontal = true;\n\tprivate sortFunction?: KoliBriSortFunction;\n\tprivate sortDirections: Map<KoliBriSortFunction, KoliBriSortDirection> = new Map();\n\tprivate showPagination = false;\n\tprivate pageStartSlice = 0;\n\tprivate pageEndSlice = 10;\n\n\t/**\n\t * Gibt den  Titel oder eine Legende mit Erklärungen zur Tabelle an.\n\t */\n\t@Prop() public _caption!: string;\n\n\t/**\n\t * Gibt die Daten an, die für die Erstellung der Tabelle verwendet werden.\n\t */\n\t@Prop() public _data!: Stringified<KoliBriDataType[]>;\n\n\t/**\n\t * Gibt die horizontalen und vertikalen Header für die Tabelle an.\n\t */\n\t@Prop() public _headers!: Stringified<KoliBriTableHeaders>;\n\n\t/**\n\t * Gibt an, die minimale Breite der Tabelle an.\n\t */\n\t@Prop() public _minWidth?: string;\n\n\t/**\n\t * Gibt an, ob die Daten geteilt in Seiten angezeigt wird.\n\t */\n\t@Prop() public _pagination?: boolean | Stringified<KoliBriTablePaginationProps>;\n\n\t@State() public state: States = {\n\t\t_caption: '…', // ⚠ required\n\t\t_data: [],\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_total: 0,\n\t\t},\n\t\t_sortedData: [],\n\t};\n\n\t@Watch('_caption')\n\tpublic validateCaption(value?: string): void {\n\t\twatchString(this, '_caption', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_data')\n\tpublic validateData(value?: Stringified<KoliBriDataType[]>): 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<KoliBriDataType[]>(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: KoliBriDataType) => !(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\tconst timeout = setTimeout(() => {\n\t\t\t\t\t\t\t\tclearTimeout(timeout);\n\t\t\t\t\t\t\t\tthis.updateSortedData();\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\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\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 headers: KoliBriTableHeaders = nextValue as KoliBriTableHeaders;\n\t\t\t\t\t\t\theaders.horizontal?.forEach((header) => {\n\t\t\t\t\t\t\t\theader.forEach((cell) => {\n\t\t\t\t\t\t\t\t\tif (typeof cell.sort === 'function' && typeof cell.sortDirection === 'string') {\n\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(cell.sort, cell.sortDirection);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\theaders.vertical?.forEach((header) => {\n\t\t\t\t\t\t\t\theader.forEach((cell) => {\n\t\t\t\t\t\t\t\t\tif (typeof cell.sort === 'function' && typeof cell.sortDirection === 'string') {\n\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(cell.sort, cell.sortDirection);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\t}\n\n\t@Watch('_minWidth')\n\tpublic validateMinWidth(value?: string): void {\n\t\twatchString(this, '_minWidth', value, {\n\t\t\tdefaultValue: undefined,\n\t\t});\n\t}\n\n\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.validateCaption(this._caption);\n\t\tthis.validateData(this._data);\n\t\tthis.validateHeaders(this._headers);\n\t\tthis.validateMinWidth(this._minWidth);\n\t\tthis.validatePagination(this._pagination);\n\t}\n\n\tprivate getNumberOfCols(horizontalHeaders: KoliBriTableHeaderCell[][], data: KoliBriDataType[]): 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: KoliBriDataType[]): 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}\n\t\treturn max;\n\t}\n\n\t// TODO: hier muss noch die order beachtet werden bei colspan und rowspan\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: KoliBriDataType[], headers: KoliBriTableHeaders): 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\tconst maxRows = this.getNumberOfRows(headers.vertical, data);\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 = 0; i < maxRows; i++) {\n\t\t\tconst dataRow: KoliBriTableHeaderCellAndData[] = [];\n\t\t\theaders.vertical.forEach((cells, index) => {\n\t\t\t\tlet sum = 0;\n\t\t\t\trowSpans[index].forEach((value) => (sum += value));\n\t\t\t\tif (sum <= i) {\n\t\t\t\t\tconst rows = cells[i - sum + 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 KoliBriDataType,\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\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 data[i] === 'object' &&\n\t\t\t\t\t\tdata[i] !== 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: data[i],\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[i][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: KoliBriDataType[], pageSize: number, page: number): KoliBriDataType[] {\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, 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\tif (typeof col.render === 'function') {\n\t\t\t\t\t\tconst html = col.render(\n\t\t\t\t\t\t\tel,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tasTd: col.asTd,\n\t\t\t\t\t\t\t\tlabel: col.label,\n\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t\t\t} as KoliBriTableHeaderCell,\n\t\t\t\t\t\t\tcol.data,\n\t\t\t\t\t\t\tthis.state._data\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (typeof html === 'string') {\n\t\t\t\t\t\t\tel.innerHTML = html;\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\tprivate updateSortedData = () => {\n\t\tlet sortedData: KoliBriDataType[] = this.state._data;\n\t\tif (typeof this.sortFunction === 'function') {\n\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\tcase 'NOS':\n\t\t\t\t\tsortedData = [...this.state._data];\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ASC':\n\t\t\t\t\tsortedData = this.sortFunction([...this.state._data]);\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tsortedData = this.sortFunction([...this.state._data]).reverse();\n\t\t\t}\n\t\t}\n\t\tsetState(this, '_sortedData', sortedData);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst displayedData: KoliBriDataType[] = 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{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._total || (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_total={this.state._pagination._total || this.state._data.length}\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{/*\n\t\t\t\t  - https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable\n\t\t\t\t\t- https://www.a11yproject.com/posts/how-to-use-the-tabindex-attribute/\n\t\t\t\t\t- https://ux.stackexchange.com/questions/119952/when-is-it-wrong-to-put-tabindex-0-on-non-interactive-content\n\n\t\t\t\t\tNicht <div tabindex=\"0\">\n\n\t\t\t\t\tDOCH!!!\n\t\t\t\t\thttps://dequeuniversity.com/rules/axe/4.4/scrollable-region-focusable?application=AxeChrome\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\t// role=\"grid\"\n\t\t\t\t\t\t// aria-readonly=\"true\"\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._caption}</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, rowIdx) => (\n\t\t\t\t\t\t\t\t\t<tr key={`thead-${rowIdx}`}>\n\t\t\t\t\t\t\t\t\t\t{cols.map((col, colIdx) => {\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-${rowIdx}-${colIdx}-${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, 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\tinnerHTML={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\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-${rowIdx}-${colIdx}-${col.label}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tscope={typeof col.colSpan === 'number' && col.colSpan > 1 ? 'colgroup' : 'col'}\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\taria-sort={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttypeof col.sort === 'function'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? col.sort !== this.sortFunction ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  this.sortDirections.get(col.sort) === 'NOS' ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  this.sortDirections.get(col.sort) === undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'none'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: this.sortDirections.get(col.sort) === 'ASC'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'ascending'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'descending'\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\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-sort={`sort-${this.sortDirections.get(col.sort!) as string}`}\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\tinnerHTML={col.label}\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></div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{typeof col.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_ariaLabel={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_icon={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcol.sort !== this.sortFunction ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortDirections.get(col.sort) === 'NOS' ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortDirections.get(col.sort) === undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'codicon codicon-fold'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: this.sortDirections.get(col.sort) === 'ASC'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'codicon codicon-chevron-up'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'codicon codicon-chevron-down'\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_iconOnly\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: () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (typeof col.sort === 'function') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortFunction = col.sort;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'DESC');\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'NOS');\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'ASC');\n\t\t\t\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\t\t\tthis.updateSortedData();\n\t\t\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\t},\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 aria-atomic=\"true\" aria-live=\"polite\" aria-relevant=\"additions removals\"> */}\n\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t{dataField.map((row, rowIdx) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<tr key={`tbody-${rowIdx}`}>\n\t\t\t\t\t\t\t\t\t\t{row.map((col, colIdx) => {\n\t\t\t\t\t\t\t\t\t\t\tif (col.asTd === false) {\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=\"rowheader\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={`tbody-${rowIdx}-${colIdx}-${col.label}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tscope={typeof col.rowSpan === 'number' && col.rowSpan > 1 ? 'rowgroup' : 'row'}\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\taria-sort={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttypeof col.sort === 'function'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? col.sort !== this.sortFunction ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  this.sortDirections.get(col.sort) === 'NOS' ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  this.sortDirections.get(col.sort) === undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'none'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: this.sortDirections.get(col.sort) === 'ASC'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'ascending'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'descending'\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\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-sort={`sort-${this.sortDirections.get(col.sort!) as string}`}\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\tinnerHTML={col.label}\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></div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{typeof col.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_ariaLabel={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_icon={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcol.sort !== this.sortFunction ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortDirections.get(col.sort) === 'NOS' ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortDirections.get(col.sort) === undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'codicon codicon-fold'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: this.sortDirections.get(col.sort) === 'ASC'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'codicon codicon-chevron-up'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'codicon codicon-chevron-down'\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_iconOnly\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: () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (typeof col.sort === 'function') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortFunction = col.sort;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'DESC');\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'NOS');\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'ASC');\n\t\t\t\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\t\t\tthis.updateSortedData();\n\t\t\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\t},\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} else {\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={`tbody-${rowIdx}-${colIdx}-${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, 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\tinnerHTML={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}\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})}\n\t\t\t\t\t\t</tbody>\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 i,H as o,g as e}from"./index-50adf9a0.js";import{d as s,b as n,f as a,c as l}from"./a11y.tipps-2e27f8e6.js";import{a as r,w as d,s as h,e as b,d as u,k as c}from"./prop.validators-2c20cdf8.js";import{a as p}from"./i18n-b8589f01.js";import{L as f}from"./dev.utils-157f0499.js";import"./index-f4596895.js";import"./index-0962b5a1.js";import"./reuse-3a02afb9.js";const g=new Set(['"left", "right"']),v=new Set(['"bottom", "top"']),m=new Set([...g,...v]),k=(t,e,a)=>{r(t,e,(t=>"bottom"===t||"left"===t||"right"===t||"top"===t),m,a)},w=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}kol-button-group-wc{display:inline-flex;flex-wrap:wrap}kol-button-group-wc button{border:0;border-bottom-color:transparent;border-bottom-style:solid;display:block}div.grid,div[role='tabpanel']{height:100%}:host>.tabs-align-right{display:grid;grid-template-columns:1fr auto}:host>.tabs-align-right kol-button-group-wc{display:grid;order:2}:host>.tabs-align-left{display:grid;grid-template-columns:auto 1fr}:host>.tabs-align-left kol-button-group-wc{display:grid;order:0}:host>.tabs-align-bottom{display:grid;grid-template-rows:1fr auto}:host>.tabs-align-bottom kol-button-group-wc{order:2}:host>.tabs-align-bottom kol-button-group-wc>div{display:flex}:host>.tabs-align-bottom>kol-button-group-wc>div>div:first-child{margin:0 1em 0 0}:host>.tabs-align-bottom>kol-button-group-wc>div>div{margin:0 1em}:host>.tabs-align-top{display:grid;grid-template-rows:auto 1fr}:host>.tabs-align-top kol-button-group-wc{order:0}:host>.tabs-align-top kol-button-group-wc>div{display:flex}:host>.tabs-align-top>kol-button-group-wc>div>div:first-child{margin:0 1em 0 0}:host>.tabs-align-top>kol-button-group-wc>div>div{margin:0 1em}:host>div{display:grid}:host>.tabs-align-left kol-button-group-wc,:host>.tabs-align-top kol-button-group-wc{order:0}:host>.tabs-align-bottom kol-button-group-wc,:host>.tabs-align-right kol-button-group-wc{order:1}:host>div.tabs-align-left kol-button-group-wc>div,:host>div.tabs-align-left kol-button-group-wc>div>div,:host>div.tabs-align-right kol-button-group-wc>div,:host>div.tabs-align-right kol-button-group-wc>div>div{display:grid}:host>div.tabs-align-left kol-button-group-wc>div>div kol-button-wc,:host>div.tabs-align-right kol-button-group-wc>div>div kol-button-wc{width:100%}:host>div.tabs-align-bottom kol-button-group-wc div,:host>div.tabs-align-top kol-button-group-wc div{display:flex;flex-wrap:wrap}",y=class{constructor(e){t(this,e),this.onCreateLabel=`${p("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,a)=>{if(a>0){if(e+a<t.length)return t[e+a]._disabled?this.nextPossibleTabIndex(t,e,a+1):e+a}else if(a<0&&e+a>=0)return t[e+a]._disabled?this.nextPossibleTabIndex(t,e,a-1):e+a;return e},this.onKeyDown=t=>{const e=setTimeout((()=>{clearTimeout(e);let a=null;switch(t.key){case"ArrowRight":a=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,1);break;case"ArrowLeft":a=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,-1)}null!==a&&this.onSelect(t,a,!0)}),250)},this.onClickSelect=(t,e)=>{this.onSelect(t,e,!0)},this.onMouseDown=t=>{t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,a=!0,i)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===a){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,i||t);t=i||t,a=!1}if(!1===a){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,i||t);s("[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.")}}return t},this.syncSelectedAndTabs=(t,e,a,i)=>{let o,s;o="_selected"===i?t:this.state._selected,s="_tabs"===i?t:this.state._tabs,s.length>0&&e.set("_selected",this.selectNextNotDisabledTab(o,s))},this.handleTabPanels=()=>{var t,e,a;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",`tab-${i}`),o.setAttribute("id",`tabpanel-${i}`),o.setAttribute("role","tabpanel"),o.setAttribute("hidden","");const s=document.createElement("slot");s.setAttribute("name",`tabpanel-slot-${i}`),o.appendChild(s),this.tabPanelHost.appendChild(o),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[i])&&(null===(a=this.host)||void 0===a||a.children[i].setAttribute("slot",`tabpanel-slot-${i}`))}},this.onCreate=t=>{var e,a;t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(a=this.state._on)||void 0===a||a.onCreate(t))},this._ariaLabel=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this._tabsAlign="top",this.state={_ariaLabel:"…",_selected:0,_tabs:[],_tabsAlign:"top"}}renderButtonGroup(){return i("kol-button-group-wc",{role:"tablist","aria-label":this.state._ariaLabel,onKeyDown:this.onKeyDown},this.state._tabs.map(((t,e)=>i("kol-button-wc",{_disabled:t._disabled,_icon:t._icon,_iconOnly:t._iconOnly,_label:t._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:`tab-${e}`,_role:"tab",_value:e}))),this.showCreateTab&&i("kol-button-wc",{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return i(o,null,i("div",{ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._tabsAlign}`]:!0}},this.renderButtonGroup(),i("div",{ref:this.catchTabPanelHost})))}validateAriaLabel(t){d(this,"_ariaLabel",t,{required:!0}),n(t)}validateOn(t){if("object"==typeof t&&null!==t){a("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const e={};"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:f.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?e.onCreate=t.onCreate.callback:f.debug("[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.")):e.onCreate=t.onCreate,this.showCreateTab="function"==typeof e.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),h(this,"_on",e)}}validateSelected(t){b(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){u(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),l("KolTabs",this.state._tabs.length)}validateTabsAlign(t){k(this,"_tabsAlign",t)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateTabsAlign(this._tabsAlign)}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,e,a=!1){var i,o;this._selected=e,"function"==typeof(null===(i=this._on)||void 0===i?void 0:i.onSelect)&&(null===(o=this._on)||void 0===o||o.onSelect(t,e)),!0===a&&(this.selectedTimeout=setTimeout((()=>{if(clearTimeout(this.selectedTimeout),this.tabPanelsElement){const t=c(`button#tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}),250))}get host(){return e(this)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"],_tabsAlign:["validateTabsAlign"]}}};y.style={default:w};export{y as kol_tabs};
+import{r as t,h as i,H as o,g as e}from"./index-50adf9a0.js";import{d as s,b as n,f as a,c as l}from"./a11y.tipps-2e27f8e6.js";import{a as r,w as d,s as h,e as b,d as u,k as c}from"./prop.validators-2c20cdf8.js";import{a as p}from"./i18n-b8589f01.js";import{L as f}from"./dev.utils-157f0499.js";import"./index-f4596895.js";import"./index-0962b5a1.js";import"./reuse-3a02afb9.js";const g=new Set(['"left", "right"']),v=new Set(['"bottom", "top"']),m=new Set([...g,...v]),k=(t,e,i)=>{r(t,e,(t=>"bottom"===t||"left"===t||"right"===t||"top"===t),m,i)},w=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}kol-button-group-wc{display:inline-flex;flex-wrap:wrap}kol-button-group-wc button{border:0;border-bottom-color:transparent;border-bottom-style:solid;display:block}div.grid,div[role='tabpanel']{height:100%}:host>.tabs-align-right{display:grid;grid-template-columns:1fr auto}:host>.tabs-align-right kol-button-group-wc{display:grid;order:2}:host>.tabs-align-left{display:grid;grid-template-columns:auto 1fr}:host>.tabs-align-left kol-button-group-wc{display:grid;order:0}:host>.tabs-align-bottom{display:grid;grid-template-rows:1fr auto}:host>.tabs-align-bottom kol-button-group-wc{order:2}:host>.tabs-align-bottom kol-button-group-wc>div{display:flex}:host>.tabs-align-bottom>kol-button-group-wc>div>div:first-child{margin:0 1em 0 0}:host>.tabs-align-bottom>kol-button-group-wc>div>div{margin:0 1em}:host>.tabs-align-top{display:grid;grid-template-rows:auto 1fr}:host>.tabs-align-top kol-button-group-wc{order:0}:host>.tabs-align-top kol-button-group-wc>div{display:flex}:host>.tabs-align-top>kol-button-group-wc>div>div:first-child{margin:0 1em 0 0}:host>.tabs-align-top>kol-button-group-wc>div>div{margin:0 1em}:host>div{display:grid}:host>.tabs-align-left kol-button-group-wc,:host>.tabs-align-top kol-button-group-wc{order:0}:host>.tabs-align-bottom kol-button-group-wc,:host>.tabs-align-right kol-button-group-wc{order:1}:host>div.tabs-align-left kol-button-group-wc>div,:host>div.tabs-align-left kol-button-group-wc>div>div,:host>div.tabs-align-right kol-button-group-wc>div,:host>div.tabs-align-right kol-button-group-wc>div>div{display:grid}:host>div.tabs-align-left kol-button-group-wc>div>div kol-button-wc,:host>div.tabs-align-right kol-button-group-wc>div>div kol-button-wc{width:100%}:host>div.tabs-align-bottom kol-button-group-wc div,:host>div.tabs-align-top kol-button-group-wc div{display:flex;flex-wrap:wrap}",y=class{constructor(e){t(this,e),this.onCreateLabel=`${p("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,i)=>{if(i>0){if(e+i<t.length)return t[e+i]._disabled?this.nextPossibleTabIndex(t,e,i+1):e+i}else if(i<0&&e+i>=0)return t[e+i]._disabled?this.nextPossibleTabIndex(t,e,i-1):e+i;return e},this.onKeyDown=t=>{const e=setTimeout((()=>{clearTimeout(e);let i=null;switch(t.key){case"ArrowRight":i=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,1);break;case"ArrowLeft":i=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,-1)}null!==i&&this.onSelect(t,i,!0)}),250)},this.onClickSelect=(t,e)=>{this.onSelect(t,e,!0)},this.onMouseDown=t=>{t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,i=!0,a)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===i){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,a||t);t=a||t,i=!1}if(!1===i){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,a||t);s("[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.")}}return t},this.syncSelectedAndTabs=(t,e,i,a)=>{let o,s;o="_selected"===a?t:this.state._selected,s="_tabs"===a?t:this.state._tabs,s.length>0&&e.set("_selected",this.selectNextNotDisabledTab(o,s))},this.handleTabPanels=()=>{var t,e,i;if(this.tabPanelHost instanceof HTMLDivElement)for(let a=this.tabPanelHost.children.length;a<this.state._tabs.length;a++){const o=document.createElement("div");o.setAttribute("aria-labelledby",`tab-${a}`),o.setAttribute("id",`tabpanel-${a}`),o.setAttribute("role","tabpanel"),o.setAttribute("hidden","");const s=document.createElement("slot");s.setAttribute("name",`tabpanel-slot-${a}`),o.appendChild(s),this.tabPanelHost.appendChild(o),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[a])&&(null===(i=this.host)||void 0===i||i.children[a].setAttribute("slot",`tabpanel-slot-${a}`))}},this.onCreate=t=>{var e,i;t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(i=this.state._on)||void 0===i||i.onCreate(t))},this._ariaLabel=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this._tabsAlign="top",this.state={_ariaLabel:"…",_selected:0,_tabs:[],_tabsAlign:"top"}}renderButtonGroup(){return i("kol-button-group-wc",{role:"tablist","aria-label":this.state._ariaLabel,onKeyDown:this.onKeyDown},this.state._tabs.map(((t,e)=>i("kol-button-wc",{_disabled:t._disabled,_icon:t._icon,_iconOnly:t._iconOnly,_label:t._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:`tab-${e}`,_role:"tab",_value:e}))),this.showCreateTab&&i("kol-button-wc",{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return i(o,null,i("div",{ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._tabsAlign}`]:!0}},this.renderButtonGroup(),i("div",{ref:this.catchTabPanelHost})))}validateAriaLabel(t){d(this,"_ariaLabel",t,{required:!0}),n(t)}validateOn(t){if("object"==typeof t&&null!==t){a("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const e={};"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:f.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?e.onCreate=t.onCreate.callback:f.debug("[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.")):e.onCreate=t.onCreate,this.showCreateTab="function"==typeof e.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),h(this,"_on",e)}}validateSelected(t){b(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){u(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),l("KolTabs",this.state._tabs.length)}validateTabsAlign(t){k(this,"_tabsAlign",t)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateTabsAlign(this._tabsAlign)}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,e,i=!1){var a,o;this._selected=e,"function"==typeof(null===(a=this._on)||void 0===a?void 0:a.onSelect)&&(null===(o=this._on)||void 0===o||o.onSelect(t,e)),!0===i&&(this.selectedTimeout=setTimeout((()=>{if(clearTimeout(this.selectedTimeout),this.tabPanelsElement){const t=c(`button#tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}),250))}get host(){return e(this)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"],_tabsAlign:["validateTabsAlign"]}}};y.style={default:w};export{y as kol_tabs};

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

@@ -1 +1 @@
-{"version":3,"names":["AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES","Set","AVAILABLE_VERTICAL_ALIGNMENT_VALUES","AVAILABLE_ALIGNMENT_VALUES","validateAlignment","component","propName","value","watchValidator","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","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","slot","appendChild","_a","host","HTMLCollection","_b","_c","onCreate","_on","_ariaLabel","_tabsAlign","renderButtonGroup","h","role","map","button","_icon","_iconOnly","_label","_tabIndex","_tooltipAlign","_variant","undefined","_customClass","_ariaControls","_ariaSelected","_id","_role","_value","class","render","Host","ref","tabPanelsElement","validateAriaLabel","watchString","required","a11yHintLabelingLandmarks","validateOn","featureHint","label","Log","debug","callback","setState","validateSelected","watchNumber","hooks","beforePatch","validateTabs","watchJsonArrayString","item","uiUxHintMillerscheZahl","validateTabsAlign","componentWillLoad","componentDidRender","removeAttribute","focus","selectedTimeout","koliBriQuerySelector"],"sources":["./src/utils/validators/alignment.ts","./src/components/tabs/style.css?tag=kol-tabs&mode=default&encapsulation=shadow","./src/components/tabs/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { Alignment } from '../../types/props';\nimport { watchValidator } from '../prop.validators';\n\nconst AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES = new Set(['\"left\", \"right\"']);\n// export const validateHorizontalAlignment = (component: Generic.Element.Component, propName: string, value?: HorizontalAlignment): void => {\n// \twatchValidator(component, propName, (value) => value === 'left' || value === 'right', AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES, value);\n// };\n\nconst AVAILABLE_VERTICAL_ALIGNMENT_VALUES = new Set(['\"bottom\", \"top\"']);\n// export const validateVertivalAlignment = (component: Generic.Element.Component, propName: string, value?: VerticalAlignment): void => {\n// \twatchValidator(component, propName, (value) => value === 'top' || value === 'bottom', AVAILABLE_VERTICAL_ALIGNMENT_VALUES, value);\n// };\n\nconst AVAILABLE_ALIGNMENT_VALUES = new Set([...AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES, ...AVAILABLE_VERTICAL_ALIGNMENT_VALUES]);\nexport const validateAlignment = (component: Generic.Element.Component, propName: string, value?: Alignment): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\tpropName,\n\t\t(value) => value === 'bottom' || value === 'left' || value === 'right' || value === 'top',\n\t\tAVAILABLE_ALIGNMENT_VALUES,\n\t\tvalue\n\t);\n};\n","@import url(../style.css);\n@import url(../host-display-block.css);\nkol-button-group-wc {\n\tdisplay: inline-flex;\n\tflex-wrap: wrap;\n}\nkol-button-group-wc button {\n\tborder: 0;\n\tborder-bottom-color: transparent;\n\tborder-bottom-style: solid;\n\tdisplay: block;\n}\ndiv.grid,\ndiv[role='tabpanel'] {\n\theight: 100%;\n}\n:host > .tabs-align-right {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n}\n:host > .tabs-align-right kol-button-group-wc {\n\tdisplay: grid;\n\torder: 2;\n}\n:host > .tabs-align-left {\n\tdisplay: grid;\n\tgrid-template-columns: auto 1fr;\n}\n:host > .tabs-align-left kol-button-group-wc {\n\tdisplay: grid;\n\torder: 0;\n}\n:host > .tabs-align-bottom {\n\tdisplay: grid;\n\tgrid-template-rows: 1fr auto;\n}\n:host > .tabs-align-bottom kol-button-group-wc {\n\torder: 2;\n}\n:host > .tabs-align-bottom kol-button-group-wc > div {\n\tdisplay: flex;\n}\n:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n\tmargin: 0 1em 0 0;\n}\n:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n\tmargin: 0 1em;\n}\n:host > .tabs-align-top {\n\tdisplay: grid;\n\tgrid-template-rows: auto 1fr;\n}\n:host > .tabs-align-top kol-button-group-wc {\n\torder: 0;\n}\n:host > .tabs-align-top kol-button-group-wc > div {\n\tdisplay: flex;\n}\n:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n\tmargin: 0 1em 0 0;\n}\n:host > .tabs-align-top > kol-button-group-wc > div > div {\n\tmargin: 0 1em;\n}\n:host > div {\n\tdisplay: grid;\n}\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-top kol-button-group-wc {\n\torder: 0;\n}\n:host > .tabs-align-bottom kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n\torder: 1;\n}\n:host > div.tabs-align-left kol-button-group-wc > div,\n:host > div.tabs-align-left kol-button-group-wc > div > div,\n:host > div.tabs-align-right kol-button-group-wc > div,\n:host > div.tabs-align-right kol-button-group-wc > div > div {\n\tdisplay: grid;\n}\n:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n\twidth: 100%;\n}\n:host > div.tabs-align-bottom kol-button-group-wc div,\n:host > div.tabs-align-top kol-button-group-wc div {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Events } from '../../enums/events';\nimport { KoliBriIconProp } from '../../types/icon';\n\nimport { Generic } from '@a11y-ui/core';\nimport { EventCallback, EventValueOrEventCallback } from '../../types/callbacks';\nimport { Stringified } from '../../types/common';\nimport { Alignment } from '../../types/props';\nimport { a11yHintLabelingLandmarks, devHint, featureHint, uiUxHintMillerscheZahl } from '../../utils/a11y.tipps';\nimport { koliBriQuerySelector, setState, watchJsonArrayString, watchNumber, watchString } from '../../utils/prop.validators';\nimport { validateAlignment } from '../../utils/validators/alignment';\nimport { translate } from '../../i18n';\nimport { KoliBriButtonCallbacks } from '../../types/button-link';\nimport { Log } from '../../utils/dev.utils';\n\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\nexport type KoliBriTabsCallbacks = /* {\n\tonClose?: true | EventOrEventValueCallback<Event, number>;\n} & */ {\n\tonCreate?:\n\t\t| EventCallback<Event>\n\t\t| {\n\t\t\t\tlabel: string;\n\t\t\t\tcallback: EventCallback<Event>;\n\t\t  };\n} & {\n\t[Events.onSelect]?: EventValueOrEventCallback<CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, number>;\n};\n\ntype RequiredTabButtonProps = {\n\tlabel: string;\n};\ntype OptionalTabButtonProps = {\n\tdisabled: boolean;\n\ticon: Stringified<KoliBriIconProp>;\n\ticonOnly: boolean;\n\ttooltipAlign: Alignment;\n};\nexport type TabButtonProps = Generic.Element.Members<RequiredTabButtonProps, OptionalTabButtonProps>;\n\ntype RequiredProps = {\n\tariaLabel: string;\n\ttabs: Stringified<TabButtonProps[]>;\n};\ntype OptionalProps = {\n\ton: KoliBriTabsCallbacks;\n\ttabsAlign: Alignment;\n\tselected: number;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\ttabsAlign: Alignment;\n\tselected: number;\n\ttabs: TabButtonProps[];\n};\ntype OptionalStates = {\n\ton: KoliBriTabsCallbacks;\n};\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\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.stopPropagation();\n\t// \tthis.onClose(button, event, index);\n\t// };\n\n\tprivate readonly onMouseDown = (event: Event): void => {\n\t\tevent.stopPropagation();\n\t};\n\n\tprivate readonly callbacks: KoliBriButtonCallbacks<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 role=\"tablist\" aria-label={this.state._ariaLabel} 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_icon={button._icon}\n\t\t\t\t\t\t_iconOnly={button._iconOnly}\n\t\t\t\t\t\t_label={button._label && button._label} // TODO: ariaLabel-Konzept prüfen\n\t\t\t\t\t\t_on={this.callbacks as KoliBriButtonCallbacks<unknown>}\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={`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._tabsAlign}`]: 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 ref={this.catchTabPanelHost}>{/* <slot /> */}</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt den Text an, der die Navigation von anderen Navigationen differenziert.\n\t */\n\t@Prop() public _ariaLabel!: string;\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 * Gibt an, welches Tab selektiert sein soll.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _selected?: number = 0;\n\n\t/**\n\t * Setzt die Daten für die Registrierkarten.\n\t */\n\t@Prop() public _tabs!: Stringified<TabButtonProps[]>;\n\n\t/**\n\t * Setzt die Position der Registrierkarten.\n\t */\n\t@Prop() public _tabsAlign?: Alignment = 'top';\n\n\t@State() public state: States = {\n\t\t_ariaLabel: '…',\n\t\t_selected: 0,\n\t\t_tabs: [],\n\t\t_tabsAlign: 'top',\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('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(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\t@Watch('_tabsAlign')\n\tpublic validateTabsAlign(value?: Alignment): void {\n\t\tvalidateAlignment(this, '_tabsAlign', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t\tthis.validateTabsAlign(this._tabsAlign);\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', `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#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.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":["AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES","Set","AVAILABLE_VERTICAL_ALIGNMENT_VALUES","AVAILABLE_ALIGNMENT_VALUES","validateAlignment","component","propName","value","watchValidator","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","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","slot","appendChild","_a","host","HTMLCollection","_b","_c","onCreate","_on","_ariaLabel","_tabsAlign","renderButtonGroup","h","role","map","button","_icon","_iconOnly","_label","_tabIndex","_tooltipAlign","_variant","undefined","_customClass","_ariaControls","_ariaSelected","_id","_role","_value","class","render","Host","ref","tabPanelsElement","validateAriaLabel","watchString","required","a11yHintLabelingLandmarks","validateOn","featureHint","label","Log","debug","callback","setState","validateSelected","watchNumber","hooks","beforePatch","validateTabs","watchJsonArrayString","item","uiUxHintMillerscheZahl","validateTabsAlign","componentWillLoad","componentDidRender","removeAttribute","focus","selectedTimeout","koliBriQuerySelector"],"sources":["./src/utils/validators/alignment.ts","./src/components/tabs/style.css?tag=kol-tabs&mode=default&encapsulation=shadow","./src/components/tabs/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { Alignment } from '../../types/props';\nimport { watchValidator } from '../prop.validators';\n\nconst AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES = new Set(['\"left\", \"right\"']);\n// export const validateHorizontalAlignment = (component: Generic.Element.Component, propName: string, value?: HorizontalAlignment): void => {\n// \twatchValidator(component, propName, (value) => value === 'left' || value === 'right', AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES, value);\n// };\n\nconst AVAILABLE_VERTICAL_ALIGNMENT_VALUES = new Set(['\"bottom\", \"top\"']);\n// export const validateVertivalAlignment = (component: Generic.Element.Component, propName: string, value?: VerticalAlignment): void => {\n// \twatchValidator(component, propName, (value) => value === 'top' || value === 'bottom', AVAILABLE_VERTICAL_ALIGNMENT_VALUES, value);\n// };\n\nconst AVAILABLE_ALIGNMENT_VALUES = new Set([...AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES, ...AVAILABLE_VERTICAL_ALIGNMENT_VALUES]);\nexport const validateAlignment = (component: Generic.Element.Component, propName: string, value?: Alignment): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\tpropName,\n\t\t(value) => value === 'bottom' || value === 'left' || value === 'right' || value === 'top',\n\t\tAVAILABLE_ALIGNMENT_VALUES,\n\t\tvalue\n\t);\n};\n","@import url(../style.css);\n@import url(../host-display-block.css);\nkol-button-group-wc {\n\tdisplay: inline-flex;\n\tflex-wrap: wrap;\n}\nkol-button-group-wc button {\n\tborder: 0;\n\tborder-bottom-color: transparent;\n\tborder-bottom-style: solid;\n\tdisplay: block;\n}\ndiv.grid,\ndiv[role='tabpanel'] {\n\theight: 100%;\n}\n:host > .tabs-align-right {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n}\n:host > .tabs-align-right kol-button-group-wc {\n\tdisplay: grid;\n\torder: 2;\n}\n:host > .tabs-align-left {\n\tdisplay: grid;\n\tgrid-template-columns: auto 1fr;\n}\n:host > .tabs-align-left kol-button-group-wc {\n\tdisplay: grid;\n\torder: 0;\n}\n:host > .tabs-align-bottom {\n\tdisplay: grid;\n\tgrid-template-rows: 1fr auto;\n}\n:host > .tabs-align-bottom kol-button-group-wc {\n\torder: 2;\n}\n:host > .tabs-align-bottom kol-button-group-wc > div {\n\tdisplay: flex;\n}\n:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n\tmargin: 0 1em 0 0;\n}\n:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n\tmargin: 0 1em;\n}\n:host > .tabs-align-top {\n\tdisplay: grid;\n\tgrid-template-rows: auto 1fr;\n}\n:host > .tabs-align-top kol-button-group-wc {\n\torder: 0;\n}\n:host > .tabs-align-top kol-button-group-wc > div {\n\tdisplay: flex;\n}\n:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n\tmargin: 0 1em 0 0;\n}\n:host > .tabs-align-top > kol-button-group-wc > div > div {\n\tmargin: 0 1em;\n}\n:host > div {\n\tdisplay: grid;\n}\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-top kol-button-group-wc {\n\torder: 0;\n}\n:host > .tabs-align-bottom kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n\torder: 1;\n}\n:host > div.tabs-align-left kol-button-group-wc > div,\n:host > div.tabs-align-left kol-button-group-wc > div > div,\n:host > div.tabs-align-right kol-button-group-wc > div,\n:host > div.tabs-align-right kol-button-group-wc > div > div {\n\tdisplay: grid;\n}\n:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n\twidth: 100%;\n}\n:host > div.tabs-align-bottom kol-button-group-wc div,\n:host > div.tabs-align-top kol-button-group-wc div {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Events } from '../../enums/events';\nimport { KoliBriIconProp } from '../../types/icon';\n\nimport { Generic } from '@a11y-ui/core';\nimport { EventCallback, EventValueOrEventCallback } from '../../types/callbacks';\nimport { Stringified } from '../../types/common';\nimport { Alignment } from '../../types/props';\nimport { a11yHintLabelingLandmarks, devHint, featureHint, uiUxHintMillerscheZahl } from '../../utils/a11y.tipps';\nimport { koliBriQuerySelector, setState, watchJsonArrayString, watchNumber, watchString } from '../../utils/prop.validators';\nimport { validateAlignment } from '../../utils/validators/alignment';\nimport { translate } from '../../i18n';\nimport { KoliBriButtonCallbacks } from '../../types/button-link';\nimport { Log } from '../../utils/dev.utils';\n\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\nexport type KoliBriTabsCallbacks = /* {\n\tonClose?: true | EventOrEventValueCallback<Event, number>;\n} & */ {\n\tonCreate?:\n\t\t| EventCallback<Event>\n\t\t| {\n\t\t\t\tlabel: string;\n\t\t\t\tcallback: EventCallback<Event>;\n\t\t  };\n} & {\n\t[Events.onSelect]?: EventValueOrEventCallback<CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, number>;\n};\n\ntype RequiredTabButtonProps = {\n\tlabel: string;\n};\ntype OptionalTabButtonProps = {\n\tdisabled: boolean;\n\ticon: Stringified<KoliBriIconProp>;\n\ticonOnly: boolean;\n\ttooltipAlign: Alignment;\n};\nexport type TabButtonProps = Generic.Element.Members<RequiredTabButtonProps, OptionalTabButtonProps>;\n\ntype RequiredProps = {\n\tariaLabel: string;\n\ttabs: Stringified<TabButtonProps[]>;\n};\ntype OptionalProps = {\n\ton: KoliBriTabsCallbacks;\n\ttabsAlign: Alignment;\n\tselected: number;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\ttabsAlign: Alignment;\n\tselected: number;\n\ttabs: TabButtonProps[];\n};\ntype OptionalStates = {\n\ton: KoliBriTabsCallbacks;\n};\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\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.stopPropagation();\n\t// \tthis.onClose(button, event, index);\n\t// };\n\n\tprivate readonly onMouseDown = (event: Event): void => {\n\t\tevent.stopPropagation();\n\t};\n\n\tprivate readonly callbacks: KoliBriButtonCallbacks<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 role=\"tablist\" aria-label={this.state._ariaLabel} 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_icon={button._icon}\n\t\t\t\t\t\t_iconOnly={button._iconOnly}\n\t\t\t\t\t\t_label={button._label && button._label} // TODO: ariaLabel-Konzept prüfen\n\t\t\t\t\t\t_on={this.callbacks as KoliBriButtonCallbacks<unknown>}\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={`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._tabsAlign}`]: 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 ref={this.catchTabPanelHost}>{/* <slot /> */}</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt den Text an, der die Navigation von anderen Navigationen differenziert.\n\t */\n\t@Prop() public _ariaLabel!: string;\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 * Gibt an, welches Tab selektiert sein soll.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _selected?: number = 0;\n\n\t/**\n\t * Setzt die Daten für die Registrierkarten.\n\t */\n\t@Prop() public _tabs!: Stringified<TabButtonProps[]>;\n\n\t/**\n\t * Setzt die Position der Registrierkarten.\n\t */\n\t@Prop() public _tabsAlign?: Alignment = 'top';\n\n\t@State() public state: States = {\n\t\t_ariaLabel: '…',\n\t\t_selected: 0,\n\t\t_tabs: [],\n\t\t_tabsAlign: 'top',\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('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(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\t@Watch('_tabsAlign')\n\tpublic validateTabsAlign(value?: Alignment): void {\n\t\tvalidateAlignment(this, '_tabsAlign', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t\tthis.validateTabsAlign(this._tabsAlign);\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', `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#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.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 i,r as a,g as s}from"./index-50adf9a0.js";import{a as n}from"./i18n-b8589f01.js";import{b as l,e as h,w as r,a as o,s as d}from"./prop.validators-2c20cdf8.js";import{a as u}from"./reuse-3a02afb9.js";import{I as p,g as c}from"./controller-ca91917c.js";import{n as f}from"./dev.utils-157f0499.js";import"./index-0962b5a1.js";import"./index-f4596895.js";import"./a11y.tipps-2e27f8e6.js";import"./tab-index-2de507bb.js";const v=(t,e)=>{l(t,"_adjustHeight",e)},m=(t,e)=>{l(t,"_hasCounter",e)};class y extends p{constructor(t,e,a){super(t,e,a),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){h(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){o(this.component,"_resize",(t=>"string"==typeof t&&("both"===t||"horizontal"===t||"none"===t||"vertical"===t)),new Set("String {both, horizontal, vertical, none}"),t)}validateRequired(t){l(this.component,"_required",t)}validateRows(t){h(this.component,"_rows",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 b=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}",_=t=>{t.style.overflow="hidden";const e=t.rows,a=t.clientHeight/e;t.rows=1;const i=Math.round(t.scrollHeight/a);return t.rows=e,i},g=class{render(){const{ariaDescribedBy:a}=c(this.state);return t(i,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{textarea:!0},_alert:this.state._alert,_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_readOnly:this.state._readOnly,_required:this.state._required,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},t("slot",null)),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-labelledby":`${this.state._id}-label`,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.onChange,style:{resize:this.state._resize},value:this.state._value})),this.state._hasCounter&&t("span",{"aria-atomic":"true","aria-live":"polite"},this.state._currentLength,this.state._maxLength&&t(e,null,t("span",{"aria-label":n("kol-of"),role:"img"},"/"),this.state._maxLength)," ",t("span",null,n("kol-characters"))))))}constructor(t){a(this,t),this.catchRef=t=>{this.ref=t,u(this.host,this.ref)},this.onChange=t=>{this.ref instanceof HTMLTextAreaElement&&(d(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=_(this.ref))),"function"==typeof this.controller.onFacade.onChange&&this.controller.onFacade.onChange(t)},this._accessKey=void 0,this._adjustHeight=!1,this._alert=!0,this._hasCounter=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._id=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=void 0,this._resize="vertical",this._required=void 0,this._rows=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_id:f(),_resize:"vertical"},this.controller=new y(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAdjustHeight(t){v(this,t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){m(this,t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateId(t){this.controller.validateId(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)}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.validateAdjustHeight(this._adjustHeight),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return s(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};g.style={default:b};export{g as kol_textarea};
+import{h as t,F as e,H as i,r as a,g as s}from"./index-50adf9a0.js";import{a as n}from"./i18n-b8589f01.js";import{b as l,e as h,w as r,a as o,s as d}from"./prop.validators-2c20cdf8.js";import{a as u}from"./reuse-3a02afb9.js";import{I as p,g as c}from"./controller-ca91917c.js";import{n as f}from"./dev.utils-157f0499.js";import"./index-0962b5a1.js";import"./index-f4596895.js";import"./a11y.tipps-2e27f8e6.js";import"./tab-index-2de507bb.js";const v=(t,e)=>{l(t,"_adjustHeight",e)},m=(t,e)=>{l(t,"_hasCounter",e)};class y extends p{constructor(t,e,a){super(t,e,a),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){h(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){o(this.component,"_resize",(t=>"string"==typeof t&&("both"===t||"horizontal"===t||"none"===t||"vertical"===t)),new Set("String {both, horizontal, vertical, none}"),t)}validateRequired(t){l(this.component,"_required",t)}validateRows(t){h(this.component,"_rows",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 b=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}",_=t=>{t.style.overflow="hidden";const e=t.rows,a=t.clientHeight/e;t.rows=1;const i=Math.round(t.scrollHeight/a);return t.rows=e,i},g=class{render(){const{ariaDescribedBy:a}=c(this.state);return t(i,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{textarea:!0},_alert:this.state._alert,_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_readOnly:this.state._readOnly,_required:this.state._required,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},t("slot",null)),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-labelledby":`${this.state._id}-label`,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.onChange,style:{resize:this.state._resize},value:this.state._value})),this.state._hasCounter&&t("span",{"aria-atomic":"true","aria-live":"polite"},this.state._currentLength,this.state._maxLength&&t(e,null,t("span",{"aria-label":n("kol-of"),role:"img"},"/"),this.state._maxLength)," ",t("span",null,n("kol-characters"))))))}constructor(t){a(this,t),this.catchRef=t=>{this.ref=t,u(this.host,this.ref)},this.onChange=t=>{this.ref instanceof HTMLTextAreaElement&&(d(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=_(this.ref))),"function"==typeof this.controller.onFacade.onChange&&this.controller.onFacade.onChange(t)},this._accessKey=void 0,this._adjustHeight=!1,this._alert=!0,this._hasCounter=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._id=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=void 0,this._resize="vertical",this._required=void 0,this._rows=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_id:f(),_resize:"vertical"},this.controller=new y(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAdjustHeight(t){v(this,t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){m(this,t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateId(t){this.controller.validateId(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)}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.validateAdjustHeight(this._adjustHeight),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return s(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};g.style={default:b};export{g as kol_textarea};

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

@@ -1 +1 @@
-{"version":3,"names":["validateAdjustHeight","component","value","watchBoolean","validateHasCounter","TextareaController","InputController","constructor","name","host","super","this","afterSyncCharCounter","_value","length","state","_currentLength","hooks","afterPatch","validateMaxLength","watchNumber","min","validatePlaceholder","watchString","validateReadOnly","validateResize","watchValidator","Set","validateRequired","validateRows","validateValue","setFormAssociatedValue","componentWillLoad","_hasCounter","_maxLength","_placeholder","_readOnly","_resize","_required","_rows","defaultStyleCss","increaseTextareaHeight","el","style","overflow","currentRows","rows","rowHeight","clientHeight","nextRows","Math","round","scrollHeight","KolTextarea","render","ariaDescribedBy","getRenderStates","h","Host","class","_hasValue","textarea","_alert","_disabled","_error","_hideLabel","_hint","_id","_touched","onClick","_a","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoCorrect","disabled","id","maxlength","_name","readOnly","required","placeholder","spellcheck","controller","onFacade","onKeyUp","onChange","resize","Fragment","translate","role","hostRef","propagateFocus","event","HTMLTextAreaElement","setState","_adjustHeight","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateId","validateName","validateOn","validateTabIndex","validateTouched","addValueChangeListener","v"],"sources":["./src/types/props/adjust-height.ts","./src/types/props/has-counter.ts","./src/components/textarea/controller.ts","./src/components/textarea/style.css?tag=kol-textarea&mode=default&encapsulation=shadow","./src/components/textarea/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Passt die Höhe des Eingabefeldes automatisch an den Füllstand an.\n */\n/** en\n * Adjusts the height of the element to its content.\n */\nexport type PropAdjustHeight = {\n\tadjustHeight: boolean;\n};\n\n/* validator */\nexport const validateAdjustHeight = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_adjustHeight', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Zeigt die Zeichenanzahlanzeige am unteren Rand des EIngabefeldes.\n */\n/** en\n * Shows the the character count on the lower border of the input.\n */\nexport type PropHasCounter = {\n\thasCounter: boolean;\n};\n\n/* validator */\nexport const validateHasCounter = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_hasCounter', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean, watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { InputController } from '../@deprecated/input/controller';\nimport { CSSResize, Props, Watches } from './types';\n\nexport class TextareaController extends InputController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tprivate afterSyncCharCounter = () => {\n\t\tif (typeof this.component._value === 'string' && this.component._value.length > 0) {\n\t\t\tthis.component.state._currentLength = this.component._value.length;\n\t\t}\n\t};\n\n\tpublic validateHasCounter(value?: boolean): void {\n\t\twatchBoolean(this.component, '_hasCounter', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMaxLength(value?: number): void {\n\t\twatchNumber(this.component, '_maxLength', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t\tmin: 0,\n\t\t});\n\t}\n\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\n\tpublic validateReadOnly(value?: boolean): void {\n\t\twatchBoolean(this.component, '_readOnly', value);\n\t}\n\n\tpublic validateResize(value?: CSSResize): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_resize',\n\t\t\t(value) => typeof value === 'string' && (value === 'both' || value === 'horizontal' || value === 'none' || value === 'vertical'),\n\t\t\tnew Set('String {both, horizontal, vertical, none}'),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: number): void {\n\t\twatchNumber(this.component, '_rows', value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateHasCounter(this.component._hasCounter);\n\t\tthis.validateMaxLength(this.component._maxLength);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateReadOnly(this.component._readOnly);\n\t\tthis.validateResize(this.component._resize);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n","import { Component, Element, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { translate } from '../../i18n';\n\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { validateAdjustHeight, validateHasCounter } from '../../types/props';\nimport { setState } from '../../utils/prop.validators';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { TextareaController } from './controller';\nimport { ComponentApi, CSSResize, States } from './types';\nimport { nonce } from '../../utils/dev.utils';\n\n/**\n * https://stackoverflow.com/questions/17772260/textarea-auto-height\n */\nconst increaseTextareaHeight = (el: HTMLTextAreaElement): number => {\n\tel.style.overflow = 'hidden'; // verhindert, dass ein Scrollbalken kurz angezeigt wird\n\tconst currentRows = el.rows;\n\tconst rowHeight = el.clientHeight / currentRows;\n\tel.rows = 1;\n\tconst nextRows = Math.round(el.scrollHeight / rowHeight);\n\tel.rows = currentRows;\n\treturn nextRows;\n};\n\n/**\n * @slot default Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-textarea',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTextarea implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolTextareaElement;\n\tprivate ref?: HTMLTextAreaElement;\n\n\tprivate readonly catchRef = (ref?: HTMLTextAreaElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\ttextarea: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_readOnly={this.state._readOnly}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t// aria-hidden=\"true\" // Wieso ist das hier?\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\trows={this.state._rows}\n\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonKeyUp={this.onChange}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tresize: this.state._resize,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t></textarea>\n\t\t\t\t\t\t{/**\n\t\t\t\t\t\t * https://webstandardssherpa.com/reviews/improving-the-tweet-box/\n\t\t\t\t\t\t * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live\n\t\t\t\t\t\t */}\n\t\t\t\t\t\t{this.state._hasCounter && (\n\t\t\t\t\t\t\t<span aria-atomic=\"true\" aria-live=\"polite\">\n\t\t\t\t\t\t\t\t{this.state._currentLength}\n\t\t\t\t\t\t\t\t{this.state._maxLength && (\n\t\t\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t\t\t<span aria-label={translate('kol-of')} role=\"img\">\n\t\t\t\t\t\t\t\t\t\t\t/\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t{this.state._maxLength}\n\t\t\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t\t<span>{translate('kol-characters')}</span>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: TextareaController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Passt die Höhe des Eingabefeldes automatisch an den Füllstand an.\n\t */\n\t@Prop({ reflect: true }) public _adjustHeight?: boolean = false;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Aktiviert den Zeichenanzahlzähler am unteren Rand des Eingabefeldes.\n\t */\n\t@Prop({ reflect: true }) public _hasCounter?: boolean;\n\n\t/**\n\t * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Setzt die maximale Zeichenanzahl.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Setzt das Eingabefeld in den schreibgeschützten Modus.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean;\n\n\t/**\n\t * Gibt an, ob die Größe des Eingabefeldes von Nutzer:innen geändert werden kann. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t */\n\t@Prop() public _resize?: CSSResize = 'vertical';\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Gibt die Anzahl der anzuzeigenden Zeilen des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _rows?: number;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_adjustHeight: false,\n\t\t_currentLength: 0,\n\t\t_hasValue: false,\n\t\t_id: nonce(), // ⚠ required\n\t\t_resize: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new TextareaController(this, 'textarea', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_adjustHeight')\n\tpublic validateAdjustHeight(value?: boolean): void {\n\t\tvalidateAdjustHeight(this, value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tvalidateHasCounter(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_resize')\n\tpublic validateResize(value?: CSSResize): void {\n\t\tthis.controller.validateResize(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: number): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.validateAdjustHeight(this._adjustHeight);\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tif (this.ref instanceof HTMLTextAreaElement) {\n\t\t\tsetState(this, '_currentLength', this.ref.value.length);\n\t\t\tif (this.state._adjustHeight) {\n\t\t\t\tthis._rows = increaseTextareaHeight(this.ref);\n\t\t\t}\n\t\t}\n\t\tif (typeof this.controller.onFacade.onChange === 'function') {\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n}\n"],"mappings":"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"}
+{"version":3,"names":["validateAdjustHeight","component","value","watchBoolean","validateHasCounter","TextareaController","InputController","constructor","name","host","super","this","afterSyncCharCounter","_value","length","state","_currentLength","hooks","afterPatch","validateMaxLength","watchNumber","min","validatePlaceholder","watchString","validateReadOnly","validateResize","watchValidator","Set","validateRequired","validateRows","validateValue","setFormAssociatedValue","componentWillLoad","_hasCounter","_maxLength","_placeholder","_readOnly","_resize","_required","_rows","defaultStyleCss","increaseTextareaHeight","el","style","overflow","currentRows","rows","rowHeight","clientHeight","nextRows","Math","round","scrollHeight","KolTextarea","render","ariaDescribedBy","getRenderStates","h","Host","class","_hasValue","textarea","_alert","_disabled","_error","_hideLabel","_hint","_id","_touched","onClick","_a","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoCorrect","disabled","id","maxlength","_name","readOnly","required","placeholder","spellcheck","controller","onFacade","onKeyUp","onChange","resize","Fragment","translate","role","hostRef","propagateFocus","event","HTMLTextAreaElement","setState","_adjustHeight","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateId","validateName","validateOn","validateTabIndex","validateTouched","addValueChangeListener","v"],"sources":["./src/types/props/adjust-height.ts","./src/types/props/has-counter.ts","./src/components/textarea/controller.ts","./src/components/textarea/style.css?tag=kol-textarea&mode=default&encapsulation=shadow","./src/components/textarea/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Passt die Höhe des Eingabefeldes automatisch an den Füllstand an.\n */\n/** en\n * Adjusts the height of the element to its content.\n */\nexport type PropAdjustHeight = {\n\tadjustHeight: boolean;\n};\n\n/* validator */\nexport const validateAdjustHeight = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_adjustHeight', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Zeigt die Zeichenanzahlanzeige am unteren Rand des EIngabefeldes.\n */\n/** en\n * Shows the the character count on the lower border of the input.\n */\nexport type PropHasCounter = {\n\thasCounter: boolean;\n};\n\n/* validator */\nexport const validateHasCounter = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_hasCounter', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean, watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { InputController } from '../@deprecated/input/controller';\nimport { CSSResize, Props, Watches } from './types';\n\nexport class TextareaController extends InputController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tprivate afterSyncCharCounter = () => {\n\t\tif (typeof this.component._value === 'string' && this.component._value.length > 0) {\n\t\t\tthis.component.state._currentLength = this.component._value.length;\n\t\t}\n\t};\n\n\tpublic validateHasCounter(value?: boolean): void {\n\t\twatchBoolean(this.component, '_hasCounter', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMaxLength(value?: number): void {\n\t\twatchNumber(this.component, '_maxLength', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t\tmin: 0,\n\t\t});\n\t}\n\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\n\tpublic validateReadOnly(value?: boolean): void {\n\t\twatchBoolean(this.component, '_readOnly', value);\n\t}\n\n\tpublic validateResize(value?: CSSResize): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_resize',\n\t\t\t(value) => typeof value === 'string' && (value === 'both' || value === 'horizontal' || value === 'none' || value === 'vertical'),\n\t\t\tnew Set('String {both, horizontal, vertical, none}'),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: number): void {\n\t\twatchNumber(this.component, '_rows', value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateHasCounter(this.component._hasCounter);\n\t\tthis.validateMaxLength(this.component._maxLength);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateReadOnly(this.component._readOnly);\n\t\tthis.validateResize(this.component._resize);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n","import { Component, Element, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { translate } from '../../i18n';\n\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { validateAdjustHeight, validateHasCounter } from '../../types/props';\nimport { setState } from '../../utils/prop.validators';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { TextareaController } from './controller';\nimport { ComponentApi, CSSResize, States } from './types';\nimport { nonce } from '../../utils/dev.utils';\n\n/**\n * https://stackoverflow.com/questions/17772260/textarea-auto-height\n */\nconst increaseTextareaHeight = (el: HTMLTextAreaElement): number => {\n\tel.style.overflow = 'hidden'; // verhindert, dass ein Scrollbalken kurz angezeigt wird\n\tconst currentRows = el.rows;\n\tconst rowHeight = el.clientHeight / currentRows;\n\tel.rows = 1;\n\tconst nextRows = Math.round(el.scrollHeight / rowHeight);\n\tel.rows = currentRows;\n\treturn nextRows;\n};\n\n/**\n * @slot default - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-textarea',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTextarea implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolTextareaElement;\n\tprivate ref?: HTMLTextAreaElement;\n\n\tprivate readonly catchRef = (ref?: HTMLTextAreaElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\ttextarea: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_readOnly={this.state._readOnly}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t// aria-hidden=\"true\" // Wieso ist das hier?\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\trows={this.state._rows}\n\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonKeyUp={this.onChange}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tresize: this.state._resize,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t></textarea>\n\t\t\t\t\t\t{/**\n\t\t\t\t\t\t * https://webstandardssherpa.com/reviews/improving-the-tweet-box/\n\t\t\t\t\t\t * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live\n\t\t\t\t\t\t */}\n\t\t\t\t\t\t{this.state._hasCounter && (\n\t\t\t\t\t\t\t<span aria-atomic=\"true\" aria-live=\"polite\">\n\t\t\t\t\t\t\t\t{this.state._currentLength}\n\t\t\t\t\t\t\t\t{this.state._maxLength && (\n\t\t\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t\t\t<span aria-label={translate('kol-of')} role=\"img\">\n\t\t\t\t\t\t\t\t\t\t\t/\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t{this.state._maxLength}\n\t\t\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t\t<span>{translate('kol-characters')}</span>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: TextareaController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Passt die Höhe des Eingabefeldes automatisch an den Füllstand an.\n\t */\n\t@Prop({ reflect: true }) public _adjustHeight?: boolean = false;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Aktiviert den Zeichenanzahlzähler am unteren Rand des Eingabefeldes.\n\t */\n\t@Prop({ reflect: true }) public _hasCounter?: boolean;\n\n\t/**\n\t * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Setzt die maximale Zeichenanzahl.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Setzt das Eingabefeld in den schreibgeschützten Modus.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean;\n\n\t/**\n\t * Gibt an, ob die Größe des Eingabefeldes von Nutzer:innen geändert werden kann. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t */\n\t@Prop() public _resize?: CSSResize = 'vertical';\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Gibt die Anzahl der anzuzeigenden Zeilen des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _rows?: number;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_adjustHeight: false,\n\t\t_currentLength: 0,\n\t\t_hasValue: false,\n\t\t_id: nonce(), // ⚠ required\n\t\t_resize: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new TextareaController(this, 'textarea', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_adjustHeight')\n\tpublic validateAdjustHeight(value?: boolean): void {\n\t\tvalidateAdjustHeight(this, value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tvalidateHasCounter(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_resize')\n\tpublic validateResize(value?: CSSResize): void {\n\t\tthis.controller.validateResize(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: number): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.validateAdjustHeight(this._adjustHeight);\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tif (this.ref instanceof HTMLTextAreaElement) {\n\t\t\tsetState(this, '_currentLength', this.ref.value.length);\n\t\t\tif (this.state._adjustHeight) {\n\t\t\t\tthis._rows = increaseTextareaHeight(this.ref);\n\t\t\t}\n\t\t}\n\t\tif (typeof this.controller.onFacade.onChange === 'function') {\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n}\n"],"mappings":"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"}