@everymatrix/helper-tabs 1.52.6 → 1.53.10

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

@@ -1,6 +1,25 @@
 import { h } from "@stencil/core";
+import { translate } from "../../utils/locale.utils";
 export class HelperTab {
     constructor() {
+        /**
+         * 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;
@@ -13,17 +32,6 @@ export class HelperTab {
                 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
@@ -37,12 +45,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);
     }
@@ -74,6 +82,8 @@ export class HelperTab {
                     "tags": [],
                     "text": "Selected index"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "selected-index",
                 "reflect": true,
                 "defaultValue": "0"
@@ -92,6 +102,8 @@ export class HelperTab {
                     "tags": [],
                     "text": "Endpoing for CMS"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "cms-endpoint",
                 "reflect": true
             },
@@ -109,6 +121,8 @@ export class HelperTab {
                     "tags": [],
                     "text": "Client custom styling via string"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "client-styling",
                 "reflect": true,
                 "defaultValue": "''"
@@ -127,9 +141,107 @@ export class HelperTab {
                     "tags": [],
                     "text": "Client custom styling via url content"
                 },
+                "getter": false,
+                "setter": false,
                 "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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

@@ -1,6 +1,35 @@
 import { h } from "@stencil/core";
 export class HelperTabs {
     constructor() {
+        /**
+         * 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;
@@ -13,16 +42,6 @@ export class HelperTabs {
                 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() {
         if (this.tabs.length == 0) {
@@ -41,7 +60,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"; }
@@ -71,6 +90,8 @@ export class HelperTabs {
                     "tags": [],
                     "text": "Tell me if it is disabled"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
@@ -89,6 +110,8 @@ export class HelperTabs {
                     "tags": [],
                     "text": "Gimme names or you die"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": true
             },
@@ -106,6 +129,8 @@ export class HelperTabs {
                     "tags": [],
                     "text": "Tell me what tab is selected"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "selected",
                 "reflect": true,
                 "defaultValue": "false"
@@ -124,6 +149,8 @@ export class HelperTabs {
                     "tags": [],
                     "text": "Endpoing for CMS"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "cms-endpoint",
                 "reflect": true
             },
@@ -141,6 +168,8 @@ export class HelperTabs {
                     "tags": [],
                     "text": "Default selected index"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "selected-index",
                 "reflect": true,
                 "defaultValue": "0"
@@ -168,6 +197,8 @@ export class HelperTabs {
                     "tags": [],
                     "text": "Tabs details"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "[{label: 'How to Play'}, {label: 'About'}, {label: 'FAQs'}]"
             },
             "clientStyling": {
@@ -184,6 +215,8 @@ export class HelperTabs {
                     "tags": [],
                     "text": "Client custom styling via string"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "client-styling",
                 "reflect": true,
                 "defaultValue": "''"
@@ -202,6 +235,8 @@ export class HelperTabs {
                     "tags": [],
                     "text": "Client custom styling via url"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "client-stylingurl",
                 "reflect": true,
                 "defaultValue": "''"
@@ -220,9 +255,87 @@ export class HelperTabs {
                     "tags": [],
                     "text": "Client custom styling via url content"
                 },
+                "getter": false,
+                "setter": false,
                 "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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];
+};