@everymatrix/helper-tabs 1.52.5 → 1.53.0

package/dist/cjs/helper-tab_2.cjs.entry.js

@@ -4,7 +4,57 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7158b6b0.js');
 
-const helperTabCss = ":host{display:block}.TabContent{font-size:14px;color:#000;font-weight:normal}";
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['en'];
+const TRANSLATIONS = {
+    en: {
+        numbersFrom: 'Each play includes one set of numbers from',
+        to: 'to',
+        selectableNumber: 'with a selectable number of',
+        minimumSelection: 'and a minimum selection of',
+        winnings: 'The winnings are automatically credited to your account.',
+        register: 'Register or Login',
+        butTickets: 'Buy tickets. Select "Buy Tickets" to pick your numbers. Want us to automatically generate random numbers for you? Choose “quick pick”.',
+        reviewPurchase: "Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!",
+        odds: 'What are my odds of winning?',
+        winGame: 'How can I find out if I’ve won a draw game?',
+        claimPrize: 'How do I claim my prize?'
+    },
+    ro: {
+        numbersFrom: 'Each play includes one set of numbers from',
+        to: 'to',
+        selectableNumber: 'with a selectable number of',
+        minimumSelection: 'and a minimum selection of',
+        winnings: 'The winnings are automatically credited to your account.'
+    },
+    fr: {
+        numbersFrom: 'Each play includes one set of numbers from',
+        to: 'to',
+        selectableNumber: 'with a selectable number of',
+        minimumSelection: 'and a minimum selection of',
+        winnings: 'The winnings are automatically credited to your account.'
+    },
+    ar: {
+        numbersFrom: 'Each play includes one set of numbers from',
+        to: 'to',
+        selectableNumber: 'with a selectable number of',
+        minimumSelection: 'and a minimum selection of',
+        winnings: 'The winnings are automatically credited to your account.'
+    },
+    hr: {
+        numbersFrom: 'Each play includes one set of numbers from',
+        to: 'to',
+        selectableNumber: 'with a selectable number of',
+        minimumSelection: 'and a minimum selection of',
+        winnings: 'The winnings are automatically credited to your account.'
+    }
+};
+const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const helperTabCss = ":host{display:block}.TabContent{font-size:14px;color:var(--emw--button-text-color, #000);font-weight:normal}";
 const HelperTabStyle0 = helperTabCss;
 
 const HelperTab = class {
@@ -26,14 +76,14 @@ const HelperTab = class {
         this.cmsEndpoint = undefined;
         this.clientStyling = '';
         this.clientStylingUrlContent = '';
+        this.lowNumber = undefined;
+        this.highNumber = undefined;
+        this.minimumAllowed = undefined;
+        this.maxinumAllowed = undefined;
+        this.language = 'en';
         this.tabContent = '';
         this.limitStylingAppends = false;
     }
-    connectedCallback() {
-        /**
-         * fetch(cmsEndpoint + / + / + selectedIndex)
-         */
-    }
     componentDidRender() {
         // start custom styling area
         if (!this.limitStylingAppends && this.stylingContainer) {
@@ -46,19 +96,19 @@ const HelperTab = class {
         // end custom styling area
     }
     render() {
-        this.tabContent = index.h("div", { key: 'd69c61827b4fb6d934c72b0b2d37d72fca307575', class: "TabContent", ref: el => this.stylingContainer = el }, "Each play includes one set of numbers from 1 to 21 with a selectable number of 8 and a second, 4-digit set of numbers, with a minimum selection of 1. Draws are held every 5 minutes and the winnings are automatically credited to your account.");
+        this.tabContent = index.h("div", { key: '8c2b3f0f34ccda482fd187218840f9a622698b1f', class: "TabContent", ref: el => this.stylingContainer = el }, translate('numbersFrom', this.language), " ", this.lowNumber, " ", translate('to', this.language), " ", this.highNumber, " ", translate('selectableNumber', this.language), " ", this.maxinumAllowed, " ", translate('minimumSelection', this.language), " ", this.minimumAllowed, ". ", translate('winnings', this.language));
         if (this.selectedIndex + 1 == 2) {
-            this.tabContent = index.h("div", { key: 'ab912cbb3bc3e88ecf8fe5f8f0e7eb16460100bd', class: "TabContent", ref: el => this.stylingContainer = el }, index.h("ol", { key: '17bed41dffe7d5578452ee13a47b442d10366ce2' }, index.h("li", { key: 'cf0da42f07cf92f5cea9c9f504c8836e528a5708' }, "Register or Login"), index.h("li", { key: '4a0339df365c6b1a37b8a74c5022a56197e870db' }, "Buy tickets. Select 'Buy Tickets' to pick your numbers. Want us to automatically generate random numbers for you? Choose \u201CI feel lucky\u201D."), index.h("li", { key: '3f29a9b17c1059493648247868b83eb71241b8bd' }, "Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!")));
+            this.tabContent = index.h("div", { key: '2950bb6ccdd98761099d12239881ab29da4b2213', class: "TabContent", ref: el => this.stylingContainer = el }, index.h("ol", { key: '0da821f45e855155003809cb4c84eaa8d25f1f2a' }, index.h("li", { key: '15d4f064c62319c6611baa3693f4ef297309c786' }, translate('register', this.language)), index.h("li", { key: '4933c6970d4044aac746abb398f7c255b0484f6a' }, translate('butTickets', this.language)), index.h("li", { key: 'ffe7cef3e53bd281173384756476acd2e0e8f148' }, translate('reviewPurchase', this.language))));
         }
         else if (this.selectedIndex + 1 == 3) {
-            this.tabContent = index.h("div", { key: 'ceac54698e0e5c55a049600f02e8f413a76a1c33', class: "TabContent", ref: el => this.stylingContainer = el }, index.h("ul", { key: '426d89c86a1d44f6d515bc1a7902e43317127939' }, index.h("li", { key: '457a225564399001dcab48097578174a27231ca7' }, "What are my odds of winning?"), index.h("li", { key: 'd35220f2aca215eff391cab54d719f18ef906c77' }, "How can I find out if I\u2019ve won a draw game?"), index.h("li", { key: 'fcd560ee4b6740c319cf0f98a0b98da8fd9e14a4' }, "How do I claim my prize?")));
+            this.tabContent = index.h("div", { key: '296c83d55150c67522cea9cb1fc10f3542c72452', class: "TabContent", ref: el => this.stylingContainer = el }, index.h("ul", { key: '3fc772a007d0f73e0692021a2f700bab5807bb85' }, index.h("li", { key: 'fd6e459a0536261d98e42e37a272f229d152dfb7' }, translate('odds', this.language)), index.h("li", { key: 'ae7e5bceb217c9ceb1303145ae83f05fddd7dde6' }, translate('winGame', this.language)), index.h("li", { key: 'a094c7ea0db72683fb134f010d22f02b61f25a4b' }, translate('claimPrize', this.language))));
         }
         return (this.tabContent);
     }
 };
 HelperTab.style = HelperTabStyle0;
 
-const helperTabsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Tabs{display:flex;gap:10px;overflow-x:auto}.TabButton{cursor:pointer;width:auto;border-radius:4px;padding:8px 15px;margin:5px 0 10px;border:1px solid #009993;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0;white-space:nowrap}.TabButton:hover{background:#F1F1F1}.TabButton.Active{background:#009993;color:#FFF}";
+const helperTabsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Tabs{display:flex;gap:10px;overflow-x:auto}.TabButton{cursor:pointer;width:auto;border-radius:var(--emw--button-border-radius, 4px);padding:8px 15px;margin:5px 0 10px;border:1px solid var(--emw--color-typography, #009993);background:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));color:var(--emw--button-text-color, #000);font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0;white-space:nowrap}.TabButton:hover{background:var(--emw--color-gray-50, #F1F1F1)}.TabButton.Active{background:var(--emw--color-background, #009993);color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255))}";
 const HelperTabsStyle0 = helperTabsCss;
 
 const HelperTabs = class {
@@ -85,6 +135,10 @@ const HelperTabs = class {
         this.clientStyling = '';
         this.clientStylingurl = '';
         this.clientStylingUrlContent = '';
+        this.lowNumber = undefined;
+        this.highNumber = undefined;
+        this.minimumAllowed = undefined;
+        this.maxinumAllowed = undefined;
         this.limitStylingAppends = false;
     }
     connectedCallback() {
@@ -101,7 +155,7 @@ const HelperTabs = class {
         // end custom styling area
     }
     render() {
-        return (index.h("div", { key: '841b2a4b84f2ecdaf692b9cab2eac4b3413186e7', ref: el => this.stylingContainer = el }, index.h("div", { key: '4c5d57e669f9f45d204bff8a85ca89a0574c4627', class: "Tabs" }, this.tabs.map((tab, index$1) => index.h("button", { class: 'TabButton' + (this.selectedIndex == index$1 ? ' Active' : ''), onClick: () => this.selectedIndex = index$1 }, tab.label))), index.h("div", { key: '7ba983dec3b0355f390b19191d0d823914f09037' }, index.h("helper-tab", { key: 'e6c7739d50948582d8d14d530828508b4cb90d6e', selectedIndex: this.selectedIndex, "client-styling": this.clientStyling, "client-stylingurl": this.clientStylingurl, "client-styling-url-content": this.clientStylingUrlContent }))));
+        return (index.h("div", { key: 'cb91a99a4d5eb99ce625c276894f8b682159c12c', ref: el => this.stylingContainer = el }, index.h("div", { key: 'c57ea36b3e25c605894b7ddf19e5e456f2fa252d', class: "Tabs" }, this.tabs.map((tab, index$1) => index.h("button", { class: 'TabButton' + (this.selectedIndex == index$1 ? ' Active' : ''), onClick: () => this.selectedIndex = index$1 }, tab.label))), index.h("div", { key: '41fa20ee2cc713af685f902fc496a702464398d1' }, index.h("helper-tab", { key: 'fded6e290107cbc06909aee2e2c97e1c1dd76db3', "low-number": this.lowNumber, "high-number": this.highNumber, "minimum-allowed": this.minimumAllowed, "maxinum-allowed": this.maxinumAllowed, selectedIndex: this.selectedIndex, "client-styling": this.clientStyling, "client-stylingurl": this.clientStylingurl, "client-styling-url-content": this.clientStylingUrlContent }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/helper-tabs.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["helper-tab_2.cjs",[[1,"helper-tabs",{"disabled":[516],"label":[513],"selected":[516],"cmsEndpoint":[513,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16],"clientStyling":[513,"client-styling"],"clientStylingurl":[513,"client-stylingurl"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}],[1,"helper-tab",{"selectedIndex":[514,"selected-index"],"cmsEndpoint":[513,"cms-endpoint"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"tabContent":[32],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["helper-tab_2.cjs",[[1,"helper-tabs",{"disabled":[516],"label":[513],"selected":[516],"cmsEndpoint":[513,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16],"clientStyling":[513,"client-styling"],"clientStylingurl":[513,"client-stylingurl"],"clientStylingUrlContent":[513,"client-styling-url-content"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"limitStylingAppends":[32]}],[1,"helper-tab",{"selectedIndex":[514,"selected-index"],"cmsEndpoint":[513,"cms-endpoint"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"tabContent":[32],"limitStylingAppends":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["helper-tab_2.cjs",[[1,"helper-tabs",{"disabled":[516],"label":[513],"selected":[516],"cmsEndpoint":[513,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16],"clientStyling":[513,"client-styling"],"clientStylingurl":[513,"client-stylingurl"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}],[1,"helper-tab",{"selectedIndex":[514,"selected-index"],"cmsEndpoint":[513,"cms-endpoint"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"tabContent":[32],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["helper-tab_2.cjs",[[1,"helper-tabs",{"disabled":[516],"label":[513],"selected":[516],"cmsEndpoint":[513,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16],"clientStyling":[513,"client-styling"],"clientStylingurl":[513,"client-stylingurl"],"clientStylingUrlContent":[513,"client-styling-url-content"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"limitStylingAppends":[32]}],[1,"helper-tab",{"selectedIndex":[514,"selected-index"],"cmsEndpoint":[513,"cms-endpoint"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"tabContent":[32],"limitStylingAppends":[32]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/helper-tab/helper-tab.css

@@ -4,6 +4,6 @@
 
 .TabContent {
   font-size: 14px;
-  color: #000;
+  color: var(--emw--button-text-color, #000);
   font-weight: normal;
 }

package/dist/collection/components/helper-tab/helper-tab.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { translate } from "../../utils/locale.utils";
 export class HelperTab {
     constructor() {
         this.setClientStyling = () => {
@@ -17,14 +18,14 @@ export class HelperTab {
         this.cmsEndpoint = undefined;
         this.clientStyling = '';
         this.clientStylingUrlContent = '';
+        this.lowNumber = undefined;
+        this.highNumber = undefined;
+        this.minimumAllowed = undefined;
+        this.maxinumAllowed = undefined;
+        this.language = 'en';
         this.tabContent = '';
         this.limitStylingAppends = false;
     }
-    connectedCallback() {
-        /**
-         * fetch(cmsEndpoint + / + / + selectedIndex)
-         */
-    }
     componentDidRender() {
         // start custom styling area
         if (!this.limitStylingAppends && this.stylingContainer) {
@@ -37,12 +38,12 @@ export class HelperTab {
         // end custom styling area
     }
     render() {
-        this.tabContent = h("div", { key: 'd69c61827b4fb6d934c72b0b2d37d72fca307575', class: "TabContent", ref: el => this.stylingContainer = el }, "Each play includes one set of numbers from 1 to 21 with a selectable number of 8 and a second, 4-digit set of numbers, with a minimum selection of 1. Draws are held every 5 minutes and the winnings are automatically credited to your account.");
+        this.tabContent = h("div", { key: '8c2b3f0f34ccda482fd187218840f9a622698b1f', class: "TabContent", ref: el => this.stylingContainer = el }, translate('numbersFrom', this.language), " ", this.lowNumber, " ", translate('to', this.language), " ", this.highNumber, " ", translate('selectableNumber', this.language), " ", this.maxinumAllowed, " ", translate('minimumSelection', this.language), " ", this.minimumAllowed, ". ", translate('winnings', this.language));
         if (this.selectedIndex + 1 == 2) {
-            this.tabContent = h("div", { key: 'ab912cbb3bc3e88ecf8fe5f8f0e7eb16460100bd', class: "TabContent", ref: el => this.stylingContainer = el }, h("ol", { key: '17bed41dffe7d5578452ee13a47b442d10366ce2' }, h("li", { key: 'cf0da42f07cf92f5cea9c9f504c8836e528a5708' }, "Register or Login"), h("li", { key: '4a0339df365c6b1a37b8a74c5022a56197e870db' }, "Buy tickets. Select 'Buy Tickets' to pick your numbers. Want us to automatically generate random numbers for you? Choose \u201CI feel lucky\u201D."), h("li", { key: '3f29a9b17c1059493648247868b83eb71241b8bd' }, "Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!")));
+            this.tabContent = h("div", { key: '2950bb6ccdd98761099d12239881ab29da4b2213', class: "TabContent", ref: el => this.stylingContainer = el }, h("ol", { key: '0da821f45e855155003809cb4c84eaa8d25f1f2a' }, h("li", { key: '15d4f064c62319c6611baa3693f4ef297309c786' }, translate('register', this.language)), h("li", { key: '4933c6970d4044aac746abb398f7c255b0484f6a' }, translate('butTickets', this.language)), h("li", { key: 'ffe7cef3e53bd281173384756476acd2e0e8f148' }, translate('reviewPurchase', this.language))));
         }
         else if (this.selectedIndex + 1 == 3) {
-            this.tabContent = h("div", { key: 'ceac54698e0e5c55a049600f02e8f413a76a1c33', class: "TabContent", ref: el => this.stylingContainer = el }, h("ul", { key: '426d89c86a1d44f6d515bc1a7902e43317127939' }, h("li", { key: '457a225564399001dcab48097578174a27231ca7' }, "What are my odds of winning?"), h("li", { key: 'd35220f2aca215eff391cab54d719f18ef906c77' }, "How can I find out if I\u2019ve won a draw game?"), h("li", { key: 'fcd560ee4b6740c319cf0f98a0b98da8fd9e14a4' }, "How do I claim my prize?")));
+            this.tabContent = h("div", { key: '296c83d55150c67522cea9cb1fc10f3542c72452', class: "TabContent", ref: el => this.stylingContainer = el }, h("ul", { key: '3fc772a007d0f73e0692021a2f700bab5807bb85' }, h("li", { key: 'fd6e459a0536261d98e42e37a272f229d152dfb7' }, translate('odds', this.language)), h("li", { key: 'ae7e5bceb217c9ceb1303145ae83f05fddd7dde6' }, translate('winGame', this.language)), h("li", { key: 'a094c7ea0db72683fb134f010d22f02b61f25a4b' }, translate('claimPrize', this.language))));
         }
         return (this.tabContent);
     }
@@ -130,6 +131,92 @@ export class HelperTab {
                 "attribute": "client-styling-url-content",
                 "reflect": true,
                 "defaultValue": "''"
+            },
+            "lowNumber": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum number displayed in the board"
+                },
+                "attribute": "low-number",
+                "reflect": true
+            },
+            "highNumber": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number displayed in the board"
+                },
+                "attribute": "high-number",
+                "reflect": true
+            },
+            "minimumAllowed": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum number of numbers that can be selected"
+                },
+                "attribute": "minimum-allowed",
+                "reflect": true
+            },
+            "maxinumAllowed": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of numbers that can be selected"
+                },
+                "attribute": "maxinum-allowed",
+                "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'"
             }
         };
     }

package/dist/collection/components/helper-tabs/helper-tabs.css

@@ -13,12 +13,12 @@
 .TabButton {
   cursor: pointer;
   width: auto;
-  border-radius: 4px;
+  border-radius: var(--emw--button-border-radius, 4px);
   padding: 8px 15px;
   margin: 5px 0 10px;
-  border: 1px solid #009993;
-  background: #FFF;
-  color: #000;
+  border: 1px solid var(--emw--color-typography, #009993);
+  background: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
+  color: var(--emw--button-text-color, #000);
   font-size: 12px;
   transition: all 0.2s linear;
   text-align: center;
@@ -26,9 +26,9 @@
   white-space: nowrap;
 }
 .TabButton:hover {
-  background: #F1F1F1;
+  background: var(--emw--color-gray-50, #F1F1F1);
 }
 .TabButton.Active {
-  background: #009993;
-  color: #FFF;
+  background: var(--emw--color-background, #009993);
+  color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
 }

package/dist/collection/components/helper-tabs/helper-tabs.js

@@ -22,6 +22,10 @@ export class HelperTabs {
         this.clientStyling = '';
         this.clientStylingurl = '';
         this.clientStylingUrlContent = '';
+        this.lowNumber = undefined;
+        this.highNumber = undefined;
+        this.minimumAllowed = undefined;
+        this.maxinumAllowed = undefined;
         this.limitStylingAppends = false;
     }
     connectedCallback() {
@@ -41,7 +45,7 @@ export class HelperTabs {
         // end custom styling area
     }
     render() {
-        return (h("div", { key: '841b2a4b84f2ecdaf692b9cab2eac4b3413186e7', ref: el => this.stylingContainer = el }, h("div", { key: '4c5d57e669f9f45d204bff8a85ca89a0574c4627', class: "Tabs" }, this.tabs.map((tab, index) => h("button", { class: 'TabButton' + (this.selectedIndex == index ? ' Active' : ''), onClick: () => this.selectedIndex = index }, tab.label))), h("div", { key: '7ba983dec3b0355f390b19191d0d823914f09037' }, h("helper-tab", { key: 'e6c7739d50948582d8d14d530828508b4cb90d6e', selectedIndex: this.selectedIndex, "client-styling": this.clientStyling, "client-stylingurl": this.clientStylingurl, "client-styling-url-content": this.clientStylingUrlContent }))));
+        return (h("div", { key: 'cb91a99a4d5eb99ce625c276894f8b682159c12c', ref: el => this.stylingContainer = el }, h("div", { key: 'c57ea36b3e25c605894b7ddf19e5e456f2fa252d', class: "Tabs" }, this.tabs.map((tab, index) => h("button", { class: 'TabButton' + (this.selectedIndex == index ? ' Active' : ''), onClick: () => this.selectedIndex = index }, tab.label))), h("div", { key: '41fa20ee2cc713af685f902fc496a702464398d1' }, h("helper-tab", { key: 'fded6e290107cbc06909aee2e2c97e1c1dd76db3', "low-number": this.lowNumber, "high-number": this.highNumber, "minimum-allowed": this.minimumAllowed, "maxinum-allowed": this.maxinumAllowed, selectedIndex: this.selectedIndex, "client-styling": this.clientStyling, "client-stylingurl": this.clientStylingurl, "client-styling-url-content": this.clientStylingUrlContent }))));
     }
     static get is() { return "helper-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -223,6 +227,74 @@ export class HelperTabs {
                 "attribute": "client-styling-url-content",
                 "reflect": true,
                 "defaultValue": "''"
+            },
+            "lowNumber": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum number displayed in the board"
+                },
+                "attribute": "low-number",
+                "reflect": true
+            },
+            "highNumber": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number displayed in the board"
+                },
+                "attribute": "high-number",
+                "reflect": true
+            },
+            "minimumAllowed": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum number of numbers that can be selected"
+                },
+                "attribute": "minimum-allowed",
+                "reflect": true
+            },
+            "maxinumAllowed": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of numbers that can be selected"
+                },
+                "attribute": "maxinum-allowed",
+                "reflect": true
             }
         };
     }

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

@@ -0,0 +1,49 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['en'];
+const TRANSLATIONS = {
+    en: {
+        numbersFrom: 'Each play includes one set of numbers from',
+        to: 'to',
+        selectableNumber: 'with a selectable number of',
+        minimumSelection: 'and a minimum selection of',
+        winnings: 'The winnings are automatically credited to your account.',
+        register: 'Register or Login',
+        butTickets: 'Buy tickets. Select "Buy Tickets" to pick your numbers. Want us to automatically generate random numbers for you? Choose “quick pick”.',
+        reviewPurchase: "Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!",
+        odds: 'What are my odds of winning?',
+        winGame: 'How can I find out if I’ve won a draw game?',
+        claimPrize: 'How do I claim my prize?'
+    },
+    ro: {
+        numbersFrom: 'Each play includes one set of numbers from',
+        to: 'to',
+        selectableNumber: 'with a selectable number of',
+        minimumSelection: 'and a minimum selection of',
+        winnings: 'The winnings are automatically credited to your account.'
+    },
+    fr: {
+        numbersFrom: 'Each play includes one set of numbers from',
+        to: 'to',
+        selectableNumber: 'with a selectable number of',
+        minimumSelection: 'and a minimum selection of',
+        winnings: 'The winnings are automatically credited to your account.'
+    },
+    ar: {
+        numbersFrom: 'Each play includes one set of numbers from',
+        to: 'to',
+        selectableNumber: 'with a selectable number of',
+        minimumSelection: 'and a minimum selection of',
+        winnings: 'The winnings are automatically credited to your account.'
+    },
+    hr: {
+        numbersFrom: 'Each play includes one set of numbers from',
+        to: 'to',
+        selectableNumber: 'with a selectable number of',
+        minimumSelection: 'and a minimum selection of',
+        winnings: 'The winnings are automatically credited to your account.'
+    }
+};
+export const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};

package/dist/esm/helper-tab_2.entry.js

@@ -1,6 +1,56 @@
 import { r as registerInstance, h, g as getElement } from './index-93aaed58.js';
 
-const helperTabCss = ":host{display:block}.TabContent{font-size:14px;color:#000;font-weight:normal}";
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['en'];
+const TRANSLATIONS = {
+    en: {
+        numbersFrom: 'Each play includes one set of numbers from',
+        to: 'to',
+        selectableNumber: 'with a selectable number of',
+        minimumSelection: 'and a minimum selection of',
+        winnings: 'The winnings are automatically credited to your account.',
+        register: 'Register or Login',
+        butTickets: 'Buy tickets. Select "Buy Tickets" to pick your numbers. Want us to automatically generate random numbers for you? Choose “quick pick”.',
+        reviewPurchase: "Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!",
+        odds: 'What are my odds of winning?',
+        winGame: 'How can I find out if I’ve won a draw game?',
+        claimPrize: 'How do I claim my prize?'
+    },
+    ro: {
+        numbersFrom: 'Each play includes one set of numbers from',
+        to: 'to',
+        selectableNumber: 'with a selectable number of',
+        minimumSelection: 'and a minimum selection of',
+        winnings: 'The winnings are automatically credited to your account.'
+    },
+    fr: {
+        numbersFrom: 'Each play includes one set of numbers from',
+        to: 'to',
+        selectableNumber: 'with a selectable number of',
+        minimumSelection: 'and a minimum selection of',
+        winnings: 'The winnings are automatically credited to your account.'
+    },
+    ar: {
+        numbersFrom: 'Each play includes one set of numbers from',
+        to: 'to',
+        selectableNumber: 'with a selectable number of',
+        minimumSelection: 'and a minimum selection of',
+        winnings: 'The winnings are automatically credited to your account.'
+    },
+    hr: {
+        numbersFrom: 'Each play includes one set of numbers from',
+        to: 'to',
+        selectableNumber: 'with a selectable number of',
+        minimumSelection: 'and a minimum selection of',
+        winnings: 'The winnings are automatically credited to your account.'
+    }
+};
+const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const helperTabCss = ":host{display:block}.TabContent{font-size:14px;color:var(--emw--button-text-color, #000);font-weight:normal}";
 const HelperTabStyle0 = helperTabCss;
 
 const HelperTab = class {
@@ -22,14 +72,14 @@ const HelperTab = class {
         this.cmsEndpoint = undefined;
         this.clientStyling = '';
         this.clientStylingUrlContent = '';
+        this.lowNumber = undefined;
+        this.highNumber = undefined;
+        this.minimumAllowed = undefined;
+        this.maxinumAllowed = undefined;
+        this.language = 'en';
         this.tabContent = '';
         this.limitStylingAppends = false;
     }
-    connectedCallback() {
-        /**
-         * fetch(cmsEndpoint + / + / + selectedIndex)
-         */
-    }
     componentDidRender() {
         // start custom styling area
         if (!this.limitStylingAppends && this.stylingContainer) {
@@ -42,19 +92,19 @@ const HelperTab = class {
         // end custom styling area
     }
     render() {
-        this.tabContent = h("div", { key: 'd69c61827b4fb6d934c72b0b2d37d72fca307575', class: "TabContent", ref: el => this.stylingContainer = el }, "Each play includes one set of numbers from 1 to 21 with a selectable number of 8 and a second, 4-digit set of numbers, with a minimum selection of 1. Draws are held every 5 minutes and the winnings are automatically credited to your account.");
+        this.tabContent = h("div", { key: '8c2b3f0f34ccda482fd187218840f9a622698b1f', class: "TabContent", ref: el => this.stylingContainer = el }, translate('numbersFrom', this.language), " ", this.lowNumber, " ", translate('to', this.language), " ", this.highNumber, " ", translate('selectableNumber', this.language), " ", this.maxinumAllowed, " ", translate('minimumSelection', this.language), " ", this.minimumAllowed, ". ", translate('winnings', this.language));
         if (this.selectedIndex + 1 == 2) {
-            this.tabContent = h("div", { key: 'ab912cbb3bc3e88ecf8fe5f8f0e7eb16460100bd', class: "TabContent", ref: el => this.stylingContainer = el }, h("ol", { key: '17bed41dffe7d5578452ee13a47b442d10366ce2' }, h("li", { key: 'cf0da42f07cf92f5cea9c9f504c8836e528a5708' }, "Register or Login"), h("li", { key: '4a0339df365c6b1a37b8a74c5022a56197e870db' }, "Buy tickets. Select 'Buy Tickets' to pick your numbers. Want us to automatically generate random numbers for you? Choose \u201CI feel lucky\u201D."), h("li", { key: '3f29a9b17c1059493648247868b83eb71241b8bd' }, "Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!")));
+            this.tabContent = h("div", { key: '2950bb6ccdd98761099d12239881ab29da4b2213', class: "TabContent", ref: el => this.stylingContainer = el }, h("ol", { key: '0da821f45e855155003809cb4c84eaa8d25f1f2a' }, h("li", { key: '15d4f064c62319c6611baa3693f4ef297309c786' }, translate('register', this.language)), h("li", { key: '4933c6970d4044aac746abb398f7c255b0484f6a' }, translate('butTickets', this.language)), h("li", { key: 'ffe7cef3e53bd281173384756476acd2e0e8f148' }, translate('reviewPurchase', this.language))));
         }
         else if (this.selectedIndex + 1 == 3) {
-            this.tabContent = h("div", { key: 'ceac54698e0e5c55a049600f02e8f413a76a1c33', class: "TabContent", ref: el => this.stylingContainer = el }, h("ul", { key: '426d89c86a1d44f6d515bc1a7902e43317127939' }, h("li", { key: '457a225564399001dcab48097578174a27231ca7' }, "What are my odds of winning?"), h("li", { key: 'd35220f2aca215eff391cab54d719f18ef906c77' }, "How can I find out if I\u2019ve won a draw game?"), h("li", { key: 'fcd560ee4b6740c319cf0f98a0b98da8fd9e14a4' }, "How do I claim my prize?")));
+            this.tabContent = h("div", { key: '296c83d55150c67522cea9cb1fc10f3542c72452', class: "TabContent", ref: el => this.stylingContainer = el }, h("ul", { key: '3fc772a007d0f73e0692021a2f700bab5807bb85' }, h("li", { key: 'fd6e459a0536261d98e42e37a272f229d152dfb7' }, translate('odds', this.language)), h("li", { key: 'ae7e5bceb217c9ceb1303145ae83f05fddd7dde6' }, translate('winGame', this.language)), h("li", { key: 'a094c7ea0db72683fb134f010d22f02b61f25a4b' }, translate('claimPrize', this.language))));
         }
         return (this.tabContent);
     }
 };
 HelperTab.style = HelperTabStyle0;
 
-const helperTabsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Tabs{display:flex;gap:10px;overflow-x:auto}.TabButton{cursor:pointer;width:auto;border-radius:4px;padding:8px 15px;margin:5px 0 10px;border:1px solid #009993;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0;white-space:nowrap}.TabButton:hover{background:#F1F1F1}.TabButton.Active{background:#009993;color:#FFF}";
+const helperTabsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Tabs{display:flex;gap:10px;overflow-x:auto}.TabButton{cursor:pointer;width:auto;border-radius:var(--emw--button-border-radius, 4px);padding:8px 15px;margin:5px 0 10px;border:1px solid var(--emw--color-typography, #009993);background:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));color:var(--emw--button-text-color, #000);font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0;white-space:nowrap}.TabButton:hover{background:var(--emw--color-gray-50, #F1F1F1)}.TabButton.Active{background:var(--emw--color-background, #009993);color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255))}";
 const HelperTabsStyle0 = helperTabsCss;
 
 const HelperTabs = class {
@@ -81,6 +131,10 @@ const HelperTabs = class {
         this.clientStyling = '';
         this.clientStylingurl = '';
         this.clientStylingUrlContent = '';
+        this.lowNumber = undefined;
+        this.highNumber = undefined;
+        this.minimumAllowed = undefined;
+        this.maxinumAllowed = undefined;
         this.limitStylingAppends = false;
     }
     connectedCallback() {
@@ -97,7 +151,7 @@ const HelperTabs = class {
         // end custom styling area
     }
     render() {
-        return (h("div", { key: '841b2a4b84f2ecdaf692b9cab2eac4b3413186e7', ref: el => this.stylingContainer = el }, h("div", { key: '4c5d57e669f9f45d204bff8a85ca89a0574c4627', class: "Tabs" }, this.tabs.map((tab, index) => h("button", { class: 'TabButton' + (this.selectedIndex == index ? ' Active' : ''), onClick: () => this.selectedIndex = index }, tab.label))), h("div", { key: '7ba983dec3b0355f390b19191d0d823914f09037' }, h("helper-tab", { key: 'e6c7739d50948582d8d14d530828508b4cb90d6e', selectedIndex: this.selectedIndex, "client-styling": this.clientStyling, "client-stylingurl": this.clientStylingurl, "client-styling-url-content": this.clientStylingUrlContent }))));
+        return (h("div", { key: 'cb91a99a4d5eb99ce625c276894f8b682159c12c', ref: el => this.stylingContainer = el }, h("div", { key: 'c57ea36b3e25c605894b7ddf19e5e456f2fa252d', class: "Tabs" }, this.tabs.map((tab, index) => h("button", { class: 'TabButton' + (this.selectedIndex == index ? ' Active' : ''), onClick: () => this.selectedIndex = index }, tab.label))), h("div", { key: '41fa20ee2cc713af685f902fc496a702464398d1' }, h("helper-tab", { key: 'fded6e290107cbc06909aee2e2c97e1c1dd76db3', "low-number": this.lowNumber, "high-number": this.highNumber, "minimum-allowed": this.minimumAllowed, "maxinum-allowed": this.maxinumAllowed, selectedIndex: this.selectedIndex, "client-styling": this.clientStyling, "client-stylingurl": this.clientStylingurl, "client-styling-url-content": this.clientStylingUrlContent }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/helper-tabs.js

@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["helper-tab_2",[[1,"helper-tabs",{"disabled":[516],"label":[513],"selected":[516],"cmsEndpoint":[513,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16],"clientStyling":[513,"client-styling"],"clientStylingurl":[513,"client-stylingurl"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}],[1,"helper-tab",{"selectedIndex":[514,"selected-index"],"cmsEndpoint":[513,"cms-endpoint"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"tabContent":[32],"limitStylingAppends":[32]}]]]], options);
+  return bootstrapLazy([["helper-tab_2",[[1,"helper-tabs",{"disabled":[516],"label":[513],"selected":[516],"cmsEndpoint":[513,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16],"clientStyling":[513,"client-styling"],"clientStylingurl":[513,"client-stylingurl"],"clientStylingUrlContent":[513,"client-styling-url-content"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"limitStylingAppends":[32]}],[1,"helper-tab",{"selectedIndex":[514,"selected-index"],"cmsEndpoint":[513,"cms-endpoint"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"tabContent":[32],"limitStylingAppends":[32]}]]]], options);
 });

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([["helper-tab_2",[[1,"helper-tabs",{"disabled":[516],"label":[513],"selected":[516],"cmsEndpoint":[513,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16],"clientStyling":[513,"client-styling"],"clientStylingurl":[513,"client-stylingurl"],"clientStylingUrlContent":[513,"client-styling-url-content"],"limitStylingAppends":[32]}],[1,"helper-tab",{"selectedIndex":[514,"selected-index"],"cmsEndpoint":[513,"cms-endpoint"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"tabContent":[32],"limitStylingAppends":[32]}]]]], options);
+  return bootstrapLazy([["helper-tab_2",[[1,"helper-tabs",{"disabled":[516],"label":[513],"selected":[516],"cmsEndpoint":[513,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16],"clientStyling":[513,"client-styling"],"clientStylingurl":[513,"client-stylingurl"],"clientStylingUrlContent":[513,"client-styling-url-content"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"limitStylingAppends":[32]}],[1,"helper-tab",{"selectedIndex":[514,"selected-index"],"cmsEndpoint":[513,"cms-endpoint"],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"lowNumber":[514,"low-number"],"highNumber":[514,"high-number"],"minimumAllowed":[514,"minimum-allowed"],"maxinumAllowed":[514,"maxinum-allowed"],"language":[513],"tabContent":[32],"limitStylingAppends":[32]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/helper-tabs/helper-tabs.esm.js

@@ -1 +1 @@
-import{p as t,b as e}from"./p-8be01f9b.js";export{s as setNonce}from"./p-8be01f9b.js";import{g as n}from"./p-e1255160.js";(()=>{const e=import.meta.url,n={};return""!==e&&(n.resourcesUrl=new URL(".",e).href),t(n)})().then((async t=>(await n(),e([["p-34cddd95",[[1,"helper-tabs",{disabled:[516],label:[513],selected:[516],cmsEndpoint:[513,"cms-endpoint"],selectedIndex:[1538,"selected-index"],tabs:[16],clientStyling:[513,"client-styling"],clientStylingurl:[513,"client-stylingurl"],clientStylingUrlContent:[513,"client-styling-url-content"],limitStylingAppends:[32]}],[1,"helper-tab",{selectedIndex:[514,"selected-index"],cmsEndpoint:[513,"cms-endpoint"],clientStyling:[513,"client-styling"],clientStylingUrlContent:[513,"client-styling-url-content"],tabContent:[32],limitStylingAppends:[32]}]]]],t))));
+import{p as e,b as n}from"./p-8be01f9b.js";export{s as setNonce}from"./p-8be01f9b.js";import{g as l}from"./p-e1255160.js";(()=>{const n=import.meta.url,l={};return""!==n&&(l.resourcesUrl=new URL(".",n).href),e(l)})().then((async e=>(await l(),n([["p-80aa1adc",[[1,"helper-tabs",{disabled:[516],label:[513],selected:[516],cmsEndpoint:[513,"cms-endpoint"],selectedIndex:[1538,"selected-index"],tabs:[16],clientStyling:[513,"client-styling"],clientStylingurl:[513,"client-stylingurl"],clientStylingUrlContent:[513,"client-styling-url-content"],lowNumber:[514,"low-number"],highNumber:[514,"high-number"],minimumAllowed:[514,"minimum-allowed"],maxinumAllowed:[514,"maxinum-allowed"],limitStylingAppends:[32]}],[1,"helper-tab",{selectedIndex:[514,"selected-index"],cmsEndpoint:[513,"cms-endpoint"],clientStyling:[513,"client-styling"],clientStylingUrlContent:[513,"client-styling-url-content"],lowNumber:[514,"low-number"],highNumber:[514,"high-number"],minimumAllowed:[514,"minimum-allowed"],maxinumAllowed:[514,"maxinum-allowed"],language:[513],tabContent:[32],limitStylingAppends:[32]}]]]],e))));

package/dist/helper-tabs/p-80aa1adc.entry.js

@@ -0,0 +1 @@
+import{r as e,h as t,g as i}from"./p-8be01f9b.js";const s=["en"],o={en:{numbersFrom:"Each play includes one set of numbers from",to:"to",selectableNumber:"with a selectable number of",minimumSelection:"and a minimum selection of",winnings:"The winnings are automatically credited to your account.",register:"Register or Login",butTickets:'Buy tickets. Select "Buy Tickets" to pick your numbers. Want us to automatically generate random numbers for you? Choose “quick pick”.',reviewPurchase:"Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!",odds:"What are my odds of winning?",winGame:"How can I find out if I’ve won a draw game?",claimPrize:"How do I claim my prize?"},ro:{numbersFrom:"Each play includes one set of numbers from",to:"to",selectableNumber:"with a selectable number of",minimumSelection:"and a minimum selection of",winnings:"The winnings are automatically credited to your account."},fr:{numbersFrom:"Each play includes one set of numbers from",to:"to",selectableNumber:"with a selectable number of",minimumSelection:"and a minimum selection of",winnings:"The winnings are automatically credited to your account."},ar:{numbersFrom:"Each play includes one set of numbers from",to:"to",selectableNumber:"with a selectable number of",minimumSelection:"and a minimum selection of",winnings:"The winnings are automatically credited to your account."},hr:{numbersFrom:"Each play includes one set of numbers from",to:"to",selectableNumber:"with a selectable number of",minimumSelection:"and a minimum selection of",winnings:"The winnings are automatically credited to your account."}},a=(e,t)=>{const i=t;return o[void 0!==i&&s.includes(i)?i:"en"][e]},n=class{constructor(t){e(this,t),this.setClientStyling=()=>{let e=document.createElement("style");e.innerHTML=this.clientStyling,this.stylingContainer.prepend(e)},this.setClientStylingURL=()=>{let e=document.createElement("style");setTimeout((()=>{e.innerHTML=this.clientStylingUrlContent,this.stylingContainer.prepend(e)}),1)},this.selectedIndex=0,this.cmsEndpoint=void 0,this.clientStyling="",this.clientStylingUrlContent="",this.lowNumber=void 0,this.highNumber=void 0,this.minimumAllowed=void 0,this.maxinumAllowed=void 0,this.language="en",this.tabContent="",this.limitStylingAppends=!1}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrlContent&&this.setClientStylingURL(),this.limitStylingAppends=!0)}render(){return this.tabContent=t("div",{key:"8c2b3f0f34ccda482fd187218840f9a622698b1f",class:"TabContent",ref:e=>this.stylingContainer=e},a("numbersFrom",this.language)," ",this.lowNumber," ",a("to",this.language)," ",this.highNumber," ",a("selectableNumber",this.language)," ",this.maxinumAllowed," ",a("minimumSelection",this.language)," ",this.minimumAllowed,". ",a("winnings",this.language)),this.selectedIndex+1==2?this.tabContent=t("div",{key:"2950bb6ccdd98761099d12239881ab29da4b2213",class:"TabContent",ref:e=>this.stylingContainer=e},t("ol",{key:"0da821f45e855155003809cb4c84eaa8d25f1f2a"},t("li",{key:"15d4f064c62319c6611baa3693f4ef297309c786"},a("register",this.language)),t("li",{key:"4933c6970d4044aac746abb398f7c255b0484f6a"},a("butTickets",this.language)),t("li",{key:"ffe7cef3e53bd281173384756476acd2e0e8f148"},a("reviewPurchase",this.language)))):this.selectedIndex+1==3&&(this.tabContent=t("div",{key:"296c83d55150c67522cea9cb1fc10f3542c72452",class:"TabContent",ref:e=>this.stylingContainer=e},t("ul",{key:"3fc772a007d0f73e0692021a2f700bab5807bb85"},t("li",{key:"fd6e459a0536261d98e42e37a272f229d152dfb7"},a("odds",this.language)),t("li",{key:"ae7e5bceb217c9ceb1303145ae83f05fddd7dde6"},a("winGame",this.language)),t("li",{key:"a094c7ea0db72683fb134f010d22f02b61f25a4b"},a("claimPrize",this.language))))),this.tabContent}};n.style=":host{display:block}.TabContent{font-size:14px;color:var(--emw--button-text-color, #000);font-weight:normal}";const r=class{constructor(t){e(this,t),this.setClientStyling=()=>{let e=document.createElement("style");e.innerHTML=this.clientStyling,this.stylingContainer.prepend(e)},this.setClientStylingURL=()=>{let e=document.createElement("style");setTimeout((()=>{e.innerHTML=this.clientStylingUrlContent,this.stylingContainer.prepend(e)}),1)},this.disabled=!1,this.label=void 0,this.selected=!1,this.cmsEndpoint=void 0,this.selectedIndex=0,this.tabs=[{label:"How to Play"},{label:"About"},{label:"FAQs"}],this.clientStyling="",this.clientStylingurl="",this.clientStylingUrlContent="",this.lowNumber=void 0,this.highNumber=void 0,this.minimumAllowed=void 0,this.maxinumAllowed=void 0,this.limitStylingAppends=!1}connectedCallback(){}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.setClientStyling(),this.clientStylingUrlContent&&this.setClientStylingURL(),this.limitStylingAppends=!0)}render(){return t("div",{key:"cb91a99a4d5eb99ce625c276894f8b682159c12c",ref:e=>this.stylingContainer=e},t("div",{key:"c57ea36b3e25c605894b7ddf19e5e456f2fa252d",class:"Tabs"},this.tabs.map(((e,i)=>t("button",{class:"TabButton"+(this.selectedIndex==i?" Active":""),onClick:()=>this.selectedIndex=i},e.label)))),t("div",{key:"41fa20ee2cc713af685f902fc496a702464398d1"},t("helper-tab",{key:"fded6e290107cbc06909aee2e2c97e1c1dd76db3","low-number":this.lowNumber,"high-number":this.highNumber,"minimum-allowed":this.minimumAllowed,"maxinum-allowed":this.maxinumAllowed,selectedIndex:this.selectedIndex,"client-styling":this.clientStyling,"client-stylingurl":this.clientStylingurl,"client-styling-url-content":this.clientStylingUrlContent})))}get host(){return i(this)}};r.style='@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");:host{display:block;font-family:"Roboto", sans-serif}.Tabs{display:flex;gap:10px;overflow-x:auto}.TabButton{cursor:pointer;width:auto;border-radius:var(--emw--button-border-radius, 4px);padding:8px 15px;margin:5px 0 10px;border:1px solid var(--emw--color-typography, #009993);background:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));color:var(--emw--button-text-color, #000);font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0;white-space:nowrap}.TabButton:hover{background:var(--emw--color-gray-50, #F1F1F1)}.TabButton.Active{background:var(--emw--color-background, #009993);color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255))}';export{n as helper_tab,r as helper_tabs}

package/dist/types/components/helper-tab/helper-tab.d.ts

@@ -15,10 +15,29 @@ export declare class HelperTab {
      * Client custom styling via url content
      */
     clientStylingUrlContent: string;
+    /**
+     * Minimum number displayed in the board
+     */
+    lowNumber: number;
+    /**
+     * Maximum number displayed in the board
+     */
+    highNumber: number;
+    /**
+     * Minimum number of numbers that can be selected
+     */
+    minimumAllowed: number;
+    /**
+     * Maximum number of numbers that can be selected
+     */
+    maxinumAllowed: number;
+    /**
+     * Language of the widget
+     */
+    language: string;
     tabContent: string;
     private limitStylingAppends;
     private stylingContainer;
-    connectedCallback(): void;
     componentDidRender(): void;
     setClientStyling: () => void;
     setClientStylingURL: () => void;

package/dist/types/components/helper-tabs/helper-tabs.d.ts

@@ -35,6 +35,22 @@ export declare class HelperTabs {
      * Client custom styling via url content
      */
     clientStylingUrlContent: string;
+    /**
+     * Minimum number displayed in the board
+     */
+    lowNumber: number;
+    /**
+     * Maximum number displayed in the board
+     */
+    highNumber: number;
+    /**
+     * Minimum number of numbers that can be selected
+     */
+    minimumAllowed: number;
+    /**
+     * Maximum number of numbers that can be selected
+     */
+    maxinumAllowed: number;
     private limitStylingAppends;
     host: HTMLElement;
     private stylingContainer;

package/dist/types/components.d.ts

@@ -19,6 +19,26 @@ export namespace Components {
           * Endpoing for CMS
          */
         "cmsEndpoint": string;
+        /**
+          * Maximum number displayed in the board
+         */
+        "highNumber": number;
+        /**
+          * Language of the widget
+         */
+        "language": string;
+        /**
+          * Minimum number displayed in the board
+         */
+        "lowNumber": number;
+        /**
+          * Maximum number of numbers that can be selected
+         */
+        "maxinumAllowed": number;
+        /**
+          * Minimum number of numbers that can be selected
+         */
+        "minimumAllowed": number;
         /**
           * Selected index
          */
@@ -45,10 +65,26 @@ export namespace Components {
           * Tell me if it is disabled
          */
         "disabled": boolean;
+        /**
+          * Maximum number displayed in the board
+         */
+        "highNumber": number;
         /**
           * Gimme names or you die
          */
         "label": string;
+        /**
+          * Minimum number displayed in the board
+         */
+        "lowNumber": number;
+        /**
+          * Maximum number of numbers that can be selected
+         */
+        "maxinumAllowed": number;
+        /**
+          * Minimum number of numbers that can be selected
+         */
+        "minimumAllowed": number;
         /**
           * Tell me what tab is selected
          */
@@ -95,6 +131,26 @@ declare namespace LocalJSX {
           * Endpoing for CMS
          */
         "cmsEndpoint"?: string;
+        /**
+          * Maximum number displayed in the board
+         */
+        "highNumber"?: number;
+        /**
+          * Language of the widget
+         */
+        "language"?: string;
+        /**
+          * Minimum number displayed in the board
+         */
+        "lowNumber"?: number;
+        /**
+          * Maximum number of numbers that can be selected
+         */
+        "maxinumAllowed"?: number;
+        /**
+          * Minimum number of numbers that can be selected
+         */
+        "minimumAllowed"?: number;
         /**
           * Selected index
          */
@@ -121,10 +177,26 @@ declare namespace LocalJSX {
           * Tell me if it is disabled
          */
         "disabled"?: boolean;
+        /**
+          * Maximum number displayed in the board
+         */
+        "highNumber"?: number;
         /**
           * Gimme names or you die
          */
         "label"?: string;
+        /**
+          * Minimum number displayed in the board
+         */
+        "lowNumber"?: number;
+        /**
+          * Maximum number of numbers that can be selected
+         */
+        "maxinumAllowed"?: number;
+        /**
+          * Minimum number of numbers that can be selected
+         */
+        "minimumAllowed"?: number;
         /**
           * Tell me what tab is selected
          */

package/dist/types/utils/locale.utils.d.ts

@@ -0,0 +1 @@
+export declare const translate: (key: string, customLang?: any) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/helper-tabs",
-  "version": "1.52.5",
+  "version": "1.53.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",

package/dist/helper-tabs/p-34cddd95.entry.js

@@ -1 +0,0 @@
-import{r as t,h as e,g as s}from"./p-8be01f9b.js";const i=class{constructor(e){t(this,e),this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.setClientStylingURL=()=>{let t=document.createElement("style");setTimeout((()=>{t.innerHTML=this.clientStylingUrlContent,this.stylingContainer.prepend(t)}),1)},this.selectedIndex=0,this.cmsEndpoint=void 0,this.clientStyling="",this.clientStylingUrlContent="",this.tabContent="",this.limitStylingAppends=!1}connectedCallback(){}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrlContent&&this.setClientStylingURL(),this.limitStylingAppends=!0)}render(){return this.tabContent=e("div",{key:"d69c61827b4fb6d934c72b0b2d37d72fca307575",class:"TabContent",ref:t=>this.stylingContainer=t},"Each play includes one set of numbers from 1 to 21 with a selectable number of 8 and a second, 4-digit set of numbers, with a minimum selection of 1. Draws are held every 5 minutes and the winnings are automatically credited to your account."),this.selectedIndex+1==2?this.tabContent=e("div",{key:"ab912cbb3bc3e88ecf8fe5f8f0e7eb16460100bd",class:"TabContent",ref:t=>this.stylingContainer=t},e("ol",{key:"17bed41dffe7d5578452ee13a47b442d10366ce2"},e("li",{key:"cf0da42f07cf92f5cea9c9f504c8836e528a5708"},"Register or Login"),e("li",{key:"4a0339df365c6b1a37b8a74c5022a56197e870db"},"Buy tickets. Select 'Buy Tickets' to pick your numbers. Want us to automatically generate random numbers for you? Choose “I feel lucky”."),e("li",{key:"3f29a9b17c1059493648247868b83eb71241b8bd"},"Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!"))):this.selectedIndex+1==3&&(this.tabContent=e("div",{key:"ceac54698e0e5c55a049600f02e8f413a76a1c33",class:"TabContent",ref:t=>this.stylingContainer=t},e("ul",{key:"426d89c86a1d44f6d515bc1a7902e43317127939"},e("li",{key:"457a225564399001dcab48097578174a27231ca7"},"What are my odds of winning?"),e("li",{key:"d35220f2aca215eff391cab54d719f18ef906c77"},"How can I find out if I’ve won a draw game?"),e("li",{key:"fcd560ee4b6740c319cf0f98a0b98da8fd9e14a4"},"How do I claim my prize?")))),this.tabContent}};i.style=":host{display:block}.TabContent{font-size:14px;color:#000;font-weight:normal}";const a=class{constructor(e){t(this,e),this.setClientStyling=()=>{let t=document.createElement("style");t.innerHTML=this.clientStyling,this.stylingContainer.prepend(t)},this.setClientStylingURL=()=>{let t=document.createElement("style");setTimeout((()=>{t.innerHTML=this.clientStylingUrlContent,this.stylingContainer.prepend(t)}),1)},this.disabled=!1,this.label=void 0,this.selected=!1,this.cmsEndpoint=void 0,this.selectedIndex=0,this.tabs=[{label:"How to Play"},{label:"About"},{label:"FAQs"}],this.clientStyling="",this.clientStylingurl="",this.clientStylingUrlContent="",this.limitStylingAppends=!1}connectedCallback(){}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.setClientStyling(),this.clientStylingUrlContent&&this.setClientStylingURL(),this.limitStylingAppends=!0)}render(){return e("div",{key:"841b2a4b84f2ecdaf692b9cab2eac4b3413186e7",ref:t=>this.stylingContainer=t},e("div",{key:"4c5d57e669f9f45d204bff8a85ca89a0574c4627",class:"Tabs"},this.tabs.map(((t,s)=>e("button",{class:"TabButton"+(this.selectedIndex==s?" Active":""),onClick:()=>this.selectedIndex=s},t.label)))),e("div",{key:"7ba983dec3b0355f390b19191d0d823914f09037"},e("helper-tab",{key:"e6c7739d50948582d8d14d530828508b4cb90d6e",selectedIndex:this.selectedIndex,"client-styling":this.clientStyling,"client-stylingurl":this.clientStylingurl,"client-styling-url-content":this.clientStylingUrlContent})))}get host(){return s(this)}};a.style='@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");:host{display:block;font-family:"Roboto", sans-serif}.Tabs{display:flex;gap:10px;overflow-x:auto}.TabButton{cursor:pointer;width:auto;border-radius:4px;padding:8px 15px;margin:5px 0 10px;border:1px solid #009993;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0;white-space:nowrap}.TabButton:hover{background:#F1F1F1}.TabButton.Active{background:#009993;color:#FFF}';export{i as helper_tab,a as helper_tabs}