@everymatrix/lottery-game-page 0.1.2 → 0.1.6

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

@@ -0,0 +1,126 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-65086a23.js');
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const TRANSLATIONS = {
+  en: {
+    deleteTicket: 'Delete ticket'
+  },
+  ro: {
+    deleteTicket: 'Sterge biletul'
+  },
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const helperAccordionCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Header{border-radius:4px 4px 0 0;background:#009993;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none}.Header:hover{background:#00ABA4}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:#fff}.Header .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.HeaderTicketHistory{border-radius:4px;background:#F1F1F1;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none;margin-bottom:5px}.HeaderTicketHistory:hover{background:#00ABA4}.HeaderTicketHistory .Title,.HeaderTicketHistory .Subtitle,.HeaderTicketHistory .Description{margin:0;font-size:14px;color:#000}.HeaderTicketHistory .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.Content{border-radius:0 0 4px 4px;background:#fff;border:1px solid #009993;padding:10px 15px;user-select:none;color:#000;margin-bottom:10px}.ActionButton{cursor:pointer;display:inline-block;border-radius:4px;margin:20px 0 10px;text-transform:uppercase;font-size:12px;text-align:center;padding:8px 20px;min-width:80px;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ActionButton:hover{background:#FF6536;border:1px solid #FF3D00}";
+
+const Accordion = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.accordionEvent = index.createEvent(this, "helperAccordionAction", 7);
+    /**
+   * Flag for ticket history
+   */
+    this.ticketHistoryFlag = false;
+    /**
+     * Title (top header)
+     */
+    this.headerTitle = '';
+    /**
+     * SubTitle (top header)
+     */
+    this.headerSubtitle = '';
+    /**
+     * Description
+     */
+    this.description = '';
+    /**
+     * Enables footer content
+     */
+    this.footer = false;
+    /**
+     * Enables footer button for tab deletion
+     */
+    this.deleteTab = false;
+    /**
+     * Activates postMessages as events for actions from the widget
+     */
+    this.postMessage = false;
+    /**
+     * Name of the event emitter by the action button
+     */
+    this.eventName = 'helperAccordionAction';
+    /**
+     * Collapsed
+     */
+    this.collapsed = true;
+    /**
+     * Language
+     */
+    this.language = 'en';
+  }
+  // @TODO fix the `any` type :)
+  connectedCallback() {
+    this.showContent = !this.collapsed;
+  }
+  toggleContent() {
+    this.showContent = !this.showContent;
+  }
+  deleteAction() {
+    if (this.postMessage) {
+      // @TODO maybe change the name type, this one sucks
+      window.postMessage({ type: this.eventName }, window.location.href);
+    }
+    this.accordionEvent.emit();
+  }
+  render() {
+    return (index.h("div", { class: "Wrapper" }, index.h("div", { class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : 'Header' }, index.h("p", { class: "Title" }, this.headerTitle), index.h("p", { class: "Subtitle" }, this.headerSubtitle), index.h("p", { class: "Subtitle" }, this.description), index.h("span", { class: "Expand", onClick: () => this.toggleContent() }, this.showContent ? '<' : '>')), this.showContent &&
+      index.h("div", null, index.h("div", { class: "Content" }, index.h("slot", { name: 'accordionContent' }), this.footer && this.showContent &&
+        index.h("div", null, this.deleteTab &&
+          index.h("span", { class: "ActionButton", onClick: () => this.deleteAction() }, translate('deleteTicket', this.language)))))));
+  }
+};
+Accordion.style = helperAccordionCss;
+
+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) {
+    index.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' }];
+  }
+  connectedCallback() {
+  }
+  render() {
+    return (index.h("div", null, index.h("div", { 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", null, index.h("helper-tab", { selectedIndex: this.selectedIndex }))));
+  }
+  get host() { return index.getElement(this); }
+};
+HelperTabs.style = helperTabsCss;
+
+exports.helper_accordion = Accordion;
+exports.helper_tabs = HelperTabs;
+
+//# sourceMappingURL=helper-accordion_2.cjs.entry.js.map

package/dist/cjs/helper-accordion_2.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"helper-accordion.helper-tabs.entry.cjs.js","mappings":"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","names":["h","index"],"sources":["../helper-accordion/dist/collection/utils/locale.utils.js","../helper-accordion/dist/collection/components/helper-accordion/helper-accordion.css?tag=helper-accordion&encapsulation=shadow","../helper-accordion/dist/collection/components/helper-accordion/helper-accordion.js","../helper-tabs/dist/collection/components/helper-tabs/helper-tabs.css?tag=helper-tabs&encapsulation=shadow","../helper-tabs/dist/collection/components/helper-tabs/helper-tabs.js"],"sourcesContent":["const DEFAULT_LANGUAGE = 'en';\nconst SUPPORTED_LANGUAGES = ['ro', 'en'];\nconst TRANSLATIONS = {\n  en: {\n    deleteTicket: 'Delete ticket'\n  },\n  ro: {\n    deleteTicket: 'Sterge biletul'\n  },\n};\nexport const translate = (key, customLang) => {\n  const lang = customLang;\n  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];\n};\n","@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");\n:host {\n  display: block;\n  font-family: \"Roboto\", sans-serif;\n}\n\n.Header {\n  border-radius: 4px 4px 0 0;\n  background: #009993;\n  display: flex;\n  gap: 30px;\n  border: 1px solid #009993;\n  padding: 8px 10px;\n  user-select: none;\n}\n.Header:hover {\n  background: #00ABA4;\n}\n.Header .Title,\n.Header .Subtitle,\n.Header .Description {\n  margin: 0;\n  font-size: 14px;\n  color: #fff;\n}\n.Header .Expand {\n  margin-left: auto;\n  color: #FFF;\n  width: 17px;\n  height: 17px;\n  cursor: pointer;\n  text-align: center;\n  transform: rotate(90deg);\n  font-size: 20px;\n  user-select: none;\n}\n\n.HeaderTicketHistory {\n  border-radius: 4px;\n  background: #F1F1F1;\n  display: flex;\n  gap: 30px;\n  border: 1px solid #009993;\n  padding: 8px 10px;\n  user-select: none;\n  margin-bottom: 5px;\n}\n.HeaderTicketHistory:hover {\n  background: #00ABA4;\n}\n.HeaderTicketHistory .Title,\n.HeaderTicketHistory .Subtitle,\n.HeaderTicketHistory .Description {\n  margin: 0;\n  font-size: 14px;\n  color: #000;\n}\n.HeaderTicketHistory .Expand {\n  margin-left: auto;\n  color: #FFF;\n  width: 17px;\n  height: 17px;\n  cursor: pointer;\n  text-align: center;\n  transform: rotate(90deg);\n  font-size: 20px;\n  user-select: none;\n}\n\n.Content {\n  border-radius: 0 0 4px 4px;\n  background: #fff;\n  border: 1px solid #009993;\n  padding: 10px 15px;\n  user-select: none;\n  color: #000;\n  margin-bottom: 10px;\n}\n\n.ActionButton {\n  cursor: pointer;\n  display: inline-block;\n  border-radius: 4px;\n  margin: 20px 0 10px;\n  text-transform: uppercase;\n  font-size: 12px;\n  text-align: center;\n  padding: 8px 20px;\n  min-width: 80px;\n  background: #FF3D00;\n  border: 1px solid #FF3D00;\n  color: #FFF;\n}\n.ActionButton:hover {\n  background: #FF6536;\n  border: 1px solid #FF3D00;\n}","import { Component, Prop, h, State, Event } from '@stencil/core';\nimport { translate } from '../../utils/locale.utils';\nexport class Accordion {\n  constructor() {\n    /**\n   * Flag for ticket history\n   */\n    this.ticketHistoryFlag = false;\n    /**\n     * Title (top header)\n     */\n    this.headerTitle = '';\n    /**\n     * SubTitle (top header)\n     */\n    this.headerSubtitle = '';\n    /**\n     * Description\n     */\n    this.description = '';\n    /**\n     * Enables footer content\n     */\n    this.footer = false;\n    /**\n     * Enables footer button for tab deletion\n     */\n    this.deleteTab = false;\n    /**\n     * Activates postMessages as events for actions from the widget\n     */\n    this.postMessage = false;\n    /**\n     * Name of the event emitter by the action button\n     */\n    this.eventName = 'helperAccordionAction';\n    /**\n     * Collapsed\n     */\n    this.collapsed = true;\n    /**\n     * Language\n     */\n    this.language = 'en';\n  }\n  // @TODO fix the `any` type :)\n  connectedCallback() {\n    this.showContent = !this.collapsed;\n  }\n  toggleContent() {\n    this.showContent = !this.showContent;\n  }\n  deleteAction() {\n    if (this.postMessage) {\n      // @TODO maybe change the name type, this one sucks\n      window.postMessage({ type: this.eventName }, window.location.href);\n    }\n    this.accordionEvent.emit();\n  }\n  render() {\n    return (h(\"div\", { class: \"Wrapper\" },\n      h(\"div\", { class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : 'Header' },\n        h(\"p\", { class: \"Title\" }, this.headerTitle),\n        h(\"p\", { class: \"Subtitle\" }, this.headerSubtitle),\n        h(\"p\", { class: \"Subtitle\" }, this.description),\n        h(\"span\", { class: \"Expand\", onClick: () => this.toggleContent() }, this.showContent ? '<' : '>')),\n      this.showContent &&\n        h(\"div\", null,\n          h(\"div\", { class: \"Content\" },\n            h(\"slot\", { name: 'accordionContent' }),\n            this.footer && this.showContent &&\n              h(\"div\", null, this.deleteTab &&\n                h(\"span\", { class: \"ActionButton\", onClick: () => this.deleteAction() }, translate('deleteTicket', this.language)))))));\n  }\n  static get is() { return \"helper-accordion\"; }\n  static get encapsulation() { return \"shadow\"; }\n  static get originalStyleUrls() { return {\n    \"$\": [\"helper-accordion.scss\"]\n  }; }\n  static get styleUrls() { return {\n    \"$\": [\"helper-accordion.css\"]\n  }; }\n  static get properties() { return {\n    \"ticketHistoryFlag\": {\n      \"type\": \"boolean\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"boolean\",\n        \"resolved\": \"boolean\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Flag for ticket history\"\n      },\n      \"attribute\": \"ticket-history-flag\",\n      \"reflect\": false,\n      \"defaultValue\": \"false\"\n    },\n    \"headerTitle\": {\n      \"type\": \"string\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"string\",\n        \"resolved\": \"string\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Title (top header)\"\n      },\n      \"attribute\": \"header-title\",\n      \"reflect\": false,\n      \"defaultValue\": \"''\"\n    },\n    \"headerSubtitle\": {\n      \"type\": \"string\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"string\",\n        \"resolved\": \"string\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"SubTitle (top header)\"\n      },\n      \"attribute\": \"header-subtitle\",\n      \"reflect\": false,\n      \"defaultValue\": \"''\"\n    },\n    \"description\": {\n      \"type\": \"string\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"string\",\n        \"resolved\": \"string\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Description\"\n      },\n      \"attribute\": \"description\",\n      \"reflect\": false,\n      \"defaultValue\": \"''\"\n    },\n    \"footer\": {\n      \"type\": \"boolean\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"boolean\",\n        \"resolved\": \"boolean\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Enables footer content\"\n      },\n      \"attribute\": \"footer\",\n      \"reflect\": false,\n      \"defaultValue\": \"false\"\n    },\n    \"deleteTab\": {\n      \"type\": \"boolean\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"boolean\",\n        \"resolved\": \"boolean\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Enables footer button for tab deletion\"\n      },\n      \"attribute\": \"delete-tab\",\n      \"reflect\": false,\n      \"defaultValue\": \"false\"\n    },\n    \"postMessage\": {\n      \"type\": \"boolean\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"boolean\",\n        \"resolved\": \"boolean\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Activates postMessages as events for actions from the widget\"\n      },\n      \"attribute\": \"post-message\",\n      \"reflect\": false,\n      \"defaultValue\": \"false\"\n    },\n    \"eventName\": {\n      \"type\": \"string\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"string\",\n        \"resolved\": \"string\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Name of the event emitter by the action button\"\n      },\n      \"attribute\": \"event-name\",\n      \"reflect\": false,\n      \"defaultValue\": \"'helperAccordionAction'\"\n    },\n    \"collapsed\": {\n      \"type\": \"boolean\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"boolean\",\n        \"resolved\": \"boolean\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Collapsed\"\n      },\n      \"attribute\": \"collapsed\",\n      \"reflect\": false,\n      \"defaultValue\": \"true\"\n    },\n    \"language\": {\n      \"type\": \"string\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"string\",\n        \"resolved\": \"string\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Language\"\n      },\n      \"attribute\": \"language\",\n      \"reflect\": false,\n      \"defaultValue\": \"'en'\"\n    }\n  }; }\n  static get states() { return {\n    \"showContent\": {}\n  }; }\n  static get events() { return [{\n      \"method\": \"accordionEvent\",\n      \"name\": \"helperAccordionAction\",\n      \"bubbles\": true,\n      \"cancelable\": true,\n      \"composed\": true,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Action event\"\n      },\n      \"complexType\": {\n        \"original\": \"any\",\n        \"resolved\": \"any\",\n        \"references\": {}\n      }\n    }]; }\n}\n","@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");\n:host {\n  display: block;\n  font-family: \"Roboto\", sans-serif;\n}\n\n.Tabs {\n  display: flex;\n  gap: 10px;\n  overflow-x: auto;\n}\n\n.TabButton {\n  cursor: pointer;\n  width: auto;\n  border-radius: 4px;\n  padding: 8px 15px;\n  margin: 5px 0 10px;\n  border: 1px solid #009993;\n  background: #FFF;\n  color: #000;\n  font-size: 12px;\n  transition: all 0.2s linear;\n  text-align: center;\n  letter-spacing: 0;\n  white-space: nowrap;\n}\n.TabButton:hover {\n  background: #F1F1F1;\n}\n.TabButton.Active {\n  background: #009993;\n  color: #FFF;\n}","import { Component, Prop, Element, h } from '@stencil/core';\nexport class HelperTabs {\n  constructor() {\n    /**\n     * Tell me if it is disabled\n     */\n    this.disabled = false;\n    /**\n   * Tell me what tab is selected\n   */\n    this.selected = false;\n    /**\n     * Default selected index\n     */\n    this.selectedIndex = 0;\n    /**\n     * Tabs details\n     */\n    this.tabs = [{ label: 'How to Play' }, { label: 'About' }, { label: 'FAQs' }];\n  }\n  connectedCallback() {\n    if (this.tabs.length == 0) {\n      // fetch CMS data\n    }\n  }\n  render() {\n    return (h(\"div\", null,\n      h(\"div\", { class: \"Tabs\" }, this.tabs.map((tab, index) => h(\"button\", { class: 'TabButton' + (this.selectedIndex == index ? ' Active' : ''), onClick: () => this.selectedIndex = index }, tab.label))),\n      h(\"div\", null,\n        h(\"helper-tab\", { selectedIndex: this.selectedIndex }))));\n  }\n  static get is() { return \"helper-tabs\"; }\n  static get encapsulation() { return \"shadow\"; }\n  static get originalStyleUrls() { return {\n    \"$\": [\"helper-tabs.scss\"]\n  }; }\n  static get styleUrls() { return {\n    \"$\": [\"helper-tabs.css\"]\n  }; }\n  static get properties() { return {\n    \"disabled\": {\n      \"type\": \"boolean\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"boolean\",\n        \"resolved\": \"boolean\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Tell me if it is disabled\"\n      },\n      \"attribute\": \"disabled\",\n      \"reflect\": false,\n      \"defaultValue\": \"false\"\n    },\n    \"label\": {\n      \"type\": \"string\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"string\",\n        \"resolved\": \"string\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Gimme names or you die\"\n      },\n      \"attribute\": \"label\",\n      \"reflect\": false\n    },\n    \"selected\": {\n      \"type\": \"boolean\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"boolean\",\n        \"resolved\": \"boolean\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Tell me what tab is selected\"\n      },\n      \"attribute\": \"selected\",\n      \"reflect\": false,\n      \"defaultValue\": \"false\"\n    },\n    \"cmsEndpoint\": {\n      \"type\": \"string\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"string\",\n        \"resolved\": \"string\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Endpoing for CMS\"\n      },\n      \"attribute\": \"cms-endpoint\",\n      \"reflect\": false\n    },\n    \"selectedIndex\": {\n      \"type\": \"number\",\n      \"mutable\": true,\n      \"complexType\": {\n        \"original\": \"number\",\n        \"resolved\": \"number\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Default selected index\"\n      },\n      \"attribute\": \"selected-index\",\n      \"reflect\": true,\n      \"defaultValue\": \"0\"\n    },\n    \"tabs\": {\n      \"type\": \"unknown\",\n      \"mutable\": false,\n      \"complexType\": {\n        \"original\": \"Array<Object>\",\n        \"resolved\": \"Object[]\",\n        \"references\": {\n          \"Array\": {\n            \"location\": \"global\"\n          },\n          \"Object\": {\n            \"location\": \"global\"\n          }\n        }\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Tabs details\"\n      },\n      \"defaultValue\": \"[{label: 'How to Play'}, {label: 'About'}, {label: 'FAQs'}]\"\n    }\n  }; }\n  static get elementRef() { return \"host\"; }\n}\n"],"version":3}