@public-ui/components 1.6.0-rc.16 → 1.6.0-rc.18

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as e}from"./index-2c046ff1.js";import{a as n}from"./i18n-6e857b2f.js";import{d as o}from"./a11y.tipps-9f948961.js";import{s,w as a,g as l,p as h,a as r,o as d}from"./prop.validators-601f1068.js";import"./index-d8ac1088.js";import"./index-37b5cbcf.js";import"./dev.utils-4290338e.js";import"./reuse-c2156413.js";const c=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}:host{display:grid}:host>div.table{max-width:100%;order:1;overflow-x:auto;overflow-y:hidden}:host>div.table table{width:100%}th>div{display:grid;grid-template-columns:1fr auto;place-items:center}div.pagination{order:2}div.pagination,div.pagination>div:last-child{display:grid;place-items:center}@media (min-width: 1024px){div.pagination,div.pagination>div:last-child{grid-auto-flow:column}div.pagination kol-pagination{display:flex}}",f=[10,20,50,100],p=new Map,u=class{constructor(e){t(this,e),this.horizontal=!0,this.sortDirections=new Map,this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.setSortDirection=(t,i)=>{this.sortDirections.clear(),this.sortDirections.set(t,i),this.sortFunction=t},this.handlePagination={onClick:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,i),s(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePage:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,i),s(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePageSize:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,i),s(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:i})),s(this,"_pageSize",i)}},this.beforePatchPagination=(t,i,e,a)=>{"_pagination"===a&&(this.showPagination=!0===t||""===t||"object"==typeof t&&null!==t)},this.updateSortedData=()=>{let t=this.state._data;if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"NOS":t=[...this.state._data];break;case"ASC":t=this.sortFunction([...this.state._data]);break;default:t=this.sortFunction([...this.state._data]).reverse()}s(this,"_sortedData",t)},this.renderTableRow=(t,e)=>i("tr",{key:`tbody-${e}`},t.map(((t,i)=>this.renderTableCell(t,e,i)))),this.renderTableCell=(t,e,a)=>!1===t.asTd?i("th",{key:`tbody-${e}-${a}-${t.label}`,scope:"number"==typeof t.rowSpan&&t.rowSpan>1?"rowgroup":"row",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":this.disableSort||"function"!=typeof t.sort?void 0:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"none":"ASC"===this.sortDirections.get(t.sort)?"ascending":"descending","data-sort":`sort-${this.sortDirections.get(t.sort)}`},i("div",{class:"w-full flex gap-1 items-center"},i("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),!this.disableSort&&"function"==typeof t.sort&&i("kol-button",{exportparts:"icon",_ariaLabel:n("kol-change-order",{placeholders:{colLabel:t.label}}),_icon:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"codicon codicon-fold":"ASC"===this.sortDirections.get(t.sort)?"codicon codicon-chevron-up":"codicon codicon-chevron-down",_hideLabel:!0,_label:n("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData()}}},_variant:"ghost"}))):i("td",{key:`tbody-${e}-${a}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""}),this.renderFoot=()=>{const t=this.createDataField(this.state._dataFoot,this.state._headers,!0);return i("tfoot",null,t.map(this.renderTableRow))},this._caption=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._minWidth=void 0,this._pagination=void 0,this.state={_caption:"…",_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_pagination:{_page:1,_pageSize:10,_total:0},_sortedData:[]}}validateCaption(t){a(this,"_caption",t,{required:!0})}validateData(t){l(t,(()=>{d(t,(()=>{void 0===t&&(t=[]);try{t=h(t)}catch(t){}Array.isArray(t)&&void 0===t.find((t=>!("object"==typeof t&&null!==t)))&&s(this,"_data",t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}))}))}validateDataFoot(t){l(t,(()=>{d(t,(()=>{void 0===t&&(t=[]);try{t=h(t)}catch(t){}Array.isArray(t)&&void 0===t.find((t=>!("object"==typeof t&&null!==t)))&&s(this,"_dataFoot",t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}))}))}validateHeaders(t){l(t,(()=>{d(t,(()=>{try{t=h(t)}catch(t){}r(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var i,e,a,n;const s=t;null===(i=s.horizontal)||void 0===i||i.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))})),null===(e=s.vertical)||void 0===e||e.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))})),s.horizontal&&s.vertical&&(null===(a=s.horizontal)||void 0===a?void 0:a.length)>0&&(null===(n=s.vertical)||void 0===n?void 0:n.length)>0&&(this.disableSort=!0,o("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)"))}}})}))}))}validateMinWidth(t){a(this,"_minWidth",t,{defaultValue:void 0})}validatePagination(t){try{t=h(t)}catch(t){}r(this,"_pagination",(()=>!0),new Set(["boolean","KoliBriTablePagination"]),t,{hooks:{beforePatch:this.beforePatchPagination}})}componentWillLoad(){this.validateCaption(this._caption),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination)}getNumberOfCols(t,i){let e=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var e;return i+=null!==(e=t.colSpan)&&void 0!==e?e:1})),e<i&&(e=i)})),0===e&&(e=i.length),e}getNumberOfRows(t,i){let e=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var e;return i+=null!==(e=t.rowSpan)&&void 0!==e?e:1})),e<i&&(e=i)})),0===e?e=i.length:e-=this.state._dataFoot.length,e}filterHeaderKeys(t){const i=[];return t.forEach((t=>{t.forEach((t=>{"string"==typeof t.key&&i.push(t)}))})),i}getPrimaryHeader(t){var i,e;let a=this.filterHeaderKeys(null!==(i=t.horizontal)&&void 0!==i?i:[]);return this.horizontal=!0,0===a.length&&(a=this.filterHeaderKeys(null!==(e=t.vertical)&&void 0!==e?e:[]),a.length>0&&(this.horizontal=!1)),a}createDataField(t,i,e){i.horizontal=Array.isArray(null==i?void 0:i.horizontal)?i.horizontal:[],i.vertical=Array.isArray(null==i?void 0:i.vertical)?i.vertical:[];const a=this.getPrimaryHeader(i),o=this.getNumberOfCols(i.horizontal,t);let s=this.getNumberOfRows(i.vertical,t),r=0;e&&(r=s,s+=this.state._dataFoot.length);const l=[],h=[],c=[];i.vertical.forEach(((t,i)=>{h[i]=0,c[i]=[]}));for(let n=r;n<s;n++){const s=[];i.vertical.forEach(((t,i)=>{let e=0;if(c[i].forEach((t=>e+=t)),e<=n){const a=t[n-e+h[i]];if("object"==typeof a){s.push(Object.assign(Object.assign({},a),{asTd:!1,data:{}}));let t=1;if("number"==typeof a.rowSpan&&a.rowSpan>1&&(t=a.rowSpan),c[i].push(t),"number"==typeof a.colSpan&&a.colSpan>1)for(let e=1;e<a.colSpan;e++)c[i+e].push(t);h[i]++}}}));for(let i=0;i<o;i++)if(!0===this.horizontal){const o=e?this.state._dataFoot[n-r]:t[n];"object"==typeof a[i]&&null!==a[i]&&"string"==typeof a[i].key&&"object"==typeof o&&null!==o&&s.push(Object.assign(Object.assign({},a[i]),{colSpan:void 0,data:o,label:o[a[i].key],rowSpan:void 0}))}else"object"==typeof a[n]&&null!==a[n]&&"string"==typeof a[n].key&&"object"==typeof t[i]&&null!==t[i]&&s.push(Object.assign(Object.assign({},a[n]),{colSpan:void 0,data:t[i],label:t[i][a[n].key],rowSpan:void 0}));l.push(s)}if(0===t.length){let t=0,e=0;Array.isArray(i.horizontal)&&i.horizontal.length>0&&i.horizontal[0].forEach((i=>{t+=i.colSpan||1})),Array.isArray(i.vertical)&&i.vertical.length>0&&(t-=i.vertical.length,i.vertical[0].forEach((t=>{e+=t.rowSpan||1})));const a={colSpan:t,label:n("kol-no-entries"),render:void 0,rowSpan:Math.max(e,1)};0===l.length?l.push([a]):l[0].push(a)}return l}selectDisplayedData(t,i,e){return"number"==typeof i&&i>0&&"number"==typeof e&&e>0?(this.pageStartSlice=i*(e-1),this.pageEndSlice=i*e>t.length?t.length:i*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}cellRender(t,i){i&&(clearTimeout(p.get(i)),p.set(i,setTimeout((()=>{clearTimeout(p.get(i));const e=t.render(i,{asTd:t.asTd,label:t.label,textAlign:t.textAlign,width:t.width},t.data,this.state._data);"string"==typeof e&&(i.innerHTML=e)}))))}render(){var t,a;const o=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(a=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==a?a:10:this.state._sortedData.length,this.state._pagination._page||1),s=this.createDataField(o,this.state._headers);return i(e,null,this.pageEndSlice>0&&this.showPagination&&i("div",{class:"pagination"},i("span",null,"Einträge ",this.pageEndSlice>0?this.pageStartSlice+1:0," bis ",this.pageEndSlice," von"," ",this.state._pagination._total||(Array.isArray(this.state._data)?this.state._data.length:0)," angezeigt"),i("div",null,i("kol-pagination",{_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||f,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_total:this.state._pagination._total||this.state._data.length}))),i("div",{class:"table",tabindex:"0"},i("table",{style:{minWidth:this.state._minWidth}},i("caption",null,this.state._caption),Array.isArray(this.state._headers.horizontal)&&i("thead",null,this.state._headers.horizontal.map(((t,e)=>i("tr",{key:`thead-${e}`},t.map(((t,a)=>!0===t.asTd?i("td",{key:`thead-${e}-${a}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""}):i("th",{key:`thead-${e}-${a}-${t.label}`,scope:"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":this.disableSort||"function"!=typeof t.sort?void 0:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"none":"ASC"===this.sortDirections.get(t.sort)?"ascending":"descending","data-sort":`sort-${this.sortDirections.get(t.sort)}`},i("div",{class:"w-full flex gap-1 items-center"},i("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),!this.disableSort&&"function"==typeof t.sort&&i("kol-button",{exportparts:"icon",_icon:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"codicon codicon-fold":"ASC"===this.sortDirections.get(t.sort)?"codicon codicon-chevron-up":"codicon codicon-chevron-down",_hideLabel:!0,_label:n("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData()}}},_variant:"ghost"}))))))))),i("tbody",null,s.map(this.renderTableRow)),this.state._dataFoot.length>0?this.renderFoot():"")))}static get watchers(){return{_caption:["validateCaption"],_data:["validateData"],_dataFoot:["validateDataFoot"],_headers:["validateHeaders"],_minWidth:["validateMinWidth"],_pagination:["validatePagination"]}}};u.style={default:c};export{u as kol_table};
+import{r as t,h as i,H as e}from"./index-2c046ff1.js";import{a as s}from"./i18n-2b2ccdd6.js";import{d as o}from"./a11y.tipps-255c885e.js";import{s as n,w as a,g as l,p as r,a as h,o as d}from"./prop.validators-e3c93395.js";import"./index-d8ac1088.js";import"./index-37b5cbcf.js";import"./dev.utils-e98368e1.js";import"./reuse-c2156413.js";const c=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}:host{display:grid}:host>div.table{max-width:100%;order:1;overflow-x:auto;overflow-y:hidden}:host>div.table table{width:100%}th>div{display:grid;grid-template-columns:1fr auto;place-items:center}div.pagination{order:2}div.pagination,div.pagination>div:last-child{display:grid;place-items:center}@media (min-width: 1024px){div.pagination,div.pagination>div:last-child{grid-auto-flow:column}div.pagination kol-pagination{display:flex}}",f=[10,20,50,100],p=new Map,u=class{constructor(e){t(this,e),this.horizontal=!0,this.sortDirections=new Map,this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"},this.ariaLive="",this.setSortDirection=(t,i)=>{this.sortDirections.clear(),this.sortDirections.set(t,i),this.sortFunction=t},this.handlePagination={onClick:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,i),n(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePage:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,i),n(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePageSize:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,i),n(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:i})),n(this,"_pageSize",i)}},this.beforePatchPagination=(t,i,e,a)=>{"_pagination"===a&&(this.showPagination=!0===t||""===t||"object"==typeof t&&null!==t)},this.updateSortedData=(t=this.sortedColumnHead)=>{let i=this.state._data;if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"ASC":i=this.sortFunction([...this.state._data]),this.ariaLive=s("kol-sort-ascending",{placeholders:{column:t.label}}),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"ASC"};break;case"DESC":i=this.sortFunction([...this.state._data]).reverse(),this.ariaLive=s("kol-sort-descending",{placeholders:{column:t.label}}),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"DESC"};break;default:i=[...this.state._data],this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"},this.ariaLive=s("kol-sort-none",{placeholders:{column:t.label}})}n(this,"_sortedData",i)},this.renderTableRow=(t,e)=>i("tr",{key:`tbody-${e}`},t.map(((t,i)=>this.renderTableCell(t,e,i)))),this.renderTableCell=(t,e,a)=>{if(!1===t.asTd){const o=t;let n,r="codicon codicon-fold";if(!this.disableSort&&o.key===this.sortedColumnHead.key)switch(this.sortedColumnHead.sortDirection){case"ASC":r="codicon codicon-chevron-up",n="ascending";break;case"DESC":r="codicon codicon-chevron-down",n="descending"}return i("th",{key:`tbody-${e}-${a}-${o.label}`,scope:"number"==typeof o.rowSpan&&o.rowSpan>1?"rowgroup":"row",colSpan:o.colSpan,rowSpan:o.rowSpan,style:{textAlign:o.textAlign,width:o.width},"aria-sort":n,"data-sort":`sort-${this.sortDirections.get(o.sort)}`},i("div",{class:"w-full flex gap-1 items-center"},i("div",{class:{"w-full":!0,[o.textAlign]:"string"==typeof o.textAlign&&o.textAlign.length>0},innerHTML:o.label,style:{textAlign:o.textAlign}}),!this.disableSort&&"function"==typeof o.sort&&i("kol-button",{exportparts:"icon",_icon:r,_hideLabel:!0,_label:s("kol-change-order",{placeholders:{colLabel:o.label}}),_on:{onClick:()=>{if("function"==typeof o.sort){switch(this.sortFunction=o.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData(o)}}},_variant:"ghost"})))}return i("td",{key:`tbody-${e}-${a}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""})},this.renderFoot=()=>{const t=this.createDataField(this.state._dataFoot,this.state._headers,!0);return i("tfoot",null,t.map(this.renderTableRow))},this._caption=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._minWidth=void 0,this._pagination=void 0,this.state={_caption:"…",_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_pagination:{_page:1,_pageSize:10,_total:0},_sortedData:[]}}validateCaption(t){a(this,"_caption",t,{required:!0})}validateData(t){l(t,(()=>{d(t,(()=>{void 0===t&&(t=[]);try{t=r(t)}catch(t){}Array.isArray(t)&&void 0===t.find((t=>!("object"==typeof t&&null!==t)))&&n(this,"_data",t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}))}))}validateDataFoot(t){l(t,(()=>{d(t,(()=>{void 0===t&&(t=[]);try{t=r(t)}catch(t){}Array.isArray(t)&&void 0===t.find((t=>!("object"==typeof t&&null!==t)))&&n(this,"_dataFoot",t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}))}))}validateHeaders(t){l(t,(()=>{d(t,(()=>{try{t=r(t)}catch(t){}h(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var i,e,a,n;const s=t;null===(i=s.horizontal)||void 0===i||i.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))})),null===(e=s.vertical)||void 0===e||e.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))})),s.horizontal&&s.vertical&&(null===(a=s.horizontal)||void 0===a?void 0:a.length)>0&&(null===(n=s.vertical)||void 0===n?void 0:n.length)>0&&(this.disableSort=!0,o("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)"))}}})}))}))}validateMinWidth(t){a(this,"_minWidth",t,{defaultValue:void 0})}validatePagination(t){try{t=r(t)}catch(t){}h(this,"_pagination",(()=>!0),new Set(["boolean","KoliBriTablePagination"]),t,{hooks:{beforePatch:this.beforePatchPagination}})}componentWillLoad(){this.validateCaption(this._caption),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination)}getNumberOfCols(t,i){let e=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var e;return i+=null!==(e=t.colSpan)&&void 0!==e?e:1})),e<i&&(e=i)})),0===e&&(e=i.length),e}getNumberOfRows(t,i){let e=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var e;return i+=null!==(e=t.rowSpan)&&void 0!==e?e:1})),e<i&&(e=i)})),0===e?e=i.length:e-=this.state._dataFoot.length,e}filterHeaderKeys(t){const i=[];return t.forEach((t=>{t.forEach((t=>{"string"==typeof t.key&&i.push(t)}))})),i}getPrimaryHeader(t){var i,e;let a=this.filterHeaderKeys(null!==(i=t.horizontal)&&void 0!==i?i:[]);return this.horizontal=!0,0===a.length&&(a=this.filterHeaderKeys(null!==(e=t.vertical)&&void 0!==e?e:[]),a.length>0&&(this.horizontal=!1)),a}createDataField(t,i,e){i.horizontal=Array.isArray(null==i?void 0:i.horizontal)?i.horizontal:[],i.vertical=Array.isArray(null==i?void 0:i.vertical)?i.vertical:[];const a=this.getPrimaryHeader(i),o=this.getNumberOfCols(i.horizontal,t);let n=this.getNumberOfRows(i.vertical,t),r=0;e&&(r=n,n+=this.state._dataFoot.length);const l=[],h=[],d=[];i.vertical.forEach(((t,i)=>{h[i]=0,d[i]=[]}));for(let s=r;s<n;s++){const n=[];i.vertical.forEach(((t,i)=>{let e=0;if(d[i].forEach((t=>e+=t)),e<=s){const a=t[s-e+h[i]];if("object"==typeof a){n.push(Object.assign(Object.assign({},a),{asTd:!1,data:{}}));let t=1;if("number"==typeof a.rowSpan&&a.rowSpan>1&&(t=a.rowSpan),d[i].push(t),"number"==typeof a.colSpan&&a.colSpan>1)for(let e=1;e<a.colSpan;e++)d[i+e].push(t);h[i]++}}}));for(let i=0;i<o;i++)if(!0===this.horizontal){const o=e?this.state._dataFoot[s-r]:t[s];"object"==typeof a[i]&&null!==a[i]&&"string"==typeof a[i].key&&"object"==typeof o&&null!==o&&n.push(Object.assign(Object.assign({},a[i]),{colSpan:void 0,data:o,label:o[a[i].key],rowSpan:void 0}))}else"object"==typeof a[s]&&null!==a[s]&&"string"==typeof a[s].key&&"object"==typeof t[i]&&null!==t[i]&&n.push(Object.assign(Object.assign({},a[s]),{colSpan:void 0,data:t[i],label:t[i][a[s].key],rowSpan:void 0}));l.push(n)}if(0===t.length){let t=0,e=0;Array.isArray(i.horizontal)&&i.horizontal.length>0&&i.horizontal[0].forEach((i=>{t+=i.colSpan||1})),Array.isArray(i.vertical)&&i.vertical.length>0&&(t-=i.vertical.length,i.vertical[0].forEach((t=>{e+=t.rowSpan||1})));const a={colSpan:t,label:s("kol-no-entries"),render:void 0,rowSpan:Math.max(e,1)};0===l.length?l.push([a]):l[0].push(a)}return l}selectDisplayedData(t,i,e){return"number"==typeof i&&i>0&&"number"==typeof e&&e>0?(this.pageStartSlice=i*(e-1),this.pageEndSlice=i*e>t.length?t.length:i*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}cellRender(t,i){i&&(clearTimeout(p.get(i)),p.set(i,setTimeout((()=>{clearTimeout(p.get(i));const e=t.render(i,{asTd:t.asTd,label:t.label,textAlign:t.textAlign,width:t.width},t.data,this.state._data);"string"==typeof e&&(i.innerHTML=e)}))))}render(){var t,a;const o=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(a=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==a?a:10:this.state._sortedData.length,this.state._pagination._page||1),n=this.createDataField(o,this.state._headers);return i(e,null,i("span",{style:{height:"0",width:"0",overflow:"hidden"},"aria-live":"assertive"},this.ariaLive),this.pageEndSlice>0&&this.showPagination&&i("div",{class:"pagination"},i("span",null,"Einträge ",this.pageEndSlice>0?this.pageStartSlice+1:0," bis ",this.pageEndSlice," von"," ",this.state._pagination._total||(Array.isArray(this.state._data)?this.state._data.length:0)," angezeigt"),i("div",null,i("kol-pagination",{_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||f,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_total:this.state._pagination._total||this.state._data.length}))),i("div",{class:"table",tabindex:"0"},i("table",{style:{minWidth:this.state._minWidth}},i("caption",null,this.state._caption),Array.isArray(this.state._headers.horizontal)&&i("thead",null,this.state._headers.horizontal.map(((t,e)=>i("tr",{key:`thead-${e}`},t.map(((t,a)=>{if(!0===t.asTd)return i("td",{key:`thead-${e}-${a}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""});{const o=t;let n,r="codicon codicon-fold";if(o.key===this.sortedColumnHead.key)switch(this.sortedColumnHead.sortDirection){case"ASC":r="codicon codicon-chevron-up",n="ascending";break;case"DESC":r="codicon codicon-chevron-down",n="descending"}return i("th",{key:`thead-${e}-${a}-${o.label}`,scope:"number"==typeof o.colSpan&&o.colSpan>1?"colgroup":"col",colSpan:o.colSpan,rowSpan:o.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":n,"data-sort":n?`sort-${this.sortedColumnHead.sortDirection}`:"sort-NOS"},i("div",{class:"w-full flex gap-1 items-center"},i("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),!this.disableSort&&"function"==typeof o.sort&&i("kol-button",{exportparts:"icon",_icon:r,_hideLabel:!0,_label:s("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof o.sort){switch(this.sortFunction=o.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData(o)}}},_variant:"ghost"})))}})))))),i("tbody",null,n.map(this.renderTableRow)),this.state._dataFoot.length>0?this.renderFoot():"")))}static get watchers(){return{_caption:["validateCaption"],_data:["validateData"],_dataFoot:["validateDataFoot"],_headers:["validateHeaders"],_minWidth:["validateMinWidth"],_pagination:["validatePagination"]}}};u.style={default:c};export{u as kol_table};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","PAGINATION_OPTIONS","CELL_REFS","Map","KolTable","this","horizontal","sortDirections","showPagination","pageStartSlice","pageEndSlice","disableSort","setSortDirection","sort","direction","clear","set","sortFunction","handlePagination","onClick","event","page","_a","state","_pagination","_on","setState","Object","assign","_page","onChangePage","onChangePageSize","pageSize","_pageSize","beforePatchPagination","nextValue","_nextState","_component","key","updateSortedData","sortedData","_data","get","reverse","renderTableRow","row","rowIndex","h","map","col","colIndex","renderTableCell","asTd","label","scope","rowSpan","colSpan","style","textAlign","width","undefined","class","length","innerHTML","exportparts","_ariaLabel","translate","placeholders","colLabel","_icon","_hideLabel","_label","_variant","ref","render","el","cellRender","renderFoot","rows","createDataField","_dataFoot","_headers","_caption","vertical","_total","_sortedData","validateCaption","value","watchString","required","validateData","emptyStringByArrayHandler","objectObjectHandler","parseJson","e","Array","isArray","find","dataTupel","afterPatch","setTimeout","validateDataFoot","validateHeaders","watchValidator","Set","hooks","beforePatch","headers","forEach","header","cell","sortDirection","_b","_c","_d","devHint","validateMinWidth","defaultValue","validatePagination","componentWillLoad","_minWidth","getNumberOfCols","horizontalHeaders","data","max","count","getNumberOfRows","verticalHeaders","filterHeaderKeys","primaryHeader","cells","push","getPrimaryHeader","isFoot","maxCols","maxRows","startRow","dataField","rowCount","rowSpans","_row","index","i","dataRow","headerCells","rowsTotal","k","j","colspan","rowspan","emptyCell","Math","selectDisplayedData","slice","clearTimeout","html","displayedData","Host","_boundaryCount","_customClass","_pageSizeOptions","_siblingCount","_tooltipAlign","tabindex","minWidth","cols"],"sources":["src/components/table/style.css?tag=kol-table&mode=default&encapsulation=shadow","src/components/table/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n:host {\n\tdisplay: grid;\n}\n:host > div.table {\n\tmax-width: 100%;\n\torder: 1;\n\toverflow-x: auto;\n\toverflow-y: hidden;\n}\n:host > div.table table {\n\twidth: 100%;\n}\nth > div {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n\tplace-items: center;\n}\ndiv.pagination {\n\torder: 2;\n}\ndiv.pagination,\ndiv.pagination > div:last-child {\n\tdisplay: grid;\n\tplace-items: center;\n}\n@media (min-width: 1024px) {\n\tdiv.pagination,\n\tdiv.pagination > div:last-child {\n\t\tgrid-auto-flow: column;\n\t}\n\tdiv.pagination kol-pagination {\n\t\tdisplay: flex;\n\t}\n}\n","import { Generic } from '@a11y-ui/core';\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { Stringified } from '../../types/common';\nimport { devHint } from '../../utils/a11y.tipps';\nimport { emptyStringByArrayHandler, objectObjectHandler, parseJson, setState, watchString, watchValidator } from '../../utils/prop.validators';\nimport { KoliBriPaginationButtonCallbacks } from '../pagination/types';\nimport {\n\tKoliBriSortDirection,\n\tKoliBriSortFunction,\n\tKoliBriTableAPI,\n\tKoliBriTableCell,\n\tKoliBriTableDataType,\n\tKoliBriTableHeaderCell,\n\tKoliBriTableHeaderCellAndData,\n\tKoliBriTableHeaders,\n\tKoliBriTablePaginationProps,\n\tKoliBriTableRender,\n\tKoliBriTableStates,\n} from './types';\n\nconst PAGINATION_OPTIONS = [10, 20, 50, 100];\n\nconst CELL_REFS = new Map<HTMLElement, ReturnType<typeof setTimeout>>();\n\n@Component({\n\ttag: 'kol-table',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTable implements KoliBriTableAPI {\n\tprivate horizontal = true;\n\tprivate sortFunction?: KoliBriSortFunction;\n\tprivate sortDirections: Map<KoliBriSortFunction, KoliBriSortDirection> = new Map();\n\tprivate showPagination = false;\n\tprivate pageStartSlice = 0;\n\tprivate pageEndSlice = 10;\n\tprivate disableSort = false;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _caption!: string;\n\n\t/**\n\t * Gibt die Daten an, die für die Erstellung der Tabelle verwendet werden.\n\t */\n\t@Prop() public _data!: Stringified<KoliBriTableDataType[]>;\n\n\t/**\n\t * Hier können die Daten für die Fußzeile der Tabelle übergeben werden.\n\t */\n\t@Prop() public _dataFoot?: Stringified<KoliBriTableDataType[]>;\n\n\t/**\n\t * Gibt die horizontalen und vertikalen Header für die Tabelle an.\n\t */\n\t@Prop() public _headers!: Stringified<KoliBriTableHeaders>;\n\n\t/**\n\t * Gibt an, die minimale Breite der Tabelle an.\n\t */\n\t@Prop() public _minWidth?: string;\n\n\t/**\n\t * Gibt an, ob die Daten geteilt in Seiten angezeigt wird.\n\t */\n\t@Prop() public _pagination?: boolean | Stringified<KoliBriTablePaginationProps>;\n\n\t@State() public state: KoliBriTableStates = {\n\t\t_caption: '…', // ⚠ required\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_pagination: {\n\t\t\t_page: 1,\n\t\t\t_pageSize: 10,\n\t\t\t_total: 0,\n\t\t},\n\t\t_sortedData: [],\n\t};\n\n\t@Watch('_caption')\n\tpublic validateCaption(value?: string): void {\n\t\twatchString(this, '_caption', value, {\n\t\t\trequired: true,\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\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\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 headers: KoliBriTableHeaders = nextValue as KoliBriTableHeaders;\n\t\t\t\t\t\t\theaders.horizontal?.forEach((header) => {\n\t\t\t\t\t\t\t\theader.forEach((cell) => {\n\t\t\t\t\t\t\t\t\tif (typeof cell.sort === 'function' && typeof cell.sortDirection === 'string') {\n\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(cell.sort, cell.sortDirection);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\theaders.vertical?.forEach((header) => {\n\t\t\t\t\t\t\t\theader.forEach((cell) => {\n\t\t\t\t\t\t\t\t\tif (typeof cell.sort === 'function' && typeof cell.sortDirection === 'string') {\n\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(cell.sort, cell.sortDirection);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\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('_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\tprivate readonly beforePatchPagination: Generic.Element.NextStateHooksCallback = (nextValue, _nextState, _component, key): void => {\n\t\tif (key === '_pagination') {\n\t\t\tthis.showPagination = nextValue === true || nextValue === '' /* true */ || (typeof nextValue === 'object' && nextValue !== null);\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<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\t\twatchValidator(this, '_pagination', () => true, new Set(['boolean', 'KoliBriTablePagination']), value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchPagination,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCaption(this._caption);\n\t\tthis.validateData(this._data);\n\t\tthis.validateDataFoot(this._dataFoot);\n\t\tthis.validateHeaders(this._headers);\n\t\tthis.validateMinWidth(this._minWidth);\n\t\tthis.validatePagination(this._pagination);\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.innerHTML = html;\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t}\n\n\tprivate updateSortedData = () => {\n\t\tlet sortedData: KoliBriTableDataType[] = this.state._data;\n\t\tif (typeof this.sortFunction === 'function') {\n\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\tcase 'NOS':\n\t\t\t\t\tsortedData = [...this.state._data];\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ASC':\n\t\t\t\t\tsortedData = this.sortFunction([...this.state._data]);\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tsortedData = this.sortFunction([...this.state._data]).reverse();\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 = (col: KoliBriTableCell, rowIndex: number, colIndex: number): JSX.Element => {\n\t\tif (col.asTd === false) {\n\t\t\treturn (\n\t\t\t\t<th // role=\"rowheader\"\n\t\t\t\t\tkey={`tbody-${rowIndex}-${colIndex}-${col.label}`}\n\t\t\t\t\tscope={typeof col.rowSpan === 'number' && col.rowSpan > 1 ? 'rowgroup' : 'row'}\n\t\t\t\t\tcolSpan={col.colSpan}\n\t\t\t\t\trowSpan={col.rowSpan}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t}}\n\t\t\t\t\taria-sort={\n\t\t\t\t\t\t!this.disableSort && typeof col.sort === 'function'\n\t\t\t\t\t\t\t? col.sort !== this.sortFunction || this.sortDirections.get(col.sort) === 'NOS' || this.sortDirections.get(col.sort) === undefined\n\t\t\t\t\t\t\t\t? 'none'\n\t\t\t\t\t\t\t\t: this.sortDirections.get(col.sort) === 'ASC'\n\t\t\t\t\t\t\t\t? 'ascending'\n\t\t\t\t\t\t\t\t: 'descending'\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\t\t\tdata-sort={`sort-${this.sortDirections.get(col.sort!) as string}`}\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[col.textAlign as string]: typeof col.textAlign === 'string' && col.textAlign.length > 0,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tinnerHTML={col.label}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t></div>\n\t\t\t\t\t\t{!this.disableSort && typeof col.sort === 'function' && (\n\t\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t_ariaLabel={translate('kol-change-order', { placeholders: { colLabel: col.label } })}\n\t\t\t\t\t\t\t\t_icon={\n\t\t\t\t\t\t\t\t\tcol.sort !== this.sortFunction || this.sortDirections.get(col.sort) === 'NOS' || this.sortDirections.get(col.sort) === undefined\n\t\t\t\t\t\t\t\t\t\t? 'codicon codicon-fold'\n\t\t\t\t\t\t\t\t\t\t: this.sortDirections.get(col.sort) === 'ASC'\n\t\t\t\t\t\t\t\t\t\t? 'codicon codicon-chevron-up'\n\t\t\t\t\t\t\t\t\t\t: 'codicon codicon-chevron-down'\n\t\t\t\t\t\t\t\t}\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: col.label } })}\n\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\tif (typeof col.sort === 'function') {\n\t\t\t\t\t\t\t\t\t\t\tthis.sortFunction = col.sort;\n\t\t\t\t\t\t\t\t\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\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\tthis.setSortDirection(this.sortFunction, 'DESC');\n\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\tcase 'DESC':\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'NOS');\n\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\tdefault:\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'ASC');\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tthis.updateSortedData();\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\t_variant=\"ghost\"\n\t\t\t\t\t\t\t></kol-button>\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}-${col.label}`}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[col.textAlign as string]: typeof col.textAlign === 'string' && col.textAlign.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\tcolSpan={col.colSpan}\n\t\t\t\t\trowSpan={col.rowSpan}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\ttextAlign: col.textAlign,\n\t\t\t\t\t\twidth: col.width,\n\t\t\t\t\t}}\n\t\t\t\t\tref={\n\t\t\t\t\t\ttypeof col.render === 'function'\n\t\t\t\t\t\t\t? (el) => {\n\t\t\t\t\t\t\t\t\tthis.cellRender(col as KoliBriTableHeaderCellAndData & { render: KoliBriTableRender }, el);\n\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\tinnerHTML={typeof col.render !== 'function' ? col.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\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\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.pageEndSlice > 0 && this.showPagination && (\n\t\t\t\t\t<div class=\"pagination\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\tEinträge {this.pageEndSlice > 0 ? this.pageStartSlice + 1 : 0} bis {this.pageEndSlice} von{' '}\n\t\t\t\t\t\t\t{this.state._pagination._total || (Array.isArray(this.state._data) ? this.state._data.length : 0)} angezeigt\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<kol-pagination\n\t\t\t\t\t\t\t\t_boundaryCount={this.state._pagination._boundaryCount}\n\t\t\t\t\t\t\t\t_customClass={this.state._pagination._customClass}\n\t\t\t\t\t\t\t\t_on={this.handlePagination}\n\t\t\t\t\t\t\t\t_page={this.state._pagination._page}\n\t\t\t\t\t\t\t\t_pageSize={this.state._pagination._pageSize}\n\t\t\t\t\t\t\t\t_pageSizeOptions={this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS}\n\t\t\t\t\t\t\t\t_siblingCount={this.state._pagination._siblingCount}\n\t\t\t\t\t\t\t\t_tooltipAlign=\"bottom\"\n\t\t\t\t\t\t\t\t_total={this.state._pagination._total || this.state._data.length}\n\t\t\t\t\t\t\t></kol-pagination>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div class=\"table\" tabindex=\"0\">\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<caption>{this.state._caption}</caption>\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  }\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\tinnerHTML={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\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th // role=\"columnheader\"\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\tscope={typeof col.colSpan === 'number' && col.colSpan > 1 ? 'colgroup' : 'col'}\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\taria-sort={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t!this.disableSort && typeof col.sort === 'function'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? col.sort !== this.sortFunction ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  this.sortDirections.get(col.sort) === 'NOS' ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t  this.sortDirections.get(col.sort) === undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'none'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: this.sortDirections.get(col.sort) === 'ASC'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'ascending'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'descending'\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\t// eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-sort={`sort-${this.sortDirections.get(col.sort!) as string}`}\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<div class=\"w-full flex gap-1 items-center\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'w-full': true,\n\t\t\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\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tinnerHTML={col.label}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\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></div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{!this.disableSort && typeof col.sort === 'function' && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<kol-button\n\t\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\t_icon={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcol.sort !== this.sortFunction ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortDirections.get(col.sort) === 'NOS' ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortDirections.get(col.sort) === undefined\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'codicon codicon-fold'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: this.sortDirections.get(col.sort) === 'ASC'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'codicon codicon-chevron-up'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'codicon codicon-chevron-down'\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\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_label={translate('kol-change-order', { placeholders: { colLabel: col.label } })}\n\t\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\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (typeof col.sort === 'function') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortFunction = col.sort;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'DESC');\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'NOS');\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'ASC');\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.updateSortedData();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\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\t_variant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\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</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;8UAAA,MAAMA,EAAkB,4nCCuBxB,MAAMC,EAAqB,CAAC,GAAI,GAAI,GAAI,KAExC,MAAMC,EAAY,IAAIC,I,MASTC,EAAQ,M,yBACZC,KAAAC,WAAa,KAEbD,KAAAE,eAAiE,IAAIJ,IACrEE,KAAAG,eAAiB,MACjBH,KAAAI,eAAiB,EACjBJ,KAAAK,aAAe,GACfL,KAAAM,YAAc,MAwGdN,KAAAO,iBAAmB,CAACC,EAA2BC,KAStDT,KAAKE,eAAeQ,QACpBV,KAAKE,eAAeS,IAAIH,EAAMC,GAC9BT,KAAKY,aAAeJ,CAAI,EA6DRR,KAAAa,iBAAqD,CACrEC,QAAS,CAACC,EAAcC,K,MACvB,WAAWC,EAAAjB,KAAKkB,MAAMC,YAAYC,OAAG,MAAAH,SAAA,SAAAA,EAAEH,WAAY,WAAY,CAC9Dd,KAAKkB,MAAMC,YAAYC,IAAIN,QAAQC,EAAOC,E,CAE3CK,EAASrB,KAAM,cAAasB,OAAAC,OAAAD,OAAAC,OAAA,GACxBvB,KAAKkB,MAAMC,aAAW,CACzBK,MAAOR,IACN,EAEHS,aAAc,CAACV,EAAcC,K,MAC5B,WAAWC,EAAAjB,KAAKkB,MAAMC,YAAYC,OAAG,MAAAH,SAAA,SAAAA,EAAEQ,gBAAiB,WAAY,CACnEzB,KAAKkB,MAAMC,YAAYC,IAAIK,aAAaV,EAAOC,E,CAEhDK,EAASrB,KAAM,cAAasB,OAAAC,OAAAD,OAAAC,OAAA,GACxBvB,KAAKkB,MAAMC,aAAW,CACzBK,MAAOR,IACN,EAEHU,iBAAkB,CAACX,EAAcY,K,MAChC,WAAWV,EAAAjB,KAAKkB,MAAMC,YAAYC,OAAG,MAAAH,SAAA,SAAAA,EAAES,oBAAqB,WAAY,CACvE1B,KAAKkB,MAAMC,YAAYC,IAAIM,iBAAiBX,EAAOY,E,CAEpDN,EAASrB,KAAM,cAAasB,OAAAC,OAAAD,OAAAC,OAAA,GACxBvB,KAAKkB,MAAMC,aAAW,CACzBS,UAAWD,KAEZN,EAASrB,KAAM,YAAa2B,EAAS,GAItB3B,KAAA6B,sBAAgE,CAACC,EAAWC,EAAYC,EAAYC,KACpH,GAAIA,IAAQ,cAAe,CAC1BjC,KAAKG,eAAiB2B,IAAc,MAAQA,IAAc,WAAyBA,IAAc,UAAYA,IAAc,I,GAiPrH9B,KAAAkC,iBAAmB,KAC1B,IAAIC,EAAqCnC,KAAKkB,MAAMkB,MACpD,UAAWpC,KAAKY,eAAiB,WAAY,CAC5C,OAAQZ,KAAKE,eAAemC,IAAIrC,KAAKY,eACpC,IAAK,MACJuB,EAAa,IAAInC,KAAKkB,MAAMkB,OAC5B,MACD,IAAK,MACJD,EAAanC,KAAKY,aAAa,IAAIZ,KAAKkB,MAAMkB,QAC9C,MACD,QACCD,EAAanC,KAAKY,aAAa,IAAIZ,KAAKkB,MAAMkB,QAAQE,U,CAGzDjB,EAASrB,KAAM,cAAemC,EAAW,EAGzBnC,KAAAuC,eAAiB,CAACC,EAAyBC,IACpDC,EAAA,MAAIT,IAAK,SAASQ,KAAaD,EAAIG,KAAI,CAACC,EAAKC,IAAa7C,KAAK8C,gBAAgBF,EAAKH,EAAUI,MAErF7C,KAAA8C,gBAAkB,CAACF,EAAuBH,EAAkBI,KAC5E,GAAID,EAAIG,OAAS,MAAO,CACvB,OACCL,EAAA,MACCT,IAAK,SAASQ,KAAYI,KAAYD,EAAII,QAC1CC,aAAcL,EAAIM,UAAY,UAAYN,EAAIM,QAAU,EAAI,WAAa,MACzEC,QAASP,EAAIO,QACbD,QAASN,EAAIM,QACbE,MAAO,CACNC,UAAWT,EAAIS,UACfC,MAAOV,EAAIU,OACX,aAECtD,KAAKM,oBAAsBsC,EAAIpC,OAAS,WACtCoC,EAAIpC,OAASR,KAAKY,cAAgBZ,KAAKE,eAAemC,IAAIO,EAAIpC,QAAU,OAASR,KAAKE,eAAemC,IAAIO,EAAIpC,QAAU+C,UACtH,OACAvD,KAAKE,eAAemC,IAAIO,EAAIpC,QAAU,MACtC,YACA,aACD+C,UAAS,YAGF,QAAQvD,KAAKE,eAAemC,IAAIO,EAAIpC,SAE/CkC,EAAA,OAAKc,MAAM,kCACVd,EAAA,OACCc,MAAO,CACN,SAAU,KACV,CAACZ,EAAIS,kBAA6BT,EAAIS,YAAc,UAAYT,EAAIS,UAAUI,OAAS,GAExFC,UAAWd,EAAII,MACfI,MAAO,CACNC,UAAWT,EAAIS,cAGfrD,KAAKM,oBAAsBsC,EAAIpC,OAAS,YACzCkC,EAAA,cACCiB,YAAY,OACZC,WAAYC,EAAU,mBAAoB,CAAEC,aAAc,CAAEC,SAAUnB,EAAII,SAC1EgB,MACCpB,EAAIpC,OAASR,KAAKY,cAAgBZ,KAAKE,eAAemC,IAAIO,EAAIpC,QAAU,OAASR,KAAKE,eAAemC,IAAIO,EAAIpC,QAAU+C,UACpH,uBACAvD,KAAKE,eAAemC,IAAIO,EAAIpC,QAAU,MACtC,6BACA,+BAEJyD,WAAU,KACVC,OAAQL,EAAU,mBAAoB,CAAEC,aAAc,CAAEC,SAAUnB,EAAII,SACtE5B,IAAK,CACJN,QAAS,KACR,UAAW8B,EAAIpC,OAAS,WAAY,CACnCR,KAAKY,aAAegC,EAAIpC,KACxB,OAAQR,KAAKE,eAAemC,IAAIrC,KAAKY,eACpC,IAAK,MACJZ,KAAKO,iBAAiBP,KAAKY,aAAc,QACzC,MACD,IAAK,OACJZ,KAAKO,iBAAiBP,KAAKY,aAAc,OACzC,MACD,QACCZ,KAAKO,iBAAiBP,KAAKY,aAAc,OAE3CZ,KAAKkC,kB,IAIRiC,SAAS,W,KAMR,CACN,OACCzB,EAAA,MACCT,IAAK,SAASQ,KAAYI,KAAYD,EAAII,QAC1CQ,MAAO,CACN,CAACZ,EAAIS,kBAA6BT,EAAIS,YAAc,UAAYT,EAAIS,UAAUI,OAAS,GAExFN,QAASP,EAAIO,QACbD,QAASN,EAAIM,QACbE,MAAO,CACNC,UAAWT,EAAIS,UACfC,MAAOV,EAAIU,OAEZc,WACQxB,EAAIyB,SAAW,WAClBC,IACDtE,KAAKuE,WAAW3B,EAAuE0B,EAAG,EAE1Ff,UAEJG,iBAAkBd,EAAIyB,SAAW,WAAazB,EAAII,MAAQ,I,GAM7ChD,KAAAwE,WAAa,KAC7B,MAAMC,EAA6BzE,KAAK0E,gBAAgB1E,KAAKkB,MAAMyD,UAAW3E,KAAKkB,MAAM0D,SAAU,MACnG,OAAOlC,EAAA,aAAQ+B,EAAK9B,IAAI3C,KAAKuC,gBAAwB,E,6JA1hBV,CAC3CsC,SAAU,IACVzC,MAAO,GACPuC,UAAW,GACXC,SAAU,CACT3E,WAAY,GACZ6E,SAAU,IAEX3D,YAAa,CACZK,MAAO,EACPI,UAAW,GACXmD,OAAQ,GAETC,YAAa,G,CAIPC,gBAAgBC,GACtBC,EAAYnF,KAAM,WAAYkF,EAAO,CACpCE,SAAU,M,CAKLC,aAAaH,GACnBI,EAA0BJ,GAAO,KAChCK,EAAoBL,GAAO,KAC1B,UAAWA,IAAU,YAAa,CACjCA,EAAQ,E,CAET,IACCA,EAAQM,EAAkCN,E,CAEzC,MAAOO,G,CAGT,GAAIC,MAAMC,QAAQT,IAAUA,EAAMU,MAAMC,YAA6CA,IAAc,UAAYA,IAAc,UAAWtC,UAAW,CAClJlC,EAASrB,KAAM,QAASkF,EAAO,CAC9BY,WAAY,KAEXC,WAAW/F,KAAKkC,iBAAiB,G,IAInC,G,CAKG8D,iBAAiBd,GACvBI,EAA0BJ,GAAO,KAChCK,EAAoBL,GAAO,KAC1B,UAAWA,IAAU,YAAa,CACjCA,EAAQ,E,CAET,IACCA,EAAQM,EAAkCN,E,CAEzC,MAAOO,G,CAGT,GAAIC,MAAMC,QAAQT,IAAUA,EAAMU,MAAMC,YAA6CA,IAAc,UAAYA,IAAc,UAAWtC,UAAW,CAClJlC,EAASrB,KAAM,YAAakF,EAAO,CAClCY,WAAY,KACXC,WAAW/F,KAAKkC,iBAAiB,G,IAInC,G,CAmBG+D,gBAAgBf,GAWtBI,EAA0BJ,GAAO,KAChCK,EAAoBL,GAAO,KAC1B,IACCA,EAAQM,EAA+BN,E,CAEtC,MAAOO,G,CAGTS,EAAelG,KAAM,YAAakF,UAA0BA,IAAU,UAAYA,IAAU,MAAM,IAAIiB,IAAI,CAAC,wBAAyBjB,EAAO,CAC1IkB,MAAO,CACNC,YAAcvE,I,YACb,MAAMwE,EAA+BxE,GACrCb,EAAAqF,EAAQrG,cAAU,MAAAgB,SAAA,SAAAA,EAAEsF,SAASC,IAC5BA,EAAOD,SAASE,IACf,UAAWA,EAAKjG,OAAS,mBAAqBiG,EAAKC,gBAAkB,SAAU,CAC9E1G,KAAKO,iBAAiBkG,EAAKjG,KAAMiG,EAAKC,c,IAEtC,KAEHC,EAAAL,EAAQxB,YAAQ,MAAA6B,SAAA,SAAAA,EAAEJ,SAASC,IAC1BA,EAAOD,SAASE,IACf,UAAWA,EAAKjG,OAAS,mBAAqBiG,EAAKC,gBAAkB,SAAU,CAC9E1G,KAAKO,iBAAiBkG,EAAKjG,KAAMiG,EAAKC,c,IAEtC,IAEH,GAAIJ,EAAQrG,YAAcqG,EAAQxB,YAAY8B,EAAAN,EAAQrG,cAAU,MAAA2G,SAAA,SAAAA,EAAEnD,QAAS,KAAKoD,EAAAP,EAAQxB,YAAQ,MAAA+B,SAAA,SAAAA,EAAEpD,QAAS,EAAG,CAC7GzD,KAAKM,YAAc,KACnBwG,EACC,8J,KAKH,GACD,G,CAKGC,iBAAiB7B,GACvBC,EAAYnF,KAAM,YAAakF,EAAO,CACrC8B,aAAczD,W,CA0CT0D,mBAAmB/B,GACzB,IACCA,EAAQM,EAAuCN,E,CAE9C,MAAOO,G,CAGTS,EAAelG,KAAM,eAAe,IAAM,MAAM,IAAImG,IAAI,CAAC,UAAW,2BAA4BjB,EAAO,CACtGkB,MAAO,CACNC,YAAarG,KAAK6B,wB,CAKdqF,oBACNlH,KAAKiF,gBAAgBjF,KAAK6E,UAC1B7E,KAAKqF,aAAarF,KAAKoC,OACvBpC,KAAKgG,iBAAiBhG,KAAK2E,WAC3B3E,KAAKiG,gBAAgBjG,KAAK4E,UAC1B5E,KAAK+G,iBAAiB/G,KAAKmH,WAC3BnH,KAAKiH,mBAAmBjH,KAAKmB,Y,CAGtBiG,gBAAgBC,EAA+CC,GACtE,IAAIC,EAAM,EACVF,EAAkBd,SAAS/D,IAC1B,IAAIgF,EAAQ,EACZhF,EAAI+D,SAAS3D,IAAG,IAAA3B,EAAK,OAACuG,IAASvG,EAAA2B,EAAIO,WAAO,MAAAlC,SAAA,EAAAA,EAAI,CAAC,IAC/C,GAAIsG,EAAMC,EAAO,CAChBD,EAAMC,C,KAGR,GAAID,IAAQ,EAAG,CACdA,EAAMD,EAAK7D,M,CAEZ,OAAO8D,C,CAGAE,gBAAgBC,EAA6CJ,GACpE,IAAIC,EAAM,EACVG,EAAgBnB,SAAS3D,IACxB,IAAI4E,EAAQ,EACZ5E,EAAI2D,SAAS/D,IAAG,IAAAvB,EAAK,OAACuG,IAASvG,EAAAuB,EAAIU,WAAO,MAAAjC,SAAA,EAAAA,EAAI,CAAC,IAC/C,GAAIsG,EAAMC,EAAO,CAChBD,EAAMC,C,KAGR,GAAID,IAAQ,EAAG,CACdA,EAAMD,EAAK7D,M,KACL,CACN8D,GAAOvH,KAAKkB,MAAMyD,UAAUlB,M,CAE7B,OAAO8D,C,CAGAI,iBAAiBrB,GACxB,MAAMsB,EAA0C,GAChDtB,EAAQC,SAASsB,IAChBA,EAAMtB,SAASE,IACd,UAAWA,EAAKxE,MAAQ,SAAU,CACjC2F,EAAcE,KAAKrB,E,IAEnB,IAEH,OAAOmB,C,CAGAG,iBAAiBzB,G,QACxB,IAAIsB,EAA0C5H,KAAK2H,kBAAiB1G,EAAAqF,EAAQrG,cAAU,MAAAgB,SAAA,EAAAA,EAAI,IAC1FjB,KAAKC,WAAa,KAClB,GAAI2H,EAAcnE,SAAW,EAAG,CAC/BmE,EAAgB5H,KAAK2H,kBAAiBhB,EAAAL,EAAQxB,YAAQ,MAAA6B,SAAA,EAAAA,EAAI,IAC1D,GAAIiB,EAAcnE,OAAS,EAAG,CAC7BzD,KAAKC,WAAa,K,EAGpB,OAAO2H,C,CAGAlD,gBAAgB4C,EAA8BhB,EAA8B0B,GACnF1B,EAAQrG,WAAayF,MAAMC,QAAQW,IAAO,MAAPA,SAAO,SAAPA,EAASrG,YAAcqG,EAAQrG,WAAa,GAC/EqG,EAAQxB,SAAWY,MAAMC,QAAQW,IAAO,MAAPA,SAAO,SAAPA,EAASxB,UAAYwB,EAAQxB,SAAW,GACzE,MAAM8C,EAAgB5H,KAAK+H,iBAAiBzB,GAC5C,MAAM2B,EAAUjI,KAAKoH,gBAAgBd,EAAQrG,WAAYqH,GACzD,IAAIY,EAAUlI,KAAKyH,gBAAgBnB,EAAQxB,SAAUwC,GACrD,IAAIa,EAAW,EACf,GAAIH,EAAQ,CACXG,EAAWD,EACXA,GAAWlI,KAAKkB,MAAMyD,UAAUlB,M,CAEjC,MAAM2E,EAAkC,GAExC,MAAMC,EAAqB,GAC3B,MAAMC,EAAuB,GAC7BhC,EAAQxB,SAASyB,SAAQ,CAACgC,EAAMC,KAC/BH,EAASG,GAAS,EAClBF,EAASE,GAAS,EAAE,IAGrB,IAAK,IAAIC,EAAIN,EAAUM,EAAIP,EAASO,IAAK,CACxC,MAAMC,EAA2C,GACjDpC,EAAQxB,SAASyB,SAAQ,CAACoC,EAAaH,KACtC,IAAII,EAAY,EAChBN,EAASE,GAAOjC,SAASrB,GAAW0D,GAAa1D,IACjD,GAAI0D,GAAaH,EAAG,CACnB,MAAMhE,EAAOkE,EAAYF,EAAIG,EAAYP,EAASG,IAClD,UAAW/D,IAAS,SAAU,CAC7BiE,EAAQZ,KAAIxG,OAAAC,OAAAD,OAAAC,OAAA,GACRkD,GAAI,CACP1B,KAAM,MAENuE,KAAM,MAEP,IAAIpE,EAAU,EACd,UAAWuB,EAAKvB,UAAY,UAAYuB,EAAKvB,QAAU,EAAG,CACzDA,EAAUuB,EAAKvB,O,CAEhBoF,EAASE,GAAOV,KAAK5E,GACrB,UAAWuB,EAAKtB,UAAY,UAAYsB,EAAKtB,QAAU,EAAG,CACzD,IAAK,IAAI0F,EAAI,EAAGA,EAAIpE,EAAKtB,QAAS0F,IAAK,CACtCP,EAASE,EAAQK,GAAGf,KAAK5E,E,EAG3BmF,EAASG,I,MAIZ,IAAK,IAAIM,EAAI,EAAGA,EAAIb,EAASa,IAAK,CACjC,GAAI9I,KAAKC,aAAe,KAAM,CAC7B,MAAMuC,EAAMwF,EAAShI,KAAKkB,MAAMyD,UAAU8D,EAAIN,GAAYb,EAAKmB,GAC/D,UACQb,EAAckB,KAAO,UAC5BlB,EAAckB,KAAO,aACdlB,EAAckB,GAAG7G,MAAQ,iBACzBO,IAAQ,UACfA,IAAQ,KACP,CACDkG,EAAQZ,KAAIxG,OAAAC,OAAAD,OAAAC,OAAA,GACRqG,EAAckB,IAAE,CACnB3F,QAASI,UAET+D,KAAM9E,EAENQ,MAAOR,EAAIoF,EAAckB,GAAG7G,KAC5BiB,QAASK,Y,MAGL,CACN,UACQqE,EAAca,KAAO,UAC5Bb,EAAca,KAAO,aACdb,EAAca,GAAGxG,MAAQ,iBACzBqF,EAAKwB,KAAO,UACnBxB,EAAKwB,KAAO,KACX,CACDJ,EAAQZ,KAAIxG,OAAAC,OAAAD,OAAAC,OAAA,GACRqG,EAAca,IAAE,CACnBtF,QAASI,UAET+D,KAAMA,EAAKwB,GAEX9F,MAAOsE,EAAKwB,GAAGlB,EAAca,GAAGxG,KAChCiB,QAASK,Y,GAKb6E,EAAUN,KAAKY,E,CAEhB,GAAIpB,EAAK7D,SAAW,EAAG,CACtB,IAAIsF,EAAU,EACd,IAAIC,EAAU,EACd,GAAItD,MAAMC,QAAQW,EAAQrG,aAAeqG,EAAQrG,WAAWwD,OAAS,EAAG,CACvE6C,EAAQrG,WAAW,GAAGsG,SAAS3D,IAC9BmG,GAAWnG,EAAIO,SAAW,CAAC,G,CAG7B,GAAIuC,MAAMC,QAAQW,EAAQxB,WAAawB,EAAQxB,SAASrB,OAAS,EAAG,CACnEsF,GAAWzC,EAAQxB,SAASrB,OAC5B6C,EAAQxB,SAAS,GAAGyB,SAAS/D,IAC5BwG,GAAWxG,EAAIU,SAAW,CAAC,G,CAG7B,MAAM+F,EAAY,CACjB9F,QAAS4F,EACT/F,MAAOa,EAAU,kBACjBQ,OAAQd,UACRL,QAASgG,KAAK3B,IAAIyB,EAAS,IAE5B,GAAIZ,EAAU3E,SAAW,EAAG,CAC3B2E,EAAUN,KAAK,CAACmB,G,KACV,CACNb,EAAU,GAAGN,KAAKmB,E,EAGpB,OAAOb,C,CAGAe,oBAAoB7B,EAA8B3F,EAAkBX,GAC3E,UAAWW,IAAa,UAAYA,EAAW,UAAYX,IAAS,UAAYA,EAAO,EAAG,CACzFhB,KAAKI,eAAiBuB,GAAYX,EAAO,GACzChB,KAAKK,aAAesB,EAAWX,EAAOsG,EAAK7D,OAAS6D,EAAK7D,OAAS9B,EAAWX,EAC7E,OAAOsG,EAAK8B,MAAMpJ,KAAKI,eAAgBJ,KAAKK,a,KACtC,CACNL,KAAKI,eAAiB,EACtBJ,KAAKK,aAAeiH,EAAK7D,OACzB,OAAO6D,C,EAID/C,WAAW3B,EAAqE0B,GACvF,GAAIA,EAAqC,CACxC+E,aAAaxJ,EAAUwC,IAAIiC,IAC3BzE,EAAUc,IACT2D,EACAyB,YAAW,KACVsD,aAAaxJ,EAAUwC,IAAIiC,IAC3B,MAAMgF,EAAO1G,EAAIyB,OAChBC,EACA,CACCvB,KAAMH,EAAIG,KACVC,MAAOJ,EAAII,MACXK,UAAWT,EAAIS,UACfC,MAAOV,EAAIU,OAEZV,EAAI0E,KACJtH,KAAKkB,MAAMkB,OAEZ,UAAWkH,IAAS,SAAU,CAC7BhF,EAAGZ,UAAY4F,C,OAkIbjF,S,QACN,MAAMkF,EAAwCvJ,KAAKmJ,oBAClDnJ,KAAKkB,MAAM8D,YACXhF,KAAKG,gBAAiBwG,GAAA1F,EAAAjB,KAAKkB,MAAMC,eAAW,MAAAF,SAAA,SAAAA,EAAEW,aAAS,MAAA+E,SAAA,EAAAA,EAAI,GAAK3G,KAAKkB,MAAM8D,YAAYvB,OACvFzD,KAAKkB,MAAMC,YAAYK,OAAS,GAEjC,MAAM4G,EAAYpI,KAAK0E,gBAAgB6E,EAAevJ,KAAKkB,MAAM0D,UAEjE,OACClC,EAAC8G,EAAI,KACHxJ,KAAKK,aAAe,GAAKL,KAAKG,gBAC9BuC,EAAA,OAAKc,MAAM,cACVd,EAAA,wBACW1C,KAAKK,aAAe,EAAIL,KAAKI,eAAiB,EAAI,EAAC,QAAOJ,KAAKK,aAAY,OAAM,IAC1FL,KAAKkB,MAAMC,YAAY4D,SAAWW,MAAMC,QAAQ3F,KAAKkB,MAAMkB,OAASpC,KAAKkB,MAAMkB,MAAMqB,OAAS,GAAE,cAElGf,EAAA,WACCA,EAAA,kBACC+G,eAAgBzJ,KAAKkB,MAAMC,YAAYsI,eACvCC,aAAc1J,KAAKkB,MAAMC,YAAYuI,aACrCtI,IAAKpB,KAAKa,iBACVW,MAAOxB,KAAKkB,MAAMC,YAAYK,MAC9BI,UAAW5B,KAAKkB,MAAMC,YAAYS,UAClC+H,iBAAkB3J,KAAKkB,MAAMC,YAAYwI,kBAAoB/J,EAC7DgK,cAAe5J,KAAKkB,MAAMC,YAAYyI,cACtCC,cAAc,SACd9E,OAAQ/E,KAAKkB,MAAMC,YAAY4D,QAAU/E,KAAKkB,MAAMkB,MAAMqB,WAK9Df,EAAA,OAAKc,MAAM,QAAQsG,SAAS,KAC3BpH,EAAA,SACCU,MAAO,CACN2G,SAAU/J,KAAKkB,MAAMiG,YAGtBzE,EAAA,eAAU1C,KAAKkB,MAAM2D,UACpBa,MAAMC,QAAQ3F,KAAKkB,MAAM0D,SAAS3E,aAClCyC,EAAA,aACE1C,KAAKkB,MAAM0D,SAAS3E,WAAW0C,KAAI,CAACqH,EAAMvH,IAC1CC,EAAA,MAAIT,IAAK,SAASQ,KAChBuH,EAAKrH,KAAI,CAACC,EAAKC,KACf,GAAID,EAAIG,OAAS,KAAM,CACtB,OACCL,EAAA,MACCT,IAAK,SAASQ,KAAYI,KAAYD,EAAII,QAC1CQ,MAAO,CACN,CAACZ,EAAIS,kBAA6BT,EAAIS,YAAc,UAAYT,EAAIS,UAAUI,OAAS,GAExFN,QAASP,EAAIO,QACbD,QAASN,EAAIM,QACbE,MAAO,CACNC,UAAWT,EAAIS,UACfC,MAAOV,EAAIU,OAEZc,WACQxB,EAAIyB,SAAW,WAClBC,IACDtE,KAAKuE,WAAW3B,EAAuE0B,EAAG,EAE1Ff,UAEJG,iBAAkBd,EAAIyB,SAAW,WAAazB,EAAII,MAAQ,I,KAGtD,CACN,OACCN,EAAA,MACCT,IAAK,SAASQ,KAAYI,KAAYD,EAAII,QAC1CC,aAAcL,EAAIO,UAAY,UAAYP,EAAIO,QAAU,EAAI,WAAa,MACzEA,QAASP,EAAIO,QACbD,QAASN,EAAIM,QACbE,MAAO,CACNC,UAAWT,EAAIS,UACfC,MAAOV,EAAIU,OACX,aAECtD,KAAKM,oBAAsBsC,EAAIpC,OAAS,WACtCoC,EAAIpC,OAASR,KAAKY,cAClBZ,KAAKE,eAAemC,IAAIO,EAAIpC,QAAU,OACtCR,KAAKE,eAAemC,IAAIO,EAAIpC,QAAU+C,UACrC,OACAvD,KAAKE,eAAemC,IAAIO,EAAIpC,QAAU,MACtC,YACA,aACD+C,UAAS,YAGF,QAAQvD,KAAKE,eAAemC,IAAIO,EAAIpC,SAE/CkC,EAAA,OAAKc,MAAM,kCACVd,EAAA,OACCc,MAAO,CACN,SAAU,KACV,CAACZ,EAAIS,kBAA6BT,EAAIS,YAAc,UAAYT,EAAIS,UAAUI,OAAS,GAExFC,UAAWd,EAAII,MACfI,MAAO,CACNC,UAAWT,EAAIS,cAGfrD,KAAKM,oBAAsBsC,EAAIpC,OAAS,YACzCkC,EAAA,cACCiB,YAAY,OACZK,MACCpB,EAAIpC,OAASR,KAAKY,cAClBZ,KAAKE,eAAemC,IAAIO,EAAIpC,QAAU,OACtCR,KAAKE,eAAemC,IAAIO,EAAIpC,QAAU+C,UACnC,uBACAvD,KAAKE,eAAemC,IAAIO,EAAIpC,QAAU,MACtC,6BACA,+BAEJyD,WAAU,KACVC,OAAQL,EAAU,mBAAoB,CAAEC,aAAc,CAAEC,SAAUnB,EAAII,SACtE5B,IAAK,CACJN,QAAS,KACR,UAAW8B,EAAIpC,OAAS,WAAY,CACnCR,KAAKY,aAAegC,EAAIpC,KACxB,OAAQR,KAAKE,eAAemC,IAAIrC,KAAKY,eACpC,IAAK,MACJZ,KAAKO,iBAAiBP,KAAKY,aAAc,QACzC,MACD,IAAK,OACJZ,KAAKO,iBAAiBP,KAAKY,aAAc,OACzC,MACD,QACCZ,KAAKO,iBAAiBP,KAAKY,aAAc,OAE3CZ,KAAKkC,kB,IAIRiC,SAAS,W,SAYpBzB,EAAA,aAAQ0F,EAAUzF,IAAI3C,KAAKuC,iBAC1BvC,KAAKkB,MAAMyD,UAAUlB,OAAS,EAAIzD,KAAKwE,aAAe,K"}
+{"version":3,"names":["defaultStyleCss","PAGINATION_OPTIONS","CELL_REFS","Map","KolTable","this","horizontal","sortDirections","showPagination","pageStartSlice","pageEndSlice","disableSort","sortedColumnHead","label","key","sortDirection","ariaLive","setSortDirection","sort","direction","clear","set","sortFunction","handlePagination","onClick","event","page","_a","state","_pagination","_on","setState","Object","assign","_page","onChangePage","onChangePageSize","pageSize","_pageSize","beforePatchPagination","nextValue","_nextState","_component","updateSortedData","cell","sortedData","_data","get","translate","placeholders","column","reverse","renderTableRow","row","rowIndex","h","map","col","colIndex","renderTableCell","asTd","headerCell","undefined","sortButtonIcon","scope","rowSpan","colSpan","style","textAlign","width","class","length","innerHTML","exportparts","_icon","_hideLabel","_label","colLabel","_variant","ref","render","el","cellRender","renderFoot","rows","createDataField","_dataFoot","_headers","_caption","vertical","_total","_sortedData","validateCaption","value","watchString","required","validateData","emptyStringByArrayHandler","objectObjectHandler","parseJson","e","Array","isArray","find","dataTupel","afterPatch","setTimeout","validateDataFoot","validateHeaders","watchValidator","Set","hooks","beforePatch","headers","forEach","header","_b","_c","_d","devHint","validateMinWidth","defaultValue","validatePagination","componentWillLoad","_minWidth","getNumberOfCols","horizontalHeaders","data","max","count","getNumberOfRows","verticalHeaders","filterHeaderKeys","primaryHeader","cells","push","getPrimaryHeader","isFoot","maxCols","maxRows","startRow","dataField","rowCount","rowSpans","_row","index","i","dataRow","headerCells","rowsTotal","k","j","colspan","rowspan","emptyCell","Math","selectDisplayedData","slice","clearTimeout","html","displayedData","Host","height","overflow","_boundaryCount","_customClass","_pageSizeOptions","_siblingCount","_tooltipAlign","tabindex","minWidth","cols"],"sources":["src/components/table/style.css?tag=kol-table&mode=default&encapsulation=shadow","src/components/table/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n:host {\n\tdisplay: grid;\n}\n:host > div.table {\n\tmax-width: 100%;\n\torder: 1;\n\toverflow-x: auto;\n\toverflow-y: hidden;\n}\n:host > div.table table {\n\twidth: 100%;\n}\nth > div {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n\tplace-items: center;\n}\ndiv.pagination {\n\torder: 2;\n}\ndiv.pagination,\ndiv.pagination > div:last-child {\n\tdisplay: grid;\n\tplace-items: center;\n}\n@media (min-width: 1024px) {\n\tdiv.pagination,\n\tdiv.pagination > div:last-child {\n\t\tgrid-auto-flow: column;\n\t}\n\tdiv.pagination kol-pagination {\n\t\tdisplay: flex;\n\t}\n}\n","import { Generic } from '@a11y-ui/core';\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { Stringified } from '../../types/common';\nimport { devHint } from '../../utils/a11y.tipps';\nimport { emptyStringByArrayHandler, objectObjectHandler, parseJson, setState, watchString, watchValidator } from '../../utils/prop.validators';\nimport { KoliBriPaginationButtonCallbacks } from '../pagination/types';\nimport {\n\tKoliBriSortDirection,\n\tKoliBriSortFunction,\n\tKoliBriTableAPI,\n\tKoliBriTableCell,\n\tKoliBriTableDataType,\n\tKoliBriTableHeaderCell,\n\tKoliBriTableHeaderCellAndData,\n\tKoliBriTableHeaders,\n\tKoliBriTablePaginationProps,\n\tKoliBriTableRender,\n\tKoliBriTableSelectedHead,\n\tKoliBriTableStates,\n} from './types';\n\nconst PAGINATION_OPTIONS = [10, 20, 50, 100];\n\nconst CELL_REFS = new Map<HTMLElement, ReturnType<typeof setTimeout>>();\n\n@Component({\n\ttag: 'kol-table',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTable implements KoliBriTableAPI {\n\tprivate horizontal = true;\n\tprivate sortFunction?: KoliBriSortFunction;\n\tprivate sortDirections: Map<KoliBriSortFunction, KoliBriSortDirection> = new Map();\n\tprivate showPagination = false;\n\tprivate pageStartSlice = 0;\n\tprivate pageEndSlice = 10;\n\tprivate disableSort = false;\n\n\tprivate sortedColumnHead: KoliBriTableSelectedHead = { label: '', key: '', sortDirection: 'NOS' };\n\tprivate ariaLive = '';\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _caption!: string;\n\n\t/**\n\t * Gibt die Daten an, die für die Erstellung der Tabelle verwendet werden.\n\t */\n\t@Prop() public _data!: Stringified<KoliBriTableDataType[]>;\n\n\t/**\n\t * Hier können die Daten für die Fußzeile der Tabelle übergeben werden.\n\t */\n\t@Prop() public _dataFoot?: Stringified<KoliBriTableDataType[]>;\n\n\t/**\n\t * Gibt die horizontalen und vertikalen Header für die Tabelle an.\n\t */\n\t@Prop() public _headers!: Stringified<KoliBriTableHeaders>;\n\n\t/**\n\t * Gibt an, die minimale Breite der Tabelle an.\n\t */\n\t@Prop() public _minWidth?: string;\n\n\t/**\n\t * Gibt an, ob die Daten geteilt in Seiten angezeigt wird.\n\t */\n\t@Prop() public _pagination?: boolean | Stringified<KoliBriTablePaginationProps>;\n\n\t@State() public state: KoliBriTableStates = {\n\t\t_caption: '…', // ⚠ required\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_pagination: {\n\t\t\t_page: 1,\n\t\t\t_pageSize: 10,\n\t\t\t_total: 0,\n\t\t},\n\t\t_sortedData: [],\n\t};\n\n\t@Watch('_caption')\n\tpublic validateCaption(value?: string): void {\n\t\twatchString(this, '_caption', value, {\n\t\t\trequired: true,\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\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\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 headers: KoliBriTableHeaders = nextValue as KoliBriTableHeaders;\n\t\t\t\t\t\t\theaders.horizontal?.forEach((header) => {\n\t\t\t\t\t\t\t\theader.forEach((cell) => {\n\t\t\t\t\t\t\t\t\tif (typeof cell.sort === 'function' && typeof cell.sortDirection === 'string') {\n\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(cell.sort, cell.sortDirection);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\theaders.vertical?.forEach((header) => {\n\t\t\t\t\t\t\t\theader.forEach((cell) => {\n\t\t\t\t\t\t\t\t\tif (typeof cell.sort === 'function' && typeof cell.sortDirection === 'string') {\n\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(cell.sort, cell.sortDirection);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\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('_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\tprivate readonly beforePatchPagination: Generic.Element.NextStateHooksCallback = (nextValue, _nextState, _component, key): void => {\n\t\tif (key === '_pagination') {\n\t\t\tthis.showPagination = nextValue === true || nextValue === '' /* true */ || (typeof nextValue === 'object' && nextValue !== null);\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<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\t\twatchValidator(this, '_pagination', () => true, new Set(['boolean', 'KoliBriTablePagination']), value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchPagination,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCaption(this._caption);\n\t\tthis.validateData(this._data);\n\t\tthis.validateDataFoot(this._dataFoot);\n\t\tthis.validateHeaders(this._headers);\n\t\tthis.validateMinWidth(this._minWidth);\n\t\tthis.validatePagination(this._pagination);\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.innerHTML = html;\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t}\n\n\tprivate updateSortedData = (cell: KoliBriTableSelectedHead = this.sortedColumnHead) => {\n\t\tlet sortedData: KoliBriTableDataType[] = this.state._data;\n\t\tif (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.ariaLive = translate('kol-sort-ascending', { placeholders: { column: cell.label } });\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.ariaLive = translate('kol-sort-descending', { placeholders: { column: cell.label } });\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\t\tthis.ariaLive = translate('kol-sort-none', { placeholders: { column: cell.label } });\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 sortButtonIcon = 'codicon codicon-fold';\n\t\t\tif (!this.disableSort && headerCell.key === this.sortedColumnHead.key) {\n\t\t\t\tswitch (this.sortedColumnHead.sortDirection) {\n\t\t\t\t\tcase 'ASC':\n\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-up';\n\t\t\t\t\t\tsortDirection = 'ascending';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\tsortButtonIcon = 'codicon codicon-chevron-down';\n\t\t\t\t\t\tsortDirection = 'descending';\n\t\t\t\t\t\tbreak;\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-${this.sortDirections.get(headerCell.sort!) as string}`}\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\tinnerHTML={headerCell.label}\n\t\t\t\t\t\t\tstyle={{ textAlign: headerCell.textAlign }}\n\t\t\t\t\t\t></div>\n\t\t\t\t\t\t{!this.disableSort && typeof headerCell.sort === 'function' && (\n\t\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\t\texportparts=\"icon\"\n\t\t\t\t\t\t\t\t_icon={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: () => {\n\t\t\t\t\t\t\t\t\t\tif (typeof headerCell.sort === 'function') {\n\t\t\t\t\t\t\t\t\t\t\tthis.sortFunction = headerCell.sort;\n\t\t\t\t\t\t\t\t\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\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\tthis.setSortDirection(this.sortFunction, 'DESC');\n\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\tcase 'DESC':\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'NOS');\n\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\tdefault:\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'ASC');\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tthis.updateSortedData(headerCell as KoliBriTableSelectedHead);\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\t_variant=\"ghost\"\n\t\t\t\t\t\t\t></kol-button>\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  }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tinnerHTML={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\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\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<span style={{ height: '0', width: '0', overflow: 'hidden' }} aria-live=\"assertive\">\n\t\t\t\t\t{this.ariaLive}\n\t\t\t\t</span>\n\t\t\t\t{this.pageEndSlice > 0 && this.showPagination && (\n\t\t\t\t\t<div class=\"pagination\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\tEinträge {this.pageEndSlice > 0 ? this.pageStartSlice + 1 : 0} bis {this.pageEndSlice} von{' '}\n\t\t\t\t\t\t\t{this.state._pagination._total || (Array.isArray(this.state._data) ? this.state._data.length : 0)} angezeigt\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<kol-pagination\n\t\t\t\t\t\t\t\t_boundaryCount={this.state._pagination._boundaryCount}\n\t\t\t\t\t\t\t\t_customClass={this.state._pagination._customClass}\n\t\t\t\t\t\t\t\t_on={this.handlePagination}\n\t\t\t\t\t\t\t\t_page={this.state._pagination._page}\n\t\t\t\t\t\t\t\t_pageSize={this.state._pagination._pageSize}\n\t\t\t\t\t\t\t\t_pageSizeOptions={this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS}\n\t\t\t\t\t\t\t\t_siblingCount={this.state._pagination._siblingCount}\n\t\t\t\t\t\t\t\t_tooltipAlign=\"bottom\"\n\t\t\t\t\t\t\t\t_total={this.state._pagination._total || this.state._data.length}\n\t\t\t\t\t\t\t></kol-pagination>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div class=\"table\" tabindex=\"0\">\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<caption>{this.state._caption}</caption>\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  }\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\tinnerHTML={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 sortButtonIcon = 'codicon codicon-fold';\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\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 // role=\"columnheader\"\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\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\taria-sort={sortDirection}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdata-sort={sortDirection ? `sort-${this.sortedColumnHead.sortDirection}` : 'sort-NOS'}\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<div class=\"w-full flex gap-1 items-center\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'w-full': true,\n\t\t\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\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tinnerHTML={col.label}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAlign: col.textAlign,\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></div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{!this.disableSort && typeof headerCell.sort === 'function' && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<kol-button\n\t\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\t_icon={sortButtonIcon}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t_label={translate('kol-change-order', { placeholders: { colLabel: col.label } })}\n\t\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\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (typeof headerCell.sort === 'function') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.sortFunction = headerCell.sort;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tswitch (this.sortDirections.get(this.sortFunction)) {\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'DESC');\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tcase 'DESC':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'NOS');\n\t\t\t\t\t\t\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\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.setSortDirection(this.sortFunction, 'ASC');\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.updateSortedData(headerCell as KoliBriTableSelectedHead);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\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\t_variant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\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</Host>\n\t\t);\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as o,g as e}from"./index-2c046ff1.js";import{a as s}from"./i18n-6e857b2f.js";import{v as n}from"./label-223fef8f.js";import{d as a,f as l,c as r}from"./a11y.tipps-9f948961.js";import{L as h}from"./dev.utils-4290338e.js";import{a as d,s as b,e as u,d as c,k as f}from"./prop.validators-601f1068.js";import"./index-d8ac1088.js";import"./index-37b5cbcf.js";import"./reuse-c2156413.js";const p=new Set(['"left", "right"']),g=new Set(['"bottom", "top"']),v=new Set([...p,...g]),m=(t,e,a)=>{d(t,e,(t=>"bottom"===t||"left"===t||"right"===t||"top"===t),v,a)},k=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}kol-button-group-wc{display:inline-flex;flex-wrap:wrap}kol-button-group-wc button{border-bottom-color:transparent;border-bottom-style:solid;display:block}div.grid,div[role='tabpanel']{height:100%}:host>.tabs-align-right{display:grid;grid-template-columns:1fr auto}:host>.tabs-align-right kol-button-group-wc{display:grid;order:2}:host>.tabs-align-left{display:grid;grid-template-columns:auto 1fr}:host>.tabs-align-left kol-button-group-wc{display:grid;order:0}:host>.tabs-align-bottom{display:grid;grid-template-rows:1fr auto}:host>.tabs-align-bottom kol-button-group-wc{order:2}:host>.tabs-align-bottom kol-button-group-wc>div{display:flex}:host>.tabs-align-bottom>kol-button-group-wc>div>div:first-child{margin:0 1em 0 0}:host>.tabs-align-bottom>kol-button-group-wc>div>div{margin:0 1em}:host>.tabs-align-top{display:grid;grid-template-rows:auto 1fr}:host>.tabs-align-top kol-button-group-wc{order:0}:host>.tabs-align-top kol-button-group-wc>div{display:flex}:host>.tabs-align-top>kol-button-group-wc>div>div:first-child{margin:0 1em 0 0}:host>.tabs-align-top>kol-button-group-wc>div>div{margin:0 1em}:host>div{display:grid}:host>.tabs-align-left kol-button-group-wc,:host>.tabs-align-top kol-button-group-wc{order:0}:host>.tabs-align-bottom kol-button-group-wc,:host>.tabs-align-right kol-button-group-wc{order:1}:host>div.tabs-align-left kol-button-group-wc>div,:host>div.tabs-align-left kol-button-group-wc>div>div,:host>div.tabs-align-right kol-button-group-wc>div,:host>div.tabs-align-right kol-button-group-wc>div>div{display:grid}:host>div.tabs-align-left kol-button-group-wc>div>div kol-button-wc,:host>div.tabs-align-right kol-button-group-wc>div>div kol-button-wc{width:100%}:host>div.tabs-align-bottom kol-button-group-wc div,:host>div.tabs-align-top kol-button-group-wc div{display:flex;flex-wrap:wrap}",w=class{constructor(e){t(this,e),this.onCreateLabel=`${s("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,a)=>{if(a>0){if(e+a<t.length)return t[e+a]._disabled?this.nextPossibleTabIndex(t,e,a+1):e+a}else if(a<0&&e+a>=0)return t[e+a]._disabled?this.nextPossibleTabIndex(t,e,a-1):e+a;return e},this.onKeyDown=t=>{const e=setTimeout((()=>{clearTimeout(e);let a=null;switch(t.key){case"ArrowRight":a=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,1);break;case"ArrowLeft":a=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,-1)}null!==a&&this.onSelect(t,a,!0)}),250)},this.onClickSelect=(t,e)=>{this.onSelect(t,e,!0)},this.onMouseDown=t=>{t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,i=!0,o)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===i){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,o||t);t=o||t,i=!1}if(!1===i){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,o||t);a("[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.")}}return t},this.syncSelectedAndTabs=(t,e,a,i)=>{let o,s;o="_selected"===i?t:this.state._selected,s="_tabs"===i?t:this.state._tabs,s.length>0&&e.set("_selected",this.selectNextNotDisabledTab(o,s))},this.handleTabPanels=()=>{var t,e,a;if(this.tabPanelHost instanceof HTMLDivElement)for(let i=this.tabPanelHost.children.length;i<this.state._tabs.length;i++){const o=document.createElement("div");o.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${i}`),o.setAttribute("id",`tabpanel-${i}`),o.setAttribute("role","tabpanel"),o.setAttribute("hidden","");const s=document.createElement("slot");s.setAttribute("name",`tabpanel-slot-${i}`),o.appendChild(s),this.tabPanelHost.appendChild(o),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[i])&&(null===(a=this.host)||void 0===a||a.children[i].setAttribute("slot",`tabpanel-slot-${i}`))}},this.onCreate=t=>{var e,a;t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(a=this.state._on)||void 0===a||a.onCreate(t))},this._ariaLabel=void 0,this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this._tabsAlign="top",this.state={_label:"…",_selected:0,_tabs:[],_tabsAlign:"top"}}renderButtonGroup(){return i("kol-button-group-wc",{role:"tablist","aria-label":this.state._label,onKeyDown:this.onKeyDown},this.state._tabs.map(((t,e)=>i("kol-button-wc",{_disabled:t._disabled,_icon:t._icon,_hideLabel:t._hideLabel||t._iconOnly,_label:t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_variant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${e}`,_role:"tab",_value:e}))),this.showCreateTab&&i("kol-button-wc",{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return i(o,null,i("div",{ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._tabsAlign}`]:!0}},this.renderButtonGroup(),i("div",{ref:this.catchTabPanelHost})))}validateAriaLabel(t){this.validateLabel(t)}validateLabel(t){n(this,t)}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:h.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:h.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),b(this,"_on",e)}}validateSelected(t){u(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}}),r("KolTabs",this.state._tabs.length)}validateTabsAlign(t){m(this,"_tabsAlign",t)}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateTabsAlign(this._tabsAlign)}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,a=!1){var i,o;this._selected=e,"function"==typeof(null===(i=this._on)||void 0===i?void 0:i.onSelect)&&(null===(o=this._on)||void 0===o||o.onSelect(t,e)),!0===a&&(this.selectedTimeout=setTimeout((()=>{if(clearTimeout(this.selectedTimeout),this.tabPanelsElement){const t=f(`button#${this.state._label.replace(/\s/g,"-")}-tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}),250))}get host(){return e(this)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"],_tabsAlign:["validateTabsAlign"]}}};w.style={default:k};export{w as kol_tabs};
+import{r as t,h as i,H as o,g as e}from"./index-2c046ff1.js";import{a as s}from"./i18n-2b2ccdd6.js";import{v as n}from"./label-35927418.js";import{d as a,f as l,c as r}from"./a11y.tipps-255c885e.js";import{L as h}from"./dev.utils-e98368e1.js";import{a as d,s as b,e as u,d as c,k as p}from"./prop.validators-e3c93395.js";import"./index-d8ac1088.js";import"./index-37b5cbcf.js";import"./reuse-c2156413.js";const f=new Set(['"left", "right"']),g=new Set(['"bottom", "top"']),v=new Set([...f,...g]),m=(t,e,a)=>{d(t,e,(t=>"bottom"===t||"left"===t||"right"===t||"top"===t),v,a)},k=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}kol-button-group-wc{display:inline-flex;flex-wrap:wrap}kol-button-group-wc button{border-bottom-color:transparent;border-bottom-style:solid;display:block}div.grid,div[role='tabpanel']{height:100%}:host>.tabs-align-right{display:grid;grid-template-columns:1fr auto}:host>.tabs-align-right kol-button-group-wc{display:grid;order:2}:host>.tabs-align-left{display:grid;grid-template-columns:auto 1fr}:host>.tabs-align-left kol-button-group-wc{display:grid;order:0}:host>.tabs-align-bottom{display:grid;grid-template-rows:1fr auto}:host>.tabs-align-bottom kol-button-group-wc{order:2}:host>.tabs-align-bottom kol-button-group-wc>div{display:flex}:host>.tabs-align-bottom>kol-button-group-wc>div>div:first-child{margin:0 1em 0 0}:host>.tabs-align-bottom>kol-button-group-wc>div>div{margin:0 1em}:host>.tabs-align-top{display:grid;grid-template-rows:auto 1fr}:host>.tabs-align-top kol-button-group-wc{order:0}:host>.tabs-align-top kol-button-group-wc>div{display:flex}:host>.tabs-align-top>kol-button-group-wc>div>div:first-child{margin:0 1em 0 0}:host>.tabs-align-top>kol-button-group-wc>div>div{margin:0 1em}:host>div{display:grid}:host>.tabs-align-left kol-button-group-wc,:host>.tabs-align-top kol-button-group-wc{order:0}:host>.tabs-align-bottom kol-button-group-wc,:host>.tabs-align-right kol-button-group-wc{order:1}:host>div.tabs-align-left kol-button-group-wc>div,:host>div.tabs-align-left kol-button-group-wc>div>div,:host>div.tabs-align-right kol-button-group-wc>div,:host>div.tabs-align-right kol-button-group-wc>div>div{display:grid}:host>div.tabs-align-left kol-button-group-wc>div>div kol-button-wc,:host>div.tabs-align-right kol-button-group-wc>div>div kol-button-wc{width:100%}:host>div.tabs-align-bottom kol-button-group-wc div,:host>div.tabs-align-top kol-button-group-wc div{display:flex;flex-wrap:wrap}",w=class{constructor(e){t(this,e),this.onCreateLabel=`${s("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,a)=>{if(a>0){if(e+a<t.length)return t[e+a]._disabled?this.nextPossibleTabIndex(t,e,a+1):e+a}else if(a<0&&e+a>=0)return t[e+a]._disabled?this.nextPossibleTabIndex(t,e,a-1):e+a;return e},this.onKeyDown=t=>{const e=setTimeout((()=>{clearTimeout(e);let a=null;switch(t.key){case"ArrowRight":a=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,1);break;case"ArrowLeft":a=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,-1)}null!==a&&this.onSelect(t,a,!0)}),250)},this.onClickSelect=(t,e)=>{this.onSelect(t,e,!0)},this.onMouseDown=t=>{t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,i=!0,o)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===i){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,o||t);t=o||t,i=!1}if(!1===i){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,o||t);a("[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.")}}return t},this.syncSelectedAndTabs=(t,e,a,i)=>{let o,s;o="_selected"===i?t:this.state._selected,s="_tabs"===i?t:this.state._tabs,s.length>0&&e.set("_selected",this.selectNextNotDisabledTab(o,s))},this.handleTabPanels=()=>{var t,e,a;if(this.tabPanelHost instanceof HTMLDivElement)for(let i=this.tabPanelHost.children.length;i<this.state._tabs.length;i++){const o=document.createElement("div");o.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${i}`),o.setAttribute("id",`tabpanel-${i}`),o.setAttribute("role","tabpanel"),o.setAttribute("hidden","");const s=document.createElement("slot");s.setAttribute("name",`tabpanel-slot-${i}`),o.appendChild(s),this.tabPanelHost.appendChild(o),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[i])&&(null===(a=this.host)||void 0===a||a.children[i].setAttribute("slot",`tabpanel-slot-${i}`))}},this.onCreate=t=>{var e,a;t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(a=this.state._on)||void 0===a||a.onCreate(t))},this._ariaLabel=void 0,this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this._tabsAlign="top",this.state={_label:"…",_selected:0,_tabs:[],_tabsAlign:"top"}}renderButtonGroup(){return i("kol-button-group-wc",{role:"tablist","aria-label":this.state._label,onKeyDown:this.onKeyDown},this.state._tabs.map(((t,e)=>i("kol-button-wc",{_disabled:t._disabled,_icon:t._icon,_hideLabel:t._hideLabel||t._iconOnly,_label:t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_variant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${e}`,_role:"tab",_value:e}))),this.showCreateTab&&i("kol-button-wc",{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return i(o,null,i("div",{ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._tabsAlign}`]:!0}},this.renderButtonGroup(),i("div",{ref:this.catchTabPanelHost})))}validateAriaLabel(t){this.validateLabel(t)}validateLabel(t){n(this,t)}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:h.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:h.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),b(this,"_on",e)}}validateSelected(t){u(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}}),r("KolTabs",this.state._tabs.length)}validateTabsAlign(t){m(this,"_tabsAlign",t)}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateTabsAlign(this._tabsAlign)}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,a=!1){var i,o;this._selected=e,"function"==typeof(null===(i=this._on)||void 0===i?void 0:i.onSelect)&&(null===(o=this._on)||void 0===o||o.onSelect(t,e)),!0===a&&(this.selectedTimeout=setTimeout((()=>{if(clearTimeout(this.selectedTimeout),this.tabPanelsElement){const t=p(`button#${this.state._label.replace(/\s/g,"-")}-tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}),250))}get host(){return e(this)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"],_tabsAlign:["validateTabsAlign"]}}};w.style={default:k};export{w as kol_tabs};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as e,r as i,g as a}from"./index-2c046ff1.js";import{n as s}from"./dev.utils-4290338e.js";import{b as n,e as l,w as h,a as r,s as d}from"./prop.validators-601f1068.js";import{a as o}from"./reuse-c2156413.js";import{I as u,g as p}from"./controller-53e4980f.js";import"./a11y.tipps-9f948961.js";import"./index-37b5cbcf.js";import"./label-223fef8f.js";import"./tab-index-fc60df7a.js";class c extends u{constructor(t,e,a){super(t,e,a),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=t}validateHasCounter(t){n(this.component,"_hasCounter",t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(t){l(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(t){h(this.component,"_placeholder",t)}validateReadOnly(t){n(this.component,"_readOnly",t)}validateResize(t){r(this.component,"_resize",(t=>"string"==typeof t&&("both"===t||"horizontal"===t||"none"===t||"vertical"===t)),new Set("String {both, horizontal, vertical, none}"),t)}validateRequired(t){n(this.component,"_required",t)}validateRows(t){l(this.component,"_rows",t)}validateValue(t){h(this.component,"_value",t,{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 f=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}",v=t=>{t.style.overflow="hidden";const e=t.rows,a=t.clientHeight/e;t.rows=1;const i=Math.round(t.scrollHeight/a);return t.rows=e,i},y=class{render(){const{ariaDescribedBy:a}=p(this.state),i=!1===this.state._label;return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{textarea:!0,"hide-label":!!this.state._hideLabel,"has-counter":!!this.state._hasCounter},_alert:this.state._alert,_currentLength:this.state._currentLength,_disabled:this.state._disabled,_error:this.state._error,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},i?t("slot",null):this.state._label),t("div",{slot:"input"},t("textarea",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":a.length>0?a.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,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,{onKeyUp:this.onChange,style:{resize:this.state._resize},value:this.state._value})),t("kol-tooltip",{"aria-hidden":"true",hidden:i||!this.state._hideLabel,_align:this._tooltipAlign,_id:`${this.state._id}-tooltip`,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,o(this.host,this.ref)},this.onChange=t=>{this.ref instanceof HTMLTextAreaElement&&(d(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=v(this.ref))),"function"==typeof this.controller.onFacade.onChange&&this.controller.onFacade.onChange(t)},this._accessKey=void 0,this._adjustHeight=!1,this._alert=!0,this._disabled=void 0,this._error=void 0,this._hasCounter=void 0,this._hideLabel=void 0,this._hint="",this._id=void 0,this._label=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=void 0,this._resize="vertical",this._required=void 0,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,_id:`id-${s()}`,_label:!1,_resize:"vertical"},this.controller=new c(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAdjustHeight(t){this.controller.validateAdjustHeight(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateResize(t){this.controller.validateResize(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};y.style={default:f};export{y as kol_textarea};
+import{h as t,H as e,r as i,g as a}from"./index-2c046ff1.js";import{n as s}from"./dev.utils-e98368e1.js";import{b as n,e as l,w as h,a as r,s as d}from"./prop.validators-e3c93395.js";import{a as o}from"./reuse-c2156413.js";import{I as u,g as p}from"./controller-be43dccd.js";import{v as c}from"./rows-453107a2.js";import"./a11y.tipps-255c885e.js";import"./index-37b5cbcf.js";import"./label-35927418.js";import"./tab-index-841e81ba.js";class f extends u{constructor(t,e,a){super(t,e,a),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=t}validateHasCounter(t){n(this.component,"_hasCounter",t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(t){l(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(t){h(this.component,"_placeholder",t)}validateReadOnly(t){n(this.component,"_readOnly",t)}validateResize(t){r(this.component,"_resize",(t=>"string"==typeof t&&("both"===t||"horizontal"===t||"none"===t||"vertical"===t)),new Set("String {both, horizontal, vertical, none}"),t)}validateRequired(t){n(this.component,"_required",t)}validateRows(t){c(this.component,t)}validateValue(t){h(this.component,"_value",t,{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 v=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}",y=t=>{t.style.overflow="hidden";const e=t.rows,a=t.clientHeight/e;t.rows=1;const i=Math.round(t.scrollHeight/a);return t.rows=e,i},m=class{render(){const{ariaDescribedBy:a}=p(this.state),i=!1===this.state._label;return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{textarea:!0,"hide-label":!!this.state._hideLabel,"has-counter":!!this.state._hasCounter},_alert:this.state._alert,_currentLength:this.state._currentLength,_disabled:this.state._disabled,_error:this.state._error,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},i?t("slot",null):this.state._label),t("div",{slot:"input"},t("textarea",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":a.length>0?a.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,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,{onKeyUp:this.onChange,style:{resize:this.state._resize},value:this.state._value})),t("kol-tooltip",{"aria-hidden":"true",hidden:i||!this.state._hideLabel,_align:this._tooltipAlign,_id:`${this.state._id}-tooltip`,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,o(this.host,this.ref)},this.onChange=t=>{this.ref instanceof HTMLTextAreaElement&&(d(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=y(this.ref))),"function"==typeof this.controller.onFacade.onChange&&this.controller.onFacade.onChange(t)},this._accessKey=void 0,this._adjustHeight=!1,this._alert=!0,this._disabled=void 0,this._error=void 0,this._hasCounter=void 0,this._hideLabel=void 0,this._hint="",this._id=void 0,this._label=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=void 0,this._resize="vertical",this._required=void 0,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,_id:`id-${s()}`,_label:!1,_resize:"vertical"},this.controller=new f(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAdjustHeight(t){this.controller.validateAdjustHeight(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateResize(t){this.controller.validateResize(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};m.style={default:v};export{m 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","Set","validateRequired","validateRows","validateValue","setFormAssociatedValue","componentWillLoad","_hasCounter","_maxLength","_placeholder","_readOnly","_resize","_required","_rows","defaultStyleCss","increaseTextareaHeight","el","style","overflow","currentRows","rows","rowHeight","clientHeight","nextRows","Math","round","scrollHeight","KolTextarea","render","ariaDescribedBy","getRenderStates","hasExpertSlot","_label","h","Host","class","_hasValue","textarea","_hideLabel","_alert","_disabled","_error","_hint","_id","_touched","onClick","_a","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoCorrect","disabled","id","maxlength","_name","readOnly","required","placeholder","spellcheck","controller","onFacade","onKeyUp","onChange","resize","hidden","_align","_tooltipAlign","hostRef","propagateFocus","event","HTMLTextAreaElement","setState","_adjustHeight","nonce","validateAccessKey","validateAdjustHeight","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateId","validateLabel","validateName","validateOn","validateSyncValueBySelector","validateTabIndex","validateTouched","addValueChangeListener","v"],"sources":["src/components/textarea/controller.ts","src/components/textarea/style.css?tag=kol-textarea&mode=default&encapsulation=shadow","src/components/textarea/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean, watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { InputController } from '../@deprecated/input/controller';\nimport { CSSResize, Props, Watches } from './types';\n\nexport class TextareaController extends InputController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, 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?: boolean): 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' && (value === 'both' || value === 'horizontal' || value === 'none' || value === 'vertical'),\n\t\t\tnew Set('String {both, horizontal, vertical, none}'),\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?: number): void {\n\t\twatchNumber(this.component, '_rows', 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 url(../input-line.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { Align } from '../../types/props/align';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState } from '../../utils/prop.validators';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { TextareaController } from './controller';\nimport { ComponentApi, CSSResize, States } from './types';\n\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.css',\n\t},\n\tshadow: true,\n})\nexport class KolTextarea implements ComponentApi {\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\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = this.state._label === false; // _label=\"\" or _label\n\n\t\treturn (\n\t\t\t<Host class={{ 'has-value': this.state._hasValue }}>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{ textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }}\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_error={this.state._error}\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_maxLength={this.state._maxLength}\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_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</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-labelledby={`${this.state._id}-label`}\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\tonKeyUp={this.onChange}\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\t<kol-tooltip\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\thidden={hasExpertSlot || !this.state._hideLabel}\n\t\t\t\t\t\t\t_align={this._tooltipAlign}\n\t\t\t\t\t\t\t_id={`${this.state._id}-tooltip`}\n\t\t\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t\t\t></kol-tooltip>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: TextareaController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Passt die Höhe des Eingabefeldes automatisch an den Füllstand an.\n\t */\n\t@Prop() public _adjustHeight?: boolean = false;\n\n\t/**\n\t * Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t */\n\t@Prop() public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Aktiviert den Zeichenanzahlzähler am unteren Rand des Eingabefeldes.\n\t */\n\t@Prop() public _hasCounter?: boolean;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop() public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Gibt die interne ID des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Gibt an, wie viele Zeichen maximal eingegeben werden können.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\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 * Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Setzt das Eingabefeld in den schreibgeschützten Modus.\n\t */\n\t@Prop() public _readOnly?: boolean;\n\n\t/**\n\t * Gibt an, ob die Größe des Eingabefeldes von Nutzer:innen geändert werden kann. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t */\n\t@Prop() public _resize?: CSSResize = 'vertical';\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop() public _required?: boolean;\n\n\t/**\n\t * Gibt die Anzahl der anzuzeigenden Zeilen des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _rows?: number;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: string;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (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 * Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Align = 'top';\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_adjustHeight: false,\n\t\t_currentLength: 0,\n\t\t_hasValue: false,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: false, // ⚠ 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?: boolean): 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?: boolean): void {\n\t\tthis.controller.validateHasCounter(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('_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?: number): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: string): 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 componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate readonly onChange = (event: Event) => {\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}\n\t\tif (typeof this.controller.onFacade.onChange === 'function') {\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n}\n"],"mappings":";;;kZAMaA,UAA2BC,EAGvCC,YAAmBC,EAA8CC,EAAcC,GAC9EC,MAAMH,EAAWC,EAAMC,GAIhBE,KAAAC,qBAAuB,KAC9B,UAAWD,KAAKJ,UAAUM,SAAW,UAAYF,KAAKJ,UAAUM,OAAOC,OAAS,EAAG,CAClFH,KAAKJ,UAAUQ,MAAMC,eAAiBL,KAAKJ,UAAUM,OAAOC,M,GAL7DH,KAAKJ,UAAYA,C,CASXU,mBAAmBC,GACzBC,EAAaR,KAAKJ,UAAW,cAAeW,EAAO,CAClDE,MAAO,CACNC,WAAYV,KAAKC,uB,CAKbU,kBAAkBJ,GACxBK,EAAYZ,KAAKJ,UAAW,aAAcW,EAAO,CAChDE,MAAO,CACNC,WAAYV,KAAKC,sBAElBY,IAAK,G,CAIAC,oBAAoBP,GAC1BQ,EAAYf,KAAKJ,UAAW,eAAgBW,E,CAGtCS,iBAAiBT,GACvBC,EAAaR,KAAKJ,UAAW,YAAaW,E,CAGpCU,eAAeV,GACrBW,EACClB,KAAKJ,UACL,WACCW,UAAiBA,IAAU,WAAaA,IAAU,QAAUA,IAAU,cAAgBA,IAAU,QAAUA,IAAU,aACrH,IAAIY,IAAI,6CACRZ,E,CAIKa,iBAAiBb,GACvBC,EAAaR,KAAKJ,UAAW,YAAaW,E,CAGpCc,aAAad,GACnBK,EAAYZ,KAAKJ,UAAW,QAASW,E,CAG/Be,cAAcf,GACpBQ,EAAYf,KAAKJ,UAAW,SAAUW,EAAO,CAC5CE,MAAO,CACNC,WAAYV,KAAKC,wBAGnBD,KAAKuB,uBAAuBvB,KAAKJ,UAAUM,O,CAGrCsB,oBACNzB,MAAMyB,oBACNxB,KAAKM,mBAAmBN,KAAKJ,UAAU6B,aACvCzB,KAAKW,kBAAkBX,KAAKJ,UAAU8B,YACtC1B,KAAKc,oBAAoBd,KAAKJ,UAAU+B,cACxC3B,KAAKgB,iBAAiBhB,KAAKJ,UAAUgC,WACrC5B,KAAKiB,eAAejB,KAAKJ,UAAUiC,SACnC7B,KAAKoB,iBAAiBpB,KAAKJ,UAAUkC,WACrC9B,KAAKqB,aAAarB,KAAKJ,UAAUmC,OACjC/B,KAAKsB,cAActB,KAAKJ,UAAUM,O,ECjFpC,MAAM8B,EAAkB,21DCexB,MAAMC,EAA0BC,IAC/BA,EAAGC,MAAMC,SAAW,SACpB,MAAMC,EAAcH,EAAGI,KACvB,MAAMC,EAAYL,EAAGM,aAAeH,EACpCH,EAAGI,KAAO,EACV,MAAMG,EAAWC,KAAKC,MAAMT,EAAGU,aAAeL,GAC9CL,EAAGI,KAAOD,EACV,OAAOI,CAAQ,E,MAaHI,EAAW,MAShBC,SACN,MAAMC,gBAAEA,GAAoBC,EAAgBhD,KAAKI,OACjD,MAAM6C,EAAgBjD,KAAKI,MAAM8C,SAAW,MAE5C,OACCC,EAACC,EAAI,CAACC,MAAO,CAAE,YAAarD,KAAKI,MAAMkD,YACtCH,EAAA,aACCE,MAAO,CAAEE,SAAU,KAAM,eAAgBvD,KAAKI,MAAMoD,WAAY,gBAAiBxD,KAAKI,MAAMqB,aAC5FgC,OAAQzD,KAAKI,MAAMqD,OACnBpD,eAAgBL,KAAKI,MAAMC,eAC3BqD,UAAW1D,KAAKI,MAAMsD,UACtBC,OAAQ3D,KAAKI,MAAMuD,OACnBlC,YAAazB,KAAKI,MAAMqB,YACxB+B,WAAYxD,KAAKI,MAAMoD,WACvBI,MAAO5D,KAAKI,MAAMwD,MAClBC,IAAK7D,KAAKI,MAAMyD,IAChBnC,WAAY1B,KAAKI,MAAMsB,WACvBE,UAAW5B,KAAKI,MAAMwB,UACtBE,UAAW9B,KAAKI,MAAM0B,UACtBgC,SAAU9D,KAAKI,MAAM0D,SACrBC,QAAS,SAAAC,EAAM,OAAAA,EAAAhE,KAAKiE,OAAG,MAAAD,SAAA,SAAAA,EAAEE,OAAO,GAGhCf,EAAA,QAAMgB,KAAK,SAASlB,EAAgBE,EAAA,aAAgBnD,KAAKI,MAAM8C,QAC/DC,EAAA,OAAKgB,KAAK,SACThB,EAAA,WAAAiB,OAAAC,OAAA,CACCJ,IAAKjE,KAAKsE,SACVC,MAAM,GACNC,UAAWxE,KAAKI,MAAMqE,WAAU,mBACd1B,EAAgB5C,OAAS,EAAI4C,EAAgB2B,KAAK,KAAOC,UAAS,kBACnE,GAAG3E,KAAKI,MAAMyD,YAC/Be,eAAe,MACfC,YAAY,MACZC,SAAU9E,KAAKI,MAAMsD,UACrBqB,GAAI/E,KAAKI,MAAMyD,IACfmB,UAAWhF,KAAKI,MAAMsB,WACtB7B,KAAMG,KAAKI,MAAM6E,MACjBC,SAAUlF,KAAKI,MAAMwB,UACrBuD,SAAUnF,KAAKI,MAAM0B,UACrBQ,KAAMtC,KAAKI,MAAM2B,MACjBqD,YAAapF,KAAKI,MAAMuB,aACxB0D,WAAW,SACPrF,KAAKsF,WAAWC,SAAQ,CAC5BC,QAASxF,KAAKyF,SACdtD,MAAO,CACNuD,OAAQ1F,KAAKI,MAAMyB,SAEpBtB,MAAOP,KAAKI,MAAMF,UAEnBiD,EAAA,6BAKa,OACZwC,OAAQ1C,IAAkBjD,KAAKI,MAAMoD,WACrCoC,OAAQ5F,KAAK6F,cACbhC,IAAK,GAAG7D,KAAKI,MAAMyD,cACnBX,cAAelD,KAAKI,MAAM8C,SAAW,SAAWlD,KAAKI,MAAM8C,OAAS,O,CAuI1EvD,YAAAmG,G,UAtMiB9F,KAAAsE,SAAYL,IAC5BjE,KAAKiE,IAAMA,EACX8B,EAAe/F,KAAKF,KAAME,KAAKiE,IAAI,EA+TnBjE,KAAAyF,SAAYO,IAC5B,GAAIhG,KAAKiE,eAAegC,oBAAqB,CAC5CC,EAASlG,KAAM,iBAAkBA,KAAKiE,IAAI1D,MAAMJ,QAChD,GAAIH,KAAKI,MAAM+F,cAAe,CAC7BnG,KAAK+B,MAAQE,EAAuBjC,KAAKiE,I,EAG3C,UAAWjE,KAAKsF,WAAWC,SAASE,WAAa,WAAY,CAC5DzF,KAAKsF,WAAWC,SAASE,SAASO,E,gDAxPK,M,YAKyB,K,+GAyBlC,G,6KAwCK,W,8HA0BE,M,cAK6B,M,iCAOpC,CAC/BG,cAAe,MACf9F,eAAgB,EAChBiD,UAAW,MACXO,IAAK,MAAMuC,MACXlD,OAAQ,MACRrB,QAAS,YAIT7B,KAAKsF,WAAa,IAAI7F,EAAmBO,KAAM,WAAYA,KAAKF,K,CAI1DuG,kBAAkB9F,GACxBP,KAAKsF,WAAWe,kBAAkB9F,E,CAI5B+F,qBAAqB/F,GAC3BP,KAAKsF,WAAWgB,qBAAqB/F,E,CAI/BgG,cAAchG,GACpBP,KAAKsF,WAAWiB,cAAchG,E,CAIxBiG,iBAAiBjG,GACvBP,KAAKsF,WAAWkB,iBAAiBjG,E,CAI3BkG,cAAclG,GACpBP,KAAKsF,WAAWmB,cAAclG,E,CAIxBD,mBAAmBC,GACzBP,KAAKsF,WAAWhF,mBAAmBC,E,CAI7BmG,kBAAkBnG,GACxBP,KAAKsF,WAAWoB,kBAAkBnG,E,CAI5BoG,aAAapG,GACnBP,KAAKsF,WAAWqB,aAAapG,E,CAIvBqG,WAAWrG,GACjBP,KAAKsF,WAAWsB,WAAWrG,E,CAIrBsG,cAActG,GACpBP,KAAKsF,WAAWuB,cAActG,E,CAIxBI,kBAAkBJ,GACxBP,KAAKsF,WAAW3E,kBAAkBJ,E,CAI5BuG,aAAavG,GACnBP,KAAKsF,WAAWwB,aAAavG,E,CAIvBwG,WAAWxG,GACjBP,KAAKsF,WAAWyB,WAAWxG,E,CAIrBO,oBAAoBP,GAC1BP,KAAKsF,WAAWxE,oBAAoBP,E,CAI9BS,iBAAiBT,GACvBP,KAAKsF,WAAWtE,iBAAiBT,E,CAI3BU,eAAeV,GACrBP,KAAKsF,WAAWrE,eAAeV,E,CAIzBa,iBAAiBb,GACvBP,KAAKsF,WAAWlE,iBAAiBb,E,CAI3Bc,aAAad,GACnBP,KAAKsF,WAAWjE,aAAad,E,CAIvByG,4BAA4BzG,GAClCP,KAAKsF,WAAW0B,4BAA4BzG,E,CAItC0G,iBAAiB1G,GACvBP,KAAKsF,WAAW2B,iBAAiB1G,E,CAI3B2G,gBAAgB3G,GACtBP,KAAKsF,WAAW4B,gBAAgB3G,E,CAI1Be,cAAcf,GACpBP,KAAKsF,WAAWhE,cAAcf,E,CAGxBiB,oBACNxB,KAAKyD,OAASzD,KAAKyD,SAAW,KAC9BzD,KAAK8D,SAAW9D,KAAK8D,WAAa,KAClC9D,KAAKsF,WAAW9D,oBAEhBxB,KAAKI,MAAMkD,YAActD,KAAKI,MAAMF,OACpCF,KAAKsF,WAAW6B,wBAAwBC,GAAOpH,KAAKI,MAAMkD,YAAc8D,G"}
+{"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","Set","validateRequired","validateRows","validateValue","setFormAssociatedValue","componentWillLoad","_hasCounter","_maxLength","_placeholder","_readOnly","_resize","_required","_rows","defaultStyleCss","increaseTextareaHeight","el","style","overflow","currentRows","rows","rowHeight","clientHeight","nextRows","Math","round","scrollHeight","KolTextarea","render","ariaDescribedBy","getRenderStates","hasExpertSlot","_label","h","Host","class","_hasValue","textarea","_hideLabel","_alert","_disabled","_error","_hint","_id","_touched","onClick","_a","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoCorrect","disabled","id","maxlength","_name","readOnly","required","placeholder","spellcheck","controller","onFacade","onKeyUp","onChange","resize","hidden","_align","_tooltipAlign","hostRef","propagateFocus","event","HTMLTextAreaElement","setState","_adjustHeight","nonce","validateAccessKey","validateAdjustHeight","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateId","validateLabel","validateName","validateOn","validateSyncValueBySelector","validateTabIndex","validateTouched","addValueChangeListener","v"],"sources":["src/components/textarea/controller.ts","src/components/textarea/style.css?tag=kol-textarea&mode=default&encapsulation=shadow","src/components/textarea/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean, watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { InputController } from '../@deprecated/input/controller';\nimport { CSSResize, Props, Watches } from './types';\nimport { RowsPropType, validateRows } from '../../types/props/rows';\n\nexport class TextareaController extends InputController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, 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?: boolean): 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' && (value === 'both' || value === 'horizontal' || value === 'none' || value === 'vertical'),\n\t\t\tnew Set('String {both, horizontal, vertical, none}'),\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 url(../input-line.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { Align } from '../../types/props/align';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState } from '../../utils/prop.validators';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { TextareaController } from './controller';\nimport { ComponentApi, CSSResize, States } from './types';\nimport { RowsPropType } from '../../types/props/rows';\n\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.css',\n\t},\n\tshadow: true,\n})\nexport class KolTextarea implements ComponentApi {\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\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = this.state._label === false; // _label=\"\" or _label\n\n\t\treturn (\n\t\t\t<Host class={{ 'has-value': this.state._hasValue }}>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{ textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }}\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_error={this.state._error}\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_maxLength={this.state._maxLength}\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_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</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-labelledby={`${this.state._id}-label`}\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\tonKeyUp={this.onChange}\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\t<kol-tooltip\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\thidden={hasExpertSlot || !this.state._hideLabel}\n\t\t\t\t\t\t\t_align={this._tooltipAlign}\n\t\t\t\t\t\t\t_id={`${this.state._id}-tooltip`}\n\t\t\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t\t\t></kol-tooltip>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: TextareaController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Passt die Höhe des Eingabefeldes automatisch an den Füllstand an.\n\t */\n\t@Prop() public _adjustHeight?: boolean = false;\n\n\t/**\n\t * Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t */\n\t@Prop() public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Aktiviert den Zeichenanzahlzähler am unteren Rand des Eingabefeldes.\n\t */\n\t@Prop() public _hasCounter?: boolean;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop() public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Gibt die interne ID des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Gibt an, wie viele Zeichen maximal eingegeben werden können.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\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 * Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Setzt das Eingabefeld in den schreibgeschützten Modus.\n\t */\n\t@Prop() public _readOnly?: boolean;\n\n\t/**\n\t * Gibt an, ob die Größe des Eingabefeldes von Nutzer:innen geändert werden kann. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t */\n\t@Prop() public _resize?: CSSResize = 'vertical';\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop() public _required?: boolean;\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?: string;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (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 * Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Align = 'top';\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_adjustHeight: false,\n\t\t_currentLength: 0,\n\t\t_hasValue: false,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: false, // ⚠ 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?: boolean): 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?: boolean): void {\n\t\tthis.controller.validateHasCounter(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('_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?: string): 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 componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate readonly onChange = (event: Event) => {\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}\n\t\tif (typeof this.controller.onFacade.onChange === 'function') {\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n}\n"],"mappings":";;;ybAOaA,UAA2BC,EAGvCC,YAAmBC,EAA8CC,EAAcC,GAC9EC,MAAMH,EAAWC,EAAMC,GAIhBE,KAAAC,qBAAuB,KAC9B,UAAWD,KAAKJ,UAAUM,SAAW,UAAYF,KAAKJ,UAAUM,OAAOC,OAAS,EAAG,CAClFH,KAAKJ,UAAUQ,MAAMC,eAAiBL,KAAKJ,UAAUM,OAAOC,M,GAL7DH,KAAKJ,UAAYA,C,CASXU,mBAAmBC,GACzBC,EAAaR,KAAKJ,UAAW,cAAeW,EAAO,CAClDE,MAAO,CACNC,WAAYV,KAAKC,uB,CAKbU,kBAAkBJ,GACxBK,EAAYZ,KAAKJ,UAAW,aAAcW,EAAO,CAChDE,MAAO,CACNC,WAAYV,KAAKC,sBAElBY,IAAK,G,CAIAC,oBAAoBP,GAC1BQ,EAAYf,KAAKJ,UAAW,eAAgBW,E,CAGtCS,iBAAiBT,GACvBC,EAAaR,KAAKJ,UAAW,YAAaW,E,CAGpCU,eAAeV,GACrBW,EACClB,KAAKJ,UACL,WACCW,UAAiBA,IAAU,WAAaA,IAAU,QAAUA,IAAU,cAAgBA,IAAU,QAAUA,IAAU,aACrH,IAAIY,IAAI,6CACRZ,E,CAIKa,iBAAiBb,GACvBC,EAAaR,KAAKJ,UAAW,YAAaW,E,CAGpCc,aAAad,GACnBc,EAAarB,KAAKJ,UAAWW,E,CAGvBe,cAAcf,GACpBQ,EAAYf,KAAKJ,UAAW,SAAUW,EAAO,CAC5CE,MAAO,CACNC,WAAYV,KAAKC,wBAGnBD,KAAKuB,uBAAuBvB,KAAKJ,UAAUM,O,CAGrCsB,oBACNzB,MAAMyB,oBACNxB,KAAKM,mBAAmBN,KAAKJ,UAAU6B,aACvCzB,KAAKW,kBAAkBX,KAAKJ,UAAU8B,YACtC1B,KAAKc,oBAAoBd,KAAKJ,UAAU+B,cACxC3B,KAAKgB,iBAAiBhB,KAAKJ,UAAUgC,WACrC5B,KAAKiB,eAAejB,KAAKJ,UAAUiC,SACnC7B,KAAKoB,iBAAiBpB,KAAKJ,UAAUkC,WACrC9B,KAAKqB,aAAarB,KAAKJ,UAAUmC,OACjC/B,KAAKsB,cAActB,KAAKJ,UAAUM,O,EClFpC,MAAM8B,EAAkB,k2DCgBxB,MAAMC,EAA0BC,IAC/BA,EAAGC,MAAMC,SAAW,SACpB,MAAMC,EAAcH,EAAGI,KACvB,MAAMC,EAAYL,EAAGM,aAAeH,EACpCH,EAAGI,KAAO,EACV,MAAMG,EAAWC,KAAKC,MAAMT,EAAGU,aAAeL,GAC9CL,EAAGI,KAAOD,EACV,OAAOI,CAAQ,E,MAaHI,EAAW,MAShBC,SACN,MAAMC,gBAAEA,GAAoBC,EAAgBhD,KAAKI,OACjD,MAAM6C,EAAgBjD,KAAKI,MAAM8C,SAAW,MAE5C,OACCC,EAACC,EAAI,CAACC,MAAO,CAAE,YAAarD,KAAKI,MAAMkD,YACtCH,EAAA,aACCE,MAAO,CAAEE,SAAU,KAAM,eAAgBvD,KAAKI,MAAMoD,WAAY,gBAAiBxD,KAAKI,MAAMqB,aAC5FgC,OAAQzD,KAAKI,MAAMqD,OACnBpD,eAAgBL,KAAKI,MAAMC,eAC3BqD,UAAW1D,KAAKI,MAAMsD,UACtBC,OAAQ3D,KAAKI,MAAMuD,OACnBlC,YAAazB,KAAKI,MAAMqB,YACxB+B,WAAYxD,KAAKI,MAAMoD,WACvBI,MAAO5D,KAAKI,MAAMwD,MAClBC,IAAK7D,KAAKI,MAAMyD,IAChBnC,WAAY1B,KAAKI,MAAMsB,WACvBE,UAAW5B,KAAKI,MAAMwB,UACtBE,UAAW9B,KAAKI,MAAM0B,UACtBgC,SAAU9D,KAAKI,MAAM0D,SACrBC,QAAS,SAAAC,EAAM,OAAAA,EAAAhE,KAAKiE,OAAG,MAAAD,SAAA,SAAAA,EAAEE,OAAO,GAGhCf,EAAA,QAAMgB,KAAK,SAASlB,EAAgBE,EAAA,aAAgBnD,KAAKI,MAAM8C,QAC/DC,EAAA,OAAKgB,KAAK,SACThB,EAAA,WAAAiB,OAAAC,OAAA,CACCJ,IAAKjE,KAAKsE,SACVC,MAAM,GACNC,UAAWxE,KAAKI,MAAMqE,WAAU,mBACd1B,EAAgB5C,OAAS,EAAI4C,EAAgB2B,KAAK,KAAOC,UAAS,kBACnE,GAAG3E,KAAKI,MAAMyD,YAC/Be,eAAe,MACfC,YAAY,MACZC,SAAU9E,KAAKI,MAAMsD,UACrBqB,GAAI/E,KAAKI,MAAMyD,IACfmB,UAAWhF,KAAKI,MAAMsB,WACtB7B,KAAMG,KAAKI,MAAM6E,MACjBC,SAAUlF,KAAKI,MAAMwB,UACrBuD,SAAUnF,KAAKI,MAAM0B,UACrBQ,KAAMtC,KAAKI,MAAM2B,MACjBqD,YAAapF,KAAKI,MAAMuB,aACxB0D,WAAW,SACPrF,KAAKsF,WAAWC,SAAQ,CAC5BC,QAASxF,KAAKyF,SACdtD,MAAO,CACNuD,OAAQ1F,KAAKI,MAAMyB,SAEpBtB,MAAOP,KAAKI,MAAMF,UAEnBiD,EAAA,6BAKa,OACZwC,OAAQ1C,IAAkBjD,KAAKI,MAAMoD,WACrCoC,OAAQ5F,KAAK6F,cACbhC,IAAK,GAAG7D,KAAKI,MAAMyD,cACnBX,cAAelD,KAAKI,MAAM8C,SAAW,SAAWlD,KAAKI,MAAM8C,OAAS,O,CAuI1EvD,YAAAmG,G,UAtMiB9F,KAAAsE,SAAYL,IAC5BjE,KAAKiE,IAAMA,EACX8B,EAAe/F,KAAKF,KAAME,KAAKiE,IAAI,EA+TnBjE,KAAAyF,SAAYO,IAC5B,GAAIhG,KAAKiE,eAAegC,oBAAqB,CAC5CC,EAASlG,KAAM,iBAAkBA,KAAKiE,IAAI1D,MAAMJ,QAChD,GAAIH,KAAKI,MAAM+F,cAAe,CAC7BnG,KAAK+B,MAAQE,EAAuBjC,KAAKiE,I,EAG3C,UAAWjE,KAAKsF,WAAWC,SAASE,WAAa,WAAY,CAC5DzF,KAAKsF,WAAWC,SAASE,SAASO,E,gDAxPK,M,YAKyB,K,+GAyBlC,G,6KAwCK,W,8HA0BE,M,cAK6B,M,iCAOpC,CAC/BG,cAAe,MACf9F,eAAgB,EAChBiD,UAAW,MACXO,IAAK,MAAMuC,MACXlD,OAAQ,MACRrB,QAAS,YAIT7B,KAAKsF,WAAa,IAAI7F,EAAmBO,KAAM,WAAYA,KAAKF,K,CAI1DuG,kBAAkB9F,GACxBP,KAAKsF,WAAWe,kBAAkB9F,E,CAI5B+F,qBAAqB/F,GAC3BP,KAAKsF,WAAWgB,qBAAqB/F,E,CAI/BgG,cAAchG,GACpBP,KAAKsF,WAAWiB,cAAchG,E,CAIxBiG,iBAAiBjG,GACvBP,KAAKsF,WAAWkB,iBAAiBjG,E,CAI3BkG,cAAclG,GACpBP,KAAKsF,WAAWmB,cAAclG,E,CAIxBD,mBAAmBC,GACzBP,KAAKsF,WAAWhF,mBAAmBC,E,CAI7BmG,kBAAkBnG,GACxBP,KAAKsF,WAAWoB,kBAAkBnG,E,CAI5BoG,aAAapG,GACnBP,KAAKsF,WAAWqB,aAAapG,E,CAIvBqG,WAAWrG,GACjBP,KAAKsF,WAAWsB,WAAWrG,E,CAIrBsG,cAActG,GACpBP,KAAKsF,WAAWuB,cAActG,E,CAIxBI,kBAAkBJ,GACxBP,KAAKsF,WAAW3E,kBAAkBJ,E,CAI5BuG,aAAavG,GACnBP,KAAKsF,WAAWwB,aAAavG,E,CAIvBwG,WAAWxG,GACjBP,KAAKsF,WAAWyB,WAAWxG,E,CAIrBO,oBAAoBP,GAC1BP,KAAKsF,WAAWxE,oBAAoBP,E,CAI9BS,iBAAiBT,GACvBP,KAAKsF,WAAWtE,iBAAiBT,E,CAI3BU,eAAeV,GACrBP,KAAKsF,WAAWrE,eAAeV,E,CAIzBa,iBAAiBb,GACvBP,KAAKsF,WAAWlE,iBAAiBb,E,CAI3Bc,aAAad,GACnBP,KAAKsF,WAAWjE,aAAad,E,CAIvByG,4BAA4BzG,GAClCP,KAAKsF,WAAW0B,4BAA4BzG,E,CAItC0G,iBAAiB1G,GACvBP,KAAKsF,WAAW2B,iBAAiB1G,E,CAI3B2G,gBAAgB3G,GACtBP,KAAKsF,WAAW4B,gBAAgB3G,E,CAI1Be,cAAcf,GACpBP,KAAKsF,WAAWhE,cAAcf,E,CAGxBiB,oBACNxB,KAAKyD,OAASzD,KAAKyD,SAAW,KAC9BzD,KAAK8D,SAAW9D,KAAK8D,WAAa,KAClC9D,KAAKsF,WAAW9D,oBAEhBxB,KAAKI,MAAMkD,YAActD,KAAKI,MAAMF,OACpCF,KAAKsF,WAAW6B,wBAAwBC,GAAOpH,KAAKI,MAAMkD,YAAc8D,G"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as s}from"./index-2c046ff1.js";import{v as e}from"./has-closer-62a48dbd.js";import{v as a}from"./show-6d33a33f.js";import{b as o,w as n,s as h,e as r,a as l}from"./prop.validators-601f1068.js";import{w as d}from"./validation-5300d0a1.js";import"./a11y.tipps-9f948961.js";import"./dev.utils-4290338e.js";import"./reuse-c2156413.js";import"./index-37b5cbcf.js";const p=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}:host>div{background-color:#fff;height:0;left:0;position:fixed;top:0;width:100%;z-index:200}:host>div>kol-alert{display:block;margin:auto;max-width:750px}:host>div>kol-button-wc{display:block;margin:auto;position:relative;top:0;width:1em}",u=class{constructor(i){t(this,i),this.handleShowAndDuration=()=>{!0===this.state._show&&"number"==typeof this.state._showDuration&&this.state._showDuration>=0&&(clearTimeout(this.durationTimeout),this.durationTimeout=setTimeout((()=>{this.close()}),this.state._showDuration))},this.close=()=>{var t;this._show=!1,this.state=Object.assign(Object.assign({},this.state),{_show:!1}),void 0!==(null===(t=this._on)||void 0===t?void 0:t.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClose:this.close},this._alert=!0,this._hasCloser=!1,this._heading="",this._level=1,this._on=void 0,this._show=!0,this._showDuration=1e4,this._type="default",this.state={_alert:!0,_level:1,_show:!0}}validateAlert(t){o(this,"_alert",t)}validateHasCloser(t){e(this,t)}validateHeading(t){n(this,"_heading",t)}validateLevel(t){d(this,t)}validateOn(t){"object"!=typeof t||"function"!=typeof(null==t?void 0:t.onClose)&&!0!==t.onClose||h(this,"_on",{onClose:t.onClose})}validateShow(t){a(this,t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateShowDuration(t){r(this,"_showDuration",t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateType(t){l(this,"_type",(t=>"string"==typeof t&&("default"===t||"error"===t||"info"===t||"success"===t||"warning"===t)),new Set("String {success, info, warning, error}"),t)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateHeading(this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateShow(this._show),this.validateShowDuration(this._showDuration),this.validateType(this._type)}render(){return i(s,null,this.state._show&&i("div",null,i("kol-alert",{_alert:this.state._alert,_heading:this.state._heading,_level:this.state._level,_hasCloser:this.state._hasCloser,_type:this.state._type,_variant:"card",_on:this.on},i("slot",null))))}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_show:["validateShow"],_showDuration:["validateShowDuration"],_type:["validateType"]}}};u.style={default:p};export{u as kol_toast};
+import{r as t,h as i,H as s}from"./index-2c046ff1.js";import{v as e}from"./has-closer-4415fbda.js";import{v as a}from"./show-d72ff77e.js";import{b as o,w as n,s as h,e as r,a as l}from"./prop.validators-e3c93395.js";import{w as d}from"./validation-a9f13bf5.js";import"./a11y.tipps-255c885e.js";import"./dev.utils-e98368e1.js";import"./reuse-c2156413.js";import"./index-37b5cbcf.js";const p=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}:host>div{background-color:#fff;height:0;left:0;position:fixed;top:0;width:100%;z-index:200}:host>div>kol-alert{display:block;margin:auto;max-width:750px}:host>div>kol-button-wc{display:block;margin:auto;position:relative;top:0;width:1em}",c=class{constructor(i){t(this,i),this.handleShowAndDuration=()=>{!0===this.state._show&&"number"==typeof this.state._showDuration&&this.state._showDuration>=0&&(clearTimeout(this.durationTimeout),this.durationTimeout=setTimeout((()=>{this.close()}),this.state._showDuration))},this.close=()=>{var t;this._show=!1,this.state=Object.assign(Object.assign({},this.state),{_show:!1}),void 0!==(null===(t=this._on)||void 0===t?void 0:t.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClose:this.close},this._alert=!0,this._hasCloser=!1,this._heading="",this._level=1,this._on=void 0,this._show=!0,this._showDuration=1e4,this._type="default",this.state={_alert:!0,_level:1,_show:!0}}validateAlert(t){o(this,"_alert",t)}validateHasCloser(t){e(this,t)}validateHeading(t){n(this,"_heading",t)}validateLevel(t){d(this,t)}validateOn(t){"object"!=typeof t||"function"!=typeof(null==t?void 0:t.onClose)&&!0!==t.onClose||h(this,"_on",{onClose:t.onClose})}validateShow(t){a(this,t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateShowDuration(t){r(this,"_showDuration",t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateType(t){l(this,"_type",(t=>"string"==typeof t&&("default"===t||"error"===t||"info"===t||"success"===t||"warning"===t)),new Set("String {success, info, warning, error}"),t)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateHeading(this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateShow(this._show),this.validateShowDuration(this._showDuration),this.validateType(this._type)}render(){return i(s,null,this.state._show&&i("div",null,i("kol-alert",{_alert:this.state._alert,_heading:this.state._heading,_level:this.state._level,_hasCloser:this.state._hasCloser,_type:this.state._type,_variant:"card",_on:this.on},i("slot",null))))}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_show:["validateShow"],_showDuration:["validateShowDuration"],_type:["validateType"]}}};c.style={default:p};export{c as kol_toast};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t,H as s}from"./index-2c046ff1.js";import{c as o,b as e,o as a,f as n,s as h,a as l}from"./floating-ui.dom.esm-26e61da8.js";import{w as r}from"./button-link-99acae48.js";import{v as d}from"./label-223fef8f.js";import{g as p,n as c}from"./dev.utils-4290338e.js";import{w as f}from"./prop.validators-601f1068.js";import{p as m}from"./reuse-c2156413.js";import"./a11y.tipps-9f948961.js";import"./index-37b5cbcf.js";const u=new Set;function b(t){u.forEach((t=>{t.style.setProperty("z-index","999")})),u.add(t),t.style.setProperty("z-index","1000")}function v(t){if(u.delete(t),u.size>0){const t=Array.from(u).pop();t&&t.style.setProperty("z-index","1000")}}const x=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}kol-tooltip #floating{animation-duration:0.5s;animation-iteration-count:1;animation-name:fadeInOpacity;animation-timing-function:ease-in;box-sizing:border-box;display:none;position:absolute;visibility:hidden;width:max-content;top:0;left:0}kol-tooltip #arrow{height:10px;position:absolute;transform:rotate(45deg);width:10px;z-index:999}kol-tooltip .area{background-color:#fff;color:#000}kol-tooltip kol-span-wc{position:relative;z-index:1000}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}",y=class{constructor(t){i(this,t),this.alignTooltip=()=>{var t;if("test"!==m&&this.previousSibling&&this.tooltipElement){const i=this.previousSibling,e=this.tooltipElement,s=this.arrowElement,r=[a(null!==(t=null==s?void 0:s.offsetHeight)&&void 0!==t?t:10),n(),h()];s&&r.push(l({element:s})),o(i,e,{placement:this.state._align,middleware:r}).then((({x:t,y:i,middlewareData:o,placement:n})=>{var l,r;Object.assign(e.style,{left:`${t}px`,top:`${i}px`,visibility:"visible"}),s&&((null===(l=o.arrow)||void 0===l?void 0:l.x)?Object.assign(s.style,{left:`${o.arrow.x}px`,top:"bottom"===n?-s.offsetHeight/2+"px":"",bottom:"top"===n?-s.offsetHeight/2+"px":""}):(null===(r=o.arrow)||void 0===r?void 0:r.y)&&Object.assign(s.style,{left:"right"===n?-s.offsetWidth/2+"px":"",right:"left"===n?-s.offsetWidth/2+"px":"",top:`${o.arrow.y}px`}))}))}},this.showTooltip=()=>{if(this.previousSibling&&this.tooltipElement){b(this.tooltipElement),this.tooltipElement.style.setProperty("display","block"),p().body.addEventListener("keyup",this.hideTooltipByEscape);const t=this.previousSibling,i=this.tooltipElement;this.cleanupAutoPositioning=e(t,i,this.alignTooltip)}},this.hideTooltip=()=>{this.tooltipElement&&(v(this.tooltipElement),this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0))},this.hideTooltipByEscape=t=>{"Escape"===t.key&&(p().body.removeEventListener("keyup",this.hideTooltipByEscape),this.hideTooltip())},this.addListeners=t=>{t.addEventListener("mouseover",this.incrementOverFocusCount),t.addEventListener("focus",this.incrementOverFocusCount),t.addEventListener("mouseout",this.decrementOverFocusCount),t.addEventListener("blur",this.decrementOverFocusCount)},this.removeListeners=t=>{t.removeEventListener("mouseover",this.incrementOverFocusCount),t.removeEventListener("focus",this.incrementOverFocusCount),t.removeEventListener("mouseout",this.decrementOverFocusCount),t.removeEventListener("blur",this.decrementOverFocusCount)},this.resyncListeners=t=>{this.removeListeners(t),this.addListeners(t)},this.catchHostElement=t=>{t&&(this.previousSibling=t.previousElementSibling,this.previousSibling&&this.resyncListeners(this.previousSibling))},this.catchTooltipElement=t=>{this.tooltipElement=t,this.tooltipElement&&this.resyncListeners(this.tooltipElement)},this.catchArrowElement=t=>{this.arrowElement=t},this.overFocusCount=0,this.incrementOverFocusCount=()=>{this.overFocusCount++,this.showOrHideTooltip()},this.decrementOverFocusCount=()=>{this.overFocusCount--,this.showOrHideTooltip()},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout((()=>{clearTimeout(this.overFocusTimeout),this.overFocusCount>0?this.showTooltip():this.hideTooltip()}),250)},this._align="top",this._id=void 0,this._label=void 0,this.state={_align:"top",_id:c(),_label:"…"}}render(){return t(s,{ref:this.catchHostElement},""!==this.state._label&&t("div",{id:"floating",ref:this.catchTooltipElement},t("div",{class:"area",id:"arrow",ref:this.catchArrowElement}),t("kol-span-wc",{class:"area",id:this.state._id,_label:this.state._label})))}validateAlign(t){r(this,"_align",t)}validateId(t){f(this,"_id",t)}validateLabel(t){d(this,t)}componentWillLoad(){this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}disconnectedCallback(){this.previousSibling&&this.removeListeners(this.previousSibling),this.tooltipElement&&this.removeListeners(this.tooltipElement),this.cleanupAutoPositioning&&this.cleanupAutoPositioning()}static get watchers(){return{_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}};y.style=x;export{y as kol_tooltip};
+import{r as i,h as t,H as s}from"./index-2c046ff1.js";import{c as o,b as e,o as a,f as n,s as h,a as l}from"./floating-ui.dom.esm-26e61da8.js";import{w as r}from"./button-link-e7a5fabf.js";import{v as d}from"./label-35927418.js";import{g as p,n as c}from"./dev.utils-e98368e1.js";import{w as f}from"./prop.validators-e3c93395.js";import{p as m}from"./reuse-c2156413.js";import"./a11y.tipps-255c885e.js";import"./index-37b5cbcf.js";const u=new Set;function b(t){u.forEach((t=>{t.style.setProperty("z-index","999")})),u.add(t),t.style.setProperty("z-index","1000")}function v(t){if(u.delete(t),u.size>0){const t=Array.from(u).pop();t&&t.style.setProperty("z-index","1000")}}const x=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}kol-tooltip #floating{animation-duration:0.5s;animation-iteration-count:1;animation-name:fadeInOpacity;animation-timing-function:ease-in;box-sizing:border-box;display:none;position:absolute;visibility:hidden;width:max-content;top:0;left:0}kol-tooltip #arrow{height:10px;position:absolute;transform:rotate(45deg);width:10px;z-index:999}kol-tooltip .area{background-color:#fff;color:#000}kol-tooltip kol-span-wc{position:relative;z-index:1000}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}",y=class{constructor(t){i(this,t),this.alignTooltip=()=>{var t;if("test"!==m&&this.previousSibling&&this.tooltipElement){const i=this.previousSibling,e=this.tooltipElement,s=this.arrowElement,r=[a(null!==(t=null==s?void 0:s.offsetHeight)&&void 0!==t?t:10),n(),h()];s&&r.push(l({element:s})),o(i,e,{placement:this.state._align,middleware:r}).then((({x:t,y:i,middlewareData:o,placement:n})=>{var l,r;Object.assign(e.style,{left:`${t}px`,top:`${i}px`,visibility:"visible"}),s&&((null===(l=o.arrow)||void 0===l?void 0:l.x)?Object.assign(s.style,{left:`${o.arrow.x}px`,top:"bottom"===n?-s.offsetHeight/2+"px":"",bottom:"top"===n?-s.offsetHeight/2+"px":""}):(null===(r=o.arrow)||void 0===r?void 0:r.y)&&Object.assign(s.style,{left:"right"===n?-s.offsetWidth/2+"px":"",right:"left"===n?-s.offsetWidth/2+"px":"",top:`${o.arrow.y}px`}))}))}},this.showTooltip=()=>{if(this.previousSibling&&this.tooltipElement){b(this.tooltipElement),this.tooltipElement.style.setProperty("display","block"),p().body.addEventListener("keyup",this.hideTooltipByEscape);const t=this.previousSibling,i=this.tooltipElement;this.cleanupAutoPositioning=e(t,i,this.alignTooltip)}},this.hideTooltip=()=>{this.tooltipElement&&(v(this.tooltipElement),this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0))},this.hideTooltipByEscape=t=>{"Escape"===t.key&&(p().body.removeEventListener("keyup",this.hideTooltipByEscape),this.hideTooltip())},this.addListeners=t=>{t.addEventListener("mouseover",this.incrementOverFocusCount),t.addEventListener("focus",this.incrementOverFocusCount),t.addEventListener("mouseout",this.decrementOverFocusCount),t.addEventListener("blur",this.decrementOverFocusCount)},this.removeListeners=t=>{t.removeEventListener("mouseover",this.incrementOverFocusCount),t.removeEventListener("focus",this.incrementOverFocusCount),t.removeEventListener("mouseout",this.decrementOverFocusCount),t.removeEventListener("blur",this.decrementOverFocusCount)},this.resyncListeners=t=>{this.removeListeners(t),this.addListeners(t)},this.catchHostElement=t=>{t&&(this.previousSibling=t.previousElementSibling,this.previousSibling&&this.resyncListeners(this.previousSibling))},this.catchTooltipElement=t=>{this.tooltipElement=t,this.tooltipElement&&this.resyncListeners(this.tooltipElement)},this.catchArrowElement=t=>{this.arrowElement=t},this.overFocusCount=0,this.incrementOverFocusCount=()=>{this.overFocusCount++,this.showOrHideTooltip()},this.decrementOverFocusCount=()=>{this.overFocusCount--,this.showOrHideTooltip()},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout((()=>{clearTimeout(this.overFocusTimeout),this.overFocusCount>0?this.showTooltip():this.hideTooltip()}),250)},this._align="top",this._id=void 0,this._label=void 0,this.state={_align:"top",_id:c(),_label:"…"}}render(){return t(s,{ref:this.catchHostElement},""!==this.state._label&&t("div",{id:"floating",ref:this.catchTooltipElement},t("div",{class:"area",id:"arrow",ref:this.catchArrowElement}),t("kol-span-wc",{class:"area",id:this.state._id,_label:this.state._label})))}validateAlign(t){r(this,"_align",t)}validateId(t){f(this,"_id",t)}validateLabel(t){d(this,t)}componentWillLoad(){this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}disconnectedCallback(){this.previousSibling&&this.removeListeners(this.previousSibling),this.tooltipElement&&this.removeListeners(this.tooltipElement),this.cleanupAutoPositioning&&this.cleanupAutoPositioning()}static get watchers(){return{_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}};y.style=x;export{y as kol_tooltip};