@public-ui/components 2.0.14 → 2.1.0

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolTableDefaultStyle0","PAGINATION_OPTIONS","CELL_REFS","Map","paginationValidator","value","KolTable","this","horizontal","sortDirections","sortData","showPagination","pageStartSlice","pageEndSlice","disableSort","sortedColumnHead","label","key","sortDirection","setSortDirection","sort","direction","clear","set","sortFunction","handlePagination","onClick","event","page","_a","state","_pagination","_on","setState","Object","assign","_page","onChangePage","onChangePageSize","pageSize","_pageSize","updateSortedData","cell","_data","sortedData","length","a","b","index","data","result","compareFn","get","reverse","renderTableRow","row","rowIndex","h","map","col","colIndex","renderTableCell","asTd","headerCell","undefined","shortSortDirection","sortButtonIcon","find","scope","rowSpan","colSpan","style","textAlign","width","class","KolButtonTag","exportparts","_icons","_hideLabel","_label","translate","placeholders","colLabel","changeCellSort","_variant","ref","render","el","cellRender","renderFoot","rows","createDataField","_dataFoot","_headers","_allowMultiSort","vertical","_max","_sortedData","_paginationPosition","validateAllowMultiSort","watchValidator","Set","defaultValue","validateData","emptyStringByArrayHandler","objectObjectHandler","parseJson","e","Array","isArray","dataTupel","afterPatch","setTimeout","validateDataFoot","validatePaginationPosition","findIndex","settings","splice","push","validateHeaders","hooks","beforePatch","nextValue","applySort","headers","hasSortedCells","forEach","_b","_c","_d","devHint","validateLabel","required","validateMinWidth","watchString","validatePagination","componentDidRender","checkDivElementScrollbar","componentDidLoad","tableDivElement","ResizeObserver","tableDivElementResizeObserver","bind","observe","disconnectedCallback","disconnect","tableDivElementHasScrollbar","scrollWidth","clientWidth","componentWillLoad","_minWidth","getNumberOfCols","horizontalHeaders","max","count","getNumberOfRows","verticalHeaders","filterHeaderKeys","primaryHeader","cells","getPrimaryHeader","isFoot","maxCols","maxRows","startRow","dataField","rowCount","rowSpans","_row","i","dataRow","headerCells","rowsTotal","k","j","colspan","rowspan","emptyCell","Math","selectDisplayedData","slice","clearTimeout","html","textContent","renderPagination","start","toString","end","total","KolPaginationTag","_boundaryCount","_customClass","_pageSizeOptions","_siblingCount","_tooltipAlign","displayedData","paginationTop","paginationBottom","Host","element","tabindex","minWidth","id","cols","KolButtonWcTag","right"],"sources":["src/components/table/style.scss?tag=kol-table&mode=default&encapsulation=shadow","src/components/table/component.tsx"],"sourcesContent":["@import '../style';\n@import '../host-display-block';\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: grid;\n\t}\n\n\t:host > div.table {\n\t\tmax-width: 100%;\n\t\toverflow-x: auto;\n\t\toverflow-y: hidden;\n\t}\n\n\t:host > div.table table {\n\t\twidth: 100%;\n\t}\n\n\tcaption {\n\t\ttext-align: start;\n\t}\n\n\t.focus-element {\n\t\tfont-size: 0;\n\t}\n\n\t.focus-element:focus {\n\t\toutline: 0 !important;\n\t}\n\n\t.table:has(.focus-element:focus) {\n\t\t/* @see https://remysharp.com/til/css/focus-ring-default-styles */\n\t\toutline: 5px auto Highlight;\n\t\toutline: 5px auto -webkit-focus-ring-color;\n\t\toutline-offset: 2px;\n\t}\n\n\t.table-sort-button .button {\n\t\tcolor: inherit;\n\t}\n\n\tth.align-left {\n\t\ttext-align: left;\n\n\t\t& .table-sort-button .button-inner {\n\t\t\tjustify-items: start;\n\t\t}\n\t}\n\n\tth.align-center {\n\t\ttext-align: center;\n\n\t\t& .table-sort-button .button-inner {\n\t\t\tjustify-items: center;\n\t\t}\n\t}\n\n\tth.align-right {\n\t\ttext-align: right;\n\n\t\t& .table-sort-button .button-inner {\n\t\t\tjustify-items: end;\n\t\t}\n\t}\n\n\tdiv.pagination .kol-pagination {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n\n\tdiv.pagination,\n\tdiv.pagination > div:last-child {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t@media (max-width: 1024px) {\n\t\tdiv.pagination .kol-pagination {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\tdiv.pagination,\n\t\tdiv.pagination > div:last-child {\n\t\t\tgrid-auto-flow: column;\n\t\t}\n\n\t\tdiv.pagination .kol-pagination {\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n}\n","/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\nimport { devHint, emptyStringByArrayHandler, objectObjectHandler, parseJson, setState, validateLabel, watchString, watchValidator } from '@public-ui/schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Host, Prop, State, Watch, h } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type {\n\tKoliBriDataCompareFn,\n\tKoliBriPaginationButtonCallbacks,\n\tKoliBriSortDirection,\n\tKoliBriSortFunction,\n\tKoliBriTableCell,\n\tKoliBriTableDataType,\n\tKoliBriTableHeaderCell,\n\tKoliBriTableHeaderCellAndData,\n\tKoliBriTableHeaders,\n\tKoliBriTablePaginationProps,\n\tKoliBriTableRender,\n\tKoliBriTableSelectedHead,\n\tLabelPropType,\n\tPaginationPositionPropType,\n\tStringified,\n\tTableAPI,\n\tTableStates,\n} from '@public-ui/schema';\nimport { validatePaginationPosition } from '@public-ui/schema';\nimport { KolButtonTag, KolButtonWcTag, KolPaginationTag } from '../../core/component-names';\nconst PAGINATION_OPTIONS = [10, 20, 50, 100];\n\nconst CELL_REFS = new Map<HTMLElement, ReturnType<typeof setTimeout>>();\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',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTable implements TableAPI {\n\tprivate horizontal = true;\n\t/**\n\t * @deprecated only for backward compatibility\n\t */\n\tprivate sortFunction?: KoliBriSortFunction;\n\t/**\n\t * @deprecated only for backward compatibility\n\t */\n\tprivate sortDirections: Map<KoliBriSortFunction, KoliBriSortDirection> = new Map();\n\tprivate sortData: SortData[] = [];\n\tprivate showPagination = false;\n\tprivate pageStartSlice = 0;\n\tprivate pageEndSlice = 10;\n\tprivate disableSort = false;\n\tprivate tableDivElement?: HTMLDivElement;\n\tprivate tableDivElementResizeObserver?: ResizeObserver;\n\n\t@State()\n\tprivate tableDivElementHasScrollbar = false;\n\n\t/**\n\t * @deprecated only for backward compatibility\n\t */\n\tprivate sortedColumnHead: KoliBriTableSelectedHead = { label: '', key: '', sortDirection: 'NOS' };\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\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?: Stringified<KoliBriTableDataType[]>): void {\n\t\temptyStringByArrayHandler(value, () => {\n\t\t\tobjectObjectHandler(value, () => {\n\t\t\t\tif (typeof value === 'undefined') {\n\t\t\t\t\tvalue = [];\n\t\t\t\t}\n\t\t\t\ttry {\n\t\t\t\t\tvalue = parseJson<KoliBriTableDataType[]>(value);\n\t\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t\t} catch (e) {\n\t\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t\t}\n\t\t\t\tif (Array.isArray(value) && value.find((dataTupel: KoliBriTableDataType) => !(typeof dataTupel === 'object' && dataTupel !== null)) === undefined) {\n\t\t\t\t\tsetState(this, '_data', value, {\n\t\t\t\t\t\tafterPatch: () => {\n\t\t\t\t\t\t\t// TODO: kein guter Hack (endless loop)\n\t\t\t\t\t\t\tsetTimeout(this.updateSortedData);\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('_dataFoot')\n\tpublic validateDataFoot(value?: Stringified<KoliBriTableDataType[]>): void {\n\t\temptyStringByArrayHandler(value, () => {\n\t\t\tobjectObjectHandler(value, () => {\n\t\t\t\tif (typeof value === 'undefined') {\n\t\t\t\t\tvalue = [];\n\t\t\t\t}\n\t\t\t\ttry {\n\t\t\t\t\tvalue = parseJson<KoliBriTableDataType[]>(value);\n\t\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t\t} catch (e) {\n\t\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t\t}\n\t\t\t\tif (Array.isArray(value) && value.find((dataTupel: KoliBriTableDataType) => !(typeof dataTupel === 'object' && dataTupel !== null)) === undefined) {\n\t\t\t\t\tsetState(this, '_dataFoot', value, {\n\t\t\t\t\t\tafterPatch: () => {\n\t\t\t\t\t\t\tsetTimeout(this.updateSortedData);\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('_paginationPosition')\n\tpublic validatePaginationPosition(value?: PaginationPositionPropType): void {\n\t\tvalidatePaginationPosition(this, value);\n\t}\n\n\t/**\n\t * @deprecated only for backward compatibility\n\t */\n\tprivate setSortDirection = (sort: KoliBriSortFunction, direction: KoliBriSortDirection) => {\n\t\t/**\n\t\t * Durch des Clearen, ist es nicht möglich eine Mehr-Spalten-Sortierung\n\t\t * darzustellen. Das wäre der Fall, wenn man ggf. Daten in außerhalb der\n\t\t * Komponente sortiert und diese sortiert von außen rein gibt und der\n\t\t * Sortierungsalgorithmus mehrere Spalten zusammen sortierte.\n\t\t *\n\t\t * Beachte auch col.sort !== this.sortFunction\n\t\t */\n\t\tthis.sortDirections.clear();\n\t\tthis.sortDirections.set(sort, direction);\n\t\tthis.sortFunction = sort;\n\t};\n\n\tprivate changeCellSort(headerCell: KoliBriTableHeaderCell) {\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(headerCell as KoliBriTableSelectedHead);\n\t\t} else if (typeof headerCell.sort === 'function') {\n\t\t\tthis.sortFunction = headerCell.sort;\n\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\tcase 'ASC':\n\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'DESC');\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'DESC':\n\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'NOS');\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'ASC');\n\t\t\t}\n\t\t\tthis.updateSortedData(headerCell as KoliBriTableSelectedHead);\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: KoliBriTableHeaderCell[]) => {\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} else if (typeof cell.sort === 'function') {\n\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(cell.sort, sortDirection);\n\t\t\t\t\t\t\t\t\t\t\tsetTimeout(() => this.updateSortedData({ key, label: cell.label, sortDirection }));\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\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\tpublic componentDidRender(): void {\n\t\tthis.checkDivElementScrollbar();\n\t}\n\n\tpublic componentDidLoad() {\n\t\tif (this.tableDivElement && ResizeObserver) {\n\t\t\tthis.tableDivElementResizeObserver = new ResizeObserver(this.checkDivElementScrollbar.bind(this));\n\t\t\tthis.tableDivElementResizeObserver.observe(this.tableDivElement);\n\t\t}\n\t}\n\n\tpublic disconnectedCallback() {\n\t\tthis.tableDivElementResizeObserver?.disconnect();\n\t}\n\n\tprivate checkDivElementScrollbar() {\n\t\tif (this.tableDivElement) {\n\t\t\tthis.tableDivElementHasScrollbar = this.tableDivElement.scrollWidth > this.tableDivElement.clientWidth;\n\t\t}\n\t}\n\n\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}\n\n\tprivate getNumberOfCols(horizontalHeaders: KoliBriTableHeaderCell[][], data: KoliBriTableDataType[]): number {\n\t\tlet max = 0;\n\t\thorizontalHeaders.forEach((row) => {\n\t\t\tlet count = 0;\n\t\t\trow.forEach((col) => (count += col.colSpan ?? 1));\n\t\t\tif (max < count) {\n\t\t\t\tmax = count;\n\t\t\t}\n\t\t});\n\t\tif (max === 0) {\n\t\t\tmax = data.length;\n\t\t}\n\t\treturn max;\n\t}\n\n\tprivate getNumberOfRows(verticalHeaders: KoliBriTableHeaderCell[][], data: KoliBriTableDataType[]): number {\n\t\tlet max = 0;\n\t\tverticalHeaders.forEach((col) => {\n\t\t\tlet count = 0;\n\t\t\tcol.forEach((row) => (count += row.rowSpan ?? 1));\n\t\t\tif (max < count) {\n\t\t\t\tmax = count;\n\t\t\t}\n\t\t});\n\t\tif (max === 0) {\n\t\t\tmax = data.length;\n\t\t} else {\n\t\t\tmax -= this.state._dataFoot.length;\n\t\t}\n\t\treturn max;\n\t}\n\n\tprivate filterHeaderKeys(headers: KoliBriTableHeaderCell[][]): KoliBriTableHeaderCell[] {\n\t\tconst primaryHeader: KoliBriTableHeaderCell[] = [];\n\t\theaders.forEach((cells) => {\n\t\t\tcells.forEach((cell) => {\n\t\t\t\tif (typeof cell.key === 'string') {\n\t\t\t\t\tprimaryHeader.push(cell);\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t\treturn primaryHeader;\n\t}\n\n\tprivate getPrimaryHeader(headers: KoliBriTableHeaders): KoliBriTableHeaderCell[] {\n\t\tlet primaryHeader: KoliBriTableHeaderCell[] = this.filterHeaderKeys(headers.horizontal ?? []);\n\t\tthis.horizontal = true;\n\t\tif (primaryHeader.length === 0) {\n\t\t\tprimaryHeader = this.filterHeaderKeys(headers.vertical ?? []);\n\t\t\tif (primaryHeader.length > 0) {\n\t\t\t\tthis.horizontal = false;\n\t\t\t}\n\t\t}\n\t\treturn primaryHeader;\n\t}\n\n\tprivate createDataField(data: KoliBriTableDataType[], headers: KoliBriTableHeaders, isFoot?: boolean): KoliBriTableCell[][] {\n\t\theaders.horizontal = Array.isArray(headers?.horizontal) ? headers.horizontal : [];\n\t\theaders.vertical = Array.isArray(headers?.vertical) ? headers.vertical : [];\n\t\tconst primaryHeader = this.getPrimaryHeader(headers);\n\t\tconst maxCols = this.getNumberOfCols(headers.horizontal, data);\n\t\tlet maxRows = this.getNumberOfRows(headers.vertical, data);\n\t\tlet startRow = 0;\n\t\tif (isFoot) {\n\t\t\tstartRow = maxRows;\n\t\t\tmaxRows += this.state._dataFoot.length;\n\t\t}\n\t\tconst dataField: KoliBriTableCell[][] = [];\n\n\t\tconst rowCount: number[] = [];\n\t\tconst rowSpans: number[][] = [];\n\t\theaders.vertical.forEach((_row, index) => {\n\t\t\trowCount[index] = 0;\n\t\t\trowSpans[index] = [];\n\t\t});\n\n\t\tfor (let i = startRow; i < maxRows; i++) {\n\t\t\tconst dataRow: KoliBriTableHeaderCellAndData[] = [];\n\t\t\theaders.vertical.forEach((headerCells, index) => {\n\t\t\t\tlet rowsTotal = 0;\n\t\t\t\trowSpans[index].forEach((value) => (rowsTotal += value));\n\t\t\t\tif (rowsTotal <= i) {\n\t\t\t\t\tconst rows = headerCells[i - rowsTotal + rowCount[index]];\n\t\t\t\t\tif (typeof rows === 'object') {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...rows,\n\t\t\t\t\t\t\tasTd: false,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: {} as KoliBriTableDataType,\n\t\t\t\t\t\t});\n\t\t\t\t\t\tlet rowSpan = 1;\n\t\t\t\t\t\tif (typeof rows.rowSpan === 'number' && rows.rowSpan > 1) {\n\t\t\t\t\t\t\trowSpan = rows.rowSpan;\n\t\t\t\t\t\t}\n\t\t\t\t\t\trowSpans[index].push(rowSpan);\n\t\t\t\t\t\tif (typeof rows.colSpan === 'number' && rows.colSpan > 1) {\n\t\t\t\t\t\t\tfor (let k = 1; k < rows.colSpan; k++) {\n\t\t\t\t\t\t\t\trowSpans[index + k].push(rowSpan);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\trowCount[index]++;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t\tfor (let j = 0; j < maxCols; j++) {\n\t\t\t\tif (this.horizontal === true) {\n\t\t\t\t\tconst row = isFoot ? this.state._dataFoot[i - startRow] : data[i];\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof primaryHeader[j] === 'object' &&\n\t\t\t\t\t\tprimaryHeader[j] !== null &&\n\t\t\t\t\t\ttypeof primaryHeader[j].key === 'string' &&\n\t\t\t\t\t\ttypeof row === 'object' &&\n\t\t\t\t\t\trow !== null\n\t\t\t\t\t) {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...primaryHeader[j],\n\t\t\t\t\t\t\tcolSpan: undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: row,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tlabel: row[primaryHeader[j].key as unknown as string] as string,\n\t\t\t\t\t\t\trowSpan: undefined,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof primaryHeader[i] === 'object' &&\n\t\t\t\t\t\tprimaryHeader[i] !== null &&\n\t\t\t\t\t\ttypeof primaryHeader[i].key === 'string' &&\n\t\t\t\t\t\ttypeof data[j] === 'object' &&\n\t\t\t\t\t\tdata[j] !== null\n\t\t\t\t\t) {\n\t\t\t\t\t\tdataRow.push({\n\t\t\t\t\t\t\t...primaryHeader[i],\n\t\t\t\t\t\t\tcolSpan: undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n\t\t\t\t\t\t\tdata: data[j],\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tlabel: data[j][primaryHeader[i].key as unknown as number] as string,\n\t\t\t\t\t\t\trowSpan: undefined,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tdataField.push(dataRow);\n\t\t}\n\t\tif (data.length === 0) {\n\t\t\tlet colspan = 0;\n\t\t\tlet rowspan = 0;\n\t\t\tif (Array.isArray(headers.horizontal) && headers.horizontal.length > 0) {\n\t\t\t\theaders.horizontal[0].forEach((col) => {\n\t\t\t\t\tcolspan += col.colSpan || 1;\n\t\t\t\t});\n\t\t\t}\n\t\t\tif (Array.isArray(headers.vertical) && headers.vertical.length > 0) {\n\t\t\t\tcolspan -= headers.vertical.length;\n\t\t\t\theaders.vertical[0].forEach((row) => {\n\t\t\t\t\trowspan += row.rowSpan || 1;\n\t\t\t\t});\n\t\t\t}\n\t\t\tconst emptyCell = {\n\t\t\t\tcolSpan: colspan,\n\t\t\t\tlabel: translate('kol-no-entries'),\n\t\t\t\trender: undefined,\n\t\t\t\trowSpan: Math.max(rowspan, 1),\n\t\t\t};\n\t\t\tif (dataField.length === 0) {\n\t\t\t\tdataField.push([emptyCell]);\n\t\t\t} else {\n\t\t\t\tdataField[0].push(emptyCell);\n\t\t\t}\n\t\t}\n\t\treturn dataField;\n\t}\n\n\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 cellRender(col: KoliBriTableHeaderCellAndData & { render: KoliBriTableRender }, el?: HTMLElement): void {\n\t\tif (el /* SSR instanceof HTMLElement */) {\n\t\t\tclearTimeout(CELL_REFS.get(el));\n\t\t\tCELL_REFS.set(\n\t\t\t\tel,\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tclearTimeout(CELL_REFS.get(el));\n\t\t\t\t\tconst html = col.render(\n\t\t\t\t\t\tel,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tasTd: col.asTd,\n\t\t\t\t\t\t\tlabel: col.label,\n\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t\t} as KoliBriTableHeaderCell,\n\t\t\t\t\t\tcol.data,\n\t\t\t\t\t\tthis.state._data,\n\t\t\t\t\t);\n\t\t\t\t\tif (typeof html === 'string') {\n\t\t\t\t\t\tel.textContent = html;\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t);\n\t\t}\n\t}\n\n\t/**\n\t *\n\t * @param cell only used for old single sort. Can be removed when sort is removed.\n\t */\n\tprivate updateSortedData = (cell: KoliBriTableSelectedHead = this.sortedColumnHead) => {\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} else if (typeof this.sortFunction === 'function') {\n\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\tcase 'ASC':\n\t\t\t\t\tsortedData = this.sortFunction([...this.state._data]);\n\t\t\t\t\tthis.sortedColumnHead = { label: cell.label, key: cell.key, sortDirection: 'ASC' };\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'DESC':\n\t\t\t\t\tsortedData = this.sortFunction([...this.state._data]).reverse();\n\t\t\t\t\tthis.sortedColumnHead = { label: cell.label, key: cell.key, sortDirection: 'DESC' };\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'NOS':\n\t\t\t\tdefault:\n\t\t\t\t\tsortedData = [...this.state._data];\n\t\t\t\t\tthis.sortedColumnHead = { label: '', key: '', sortDirection: 'NOS' };\n\t\t\t}\n\t\t}\n\t\tsetState(this, '_sortedData', sortedData);\n\t};\n\n\tprivate readonly renderTableRow = (row: KoliBriTableCell[], rowIndex: number): JSX.Element => {\n\t\treturn <tr key={`tbody-${rowIndex}`}>{row.map((col, colIndex) => this.renderTableCell(col, rowIndex, colIndex))}</tr>;\n\t};\n\tprivate readonly renderTableCell = (cell: KoliBriTableCell, rowIndex: number, colIndex: number): JSX.Element => {\n\t\tif (cell.asTd === false) {\n\t\t\tconst headerCell: KoliBriTableHeaderCell = cell;\n\t\t\tlet sortDirection = undefined;\n\t\t\tlet shortSortDirection: KoliBriSortDirection = 'NOS';\n\t\t\tlet sortButtonIcon = 'codicon codicon-fold';\n\t\t\tif (!this.disableSort) {\n\t\t\t\tif (headerCell.key) {\n\t\t\t\t\tconst data = this.sortData.find((value) => value.key === headerCell.key);\n\t\t\t\t\tif (data) {\n\t\t\t\t\t\tshortSortDirection = data.direction;\n\t\t\t\t\t\tswitch (data.direction) {\n\t\t\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-up';\n\t\t\t\t\t\t\t\tsortDirection = 'ascending';\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-down';\n\t\t\t\t\t\t\t\tsortDirection = 'descending';\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (headerCell.key === this.sortedColumnHead.key) {\n\t\t\t\t\tshortSortDirection = this.sortedColumnHead.sortDirection;\n\t\t\t\t\tswitch (this.sortedColumnHead.sortDirection) {\n\t\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-up';\n\t\t\t\t\t\t\tsortDirection = 'ascending';\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-down';\n\t\t\t\t\t\t\tsortDirection = 'descending';\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<th // role=\"rowheader\"\n\t\t\t\t\tkey={`tbody-${rowIndex}-${colIndex}-${headerCell.label}`}\n\t\t\t\t\tscope={typeof headerCell.rowSpan === 'number' && headerCell.rowSpan > 1 ? 'rowgroup' : 'row'}\n\t\t\t\t\tcolSpan={headerCell.colSpan}\n\t\t\t\t\trowSpan={headerCell.rowSpan}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\ttextAlign: headerCell.textAlign,\n\t\t\t\t\t\twidth: headerCell.width,\n\t\t\t\t\t}}\n\t\t\t\t\taria-sort={sortDirection}\n\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\t\t\tdata-sort={`sort-${shortSortDirection}`}\n\t\t\t\t>\n\t\t\t\t\t<div class=\"w-full flex gap-1 items-center\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t'w-full': true,\n\t\t\t\t\t\t\t\t[headerCell.textAlign as string]: typeof headerCell.textAlign === 'string' && headerCell.textAlign.length > 0,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tstyle={{ textAlign: headerCell.textAlign }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{headerCell.label}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{!this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function') && (\n\t\t\t\t\t\t\t<KolButtonTag\n\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t_icons={sortButtonIcon}\n\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t_label={translate('kol-change-order', { placeholders: { colLabel: headerCell.label } })}\n\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\tonClick: () => this.changeCellSort(headerCell),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t></KolButtonTag>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</th>\n\t\t\t);\n\t\t} else {\n\t\t\treturn (\n\t\t\t\t<td // role=\"gridcell\"\n\t\t\t\t\tkey={`tbody-${rowIndex}-${colIndex}-${cell.label}`}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[cell.textAlign as string]: typeof cell.textAlign === 'string' && cell.textAlign.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\tcolSpan={cell.colSpan}\n\t\t\t\t\trowSpan={cell.rowSpan}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\ttextAlign: cell.textAlign,\n\t\t\t\t\t\twidth: cell.width,\n\t\t\t\t\t}}\n\t\t\t\t\tref={\n\t\t\t\t\t\ttypeof cell.render === 'function'\n\t\t\t\t\t\t\t? (el) => {\n\t\t\t\t\t\t\t\t\tthis.cellRender(cell as KoliBriTableHeaderCellAndData & { render: KoliBriTableRender }, el);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{typeof cell.render !== 'function' ? cell.label : ''}\n\t\t\t\t</td>\n\t\t\t);\n\t\t}\n\t};\n\n\tprivate readonly renderFoot = (): JSX.Element => {\n\t\tconst rows: KoliBriTableCell[][] = this.createDataField(this.state._dataFoot, this.state._headers, true);\n\t\treturn <tfoot>{rows.map(this.renderTableRow)}</tfoot>;\n\t};\n\n\tprivate renderPagination(): JSX.Element {\n\t\treturn (\n\t\t\t<div class=\"pagination\">\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>\n\t\t\t\t\t<KolPaginationTag\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\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 dataField = this.createDataField(displayedData, this.state._headers);\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\treturn (\n\t\t\t<Host class=\"kol-table\">\n\t\t\t\t{this.pageEndSlice > 0 && this.showPagination && paginationTop}\n\n\t\t\t\t{/* Firefox automatically makes the following div focusable when it has a scrollbar. We implement a similar behavior cross-browser by allowing the\n\t\t\t\t * <div class=\"focus-element\"> to receive focus. Hence, we disable focus for the div to avoid having two focusable elements by setting `tabindex=\"-1\"`\n\t\t\t\t */}\n\t\t\t\t{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n\t\t\t\t<div ref={(element) => (this.tableDivElement = element)} class=\"table\" tabindex={this.tableDivElementHasScrollbar ? '-1' : undefined}>\n\t\t\t\t\t<table\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tminWidth: this.state._minWidth,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{/*\n\t\t\t\t\t\t * The following element allows the table to receive focus without providing redundant content to screen readers.\n\t\t\t\t\t\t * The `div` is technically not allowed here. But any allowed element would mutate the table semantics. Additionally, the `&nbsp;` is necessary to\n\t\t\t\t\t\t * prevent screen readers from just reading \"blank\".\n\t\t\t\t\t\t */}\n\t\t\t\t\t\t<div class=\"focus-element\" tabindex={this.tableDivElementHasScrollbar ? '0' : undefined} aria-describedby=\"caption\">\n\t\t\t\t\t\t\t&nbsp;\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<caption id=\"caption\">{this.state._label}</caption>\n\n\t\t\t\t\t\t{Array.isArray(this.state._headers.horizontal) && (\n\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t{this.state._headers.horizontal.map((cols, rowIndex) => (\n\t\t\t\t\t\t\t\t\t<tr key={`thead-${rowIndex}`}>\n\t\t\t\t\t\t\t\t\t\t{cols.map((col, colIndex) => {\n\t\t\t\t\t\t\t\t\t\t\tif (col.asTd === true) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td // role=\"gridcell\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={`thead-${rowIndex}-${colIndex}-${col.label}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[col.textAlign as string]: typeof col.textAlign === 'string' && col.textAlign.length > 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolSpan={col.colSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trowSpan={col.rowSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tref={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttypeof col.render === 'function'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? (el) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.cellRender(col as KoliBriTableHeaderCellAndData & { render: KoliBriTableRender }, el);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{typeof col.render !== 'function' ? col.label : ''}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tconst headerCell: KoliBriTableHeaderCell = col;\n\t\t\t\t\t\t\t\t\t\t\t\tlet sortDirection = undefined;\n\t\t\t\t\t\t\t\t\t\t\t\tlet shortSortDirection: KoliBriSortDirection = 'NOS';\n\t\t\t\t\t\t\t\t\t\t\t\tlet sortButtonIcon = 'codicon codicon-fold';\n\t\t\t\t\t\t\t\t\t\t\t\tif (headerCell.key) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst data = this.sortData.find((value) => value.key === headerCell.key);\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (data) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tshortSortDirection = data.direction;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tswitch (data.direction) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-up';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortDirection = 'ascending';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-down';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortDirection = 'descending';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tif (headerCell.key === this.sortedColumnHead.key) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tshortSortDirection = this.sortedColumnHead.sortDirection;\n\t\t\t\t\t\t\t\t\t\t\t\t\tswitch (this.sortedColumnHead.sortDirection) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-up';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortDirection = 'ascending';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-down';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsortDirection = 'descending';\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass={col.textAlign ? `align-${col.textAlign}` : undefined}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={`thead-${rowIndex}-${colIndex}-${headerCell.label}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tscope={typeof headerCell.colSpan === 'number' && headerCell.colSpan > 1 ? 'colgroup' : 'col'}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolSpan={headerCell.colSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trowSpan={headerCell.rowSpan}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-sort={sortDirection}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-sort={`sort-${shortSortDirection}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{!this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function') ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"table-sort-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_icons={{ right: sortButtonIcon }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_label={col.label}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick: () => this.changeCellSort(headerCell),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcol.label\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<tbody>{dataField.map(this.renderTableRow)}</tbody>\n\t\t\t\t\t\t{this.state._dataFoot.length > 0 ? this.renderFoot() : ''}\n\t\t\t\t\t</table>\n\t\t\t\t</div>\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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"}
+{"version":3,"names":["KolTable","render","h","KolTableStatefulTag","key","_allowMultiSort","this","_data","_dataFoot","_headers","_label","_minWidth","_pagination","_paginationPosition"],"sources":["src/components/table/component.tsx"],"sourcesContent":["import type { KoliBriTableDataType, KoliBriTableHeaders, KoliBriTablePaginationProps, PaginationPositionPropType, Stringified, TableProps } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { h } from '@stencil/core';\nimport { Component, Prop } from '@stencil/core';\nimport { KolTableStatefulTag } from '../../core/component-names';\n\n/**\n * @deprecated Use KolTableStateful instead.\n */\n@Component({\n\ttag: 'kol-table',\n\tshadow: true,\n})\nexport class KolTable implements TableProps {\n\t/**\n\t * Defines whether to allow multi sort.\n\t */\n\t@Prop() public _allowMultiSort?: boolean;\n\n\t/**\n\t * Defines the primary table data.\n\t */\n\t@Prop() public _data!: Stringified<KoliBriTableDataType[]>;\n\n\t/**\n\t * Defines the data for the table footer.\n\t */\n\t@Prop() public _dataFoot?: Stringified<KoliBriTableDataType[]>;\n\n\t/**\n\t * Defines the horizontal and vertical table headers.\n\t */\n\t@Prop() public _headers!: Stringified<KoliBriTableHeaders>;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Defines the table min-width.\n\t */\n\t@Prop() public _minWidth?: string;\n\n\t/**\n\t * Defines whether to show the data distributed over multiple pages.\n\t */\n\t@Prop() public _pagination?: boolean | Stringified<KoliBriTablePaginationProps>;\n\t/**\n\t * Controls the position of the pagination.\n\t */\n\t@Prop() public _paginationPosition?: PaginationPositionPropType = 'bottom';\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTableStatefulTag\n\t\t\t\t_allowMultiSort={this._allowMultiSort}\n\t\t\t\t_data={this._data}\n\t\t\t\t_dataFoot={this._dataFoot}\n\t\t\t\t_headers={this._headers}\n\t\t\t\t_label={this._label}\n\t\t\t\t_minWidth={this._minWidth}\n\t\t\t\t_pagination={this._pagination}\n\t\t\t\t_paginationPosition={this._paginationPosition}\n\t\t\t/>\n\t\t);\n\t}\n}\n"],"mappings":";;;uGAaaA,EAAQ,M,iOAsC8C,Q,CAE3D,MAAAC,GACN,OACCC,EAACC,EAAmB,CAAAC,IAAA,2CACnBC,gBAAiBC,KAAKD,gBACtBE,MAAOD,KAAKC,MACZC,UAAWF,KAAKE,UAChBC,SAAUH,KAAKG,SACfC,OAAQJ,KAAKI,OACbC,UAAWL,KAAKK,UAChBC,YAAaN,KAAKM,YAClBC,oBAAqBP,KAAKO,qB"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as t,H as i,g as e}from"./index-59e9528b.js";import{R as o,ar as s,v as a,f as l,L as r,k as d,a5 as h,u as b,x as c,as as u}from"./index-fbc0a5be.js";import{t as f}from"./i18n-7a7ff96e.js";import{c as p,i as g}from"./component-names-61247f2f.js";import"./i18n-0c047df5.js";const m="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-button-group-wc {\n    display: inline-flex;\n    flex-wrap: wrap;\n  }\n  .kol-button-group-wc button {\n    border-bottom-color: transparent;\n    border-bottom-style: solid;\n    display: block;\n  }\n  div.grid,\n  div[role=tabpanel] {\n    height: 100%;\n  }\n  :host > .tabs-align-right {\n    display: grid;\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-right .kol-button-group-wc {\n    display: grid;\n    order: 2;\n  }\n  :host > .tabs-align-left {\n    display: grid;\n    grid-template-columns: auto 1fr;\n  }\n  :host > .tabs-align-left .kol-button-group-wc {\n    display: grid;\n    order: 0;\n  }\n  :host > .tabs-align-bottom {\n    display: grid;\n    grid-template-rows: 1fr auto;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc {\n    order: 2;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc > div {\n    display: flex;\n  }\n  :host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n    margin: 0 1em 0 0;\n  }\n  :host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n    margin: 0 1em;\n  }\n  :host > .tabs-align-top {\n    display: grid;\n    grid-template-rows: auto 1fr;\n  }\n  :host > .tabs-align-top .kol-button-group-wc {\n    order: 0;\n  }\n  :host > .tabs-align-top .kol-button-group-wc > div {\n    display: flex;\n  }\n  :host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n    margin: 0 1em 0 0;\n  }\n  :host > .tabs-align-top > .kol-button-group-wc > div > div {\n    margin: 0 1em;\n  }\n  :host > div {\n    display: grid;\n  }\n  :host > .tabs-align-left .kol-button-group-wc,\n  :host > .tabs-align-top .kol-button-group-wc {\n    order: 0;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc,\n  :host > .tabs-align-right .kol-button-group-wc {\n    order: 1;\n  }\n  :host > div.tabs-align-left .kol-button-group-wc > div,\n  :host > div.tabs-align-left .kol-button-group-wc > div > div,\n  :host > div.tabs-align-right .kol-button-group-wc > div,\n  :host > div.tabs-align-right .kol-button-group-wc > div > div {\n    display: grid;\n  }\n  :host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n  :host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n    width: 100%;\n  }\n  :host > div.tabs-align-bottom .kol-button-group-wc div,\n  :host > div.tabs-align-top .kol-button-group-wc div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n}",v=m,w=class{constructor(t){n(this,t),this.onCreateLabel=`${f("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,n)=>{if(n>0){if(e+n<t.length)return t[e+n]._disabled?this.nextPossibleTabIndex(t,e,n+1):e+n}else if(n<0&&e+n>=0)return t[e+n]._disabled?this.nextPossibleTabIndex(t,e,n-1):e+n;return e},this.onKeyDown=t=>{let e=null;switch(t.key){case"ArrowRight":e=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,1);break;case"ArrowLeft":e=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,-1)}null!==e&&this.onSelect(t,e)},this.onClickSelect=(t,e)=>{this.onSelect(t,e)},this.onMouseDown=t=>{t.preventDefault(),t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,n=!0,a)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===n){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,a||t);t=a||t,n=!1}if(!1===n){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,a||t);o("[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.")}}return t},this.syncSelectedAndTabs=(t,e,n,a)=>{let i,o;i="_selected"===a?t:this.state._selected,o="_tabs"===a?t:this.state._tabs,o.length>0&&e.set("_selected",this.selectNextNotDisabledTab(i,o))},this.handleTabPanels=()=>{var t,e,n;if(this.tabPanelHost instanceof HTMLDivElement)for(let a=this.tabPanelHost.children.length;a<this.state._tabs.length;a++){const i=document.createElement("div");i.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${a}`),i.setAttribute("id",`tabpanel-${a}`),i.setAttribute("role","tabpanel"),i.setAttribute("hidden","");const o=document.createElement("slot");o.setAttribute("name",`tabpanel-slot-${a}`),i.appendChild(o),this.tabPanelHost.appendChild(i),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[a])&&(null===(n=this.host)||void 0===n||n.children[a].setAttribute("slot",`tabpanel-slot-${a}`))}},this.onCreate=t=>{var e,n;t.preventDefault(),t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(n=this.state._on)||void 0===n||n.onCreate(t))},this._align="top",this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]}}renderButtonGroup(){return t(g,{class:"tabs-button-group",role:"tablist","aria-label":this.state._label,onKeyDown:this.onKeyDown},this.state._tabs.map(((e,n)=>t(p,{_disabled:e._disabled,_icons:e._icons,_hideLabel:e._hideLabel,_label:e._label,_on:this.callbacks,_tabIndex:this.state._selected===n?0:-1,_tooltipAlign:e._tooltipAlign,_variant:this.state._selected===n?"custom":void 0,_customClass:this.state._selected===n?"selected":void 0,_ariaControls:`tabpanel-${n}`,_ariaSelected:this.state._selected===n,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${n}`,_role:"tab",_value:n}))),this.showCreateTab&&t(p,{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return t(i,{key:"57bc5eb1700fdd03afd712843b7c5c9995a1ef87",class:"kol-tabs"},t("div",{key:"8328b21303df5ae29a4c6070c9edfad7802e45af",ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._align}`]:!0}},this.renderButtonGroup(),t("div",{key:"65990fd3953ff000fadb11f03dae5ad967cc5996",class:"tabs-content",ref:this.catchTabPanelHost})))}validateAlign(t){s(this,t)}validateLabel(t){a(this,t,{required:!0})}validateOn(t){if("object"==typeof t&&null!==t){l("[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:r.debug("[KolTabs] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt."),"function"==typeof t.onCreate.callback?e.onCreate=t.onCreate.callback:r.debug("[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.")):e.onCreate=t.onCreate,this.showCreateTab="function"==typeof e.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),d(this,"_on",e)}}validateSelected(t){h(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){b(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),c("KolTabs",this.state._tabs.length)}componentWillLoad(){this.validateAlign(this._align),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs)}componentDidRender(){if(this.handleTabPanels(),this.tabPanelHost instanceof HTMLDivElement)for(let t=0;t<this.tabPanelHost.children.length;t++)t!==this.state._selected?this.tabPanelHost.children[t].setAttribute("hidden",""):this.tabPanelHost.children[t].removeAttribute("hidden")}onSelect(t,e){var n,a;if(this._selected=e,"function"==typeof(null===(n=this._on)||void 0===n?void 0:n.onSelect)&&(null===(a=this._on)||void 0===a||a.onSelect(t,e)),this.tabPanelsElement){const t=u(`button#${this.state._label.replace(/\s/g,"-")}-tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}get host(){return e(this)}static get watchers(){return{_align:["validateAlign"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};w.style={default:v};export{w as kol_tabs};
+import{r as n,h as t,H as i,g as e}from"./index-3fbcceca.js";import{t as o}from"./i18n-37baa421.js";import{c as s,i as a}from"./component-names-ed22f86e.js";import{a as l}from"./align-fc528dec.js";import{j as r,f as d,s as h,k as b,g as c,h as u,t as f}from"./prop.validators-29d576d2.js";import{v as p}from"./label-e56ffdc6.js";import{L as g}from"./dev.utils-1ca991a2.js";import"./i18n-0c047df5.js";import"./reuse-b66836de.js";import"./index-4a3076fc.js";const m="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button-group-wc {\n    display: inline-flex;\n    flex-wrap: wrap;\n  }\n  .kol-button-group-wc button {\n    border-bottom-color: transparent;\n    border-bottom-style: solid;\n    display: block;\n  }\n  div.grid,\n  div[role=tabpanel] {\n    height: 100%;\n  }\n  :host > .tabs-align-right {\n    display: grid;\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-right .kol-button-group-wc {\n    display: grid;\n    order: 2;\n  }\n  :host > .tabs-align-left {\n    display: grid;\n    grid-template-columns: auto 1fr;\n  }\n  :host > .tabs-align-left .kol-button-group-wc {\n    display: grid;\n    order: 0;\n  }\n  :host > .tabs-align-bottom {\n    display: grid;\n    grid-template-rows: 1fr auto;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc {\n    order: 2;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc > div {\n    display: flex;\n  }\n  :host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n    margin: 0 1em 0 0;\n  }\n  :host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n    margin: 0 1em;\n  }\n  :host > .tabs-align-top {\n    display: grid;\n    grid-template-rows: auto 1fr;\n  }\n  :host > .tabs-align-top .kol-button-group-wc {\n    order: 0;\n  }\n  :host > .tabs-align-top .kol-button-group-wc > div {\n    display: flex;\n  }\n  :host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n    margin: 0 1em 0 0;\n  }\n  :host > .tabs-align-top > .kol-button-group-wc > div > div {\n    margin: 0 1em;\n  }\n  :host > div {\n    display: grid;\n  }\n  :host > .tabs-align-left .kol-button-group-wc,\n  :host > .tabs-align-top .kol-button-group-wc {\n    order: 0;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc,\n  :host > .tabs-align-right .kol-button-group-wc {\n    order: 1;\n  }\n  :host > div.tabs-align-left .kol-button-group-wc > div,\n  :host > div.tabs-align-left .kol-button-group-wc > div > div,\n  :host > div.tabs-align-right .kol-button-group-wc > div,\n  :host > div.tabs-align-right .kol-button-group-wc > div > div {\n    display: grid;\n  }\n  :host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n  :host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n    width: 100%;\n  }\n  :host > div.tabs-align-bottom .kol-button-group-wc div,\n  :host > div.tabs-align-top .kol-button-group-wc div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n}",v=m,w=class{constructor(t){n(this,t),this.onCreateLabel=`${o("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,n)=>{if(n>0){if(e+n<t.length)return t[e+n]._disabled?this.nextPossibleTabIndex(t,e,n+1):e+n}else if(n<0&&e+n>=0)return t[e+n]._disabled?this.nextPossibleTabIndex(t,e,n-1):e+n;return e},this.onKeyDown=t=>{let e=null;switch(t.key){case"ArrowRight":e=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,1);break;case"ArrowLeft":e=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,-1)}null!==e&&this.onSelect(t,e)},this.onClickSelect=(t,e)=>{this.onSelect(t,e)},this.onMouseDown=t=>{t.preventDefault(),t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,n=!0,a)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===n){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,a||t);t=a||t,n=!1}if(!1===n){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,a||t);r("[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.")}}return t},this.syncSelectedAndTabs=(t,e,n,a)=>{let i,o;i="_selected"===a?t:this.state._selected,o="_tabs"===a?t:this.state._tabs,o.length>0&&e.set("_selected",this.selectNextNotDisabledTab(i,o))},this.handleTabPanels=()=>{var t,e,n;if(this.tabPanelHost instanceof HTMLDivElement)for(let a=this.tabPanelHost.children.length;a<this.state._tabs.length;a++){const i=document.createElement("div");i.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${a}`),i.setAttribute("id",`tabpanel-${a}`),i.setAttribute("role","tabpanel"),i.setAttribute("hidden","");const o=document.createElement("slot");o.setAttribute("name",`tabpanel-slot-${a}`),i.appendChild(o),this.tabPanelHost.appendChild(i),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[a])&&(null===(n=this.host)||void 0===n||n.children[a].setAttribute("slot",`tabpanel-slot-${a}`))}},this.onCreate=t=>{var e,n;t.preventDefault(),t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(n=this.state._on)||void 0===n||n.onCreate(t))},this._align="top",this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]}}renderButtonGroup(){return t(a,{class:"tabs-button-group",role:"tablist","aria-label":this.state._label,onKeyDown:this.onKeyDown},this.state._tabs.map(((e,n)=>t(s,{_disabled:e._disabled,_icons:e._icons,_hideLabel:e._hideLabel,_label:e._label,_on:this.callbacks,_tabIndex:this.state._selected===n?0:-1,_tooltipAlign:e._tooltipAlign,_variant:this.state._selected===n?"custom":void 0,_customClass:this.state._selected===n?"selected":void 0,_ariaControls:`tabpanel-${n}`,_ariaSelected:this.state._selected===n,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${n}`,_role:"tab",_value:n}))),this.showCreateTab&&t(s,{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return t(i,{key:"e36b32000d1ea25d35f8fba6f67a5c6aa57543b8",class:"kol-tabs"},t("div",{key:"37f564d3a8f5998a277293e8d2100de5f6efc99e",ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._align}`]:!0}},this.renderButtonGroup(),t("div",{key:"8acaea80ef08b28174c3502d8b502c8b7abb1008",class:"tabs-content",ref:this.catchTabPanelHost})))}validateAlign(t){l(this,t)}validateLabel(t){p(this,t,{required:!0})}validateOn(t){if("object"==typeof t&&null!==t){d("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const e={};"function"!=typeof t.onCreate&&"object"!=typeof t.onCreate||("object"==typeof t.onCreate?("string"==typeof t.onCreate.label&&t.onCreate.label.length>0?this.onCreateLabel=t.onCreate.label:g.debug("[KolTabs] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt."),"function"==typeof t.onCreate.callback?e.onCreate=t.onCreate.callback:g.debug("[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.")):e.onCreate=t.onCreate,this.showCreateTab="function"==typeof e.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),h(this,"_on",e)}}validateSelected(t){b(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){c(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),u("KolTabs",this.state._tabs.length)}componentWillLoad(){this.validateAlign(this._align),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs)}componentDidRender(){if(this.handleTabPanels(),this.tabPanelHost instanceof HTMLDivElement)for(let t=0;t<this.tabPanelHost.children.length;t++)t!==this.state._selected?this.tabPanelHost.children[t].setAttribute("hidden",""):this.tabPanelHost.children[t].removeAttribute("hidden")}onSelect(t,e){var n,a;if(this._selected=e,"function"==typeof(null===(n=this._on)||void 0===n?void 0:n.onSelect)&&(null===(a=this._on)||void 0===a||a.onSelect(t,e)),this.tabPanelsElement){const t=f(`button#${this.state._label.replace(/\s/g,"-")}-tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}get host(){return e(this)}static get watchers(){return{_align:["validateAlign"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};w.style={default:v};export{w as kol_tabs};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolTabsDefaultStyle0","KolTabs","this","onCreateLabel","translate","showCreateTab","nextPossibleTabIndex","tabs","offset","step","length","_disabled","onKeyDown","event","selectedIndex","key","state","_tabs","_selected","onSelect","onClickSelect","index","onMouseDown","preventDefault","stopPropagation","callbacks","onClick","catchTabPanelHost","el","tabPanelHost","selectNextNotDisabledTab","selected","upOrDown","initialSelected","Array","isArray","devHint","syncSelectedAndTabs","nextValue","nextState","_component","set","handleTabPanels","HTMLDivElement","i","children","div","document","createElement","setAttribute","_label","replace","slot","appendChild","_a","host","HTMLCollection","_b","_c","onCreate","_on","_align","renderButtonGroup","h","KolButtonGroupWcTag","class","role","map","button","KolButtonWcTag","_icons","_hideLabel","_tabIndex","_tooltipAlign","_variant","undefined","_customClass","_ariaControls","_ariaSelected","_id","_role","_value","render","Host","ref","tabPanelsElement","validateAlign","value","validateLabel","required","validateOn","featureHint","label","Log","debug","callback","setState","validateSelected","watchNumber","hooks","beforePatch","validateTabs","watchJsonArrayString","item","uiUxHintMillerscheZahl","componentWillLoad","componentDidRender","removeAttribute","koliBriQuerySelector","focus"],"sources":["src/components/tabs/style.scss?tag=kol-tabs&mode=default&encapsulation=shadow","src/components/tabs/component.tsx"],"sourcesContent":["@import '../style';\n@import '../host-display-block';\n\n@layer kol-component {\n\t.kol-button-group-wc {\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t}\n\n\t.kol-button-group-wc button {\n\t\tborder-bottom-color: transparent;\n\t\tborder-bottom-style: solid;\n\t\tdisplay: block;\n\t}\n\n\tdiv.grid,\n\tdiv[role='tabpanel'] {\n\t\theight: 100%;\n\t}\n\n\t:host > .tabs-align-right {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\n\t:host > .tabs-align-right .kol-button-group-wc {\n\t\tdisplay: grid;\n\t\torder: 2;\n\t}\n\n\t:host > .tabs-align-left {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: auto 1fr;\n\t}\n\n\t:host > .tabs-align-left .kol-button-group-wc {\n\t\tdisplay: grid;\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-bottom {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: 1fr auto;\n\t}\n\n\t:host > .tabs-align-bottom .kol-button-group-wc {\n\t\torder: 2;\n\t}\n\n\t:host > .tabs-align-bottom .kol-button-group-wc > div {\n\t\tdisplay: flex;\n\t}\n\n\t:host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n\t\tmargin: 0 1em 0 0;\n\t}\n\n\t:host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n\t\tmargin: 0 1em;\n\t}\n\n\t:host > .tabs-align-top {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: auto 1fr;\n\t}\n\n\t:host > .tabs-align-top .kol-button-group-wc {\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-top .kol-button-group-wc > div {\n\t\tdisplay: flex;\n\t}\n\n\t:host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n\t\tmargin: 0 1em 0 0;\n\t}\n\n\t:host > .tabs-align-top > .kol-button-group-wc > div > div {\n\t\tmargin: 0 1em;\n\t}\n\n\t:host > div {\n\t\tdisplay: grid;\n\t}\n\n\t:host > .tabs-align-left .kol-button-group-wc,\n\t:host > .tabs-align-top .kol-button-group-wc {\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-bottom .kol-button-group-wc,\n\t:host > .tabs-align-right .kol-button-group-wc {\n\t\torder: 1;\n\t}\n\n\t:host > div.tabs-align-left .kol-button-group-wc > div,\n\t:host > div.tabs-align-left .kol-button-group-wc > div > div,\n\t:host > div.tabs-align-right .kol-button-group-wc > div,\n\t:host > div.tabs-align-right .kol-button-group-wc > div > div {\n\t\tdisplay: grid;\n\t}\n\n\t:host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n\t:host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n\t\twidth: 100%;\n\t}\n\n\t:host > div.tabs-align-bottom .kol-button-group-wc div,\n\t:host > div.tabs-align-top .kol-button-group-wc div {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n}\n","import type {\n\tAlignPropType,\n\tButtonCallbacksPropType,\n\tKoliBriTabsCallbacks,\n\tLabelPropType,\n\tStencilUnknown,\n\tStringified,\n\tTabButtonProps,\n\tTabsAPI,\n\tTabsStates,\n} from '@public-ui/schema';\nimport {\n\tdevHint,\n\tfeatureHint,\n\tkoliBriQuerySelector,\n\tLog,\n\tsetState,\n\tuiUxHintMillerscheZahl,\n\tvalidateAlign,\n\tvalidateLabel,\n\twatchJsonArrayString,\n\twatchNumber,\n} from '@public-ui/schema';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type { JSX } from '@stencil/core';\nimport type { Generic } from 'adopted-style-sheets';\nimport { KolButtonGroupWcTag, KolButtonWcTag } from '../../core/component-names';\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements TabsAPI {\n\t@Element() private readonly host?: HTMLKolTabsElement;\n\tprivate tabPanelsElement?: HTMLElement;\n\tprivate onCreateLabel = `${translate('kol-new')} …`;\n\tprivate showCreateTab = false;\n\n\tprivate nextPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step: number): number => {\n\t\tif (step > 0) {\n\t\t\tif (offset + step < tabs.length) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t} else if (step < 0) {\n\t\t\tif (offset + step >= 0) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step - 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t}\n\t\treturn offset;\n\t};\n\n\tprivate onKeyDown = (event: KeyboardEvent) => {\n\t\tlet selectedIndex: number | null = null;\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowRight':\n\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, 1);\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowLeft':\n\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, -1);\n\t\t\t\tbreak;\n\t\t}\n\t\tif (selectedIndex !== null) {\n\t\t\tthis.onSelect(event, selectedIndex);\n\t\t}\n\t};\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.onSelect(event, index);\n\t};\n\n\t// private readonly onClickClose = (event: Event, button: TabButtonProps, index: number) => {\n\t// \tevent.preventDefault();\n\t// \tevent.stopPropagation();\n\t// \tthis.onClose(button, event, index);\n\t// };\n\n\tprivate readonly onMouseDown = (event: Event): void => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t};\n\n\tprivate readonly callbacks: ButtonCallbacksPropType<number> = {\n\t\tonClick: this.onClickSelect,\n\t\tonMouseDown: this.onMouseDown,\n\t};\n\n\tprivate renderButtonGroup() {\n\t\treturn (\n\t\t\t<KolButtonGroupWcTag class=\"tabs-button-group\" role=\"tablist\" aria-label={this.state._label} onKeyDown={this.onKeyDown}>\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t_disabled={button._disabled}\n\t\t\t\t\t\t_icons={button._icons}\n\t\t\t\t\t\t_hideLabel={button._hideLabel}\n\t\t\t\t\t\t_label={button._label} // TODO: ariaLabel-Konzept prüfen\n\t\t\t\t\t\t_on={this.callbacks as ButtonCallbacksPropType<StencilUnknown>}\n\t\t\t\t\t\t_tabIndex={this.state._selected === index ? 0 : -1}\n\t\t\t\t\t\t_tooltipAlign={button._tooltipAlign}\n\t\t\t\t\t\t_variant={this.state._selected === index ? 'custom' : undefined}\n\t\t\t\t\t\t_customClass={this.state._selected === index ? 'selected' : undefined}\n\t\t\t\t\t\t_ariaControls={`tabpanel-${index}`}\n\t\t\t\t\t\t_ariaSelected={this.state._selected === index}\n\t\t\t\t\t\t_id={`${this.state._label.replace(/\\s/g, '-')}-tab-${index}`}\n\t\t\t\t\t\t_role=\"tab\"\n\t\t\t\t\t\t_value={index}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t))}\n\t\t\t\t{this.showCreateTab && (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"create-button\"\n\t\t\t\t\t\t_label={this.onCreateLabel}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: this.onCreate,\n\t\t\t\t\t\t}}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t)}\n\t\t\t</KolButtonGroupWcTag>\n\t\t);\n\t}\n\n\tprivate tabPanelHost?: HTMLDivElement;\n\n\tprivate readonly catchTabPanelHost = (el?: HTMLDivElement) => {\n\t\tthis.tabPanelHost = el;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-tabs\">\n\t\t\t\t<div\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.tabPanelsElement = el as HTMLElement;\n\t\t\t\t\t}}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[`tabs-align-${this.state._align}`]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.renderButtonGroup()}\n\t\t\t\t\t<div class=\"tabs-content\" ref={this.catchTabPanelHost}>\n\t\t\t\t\t\t{/* <slot /> */}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the position of the tab captions.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.\n\t */\n\t@Prop() public _on?: KoliBriTabsCallbacks;\n\n\t/**\n\t * Defines which tab is active.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _selected?: number = 0;\n\n\t/**\n\t * Defines the tab captions.\n\t */\n\t@Prop() public _tabs!: Stringified<TabButtonProps[]>;\n\n\t@State() public state: TabsStates = {\n\t\t_align: 'top',\n\t\t_label: '', // ⚠ required\n\t\t_selected: 0,\n\t\t_tabs: [],\n\t};\n\n\tprivate selectNextNotDisabledTab = (selected: number, tabs: TabButtonProps[], upOrDown = true, initialSelected?: number): number => {\n\t\tif (selected > tabs.length - 1) {\n\t\t\tselected = tabs.length - 1;\n\t\t}\n\t\tif (selected < 0) {\n\t\t\tselected = 0;\n\t\t}\n\t\tif (Array.isArray(tabs) && tabs[selected]) {\n\t\t\tif (tabs[selected]._disabled) {\n\t\t\t\tif (upOrDown === true) {\n\t\t\t\t\tif (selected < tabs.length - 1) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected + 1, tabs, true, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tselected = initialSelected || selected;\n\t\t\t\t\t\tupOrDown = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (upOrDown === false) {\n\t\t\t\t\tif (selected > 0) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected - 1, tabs, false, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdevHint(`[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.`);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn selected;\n\t};\n\n\tprivate syncSelectedAndTabs = (nextValue: unknown, nextState: Map<string, unknown>, _component: Generic.Element.Component, key: string) => {\n\t\tlet selected: number;\n\t\tif (key === '_selected') {\n\t\t\tselected = nextValue as number;\n\t\t} else {\n\t\t\tselected = this.state._selected;\n\t\t}\n\t\tlet tabs: TabButtonProps[];\n\t\tif (key === '_tabs') {\n\t\t\ttabs = nextValue as TabButtonProps[];\n\t\t} else {\n\t\t\ttabs = this.state._tabs;\n\t\t}\n\t\tif (tabs.length > 0) {\n\t\t\tnextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));\n\t\t}\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType) {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriTabsCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tfeatureHint('[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.');\n\t\t\tconst callbacks: KoliBriTabsCallbacks = {};\n\t\t\tif (typeof value.onCreate === 'function' || typeof value.onCreate === 'object') {\n\t\t\t\tif (typeof value.onCreate === 'object') {\n\t\t\t\t\tif (typeof value.onCreate.label === 'string' && value.onCreate.label.length > 0) {\n\t\t\t\t\t\tthis.onCreateLabel = value.onCreate.label;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tLog.debug(\n\t\t\t\t\t\t\t`[KolTabs] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt.`,\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\tif (typeof value.onCreate.callback === 'function') {\n\t\t\t\t\t\tcallbacks.onCreate = value.onCreate.callback;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tLog.debug(\n\t\t\t\t\t\t\t`[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.`,\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tcallbacks.onCreate = value.onCreate;\n\t\t\t\t}\n\t\t\t\tthis.showCreateTab = typeof callbacks.onCreate === 'function';\n\t\t\t}\n\t\t\tif (typeof value.onSelect === 'function') {\n\t\t\t\tcallbacks.onSelect = value.onSelect;\n\t\t\t}\n\t\t\tsetState<KoliBriTabsCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_selected')\n\tpublic validateSelected(value?: number): void {\n\t\twatchNumber(this, '_selected', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_tabs')\n\tpublic validateTabs(value?: Stringified<TabButtonProps[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis,\n\t\t\t'_tabs',\n\t\t\t(item: TabButtonProps) => typeof item === 'object' && item !== null && typeof item._label === 'string' && item._label.length > 0,\n\t\t\tvalue,\n\t\t\tundefined,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t\t},\n\t\t\t},\n\t\t);\n\t\tuiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t}\n\n\tprivate readonly handleTabPanels = () => {\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = this.tabPanelHost.children.length; i < this.state._tabs.length; i++) {\n\t\t\t\tconst div = document.createElement('div');\n\t\t\t\tdiv.setAttribute('aria-labelledby', `${this.state._label.replace(/\\s/g, '-')}-tab-${i}`);\n\t\t\t\tdiv.setAttribute('id', `tabpanel-${i}`);\n\t\t\t\tdiv.setAttribute('role', 'tabpanel');\n\t\t\t\tdiv.setAttribute('hidden', '');\n\t\t\t\tconst slot = document.createElement('slot');\n\t\t\t\tslot.setAttribute('name', `tabpanel-slot-${i}`);\n\t\t\t\tdiv.appendChild(slot);\n\t\t\t\tthis.tabPanelHost.appendChild(div);\n\t\t\t\tif (this.host?.children instanceof HTMLCollection && this.host?.children[i] /* SSR instanceof HTMLElement */) {\n\t\t\t\t\t// div.appendChild(this.host?.children[0]);\n\t\t\t\t\tthis.host?.children[i].setAttribute('slot', `tabpanel-slot-${i}`);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic componentDidRender(): void {\n\t\tthis.handleTabPanels();\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = 0; i < this.tabPanelHost.children.length; i++) {\n\t\t\t\tif (i !== this.state._selected) {\n\t\t\t\t\tthis.tabPanelHost.children[i].setAttribute('hidden', '');\n\t\t\t\t} else {\n\t\t\t\t\tthis.tabPanelHost.children[i].removeAttribute('hidden');\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate onSelect(event: CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, index: number): void {\n\t\tthis._selected = index;\n\t\tif (typeof this._on?.onSelect === 'function') {\n\t\t\tthis._on?.onSelect(event, index);\n\t\t}\n\t\tif (this.tabPanelsElement /* SSR instanceof HTMLElement */) {\n\t\t\tconst button: HTMLElement | null = koliBriQuerySelector(`button#${this.state._label.replace(/\\s/g, '-')}-tab-${index}`, this.tabPanelsElement);\n\t\t\tbutton?.focus();\n\t\t}\n\t}\n\n\tprivate onCreate = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onCreate === 'function') {\n\t\t\tthis.state._on?.onCreate(event);\n\t\t}\n\t};\n}\n"],"mappings":"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"}
+{"version":3,"names":["defaultStyleCss","KolTabsDefaultStyle0","KolTabs","this","onCreateLabel","translate","showCreateTab","nextPossibleTabIndex","tabs","offset","step","length","_disabled","onKeyDown","event","selectedIndex","key","state","_tabs","_selected","onSelect","onClickSelect","index","onMouseDown","preventDefault","stopPropagation","callbacks","onClick","catchTabPanelHost","el","tabPanelHost","selectNextNotDisabledTab","selected","upOrDown","initialSelected","Array","isArray","devHint","syncSelectedAndTabs","nextValue","nextState","_component","set","handleTabPanels","HTMLDivElement","i","children","div","document","createElement","setAttribute","_label","replace","slot","appendChild","_a","host","HTMLCollection","_b","_c","onCreate","_on","_align","renderButtonGroup","h","KolButtonGroupWcTag","class","role","map","button","KolButtonWcTag","_icons","_hideLabel","_tabIndex","_tooltipAlign","_variant","undefined","_customClass","_ariaControls","_ariaSelected","_id","_role","_value","render","Host","ref","tabPanelsElement","validateAlign","value","validateLabel","required","validateOn","featureHint","label","Log","debug","callback","setState","validateSelected","watchNumber","hooks","beforePatch","validateTabs","watchJsonArrayString","item","uiUxHintMillerscheZahl","componentWillLoad","componentDidRender","removeAttribute","koliBriQuerySelector","focus"],"sources":["src/components/tabs/style.scss?tag=kol-tabs&mode=default&encapsulation=shadow","src/components/tabs/component.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../host-display-block';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.kol-button-group-wc {\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t}\n\n\t.kol-button-group-wc button {\n\t\tborder-bottom-color: transparent;\n\t\tborder-bottom-style: solid;\n\t\tdisplay: block;\n\t}\n\n\tdiv.grid,\n\tdiv[role='tabpanel'] {\n\t\theight: 100%;\n\t}\n\n\t:host > .tabs-align-right {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\n\t:host > .tabs-align-right .kol-button-group-wc {\n\t\tdisplay: grid;\n\t\torder: 2;\n\t}\n\n\t:host > .tabs-align-left {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: auto 1fr;\n\t}\n\n\t:host > .tabs-align-left .kol-button-group-wc {\n\t\tdisplay: grid;\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-bottom {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: 1fr auto;\n\t}\n\n\t:host > .tabs-align-bottom .kol-button-group-wc {\n\t\torder: 2;\n\t}\n\n\t:host > .tabs-align-bottom .kol-button-group-wc > div {\n\t\tdisplay: flex;\n\t}\n\n\t:host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n\t\tmargin: 0 1em 0 0;\n\t}\n\n\t:host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n\t\tmargin: 0 1em;\n\t}\n\n\t:host > .tabs-align-top {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: auto 1fr;\n\t}\n\n\t:host > .tabs-align-top .kol-button-group-wc {\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-top .kol-button-group-wc > div {\n\t\tdisplay: flex;\n\t}\n\n\t:host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n\t\tmargin: 0 1em 0 0;\n\t}\n\n\t:host > .tabs-align-top > .kol-button-group-wc > div > div {\n\t\tmargin: 0 1em;\n\t}\n\n\t:host > div {\n\t\tdisplay: grid;\n\t}\n\n\t:host > .tabs-align-left .kol-button-group-wc,\n\t:host > .tabs-align-top .kol-button-group-wc {\n\t\torder: 0;\n\t}\n\n\t:host > .tabs-align-bottom .kol-button-group-wc,\n\t:host > .tabs-align-right .kol-button-group-wc {\n\t\torder: 1;\n\t}\n\n\t:host > div.tabs-align-left .kol-button-group-wc > div,\n\t:host > div.tabs-align-left .kol-button-group-wc > div > div,\n\t:host > div.tabs-align-right .kol-button-group-wc > div,\n\t:host > div.tabs-align-right .kol-button-group-wc > div > div {\n\t\tdisplay: grid;\n\t}\n\n\t:host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n\t:host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n\t\twidth: 100%;\n\t}\n\n\t:host > div.tabs-align-bottom .kol-button-group-wc div,\n\t:host > div.tabs-align-top .kol-button-group-wc div {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n}\n","import type {\n\tAlignPropType,\n\tButtonCallbacksPropType,\n\tKoliBriTabsCallbacks,\n\tLabelPropType,\n\tStencilUnknown,\n\tStringified,\n\tTabButtonProps,\n\tTabsAPI,\n\tTabsStates,\n} from '../../schema';\nimport {\n\tdevHint,\n\tfeatureHint,\n\tkoliBriQuerySelector,\n\tLog,\n\tsetState,\n\tuiUxHintMillerscheZahl,\n\tvalidateAlign,\n\tvalidateLabel,\n\twatchJsonArrayString,\n\twatchNumber,\n} from '../../schema';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type { JSX } from '@stencil/core';\nimport type { Generic } from 'adopted-style-sheets';\nimport { KolButtonGroupWcTag, KolButtonWcTag } from '../../core/component-names';\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements TabsAPI {\n\t@Element() private readonly host?: HTMLKolTabsElement;\n\tprivate tabPanelsElement?: HTMLElement;\n\tprivate onCreateLabel = `${translate('kol-new')} …`;\n\tprivate showCreateTab = false;\n\n\tprivate nextPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step: number): number => {\n\t\tif (step > 0) {\n\t\t\tif (offset + step < tabs.length) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t} else if (step < 0) {\n\t\t\tif (offset + step >= 0) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step - 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t}\n\t\treturn offset;\n\t};\n\n\tprivate onKeyDown = (event: KeyboardEvent) => {\n\t\tlet selectedIndex: number | null = null;\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowRight':\n\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, 1);\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowLeft':\n\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, -1);\n\t\t\t\tbreak;\n\t\t}\n\t\tif (selectedIndex !== null) {\n\t\t\tthis.onSelect(event, selectedIndex);\n\t\t}\n\t};\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.onSelect(event, index);\n\t};\n\n\t// private readonly onClickClose = (event: Event, button: TabButtonProps, index: number) => {\n\t// \tevent.preventDefault();\n\t// \tevent.stopPropagation();\n\t// \tthis.onClose(button, event, index);\n\t// };\n\n\tprivate readonly onMouseDown = (event: Event): void => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t};\n\n\tprivate readonly callbacks: ButtonCallbacksPropType<number> = {\n\t\tonClick: this.onClickSelect,\n\t\tonMouseDown: this.onMouseDown,\n\t};\n\n\tprivate renderButtonGroup() {\n\t\treturn (\n\t\t\t<KolButtonGroupWcTag class=\"tabs-button-group\" role=\"tablist\" aria-label={this.state._label} onKeyDown={this.onKeyDown}>\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t_disabled={button._disabled}\n\t\t\t\t\t\t_icons={button._icons}\n\t\t\t\t\t\t_hideLabel={button._hideLabel}\n\t\t\t\t\t\t_label={button._label} // TODO: ariaLabel-Konzept prüfen\n\t\t\t\t\t\t_on={this.callbacks as ButtonCallbacksPropType<StencilUnknown>}\n\t\t\t\t\t\t_tabIndex={this.state._selected === index ? 0 : -1}\n\t\t\t\t\t\t_tooltipAlign={button._tooltipAlign}\n\t\t\t\t\t\t_variant={this.state._selected === index ? 'custom' : undefined}\n\t\t\t\t\t\t_customClass={this.state._selected === index ? 'selected' : undefined}\n\t\t\t\t\t\t_ariaControls={`tabpanel-${index}`}\n\t\t\t\t\t\t_ariaSelected={this.state._selected === index}\n\t\t\t\t\t\t_id={`${this.state._label.replace(/\\s/g, '-')}-tab-${index}`}\n\t\t\t\t\t\t_role=\"tab\"\n\t\t\t\t\t\t_value={index}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t))}\n\t\t\t\t{this.showCreateTab && (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"create-button\"\n\t\t\t\t\t\t_label={this.onCreateLabel}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: this.onCreate,\n\t\t\t\t\t\t}}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t)}\n\t\t\t</KolButtonGroupWcTag>\n\t\t);\n\t}\n\n\tprivate tabPanelHost?: HTMLDivElement;\n\n\tprivate readonly catchTabPanelHost = (el?: HTMLDivElement) => {\n\t\tthis.tabPanelHost = el;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-tabs\">\n\t\t\t\t<div\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.tabPanelsElement = el as HTMLElement;\n\t\t\t\t\t}}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[`tabs-align-${this.state._align}`]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.renderButtonGroup()}\n\t\t\t\t\t<div class=\"tabs-content\" ref={this.catchTabPanelHost}>\n\t\t\t\t\t\t{/* <slot /> */}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the position of the tab captions.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.\n\t */\n\t@Prop() public _on?: KoliBriTabsCallbacks;\n\n\t/**\n\t * Defines which tab is active.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _selected?: number = 0;\n\n\t/**\n\t * Defines the tab captions.\n\t */\n\t@Prop() public _tabs!: Stringified<TabButtonProps[]>;\n\n\t@State() public state: TabsStates = {\n\t\t_align: 'top',\n\t\t_label: '', // ⚠ required\n\t\t_selected: 0,\n\t\t_tabs: [],\n\t};\n\n\tprivate selectNextNotDisabledTab = (selected: number, tabs: TabButtonProps[], upOrDown = true, initialSelected?: number): number => {\n\t\tif (selected > tabs.length - 1) {\n\t\t\tselected = tabs.length - 1;\n\t\t}\n\t\tif (selected < 0) {\n\t\t\tselected = 0;\n\t\t}\n\t\tif (Array.isArray(tabs) && tabs[selected]) {\n\t\t\tif (tabs[selected]._disabled) {\n\t\t\t\tif (upOrDown === true) {\n\t\t\t\t\tif (selected < tabs.length - 1) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected + 1, tabs, true, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tselected = initialSelected || selected;\n\t\t\t\t\t\tupOrDown = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (upOrDown === false) {\n\t\t\t\t\tif (selected > 0) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected - 1, tabs, false, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdevHint(`[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.`);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn selected;\n\t};\n\n\tprivate syncSelectedAndTabs = (nextValue: unknown, nextState: Map<string, unknown>, _component: Generic.Element.Component, key: string) => {\n\t\tlet selected: number;\n\t\tif (key === '_selected') {\n\t\t\tselected = nextValue as number;\n\t\t} else {\n\t\t\tselected = this.state._selected;\n\t\t}\n\t\tlet tabs: TabButtonProps[];\n\t\tif (key === '_tabs') {\n\t\t\ttabs = nextValue as TabButtonProps[];\n\t\t} else {\n\t\t\ttabs = this.state._tabs;\n\t\t}\n\t\tif (tabs.length > 0) {\n\t\t\tnextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));\n\t\t}\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType) {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriTabsCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tfeatureHint('[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.');\n\t\t\tconst callbacks: KoliBriTabsCallbacks = {};\n\t\t\tif (typeof value.onCreate === 'function' || typeof value.onCreate === 'object') {\n\t\t\t\tif (typeof value.onCreate === 'object') {\n\t\t\t\t\tif (typeof value.onCreate.label === 'string' && value.onCreate.label.length > 0) {\n\t\t\t\t\t\tthis.onCreateLabel = value.onCreate.label;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tLog.debug(\n\t\t\t\t\t\t\t`[KolTabs] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt.`,\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\tif (typeof value.onCreate.callback === 'function') {\n\t\t\t\t\t\tcallbacks.onCreate = value.onCreate.callback;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tLog.debug(\n\t\t\t\t\t\t\t`[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.`,\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tcallbacks.onCreate = value.onCreate;\n\t\t\t\t}\n\t\t\t\tthis.showCreateTab = typeof callbacks.onCreate === 'function';\n\t\t\t}\n\t\t\tif (typeof value.onSelect === 'function') {\n\t\t\t\tcallbacks.onSelect = value.onSelect;\n\t\t\t}\n\t\t\tsetState<KoliBriTabsCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_selected')\n\tpublic validateSelected(value?: number): void {\n\t\twatchNumber(this, '_selected', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_tabs')\n\tpublic validateTabs(value?: Stringified<TabButtonProps[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis,\n\t\t\t'_tabs',\n\t\t\t(item: TabButtonProps) => typeof item === 'object' && item !== null && typeof item._label === 'string' && item._label.length > 0,\n\t\t\tvalue,\n\t\t\tundefined,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t\t},\n\t\t\t},\n\t\t);\n\t\tuiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t}\n\n\tprivate readonly handleTabPanels = () => {\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = this.tabPanelHost.children.length; i < this.state._tabs.length; i++) {\n\t\t\t\tconst div = document.createElement('div');\n\t\t\t\tdiv.setAttribute('aria-labelledby', `${this.state._label.replace(/\\s/g, '-')}-tab-${i}`);\n\t\t\t\tdiv.setAttribute('id', `tabpanel-${i}`);\n\t\t\t\tdiv.setAttribute('role', 'tabpanel');\n\t\t\t\tdiv.setAttribute('hidden', '');\n\t\t\t\tconst slot = document.createElement('slot');\n\t\t\t\tslot.setAttribute('name', `tabpanel-slot-${i}`);\n\t\t\t\tdiv.appendChild(slot);\n\t\t\t\tthis.tabPanelHost.appendChild(div);\n\t\t\t\tif (this.host?.children instanceof HTMLCollection && this.host?.children[i] /* SSR instanceof HTMLElement */) {\n\t\t\t\t\t// div.appendChild(this.host?.children[0]);\n\t\t\t\t\tthis.host?.children[i].setAttribute('slot', `tabpanel-slot-${i}`);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic componentDidRender(): void {\n\t\tthis.handleTabPanels();\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = 0; i < this.tabPanelHost.children.length; i++) {\n\t\t\t\tif (i !== this.state._selected) {\n\t\t\t\t\tthis.tabPanelHost.children[i].setAttribute('hidden', '');\n\t\t\t\t} else {\n\t\t\t\t\tthis.tabPanelHost.children[i].removeAttribute('hidden');\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate onSelect(event: CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, index: number): void {\n\t\tthis._selected = index;\n\t\tif (typeof this._on?.onSelect === 'function') {\n\t\t\tthis._on?.onSelect(event, index);\n\t\t}\n\t\tif (this.tabPanelsElement /* SSR instanceof HTMLElement */) {\n\t\t\tconst button: HTMLElement | null = koliBriQuerySelector(`button#${this.state._label.replace(/\\s/g, '-')}-tab-${index}`, this.tabPanelsElement);\n\t\t\tbutton?.focus();\n\t\t}\n\t}\n\n\tprivate onCreate = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onCreate === 'function') {\n\t\t\tthis.state._on?.onCreate(event);\n\t\t}\n\t};\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as e,F as t,H as n,r as i,g as a}from"./index-59e9528b.js";import{z as s,a5 as l,A as o,w as r,at as d,am as h,h as c,k as u,I as p}from"./index-fbc0a5be.js";import{n as f}from"./dev.utils-6d9b92c3.js";import{I as m,g as b}from"./controller-f47b7bfc.js";import{I as y}from"./InternalUnderlinedAccessKey-864ae1a6.js";import{l as v}from"./component-names-61247f2f.js";import"./events-29e84d75.js";import"./associated.controller-c5369a0d.js";class g extends m{constructor(e,t,n){super(e,t,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=e}validateHasCounter(e){s(this.component,"_hasCounter",e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(e){l(this.component,"_maxLength",e,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(e){o(this.component,"_placeholder",e)}validateReadOnly(e){s(this.component,"_readOnly",e)}validateResize(e){r(this.component,"_resize",(e=>"string"==typeof e&&d.includes(e)),new Set(`String {${d.join(", ")}`),e)}validateRequired(e){s(this.component,"_required",e)}validateRows(e){h(this.component,e)}validateValue(e){o(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const _="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {}",w=_,k=e=>{e.style.overflow="hidden";const t=e.rows,n=e.clientHeight/t;e.rows=1;const a=Math.round(e.scrollHeight/n);return e.rows=t,a},x=class{async getValue(){var e;return null===(e=this.ref)||void 0===e?void 0:e.value}render(){const{ariaDescribedBy:a}=b(this.state),i=p(this.state._label);return e(n,{key:"3d5ee3669252dffbcb340b902650598d611df49f",class:{"kol-textarea":!0,"has-value":this.state._hasValue}},e(v,{key:"69e955f9690881ccbd5d5db48cf4f9f594f291b0",class:{textarea:!0,"hide-label":!!this.state._hideLabel,"has-counter":!!this.state._hasCounter},_accessKey:this.state._accessKey,_alert:this.state._alert,_currentLength:this.state._currentLength,_disabled:this.state._disabled,_hideError:this.state._hideError,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_label:this.state._label,_maxLength:this.state._maxLength,_msg:this.state._msg,_readOnly:this.state._readOnly,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.ref)||void 0===e?void 0:e.focus()},role:"presentation"},e("span",{key:"64284196176becf255a7155028011add755fe9af",slot:"label"},i?e("slot",{name:"expert"}):"string"==typeof this.state._accessKey?e(t,null,e(y,{accessKey:this.state._accessKey,label:this.state._label})," ",e("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):e("span",null,this.state._label)),e("div",{key:"78f52acfd3daee5f0a271d65c035e2250cc2579c",slot:"input"},e("textarea",Object.assign({key:"0c220da2a182bfe13268bd0fce2e9103581dbaad",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":a.length>0?a.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,maxlength:this.state._maxLength,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,rows:this.state._rows,placeholder:this.state._placeholder,spellcheck:"false"},this.controller.onFacade,{onInput:this.onInput,style:{resize:this.state._resize},value:this.state._value})))))}constructor(e){i(this,e),this.catchRef=e=>{this.ref=e,c(this.host,this.ref)},this.onInput=e=>{this.ref instanceof HTMLTextAreaElement&&(u(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=k(this.ref)),this.controller.onFacade.onInput(e))},this._accessKey=void 0,this._adjustHeight=!1,this._alert=!0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=!1,this._resize="vertical",this._required=!1,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${f()}`,_label:"",_resize:"vertical"},this.controller=new g(this,"textarea",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentDidLoad(){setTimeout((()=>{var e;this.ref&&(this._rows=(null===(e=this.state)||void 0===e?void 0:e._rows)&&this.state._rows>k(this.ref)?this.state._rows:k(this.ref))}),0)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};x.style={default:w};export{x as kol_textarea};
+import{h as e,F as t,H as n,r as i,g as a}from"./index-3fbcceca.js";import{n as s}from"./dev.utils-37559a2c.js";import{I as l,g as o}from"./controller-af9c691f.js";import{I as r}from"./InternalUnderlinedAccessKey-7fd49f04.js";import{b as d,k as h,i as c,w as p,s as u}from"./prop.validators-29d576d2.js";import{v as f}from"./rows-005ad248.js";import{l as m}from"./component-names-ed22f86e.js";import{s as b,a as v}from"./reuse-b66836de.js";import"./dev.utils-1ca991a2.js";import"./events-29e84d75.js";import"./associated.controller-b0ff2f30.js";import"./hide-label-c461d8fe.js";import"./label-e56ffdc6.js";import"./tab-index-2cbc1ad1.js";import"./tooltip-align-c13a7aa7.js";import"./align-fc528dec.js";import"./index-4a3076fc.js";const y=["both","horizontal","vertical","none"];class g extends l{constructor(e,t,n){super(e,t,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=e}validateHasCounter(e){d(this.component,"_hasCounter",e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(e){h(this.component,"_maxLength",e,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(e){c(this.component,"_placeholder",e)}validateReadOnly(e){d(this.component,"_readOnly",e)}validateResize(e){p(this.component,"_resize",(e=>"string"==typeof e&&y.includes(e)),new Set(`String {${y.join(", ")}`),e)}validateRequired(e){d(this.component,"_required",e)}validateRows(e){f(this.component,e)}validateValue(e){c(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const w="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",_=w,k=e=>{e.style.overflow="hidden";const t=e.rows,n=e.clientHeight/t;e.rows=1;const a=Math.round(e.scrollHeight/n);return e.rows=t,a},x=class{async getValue(){var e;return null===(e=this.ref)||void 0===e?void 0:e.value}render(){const{ariaDescribedBy:a}=o(this.state),i=b(this.state._label);return e(n,{key:"67bb77454b3cdaf1c8a59d8922f96cf1f6fad122",class:{"kol-textarea":!0,"has-value":this.state._hasValue}},e(m,{key:"144962ff9ceae7342e7f77b0d571ffe1da7d5d91",class:{textarea:!0,"hide-label":!!this.state._hideLabel,"has-counter":!!this.state._hasCounter},_accessKey:this.state._accessKey,_alert:this.state._alert,_currentLength:this.state._currentLength,_disabled:this.state._disabled,_hideError:this.state._hideError,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_label:this.state._label,_maxLength:this.state._maxLength,_msg:this.state._msg,_readOnly:this.state._readOnly,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.ref)||void 0===e?void 0:e.focus()},role:"presentation"},e("span",{key:"c984e1c64ca8fcfe4461d9fa58d46c61e4172d33",slot:"label"},i?e("slot",{name:"expert"}):"string"==typeof this.state._accessKey?e(t,null,e(r,{accessKey:this.state._accessKey,label:this.state._label})," ",e("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):e("span",null,this.state._label)),e("div",{key:"2ad8230de55cc7383a7155bb990a39742619f74a",slot:"input"},e("textarea",Object.assign({key:"940a4da1e41065482cd18a80f1582ba203721af7",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":a.length>0?a.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,maxlength:this.state._maxLength,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,rows:this.state._rows,placeholder:this.state._placeholder,spellcheck:"false"},this.controller.onFacade,{onInput:this.onInput,style:{resize:this.state._resize},value:this.state._value})))))}constructor(e){i(this,e),this.catchRef=e=>{this.ref=e,v(this.host,this.ref)},this.onInput=e=>{this.ref instanceof HTMLTextAreaElement&&(u(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=k(this.ref)),this.controller.onFacade.onInput(e))},this._accessKey=void 0,this._adjustHeight=!1,this._alert=!0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=!1,this._resize="vertical",this._required=!1,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${s()}`,_label:"",_resize:"vertical"},this.controller=new g(this,"textarea",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentDidLoad(){setTimeout((()=>{var e;this.ref&&(this._rows=(null===(e=this.state)||void 0===e?void 0:e._rows)&&this.state._rows>k(this.ref)?this.state._rows:k(this.ref))}),0)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};x.style={default:_};export{x as kol_textarea};

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

@@ -1 +1 @@
-{"version":3,"names":["TextareaController","InputController","constructor","component","name","host","super","this","afterSyncCharCounter","_value","length","state","_currentLength","validateHasCounter","value","watchBoolean","hooks","afterPatch","validateMaxLength","watchNumber","min","validatePlaceholder","watchString","validateReadOnly","validateResize","watchValidator","cssResizeOptions","includes","Set","join","validateRequired","validateRows","validateValue","setFormAssociatedValue","componentWillLoad","_hasCounter","_maxLength","_placeholder","_readOnly","_resize","_required","_rows","defaultStyleCss","KolTextareaDefaultStyle0","increaseTextareaHeight","el","style","overflow","currentRows","rows","rowHeight","clientHeight","nextRows","Math","round","scrollHeight","KolTextarea","getValue","_a","ref","render","ariaDescribedBy","getRenderStates","hasExpertSlot","showExpertSlot","_label","h","Host","key","class","_hasValue","KolInputTag","textarea","_hideLabel","_accessKey","_alert","_disabled","_hideError","_hint","_id","_msg","_tooltipAlign","_touched","onClick","focus","role","slot","Fragment","InternalUnderlinedAccessKey","accessKey","label","Object","assign","catchRef","title","undefined","autoCapitalize","autoCorrect","disabled","id","maxlength","_name","readOnly","required","placeholder","spellcheck","controller","onFacade","onInput","resize","hostRef","propagateFocus","event","HTMLTextAreaElement","setState","_adjustHeight","nonce","validateAccessKey","validateAdjustHeight","validateAlert","validateDisabled","validateError","validateHideError","validateHideLabel","validateHint","validateId","validateLabel","validateMsg","validateName","validateOn","validateSyncValueBySelector","validateTabIndex","validateTouched","componentDidLoad","setTimeout","addValueChangeListener","v"],"sources":["src/components/textarea/controller.ts","src/components/textarea/style.scss?tag=kol-textarea&mode=default&encapsulation=shadow","src/components/textarea/component.tsx"],"sourcesContent":["import type { CSSResize, HasCounterPropType, RowsPropType, TextareaProps, TextareaWatches } from '@public-ui/schema';\nimport { cssResizeOptions, validateRows, watchBoolean, watchNumber, watchString, watchValidator } from '@public-ui/schema';\n\nimport { InputController } from '../@deprecated/input/controller';\n\nimport type { Generic } from 'adopted-style-sheets';\nexport class TextareaController extends InputController implements TextareaWatches {\n\tprotected readonly component: Generic.Element.Component & TextareaProps;\n\n\tpublic constructor(component: Generic.Element.Component & TextareaProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tprivate afterSyncCharCounter = () => {\n\t\tif (typeof this.component._value === 'string' && this.component._value.length > 0) {\n\t\t\tthis.component.state._currentLength = this.component._value.length;\n\t\t}\n\t};\n\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\twatchBoolean(this.component, '_hasCounter', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMaxLength(value?: number): void {\n\t\twatchNumber(this.component, '_maxLength', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t\tmin: 0,\n\t\t});\n\t}\n\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\n\tpublic validateReadOnly(value?: boolean): void {\n\t\twatchBoolean(this.component, '_readOnly', value);\n\t}\n\n\tpublic validateResize(value?: CSSResize): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_resize',\n\t\t\t(value) => typeof value === 'string' && cssResizeOptions.includes(value),\n\t\t\tnew Set(`String {${cssResizeOptions.join(', ')}`),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tvalidateRows(this.component, value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateHasCounter(this.component._hasCounter);\n\t\tthis.validateMaxLength(this.component._maxLength);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateReadOnly(this.component._readOnly);\n\t\tthis.validateResize(this.component._resize);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import '../input-line';\n\n@layer kol-component {\n}\n","import type {\n\tAdjustHeightPropType,\n\tCSSResize,\n\tHasCounterPropType,\n\tHideErrorPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tRowsPropType,\n\tSyncValueBySelectorPropType,\n\tTextareaAPI,\n\tTextareaStates,\n\tTooltipAlignPropType,\n} from '@public-ui/schema';\nimport { propagateFocus, setState, showExpertSlot } from '@public-ui/schema';\nimport { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { getRenderStates } from '../input/controller';\nimport { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';\nimport { TextareaController } from './controller';\n\nimport type { JSX } from '@stencil/core';\nimport { KolInputTag } from '../../core/component-names';\n/**\n * https://stackoverflow.com/questions/17772260/textarea-auto-height\n */\nconst increaseTextareaHeight = (el: HTMLTextAreaElement): number => {\n\tel.style.overflow = 'hidden'; // verhindert, dass ein Scrollbalken kurz angezeigt wird\n\tconst currentRows = el.rows;\n\tconst rowHeight = el.clientHeight / currentRows;\n\tel.rows = 1;\n\tconst nextRows = Math.round(el.scrollHeight / rowHeight);\n\tel.rows = currentRows;\n\treturn nextRows;\n};\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-textarea',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTextarea implements TextareaAPI {\n\t@Element() private readonly host?: HTMLKolTextareaElement;\n\tprivate ref?: HTMLTextAreaElement;\n\n\tprivate readonly catchRef = (ref?: HTMLTextAreaElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<string | undefined> {\n\t\treturn this.ref?.value;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host class={{ 'kol-textarea': true, 'has-value': this.state._hasValue }}>\n\t\t\t\t<KolInputTag\n\t\t\t\t\tclass={{ textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }}\n\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t_currentLength={this.state._currentLength}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hasCounter={this.state._hasCounter}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_maxLength={this.state._maxLength}\n\t\t\t\t\t_msg={this.state._msg}\n\t\t\t\t\t_readOnly={this.state._readOnly}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t<span class=\"access-key-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t{this.state._accessKey}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\trows={this.state._rows}\n\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonInput={this.onInput}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tresize: this.state._resize,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</KolInputTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: TextareaController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Adjusts the height of the element to its content.\n\t * @TODO: change back to AdjustHeightPropType after stencil #4663 has been resolved\n\t */\n\t@Prop() public _adjustHeight?: boolean = false;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t * @deprecated Will be removed in v3. Use `msg` instead.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Shows the character count on the lower border of the input.\n\t * @TODO: Change type back to `HasCounterPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the maximum number of input characters.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: MsgPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Makes the input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _readOnly?: boolean = false;\n\n\t/**\n\t * Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t */\n\t@Prop() public _resize?: CSSResize = 'vertical';\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Defines how many rows of text should be visible at the same time.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _rows?: RowsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: TextareaStates = {\n\t\t_adjustHeight: false,\n\t\t_currentLength: 0,\n\t\t_hasValue: false,\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_resize: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new TextareaController(this, 'textarea', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_adjustHeight')\n\tpublic validateAdjustHeight(value?: AdjustHeightPropType): void {\n\t\tthis.controller.validateAdjustHeight(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: MsgPropType): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_resize')\n\tpublic validateResize(value?: CSSResize): void {\n\t\tthis.controller.validateResize(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\tsetTimeout(() => {\n\t\t\tif (this.ref /* SSR instanceof HTMLTextAreaElement */) {\n\t\t\t\tthis._rows = this.state?._rows && this.state._rows > increaseTextareaHeight(this.ref) ? this.state._rows : increaseTextareaHeight(this.ref);\n\t\t\t}\n\t\t}, 0);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tif (this.ref instanceof HTMLTextAreaElement) {\n\t\t\tsetState(this, '_currentLength', this.ref.value.length);\n\t\t\tif (this.state._adjustHeight) {\n\t\t\t\tthis._rows = increaseTextareaHeight(this.ref);\n\t\t\t}\n\t\t\tthis.controller.onFacade.onInput(event);\n\t\t}\n\t};\n}\n"],"mappings":"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"}
+{"version":3,"names":["cssResizeOptions","TextareaController","InputController","constructor","component","name","host","super","this","afterSyncCharCounter","_value","length","state","_currentLength","validateHasCounter","value","watchBoolean","hooks","afterPatch","validateMaxLength","watchNumber","min","validatePlaceholder","watchString","validateReadOnly","validateResize","watchValidator","includes","Set","join","validateRequired","validateRows","validateValue","setFormAssociatedValue","componentWillLoad","_hasCounter","_maxLength","_placeholder","_readOnly","_resize","_required","_rows","defaultStyleCss","KolTextareaDefaultStyle0","increaseTextareaHeight","el","style","overflow","currentRows","rows","rowHeight","clientHeight","nextRows","Math","round","scrollHeight","KolTextarea","getValue","_a","ref","render","ariaDescribedBy","getRenderStates","hasExpertSlot","showExpertSlot","_label","h","Host","key","class","_hasValue","KolInputTag","textarea","_hideLabel","_accessKey","_alert","_disabled","_hideError","_hint","_id","_msg","_tooltipAlign","_touched","onClick","focus","role","slot","Fragment","InternalUnderlinedAccessKey","accessKey","label","Object","assign","catchRef","title","undefined","autoCapitalize","autoCorrect","disabled","id","maxlength","_name","readOnly","required","placeholder","spellcheck","controller","onFacade","onInput","resize","hostRef","propagateFocus","event","HTMLTextAreaElement","setState","_adjustHeight","nonce","validateAccessKey","validateAdjustHeight","validateAlert","validateDisabled","validateError","validateHideError","validateHideLabel","validateHint","validateId","validateLabel","validateMsg","validateName","validateOn","validateSyncValueBySelector","validateTabIndex","validateTouched","componentDidLoad","setTimeout","addValueChangeListener","v"],"sources":["src/schema/components/textarea.ts","src/components/textarea/controller.ts","src/components/textarea/style.scss?tag=kol-textarea&mode=default&encapsulation=shadow","src/components/textarea/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type {\n\tPropAdjustHeight,\n\tPropDisabled,\n\tPropHasCounter,\n\tPropHideError,\n\tPropHideLabel,\n\tPropId,\n\tPropLabelWithExpertSlot,\n\tPropMsg,\n\tPropName,\n\tPropReadOnly,\n\tPropRequired,\n\tPropRows,\n\tPropSyncValueBySelector,\n\tPropTouched,\n} from '../props';\nimport type { InputTypeOnDefault } from '../types';\n\nexport const cssResizeOptions = ['both', 'horizontal', 'vertical', 'none'] as const;\nexport type CSSResize = (typeof cssResizeOptions)[number];\n\ntype RequiredProps = NonNullable<unknown>;\ntype OptionalProps = {\n\taccessKey: string;\n\talert: boolean;\n\t/**\n\t * @deprecated Will be removed in v3. Use `msg` instead.\n\t */\n\terror: string;\n\thint: string;\n\tmaxLength: number;\n\ton: InputTypeOnDefault;\n\tplaceholder: string;\n\tresize: CSSResize;\n\ttabIndex: number;\n\tvalue: string;\n} & PropAdjustHeight &\n\tPropDisabled &\n\tPropHasCounter &\n\tPropHideError &\n\tPropHideLabel &\n\tPropLabelWithExpertSlot &\n\tPropMsg &\n\tPropName &\n\tPropReadOnly &\n\tPropRequired &\n\tPropRows &\n\tPropSyncValueBySelector &\n\tPropTouched;\n\ntype RequiredStates = {\n\tadjustHeight: boolean;\n\tcurrentLength: number;\n\thasValue: boolean;\n\tresize: CSSResize;\n} & PropId &\n\tPropAdjustHeight &\n\tPropHideError &\n\tPropLabelWithExpertSlot;\ntype OptionalStates = {\n\taccessKey: string;\n\talert: boolean;\n\terror: string;\n\thint: string;\n\tmaxLength: number;\n\ton: InputTypeOnDefault;\n\tplaceholder: string;\n\ttabIndex: number;\n\tvalue: string;\n} & PropDisabled &\n\tPropHasCounter &\n\tPropHideLabel &\n\tPropMsg &\n\tPropName &\n\tPropReadOnly &\n\tPropRequired &\n\tPropRows &\n\tPropTouched;\n\nexport type TextareaProps = Generic.Element.Members<RequiredProps, OptionalProps>;\nexport type TextareaStates = Generic.Element.Members<RequiredStates, OptionalStates>;\nexport type TextareaWatches = Generic.Element.Watchers<RequiredProps, OptionalProps>;\nexport type TextareaAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\n","import type { CSSResize, HasCounterPropType, RowsPropType, TextareaProps, TextareaWatches } from '../../schema';\nimport { cssResizeOptions, validateRows, watchBoolean, watchNumber, watchString, watchValidator } from '../../schema';\n\nimport { InputController } from '../@deprecated/input/controller';\n\nimport type { Generic } from 'adopted-style-sheets';\nexport class TextareaController extends InputController implements TextareaWatches {\n\tprotected readonly component: Generic.Element.Component & TextareaProps;\n\n\tpublic constructor(component: Generic.Element.Component & TextareaProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tprivate afterSyncCharCounter = () => {\n\t\tif (typeof this.component._value === 'string' && this.component._value.length > 0) {\n\t\t\tthis.component.state._currentLength = this.component._value.length;\n\t\t}\n\t};\n\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\twatchBoolean(this.component, '_hasCounter', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMaxLength(value?: number): void {\n\t\twatchNumber(this.component, '_maxLength', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t\tmin: 0,\n\t\t});\n\t}\n\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\n\tpublic validateReadOnly(value?: boolean): void {\n\t\twatchBoolean(this.component, '_readOnly', value);\n\t}\n\n\tpublic validateResize(value?: CSSResize): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_resize',\n\t\t\t(value) => typeof value === 'string' && cssResizeOptions.includes(value),\n\t\t\tnew Set(`String {${cssResizeOptions.join(', ')}`),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tvalidateRows(this.component, value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateHasCounter(this.component._hasCounter);\n\t\tthis.validateMaxLength(this.component._maxLength);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateReadOnly(this.component._readOnly);\n\t\tthis.validateResize(this.component._resize);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import '../@shared/mixins';\n@import '../input-line';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n}\n","import type {\n\tAdjustHeightPropType,\n\tCSSResize,\n\tHasCounterPropType,\n\tHideErrorPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tRowsPropType,\n\tSyncValueBySelectorPropType,\n\tTextareaAPI,\n\tTextareaStates,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { propagateFocus, setState, showExpertSlot } from '../../schema';\nimport { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { getRenderStates } from '../input/controller';\nimport { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';\nimport { TextareaController } from './controller';\n\nimport type { JSX } from '@stencil/core';\nimport { KolInputTag } from '../../core/component-names';\n/**\n * https://stackoverflow.com/questions/17772260/textarea-auto-height\n */\nconst increaseTextareaHeight = (el: HTMLTextAreaElement): number => {\n\tel.style.overflow = 'hidden'; // verhindert, dass ein Scrollbalken kurz angezeigt wird\n\tconst currentRows = el.rows;\n\tconst rowHeight = el.clientHeight / currentRows;\n\tel.rows = 1;\n\tconst nextRows = Math.round(el.scrollHeight / rowHeight);\n\tel.rows = currentRows;\n\treturn nextRows;\n};\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-textarea',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTextarea implements TextareaAPI {\n\t@Element() private readonly host?: HTMLKolTextareaElement;\n\tprivate ref?: HTMLTextAreaElement;\n\n\tprivate readonly catchRef = (ref?: HTMLTextAreaElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<string | undefined> {\n\t\treturn this.ref?.value;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host class={{ 'kol-textarea': true, 'has-value': this.state._hasValue }}>\n\t\t\t\t<KolInputTag\n\t\t\t\t\tclass={{ textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }}\n\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t_currentLength={this.state._currentLength}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hasCounter={this.state._hasCounter}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_maxLength={this.state._maxLength}\n\t\t\t\t\t_msg={this.state._msg}\n\t\t\t\t\t_readOnly={this.state._readOnly}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t<span class=\"access-key-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t{this.state._accessKey}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\trows={this.state._rows}\n\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonInput={this.onInput}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tresize: this.state._resize,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</KolInputTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: TextareaController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Adjusts the height of the element to its content.\n\t * @TODO: change back to AdjustHeightPropType after stencil #4663 has been resolved\n\t */\n\t@Prop() public _adjustHeight?: boolean = false;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t * @deprecated Will be removed in v3. Use `msg` instead.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Shows the character count on the lower border of the input.\n\t * @TODO: Change type back to `HasCounterPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the maximum number of input characters.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: MsgPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Makes the input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _readOnly?: boolean = false;\n\n\t/**\n\t * Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t */\n\t@Prop() public _resize?: CSSResize = 'vertical';\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Defines how many rows of text should be visible at the same time.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _rows?: RowsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: TextareaStates = {\n\t\t_adjustHeight: false,\n\t\t_currentLength: 0,\n\t\t_hasValue: false,\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_resize: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new TextareaController(this, 'textarea', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_adjustHeight')\n\tpublic validateAdjustHeight(value?: AdjustHeightPropType): void {\n\t\tthis.controller.validateAdjustHeight(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: MsgPropType): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_resize')\n\tpublic validateResize(value?: CSSResize): void {\n\t\tthis.controller.validateResize(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\tsetTimeout(() => {\n\t\t\tif (this.ref /* SSR instanceof HTMLTextAreaElement */) {\n\t\t\t\tthis._rows = this.state?._rows && this.state._rows > increaseTextareaHeight(this.ref) ? this.state._rows : increaseTextareaHeight(this.ref);\n\t\t\t}\n\t\t}, 0);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tif (this.ref instanceof HTMLTextAreaElement) {\n\t\t\tsetState(this, '_currentLength', this.ref.value.length);\n\t\t\tif (this.state._adjustHeight) {\n\t\t\t\tthis._rows = increaseTextareaHeight(this.ref);\n\t\t\t}\n\t\t\tthis.controller.onFacade.onInput(event);\n\t\t}\n\t};\n}\n"],"mappings":"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"}

package/dist/kolibri/kol-toast-container.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,r as s,H as e}from"./index-59e9528b.js";import{t as o}from"./i18n-7a7ff96e.js";import{n as a}from"./dev.utils-6d9b92c3.js";import{k as i,n}from"./component-names-61247f2f.js";import"./index-fbc0a5be.js";import"./i18n-0c047df5.js";const c=({key:s,onClose:e,onRef:a,toastState:n})=>t("div",{class:`toast ${n.status}`,key:s},t(i,{class:"alert",_alert:!0,_label:n.toast.label,_level:0,_hasCloser:!0,_type:n.toast.type,_variant:n.toast.alertVariant||"card",_on:{onClose:e}},t("div",{ref:a},"string"==typeof n.toast.description?n.toast.description:null))),l="@layer kol-component {\n  :host {\n    display: flex;\n    flex-direction: column;\n    position: fixed;\n    z-index: 200;\n  }\n  .close-all {\n    align-self: flex-end;\n  }\n}",r=l,h=300,d=class{constructor(t){s(this,t),this.knownRenderFunctions=new Set,this.state={_toastStates:[]}}async enqueue(t){const s={toast:t,status:"adding",id:`toast-${a()}`};return this.state=Object.assign(Object.assign({},this.state),{_toastStates:[s,...this.state._toastStates]}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((t=>t.id===s.id?Object.assign(Object.assign({},t),{status:"settled"}):t))})}),h),()=>{this.handleClose(s)}}handleClose(t){this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((s=>(s.id===t.id&&(s.status="removing"),s)))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((s=>s.id!==t.id))})}),h)}async closeAll(){this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((t=>Object.assign(Object.assign({},t),{status:"removing"})))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:[]})}),h)}handleToastRef(t,s){s&&"function"==typeof t.toast.render&&!this.knownRenderFunctions.has(t.toast.render)&&(this.knownRenderFunctions.add(t.toast.render),t.toast.render(s,{close:()=>this.handleClose(t)}))}render(){return t(e,{key:"f0b1a802c18178dd07acc9cf99a6db001ab321ae",class:"kol-toast-container"},this.state._toastStates.length>1&&t(n,{key:"879721d50e0dcdf7c275ed0d7e46d23eb84c453d",_label:o("kol-toast-close-all"),class:"close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map((s=>t(c,{key:s.id,onClose:()=>this.handleClose(s),onRef:t=>this.handleToastRef(s,t),toastState:s}))))}};d.style={default:r};export{d as kol_toast_container};
+import{h as t,r as s,H as e}from"./index-3fbcceca.js";import{t as o}from"./i18n-37baa421.js";import{n as a}from"./dev.utils-37559a2c.js";import{k as i,n}from"./component-names-ed22f86e.js";import"./i18n-0c047df5.js";import"./reuse-b66836de.js";import"./dev.utils-1ca991a2.js";const c=({key:s,onClose:e,onRef:a,toastState:o})=>t("div",{class:`toast ${o.status}`,key:s},t(i,{class:"alert",_alert:!0,_label:o.toast.label,_level:0,_hasCloser:!0,_type:o.toast.type,_variant:o.toast.alertVariant||"card",_on:{onClose:e}},t("div",{ref:a},"string"==typeof o.toast.description?o.toast.description:null))),l="@layer kol-component {\n  :host {\n    display: flex;\n    flex-direction: column;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: fixed;\n    z-index: 200;\n  }\n  .close-all {\n    align-self: flex-end;\n  }\n}",r=l,h=300,f=class{constructor(t){s(this,t),this.knownRenderFunctions=new Set,this.state={_toastStates:[]}}async enqueue(t){const s={toast:t,status:"adding",id:`toast-${a()}`};return this.state=Object.assign(Object.assign({},this.state),{_toastStates:[s,...this.state._toastStates]}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((t=>t.id===s.id?Object.assign(Object.assign({},t),{status:"settled"}):t))})}),h),()=>{this.handleClose(s)}}handleClose(t){this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((s=>(s.id===t.id&&(s.status="removing"),s)))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((s=>s.id!==t.id))})}),h)}async closeAll(){this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((t=>Object.assign(Object.assign({},t),{status:"removing"})))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:[]})}),h)}handleToastRef(t,s){s&&"function"==typeof t.toast.render&&!this.knownRenderFunctions.has(t.toast.render)&&(this.knownRenderFunctions.add(t.toast.render),t.toast.render(s,{close:()=>this.handleClose(t)}))}render(){return t(e,{key:"4b44fe3b919950fa399f60e3c0e678e50274ca81",class:"kol-toast-container"},this.state._toastStates.length>1&&t(n,{key:"f9c329569fc33360f6730a6c4bbcf9eb5e2fc67b",_label:o("kol-toast-close-all"),class:"close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map((s=>t(c,{key:s.id,onClose:()=>this.handleClose(s),onRef:t=>this.handleToastRef(s,t),toastState:s}))))}};f.style={default:r};export{f as kol_toast_container};