UNPKG

@public-ui/components

Version:

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

public-ui.github.io

public-ui/kolibri

4 lines • 13.8 kB
1
2
3
4
/*! * KoliBri - The accessible HTML-Standard */ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-399c8b52.js"),componentNames=require("./component-names-2c750b1b.js"),i18n=require("./i18n-1d085d07.js"),dev_utils=require("./dev.utils-0273f400.js"),events$1=require("./events-221fcb43.js"),prop_validators=require("./prop.validators-888c8338.js"),events=require("./events-275a2a5e.js"),label=require("./label-477be19d.js");require("./i18n-737701e2.js"),require("./reuse-8cfefa9b.js"),require("./dev.utils-58fde089.js"),require("./index-38f5f0b2.js"),require("./common-1ab929ac.js");const validateTableHeaderCells=(e,t)=>{prop_validators.emptyStringByArrayHandler(t,(()=>{prop_validators.objectObjectHandler(t,(()=>{try{t=prop_validators.parseJson(t)}catch(e){}prop_validators.watchValidator(e,"_headerCells",(e=>"object"==typeof e&&null!==e&&(void 0===e.horizontal||Array.isArray(e.horizontal)&&void 0===e.horizontal.find((e=>!Array.isArray(e))))&&(void 0===e.vertical||Array.isArray(e.vertical)&&void 0===e.vertical.find((e=>!Array.isArray(e))))&&!0),new Set(["TableHeaderCellsPropType"]),t)}))}))},KolTableStateless=class{constructor(e){index.registerInstance(this,e),this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.renderTableRow=(e,t,a)=>{var i,l;let n=String(t);return this.horizontal&&(null===(i=e[0])||void 0===i?void 0:i.data)&&(n=null!==(l=this.getDataKey(e[0].data))&&void 0!==l?l:n),index.h("tr",{key:`row-${n}`},this.renderSelectionCell(e,t),e.map(((e,i)=>this.renderTableCell(e,t,i,a))))},this.renderTableCell=(e,t,a,i)=>{let l=`${t}-${a}-${e.label}`;if(e.data){const i=this.getDataKey(e.data);l=i?`${i}-${this.horizontal?a:t}`:l}return!1===e.asTd?this.renderHeadingCell(e,t,a,i):index.h("td",{key:`cell-${l}`,class:{[e.textAlign]:"string"==typeof e.textAlign&&e.textAlign.length>0},colSpan:e.colSpan,rowSpan:e.rowSpan,style:{textAlign:e.textAlign,width:e.width},ref:"function"==typeof e.render?t=>{this.cellRender(e,t)}:void 0},"function"!=typeof e.render?e.label:"")},this.state={_data:[],_label:"",_headerCells:{horizontal:[],vertical:[]}},this.tableDivElementHasScrollbar=!1,this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}validateData(e){events.validateTableData(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){events.validateTableDataFoot(this,e)}validateHeaderCells(e){validateTableHeaderCells(this,e)}validateLabel(e){label.validateLabel(this,e,{required:!0})}validateMinWidth(e){prop_validators.watchString(this,"_deprecatedMinWidth",e,{defaultValue:void 0})}validateOn(e){events.validateTableCallbacks(this,e)}validateSelection(e){events.validateTableSelection(this,e)}handleKeyDown(e){var t;if("ArrowUp"===e.key||"ArrowDown"===e.key){const a=null===(t=this.tableDivElement)||void 0===t?void 0:t.querySelector(":focus");let i=this.checkboxRefs.indexOf(a);i>-1&&(e.preventDefault(),"ArrowDown"===e.key?(i=(i+1)%this.checkboxRefs.length,this.checkboxRefs[i].focus()):"ArrowUp"===e.key&&(e.preventDefault(),i=(i+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[i].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}disconnectedCallback(){var e;null===(e=this.tableDivElementResizeObserver)||void 0===e||e.disconnect()}checkDivElementScrollbar(){this.tableDivElement&&(this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth)}updateDataToKeyMap(e){e.forEach((e=>{this.dataToKeyMap.has(e)||this.dataToKeyMap.set(e,dev_utils.nonce())})),this.dataToKeyMap.forEach(((t,a)=>{e.includes(a)||this.dataToKeyMap.delete(a)}))}getDataKey(e){return this.dataToKeyMap.get(e)}cellRender(e,t){t&&(clearTimeout(this.cellsToRenderTimeouts.get(t)),this.cellsToRenderTimeouts.set(t,setTimeout((()=>{if("function"==typeof e.render){const a=e.render(t,e,e.data,this.state._data);"string"==typeof a&&(t.textContent=a)}}))))}getNumberOfCols(e,t){let a=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var a;return t+=null!==(a=e.colSpan)&&void 0!==a?a:1})),a<t&&(a=t)})),0===a&&(a=t.length),a}getNumberOfRows(e,t){var a;let i=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var a;return t+=null!==(a=e.rowSpan)&&void 0!==a?a:1})),i<t&&(i=t)})),0===i?i=t.length:i-=(null===(a=this.state._dataFoot)||void 0===a?void 0:a.length)||0,i}getThePrimaryHeadersWithKeysIfExists(e){const t=[];return e.forEach((e=>{e.forEach((e=>{"string"==typeof e.key&&t.push(e)}))})),t}getPrimaryHeaders(e){var t,a;let i=this.getThePrimaryHeadersWithKeysIfExists(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===i.length&&(i=this.getThePrimaryHeadersWithKeysIfExists(null!==(a=e.vertical)&&void 0!==a?a:[]),i.length>0&&(this.horizontal=!1)),i}createDataField(e,t,a){var i;t.horizontal=Array.isArray(null==t?void 0:t.horizontal)?t.horizontal:[],t.vertical=Array.isArray(null==t?void 0:t.vertical)?t.vertical:[];const l=this.getPrimaryHeaders(t),n=this.getNumberOfCols(t.horizontal,e);let o=this.getNumberOfRows(t.vertical,e),s=0;a&&(s=o,o+=(null===(i=this.state._dataFoot)||void 0===i?void 0:i.length)||0);const r=[],d=[],c=[];t.vertical.forEach(((e,t)=>{d[t]=0,c[t]=[]}));for(let i=s;i<o;i++){const o=[];t.vertical.forEach(((e,t)=>{let a=0;if(c[t].forEach((e=>a+=e)),a<=i){const l=e[i-a+d[t]];if("object"==typeof l){o.push(Object.assign(Object.assign({},l),{asTd:!1,data:{}}));let e=1;if("number"==typeof l.rowSpan&&l.rowSpan>1&&(e=l.rowSpan),c[t].push(e),"number"==typeof l.colSpan&&l.colSpan>1)for(let a=1;a<l.colSpan;a++)c[t+a].push(e);d[t]++}}}));for(let t=0;t<n;t++)if(!0===this.horizontal){const n=a&&this.state._dataFoot?this.state._dataFoot[i-s]:e[i];"object"==typeof l[t]&&null!==l[t]&&"string"==typeof l[t].key&&"object"==typeof n&&null!==n&&o.push(Object.assign(Object.assign({},l[t]),{colSpan:void 0,data:n,label:n[l[t].key],rowSpan:void 0}))}else"object"==typeof l[i]&&null!==l[i]&&"string"==typeof l[i].key&&"object"==typeof e[t]&&null!==e[t]&&o.push(Object.assign(Object.assign({},l[i]),{colSpan:void 0,data:e[t],label:e[t][l[i].key],rowSpan:void 0}));r.push(o)}if(0===e.length){let e=0,a=0;Array.isArray(t.horizontal)&&t.horizontal.length>0&&t.horizontal[0].forEach((t=>{e+=t.colSpan||1})),Array.isArray(t.vertical)&&t.vertical.length>0&&(e-=t.vertical.length,t.vertical[0].forEach((e=>{a+=e.rowSpan||1})));const i={colSpan:e,label:i18n.translate("kol-no-entries"),render:void 0,rowSpan:Math.max(a,1)};0===r.length?r.push([i]):r[0].push(i)}return r}componentWillLoad(){this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaderCells(this._headerCells),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validateSelection(this._selection)}renderSelectionCell(e,t){var a,i,l;const n=this.state._selection;if(!n)return"";const o=null!==(a=n.keyPropertyName)&&void 0!==a?a:"id",s=null===(i=e[0])||void 0===i?void 0:i.data;if(!s)return"";const r=s[o],d=n.multiple||void 0===n.multiple,c=null===(l=null==n?void 0:n.selectedKeys)||void 0===l?void 0:l.includes(r),h=n.label(s),v={name:"selection",checked:c,id:r,"aria-label":h};return index.h("td",{key:`tbody-${t}-selection`,class:"selection-cell"},index.h("div",{class:"input "+(c?"checked":"")},d?index.h("label",{class:"checkbox-container"},index.h(componentNames.KolIconTag,{class:"icon",_icons:"codicon "+(c?"codicon-check":""),_label:""}),index.h("input",Object.assign({ref:e=>e&&this.checkboxRefs.push(e)},v,{type:"checkbox",onInput:e=>{var t,a,i;const l=c?null===(a=null==n?void 0:n.selectedKeys)||void 0===a?void 0:a.filter((e=>e!==r)):[...null!==(t=null==n?void 0:n.selectedKeys)&&void 0!==t?t:[],r];events$1.tryToDispatchKoliBriEvent("selection-change",this.host,l),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i[events.Events.onSelectionChange])&&this.state._on[events.Events.onSelectionChange](e,null!=l?l:[])}}))):index.h("label",{class:"radio-container"},index.h("input",Object.assign({},v,{type:"radio",onInput:e=>{var t;events$1.tryToDispatchKoliBriEvent("selection-change",this.host,r),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t[events.Events.onSelectionChange])&&this.state._on[events.Events.onSelectionChange](e,r)}}))),index.h(componentNames.KolTooltipWcTag,{"aria-hidden":"true",class:"input-tooltip",_align:"right",_id:`${r}-label`,_label:h})))}renderHeadingSelectionCell(){var e,t;const a=this.state._selection;if(!a||!a.multiple&&void 0!==a.multiple)return index.h("th",{key:"thead-0"});const i=null!==(e=a.keyPropertyName)&&void 0!==e?e:"id",l=null===(t=a.selectedKeys)||void 0===t?void 0:t.length,n=l===this.state._data.length,o=0!==l&&!n;let s="kol-table-selection-indeterminate";n&&!o&&(s="kol-table-selection-none"),0===l&&(s="kol-table-selection-all");const r=i18n.translate(s);return index.h("th",{key:"thead-0-selection",class:"selection-cell selection-control"},index.h("div",{class:"input "+(o?"indeterminate":n?"checked":"")},index.h("label",{class:"checkbox-container"},index.h(componentNames.KolIconTag,{class:"icon",_icons:"codicon "+(o?"codicon-remove":n?"codicon-check":""),_label:""}),index.h("input",{ref:e=>e&&this.checkboxRefs.push(e),name:"selection",checked:n&&!o,"aria-label":r,type:"checkbox",onInput:e=>{var t;const a=n?[]:this.state._data.map((e=>null==e?void 0:e[i]));events$1.tryToDispatchKoliBriEvent("selection-change",this.host,a),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t[events.Events.onSelectionChange])&&this.state._on[events.Events.onSelectionChange](e,a)}})),index.h(componentNames.KolTooltipWcTag,{"aria-hidden":"true",class:"input-tooltip",_align:"right",_id:`${s}-label`,_label:r})))}renderHeaderTdCell(){return index.h(index.Fragment,null,Array.isArray(this.state._headerCells.horizontal)&&this.state._headerCells.horizontal.length>0&&Array.isArray(this.state._headerCells.vertical)&&this.state._headerCells.vertical.length>0&&Array.isArray(this.state._headerCells.horizontal)&&index.h("td",{"aria-hidden":"true",colSpan:this.state._headerCells.vertical.length,rowSpan:this.state._headerCells.horizontal.length}))}renderHeadingCell(e,t,a,i){let l,n="codicon codicon-fold";if(e.sortDirection)switch(e.sortDirection){case"ASC":n="codicon codicon-chevron-up",l="ascending";break;case"DESC":n="codicon codicon-chevron-down",l="descending"}const o=i?"row":"number"==typeof e.colSpan&&e.colSpan>1?"colgroup":"col";return index.h("th",{key:`${t}-${a}-${e.label}`,class:e.textAlign?`align-${e.textAlign}`:void 0,scope:o,colSpan:e.colSpan,rowSpan:e.rowSpan,style:{width:e.width},"aria-sort":l,"data-sort":`sort-${e.sortDirection}`},e.sortDirection?index.h(componentNames.KolButtonWcTag,{class:"table-sort-button",exportparts:"icon",_icons:{right:n},_label:e.label,_on:{onClick:t=>{var a;"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onSort)&&e.key&&e.sortDirection&&this.state._on.onSort(t,{key:e.key,currentSortDirection:e.sortDirection})}}}):e.label)}renderSpacer(e,t){var a,i;const l=(null===(a=this.state._headerCells.vertical)||void 0===a?void 0:a.length)||0,n=null===(i=null==t?void 0:t[0])||void 0===i?void 0:i.reduce(((e,t)=>e+(t.colSpan||1)),0),o=this.state._selection?1:0;return index.h("tr",{"aria-hidden":"true",class:`${e}-spacer`},index.h("td",{colSpan:l+n+o}))}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return null;const e=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return index.h("tfoot",null,[this.renderSpacer("foot",e),e.map(((e,t)=>this.renderTableRow(e,t,!0)))])}render(){const e=this.createDataField(this.state._data,this.state._headerCells);return this.checkboxRefs=[],index.h(index.Host,{key:"d052c595574b48e3ccc828fb78c9f7f5c9e38fde",class:"kol-table-stateless-wc"},index.h("div",{key:"9da74abb2c80036ea0a475efe8b3f589ee804b8b",ref:e=>this.tableDivElement=e,class:"table",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},index.h("table",{key:"3e0b47f4ed6834ff9367fb45f39a6bbfc1fe0fe0",style:{minWidth:this.state._deprecatedMinWidth||this.state._minWidth}},index.h("div",{key:"7a1f44793c3a77450920e6b77542119a0f0fa6ed",class:"focus-element",tabindex:this.tableDivElementHasScrollbar?"0":void 0,"aria-describedby":"caption"}," "),index.h("caption",{key:"7708de5a275959669f6c1d083b0afa1e34bbbf39",id:"caption"},this.state._label),Array.isArray(this.state._headerCells.horizontal)&&index.h("thead",{key:"99d7da8bc6f894fd83b7017d79f2765c99799700"},[this.state._headerCells.horizontal.map(((e,t)=>index.h("tr",{key:`thead-${t}`},this.state._selection&&this.renderHeadingSelectionCell(),0===t&&this.renderHeaderTdCell(),Array.isArray(e)&&e.map(((e,a)=>!0===e.asTd?index.h("td",{key:`thead-${t}-${a}-${e.label}`,class:{[e.textAlign]:"string"==typeof e.textAlign&&e.textAlign.length>0},colSpan:e.colSpan,rowSpan:e.rowSpan,style:{textAlign:e.textAlign,width:e.width},ref:"function"==typeof e.render?t=>{this.cellRender(e,t)}:void 0},"function"!=typeof e.render?e.label:""):this.renderHeadingCell(e,t,a,!1)))))),this.renderSpacer("head",this.state._headerCells.horizontal)]),index.h("tbody",{key:"9c045d95a6a4faa9072c2bd9f767c9801f62a849"},e.map(((e,t)=>this.renderTableRow(e,t,!0)))),this.renderFoot())))}get host(){return index.getElement(this)}static get watchers(){return{_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_on:["validateOn"],_selection:["validateSelection"]}}};exports.kol_table_stateless_wc=KolTableStateless;