@everymatrix/player-elevate-points-history 1.0.69

package/dist/cjs/player-elevate-card.cjs.entry.js

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c769d3e9.js');
+const playerElevateCardItems = require('./player-elevate-card-items-e7f7d092.js');
+
+const playerElevateCardCss = "@container (max-width: 270px) {\n  .Card .Inner {\n    flex-direction: column;\n  }\n  .Card .Inner .Content {\n    padding: 9px;\n  }\n  .Inner .Row .ExpirationPoints {\n    order: 1;\n  }\n}\n.Card .PlayerImg {\n  order: 0;\n}\n.Card .ExpirationPoints {\n  order: 3;\n}\n.Card .LevelInfo {\n  order: 2;\n}\n.Card .Inner .Row .PlayerImg {\n  flex-direction: column;\n}\n.Card .Inner .Row .PointsInfo {\n  width: 100%;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  max-height: 50%;\n}\n.Card .Inner .PlayerAvatar .Badge {\n  background-size: contain;\n  background-repeat: no-repeat;\n  position: absolute;\n  right: 5px;\n  bottom: -5px;\n  width: 40%;\n  height: 40%;\n  overflow: visible;\n}\n.Card .Inner .Row .ExpirationPoints {\n  text-align: left;\n  color: var(--emfe-w-color-red, red);\n}\n.Card .Inner .Row .Points {\n  text-wrap: nowrap;\n}\n.Card .Inner .LevelInfo .ElevateLevel {\n  flex-direction: column;\n}\n.Card .Inner .LevelInfo .ElevateLevel .LevelName {\n  width: calc(100% - 20px);\n  text-align: left;\n  font-size: 13px;\n  padding-left: 20px;\n  margin: 10px 0;\n}\n.Card .Inner .LevelInfo .ElevateLevel .ExpirationDate {\n  text-align: center;\n  font-size: smaller;\n}\n.Card .Inner .LevelInfo .ElevateLevel .ExpireTime {\n  margin-left: 5px;\n}";
+const PlayerElevateCardStyle0 = playerElevateCardCss;
+
+const PlayerElevateCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.endpoint = undefined;
+        this.theme = 'Dark';
+        this.session = undefined;
+        this.playerAvatarUrl = undefined;
+        this.language = 'en';
+        this.playerName = undefined;
+        this.dateFormat = 'yyyy-MM-dd';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.pointExpireString = undefined;
+        this.playerLevelFlag = 0;
+        this.playerElevateLevel = undefined;
+        this.elevateWalletTotal = undefined;
+    }
+    onSessionOrEndpointChange() {
+        this.paramProxy = Object.assign(Object.assign({}, this.paramProxy), { session: this.session, endpoint: this.endpoint, language: this.language });
+    }
+    playerElevateLeveLoadedHandler(event) {
+        if (!event.detail) {
+            return;
+        }
+        if (event.detail['elevateLevelWalletTotal']) {
+            this.elevateWalletTotal = event.detail['elevateLevelWalletTotal'];
+        }
+        if (event.detail['elevateLevel']) {
+            this.playerElevateLevel = event.detail['elevateLevel'];
+        }
+        if (event.detail['pointExpireString']) {
+            this.pointExpireString = event.detail.xpExpireString;
+        }
+        if (event.detail.calculatedLevelFlag) {
+            this.playerLevelFlag = event.detail.calculatedLevelFlag;
+        }
+    }
+    onRedeemClick() {
+        window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
+    }
+    componentWillLoad() {
+        this.paramProxy = {
+            endpoint: this.endpoint,
+            session: this.session,
+            language: this.language,
+            calculateLevelFlag: true,
+        };
+    }
+    render() {
+        const backgroundOuterImagePath = index.getAssetPath('../static/card-ground.svg');
+        const backgroundInnerImagePath = index.getAssetPath('../static/card-ground-over.svg');
+        return (index.h("div", { key: '278a328dd084ee73b2707b93a57bccae64a2c9c7', class: `ElevateCardWrapper ${this.theme}` }, index.h("div", { key: '68c885baf533447a7c77fd887bbec11e53768277', class: "Card Outer", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } }, index.h("general-styling-wrapper", { key: '4066253a70cdd5e712ca244a708e7c1600c83071', clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: playerElevateCardItems.TRANSLATIONS, translationUrl: this.translationUrl }), index.h("player-elevate-card-data", { key: '64cda2a267c752056b3c7e3134cc324fa96bc261', params: this.paramProxy }), index.h("div", { key: 'c63ae83b401a35f5a78acd83dc3d7296c25141d7', class: "OuterCover Inner", style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, this.playerElevateLevel && (index.h(index.Fragment, { key: 'ba16e5bb54259c17fd9e5aa0e3c03c2ec5d4263c' }, index.h("div", { key: 'fa1bf74f45e28318c95266cc42c54541bde92718', class: 'Content Row' }, index.h("div", { key: '7ede46f91bcc0d894b2b633627a4ca97d15fbe90', class: "PlayerImg" }, index.h(playerElevateCardItems.PlayerAvatar, { key: 'b6d0bac085e0178512b8a63ba8fccae7d4cc8399', playerAvatarUrl: this.playerAvatarUrl, loyaltyIconUrl: this.playerElevateLevel.presentation.asset }), index.h(playerElevateCardItems.PlayerPoints, { key: '88c445dbcd7dbe426a8de18beea02aecc03e26f3', loyaltyPoints: this.playerElevateLevel.loyaltyPoints, language: this.language })), this.pointExpireString && (index.h("div", { key: '4d985e486ecb74a6c916b28e619de83cb3d77ac1', class: 'PointsInfo ExpirationPoints' }, this.pointExpireString, " ")), index.h("div", { key: '34e051ee1ff79b825fca57db958e1e5684a0aca1', class: `LevelInfo Level${this.playerLevelFlag} ${this.playerElevateLevel.presentation.displayName}` }, index.h(playerElevateCardItems.PlayerNameDiv, { key: 'fa1b1f16e0b25c6adfba4c215e4ed377e05699b2', playerName: this.playerName }), index.h(playerElevateCardItems.PlayerElevateLoyaltyLevel, { key: '6d18b1422db202363ebcd56cc56946e0e071937b', hideInfo: true, level: this.playerElevateLevel.name, expireTime: this.playerElevateLevel.expireTime, dateFormat: this.dateFormat }), index.h(playerElevateCardItems.PlayerLoyaltyProcess, { key: '7dae355c4a5a9e28c70dced0ac061608f1753020' }), index.h(playerElevateCardItems.PlayerElevateCardRedeem, { key: '7e5f830b612c962a828c58f20a88dc97d315c910', onRedeemClick: this.onRedeemClick, language: this.language })))))))));
+    }
+    static get assetsDirs() { return ["../static"]; }
+    static get watchers() { return {
+        "session": ["onSessionOrEndpointChange"],
+        "endpoint": ["onSessionOrEndpointChange"],
+        "language": ["onSessionOrEndpointChange"]
+    }; }
+};
+PlayerElevateCard.style = PlayerElevateCardStyle0;
+
+exports.player_elevate_card = PlayerElevateCard;

package/dist/cjs/player-elevate-loyaltycard.cjs.entry.js

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c769d3e9.js');
+const playerElevateCardItems = require('./player-elevate-card-items-e7f7d092.js');
+
+const playerElevateLoyaltycardCss = ":host{display:block}@media screen and (min-width: 501px){.LoyaltyCard .Inner .LevelInfo .ElevateLevel{flex-wrap:nowrap}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate{padding-top:11px;margin-left:5px}}@media screen and (max-width: 500px){.LoyaltyCard .Inner .LevelInfo .ElevateLevel{flex-wrap:wrap}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate{padding-top:0px;margin-left:0px}}.LoyaltyCard .Inner .LevelProgress{margin-left:0px}.LoyaltyCard .Inner .Row .PointsInfo{width:100%}.LoyaltyCard .Inner .Row .PointsInfo.ExpirationPoints{text-align:left;color:var(--emfe-w-color-red-50, red)}.LoyaltyCard .Inner .PlayerAvatar .Avatar{display:none}.LoyaltyCard .Inner .PlayerAvatar .Badge{border-radius:50%;background-size:contain;width:100%;height:100%}.LoyaltyCard .Inner .LevelInfo .ElevateLevel{display:flex;flex:1;align-items:center}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate{position:relative;padding-left:5px}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .ExpirationDate .ExpireTime{margin-left:5px}.LoyaltyCard .Inner .LevelInfo .ElevateLevel .LevelName{padding-left:0;font-size:var(--emfe-w-elevate-fontsize-2xlarge, 21px);position:relative;width:auto;color:var(--emfe-w-elevate-color-levelname, #FFBD2B);font-weight:bold}.LoyaltyCard .NextLevelTip{text-align:right;font-size:11px;color:var(--emfe-w-color-black, #000);opacity:0.8;font-weight:bold}";
+const PlayerElevateLoyaltycardStyle0 = playerElevateLoyaltycardCss;
+
+const PlayerElevateLoyaltycard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.endpoint = undefined;
+        this.theme = 'Dark';
+        this.session = undefined;
+        this.playerAvatarUrl = undefined;
+        this.language = 'en';
+        this.playerName = undefined;
+        this.dateFormat = 'yyyy-MM-dd';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.pointExpireString = undefined;
+        this.playerElevateLevel = undefined;
+        this.elevateWalletTotal = undefined;
+    }
+    onSessionOrEndpointChange() {
+        this.paramProxy = Object.assign(Object.assign({}, this.paramProxy), { session: this.session, endpoint: this.endpoint, language: this.language });
+    }
+    playerElevateLeveLoadedHandler(event) {
+        if (!event.detail) {
+            return;
+        }
+        if (event.detail['elevateLevelWalletTotal']) {
+            this.elevateWalletTotal = event.detail['elevateLevelWalletTotal'];
+        }
+        if (event.detail['elevateLevel']) {
+            this.playerElevateLevel = event.detail['elevateLevel'];
+        }
+        if (event.detail['pointExpireString']) {
+            this.pointExpireString = event.detail.xpExpireString;
+        }
+    }
+    onRedeemClick() {
+        window.postMessage({ type: 'BEERedeemClicked' }, window.location.href);
+    }
+    componentWillLoad() {
+        this.paramProxy = {
+            endpoint: this.endpoint,
+            session: this.session,
+            language: this.language,
+        };
+    }
+    getNextLevelTips() {
+        var _a;
+        //need xx to reach Diamond
+        let nextLevel = (_a = this.playerElevateLevel) === null || _a === void 0 ? void 0 : _a.nextLevel;
+        if (this.playerElevateLevel && nextLevel) {
+            const pointsToReach = (nextLevel.entryPoints - this.playerElevateLevel.loyaltyPoints).toFixed(2);
+            return playerElevateCardItems.translateWithParams('tipsForNextLevel', {
+                pointsToReach,
+                levelName: nextLevel.name,
+            });
+        }
+        return '';
+    }
+    render() {
+        const backgroundOuterImagePath = index.getAssetPath('../static/card-ground.svg');
+        const backgroundInnerImagePath = index.getAssetPath('../static/card-ground-over.svg');
+        return (index.h("div", { key: 'd32d09786bf66e0abef026482e7ea04a53c051b1', class: `ElevateCardWrapper ${this.theme}` }, index.h("div", { key: 'dd2685eb840341b8823f24db9b72d0f6b7d340ae', class: "LoyaltyCard Outer", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } }, index.h("general-styling-wrapper", { key: '3e2a00d1697c89441a8254cb81c6dc72e5b9f534', clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: playerElevateCardItems.TRANSLATIONS, translationUrl: this.translationUrl }), index.h("player-elevate-card-data", { key: '56221e6d50df3b09c4269000637818009807c994', params: this.paramProxy }), index.h("div", { key: 'f11201024b280d6beb2ce1978ebfa7f2c7c59678', class: 'OuterCover Inner', style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, index.h("div", { key: '948a023268fad3945b5069686eb29312111042a2', class: 'Content Row' }, this.playerElevateLevel && (index.h(index.Fragment, { key: 'de7c52faa07386949ce1ca728968534922e9d880' }, index.h("div", { key: '7c1a0c6ea5dbe7ee2375813b3819efa61e283232', class: "PlayerImg" }, index.h(playerElevateCardItems.PlayerAvatar, { key: '70ae13ee168c6de7bf4618f6ab8761462c8812b2', onlyBadge: true, loyaltyIconUrl: this.playerElevateLevel.presentation.asset })), index.h("div", { key: 'c11f916999b52e43e04ee472b0f54691012409a5', class: `LevelInfo ${this.playerElevateLevel.name}` }, index.h(playerElevateCardItems.PlayerElevateLoyaltyLevel, { key: '6aa61d117b24f9abbee9c5d33e882d6f023f205b', hideInfo: true, level: this.playerElevateLevel.name, expireTime: this.playerElevateLevel.expireTime, dateFormat: this.dateFormat }), index.h(playerElevateCardItems.PlayerPoints, { key: '7cc02e34d4682c25095dbf6a3077b314410d8093', loyaltyPoints: this.playerElevateLevel.loyaltyPoints, language: this.language }), this.pointExpireString && (index.h("div", { key: '793e388644891e15b32e003ac8914e57e758e86b', class: 'PointsInfo ExpirationPoints' }, this.pointExpireString, " ")), index.h(playerElevateCardItems.PlayerLoyaltyProcess, { key: 'a4f6c3b9f9cd5e8c6a025c26154702f9495bbe5b' }), index.h("div", { key: 'd91eda0f963ba9ffd481237f4b16bd4ef638d25e', class: "NextLevelTip" }, this.getNextLevelTips())))))))));
+    }
+    static get watchers() { return {
+        "session": ["onSessionOrEndpointChange"],
+        "endpoint": ["onSessionOrEndpointChange"],
+        "language": ["onSessionOrEndpointChange"]
+    }; }
+};
+PlayerElevateLoyaltycard.style = PlayerElevateLoyaltycardStyle0;
+
+exports.player_elevate_loyaltycard = PlayerElevateLoyaltycard;

package/dist/cjs/player-elevate-points-history.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c769d3e9.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+/*
+ Stencil Client Patch Browser v4.20.0 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('player-elevate-points-history.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["bonus-pagination-limits_6.cjs",[[1,"player-elevate-points-history",{"playerAvatarUrl":[513,"player-avatar-url"],"session":[513],"endpoint":[513],"limit":[1538],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"displayPageNumbers":[1540,"display-page-numbers"],"pageLimitOptions":[1537,"page-limit-options"],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"locale":[32],"type":[32],"pageSetting":[32],"pointsWallets":[32]},[[0,"reloadPageByType","reloadPageByTypeHandler"]],{"type":["walletTypeChangedHandler"],"endpoint":["updateWallets"],"language":["updateWallets"],"session":["updateWallets"]}],[1,"player-elevate-pointcard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"cardTitle":[513,"card-title"],"buttonType":[513,"button-type"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32],"elevateSPTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"]}],[0,"bonus-pagination-limits",{"language":[513],"translationUrl":[513,"translation-url"],"pageLimitOptions":[513,"page-limit-options"],"limit":[1538],"pageLimits":[32]}],[0,"bonus-pagination-nav",{"total":[1538],"limit":[1538],"offset":[1538],"tableId":[1537,"table-id"],"language":[1537],"translationUrl":[513,"translation-url"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"displayPageNumbers":[1540,"display-page-numbers"],"displayRangeOfTotal":[1540,"display-range-of-total"],"endPageIndex":[32],"pagesArray":[32],"currentPage":[32]},[[8,"paginationReset","pageLimitChangedHandler"],[8,"pageLimitChanged","pageLimitChangedHandler"]]],[0,"player-elevate-card-data",{"params":[8],"playerElevateLevel":[32],"pointExpireString":[32]},[[9,"resize","handleWindowResizs"]],{"params":["onParamsChanged"]}],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}]]],["player-elevate-card.cjs",[[1,"player-elevate-card",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerLevelFlag":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"]}]]],["player-elevate-loyaltycard.cjs",[[1,"player-elevate-loyaltycard",{"endpoint":[513],"theme":[513],"session":[513],"playerAvatarUrl":[513,"player-avatar-url"],"language":[513],"playerName":[513,"player-name"],"dateFormat":[513,"date-format"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"pointExpireString":[32],"playerElevateLevel":[32],"elevateWalletTotal":[32]},[[0,"playerElevateLeveLoaded","playerElevateLeveLoadedHandler"]],{"session":["onSessionOrEndpointChange"],"endpoint":["onSessionOrEndpointChange"],"language":["onSessionOrEndpointChange"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,40 @@
+{
+  "entries": [
+    "components/player-elevate-points-history/player-elevate-points-history.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.20.0",
+    "typescriptVersion": "5.5.3"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/bonus-pagination-limits",
+      "tags": [
+        "bonus-pagination-limits"
+      ]
+    },
+    {
+      "name": "@everymatrix/bonus-pagination-nav",
+      "tags": [
+        "bonus-pagination-nav"
+      ]
+    },
+    {
+      "name": "@everymatrix/general-styling-wrapper",
+      "tags": [
+        "general-styling-wrapper"
+      ]
+    },
+    {
+      "name": "@everymatrix/player-elevate-card",
+      "tags": [
+        "player-elevate-card",
+        "player-elevate-card-data",
+        "player-elevate-loyaltycard",
+        "player-elevate-pointcard"
+      ]
+    }
+  ],
+  "bundles": []
+}

package/dist/collection/components/player-elevate-points-history/index.js

@@ -0,0 +1 @@
+export { PlayerElevatePointsHistory } from './player-elevate-points-history';

package/dist/collection/components/player-elevate-points-history/player-elevate-points-history.css

@@ -0,0 +1,182 @@
+:host {
+  display: block;
+}
+
+main {
+  max-width: 420px;
+}
+main player-elevate-pointcard {
+  width: 100%;
+  height: 220px;
+}
+
+.PlayerElevatePointsDetaisContainer {
+  background: #FFFFFF;
+  padding: 20px 10px 0;
+  margin-top: -100px;
+  position: relative;
+  min-height: 360px;
+}
+.PlayerElevatePointsDetaisContainer .ReloadMsg {
+  padding: 20px;
+}
+.PlayerElevatePointsDetaisContainer .ReloadMsg a.Reload {
+  cursor: pointer;
+}
+
+.TitleContainer {
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 25px;
+  letter-spacing: 0em;
+  text-align: left;
+  display: flex;
+  justify-content: space-between;
+}
+
+.TopBarContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.TopBarContainer .TitleContainer {
+  width: 100%;
+}
+.TopBarContainer .Title {
+  background: #303030;
+  padding: 5px 16px;
+  color: #FFFFFF;
+  box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.2509803922);
+  border-radius: 8px;
+  width: fit-content;
+  margin-left: 7px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.PaginationContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.MonthStat {
+  margin-top: 25px;
+  display: none;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 19px;
+  letter-spacing: 0px;
+  text-align: left;
+  color: #242424;
+}
+.MonthStat .Amount {
+  color: #53B65A;
+}
+
+.BackImageContainer {
+  width: 35px;
+  height: 35px;
+  flex: 0 0 35px;
+  border-radius: 6px;
+  text-align: center;
+  line-height: 35px;
+  box-shadow: 0px 4px 40px 0px rgba(138, 149, 158, 0.2);
+  display: none;
+}
+
+.Records {
+  margin-top: 16px;
+}
+
+.MenuImage, .BackImage {
+  cursor: pointer;
+  display: none;
+}
+
+.Row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.Row:nth-child(n+2) {
+  margin-top: 3px;
+}
+
+.Tabs.Row {
+  justify-content: space-around;
+  margin-top: 20px;
+}
+.Tabs.Row .TabText {
+  font-size: 16px;
+  margin: 10px 15px;
+  color: #9C9C9C;
+  cursor: pointer;
+}
+.Tabs.Row .TabText.active {
+  color: #242424;
+  font-weight: 600;
+}
+.Tabs.Row .TabBorderBottom {
+  height: 5px;
+  border-radius: 4px;
+  background: transparent;
+}
+.Tabs.Row .TabBorderBottom.active {
+  background: #242424;
+}
+
+.RecordContainer {
+  margin: 5px 0;
+  padding: 10px;
+  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1019607843);
+  border-radius: 5px;
+}
+.RecordContainer .Title {
+  color: #242424;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 19px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+.RecordContainer .Amount {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 19px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+.RecordContainer .Amount.Positive {
+  color: #53B65A;
+}
+.RecordContainer .Amount.Negative {
+  color: #B41E2D;
+}
+.RecordContainer .DateTime {
+  color: #9C9C9C;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 19px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+.RecordContainer .Tag {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 14px;
+  letter-spacing: 0em;
+  text-align: center;
+  color: #767171;
+  padding: 8px 30px;
+  border-radius: 8px;
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2509803922);
+}
+
+.NoContent {
+  font-size: 16px;
+  color: var(--emfe-w-color-black-100, #afafaf);
+  text-align: center;
+  height: 120px;
+  line-height: 120px;
+}