@everymatrix/helper-tabs 0.0.3

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1c312caa.js');
+
+/*
+ Stencil Client Patch Esm v2.17.0 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+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);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,13 @@
+{
+  "entries": [
+    "./components/helper-tab/helper-tab.js",
+    "./components/helper-tabs/helper-tabs.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.17.0",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,69 @@
+import { Component, h, Prop } from '@stencil/core';
+export class HelperTab {
+  constructor() {
+    /**
+     * Selected index
+     */
+    this.selectedIndex = 0;
+  }
+  /**
+ * 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)
+    ];
+  }
+  static get is() { return "helper-tab"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["helper-tab.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["helper-tab.css"]
+  }; }
+  static get properties() { return {
+    "selectedIndex": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Selected index"
+      },
+      "attribute": "selected-index",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "cmsEndpoint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Endpoing for CMS"
+      },
+      "attribute": "cms-endpoint",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,34 @@
+@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;
+}

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

@@ -0,0 +1,154 @@
+import { Component, Prop, Element, 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: 'Draw Details' }, { label: 'Winnings' }, { label: 'How to Play' }, { label: 'Game Odds' }, { label: 'FAQs' }];
+  }
+  connectedCallback() {
+    if (this.tabs.length == 0) {
+      // fetch CMS data
+    }
+  }
+  render() {
+    return (h("div", null,
+      h("div", { class: "Tabs" }, this.tabs.map((tab, index) => h("button", { class: 'TabButton' + (this.selectedIndex == index ? ' Active' : ''), onClick: () => this.selectedIndex = index }, tab.label))),
+      h("div", null,
+        h("helper-tab", { selectedIndex: this.selectedIndex }))));
+  }
+  static get is() { return "helper-tabs"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["helper-tabs.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["helper-tabs.css"]
+  }; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Tell me if it is disabled"
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Gimme names or you die"
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "selected": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Tell me what tab is selected"
+      },
+      "attribute": "selected",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "cmsEndpoint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Endpoing for CMS"
+      },
+      "attribute": "cms-endpoint",
+      "reflect": false
+    },
+    "selectedIndex": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Default selected index"
+      },
+      "attribute": "selected-index",
+      "reflect": true,
+      "defaultValue": "0"
+    },
+    "tabs": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<Object>",
+        "resolved": "Object[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          },
+          "Object": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Tabs details"
+      },
+      "defaultValue": "[{label: 'Draw Details'}, {label: 'Winnings'}, {label: 'How to Play'}, {label: 'Game Odds'}, {label: 'FAQs'}]"
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/index.js

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

package/dist/collection/utils/utils.js

@@ -0,0 +1,33 @@
+export function format(first, middle, last) {
+  return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
+}
+/**
+ * @name isMobile
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
+ * @param {String} userAgent window.navigator.userAgent
+ * @returns {Boolean} true or false
+ */
+export const isMobile = (userAgent) => {
+  return !!(userAgent.toLowerCase().match(/android/i) ||
+    userAgent.toLowerCase().match(/blackberry|bb/i) ||
+    userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+    userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+};
+/**
+ * @name getDevice
+ * @description A method that returns the type of the device
+ * @param {String} userAgent window.navigator.userAgent
+ * @returns {String} Android/iPhone/iPad/PC
+ */
+export const getDevice = (userAgent) => {
+  if (userAgent.toLowerCase().match(/android/i)) {
+    return 'Android';
+  }
+  if (userAgent.toLowerCase().match(/iphone/i)) {
+    return 'iPhone';
+  }
+  if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
+    return 'iPad';
+  }
+  return 'PC';
+};

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface HelperTab extends Components.HelperTab, HTMLElement {}
+export const HelperTab: {
+  prototype: HelperTab;
+  new (): HelperTab;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/helper-tab.js

@@ -0,0 +1,6 @@
+import { H as HelperTab$1, d as defineCustomElement$1 } from './helper-tab2.js';
+
+const HelperTab = HelperTab$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HelperTab, defineCustomElement };

package/dist/components/helper-tab2.js

@@ -0,0 +1,47 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const helperTabCss = ":host{display:block}";
+
+const HelperTab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Selected index
+     */
+    this.selectedIndex = 0;
+  }
+  /**
+ * 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)
+    ];
+  }
+  static get style() { return helperTabCss; }
+}, [1, "helper-tab", {
+    "selectedIndex": [2, "selected-index"],
+    "cmsEndpoint": [1, "cms-endpoint"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["helper-tab"];
+  components.forEach(tagName => { switch (tagName) {
+    case "helper-tab":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HelperTab);
+      }
+      break;
+  } });
+}
+
+export { HelperTab as H, defineCustomElement as d };

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface HelperTabs extends Components.HelperTabs, HTMLElement {}
+export const HelperTabs: {
+  prototype: HelperTabs;
+  new (): HelperTabs;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/helper-tabs.js

@@ -0,0 +1,65 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './helper-tab2.js';
+
+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 HelperTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * 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: 'Draw Details' }, { label: 'Winnings' }, { label: 'How to Play' }, { label: 'Game Odds' }, { label: 'FAQs' }];
+  }
+  connectedCallback() {
+  }
+  render() {
+    return (h("div", null, h("div", { class: "Tabs" }, this.tabs.map((tab, index) => h("button", { class: 'TabButton' + (this.selectedIndex == index ? ' Active' : ''), onClick: () => this.selectedIndex = index }, tab.label))), h("div", null, h("helper-tab", { selectedIndex: this.selectedIndex }))));
+  }
+  get host() { return this; }
+  static get style() { return helperTabsCss; }
+}, [1, "helper-tabs", {
+    "disabled": [4],
+    "label": [1],
+    "selected": [4],
+    "cmsEndpoint": [1, "cms-endpoint"],
+    "selectedIndex": [1538, "selected-index"],
+    "tabs": [16]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["helper-tabs", "helper-tab"];
+  components.forEach(tagName => { switch (tagName) {
+    case "helper-tabs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HelperTabs$1);
+      }
+      break;
+    case "helper-tab":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HelperTabs = HelperTabs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HelperTabs, defineCustomElement };

package/dist/components/index.d.ts

@@ -0,0 +1,23 @@
+/* HelperTabs custom elements */
+export { HelperTab as HelperTab } from '../types/components/helper-tab/helper-tab';
+export { HelperTabs as HelperTabs } from '../types/components/helper-tabs/helper-tabs';
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1,3 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+export { HelperTab, defineCustomElement as defineCustomElementHelperTab } from './helper-tab.js';
+export { HelperTabs, defineCustomElement as defineCustomElementHelperTabs } from './helper-tabs.js';

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

@@ -0,0 +1,60 @@
+import { r as registerInstance, h, g as getElement } from './index-1d6a1419.js';
+
+const helperTabCss = ":host{display:block}";
+
+const HelperTab = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Selected index
+     */
+    this.selectedIndex = 0;
+  }
+  /**
+ * 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)
+    ];
+  }
+};
+HelperTab.style = helperTabCss;
+
+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 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: 'Draw Details' }, { label: 'Winnings' }, { label: 'How to Play' }, { label: 'Game Odds' }, { label: 'FAQs' }];
+  }
+  connectedCallback() {
+  }
+  render() {
+    return (h("div", null, h("div", { class: "Tabs" }, this.tabs.map((tab, index) => h("button", { class: 'TabButton' + (this.selectedIndex == index ? ' Active' : ''), onClick: () => this.selectedIndex = index }, tab.label))), h("div", null, h("helper-tab", { selectedIndex: this.selectedIndex }))));
+  }
+  get host() { return getElement(this); }
+};
+HelperTabs.style = helperTabsCss;
+
+export { HelperTab as helper_tab, HelperTabs as helper_tabs };

package/dist/esm/helper-tabs.js

@@ -0,0 +1,17 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-1d6a1419.js';
+
+/*
+ Stencil Client Patch Browser v2.17.0 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = import.meta.url;
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return promiseResolve(opts);
+};
+
+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);
+});