@public-ui/components/dist/esm/kol-table-stateful.entry.js

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

/*!
 * KoliBri - The accessible HTML-Standard
 */
import{r as registerInstance,h,H as Host,g as getElement}from"./index-f0de5c73.js";import{t as translate}from"./i18n-5fe08f1c.js";import{r as KolPaginationTag,t as KolTableStatelessWcTag}from"./component-names-6ca7e863.js";import{t as tryToDispatchKoliBriEvent}from"./events-29e84d75.js";import{v as validateTableData,a as validateTableDataFoot,b as validateTableSelection,c as validateTableStatefulCallbacks,E as Events}from"./events-5b899bd2.js";import{w as watchValidator,s as setState,q as emptyStringByArrayHandler,i as watchString,p as parseJson,o as objectObjectHandler,j as devHint}from"./prop.validators-64749272.js";import{v as validateLabel}from"./label-e8ec0e3a.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./common-0f1f2276.js";import"./index-da3e0c00.js";import"./dev.utils-fab45cbc.js";const paginationPositionPropTypeOptions=["top","bottom","both"],validatePaginationPosition=(t,n)=>{watchValidator(t,"_paginationPosition",(t=>"string"==typeof t&&paginationPositionPropTypeOptions.includes(t)),new Set([`PaginationPositionPropType {${paginationPositionPropTypeOptions.join(", ")}`]),n,{defaultValue:"bottom"})},defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  div.pagination .kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  div.pagination,\n  div.pagination > div:last-child {\n    display: grid;\n    place-items: center;\n  }\n  @media (max-width: 1024px) {\n    div.pagination .kol-pagination {\n      flex-direction: column;\n    }\n  }\n  @media (min-width: 1024px) {\n    div.pagination,\n    div.pagination > div:last-child {\n      grid-auto-flow: column;\n    }\n    div.pagination .kol-pagination {\n      display: flex;\n    }\n  }\n}\n@layer kol-component {\n  :host,\n  .kol-table-stateless-wc {\n    display: block;\n  }\n  .table {\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  table {\n    width: 100%;\n  }\n  caption {\n    text-align: start;\n  }\n  .focus-element {\n    font-size: 0;\n  }\n  .focus-element:focus {\n    outline: 0 !important;\n  }\n  .table:has(.focus-element:focus) {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .table-sort-button .button {\n    color: inherit;\n  }\n  tbody th,\n  th.align-left {\n    text-align: left;\n  }\n  tbody th .table-sort-button .button-inner,\n  th.align-left .table-sort-button .button-inner {\n    justify-items: start;\n  }\n  th.align-center {\n    text-align: center;\n  }\n  th.align-center .table-sort-button .button-inner {\n    justify-items: center;\n  }\n  th.align-right {\n    text-align: right;\n  }\n  th.align-right .table-sort-button .button-inner {\n    justify-items: end;\n  }\n  tr.foot-spacer,\n  tr.head-spacer {\n    display: none;\n  }\n  .selection-header-cell {\n    width: 0;\n  }\n  .selection-cell {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .input label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .input .icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .input input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .input input:before {\n    content: \"\";\n  }\n  .input input[type=checkbox] {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .input input[type=radio] {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .input input[type=radio]:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .input input[type=radio]:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .input input[type=radio]:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}",KolTableStatefulDefaultStyle0=defaultStyleCss,PAGINATION_OPTIONS=[10,20,50,100],paginationValidator=t=>!0===t||""===t||"object"==typeof t&&null!==t,KolTableStateful=class{constructor(t){registerInstance(this,t),this.catchRef=t=>{this.tableWcRef=t},this.sortDirections=new Map,this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"},this.setSortDirection=(t,n)=>{this.sortDirections.clear(),this.sortDirections.set(t,n),this.sortFunction=t},this.handlePagination={onClick:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,n),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePage:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,n),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePageSize:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,n),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),setState(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=(t=this.sortedColumnHead)=>{if(this.disableSort)return void setState(this,"_sortedData",this.state._data);let n=this.state._data;if(this.sortData.length>0)n=this.state._data.sort(((t,n)=>{for(let e=0;e<this.sortData.length;e++){const i=this.sortData[e],a=i.compareFn(t,n);if(0!==a)return"ASC"===i.direction?a:-a}return 0}));else if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"ASC":n=this.sortFunction([...this.state._data]),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"ASC"};break;case"DESC":n=this.sortFunction([...this.state._data]).reverse(),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"DESC"};break;default:n=[...this.state._data],this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"}}setState(this,"_sortedData",n)},this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0,this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"}}validateAllowMultiSort(t){watchValidator(this,"_allowMultiSort",(()=>!0),new Set(["boolean"]),t,{defaultValue:!1})}validateData(t){validateTableData(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){validateTableDataFoot(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){validatePaginationPosition(this,t)}changeCellSort(t){var n;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key==(null===(n=this.sortData[0])||void 0===n?void 0:n.key)||(this.sortData=[]);const e=this.sortData.findIndex((n=>n.key===t.key));if(e>=0){const t=this.sortData[e];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(e,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData(t)}else 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(t)}}validateHeaders(t){emptyStringByArrayHandler(t,(()=>{objectObjectHandler(t,(()=>{try{t=parseJson(t)}catch(t){}watchValidator(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var n,e,i,a;const o=t=>{let n=!1;t.forEach((t=>{const e=t.key;if(!e)return;const i=t.sortDirection;"ASC"!==i&&"DESC"!==i||("function"==typeof t.compareFn?((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:e,compareFn:t.compareFn,direction:i}),n=!0):"function"==typeof t.sort&&(this.setSortDirection(t.sort,i),setTimeout((()=>this.updateSortedData({key:e,label:t.label,sortDirection:i})))))})),n&&setTimeout((()=>this.updateSortedData()))},s=t;null===(n=s.horizontal)||void 0===n||n.forEach(o),null===(e=s.vertical)||void 0===e||e.forEach(o),s.horizontal&&s.vertical&&(null===(i=s.horizontal)||void 0===i?void 0:i.length)>0&&(null===(a=s.vertical)||void 0===a?void 0:a.length)>0&&(this.disableSort=!0,devHint("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)"))}}})}))}))}validateLabel(t){validateLabel(this,t,{required:!0})}validateMinWidth(t){watchString(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){validateTableSelection(this,t)}validateOn(t){validateTableStatefulCallbacks(this,t)}validatePagination(t){try{t=parseJson(t)}catch(t){}this.showPagination=paginationValidator(t),watchValidator(this,"_pagination",paginationValidator,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener("kol-selection-change",this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener("kol-selection-change",this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateOn(this._on)}selectDisplayedData(t,n,e){return"number"==typeof n&&n>0&&"number"==typeof e&&e>0?(this.pageStartSlice=n*(e-1),this.pageEndSlice=n*e>t.length?t.length:n*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(){return h("div",{class:"pagination"},h("span",null,translate("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),h("div",null,h(KolPaginationTag,{_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||PAGINATION_OPTIONS,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:translate("kol-table-pagination-label",{placeholders:{label:this.state._label}})})))}getHeaderCellSortState(t){if(!this.disableSort&&("function"==typeof t.compareFn||"function"==typeof t.sort)){if(t.key===this.sortedColumnHead.key)return this.sortedColumnHead.sortDirection;if(t.key){const n=this.sortData.find((n=>n.key===t.key));if(null==n?void 0:n.direction)return n.direction}return"NOS"}}handleSort({key:t}){const n=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((n=>n.key===t));n&&this.changeCellSort(n)}getSelectedData(t){var n;const e=this.state._selection;if(e){const i=null!==(n=e.keyPropertyName)&&void 0!==n?n:"id",a=this.state._sortedData.filter((n=>t.includes(n[i])));if(!1===(null==e?void 0:e.multiple))return a[0];if(i)return a}return null}handleSelectionChange(t,n){var e;const i=this.state._selection;i&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},i),{selectedKeys:"object"==typeof n?n:[n]})}));const a=this.getSelectedData(n);tryToDispatchKoliBriEvent("selection-change",this.host,a),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e[Events.onSelectionChange])&&this.state._on[Events.onSelectionChange](t,a)}async getSelection(){var t;const n=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(n)}render(){var t,n,e,i;const a=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(n=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==n?n:10:this.state._sortedData.length,this.state._pagination._page||1),o="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,s="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,l={horizontal:null===(e=this.state._headers.horizontal)||void 0===e?void 0:e.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))),vertical:null===(i=this.state._headers.vertical)||void 0===i?void 0:i.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)})))))};return h(Host,{key:"104f91b5af96db25df3347211386654631cbeeed",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&o,h(KolTableStatelessWcTag,{key:"4dc6fcfbccf5e64d39f91c2fbc1f38c720c085da",ref:this.catchRef,_data:a,_headerCells:l,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection}),this.pageEndSlice>0&&this.showPagination&&s)}get host(){return getElement(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_pagination:["validatePagination"]}}};KolTableStateful.style={default:KolTableStatefulDefaultStyle0};export{KolTableStateful as kol_table_stateful};