@scania/tegel
Version:
Tegel Design System
212 lines (208 loc) • 15.1 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-9xxNGlso.js';
const tableFooterCss = () => `: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} 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)}}`;
const relevantTableProps = [
'compactDesign',
'horizontalScrollWidth',
'multiselect',
'expandableRows',
];
function removeShakeAnimation(e) {
e.target.classList.remove('tds-table__page-selector-input--shake');
}
const TdsTableFooter = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.tdsPagination = createEvent(this, "tdsPagination", 7);
/** Enable pagination and show pagination controls */
this.pagination = false;
/** Sets the pagination number. */
this.paginationValue = 1;
/** Enable rows per page dropdown */
this.rowsperpage = true;
/** Set available rows per page values */
this.rowsPerPageValues = [10, 25, 50];
/** Sets the number of pages. */
this.pages = 0;
/** <b>Client override</b> Used to set the column span of the footer. Use as fallback if the automatic count of columns fails. */
this.cols = null;
/** State that memorize number of columns to display colSpan correctly - set from parent level */
this.columnsNumber = 0;
/* Sets the footer to use compact design. */
this.compactDesign = false;
/* State to track if multiselect is enabled on parent table. */
this.multiselect = false;
/* State to track if expandableRows is enabled on parent table. */
this.expandableRows = false;
this.lastCorrectValue = 1;
this.tableId = '';
this.horizontalScrollWidth = null;
this.rowsPerPageValue = this.rowsPerPageValues[0];
this.emitTdsPagination = () => {
if (this.rowsperpage) {
this.tdsPagination.emit({
tableId: this.tableId,
paginationValue: Number(this.paginationValue),
rowsPerPage: this.rowsPerPageValue,
});
}
else {
this.tdsPagination.emit({
tableId: this.tableId,
paginationValue: Number(this.paginationValue),
});
}
};
this.previousPage = () => {
/** If pages and greater or equal to 2, decrease pagination value.
* This is to not get under 1 in pagination value. */
if (this.paginationValue >= 2) {
this.paginationValue--;
}
this.emitTdsPagination();
this.storeLastCorrectValue(this.paginationValue);
};
this.nextPage = () => {
/** If pages and greater or equal to the number of pages, increase pagination value.
* This is to not get above the number of pages in pagination value. */
if (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(event) {
if (this.tableId === event.detail.tableId) {
event.detail.changed
.filter((changedProp) => relevantTableProps.includes(changedProp))
.forEach((changedProp) => {
if (typeof this[changedProp] === 'undefined') {
throw new Error(`Table prop is not supported: ${changedProp}`);
}
this[changedProp] = event.detail[changedProp];
});
}
}
colsChanged(newValue) {
if (newValue !== null) {
this.columnsNumber = newValue;
}
else {
this.updateColumnsNumber();
}
}
updateColumnsNumber() {
var _a, _b, _c;
if (this.cols) {
return;
}
const numberOfColumns = (_c = (_b = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('tds-table-header')) === null || _b === void 0 ? void 0 : _b.childElementCount) !== null && _c !== void 0 ? _c : 0;
let totalColumns = numberOfColumns;
// Add 1 for multiselect checkbox column
if (this.multiselect) {
totalColumns += 1;
}
// Add 1 for expandable rows column
if (this.expandableRows) {
totalColumns += 1;
}
this.columnsNumber = totalColumns;
}
connectedCallback() {
var _a;
this.tableEl = this.host.closest('tds-table');
this.tableId = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.tableId;
}
componentWillLoad() {
var _a, _b, _c;
relevantTableProps.forEach((tablePropName) => {
var _a;
this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
});
this.storeLastCorrectValue(this.paginationValue);
/** Get the number of columns. */
const numberOfColumns = (_c = (_b = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('tds-table-header')) === null || _b === void 0 ? void 0 : _b.childElementCount) !== null && _c !== void 0 ? _c : 0;
if (this.cols) {
this.columnsNumber = this.cols;
}
else {
// Calculate total columns including multiselect and expandable columns
let totalColumns = numberOfColumns;
// Add 1 for multiselect checkbox column
if (this.multiselect) {
totalColumns += 1;
}
// Add 1 for expandable rows column
if (this.expandableRows) {
totalColumns += 1;
}
this.columnsNumber = totalColumns;
}
}
/* Function to store last valid input */
storeLastCorrectValue(value) {
this.lastCorrectValue = value;
}
paginationInputChange(event) {
const insertedValue = Number(event.target.value);
if (insertedValue > event.target.max || insertedValue < event.target.min) {
event.target.classList.add('tds-table__page-selector-input--shake');
this.inputElement.value = String(this.lastCorrectValue);
this.paginationValue = Number(this.inputElement.value);
}
else {
this.paginationValue = insertedValue;
}
this.emitTdsPagination();
this.storeLastCorrectValue(this.paginationValue);
}
rowsPerPageChange(event) {
this.rowsPerPageValue = parseInt(event.detail.value);
if (this.paginationValue > this.pages) {
this.paginationValue = this.pages;
}
this.emitTdsPagination();
}
getStyles() {
const styles = {};
if (this.horizontalScrollWidth) {
styles.width = `${this.horizontalScrollWidth}px`;
}
return styles;
}
render() {
var _a;
return (h(Host, { key: '8cf70f3e746f05b392b4b95d54bfece7220633e4', class: {
'tds-table--compact': this.compactDesign,
'footer__horizontal-scroll': !!this.horizontalScrollWidth,
}, style: this.getStyles() }, h("tr", { key: '5cb6329b2555cc8b5d225509523e231c446b3c4a', class: "tds-table__footer-row" }, h("td", { key: '6f80504a5a0ff08150815f92981ca3fc6daaefab', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '14412d3db567342d7d24a52291de9468306111cc', class: "tds-table__pagination" }, h("div", { key: 'e7d3853740a5173322cb35670e39485e9ffb8c11', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '9f92698875cacaa25910597a7361fcbcda4318c6', class: "rows-per-page" }, h("p", { key: 'f046870d8bdbe7f90625e36a37b8b3720f72ff12' }, "Rows per page"), h("tds-dropdown", { key: 'c75c1ef3c1a66e8ec7a130d24dca504148b8113e', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => (h("tds-dropdown-option", { value: `${value}` }, value))))))), h("div", { key: 'dd171addd35fdfb1f4a90e545dd3d4a56568436f', class: "tds-table__page-selector" }, h("input", { key: 'af61e22ec0dfa8468ee32ed0343aae28bc54f101', ref: (element) => {
if (element) {
this.inputElement = element;
}
}, class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: 'd741a6d807bcbc9d3b132092b827b99ac7c27764', class: "tds-table__footer-text" }, "of ", h("span", { key: 'ba74d91e5ed8796c0c17e73e53f4ea9385cdbdb5' }, this.pages), " pages"), h("button", { key: '7ba4cb7b425c0aba89cde7e925d3b50ebd28070d', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '2b6ddc50e9d584cf4e7530a6f3a8a20b67035c89', name: "skip_backwards", size: "20px" })), h("button", { key: '5dd123e068da4d89552c6403aefa32e6c037c571', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '86da02b6cde0c0aac91a5bbde6a705c8499f7516', name: "chevron_left", size: "20px" })), h("button", { key: 'd8208da719503be3edc6397a82d196c76beac598', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'f52872c6cf209a65658f4cf8f9ca7f309a94793b', name: "chevron_right", size: "20px" })), h("button", { key: 'b1e5db7b0dffd15b920db01ed3f02d5c5940e288', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '52ec734eaa1992709ac6ffc32f6d493e8ebd86a9', name: "skip_forward", size: "20px" })))))))));
}
get host() { return getElement(this); }
static get watchers() { return {
"cols": [{
"colsChanged": 0
}],
"multiselect": [{
"updateColumnsNumber": 0
}],
"expandableRows": [{
"updateColumnsNumber": 0
}]
}; }
};
TdsTableFooter.style = tableFooterCss();
export { TdsTableFooter as tds_table_footer };