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

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

@@ -1 +1 @@
-{"version":3,"names":["validateTableHeaderCells","component","value","emptyStringByArrayHandler","objectObjectHandler","parseJson","e","watchValidator","Set","KolTableStateless","this","horizontal","cellsToRenderTimeouts","Map","dataToKeyMap","checkboxRefs","renderTableRow","row","rowIndex","isVertical","key","String","_a","data","_b","getDataKey","h","renderSelectionCell","map","cell","colIndex","renderTableCell","label","dataKey","asTd","renderHeadingCell","class","textAlign","length","colSpan","rowSpan","style","width","ref","render","el","cellRender","undefined","_data","_label","_headerCells","vertical","validateData","validateTableData","beforePatch","nextValue","updateDataToKeyMap","validateDataFoot","validateTableDataFoot","validateHeaderCells","validateLabel","required","validateMinWidth","watchString","defaultValue","validateOn","validateTableCallbacks","validateSelection","validateTableSelection","handleKeyDown","event","focusedElement","tableDivElement","querySelector","index","indexOf","preventDefault","focus","componentDidRender","checkDivElementScrollbar","componentDidLoad","ResizeObserver","tableDivElementResizeObserver","bind","observe","disconnectedCallback","disconnect","tableDivElementHasScrollbar","scrollWidth","clientWidth","forEach","has","set","nonce","_","includes","delete","get","clearTimeout","setTimeout","renderContent","state","textContent","getNumberOfCols","horizontalHeaders","max","count","col","getNumberOfRows","verticalHeaders","_dataFoot","filterHeaderKeys","headers","primaryHeader","cells","push","getPrimaryHeader","createDataField","isFoot","Array","isArray","maxCols","maxRows","startRow","dataField","rowCount","rowSpans","_row","i","dataRow","headerCells","rowsTotal","rows","Object","assign","k","j","colspan","rowspan","emptyCell","translate","Math","componentWillLoad","_minWidth","_on","_selection","selection","keyPropertyName","firstCellData","keyProperty","isMultiple","multiple","selected","_c","selectedKeys","props","name","checked","id","KolIconTag","_icons","type","onInput","updatedSelectedKeys","filter","tryToDispatchKoliBriEvent","host","Events","onSelectionChange","KolTooltipWcTag","_align","_id","renderHeadingSelectionCell","selectedKeyLength","dataLength","isChecked","indeterminate","translationKey","selections","ariaSort","sortButtonIcon","sortDirection","scope","KolButtonWcTag","exportparts","right","onClick","onSort","currentSortDirection","renderSpacer","variant","cellDefs","reduce","acc","renderFoot","Host","element","tabindex","minWidth","cols"],"sources":["src/schema/props/table-header-cells.ts","src/components/table-stateless/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport { emptyStringByArrayHandler, objectObjectHandler, parseJson, watchValidator } from '../utils';\nimport type { KoliBriTableHeaderCell, Stringified } from '../types';\n\n/* types */\nexport type TableHeaderCells = {\n\thorizontal?: KoliBriTableHeaderCell[][];\n\tvertical?: KoliBriTableHeaderCell[][];\n};\n\nexport type TableHeaderCellsPropType = Stringified<TableHeaderCells>;\n\n/**\n * Defines the horizontal and vertical table header cells.\n */\nexport type PropTableHeaderCells = {\n\theaderCells: TableHeaderCellsPropType;\n};\n\n/* validator */\nexport const validateTableHeaderCells = (component: Generic.Element.Component, value?: TableHeaderCellsPropType): void => {\n\temptyStringByArrayHandler(value, () => {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<TableHeaderCells>(value);\n\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\n\t\t\t\t// value keeps the original data\n\t\t\t}\n\t\t\twatchValidator(component, '_headerCells', (value): boolean => typeof value === 'object' && value !== null, new Set(['TableHeaderCellsPropType']), value);\n\t\t});\n\t});\n};\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport type {\n\tKoliBriTableCell,\n\tKoliBriTableDataType,\n\tKoliBriTableHeaderCell,\n\tKoliBriTableHeaderCellWithLogic,\n\tKoliBriTableHeaders,\n\tKoliBriTableRender,\n\tLabelPropType,\n\tTableCallbacksPropType,\n\tTableDataFootPropType,\n\tTableDataPropType,\n\tTableHeaderCellsPropType,\n\tTableSelectionPropType,\n\tTableStatelessAPI,\n\tTableStatelessStates,\n} from '../../schema';\nimport {\n\tvalidateLabel,\n\tvalidateTableCallbacks,\n\tvalidateTableData,\n\tvalidateTableDataFoot,\n\tvalidateTableHeaderCells,\n\tvalidateTableSelection,\n\twatchString,\n} from '../../schema';\nimport { KolButtonWcTag, KolIconTag, KolTooltipWcTag } from '../../core/component-names';\nimport type { TranslationKey } from '../../i18n';\nimport { translate } from '../../i18n';\nimport { tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { Events } from '../../schema/enums';\nimport { nonce } from '../../utils/dev.utils';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-table-stateless-wc',\n\tshadow: false,\n})\nexport class KolTableStateless implements TableStatelessAPI {\n\t@Element() private readonly host?: HTMLKolTableStatelessWcElement;\n\n\t@State() public state: TableStatelessStates = {\n\t\t_data: [],\n\t\t_label: '',\n\t\t_headerCells: {\n\t\t\thorizontal: [],\n\t\t\tvertical: [],\n\t\t},\n\t};\n\n\tprivate tableDivElement?: HTMLDivElement;\n\tprivate tableDivElementResizeObserver?: ResizeObserver;\n\tprivate horizontal = true;\n\tprivate cellsToRenderTimeouts = new Map<HTMLElement, ReturnType<typeof setTimeout>>();\n\tprivate dataToKeyMap = new Map<KoliBriTableDataType, string>();\n\n\tprivate checkboxRefs: HTMLInputElement[] = [];\n\n\t@State()\n\tprivate tableDivElementHasScrollbar = false;\n\n\t/**\n\t * Defines the primary table data.\n\t */\n\t@Prop() public _data!: TableDataPropType;\n\n\t/**\n\t * Defines the data for the table footer.\n\t */\n\t@Prop() public _dataFoot?: TableDataFootPropType;\n\n\t/**\n\t * Defines the horizontal and vertical table headers.\n\t */\n\t@Prop() public _headerCells!: TableHeaderCellsPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Defines the table min-width.\n\t */\n\t@Prop() public _minWidth?: string;\n\n\t/**\n\t * Defines the callback functions for table events.\n\t */\n\t@Prop() public _on?: TableCallbacksPropType;\n\n\t/**\n\t * Defines how rows can be selected and the current selection.\n\t */\n\t@Prop() public _selection?: TableSelectionPropType;\n\n\t@Watch('_data')\n\tpublic validateData(value?: TableDataPropType) {\n\t\tvalidateTableData(this, value, {\n\t\t\tbeforePatch: (nextValue) => {\n\t\t\t\tthis.updateDataToKeyMap(nextValue as KoliBriTableDataType[]);\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_dataFoot')\n\tpublic validateDataFoot(value?: TableDataFootPropType) {\n\t\tvalidateTableDataFoot(this, value);\n\t}\n\n\t@Watch('_headerCells')\n\tpublic validateHeaderCells(value?: TableHeaderCellsPropType) {\n\t\tvalidateTableHeaderCells(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_minWidth')\n\tpublic validateMinWidth(value?: string): void {\n\t\twatchString(this, '_minWidth', value, {\n\t\t\tdefaultValue: undefined,\n\t\t});\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: TableCallbacksPropType): void {\n\t\tvalidateTableCallbacks(this, value);\n\t}\n\n\t@Watch('_selection')\n\tpublic validateSelection(value?: TableSelectionPropType): void {\n\t\tvalidateTableSelection(this, value);\n\t}\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent) {\n\t\tif (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n\t\t\tconst focusedElement = this.tableDivElement?.querySelector(':focus') as HTMLInputElement;\n\t\t\tlet index = this.checkboxRefs.indexOf(focusedElement);\n\n\t\t\tif (index > -1) {\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\tif (event.key === 'ArrowDown') {\n\t\t\t\t\tindex = (index + 1) % this.checkboxRefs.length;\n\t\t\t\t\tthis.checkboxRefs[index].focus();\n\t\t\t\t} else if (event.key === 'ArrowUp') {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tindex = (index + this.checkboxRefs.length - 1) % this.checkboxRefs.length;\n\t\t\t\t\tthis.checkboxRefs[index].focus();\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic componentDidRender(): void {\n\t\tthis.checkDivElementScrollbar();\n\t}\n\n\tpublic componentDidLoad() {\n\t\tif (this.tableDivElement && ResizeObserver) {\n\t\t\tthis.tableDivElementResizeObserver = new ResizeObserver(this.checkDivElementScrollbar.bind(this));\n\t\t\tthis.tableDivElementResizeObserver.observe(this.tableDivElement);\n\t\t}\n\t}\n\n\tpublic disconnectedCallback() {\n\t\tthis.tableDivElementResizeObserver?.disconnect();\n\t}\n\n\tprivate checkDivElementScrollbar() {\n\t\tif (this.tableDivElement) {\n\t\t\tthis.tableDivElementHasScrollbar = this.tableDivElement.scrollWidth > this.tableDivElement.clientWidth;\n\t\t}\n\t}\n\n\tprivate updateDataToKeyMap(data: KoliBriTableDataType[]) {\n\t\tdata.forEach((data) => {\n\t\t\tif (!this.dataToKeyMap.has(data)) {\n\t\t\t\tthis.dataToKeyMap.set(data, nonce());\n\t\t\t}\n\t\t});\n\n\t\t/* Cleanup old values from map */\n\t\tthis.dataToKeyMap.forEach((_, key) => {\n\t\t\tif (!data.includes(key)) {\n\t\t\t\tthis.dataToKeyMap.delete(key);\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate getDataKey(data: KoliBriTableDataType) {\n\t\treturn this.dataToKeyMap.get(data);\n\t}\n\n\t/**\n\t * Applies a custom render function to a specific table cell if provided.\n\t * Ensures that the content is updated after a delay to avoid excessive re-renders.\n\t *\n\t * @param {KoliBriTableCell} cell The cell to be rendered, with a possible custom `render` function.\n\t * @param {HTMLElement} el The HTML element where the cell is rendered.\n\t */\n\tprivate cellRender(cell: KoliBriTableCell, el?: HTMLElement): void {\n\t\tif (el) {\n\t\t\tclearTimeout(this.cellsToRenderTimeouts.get(el));\n\t\t\tthis.cellsToRenderTimeouts.set(\n\t\t\t\tel,\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tif (typeof cell.render === 'function') {\n\t\t\t\t\t\tconst renderContent = cell.render(el, cell, cell.data, this.state._data);\n\t\t\t\t\t\tif (typeof renderContent === 'string') {\n\t\t\t\t\t\t\tel.textContent = renderContent;\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 getNumberOfCols(horizontalHeaders: KoliBriTableHeaderCell[][], data: KoliBriTableDataType[]): number {\n\t\tlet max = 0;\n\t\thorizontalHeaders.forEach((row) => {\n\t\t\tlet count = 0;\n\t\t\trow.forEach((col) => (count += col.colSpan ?? 1));\n\t\t\tif (max < count) {\n\t\t\t\tmax = count;\n\t\t\t}\n\t\t});\n\t\tif (max === 0) {\n\t\t\tmax = data.length;\n\t\t}\n\t\treturn max;\n\t}\n\n\tprivate getNumberOfRows(verticalHeaders: KoliBriTableHeaderCell[][], data: KoliBriTableDataType[]): number {\n\t\tlet max = 0;\n\t\tverticalHeaders.forEach((col) => {\n\t\t\tlet count = 0;\n\t\t\tcol.forEach((row) => (count += row.rowSpan ?? 1));\n\t\t\tif (max < count) {\n\t\t\t\tmax = count;\n\t\t\t}\n\t\t});\n\t\tif (max === 0) {\n\t\t\tmax = data.length;\n\t\t} else {\n\t\t\tmax -= this.state._dataFoot?.length || 0;\n\t\t}\n\t\treturn max;\n\t}\n\n\tprivate filterHeaderKeys(headers: KoliBriTableHeaderCell[][]): KoliBriTableHeaderCell[] {\n\t\tconst primaryHeader: KoliBriTableHeaderCell[] = [];\n\t\theaders.forEach((cells) => {\n\t\t\tcells.forEach((cell) => {\n\t\t\t\tif (typeof cell.key === 'string') {\n\t\t\t\t\tprimaryHeader.push(cell);\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t\treturn primaryHeader;\n\t}\n\n\tprivate getPrimaryHeader(headers: KoliBriTableHeaders): KoliBriTableHeaderCell[] {\n\t\tlet primaryHeader: KoliBriTableHeaderCell[] = this.filterHeaderKeys(headers.horizontal ?? []);\n\t\tthis.horizontal = true;\n\t\tif (primaryHeader.length === 0) {\n\t\t\tprimaryHeader = this.filterHeaderKeys(headers.vertical ?? []);\n\t\t\tif (primaryHeader.length > 0) {\n\t\t\t\tthis.horizontal = false;\n\t\t\t}\n\t\t}\n\t\treturn primaryHeader;\n\t}\n\n\tprivate createDataField(data: KoliBriTableDataType[], headers: KoliBriTableHeaders, isFoot?: boolean): (KoliBriTableCell & KoliBriTableDataType)[][] {\n\t\theaders.horizontal = Array.isArray(headers?.horizontal) ? headers.horizontal : [];\n\t\theaders.vertical = Array.isArray(headers?.vertical) ? headers.vertical : [];\n\t\tconst primaryHeader = this.getPrimaryHeader(headers);\n\t\tconst maxCols = this.getNumberOfCols(headers.horizontal, data);\n\t\tlet maxRows = this.getNumberOfRows(headers.vertical, data);\n\t\tlet startRow = 0;\n\t\tif (isFoot) {\n\t\t\tstartRow = maxRows;\n\t\t\tmaxRows += this.state._dataFoot?.length || 0;\n\t\t}\n\t\tconst dataField: KoliBriTableCell[][] = [];\n\n\t\tconst rowCount: number[] = [];\n\t\tconst rowSpans: number[][] = [];\n\t\theaders.vertical.forEach((_row, index) => {\n\t\t\trowCount[index] = 0;\n\t\t\trowSpans[index] = [];\n\t\t});\n\n\t\tfor (let i = startRow; i < maxRows; i++) {\n\t\t\tconst dataRow: KoliBriTableHeaderCellWithLogic[] = [];\n\t\t\theaders.vertical.forEach((headerCells, index) => {\n\t\t\t\tlet rowsTotal = 0;\n\t\t\t\trowSpans[index].forEach((value) => (rowsTotal += value));\n\t\t\t\tif (rowsTotal <= i) {\n\t\t\t\t\tconst rows = headerCells[i - rowsTotal + rowCount[index]];\n\t\t\t\t\tif (typeof rows === 'object') {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...rows,\n\t\t\t\t\t\t\tasTd: false,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: {} as KoliBriTableDataType,\n\t\t\t\t\t\t});\n\t\t\t\t\t\tlet rowSpan = 1;\n\t\t\t\t\t\tif (typeof rows.rowSpan === 'number' && rows.rowSpan > 1) {\n\t\t\t\t\t\t\trowSpan = rows.rowSpan;\n\t\t\t\t\t\t}\n\t\t\t\t\t\trowSpans[index].push(rowSpan);\n\t\t\t\t\t\tif (typeof rows.colSpan === 'number' && rows.colSpan > 1) {\n\t\t\t\t\t\t\tfor (let k = 1; k < rows.colSpan; k++) {\n\t\t\t\t\t\t\t\trowSpans[index + k].push(rowSpan);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\trowCount[index]++;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t\tfor (let j = 0; j < maxCols; j++) {\n\t\t\t\tif (this.horizontal === true) {\n\t\t\t\t\tconst row = isFoot && this.state._dataFoot ? this.state._dataFoot[i - startRow] : data[i];\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof primaryHeader[j] === 'object' &&\n\t\t\t\t\t\tprimaryHeader[j] !== null &&\n\t\t\t\t\t\ttypeof primaryHeader[j].key === 'string' &&\n\t\t\t\t\t\ttypeof row === 'object' &&\n\t\t\t\t\t\trow !== null\n\t\t\t\t\t) {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...primaryHeader[j],\n\t\t\t\t\t\t\tcolSpan: undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: row,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tlabel: row[primaryHeader[j].key as unknown as string] as string,\n\t\t\t\t\t\t\trowSpan: undefined,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof primaryHeader[i] === 'object' &&\n\t\t\t\t\t\tprimaryHeader[i] !== null &&\n\t\t\t\t\t\ttypeof primaryHeader[i].key === 'string' &&\n\t\t\t\t\t\ttypeof data[j] === 'object' &&\n\t\t\t\t\t\tdata[j] !== null\n\t\t\t\t\t) {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...primaryHeader[i],\n\t\t\t\t\t\t\tcolSpan: undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: data[j],\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tlabel: data[j][primaryHeader[i].key as unknown as number] as string,\n\t\t\t\t\t\t\trowSpan: undefined,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tdataField.push(dataRow);\n\t\t}\n\t\tif (data.length === 0) {\n\t\t\tlet colspan = 0;\n\t\t\tlet rowspan = 0;\n\t\t\tif (Array.isArray(headers.horizontal) && headers.horizontal.length > 0) {\n\t\t\t\theaders.horizontal[0].forEach((col) => {\n\t\t\t\t\tcolspan += col.colSpan || 1;\n\t\t\t\t});\n\t\t\t}\n\t\t\tif (Array.isArray(headers.vertical) && headers.vertical.length > 0) {\n\t\t\t\tcolspan -= headers.vertical.length;\n\t\t\t\theaders.vertical[0].forEach((row) => {\n\t\t\t\t\trowspan += row.rowSpan || 1;\n\t\t\t\t});\n\t\t\t}\n\t\t\tconst emptyCell = {\n\t\t\t\tcolSpan: colspan,\n\t\t\t\tlabel: translate('kol-no-entries'),\n\t\t\t\trender: undefined,\n\t\t\t\trowSpan: Math.max(rowspan, 1),\n\t\t\t};\n\t\t\tif (dataField.length === 0) {\n\t\t\t\tdataField.push([emptyCell]);\n\t\t\t} else {\n\t\t\t\tdataField[0].push(emptyCell);\n\t\t\t}\n\t\t}\n\t\treturn dataField;\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateData(this._data);\n\t\tthis.validateDataFoot(this._dataFoot);\n\t\tthis.validateHeaderCells(this._headerCells);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMinWidth(this._minWidth);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelection(this._selection);\n\t}\n\n\t/**\n\t * Renders the selection cell for a row, either as a checkbox (for multiple selection)\n\t * or as a radio button (for single selection). It handles selection states and dispatches\n\t * events for selection changes.\n\t *\n\t * @param {KoliBriTableCell[]} row  The row data containing the cell with selection properties.\n\t * @param {number} rowIndex  The index of the row.\n\t * @returns {JSX.Element}  The rendered selection cell, either with a checkbox or radio input.\n\t */\n\tprivate renderSelectionCell(row: (KoliBriTableCell & KoliBriTableDataType)[], rowIndex: number): JSX.Element {\n\t\tconst selection = this.state._selection;\n\t\tif (!selection) return '';\n\t\tconst keyPropertyName = selection.keyPropertyName ?? 'id';\n\t\tconst firstCellData = row[0]?.data;\n\n\t\tif (!firstCellData) return '';\n\t\tconst keyProperty = firstCellData[keyPropertyName] as string;\n\t\tconst isMultiple = selection.multiple || selection.multiple === undefined;\n\t\tconst selected = selection?.selectedKeys?.includes(keyProperty);\n\t\tconst label = selection.label(firstCellData);\n\t\tconst props = {\n\t\t\tname: 'selection',\n\t\t\tchecked: selected,\n\t\t\tid: keyProperty,\n\t\t\t['aria-label']: label,\n\t\t};\n\t\treturn (\n\t\t\t<td key={`tbody-${rowIndex}-selection`} class=\"selection-cell\">\n\t\t\t\t<div class={`input ${selected ? 'checked' : ''}`}>\n\t\t\t\t\t{isMultiple ? (\n\t\t\t\t\t\t<label class=\"checkbox-container\">\n\t\t\t\t\t\t\t<KolIconTag class=\"icon\" _icons={`codicon ${selected ? 'codicon-check' : ''}`} _label=\"\" />\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tref={(el) => el && this.checkboxRefs.push(el)}\n\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\tonInput={(event: Event) => {\n\t\t\t\t\t\t\t\t\tconst updatedSelectedKeys = !selected\n\t\t\t\t\t\t\t\t\t\t? [...(selection?.selectedKeys ?? []), keyProperty]\n\t\t\t\t\t\t\t\t\t\t: selection?.selectedKeys?.filter((key) => key !== keyProperty);\n\t\t\t\t\t\t\t\t\ttryToDispatchKoliBriEvent('selection-change', this.host, updatedSelectedKeys);\n\t\t\t\t\t\t\t\t\tif (typeof this.state._on?.[Events.onSelectionChange] === 'function') {\n\t\t\t\t\t\t\t\t\t\tthis.state._on[Events.onSelectionChange](event, updatedSelectedKeys ?? []);\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</label>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<label class=\"radio-container\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\tonInput={(event: Event) => {\n\t\t\t\t\t\t\t\t\ttryToDispatchKoliBriEvent('selection-change', this.host, keyProperty);\n\t\t\t\t\t\t\t\t\tif (typeof this.state._on?.[Events.onSelectionChange] === 'function') {\n\t\t\t\t\t\t\t\t\t\tthis.state._on[Events.onSelectionChange](event, keyProperty);\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</label>\n\t\t\t\t\t)}\n\t\t\t\t\t<KolTooltipWcTag aria-hidden=\"true\" class=\"input-tooltip\" _align=\"right\" _id={`${keyProperty}-label`} _label={label}></KolTooltipWcTag>\n\t\t\t\t</div>\n\t\t\t</td>\n\t\t);\n\t}\n\n\t/**\n\t * Renders a full table row by mapping over each cell and calling `renderTableCell`.\n\t * It also handles the row's unique key generation and selection functionality.\n\t *\n\t * @param {KoliBriTableCell[]} row  The data for the current row.\n\t * @param {number} rowIndex  The index of the current row being rendered.\n\t * @returns {JSX.Element}  The rendered row with its cells.\n\t */\n\tprivate readonly renderTableRow = (row: (KoliBriTableCell & KoliBriTableDataType)[], rowIndex: number, isVertical: boolean): JSX.Element => {\n\t\tlet key = String(rowIndex);\n\t\tif (this.horizontal && row[0]?.data) {\n\t\t\tkey = this.getDataKey(row[0].data) ?? key;\n\t\t}\n\n\t\treturn (\n\t\t\t<tr key={`row-${key}`}>\n\t\t\t\t{this.renderSelectionCell(row, rowIndex)}\n\t\t\t\t{row.map((cell, colIndex) => this.renderTableCell(cell, rowIndex, colIndex, isVertical))}\n\t\t\t</tr>\n\t\t);\n\t};\n\n\t/**\n\t * Renders a table cell, either as a data cell (`<td>`) or a header cell (`<th>`).\n\t * If a custom `render` function is provided in the cell, it will be used to display content.\n\t *\n\t * @param {KoliBriTableCell} cell The cell data, containing label, colSpan, rowSpan, and potential render function.\n\t * @param {number} rowIndex  The current row index.\n\t * @param {number} colIndex  The current column index.\n\t * @returns {JSX.Element}  The rendered table cell (either `<td>` or `<th>`).\n\t */\n\tprivate readonly renderTableCell = (cell: KoliBriTableCell, rowIndex: number, colIndex: number, isVertical: boolean): JSX.Element => {\n\t\tlet key = `${rowIndex}-${colIndex}-${cell.label}`;\n\t\tif (cell.data) {\n\t\t\tconst dataKey = this.getDataKey(cell.data);\n\t\t\tkey = dataKey ? `${dataKey}-${this.horizontal ? colIndex : rowIndex}` : key;\n\t\t}\n\n\t\tif (cell.asTd === false) {\n\t\t\treturn this.renderHeadingCell(cell, rowIndex, colIndex, isVertical);\n\t\t} else {\n\t\t\treturn (\n\t\t\t\t<td\n\t\t\t\t\tkey={`cell-${key}`}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[cell.textAlign as string]: typeof cell.textAlign === 'string' && cell.textAlign.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\tcolSpan={cell.colSpan}\n\t\t\t\t\trowSpan={cell.rowSpan}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\ttextAlign: cell.textAlign,\n\t\t\t\t\t\twidth: cell.width,\n\t\t\t\t\t}}\n\t\t\t\t\tref={\n\t\t\t\t\t\ttypeof cell.render === 'function'\n\t\t\t\t\t\t\t? (el) => {\n\t\t\t\t\t\t\t\t\tthis.cellRender(cell as KoliBriTableHeaderCellWithLogic & { render: KoliBriTableRender }, el);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{typeof cell.render !== 'function' ? cell.label : ''}\n\t\t\t\t</td>\n\t\t\t);\n\t\t}\n\t};\n\n\t/**\n\t * Renders the header cell for row selection. This cell contains a checkbox for selecting\n\t * all rows when selection is enabled. If multiple selection is allowed, the checkbox allows\n\t * selecting/deselecting all rows at once. It also supports an indeterminate state\n\t * if only some rows are selected.\n\t *\n\t * @returns {JSX.Element} - The rendered header cell containing the selection checkbox.\n\t */\n\tprivate renderHeadingSelectionCell(): JSX.Element {\n\t\tconst selection = this.state._selection;\n\t\tif (!selection || (!selection.multiple && selection.multiple !== undefined)) return <th key={`thead-0`}></th>;\n\t\tconst keyPropertyName = selection.keyPropertyName ?? 'id';\n\t\tconst selectedKeyLength = selection.selectedKeys?.length;\n\t\tconst dataLength = this.state._data.length;\n\t\tconst isChecked = selectedKeyLength === dataLength;\n\t\tconst indeterminate = selectedKeyLength !== 0 && !isChecked;\n\t\tlet translationKey = 'kol-table-selection-indeterminate' as TranslationKey;\n\t\tif (isChecked && !indeterminate) {\n\t\t\ttranslationKey = 'kol-table-selection-none';\n\t\t}\n\t\tif (selectedKeyLength === 0) {\n\t\t\ttranslationKey = 'kol-table-selection-all';\n\t\t}\n\t\tconst label = translate(translationKey);\n\t\treturn (\n\t\t\t<th key={`thead-0-selection`} class=\"selection-cell selection-control\">\n\t\t\t\t<div class={`input ${indeterminate ? 'indeterminate' : isChecked ? 'checked' : ''}`}>\n\t\t\t\t\t<label class=\"checkbox-container\">\n\t\t\t\t\t\t<KolIconTag class=\"icon\" _icons={`codicon ${indeterminate ? 'codicon-remove' : isChecked ? 'codicon-check' : ''}`} _label=\"\" />\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={(el) => el && this.checkboxRefs.push(el)}\n\t\t\t\t\t\t\tname=\"selection\"\n\t\t\t\t\t\t\tchecked={isChecked && !indeterminate}\n\t\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\tonInput={(event: Event) => {\n\t\t\t\t\t\t\t\tconst selections = !isChecked ? this.state._data.map((el) => el?.[keyPropertyName] as string) : [];\n\t\t\t\t\t\t\t\ttryToDispatchKoliBriEvent('selection-change', this.host, selections);\n\t\t\t\t\t\t\t\tif (typeof this.state._on?.[Events.onSelectionChange] === 'function') {\n\t\t\t\t\t\t\t\t\tthis.state._on[Events.onSelectionChange](event, selections);\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</label>\n\t\t\t\t\t<KolTooltipWcTag aria-hidden=\"true\" class=\"input-tooltip\" _align=\"right\" _id={`${translationKey}-label`} _label={label}></KolTooltipWcTag>\n\t\t\t\t</div>\n\t\t\t</th>\n\t\t);\n\t}\n\n\t/**\n\t *  Renders a table header cell (`<th>`), with optional sorting functionality.\n\t *  If the cell has a `sortDirection` property, a sort button is rendered within the header.\n\t *\n\t * @param {KoliBriTableHeaderCell} cell  The header cell data, containing label, colSpan, rowSpan, and possible sort direction.\n\t * @param {number} rowIndex  The index of the current row in the table.\n\t * @param {number} colIndex  The index of the current column in the row.\n\t * @returns {JSX.Element}  The rendered header cell with possible sorting controls.\n\t */\n\tprivate renderHeadingCell(cell: KoliBriTableHeaderCell, rowIndex: number, colIndex: number, isVertical: boolean): JSX.Element {\n\t\tlet ariaSort = undefined;\n\t\tlet sortButtonIcon = 'codicon codicon-fold';\n\n\t\tif (cell.sortDirection) {\n\t\t\tswitch (cell.sortDirection) {\n\t\t\t\tcase 'ASC':\n\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-up';\n\t\t\t\t\tariaSort = 'ascending';\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'DESC':\n\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-down';\n\t\t\t\t\tariaSort = 'descending';\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\tconst scope = isVertical ? 'row' : typeof cell.colSpan === 'number' && cell.colSpan > 1 ? 'colgroup' : 'col';\n\n\t\treturn (\n\t\t\t<th\n\t\t\t\tkey={`${rowIndex}-${colIndex}-${cell.label}`}\n\t\t\t\tclass={cell.textAlign ? `align-${cell.textAlign}` : undefined}\n\t\t\t\tscope={scope}\n\t\t\t\tcolSpan={cell.colSpan}\n\t\t\t\trowSpan={cell.rowSpan}\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: cell.width,\n\t\t\t\t}}\n\t\t\t\taria-sort={ariaSort}\n\t\t\t\tdata-sort={`sort-${cell.sortDirection}`}\n\t\t\t>\n\t\t\t\t{cell.sortDirection ? (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"table-sort-button\"\n\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t_icons={{ right: sortButtonIcon }}\n\t\t\t\t\t\t_label={cell.label}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: (event: MouseEvent) => {\n\t\t\t\t\t\t\t\tif (typeof this.state._on?.onSort === 'function' && cell.key && cell.sortDirection) {\n\t\t\t\t\t\t\t\t\tthis.state._on.onSort(event, {\n\t\t\t\t\t\t\t\t\t\tkey: cell.key,\n\t\t\t\t\t\t\t\t\t\tcurrentSortDirection: 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></KolButtonWcTag>\n\t\t\t\t) : (\n\t\t\t\t\tcell.label\n\t\t\t\t)}\n\t\t\t</th>\n\t\t);\n\t}\n\n\tprivate renderSpacer(variant: 'foot' | 'head', cellDefs: KoliBriTableHeaderCell[][] | KoliBriTableCell[][]): JSX.Element {\n\t\tconst colspan = cellDefs?.[0]?.reduce((acc, row) => acc + (row.colSpan || 1), 0);\n\n\t\treturn (\n\t\t\t<tr class={`${variant}-spacer`} aria-hidden=\"true\">\n\t\t\t\t<td colSpan={colspan}></td>\n\t\t\t</tr>\n\t\t);\n\t}\n\n\tprivate renderFoot(): JSX.Element[] | null {\n\t\tif (!this.state._dataFoot || this.state._dataFoot.length === 0) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst rows: KoliBriTableCell[][] = this.createDataField(this.state._dataFoot, this.state._headerCells, true);\n\t\treturn (\n\t\t\t<tfoot>\n\t\t\t\t{[\n\t\t\t\t\tthis.renderSpacer('foot', rows),\n\t\t\t\t\trows.map((row: (KoliBriTableCell & KoliBriTableDataType)[], rowIndex: number) => this.renderTableRow(row, rowIndex, true)),\n\t\t\t\t]}\n\t\t\t</tfoot>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst dataField = this.createDataField(this.state._data, this.state._headerCells);\n\t\tthis.checkboxRefs = [];\n\n\t\treturn (\n\t\t\t<Host class=\"kol-table-stateless-wc\">\n\t\t\t\t{/* Firefox automatically makes the following div focusable when it has a scrollbar. We implement a similar behavior cross-browser by allowing the\n\t\t\t\t * <div class=\"focus-element\"> to receive focus. Hence, we disable focus for the div to avoid having two focusable elements by setting `tabindex=\"-1\"`\n\t\t\t\t */}\n\t\t\t\t{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n\t\t\t\t<div ref={(element) => (this.tableDivElement = element)} class=\"table\" tabindex={this.tableDivElementHasScrollbar ? '-1' : undefined}>\n\t\t\t\t\t<table\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tminWidth: this.state._minWidth,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{/*\n\t\t\t\t\t\t * The following element allows the table to receive focus without providing redundant content to screen readers.\n\t\t\t\t\t\t * The `div` is technically not allowed here. But any allowed element would mutate the table semantics. Additionally, the `&nbsp;` is necessary to\n\t\t\t\t\t\t * prevent screen readers from just reading \"blank\".\n\t\t\t\t\t\t */}\n\t\t\t\t\t\t{/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n\t\t\t\t\t\t<div class=\"focus-element\" tabindex={this.tableDivElementHasScrollbar ? '0' : undefined} aria-describedby=\"caption\">\n\t\t\t\t\t\t\t&nbsp;\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<caption id=\"caption\">{this.state._label}</caption>\n\n\t\t\t\t\t\t{Array.isArray(this.state._headerCells.horizontal) && (\n\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t{[\n\t\t\t\t\t\t\t\t\tthis.state._headerCells.horizontal.map((cols, rowIndex) => (\n\t\t\t\t\t\t\t\t\t\t<tr key={`thead-${rowIndex}`}>\n\t\t\t\t\t\t\t\t\t\t\t{this.state._selection && this.renderHeadingSelectionCell()}\n\t\t\t\t\t\t\t\t\t\t\t{cols.map((cell, colIndex) => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (cell.asTd === true) {\n\t\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\t<td\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={`thead-${rowIndex}-${colIndex}-${cell.label}`}\n\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[cell.textAlign as string]: typeof cell.textAlign === 'string' && cell.textAlign.length > 0,\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\tcolSpan={cell.colSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trowSpan={cell.rowSpan}\n\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\ttextAlign: cell.textAlign,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth: cell.width,\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\tref={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttypeof cell.render === 'function'\n\t\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\t\tthis.cellRender(cell, el);\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: undefined\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>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{typeof cell.render !== 'function' ? cell.label : ''}\n\t\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\t);\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn this.renderHeadingCell(cell, rowIndex, colIndex, false);\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</tr>\n\t\t\t\t\t\t\t\t\t)),\n\t\t\t\t\t\t\t\t\tthis.renderSpacer('head', this.state._headerCells.horizontal),\n\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<tbody>{dataField.map((row: (KoliBriTableCell & KoliBriTableDataType)[], rowIndex: number) => this.renderTableRow(row, rowIndex, true))}</tbody>\n\t\t\t\t\t\t{this.renderFoot()}\n\t\t\t\t\t</table>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["validateTableHeaderCells","component","value","emptyStringByArrayHandler","objectObjectHandler","parseJson","e","watchValidator","horizontal","undefined","Array","isArray","find","headerRow","vertical","headerCol","Set","HEADER_CELL_WIDTH_VALIDATOR","validateMinWidth","options","v","test","KolTableStateless","this","cellsToRenderTimeouts","Map","dataToKeyMap","checkboxRefs","renderTableRow","row","rowIndex","isVertical","isFooter","key","String","_a","data","_b","getDataKey","h","class","clsx","renderSelectionCell","map","cell","colIndex","renderTableCell","columnSetting","getColumnSettings","visible","label","dataKey","headerCell","renderHeadingCell","textAlign","colSpan","rowSpan","style","width","ref","render","el","cellRender","_data","_headerCells","_label","_minWidth","validateData","validateTableData","beforePatch","nextValue","updateDataToKeyMap","validateDataFoot","validateTableDataFoot","validateHeaderCells","initializeTableSettings","validateLabel","required","validateOn","validateTableCallbacks","validateSelection","validateTableSelection","validateTableSettings","handleKeyDown","event","focusedElement","tableDivElement","querySelector","index","indexOf","preventDefault","length","focus","componentDidRender","checkDivElementScrollbar","componentDidLoad","ResizeObserver","tableDivElementResizeObserver","bind","observe","handleSettingsChange","setState","detail","disconnectedCallback","disconnect","tableDivElementHasScrollbar","scrollWidth","clientWidth","forEach","has","set","nonce","_","includes","delete","get","clearTimeout","setTimeout","renderContent","state","textContent","getNumberOfCols","horizontalHeaders","max","count","col","getNumberOfRows","verticalHeaders","_dataFoot","getThePrimaryHeadersWithKeysIfExists","headers","primaryHeadersWithKeys","cells","push","getPrimaryHeaders","getColumnPositionMap","keyToPosition","_tableSettings","columns","setting","position","sortByColumnPosition","sort","a","b","posA","Number","MAX_SAFE_INTEGER","posB","_d","_c","createDataField","isFoot","primaryHeader","maxCols","maxRows","startRow","dataField","rowCount","rowSpans","_row","sortedPrimaryHeader","i","dataRow","headerCells","rowsTotal","rows","Object","assign","k","j","colspan","rowspan","emptyCell","translate","Math","handleSelectionChangeCallbackAndEvent","payload","_on","Callback","onSelectionChange","host","dispatchDomEvent","KolEvent","selectionChange","primaryHeaders","filter","header","componentWillLoad","_selection","selection","keyPropertyName","getSelectionKeyPropertyName","firstCellData","keyProperty","isMultiple","multiple","selected","selectedKeys","disabled","disabledKeys","props","name","checked","id","KolIconTag","_icons","type","onInput","updatedSelectedKeys","KolTooltipWcTag","_align","_id","getDataWithSelectionEnabled","item","getSelectedKeysWithoutDisabledKeys","getSelectedKeysWithDisabledKeysOnly","getRevertedSelection","selectAll","getTableMinWidth","totalColumnWidth","reduce","total","renderHeadingSelectionCell","selectedKeyLength","dataLength","isChecked","indeterminate","translationKey","renderHeaderTdCell","Fragment","columnSettings","ariaSort","sortButtonIcon","sortDirection","scope","KolButtonWcTag","exportparts","right","onClick","onSort","currentSortDirection","renderSpacer","variant","cellDefs","verticalHeaderColpan","acc","selectionCell","renderFoot","sortedHorizontalHeaders","KolTableSettingsWcTag","element","tabindex","minWidth","cols"],"sources":["src/schema/props/table-header-cells.ts","src/schema/props/min-width.ts","src/components/table-stateless/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { KoliBriTableHeaderCell, Stringified } from '../types';\nimport { emptyStringByArrayHandler, objectObjectHandler, parseJson, watchValidator } from '../utils';\n\n/* types */\nexport type TableHeaderCells = {\n\thorizontal?: KoliBriTableHeaderCell[][];\n\tvertical?: KoliBriTableHeaderCell[][];\n};\n\nexport type TableHeaderCellsPropType = Stringified<TableHeaderCells>;\n\n/**\n * Defines the horizontal and vertical table header cells.\n */\nexport type PropTableHeaderCells = {\n\theaderCells: TableHeaderCellsPropType;\n};\n\n/* validator */\nexport const validateTableHeaderCells = (component: Generic.Element.Component, value?: TableHeaderCellsPropType): void => {\n\temptyStringByArrayHandler(value, () => {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<TableHeaderCells>(value);\n\t\t\t} catch (e) {\n\t\t\t\tvoid e;\n\t\t\t}\n\t\t\twatchValidator(\n\t\t\t\tcomponent,\n\t\t\t\t'_headerCells',\n\t\t\t\t(value): boolean =>\n\t\t\t\t\ttypeof value === 'object' &&\n\t\t\t\t\tvalue !== null &&\n\t\t\t\t\t(value.horizontal === undefined ||\n\t\t\t\t\t\t(Array.isArray(value.horizontal) && value.horizontal.find((headerRow) => !Array.isArray(headerRow)) === undefined)) &&\n\t\t\t\t\t(value.vertical === undefined || (Array.isArray(value.vertical) && value.vertical.find((headerCol) => !Array.isArray(headerCol)) === undefined)) &&\n\t\t\t\t\ttrue,\n\t\t\t\tnew Set(['TableHeaderCellsPropType']),\n\t\t\t\tvalue,\n\t\t\t);\n\t\t});\n\t});\n};\n","import type { Generic } from 'adopted-style-sheets';\nimport type { WatchStringOptions } from '../utils';\nimport { watchValidator } from '../utils';\n\n/* types */\nexport type MinWidthPropType = string;\n\n/**\n * Defines the technical name of an input field.\n */\nexport type PropMinWidth = {\n\tminWidth: MinWidthPropType;\n};\n\n/* constants */\n/**\n * Regular expression to validate the width of a header cell.\n */\nconst HEADER_CELL_WIDTH_VALIDATOR = /^\\d+(\\.\\d+)?([a-z]+|%)?$/;\n\n/* validator */\nexport const validateMinWidth = (component: Generic.Element.Component, value?: MinWidthPropType, options?: WatchStringOptions): void => {\n\twatchValidator<MinWidthPropType>(\n\t\tcomponent,\n\t\t'_minWidth',\n\t\t(v) => typeof v === 'string' && HEADER_CELL_WIDTH_VALIDATOR.test(v),\n\t\tnew Set(['String', '/^\\\\d+(\\\\.\\\\d+)?([a-z]+|%)?$/']),\n\t\tvalue,\n\t\toptions,\n\t);\n};\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, Fragment, h, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport clsx from 'clsx';\nimport { KolButtonWcTag, KolIconTag, KolTableSettingsWcTag, KolTooltipWcTag } from '../../core/component-names';\nimport type { TranslationKey } from '../../i18n';\nimport { translate } from '../../i18n';\nimport type {\n\tKoliBriTableCell,\n\tKoliBriTableDataType,\n\tKoliBriTableHeaderCell,\n\tKoliBriTableHeaderCellWithLogic,\n\tKoliBriTableHeaders,\n\tKoliBriTableRender,\n\tLabelPropType,\n\tSelectionChangeEventPayload,\n\tTableCallbacksPropType,\n\tTableDataFootPropType,\n\tTableDataPropType,\n\tTableHeaderCellsPropType,\n\tTableSelectionPropType,\n\tTableSettings,\n\tTableStatelessAPI,\n\tTableStatelessStates,\n} from '../../schema';\nimport { setState } from '../../schema';\nimport {\n\tvalidateLabel,\n\tvalidateTableCallbacks,\n\tvalidateTableData,\n\tvalidateTableDataFoot,\n\tvalidateTableHeaderCells,\n\tvalidateTableSelection,\n} from '../../schema';\nimport type { ColumnSettings } from '../../schema/types';\nimport { Callback } from '../../schema/enums';\nimport type { MinWidthPropType } from '../../schema/props/min-width';\nimport { validateMinWidth } from '../../schema/props/min-width';\nimport { nonce } from '../../utils/dev.utils';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport type { TableSettingsPropType } from '../../schema/props/table-settings';\nimport { validateTableSettings } from '../../schema/props/table-settings';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-table-stateless-wc',\n\tshadow: false,\n})\nexport class KolTableStateless implements TableStatelessAPI {\n\t@Element() private readonly host?: HTMLKolTableStatelessWcElement;\n\n\t@State() public state: TableStatelessStates = {\n\t\t_data: [],\n\t\t_headerCells: {\n\t\t\thorizontal: [],\n\t\t\tvertical: [],\n\t\t},\n\t\t_label: '',\n\t\t_minWidth: 'auto',\n\t};\n\n\tprivate tableDivElement?: HTMLDivElement;\n\tprivate tableDivElementResizeObserver?: ResizeObserver;\n\tprivate horizontal = true;\n\tprivate cellsToRenderTimeouts = new Map<HTMLElement, ReturnType<typeof setTimeout>>();\n\tprivate dataToKeyMap = new Map<KoliBriTableDataType, string>();\n\n\tprivate checkboxRefs: HTMLInputElement[] = [];\n\n\t@State()\n\tprivate tableDivElementHasScrollbar = false;\n\n\t/**\n\t * Defines the primary table data.\n\t */\n\t@Prop() public _data!: TableDataPropType;\n\n\t/**\n\t * Defines the data for the table footer.\n\t */\n\t@Prop() public _dataFoot?: TableDataFootPropType;\n\n\t/**\n\t * Defines the horizontal and vertical table headers.\n\t */\n\t@Prop() public _headerCells!: TableHeaderCellsPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Defines the table min-width (CSS width values).\n\t */\n\t@Prop() public _minWidth!: MinWidthPropType;\n\n\t/**\n\t * Defines the callback functions for table events.\n\t */\n\t@Prop() public _on?: TableCallbacksPropType;\n\n\t/**\n\t * Defines how rows can be selected and the current selection.\n\t */\n\t@Prop() public _selection?: TableSelectionPropType;\n\n\t/**\n\t * Defines the table settings including column visibility, order and width.\n\t */\n\t@Prop() public _tableSettings?: TableSettingsPropType;\n\n\t@Watch('_data')\n\tpublic validateData(value?: TableDataPropType) {\n\t\tvalidateTableData(this, value, {\n\t\t\tbeforePatch: (nextValue) => {\n\t\t\t\tthis.updateDataToKeyMap(nextValue as KoliBriTableDataType[]);\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_dataFoot')\n\tpublic validateDataFoot(value?: TableDataFootPropType) {\n\t\tvalidateTableDataFoot(this, value);\n\t}\n\n\t@Watch('_headerCells')\n\tpublic validateHeaderCells(value?: TableHeaderCellsPropType) {\n\t\tvalidateTableHeaderCells(this, value);\n\t\tthis.initializeTableSettings();\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_minWidth')\n\tpublic validateMinWidth(value?: MinWidthPropType): void {\n\t\tvalidateMinWidth(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: TableCallbacksPropType): void {\n\t\tvalidateTableCallbacks(this, value);\n\t}\n\n\t@Watch('_selection')\n\tpublic validateSelection(value?: TableSelectionPropType): void {\n\t\tvalidateTableSelection(this, value);\n\t}\n\n\t@Watch('_tableSettings')\n\tpublic validateTableSettings(value?: TableSettingsPropType) {\n\t\tvalidateTableSettings(this, value);\n\t}\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent) {\n\t\tif (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n\t\t\tconst focusedElement = this.tableDivElement?.querySelector(':focus') as HTMLInputElement;\n\t\t\tlet index = this.checkboxRefs.indexOf(focusedElement);\n\n\t\t\tif (index > -1) {\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\tif (event.key === 'ArrowDown') {\n\t\t\t\t\tindex = (index + 1) % this.checkboxRefs.length;\n\t\t\t\t\tthis.checkboxRefs[index].focus();\n\t\t\t\t} else if (event.key === 'ArrowUp') {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tindex = (index + this.checkboxRefs.length - 1) % this.checkboxRefs.length;\n\t\t\t\t\tthis.checkboxRefs[index].focus();\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic componentDidRender(): void {\n\t\tthis.checkDivElementScrollbar();\n\t}\n\n\tpublic componentDidLoad() {\n\t\tif (this.tableDivElement && ResizeObserver) {\n\t\t\tthis.tableDivElementResizeObserver = new ResizeObserver(this.checkDivElementScrollbar.bind(this));\n\t\t\tthis.tableDivElementResizeObserver.observe(this.tableDivElement);\n\t\t}\n\t}\n\n\t@Listen('settingsChange')\n\tpublic handleSettingsChange(event: CustomEvent<TableSettings>) {\n\t\tsetState(this, '_tableSettings', event.detail);\n\t}\n\n\tpublic disconnectedCallback() {\n\t\tthis.tableDivElementResizeObserver?.disconnect();\n\t}\n\n\tprivate checkDivElementScrollbar() {\n\t\tif (this.tableDivElement) {\n\t\t\tthis.tableDivElementHasScrollbar = this.tableDivElement.scrollWidth > this.tableDivElement.clientWidth;\n\t\t}\n\t}\n\n\tprivate updateDataToKeyMap(data: KoliBriTableDataType[]) {\n\t\tdata.forEach((data) => {\n\t\t\tif (!this.dataToKeyMap.has(data)) {\n\t\t\t\tthis.dataToKeyMap.set(data, nonce());\n\t\t\t}\n\t\t});\n\n\t\t/* Cleanup old values from map */\n\t\tthis.dataToKeyMap.forEach((_, key) => {\n\t\t\tif (!data.includes(key)) {\n\t\t\t\tthis.dataToKeyMap.delete(key);\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate getDataKey(data: KoliBriTableDataType) {\n\t\treturn this.dataToKeyMap.get(data);\n\t}\n\n\t/**\n\t * Applies a custom render function to a specific table cell if provided.\n\t * Ensures that the content is updated after a delay to avoid excessive re-renders.\n\t *\n\t * @param {KoliBriTableCell} cell The cell to be rendered, with a possible custom `render` function.\n\t * @param {HTMLElement} el The HTML element where the cell is rendered.\n\t */\n\tprivate cellRender(cell: KoliBriTableCell, el?: HTMLElement): void {\n\t\tif (el) {\n\t\t\tclearTimeout(this.cellsToRenderTimeouts.get(el));\n\t\t\tthis.cellsToRenderTimeouts.set(\n\t\t\t\tel,\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tif (typeof cell.render === 'function') {\n\t\t\t\t\t\tconst renderContent = cell.render(el, cell, cell.data, this.state._data);\n\t\t\t\t\t\tif (typeof renderContent === 'string') {\n\t\t\t\t\t\t\tel.textContent = renderContent;\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 getNumberOfCols(horizontalHeaders: KoliBriTableHeaderCell[][], data: KoliBriTableDataType[]): number {\n\t\tlet max = 0;\n\t\thorizontalHeaders.forEach((row) => {\n\t\t\tlet count = 0;\n\t\t\tArray.isArray(row) && row.forEach((col) => (count += col.colSpan ?? 1));\n\t\t\tif (max < count) {\n\t\t\t\tmax = count;\n\t\t\t}\n\t\t});\n\t\tif (max === 0) {\n\t\t\tmax = data.length;\n\t\t}\n\t\treturn max;\n\t}\n\n\tprivate getNumberOfRows(verticalHeaders: KoliBriTableHeaderCell[][], data: KoliBriTableDataType[]): number {\n\t\tlet max = 0;\n\t\tverticalHeaders.forEach((col) => {\n\t\t\tlet count = 0;\n\t\t\tArray.isArray(col) && col.forEach((row) => (count += row.rowSpan ?? 1));\n\t\t\tif (max < count) {\n\t\t\t\tmax = count;\n\t\t\t}\n\t\t});\n\t\tif (max === 0) {\n\t\t\tmax = data.length;\n\t\t} else {\n\t\t\tmax -= this.state._dataFoot?.length || 0;\n\t\t}\n\t\treturn max;\n\t}\n\n\tprivate getThePrimaryHeadersWithKeysIfExists(headers: KoliBriTableHeaderCell[][]): KoliBriTableHeaderCell[] {\n\t\tconst primaryHeadersWithKeys: KoliBriTableHeaderCell[] = [];\n\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\tprimaryHeadersWithKeys.push(cell);\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\treturn primaryHeadersWithKeys;\n\t}\n\n\tprivate getPrimaryHeaders(headers: KoliBriTableHeaders): KoliBriTableHeaderCell[] {\n\t\tlet primaryHeadersWithKeys: KoliBriTableHeaderCell[] = this.getThePrimaryHeadersWithKeysIfExists(headers.horizontal ?? []);\n\n\t\t/**\n\t\t * It is important to note that the rendering direction of the data is implicitly set,\n\t\t * if either the horizontal or vertical header cells have keys.\n\t\t */\n\t\tthis.horizontal = true;\n\t\tif (primaryHeadersWithKeys.length === 0) {\n\t\t\tprimaryHeadersWithKeys = this.getThePrimaryHeadersWithKeysIfExists(headers.vertical ?? []);\n\t\t\tif (primaryHeadersWithKeys.length > 0) {\n\t\t\t\tthis.horizontal = false;\n\t\t\t}\n\t\t}\n\t\treturn primaryHeadersWithKeys;\n\t}\n\n\tprivate getColumnPositionMap(): Map<string, number> {\n\t\tconst keyToPosition = new Map<string, number>();\n\t\tthis.state._tableSettings?.columns.forEach((setting) => {\n\t\t\tkeyToPosition.set(setting.key, setting.position);\n\t\t});\n\t\treturn keyToPosition;\n\t}\n\n\tprivate sortByColumnPosition<T extends { key?: string }>(columns: T[]): T[] {\n\t\tconst keyToPosition = this.getColumnPositionMap();\n\t\treturn [...columns].sort((a, b) => {\n\t\t\tconst posA = keyToPosition.get(a.key ?? '') ?? Number.MAX_SAFE_INTEGER;\n\t\t\tconst posB = keyToPosition.get(b.key ?? '') ?? Number.MAX_SAFE_INTEGER;\n\t\t\treturn posA - posB;\n\t\t});\n\t}\n\n\tprivate createDataField(data: KoliBriTableDataType[], headers: KoliBriTableHeaders, isFoot?: boolean): (KoliBriTableCell & KoliBriTableDataType)[][] {\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.getPrimaryHeaders(headers);\n\t\tconst maxCols = this.getNumberOfCols(headers.horizontal, data);\n\t\tlet maxRows = this.getNumberOfRows(headers.vertical, data);\n\t\tlet startRow = 0;\n\t\tif (isFoot) {\n\t\t\tstartRow = maxRows;\n\t\t\tmaxRows += this.state._dataFoot?.length || 0;\n\t\t}\n\t\tconst dataField: KoliBriTableCell[][] = [];\n\n\t\tconst rowCount: number[] = [];\n\t\tconst rowSpans: number[][] = [];\n\t\theaders.vertical.forEach((_row, index) => {\n\t\t\trowCount[index] = 0;\n\t\t\trowSpans[index] = [];\n\t\t});\n\n\t\tconst sortedPrimaryHeader = this.sortByColumnPosition(primaryHeader);\n\n\t\tfor (let i = startRow; i < maxRows; i++) {\n\t\t\tconst dataRow: KoliBriTableHeaderCellWithLogic[] = [];\n\t\t\theaders.vertical.forEach((headerCells, index) => {\n\t\t\t\tlet rowsTotal = 0;\n\t\t\t\trowSpans[index].forEach((value) => (rowsTotal += value));\n\t\t\t\tif (rowsTotal <= i) {\n\t\t\t\t\tconst rows = headerCells[i - rowsTotal + rowCount[index]];\n\t\t\t\t\tif (typeof rows === 'object') {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...rows,\n\t\t\t\t\t\t\theaderCell: true,\n\t\t\t\t\t\t\tdata: {},\n\t\t\t\t\t\t});\n\t\t\t\t\t\tlet rowSpan = 1;\n\t\t\t\t\t\tif (typeof rows.rowSpan === 'number' && rows.rowSpan > 1) {\n\t\t\t\t\t\t\trowSpan = rows.rowSpan;\n\t\t\t\t\t\t}\n\t\t\t\t\t\trowSpans[index].push(rowSpan);\n\t\t\t\t\t\tif (typeof rows.colSpan === 'number' && rows.colSpan > 1) {\n\t\t\t\t\t\t\tfor (let k = 1; k < rows.colSpan; k++) {\n\t\t\t\t\t\t\t\trowSpans[index + k].push(rowSpan);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\trowCount[index]++;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t\tfor (let j = 0; j < maxCols; j++) {\n\t\t\t\tif (this.horizontal === true) {\n\t\t\t\t\tconst row = isFoot && this.state._dataFoot ? this.state._dataFoot[i - startRow] : data[i];\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof sortedPrimaryHeader[j] === 'object' &&\n\t\t\t\t\t\tsortedPrimaryHeader[j] !== null &&\n\t\t\t\t\t\ttypeof sortedPrimaryHeader[j].key === 'string' &&\n\t\t\t\t\t\ttypeof row === 'object' &&\n\t\t\t\t\t\trow !== null\n\t\t\t\t\t) {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...sortedPrimaryHeader[j],\n\t\t\t\t\t\t\tcolSpan: undefined,\n\t\t\t\t\t\t\tdata: row,\n\t\t\t\t\t\t\tlabel: row[sortedPrimaryHeader[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 sortedPrimaryHeader[i] === 'object' &&\n\t\t\t\t\t\tsortedPrimaryHeader[i] !== null &&\n\t\t\t\t\t\ttypeof sortedPrimaryHeader[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...sortedPrimaryHeader[i],\n\t\t\t\t\t\t\tcolSpan: undefined,\n\t\t\t\t\t\t\tdata: data[j],\n\t\t\t\t\t\t\tlabel: data[j][sortedPrimaryHeader[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\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 handleSelectionChangeCallbackAndEvent(event: Event, payload: SelectionChangeEventPayload) {\n\t\tif (typeof this.state._on?.[Callback.onSelectionChange] === 'function') {\n\t\t\tthis.state._on[Callback.onSelectionChange](event, payload);\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.selectionChange, payload);\n\t\t}\n\t}\n\n\tprivate initializeTableSettings() {\n\t\tif (this._tableSettings) {\n\t\t\treturn; // when tableSettings are defined via props, don't override them.\n\t\t}\n\t\tconst primaryHeaders = this.getPrimaryHeaders(this.state._headerCells as KoliBriTableHeaders);\n\t\tif (!this.state._tableSettings) {\n\t\t\tthis.state._tableSettings = { columns: [] };\n\t\t}\n\t\tthis.state._tableSettings.columns = primaryHeaders\n\t\t\t.filter((header) => header.key) // only headers with a key are supported\n\t\t\t.map((header, index) => ({\n\t\t\t\tkey: header.key ?? nonce(),\n\t\t\t\tlabel: header.label,\n\t\t\t\tposition: index,\n\t\t\t\tvisible: true,\n\t\t\t}));\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateData(this._data);\n\t\tthis.validateDataFoot(this._dataFoot);\n\t\tthis.validateHeaderCells(this._headerCells);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMinWidth(this._minWidth);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelection(this._selection);\n\t\tthis.validateTableSettings(this._tableSettings);\n\t}\n\n\t/**\n\t * Renders the selection cell for a row, either as a checkbox (for multiple selection)\n\t * or as a radio button (for single selection). It handles selection states and dispatches\n\t * events for selection changes.\n\t *\n\t * @param {KoliBriTableCell[]} row  The row data containing the cell with selection properties.\n\t * @param {number} rowIndex  The index of the row.\n\t * @returns {JSX.Element}  The rendered selection cell, either with a checkbox or radio input.\n\t */\n\tprivate renderSelectionCell(row: (KoliBriTableCell & KoliBriTableDataType)[], rowIndex: number): JSX.Element {\n\t\tconst selection = this.state._selection;\n\t\tif (!selection) return '';\n\t\tconst keyPropertyName = this.getSelectionKeyPropertyName();\n\t\tconst firstCellData = row[0]?.data;\n\n\t\tif (!firstCellData) return '';\n\t\tconst keyProperty = firstCellData[keyPropertyName] as string;\n\t\tconst isMultiple = selection.multiple || selection.multiple === undefined;\n\t\tconst selected = selection?.selectedKeys?.includes(keyProperty);\n\t\tconst disabled = selection?.disabledKeys?.includes(keyProperty);\n\t\tconst label = selection.label(firstCellData);\n\t\tconst props = {\n\t\t\tname: 'selection',\n\t\t\tchecked: selected,\n\t\t\tdisabled,\n\t\t\tid: keyProperty,\n\t\t\t['aria-label']: label,\n\t\t};\n\t\treturn (\n\t\t\t<td key={`tbody-${rowIndex}-selection`} class=\"kol-table__cell kol-table__cell--selection\">\n\t\t\t\t<div class={clsx('kol-table__selection', { 'kol-table__selection--checked': selected })}>\n\t\t\t\t\t{isMultiple ? (\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tclass={clsx('kol-table__selection-label', {\n\t\t\t\t\t\t\t\t'kol-table__selection-label--disabled': disabled,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<KolIconTag class=\"kol-table__selection-icon\" _icons={`codicon ${selected ? 'codicon-check' : ''}`} _label=\"\" />\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass={clsx('kol-table__selection-input kol-table__selection-input--checkbox')}\n\t\t\t\t\t\t\t\tref={(el) => el && this.checkboxRefs.push(el)}\n\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\tonInput={(event: Event) => {\n\t\t\t\t\t\t\t\t\tconst updatedSelectedKeys = !selected\n\t\t\t\t\t\t\t\t\t\t? [...(selection?.selectedKeys ?? []), keyProperty]\n\t\t\t\t\t\t\t\t\t\t: selection?.selectedKeys?.filter((key) => key !== keyProperty);\n\t\t\t\t\t\t\t\t\tthis.handleSelectionChangeCallbackAndEvent(event, updatedSelectedKeys ?? []);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<label class=\"kol-table__selection-label\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass={clsx('kol-table__selection-input kol-table__selection-input--radio')}\n\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\tonInput={(event: Event) => {\n\t\t\t\t\t\t\t\t\tthis.handleSelectionChangeCallbackAndEvent(event, keyProperty);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t)}\n\t\t\t\t\t<KolTooltipWcTag\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclass=\"kol-table__selection-input-tooltip\"\n\t\t\t\t\t\t_align=\"right\"\n\t\t\t\t\t\t_id={`${keyProperty}-label`}\n\t\t\t\t\t\t_label={label}\n\t\t\t\t\t></KolTooltipWcTag>\n\t\t\t\t</div>\n\t\t\t</td>\n\t\t);\n\t}\n\n\t/**\n\t * Renders a full table row by mapping over each cell and calling `renderTableCell`.\n\t * It also handles the row's unique key generation and selection functionality.\n\t *\n\t * @param {KoliBriTableCell[]} row  The data for the current row.\n\t * @param {number} rowIndex  The index of the current row being rendered.\n\t * @param isVertical\n\t * @param isFooter\n\t * @returns {JSX.Element}  The rendered row with its cells.\n\t */\n\tprivate readonly renderTableRow = (\n\t\trow: (KoliBriTableCell & KoliBriTableDataType)[],\n\t\trowIndex: number,\n\t\tisVertical: boolean,\n\t\tisFooter: boolean = false,\n\t): JSX.Element => {\n\t\tlet key = String(rowIndex);\n\t\tif (this.horizontal && row[0]?.data) {\n\t\t\tkey = this.getDataKey(row[0].data) ?? key;\n\t\t}\n\n\t\treturn (\n\t\t\t<tr\n\t\t\t\tclass={clsx('kol-table__row', {\n\t\t\t\t\t'kol-table__row--body': !isFooter,\n\t\t\t\t\t'kol-table__row--footer': isFooter,\n\t\t\t\t})}\n\t\t\t\tkey={`row-${key}`}\n\t\t\t>\n\t\t\t\t{this.renderSelectionCell(row, rowIndex)}\n\t\t\t\t{row.map((cell, colIndex) => this.renderTableCell(cell, rowIndex, colIndex, isVertical))}\n\t\t\t</tr>\n\t\t);\n\t};\n\n\tprivate getColumnSettings(cell: KoliBriTableCell | KoliBriTableHeaderCell): ColumnSettings | undefined {\n\t\treturn this.state._tableSettings?.columns.find((setting) => setting.key === (cell as KoliBriTableHeaderCellWithLogic).key);\n\t}\n\n\t/**\n\t * Renders a table cell, either as a data cell (`<td>`) or a header cell (`<th>`).\n\t * If a custom `render` function is provided in the cell, it will be used to display content.\n\t *\n\t * @param {KoliBriTableCell} cell The cell data, containing label, colSpan, rowSpan, and potential render function.\n\t * @param {number} rowIndex  The current row index.\n\t * @param {number} colIndex  The current column index.\n\t * @returns {JSX.Element}  The rendered table cell (either `<td>` or `<th>`).\n\t */\n\tprivate readonly renderTableCell = (cell: KoliBriTableCell, rowIndex: number, colIndex: number, isVertical: boolean): JSX.Element => {\n\t\t// Skip rendering if the column is not visible\n\t\tconst columnSetting = this.getColumnSettings(cell);\n\t\tif (columnSetting && !columnSetting.visible) {\n\t\t\treturn '';\n\t\t}\n\n\t\tlet key = `${rowIndex}-${colIndex}-${cell.label}`;\n\t\tif (cell.data) {\n\t\t\tconst dataKey = this.getDataKey(cell.data);\n\t\t\tkey = dataKey ? `${dataKey}-${this.horizontal ? colIndex : rowIndex}` : key;\n\t\t}\n\n\t\tif ((cell as KoliBriTableHeaderCellWithLogic).headerCell) {\n\t\t\treturn this.renderHeadingCell(cell, rowIndex, colIndex, isVertical);\n\t\t} else {\n\t\t\treturn (\n\t\t\t\t<td\n\t\t\t\t\tkey={`cell-${key}`}\n\t\t\t\t\tclass={clsx('kol-table__cell kol-table__cell--body', {\n\t\t\t\t\t\t[`kol-table__cell--align-${cell.textAlign}`]: cell.textAlign,\n\t\t\t\t\t})}\n\t\t\t\t\tcolSpan={cell.colSpan}\n\t\t\t\t\trowSpan={cell.rowSpan}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\ttextAlign: cell.textAlign,\n\t\t\t\t\t\twidth: columnSetting?.width ? `${columnSetting.width}ch` : cell.width,\n\t\t\t\t\t}}\n\t\t\t\t\tref={\n\t\t\t\t\t\ttypeof cell.render === 'function'\n\t\t\t\t\t\t\t? (el) => {\n\t\t\t\t\t\t\t\t\tthis.cellRender(cell as KoliBriTableHeaderCellWithLogic & { render: KoliBriTableRender }, el);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{typeof cell.render !== 'function' ? cell.label : ''}\n\t\t\t\t</td>\n\t\t\t);\n\t\t}\n\t};\n\n\tprivate getSelectionKeyPropertyName(): string {\n\t\treturn this.state._selection?.keyPropertyName ?? 'id';\n\t}\n\n\tprivate getDataWithSelectionEnabled() {\n\t\tconst keyPropertyName = this.getSelectionKeyPropertyName();\n\t\treturn this.state._data.filter((item) => !this.state._selection?.disabledKeys?.includes(item[keyPropertyName] as string));\n\t}\n\n\tprivate getSelectedKeysWithoutDisabledKeys() {\n\t\treturn this.state._selection?.selectedKeys?.filter((key) => !this.state._selection?.disabledKeys?.includes(key));\n\t}\n\n\tprivate getSelectedKeysWithDisabledKeysOnly() {\n\t\treturn this.state._selection?.selectedKeys?.filter((key) => this.state._selection?.disabledKeys?.includes(key));\n\t}\n\n\tprivate getRevertedSelection(selectAll: boolean) {\n\t\tconst keyPropertyName = this.getSelectionKeyPropertyName();\n\t\tconst selection = this.getSelectedKeysWithDisabledKeysOnly() ?? []; // Always include already selected, but disabled, rows.\n\n\t\tif (selectAll) {\n\t\t\tselection.push(...this.getDataWithSelectionEnabled().map((el) => el?.[keyPropertyName] as string)); // add all enabled rows\n\t\t}\n\n\t\treturn selection;\n\t}\n\n\t/**\n\t * Calculates and returns the minimum width for a table based on its settings and columns' visibility and widths.\n\t *\n\t * @return {string} The minimum width of the table as a string. If `_minWidth` is set to 'auto', the width is\n\t * calculated based on the total visible column widths in characters. Otherwise, it returns the greater value\n\t * between `_minWidth` and the calculated total visible column widths.\n\t */\n\tprivate getTableMinWidth(): string {\n\t\tconst totalColumnWidth = this.state._tableSettings?.columns.filter((col) => col.visible).reduce((total, col) => total + (col.width ?? 0), 0) ?? 0;\n\t\treturn this.state._minWidth === 'auto' ? `${totalColumnWidth}ch` : `max(${this.state._minWidth}, ${totalColumnWidth}ch)`;\n\t}\n\n\t/**\n\t * Renders the header cell for row selection. This cell contains a checkbox for selecting\n\t * all rows when selection is enabled. If multiple selection is allowed, the checkbox allows\n\t * selecting/deselecting all rows at once. It also supports an indeterminate state\n\t * if only some rows are selected.\n\t *\n\t * @returns {JSX.Element} - The rendered header cell containing the selection checkbox.\n\t */\n\tprivate renderHeadingSelectionCell(): JSX.Element {\n\t\tconst selection = this.state._selection;\n\t\tif (!selection || (!selection.multiple && selection.multiple !== undefined))\n\t\t\treturn <th class=\"kol-table__cell kol-table__cell--header\" key={`thead-0`}></th>;\n\t\tconst selectedKeyLength = this.getSelectedKeysWithoutDisabledKeys()?.length ?? 0;\n\t\tconst dataLength = this.getDataWithSelectionEnabled().length;\n\t\tconst isChecked = selectedKeyLength === dataLength;\n\t\tconst indeterminate = selectedKeyLength !== 0 && !isChecked;\n\t\tlet translationKey = 'kol-table-selection-indeterminate' as TranslationKey;\n\t\tif (isChecked && !indeterminate) {\n\t\t\ttranslationKey = 'kol-table-selection-none';\n\t\t}\n\t\tif (selectedKeyLength === 0) {\n\t\t\ttranslationKey = 'kol-table-selection-all';\n\t\t}\n\t\tconst label = translate(translationKey);\n\t\treturn (\n\t\t\t<th key={`thead-0-selection`} class=\"kol-table__cell kol-table__cell--header\">\n\t\t\t\t<div\n\t\t\t\t\tclass={clsx('kol-table__selection', {\n\t\t\t\t\t\t'kol-table__selection--indeterminate': indeterminate,\n\t\t\t\t\t\t'kol-table__selection--checked': isChecked,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t<label class=\"kol-table__selection-label\">\n\t\t\t\t\t\t<KolIconTag class=\"kol-table__selection-icon\" _icons={`codicon ${indeterminate ? 'codicon-remove' : isChecked ? 'codicon-check' : ''}`} _label=\"\" />\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass={clsx('kol-table__selection-input kol-table__selection-input--checkbox')}\n\t\t\t\t\t\t\tdata-testid=\"selection-checkbox-all\"\n\t\t\t\t\t\t\tref={(el) => el && this.checkboxRefs.push(el)}\n\t\t\t\t\t\t\tname=\"selection\"\n\t\t\t\t\t\t\tchecked={isChecked && !indeterminate}\n\t\t\t\t\t\t\tindeterminate={indeterminate}\n\t\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\tonInput={(event: Event) => {\n\t\t\t\t\t\t\t\tthis.handleSelectionChangeCallbackAndEvent(event, this.getRevertedSelection(!isChecked));\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</label>\n\t\t\t\t\t<KolTooltipWcTag\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclass=\"kol-table__selection-input-tooltip\"\n\t\t\t\t\t\t_align=\"right\"\n\t\t\t\t\t\t_id={`${translationKey}-label`}\n\t\t\t\t\t\t_label={label}\n\t\t\t\t\t></KolTooltipWcTag>\n\t\t\t\t</div>\n\t\t\t</th>\n\t\t);\n\t}\n\n\t/**\n\t * This header cell is rendered as a TD element when in addition to the horizontal header rows\n\t * there are also vertical header columns. In this case, the cell is rendered blank above the\n\t * vertical header columns.\n\t */\n\tprivate renderHeaderTdCell(): JSX.Element {\n\t\treturn (\n\t\t\t<Fragment>\n\t\t\t\t{Array.isArray(this.state._headerCells.horizontal) &&\n\t\t\t\t\tthis.state._headerCells.horizontal.length > 0 &&\n\t\t\t\t\tArray.isArray(this.state._headerCells.vertical) &&\n\t\t\t\t\tthis.state._headerCells.vertical.length > 0 &&\n\t\t\t\t\tArray.isArray(this.state._headerCells.horizontal) && (\n\t\t\t\t\t\t<td aria-hidden=\"true\" colSpan={this.state._headerCells.vertical.length} rowSpan={this.state._headerCells.horizontal.length}></td>\n\t\t\t\t\t)}\n\t\t\t</Fragment>\n\t\t);\n\t}\n\n\t/**\n\t *  Renders a table header cell (`<th>`), with optional sorting functionality.\n\t *  If the cell has a `sortDirection` property, a sort button is rendered within the header.\n\t *\n\t * @param {KoliBriTableHeaderCell} cell  The header cell data, containing label, colSpan, rowSpan, and possible sort direction.\n\t * @param {number} rowIndex  The index of the current row in the table.\n\t * @param {number} colIndex  The index of the current column in the row.\n\t * @returns {JSX.Element}  The rendered header cell with possible sorting controls.\n\t */\n\tprivate renderHeadingCell(cell: KoliBriTableHeaderCell, rowIndex: number, colIndex: number, isVertical: boolean): JSX.Element {\n\t\t// Skip rendering if the column is not visible\n\t\tconst columnSettings = this.getColumnSettings(cell);\n\t\tif (columnSettings && !columnSettings.visible) {\n\t\t\treturn '';\n\t\t}\n\n\t\tlet ariaSort = undefined;\n\t\tlet sortButtonIcon = 'codicon codicon-fold';\n\n\t\tif (cell.sortDirection) {\n\t\t\tswitch (cell.sortDirection) {\n\t\t\t\tcase 'ASC':\n\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-up';\n\t\t\t\t\tariaSort = 'ascending';\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'DESC':\n\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-down';\n\t\t\t\t\tariaSort = 'descending';\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\tconst scope = isVertical ? 'row' : typeof cell.colSpan === 'number' && cell.colSpan > 1 ? 'colgroup' : 'col';\n\n\t\treturn (\n\t\t\t<th\n\t\t\t\tkey={`${rowIndex}-${colIndex}-${cell.label}`}\n\t\t\t\tclass={clsx('kol-table__cell kol-table__cell--header', {\n\t\t\t\t\t[`kol-table__cell--align-${cell.textAlign}`]: cell.textAlign,\n\t\t\t\t\t[`kol-table__cell--${ariaSort}`]: ariaSort,\n\t\t\t\t})}\n\t\t\t\tscope={scope}\n\t\t\t\tcolSpan={cell.colSpan}\n\t\t\t\trowSpan={cell.rowSpan}\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: columnSettings?.width ? `${columnSettings.width}ch` : cell.width,\n\t\t\t\t}}\n\t\t\t\taria-sort={ariaSort}\n\t\t\t\tdata-sort={`sort-${cell.sortDirection}`}\n\t\t\t>\n\t\t\t\t{cell.sortDirection ? (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"kol-table__sort-button\"\n\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t_icons={{ right: sortButtonIcon }}\n\t\t\t\t\t\t_label={cell.label}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: (event: MouseEvent) => {\n\t\t\t\t\t\t\t\tif (typeof this.state._on?.onSort === 'function' && cell.key && cell.sortDirection) {\n\t\t\t\t\t\t\t\t\tthis.state._on.onSort(event, {\n\t\t\t\t\t\t\t\t\t\tkey: cell.key,\n\t\t\t\t\t\t\t\t\t\tcurrentSortDirection: 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\tif (this.host) {\n\t\t\t\t\t\t\t\t\tdispatchDomEvent(this.host, KolEvent.sort, {\n\t\t\t\t\t\t\t\t\t\tkey: cell.key,\n\t\t\t\t\t\t\t\t\t\tcurrentSortDirection: 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></KolButtonWcTag>\n\t\t\t\t) : (\n\t\t\t\t\tcell.label\n\t\t\t\t)}\n\t\t\t</th>\n\t\t);\n\t}\n\n\tprivate renderSpacer(variant: 'foot' | 'head', cellDefs: KoliBriTableHeaderCell[][] | KoliBriTableCell[][]): JSX.Element {\n\t\tconst verticalHeaderColpan = this.state._headerCells.vertical?.length || 0;\n\t\tconst colspan = cellDefs?.[0]?.reduce((acc, row) => acc + (row.colSpan || 1), 0);\n\t\tconst selectionCell = this.state._selection ? 1 : 0;\n\n\t\treturn (\n\t\t\t<tr aria-hidden=\"true\" class={clsx('kol-table__spacer', `kol-table__spacer--${variant}`)}>\n\t\t\t\t<td class={clsx(`kol-table__spacer-line kol-table__spacer-line--${variant}`)} colSpan={verticalHeaderColpan + colspan + selectionCell}></td>\n\t\t\t</tr>\n\t\t);\n\t}\n\n\tprivate renderFoot(): JSX.Element[] | null {\n\t\tif (!this.state._dataFoot || this.state._dataFoot.length === 0) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst rows: KoliBriTableCell[][] = this.createDataField(this.state._dataFoot, this.state._headerCells, true);\n\t\treturn (\n\t\t\t<tfoot class=\"kol-table__footer\">\n\t\t\t\t{[\n\t\t\t\t\tthis.renderSpacer('foot', rows),\n\t\t\t\t\trows.map((row: (KoliBriTableCell & KoliBriTableDataType)[], rowIndex: number) => this.renderTableRow(row, rowIndex, true, true)),\n\t\t\t\t]}\n\t\t\t</tfoot>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst dataField = this.createDataField(this.state._data, this.state._headerCells);\n\t\tthis.checkboxRefs = [];\n\n\t\tconst sortedHorizontalHeaders = this.state._headerCells.horizontal?.map((row) => this.sortByColumnPosition(row));\n\n\t\treturn (\n\t\t\t<div class=\"kol-table\">\n\t\t\t\t<KolTableSettingsWcTag _tableSettings={this.state._tableSettings} />\n\n\t\t\t\t{/* Firefox automatically makes the following div focusable when it has a scrollbar. We implement a similar behavior cross-browser by allowing the\n\t\t\t\t * <div class=\"focus-element\"> to receive focus. Hence, we disable focus for the div to avoid having two focusable elements by setting `tabindex=\"-1\"`\n\t\t\t\t */}\n\t\t\t\t{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n\t\t\t\t<div\n\t\t\t\t\tref={(element) => (this.tableDivElement = element)}\n\t\t\t\t\tclass=\"kol-table__scroll-container\"\n\t\t\t\t\ttabindex={this.tableDivElementHasScrollbar ? '-1' : undefined}\n\t\t\t\t>\n\t\t\t\t\t<table\n\t\t\t\t\t\tclass=\"kol-table__table\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tminWidth: this.getTableMinWidth(),\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{/*\n\t\t\t\t\t\t * The following element allows the table to receive focus without providing redundant content to screen readers.\n\t\t\t\t\t\t * The `div` is technically not allowed here. But any allowed element would mutate the table semantics. Additionally, the `&nbsp;` is necessary to\n\t\t\t\t\t\t * prevent screen readers from just reading \"blank\".\n\t\t\t\t\t\t */}\n\t\t\t\t\t\t{/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n\t\t\t\t\t\t<div class=\"kol-table__focus-element\" tabindex={this.tableDivElementHasScrollbar ? '0' : undefined} aria-describedby=\"caption\">\n\t\t\t\t\t\t\t&nbsp;\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<caption class=\"kol-table__caption\" id=\"caption\">\n\t\t\t\t\t\t\t{this.state._label}\n\t\t\t\t\t\t</caption>\n\n\t\t\t\t\t\t{Array.isArray(sortedHorizontalHeaders) && (\n\t\t\t\t\t\t\t<thead class=\"kol-table__head\">\n\t\t\t\t\t\t\t\t{[\n\t\t\t\t\t\t\t\t\tsortedHorizontalHeaders.map((cols, rowIndex) => (\n\t\t\t\t\t\t\t\t\t\t<tr class=\"kol-table__head-row\" key={`thead-${rowIndex}`}>\n\t\t\t\t\t\t\t\t\t\t\t{this.state._selection && this.renderHeadingSelectionCell()}\n\t\t\t\t\t\t\t\t\t\t\t{rowIndex === 0 && this.renderHeaderTdCell()}\n\t\t\t\t\t\t\t\t\t\t\t{Array.isArray(cols) && cols.map((cell, colIndex) => this.renderHeadingCell(cell, rowIndex, colIndex, false))}\n\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t)),\n\t\t\t\t\t\t\t\t\tthis.renderSpacer('head', sortedHorizontalHeaders),\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 class=\"kol-table__body\">\n\t\t\t\t\t\t\t{dataField.map((row: (KoliBriTableCell & KoliBriTableDataType)[], rowIndex: number) => this.renderTableRow(row, rowIndex, true))}\n\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t{this.renderFoot()}\n\t\t\t\t\t</table>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as t,H as e}from"./index-a0b4dca2.js";import{o as i}from"./component-names-aa3cbc3c.js";const o="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host,\n  .kol-table-stateless-wc {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .table {\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  table {\n    width: 100%;\n  }\n  caption {\n    text-align: start;\n  }\n  .focus-element {\n    font-size: 0;\n  }\n  .focus-element:focus {\n    outline: 0 !important;\n  }\n  .table:has(.focus-element:focus) {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto Highlight;\n    outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto -webkit-focus-ring-color;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .table-sort-button .button {\n    color: inherit;\n  }\n  tbody th,\n  th.align-left {\n    text-align: left;\n  }\n  tbody th .table-sort-button .button-inner,\n  th.align-left .table-sort-button .button-inner {\n    justify-items: start;\n  }\n  th.align-center {\n    text-align: center;\n  }\n  th.align-center .table-sort-button .button-inner {\n    justify-items: center;\n  }\n  th.align-right {\n    text-align: right;\n  }\n  th.align-right .table-sort-button .button-inner {\n    justify-items: end;\n  }\n  tr.foot-spacer,\n  tr.head-spacer {\n    display: none;\n  }\n  .selection-header-cell {\n    width: 0;\n  }\n  .selection-cell {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .input label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .input .icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .input input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .input input:before {\n    content: \"\";\n  }\n  .input input[type=checkbox] {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .input input[type=radio] {\n    display: flex;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .input input[type=radio]:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .input input[type=radio]:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .input input[type=radio]:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}",a=o,l=class{constructor(t){n(this,t),this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}render(){return t(e,{key:"603d3fd8fcff2e5bb7e325d3a4d99fe317a06666",class:"kol-table-stateless"},t(i,{key:"eb7f040026d5dbfb544902986f4808b32f4d50de",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection}))}};l.style={default:a};export{l as kol_table_stateless};
+import{r as n,h as e}from"./index-4492e98a.js";import{p as t}from"./component-names-60d77143.js";const o="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    margin: auto;\n    width: 100%;\n  }\n}\n@layer kol-component {\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    border: 1px solid #000;\n    margin: 0;\n    padding: 0;\n  }\n}\n@layer kol-component {\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    right: 0;\n    top: 0;\n    z-index: 1;\n  }\n  .kol-table-settings__columns-container {\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-height: calc(200rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    align-items: center;\n    display: grid;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content 1fr calc(100rem / var(--kolibri-root-font-size, 16)) auto auto;\n    overflow: hidden;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n    position: relative;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__focus-element:focus {\n    outline: 0 !important;\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}",i=o,l=class{constructor(e){n(this,e),this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0,this._tableSettings=void 0}render(){return e(t,{key:"9e5cbf024de83c62888cfee1ecb15ee9ed1f8ffc",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection,_tableSettings:this._tableSettings})}};l.style={default:i};export{l as kol_table_stateless};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolTableStatelessDefaultStyle0","KolTableStateless","render","h","Host","key","class","KolTableStatelessWcTag","_data","this","_dataFoot","_headerCells","_label","_minWidth","_on","_selection"],"sources":["src/components/table-stateless/style.scss?tag=kol-table-stateless&mode=default&encapsulation=shadow","src/components/table-stateless/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../@shared/kol-table-stateless-mixin';\n@import '../host-display-block';\n\n@include kol-table-stateless-styles;\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nimport { KolTableStatelessWcTag } from '../../core/component-names';\nimport type {\n\tTableDataFootPropType,\n\tTableDataPropType,\n\tTableHeaderCellsPropType,\n\tTableStatelessProps,\n\tTableCallbacksPropType,\n\tTableSelectionPropType,\n} from '../../schema';\n\n@Component({\n\ttag: 'kol-table-stateless',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTableStateless implements TableStatelessProps {\n\t/**\n\t * Defines the primary table data.\n\t */\n\t@Prop() public _data!: TableDataPropType;\n\n\t/**\n\t * Defines the data for the table footer.\n\t */\n\t@Prop() public _dataFoot?: TableDataFootPropType;\n\n\t/**\n\t * Defines the horizontal and vertical table headers.\n\t */\n\t@Prop() public _headerCells!: TableHeaderCellsPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Defines the table min-width.\n\t */\n\t@Prop() public _minWidth?: string;\n\n\t/**\n\t * Defines the callback functions for table events.\n\t */\n\t@Prop() public _on?: TableCallbacksPropType;\n\n\t/**\n\t * Defines how rows can be selected and the current selection.\n\t */\n\t@Prop() public _selection?: TableSelectionPropType;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-table-stateless\">\n\t\t\t\t<KolTableStatelessWcTag\n\t\t\t\t\t_data={this._data}\n\t\t\t\t\t_dataFoot={this._dataFoot}\n\t\t\t\t\t_headerCells={this._headerCells}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_minWidth={this._minWidth}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_selection={this._selection}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;wGAAA,MAAMA,EAAkB,8+QACxB,MAAAC,EAAeD,E,MCmBFE,EAAiB,M,+LAoCtB,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,uBACXH,EAACI,EAAsB,CAAAF,IAAA,2CACtBG,MAAOC,KAAKD,MACZE,UAAWD,KAAKC,UAChBC,aAAcF,KAAKE,aACnBC,OAAQH,KAAKG,OACbC,UAAWJ,KAAKI,UAChBC,IAAKL,KAAKK,IACVC,WAAYN,KAAKM,a","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolTableStatelessDefaultStyle0","KolTableStateless","render","h","KolTableStatelessWcTag","key","_data","this","_dataFoot","_headerCells","_label","_minWidth","_on","_selection","_tableSettings"],"sources":["src/components/table-stateless/style.scss?tag=kol-table-stateless&mode=default&encapsulation=shadow","src/components/table-stateless/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n@use '../../styles/kol-alert-mixin' as *;\n@use '../@shared/kol-button-mixin' as *;\n@use '../@shared/kol-popover-button-mixin' as *;\n@use '../@shared/kol-table-stateless-mixin' as *;\n@use '../@shared/mixins' as *;\n@use '../host-display-block' as *;\n@use '../tooltip/style' as *;\n\n@include kol-alert;\n@include kol-button-styles('kol-button');\n@include kol-popover-button-styles;\n@include kol-table-stateless-styles;\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Prop } from '@stencil/core';\nimport { KolTableStatelessWcTag } from '../../core/component-names';\nimport type {\n\tTableCallbacksPropType,\n\tTableDataFootPropType,\n\tTableDataPropType,\n\tTableHeaderCellsPropType,\n\tTableSelectionPropType,\n\tTableStatelessProps,\n} from '../../schema';\nimport type { MinWidthPropType } from '../../schema/props/min-width';\nimport type { TableSettingsPropType } from '../../schema/props/table-settings';\n\n@Component({\n\ttag: 'kol-table-stateless',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTableStateless implements TableStatelessProps {\n\t/**\n\t * Defines the primary table data.\n\t */\n\t@Prop() public _data!: TableDataPropType;\n\n\t/**\n\t * Defines the data for the table footer.\n\t */\n\t@Prop() public _dataFoot?: TableDataFootPropType;\n\n\t/**\n\t * Defines the horizontal and vertical table headers.\n\t */\n\t@Prop() public _headerCells!: TableHeaderCellsPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Defines the table min-width (CSS width values).\n\t */\n\t@Prop() public _minWidth!: MinWidthPropType;\n\n\t/**\n\t * Defines the callback functions for table events.\n\t */\n\t@Prop() public _on?: TableCallbacksPropType;\n\n\t/**\n\t * Defines how rows can be selected and the current selection.\n\t */\n\t@Prop() public _selection?: TableSelectionPropType;\n\n\t/**\n\t * Defines the table settings including column visibility, order and width.\n\t */\n\t@Prop() public _tableSettings?: TableSettingsPropType;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTableStatelessWcTag\n\t\t\t\t_data={this._data}\n\t\t\t\t_dataFoot={this._dataFoot}\n\t\t\t\t_headerCells={this._headerCells}\n\t\t\t\t_label={this._label}\n\t\t\t\t_minWidth={this._minWidth}\n\t\t\t\t_on={this._on}\n\t\t\t\t_selection={this._selection}\n\t\t\t\t_tableSettings={this._tableSettings}\n\t\t\t/>\n\t\t);\n\t}\n}\n"],"mappings":";;;iGAAA,MAAMA,EAAkB,60UACxB,MAAAC,EAAeD,E,MCoBFE,EAAiB,M,6NAyCtB,MAAAC,GACN,OACCC,EAACC,EAAsB,CAAAC,IAAA,2CACtBC,MAAOC,KAAKD,MACZE,UAAWD,KAAKC,UAChBC,aAAcF,KAAKE,aACnBC,OAAQH,KAAKG,OACbC,UAAWJ,KAAKI,UAChBC,IAAKL,KAAKK,IACVC,WAAYN,KAAKM,WACjBC,eAAgBP,KAAKO,gB","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as e,g as i}from"./index-a0b4dca2.js";import{t as o}from"./i18n-5fe08f1c.js";import{a as s}from"./component-names-aa3cbc3c.js";import{w as a,j as l,f as r,s as d,k as h,g as c,h as b,v as u}from"./prop.validators-c5e6ad2d.js";import{v as f}from"./align-3f029493.js";import{v as p}from"./label-d70e7c34.js";import{L as m}from"./dev.utils-fab45cbc.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./index-541b643a.js";const g=["select-automatic","select-manual"],v=(t,e)=>{a(t,"_behavior",(t=>"string"==typeof t&&g.includes(t)),new Set([`KoliBriTabBehavior {${g.join(", ")}`]),e)};var y;!function(t){t.ArrowDown="ArrowDown",t.ArrowLeft="ArrowLeft",t.ArrowRight="ArrowRight",t.ArrowUp="ArrowUp",t.Enter="Enter",t.Space=" "}(y||(y={}));const w="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div {\n    display: grid;\n  }\n  .tabs-content {\n    overflow: auto;\n  }\n  .tabs-button-group {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  .tabs-button-group button {\n    border-bottom-color: transparent;\n    border-bottom-style: solid;\n    display: block;\n  }\n  div.grid,\n  div[role=tabpanel] {\n    height: 100%;\n  }\n  :host > .tabs-align-right {\n    display: grid;\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-right .tabs-button-group {\n    flex-direction: column;\n    order: 2;\n  }\n  :host > .tabs-align-right .tabs-button-group .kol-button-wc {\n    width: 100%;\n  }\n  :host > .tabs-align-left {\n    display: grid;\n    grid-template-columns: auto 1fr;\n  }\n  :host > .tabs-align-left .tabs-button-group {\n    flex-direction: column;\n    order: 0;\n  }\n  :host > .tabs-align-left .tabs-button-group .kol-button-wc {\n    width: 100%;\n  }\n  :host > .tabs-align-bottom {\n    display: grid;\n    grid-template-rows: 1fr auto;\n  }\n  :host > .tabs-align-bottom .tabs-button-group {\n    order: 2;\n  }\n  :host > .tabs-align-bottom .tabs-button-group > div {\n    display: flex;\n    margin: 0 1em;\n  }\n  :host > .tabs-align-bottom .tabs-button-group > div > div:first-child {\n    margin: 0 1em 0 0;\n  }\n  :host > .tabs-align-top {\n    display: grid;\n    grid-template-rows: auto 1fr;\n  }\n  :host > .tabs-align-top .tabs-button-group {\n    order: 0;\n  }\n  :host > .tabs-align-top .tabs-button-group > div {\n    display: flex;\n  }\n  :host > .tabs-align-top .tabs-button-group > div > div {\n    margin: 0 1em;\n  }\n  :host > .tabs-align-top .tabs-button-group > div > div:first-child {\n    margin: 0 1em 0 0;\n  }\n}",k=w,x=class{constructor(e){t(this,e),this.onCreateLabel=`${o("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,n=1)=>{const o=e+n;return o<t.length?t[o]._disabled?this.nextPossibleTabIndex(t,e,n+1):o:e},this.prevPossibleTabIndex=(t,e,n=1)=>{const o=e-n;return o>=0?t[o]._disabled?this.prevPossibleTabIndex(t,e,n+1):o:e},this.onKeyDown=t=>{switch(t.key){case y.ArrowRight:this.goToNextTab(t);break;case y.ArrowLeft:this.goToPreviousTab(t);break;case y.Space:case y.Enter:this.activateFocusedTab(t)}},this.onClickSelect=(t,e)=>{this.selectNextTabEvent(t,e)},this.onMouseDown=t=>{t.preventDefault(),t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,n=!0,o)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===n){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,o||t);t=o||t,n=!1}if(!1===n){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,o||t);l("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return t},this.syncSelectedAndTabs=(t,e,n,o)=>{let a,i;a="_selected"===o?t:this.state._selected,i="_tabs"===o?t:this.state._tabs,i.length>0&&e.set("_selected",this.selectNextNotDisabledTab(a,i))},this.handleTabPanels=()=>{var t,e,n;if(this.tabPanelHost instanceof HTMLDivElement)for(let o=this.tabPanelHost.children.length;o<this.state._tabs.length;o++){const a=document.createElement("div");a.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${o}`),a.setAttribute("id",`tabpanel-${o}`),a.setAttribute("role","tabpanel"),a.setAttribute("hidden","");const i=document.createElement("slot");i.setAttribute("name",`tabpanel-slot-${o}`),a.appendChild(i),this.tabPanelHost.appendChild(a),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[o])&&(null===(n=this.host)||void 0===n||n.children[o].setAttribute("slot",`tabpanel-slot-${o}`))}},this.onCreate=t=>{var e,n;t.preventDefault(),t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(n=this.state._on)||void 0===n||n.onCreate(t))},this.onBlur=()=>{this.currentFocusIndex=void 0},this._align="top",this._behavior=void 0,this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]}}getCurrentFocusIndex(){return"number"==typeof this.currentFocusIndex?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return"select-manual"===this._behavior?"selectFocusOnly":"activateCompletely"}goToNextTab(t){const e=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}goToPreviousTab(t){const e=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}activateFocusedTab(t){"number"==typeof this.currentFocusIndex&&this.onSelect(t,this.currentFocusIndex)}selectNextTabEvent(t,e,n="activateCompletely"){var o,a;if(this.currentFocusIndex=e,this.focusTabById(e),"activateCompletely"===n){this._selected=e;null===(a=null===(o=this.state._tabs[e]._on)||void 0===o?void 0:o.onSelect)||void 0===a||a.call(o,t,e),this.onSelect(t,e)}}renderButtonGroup(){return n("div",{"aria-label":this.state._label,class:"tabs-button-group kol-button-group-wc",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map(((t,e)=>n(s,{_disabled:t._disabled,_icons:t._icons,_hideLabel:t._hideLabel,_label:t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_variant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${e}`,_role:"tab",_value:e}))),this.showCreateTab&&n(s,{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return n(e,{key:"8aff41e14407dae766c5952a39045ff0402cc336",class:"kol-tabs"},n("div",{key:"13a1f46f004a709d26bfc0a73d2161a7ded3a035",ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._align}`]:!0}},this.renderButtonGroup(),n("div",{key:"4611503283e9419aabd03efb4bdd66beffe4e81a",class:"tabs-content",ref:this.catchTabPanelHost})))}validateAlign(t){f(this,t)}validateBehavior(t){v(this,t)}validateLabel(t){p(this,t,{required:!0})}validateOn(t){if("object"==typeof t&&null!==t){r("[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:m.debug("[KolTabs] The label text for New in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} is not set correctly."),"function"==typeof t.onCreate.callback?e.onCreate=t.onCreate.callback:m.debug("[KolTabs] The onCreate callback function for New in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} is not set correctly.")):e.onCreate=t.onCreate,this.showCreateTab="function"==typeof e.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),d(this,"_on",e)}}validateSelected(t){h(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){c(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),b("KolTabs",this.state._tabs.length)}componentWillLoad(){this.validateAlign(this._align),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateBehavior(this._behavior)}componentDidRender(){if(this.handleTabPanels(),this.tabPanelHost instanceof HTMLDivElement)for(let t=0;t<this.tabPanelHost.children.length;t++)t!==this.state._selected?this.tabPanelHost.children[t].setAttribute("hidden",""):this.tabPanelHost.children[t].removeAttribute("hidden")}focusTabById(t){if(this.tabPanelsElement){const e=u(`button#${this.state._label.replace(/\s/g,"-")}-tab-${t}`,this.tabPanelsElement);null==e||e.focus()}}onSelect(t,e){var n,o;null===(o=null===(n=this._on)||void 0===n?void 0:n.onSelect)||void 0===o||o.call(n,t,e),this.focusTabById(e)}get host(){return i(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};x.style={default:k};export{x as kol_tabs};
+import{r as t,h as n,g as e}from"./index-4492e98a.js";import{t as i}from"./i18n-efbafc80.js";import{a as o}from"./component-names-60d77143.js";import{d as s,K as a}from"./events-5886c68b.js";import{c as l}from"./clsx-09a06a12.js";import{w as r,j as d,f as h,s as c,k as b,g as u,h as f,v as p}from"./prop.validators-d189554c.js";import{v as m}from"./align-de93d774.js";import{v}from"./label-792bf136.js";import{L as g}from"./dev.utils-fab45cbc.js";import"./i18n-45224cc3.js";import"./reuse-f46e7e35.js";const y=["select-automatic","select-manual"],k=(t,e)=>{r(t,"_behavior",(t=>"string"==typeof t&&y.includes(t)),new Set([`KoliBriTabBehavior {${y.join(", ")}`]),e)};var w;!function(t){t.ArrowDown="ArrowDown",t.ArrowLeft="ArrowLeft",t.ArrowRight="ArrowRight",t.ArrowUp="ArrowUp",t.Enter="Enter",t.Space=" "}(w||(w={}));const _="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-tabs {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: var(--display);\n    grid-template-rows: var(--grid-template-rows);\n    grid-template-columns: var(--grid-template-columns);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-flex-direction: column;\n    --button-group-order: 2;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-flex-direction: column;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: grid;\n    --grid-template-rows: 1fr auto;\n    --button-group-order: 2;\n  }\n  .kol-tabs__tabs-align-top {\n    --display: grid;\n    --grid-template-rows: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs__content {\n    overflow: auto;\n  }\n  .kol-tabs__button-group {\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: var(--button-group-flex-direction);\n    order: var(--button-group-order);\n  }\n  .kol-tabs__button-group .kol-button {\n    border-bottom-color: transparent;\n    border-bottom-style: solid;\n    display: block;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n}",x=_,T=class{constructor(e){t(this,e),this.onCreateLabel=`${i("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,n=1)=>{const o=e+n;return o<t.length?t[o]._disabled?this.nextPossibleTabIndex(t,e,n+1):o:e},this.prevPossibleTabIndex=(t,e,n=1)=>{const o=e-n;return o>=0?t[o]._disabled?this.prevPossibleTabIndex(t,e,n+1):o:e},this.onKeyDown=t=>{switch(t.key){case w.ArrowRight:this.goToNextTab(t);break;case w.ArrowLeft:this.goToPreviousTab(t);break;case w.Space:case w.Enter:this.activateFocusedTab(t)}},this.onClickSelect=(t,e)=>{this.selectNextTabEvent(t,e)},this.onMouseDown=t=>{t.preventDefault()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,n=!0,o)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===n){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,o||t);t=o||t,n=!1}if(!1===n){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,o||t);d("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return t},this.syncSelectedAndTabs=(t,e,n,o)=>{let a,i;a="_selected"===o?t:this.state._selected,i="_tabs"===o?t:this.state._tabs,i.length>0&&e.set("_selected",this.selectNextNotDisabledTab(a,i))},this.refreshTabPanels=()=>{var t,e,n,o;if(this.tabPanelHost){for(;this.tabPanelHost.firstChild;)this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);for(let a=0;a<(null===(t=this.state._tabs)||void 0===t?void 0:t.length);a++){const t=document.createElement("div");t.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${a}`),t.setAttribute("id",`tabpanel-${a}`),t.setAttribute("role","tabpanel"),t.setAttribute("hidden","");const i=document.createElement("slot");i.setAttribute("name",`tabpanel-slot-${a}`),t.appendChild(i),null===(e=this.tabPanelHost)||void 0===e||e.appendChild(t),"undefined"!=typeof HTMLCollection&&(null===(n=this.host)||void 0===n?void 0:n.children)instanceof HTMLCollection&&(null===(o=this.host)||void 0===o?void 0:o.children[a])&&this.host.children[a].setAttribute("slot",`tabpanel-slot-${a}`)}this.updateVisiblePanel()}},this.updateVisiblePanel=()=>{this.tabPanelHost&&Array.from(this.tabPanelHost.children).forEach(((t,e)=>{e===this.state._selected?t.removeAttribute("hidden"):t.setAttribute("hidden","")}))},this.onCreate=t=>{var e,n;t.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(n=this.state._on)||void 0===n||n.onCreate(t))},this.onBlur=()=>{this.currentFocusIndex=void 0},this._align="top",this._behavior=void 0,this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]}}getCurrentFocusIndex(){return"number"==typeof this.currentFocusIndex?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return"select-manual"===this._behavior?"selectFocusOnly":"activateCompletely"}goToNextTab(t){const e=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}goToPreviousTab(t){const e=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}activateFocusedTab(t){"number"==typeof this.currentFocusIndex&&this.onSelect(t,this.currentFocusIndex)}selectNextTabEvent(t,e,n="activateCompletely"){var o,a;if(this.currentFocusIndex=e,this.focusTabById(e),"activateCompletely"===n){this._selected=e;null===(a=null===(o=this.state._tabs[e]._on)||void 0===o?void 0:o.onSelect)||void 0===a||a.call(o,t,e),this.onSelect(t,e)}}renderButtonGroup(){return n("div",{"aria-label":this.state._label,class:"kol-tabs__button-group",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map(((t,e)=>n(o,{_disabled:t._disabled,_icons:t._icons,_hideLabel:t._hideLabel,_label:t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_variant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${e}`,_role:"tab",_value:e}))),this.showCreateTab&&n(o,{class:"kol-tabs_button-create",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return n("div",{key:"ace31fe22b60c6419c6c04842d4b5e256a20a77c",ref:t=>{this.tabPanelsElement=t},class:l("kol-tabs",`kol-tabs--align-${this.state._align}`)},this.renderButtonGroup(),n("div",{key:"ca508552303e1da3567a6534fb68969cb1f221e4",class:"kol-tabs__content",ref:this.catchTabPanelHost}))}validateAlign(t){m(this,t)}validateBehavior(t){k(this,t)}validateLabel(t){v(this,t,{required:!0})}validateOn(t){if("object"==typeof t&&null!==t){h("[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:g.debug("[KolTabs] The label text for New in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} is not set correctly."),"function"==typeof t.onCreate.callback?e.onCreate=t.onCreate.callback:g.debug("[KolTabs] The onCreate callback function for New in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} is not set correctly.")):e.onCreate=t.onCreate,this.showCreateTab="function"==typeof e.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),c(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,afterPatch:this.refreshTabPanels}}),f("KolTabs",this.state._tabs.length)}componentWillLoad(){this.validateAlign(this._align),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateBehavior(this._behavior)}componentDidRender(){this.refreshTabPanels()}focusTabById(t){if(this.tabPanelsElement){const e=p(`button#${this.state._label.replace(/\s/g,"-")}-tab-${t}`,this.tabPanelsElement);null==e||e.focus()}}onSelect(t,e){var n,o;null===(o=null===(n=this._on)||void 0===n?void 0:n.onSelect)||void 0===o||o.call(n,t,e),this.host&&s(this.host,a.select,e),this.focusTabById(e)}get host(){return e(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};T.style={default:x};export{T as kol_tabs};

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

@@ -1 +1 @@
-{"version":3,"names":["tabBehaviorPropTypeOptions","validateTabBehavior","component","value","watchValidator","includes","Set","join","KeyboardKey","defaultStyleCss","KolTabsDefaultStyle0","KolTabs","this","onCreateLabel","translate","showCreateTab","nextPossibleTabIndex","tabs","offset","step","nextOffset","length","_disabled","prevPossibleTabIndex","onKeyDown","event","key","ArrowRight","goToNextTab","ArrowLeft","goToPreviousTab","Space","Enter","activateFocusedTab","onClickSelect","index","selectNextTabEvent","onMouseDown","preventDefault","stopPropagation","callbacks","onClick","catchTabPanelHost","el","tabPanelHost","selectNextNotDisabledTab","selected","upOrDown","initialSelected","Array","isArray","devHint","syncSelectedAndTabs","nextValue","nextState","_component","state","_selected","_tabs","set","handleTabPanels","HTMLDivElement","i","children","div","document","createElement","setAttribute","_label","replace","slot","appendChild","_a","host","HTMLCollection","_b","_c","onCreate","_on","onBlur","currentFocusIndex","undefined","_align","getCurrentFocusIndex","getKeyboardTabChangeMode","_behavior","nextFocusIndex","onSelect","nextTabIndex","changeMode","focusTabById","tab","call","renderButtonGroup","h","class","role","map","button","KolButtonWcTag","_icons","_hideLabel","_tabIndex","_tooltipAlign","_variant","_customClass","_ariaControls","_ariaSelected","_id","_role","_value","render","Host","ref","tabPanelsElement","validateAlign","validateBehavior","validateLabel","required","validateOn","featureHint","label","Log","debug","callback","setState","validateSelected","watchNumber","hooks","beforePatch","validateTabs","watchJsonArrayString","item","uiUxHintMillerscheZahl","componentWillLoad","componentDidRender","removeAttribute","koliBriQuerySelector","focus"],"sources":["src/schema/props/tab-behavior.ts","src/schema/enums/keyboard.ts","src/components/tabs/style.scss?tag=kol-tabs&mode=default&encapsulation=shadow","src/components/tabs/shadow.tsx"],"sourcesContent":["/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils';\n\nconst tabBehaviorPropTypeOptions = ['select-automatic', 'select-manual'] as const;\nexport type TabBehaviorPropType = (typeof tabBehaviorPropTypeOptions)[number];\n\n/**\n * Defines which behavior is active.\n */\nexport type PropTabBehavior = {\n\tbehavior: TabBehaviorPropType;\n};\n\n/* validator */\nexport const validateTabBehavior = (component: Generic.Element.Component, value?: TabBehaviorPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_behavior`,\n\t\t(value) => typeof value === 'string' && tabBehaviorPropTypeOptions.includes(value),\n\t\tnew Set([`KoliBriTabBehavior {${tabBehaviorPropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t);\n};\n","export enum KeyboardKey {\n\tArrowDown = 'ArrowDown',\n\tArrowLeft = 'ArrowLeft',\n\tArrowRight = 'ArrowRight',\n\tArrowUp = 'ArrowUp',\n\tEnter = 'Enter',\n\tSpace = ' ',\n}\n","@import '../@shared/mixins';\n@import '../style';\n@import '../host-display-block';\n@import '../tooltip/style.scss';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t:host > div {\n\t\tdisplay: grid;\n\t}\n\n\t.tabs-content {\n\t\toverflow: auto;\n\t}\n\n\t.tabs-button-group {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\n\t\tbutton {\n\t\t\tborder-bottom-color: transparent;\n\t\t\tborder-bottom-style: solid;\n\t\t\tdisplay: block;\n\t\t}\n\t}\n\n\tdiv.grid,\n\tdiv[role='tabpanel'] {\n\t\theight: 100%;\n\t}\n\n\t:host > .tabs-align-right {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr auto;\n\n\t\t.tabs-button-group {\n\t\t\tflex-direction: column;\n\t\t\torder: 2;\n\n\t\t\t.kol-button-wc {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t:host > .tabs-align-left {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: auto 1fr;\n\n\t\t.tabs-button-group {\n\t\t\tflex-direction: column;\n\t\t\torder: 0;\n\n\t\t\t.kol-button-wc {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t:host > .tabs-align-bottom {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: 1fr auto;\n\n\t\t.tabs-button-group {\n\t\t\torder: 2;\n\n\t\t\t& > div {\n\t\t\t\tdisplay: flex;\n\n\t\t\t\t& > div {\n\t\t\t\t\t&:first-child {\n\t\t\t\t\t\tmargin: 0 1em 0 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tmargin: 0 1em;\n\t\t\t}\n\t\t}\n\t}\n\n\t:host > .tabs-align-top {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: auto 1fr;\n\n\t\t.tabs-button-group {\n\t\t\torder: 0;\n\n\t\t\t& > div {\n\t\t\t\tdisplay: flex;\n\n\t\t\t\t& > div {\n\t\t\t\t\t&:first-child {\n\t\t\t\t\t\tmargin: 0 1em 0 0;\n\t\t\t\t\t}\n\n\t\t\t\t\tmargin: 0 1em;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import type {\n\tAlignPropType,\n\tButtonCallbacksPropType,\n\tKoliBriTabsCallbacks,\n\tLabelPropType,\n\tStencilUnknown,\n\tStringified,\n\tTabBehaviorPropType,\n\tTabButtonProps,\n\tTabsAPI,\n\tTabsStates,\n} from '../../schema';\nimport {\n\tdevHint,\n\tfeatureHint,\n\tkoliBriQuerySelector,\n\tLog,\n\tsetState,\n\tuiUxHintMillerscheZahl,\n\tvalidateAlign,\n\tvalidateLabel,\n\tvalidateTabBehavior,\n\twatchJsonArrayString,\n\twatchNumber,\n} from '../../schema';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type { JSX } from '@stencil/core';\nimport type { Generic } from 'adopted-style-sheets';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { KeyboardKey } from '../../schema/enums';\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements TabsAPI {\n\t@Element() private readonly host?: HTMLKolTabsElement;\n\tprivate tabPanelsElement?: HTMLElement;\n\tprivate onCreateLabel = `${translate('kol-new')} …`;\n\tprivate showCreateTab = false;\n\tprivate currentFocusIndex: number | undefined;\n\n\tprivate nextPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step = 1): number => {\n\t\tconst nextOffset = offset + step;\n\n\t\tif (nextOffset < tabs.length) {\n\t\t\tif (tabs[nextOffset]._disabled) {\n\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t}\n\t\t\treturn nextOffset;\n\t\t}\n\n\t\treturn offset;\n\t};\n\n\tprivate prevPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step = 1): number => {\n\t\tconst nextOffset = offset - step;\n\n\t\tif (nextOffset >= 0) {\n\t\t\tif (tabs[nextOffset]._disabled) {\n\t\t\t\treturn this.prevPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t}\n\t\t\treturn nextOffset;\n\t\t}\n\n\t\treturn offset;\n\t};\n\n\tprivate onKeyDown = (event: KeyboardEvent) => {\n\t\tswitch (event.key as KeyboardKey) {\n\t\t\tcase KeyboardKey.ArrowRight:\n\t\t\t\tthis.goToNextTab(event);\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.ArrowLeft:\n\t\t\t\tthis.goToPreviousTab(event);\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.Space:\n\t\t\tcase KeyboardKey.Enter:\n\t\t\t\tthis.activateFocusedTab(event);\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tprivate getCurrentFocusIndex(): number {\n\t\tif (typeof this.currentFocusIndex === 'number') {\n\t\t\treturn this.currentFocusIndex;\n\t\t}\n\n\t\treturn this.state._selected;\n\t}\n\n\tprivate getKeyboardTabChangeMode(): 'selectFocusOnly' | 'activateCompletely' {\n\t\tif (this._behavior === 'select-manual') {\n\t\t\treturn 'selectFocusOnly';\n\t\t}\n\n\t\treturn 'activateCompletely';\n\t}\n\n\tprivate goToNextTab(event: KeyboardEvent) {\n\t\tconst nextFocusIndex = this.nextPossibleTabIndex(this.state._tabs, this.getCurrentFocusIndex());\n\t\tthis.selectNextTabEvent(event, nextFocusIndex, this.getKeyboardTabChangeMode());\n\t}\n\n\tprivate goToPreviousTab(event: KeyboardEvent) {\n\t\tconst nextFocusIndex = this.prevPossibleTabIndex(this.state._tabs, this.getCurrentFocusIndex());\n\t\tthis.selectNextTabEvent(event, nextFocusIndex, this.getKeyboardTabChangeMode());\n\t}\n\n\tprivate activateFocusedTab(event: KeyboardEvent) {\n\t\tif (typeof this.currentFocusIndex === 'number') {\n\t\t\tthis.onSelect(event, this.currentFocusIndex);\n\t\t}\n\t}\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.selectNextTabEvent(event, index);\n\t};\n\n\tprivate selectNextTabEvent(\n\t\tevent: KeyboardEvent | MouseEvent,\n\t\tnextTabIndex: number,\n\t\tchangeMode: 'selectFocusOnly' | 'activateCompletely' = 'activateCompletely',\n\t): void {\n\t\tthis.currentFocusIndex = nextTabIndex;\n\n\t\tthis.focusTabById(nextTabIndex);\n\n\t\tif (changeMode === 'activateCompletely') {\n\t\t\tthis._selected = nextTabIndex;\n\n\t\t\tconst tab = this.state._tabs[nextTabIndex];\n\t\t\ttab._on?.onSelect?.(event, nextTabIndex);\n\n\t\t\tthis.onSelect(event, nextTabIndex);\n\t\t}\n\t}\n\n\t// private readonly onClickClose = (event: Event, button: TabButtonProps, index: number) => {\n\t// \tevent.preventDefault();\n\t// \tevent.stopPropagation();\n\t// \tthis.onClose(button, event, index);\n\t// };\n\n\tprivate readonly onMouseDown = (event: Event): void => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t};\n\n\tprivate readonly callbacks: ButtonCallbacksPropType<number> = {\n\t\tonClick: this.onClickSelect,\n\t\tonMouseDown: this.onMouseDown,\n\t};\n\n\tprivate renderButtonGroup() {\n\t\treturn (\n\t\t\t// Rule is disabled, because KolButtonWc is focusable.\n\t\t\t// eslint-disable-next-line jsx-a11y/interactive-supports-focus\n\t\t\t<div aria-label={this.state._label} class=\"tabs-button-group kol-button-group-wc\" role=\"tablist\" onKeyDown={this.onKeyDown} onBlur={this.onBlur}>\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t_disabled={button._disabled}\n\t\t\t\t\t\t_icons={button._icons}\n\t\t\t\t\t\t_hideLabel={button._hideLabel}\n\t\t\t\t\t\t_label={button._label} // TODO: ariaLabel-Konzept prüfen\n\t\t\t\t\t\t_on={this.callbacks as ButtonCallbacksPropType<StencilUnknown>}\n\t\t\t\t\t\t_tabIndex={this.state._selected === index ? 0 : -1}\n\t\t\t\t\t\t_tooltipAlign={button._tooltipAlign}\n\t\t\t\t\t\t_variant={this.state._selected === index ? 'custom' : undefined}\n\t\t\t\t\t\t_customClass={this.state._selected === index ? 'selected' : undefined}\n\t\t\t\t\t\t_ariaControls={`tabpanel-${index}`}\n\t\t\t\t\t\t_ariaSelected={this.state._selected === index}\n\t\t\t\t\t\t_id={`${this.state._label.replace(/\\s/g, '-')}-tab-${index}`}\n\t\t\t\t\t\t_role=\"tab\"\n\t\t\t\t\t\t_value={index}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t))}\n\t\t\t\t{this.showCreateTab && (\n\t\t\t\t\t<KolButtonWcTag\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></KolButtonWcTag>\n\t\t\t\t)}\n\t\t\t</div>\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 class=\"kol-tabs\">\n\t\t\t\t<div\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.tabPanelsElement = el as HTMLElement;\n\t\t\t\t\t}}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[`tabs-align-${this.state._align}`]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.renderButtonGroup()}\n\t\t\t\t\t<div class=\"tabs-content\" ref={this.catchTabPanelHost}>\n\t\t\t\t\t\t{/* <slot /> */}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the position of the tab captions.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Defines which behavior is active.\n\t */\n\t@Prop() public _behavior?: TabBehaviorPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.\n\t */\n\t@Prop() public _on?: KoliBriTabsCallbacks;\n\n\t/**\n\t * Defines which tab is active.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _selected?: number = 0;\n\n\t/**\n\t * Defines the tab captions.\n\t */\n\t@Prop() public _tabs!: Stringified<TabButtonProps[]>;\n\n\t@State() public state: TabsStates = {\n\t\t_align: 'top',\n\t\t_label: '', // ⚠ required\n\t\t_selected: 0,\n\t\t_tabs: [],\n\t};\n\n\tprivate selectNextNotDisabledTab = (selected: number, tabs: TabButtonProps[], upOrDown = true, initialSelected?: number): number => {\n\t\tif (selected > tabs.length - 1) {\n\t\t\tselected = tabs.length - 1;\n\t\t}\n\t\tif (selected < 0) {\n\t\t\tselected = 0;\n\t\t}\n\t\tif (Array.isArray(tabs) && tabs[selected]) {\n\t\t\tif (tabs[selected]._disabled) {\n\t\t\t\tif (upOrDown === true) {\n\t\t\t\t\tif (selected < tabs.length - 1) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected + 1, tabs, true, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tselected = initialSelected || selected;\n\t\t\t\t\t\tupOrDown = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (upOrDown === false) {\n\t\t\t\t\tif (selected > 0) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected - 1, tabs, false, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdevHint(`[KolTabs] All tabs are disabled, and therefore no tab can be displayed.`);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn selected;\n\t};\n\n\tprivate syncSelectedAndTabs = (nextValue: unknown, nextState: Map<string, unknown>, _component: Generic.Element.Component, key: string) => {\n\t\tlet selected: number;\n\t\tif (key === '_selected') {\n\t\t\tselected = nextValue as number;\n\t\t} else {\n\t\t\tselected = this.state._selected;\n\t\t}\n\t\tlet tabs: TabButtonProps[];\n\t\tif (key === '_tabs') {\n\t\t\ttabs = nextValue as TabButtonProps[];\n\t\t} else {\n\t\t\ttabs = this.state._tabs;\n\t\t}\n\t\tif (tabs.length > 0) {\n\t\t\tnextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));\n\t\t}\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType) {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_behavior')\n\tpublic validateBehavior(value?: TabBehaviorPropType) {\n\t\tvalidateTabBehavior(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_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] The label text for New in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} is not set correctly.`,\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] The onCreate callback function for New in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} is not set correctly.`,\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tcallbacks.onCreate = value.onCreate;\n\t\t\t\t}\n\t\t\t\tthis.showCreateTab = typeof callbacks.onCreate === 'function';\n\t\t\t}\n\t\t\tif (typeof value.onSelect === 'function') {\n\t\t\t\tcallbacks.onSelect = value.onSelect;\n\t\t\t}\n\t\t\tsetState<KoliBriTabsCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_selected')\n\tpublic validateSelected(value?: number): void {\n\t\twatchNumber(this, '_selected', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_tabs')\n\tpublic validateTabs(value?: Stringified<TabButtonProps[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis,\n\t\t\t'_tabs',\n\t\t\t(item: TabButtonProps) => typeof item === 'object' && item !== null && typeof item._label === 'string' && item._label.length > 0,\n\t\t\tvalue,\n\t\t\tundefined,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t\t},\n\t\t\t},\n\t\t);\n\t\tuiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t\tthis.validateBehavior(this._behavior);\n\t}\n\n\tprivate readonly handleTabPanels = () => {\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = this.tabPanelHost.children.length; i < this.state._tabs.length; i++) {\n\t\t\t\tconst div = document.createElement('div');\n\t\t\t\tdiv.setAttribute('aria-labelledby', `${this.state._label.replace(/\\s/g, '-')}-tab-${i}`);\n\t\t\t\tdiv.setAttribute('id', `tabpanel-${i}`);\n\t\t\t\tdiv.setAttribute('role', 'tabpanel');\n\t\t\t\tdiv.setAttribute('hidden', '');\n\t\t\t\tconst slot = document.createElement('slot');\n\t\t\t\tslot.setAttribute('name', `tabpanel-slot-${i}`);\n\t\t\t\tdiv.appendChild(slot);\n\t\t\t\tthis.tabPanelHost.appendChild(div);\n\t\t\t\tif (this.host?.children instanceof HTMLCollection && this.host?.children[i] /* SSR instanceof HTMLElement */) {\n\t\t\t\t\t// div.appendChild(this.host?.children[0]);\n\t\t\t\t\tthis.host?.children[i].setAttribute('slot', `tabpanel-slot-${i}`);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic componentDidRender(): void {\n\t\tthis.handleTabPanels();\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = 0; i < this.tabPanelHost.children.length; i++) {\n\t\t\t\tif (i !== this.state._selected) {\n\t\t\t\t\tthis.tabPanelHost.children[i].setAttribute('hidden', '');\n\t\t\t\t} else {\n\t\t\t\t\tthis.tabPanelHost.children[i].removeAttribute('hidden');\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate focusTabById(index: number): void {\n\t\tif (this.tabPanelsElement /* SSR instanceof HTMLElement */) {\n\t\t\tconst button: HTMLElement | null = koliBriQuerySelector(`button#${this.state._label.replace(/\\s/g, '-')}-tab-${index}`, this.tabPanelsElement);\n\t\t\tbutton?.focus();\n\t\t}\n\t}\n\n\tprivate onSelect(event: CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, index: number): void {\n\t\tthis._on?.onSelect?.(event, index);\n\n\t\tthis.focusTabById(index);\n\t}\n\n\tprivate onCreate = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onCreate === 'function') {\n\t\t\tthis.state._on?.onCreate(event);\n\t\t}\n\t};\n\n\tprivate onBlur = () => {\n\t\tthis.currentFocusIndex = undefined;\n\t};\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tabBehaviorPropTypeOptions","validateTabBehavior","component","value","watchValidator","includes","Set","join","KeyboardKey","defaultStyleCss","KolTabsDefaultStyle0","KolTabs","this","onCreateLabel","translate","showCreateTab","nextPossibleTabIndex","tabs","offset","step","nextOffset","length","_disabled","prevPossibleTabIndex","onKeyDown","event","key","ArrowRight","goToNextTab","ArrowLeft","goToPreviousTab","Space","Enter","activateFocusedTab","onClickSelect","index","selectNextTabEvent","onMouseDown","preventDefault","callbacks","onClick","catchTabPanelHost","el","tabPanelHost","selectNextNotDisabledTab","selected","upOrDown","initialSelected","Array","isArray","devHint","syncSelectedAndTabs","nextValue","nextState","_component","state","_selected","_tabs","set","refreshTabPanels","firstChild","removeChild","i","_a","div","document","createElement","setAttribute","_label","replace","slot","appendChild","_b","HTMLCollection","_c","host","children","_d","updateVisiblePanel","from","forEach","child","removeAttribute","onCreate","_on","onBlur","currentFocusIndex","undefined","_align","getCurrentFocusIndex","getKeyboardTabChangeMode","_behavior","nextFocusIndex","onSelect","nextTabIndex","changeMode","focusTabById","tab","call","renderButtonGroup","h","class","role","map","button","KolButtonWcTag","_icons","_hideLabel","_tabIndex","_tooltipAlign","_variant","_customClass","_ariaControls","_ariaSelected","_id","_role","_value","render","ref","tabPanelsElement","clsx","validateAlign","validateBehavior","validateLabel","required","validateOn","featureHint","label","Log","debug","callback","setState","validateSelected","watchNumber","hooks","beforePatch","validateTabs","watchJsonArrayString","item","afterPatch","uiUxHintMillerscheZahl","componentWillLoad","componentDidRender","koliBriQuerySelector","focus","dispatchDomEvent","KolEvent","select"],"sources":["src/schema/props/tab-behavior.ts","src/schema/enums/keyboard.ts","src/components/tabs/style.scss?tag=kol-tabs&mode=default&encapsulation=shadow","src/components/tabs/shadow.tsx"],"sourcesContent":["/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils';\n\nconst tabBehaviorPropTypeOptions = ['select-automatic', 'select-manual'] as const;\nexport type TabBehaviorPropType = (typeof tabBehaviorPropTypeOptions)[number];\n\n/**\n * Defines which behavior is active.\n */\nexport type PropTabBehavior = {\n\tbehavior: TabBehaviorPropType;\n};\n\n/* validator */\nexport const validateTabBehavior = (component: Generic.Element.Component, value?: TabBehaviorPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_behavior`,\n\t\t(value) => typeof value === 'string' && tabBehaviorPropTypeOptions.includes(value),\n\t\tnew Set([`KoliBriTabBehavior {${tabBehaviorPropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t);\n};\n","export enum KeyboardKey {\n\tArrowDown = 'ArrowDown',\n\tArrowLeft = 'ArrowLeft',\n\tArrowRight = 'ArrowRight',\n\tArrowUp = 'ArrowUp',\n\tEnter = 'Enter',\n\tSpace = ' ',\n}\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../host-display-block' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t.kol-tabs {\n\t\tfont-size: rem(16);\n\t\tdisplay: var(--display);\n\t\tgrid-template-rows: var(--grid-template-rows);\n\t\tgrid-template-columns: var(--grid-template-columns);\n\n\t\t&--align-right {\n\t\t\t--display: grid;\n\t\t\t--grid-template-columns: 1fr auto;\n\n\t\t\t--button-group-flex-direction: column;\n\t\t\t--button-group-order: 2;\n\t\t}\n\n\t\t&--align-left {\n\t\t\t--display: grid;\n\t\t\t--grid-template-columns: auto 1fr;\n\n\t\t\t--button-group-flex-direction: column;\n\t\t\t--button-group-order: 0;\n\t\t}\n\n\t\t&--align-bottom {\n\t\t\t--display: grid;\n\t\t\t--grid-template-rows: 1fr auto;\n\n\t\t\t--button-group-order: 2;\n\t\t}\n\n\t\t&__tabs-align-top {\n\t\t\t--display: grid;\n\t\t\t--grid-template-rows: auto 1fr;\n\n\t\t\t--button-group-order: 0;\n\t\t}\n\n\t\t&__content {\n\t\t\toverflow: auto;\n\t\t}\n\n\t\t&__button-group {\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: wrap;\n\n\t\t\tflex-direction: var(--button-group-flex-direction);\n\t\t\torder: var(--button-group-order);\n\n\t\t\t.kol-button {\n\t\t\t\tborder-bottom-color: transparent;\n\t\t\t\tborder-bottom-style: solid;\n\t\t\t\tdisplay: block;\n\t\t\t}\n\t\t}\n\n\t\t&__panel {\n\t\t\theight: 100%;\n\t\t}\n\t}\n}\n","import type {\n\tAlignPropType,\n\tButtonCallbacksPropType,\n\tKoliBriTabsCallbacks,\n\tLabelPropType,\n\tStencilUnknown,\n\tStringified,\n\tTabBehaviorPropType,\n\tTabButtonProps,\n\tTabsAPI,\n\tTabsStates,\n} from '../../schema';\nimport {\n\tdevHint,\n\tfeatureHint,\n\tkoliBriQuerySelector,\n\tLog,\n\tsetState,\n\tuiUxHintMillerscheZahl,\n\tvalidateAlign,\n\tvalidateLabel,\n\tvalidateTabBehavior,\n\twatchJsonArrayString,\n\twatchNumber,\n} from '../../schema';\nimport { Component, Element, h, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type { JSX } from '@stencil/core';\nimport type { Generic } from 'adopted-style-sheets';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { KeyboardKey } from '../../schema/enums';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport clsx from 'clsx';\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements TabsAPI {\n\t@Element() private readonly host?: HTMLKolTabsElement;\n\tprivate tabPanelsElement?: HTMLElement;\n\tprivate onCreateLabel = `${translate('kol-new')} …`;\n\tprivate showCreateTab = false;\n\tprivate currentFocusIndex: number | undefined;\n\n\tprivate nextPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step = 1): number => {\n\t\tconst nextOffset = offset + step;\n\n\t\tif (nextOffset < tabs.length) {\n\t\t\tif (tabs[nextOffset]._disabled) {\n\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t}\n\t\t\treturn nextOffset;\n\t\t}\n\n\t\treturn offset;\n\t};\n\n\tprivate prevPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step = 1): number => {\n\t\tconst nextOffset = offset - step;\n\n\t\tif (nextOffset >= 0) {\n\t\t\tif (tabs[nextOffset]._disabled) {\n\t\t\t\treturn this.prevPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t}\n\t\t\treturn nextOffset;\n\t\t}\n\n\t\treturn offset;\n\t};\n\n\tprivate onKeyDown = (event: KeyboardEvent) => {\n\t\tswitch (event.key as KeyboardKey) {\n\t\t\tcase KeyboardKey.ArrowRight:\n\t\t\t\tthis.goToNextTab(event);\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.ArrowLeft:\n\t\t\t\tthis.goToPreviousTab(event);\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.Space:\n\t\t\tcase KeyboardKey.Enter:\n\t\t\t\tthis.activateFocusedTab(event);\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tprivate getCurrentFocusIndex(): number {\n\t\tif (typeof this.currentFocusIndex === 'number') {\n\t\t\treturn this.currentFocusIndex;\n\t\t}\n\n\t\treturn this.state._selected;\n\t}\n\n\tprivate getKeyboardTabChangeMode(): 'selectFocusOnly' | 'activateCompletely' {\n\t\tif (this._behavior === 'select-manual') {\n\t\t\treturn 'selectFocusOnly';\n\t\t}\n\n\t\treturn 'activateCompletely';\n\t}\n\n\tprivate goToNextTab(event: KeyboardEvent) {\n\t\tconst nextFocusIndex = this.nextPossibleTabIndex(this.state._tabs, this.getCurrentFocusIndex());\n\t\tthis.selectNextTabEvent(event, nextFocusIndex, this.getKeyboardTabChangeMode());\n\t}\n\n\tprivate goToPreviousTab(event: KeyboardEvent) {\n\t\tconst nextFocusIndex = this.prevPossibleTabIndex(this.state._tabs, this.getCurrentFocusIndex());\n\t\tthis.selectNextTabEvent(event, nextFocusIndex, this.getKeyboardTabChangeMode());\n\t}\n\n\tprivate activateFocusedTab(event: KeyboardEvent) {\n\t\tif (typeof this.currentFocusIndex === 'number') {\n\t\t\tthis.onSelect(event, this.currentFocusIndex);\n\t\t}\n\t}\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.selectNextTabEvent(event, index);\n\t};\n\n\tprivate selectNextTabEvent(\n\t\tevent: KeyboardEvent | MouseEvent,\n\t\tnextTabIndex: number,\n\t\tchangeMode: 'selectFocusOnly' | 'activateCompletely' = 'activateCompletely',\n\t): void {\n\t\tthis.currentFocusIndex = nextTabIndex;\n\n\t\tthis.focusTabById(nextTabIndex);\n\n\t\tif (changeMode === 'activateCompletely') {\n\t\t\tthis._selected = nextTabIndex;\n\n\t\t\tconst tab = this.state._tabs[nextTabIndex];\n\t\t\ttab._on?.onSelect?.(event, nextTabIndex);\n\n\t\t\tthis.onSelect(event, nextTabIndex);\n\t\t}\n\t}\n\n\tprivate readonly onMouseDown = (event: Event): void => {\n\t\tevent.preventDefault();\n\t};\n\n\tprivate readonly callbacks: ButtonCallbacksPropType<number> = {\n\t\tonClick: this.onClickSelect,\n\t\tonMouseDown: this.onMouseDown,\n\t};\n\n\tprivate renderButtonGroup() {\n\t\treturn (\n\t\t\t// Rule is disabled, because KolButtonWc is focusable.\n\t\t\t// eslint-disable-next-line jsx-a11y/interactive-supports-focus\n\t\t\t<div aria-label={this.state._label} class=\"kol-tabs__button-group\" role=\"tablist\" onKeyDown={this.onKeyDown} onBlur={this.onBlur}>\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t_disabled={button._disabled}\n\t\t\t\t\t\t_icons={button._icons}\n\t\t\t\t\t\t_hideLabel={button._hideLabel}\n\t\t\t\t\t\t_label={button._label} // TODO: ariaLabel-Konzept prüfen\n\t\t\t\t\t\t_on={this.callbacks as ButtonCallbacksPropType<StencilUnknown>}\n\t\t\t\t\t\t_tabIndex={this.state._selected === index ? 0 : -1}\n\t\t\t\t\t\t_tooltipAlign={button._tooltipAlign}\n\t\t\t\t\t\t_variant={this.state._selected === index ? 'custom' : undefined}\n\t\t\t\t\t\t_customClass={this.state._selected === index ? 'selected' : undefined}\n\t\t\t\t\t\t_ariaControls={`tabpanel-${index}`}\n\t\t\t\t\t\t_ariaSelected={this.state._selected === index}\n\t\t\t\t\t\t_id={`${this.state._label.replace(/\\s/g, '-')}-tab-${index}`}\n\t\t\t\t\t\t_role=\"tab\"\n\t\t\t\t\t\t_value={index}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t))}\n\t\t\t\t{this.showCreateTab && (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"kol-tabs_button-create\"\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></KolButtonWcTag>\n\t\t\t\t)}\n\t\t\t</div>\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<div\n\t\t\t\tref={(el) => {\n\t\t\t\t\tthis.tabPanelsElement = el as HTMLElement;\n\t\t\t\t}}\n\t\t\t\tclass={clsx('kol-tabs', `kol-tabs--align-${this.state._align}`)}\n\t\t\t>\n\t\t\t\t{this.renderButtonGroup()}\n\t\t\t\t<div class=\"kol-tabs__content\" ref={this.catchTabPanelHost}>\n\t\t\t\t\t{/* <slot /> */}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visual orientation of the component.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Defines which behavior is active.\n\t */\n\t@Prop() public _behavior?: TabBehaviorPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.\n\t */\n\t@Prop() public _on?: KoliBriTabsCallbacks;\n\n\t/**\n\t * Defines which tab is active.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _selected?: number = 0;\n\n\t/**\n\t * Defines the tab captions.\n\t */\n\t@Prop() public _tabs!: Stringified<TabButtonProps[]>;\n\n\t@State() public state: TabsStates = {\n\t\t_align: 'top',\n\t\t_label: '', // ⚠ required\n\t\t_selected: 0,\n\t\t_tabs: [],\n\t};\n\n\tprivate selectNextNotDisabledTab = (selected: number, tabs: TabButtonProps[], upOrDown = true, initialSelected?: number): number => {\n\t\tif (selected > tabs.length - 1) {\n\t\t\tselected = tabs.length - 1;\n\t\t}\n\t\tif (selected < 0) {\n\t\t\tselected = 0;\n\t\t}\n\t\tif (Array.isArray(tabs) && tabs[selected]) {\n\t\t\tif (tabs[selected]._disabled) {\n\t\t\t\tif (upOrDown === true) {\n\t\t\t\t\tif (selected < tabs.length - 1) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected + 1, tabs, true, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tselected = initialSelected || selected;\n\t\t\t\t\t\tupOrDown = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (upOrDown === false) {\n\t\t\t\t\tif (selected > 0) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected - 1, tabs, false, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdevHint(`[KolTabs] All tabs are disabled, and therefore no tab can be displayed.`);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn selected;\n\t};\n\n\tprivate syncSelectedAndTabs = (nextValue: unknown, nextState: Map<string, unknown>, _component: Generic.Element.Component, key: string) => {\n\t\tlet selected: number;\n\t\tif (key === '_selected') {\n\t\t\tselected = nextValue as number;\n\t\t} else {\n\t\t\tselected = this.state._selected;\n\t\t}\n\t\tlet tabs: TabButtonProps[];\n\t\tif (key === '_tabs') {\n\t\t\ttabs = nextValue as TabButtonProps[];\n\t\t} else {\n\t\t\ttabs = this.state._tabs;\n\t\t}\n\t\tif (tabs.length > 0) {\n\t\t\tnextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));\n\t\t}\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType) {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_behavior')\n\tpublic validateBehavior(value?: TabBehaviorPropType) {\n\t\tvalidateTabBehavior(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_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] The label text for New in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} is not set correctly.`,\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] The onCreate callback function for New in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} is not set correctly.`,\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\tafterPatch: this.refreshTabPanels,\n\t\t\t\t},\n\t\t\t},\n\t\t);\n\t\tuiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t\tthis.validateBehavior(this._behavior);\n\t}\n\n\tprivate refreshTabPanels = () => {\n\t\tif (!this.tabPanelHost) return;\n\t\t// Clear existing panels\n\t\twhile (this.tabPanelHost.firstChild) {\n\t\t\tthis.tabPanelHost.removeChild(this.tabPanelHost.firstChild);\n\t\t}\n\t\tfor (let i = 0; i < this.state._tabs?.length; i++) {\n\t\t\tconst div = document.createElement('div');\n\t\t\tdiv.setAttribute('aria-labelledby', `${this.state._label.replace(/\\s/g, '-')}-tab-${i}`);\n\t\t\tdiv.setAttribute('id', `tabpanel-${i}`);\n\t\t\tdiv.setAttribute('role', 'tabpanel');\n\t\t\tdiv.setAttribute('hidden', '');\n\t\t\tconst slot = document.createElement('slot');\n\t\t\tslot.setAttribute('name', `tabpanel-slot-${i}`);\n\t\t\tdiv.appendChild(slot);\n\t\t\tthis.tabPanelHost?.appendChild(div);\n\n\t\t\tif (typeof HTMLCollection !== 'undefined' && this.host?.children instanceof HTMLCollection && this.host?.children[i] /* SSR instanceof HTMLElement */) {\n\t\t\t\tthis.host.children[i].setAttribute('slot', `tabpanel-slot-${i}`);\n\t\t\t}\n\t\t}\n\t\tthis.updateVisiblePanel();\n\t};\n\n\tprivate updateVisiblePanel = () => {\n\t\tif (!this.tabPanelHost) return;\n\t\tArray.from(this.tabPanelHost.children).forEach((child, i) => {\n\t\t\tif (i === this.state._selected) {\n\t\t\t\tchild.removeAttribute('hidden');\n\t\t\t} else {\n\t\t\t\tchild.setAttribute('hidden', '');\n\t\t\t}\n\t\t});\n\t};\n\n\tpublic componentDidRender(): void {\n\t\tthis.refreshTabPanels();\n\t}\n\n\tprivate focusTabById(index: number): void {\n\t\tif (this.tabPanelsElement /* SSR instanceof HTMLElement */) {\n\t\t\tconst button: HTMLElement | null = koliBriQuerySelector(`button#${this.state._label.replace(/\\s/g, '-')}-tab-${index}`, this.tabPanelsElement);\n\t\t\tbutton?.focus();\n\t\t}\n\t}\n\n\tprivate onSelect(event: CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, index: number): void {\n\t\tthis._on?.onSelect?.(event, index);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.select, index);\n\t\t}\n\n\t\tthis.focusTabById(index);\n\t}\n\n\tprivate onCreate = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tif (typeof this.state._on?.onCreate === 'function') {\n\t\t\tthis.state._on?.onCreate(event);\n\t\t}\n\t};\n\n\tprivate onBlur = () => {\n\t\tthis.currentFocusIndex = undefined;\n\t};\n}\n"],"mappings":"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","ignoreList":[]}