@scania/tegel/dist/components/tds-table-footer.js

Tegel Design System

import{t,p as e,H as s,c as a,h as o,a as i}from"./index.js";import{d as l}from"./p-Zx1hN-_O.js";import{d}from"./p-hCp8GmRl.js";import{d as r}from"./p-Dc6aMuMv.js";import{d as n}from"./p-CIt4YhvL.js";const c=["compactDesign","horizontalScrollWidth","multiselect","expandableRows"];function b(t){t.target.classList.remove("tds-table__page-selector-input--shake")}const h=e(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tdsPagination=a(this,"tdsPagination",7),this.pagination=!1,this.paginationValue=1,this.rowsperpage=!0,this.rowsPerPageValues=[10,25,50],this.pages=0,this.cols=null,this.columnsNumber=0,this.compactDesign=!1,this.multiselect=!1,this.expandableRows=!1,this.lastCorrectValue=1,this.tableId="",this.horizontalScrollWidth=null,this.rowsPerPageValue=this.rowsPerPageValues[0],this.emitTdsPagination=()=>{this.tdsPagination.emit(this.rowsperpage?{tableId:this.tableId,paginationValue:Number(this.paginationValue),rowsPerPage:this.rowsPerPageValue}:{tableId:this.tableId,paginationValue:Number(this.paginationValue)})},this.previousPage=()=>{this.paginationValue>=2&&this.paginationValue--,this.emitTdsPagination(),this.storeLastCorrectValue(this.paginationValue)},this.nextPage=()=>{this.pages&&this.paginationValue<=this.pages&&this.paginationValue++,this.emitTdsPagination(),this.storeLastCorrectValue(this.paginationValue)},this.lastPage=()=>{this.paginationValue=this.pages,this.emitTdsPagination(),this.storeLastCorrectValue(this.paginationValue)},this.firstPage=()=>{this.paginationValue=1,this.emitTdsPagination(),this.storeLastCorrectValue(this.paginationValue)}}internalTdsPropChangeListener(t){this.tableId===t.detail.tableId&&t.detail.changed.filter((t=>c.includes(t))).forEach((e=>{if(void 0===this[e])throw Error("Table prop is not supported: "+e);this[e]=t.detail[e]}))}colsChanged(t){null!==t?this.columnsNumber=t:this.updateColumnsNumber()}updateColumnsNumber(){var t,e,s;if(this.cols)return;let a=null!==(s=null===(e=null===(t=this.host.parentElement)||void 0===t?void 0:t.querySelector("tds-table-header"))||void 0===e?void 0:e.childElementCount)&&void 0!==s?s:0;this.multiselect&&(a+=1),this.expandableRows&&(a+=1),this.columnsNumber=a}connectedCallback(){var t;this.tableEl=this.host.closest("tds-table"),this.tableId=null===(t=this.tableEl)||void 0===t?void 0:t.tableId}componentWillLoad(){var t,e,s;c.forEach((t=>{var e;this[t]=null===(e=this.tableEl)||void 0===e?void 0:e[t]})),this.storeLastCorrectValue(this.paginationValue);const a=null!==(s=null===(e=null===(t=this.host.parentElement)||void 0===t?void 0:t.querySelector("tds-table-header"))||void 0===e?void 0:e.childElementCount)&&void 0!==s?s:0;if(this.cols)this.columnsNumber=this.cols;else{let t=a;this.multiselect&&(t+=1),this.expandableRows&&(t+=1),this.columnsNumber=t}}storeLastCorrectValue(t){this.lastCorrectValue=t}paginationInputChange(t){const e=Number(t.target.value);e>t.target.max||e<t.target.min?(t.target.classList.add("tds-table__page-selector-input--shake"),this.inputElement.value=this.lastCorrectValue+"",this.paginationValue=Number(this.inputElement.value)):this.paginationValue=e,this.emitTdsPagination(),this.storeLastCorrectValue(this.paginationValue)}rowsPerPageChange(t){this.rowsPerPageValue=parseInt(t.detail.value),this.paginationValue>this.pages&&(this.paginationValue=this.pages),this.emitTdsPagination()}getStyles(){const t={};return this.horizontalScrollWidth&&(t.width=this.horizontalScrollWidth+"px"),t}render(){var t;return o(i,{key:"8cf70f3e746f05b392b4b95d54bfece7220633e4",class:{"tds-table--compact":this.compactDesign,"footer__horizontal-scroll":!!this.horizontalScrollWidth},style:this.getStyles()},o("tr",{key:"5cb6329b2555cc8b5d225509523e231c446b3c4a",class:"tds-table__footer-row"},o("td",{key:"6f80504a5a0ff08150815f92981ca3fc6daaefab",class:"tds-table__footer-cell",colSpan:this.columnsNumber},this.pagination&&o("div",{key:"14412d3db567342d7d24a52291de9468306111cc",class:"tds-table__pagination"},o("div",{key:"e7d3853740a5173322cb35670e39485e9ffb8c11",class:"tds-table__row-selector"},this.rowsperpage&&(null===(t=this.rowsPerPageValues)||void 0===t?void 0:t.length)>0&&o("div",{key:"9f92698875cacaa25910597a7361fcbcda4318c6",class:"rows-per-page"},o("p",{key:"f046870d8bdbe7f90625e36a37b8b3720f72ff12"},"Rows per page"),o("tds-dropdown",{key:"c75c1ef3c1a66e8ec7a130d24dca504148b8113e",modeVariant:"secondary",id:"rows-dropdown",class:"page-dropdown",size:"xs",defaultValue:""+this.rowsPerPageValues[0],onTdsChange:t=>this.rowsPerPageChange(t)},this.rowsPerPageValues.map((t=>o("tds-dropdown-option",{value:""+t},t)))))),o("div",{key:"dd171addd35fdfb1f4a90e545dd3d4a56568436f",class:"tds-table__page-selector"},o("input",{key:"af61e22ec0dfa8468ee32ed0343aae28bc54f101",ref:t=>{t&&(this.inputElement=t)},class:"tds-table__page-selector-input",type:"number",min:"1",max:this.pages,value:this.paginationValue,pattern:"[0-9]+",dir:"ltr",onChange:t=>this.paginationInputChange(t),onAnimationEnd:b}),o("p",{key:"d741a6d807bcbc9d3b132092b827b99ac7c27764",class:"tds-table__footer-text"},"of ",o("span",{key:"ba74d91e5ed8796c0c17e73e53f4ea9385cdbdb5"},this.pages)," pages"),o("button",{key:"7ba4cb7b425c0aba89cde7e925d3b50ebd28070d",type:"button",class:"tds-table__footer-btn",disabled:this.paginationValue<=1,onClick:()=>this.firstPage()},o("tds-icon",{key:"2b6ddc50e9d584cf4e7530a6f3a8a20b67035c89",name:"skip_backwards",size:"20px"})),o("button",{key:"5dd123e068da4d89552c6403aefa32e6c037c571",type:"button",class:"tds-table__footer-btn",disabled:this.paginationValue<=1,onClick:()=>this.previousPage()},o("tds-icon",{key:"86da02b6cde0c0aac91a5bbde6a705c8499f7516",name:"chevron_left",size:"20px"})),o("button",{key:"d8208da719503be3edc6397a82d196c76beac598",type:"button",class:"tds-table__footer-btn",disabled:this.paginationValue>=this.pages,onClick:()=>this.nextPage()},o("tds-icon",{key:"f52872c6cf209a65658f4cf8f9ca7f309a94793b",name:"chevron_right",size:"20px"})),o("button",{key:"b1e5db7b0dffd15b920db01ed3f02d5c5940e288",type:"button",class:"tds-table__footer-btn",disabled:this.paginationValue>=this.pages,onClick:()=>this.lastPage()},o("tds-icon",{key:"52ec734eaa1992709ac6ffc32f6d493e8ebd86a9",name:"skip_forward",size:"20px"})))))))}get host(){return this}static get watchers(){return{cols:[{colsChanged:0}],multiselect:[{updateColumnsNumber:0}],expandableRows:[{updateColumnsNumber:0}]}}static get style(){return":host{box-sizing:border-box;display:table-footer-group;height:var(--tds-spacing-element-48)}:host *{box-sizing:border-box}:host .tds-table__footer-row{background-color:var(--tds-table-footer-background);color:var(--tds-table-color)}:host .tds-table__footer-cell{padding:0 var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-48);display:flex;align-items:center;justify-content:space-between}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector{display:flex;align-items:center}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page{display:flex;align-items:center;margin-right:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page p,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page p{margin-right:var(--tds-spacing-element-8)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-table-footer-page-selector-input-background);color:var(--tds-table-color);width:74px;height:30px;border:none;border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;margin-right:var(--tds-spacing-element-4);padding-left:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover{background-color:var(--tds-table-footer-page-selector-input-background-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:disabled{color:var(--tds-table-footer-page-selector-input-color-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input--shake{animation:tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-text{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:1px 8px 0 0}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{display:flex;justify-content:center;align-items:center;border:none;background-color:transparent;cursor:pointer;height:var(--tds-spacing-element-32);width:var(--tds-spacing-element-32);border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;color:var(--tds-table-footer-page-selector-icon)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:hover{background-color:var(--tds-table-footer-btn-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled{cursor:default;color:var(--tds-table-footer-page-selector-icon-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled:hover{background-color:transparent}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn-svg{height:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20);fill:var(--tds-table-color)}:host(.tds-table--compact){height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{height:var(--tds-spacing-element-24)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{height:28px;width:28px}:host(.footer__horizontal-scroll){display:inline-table;position:absolute;margin-top:10px}@keyframes tds-shake-animation{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}"}},[1,"tds-table-footer",{pagination:[516],paginationValue:[1538,"pagination-value"],rowsperpage:[516],rowsPerPageValues:[16],pages:[514],cols:[2],columnsNumber:[32],compactDesign:[32],multiselect:[32],expandableRows:[32],lastCorrectValue:[32],tableId:[32],horizontalScrollWidth:[32],rowsPerPageValue:[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"]],{cols:[{colsChanged:0}],multiselect:[{updateColumnsNumber:0}],expandableRows:[{updateColumnsNumber:0}]}]);function p(){"undefined"!=typeof customElements&&["tds-table-footer","tds-checkbox","tds-dropdown","tds-dropdown-option","tds-icon"].forEach((e=>{switch(e){case"tds-table-footer":customElements.get(t(e))||customElements.define(t(e),h);break;case"tds-checkbox":customElements.get(t(e))||l();break;case"tds-dropdown":customElements.get(t(e))||d();break;case"tds-dropdown-option":customElements.get(t(e))||r();break;case"tds-icon":customElements.get(t(e))||n()}}))}p();const _=h,g=p;export{_ as TdsTableFooter,g as defineCustomElement}