@everymatrix/gamification-dropdown 0.1.0

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-1c31b1d6.js');
+const playerElevateCardItems = require('./player-elevate-card-items-77750a62.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-pointcard.cjs.entry.js

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1c31b1d6.js');
+const playerElevateCardItems = require('./player-elevate-card-items-77750a62.js');
+
+const playerElevatePointcardCss = ":host{display:block}.PointsCard .Inner .Row .ExpirationPoints{text-align:left}.PointsCard .Inner .PlayerAvatar .Avatar{display:none}.PointsCard .Inner .PlayerAvatar .Badge{border-radius:50%;background-size:contain;width:100%;height:100%;position:inherit}.PointsCard .Inner .PointsTxt{display:flex;flex-direction:row;justify-content:space-between}.PointsCard .Inner .DetailButton{background:linear-gradient(283.85deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.47%), linear-gradient(117.99deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 33.89%), linear-gradient(268.18deg, rgba(255, 255, 255, 0.6) -17.36%, rgba(239, 239, 239, 0) 15.78%), linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));border-radius:5px;box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.25);border:2px solid;font-size:11px;width:108px;padding:4px;cursor:pointer;margin-top:5px;height:16px;min-width:45px;text-align:center}.PointsCard .Inner .DetailButton span{color:var(--emfe-w-color-gray-150, #6D6D6D)}.PointsCard .Inner .DetailButton span{display:inline-block;vertical-align:middle}.PointsCard .Inner .DetailButton:hover span{color:var(--emfe-w-color-gray-150, #6D6D6D)}.PointsCard .Inner .LevelInfo{gap:15px;width:70%}.PointsCard .Inner .LevelInfo .PointsTxt{font-size:15px}.PointsCard .Inner .LevelInfo .PointsTxt.Label{display:none}.PointsCard .Inner .LevelInfo .PointsTxt.SPPoints{padding-top:15px}.PointsCard .Inner .LevelInfo .PointsTxt .TC{font-size:x-small;color:var(--emw--color-gray-300, #58586B);display:flex;align-content:center;height:100%;flex-wrap:wrap;text-decoration:underline;cursor:pointer;display:none}";
+const PlayerElevatePointcardStyle0 = playerElevatePointcardCss;
+
+const PlayerElevatePointcard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isPointDetailCard = this.buttonType === 'earningRule';
+        this.endpoint = undefined;
+        this.theme = 'Dark';
+        this.session = undefined;
+        this.playerAvatarUrl = undefined;
+        this.language = 'en';
+        this.playerName = undefined;
+        this.cardTitle = undefined;
+        this.buttonType = 'earningRule';
+        this.dateFormat = 'yyyy-MM-dd';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.pointExpireString = undefined;
+        this.playerElevateLevel = undefined;
+        this.elevateWalletTotal = undefined;
+        this.elevateSPTotal = 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'];
+            this.elevateSPTotal = event.detail['loyaltyWalletTotal'];
+        }
+        if (event.detail['elevateLevel']) {
+            this.playerElevateLevel = event.detail['elevateLevel'];
+        }
+        if (event.detail['pointExpireString']) {
+            this.pointExpireString = event.detail.pointExpireString;
+        }
+    }
+    onDetailsClick() {
+        window.postMessage({ type: this.isPointDetailCard ? 'BEEPointRulesClicked' : 'BEEDetailsClicked',
+            path: this.isPointDetailCard ? 'player-elevate-level' : 'player-elevate-point-details' }, window.location.href);
+    }
+    componentWillLoad() {
+        this.paramProxy = {
+            endpoint: this.endpoint,
+            session: this.session,
+            language: this.language,
+        };
+    }
+    render() {
+        const backgroundOuterImagePath = index.getAssetPath('../static/card-ground.svg');
+        const backgroundInnerImagePath = index.getAssetPath('../static/card-ground-over.svg');
+        return (index.h("div", { key: '13461fc9cf8b777337a539c15da4bb2781f5a837', class: `ElevateCardWrapper ${this.theme}` }, index.h("div", { key: '526e72c0ada871f74ba4a07f0a125bc25840c09c', class: "PointsCard Outer ", style: { 'backgroundImage': `url(${backgroundOuterImagePath}` } }, index.h("general-styling-wrapper", { key: '95e358ceb8fa3c247660f7ca15a4684b132874be', clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, targetTranslations: playerElevateCardItems.TRANSLATIONS, translationUrl: this.translationUrl }), index.h("player-elevate-card-data", { key: '24c765d743446ac597a9dcc9cd22515e7e39e6db', params: this.paramProxy }), index.h("div", { key: '309db4bbfc244a7fb97827774d9d4383109ca0d7', class: 'OuterCover Inner', style: { 'backgroundImage': `url(${backgroundInnerImagePath}` } }, index.h("div", { key: '9d5614ded2f73b505e60900675a7d95b3cfbcbc6', class: 'Content Row' }, this.playerElevateLevel && (index.h(index.Fragment, { key: '9a17e809083e61aad19f7ffef5d5ee5885ae8b4d' }, index.h("div", { key: '47068df3c0070ee2785b0d0201b08766fe0d71e8', class: "PlayerImg" }, index.h(playerElevateCardItems.PlayerAvatar, { key: '40115f8b190d871c85f9531fbf0bafb8fbd739e2', onlyBadge: true, loyaltyIconUrl: this.playerElevateLevel.presentation.asset })), index.h("div", { key: '278cd70c23ecb48655e90810af570ce5366d13d5', class: `LevelInfo ${this.playerElevateLevel.name}` }, index.h("div", { key: 'ce682ff881c5b12ed0b736ffcc67ad07b3713999', class: "PointsTxt Label" }, this.cardTitle ? this.cardTitle : playerElevateCardItems.translate('spendablePoints')), index.h("div", { key: 'eeebc5c468cf6e3d566f708fd47a19956ad9defe', class: 'PointsTxt SPPoints' }, index.h(playerElevateCardItems.PlayerPoints, { key: 'ad58990b7fa789cf2d5c524191447196e97c8a16', spendablePoints: this.playerElevateLevel.spendablePoints, language: this.language }), index.h("a", { key: '0dbdd6cd84e1cb43dac4485f4e3eec3130d6c65c', class: "TC", onClick: () => {
+                this.onDetailsClick();
+            } }, playerElevateCardItems.translate('termAndConditions', this.language))), this.pointExpireString && (index.h("div", { key: '45c3267d390995fabe34974913adf97b112cf8c2', class: 'ExpirationPoints' }, this.pointExpireString, " "))))))))));
+    }
+    static get watchers() { return {
+        "session": ["onSessionOrEndpointChange"],
+        "endpoint": ["onSessionOrEndpointChange"],
+        "language": ["onSessionOrEndpointChange"]
+    }; }
+};
+PlayerElevatePointcard.style = PlayerElevatePointcardStyle0;
+
+exports.player_elevate_pointcard = PlayerElevatePointcard;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,28 @@
+{
+  "entries": [
+    "components/gamification-dropdown/gamification-dropdown.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.20.0",
+    "typescriptVersion": "5.5.3"
+  },
+  "collections": [
+    {
+      "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/gamification-dropdown/gamification-dropdown.css

@@ -0,0 +1,57 @@
+:host {
+  display: block;
+}
+
+.GamificationDropdownContainer {
+  position: relative;
+}
+.GamificationDropdownContainer .GamificationDropdown {
+  position: absolute;
+  left: 0;
+  z-index: 200;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.GamificationDropdownButton {
+  cursor: pointer;
+  font-size: 14px;
+  height: 20px;
+  background-color: unset;
+  color: var(--emw--color-typography, #FFFFFF);
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.GamificationDropdownButton:hover {
+  color: var(--emw--color-primary, #52d004);
+}
+.GamificationDropdownButton:hover svg {
+  fill: var(--emw--color-primary, #52d004);
+}
+.GamificationDropdownButton.IsOpen {
+  color: var(--emw--color-primary, #52d004);
+}
+.GamificationDropdownButton.IsOpen svg {
+  fill: var(--emw--color-primary, #52d004);
+}
+.GamificationDropdownButton .TriangleActive, .GamificationDropdownButton .TriangleInactive {
+  display: block;
+  transition: all 0.2s;
+}
+.GamificationDropdownButton .TriangleActive {
+  transform: scale(1.1) rotateX(180deg) translateY(3px);
+  fill: var(--emw--color-primary, #52d004);
+  margin-top: 4px;
+}
+.GamificationDropdownButton svg {
+  fill: var(--emw--color-typography, #FFFFFF);
+  margin-left: 8px;
+  width: 16px;
+}

package/dist/collection/components/gamification-dropdown/gamification-dropdown.js

@@ -0,0 +1,256 @@
+import { h } from "@stencil/core";
+import { getTranslations, translate } from "../../utils/locale.utils";
+import "../../../../../player-elevate-card/dist/types/index";
+export class GamificationDropdown {
+    constructor() {
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let url = new URL(this.clientStylingUrl);
+            let cssFile = document.createElement('style');
+            fetch(url.href)
+                .then((res) => res.text())
+                .then((data) => {
+                cssFile.innerHTML = data;
+                setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+            })
+                .catch((err) => {
+                console.log('error ', err);
+            });
+        };
+        this.navigateToGamification = () => {
+            window.postMessage({ type: 'NavigateToGamification' }, window.location.href);
+            this.isOpen = false;
+        };
+        this.handleOutsideClick = (event) => {
+            const path = event.composedPath();
+            if (!path.includes(this.el)) {
+                this.isOpen = false;
+                document.removeEventListener('click', this.handleOutsideClick);
+            }
+        };
+        this.handleDropdownClick = (event) => {
+            event.stopPropagation();
+            this.isOpen = !this.isOpen;
+            if (this.isOpen) {
+                document.addEventListener('click', this.handleOutsideClick);
+            }
+            else {
+                document.removeEventListener('click', this.handleOutsideClick);
+            }
+        };
+        this.endpoint = undefined;
+        this.language = 'en';
+        this.session = '';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.isOpen = false;
+        this.isLoading = false;
+        this.stylingAppends = false;
+        this.loyaltyPoints = undefined;
+    }
+    handleNewTranslations() {
+        this.isLoading = true;
+        getTranslations(this.translationUrl).then(() => {
+            this.isLoading = false;
+        });
+    }
+    async componentWillLoad() {
+        if (this.translationUrl.length > 2) {
+            await getTranslations(this.translationUrl);
+        }
+        if (this.endpoint && this.language) {
+            return this.fetchPointsData();
+        }
+    }
+    componentDidRender() {
+        // start custom styling area
+        if (!this.stylingAppends && this.stylingContainer) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.stylingAppends = true;
+        }
+        // end custom styling area
+    }
+    fetchPointsData() {
+        let url = new URL(`${this.endpoint}/v1/elevate/playerInfo`);
+        url.searchParams.append('language', this.language);
+        const headers = new Headers();
+        headers.append('X-SessionId', this.session);
+        const options = {
+            method: 'GET',
+            headers
+        };
+        return new Promise((resolve, reject) => {
+            this.isLoading = true;
+            fetch(url.href, options)
+                .then((res) => res.json())
+                .then((data) => {
+                var _a, _b;
+                this.loyaltyPoints = (_b = (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.level) === null || _b === void 0 ? void 0 : _b.loyaltyPoints;
+                resolve(true);
+            }).catch((err) => {
+                console.error(err);
+                reject(err);
+            }).finally(() => {
+                this.isLoading = false;
+            });
+        });
+    }
+    render() {
+        if (this.isLoading) {
+            return null;
+        }
+        else {
+            return (h("div", { ref: el => this.stylingContainer = el, class: "GamificationDropdownContainer" }, h("button", { class: `GamificationDropdownButton ${this.isOpen ? 'IsOpen' : ''}`, type: "button", onClick: (e) => this.handleDropdownClick(e), title: typeof this.loyaltyPoints === 'number'
+                    ? String(this.loyaltyPoints)
+                    : translate('gamificationNoPoints', this.language) }, typeof this.loyaltyPoints === 'number'
+                ? `${this.loyaltyPoints} XP`
+                : '...', h("span", { class: this.isOpen ? '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)" })))), this.isOpen && (h("div", { class: "GamificationDropdown", onClick: this.navigateToGamification }, h("player-elevate-loyaltycard", { endpoint: this.endpoint, session: this.session, language: this.language, "client-styling-url": this.clientStylingUrl, "client-styling": this.clientStyling })))));
+        }
+    }
+    static get is() { return "gamification-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gamification-dropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gamification-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Endpoint URL for the source of data"
+                },
+                "attribute": "endpoint",
+                "reflect": true
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language of the widget"
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "session": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Session of the user"
+                },
+                "attribute": "session",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via string"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Translations via URL"
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "isLoading": {},
+            "stylingAppends": {},
+            "loyaltyPoints": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "translationUrl",
+                "methodName": "handleNewTranslations"
+            }];
+    }
+}

package/dist/collection/components/gamification-dropdown/index.js

@@ -0,0 +1 @@
+export { GamificationDropdown } from './gamification-dropdown';

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components/gamification-dropdown';

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

@@ -0,0 +1,42 @@
+const DEFAULT_LANGUAGE = 'en';
+let TRANSLATIONS = {
+    en: {
+        gamificationNoPoints: "No points"
+    },
+    de: {
+        gamificationNoPoints: "No points"
+    },
+    ro: {
+        gamificationNoPoints: "No points"
+    },
+    fr: {
+        gamificationNoPoints: "No points"
+    },
+    ar: {
+        gamificationNoPoints: "No points"
+    },
+    hr: {
+        gamificationNoPoints: "No points"
+    }
+};
+export const getTranslations = (url) => {
+    return new Promise((resolve) => {
+        fetch(url)
+            .then((res) => res.json())
+            .then((data) => {
+            Object.keys(data).forEach((lang) => {
+                if (!TRANSLATIONS[lang]) {
+                    TRANSLATIONS[lang] = {};
+                }
+                for (let key in data[lang]) {
+                    TRANSLATIONS[lang][key] = data[lang][key];
+                }
+            });
+            resolve(true);
+        });
+    });
+};
+export const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}

package/dist/esm/app-globals-0f993ce5.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };