@everymatrix/helper-tabs 1.52.6 → 1.53.10

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

@@ -1,11 +1,79 @@
-import { r as registerInstance, h, g as getElement } from './index-93aaed58.js';
+import { r as registerInstance, h, g as getElement } from './index-308251f5.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 {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Selected index
+         */
+        this.selectedIndex = 0;
+        /**
+         * Client custom styling via string
+         */
+        this.clientStyling = '';
+        /**
+         * Client custom styling via url content
+         */
+        this.clientStylingUrlContent = '';
+        /**
+         * Language of the widget
+         */
+        this.language = 'en';
+        this.tabContent = '';
+        this.limitStylingAppends = false;
         this.setClientStyling = () => {
             let sheet = document.createElement('style');
             sheet.innerHTML = this.clientStyling;
@@ -18,17 +86,6 @@ const HelperTab = class {
                 this.stylingContainer.prepend(cssFile);
             }, 1);
         };
-        this.selectedIndex = 0;
-        this.cmsEndpoint = undefined;
-        this.clientStyling = '';
-        this.clientStylingUrlContent = '';
-        this.tabContent = '';
-        this.limitStylingAppends = false;
-    }
-    connectedCallback() {
-        /**
-         * fetch(cmsEndpoint + / + / + selectedIndex)
-         */
     }
     componentDidRender() {
         // start custom styling area
@@ -42,24 +99,53 @@ 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 {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Tell me if it is disabled
+         */
+        this.disabled = false;
+        /**
+       * Tell me what tab is selected
+       */
+        this.selected = false;
+        /**
+         * Default selected index
+         */
+        this.selectedIndex = 0;
+        /**
+         * Tabs details
+         */
+        this.tabs = [{ label: 'How to Play' }, { label: 'About' }, { label: 'FAQs' }];
+        /**
+         * Client custom styling via string
+         */
+        this.clientStyling = '';
+        /**
+         * Client custom styling via url
+         */
+        this.clientStylingurl = '';
+        /**
+         * Client custom styling via url content
+         */
+        this.clientStylingUrlContent = '';
+        this.limitStylingAppends = false;
         this.setClientStyling = () => {
             let sheet = document.createElement('style');
             sheet.innerHTML = this.clientStyling;
@@ -72,16 +158,6 @@ const HelperTabs = class {
                 this.stylingContainer.prepend(cssFile);
             }, 1);
         };
-        this.disabled = false;
-        this.label = undefined;
-        this.selected = false;
-        this.cmsEndpoint = undefined;
-        this.selectedIndex = 0;
-        this.tabs = [{ label: 'How to Play' }, { label: 'About' }, { label: 'FAQs' }];
-        this.clientStyling = '';
-        this.clientStylingurl = '';
-        this.clientStylingUrlContent = '';
-        this.limitStylingAppends = false;
     }
     connectedCallback() {
     }
@@ -97,7 +173,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

@@ -1,9 +1,9 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-93aaed58.js';
-export { s as setNonce } from './index-93aaed58.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-308251f5.js';
+export { s as setNonce } from './index-308251f5.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
- Stencil Client Patch Browser v4.22.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.25.1 | MIT Licensed | https://stenciljs.com
  */
 var patchBrowser = () => {
   const importMeta = import.meta.url;
@@ -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);
 });