npm - @public-ui/components - Versions diffs - 3.0.0-rc.1 → 3.0.0-rc.3 - Mend

@public-ui/components 3.0.0-rc.1 → 3.0.0-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1243) hide show

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

	@@ -1 +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","Array","isArray","col","getNumberOfRows","verticalHeaders","_dataFoot","getThePrimaryHeadersWithKeysIfExists","headers","primaryHeadersWithKeys","cells","push","getPrimaryHeaders","createDataField","isFoot","primaryHeader","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","renderHeaderTdCell","Fragment","ariaSort","sortButtonIcon","sortDirection","scope","KolButtonWcTag","exportparts","right","onClick","onSort","currentSortDirection","renderSpacer","variant","cellDefs","verticalHeaderColpan","reduce","acc","selectionCell","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, Fragment, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport { KolButtonWcTag, KolIconTag, 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\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 { Events } from '../../schema/enums';\nimport { nonce } from '../../utils/dev.utils';\nimport { tryToDispatchKoliBriEvent } from '../../utils/events';\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\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 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\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\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 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\tdata: row,\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\tdata: data[j],\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\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 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\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 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={`${variant}-spacer`}>\n\t\t\t\t<td 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>\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 ` ` 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 \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{rowIndex === 0 && this.renderHeaderTdCell()}\n\t\t\t\t\t\t\t\t\t\t\t{Array.isArray(cols) &&\n\t\t\t\t\t\t\t\t\t\t\t\tcols.map((cell, colIndex) => {\n\t\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\t\treturn (\n\t\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\t\tkey={`thead-${rowIndex}-${colIndex}-${cell.label}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[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\t}}\n\t\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\t\trowSpan={cell.rowSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: cell.textAlign,\n\t\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\t}}\n\t\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\t\ttypeof cell.render === 'function'\n\t\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\t\tthis.cellRender(cell, el);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{typeof cell.render !== 'function' ? cell.label : ''}\n\t\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);\n\t\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\t\treturn this.renderHeadingCell(cell, rowIndex, colIndex, false);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t</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":[]}
1	+ {"version":3,"names":["validateTableHeaderCells","component","value","emptyStringByArrayHandler","objectObjectHandler","parseJson","e","watchValidator","Set","KolTableStateless","this","horizontal","cellsToRenderTimeouts","Map","dataToKeyMap","checkboxRefs","renderTableRow","row","rowIndex","isVertical","isFooter","key","String","_a","data","_b","getDataKey","h","class","clsx","renderSelectionCell","map","cell","colIndex","renderTableCell","label","dataKey","asTd","renderHeadingCell","textAlign","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","length","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","Array","isArray","col","getNumberOfRows","verticalHeaders","_dataFoot","getThePrimaryHeadersWithKeysIfExists","headers","primaryHeadersWithKeys","cells","push","getPrimaryHeaders","createDataField","isFoot","primaryHeader","maxCols","maxRows","startRow","dataField","rowCount","rowSpans","_row","i","dataRow","headerCells","rowsTotal","rows","Object","assign","k","j","colspan","rowspan","emptyCell","translate","Math","handleSelectionChangeCallbackAndEvent","payload","_on","Callback","onSelectionChange","host","dispatchDomEvent","KolEvent","selectionChange","componentWillLoad","_minWidth","_selection","selection","keyPropertyName","firstCellData","keyProperty","isMultiple","multiple","selected","_c","selectedKeys","props","name","checked","id","KolIconTag","_icons","type","onInput","updatedSelectedKeys","filter","KolTooltipWcTag","_align","_id","renderHeadingSelectionCell","selectedKeyLength","dataLength","isChecked","indeterminate","translationKey","selections","renderHeaderTdCell","Fragment","ariaSort","sortButtonIcon","sortDirection","scope","KolButtonWcTag","exportparts","right","onClick","onSort","currentSortDirection","sort","renderSpacer","variant","cellDefs","verticalHeaderColpan","reduce","acc","selectionCell","renderFoot","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, Fragment, h, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport { KolButtonWcTag, KolIconTag, 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\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 { Callback } from '../../schema/enums';\nimport { nonce } from '../../utils/dev.utils';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport clsx from 'clsx';\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\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 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\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\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 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\tdata: row,\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\tdata: data[j],\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\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\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=\"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 class=\"kol-table__selection-label\">\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\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={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: 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))\n\t\t\treturn <th class=\"kol-table__cell kol-table__cell--header\" 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=\"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\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\tthis.handleSelectionChangeCallbackAndEvent(event, selections);\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\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: 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\treturn (\n\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 * <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 /\n\t\t\t/ eslint-disable-next-line jsx-a11y/no-static-element-interactions /\n\t\t\t<div ref={(element) => (this.tableDivElement = element)} class=\"kol-table\" tabindex={this.tableDivElementHasScrollbar ? '-1' : undefined}>\n\t\t\t\t<table\n\t\t\t\t\tclass=\"kol-table__table\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tminWidth: this.state._minWidth,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{/\n\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 * The `div` is technically not allowed here. But any allowed element would mutate the table semantics. Additionally, the ` ` is necessary to\n\t\t\t\t\t * prevent screen readers from just reading \"blank\".\n\t\t\t\t\t /}\n\t\t\t\t\t{/ eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n\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 \n\t\t\t\t\t</div>\n\n\t\t\t\t\t<caption class=\"kol-table__caption\" id=\"caption\">\n\t\t\t\t\t\t{this.state._label}\n\t\t\t\t\t</caption>\n\n\t\t\t\t\t{Array.isArray(this.state._headerCells.horizontal) && (\n\t\t\t\t\t\t<thead class=\"kol-table__head\">\n\t\t\t\t\t\t\t{[\n\t\t\t\t\t\t\t\tthis.state._headerCells.horizontal.map((cols, rowIndex) => (\n\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{this.state._selection && this.renderHeadingSelectionCell()}\n\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{Array.isArray(cols) &&\n\t\t\t\t\t\t\t\t\t\t\tcols.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={clsx({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[`kol-table__head--${cell.textAlign}`]: 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</tr>\n\t\t\t\t\t\t\t\t)),\n\t\t\t\t\t\t\t\tthis.renderSpacer('head', this.state._headerCells.horizontal),\n\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t</thead>\n\t\t\t\t\t)}\n\t\t\t\t\t<tbody class=\"kol-table__body\">\n\t\t\t\t\t\t{dataField.map((row: (KoliBriTableCell & KoliBriTableDataType)[], rowIndex: number) => this.renderTableRow(row, rowIndex, true))}\n\t\t\t\t\t</tbody>\n\t\t\t\t\t{this.renderFoot()}\n\t\t\t\t</table>\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 CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as t,H as e}from"./index-336d0fea.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  .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-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 .kol-button {\n    color: inherit;\n  }\n  tbody th,\n  th.align-left {\n    text-align: left;\n  }\n  tbody th .table-sort-button .kol-button__text,\n  th.align-left .table-sort-button .kol-button__text {\n    justify-items: start;\n  }\n  th.align-center {\n    text-align: center;\n  }\n  th.align-center .table-sort-button .kol-button__text {\n    justify-items: center;\n  }\n  th.align-right {\n    text-align: right;\n  }\n  th.align-right .table-sort-button .kol-button__text {\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:"b62e412718a8160669343ee431d390e7ae424212",class:"kol-table-stateless"},t(i,{key:"b281a0b303d32d92188961011a0ece6d15f1f913",_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-095473f8.js";import{l as t}from"./component-names-50e16b86.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    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__focus-element:focus {\n    outline: 0 !important;\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto Highlight;\n    outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto -webkit-focus-ring-color;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}",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}render(){return e(t,{key:"c1f0e2f14d6802f5a4f446e208cd239af3643f59",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection})}};l.style={default:i};export{l as kol_table_stateless};

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

	@@ -1 +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,~~4+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":[]}
1	+ {"version":3,"names":["defaultStyleCss","KolTableStatelessDefaultStyle0","KolTableStateless","render","h","KolTableStatelessWcTag","key","_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 '../../styles/global';\n@import '../@shared/kol-table-stateless-mixin';\n@import '../host-display-block';\n\n@include kol-table-stateless-styles;\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Prop } from '@stencil/core';\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<KolTableStatelessWcTag\n\t\t\t\t_data={this._data}\n\t\t\t\t_dataFoot={this._dataFoot}\n\t\t\t\t_headerCells={this._headerCells}\n\t\t\t\t_label={this._label}\n\t\t\t\t_minWidth={this._minWidth}\n\t\t\t\t_on={this._on}\n\t\t\t\t_selection={this._selection}\n\t\t\t/>\n\t\t);\n\t}\n}\n"],"mappings":";;;iGAAA,MAAMA,EAAkB,qgRACxB,MAAAC,EAAeD,E,MCmBFE,EAAiB,M,+LAoCtB,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,Y","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,H as e,g as i}from"./index-336d0fea.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  .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-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,_=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:"05e341b7efd5d94dfa2fa0786d078c326b5c8640",class:"kol-tabs"},n("div",{key:"ca2924183169250379353c56cb8b63fc7e1fedc1",ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._align}`]:!0}},this.renderButtonGroup(),n("div",{key:"cc9c77706531826192849a0c07a864781cc99081",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"]}}};_.style={default:k};export{_ as kol_tabs};
+import{r as t,h as n,g as e}from"./index-095473f8.js";import{t as i}from"./i18n-5fe08f1c.js";import{a as o}from"./component-names-50e16b86.js";import{d as s,K as a}from"./events-5adf6b62.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 f,h as u,v as p}from"./prop.validators-9feb1d92.js";import{v as m}from"./align-4719d626.js";import{v}from"./label-d0315384.js";import{L as g}from"./dev.utils-fab45cbc.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./index-da3e0c00.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%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-tabs {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: var(--display);\n    grid-template-rows: var(--grid-template-rows);\n    grid-template-columns: var(--grid-template-columns);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-flex-direction: column;\n    --button-group-order: 2;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-flex-direction: column;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: grid;\n    --grid-template-rows: 1fr auto;\n    --button-group-order: 2;\n  }\n  .kol-tabs__tabs-align-top {\n    --display: grid;\n    --grid-template-rows: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs__content {\n    overflow: auto;\n  }\n  .kol-tabs__button-group {\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: var(--button-group-flex-direction);\n    order: var(--button-group-order);\n  }\n  .kol-tabs__button-group .kol-button {\n    border-bottom-color: transparent;\n    border-bottom-style: solid;\n    display: block;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n}",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.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("class","kol-tab__panel"),a.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${o}`),a.setAttribute("id",`tabpanel-${o}`),a.setAttribute("role","tabpanel"),a.setAttribute("hidden","");const i=document.createElement("slot");i.setAttribute("name",`tabpanel-slot-${o}`),a.appendChild(i),this.tabPanelHost.appendChild(a),(null===(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(),"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:"536925b9b7b5b4b533e40979c6336c1244846be5",ref:t=>{this.tabPanelsElement=t},class:l("kol-tabs",`kol-tabs--align-${this.state._align}`)},this.renderButtonGroup(),n("div",{key:"29aacb950fa25e38b2480b03c1b1cb3d6d554036",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){f(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),u("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=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 CHANGED Viewed

	@@ -1 +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":[]}
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","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","ref","tabPanelsElement","clsx","validateAlign","validateBehavior","validateLabel","required","validateOn","featureHint","label","Log","debug","callback","setState","validateSelected","watchNumber","hooks","beforePatch","validateTabs","watchJsonArrayString","item","uiUxHintMillerscheZahl","componentWillLoad","componentDidRender","removeAttribute","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","@import '../@shared/mixins';\n@import '../../styles/global';\n@import '../host-display-block';\n@import '../tooltip/style.scss';\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},\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('class', 'kol-tab__panel');\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\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":[]}