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

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

@@ -1 +1 @@
-{"version":3,"names":["paginationPositionPropTypeOptions","validatePaginationPosition","component","value","watchValidator","includes","Set","join","defaultValue","defaultStyleCss","KolTableStatefulDefaultStyle0","PAGINATION_OPTIONS","paginationValidator","KolTableStateful","this","catchRef","ref","tableWcRef","sortData","showPagination","pageStartSlice","pageEndSlice","disableSort","handlePagination","onClick","event","page","_a","state","_pagination","_on","setState","Object","assign","_page","onChangePage","onChangePageSize","pageSize","_pageSize","onSelectionChange","stopPropagation","updateSortedData","_data","sortedData","length","sort","a","b","index","data","result","compareFn","direction","_allowMultiSort","_dataFoot","_headers","horizontal","vertical","_label","_max","_sortedData","_paginationPosition","validateAllowMultiSort","validateData","validateTableData","afterPatch","setTimeout","validateDataFoot","validateTableDataFoot","changeCellSort","headerCell","key","findIndex","settings","splice","push","label","validateHeaders","emptyStringByArrayHandler","objectObjectHandler","parseJson","e","hooks","beforePatch","nextValue","applySort","headers","hasSortedCells","forEach","cell","sortDirection","_b","_c","_d","devHint","validateLabel","required","validateMinWidth","watchString","undefined","validateSelection","validateTableSelection","validateOn","validateTableStatefulCallbacks","validatePagination","componentDidLoad","addEventListener","KolEvent","selectionChange","disconnectedCallback","removeEventListener","componentWillLoad","_minWidth","_selection","selectDisplayedData","slice","renderPagination","h","class","translate","placeholders","start","toString","end","total","Array","isArray","KolPaginationTag","_boundaryCount","_customClass","_pageSizeOptions","_siblingCount","_tooltipAlign","getHeaderCellSortState","find","handleSort","flat","getSelectedData","selectedKeys","selection","keyPropertyName","filter","item","multiple","handleSelectionChange","selectedData","Callback","host","dispatchDomEvent","getSelection","render","displayedData","paginationTop","paginationBottom","headerCells","map","row","column","Host","KolTableStatelessWcTag","_headerCells","onSort","_","payload"],"sources":["src/schema/props/pagination-position.ts","src/components/table-stateful/style.scss?tag=kol-table-stateful&mode=default&encapsulation=shadow","src/components/table-stateful/shadow.tsx"],"sourcesContent":["/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils/prop.validators';\n\nconst paginationPositionPropTypeOptions = ['top', 'bottom', 'both'] as const;\nexport type PaginationPositionPropType = (typeof paginationPositionPropTypeOptions)[number];\n\n/**\n * Defines which position should be used for presentation.\n */\nexport type PropPaginationPosition = {\n\tpaginationPosition: PaginationPositionPropType;\n};\n\n/* validator */\nexport const validatePaginationPosition = (component: Generic.Element.Component, value?: PaginationPositionPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_paginationPosition`,\n\t\t(value) => typeof value === 'string' && paginationPositionPropTypeOptions.includes(value),\n\t\tnew Set([`PaginationPositionPropType {${paginationPositionPropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t\t{\n\t\t\tdefaultValue: 'bottom',\n\t\t},\n\t);\n};\n","@import '../@shared/mixins';\n@import '../style';\n@import '../@shared/kol-table-stateless-mixin';\n\n@include kol-table-stateless-styles;\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.kol-table-stateful {\n\t\t&__pagination,\n\t\t&__pagination-wrapper {\n\t\t\tdisplay: grid;\n\t\t\tplace-items: center;\n\t\t\t@media (min-width: 1024px) {\n\t\t\t\tgrid-auto-flow: column;\n\t\t\t}\n\t\t}\n\t}\n\n\t.kol-pagination {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\t@media (min-width: 1024px) {\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t@media (max-width: 1024px) {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n}\n","/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\nimport type {\n\tKoliBriDataCompareFn,\n\tKoliBriPaginationButtonCallbacks,\n\tKoliBriSortDirection,\n\tKoliBriTableDataType,\n\tKoliBriTableHeaderCellWithLogic,\n\tKoliBriTableHeaders,\n\tKoliBriTablePaginationProps,\n\tLabelPropType,\n\tPaginationPositionPropType,\n\tSortEventPayload,\n\tStringified,\n\tTableAPI,\n\tTableDataFootPropType,\n\tTableDataPropType,\n\tTableHeaderCells,\n\tTableSelectionPropType,\n\tTableStatefulCallbacksPropType,\n\tTableStates,\n} from '../../schema';\nimport {\n\tdevHint,\n\temptyStringByArrayHandler,\n\tobjectObjectHandler,\n\tparseJson,\n\tsetState,\n\tvalidateLabel,\n\tvalidatePaginationPosition,\n\tvalidateTableData,\n\tvalidateTableDataFoot,\n\tvalidateTableSelection,\n\tvalidateTableStatefulCallbacks,\n\twatchString,\n\twatchValidator,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { KolPaginationTag, KolTableStatelessWcTag } from '../../core/component-names';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { Callback } from '../../schema/enums';\n\nconst PAGINATION_OPTIONS = [10, 20, 50, 100];\n\nconst paginationValidator = (value: unknown) => value === true || value === '' /* true */ || (typeof value === 'object' && value !== null);\n\ntype SortData = {\n\tlabel: string;\n\tkey: string;\n\tcompareFn: KoliBriDataCompareFn;\n\tdirection: KoliBriSortDirection;\n};\n\n@Component({\n\ttag: 'kol-table-stateful',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTableStateful implements TableAPI {\n\t@Element() private readonly host?: HTMLKolTableStatelessWcElement;\n\tprivate tableWcRef?: HTMLKolTableStatelessWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolTableStatelessWcElement) => {\n\t\tthis.tableWcRef = ref;\n\t};\n\n\tprivate sortData: SortData[] = [];\n\tprivate showPagination = false;\n\tprivate pageStartSlice = 0;\n\tprivate pageEndSlice = 10;\n\tprivate disableSort = false;\n\n\t/**\n\t * 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\t@State() public state: TableStates = {\n\t\t_allowMultiSort: false,\n\t\t_data: [],\n\t\t_dataFoot: [],\n\t\t_headers: {\n\t\t\thorizontal: [],\n\t\t\tvertical: [],\n\t\t},\n\t\t_label: '', // ⚠ required\n\t\t_pagination: {\n\t\t\t_page: 1,\n\t\t\t_pageSize: 10,\n\t\t\t_max: 0,\n\t\t},\n\t\t_sortedData: [],\n\t\t_paginationPosition: 'bottom',\n\t};\n\n\t@Watch('_allowMultiSort')\n\tpublic validateAllowMultiSort(value?: boolean): void {\n\t\twatchValidator(this, '_allowMultiSort', () => true, new Set(['boolean']), value, {\n\t\t\tdefaultValue: false,\n\t\t});\n\t}\n\n\t@Watch('_data')\n\tpublic validateData(value?: TableDataPropType): void {\n\t\tvalidateTableData(this, value, {\n\t\t\tafterPatch: () => {\n\t\t\t\t// TODO: kein guter Hack (endless loop)\n\t\t\t\tsetTimeout(this.updateSortedData);\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_dataFoot')\n\tpublic validateDataFoot(value?: TableDataFootPropType): void {\n\t\tvalidateTableDataFoot(this, value, {\n\t\t\tafterPatch: () => {\n\t\t\t\tsetTimeout(this.updateSortedData);\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_paginationPosition')\n\tpublic validatePaginationPosition(value?: PaginationPositionPropType): void {\n\t\tvalidatePaginationPosition(this, value);\n\t}\n\n\t/**\n\t * Handles sorting logic for table columns.\n\t * If multi-sort is enabled (`_allowMultiSort`), multiple columns can be sorted at once.\n\t * Otherwise, sorting is cleared when switching between columns.\n\t */\n\tprivate changeCellSort(headerCell: KoliBriTableHeaderCellWithLogic) {\n\t\tif (typeof headerCell.compareFn === 'function') {\n\t\t\tif (!this.state._allowMultiSort && headerCell.key != this.sortData[0]?.key) {\n\t\t\t\t// clear when another column is sorted and multi sort is not allowed\n\t\t\t\tthis.sortData = [];\n\t\t\t}\n\n\t\t\tconst index = this.sortData.findIndex((value) => value.key === headerCell.key);\n\t\t\tif (index >= 0) {\n\t\t\t\tconst settings = this.sortData[index];\n\t\t\t\tswitch (settings.direction) {\n\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\tsettings.direction = 'DESC';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\tthis.sortData.splice(index, 1);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tsettings.direction = 'ASC';\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t} else if (headerCell.key) {\n\t\t\t\tthis.sortData.push({\n\t\t\t\t\tlabel: headerCell.label,\n\t\t\t\t\tkey: headerCell.key,\n\t\t\t\t\tcompareFn: headerCell.compareFn,\n\t\t\t\t\tdirection: 'ASC',\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tthis.updateSortedData();\n\t\t}\n\t}\n\n\t@Watch('_headers')\n\tpublic validateHeaders(value?: Stringified<KoliBriTableHeaders>): void {\n\t\t/**\n\t\t * - es darf maximal ein Header als primary markiert werden (last win)\n\t\t * - der primary-Header entscheidet implizit über _order und _orientation\n\t\t *   - primary-Headers müssen das key-Property setzen\n\t\t *   - nicht primary-Headers müssen das key-Property nicht setzen (wird ignoriert)\n\t\t *   - _order: wird durch den primary-Header geregelt\n\t\t *   - _orientation: wird durch den primary-Header geregelt\n\t\t * - sobald ein Header sortierbar ist, darf es nur noch entweder horizontale\n\t\t *   oder vertikale Header geben, aber nicht mehr beides\n\t\t */\n\t\temptyStringByArrayHandler(value, () => {\n\t\t\tobjectObjectHandler(value, () => {\n\t\t\t\ttry {\n\t\t\t\t\tvalue = parseJson<KoliBriTableHeaders>(value);\n\t\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t\t} catch (e) {\n\t\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t\t}\n\t\t\t\twatchValidator(this, '_headers', (value): boolean => typeof value === 'object' && value !== null, new Set(['KoliBriTableHeaders']), value, {\n\t\t\t\t\thooks: {\n\t\t\t\t\t\tbeforePatch: (nextValue: unknown) => {\n\t\t\t\t\t\t\tconst applySort = (headers: KoliBriTableHeaderCellWithLogic[]) => {\n\t\t\t\t\t\t\t\tlet hasSortedCells = false;\n\t\t\t\t\t\t\t\theaders.forEach((cell) => {\n\t\t\t\t\t\t\t\t\tconst key = cell.key;\n\t\t\t\t\t\t\t\t\tif (!key) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tconst sortDirection = cell.sortDirection;\n\t\t\t\t\t\t\t\t\tif (sortDirection === 'ASC' || sortDirection === 'DESC') {\n\t\t\t\t\t\t\t\t\t\tif (typeof cell.compareFn === 'function') {\n\t\t\t\t\t\t\t\t\t\t\tif (this.state._allowMultiSort || this.sortData.length === 0) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.sortData.push({ label: cell.label, key, compareFn: cell.compareFn, direction: sortDirection });\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\thasSortedCells = true;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\tif (hasSortedCells) {\n\t\t\t\t\t\t\t\t\tsetTimeout(() => this.updateSortedData());\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\tconst headers: KoliBriTableHeaders = nextValue as KoliBriTableHeaders;\n\t\t\t\t\t\t\theaders.horizontal?.forEach(applySort);\n\t\t\t\t\t\t\theaders.vertical?.forEach(applySort);\n\n\t\t\t\t\t\t\tif (headers.horizontal && headers.vertical && headers.horizontal?.length > 0 && headers.vertical?.length > 0) {\n\t\t\t\t\t\t\t\tthis.disableSort = true;\n\t\t\t\t\t\t\t\tdevHint(\n\t\t\t\t\t\t\t\t\t`Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)`,\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\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('_selection')\n\tpublic validateSelection(value?: TableSelectionPropType): void {\n\t\tvalidateTableSelection(this, value);\n\t}\n\t@Watch('_on')\n\tpublic validateOn(value?: TableStatefulCallbacksPropType): void {\n\t\tvalidateTableStatefulCallbacks(this, value);\n\t}\n\n\tprivate readonly handlePagination: KoliBriPaginationButtonCallbacks = {\n\t\tonClick: (event: Event, page: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onClick === 'function') {\n\t\t\t\tthis.state._pagination._on.onClick(event, page);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_page: page,\n\t\t\t});\n\t\t},\n\t\tonChangePage: (event: Event, page: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onChangePage === 'function') {\n\t\t\t\tthis.state._pagination._on.onChangePage(event, page);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_page: page,\n\t\t\t});\n\t\t},\n\t\tonChangePageSize: (event: Event, pageSize: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onChangePageSize === 'function') {\n\t\t\t\tthis.state._pagination._on.onChangePageSize(event, pageSize);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_pageSize: pageSize,\n\t\t\t});\n\t\t\tsetState(this, '_pageSize', pageSize);\n\t\t},\n\t};\n\n\t@Watch('_pagination')\n\tpublic validatePagination(value?: boolean | Stringified<KoliBriTablePaginationProps>): void {\n\t\ttry {\n\t\t\tvalue = parseJson<boolean | KoliBriTablePaginationProps>(value);\n\t\t\t// eslint-disable-next-line no-empty\n\t\t} catch (e) {\n\t\t\t// value behält den ursprünglichen Wert\n\t\t}\n\n\t\tthis.showPagination = paginationValidator(value);\n\n\t\twatchValidator<boolean | Stringified<KoliBriTablePaginationProps>>(\n\t\t\tthis,\n\t\t\t'_pagination',\n\t\t\tpaginationValidator,\n\t\t\tnew Set(['boolean', 'KoliBriTablePagination']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: {\n\t\t\t\t\t_page: 1,\n\t\t\t\t\t_pageSize: 10,\n\t\t\t\t\t_max: 0,\n\t\t\t\t},\n\t\t\t},\n\t\t);\n\t}\n\n\tprivate onSelectionChange = (event: Event): void => {\n\t\t/* Stop propagation for selectionChange event from table-stateless component because table-stateful emits its own selectionChange event. */\n\t\tevent.stopPropagation();\n\t};\n\n\tpublic componentDidLoad(): void {\n\t\tthis.tableWcRef?.addEventListener(KolEvent.selectionChange, this.onSelectionChange);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.tableWcRef?.removeEventListener(KolEvent.selectionChange, this.onSelectionChange);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAllowMultiSort(this._allowMultiSort);\n\t\tthis.validateData(this._data);\n\t\tthis.validateDataFoot(this._dataFoot);\n\t\tthis.validateHeaders(this._headers);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMinWidth(this._minWidth);\n\t\tthis.validatePagination(this._pagination);\n\t\tthis.validatePaginationPosition(this._paginationPosition);\n\t\tthis.validateSelection(this._selection);\n\t\tthis.validateOn(this._on);\n\t}\n\n\tprivate selectDisplayedData(data: KoliBriTableDataType[], pageSize: number, page: number): KoliBriTableDataType[] {\n\t\tif (typeof pageSize === 'number' && pageSize > 0 && typeof page === 'number' && page > 0) {\n\t\t\tthis.pageStartSlice = pageSize * (page - 1);\n\t\t\tthis.pageEndSlice = pageSize * page > data.length ? data.length : pageSize * page;\n\t\t\treturn data.slice(this.pageStartSlice, this.pageEndSlice);\n\t\t} else {\n\t\t\tthis.pageStartSlice = 0;\n\t\t\tthis.pageEndSlice = data.length;\n\t\t\treturn data;\n\t\t}\n\t}\n\n\tprivate updateSortedData = () => {\n\t\tif (this.disableSort) {\n\t\t\tsetState(this, '_sortedData', this.state._data);\n\t\t\treturn;\n\t\t}\n\n\t\tlet sortedData: KoliBriTableDataType[] = this.state._data;\n\t\tif (this.sortData.length > 0) {\n\t\t\tsortedData = this.state._data.sort((a: KoliBriTableDataType, b: KoliBriTableDataType) => {\n\t\t\t\tfor (let index = 0; index < this.sortData.length; index++) {\n\t\t\t\t\tconst data = this.sortData[index];\n\t\t\t\t\tconst result = data.compareFn(a, b);\n\t\t\t\t\tif (result !== 0) {\n\t\t\t\t\t\treturn data.direction === 'ASC' ? result : -result;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn 0;\n\t\t\t});\n\t\t}\n\t\tsetState(this, '_sortedData', sortedData);\n\t};\n\n\t/**\n\t * Renders the pagination controls for the table, showing the current visible data range\n\t * and providing navigation between different pages.\n\t *\n\t * @returns {JSX.Element} The rendered pagination controls including page range and navigation.\n\t */\n\tprivate renderPagination(): JSX.Element {\n\t\treturn (\n\t\t\t<div class={`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`}>\n\t\t\t\t<span>\n\t\t\t\t\t{translate('kol-table-visible-range', {\n\t\t\t\t\t\tplaceholders: {\n\t\t\t\t\t\t\tstart: this.pageEndSlice > 0 ? (this.pageStartSlice + 1).toString() : '0',\n\t\t\t\t\t\t\tend: this.pageEndSlice.toString(),\n\t\t\t\t\t\t\ttotal:\n\t\t\t\t\t\t\t\tthis.state._pagination && this.state._pagination._max > 0\n\t\t\t\t\t\t\t\t\t? this.state._pagination._max.toString()\n\t\t\t\t\t\t\t\t\t: Array.isArray(this.state._data)\n\t\t\t\t\t\t\t\t\t\t? this.state._data.length.toString()\n\t\t\t\t\t\t\t\t\t\t: '0',\n\t\t\t\t\t\t},\n\t\t\t\t\t})}\n\t\t\t\t</span>\n\t\t\t\t<div class=\"kol-table-stateful__pagination-wrapper\">\n\t\t\t\t\t<KolPaginationTag\n\t\t\t\t\t\tclass=\"test\"\n\t\t\t\t\t\t_boundaryCount={this.state._pagination._boundaryCount}\n\t\t\t\t\t\t_customClass={this.state._pagination._customClass}\n\t\t\t\t\t\t_on={this.handlePagination}\n\t\t\t\t\t\t_page={this.state._pagination._page}\n\t\t\t\t\t\t_pageSize={this.state._pagination._pageSize}\n\t\t\t\t\t\t_pageSizeOptions={this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS}\n\t\t\t\t\t\t_siblingCount={this.state._pagination._siblingCount}\n\t\t\t\t\t\t_tooltipAlign=\"bottom\"\n\t\t\t\t\t\t_max={this.state._pagination._max || this.state._pagination._max || this.state._data.length}\n\t\t\t\t\t\t_label={translate('kol-table-pagination-label', { placeholders: { label: this.state._label } })}\n\t\t\t\t\t></KolPaginationTag>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate getHeaderCellSortState(headerCell: KoliBriTableHeaderCellWithLogic): KoliBriSortDirection | undefined {\n\t\tif (!this.disableSort && typeof headerCell.compareFn === 'function') {\n\t\t\tif (headerCell.key) {\n\t\t\t\tconst data = this.sortData.find((value) => value.key === headerCell.key);\n\t\t\t\tif (data?.direction) {\n\t\t\t\t\treturn data.direction;\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn 'NOS';\n\t\t}\n\t}\n\n\tprivate handleSort({ key }: SortEventPayload) {\n\t\tconst headerCell = [...(this.state._headers.horizontal || []).flat(), ...(this.state._headers.vertical || []).flat()].find((cell) => cell.key === key);\n\t\tif (headerCell) {\n\t\t\tthis.changeCellSort(headerCell);\n\t\t}\n\t}\n\n\tprivate getSelectedData(selectedKeys: string[] | string): null | KoliBriTableDataType | KoliBriTableDataType[] {\n\t\tconst selection = this.state._selection;\n\t\tif (selection) {\n\t\t\tconst keyPropertyName = selection.keyPropertyName ?? 'id';\n\t\t\tconst data = this.state._sortedData.filter((item) => selectedKeys.includes(item[keyPropertyName] as string));\n\t\t\tif (selection?.multiple === false) {\n\t\t\t\treturn data[0];\n\t\t\t}\n\n\t\t\tif (keyPropertyName) return data;\n\t\t}\n\t\treturn null;\n\t}\n\tprivate handleSelectionChange(event: Event, value: string[] | string): void {\n\t\tconst selection = this.state._selection;\n\t\tif (selection)\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_selection: {\n\t\t\t\t\t...selection,\n\t\t\t\t\tselectedKeys: typeof value === 'object' ? value : [value],\n\t\t\t\t},\n\t\t\t};\n\t\tconst selectedData = this.getSelectedData(value);\n\n\t\tif (typeof this.state._on?.[Callback.onSelectionChange] === 'function') {\n\t\t\tthis.state._on[Callback.onSelectionChange](event, selectedData);\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.selectionChange, selectedData);\n\t\t}\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getSelection(): Promise<KoliBriTableDataType[] | KoliBriTableDataType | null> {\n\t\tconst selectedKeys: string[] = this.state._selection?.selectedKeys || [];\n\t\treturn this.getSelectedData(selectedKeys);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst displayedData: KoliBriTableDataType[] = this.selectDisplayedData(\n\t\t\tthis.state._sortedData,\n\t\t\tthis.showPagination ? (this.state._pagination?._pageSize ?? 10) : this.state._sortedData.length,\n\t\t\tthis.state._pagination._page || 1,\n\t\t);\n\t\tconst paginationTop = this._paginationPosition === 'top' || this._paginationPosition === 'both' ? this.renderPagination() : null;\n\t\tconst paginationBottom = this._paginationPosition === 'bottom' || this._paginationPosition === 'both' ? this.renderPagination() : null;\n\n\t\tconst headerCells: TableHeaderCells = {\n\t\t\thorizontal: this.state._headers.horizontal?.map((row) => row.map((cell) => ({ ...cell, sortDirection: this.getHeaderCellSortState(cell) }))),\n\t\t\tvertical: this.state._headers.vertical?.map((column) => column.map((cell) => ({ ...cell, sortDirection: this.getHeaderCellSortState(cell) }))),\n\t\t};\n\t\treturn (\n\t\t\t<Host class=\"kol-table-stateful\">\n\t\t\t\t{this.pageEndSlice > 0 && this.showPagination && paginationTop}\n\t\t\t\t<KolTableStatelessWcTag\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_data={displayedData}\n\t\t\t\t\t_headerCells={headerCells}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_dataFoot={this.state._dataFoot}\n\t\t\t\t\t_minWidth={this.state._minWidth}\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonSort: (_: MouseEvent, payload: SortEventPayload) => {\n\t\t\t\t\t\t\tthis.handleSort(payload);\n\t\t\t\t\t\t},\n\t\t\t\t\t\tonSelectionChange: (event: Event, value: string[] | string) => {\n\t\t\t\t\t\t\tthis.handleSelectionChange(event, value);\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\t_selection={this.state._selection}\n\t\t\t\t/>\n\t\t\t\t{this.pageEndSlice > 0 && this.showPagination && paginationBottom}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["paginationPositionPropTypeOptions","validatePaginationPosition","component","value","watchValidator","includes","Set","join","defaultValue","defaultStyleCss","KolTableStatefulDefaultStyle0","PAGINATION_OPTIONS","paginationValidator","KolTableStateful","this","catchRef","ref","tableWcRef","sortData","showPagination","pageStartSlice","pageEndSlice","disableSort","handlePagination","onClick","event","page","_a","state","_pagination","_on","setState","Object","assign","_page","onChangePage","onChangePageSize","pageSize","_pageSize","onSelectionChange","stopPropagation","updateSortedData","_data","sortedData","length","sort","a","b","index","data","result","compareFn","direction","_allowMultiSort","_dataFoot","_headers","horizontal","vertical","_label","_max","_sortedData","_paginationPosition","validateAllowMultiSort","validateData","validateTableData","afterPatch","setTimeout","validateDataFoot","validateTableDataFoot","changeCellSort","headerCell","key","findIndex","settings","splice","push","label","validateHeaders","emptyStringByArrayHandler","objectObjectHandler","parseJson","e","hooks","beforePatch","nextValue","applySort","headers","hasSortedCells","forEach","cell","sortDirection","_b","_c","_d","devHint","validateLabel","required","validateMinWidth","watchString","undefined","validateSelection","validateTableSelection","validateOn","validateTableStatefulCallbacks","validatePagination","componentDidLoad","addEventListener","KolEvent","selectionChange","disconnectedCallback","removeEventListener","componentWillLoad","_minWidth","_selection","selectDisplayedData","slice","renderPagination","h","class","translate","placeholders","start","toString","end","total","Array","isArray","KolPaginationTag","_boundaryCount","_customClass","_pageSizeOptions","_siblingCount","_tooltipAlign","getHeaderCellSortState","find","handleSort","flat","getSelectedData","selectedKeys","selection","keyPropertyName","filter","item","multiple","handleSelectionChange","selectedData","Callback","host","dispatchDomEvent","getSelection","render","displayedData","paginationTop","paginationBottom","headerCells","map","row","column","Host","KolTableStatelessWcTag","_headerCells","onSort","_","payload"],"sources":["src/schema/props/pagination-position.ts","src/components/table-stateful/style.scss?tag=kol-table-stateful&mode=default&encapsulation=shadow","src/components/table-stateful/shadow.tsx"],"sourcesContent":["/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils/prop.validators';\n\nconst paginationPositionPropTypeOptions = ['top', 'bottom', 'both'] as const;\nexport type PaginationPositionPropType = (typeof paginationPositionPropTypeOptions)[number];\n\n/**\n * Defines which position should be used for presentation.\n */\nexport type PropPaginationPosition = {\n\tpaginationPosition: PaginationPositionPropType;\n};\n\n/* validator */\nexport const validatePaginationPosition = (component: Generic.Element.Component, value?: PaginationPositionPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_paginationPosition`,\n\t\t(value) => typeof value === 'string' && paginationPositionPropTypeOptions.includes(value),\n\t\tnew Set([`PaginationPositionPropType {${paginationPositionPropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t\t{\n\t\t\tdefaultValue: 'bottom',\n\t\t},\n\t);\n};\n","@import '../@shared/mixins';\n@import '../../styles/global';\n@import '../@shared/kol-table-stateless-mixin';\n\n@include kol-table-stateless-styles;\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.kol-table-stateful {\n\t\t&__pagination,\n\t\t&__pagination-wrapper {\n\t\t\tdisplay: grid;\n\t\t\tplace-items: center;\n\t\t\t@media (min-width: 1024px) {\n\t\t\t\tgrid-auto-flow: column;\n\t\t\t}\n\t\t}\n\t}\n\n\t.kol-pagination {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\t@media (min-width: 1024px) {\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t@media (max-width: 1024px) {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n}\n","/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\nimport type {\n\tKoliBriDataCompareFn,\n\tKoliBriPaginationButtonCallbacks,\n\tKoliBriSortDirection,\n\tKoliBriTableDataType,\n\tKoliBriTableHeaderCellWithLogic,\n\tKoliBriTableHeaders,\n\tKoliBriTablePaginationProps,\n\tLabelPropType,\n\tPaginationPositionPropType,\n\tSortEventPayload,\n\tStringified,\n\tTableAPI,\n\tTableDataFootPropType,\n\tTableDataPropType,\n\tTableHeaderCells,\n\tTableSelectionPropType,\n\tTableStatefulCallbacksPropType,\n\tTableStates,\n} from '../../schema';\nimport {\n\tdevHint,\n\temptyStringByArrayHandler,\n\tobjectObjectHandler,\n\tparseJson,\n\tsetState,\n\tvalidateLabel,\n\tvalidatePaginationPosition,\n\tvalidateTableData,\n\tvalidateTableDataFoot,\n\tvalidateTableSelection,\n\tvalidateTableStatefulCallbacks,\n\twatchString,\n\twatchValidator,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { KolPaginationTag, KolTableStatelessWcTag } from '../../core/component-names';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { Callback } from '../../schema/enums';\n\nconst PAGINATION_OPTIONS = [10, 20, 50, 100];\n\nconst paginationValidator = (value: unknown) => value === true || value === '' /* true */ || (typeof value === 'object' && value !== null);\n\ntype SortData = {\n\tlabel: string;\n\tkey: string;\n\tcompareFn: KoliBriDataCompareFn;\n\tdirection: KoliBriSortDirection;\n};\n\n@Component({\n\ttag: 'kol-table-stateful',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTableStateful implements TableAPI {\n\t@Element() private readonly host?: HTMLKolTableStatelessWcElement;\n\tprivate tableWcRef?: HTMLKolTableStatelessWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolTableStatelessWcElement) => {\n\t\tthis.tableWcRef = ref;\n\t};\n\n\tprivate sortData: SortData[] = [];\n\tprivate showPagination = false;\n\tprivate pageStartSlice = 0;\n\tprivate pageEndSlice = 10;\n\tprivate disableSort = false;\n\n\t/**\n\t * 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\t@State() public state: TableStates = {\n\t\t_allowMultiSort: false,\n\t\t_data: [],\n\t\t_dataFoot: [],\n\t\t_headers: {\n\t\t\thorizontal: [],\n\t\t\tvertical: [],\n\t\t},\n\t\t_label: '', // ⚠ required\n\t\t_pagination: {\n\t\t\t_page: 1,\n\t\t\t_pageSize: 10,\n\t\t\t_max: 0,\n\t\t},\n\t\t_sortedData: [],\n\t\t_paginationPosition: 'bottom',\n\t};\n\n\t@Watch('_allowMultiSort')\n\tpublic validateAllowMultiSort(value?: boolean): void {\n\t\twatchValidator(this, '_allowMultiSort', () => true, new Set(['boolean']), value, {\n\t\t\tdefaultValue: false,\n\t\t});\n\t}\n\n\t@Watch('_data')\n\tpublic validateData(value?: TableDataPropType): void {\n\t\tvalidateTableData(this, value, {\n\t\t\tafterPatch: () => {\n\t\t\t\t// TODO: kein guter Hack (endless loop)\n\t\t\t\tsetTimeout(this.updateSortedData);\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_dataFoot')\n\tpublic validateDataFoot(value?: TableDataFootPropType): void {\n\t\tvalidateTableDataFoot(this, value, {\n\t\t\tafterPatch: () => {\n\t\t\t\tsetTimeout(this.updateSortedData);\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_paginationPosition')\n\tpublic validatePaginationPosition(value?: PaginationPositionPropType): void {\n\t\tvalidatePaginationPosition(this, value);\n\t}\n\n\t/**\n\t * Handles sorting logic for table columns.\n\t * If multi-sort is enabled (`_allowMultiSort`), multiple columns can be sorted at once.\n\t * Otherwise, sorting is cleared when switching between columns.\n\t */\n\tprivate changeCellSort(headerCell: KoliBriTableHeaderCellWithLogic) {\n\t\tif (typeof headerCell.compareFn === 'function') {\n\t\t\tif (!this.state._allowMultiSort && headerCell.key != this.sortData[0]?.key) {\n\t\t\t\t// clear when another column is sorted and multi sort is not allowed\n\t\t\t\tthis.sortData = [];\n\t\t\t}\n\n\t\t\tconst index = this.sortData.findIndex((value) => value.key === headerCell.key);\n\t\t\tif (index >= 0) {\n\t\t\t\tconst settings = this.sortData[index];\n\t\t\t\tswitch (settings.direction) {\n\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\tsettings.direction = 'DESC';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\tthis.sortData.splice(index, 1);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tsettings.direction = 'ASC';\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t} else if (headerCell.key) {\n\t\t\t\tthis.sortData.push({\n\t\t\t\t\tlabel: headerCell.label,\n\t\t\t\t\tkey: headerCell.key,\n\t\t\t\t\tcompareFn: headerCell.compareFn,\n\t\t\t\t\tdirection: 'ASC',\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tthis.updateSortedData();\n\t\t}\n\t}\n\n\t@Watch('_headers')\n\tpublic validateHeaders(value?: Stringified<KoliBriTableHeaders>): void {\n\t\t/**\n\t\t * - es darf maximal ein Header als primary markiert werden (last win)\n\t\t * - der primary-Header entscheidet implizit über _order und _orientation\n\t\t *   - primary-Headers müssen das key-Property setzen\n\t\t *   - nicht primary-Headers müssen das key-Property nicht setzen (wird ignoriert)\n\t\t *   - _order: wird durch den primary-Header geregelt\n\t\t *   - _orientation: wird durch den primary-Header geregelt\n\t\t * - sobald ein Header sortierbar ist, darf es nur noch entweder horizontale\n\t\t *   oder vertikale Header geben, aber nicht mehr beides\n\t\t */\n\t\temptyStringByArrayHandler(value, () => {\n\t\t\tobjectObjectHandler(value, () => {\n\t\t\t\ttry {\n\t\t\t\t\tvalue = parseJson<KoliBriTableHeaders>(value);\n\t\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t\t} catch (e) {\n\t\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t\t}\n\t\t\t\twatchValidator(this, '_headers', (value): boolean => typeof value === 'object' && value !== null, new Set(['KoliBriTableHeaders']), value, {\n\t\t\t\t\thooks: {\n\t\t\t\t\t\tbeforePatch: (nextValue: unknown) => {\n\t\t\t\t\t\t\tconst applySort = (headers: KoliBriTableHeaderCellWithLogic[]) => {\n\t\t\t\t\t\t\t\tlet hasSortedCells = false;\n\t\t\t\t\t\t\t\theaders.forEach((cell) => {\n\t\t\t\t\t\t\t\t\tconst key = cell.key;\n\t\t\t\t\t\t\t\t\tif (!key) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tconst sortDirection = cell.sortDirection;\n\t\t\t\t\t\t\t\t\tif (sortDirection === 'ASC' || sortDirection === 'DESC') {\n\t\t\t\t\t\t\t\t\t\tif (typeof cell.compareFn === 'function') {\n\t\t\t\t\t\t\t\t\t\t\tif (this.state._allowMultiSort || this.sortData.length === 0) {\n\t\t\t\t\t\t\t\t\t\t\t\tthis.sortData.push({ label: cell.label, key, compareFn: cell.compareFn, direction: sortDirection });\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\thasSortedCells = true;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\tif (hasSortedCells) {\n\t\t\t\t\t\t\t\t\tsetTimeout(() => this.updateSortedData());\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\tconst headers: KoliBriTableHeaders = nextValue as KoliBriTableHeaders;\n\t\t\t\t\t\t\theaders.horizontal?.forEach(applySort);\n\t\t\t\t\t\t\theaders.vertical?.forEach(applySort);\n\n\t\t\t\t\t\t\tif (headers.horizontal && headers.vertical && headers.horizontal?.length > 0 && headers.vertical?.length > 0) {\n\t\t\t\t\t\t\t\tthis.disableSort = true;\n\t\t\t\t\t\t\t\tdevHint(\n\t\t\t\t\t\t\t\t\t`Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)`,\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\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('_selection')\n\tpublic validateSelection(value?: TableSelectionPropType): void {\n\t\tvalidateTableSelection(this, value);\n\t}\n\t@Watch('_on')\n\tpublic validateOn(value?: TableStatefulCallbacksPropType): void {\n\t\tvalidateTableStatefulCallbacks(this, value);\n\t}\n\n\tprivate readonly handlePagination: KoliBriPaginationButtonCallbacks = {\n\t\tonClick: (event: Event, page: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onClick === 'function') {\n\t\t\t\tthis.state._pagination._on.onClick(event, page);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_page: page,\n\t\t\t});\n\t\t},\n\t\tonChangePage: (event: Event, page: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onChangePage === 'function') {\n\t\t\t\tthis.state._pagination._on.onChangePage(event, page);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_page: page,\n\t\t\t});\n\t\t},\n\t\tonChangePageSize: (event: Event, pageSize: number) => {\n\t\t\tif (typeof this.state._pagination._on?.onChangePageSize === 'function') {\n\t\t\t\tthis.state._pagination._on.onChangePageSize(event, pageSize);\n\t\t\t}\n\t\t\tsetState(this, '_pagination', {\n\t\t\t\t...this.state._pagination,\n\t\t\t\t_pageSize: pageSize,\n\t\t\t});\n\t\t\tsetState(this, '_pageSize', pageSize);\n\t\t},\n\t};\n\n\t@Watch('_pagination')\n\tpublic validatePagination(value?: boolean | Stringified<KoliBriTablePaginationProps>): void {\n\t\ttry {\n\t\t\tvalue = parseJson<boolean | KoliBriTablePaginationProps>(value);\n\t\t\t// eslint-disable-next-line no-empty\n\t\t} catch (e) {\n\t\t\t// value behält den ursprünglichen Wert\n\t\t}\n\n\t\tthis.showPagination = paginationValidator(value);\n\n\t\twatchValidator<boolean | Stringified<KoliBriTablePaginationProps>>(\n\t\t\tthis,\n\t\t\t'_pagination',\n\t\t\tpaginationValidator,\n\t\t\tnew Set(['boolean', 'KoliBriTablePagination']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: {\n\t\t\t\t\t_page: 1,\n\t\t\t\t\t_pageSize: 10,\n\t\t\t\t\t_max: 0,\n\t\t\t\t},\n\t\t\t},\n\t\t);\n\t}\n\n\tprivate onSelectionChange = (event: Event): void => {\n\t\t/* Stop propagation for selectionChange event from table-stateless component because table-stateful emits its own selectionChange event. */\n\t\tevent.stopPropagation();\n\t};\n\n\tpublic componentDidLoad(): void {\n\t\tthis.tableWcRef?.addEventListener(KolEvent.selectionChange, this.onSelectionChange);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.tableWcRef?.removeEventListener(KolEvent.selectionChange, this.onSelectionChange);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAllowMultiSort(this._allowMultiSort);\n\t\tthis.validateData(this._data);\n\t\tthis.validateDataFoot(this._dataFoot);\n\t\tthis.validateHeaders(this._headers);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMinWidth(this._minWidth);\n\t\tthis.validatePagination(this._pagination);\n\t\tthis.validatePaginationPosition(this._paginationPosition);\n\t\tthis.validateSelection(this._selection);\n\t\tthis.validateOn(this._on);\n\t}\n\n\tprivate selectDisplayedData(data: KoliBriTableDataType[], pageSize: number, page: number): KoliBriTableDataType[] {\n\t\tif (typeof pageSize === 'number' && pageSize > 0 && typeof page === 'number' && page > 0) {\n\t\t\tthis.pageStartSlice = pageSize * (page - 1);\n\t\t\tthis.pageEndSlice = pageSize * page > data.length ? data.length : pageSize * page;\n\t\t\treturn data.slice(this.pageStartSlice, this.pageEndSlice);\n\t\t} else {\n\t\t\tthis.pageStartSlice = 0;\n\t\t\tthis.pageEndSlice = data.length;\n\t\t\treturn data;\n\t\t}\n\t}\n\n\tprivate updateSortedData = () => {\n\t\tif (this.disableSort) {\n\t\t\tsetState(this, '_sortedData', this.state._data);\n\t\t\treturn;\n\t\t}\n\n\t\tlet sortedData: KoliBriTableDataType[] = this.state._data;\n\t\tif (this.sortData.length > 0) {\n\t\t\tsortedData = this.state._data.sort((a: KoliBriTableDataType, b: KoliBriTableDataType) => {\n\t\t\t\tfor (let index = 0; index < this.sortData.length; index++) {\n\t\t\t\t\tconst data = this.sortData[index];\n\t\t\t\t\tconst result = data.compareFn(a, b);\n\t\t\t\t\tif (result !== 0) {\n\t\t\t\t\t\treturn data.direction === 'ASC' ? result : -result;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn 0;\n\t\t\t});\n\t\t}\n\t\tsetState(this, '_sortedData', sortedData);\n\t};\n\n\t/**\n\t * Renders the pagination controls for the table, showing the current visible data range\n\t * and providing navigation between different pages.\n\t *\n\t * @returns {JSX.Element} The rendered pagination controls including page range and navigation.\n\t */\n\tprivate renderPagination(): JSX.Element {\n\t\treturn (\n\t\t\t<div class={`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`}>\n\t\t\t\t<span>\n\t\t\t\t\t{translate('kol-table-visible-range', {\n\t\t\t\t\t\tplaceholders: {\n\t\t\t\t\t\t\tstart: this.pageEndSlice > 0 ? (this.pageStartSlice + 1).toString() : '0',\n\t\t\t\t\t\t\tend: this.pageEndSlice.toString(),\n\t\t\t\t\t\t\ttotal:\n\t\t\t\t\t\t\t\tthis.state._pagination && this.state._pagination._max > 0\n\t\t\t\t\t\t\t\t\t? this.state._pagination._max.toString()\n\t\t\t\t\t\t\t\t\t: Array.isArray(this.state._data)\n\t\t\t\t\t\t\t\t\t\t? this.state._data.length.toString()\n\t\t\t\t\t\t\t\t\t\t: '0',\n\t\t\t\t\t\t},\n\t\t\t\t\t})}\n\t\t\t\t</span>\n\t\t\t\t<div class=\"kol-table-stateful__pagination-wrapper\">\n\t\t\t\t\t<KolPaginationTag\n\t\t\t\t\t\tclass=\"test\"\n\t\t\t\t\t\t_boundaryCount={this.state._pagination._boundaryCount}\n\t\t\t\t\t\t_customClass={this.state._pagination._customClass}\n\t\t\t\t\t\t_on={this.handlePagination}\n\t\t\t\t\t\t_page={this.state._pagination._page}\n\t\t\t\t\t\t_pageSize={this.state._pagination._pageSize}\n\t\t\t\t\t\t_pageSizeOptions={this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS}\n\t\t\t\t\t\t_siblingCount={this.state._pagination._siblingCount}\n\t\t\t\t\t\t_tooltipAlign=\"bottom\"\n\t\t\t\t\t\t_max={this.state._pagination._max || this.state._pagination._max || this.state._data.length}\n\t\t\t\t\t\t_label={translate('kol-table-pagination-label', { placeholders: { label: this.state._label } })}\n\t\t\t\t\t></KolPaginationTag>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate getHeaderCellSortState(headerCell: KoliBriTableHeaderCellWithLogic): KoliBriSortDirection | undefined {\n\t\tif (!this.disableSort && typeof headerCell.compareFn === 'function') {\n\t\t\tif (headerCell.key) {\n\t\t\t\tconst data = this.sortData.find((value) => value.key === headerCell.key);\n\t\t\t\tif (data?.direction) {\n\t\t\t\t\treturn data.direction;\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn 'NOS';\n\t\t}\n\t}\n\n\tprivate handleSort({ key }: SortEventPayload) {\n\t\tconst headerCell = [...(this.state._headers.horizontal || []).flat(), ...(this.state._headers.vertical || []).flat()].find((cell) => cell.key === key);\n\t\tif (headerCell) {\n\t\t\tthis.changeCellSort(headerCell);\n\t\t}\n\t}\n\n\tprivate getSelectedData(selectedKeys: string[] | string): null | KoliBriTableDataType | KoliBriTableDataType[] {\n\t\tconst selection = this.state._selection;\n\t\tif (selection) {\n\t\t\tconst keyPropertyName = selection.keyPropertyName ?? 'id';\n\t\t\tconst data = this.state._sortedData.filter((item) => selectedKeys.includes(item[keyPropertyName] as string));\n\t\t\tif (selection?.multiple === false) {\n\t\t\t\treturn data[0];\n\t\t\t}\n\n\t\t\tif (keyPropertyName) return data;\n\t\t}\n\t\treturn null;\n\t}\n\tprivate handleSelectionChange(event: Event, value: string[] | string): void {\n\t\tconst selection = this.state._selection;\n\t\tif (selection)\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_selection: {\n\t\t\t\t\t...selection,\n\t\t\t\t\tselectedKeys: typeof value === 'object' ? value : [value],\n\t\t\t\t},\n\t\t\t};\n\t\tconst selectedData = this.getSelectedData(value);\n\n\t\tif (typeof this.state._on?.[Callback.onSelectionChange] === 'function') {\n\t\t\tthis.state._on[Callback.onSelectionChange](event, selectedData);\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.selectionChange, selectedData);\n\t\t}\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getSelection(): Promise<KoliBriTableDataType[] | KoliBriTableDataType | null> {\n\t\tconst selectedKeys: string[] = this.state._selection?.selectedKeys || [];\n\t\treturn this.getSelectedData(selectedKeys);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst displayedData: KoliBriTableDataType[] = this.selectDisplayedData(\n\t\t\tthis.state._sortedData,\n\t\t\tthis.showPagination ? (this.state._pagination?._pageSize ?? 10) : this.state._sortedData.length,\n\t\t\tthis.state._pagination._page || 1,\n\t\t);\n\t\tconst paginationTop = this._paginationPosition === 'top' || this._paginationPosition === 'both' ? this.renderPagination() : null;\n\t\tconst paginationBottom = this._paginationPosition === 'bottom' || this._paginationPosition === 'both' ? this.renderPagination() : null;\n\n\t\tconst headerCells: TableHeaderCells = {\n\t\t\thorizontal: this.state._headers.horizontal?.map((row) => row.map((cell) => ({ ...cell, sortDirection: this.getHeaderCellSortState(cell) }))),\n\t\t\tvertical: this.state._headers.vertical?.map((column) => column.map((cell) => ({ ...cell, sortDirection: this.getHeaderCellSortState(cell) }))),\n\t\t};\n\t\treturn (\n\t\t\t<Host class=\"kol-table-stateful\">\n\t\t\t\t{this.pageEndSlice > 0 && this.showPagination && paginationTop}\n\t\t\t\t<KolTableStatelessWcTag\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_data={displayedData}\n\t\t\t\t\t_headerCells={headerCells}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_dataFoot={this.state._dataFoot}\n\t\t\t\t\t_minWidth={this.state._minWidth}\n\t\t\t\t\t_on={{\n\t\t\t\t\t\tonSort: (_: MouseEvent, payload: SortEventPayload) => {\n\t\t\t\t\t\t\tthis.handleSort(payload);\n\t\t\t\t\t\t},\n\t\t\t\t\t\tonSelectionChange: (event: Event, value: string[] | string) => {\n\t\t\t\t\t\t\tthis.handleSelectionChange(event, value);\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\t_selection={this.state._selection}\n\t\t\t\t/>\n\t\t\t\t{this.pageEndSlice > 0 && this.showPagination && paginationBottom}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as e,h as t,F as i,g as l}from"./index-8a5f476c.js";import{d as o,g as s,a}from"./component-names-50e16b86.js";import{t as n}from"./i18n-5fe08f1c.js";import{n as c}from"./dev.utils-47d07d5b.js";import{d as r,K as d}from"./events-5adf6b62.js";import{c as h}from"./clsx-09a06a12.js";import{t as f,o as b,p as u,w as _,i as p}from"./prop.validators-9feb1d92.js";import{v,a as k,d as y,b as m,C as w}from"./callback-fd6ab619.js";import{v as g}from"./label-d0315384.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./index-da3e0c00.js";import"./common-54bf85ba.js";const j=(e,t)=>{f(t,(()=>{b(t,(()=>{try{t=u(t)}catch(e){}_(e,"_headerCells",(e=>"object"==typeof e&&null!==e),new Set(["TableHeaderCellsPropType"]),t)}))}))},S=class{constructor(l){e(this,l),this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.renderTableRow=(e,l,a,i=!1)=>{var o,s;let n=String(l);return this.horizontal&&(null===(o=e[0])||void 0===o?void 0:o.data)&&(n=null!==(s=this.getDataKey(e[0].data))&&void 0!==s?s:n),t("tr",{class:h("kol-table__row",{"kol-table__row--body":!i,"kol-table__row--footer":i}),key:`row-${n}`},this.renderSelectionCell(e,l),e.map(((e,t)=>this.renderTableCell(e,l,t,a))))},this.renderTableCell=(e,l,a,i)=>{let o=`${l}-${a}-${e.label}`;if(e.data){const t=this.getDataKey(e.data);o=t?`${t}-${this.horizontal?a:l}`:o}return!1===e.asTd?this.renderHeadingCell(e,l,a,i):t("td",{key:`cell-${o}`,class:h("kol-table__cell kol-table__cell--body",{[`kol-table__cell--align-${e.textAlign}`]:e.textAlign}),colSpan:e.colSpan,rowSpan:e.rowSpan,style:{textAlign:e.textAlign,width:e.width},ref:"function"==typeof e.render?t=>{this.cellRender(e,t)}:void 0},"function"!=typeof e.render?e.label:"")},this.state={_data:[],_label:"",_headerCells:{horizontal:[],vertical:[]}},this.tableDivElementHasScrollbar=!1,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}validateData(e){v(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){k(this,e)}validateHeaderCells(e){j(this,e)}validateLabel(e){g(this,e,{required:!0})}validateMinWidth(e){p(this,"_minWidth",e,{defaultValue:void 0})}validateOn(e){y(this,e)}validateSelection(e){m(this,e)}handleKeyDown(e){var t;if("ArrowUp"===e.key||"ArrowDown"===e.key){const l=null===(t=this.tableDivElement)||void 0===t?void 0:t.querySelector(":focus");let a=this.checkboxRefs.indexOf(l);a>-1&&(e.preventDefault(),"ArrowDown"===e.key?(a=(a+1)%this.checkboxRefs.length,this.checkboxRefs[a].focus()):"ArrowUp"===e.key&&(e.preventDefault(),a=(a+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[a].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}disconnectedCallback(){var e;null===(e=this.tableDivElementResizeObserver)||void 0===e||e.disconnect()}checkDivElementScrollbar(){this.tableDivElement&&(this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth)}updateDataToKeyMap(e){e.forEach((e=>{this.dataToKeyMap.has(e)||this.dataToKeyMap.set(e,c())})),this.dataToKeyMap.forEach(((t,l)=>{e.includes(l)||this.dataToKeyMap.delete(l)}))}getDataKey(e){return this.dataToKeyMap.get(e)}cellRender(e,t){t&&(clearTimeout(this.cellsToRenderTimeouts.get(t)),this.cellsToRenderTimeouts.set(t,setTimeout((()=>{if("function"==typeof e.render){const l=e.render(t,e,e.data,this.state._data);"string"==typeof l&&(t.textContent=l)}}))))}getNumberOfCols(e,t){let l=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var l;return t+=null!==(l=e.colSpan)&&void 0!==l?l:1})),l<t&&(l=t)})),0===l&&(l=t.length),l}getNumberOfRows(e,t){var l;let a=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var l;return t+=null!==(l=e.rowSpan)&&void 0!==l?l:1})),a<t&&(a=t)})),0===a?a=t.length:a-=(null===(l=this.state._dataFoot)||void 0===l?void 0:l.length)||0,a}getThePrimaryHeadersWithKeysIfExists(e){const t=[];return e.forEach((e=>{e.forEach((e=>{"string"==typeof e.key&&t.push(e)}))})),t}getPrimaryHeaders(e){var t,l;let a=this.getThePrimaryHeadersWithKeysIfExists(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===a.length&&(a=this.getThePrimaryHeadersWithKeysIfExists(null!==(l=e.vertical)&&void 0!==l?l:[]),a.length>0&&(this.horizontal=!1)),a}createDataField(e,t,l){var a;t.horizontal=Array.isArray(null==t?void 0:t.horizontal)?t.horizontal:[],t.vertical=Array.isArray(null==t?void 0:t.vertical)?t.vertical:[];const i=this.getPrimaryHeaders(t),o=this.getNumberOfCols(t.horizontal,e);let s=this.getNumberOfRows(t.vertical,e),r=0;l&&(r=s,s+=(null===(a=this.state._dataFoot)||void 0===a?void 0:a.length)||0);const c=[],d=[],h=[];t.vertical.forEach(((e,t)=>{d[t]=0,h[t]=[]}));for(let a=r;a<s;a++){const s=[];t.vertical.forEach(((e,t)=>{let l=0;if(h[t].forEach((e=>l+=e)),l<=a){const i=e[a-l+d[t]];if("object"==typeof i){s.push(Object.assign(Object.assign({},i),{asTd:!1,data:{}}));let e=1;if("number"==typeof i.rowSpan&&i.rowSpan>1&&(e=i.rowSpan),h[t].push(e),"number"==typeof i.colSpan&&i.colSpan>1)for(let l=1;l<i.colSpan;l++)h[t+l].push(e);d[t]++}}}));for(let t=0;t<o;t++)if(!0===this.horizontal){const o=l&&this.state._dataFoot?this.state._dataFoot[a-r]:e[a];"object"==typeof i[t]&&null!==i[t]&&"string"==typeof i[t].key&&"object"==typeof o&&null!==o&&s.push(Object.assign(Object.assign({},i[t]),{colSpan:void 0,data:o,label:o[i[t].key],rowSpan:void 0}))}else"object"==typeof i[a]&&null!==i[a]&&"string"==typeof i[a].key&&"object"==typeof e[t]&&null!==e[t]&&s.push(Object.assign(Object.assign({},i[a]),{colSpan:void 0,data:e[t],label:e[t][i[a].key],rowSpan:void 0}));c.push(s)}if(0===e.length){let e=0,l=0;Array.isArray(t.horizontal)&&t.horizontal.length>0&&t.horizontal[0].forEach((t=>{e+=t.colSpan||1})),Array.isArray(t.vertical)&&t.vertical.length>0&&(e-=t.vertical.length,t.vertical[0].forEach((e=>{l+=e.rowSpan||1})));const a={colSpan:e,label:n("kol-no-entries"),render:void 0,rowSpan:Math.max(l,1)};0===c.length?c.push([a]):c[0].push(a)}return c}handleSelectionChangeCallbackAndEvent(e,t){var l;"function"==typeof(null===(l=this.state._on)||void 0===l?void 0:l[w.onSelectionChange])&&this.state._on[w.onSelectionChange](e,t),this.host&&r(this.host,d.selectionChange,t)}componentWillLoad(){this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaderCells(this._headerCells),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validateSelection(this._selection)}renderSelectionCell(e,l){var a,i,n;const r=this.state._selection;if(!r)return"";const c=null!==(a=r.keyPropertyName)&&void 0!==a?a:"id",d=null===(i=e[0])||void 0===i?void 0:i.data;if(!d)return"";const b=d[c],_=r.multiple||void 0===r.multiple,p=null===(n=null==r?void 0:r.selectedKeys)||void 0===n?void 0:n.includes(b),v=r.label(d),u={name:"selection",checked:p,id:b,"aria-label":v};return t("td",{key:`tbody-${l}-selection`,class:"kol-table__cell kol-table__cell--selection"},t("div",{class:h("kol-table__selection",{"kol-table__selection--checked":p})},_?t("label",{class:"kol-table__selection-label"},t(o,{class:"kol-table__selection-icon",_icons:"codicon "+(p?"codicon-check":""),_label:""}),t("input",Object.assign({class:h("kol-table__selection-input kol-table__selection-input--checkbox"),ref:e=>e&&this.checkboxRefs.push(e)},u,{type:"checkbox",onInput:e=>{var t,l;const a=p?null===(l=null==r?void 0:r.selectedKeys)||void 0===l?void 0:l.filter((e=>e!==b)):[...null!==(t=null==r?void 0:r.selectedKeys)&&void 0!==t?t:[],b];this.handleSelectionChangeCallbackAndEvent(e,null!=a?a:[])}}))):t("label",{class:"kol-table__selection-label"},t("input",Object.assign({class:h("kol-table__selection-input kol-table__selection-input--radio")},u,{type:"radio",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,b)}}))),t(s,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${b}-label`,_label:v})))}renderHeadingSelectionCell(){var e,l;const a=this.state._selection;if(!a||!a.multiple&&void 0!==a.multiple)return t("th",{class:"kol-table__cell kol-table__cell--header",key:"thead-0"});const i=null!==(e=a.keyPropertyName)&&void 0!==e?e:"id",r=null===(l=a.selectedKeys)||void 0===l?void 0:l.length,c=r===this.state._data.length,d=0!==r&&!c;let b="kol-table-selection-indeterminate";c&&!d&&(b="kol-table-selection-none"),0===r&&(b="kol-table-selection-all");const _=n(b);return t("th",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header"},t("div",{class:h("kol-table__selection",{"kol-table__selection--indeterminate":d,"kol-table__selection--checked":c})},t("label",{class:"kol-table__selection-label"},t(o,{class:"kol-table__selection-icon",_icons:"codicon "+(d?"codicon-remove":c?"codicon-check":""),_label:""}),t("input",{class:h("kol-table__selection-input kol-table__selection-input--checkbox"),ref:e=>e&&this.checkboxRefs.push(e),name:"selection",checked:c&&!d,"aria-label":_,type:"checkbox",onInput:e=>{const t=c?[]:this.state._data.map((e=>null==e?void 0:e[i]));this.handleSelectionChangeCallbackAndEvent(e,t)}})),t(s,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${b}-label`,_label:_})))}renderHeaderTdCell(){return t(i,null,Array.isArray(this.state._headerCells.horizontal)&&this.state._headerCells.horizontal.length>0&&Array.isArray(this.state._headerCells.vertical)&&this.state._headerCells.vertical.length>0&&Array.isArray(this.state._headerCells.horizontal)&&t("td",{"aria-hidden":"true",colSpan:this.state._headerCells.vertical.length,rowSpan:this.state._headerCells.horizontal.length}))}renderHeadingCell(e,l,i,o){let s,n="codicon codicon-fold";if(e.sortDirection)switch(e.sortDirection){case"ASC":n="codicon codicon-chevron-up",s="ascending";break;case"DESC":n="codicon codicon-chevron-down",s="descending"}const c=o?"row":"number"==typeof e.colSpan&&e.colSpan>1?"colgroup":"col";return t("th",{key:`${l}-${i}-${e.label}`,class:h("kol-table__cell kol-table__cell--header",{[`kol-table__cell--align-${e.textAlign}`]:e.textAlign,[`kol-table__cell--${s}`]:s}),scope:c,colSpan:e.colSpan,rowSpan:e.rowSpan,style:{width:e.width},"aria-sort":s,"data-sort":`sort-${e.sortDirection}`},e.sortDirection?t(a,{class:"kol-table__sort-button",exportparts:"icon",_icons:{right:n},_label:e.label,_on:{onClick:t=>{var l;"function"==typeof(null===(l=this.state._on)||void 0===l?void 0:l.onSort)&&e.key&&e.sortDirection&&this.state._on.onSort(t,{key:e.key,currentSortDirection:e.sortDirection}),this.host&&r(this.host,d.sort,{key:e.key,currentSortDirection:e.sortDirection})}}}):e.label)}renderSpacer(e,l){var a,i;const o=(null===(a=this.state._headerCells.vertical)||void 0===a?void 0:a.length)||0,s=null===(i=null==l?void 0:l[0])||void 0===i?void 0:i.reduce(((e,t)=>e+(t.colSpan||1)),0),n=this.state._selection?1:0;return t("tr",{"aria-hidden":"true",class:h("kol-table__spacer",`kol-table__spacer--${e}`)},t("td",{class:h(`kol-table__spacer-line kol-table__spacer-line--${e}`),colSpan:o+s+n}))}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return null;const e=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return t("tfoot",{class:"kol-table__footer"},[this.renderSpacer("foot",e),e.map(((e,t)=>this.renderTableRow(e,t,!0,!0)))])}render(){const e=this.createDataField(this.state._data,this.state._headerCells);return this.checkboxRefs=[],t("div",{key:"c6c8bedfc97176b8a65d901822da8043f3c32d05",ref:e=>this.tableDivElement=e,class:"kol-table",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},t("table",{key:"052eca811f88499c64ec1c77c1e8d2c40bd59c9a",class:"kol-table__table",style:{minWidth:this.state._minWidth}},t("div",{key:"7c02d031000aeae7b4c16ddf00a7ec08bf90f0a8",class:"kol-table__focus-element",tabindex:this.tableDivElementHasScrollbar?"0":void 0,"aria-describedby":"caption"}," "),t("caption",{key:"4196ae33f32c66a558cd7dcf2693f3f1af91bc25",class:"kol-table__caption",id:"caption"},this.state._label),Array.isArray(this.state._headerCells.horizontal)&&t("thead",{key:"3fb3614a146f8a1eadb33dfdab57ecf7650e17fd",class:"kol-table__head"},[this.state._headerCells.horizontal.map(((e,l)=>t("tr",{class:"kol-table__head-row",key:`thead-${l}`},this.state._selection&&this.renderHeadingSelectionCell(),0===l&&this.renderHeaderTdCell(),Array.isArray(e)&&e.map(((e,a)=>!0===e.asTd?t("td",{key:`thead-${l}-${a}-${e.label}`,class:h({[`kol-table__head--${e.textAlign}`]:"string"==typeof e.textAlign&&e.textAlign.length>0}),colSpan:e.colSpan,rowSpan:e.rowSpan,style:{textAlign:e.textAlign,width:e.width},ref:"function"==typeof e.render?t=>{this.cellRender(e,t)}:void 0},"function"!=typeof e.render?e.label:""):this.renderHeadingCell(e,l,a,!1)))))),this.renderSpacer("head",this.state._headerCells.horizontal)]),t("tbody",{key:"91c9a0aad45bfc77ba9ba28f1b238045939c816e",class:"kol-table__body"},e.map(((e,t)=>this.renderTableRow(e,t,!0)))),this.renderFoot()))}get host(){return l(this)}static get watchers(){return{_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_on:["validateOn"],_selection:["validateSelection"]}}};export{S as kol_table_stateless_wc};
+import{r as e,h as t,F as i,g as l}from"./index-095473f8.js";import{d as o,g as s,a}from"./component-names-50e16b86.js";import{t as n}from"./i18n-5fe08f1c.js";import{n as r}from"./dev.utils-a3bfded4.js";import{d as c,K as d}from"./events-5adf6b62.js";import{c as h}from"./clsx-09a06a12.js";import{t as f,o as b,p as u,w as _,i as p}from"./prop.validators-9feb1d92.js";import{v,a as k,d as y,b as m,C as w}from"./callback-fd6ab619.js";import{v as g}from"./label-d0315384.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./index-da3e0c00.js";import"./common-54bf85ba.js";const j=(e,t)=>{f(t,(()=>{b(t,(()=>{try{t=u(t)}catch(e){}_(e,"_headerCells",(e=>"object"==typeof e&&null!==e),new Set(["TableHeaderCellsPropType"]),t)}))}))},S=class{constructor(l){e(this,l),this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.renderTableRow=(e,l,a,i=!1)=>{var o,s;let n=String(l);return this.horizontal&&(null===(o=e[0])||void 0===o?void 0:o.data)&&(n=null!==(s=this.getDataKey(e[0].data))&&void 0!==s?s:n),t("tr",{class:h("kol-table__row",{"kol-table__row--body":!i,"kol-table__row--footer":i}),key:`row-${n}`},this.renderSelectionCell(e,l),e.map(((e,t)=>this.renderTableCell(e,l,t,a))))},this.renderTableCell=(e,l,a,i)=>{let o=`${l}-${a}-${e.label}`;if(e.data){const t=this.getDataKey(e.data);o=t?`${t}-${this.horizontal?a:l}`:o}return!1===e.asTd?this.renderHeadingCell(e,l,a,i):t("td",{key:`cell-${o}`,class:h("kol-table__cell kol-table__cell--body",{[`kol-table__cell--align-${e.textAlign}`]:e.textAlign}),colSpan:e.colSpan,rowSpan:e.rowSpan,style:{textAlign:e.textAlign,width:e.width},ref:"function"==typeof e.render?t=>{this.cellRender(e,t)}:void 0},"function"!=typeof e.render?e.label:"")},this.state={_data:[],_label:"",_headerCells:{horizontal:[],vertical:[]}},this.tableDivElementHasScrollbar=!1,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}validateData(e){v(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){k(this,e)}validateHeaderCells(e){j(this,e)}validateLabel(e){g(this,e,{required:!0})}validateMinWidth(e){p(this,"_minWidth",e,{defaultValue:void 0})}validateOn(e){y(this,e)}validateSelection(e){m(this,e)}handleKeyDown(e){var t;if("ArrowUp"===e.key||"ArrowDown"===e.key){const l=null===(t=this.tableDivElement)||void 0===t?void 0:t.querySelector(":focus");let a=this.checkboxRefs.indexOf(l);a>-1&&(e.preventDefault(),"ArrowDown"===e.key?(a=(a+1)%this.checkboxRefs.length,this.checkboxRefs[a].focus()):"ArrowUp"===e.key&&(e.preventDefault(),a=(a+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[a].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}disconnectedCallback(){var e;null===(e=this.tableDivElementResizeObserver)||void 0===e||e.disconnect()}checkDivElementScrollbar(){this.tableDivElement&&(this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth)}updateDataToKeyMap(e){e.forEach((e=>{this.dataToKeyMap.has(e)||this.dataToKeyMap.set(e,r())})),this.dataToKeyMap.forEach(((t,l)=>{e.includes(l)||this.dataToKeyMap.delete(l)}))}getDataKey(e){return this.dataToKeyMap.get(e)}cellRender(e,t){t&&(clearTimeout(this.cellsToRenderTimeouts.get(t)),this.cellsToRenderTimeouts.set(t,setTimeout((()=>{if("function"==typeof e.render){const l=e.render(t,e,e.data,this.state._data);"string"==typeof l&&(t.textContent=l)}}))))}getNumberOfCols(e,t){let l=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var l;return t+=null!==(l=e.colSpan)&&void 0!==l?l:1})),l<t&&(l=t)})),0===l&&(l=t.length),l}getNumberOfRows(e,t){var l;let a=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var l;return t+=null!==(l=e.rowSpan)&&void 0!==l?l:1})),a<t&&(a=t)})),0===a?a=t.length:a-=(null===(l=this.state._dataFoot)||void 0===l?void 0:l.length)||0,a}getThePrimaryHeadersWithKeysIfExists(e){const t=[];return e.forEach((e=>{e.forEach((e=>{"string"==typeof e.key&&t.push(e)}))})),t}getPrimaryHeaders(e){var t,l;let a=this.getThePrimaryHeadersWithKeysIfExists(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===a.length&&(a=this.getThePrimaryHeadersWithKeysIfExists(null!==(l=e.vertical)&&void 0!==l?l:[]),a.length>0&&(this.horizontal=!1)),a}createDataField(e,t,l){var a;t.horizontal=Array.isArray(null==t?void 0:t.horizontal)?t.horizontal:[],t.vertical=Array.isArray(null==t?void 0:t.vertical)?t.vertical:[];const i=this.getPrimaryHeaders(t),o=this.getNumberOfCols(t.horizontal,e);let s=this.getNumberOfRows(t.vertical,e),r=0;l&&(r=s,s+=(null===(a=this.state._dataFoot)||void 0===a?void 0:a.length)||0);const c=[],d=[],h=[];t.vertical.forEach(((e,t)=>{d[t]=0,h[t]=[]}));for(let a=r;a<s;a++){const s=[];t.vertical.forEach(((e,t)=>{let l=0;if(h[t].forEach((e=>l+=e)),l<=a){const i=e[a-l+d[t]];if("object"==typeof i){s.push(Object.assign(Object.assign({},i),{asTd:!1,data:{}}));let e=1;if("number"==typeof i.rowSpan&&i.rowSpan>1&&(e=i.rowSpan),h[t].push(e),"number"==typeof i.colSpan&&i.colSpan>1)for(let l=1;l<i.colSpan;l++)h[t+l].push(e);d[t]++}}}));for(let t=0;t<o;t++)if(!0===this.horizontal){const o=l&&this.state._dataFoot?this.state._dataFoot[a-r]:e[a];"object"==typeof i[t]&&null!==i[t]&&"string"==typeof i[t].key&&"object"==typeof o&&null!==o&&s.push(Object.assign(Object.assign({},i[t]),{colSpan:void 0,data:o,label:o[i[t].key],rowSpan:void 0}))}else"object"==typeof i[a]&&null!==i[a]&&"string"==typeof i[a].key&&"object"==typeof e[t]&&null!==e[t]&&s.push(Object.assign(Object.assign({},i[a]),{colSpan:void 0,data:e[t],label:e[t][i[a].key],rowSpan:void 0}));c.push(s)}if(0===e.length){let e=0,l=0;Array.isArray(t.horizontal)&&t.horizontal.length>0&&t.horizontal[0].forEach((t=>{e+=t.colSpan||1})),Array.isArray(t.vertical)&&t.vertical.length>0&&(e-=t.vertical.length,t.vertical[0].forEach((e=>{l+=e.rowSpan||1})));const a={colSpan:e,label:n("kol-no-entries"),render:void 0,rowSpan:Math.max(l,1)};0===c.length?c.push([a]):c[0].push(a)}return c}handleSelectionChangeCallbackAndEvent(e,t){var l;"function"==typeof(null===(l=this.state._on)||void 0===l?void 0:l[w.onSelectionChange])&&this.state._on[w.onSelectionChange](e,t),this.host&&c(this.host,d.selectionChange,t)}componentWillLoad(){this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaderCells(this._headerCells),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validateSelection(this._selection)}renderSelectionCell(e,l){var a,i,n;const r=this.state._selection;if(!r)return"";const c=null!==(a=r.keyPropertyName)&&void 0!==a?a:"id",d=null===(i=e[0])||void 0===i?void 0:i.data;if(!d)return"";const b=d[c],_=r.multiple||void 0===r.multiple,p=null===(n=null==r?void 0:r.selectedKeys)||void 0===n?void 0:n.includes(b),v=r.label(d),u={name:"selection",checked:p,id:b,"aria-label":v};return t("td",{key:`tbody-${l}-selection`,class:"kol-table__cell kol-table__cell--selection"},t("div",{class:h("kol-table__selection",{"kol-table__selection--checked":p})},_?t("label",{class:"kol-table__selection-label"},t(o,{class:"kol-table__selection-icon",_icons:"codicon "+(p?"codicon-check":""),_label:""}),t("input",Object.assign({class:h("kol-table__selection-input kol-table__selection-input--checkbox"),ref:e=>e&&this.checkboxRefs.push(e)},u,{type:"checkbox",onInput:e=>{var t,l;const a=p?null===(l=null==r?void 0:r.selectedKeys)||void 0===l?void 0:l.filter((e=>e!==b)):[...null!==(t=null==r?void 0:r.selectedKeys)&&void 0!==t?t:[],b];this.handleSelectionChangeCallbackAndEvent(e,null!=a?a:[])}}))):t("label",{class:"kol-table__selection-label"},t("input",Object.assign({class:h("kol-table__selection-input kol-table__selection-input--radio")},u,{type:"radio",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,b)}}))),t(s,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${b}-label`,_label:v})))}renderHeadingSelectionCell(){var e,l;const a=this.state._selection;if(!a||!a.multiple&&void 0!==a.multiple)return t("th",{class:"kol-table__cell kol-table__cell--header",key:"thead-0"});const i=null!==(e=a.keyPropertyName)&&void 0!==e?e:"id",r=null===(l=a.selectedKeys)||void 0===l?void 0:l.length,c=r===this.state._data.length,d=0!==r&&!c;let b="kol-table-selection-indeterminate";c&&!d&&(b="kol-table-selection-none"),0===r&&(b="kol-table-selection-all");const _=n(b);return t("th",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header"},t("div",{class:h("kol-table__selection",{"kol-table__selection--indeterminate":d,"kol-table__selection--checked":c})},t("label",{class:"kol-table__selection-label"},t(o,{class:"kol-table__selection-icon",_icons:"codicon "+(d?"codicon-remove":c?"codicon-check":""),_label:""}),t("input",{class:h("kol-table__selection-input kol-table__selection-input--checkbox"),ref:e=>e&&this.checkboxRefs.push(e),name:"selection",checked:c&&!d,"aria-label":_,type:"checkbox",onInput:e=>{const t=c?[]:this.state._data.map((e=>null==e?void 0:e[i]));this.handleSelectionChangeCallbackAndEvent(e,t)}})),t(s,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${b}-label`,_label:_})))}renderHeaderTdCell(){return t(i,null,Array.isArray(this.state._headerCells.horizontal)&&this.state._headerCells.horizontal.length>0&&Array.isArray(this.state._headerCells.vertical)&&this.state._headerCells.vertical.length>0&&Array.isArray(this.state._headerCells.horizontal)&&t("td",{"aria-hidden":"true",colSpan:this.state._headerCells.vertical.length,rowSpan:this.state._headerCells.horizontal.length}))}renderHeadingCell(e,l,i,o){let s,n="codicon codicon-fold";if(e.sortDirection)switch(e.sortDirection){case"ASC":n="codicon codicon-chevron-up",s="ascending";break;case"DESC":n="codicon codicon-chevron-down",s="descending"}const r=o?"row":"number"==typeof e.colSpan&&e.colSpan>1?"colgroup":"col";return t("th",{key:`${l}-${i}-${e.label}`,class:h("kol-table__cell kol-table__cell--header",{[`kol-table__cell--align-${e.textAlign}`]:e.textAlign,[`kol-table__cell--${s}`]:s}),scope:r,colSpan:e.colSpan,rowSpan:e.rowSpan,style:{width:e.width},"aria-sort":s,"data-sort":`sort-${e.sortDirection}`},e.sortDirection?t(a,{class:"kol-table__sort-button",exportparts:"icon",_icons:{right:n},_label:e.label,_on:{onClick:t=>{var l;"function"==typeof(null===(l=this.state._on)||void 0===l?void 0:l.onSort)&&e.key&&e.sortDirection&&this.state._on.onSort(t,{key:e.key,currentSortDirection:e.sortDirection}),this.host&&c(this.host,d.sort,{key:e.key,currentSortDirection:e.sortDirection})}}}):e.label)}renderSpacer(e,l){var a,i;const o=(null===(a=this.state._headerCells.vertical)||void 0===a?void 0:a.length)||0,s=null===(i=null==l?void 0:l[0])||void 0===i?void 0:i.reduce(((e,t)=>e+(t.colSpan||1)),0),n=this.state._selection?1:0;return t("tr",{"aria-hidden":"true",class:h("kol-table__spacer",`kol-table__spacer--${e}`)},t("td",{class:h(`kol-table__spacer-line kol-table__spacer-line--${e}`),colSpan:o+s+n}))}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return null;const e=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return t("tfoot",{class:"kol-table__footer"},[this.renderSpacer("foot",e),e.map(((e,t)=>this.renderTableRow(e,t,!0,!0)))])}render(){const e=this.createDataField(this.state._data,this.state._headerCells);return this.checkboxRefs=[],t("div",{key:"e54d4913ba204c37820b1410e29dd49434836c42",ref:e=>this.tableDivElement=e,class:"kol-table",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},t("table",{key:"9b938fee0aa20a126f4d034204b823666da2519f",class:"kol-table__table",style:{minWidth:this.state._minWidth}},t("div",{key:"43ddd7b7fc461041de838739675ebbc8cb81573a",class:"kol-table__focus-element",tabindex:this.tableDivElementHasScrollbar?"0":void 0,"aria-describedby":"caption"}," "),t("caption",{key:"152eed3b8707b4468b01832f66d3765fed729511",class:"kol-table__caption",id:"caption"},this.state._label),Array.isArray(this.state._headerCells.horizontal)&&t("thead",{key:"ab7556f7e7ced55730c900240aba7f1112d31449",class:"kol-table__head"},[this.state._headerCells.horizontal.map(((e,l)=>t("tr",{class:"kol-table__head-row",key:`thead-${l}`},this.state._selection&&this.renderHeadingSelectionCell(),0===l&&this.renderHeaderTdCell(),Array.isArray(e)&&e.map(((e,a)=>!0===e.asTd?t("td",{key:`thead-${l}-${a}-${e.label}`,class:h({[`kol-table__head--${e.textAlign}`]:"string"==typeof e.textAlign&&e.textAlign.length>0}),colSpan:e.colSpan,rowSpan:e.rowSpan,style:{textAlign:e.textAlign,width:e.width},ref:"function"==typeof e.render?t=>{this.cellRender(e,t)}:void 0},"function"!=typeof e.render?e.label:""):this.renderHeadingCell(e,l,a,!1)))))),this.renderSpacer("head",this.state._headerCells.horizontal)]),t("tbody",{key:"9618e888d7c3395b89981f223deab8e91459da47",class:"kol-table__body"},e.map(((e,t)=>this.renderTableRow(e,t,!0)))),this.renderFoot()))}get host(){return l(this)}static get watchers(){return{_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_on:["validateOn"],_selection:["validateSelection"]}}};export{S as kol_table_stateless_wc};

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

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

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

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

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

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

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

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