@scania/tegel 1.3.3-event-types.0 → 1.4.0

package/dist/collection/components/table/table-footer/table-footer.js

@@ -1,219 +1,219 @@
 import { h, Host, } from "@stencil/core";
 const relevantTableProps = ['compactDesign'];
 function removeShakeAnimation(e) {
-  e.target.classList.remove('tds-table__page-selector-input--shake');
+    e.target.classList.remove('tds-table__page-selector-input--shake');
 }
 export class TdsTableFooter {
-  constructor() {
-    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--;
-      }
-      /* Emits pagination event. */
-      this.tdsPagination.emit({
-        tableId: this.tableId,
-        paginationValue: Number(this.paginationValue),
-      });
-      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.tdsPagination.emit({
-        tableId: this.tableId,
-        paginationValue: Number(this.paginationValue),
-      });
-      this.storeLastCorrectValue(this.paginationValue);
-    };
-    this.pagination = false;
-    this.paginationValue = 1;
-    this.pages = null;
-    this.cols = null;
-    this.columnsNumber = 0;
-    this.compactDesign = false;
-    this.lastCorrectValue = undefined;
-    this.tableId = '';
-  }
-  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];
-      });
+    constructor() {
+        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--;
+            }
+            /* Emits pagination event. */
+            this.tdsPagination.emit({
+                tableId: this.tableId,
+                paginationValue: Number(this.paginationValue),
+            });
+            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.tdsPagination.emit({
+                tableId: this.tableId,
+                paginationValue: Number(this.paginationValue),
+            });
+            this.storeLastCorrectValue(this.paginationValue);
+        };
+        this.pagination = false;
+        this.paginationValue = 1;
+        this.pages = null;
+        this.cols = null;
+        this.columnsNumber = 0;
+        this.compactDesign = false;
+        this.lastCorrectValue = undefined;
+        this.tableId = '';
     }
-  }
-  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;
+    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];
+            });
+        }
     }
-    else {
-      this.columnsNumber = numberOfColumns;
+    connectedCallback() {
+        this.tableEl = this.host.closest('tds-table');
+        this.tableId = this.tableEl.tableId;
     }
-  }
-  /* 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);
+    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;
+        }
     }
-    else {
-      this.paginationValue = insertedValue;
+    /* Function to store last valid input */
+    storeLastCorrectValue(value) {
+        this.lastCorrectValue = value;
     }
-    this.tdsPagination.emit({
-      tableId: this.tableId,
-      paginationValue: Number(this.paginationValue),
-    });
-    this.storeLastCorrectValue(this.paginationValue);
-  }
-  render() {
-    return (h(Host, { class: this.compactDesign ? 'tds-table--compact' : '' }, h("tr", { class: "tds-table__footer-row" }, h("td", { class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { class: "tds-table__pagination" }, h("div", { class: "tds-table__row-selector" }), h("div", { class: "tds-table__page-selector" }, h("input", { 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", { class: "tds-table__footer-text" }, "of ", h("span", null, this.pages), " pages"), h("button", { type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { name: "chevron_left", size: "20px" })), h("button", { type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { name: "chevron_right", 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"
-      },
-      "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": {}
-    };
-  }
-  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  }",
-          "resolved": "{ tableId: string; paginationValue: number; }",
-          "references": {}
+    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);
         }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get listeners() {
-    return [{
-        "name": "internalTdsTablePropChange",
-        "method": "internalTdsPropChangeListener",
-        "target": "body",
-        "capture": false,
-        "passive": false
-      }];
-  }
+        else {
+            this.paginationValue = insertedValue;
+        }
+        this.tdsPagination.emit({
+            tableId: this.tableId,
+            paginationValue: Number(this.paginationValue),
+        });
+        this.storeLastCorrectValue(this.paginationValue);
+    }
+    render() {
+        return (h(Host, { class: this.compactDesign ? 'tds-table--compact' : '' }, h("tr", { class: "tds-table__footer-row" }, h("td", { class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { class: "tds-table__pagination" }, h("div", { class: "tds-table__row-selector" }), h("div", { class: "tds-table__page-selector" }, h("input", { 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", { class: "tds-table__footer-text" }, "of ", h("span", null, this.pages), " pages"), h("button", { type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { name: "chevron_left", size: "20px" })), h("button", { type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { name: "chevron_right", 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"
+            },
+            "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": {}
+        };
+    }
+    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  }",
+                    "resolved": "{ tableId: string; paginationValue: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "internalTdsTablePropChange",
+                "method": "internalTdsPropChangeListener",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }