@public-ui/components 2.1.1 → 2.1.3

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

@@ -1 +1 @@
-{"version":3,"names":["validateTableCallbacks","component","value","watchValidator","Set","validateTableHeaderCells","emptyStringByArrayHandler","objectObjectHandler","parseJson","e","validateTableSelection","parseSerializedValue","undefined","validateObject","isObject","label","selectedKeys","Array","isArray","objectValue","setState","Events","KolTableStateless","this","horizontal","cellsToRenderTimeouts","Map","dataToKeyMap","renderTableRow","row","rowIndex","key","String","_a","data","_b","getDataKey","h","renderSelectionCell","map","cell","colIndex","renderTableCell","dataKey","asTd","renderHeadingCell","class","textAlign","length","colSpan","rowSpan","style","width","ref","render","el","cellRender","_data","_label","_headerCells","vertical","validateData","validateTableData","beforePatch","nextValue","updateDataToKeyMap","validateDataFoot","validateTableDataFoot","validateHeaderCells","validateLabel","required","validateMinWidth","watchString","defaultValue","validateOn","validateSelection","componentDidRender","checkDivElementScrollbar","componentDidLoad","tableDivElement","ResizeObserver","tableDivElementResizeObserver","bind","observe","disconnectedCallback","disconnect","tableDivElementHasScrollbar","scrollWidth","clientWidth","forEach","has","set","nonce","_","includes","delete","get","clearTimeout","setTimeout","renderContent","state","textContent","getNumberOfCols","horizontalHeaders","max","count","col","getNumberOfRows","verticalHeaders","_dataFoot","filterHeaderKeys","headers","primaryHeader","cells","push","getPrimaryHeader","createDataField","isFoot","maxCols","maxRows","startRow","dataField","rowCount","rowSpans","_row","index","i","dataRow","headerCells","rowsTotal","rows","Object","assign","k","j","colspan","rowspan","emptyCell","translate","Math","componentWillLoad","_minWidth","_on","_selection","keyPropertyName","keyCell","find","keyProperty","selected","_c","KolInputCheckboxTag","_hideLabel","_checked","_tooltipAlign","onInput","event","updatedSelectedKeys","filter","tryToDispatchKoliBriEvent","host","onSelectionChange","ariaSort","sortButtonIcon","sortDirection","scope","KolButtonWcTag","exportparts","_icons","right","onClick","onSort","currentSortDirection","renderFoot","Host","element","tabindex","minWidth","id","cols"],"sources":["src/schema/props/table-callbacks.ts","src/schema/props/table-header-cells.ts","src/schema/props/table-selection.ts","src/schema/enums/events.ts","src/components/table-stateless/component.tsx"],"sourcesContent":["import type { Events } from '../enums';\nimport type { EventValueOrEventCallback } from '../types/callbacks';\nimport { watchValidator } from '../utils';\n\nimport type { Generic } from 'adopted-style-sheets';\nimport type { KoliBriSortDirection } from '../types';\n\n/* types */\nexport type SortEventPayload = {\n\tkey: string;\n\tcurrentSortDirection: KoliBriSortDirection;\n};\n\nexport type SelectionChangeEventPayload = string[];\n\nexport type TableCallbacksPropType = {\n\t[Events.onSort]?: EventValueOrEventCallback<MouseEvent, SortEventPayload>;\n\t[Events.onSelectionChange]?: EventValueOrEventCallback<Event, SelectionChangeEventPayload>;\n};\n\n/**\n * Defines the callback functions for table events.\n */\nexport type PropTableCallbacks = {\n\ton: TableCallbacksPropType;\n};\n\n/* validator */\nexport const validateTableCallbacks = (component: Generic.Element.Component, value?: TableCallbacksPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_on`,\n\t\t(value) => typeof value === 'object' && value !== null,\n\t\tnew Set(['TableCallbacksPropType {Events.onSort, Events.onSelectionChange}']),\n\t\tvalue,\n\t);\n};\n","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 { Generic } from 'adopted-style-sheets';\nimport type { KoliBriTableSelection, Stringified } from '../types';\nimport { parseJson, setState } from '../utils';\nimport { isObject } from '../validators';\n\n/* types */\nexport type TableSelectionPropType = Stringified<KoliBriTableSelection>;\n\n/**\n * Defines how rows can be selected and the current selection.\n */\nexport type PropTableSelection = {\n\tselection: TableSelectionPropType;\n};\n\n/* validator */\nexport const validateTableSelection = (component: Generic.Element.Component, value?: TableSelectionPropType): void => {\n\tconst parseSerializedValue = () => {\n\t\ttry {\n\t\t\treturn parseJson<KoliBriTableSelection>(value);\n\t\t} catch (e) {\n\t\t\treturn undefined;\n\t\t}\n\t};\n\n\tconst validateObject = (value?: KoliBriTableSelection) => {\n\t\treturn value && isObject(value) && typeof value.label === 'function' && (!value.selectedKeys || Array.isArray(value.selectedKeys));\n\t};\n\n\tconst objectValue = typeof value === 'string' ? parseSerializedValue() : value;\n\tif (validateObject(objectValue)) {\n\t\tsetState(component, '_selection', value);\n\t}\n};\n","export enum Events {\n\tonBlur = 'onBlur',\n\tonChange = 'onChange',\n\tonClick = 'onClick',\n\tonDblClick = 'onDblClick',\n\tonFocus = 'onFocus',\n\tonInput = 'onInput',\n\tonKeyDown = 'onKeyDown',\n\tonKeyPress = 'onKeyPress',\n\tonKeyUp = 'onKeyUp',\n\tonMouseDown = 'onMouseDown',\n\tonMouseMove = 'onMouseMove',\n\tonMouseOut = 'onMouseOut',\n\tonMouseOver = 'onMouseOver',\n\tonMouseUp = 'onMouseUp',\n\tonReset = 'onReset',\n\tonSelect = 'onSelect',\n\tonSort = 'onSort',\n\tonSelectionChange = 'onSelectionChange',\n\tonSubmit = 'onSubmit',\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport type {\n\tKoliBriTableCell,\n\tKoliBriTableDataType,\n\tKoliBriTableHeaderCell,\n\tKoliBriTableHeaderCellWithLogic,\n\tKoliBriTableHeaders,\n\tKoliBriTableRender,\n\tLabelPropType,\n\tTableCallbacksPropType,\n\tTableDataFootPropType,\n\tTableDataPropType,\n\tTableHeaderCellsPropType,\n\tTableSelectionPropType,\n\tTableStatelessAPI,\n\tTableStatelessStates,\n} from '../../schema';\nimport {\n\tvalidateLabel,\n\tvalidateTableCallbacks,\n\tvalidateTableData,\n\tvalidateTableDataFoot,\n\tvalidateTableHeaderCells,\n\tvalidateTableSelection,\n\twatchString,\n} from '../../schema';\nimport { KolButtonWcTag, KolInputCheckboxTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport { tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { Events } from '../../schema/enums';\nimport { nonce } from '../../utils/dev.utils';\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\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\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\tprivate cellRender(cell: KoliBriTableCell, el?: HTMLElement): void {\n\t\tif (el) {\n\t\t\tclearTimeout(this.cellsToRenderTimeouts.get(el));\n\t\t\tthis.cellsToRenderTimeouts.set(\n\t\t\t\tel,\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tif (typeof cell.render === 'function') {\n\t\t\t\t\t\tconst renderContent = cell.render(el, cell, cell.data, this.state._data);\n\t\t\t\t\t\tif (typeof renderContent === 'string') {\n\t\t\t\t\t\t\tel.textContent = renderContent;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t);\n\t\t}\n\t}\n\n\tprivate getNumberOfCols(horizontalHeaders: KoliBriTableHeaderCell[][], data: KoliBriTableDataType[]): number {\n\t\tlet max = 0;\n\t\thorizontalHeaders.forEach((row) => {\n\t\t\tlet count = 0;\n\t\t\trow.forEach((col) => (count += col.colSpan ?? 1));\n\t\t\tif (max < count) {\n\t\t\t\tmax = count;\n\t\t\t}\n\t\t});\n\t\tif (max === 0) {\n\t\t\tmax = data.length;\n\t\t}\n\t\treturn max;\n\t}\n\n\tprivate getNumberOfRows(verticalHeaders: KoliBriTableHeaderCell[][], data: KoliBriTableDataType[]): number {\n\t\tlet max = 0;\n\t\tverticalHeaders.forEach((col) => {\n\t\t\tlet count = 0;\n\t\t\tcol.forEach((row) => (count += row.rowSpan ?? 1));\n\t\t\tif (max < count) {\n\t\t\t\tmax = count;\n\t\t\t}\n\t\t});\n\t\tif (max === 0) {\n\t\t\tmax = data.length;\n\t\t} else {\n\t\t\tmax -= this.state._dataFoot?.length || 0;\n\t\t}\n\t\treturn max;\n\t}\n\n\tprivate filterHeaderKeys(headers: KoliBriTableHeaderCell[][]): KoliBriTableHeaderCell[] {\n\t\tconst primaryHeader: KoliBriTableHeaderCell[] = [];\n\t\theaders.forEach((cells) => {\n\t\t\tcells.forEach((cell) => {\n\t\t\t\tif (typeof cell.key === 'string') {\n\t\t\t\t\tprimaryHeader.push(cell);\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t\treturn primaryHeader;\n\t}\n\n\tprivate getPrimaryHeader(headers: KoliBriTableHeaders): KoliBriTableHeaderCell[] {\n\t\tlet primaryHeader: KoliBriTableHeaderCell[] = this.filterHeaderKeys(headers.horizontal ?? []);\n\t\tthis.horizontal = true;\n\t\tif (primaryHeader.length === 0) {\n\t\t\tprimaryHeader = this.filterHeaderKeys(headers.vertical ?? []);\n\t\t\tif (primaryHeader.length > 0) {\n\t\t\t\tthis.horizontal = false;\n\t\t\t}\n\t\t}\n\t\treturn primaryHeader;\n\t}\n\n\tprivate createDataField(data: KoliBriTableDataType[], headers: KoliBriTableHeaders, isFoot?: boolean): (KoliBriTableCell & KoliBriTableDataType)[][] {\n\t\theaders.horizontal = Array.isArray(headers?.horizontal) ? headers.horizontal : [];\n\t\theaders.vertical = Array.isArray(headers?.vertical) ? headers.vertical : [];\n\t\tconst primaryHeader = this.getPrimaryHeader(headers);\n\t\tconst maxCols = this.getNumberOfCols(headers.horizontal, data);\n\t\tlet maxRows = this.getNumberOfRows(headers.vertical, data);\n\t\tlet startRow = 0;\n\t\tif (isFoot) {\n\t\t\tstartRow = maxRows;\n\t\t\tmaxRows += this.state._dataFoot?.length || 0;\n\t\t}\n\t\tconst dataField: KoliBriTableCell[][] = [];\n\n\t\tconst rowCount: number[] = [];\n\t\tconst rowSpans: number[][] = [];\n\t\theaders.vertical.forEach((_row, index) => {\n\t\t\trowCount[index] = 0;\n\t\t\trowSpans[index] = [];\n\t\t});\n\n\t\tfor (let i = startRow; i < maxRows; i++) {\n\t\t\tconst dataRow: KoliBriTableHeaderCellWithLogic[] = [];\n\t\t\theaders.vertical.forEach((headerCells, index) => {\n\t\t\t\tlet rowsTotal = 0;\n\t\t\t\trowSpans[index].forEach((value) => (rowsTotal += value));\n\t\t\t\tif (rowsTotal <= i) {\n\t\t\t\t\tconst rows = headerCells[i - rowsTotal + rowCount[index]];\n\t\t\t\t\tif (typeof rows === 'object') {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...rows,\n\t\t\t\t\t\t\tasTd: false,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: {} as KoliBriTableDataType,\n\t\t\t\t\t\t});\n\t\t\t\t\t\tlet rowSpan = 1;\n\t\t\t\t\t\tif (typeof rows.rowSpan === 'number' && rows.rowSpan > 1) {\n\t\t\t\t\t\t\trowSpan = rows.rowSpan;\n\t\t\t\t\t\t}\n\t\t\t\t\t\trowSpans[index].push(rowSpan);\n\t\t\t\t\t\tif (typeof rows.colSpan === 'number' && rows.colSpan > 1) {\n\t\t\t\t\t\t\tfor (let k = 1; k < rows.colSpan; k++) {\n\t\t\t\t\t\t\t\trowSpans[index + k].push(rowSpan);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\trowCount[index]++;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t\tfor (let j = 0; j < maxCols; j++) {\n\t\t\t\tif (this.horizontal === true) {\n\t\t\t\t\tconst row = isFoot && this.state._dataFoot ? this.state._dataFoot[i - startRow] : data[i];\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof primaryHeader[j] === 'object' &&\n\t\t\t\t\t\tprimaryHeader[j] !== null &&\n\t\t\t\t\t\ttypeof primaryHeader[j].key === 'string' &&\n\t\t\t\t\t\ttypeof row === 'object' &&\n\t\t\t\t\t\trow !== null\n\t\t\t\t\t) {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...primaryHeader[j],\n\t\t\t\t\t\t\tcolSpan: undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: row,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tlabel: row[primaryHeader[j].key as unknown as string] as string,\n\t\t\t\t\t\t\trowSpan: undefined,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof primaryHeader[i] === 'object' &&\n\t\t\t\t\t\tprimaryHeader[i] !== null &&\n\t\t\t\t\t\ttypeof primaryHeader[i].key === 'string' &&\n\t\t\t\t\t\ttypeof data[j] === 'object' &&\n\t\t\t\t\t\tdata[j] !== null\n\t\t\t\t\t) {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...primaryHeader[i],\n\t\t\t\t\t\t\tcolSpan: undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: data[j],\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tlabel: data[j][primaryHeader[i].key as unknown as number] as string,\n\t\t\t\t\t\t\trowSpan: undefined,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tdataField.push(dataRow);\n\t\t}\n\t\tif (data.length === 0) {\n\t\t\tlet colspan = 0;\n\t\t\tlet rowspan = 0;\n\t\t\tif (Array.isArray(headers.horizontal) && headers.horizontal.length > 0) {\n\t\t\t\theaders.horizontal[0].forEach((col) => {\n\t\t\t\t\tcolspan += col.colSpan || 1;\n\t\t\t\t});\n\t\t\t}\n\t\t\tif (Array.isArray(headers.vertical) && headers.vertical.length > 0) {\n\t\t\t\tcolspan -= headers.vertical.length;\n\t\t\t\theaders.vertical[0].forEach((row) => {\n\t\t\t\t\trowspan += row.rowSpan || 1;\n\t\t\t\t});\n\t\t\t}\n\t\t\tconst emptyCell = {\n\t\t\t\tcolSpan: colspan,\n\t\t\t\tlabel: translate('kol-no-entries'),\n\t\t\t\trender: undefined,\n\t\t\t\trowSpan: Math.max(rowspan, 1),\n\t\t\t};\n\t\t\tif (dataField.length === 0) {\n\t\t\t\tdataField.push([emptyCell]);\n\t\t\t} else {\n\t\t\t\tdataField[0].push(emptyCell);\n\t\t\t}\n\t\t}\n\t\treturn dataField;\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateData(this._data);\n\t\tthis.validateDataFoot(this._dataFoot);\n\t\tthis.validateHeaderCells(this._headerCells);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMinWidth(this._minWidth);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelection(this._selection);\n\t}\n\n\tprivate renderSelectionCell(row: (KoliBriTableCell & KoliBriTableDataType)[], rowIndex: number): JSX.Element {\n\t\tif (this.state._selection) {\n\t\t\tconst keyPropertyName = this.state._selection.keyPropertyName ?? 'id';\n\t\t\tconst keyCell = row.find((cell) => cell.key === keyPropertyName);\n\t\t\tif (keyCell) {\n\t\t\t\tconst keyProperty = (keyCell?.data as KoliBriTableDataType)[keyPropertyName] as string;\n\t\t\t\tconst selected = this.state._selection?.selectedKeys?.includes(keyProperty);\n\t\t\t\tconst label = this.state._selection.label(keyCell.data as KoliBriTableDataType);\n\n\t\t\t\treturn (\n\t\t\t\t\t<td key={`tbody-${rowIndex}-selection`} class=\"selection-cell\">\n\t\t\t\t\t\t<KolInputCheckboxTag\n\t\t\t\t\t\t\t_label={label}\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_checked={selected}\n\t\t\t\t\t\t\t_tooltipAlign=\"right\"\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonInput: (event: Event, value) => {\n\t\t\t\t\t\t\t\t\tif (this.state._selection?.selectedKeys) {\n\t\t\t\t\t\t\t\t\t\tconst updatedSelectedKeys = value\n\t\t\t\t\t\t\t\t\t\t\t? [...this.state._selection.selectedKeys, keyProperty]\n\t\t\t\t\t\t\t\t\t\t\t: this.state._selection.selectedKeys.filter((key) => key !== keyProperty);\n\n\t\t\t\t\t\t\t\t\t\ttryToDispatchKoliBriEvent('selection-change', this.host, updatedSelectedKeys);\n\t\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\t\tthis.state._on[Events.onSelectionChange](event, updatedSelectedKeys);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</td>\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\treturn '';\n\t}\n\n\tprivate readonly renderTableRow = (row: (KoliBriTableCell & KoliBriTableDataType)[], rowIndex: number): 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))}\n\t\t\t</tr>\n\t\t);\n\t};\n\n\tprivate readonly renderTableCell = (cell: KoliBriTableCell, rowIndex: number, colIndex: number): 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\tif (this.horizontal) {\n\t\t\t\tkey = dataKey ? `${dataKey}-${colIndex}` : key;\n\t\t\t} else {\n\t\t\t\tkey = dataKey ? `${dataKey}-${rowIndex}` : key;\n\t\t\t}\n\t\t}\n\n\t\tif (cell.asTd === false) {\n\t\t\treturn this.renderHeadingCell(cell, rowIndex, colIndex);\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\tprivate renderHeadingCell(cell: KoliBriTableHeaderCell, rowIndex: number, colIndex: number): 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\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={typeof cell.colSpan === 'number' && cell.colSpan > 1 ? 'colgroup' : 'col'}\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 renderFoot(): JSX.Element {\n\t\tif (!this.state._dataFoot || this.state._dataFoot.length === 0) {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst rows: KoliBriTableCell[][] = this.createDataField(this.state._dataFoot, this.state._headerCells, true);\n\t\treturn <tfoot>{rows.map(this.renderTableRow)}</tfoot>;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst dataField = this.createDataField(this.state._data, this.state._headerCells);\n\n\t\treturn (\n\t\t\t<Host class=\"kol-table-stateless-wc\">\n\t\t\t\t{/* Firefox automatically makes the following div focusable when it has a scrollbar. We implement a similar behavior cross-browser by allowing the\n\t\t\t\t * <div class=\"focus-element\"> to receive focus. Hence, we disable focus for the div to avoid having two focusable elements by setting `tabindex=\"-1\"`\n\t\t\t\t */}\n\t\t\t\t{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n\t\t\t\t<div ref={(element) => (this.tableDivElement = element)} class=\"table\" tabindex={this.tableDivElementHasScrollbar ? '-1' : undefined}>\n\t\t\t\t\t<table\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tminWidth: this.state._minWidth,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{/*\n\t\t\t\t\t\t * The following element allows the table to receive focus without providing redundant content to screen readers.\n\t\t\t\t\t\t * The `div` is technically not allowed here. But any allowed element would mutate the table semantics. Additionally, the `&nbsp;` is necessary to\n\t\t\t\t\t\t * prevent screen readers from just reading \"blank\".\n\t\t\t\t\t\t */}\n\t\t\t\t\t\t{/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n\t\t\t\t\t\t<div class=\"focus-element\" tabindex={this.tableDivElementHasScrollbar ? '0' : undefined} aria-describedby=\"caption\">\n\t\t\t\t\t\t\t&nbsp;\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<caption id=\"caption\">{this.state._label}</caption>\n\n\t\t\t\t\t\t{Array.isArray(this.state._headerCells.horizontal) && (\n\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t{this.state._headerCells.horizontal.map((cols, rowIndex) => (\n\t\t\t\t\t\t\t\t\t<tr key={`thead-${rowIndex}`}>\n\t\t\t\t\t\t\t\t\t\t{this.state._selection && <td key=\"thead-selection\" class=\"selection-header-cell\"></td>}\n\t\t\t\t\t\t\t\t\t\t{cols.map((cell, colIndex) => {\n\t\t\t\t\t\t\t\t\t\t\tif (cell.asTd === true) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td\n\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\tclass={{\n\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}}\n\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\trowSpan={cell.rowSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: cell.textAlign,\n\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}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tref={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttypeof cell.render === 'function'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? (el) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.cellRender(cell, el);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{typeof cell.render !== 'function' ? cell.label : ''}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\treturn this.renderHeadingCell(cell, rowIndex, colIndex);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<tbody>{dataField.map(this.renderTableRow)}</tbody>\n\t\t\t\t\t\t{this.renderFoot()}\n\t\t\t\t\t</table>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["validateTableHeaderCells","component","value","emptyStringByArrayHandler","objectObjectHandler","parseJson","e","watchValidator","Set","KolTableStateless","this","horizontal","cellsToRenderTimeouts","Map","dataToKeyMap","renderTableRow","row","rowIndex","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","componentDidRender","checkDivElementScrollbar","componentDidLoad","tableDivElement","ResizeObserver","tableDivElementResizeObserver","bind","observe","disconnectedCallback","disconnect","tableDivElementHasScrollbar","scrollWidth","clientWidth","forEach","has","set","nonce","_","includes","delete","get","clearTimeout","setTimeout","renderContent","state","textContent","getNumberOfCols","horizontalHeaders","max","count","col","getNumberOfRows","verticalHeaders","_dataFoot","filterHeaderKeys","headers","primaryHeader","cells","push","getPrimaryHeader","createDataField","isFoot","Array","isArray","maxCols","maxRows","startRow","dataField","rowCount","rowSpans","_row","index","i","dataRow","headerCells","rowsTotal","rows","Object","assign","k","j","colspan","rowspan","emptyCell","translate","Math","componentWillLoad","_minWidth","_on","_selection","keyPropertyName","keyCell","find","keyProperty","selected","_c","selectedKeys","KolInputCheckboxTag","_hideLabel","_checked","_tooltipAlign","onInput","event","updatedSelectedKeys","filter","tryToDispatchKoliBriEvent","host","Events","onSelectionChange","ariaSort","sortButtonIcon","sortDirection","scope","KolButtonWcTag","exportparts","_icons","right","onClick","onSort","currentSortDirection","renderFoot","Host","element","tabindex","minWidth","id","cols"],"sources":["src/schema/props/table-header-cells.ts","src/components/table-stateless/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport { emptyStringByArrayHandler, objectObjectHandler, parseJson, watchValidator } from '../utils';\nimport type { KoliBriTableHeaderCell, Stringified } from '../types';\n\n/* types */\nexport type TableHeaderCells = {\n\thorizontal?: KoliBriTableHeaderCell[][];\n\tvertical?: KoliBriTableHeaderCell[][];\n};\n\nexport type TableHeaderCellsPropType = Stringified<TableHeaderCells>;\n\n/**\n * Defines the horizontal and vertical table header cells.\n */\nexport type PropTableHeaderCells = {\n\theaderCells: TableHeaderCellsPropType;\n};\n\n/* validator */\nexport const validateTableHeaderCells = (component: Generic.Element.Component, value?: TableHeaderCellsPropType): void => {\n\temptyStringByArrayHandler(value, () => {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<TableHeaderCells>(value);\n\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\n\t\t\t\t// value keeps the original data\n\t\t\t}\n\t\t\twatchValidator(component, '_headerCells', (value): boolean => typeof value === 'object' && value !== null, new Set(['TableHeaderCellsPropType']), value);\n\t\t});\n\t});\n};\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport type {\n\tKoliBriTableCell,\n\tKoliBriTableDataType,\n\tKoliBriTableHeaderCell,\n\tKoliBriTableHeaderCellWithLogic,\n\tKoliBriTableHeaders,\n\tKoliBriTableRender,\n\tLabelPropType,\n\tTableCallbacksPropType,\n\tTableDataFootPropType,\n\tTableDataPropType,\n\tTableHeaderCellsPropType,\n\tTableSelectionPropType,\n\tTableStatelessAPI,\n\tTableStatelessStates,\n} from '../../schema';\nimport {\n\tvalidateLabel,\n\tvalidateTableCallbacks,\n\tvalidateTableData,\n\tvalidateTableDataFoot,\n\tvalidateTableHeaderCells,\n\tvalidateTableSelection,\n\twatchString,\n} from '../../schema';\nimport { KolButtonWcTag, KolInputCheckboxTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport { tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { Events } from '../../schema/enums';\nimport { nonce } from '../../utils/dev.utils';\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\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\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\tprivate cellRender(cell: KoliBriTableCell, el?: HTMLElement): void {\n\t\tif (el) {\n\t\t\tclearTimeout(this.cellsToRenderTimeouts.get(el));\n\t\t\tthis.cellsToRenderTimeouts.set(\n\t\t\t\tel,\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tif (typeof cell.render === 'function') {\n\t\t\t\t\t\tconst renderContent = cell.render(el, cell, cell.data, this.state._data);\n\t\t\t\t\t\tif (typeof renderContent === 'string') {\n\t\t\t\t\t\t\tel.textContent = renderContent;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t);\n\t\t}\n\t}\n\n\tprivate getNumberOfCols(horizontalHeaders: KoliBriTableHeaderCell[][], data: KoliBriTableDataType[]): number {\n\t\tlet max = 0;\n\t\thorizontalHeaders.forEach((row) => {\n\t\t\tlet count = 0;\n\t\t\trow.forEach((col) => (count += col.colSpan ?? 1));\n\t\t\tif (max < count) {\n\t\t\t\tmax = count;\n\t\t\t}\n\t\t});\n\t\tif (max === 0) {\n\t\t\tmax = data.length;\n\t\t}\n\t\treturn max;\n\t}\n\n\tprivate getNumberOfRows(verticalHeaders: KoliBriTableHeaderCell[][], data: KoliBriTableDataType[]): number {\n\t\tlet max = 0;\n\t\tverticalHeaders.forEach((col) => {\n\t\t\tlet count = 0;\n\t\t\tcol.forEach((row) => (count += row.rowSpan ?? 1));\n\t\t\tif (max < count) {\n\t\t\t\tmax = count;\n\t\t\t}\n\t\t});\n\t\tif (max === 0) {\n\t\t\tmax = data.length;\n\t\t} else {\n\t\t\tmax -= this.state._dataFoot?.length || 0;\n\t\t}\n\t\treturn max;\n\t}\n\n\tprivate filterHeaderKeys(headers: KoliBriTableHeaderCell[][]): KoliBriTableHeaderCell[] {\n\t\tconst primaryHeader: KoliBriTableHeaderCell[] = [];\n\t\theaders.forEach((cells) => {\n\t\t\tcells.forEach((cell) => {\n\t\t\t\tif (typeof cell.key === 'string') {\n\t\t\t\t\tprimaryHeader.push(cell);\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t\treturn primaryHeader;\n\t}\n\n\tprivate getPrimaryHeader(headers: KoliBriTableHeaders): KoliBriTableHeaderCell[] {\n\t\tlet primaryHeader: KoliBriTableHeaderCell[] = this.filterHeaderKeys(headers.horizontal ?? []);\n\t\tthis.horizontal = true;\n\t\tif (primaryHeader.length === 0) {\n\t\t\tprimaryHeader = this.filterHeaderKeys(headers.vertical ?? []);\n\t\t\tif (primaryHeader.length > 0) {\n\t\t\t\tthis.horizontal = false;\n\t\t\t}\n\t\t}\n\t\treturn primaryHeader;\n\t}\n\n\tprivate createDataField(data: KoliBriTableDataType[], headers: KoliBriTableHeaders, isFoot?: boolean): (KoliBriTableCell & KoliBriTableDataType)[][] {\n\t\theaders.horizontal = Array.isArray(headers?.horizontal) ? headers.horizontal : [];\n\t\theaders.vertical = Array.isArray(headers?.vertical) ? headers.vertical : [];\n\t\tconst primaryHeader = this.getPrimaryHeader(headers);\n\t\tconst maxCols = this.getNumberOfCols(headers.horizontal, data);\n\t\tlet maxRows = this.getNumberOfRows(headers.vertical, data);\n\t\tlet startRow = 0;\n\t\tif (isFoot) {\n\t\t\tstartRow = maxRows;\n\t\t\tmaxRows += this.state._dataFoot?.length || 0;\n\t\t}\n\t\tconst dataField: KoliBriTableCell[][] = [];\n\n\t\tconst rowCount: number[] = [];\n\t\tconst rowSpans: number[][] = [];\n\t\theaders.vertical.forEach((_row, index) => {\n\t\t\trowCount[index] = 0;\n\t\t\trowSpans[index] = [];\n\t\t});\n\n\t\tfor (let i = startRow; i < maxRows; i++) {\n\t\t\tconst dataRow: KoliBriTableHeaderCellWithLogic[] = [];\n\t\t\theaders.vertical.forEach((headerCells, index) => {\n\t\t\t\tlet rowsTotal = 0;\n\t\t\t\trowSpans[index].forEach((value) => (rowsTotal += value));\n\t\t\t\tif (rowsTotal <= i) {\n\t\t\t\t\tconst rows = headerCells[i - rowsTotal + rowCount[index]];\n\t\t\t\t\tif (typeof rows === 'object') {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...rows,\n\t\t\t\t\t\t\tasTd: false,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: {} as KoliBriTableDataType,\n\t\t\t\t\t\t});\n\t\t\t\t\t\tlet rowSpan = 1;\n\t\t\t\t\t\tif (typeof rows.rowSpan === 'number' && rows.rowSpan > 1) {\n\t\t\t\t\t\t\trowSpan = rows.rowSpan;\n\t\t\t\t\t\t}\n\t\t\t\t\t\trowSpans[index].push(rowSpan);\n\t\t\t\t\t\tif (typeof rows.colSpan === 'number' && rows.colSpan > 1) {\n\t\t\t\t\t\t\tfor (let k = 1; k < rows.colSpan; k++) {\n\t\t\t\t\t\t\t\trowSpans[index + k].push(rowSpan);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\trowCount[index]++;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t\tfor (let j = 0; j < maxCols; j++) {\n\t\t\t\tif (this.horizontal === true) {\n\t\t\t\t\tconst row = isFoot && this.state._dataFoot ? this.state._dataFoot[i - startRow] : data[i];\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof primaryHeader[j] === 'object' &&\n\t\t\t\t\t\tprimaryHeader[j] !== null &&\n\t\t\t\t\t\ttypeof primaryHeader[j].key === 'string' &&\n\t\t\t\t\t\ttypeof row === 'object' &&\n\t\t\t\t\t\trow !== null\n\t\t\t\t\t) {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...primaryHeader[j],\n\t\t\t\t\t\t\tcolSpan: undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: row,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tlabel: row[primaryHeader[j].key as unknown as string] as string,\n\t\t\t\t\t\t\trowSpan: undefined,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof primaryHeader[i] === 'object' &&\n\t\t\t\t\t\tprimaryHeader[i] !== null &&\n\t\t\t\t\t\ttypeof primaryHeader[i].key === 'string' &&\n\t\t\t\t\t\ttypeof data[j] === 'object' &&\n\t\t\t\t\t\tdata[j] !== null\n\t\t\t\t\t) {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...primaryHeader[i],\n\t\t\t\t\t\t\tcolSpan: undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: data[j],\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tlabel: data[j][primaryHeader[i].key as unknown as number] as string,\n\t\t\t\t\t\t\trowSpan: undefined,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tdataField.push(dataRow);\n\t\t}\n\t\tif (data.length === 0) {\n\t\t\tlet colspan = 0;\n\t\t\tlet rowspan = 0;\n\t\t\tif (Array.isArray(headers.horizontal) && headers.horizontal.length > 0) {\n\t\t\t\theaders.horizontal[0].forEach((col) => {\n\t\t\t\t\tcolspan += col.colSpan || 1;\n\t\t\t\t});\n\t\t\t}\n\t\t\tif (Array.isArray(headers.vertical) && headers.vertical.length > 0) {\n\t\t\t\tcolspan -= headers.vertical.length;\n\t\t\t\theaders.vertical[0].forEach((row) => {\n\t\t\t\t\trowspan += row.rowSpan || 1;\n\t\t\t\t});\n\t\t\t}\n\t\t\tconst emptyCell = {\n\t\t\t\tcolSpan: colspan,\n\t\t\t\tlabel: translate('kol-no-entries'),\n\t\t\t\trender: undefined,\n\t\t\t\trowSpan: Math.max(rowspan, 1),\n\t\t\t};\n\t\t\tif (dataField.length === 0) {\n\t\t\t\tdataField.push([emptyCell]);\n\t\t\t} else {\n\t\t\t\tdataField[0].push(emptyCell);\n\t\t\t}\n\t\t}\n\t\treturn dataField;\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateData(this._data);\n\t\tthis.validateDataFoot(this._dataFoot);\n\t\tthis.validateHeaderCells(this._headerCells);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMinWidth(this._minWidth);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelection(this._selection);\n\t}\n\n\tprivate renderSelectionCell(row: (KoliBriTableCell & KoliBriTableDataType)[], rowIndex: number): JSX.Element {\n\t\tif (this.state._selection) {\n\t\t\tconst keyPropertyName = this.state._selection.keyPropertyName ?? 'id';\n\t\t\tconst keyCell = row.find((cell) => cell.key === keyPropertyName);\n\n\t\t\tif (keyCell) {\n\t\t\t\tconst keyProperty = (keyCell?.data as KoliBriTableDataType)[keyPropertyName] as string;\n\t\t\t\tconst selected = this.state._selection?.selectedKeys?.includes(keyProperty);\n\t\t\t\tconst label = this.state._selection.label(keyCell.data as KoliBriTableDataType);\n\n\t\t\t\treturn (\n\t\t\t\t\t<td key={`tbody-${rowIndex}-selection`} class=\"selection-cell\">\n\t\t\t\t\t\t<KolInputCheckboxTag\n\t\t\t\t\t\t\t_label={label}\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_checked={selected}\n\t\t\t\t\t\t\t_tooltipAlign=\"right\"\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonInput: (event: Event, value) => {\n\t\t\t\t\t\t\t\t\tif (this.state._selection?.selectedKeys) {\n\t\t\t\t\t\t\t\t\t\tconst updatedSelectedKeys = value\n\t\t\t\t\t\t\t\t\t\t\t? [...this.state._selection.selectedKeys, keyProperty]\n\t\t\t\t\t\t\t\t\t\t\t: this.state._selection.selectedKeys.filter((key) => key !== keyProperty);\n\n\t\t\t\t\t\t\t\t\t\ttryToDispatchKoliBriEvent('selection-change', this.host, updatedSelectedKeys);\n\t\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\t\tthis.state._on[Events.onSelectionChange](event, updatedSelectedKeys);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</td>\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\treturn '';\n\t}\n\n\tprivate readonly renderTableRow = (row: (KoliBriTableCell & KoliBriTableDataType)[], rowIndex: number): 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))}\n\t\t\t</tr>\n\t\t);\n\t};\n\n\tprivate readonly renderTableCell = (cell: KoliBriTableCell, rowIndex: number, colIndex: number): 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\tif (this.horizontal) {\n\t\t\t\tkey = dataKey ? `${dataKey}-${colIndex}` : key;\n\t\t\t} else {\n\t\t\t\tkey = dataKey ? `${dataKey}-${rowIndex}` : key;\n\t\t\t}\n\t\t}\n\n\t\tif (cell.asTd === false) {\n\t\t\treturn this.renderHeadingCell(cell, rowIndex, colIndex);\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\tprivate renderHeadingCell(cell: KoliBriTableHeaderCell, rowIndex: number, colIndex: number): 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\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={typeof cell.colSpan === 'number' && cell.colSpan > 1 ? 'colgroup' : 'col'}\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 renderFoot(): JSX.Element {\n\t\tif (!this.state._dataFoot || this.state._dataFoot.length === 0) {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst rows: KoliBriTableCell[][] = this.createDataField(this.state._dataFoot, this.state._headerCells, true);\n\t\treturn <tfoot>{rows.map(this.renderTableRow)}</tfoot>;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst dataField = this.createDataField(this.state._data, this.state._headerCells);\n\n\t\treturn (\n\t\t\t<Host class=\"kol-table-stateless-wc\">\n\t\t\t\t{/* Firefox automatically makes the following div focusable when it has a scrollbar. We implement a similar behavior cross-browser by allowing the\n\t\t\t\t * <div class=\"focus-element\"> to receive focus. Hence, we disable focus for the div to avoid having two focusable elements by setting `tabindex=\"-1\"`\n\t\t\t\t */}\n\t\t\t\t{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n\t\t\t\t<div ref={(element) => (this.tableDivElement = element)} class=\"table\" tabindex={this.tableDivElementHasScrollbar ? '-1' : undefined}>\n\t\t\t\t\t<table\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tminWidth: this.state._minWidth,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{/*\n\t\t\t\t\t\t * The following element allows the table to receive focus without providing redundant content to screen readers.\n\t\t\t\t\t\t * The `div` is technically not allowed here. But any allowed element would mutate the table semantics. Additionally, the `&nbsp;` is necessary to\n\t\t\t\t\t\t * prevent screen readers from just reading \"blank\".\n\t\t\t\t\t\t */}\n\t\t\t\t\t\t{/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n\t\t\t\t\t\t<div class=\"focus-element\" tabindex={this.tableDivElementHasScrollbar ? '0' : undefined} aria-describedby=\"caption\">\n\t\t\t\t\t\t\t&nbsp;\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<caption id=\"caption\">{this.state._label}</caption>\n\n\t\t\t\t\t\t{Array.isArray(this.state._headerCells.horizontal) && (\n\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t{this.state._headerCells.horizontal.map((cols, rowIndex) => (\n\t\t\t\t\t\t\t\t\t<tr key={`thead-${rowIndex}`}>\n\t\t\t\t\t\t\t\t\t\t{this.state._selection && <td key=\"thead-selection\" class=\"selection-header-cell\"></td>}\n\t\t\t\t\t\t\t\t\t\t{cols.map((cell, colIndex) => {\n\t\t\t\t\t\t\t\t\t\t\tif (cell.asTd === true) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td\n\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\tclass={{\n\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}}\n\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\trowSpan={cell.rowSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: cell.textAlign,\n\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}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tref={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttypeof cell.render === 'function'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? (el) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.cellRender(cell, el);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{typeof cell.render !== 'function' ? cell.label : ''}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\treturn this.renderHeadingCell(cell, rowIndex, colIndex);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<tbody>{dataField.map(this.renderTableRow)}</tbody>\n\t\t\t\t\t\t{this.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":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-40be4caf.js";import{q as i}from"./component-names-791b1799.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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n/*\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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host,\n  .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: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .table-sort-button .button {\n    color: inherit;\n  }\n  tbody th,\n  th.align-left {\n    text-align: left;\n  }\n  tbody th .table-sort-button .button-inner,\n  th.align-left .table-sort-button .button-inner {\n    justify-items: start;\n  }\n  th.align-center {\n    text-align: center;\n  }\n  th.align-center .table-sort-button .button-inner {\n    justify-items: center;\n  }\n  th.align-right {\n    text-align: right;\n  }\n  th.align-right .table-sort-button .button-inner {\n    justify-items: end;\n  }\n  .selection-header-cell {\n    width: 0;\n  }\n  .selection-cell {\n    white-space: nowrap;\n  }\n}",a=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:"341cf6e82f6052f6a8d2117438760a0b0b331a60",class:"kol-table-stateless"},e(i,{key:"f92acdfc7fead14f05cabb0f68abba8ecd7d60a8",_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,H as t}from"./index-360ad69b.js";import{r as i}from"./component-names-e522484e.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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n/*\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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host,\n  .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: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .table-sort-button .button {\n    color: inherit;\n  }\n  tbody th,\n  th.align-left {\n    text-align: left;\n  }\n  tbody th .table-sort-button .button-inner,\n  th.align-left .table-sort-button .button-inner {\n    justify-items: start;\n  }\n  th.align-center {\n    text-align: center;\n  }\n  th.align-center .table-sort-button .button-inner {\n    justify-items: center;\n  }\n  th.align-right {\n    text-align: right;\n  }\n  th.align-right .table-sort-button .button-inner {\n    justify-items: end;\n  }\n  .selection-header-cell {\n    width: 0;\n  }\n  .selection-cell {\n    white-space: nowrap;\n  }\n}",a=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:"341cf6e82f6052f6a8d2117438760a0b0b331a60",class:"kol-table-stateless"},e(i,{key:"f92acdfc7fead14f05cabb0f68abba8ecd7d60a8",_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};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolTableStatelessDefaultStyle0","KolTableStateless","render","h","Host","key","class","KolTableStatelessWcTag","_data","this","_dataFoot","_headerCells","_label","_minWidth","_on","_selection"],"sources":["src/components/table-stateless/style.scss?tag=kol-table-stateless&mode=default&encapsulation=shadow","src/components/table-stateless/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../@shared/kol-table-stateless-mixin';\n@import '../style';\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,86SACxB,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"}
+{"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 '../@shared/kol-table-stateless-mixin';\n@import '../style';\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,gzSACxB,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":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i}from"./index-40be4caf.js";import{p as s}from"./component-names-791b1799.js";const e=class{constructor(i){t(this,i),this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom"}render(){return i(s,{key:"926238f403bdb441b878e398b4c577a614a2691a",_allowMultiSort:this._allowMultiSort,_data:this._data,_dataFoot:this._dataFoot,_headers:this._headers,_label:this._label,_minWidth:this._minWidth,_pagination:this._pagination,_paginationPosition:this._paginationPosition})}};export{e as kol_table};
+import{r as i,h as t}from"./index-360ad69b.js";import{q as e}from"./component-names-e522484e.js";const n=class{constructor(t){i(this,t),this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0}render(){return t(e,{key:"ac73413e2fcad74426a8f3c55e4c587235f249d7",_allowMultiSort:this._allowMultiSort,_data:this._data,_dataFoot:this._dataFoot,_headers:this._headers,_label:this._label,_minWidth:this._minWidth,_pagination:this._pagination,_paginationPosition:this._paginationPosition,_selection:this._selection,_on:this._on})}};export{n as kol_table};

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

@@ -1 +1 @@
-{"version":3,"names":["KolTable","render","h","KolTableStatefulTag","key","_allowMultiSort","this","_data","_dataFoot","_headers","_label","_minWidth","_pagination","_paginationPosition"],"sources":["src/components/table/shadow.tsx"],"sourcesContent":["import type { KoliBriTableDataType, KoliBriTableHeaders, KoliBriTablePaginationProps, PaginationPositionPropType, Stringified, TableProps } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { h } from '@stencil/core';\nimport { Component, Prop } from '@stencil/core';\nimport { KolTableStatefulTag } from '../../core/component-names';\n\n/**\n * @deprecated Use KolTableStateful instead.\n */\n@Component({\n\ttag: 'kol-table',\n\tshadow: true,\n})\nexport class KolTable implements TableProps {\n\t/**\n\t * Defines whether to allow multi sort.\n\t */\n\t@Prop() public _allowMultiSort?: boolean;\n\n\t/**\n\t * Defines the primary table data.\n\t */\n\t@Prop() public _data!: Stringified<KoliBriTableDataType[]>;\n\n\t/**\n\t * Defines the data for the table footer.\n\t */\n\t@Prop() public _dataFoot?: Stringified<KoliBriTableDataType[]>;\n\n\t/**\n\t * Defines the horizontal and vertical table headers.\n\t */\n\t@Prop() public _headers!: Stringified<KoliBriTableHeaders>;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Defines the table min-width.\n\t */\n\t@Prop() public _minWidth?: string;\n\n\t/**\n\t * Defines whether to show the data distributed over multiple pages.\n\t */\n\t@Prop() public _pagination?: boolean | Stringified<KoliBriTablePaginationProps>;\n\t/**\n\t * Controls the position of the pagination.\n\t */\n\t@Prop() public _paginationPosition?: PaginationPositionPropType = 'bottom';\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTableStatefulTag\n\t\t\t\t_allowMultiSort={this._allowMultiSort}\n\t\t\t\t_data={this._data}\n\t\t\t\t_dataFoot={this._dataFoot}\n\t\t\t\t_headers={this._headers}\n\t\t\t\t_label={this._label}\n\t\t\t\t_minWidth={this._minWidth}\n\t\t\t\t_pagination={this._pagination}\n\t\t\t\t_paginationPosition={this._paginationPosition}\n\t\t\t/>\n\t\t);\n\t}\n}\n"],"mappings":";;;uGAaaA,EAAQ,M,iOAsC8C,Q,CAE3D,MAAAC,GACN,OACCC,EAACC,EAAmB,CAAAC,IAAA,2CACnBC,gBAAiBC,KAAKD,gBACtBE,MAAOD,KAAKC,MACZC,UAAWF,KAAKE,UAChBC,SAAUH,KAAKG,SACfC,OAAQJ,KAAKI,OACbC,UAAWL,KAAKK,UAChBC,YAAaN,KAAKM,YAClBC,oBAAqBP,KAAKO,qB"}
+{"version":3,"names":["KolTable","render","h","KolTableStatefulTag","key","_allowMultiSort","this","_data","_dataFoot","_headers","_label","_minWidth","_pagination","_paginationPosition","_selection","_on"],"sources":["src/components/table/shadow.tsx"],"sourcesContent":["import type {\n\tKoliBriTableDataType,\n\tKoliBriTableHeaders,\n\tKoliBriTablePaginationProps,\n\tPaginationPositionPropType,\n\tStringified,\n\tTableProps,\n\tTableSelectionPropType,\n\tTableStatefulCallbacksPropType,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { h } from '@stencil/core';\nimport { Component, Prop } from '@stencil/core';\nimport { KolTableStatefulTag } from '../../core/component-names';\n\n/**\n * @deprecated Use KolTableStateful instead.\n */\n@Component({\n\ttag: 'kol-table',\n\tshadow: true,\n})\nexport class KolTable implements TableProps {\n\t/**\n\t * Defines whether to allow multi sort.\n\t */\n\t@Prop() public _allowMultiSort?: boolean;\n\n\t/**\n\t * Defines the primary table data.\n\t */\n\t@Prop() public _data!: Stringified<KoliBriTableDataType[]>;\n\n\t/**\n\t * Defines the data for the table footer.\n\t */\n\t@Prop() public _dataFoot?: Stringified<KoliBriTableDataType[]>;\n\n\t/**\n\t * Defines the horizontal and vertical table headers.\n\t */\n\t@Prop() public _headers!: Stringified<KoliBriTableHeaders>;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Defines the table min-width.\n\t */\n\t@Prop() public _minWidth?: string;\n\n\t/**\n\t * Defines whether to show the data distributed over multiple pages.\n\t */\n\t@Prop() public _pagination?: boolean | Stringified<KoliBriTablePaginationProps>;\n\t/**\n\t * Controls the position of the pagination.\n\t */\n\t@Prop() public _paginationPosition?: PaginationPositionPropType = 'bottom';\n\t/**\n\t * Defines how rows can be selected and the current selection.\n\t */\n\t@Prop() public _selection?: TableSelectionPropType;\n\t/**\n\t * Defines the callback functions for table events.\n\t */\n\t@Prop() public _on?: TableStatefulCallbacksPropType;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTableStatefulTag\n\t\t\t\t_allowMultiSort={this._allowMultiSort}\n\t\t\t\t_data={this._data}\n\t\t\t\t_dataFoot={this._dataFoot}\n\t\t\t\t_headers={this._headers}\n\t\t\t\t_label={this._label}\n\t\t\t\t_minWidth={this._minWidth}\n\t\t\t\t_pagination={this._pagination}\n\t\t\t\t_paginationPosition={this._paginationPosition}\n\t\t\t\t_selection={this._selection}\n\t\t\t\t_on={this._on}\n\t\t\t/>\n\t\t);\n\t}\n}\n"],"mappings":";;;uGAsBaA,EAAQ,M,iOAsC8C,S,6CAU3D,MAAAC,GACN,OACCC,EAACC,EAAmB,CAAAC,IAAA,2CACnBC,gBAAiBC,KAAKD,gBACtBE,MAAOD,KAAKC,MACZC,UAAWF,KAAKE,UAChBC,SAAUH,KAAKG,SACfC,OAAQJ,KAAKI,OACbC,UAAWL,KAAKK,UAChBC,YAAaN,KAAKM,YAClBC,oBAAqBP,KAAKO,oBAC1BC,WAAYR,KAAKQ,WACjBC,IAAKT,KAAKS,K","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as t,H as i,g as e}from"./index-40be4caf.js";import{t as o}from"./i18n-a7081f2c.js";import{c as s,i as a}from"./component-names-791b1799.js";import{a as l}from"./align-d1a156ea.js";import{j as r,f as d,s as h,k as b,g as c,h as u,v as p}from"./prop.validators-28badc7d.js";import{v as f}from"./label-af70fdc5.js";import{L as g}from"./dev.utils-1ca991a2.js";import"./i18n-9eed57c7.js";import"./reuse-b66836de.js";import"./index-4a3076fc.js";const m="/*\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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button-group-wc {\n    display: inline-flex;\n    flex-wrap: wrap;\n  }\n  .kol-button-group-wc 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 .kol-button-group-wc {\n    display: grid;\n    order: 2;\n  }\n  :host > .tabs-align-left {\n    display: grid;\n    grid-template-columns: auto 1fr;\n  }\n  :host > .tabs-align-left .kol-button-group-wc {\n    display: grid;\n    order: 0;\n  }\n  :host > .tabs-align-bottom {\n    display: grid;\n    grid-template-rows: 1fr auto;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc {\n    order: 2;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc > div {\n    display: flex;\n  }\n  :host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n    margin: 0 1em 0 0;\n  }\n  :host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n    margin: 0 1em;\n  }\n  :host > .tabs-align-top {\n    display: grid;\n    grid-template-rows: auto 1fr;\n  }\n  :host > .tabs-align-top .kol-button-group-wc {\n    order: 0;\n  }\n  :host > .tabs-align-top .kol-button-group-wc > div {\n    display: flex;\n  }\n  :host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n    margin: 0 1em 0 0;\n  }\n  :host > .tabs-align-top > .kol-button-group-wc > div > div {\n    margin: 0 1em;\n  }\n  :host > div {\n    display: grid;\n  }\n  :host > .tabs-align-left .kol-button-group-wc,\n  :host > .tabs-align-top .kol-button-group-wc {\n    order: 0;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc,\n  :host > .tabs-align-right .kol-button-group-wc {\n    order: 1;\n  }\n  :host > div.tabs-align-left .kol-button-group-wc > div,\n  :host > div.tabs-align-left .kol-button-group-wc > div > div,\n  :host > div.tabs-align-right .kol-button-group-wc > div,\n  :host > div.tabs-align-right .kol-button-group-wc > div > div {\n    display: grid;\n  }\n  :host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n  :host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n    width: 100%;\n  }\n  :host > div.tabs-align-bottom .kol-button-group-wc div,\n  :host > div.tabs-align-top .kol-button-group-wc div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n}",v=m,w=class{constructor(t){n(this,t),this.onCreateLabel=`${o("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,n)=>{if(n>0){if(e+n<t.length)return t[e+n]._disabled?this.nextPossibleTabIndex(t,e,n+1):e+n}else if(n<0&&e+n>=0)return t[e+n]._disabled?this.nextPossibleTabIndex(t,e,n-1):e+n;return e},this.onKeyDown=t=>{let e=null;switch(t.key){case"ArrowRight":e=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,1);break;case"ArrowLeft":e=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,-1)}null!==e&&this.onSelect(t,e)},this.onClickSelect=(t,e)=>{this.onSelect(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,i)=>{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,i||t);t=i||t,n=!1}if(!1===n){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,i||t);r("[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.")}}return t},this.syncSelectedAndTabs=(t,e,n,i)=>{let a,o;a="_selected"===i?t:this.state._selected,o="_tabs"===i?t:this.state._tabs,o.length>0&&e.set("_selected",this.selectNextNotDisabledTab(a,o))},this.handleTabPanels=()=>{var t,e,n;if(this.tabPanelHost instanceof HTMLDivElement)for(let i=this.tabPanelHost.children.length;i<this.state._tabs.length;i++){const a=document.createElement("div");a.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${i}`),a.setAttribute("id",`tabpanel-${i}`),a.setAttribute("role","tabpanel"),a.setAttribute("hidden","");const o=document.createElement("slot");o.setAttribute("name",`tabpanel-slot-${i}`),a.appendChild(o),this.tabPanelHost.appendChild(a),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[i])&&(null===(n=this.host)||void 0===n||n.children[i].setAttribute("slot",`tabpanel-slot-${i}`))}},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._align="top",this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]}}renderButtonGroup(){return t(a,{class:"tabs-button-group",role:"tablist","aria-label":this.state._label,onKeyDown:this.onKeyDown},this.state._tabs.map(((e,n)=>t(s,{_disabled:e._disabled,_icons:e._icons,_hideLabel:e._hideLabel,_label:e._label,_on:this.callbacks,_tabIndex:this.state._selected===n?0:-1,_tooltipAlign:e._tooltipAlign,_variant:this.state._selected===n?"custom":void 0,_customClass:this.state._selected===n?"selected":void 0,_ariaControls:`tabpanel-${n}`,_ariaSelected:this.state._selected===n,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${n}`,_role:"tab",_value:n}))),this.showCreateTab&&t(s,{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return t(i,{key:"e4e1913d7ede8a07070844194b5ba4a7edb19501",class:"kol-tabs"},t("div",{key:"9292bb7b6cf4cf0b738e97807735b4f299ca06ae",ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._align}`]:!0}},this.renderButtonGroup(),t("div",{key:"99b0efb5eb634e24f9b376b488dab127f3a778b9",class:"tabs-content",ref:this.catchTabPanelHost})))}validateAlign(t){l(this,t)}validateLabel(t){f(this,t,{required:!0})}validateOn(t){if("object"==typeof t&&null!==t){d("[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] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt."),"function"==typeof t.onCreate.callback?e.onCreate=t.onCreate.callback:g.debug("[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.")):e.onCreate=t.onCreate,this.showCreateTab="function"==typeof e.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),h(this,"_on",e)}}validateSelected(t){b(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){c(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)}componentDidRender(){if(this.handleTabPanels(),this.tabPanelHost instanceof HTMLDivElement)for(let t=0;t<this.tabPanelHost.children.length;t++)t!==this.state._selected?this.tabPanelHost.children[t].setAttribute("hidden",""):this.tabPanelHost.children[t].removeAttribute("hidden")}onSelect(t,e){var n,i;if(this._selected=e,"function"==typeof(null===(n=this._on)||void 0===n?void 0:n.onSelect)&&(null===(i=this._on)||void 0===i||i.onSelect(t,e)),this.tabPanelsElement){const t=p(`button#${this.state._label.replace(/\s/g,"-")}-tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}get host(){return e(this)}static get watchers(){return{_align:["validateAlign"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};w.style={default:v};export{w as kol_tabs};
+import{r as n,h as t,H as i,g as e}from"./index-360ad69b.js";import{t as o}from"./i18n-112381e9.js";import{c as s,i as a}from"./component-names-e522484e.js";import{a as l}from"./align-6595a6d6.js";import{j as r,f as d,s as h,k as b,g as c,h as u,v as f}from"./prop.validators-f2b9a155.js";import{v as p}from"./label-452f8c01.js";import{L as g}from"./dev.utils-1ca991a2.js";import"./i18n-66b52d13.js";import"./reuse-b66836de.js";import"./index-db4aa6e4.js";const m="/*\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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button-group-wc {\n    display: inline-flex;\n    flex-wrap: wrap;\n  }\n  .kol-button-group-wc 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 .kol-button-group-wc {\n    display: grid;\n    order: 2;\n  }\n  :host > .tabs-align-left {\n    display: grid;\n    grid-template-columns: auto 1fr;\n  }\n  :host > .tabs-align-left .kol-button-group-wc {\n    display: grid;\n    order: 0;\n  }\n  :host > .tabs-align-bottom {\n    display: grid;\n    grid-template-rows: 1fr auto;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc {\n    order: 2;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc > div {\n    display: flex;\n  }\n  :host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n    margin: 0 1em 0 0;\n  }\n  :host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n    margin: 0 1em;\n  }\n  :host > .tabs-align-top {\n    display: grid;\n    grid-template-rows: auto 1fr;\n  }\n  :host > .tabs-align-top .kol-button-group-wc {\n    order: 0;\n  }\n  :host > .tabs-align-top .kol-button-group-wc > div {\n    display: flex;\n  }\n  :host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n    margin: 0 1em 0 0;\n  }\n  :host > .tabs-align-top > .kol-button-group-wc > div > div {\n    margin: 0 1em;\n  }\n  :host > div {\n    display: grid;\n  }\n  :host > .tabs-align-left .kol-button-group-wc,\n  :host > .tabs-align-top .kol-button-group-wc {\n    order: 0;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc,\n  :host > .tabs-align-right .kol-button-group-wc {\n    order: 1;\n  }\n  :host > div.tabs-align-left .kol-button-group-wc > div,\n  :host > div.tabs-align-left .kol-button-group-wc > div > div,\n  :host > div.tabs-align-right .kol-button-group-wc > div,\n  :host > div.tabs-align-right .kol-button-group-wc > div > div {\n    display: grid;\n  }\n  :host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n  :host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n    width: 100%;\n  }\n  :host > div.tabs-align-bottom .kol-button-group-wc div,\n  :host > div.tabs-align-top .kol-button-group-wc div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n}",v=m,w=class{constructor(t){n(this,t),this.onCreateLabel=`${o("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,n)=>{if(n>0){if(e+n<t.length)return t[e+n]._disabled?this.nextPossibleTabIndex(t,e,n+1):e+n}else if(n<0&&e+n>=0)return t[e+n]._disabled?this.nextPossibleTabIndex(t,e,n-1):e+n;return e},this.onKeyDown=t=>{var e,n;let a=null;switch(t.key){case"ArrowRight":a=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,1);break;case"ArrowLeft":a=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,-1)}if(null!==a){const i=this.state._tabs[a];(null===(e=i._on)||void 0===e?void 0:e.onSelect)&&(null===(n=i._on)||void 0===n||n.onSelect(t,a)),this.onSelect(t,a)}},this.onClickSelect=(t,e)=>{var n,a;const i=this.state._tabs[e];(null===(n=i._on)||void 0===n?void 0:n.onSelect)&&(null===(a=i._on)||void 0===a||a.onSelect(t,e)),this.onSelect(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,a)=>{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,a||t);t=a||t,n=!1}if(!1===n){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,a||t);r("[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.")}}return t},this.syncSelectedAndTabs=(t,e,n,a)=>{let i,o;i="_selected"===a?t:this.state._selected,o="_tabs"===a?t:this.state._tabs,o.length>0&&e.set("_selected",this.selectNextNotDisabledTab(i,o))},this.handleTabPanels=()=>{var t,e,n;if(this.tabPanelHost instanceof HTMLDivElement)for(let a=this.tabPanelHost.children.length;a<this.state._tabs.length;a++){const i=document.createElement("div");i.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${a}`),i.setAttribute("id",`tabpanel-${a}`),i.setAttribute("role","tabpanel"),i.setAttribute("hidden","");const o=document.createElement("slot");o.setAttribute("name",`tabpanel-slot-${a}`),i.appendChild(o),this.tabPanelHost.appendChild(i),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[a])&&(null===(n=this.host)||void 0===n||n.children[a].setAttribute("slot",`tabpanel-slot-${a}`))}},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._align="top",this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]}}renderButtonGroup(){return t(a,{class:"tabs-button-group",role:"tablist","aria-label":this.state._label,onKeyDown:this.onKeyDown},this.state._tabs.map(((e,n)=>t(s,{_disabled:e._disabled,_icons:e._icons,_hideLabel:e._hideLabel,_label:e._label,_on:this.callbacks,_tabIndex:this.state._selected===n?0:-1,_tooltipAlign:e._tooltipAlign,_variant:this.state._selected===n?"custom":void 0,_customClass:this.state._selected===n?"selected":void 0,_ariaControls:`tabpanel-${n}`,_ariaSelected:this.state._selected===n,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${n}`,_role:"tab",_value:n}))),this.showCreateTab&&t(s,{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return t(i,{key:"668b8fe78f5053ce356e685104518338aa9f73b9",class:"kol-tabs"},t("div",{key:"5845ac11d2ebf8abe1e515aea9f9c68c56ee9a57",ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._align}`]:!0}},this.renderButtonGroup(),t("div",{key:"67ef993b870a8ff374c2cc4f750de970d578edea",class:"tabs-content",ref:this.catchTabPanelHost})))}validateAlign(t){l(this,t)}validateLabel(t){p(this,t,{required:!0})}validateOn(t){if("object"==typeof t&&null!==t){d("[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] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt."),"function"==typeof t.onCreate.callback?e.onCreate=t.onCreate.callback:g.debug("[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.")):e.onCreate=t.onCreate,this.showCreateTab="function"==typeof e.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),h(this,"_on",e)}}validateSelected(t){b(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){c(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)}componentDidRender(){if(this.handleTabPanels(),this.tabPanelHost instanceof HTMLDivElement)for(let t=0;t<this.tabPanelHost.children.length;t++)t!==this.state._selected?this.tabPanelHost.children[t].setAttribute("hidden",""):this.tabPanelHost.children[t].removeAttribute("hidden")}onSelect(t,e){var n,a;if(this._selected=e,"function"==typeof(null===(n=this._on)||void 0===n?void 0:n.onSelect)&&(null===(a=this._on)||void 0===a||a.onSelect(t,e)),this.tabPanelsElement){const t=f(`button#${this.state._label.replace(/\s/g,"-")}-tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}get host(){return e(this)}static get watchers(){return{_align:["validateAlign"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};w.style={default:v};export{w as kol_tabs};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolTabsDefaultStyle0","KolTabs","this","onCreateLabel","translate","showCreateTab","nextPossibleTabIndex","tabs","offset","step","length","_disabled","onKeyDown","event","selectedIndex","key","state","_tabs","_selected","onSelect","onClickSelect","index","onMouseDown","preventDefault","stopPropagation","callbacks","onClick","catchTabPanelHost","el","tabPanelHost","selectNextNotDisabledTab","selected","upOrDown","initialSelected","Array","isArray","devHint","syncSelectedAndTabs","nextValue","nextState","_component","set","handleTabPanels","HTMLDivElement","i","children","div","document","createElement","setAttribute","_label","replace","slot","appendChild","_a","host","HTMLCollection","_b","_c","onCreate","_on","_align","renderButtonGroup","h","KolButtonGroupWcTag","class","role","map","button","KolButtonWcTag","_icons","_hideLabel","_tabIndex","_tooltipAlign","_variant","undefined","_customClass","_ariaControls","_ariaSelected","_id","_role","_value","render","Host","ref","tabPanelsElement","validateAlign","value","validateLabel","required","validateOn","featureHint","label","Log","debug","callback","setState","validateSelected","watchNumber","hooks","beforePatch","validateTabs","watchJsonArrayString","item","uiUxHintMillerscheZahl","componentWillLoad","componentDidRender","removeAttribute","koliBriQuerySelector","focus"],"sources":["src/components/tabs/style.scss?tag=kol-tabs&mode=default&encapsulation=shadow","src/components/tabs/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../host-display-block';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.kol-button-group-wc {\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t}\n\n\t.kol-button-group-wc button {\n\t\tborder-bottom-color: transparent;\n\t\tborder-bottom-style: solid;\n\t\tdisplay: block;\n\t}\n\n\tdiv.grid,\n\tdiv[role='tabpanel'] {\n\t\theight: 100%;\n\t}\n\n\t:host > .tabs-align-right {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\n\t:host > .tabs-align-right .kol-button-group-wc {\n\t\tdisplay: grid;\n\t\torder: 2;\n\t}\n\n\t:host > .tabs-align-left {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: auto 1fr;\n\t}\n\n\t:host > .tabs-align-left .kol-button-group-wc {\n\t\tdisplay: grid;\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-bottom {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: 1fr auto;\n\t}\n\n\t:host > .tabs-align-bottom .kol-button-group-wc {\n\t\torder: 2;\n\t}\n\n\t:host > .tabs-align-bottom .kol-button-group-wc > div {\n\t\tdisplay: flex;\n\t}\n\n\t:host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n\t\tmargin: 0 1em 0 0;\n\t}\n\n\t:host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n\t\tmargin: 0 1em;\n\t}\n\n\t:host > .tabs-align-top {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: auto 1fr;\n\t}\n\n\t:host > .tabs-align-top .kol-button-group-wc {\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-top .kol-button-group-wc > div {\n\t\tdisplay: flex;\n\t}\n\n\t:host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n\t\tmargin: 0 1em 0 0;\n\t}\n\n\t:host > .tabs-align-top > .kol-button-group-wc > div > div {\n\t\tmargin: 0 1em;\n\t}\n\n\t:host > div {\n\t\tdisplay: grid;\n\t}\n\n\t:host > .tabs-align-left .kol-button-group-wc,\n\t:host > .tabs-align-top .kol-button-group-wc {\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-bottom .kol-button-group-wc,\n\t:host > .tabs-align-right .kol-button-group-wc {\n\t\torder: 1;\n\t}\n\n\t:host > div.tabs-align-left .kol-button-group-wc > div,\n\t:host > div.tabs-align-left .kol-button-group-wc > div > div,\n\t:host > div.tabs-align-right .kol-button-group-wc > div,\n\t:host > div.tabs-align-right .kol-button-group-wc > div > div {\n\t\tdisplay: grid;\n\t}\n\n\t:host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n\t:host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n\t\twidth: 100%;\n\t}\n\n\t:host > div.tabs-align-bottom .kol-button-group-wc div,\n\t:host > div.tabs-align-top .kol-button-group-wc div {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n}\n","import type {\n\tAlignPropType,\n\tButtonCallbacksPropType,\n\tKoliBriTabsCallbacks,\n\tLabelPropType,\n\tStencilUnknown,\n\tStringified,\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\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 { KolButtonGroupWcTag, KolButtonWcTag } from '../../core/component-names';\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\n\tprivate nextPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step: number): number => {\n\t\tif (step > 0) {\n\t\t\tif (offset + step < tabs.length) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t} else if (step < 0) {\n\t\t\tif (offset + step >= 0) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step - 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t}\n\t\treturn offset;\n\t};\n\n\tprivate onKeyDown = (event: KeyboardEvent) => {\n\t\tlet selectedIndex: number | null = null;\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowRight':\n\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, 1);\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowLeft':\n\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, -1);\n\t\t\t\tbreak;\n\t\t}\n\t\tif (selectedIndex !== null) {\n\t\t\tthis.onSelect(event, selectedIndex);\n\t\t}\n\t};\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.onSelect(event, index);\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<KolButtonGroupWcTag class=\"tabs-button-group\" role=\"tablist\" aria-label={this.state._label} onKeyDown={this.onKeyDown}>\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<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</KolButtonGroupWcTag>\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 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] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.`);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn selected;\n\t};\n\n\tprivate syncSelectedAndTabs = (nextValue: unknown, nextState: Map<string, unknown>, _component: Generic.Element.Component, key: string) => {\n\t\tlet selected: number;\n\t\tif (key === '_selected') {\n\t\t\tselected = nextValue as number;\n\t\t} else {\n\t\t\tselected = this.state._selected;\n\t\t}\n\t\tlet tabs: TabButtonProps[];\n\t\tif (key === '_tabs') {\n\t\t\ttabs = nextValue as TabButtonProps[];\n\t\t} else {\n\t\t\ttabs = this.state._tabs;\n\t\t}\n\t\tif (tabs.length > 0) {\n\t\t\tnextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));\n\t\t}\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType) {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\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] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt.`,\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\tif (typeof value.onCreate.callback === 'function') {\n\t\t\t\t\t\tcallbacks.onCreate = value.onCreate.callback;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tLog.debug(\n\t\t\t\t\t\t\t`[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.`,\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tcallbacks.onCreate = value.onCreate;\n\t\t\t\t}\n\t\t\t\tthis.showCreateTab = typeof callbacks.onCreate === 'function';\n\t\t\t}\n\t\t\tif (typeof value.onSelect === 'function') {\n\t\t\t\tcallbacks.onSelect = value.onSelect;\n\t\t\t}\n\t\t\tsetState<KoliBriTabsCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_selected')\n\tpublic validateSelected(value?: number): void {\n\t\twatchNumber(this, '_selected', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_tabs')\n\tpublic validateTabs(value?: Stringified<TabButtonProps[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis,\n\t\t\t'_tabs',\n\t\t\t(item: TabButtonProps) => typeof item === 'object' && item !== null && typeof item._label === 'string' && item._label.length > 0,\n\t\t\tvalue,\n\t\t\tundefined,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t\t},\n\t\t\t},\n\t\t);\n\t\tuiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t}\n\n\tprivate readonly handleTabPanels = () => {\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = this.tabPanelHost.children.length; i < this.state._tabs.length; i++) {\n\t\t\t\tconst div = document.createElement('div');\n\t\t\t\tdiv.setAttribute('aria-labelledby', `${this.state._label.replace(/\\s/g, '-')}-tab-${i}`);\n\t\t\t\tdiv.setAttribute('id', `tabpanel-${i}`);\n\t\t\t\tdiv.setAttribute('role', 'tabpanel');\n\t\t\t\tdiv.setAttribute('hidden', '');\n\t\t\t\tconst slot = document.createElement('slot');\n\t\t\t\tslot.setAttribute('name', `tabpanel-slot-${i}`);\n\t\t\t\tdiv.appendChild(slot);\n\t\t\t\tthis.tabPanelHost.appendChild(div);\n\t\t\t\tif (this.host?.children instanceof HTMLCollection && this.host?.children[i] /* SSR instanceof HTMLElement */) {\n\t\t\t\t\t// div.appendChild(this.host?.children[0]);\n\t\t\t\t\tthis.host?.children[i].setAttribute('slot', `tabpanel-slot-${i}`);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic componentDidRender(): void {\n\t\tthis.handleTabPanels();\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = 0; i < this.tabPanelHost.children.length; i++) {\n\t\t\t\tif (i !== this.state._selected) {\n\t\t\t\t\tthis.tabPanelHost.children[i].setAttribute('hidden', '');\n\t\t\t\t} else {\n\t\t\t\t\tthis.tabPanelHost.children[i].removeAttribute('hidden');\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate onSelect(event: CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, index: number): void {\n\t\tthis._selected = index;\n\t\tif (typeof this._on?.onSelect === 'function') {\n\t\t\tthis._on?.onSelect(event, index);\n\t\t}\n\t\tif (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 onCreate = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onCreate === 'function') {\n\t\t\tthis.state._on?.onCreate(event);\n\t\t}\n\t};\n}\n"],"mappings":"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"}
+{"version":3,"names":["defaultStyleCss","KolTabsDefaultStyle0","KolTabs","this","onCreateLabel","translate","showCreateTab","nextPossibleTabIndex","tabs","offset","step","length","_disabled","onKeyDown","event","selectedIndex","key","state","_tabs","_selected","tab","_a","_on","onSelect","_b","onClickSelect","index","onMouseDown","preventDefault","stopPropagation","callbacks","onClick","catchTabPanelHost","el","tabPanelHost","selectNextNotDisabledTab","selected","upOrDown","initialSelected","Array","isArray","devHint","syncSelectedAndTabs","nextValue","nextState","_component","set","handleTabPanels","HTMLDivElement","i","children","div","document","createElement","setAttribute","_label","replace","slot","appendChild","host","HTMLCollection","_c","onCreate","_align","renderButtonGroup","h","KolButtonGroupWcTag","class","role","map","button","KolButtonWcTag","_icons","_hideLabel","_tabIndex","_tooltipAlign","_variant","undefined","_customClass","_ariaControls","_ariaSelected","_id","_role","_value","render","Host","ref","tabPanelsElement","validateAlign","value","validateLabel","required","validateOn","featureHint","label","Log","debug","callback","setState","validateSelected","watchNumber","hooks","beforePatch","validateTabs","watchJsonArrayString","item","uiUxHintMillerscheZahl","componentWillLoad","componentDidRender","removeAttribute","koliBriQuerySelector","focus"],"sources":["src/components/tabs/style.scss?tag=kol-tabs&mode=default&encapsulation=shadow","src/components/tabs/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../host-display-block';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.kol-button-group-wc {\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t}\n\n\t.kol-button-group-wc button {\n\t\tborder-bottom-color: transparent;\n\t\tborder-bottom-style: solid;\n\t\tdisplay: block;\n\t}\n\n\tdiv.grid,\n\tdiv[role='tabpanel'] {\n\t\theight: 100%;\n\t}\n\n\t:host > .tabs-align-right {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\n\t:host > .tabs-align-right .kol-button-group-wc {\n\t\tdisplay: grid;\n\t\torder: 2;\n\t}\n\n\t:host > .tabs-align-left {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: auto 1fr;\n\t}\n\n\t:host > .tabs-align-left .kol-button-group-wc {\n\t\tdisplay: grid;\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-bottom {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: 1fr auto;\n\t}\n\n\t:host > .tabs-align-bottom .kol-button-group-wc {\n\t\torder: 2;\n\t}\n\n\t:host > .tabs-align-bottom .kol-button-group-wc > div {\n\t\tdisplay: flex;\n\t}\n\n\t:host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n\t\tmargin: 0 1em 0 0;\n\t}\n\n\t:host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n\t\tmargin: 0 1em;\n\t}\n\n\t:host > .tabs-align-top {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: auto 1fr;\n\t}\n\n\t:host > .tabs-align-top .kol-button-group-wc {\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-top .kol-button-group-wc > div {\n\t\tdisplay: flex;\n\t}\n\n\t:host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n\t\tmargin: 0 1em 0 0;\n\t}\n\n\t:host > .tabs-align-top > .kol-button-group-wc > div > div {\n\t\tmargin: 0 1em;\n\t}\n\n\t:host > div {\n\t\tdisplay: grid;\n\t}\n\n\t:host > .tabs-align-left .kol-button-group-wc,\n\t:host > .tabs-align-top .kol-button-group-wc {\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-bottom .kol-button-group-wc,\n\t:host > .tabs-align-right .kol-button-group-wc {\n\t\torder: 1;\n\t}\n\n\t:host > div.tabs-align-left .kol-button-group-wc > div,\n\t:host > div.tabs-align-left .kol-button-group-wc > div > div,\n\t:host > div.tabs-align-right .kol-button-group-wc > div,\n\t:host > div.tabs-align-right .kol-button-group-wc > div > div {\n\t\tdisplay: grid;\n\t}\n\n\t:host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n\t:host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n\t\twidth: 100%;\n\t}\n\n\t:host > div.tabs-align-bottom .kol-button-group-wc div,\n\t:host > div.tabs-align-top .kol-button-group-wc div {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n}\n","import type {\n\tAlignPropType,\n\tButtonCallbacksPropType,\n\tKoliBriTabsCallbacks,\n\tLabelPropType,\n\tStencilUnknown,\n\tStringified,\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\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 { KolButtonGroupWcTag, KolButtonWcTag } from '../../core/component-names';\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\n\tprivate nextPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step: number): number => {\n\t\tif (step > 0) {\n\t\t\tif (offset + step < tabs.length) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t} else if (step < 0) {\n\t\t\tif (offset + step >= 0) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step - 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t}\n\t\treturn offset;\n\t};\n\n\tprivate onKeyDown = (event: KeyboardEvent) => {\n\t\tlet selectedIndex: number | null = null;\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowRight':\n\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, 1);\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowLeft':\n\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, -1);\n\t\t\t\tbreak;\n\t\t}\n\t\tif (selectedIndex !== null) {\n\t\t\tconst tab = this.state._tabs[selectedIndex];\n\t\t\tif (tab._on?.onSelect) {\n\t\t\t\ttab._on?.onSelect(event, selectedIndex);\n\t\t\t}\n\t\t\tthis.onSelect(event, selectedIndex);\n\t\t}\n\t};\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tconst tab = this.state._tabs[index];\n\t\tif (tab._on?.onSelect) {\n\t\t\ttab._on?.onSelect(event, index);\n\t\t}\n\t\tthis.onSelect(event, index);\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<KolButtonGroupWcTag class=\"tabs-button-group\" role=\"tablist\" aria-label={this.state._label} onKeyDown={this.onKeyDown}>\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<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</KolButtonGroupWcTag>\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 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] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.`);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn selected;\n\t};\n\n\tprivate syncSelectedAndTabs = (nextValue: unknown, nextState: Map<string, unknown>, _component: Generic.Element.Component, key: string) => {\n\t\tlet selected: number;\n\t\tif (key === '_selected') {\n\t\t\tselected = nextValue as number;\n\t\t} else {\n\t\t\tselected = this.state._selected;\n\t\t}\n\t\tlet tabs: TabButtonProps[];\n\t\tif (key === '_tabs') {\n\t\t\ttabs = nextValue as TabButtonProps[];\n\t\t} else {\n\t\t\ttabs = this.state._tabs;\n\t\t}\n\t\tif (tabs.length > 0) {\n\t\t\tnextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));\n\t\t}\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType) {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\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] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt.`,\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\tif (typeof value.onCreate.callback === 'function') {\n\t\t\t\t\t\tcallbacks.onCreate = value.onCreate.callback;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tLog.debug(\n\t\t\t\t\t\t\t`[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.`,\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tcallbacks.onCreate = value.onCreate;\n\t\t\t\t}\n\t\t\t\tthis.showCreateTab = typeof callbacks.onCreate === 'function';\n\t\t\t}\n\t\t\tif (typeof value.onSelect === 'function') {\n\t\t\t\tcallbacks.onSelect = value.onSelect;\n\t\t\t}\n\t\t\tsetState<KoliBriTabsCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_selected')\n\tpublic validateSelected(value?: number): void {\n\t\twatchNumber(this, '_selected', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_tabs')\n\tpublic validateTabs(value?: Stringified<TabButtonProps[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis,\n\t\t\t'_tabs',\n\t\t\t(item: TabButtonProps) => typeof item === 'object' && item !== null && typeof item._label === 'string' && item._label.length > 0,\n\t\t\tvalue,\n\t\t\tundefined,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t\t},\n\t\t\t},\n\t\t);\n\t\tuiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t}\n\n\tprivate readonly handleTabPanels = () => {\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = this.tabPanelHost.children.length; i < this.state._tabs.length; i++) {\n\t\t\t\tconst div = document.createElement('div');\n\t\t\t\tdiv.setAttribute('aria-labelledby', `${this.state._label.replace(/\\s/g, '-')}-tab-${i}`);\n\t\t\t\tdiv.setAttribute('id', `tabpanel-${i}`);\n\t\t\t\tdiv.setAttribute('role', 'tabpanel');\n\t\t\t\tdiv.setAttribute('hidden', '');\n\t\t\t\tconst slot = document.createElement('slot');\n\t\t\t\tslot.setAttribute('name', `tabpanel-slot-${i}`);\n\t\t\t\tdiv.appendChild(slot);\n\t\t\t\tthis.tabPanelHost.appendChild(div);\n\t\t\t\tif (this.host?.children instanceof HTMLCollection && this.host?.children[i] /* SSR instanceof HTMLElement */) {\n\t\t\t\t\t// div.appendChild(this.host?.children[0]);\n\t\t\t\t\tthis.host?.children[i].setAttribute('slot', `tabpanel-slot-${i}`);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic componentDidRender(): void {\n\t\tthis.handleTabPanels();\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = 0; i < this.tabPanelHost.children.length; i++) {\n\t\t\t\tif (i !== this.state._selected) {\n\t\t\t\t\tthis.tabPanelHost.children[i].setAttribute('hidden', '');\n\t\t\t\t} else {\n\t\t\t\t\tthis.tabPanelHost.children[i].removeAttribute('hidden');\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate onSelect(event: CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, index: number): void {\n\t\tthis._selected = index;\n\t\tif (typeof this._on?.onSelect === 'function') {\n\t\t\tthis._on?.onSelect(event, index);\n\t\t}\n\t\tif (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 onCreate = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onCreate === 'function') {\n\t\t\tthis.state._on?.onCreate(event);\n\t\t}\n\t};\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as e,F as t,H as n,r as i,g as a}from"./index-40be4caf.js";import{n as s}from"./dev.utils-60f0cf1e.js";import{I as l,g as o}from"./controller-e9be8fce.js";import{I as r}from"./InternalUnderlinedAccessKey-761081d1.js";import{b as h,k as d,i as c,w as p,s as u}from"./prop.validators-28badc7d.js";import{v as f}from"./rows-7ae440b2.js";import{l as m}from"./component-names-791b1799.js";import{s as b,a as v}from"./reuse-b66836de.js";import"./dev.utils-1ca991a2.js";import"./events-29e84d75.js";import"./associated.controller-78cca038.js";import"./hide-label-80a2c6d3.js";import"./label-af70fdc5.js";import"./tab-index-4c88df26.js";import"./tooltip-align-0c6ee8c8.js";import"./align-d1a156ea.js";import"./index-4a3076fc.js";const y=["both","horizontal","vertical","none"];class g extends l{constructor(e,t,n){super(e,t,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=e}validateHasCounter(e){h(this.component,"_hasCounter",e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(e){d(this.component,"_maxLength",e,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(e){c(this.component,"_placeholder",e)}validateReadOnly(e){h(this.component,"_readOnly",e)}validateResize(e){p(this.component,"_resize",(e=>"string"==typeof e&&y.includes(e)),new Set(`String {${y.join(", ")}`),e)}validateRequired(e){h(this.component,"_required",e)}validateRows(e){f(this.component,e)}validateValue(e){c(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const 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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",_=w,k=e=>{e.style.overflow="hidden";const t=e.rows,n=e.clientHeight/t;e.rows=1;const a=Math.round(e.scrollHeight/n);return e.rows=t,a},x=class{async getValue(){var e;return null===(e=this.ref)||void 0===e?void 0:e.value}render(){const{ariaDescribedBy:a}=o(this.state),i=b(this.state._label);return e(n,{key:"3fb37506318e70c539392ce92a3b085cbb70d494",class:{"kol-textarea":!0,"has-value":this.state._hasValue}},e(m,{key:"4f62032fa24ba9174666ac5c461a72e1971d4737",class:{textarea:!0,"hide-label":!!this.state._hideLabel,"has-counter":!!this.state._hasCounter},_accessKey:this.state._accessKey,_alert:this.state._alert,_currentLength:this.state._currentLength,_disabled:this.state._disabled,_hideError:this.state._hideError,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_label:this.state._label,_maxLength:this.state._maxLength,_msg:this.state._msg,_readOnly:this.state._readOnly,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.ref)||void 0===e?void 0:e.focus()},role:"presentation"},e("span",{key:"1736aece511a856b04798f5588fde232151c3ccf",slot:"label"},i?e("slot",{name:"expert"}):"string"==typeof this.state._accessKey?e(t,null,e(r,{accessKey:this.state._accessKey,label:this.state._label})," ",e("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):e("span",null,this.state._label)),e("div",{key:"a8170f1cff8b1c6dfebc85f8fb682cf9360256c2",slot:"input"},e("textarea",Object.assign({key:"206e2e545f4e103cf719f5fb68bc837b18d6d514",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":a.length>0?a.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,maxlength:this.state._maxLength,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,rows:this.state._rows,placeholder:this.state._placeholder,spellcheck:"false"},this.controller.onFacade,{onInput:this.onInput,style:{resize:this.state._resize},value:this.state._value})))))}constructor(e){i(this,e),this.catchRef=e=>{this.ref=e,v(this.host,this.ref)},this.onInput=e=>{this.ref instanceof HTMLTextAreaElement&&(u(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=k(this.ref)),this.controller.onFacade.onInput(e))},this._accessKey=void 0,this._adjustHeight=!1,this._alert=!0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=!1,this._resize="vertical",this._required=!1,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${s()}`,_label:"",_resize:"vertical"},this.controller=new g(this,"textarea",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentDidLoad(){setTimeout((()=>{var e;this.ref&&(this._rows=(null===(e=this.state)||void 0===e?void 0:e._rows)&&this.state._rows>k(this.ref)?this.state._rows:k(this.ref))}),0)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};x.style={default:_};export{x as kol_textarea};
+import{h as e,F as t,H as n,r as i,g as a}from"./index-360ad69b.js";import{n as s}from"./dev.utils-698b2d79.js";import{g as o}from"./controller-a8e66789.js";import{I as l}from"./InternalUnderlinedAccessKey-d35d1ac0.js";import{I as r}from"./controller-icon-a494ea46.js";import{b as h,k as d,i as c,w as p,s as u,l as f}from"./prop.validators-f2b9a155.js";import{v as m}from"./rows-d4a3be15.js";import{l as b}from"./component-names-e522484e.js";import{s as v,a as y}from"./reuse-b66836de.js";import"./dev.utils-1ca991a2.js";import"./events-29e84d75.js";import"./associated.controller-ad89c814.js";import"./hide-label-f5e03637.js";import"./label-452f8c01.js";import"./tab-index-bffbd9f3.js";import"./tooltip-align-676fe651.js";import"./align-6595a6d6.js";import"./icons-9784d978.js";import"./index-db4aa6e4.js";const g=["both","horizontal","vertical","none"];class _ extends r{constructor(e,t,n){super(e,t,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=e}validateHasCounter(e){h(this.component,"_hasCounter",e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(e){d(this.component,"_maxLength",e,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(e){c(this.component,"_placeholder",e)}validateReadOnly(e){h(this.component,"_readOnly",e)}validateResize(e){p(this.component,"_resize",(e=>"string"==typeof e&&g.includes(e)),new Set(`String {${g.join(", ")}`),e)}validateRequired(e){h(this.component,"_required",e)}validateRows(e){m(this.component,e)}validateValue(e){c(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const 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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",k=w,x=e=>{e.style.overflow="hidden";const t=e.rows,n=e.clientHeight/t;e.rows=1;const i=Math.round(e.scrollHeight/n);return e.rows=t,i},z=class{async getValue(){var e;return null===(e=this.ref)||void 0===e?void 0:e.value}render(){const{ariaDescribedBy:i}=o(this.state),a=v(this.state._label);return e(n,{key:"7cb15c2d57dc4eebfc0313970df31c77591b3330",class:{"kol-textarea":!0,"has-value":this.state._hasValue}},e(b,{key:"50f876f99fadc4f519b09508ce3448d6ec1220d2",class:{textarea:!0,"hide-label":!!this.state._hideLabel,"has-counter":!!this.state._hasCounter},_accessKey:this.state._accessKey,_alert:this.state._alert,_currentLength:this.state._currentLength,_disabled:this.state._disabled,_hideError:this.state._hideError,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_maxLength:this.state._maxLength,_msg:this.state._msg,_readOnly:this.state._readOnly,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.ref)||void 0===e?void 0:e.focus()},role:"presentation"},e("span",{key:"da39fb9ef3b2a001c98574681acb31b82f015463",slot:"label"},a?e("slot",{name:"expert"}):"string"==typeof this.state._accessKey?e(t,null,e(l,{accessKey:this.state._accessKey,label:this.state._label})," ",e("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):e("span",null,this.state._label)),e("div",{key:"ec1e3ec583281b6ff59e964a57ab405defbf97e1",slot:"input"},e("textarea",Object.assign({key:"ffe328cbb651a1018012eeded0f30995f0f23e34",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,maxlength:this.state._maxLength,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,rows:this.state._rows,placeholder:this.state._placeholder,spellcheck:"false"},this.controller.onFacade,{onInput:this.onInput,style:{resize:this.state._resize},value:this.state._value})))))}constructor(e){i(this,e),this.catchRef=e=>{this.ref=e,y(this.host,this.ref)},this.onInput=e=>{this.ref instanceof HTMLTextAreaElement&&(u(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=x(this.ref)),this.controller.onFacade.onInput(e))},this._accessKey=void 0,this._adjustHeight=!1,this._alert=!0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=!1,this._resize="vertical",this._required=!1,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${s()}`,_label:"",_resize:"vertical"},this.controller=new _(this,"textarea",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){"both"!==e&&"horizontal"!==e||f("In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `none` (default) and `vertical`."),this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentDidLoad(){setTimeout((()=>{var e;!0===this._adjustHeight&&this.ref?this._rows=(null===(e=this.state)||void 0===e?void 0:e._rows)&&this.state._rows>x(this.ref)?this.state._rows:x(this.ref):this._rows||(this._rows=1)}),0)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};z.style={default:k};export{z as kol_textarea};