@everymatrix/pam-statement-history 0.0.1

package/dist/collection/components/pam-statement-history/pam-statement-history.js

@@ -0,0 +1,702 @@
+import { h, Fragment } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import { translate, getTranslations, TABS, FILTERS, DAYS, TRANSACTION_TYPES } from "../../utils/locale.utils";
+import "../../../../../../../libs/vaadin-facade/index";
+import { format, subMonths, startOfDay, endOfDay, parse } from "date-fns";
+export class PamStatementHistory {
+    constructor() {
+        this.calendarMaxDate = '';
+        this.fetchToken = 0;
+        this.fetchData = async () => {
+            if (!this.playerid || !this.session || !this.endpoint) {
+                return;
+            }
+            this.fetchToken++;
+            const currentToken = this.fetchToken;
+            this.isLoading = true;
+            this.errorMessage = null;
+            const { startDate, endDate } = this.getDateRange();
+            const headers = { 'X-SessionId': this.session };
+            const baseEndpoint = this.endpoint.replace(/\/$/, '');
+            const offset = (this.currentPage * this.itemsPerPage).toString();
+            const limit = this.itemsPerPage.toString();
+            try {
+                const fetchPromises = [];
+                let hasBankingNext = false;
+                let hasWageringNext = false;
+                if (['All', 'Payments'].includes(this.activeTab)) {
+                    const bankingUrl = new URL(`${baseEndpoint}/v1/player/${this.playerid}/transactions/banking`, window.location.origin);
+                    bankingUrl.searchParams.append('limit', limit);
+                    bankingUrl.searchParams.append('offset', offset);
+                    bankingUrl.searchParams.append('startDate', format(new Date(startDate), 'yyyy-MM-dd'));
+                    bankingUrl.searchParams.append('endDate', format(new Date(endDate), 'yyyy-MM-dd'));
+                    fetchPromises.push(fetch(bankingUrl.href, { method: 'GET', headers })
+                        .then(res => res.ok ? res.json() : null)
+                        .then(data => {
+                        var _a;
+                        hasBankingNext = !!((_a = data === null || data === void 0 ? void 0 : data.pagination) === null || _a === void 0 ? void 0 : _a.next);
+                        return this.normalizeBankingData(data);
+                    }));
+                }
+                if (['All', 'Casino', 'Sports', 'Bonus'].includes(this.activeTab)) {
+                    const wageringUrl = new URL(`${baseEndpoint}/v1/player/${this.playerid}/transactions/wagering`, window.location.origin);
+                    wageringUrl.searchParams.append('type', this.activeTab === 'All' ? 'All' : this.activeTab);
+                    wageringUrl.searchParams.append('limit', limit);
+                    wageringUrl.searchParams.append('offset', offset);
+                    wageringUrl.searchParams.append('startDate', startDate);
+                    wageringUrl.searchParams.append('endDate', endDate);
+                    fetchPromises.push(fetch(wageringUrl.href, { method: 'GET', headers })
+                        .then(res => res.ok ? res.json() : null)
+                        .then(data => {
+                        var _a;
+                        hasWageringNext = !!((_a = data === null || data === void 0 ? void 0 : data.pagination) === null || _a === void 0 ? void 0 : _a.next);
+                        return this.normalizeWageringData(data);
+                    }));
+                }
+                const results = await Promise.all(fetchPromises);
+                if (this.fetchToken !== currentToken) {
+                    return;
+                }
+                const combined = results.flat().filter(Boolean);
+                combined.sort((a, b) => b.timestamp - a.timestamp);
+                this.transactions = combined;
+                this.hasNextPage = hasBankingNext || hasWageringNext;
+                this.isLoading = false;
+                window.postMessage({ type: 'ScrollToTop' }, window.location.href);
+            }
+            catch (error) {
+                if (this.fetchToken !== currentToken) {
+                    return;
+                }
+                this.errorMessage = this.translate('errorLoading');
+                this.isLoading = false;
+            }
+        };
+        this.scrollToTop = () => {
+            if (this.statementContainer) {
+                setTimeout(() => {
+                    this.statementContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                }, 50);
+            }
+        };
+        this.goToPrevPage = () => {
+            if (this.currentPage > 0) {
+                this.currentPage--;
+                this.fetchData();
+                this.scrollToTop();
+            }
+        };
+        this.goToNextPage = () => {
+            if (this.hasNextPage) {
+                this.currentPage++;
+                this.fetchData();
+                this.scrollToTop();
+            }
+        };
+        this.formatDate = (dateParts) => {
+            if (!dateParts)
+                return '';
+            return format(new Date(dateParts.year, dateParts.month, dateParts.day), this.dateformat);
+        };
+        this.parseDate = (inputValue) => {
+            const separator = inputValue.includes('/') ? '/' : '-';
+            const parts = inputValue.split(separator);
+            let day = parts[0], month = parts[1], year = parts[2];
+            if (parts[0].length === 4) {
+                year = parts[0];
+                month = parts[1];
+                day = parts[2];
+            }
+            return { year: parseInt(year), month: parseInt(month) - 1, day: parseInt(day) };
+        };
+        this.handleStartDateChange = (event) => {
+            const input = event.target;
+            if (input.value)
+                this.customStartDate = input.value;
+        };
+        this.handleEndDateChange = (event) => {
+            const input = event.target;
+            if (input.value)
+                this.customEndDate = input.value;
+        };
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.session = '';
+        this.playerid = '';
+        this.endpoint = '';
+        this.statementenabled = '';
+        this.postMessage = false;
+        this.language = '';
+        this.quickFiltersActive = false;
+        this.clientStylingUrlContent = '';
+        this.dateformat = 'dd-MM-yyyy';
+        this.translationUrl = '';
+        this.activeTab = 'All';
+        this.activeFilter = '1D';
+        this.transactions = [];
+        this.isLoading = false;
+        this.errorMessage = null;
+        this.customStartDate = '';
+        this.customEndDate = '';
+        this.currentPage = 0;
+        this.hasNextPage = false;
+        this.itemsPerPage = 10;
+        this.copiedId = null;
+        this.isStatementEnabled = true;
+    }
+    translate(key) {
+        const translatedValue = translate(key, this.language);
+        if (!translatedValue && key) {
+            return key.charAt(0).toUpperCase() + key.slice(1);
+        }
+        return translatedValue ? translatedValue : key;
+    }
+    formatCurrencyAmount(value) {
+        if (value === null || value === undefined || isNaN(value))
+            return '0.00';
+        return value.toFixed(2);
+    }
+    isDateRangeExceeded() {
+        if (!this.customStartDate || !this.customEndDate)
+            return false;
+        const start = new Date(this.customStartDate).getTime();
+        const end = new Date(this.customEndDate).getTime();
+        const diffInMs = Math.abs(end - start);
+        const diffInDays = Math.ceil(diffInMs / (1000 * 60 * 60 * 24));
+        return diffInDays > 180;
+    }
+    async componentWillLoad() {
+        if (this.translationUrl) {
+            await getTranslations(this.translationUrl).catch(err => {
+                console.error('Failed to load translations', err);
+            });
+        }
+        const currentDate = new Date();
+        this.calendarMaxDate = format(currentDate, 'yyyy-MM-dd');
+        this.customEndDate = format(currentDate, 'yyyy-MM-dd');
+        this.customStartDate = format(subMonths(currentDate, 1), 'yyyy-MM-dd');
+    }
+    handleStatementEnabledChange(newValue) {
+        if (newValue === 'false') {
+            window.location.replace('/account/profile-info');
+        }
+        else if (newValue === 'true') {
+            this.isStatementEnabled = false;
+        }
+    }
+    handleTabChange() {
+        this.resetPaginationAndFetch();
+    }
+    handleFilterChange(newValue) {
+        if (newValue !== 'Custom') {
+            this.resetPaginationAndFetch();
+        }
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setClientStyling(this.statementContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setClientStylingURL(this.statementContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            setStreamStyling(this.statementContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    handleAuthDataChange() {
+        if (this.endpoint && this.playerid && this.session) {
+            this.fetchData();
+        }
+    }
+    componentDidLoad() {
+        if (this.statementenabled === 'false') {
+            window.location.replace('/account/profile-info');
+        }
+        else if (this.statementenabled === 'true') {
+            this.isStatementEnabled = false;
+        }
+        if (this.statementContainer) {
+            if (this.mbSource) {
+                setStreamStyling(this.statementContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            }
+            if (this.clientStyling) {
+                setClientStyling(this.statementContainer, this.clientStyling);
+            }
+            if (this.clientStylingUrl) {
+                setClientStylingURL(this.statementContainer, this.clientStylingUrl);
+            }
+        }
+    }
+    disconnectedCallback() {
+        if (this.stylingSubscription) {
+            this.stylingSubscription.unsubscribe();
+        }
+    }
+    resetPaginationAndFetch() {
+        this.currentPage = 0;
+        this.hasNextPage = false;
+        this.fetchData();
+    }
+    formatDateForUI(dateString) {
+        if (!dateString)
+            return '';
+        const date = new Date(dateString);
+        const dayName = this.translate(DAYS[date.getDay()].toLowerCase());
+        const day = String(date.getDate()).padStart(2, '0');
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const hours = String(date.getHours()).padStart(2, '0');
+        const minutes = String(date.getMinutes()).padStart(2, '0');
+        return `${dayName} ${day}/${month} - ${hours}:${minutes}`;
+    }
+    formattedToIso(dateString, dayEnd) {
+        const parsed = parse(dateString, 'yyyy-MM-dd', new Date());
+        const timed = dayEnd ? endOfDay(parsed) : startOfDay(parsed);
+        return format(timed, "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'");
+    }
+    getDateRange() {
+        if (this.activeFilter === 'Custom') {
+            return {
+                startDate: this.formattedToIso(this.customStartDate, false),
+                endDate: this.formattedToIso(this.customEndDate, true)
+            };
+        }
+        const end = new Date();
+        const start = new Date();
+        switch (this.activeFilter) {
+            case '1D':
+                start.setDate(start.getDate() - 1);
+                break;
+            case '1W':
+                start.setDate(start.getDate() - 7);
+                break;
+            case '1M':
+                start.setMonth(start.getMonth() - 1);
+                break;
+            case '3M':
+                start.setMonth(start.getMonth() - 3);
+                break;
+        }
+        return { startDate: start.toISOString(), endDate: end.toISOString() };
+    }
+    parseAmount(val) {
+        if (val === null || val === undefined)
+            return 0;
+        if (typeof val === 'object' && val.parsedValue !== undefined) {
+            return Number(val.parsedValue) || 0;
+        }
+        return Number(val) || 0;
+    }
+    normalizeBankingData(data) {
+        if (!data || !data.transactions)
+            return [];
+        return data.transactions.map((transaction) => {
+            var _a;
+            const isWithdraw = transaction.type === TRANSACTION_TYPES.WITHDRAWAL ||
+                transaction.type === TRANSACTION_TYPES.SYSTEM_DEBIT;
+            const amountVal = (_a = transaction.realAmount) !== null && _a !== void 0 ? _a : transaction.creditAmount;
+            let safeId = transaction.transIdStr;
+            if (!safeId && transaction.transId) {
+                safeId = typeof transaction.transId === 'object' ? (transaction.transId.source || transaction.transId.parsedValue) : transaction.transId;
+            }
+            const categoryKey = isWithdraw ? 'withdrawal' : 'deposit';
+            const statusKey = transaction.status ? String(transaction.status).toLowerCase() : '';
+            return {
+                id: safeId ? (String(safeId).startsWith('#') ? String(safeId) : `#${safeId}`) : this.translate('na'),
+                category: this.translate(categoryKey),
+                status: statusKey ? this.translate(statusKey) : null,
+                statusClass: statusKey,
+                amount: Math.abs(this.parseAmount(amountVal)),
+                currency: transaction.currencyCode || transaction.currency || '',
+                balance: null,
+                date: this.formatDateForUI(transaction.created),
+                isPositive: !isWithdraw,
+                timestamp: new Date(transaction.created).getTime()
+            };
+        });
+    }
+    normalizeWageringData(data) {
+        if (!data || !data.transactions)
+            return [];
+        return data.transactions.map((transaction) => {
+            var _a, _b;
+            const isCredit = transaction.transName === 'Credit' || transaction.transType === '2';
+            let categoryName = this.translate('casino');
+            if ((_a = transaction.gameModel) === null || _a === void 0 ? void 0 : _a.name) {
+                categoryName = `${this.translate('casino')} / ${transaction.gameModel.name}`;
+            }
+            else if (transaction.gameId) {
+                categoryName = `${this.translate('casino')} / ${transaction.gameId}`;
+            }
+            const statusKey = isCredit ? 'won' : (transaction.transName === 'Debit' || transaction.transType === '1' ? 'placed' : String(transaction.transName).toLowerCase());
+            const amountVal = (_b = transaction.realAmount) !== null && _b !== void 0 ? _b : transaction.totalAmount;
+            return {
+                id: transaction.transId,
+                category: categoryName,
+                status: this.translate(statusKey),
+                statusClass: isCredit ? 'won' : 'placed',
+                amount: Math.abs(this.parseAmount(amountVal)),
+                currency: transaction.currencyCode || transaction.currency || '',
+                balance: this.parseAmount(transaction.balance),
+                date: this.formatDateForUI(transaction.ins),
+                isPositive: isCredit,
+                timestamp: new Date(transaction.ins).getTime()
+            };
+        });
+    }
+    execCommandCopy(text) {
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        Object.assign(textArea.style, { position: 'fixed', opacity: '0' });
+        document.body.appendChild(textArea);
+        textArea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textArea);
+    }
+    async copyToClipboard(text) {
+        try {
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+                await navigator.clipboard.writeText(text);
+            }
+            else {
+                this.execCommandCopy(text);
+            }
+            this.copiedId = text;
+            setTimeout(() => {
+                if (this.copiedId === text)
+                    this.copiedId = null;
+            }, 2000);
+        }
+        catch (err) {
+            try {
+                this.execCommandCopy(text);
+                this.copiedId = text;
+                setTimeout(() => {
+                    if (this.copiedId === text)
+                        this.copiedId = null;
+                }, 2000);
+            }
+            catch (fallbackErr) {
+                console.error(this.translate('failedToCopyText'), fallbackErr);
+            }
+        }
+    }
+    setDateFormat(dom) {
+        if (dom && !dom.__i18nConfigured) {
+            dom.i18n = Object.assign(Object.assign({}, dom.i18n), { formatDate: this.formatDate, parseDate: this.parseDate });
+            dom.__i18nConfigured = true;
+        }
+    }
+    isSubmitEnabled() {
+        if (!this.customStartDate || !this.customEndDate)
+            return false;
+        const start = new Date(this.customStartDate).getTime();
+        const end = new Date(this.customEndDate).getTime();
+        if (start > end)
+            return false;
+        return Math.ceil(Math.abs(end - start) / (1000 * 60 * 60 * 24)) <= 180;
+    }
+    render() {
+        if (this.isStatementEnabled) {
+            return (h("div", { class: "verify-access-loading" }, h("div", { class: "loading-text" }, this.translate('loading'))));
+        }
+        return (h("div", { ref: (el) => (this.statementContainer = el), class: "statement-wrapper" }, h("div", { class: "header" }, h("h2", null, this.translate('transactionHistory'))), h("div", { class: "tabs-container desktop-tabs" }, TABS.map(tab => (h("button", { class: `tab-btn ${this.activeTab === tab ? 'active' : ''}`, onClick: () => this.activeTab = tab }, this.translate(tab.toLowerCase()))))), h("div", { class: "mobile-tabs-select" }, h("select", Object.assign({ onChange: (e) => this.activeTab = e.target.value }, { value: this.activeTab }), TABS.map(tab => h("option", { value: tab }, this.translate(tab.toLowerCase()))))), h("div", { class: "card-container" }, h("div", { class: "filters-container" }, FILTERS.map(filter => (h("button", { class: `filter-btn ${this.activeFilter === filter ? 'active' : ''}`, onClick: () => this.activeFilter = filter }, this.translate(filter.toLowerCase()))))), this.activeFilter === 'Custom' && (h("div", { class: "custom-date-wrapper" }, h("div", { class: "calendar-container" }, h("div", { class: "calendar-field" }, h("label", null, this.translate('from')), h("vaadin-date-picker", { value: this.customStartDate, max: this.calendarMaxDate, onChange: this.handleStartDateChange, ref: (el) => this.setDateFormat(el), class: "VaadinDatePicker" })), h("div", { class: "calendar-field" }, h("label", null, this.translate('to')), h("vaadin-date-picker", { value: this.customEndDate, min: this.customStartDate, max: this.calendarMaxDate, onChange: this.handleEndDateChange, ref: (el) => this.setDateFormat(el), class: "VaadinDatePicker" }))), h("button", { class: "apply-date-btn", disabled: !this.isSubmitEnabled() || this.isLoading, onClick: () => this.resetPaginationAndFetch() }, this.translate('apply')), this.isDateRangeExceeded() && (h("div", { class: "date-limit-warning" }, this.translate('maxRange'))))), h("div", { class: "transactions-list" }, this.isLoading && (h("div", { class: "empty-state" }, this.translate('loading'))), !this.isLoading && this.errorMessage && (h("div", { class: "empty-state error" }, this.errorMessage)), !this.isLoading && !this.errorMessage && this.transactions.length === 0 && (h("div", { class: "empty-state" }, this.translate('noData'))), !this.isLoading && !this.errorMessage && this.transactions.length > 0 && (this.transactions.map(transaction => (h("div", { class: "transaction-item" }, h("div", { class: "row top-row" }, h("div", { class: "category-group" }, h("span", { class: "category" }, transaction.category), transaction.status && h("span", { class: `status-badge ${transaction.statusClass}` }, transaction.status)), h("span", { class: `amount ${transaction.isPositive ? 'positive' : 'negative'}` }, transaction.isPositive ? '+' : '-', " ", transaction.currency, " ", this.formatCurrencyAmount(transaction.amount))), h("div", { class: "row middle-row" }, h("span", { class: "transaction-id" }, transaction.id.startsWith('#') ? transaction.id : `#${transaction.id}`), h("div", { class: "copy-action-wrapper", onClick: () => this.copyToClipboard(transaction.id) }, h("svg", { class: "copy-icon", viewBox: "0 0 24 24", width: "25", height: "25" }, h("rect", { x: "9", y: "9", width: "10", height: "10", rx: "1", ry: "1" }), h("rect", { x: "5", y: "5", width: "10", height: "10", rx: "1", ry: "1" })), this.copiedId === transaction.id && h("span", { class: "copied-tooltip" }, this.translate('copied')))), h("div", { class: "row bottom-row" }, h("span", { class: "date" }, transaction.date), h("span", { class: "balance" }, transaction.balance !== null && transaction.balance !== undefined && !isNaN(transaction.balance) && (h(Fragment, null, this.translate('balance'), " ", h("strong", null, transaction.currency, " ", this.formatCurrencyAmount(transaction.balance))))))))))), !this.isLoading && this.transactions.length > 0 && (this.currentPage > 0 || this.hasNextPage) && (h("div", { class: "pagination-container" }, h("button", { class: "pagination-btn prev-btn", disabled: this.currentPage === 0, onClick: this.goToPrevPage }, this.translate('prev')), h("span", { class: "page-indicator" }, this.translate('page'), " ", this.currentPage + 1), h("button", { class: "pagination-btn next-btn", disabled: !this.hasNextPage, onClick: this.goToNextPage }, this.translate('next')))))));
+    }
+    static get is() { return "pam-statement-history"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pam-statement-history.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pam-statement-history.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "mb-source",
+                "reflect": true
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-styling",
+                "reflect": true
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-styling-url",
+                "reflect": true
+            },
+            "session": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "session",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "playerid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "playerid",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "endpoint",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "statementenabled": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "statementenabled",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "postMessage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "post-message",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "quickFiltersActive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "quick-filters-active",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "clientStylingUrlContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-styling-url-content",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "dateformat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "dateformat",
+                "reflect": false,
+                "defaultValue": "'dd-MM-yyyy'"
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeTab": {},
+            "activeFilter": {},
+            "transactions": {},
+            "isLoading": {},
+            "errorMessage": {},
+            "customStartDate": {},
+            "customEndDate": {},
+            "currentPage": {},
+            "hasNextPage": {},
+            "itemsPerPage": {},
+            "copiedId": {},
+            "isStatementEnabled": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "statementenabled",
+                "methodName": "handleStatementEnabledChange"
+            }, {
+                "propName": "activeTab",
+                "methodName": "handleTabChange"
+            }, {
+                "propName": "activeFilter",
+                "methodName": "handleFilterChange"
+            }, {
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }, {
+                "propName": "session",
+                "methodName": "handleAuthDataChange"
+            }, {
+                "propName": "playerid",
+                "methodName": "handleAuthDataChange"
+            }, {
+                "propName": "endpoint",
+                "methodName": "handleAuthDataChange"
+            }];
+    }
+}