@scania/tegel
Version:
Tegel Design System
378 lines (377 loc) • 16.7 kB
JavaScript
import { h, Host, } from "@stencil/core";
const relevantTableProps = [
'compactDesign',
'horizontalScrollWidth',
'multiselect',
'expandableRows',
];
function removeShakeAnimation(e) {
e.target.classList.remove('tds-table__page-selector-input--shake');
}
export class TdsTableFooter {
constructor() {
/** 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" })))))))));
}
static get is() { return "tds-table-footer"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["table-footer.scss"]
};
}
static get styleUrls() {
return {
"$": ["table-footer.css"]
};
}
static get properties() {
return {
"pagination": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Enable pagination and show pagination controls"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "pagination",
"defaultValue": "false"
},
"paginationValue": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the pagination number."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "pagination-value",
"defaultValue": "1"
},
"rowsperpage": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Enable rows per page dropdown"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "rowsperpage",
"defaultValue": "true"
},
"rowsPerPageValues": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "number[]",
"resolved": "number[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set available rows per page values"
},
"getter": false,
"setter": false,
"defaultValue": "[10, 25, 50]"
},
"pages": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the number of pages."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "pages",
"defaultValue": "0"
},
"cols": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number | null",
"resolved": "null | number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "<b>Client override</b> Used to set the column span of the footer. Use as fallback if the automatic count of columns fails."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "cols",
"defaultValue": "null"
}
};
}
static get states() {
return {
"columnsNumber": {},
"compactDesign": {},
"multiselect": {},
"expandableRows": {},
"lastCorrectValue": {},
"tableId": {},
"horizontalScrollWidth": {},
"rowsPerPageValue": {}
};
}
static get events() {
return [{
"method": "tdsPagination",
"name": "tdsPagination",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event to send current page value to tds-table-body component, can also be listened to in order to implement custom pagination logic."
},
"complexType": {
"original": "{\n tableId: string | undefined;\n paginationValue: number;\n rowsPerPage?: number;\n }",
"resolved": "{ tableId: string | undefined; paginationValue: number; rowsPerPage?: number | undefined; }",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "cols",
"methodName": "colsChanged"
}, {
"propName": "multiselect",
"methodName": "updateColumnsNumber"
}, {
"propName": "expandableRows",
"methodName": "updateColumnsNumber"
}];
}
static get listeners() {
return [{
"name": "internalTdsTablePropChange",
"method": "internalTdsPropChangeListener",
"target": "body",
"capture": false,
"passive": false
}];
}
}