@everymatrix/pam-account-balance-modal 0.1.3 → 0.2.1

package/dist/collection/components/pam-account-balance-modal/pam-account-balance-modal.js

@@ -1,27 +1,88 @@
 import { h } from "@stencil/core";
 import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
 import { EventSourcePolyfill } from "event-source-polyfill";
-import * as currencyFormatter from "currency.js";
 import { translate } from "../../utils/locale.utils";
 import "../../../../../ui-skeleton/dist/types/index";
 export class PamAccountBalanceModal {
     constructor() {
         this.totalCalculationModes = ['totalCashAmount', 'totalRealAmount'];
-        this.setLocaleIdentifier = () => {
-            if (this.customLocaleIdentifier.includes(this.language)) {
-                return this.customLocaleIdentifier;
-            }
-        };
+        /**
+         * Returns the formatted balance
+         * @param balance -> the balance value to be formatted
+         */
         this.formatBalance = (balance) => {
-            if (this.customLocaleIdentifier) {
-                return new Intl.NumberFormat(this.setLocaleIdentifier(), { useGrouping: true }).format(balance);
+            if (this.customDisplayFormat) {
+                return this.formatFromCustom(balance);
             }
-            if (this.currencySeparator && this.currencyDecimal) {
-                // @ts-ignore
-                return currencyFormatter.default(balance, { separator: this.currencySeparator, decimal: this.currencyDecimal, symbol: '', precision: parseInt(this.currencyPrecision || '2', 10) }).format();
+            const locales = this.currencyLocale || this.language;
+            const formatOptions = {
+                style: 'currency',
+                currency: this.currency,
+                useGrouping: true,
+                currencyDisplay: this.currencyDisplay || 'code',
+                maximumFractionDigits: this.maximumFractionDigits === '' || isNaN(Number(this.maximumFractionDigits)) ? 2 : Number(this.maximumFractionDigits),
+                minimumFractionDigits: this.minimumFractionDigits === '' || isNaN(Number(this.minimumFractionDigits)) ? 0 : Number(this.minimumFractionDigits),
+            };
+            return new Intl.NumberFormat(locales, formatOptions).format(balance);
+        };
+        /**
+         * Parses customdisplayformat and returns the formatted balance accordingly.
+         * Example:
+         *    if customdisplayformat = '{amount|,.1} {currency}', currency = 'EUR'
+         *    then formatFromCustom(123123.199) = '123,123.1 EUR'
+         * @param balance
+         */
+        this.formatFromCustom = (balance) => {
+            const tokens = [];
+            let acc = '';
+            for (const char of this.customDisplayFormat) {
+                switch (char) {
+                    default:
+                        acc += char;
+                        break;
+                    case '{':
+                        acc && tokens.push(acc);
+                        acc = '';
+                        break;
+                    case '}':
+                        const [variable, args] = acc.split('|');
+                        acc = '';
+                        if (variable.toLowerCase() === 'currency') {
+                            acc = this.currency;
+                        }
+                        else if (variable.toLowerCase() === 'amount') {
+                            // defaults
+                            let sepThousands = ',';
+                            let sepDecimal = '.';
+                            let decimals = 2;
+                            // override defaults if args provided (' ' is considered empty so default is used)
+                            if (args) {
+                                args[0] !== ' ' && (sepThousands = args[0]);
+                                args[1] !== ' ' && (sepDecimal = args[1]);
+                                args[2] !== ' ' && !isNaN(Number(args[2])) && (decimals = Number(args[2]));
+                            }
+                            // separate int and fractional part, also round down to desired precision
+                            let [integerPart, fractionalPart] = String(Math.floor(balance * 10 ** decimals) / 10 ** decimals).split('.');
+                            // format int part by adding thousands separators
+                            acc += integerPart[0];
+                            for (let i = 1; i < integerPart.length; ++i) {
+                                if ((integerPart.length - i) % 3 === 0) {
+                                    acc += (sepThousands + integerPart[i]);
+                                }
+                                else {
+                                    acc += integerPart[i];
+                                }
+                            }
+                            // add fractional part if it exists
+                            fractionalPart && (acc += (sepDecimal + fractionalPart));
+                        }
+                        acc && tokens.push(acc);
+                        acc = '';
+                        break;
+                }
             }
-            // @ts-ignore
-            return currencyFormatter.default(balance, { separator: '.', decimal: ',', symbol: '', precision: parseInt(this.currencyPrecision || '2', 10) }).format();
+            tokens.push(acc);
+            return tokens.join('');
         };
         this.getBalances = () => {
             this.isLoading = true;
@@ -189,20 +250,21 @@ export class PamAccountBalanceModal {
                     break;
             }
         };
-        this.userId = undefined;
-        this.session = undefined;
-        this.endpoint = undefined;
-        this.customLocaleIdentifier = undefined;
-        this.displayBalanceOption = undefined;
-        this.totalCalculationMode = undefined;
-        this.currencySeparator = undefined;
-        this.currencyDecimal = undefined;
-        this.currencyPrecision = undefined;
-        this.mbSource = undefined;
-        this.clientStyling = undefined;
-        this.clientStylingUrl = undefined;
-        this.translationUrl = undefined;
+        this.userId = '';
+        this.session = '';
+        this.endpoint = '';
+        this.mbSource = '';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
         this.language = 'en';
+        this.displayBalanceOption = 'All';
+        this.totalCalculationMode = 'totalCashAmount';
+        this.currencyLocale = 'en';
+        this.currencyDisplay = 'code';
+        this.maximumFractionDigits = '2';
+        this.minimumFractionDigits = '0';
+        this.customDisplayFormat = '';
         this.isLoading = true;
         this.isModalDisplayed = false;
         this.isSplitWallet = false;
@@ -343,10 +405,10 @@ export class PamAccountBalanceModal {
         }
     }
     render() {
-        const balanceButton = (h("button", { class: "BalanceValue", onClick: () => this.toggleModal('open') }, h("p", null, this.balances['Total'].length > 0 ? this.formatBalance(this.balances['Total'][0].amount) : '0', " ", this.currency), h("span", { class: " {isModalDisplayed ? 'TriangleActive' : 'TriangleInactive'}" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "6.835", viewBox: "0 0 14 6.835" }, h("path", { id: "arrow", d: "M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z", transform: "translate(-274.511 -441.088)", fill: "#d1d1d1" })))));
+        const balanceButton = (h("button", { class: "BalanceValue", onClick: () => this.toggleModal('open') }, h("p", null, this.balances['Total'].length > 0 ? this.formatBalance(this.balances['Total'][0].amount) : '0'), h("span", { class: " {isModalDisplayed ? 'TriangleActive' : 'TriangleInactive'}" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "6.835", viewBox: "0 0 14 6.835" }, h("path", { id: "arrow", d: "M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z", transform: "translate(-274.511 -441.088)", fill: "#d1d1d1" })))));
         const balanceModal = (h("div", { class: this.isModalDisplayed ? 'BalanceModalWrapper Open' : 'BalanceModalWrapper' }, h("button", { class: "BalanceModalClose", onClick: () => this.toggleModal('close') }), h("div", { class: "BalanceModal" }, h("div", { class: "ModalContent" }, h("div", { class: "BalanceModalHeader" }, h("p", { class: "BalanceModalTitle" }, translate('Title', this.language))), h("div", { class: "BalanceModalBody" }, Object.keys(this.balances).map((key) => {
             return (h("div", { class: "BalanceModalRowBoth" }, this.balances[key].map((balance) => {
-                return (h("div", { class: "BalanceModalRowLine" }, h("p", { class: "BalanceModalText" }, translate(key, this.language), " ", balance.productType ? translate(balance.productType, this.language) : ''), h("p", { class: "BalanceModalValue" }, h("span", { class: "BalanceModalAmount" }, balance.amount ? this.formatBalance(balance.amount) : '0'), h("span", { class: "BalanceModalCurrency" }, " " + this.currency))));
+                return (h("div", { class: "BalanceModalRowLine" }, h("p", { class: "BalanceModalText" }, translate(key, this.language), " ", balance.productType ? translate(balance.productType, this.language) : ''), h("p", { class: "BalanceModalValue" }, h("span", { class: "BalanceModalAmount" }, balance.amount ? this.formatBalance(balance.amount) : '0'))));
             })));
         })), h("div", { class: "BalanceModalFooter" }, h("button", { class: "BalanceModalAction", onClick: () => this.balanceModalOpenDeposit() }, translate('DepositButton', this.language)))))));
         const skeleton = (h("div", { class: "LoadingSkeleton" }, h("ui-skeleton", { structure: "title", height: "20px", width: "auto" })));
@@ -383,7 +445,8 @@ export class PamAccountBalanceModal {
                     "text": ""
                 },
                 "attribute": "user-id",
-                "reflect": true
+                "reflect": true,
+                "defaultValue": "''"
             },
             "session": {
                 "type": "string",
@@ -400,7 +463,8 @@ export class PamAccountBalanceModal {
                     "text": ""
                 },
                 "attribute": "session",
-                "reflect": true
+                "reflect": true,
+                "defaultValue": "''"
             },
             "endpoint": {
                 "type": "string",
@@ -417,9 +481,10 @@ export class PamAccountBalanceModal {
                     "text": ""
                 },
                 "attribute": "endpoint",
-                "reflect": true
+                "reflect": true,
+                "defaultValue": "''"
             },
-            "customLocaleIdentifier": {
+            "mbSource": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -433,10 +498,11 @@ export class PamAccountBalanceModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "custom-locale-identifier",
-                "reflect": true
+                "attribute": "mb-source",
+                "reflect": true,
+                "defaultValue": "''"
             },
-            "displayBalanceOption": {
+            "clientStyling": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -450,10 +516,11 @@ export class PamAccountBalanceModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "display-balance-option",
-                "reflect": true
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
             },
-            "totalCalculationMode": {
+            "clientStylingUrl": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -467,10 +534,11 @@ export class PamAccountBalanceModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "total-calculation-mode",
-                "reflect": true
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "''"
             },
-            "currencySeparator": {
+            "translationUrl": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -484,10 +552,11 @@ export class PamAccountBalanceModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "currency-separator",
-                "reflect": true
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
             },
-            "currencyDecimal": {
+            "language": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -501,10 +570,11 @@ export class PamAccountBalanceModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "currency-decimal",
-                "reflect": true
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
             },
-            "currencyPrecision": {
+            "displayBalanceOption": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -518,10 +588,11 @@ export class PamAccountBalanceModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "currency-precision",
-                "reflect": true
+                "attribute": "display-balance-option",
+                "reflect": true,
+                "defaultValue": "'All'"
             },
-            "mbSource": {
+            "totalCalculationMode": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -535,10 +606,11 @@ export class PamAccountBalanceModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "mb-source",
-                "reflect": true
+                "attribute": "total-calculation-mode",
+                "reflect": true,
+                "defaultValue": "'totalCashAmount'"
             },
-            "clientStyling": {
+            "currencyLocale": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -550,12 +622,13 @@ export class PamAccountBalanceModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "These props are used only by Intl.NumberFormat and have no effect if customdisplayformat is passed, as it will be used instead"
                 },
-                "attribute": "client-styling",
-                "reflect": true
+                "attribute": "currency-locale",
+                "reflect": true,
+                "defaultValue": "'en'"
             },
-            "clientStylingUrl": {
+            "currencyDisplay": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -569,10 +642,11 @@ export class PamAccountBalanceModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "client-styling-url",
-                "reflect": true
+                "attribute": "currency-display",
+                "reflect": true,
+                "defaultValue": "'code'"
             },
-            "translationUrl": {
+            "maximumFractionDigits": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -586,10 +660,11 @@ export class PamAccountBalanceModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "translation-url",
-                "reflect": true
+                "attribute": "maximum-fraction-digits",
+                "reflect": true,
+                "defaultValue": "'2'"
             },
-            "language": {
+            "minimumFractionDigits": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -603,9 +678,27 @@ export class PamAccountBalanceModal {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "language",
+                "attribute": "minimum-fraction-digits",
                 "reflect": true,
-                "defaultValue": "'en'"
+                "defaultValue": "'0'"
+            },
+            "customDisplayFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The {} blocks are replaced by their respective values. Everything else in the string is left as it is.\nThe \"amount\" block also accepts arguments that must be placed after \"|\". \nFirst char is the Thousands Separator, second is the Decimal Separator, third is Decimal Precision.\nAn empty value (' ') indicates that the default values should be used for that specific arg."
+                },
+                "attribute": "custom-display-format",
+                "reflect": true,
+                "defaultValue": "''"
             }
         };
     }

package/dist/collection/utils/locale.utils.js

@@ -9,7 +9,6 @@ export const TRANSLATIONS = {
         "Casino": "Casino",
         "Sports": "Sports",
         "DepositButton": "Deposit",
-        "Loading": "Loading ..."
     },
     "zh-hk": {
         "Title": "您的結餘",
@@ -20,7 +19,6 @@ export const TRANSLATIONS = {
         "Casino": "賭場",
         "Sports": "體育",
         "DepositButton": "存款",
-        "Loading": "載入中 ..."
     },
     "de": {
         "Title": "Ihr Guthaben",
@@ -31,7 +29,6 @@ export const TRANSLATIONS = {
         "Casino": "Casino",
         "Sports": "Sport",
         "DepositButton": "Einzahlen",
-        "Loading": "Wird geladen ..."
     },
     "it": {
         "Title": "Il tuo saldo",
@@ -42,7 +39,6 @@ export const TRANSLATIONS = {
         "Casino": "Casinò",
         "Sports": "Sport",
         "DepositButton": "Deposita",
-        "Loading": "Caricamento ..."
     },
     "fr": {
         "Title": "Votre solde",
@@ -53,7 +49,6 @@ export const TRANSLATIONS = {
         "Casino": "Casino",
         "Sports": "Sports",
         "DepositButton": "Dépôt",
-        "Loading": "Chargement ..."
     },
     "es": {
         "Title": "Tu saldo",
@@ -64,7 +59,6 @@ export const TRANSLATIONS = {
         "Casino": "Casino",
         "Sports": "Deportes",
         "DepositButton": "Depósito",
-        "Loading": "Cargando ..."
     },
     "tr": {
         "Title": "Bakiyeniz",
@@ -75,7 +69,6 @@ export const TRANSLATIONS = {
         "Casino": "Kumarhane",
         "Sports": "Spor",
         "DepositButton": "Yatır",
-        "Loading": "Yükleniyor ..."
     },
     "ru": {
         "Title": "Ваш баланс",
@@ -86,7 +79,6 @@ export const TRANSLATIONS = {
         "Casino": "Казино",
         "Sports": "Спорт",
         "DepositButton": "Депозит",
-        "Loading": "Загружается ..."
     },
     "ro": {
         "Title": "Soldul tău",
@@ -97,7 +89,6 @@ export const TRANSLATIONS = {
         "Casino": "Cazinou",
         "Sports": "Sporturi",
         "DepositButton": "Depozit",
-        "Loading": "Se încarcă ..."
     },
     "hr": {
         "Title": "Vaš saldo",
@@ -108,7 +99,6 @@ export const TRANSLATIONS = {
         "Casino": "Casino",
         "Sports": "Sportovi",
         "DepositButton": "Depozit",
-        "Loading": "Učitavanje ..."
     },
     "hu": {
         "Title": "Az egyenleged",
@@ -119,7 +109,6 @@ export const TRANSLATIONS = {
         "Casino": "Kaszinó",
         "Sports": "Sport",
         "DepositButton": "Befizetés",
-        "Loading": "Betöltés ..."
     },
     "pl": {
         "Title": "Twoje saldo",
@@ -130,7 +119,6 @@ export const TRANSLATIONS = {
         "Casino": "Kasyno",
         "Sports": "Sport",
         "DepositButton": "Wpłać",
-        "Loading": "Ładowanie ..."
     },
     "pt": {
         "Title": "Seu Saldo",
@@ -141,7 +129,6 @@ export const TRANSLATIONS = {
         "Casino": "Cassino",
         "Sports": "Esportes",
         "DepositButton": "Depositar",
-        "Loading": "Carregando ..."
     },
     "sl": {
         "Title": "Vaš saldo",
@@ -152,7 +139,6 @@ export const TRANSLATIONS = {
         "Casino": "Kasino",
         "Sports": "Šport",
         "DepositButton": "Depozit",
-        "Loading": "Nalaganje ..."
     },
     "sr": {
         "Title": "Vaš saldo",
@@ -163,7 +149,6 @@ export const TRANSLATIONS = {
         "Casino": "Kasino",
         "Sports": "Sport",
         "DepositButton": "Depozit",
-        "Loading": "Učitavanje ..."
     },
     "pt-br": {
         "Title": "Seu Saldo",
@@ -174,7 +159,6 @@ export const TRANSLATIONS = {
         "Casino": "Cassino",
         "Sports": "Esportes",
         "DepositButton": "Depositar",
-        "Loading": "Carregando ..."
     },
     "es-mx": {
         "Title": "Tu saldo",
@@ -185,7 +169,6 @@ export const TRANSLATIONS = {
         "Casino": "Casino",
         "Sports": "Deportes",
         "DepositButton": "Depósito",
-        "Loading": "Cargando ..."
     },
     "en-us": {
         "Title": "Your Balance",
@@ -196,7 +179,6 @@ export const TRANSLATIONS = {
         "Casino": "Casino",
         "Sports": "Sports",
         "DepositButton": "Deposit",
-        "Loading": "Loading ..."
     }
 };
 export const getTranslations = (url) => {
@@ -206,6 +188,7 @@ export const getTranslations = (url) => {
             .then((res) => res.json())
             .then((data) => {
             Object.keys(data).forEach((item) => {
+                TRANSLATIONS[item] = TRANSLATIONS[item] || {};
                 for (let key in data[item]) {
                     TRANSLATIONS[item][key] = data[item][key];
                 }

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { P as PamAccountBalanceModal } from './pam-account-balance-modal-8ebcc863.js';
+export { P as PamAccountBalanceModal } from './pam-account-balance-modal-d4c15371.js';
 import './index-ee727666.js';

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["pam-account-balance-modal_2",[[1,"pam-account-balance-modal",{"userId":[513,"user-id"],"session":[513],"endpoint":[513],"customLocaleIdentifier":[513,"custom-locale-identifier"],"displayBalanceOption":[513,"display-balance-option"],"totalCalculationMode":[513,"total-calculation-mode"],"currencySeparator":[513,"currency-separator"],"currencyDecimal":[513,"currency-decimal"],"currencyPrecision":[513,"currency-precision"],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"isLoading":[32],"isModalDisplayed":[32],"isSplitWallet":[32],"currentStream":[32],"currency":[32],"updateRealAmountState":[32],"balances":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
+  return bootstrapLazy([["pam-account-balance-modal_2",[[1,"pam-account-balance-modal",{"userId":[513,"user-id"],"session":[513],"endpoint":[513],"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"displayBalanceOption":[513,"display-balance-option"],"totalCalculationMode":[513,"total-calculation-mode"],"currencyLocale":[513,"currency-locale"],"currencyDisplay":[513,"currency-display"],"maximumFractionDigits":[513,"maximum-fraction-digits"],"minimumFractionDigits":[513,"minimum-fraction-digits"],"customDisplayFormat":[513,"custom-display-format"],"isLoading":[32],"isModalDisplayed":[32],"isSplitWallet":[32],"currentStream":[32],"currency":[32],"updateRealAmountState":[32],"balances":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
 };
 
 export { defineCustomElements };