@scania/tegel
Version:
Tegel Design System
204 lines (199 loc) • 14.4 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
import { d as defineCustomElement$5 } from './p-23aab3b9.js';
import { d as defineCustomElement$4 } from './p-ffbaebb1.js';
import { d as defineCustomElement$3 } from './p-19edd11a.js';
import { d as defineCustomElement$2 } from './p-b390ece5.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}@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)}}";
const TdsTableFooterStyle0 = tableFooterCss;
const relevantTableProps = [
'compactDesign',
'horizontalScrollWidth',
];
function removeShakeAnimation(e) {
e.target.classList.remove('tds-table__page-selector-input--shake');
}
const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.tdsPagination = createEvent(this, "tdsPagination", 7);
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" })))))))));
}
get host() { return this; }
static get style() { return TdsTableFooterStyle0; }
}, [1, "tds-table-footer", {
"pagination": [516],
"paginationValue": [1538, "pagination-value"],
"rowsperpage": [516],
"rowsPerPageValues": [16],
"pages": [514],
"cols": [2],
"columnsNumber": [32],
"compactDesign": [32],
"lastCorrectValue": [32],
"tableId": [32],
"horizontalScrollWidth": [32],
"rowsPerPageValue": [32]
}, [[16, "internalTdsTablePropChange", "internalTdsPropChangeListener"]]]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["tds-table-footer", "tds-checkbox", "tds-dropdown", "tds-dropdown-option", "tds-icon"];
components.forEach(tagName => { switch (tagName) {
case "tds-table-footer":
if (!customElements.get(tagName)) {
customElements.define(tagName, TdsTableFooter$1);
}
break;
case "tds-checkbox":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "tds-dropdown":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "tds-dropdown-option":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "tds-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const TdsTableFooter = TdsTableFooter$1;
const defineCustomElement = defineCustomElement$1;
export { TdsTableFooter, defineCustomElement };