@scania/tegel
Version:
Tegel Design System
298 lines (297 loc) • 13.4 kB
JavaScript
import { h, Host, } from "@stencil/core";
const relevantTableProps = [
'compactDesign',
'horizontalScrollWidth',
];
function removeShakeAnimation(e) {
e.target.classList.remove('tds-table__page-selector-input--shake');
}
export class TdsTableFooter {
constructor() {
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.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);
};
this.pagination = false;
this.paginationValue = 1;
this.rowsperpage = true;
this.rowsPerPageValues = [10, 25, 50];
this.pages = null;
this.cols = null;
this.columnsNumber = 0;
this.compactDesign = false;
this.lastCorrectValue = undefined;
this.tableId = '';
this.horizontalScrollWidth = null;
this.rowsPerPageValue = this.rowsPerPageValues[0];
}
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];
});
}
}
connectedCallback() {
this.tableEl = this.host.closest('tds-table');
this.tableId = this.tableEl.tableId;
}
componentWillLoad() {
relevantTableProps.forEach((tablePropName) => {
this[tablePropName] = this.tableEl[tablePropName];
});
this.storeLastCorrectValue(this.paginationValue);
/** Get the number of columns. */
const numberOfColumns = this.host.parentElement.querySelector('tds-table-header').childElementCount;
if (this.cols) {
this.columnsNumber = this.cols;
}
else {
this.columnsNumber = numberOfColumns;
}
}
/* 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: 'fd6a5604adc116a78c9723ce3f16535ea6fa7edf', class: {
'tds-table--compact': this.compactDesign,
'footer__horizontal-scroll': !!this.horizontalScrollWidth,
}, style: this.getStyles() }, h("tr", { key: '5ec3649f1e76f54a1d09cc023f52f165bf55a175', class: "tds-table__footer-row" }, h("td", { key: '0815d2e9083b0b3793dbf3572869b76c2445396e', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '3bdc6acf5b034f8ee141e1fde58e32cb76e7ab33', class: "tds-table__pagination" }, h("div", { key: 'd8bd734bb3890593404d7950b5cb353e0af1b37f', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '0cc09dd7662a2ceba454fb1e1c3eb3a389e9eb4d', class: "rows-per-page" }, h("p", { key: '57ae73ac509c9cd7ce9c93ae60737724035fb376' }, "Rows per page"), h("tds-dropdown", { key: '6fc1d8794bb2cecc406d9143c1e501733a990993', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
return (h("tds-dropdown-option", { value: `${value}` }, value));
}))))), h("div", { key: '71e30ccac9cb36acf61f46de47fc39d4b45c49d3', class: "tds-table__page-selector" }, h("input", { key: 'fe99cbdae18c4b297e0823de2f2a5529f24ed7f4', ref: (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: 'd49b93524aeaddacd2e6c431d8f191fd87c768be', class: "tds-table__footer-text" }, "of ", h("span", { key: '1d6f7429e0837f200db90259e1e23cb879643756' }, this.pages), " pages"), h("button", { key: 'b5e0a8d72a1e7ff35570dfd2c131735f91ebb824', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '06ffe814de254c6c194ab88d89fe5f6da5239c44', name: "skip_backwards", size: "20px" })), h("button", { key: '271a59221429937f24873f984526fe55dd12c874', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: 'b2231b490bdd4234d62399f2785edf3136789af5', name: "chevron_left", size: "20px" })), h("button", { key: '6b06a0fad602d8593bb834672e934afb00d45edf', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '384751f9299ce4078e35fc15be37d2d529ddeffa', name: "chevron_right", size: "20px" })), h("button", { key: 'cf0fa5f2967d7f249ffbd548039e8021e4121bec', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '6da11c4f01f58a7e39698b7a91034567527464e6', 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"
},
"attribute": "pagination",
"reflect": true,
"defaultValue": "false"
},
"paginationValue": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the pagination number."
},
"attribute": "pagination-value",
"reflect": true,
"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"
},
"attribute": "rowsperpage",
"reflect": true,
"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"
},
"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."
},
"attribute": "pages",
"reflect": true,
"defaultValue": "null"
},
"cols": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "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."
},
"attribute": "cols",
"reflect": false,
"defaultValue": "null"
}
};
}
static get states() {
return {
"columnsNumber": {},
"compactDesign": {},
"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;\n paginationValue: number;\n rowsPerPage?: number;\n }",
"resolved": "{ tableId: string; paginationValue: number; rowsPerPage?: number; }",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "internalTdsTablePropChange",
"method": "internalTdsPropChangeListener",
"target": "body",
"capture": false,
"passive": false
}];
}
}