@everymatrix/user-transaction-history 1.43.4 → 1.45.0

package/dist/collection/components/user-transaction-history/user-transaction-history.js

@@ -1,357 +1,348 @@
-import { Localization } from '../../utils/locale.util';
-import { Component, Host, Prop, State, h, Element, Watch, Listen, getAssetPath } from '@stencil/core';
-import { Loader } from '../internal/loader';
-import { TransactionComponent } from '../internal/transaction';
-import { PageSize } from '../internal/page-size';
-import { Filters } from '../internal/filters';
-import { TableComponent } from '../internal/table';
+import { Localization } from "../../utils/locale.util";
+import { Host, h, getAssetPath } from "@stencil/core";
+import { Loader } from "../internal/loader";
+import { TransactionComponent } from "../internal/transaction";
+import { PageSize } from "../internal/page-size";
+import { Filters } from "../internal/filters";
+import { TableComponent } from "../internal/table";
 export class UserTransactionHistory {
-  constructor() {
-    this.pageSizes = [10, 25, 50];
-    this.pagination = null;
-    this.stylingAppended = false;
-    /*
-    * Language of the application.
-    */
-    this.language = Localization.defaultLanguage;
-    /*
-    * Is mobile mode on. Default value `false`.
-    */
-    this.mobile = false;
-    /*
-    * Client styling via inline styles.
-    */
-    this.clientStyling = null;
-    /*
-    * The path to file with styles in `css` format.
-    */
-    this.clientStylingUrl = null;
-    this.page = 0;
-    this.pageSize = this.pageSizes[0];
-    this.showMobileFilter = false;
-    this.type = '0';
-    this.showLoader = true;
-  }
-  watchMultiple() {
-    this.loadTransactions();
-  }
-  async componentWillLoad() {
-    if (this.translationUrl) {
-      await Localization.loadCustomTranslations(this.translationUrl);
+    constructor() {
+        this.pageSizes = [10, 25, 50];
+        this.pagination = null;
+        this.stylingAppended = false;
+        this.endpoint = undefined;
+        this.session = undefined;
+        this.language = Localization.defaultLanguage;
+        this.userId = undefined;
+        this.translationUrl = undefined;
+        this.mobile = false;
+        this.clientStyling = null;
+        this.clientStylingUrl = null;
+        this.page = 0;
+        this.pageSize = this.pageSizes[0];
+        this.showMobileFilter = false;
+        this.to = undefined;
+        this.from = undefined;
+        this.type = '0';
+        this.transactions = undefined;
+        this.showLoader = true;
     }
-    this.loadTransactions();
-  }
-  componentDidRender() {
-    this.getComponentHeight();
-    if (!this.stylingAppended && this.stylingContainer) {
-      if (this.clientStyling) {
-        this.setStyles(this.clientStyling);
-      }
-      if (this.clientStylingUrl) {
-        this.setClientStylingByURL();
-      }
-      this.stylingAppended = true;
+    watchMultiple() {
+        this.loadTransactions();
     }
-  }
-  getComponentHeight() {
-    var _a;
-    if (this.mobile) {
-      let height = this.el.getBoundingClientRect().height - ((_a = this.el.shadowRoot.querySelector('.table')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().y);
-      this.el.style.setProperty('--heightScrollableContainer', height + 'px');
+    async componentWillLoad() {
+        if (this.translationUrl) {
+            await Localization.loadCustomTranslations(this.translationUrl);
+        }
+        this.loadTransactions();
+    }
+    componentDidRender() {
+        this.getComponentHeight();
+        if (!this.stylingAppended && this.stylingContainer) {
+            if (this.clientStyling) {
+                this.setStyles(this.clientStyling);
+            }
+            if (this.clientStylingUrl) {
+                this.setClientStylingByURL();
+            }
+            this.stylingAppended = true;
+        }
+    }
+    getComponentHeight() {
+        var _a;
+        if (this.mobile) {
+            let height = this.el.getBoundingClientRect().height - ((_a = this.el.shadowRoot.querySelector('.table')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().y);
+            this.el.style.setProperty('--heightScrollableContainer', height + 'px');
+        }
+    }
+    setHeightTableProperty() {
+        let height = this.getComponentHeight();
+        this.el.style.setProperty('--heightScrollableContainer', height + 'px');
     }
-  }
-  setHeightTableProperty() {
-    let height = this.getComponentHeight();
-    this.el.style.setProperty('--heightScrollableContainer', height + 'px');
-  }
-  changeTransactionsType(type) {
-    this.type = type;
-  }
-  changePageSize(pageSize) {
-    this.pageSize = pageSize;
-  }
-  prev() {
-    var _a;
-    if (!((_a = this.pagination) === null || _a === void 0 ? void 0 : _a.previous)) {
-      return;
+    changeTransactionsType(type) {
+        this.type = type;
     }
-    this.page--;
-  }
-  next() {
-    var _a;
-    if (!((_a = this.pagination) === null || _a === void 0 ? void 0 : _a.next)) {
-      return;
+    changePageSize(pageSize) {
+        this.pageSize = pageSize;
     }
-    this.page++;
-  }
-  applyFilters(from, to) {
-    this.from = from ? new Date(from).toISOString() : null;
-    this.to = to ? new Date(to).toISOString() : null;
-    this.loadTransactions();
-  }
-  showFilter() {
-    this.showMobileFilter = !this.showMobileFilter;
-  }
-  render() {
-    var _a;
-    const filterSrc = getAssetPath('../assets/filter.svg');
-    const warningSrc = getAssetPath('../assets/warning.svg');
-    return (h(Host, null,
-      this.showLoader ? h(Loader, null) : '',
-      h("div", { class: "wrapper", ref: el => (this.stylingContainer = el) },
-        h("div", { class: { 'types types-mobile': this.mobile, 'types types-desktop': !this.mobile } },
-          h("button", { class: 'transaction-type' + ' ' + (this.type === '0' ? 'clicked' : ''), onClick: () => this.changeTransactionsType('0') }, Localization.translate('deposit', this.language)),
-          h("button", { class: 'transaction-type' + ' ' + (this.type === '1' ? 'clicked' : ''), onClick: () => this.changeTransactionsType('1') }, Localization.translate('withdrawals', this.language))),
-        !this.mobile ? h(PageSize, { language: this.language, pageSizes: this.pageSizes, currentPageSize: this.pageSize, changePageSize: s => this.changePageSize(s) }) : '',
-        this.mobile ? (h("button", { class: "mobile-filter-button", onClick: () => this.showFilter() },
-          h("img", { src: filterSrc, alt: "Filter" }),
-          Localization.translate('filter', this.language))) : (''),
-        !this.mobile || (this.showMobileFilter && this.mobile) ? h(Filters, { language: this.language, applyFilters: (from, to) => this.applyFilters(from, to) }) : '',
-        ((_a = this.transactions) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (h("div", { class: "table" }, this.mobile ? (h("div", { class: "mobile-table" }, this.transactions.map(transaction => (h(TransactionComponent, Object.assign({}, transaction)))))) : (h(TableComponent, { source: this.transactions, language: this.language })))) : (h("div", { class: "noData" },
-          h("img", { src: warningSrc, alt: "Warning" }),
-          h("span", null, Localization.translate('noData', this.language)))),
-        h("div", { class: "pagination" },
-          h("button", { onClick: () => this.prev() }, '<'),
-          h("button", { onClick: () => this.next() }, '>')))));
-  }
-  async loadTransactions() {
-    this.showLoader = true;
-    try {
-      const url = `${this.endpoint}/v1/player/${this.userId}/transactions/banking?${this.getParams()}`;
-      const response = await fetch(url, {
-        headers: {
-          'X-Sessionid': this.session,
-          'Content-Type': 'application/json'
+    prev() {
+        var _a;
+        if (!((_a = this.pagination) === null || _a === void 0 ? void 0 : _a.previous)) {
+            return;
         }
-      });
-      if (!response.ok) {
-        const err = await response.text();
-        throw new Error(err);
-      }
-      const data = await response.json();
-      this.pagination = data.pagination;
-      this.transactions = data.transactions;
+        this.page--;
+    }
+    next() {
+        var _a;
+        if (!((_a = this.pagination) === null || _a === void 0 ? void 0 : _a.next)) {
+            return;
+        }
+        this.page++;
+    }
+    applyFilters(from, to) {
+        this.from = from ? new Date(from).toISOString() : null;
+        this.to = to ? new Date(to).toISOString() : null;
+        this.loadTransactions();
+    }
+    showFilter() {
+        this.showMobileFilter = !this.showMobileFilter;
+    }
+    render() {
+        var _a;
+        const filterSrc = getAssetPath('../assets/filter.svg');
+        const warningSrc = getAssetPath('../assets/warning.svg');
+        return (h(Host, { key: 'c850ba36433277706247f4b7c0c08b0ae0fb8c76' }, this.showLoader ? h(Loader, null) : '', h("div", { key: '20b817b5c9cf14e8af0db2ba417d09e21b6921d7', class: "wrapper", ref: el => (this.stylingContainer = el) }, h("div", { key: '3943f4ab79cb0e72083821b424000f96779e78a5', class: { 'types types-mobile': this.mobile, 'types types-desktop': !this.mobile } }, h("button", { key: 'd1f3dfc1f4fc7013bd81c92663f578129f63c0e7', class: 'transaction-type' + ' ' + (this.type === '0' ? 'clicked' : ''), onClick: () => this.changeTransactionsType('0') }, Localization.translate('deposit', this.language)), h("button", { key: '46989070ef6703fdf7c8c7ac6628e9dce731fec6', class: 'transaction-type' + ' ' + (this.type === '1' ? 'clicked' : ''), onClick: () => this.changeTransactionsType('1') }, Localization.translate('withdrawals', this.language))), !this.mobile ? h(PageSize, { language: this.language, pageSizes: this.pageSizes, currentPageSize: this.pageSize, changePageSize: s => this.changePageSize(s) }) : '', this.mobile ? (h("button", { class: "mobile-filter-button", onClick: () => this.showFilter() }, h("img", { src: filterSrc, alt: "Filter" }), Localization.translate('filter', this.language))) : (''), !this.mobile || (this.showMobileFilter && this.mobile) ? h(Filters, { language: this.language, applyFilters: (from, to) => this.applyFilters(from, to) }) : '', ((_a = this.transactions) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (h("div", { class: "table" }, this.mobile ? (h("div", { class: "mobile-table" }, this.transactions.map(transaction => (h(TransactionComponent, Object.assign({}, transaction)))))) : (h(TableComponent, { source: this.transactions, language: this.language })))) : (h("div", { class: "noData" }, h("img", { src: warningSrc, alt: "Warning" }), h("span", null, Localization.translate('noData', this.language)))), h("div", { key: '50710657788295389a20d59e0092dd033e428268', class: "pagination" }, h("button", { key: 'cd29c880eab413a06666dc12c8df38d3ffdcfe2f', onClick: () => this.prev() }, '<'), h("button", { key: 'df351ecd4237433a8ab38766669ac48d2548ed6a', onClick: () => this.next() }, '>')))));
+    }
+    async loadTransactions() {
+        this.showLoader = true;
+        try {
+            const url = `${this.endpoint}/v1/player/${this.userId}/transactions/banking?${this.getParams()}`;
+            const response = await fetch(url, {
+                headers: {
+                    'X-Sessionid': this.session,
+                    'Content-Type': 'application/json'
+                }
+            });
+            if (!response.ok) {
+                const err = await response.text();
+                throw new Error(err);
+            }
+            const data = await response.json();
+            this.pagination = data.pagination;
+            this.transactions = data.transactions;
+        }
+        catch (ex) {
+            console.error(ex);
+        }
+        finally {
+            this.showLoader = false;
+        }
+    }
+    getParams() {
+        var _a, _b;
+        const now = new Date();
+        const offset = (this.page * this.pageSize).toString();
+        const startDate = (_a = this.from) !== null && _a !== void 0 ? _a : new Date(now.getFullYear(), now.getMonth(), 1).toISOString();
+        const endDate = (_b = this.to) !== null && _b !== void 0 ? _b : new Date(now.getFullYear(), now.getMonth() + 1, 0).toISOString();
+        return `offset=${offset}&endDate=${endDate}&startDate=${startDate}&type=${this.type}&limit=${this.pageSize}`;
+    }
+    setStyles(styles) {
+        const cssFile = document.createElement('style');
+        cssFile.innerHTML = styles;
+        this.stylingContainer.prepend(cssFile);
+    }
+    async setClientStylingByURL() {
+        try {
+            const response = await fetch(this.clientStylingUrl);
+            if (!response.ok) {
+                const err = await response.text();
+                throw new Error(err);
+            }
+            const styles = await response.text();
+            this.setStyles(styles);
+        }
+        catch (ex) {
+            console.error(`Failed to load client styles ${this.clientStylingUrl}`, ex);
+        }
+    }
+    static get is() { return "user-transaction-history"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["user-transaction-history.scss"]
+        };
     }
-    catch (ex) {
-      console.error(ex);
+    static get styleUrls() {
+        return {
+            "$": ["user-transaction-history.css"]
+        };
     }
-    finally {
-      this.showLoader = false;
+    static get assetsDirs() { return ["../assets"]; }
+    static get properties() {
+        return {
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "endpoint",
+                "reflect": true
+            },
+            "session": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "session",
+                "reflect": true
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "Localization.defaultLanguage"
+            },
+            "userId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "user-id",
+                "reflect": true
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "translation-url",
+                "reflect": true
+            },
+            "mobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "mobile",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "null"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "null"
+            }
+        };
     }
-  }
-  getParams() {
-    var _a, _b;
-    const now = new Date();
-    const offset = (this.page * this.pageSize).toString();
-    const startDate = (_a = this.from) !== null && _a !== void 0 ? _a : new Date(now.getFullYear(), now.getMonth(), 1).toISOString();
-    const endDate = (_b = this.to) !== null && _b !== void 0 ? _b : new Date(now.getFullYear(), now.getMonth() + 1, 0).toISOString();
-    return `offset=${offset}&endDate=${endDate}&startDate=${startDate}&type=${this.type}&limit=${this.pageSize}`;
-  }
-  setStyles(styles) {
-    const cssFile = document.createElement('style');
-    cssFile.innerHTML = styles;
-    this.stylingContainer.prepend(cssFile);
-  }
-  async setClientStylingByURL() {
-    try {
-      const response = await fetch(this.clientStylingUrl);
-      if (!response.ok) {
-        const err = await response.text();
-        throw new Error(err);
-      }
-      const styles = await response.text();
-      this.setStyles(styles);
+    static get states() {
+        return {
+            "page": {},
+            "pageSize": {},
+            "showMobileFilter": {},
+            "to": {},
+            "from": {},
+            "type": {},
+            "transactions": {},
+            "showLoader": {}
+        };
     }
-    catch (ex) {
-      console.error(`Failed to load client styles ${this.clientStylingUrl}`, ex);
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "page",
+                "methodName": "watchMultiple"
+            }, {
+                "propName": "type",
+                "methodName": "watchMultiple"
+            }, {
+                "propName": "session",
+                "methodName": "watchMultiple"
+            }, {
+                "propName": "userId",
+                "methodName": "watchMultiple"
+            }, {
+                "propName": "pageSize",
+                "methodName": "watchMultiple"
+            }, {
+                "propName": "showMobileFilter",
+                "methodName": "getComponentHeight"
+            }];
     }
-  }
-  static get is() { return "user-transaction-history"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["user-transaction-history.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["user-transaction-history.css"]
-  }; }
-  static get assetsDirs() { return ["../assets"]; }
-  static get properties() { return {
-    "endpoint": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | null",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "endpoint",
-      "reflect": true
-    },
-    "session": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "session",
-      "reflect": true
-    },
-    "language": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "language",
-      "reflect": true,
-      "defaultValue": "Localization.defaultLanguage"
-    },
-    "userId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "user-id",
-      "reflect": true
-    },
-    "translationUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "translation-url",
-      "reflect": true
-    },
-    "mobile": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "mobile",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "clientStyling": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | null",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "client-styling",
-      "reflect": true,
-      "defaultValue": "null"
-    },
-    "clientStylingUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | null",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "client-styling-url",
-      "reflect": true,
-      "defaultValue": "null"
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "getComponentHeight",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
     }
-  }; }
-  static get states() { return {
-    "page": {},
-    "pageSize": {},
-    "showMobileFilter": {},
-    "to": {},
-    "from": {},
-    "type": {},
-    "transactions": {},
-    "showLoader": {}
-  }; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "page",
-      "methodName": "watchMultiple"
-    }, {
-      "propName": "type",
-      "methodName": "watchMultiple"
-    }, {
-      "propName": "session",
-      "methodName": "watchMultiple"
-    }, {
-      "propName": "userId",
-      "methodName": "watchMultiple"
-    }, {
-      "propName": "pageSize",
-      "methodName": "watchMultiple"
-    }, {
-      "propName": "showMobileFilter",
-      "methodName": "getComponentHeight"
-    }]; }
-  static get listeners() { return [{
-      "name": "resize",
-      "method": "getComponentHeight",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }]; }
 }