@everymatrix/helper-tabs 0.1.2 → 0.1.6

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ba9ede9f.js');
 
-const helperTabCss = ":host{display:block}";
+const helperTabCss = ":host{display:block}.TabContent{font-size:14px;color:#000;font-weight:normal}";
 
 const HelperTab = class {
   constructor(hostRef) {
@@ -13,19 +13,22 @@ const HelperTab = class {
      * Selected index
      */
     this.selectedIndex = 0;
+    this.tabContent = '';
   }
-  /**
- * Endpoing for CMS
- */
   connectedCallback() {
     /**
      * fetch(cmsEndpoint + / + / + selectedIndex)
      */
   }
   render() {
-    return [
-      index.h("div", null, "Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.", this.selectedIndex + 1)
-    ];
+    this.tabContent = index.h("div", { class: "TabContent" }, "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.");
+    if (this.selectedIndex + 1 == 2) {
+      this.tabContent = index.h("div", { class: "TabContent" }, index.h("ol", null, index.h("li", null, "Register or Login"), index.h("li", null, "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", null, "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!")));
+    }
+    else if (this.selectedIndex + 1 == 3) {
+      this.tabContent = index.h("div", { class: "TabContent" }, index.h("ul", null, index.h("li", null, "What are my odds of winning?"), index.h("li", null, "How can I find out if I\u2019ve won a draw game?"), index.h("li", null, "How do I claim my prize?")));
+    }
+    return (this.tabContent);
   }
 };
 HelperTab.style = helperTabCss;
@@ -50,7 +53,7 @@ const HelperTabs = class {
     /**
      * Tabs details
      */
-    this.tabs = [{ label: 'Draw Details' }, { label: 'Winnings' }, { label: 'How to Play' }, { label: 'Game Odds' }, { label: 'FAQs' }];
+    this.tabs = [{ label: 'How to Play' }, { label: 'About' }, { label: 'FAQs' }];
   }
   connectedCallback() {
   }

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

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["helper-tab_2.cjs",[[1,"helper-tabs",{"disabled":[4],"label":[1],"selected":[4],"cmsEndpoint":[1,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16]}],[1,"helper-tab",{"selectedIndex":[2,"selected-index"],"cmsEndpoint":[1,"cms-endpoint"]}]]]], options);
+  return index.bootstrapLazy([["helper-tab_2.cjs",[[1,"helper-tabs",{"disabled":[4],"label":[1],"selected":[4],"cmsEndpoint":[1,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16]}],[1,"helper-tab",{"selectedIndex":[2,"selected-index"],"cmsEndpoint":[1,"cms-endpoint"],"tabContent":[32]}]]]], options);
 });

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["helper-tab_2.cjs",[[1,"helper-tabs",{"disabled":[4],"label":[1],"selected":[4],"cmsEndpoint":[1,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16]}],[1,"helper-tab",{"selectedIndex":[2,"selected-index"],"cmsEndpoint":[1,"cms-endpoint"]}]]]], options);
+  return index.bootstrapLazy([["helper-tab_2.cjs",[[1,"helper-tabs",{"disabled":[4],"label":[1],"selected":[4],"cmsEndpoint":[1,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16]}],[1,"helper-tab",{"selectedIndex":[2,"selected-index"],"cmsEndpoint":[1,"cms-endpoint"],"tabContent":[32]}]]]], options);
   });
 };
 

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

@@ -1,3 +1,9 @@
 :host {
   display: block;
+}
+
+.TabContent {
+  font-size: 14px;
+  color: #000;
+  font-weight: normal;
 }

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

@@ -1,25 +1,34 @@
-import { Component, h, Prop } from '@stencil/core';
+import { Component, h, Prop, State } from '@stencil/core';
 export class HelperTab {
   constructor() {
     /**
      * Selected index
      */
     this.selectedIndex = 0;
+    this.tabContent = '';
   }
-  /**
- * Endpoing for CMS
- */
   connectedCallback() {
     /**
      * fetch(cmsEndpoint + / + / + selectedIndex)
      */
   }
   render() {
-    return [
-      h("div", null,
-        "Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.",
-        this.selectedIndex + 1)
-    ];
+    this.tabContent = h("div", { class: "TabContent" }, "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.");
+    if (this.selectedIndex + 1 == 2) {
+      this.tabContent = h("div", { class: "TabContent" },
+        h("ol", null,
+          h("li", null, "Register or Login"),
+          h("li", null, "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", null, "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!")));
+    }
+    else if (this.selectedIndex + 1 == 3) {
+      this.tabContent = h("div", { class: "TabContent" },
+        h("ul", null,
+          h("li", null, "What are my odds of winning?"),
+          h("li", null, "How can I find out if I\u2019ve won a draw game?"),
+          h("li", null, "How do I claim my prize?")));
+    }
+    return (this.tabContent);
   }
   static get is() { return "helper-tab"; }
   static get encapsulation() { return "shadow"; }
@@ -66,4 +75,7 @@ export class HelperTab {
       "reflect": false
     }
   }; }
+  static get states() { return {
+    "tabContent": {}
+  }; }
 }

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

@@ -16,7 +16,7 @@ export class HelperTabs {
     /**
      * Tabs details
      */
-    this.tabs = [{ label: 'Draw Details' }, { label: 'Winnings' }, { label: 'How to Play' }, { label: 'Game Odds' }, { label: 'FAQs' }];
+    this.tabs = [{ label: 'How to Play' }, { label: 'About' }, { label: 'FAQs' }];
   }
   connectedCallback() {
     if (this.tabs.length == 0) {
@@ -147,7 +147,7 @@ export class HelperTabs {
         "tags": [],
         "text": "Tabs details"
       },
-      "defaultValue": "[{label: 'Draw Details'}, {label: 'Winnings'}, {label: 'How to Play'}, {label: 'Game Odds'}, {label: 'FAQs'}]"
+      "defaultValue": "[{label: 'How to Play'}, {label: 'About'}, {label: 'FAQs'}]"
     }
   }; }
   static get elementRef() { return "host"; }

package/dist/components/helper-tab2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const helperTabCss = ":host{display:block}";
+const helperTabCss = ":host{display:block}.TabContent{font-size:14px;color:#000;font-weight:normal}";
 
 const HelperTab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -11,24 +11,28 @@ const HelperTab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Selected index
      */
     this.selectedIndex = 0;
+    this.tabContent = '';
   }
-  /**
- * Endpoing for CMS
- */
   connectedCallback() {
     /**
      * fetch(cmsEndpoint + / + / + selectedIndex)
      */
   }
   render() {
-    return [
-      h("div", null, "Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.", this.selectedIndex + 1)
-    ];
+    this.tabContent = h("div", { class: "TabContent" }, "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.");
+    if (this.selectedIndex + 1 == 2) {
+      this.tabContent = h("div", { class: "TabContent" }, h("ol", null, h("li", null, "Register or Login"), h("li", null, "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", null, "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!")));
+    }
+    else if (this.selectedIndex + 1 == 3) {
+      this.tabContent = h("div", { class: "TabContent" }, h("ul", null, h("li", null, "What are my odds of winning?"), h("li", null, "How can I find out if I\u2019ve won a draw game?"), h("li", null, "How do I claim my prize?")));
+    }
+    return (this.tabContent);
   }
   static get style() { return helperTabCss; }
 }, [1, "helper-tab", {
     "selectedIndex": [2, "selected-index"],
-    "cmsEndpoint": [1, "cms-endpoint"]
+    "cmsEndpoint": [1, "cms-endpoint"],
+    "tabContent": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
@@ -43,5 +47,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { HelperTab as H, defineCustomElement as d };

package/dist/components/helper-tabs.js

@@ -23,7 +23,7 @@ const HelperTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     /**
      * Tabs details
      */
-    this.tabs = [{ label: 'Draw Details' }, { label: 'Winnings' }, { label: 'How to Play' }, { label: 'Game Odds' }, { label: 'FAQs' }];
+    this.tabs = [{ label: 'How to Play' }, { label: 'About' }, { label: 'FAQs' }];
   }
   connectedCallback() {
   }
@@ -58,6 +58,7 @@ function defineCustomElement$1() {
       break;
   } });
 }
+defineCustomElement$1();
 
 const HelperTabs = HelperTabs$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index-9a1fb055.js';
 
-const helperTabCss = ":host{display:block}";
+const helperTabCss = ":host{display:block}.TabContent{font-size:14px;color:#000;font-weight:normal}";
 
 const HelperTab = class {
   constructor(hostRef) {
@@ -9,19 +9,22 @@ const HelperTab = class {
      * Selected index
      */
     this.selectedIndex = 0;
+    this.tabContent = '';
   }
-  /**
- * Endpoing for CMS
- */
   connectedCallback() {
     /**
      * fetch(cmsEndpoint + / + / + selectedIndex)
      */
   }
   render() {
-    return [
-      h("div", null, "Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.", this.selectedIndex + 1)
-    ];
+    this.tabContent = h("div", { class: "TabContent" }, "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.");
+    if (this.selectedIndex + 1 == 2) {
+      this.tabContent = h("div", { class: "TabContent" }, h("ol", null, h("li", null, "Register or Login"), h("li", null, "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", null, "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!")));
+    }
+    else if (this.selectedIndex + 1 == 3) {
+      this.tabContent = h("div", { class: "TabContent" }, h("ul", null, h("li", null, "What are my odds of winning?"), h("li", null, "How can I find out if I\u2019ve won a draw game?"), h("li", null, "How do I claim my prize?")));
+    }
+    return (this.tabContent);
   }
 };
 HelperTab.style = helperTabCss;
@@ -46,7 +49,7 @@ const HelperTabs = class {
     /**
      * Tabs details
      */
-    this.tabs = [{ label: 'Draw Details' }, { label: 'Winnings' }, { label: 'How to Play' }, { label: 'Game Odds' }, { label: 'FAQs' }];
+    this.tabs = [{ label: 'How to Play' }, { label: 'About' }, { label: 'FAQs' }];
   }
   connectedCallback() {
   }

package/dist/esm/helper-tabs.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["helper-tab_2",[[1,"helper-tabs",{"disabled":[4],"label":[1],"selected":[4],"cmsEndpoint":[1,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16]}],[1,"helper-tab",{"selectedIndex":[2,"selected-index"],"cmsEndpoint":[1,"cms-endpoint"]}]]]], options);
+  return bootstrapLazy([["helper-tab_2",[[1,"helper-tabs",{"disabled":[4],"label":[1],"selected":[4],"cmsEndpoint":[1,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16]}],[1,"helper-tab",{"selectedIndex":[2,"selected-index"],"cmsEndpoint":[1,"cms-endpoint"],"tabContent":[32]}]]]], options);
 });

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["helper-tab_2",[[1,"helper-tabs",{"disabled":[4],"label":[1],"selected":[4],"cmsEndpoint":[1,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16]}],[1,"helper-tab",{"selectedIndex":[2,"selected-index"],"cmsEndpoint":[1,"cms-endpoint"]}]]]], options);
+  return bootstrapLazy([["helper-tab_2",[[1,"helper-tabs",{"disabled":[4],"label":[1],"selected":[4],"cmsEndpoint":[1,"cms-endpoint"],"selectedIndex":[1538,"selected-index"],"tabs":[16]}],[1,"helper-tab",{"selectedIndex":[2,"selected-index"],"cmsEndpoint":[1,"cms-endpoint"],"tabContent":[32]}]]]], options);
   });
 };
 

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

@@ -1 +1 @@
-import{p as e,b as s}from"./p-39661e66.js";(()=>{const s=import.meta.url,t={};return""!==s&&(t.resourcesUrl=new URL(".",s).href),e(t)})().then((e=>s([["p-191f4340",[[1,"helper-tabs",{disabled:[4],label:[1],selected:[4],cmsEndpoint:[1,"cms-endpoint"],selectedIndex:[1538,"selected-index"],tabs:[16]}],[1,"helper-tab",{selectedIndex:[2,"selected-index"],cmsEndpoint:[1,"cms-endpoint"]}]]]],e)));
+import{p as e,b as t}from"./p-39661e66.js";(()=>{const t=import.meta.url,n={};return""!==t&&(n.resourcesUrl=new URL(".",t).href),e(n)})().then((e=>t([["p-fb217735",[[1,"helper-tabs",{disabled:[4],label:[1],selected:[4],cmsEndpoint:[1,"cms-endpoint"],selectedIndex:[1538,"selected-index"],tabs:[16]}],[1,"helper-tab",{selectedIndex:[2,"selected-index"],cmsEndpoint:[1,"cms-endpoint"],tabContent:[32]}]]]],e)));

package/dist/helper-tabs/p-fb217735.entry.js

@@ -0,0 +1 @@
+import{r as t,h as e,g as o}from"./p-39661e66.js";const s=class{constructor(e){t(this,e),this.selectedIndex=0,this.tabContent=""}connectedCallback(){}render(){return this.tabContent=e("div",{class:"TabContent"},"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",{class:"TabContent"},e("ol",null,e("li",null,"Register or Login"),e("li",null,"Buy tickets. Select 'Buy Tickets' to pick your numbers. Want us to automatically generate random numbers for you? Choose “I feel lucky”."),e("li",null,"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",{class:"TabContent"},e("ul",null,e("li",null,"What are my odds of winning?"),e("li",null,"How can I find out if I’ve won a draw game?"),e("li",null,"How do I claim my prize?")))),this.tabContent}};s.style=":host{display:block}.TabContent{font-size:14px;color:#000;font-weight:normal}";const a=class{constructor(e){t(this,e),this.disabled=!1,this.selected=!1,this.selectedIndex=0,this.tabs=[{label:"How to Play"},{label:"About"},{label:"FAQs"}]}connectedCallback(){}render(){return e("div",null,e("div",{class:"Tabs"},this.tabs.map(((t,o)=>e("button",{class:"TabButton"+(this.selectedIndex==o?" Active":""),onClick:()=>this.selectedIndex=o},t.label)))),e("div",null,e("helper-tab",{selectedIndex:this.selectedIndex})))}get host(){return o(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{s as helper_tab,a as helper_tabs}

package/dist/stencil.config.js

@@ -9,6 +9,8 @@ export const config = {
       esmLoaderPath: '../loader',
     },
     {
+      autoDefineCustomElements: true,
+      generateTypeDeclarations: true,
       type: 'dist-custom-elements',
     },
     {

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

@@ -7,9 +7,7 @@ export declare class HelperTab {
    * Endpoing for CMS
    */
   cmsEndpoint: string;
-  /**
- * Endpoing for CMS
- */
+  tabContent: string;
   connectedCallback(): void;
-  render(): any[];
+  render(): string;
 }

package/package.json

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

package/dist/helper-tabs/p-191f4340.entry.js

@@ -1 +0,0 @@
-import{r as t,h as s,g as o}from"./p-39661e66.js";const a=class{constructor(s){t(this,s),this.selectedIndex=0}connectedCallback(){}render(){return[s("div",null,"Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.",this.selectedIndex+1)]}};a.style=":host{display:block}";const e=class{constructor(s){t(this,s),this.disabled=!1,this.selected=!1,this.selectedIndex=0,this.tabs=[{label:"Draw Details"},{label:"Winnings"},{label:"How to Play"},{label:"Game Odds"},{label:"FAQs"}]}connectedCallback(){}render(){return s("div",null,s("div",{class:"Tabs"},this.tabs.map(((t,o)=>s("button",{class:"TabButton"+(this.selectedIndex==o?" Active":""),onClick:()=>this.selectedIndex=o},t.label)))),s("div",null,s("helper-tab",{selectedIndex:this.selectedIndex})))}get host(){return o(this)}};e.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{a as helper_tab,e as helper_tabs}