@everymatrix/lottery-game-page 0.1.5 → 0.1.6

package/dist/components/helper-accordion2.js

@@ -0,0 +1,118 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.accordionEvent = 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 (h("div", { class: "Wrapper" }, h("div", { class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : 'Header' }, h("p", { class: "Title" }, this.headerTitle), h("p", { class: "Subtitle" }, this.headerSubtitle), h("p", { class: "Subtitle" }, this.description), h("span", { class: "Expand", onClick: () => this.toggleContent() }, this.showContent ? '<' : '>')), this.showContent &&
+      h("div", null, h("div", { class: "Content" }, h("slot", { name: 'accordionContent' }), this.footer && this.showContent &&
+        h("div", null, this.deleteTab &&
+          h("span", { class: "ActionButton", onClick: () => this.deleteAction() }, translate('deleteTicket', this.language)))))));
+  }
+  static get style() { return helperAccordionCss; }
+}, [1, "helper-accordion", {
+    "ticketHistoryFlag": [4, "ticket-history-flag"],
+    "headerTitle": [1, "header-title"],
+    "headerSubtitle": [1, "header-subtitle"],
+    "description": [1],
+    "footer": [4],
+    "deleteTab": [4, "delete-tab"],
+    "postMessage": [4, "post-message"],
+    "eventName": [1, "event-name"],
+    "collapsed": [4],
+    "language": [1],
+    "showContent": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["helper-accordion"];
+  components.forEach(tagName => { switch (tagName) {
+    case "helper-accordion":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Accordion);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { Accordion as A, defineCustomElement as d };
+
+//# sourceMappingURL=helper-accordion2.js.map

package/dist/components/helper-accordion2.js.map

@@ -0,0 +1 @@
+{"file":"helper-accordion2.js","mappings":"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","names":[],"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"],"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"],"version":3}

package/dist/components/helper-filters.js

@@ -0,0 +1,8 @@
+import { H as HelperFilters$1, d as defineCustomElement$1 } from './helper-filters2.js';
+
+const HelperFilters = HelperFilters$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HelperFilters, defineCustomElement };
+
+//# sourceMappingURL=helper-filters.js.map

package/dist/components/helper-filters.js.map

@@ -0,0 +1 @@
+{"file":"helper-filters.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/helper-filters2.js

@@ -0,0 +1,168 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './helper-modal2.js';
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const TRANSLATIONS = {
+  en: {
+    filterOpen: 'Filter',
+    filterClear: 'Clear',
+    filterModalTicketTitle: 'Ticket Results',
+    filterModalDrawTitle: 'Draws Results History',
+    filterTicketPlaceholder: 'Search for a ticket ID',
+    filterDrawPlaceholder: 'Search for a draw ID',
+    filterDateRangePlaceholder: 'Date Range',
+    filterModalButton: 'Search',
+    filterFromCalendar: 'From',
+    filterToCalendar: 'To',
+    filterOrDate: 'or search by date'
+  },
+  ro: {
+    filterOpen: 'Filtrare',
+    filterClear: 'Stergere',
+    filterModalTicketTitle: 'Rezultatele biletelor',
+    filterModalDrawTitle: 'Rezultatele draw-urilor',
+    filterTicketPlaceholder: 'Cauta ID bilet',
+    filterDrawPlaceholder: 'Cauta ID draw',
+    filterDateRangePlaceholder: 'Perioada',
+    filterModalButton: 'Cauta',
+    filterOrDate: 'sau cauta dupa data'
+  },
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const helperFiltersCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.FilterButtonsWrapper{display:flex;justify-content:flex-end;gap:5px}.FilterButtonsWrapper .FilterOpen{cursor:pointer;border-radius:4px;padding:8px 15px;width:max-content;border:1px solid #00958f;background:#00958f;color:#FFF;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterButtonsWrapper .FilterOpen:hover{background:#00958f;color:#FFF}.FilterButtonsWrapper .FilterClear{cursor:pointer;border-radius:4px;padding:8px 15px;width:max-content;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterButtonsWrapper .FilterClear:hover{background:#00958f;color:#FFF}.FilterModalHeader,.FilterModalBody,.FilterModalFooter{display:flex;flex-direction:column;gap:5px;align-items:center;margin:20px 0}.FilterModalHeader .FilterModalTitle,.FilterModalBody .FilterModalTitle,.FilterModalFooter .FilterModalTitle{margin:0;padding:0;font-weight:700;font-size:16px;color:#009993;text-transform:uppercase}.FilterModalHeader .FilterModalSearch,.FilterModalBody .FilterModalSearch,.FilterModalFooter .FilterModalSearch{border-radius:4px;background:#e8ebef;color:#263445;width:100%;height:26px;max-width:280px;padding:5px;font-size:15px;border:none;outline:#009993}.FilterModalHeader .FilterCalendarWrapper,.FilterModalBody .FilterCalendarWrapper,.FilterModalFooter .FilterCalendarWrapper{display:flex;gap:5px}.FilterModalHeader .FilterCalendarWrapper .VaadinDatePicker,.FilterModalBody .FilterCalendarWrapper .VaadinDatePicker,.FilterModalFooter .FilterCalendarWrapper .VaadinDatePicker{width:50%;max-width:143px}.FilterModalHeader .FilterModalButton,.FilterModalBody .FilterModalButton,.FilterModalFooter .FilterModalButton{cursor:pointer;border-radius:4px;padding:8px 60px;width:max-content;margin:5px;border:1px solid #00958f;background:#00958f;color:#FFF;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.FilterModalHeader .FilterModalButton:hover,.FilterModalBody .FilterModalButton:hover,.FilterModalFooter .FilterModalButton:hover{background:#00958f;color:#FFF}.FilterModalHeader p,.FilterModalBody p,.FilterModalFooter p{margin:5px 0}";
+
+const HelperFilters = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.filterDraw = createEvent(this, "filterDraw", 7);
+    this.filterSelection = createEvent(this, "filterSelection", 7);
+    this.filterSelectionReset = createEvent(this, "filterSelectionReset", 7);
+    /**
+     * Check if show the filter option by id
+     */
+    this.showFilterId = true;
+    /**
+     * Choose if filter by draw ID or ticket ID. By default is draw ID.
+     */
+    this.activateTicketSearch = false;
+    /**
+     * Game ID
+     */
+    this.gameId = '';
+    /**
+     * Player ID
+     */
+    this.playerId = '';
+    /**
+     * Session ID
+     */
+    this.session = '';
+    /**
+     * Instead of customEvents the widget triggers postMessages
+     */
+    this.postMessage = false;
+    /**
+     * Language
+     */
+    this.language = 'en';
+    this.showFilterModal = false;
+    this.showClearButton = false;
+    this.filterData = {};
+    this.filterDataReset = { ticketDrawId: '', filterFromCalendar: '', filterToCalendar: '' };
+  }
+  // reset field values each time the filter modal opens
+  componentDidRender() {
+    this.filterData.ticketDrawId = null;
+    this.filterData.filterFromCalendar = null;
+    this.filterData.filterToCalendar = null;
+    // @TODO: to way binding?
+    if (document.getElementById('#FilterById'))
+      document.getElementById('#FilterById').value = '';
+  }
+  filterSelectionHandler(event) {
+    if (this.postMessage)
+      window.postMessage({ type: 'filterSelection', event }, window.location.href);
+    if (this.filterData.ticketDrawId)
+      this.filterDraw.emit(event);
+    if (this.filterData.filterFromCalendar || this.filterData.filterToCalendar)
+      this.filterSelection.emit(event);
+  }
+  filterSelectionResetHandler(event) {
+    if (this.postMessage)
+      window.postMessage({ type: 'filterSelectionReset', event }, window.location.href);
+    this.filterSelectionReset.emit(event);
+  }
+  modalCloseEvent() {
+    this.showFilterModal = false;
+  }
+  // Toggle filter modal
+  toggleFilterModal() {
+    this.showFilterModal = true;
+  }
+  // Filter search
+  filterSearch() {
+    this.modalCloseEvent();
+    this.showClearButton = true;
+    this.filterSelectionHandler(this.filterData);
+  }
+  resetSearch() {
+    this.showClearButton = false;
+    this.filterSelectionResetHandler(this.filterDataReset);
+    this.filterData = {};
+  }
+  handleTicketDrawId(event) {
+    this.filterData.ticketDrawId = event.target.value;
+  }
+  handleFilterFrom(event) {
+    this.filterData.filterFromCalendar = new Date(event.target.value).toISOString();
+  }
+  handleFilterTo(event) {
+    this.filterData.filterToCalendar = new Date(event.target.value).toISOString();
+  }
+  render() {
+    return (h("div", { class: "HelperFilters" }, h("div", { class: "FilterButtonsWrapper" }, h("button", { class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate('filterOpen', this.language)), this.showClearButton ? h("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate('filterClear', this.language)) : null), h("helper-modal", { "title-modal": "Filter Modal", visible: this.showFilterModal }, h("div", { class: "FilterModalHeader" }, h("h3", { class: "FilterModalTitle" }, this.activateTicketSearch ? translate('filterModalTicketTitle', this.language) : translate('filterModalDrawTitle', this.language))), h("div", { class: "FilterModalBody" }, h("input", { id: "FilterById", type: "text", value: this.filterData.ticketDrawId, onInput: (event) => this.handleTicketDrawId(event), class: "FilterModalSearch", placeholder: this.activateTicketSearch ? translate('filterTicketPlaceholder', this.language) : translate('filterDrawPlaceholder', this.language) }), h("p", null, translate('filterOrDate', this.language)), h("div", { class: "FilterCalendarWrapper" })), h("div", { class: "FilterModalFooter" }, h("button", { class: "FilterModalButton", onClick: () => this.filterSearch() }, translate('filterModalButton', this.language))))));
+  }
+  static get style() { return helperFiltersCss; }
+}, [1, "helper-filters", {
+    "showFilterId": [4, "show-filter-id"],
+    "activateTicketSearch": [4, "activate-ticket-search"],
+    "gameId": [1, "game-id"],
+    "playerId": [1, "player-id"],
+    "session": [1],
+    "postMessage": [4, "post-message"],
+    "language": [1],
+    "showFilterModal": [32],
+    "showClearButton": [32],
+    "filterData": [32],
+    "filterDataReset": [32]
+  }, [[0, "modalCloseEvent", "modalCloseEvent"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["helper-filters", "helper-modal"];
+  components.forEach(tagName => { switch (tagName) {
+    case "helper-filters":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HelperFilters);
+      }
+      break;
+    case "helper-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { HelperFilters as H, defineCustomElement as d };
+
+//# sourceMappingURL=helper-filters2.js.map

package/dist/components/helper-filters2.js.map

@@ -0,0 +1 @@
+{"file":"helper-filters2.js","mappings":"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","names":[],"sources":["../helper-filters/dist/collection/utils/locale.utils.js","../helper-filters/dist/collection/components/helper-filters/helper-filters.css?tag=helper-filters&encapsulation=shadow","../helper-filters/dist/collection/components/helper-filters/helper-filters.js"],"sourcesContent":["const DEFAULT_LANGUAGE = 'en';\nconst SUPPORTED_LANGUAGES = ['ro', 'en'];\nconst TRANSLATIONS = {\n  en: {\n    filterOpen: 'Filter',\n    filterClear: 'Clear',\n    filterModalTicketTitle: 'Ticket Results',\n    filterModalDrawTitle: 'Draws Results History',\n    filterTicketPlaceholder: 'Search for a ticket ID',\n    filterDrawPlaceholder: 'Search for a draw ID',\n    filterDateRangePlaceholder: 'Date Range',\n    filterModalButton: 'Search',\n    filterFromCalendar: 'From',\n    filterToCalendar: 'To',\n    filterOrDate: 'or search by date'\n  },\n  ro: {\n    filterOpen: 'Filtrare',\n    filterClear: 'Stergere',\n    filterModalTicketTitle: 'Rezultatele biletelor',\n    filterModalDrawTitle: 'Rezultatele draw-urilor',\n    filterTicketPlaceholder: 'Cauta ID bilet',\n    filterDrawPlaceholder: 'Cauta ID draw',\n    filterDateRangePlaceholder: 'Perioada',\n    filterModalButton: 'Cauta',\n    filterOrDate: 'sau cauta dupa data'\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.FilterButtonsWrapper {\n  display: flex;\n  justify-content: flex-end;\n  gap: 5px;\n}\n.FilterButtonsWrapper .FilterOpen {\n  cursor: pointer;\n  border-radius: 4px;\n  padding: 8px 15px;\n  width: max-content;\n  border: 1px solid #00958f;\n  background: #00958f;\n  color: #FFF;\n  font-size: 12px;\n  transition: all 0.2s linear;\n  text-align: center;\n  letter-spacing: 0;\n}\n.FilterButtonsWrapper .FilterOpen:hover {\n  background: #00958f;\n  color: #FFF;\n}\n.FilterButtonsWrapper .FilterClear {\n  cursor: pointer;\n  border-radius: 4px;\n  padding: 8px 15px;\n  width: max-content;\n  border: 1px solid #00958f;\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}\n.FilterButtonsWrapper .FilterClear:hover {\n  background: #00958f;\n  color: #FFF;\n}\n\n.FilterModalHeader,\n.FilterModalBody,\n.FilterModalFooter {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  align-items: center;\n  margin: 20px 0;\n}\n.FilterModalHeader .FilterModalTitle,\n.FilterModalBody .FilterModalTitle,\n.FilterModalFooter .FilterModalTitle {\n  margin: 0;\n  padding: 0;\n  font-weight: 700;\n  font-size: 16px;\n  color: #009993;\n  text-transform: uppercase;\n}\n.FilterModalHeader .FilterModalSearch,\n.FilterModalBody .FilterModalSearch,\n.FilterModalFooter .FilterModalSearch {\n  border-radius: 4px;\n  background: #e8ebef;\n  color: #263445;\n  width: 100%;\n  height: 26px;\n  max-width: 280px;\n  padding: 5px;\n  font-size: 15px;\n  border: none;\n  outline: #009993;\n}\n.FilterModalHeader .FilterCalendarWrapper,\n.FilterModalBody .FilterCalendarWrapper,\n.FilterModalFooter .FilterCalendarWrapper {\n  display: flex;\n  gap: 5px;\n}\n.FilterModalHeader .FilterCalendarWrapper .VaadinDatePicker,\n.FilterModalBody .FilterCalendarWrapper .VaadinDatePicker,\n.FilterModalFooter .FilterCalendarWrapper .VaadinDatePicker {\n  width: 50%;\n  max-width: 143px;\n}\n.FilterModalHeader .FilterModalButton,\n.FilterModalBody .FilterModalButton,\n.FilterModalFooter .FilterModalButton {\n  cursor: pointer;\n  border-radius: 4px;\n  padding: 8px 60px;\n  width: max-content;\n  margin: 5px;\n  border: 1px solid #00958f;\n  background: #00958f;\n  color: #FFF;\n  font-size: 12px;\n  transition: all 0.2s linear;\n  text-transform: uppercase;\n  text-align: center;\n  letter-spacing: 0;\n}\n.FilterModalHeader .FilterModalButton:hover,\n.FilterModalBody .FilterModalButton:hover,\n.FilterModalFooter .FilterModalButton:hover {\n  background: #00958f;\n  color: #FFF;\n}\n.FilterModalHeader p,\n.FilterModalBody p,\n.FilterModalFooter p {\n  margin: 5px 0;\n}","import { Component, h, State, Prop, Event, Listen } from '@stencil/core';\nimport { translate } from '../../utils/locale.utils';\n// import '@vaadin/date-picker';\n// import '@vaadin/vaadin-date-picker/vaadin-date-picker.js';\nimport '@everymatrix/helper-modal';\nexport class HelperFilters {\n  constructor() {\n    /**\n     * Check if show the filter option by id\n     */\n    this.showFilterId = true;\n    /**\n     * Choose if filter by draw ID or ticket ID. By default is draw ID.\n     */\n    this.activateTicketSearch = false;\n    /**\n     * Game ID\n     */\n    this.gameId = '';\n    /**\n     * Player ID\n     */\n    this.playerId = '';\n    /**\n     * Session ID\n     */\n    this.session = '';\n    /**\n     * Instead of customEvents the widget triggers postMessages\n     */\n    this.postMessage = false;\n    /**\n     * Language\n     */\n    this.language = 'en';\n    this.showFilterModal = false;\n    this.showClearButton = false;\n    this.filterData = {};\n    this.filterDataReset = { ticketDrawId: '', filterFromCalendar: '', filterToCalendar: '' };\n  }\n  // reset field values each time the filter modal opens\n  componentDidRender() {\n    this.filterData.ticketDrawId = null;\n    this.filterData.filterFromCalendar = null;\n    this.filterData.filterToCalendar = null;\n    // @TODO: to way binding?\n    if (document.getElementById('#FilterById'))\n      document.getElementById('#FilterById').value = '';\n  }\n  filterSelectionHandler(event) {\n    if (this.postMessage)\n      window.postMessage({ type: 'filterSelection', event }, window.location.href);\n    if (this.filterData.ticketDrawId)\n      this.filterDraw.emit(event);\n    if (this.filterData.filterFromCalendar || this.filterData.filterToCalendar)\n      this.filterSelection.emit(event);\n    ;\n  }\n  filterSelectionResetHandler(event) {\n    if (this.postMessage)\n      window.postMessage({ type: 'filterSelectionReset', event }, window.location.href);\n    this.filterSelectionReset.emit(event);\n  }\n  modalCloseEvent() {\n    this.showFilterModal = false;\n  }\n  // Toggle filter modal\n  toggleFilterModal() {\n    this.showFilterModal = true;\n  }\n  // Filter search\n  filterSearch() {\n    this.modalCloseEvent();\n    this.showClearButton = true;\n    this.filterSelectionHandler(this.filterData);\n  }\n  resetSearch() {\n    this.showClearButton = false;\n    this.filterSelectionResetHandler(this.filterDataReset);\n    this.filterData = {};\n  }\n  handleTicketDrawId(event) {\n    this.filterData.ticketDrawId = event.target.value;\n  }\n  handleFilterFrom(event) {\n    this.filterData.filterFromCalendar = new Date(event.target.value).toISOString();\n  }\n  handleFilterTo(event) {\n    this.filterData.filterToCalendar = new Date(event.target.value).toISOString();\n  }\n  render() {\n    return (h(\"div\", { class: \"HelperFilters\" },\n      h(\"div\", { class: \"FilterButtonsWrapper\" },\n        h(\"button\", { class: \"FilterOpen\", onClick: () => this.toggleFilterModal() }, translate('filterOpen', this.language)),\n        this.showClearButton ? h(\"button\", { class: \"FilterClear\", onClick: () => this.resetSearch() }, translate('filterClear', this.language)) : null),\n      h(\"helper-modal\", { \"title-modal\": \"Filter Modal\", visible: this.showFilterModal },\n        h(\"div\", { class: \"FilterModalHeader\" },\n          h(\"h3\", { class: \"FilterModalTitle\" }, this.activateTicketSearch ? translate('filterModalTicketTitle', this.language) : translate('filterModalDrawTitle', this.language))),\n        h(\"div\", { class: \"FilterModalBody\" },\n          h(\"input\", { id: \"FilterById\", type: \"text\", value: this.filterData.ticketDrawId, onInput: (event) => this.handleTicketDrawId(event), class: \"FilterModalSearch\", placeholder: this.activateTicketSearch ? translate('filterTicketPlaceholder', this.language) : translate('filterDrawPlaceholder', this.language) }),\n          h(\"p\", null, translate('filterOrDate', this.language)),\n          h(\"div\", { class: \"FilterCalendarWrapper\" })),\n        h(\"div\", { class: \"FilterModalFooter\" },\n          h(\"button\", { class: \"FilterModalButton\", onClick: () => this.filterSearch() }, translate('filterModalButton', this.language))))));\n  }\n  static get is() { return \"helper-filters\"; }\n  static get encapsulation() { return \"shadow\"; }\n  static get originalStyleUrls() { return {\n    \"$\": [\"helper-filters.scss\"]\n  }; }\n  static get styleUrls() { return {\n    \"$\": [\"helper-filters.css\"]\n  }; }\n  static get properties() { return {\n    \"showFilterId\": {\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\": \"Check if show the filter option by id\"\n      },\n      \"attribute\": \"show-filter-id\",\n      \"reflect\": false,\n      \"defaultValue\": \"true\"\n    },\n    \"activateTicketSearch\": {\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\": \"Choose if filter by draw ID or ticket ID. By default is draw ID.\"\n      },\n      \"attribute\": \"activate-ticket-search\",\n      \"reflect\": false,\n      \"defaultValue\": \"false\"\n    },\n    \"gameId\": {\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\": \"Game ID\"\n      },\n      \"attribute\": \"game-id\",\n      \"reflect\": false,\n      \"defaultValue\": \"''\"\n    },\n    \"playerId\": {\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\": \"Player ID\"\n      },\n      \"attribute\": \"player-id\",\n      \"reflect\": false,\n      \"defaultValue\": \"''\"\n    },\n    \"session\": {\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\": \"Session ID\"\n      },\n      \"attribute\": \"session\",\n      \"reflect\": false,\n      \"defaultValue\": \"''\"\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\": \"Instead of customEvents the widget triggers postMessages\"\n      },\n      \"attribute\": \"post-message\",\n      \"reflect\": false,\n      \"defaultValue\": \"false\"\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    \"showFilterModal\": {},\n    \"showClearButton\": {},\n    \"filterData\": {},\n    \"filterDataReset\": {}\n  }; }\n  static get events() { return [{\n      \"method\": \"filterDraw\",\n      \"name\": \"filterDraw\",\n      \"bubbles\": true,\n      \"cancelable\": true,\n      \"composed\": true,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"\"\n      },\n      \"complexType\": {\n        \"original\": \"HelperFilters\",\n        \"resolved\": \"HelperFilters\",\n        \"references\": {\n          \"HelperFilters\": {\n            \"location\": \"global\"\n          }\n        }\n      }\n    }, {\n      \"method\": \"filterSelection\",\n      \"name\": \"filterSelection\",\n      \"bubbles\": true,\n      \"cancelable\": true,\n      \"composed\": true,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"\"\n      },\n      \"complexType\": {\n        \"original\": \"HelperFilters\",\n        \"resolved\": \"HelperFilters\",\n        \"references\": {\n          \"HelperFilters\": {\n            \"location\": \"global\"\n          }\n        }\n      }\n    }, {\n      \"method\": \"filterSelectionReset\",\n      \"name\": \"filterSelectionReset\",\n      \"bubbles\": true,\n      \"cancelable\": true,\n      \"composed\": true,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"\"\n      },\n      \"complexType\": {\n        \"original\": \"HelperFilters\",\n        \"resolved\": \"HelperFilters\",\n        \"references\": {\n          \"HelperFilters\": {\n            \"location\": \"global\"\n          }\n        }\n      }\n    }]; }\n  static get listeners() { return [{\n      \"name\": \"modalCloseEvent\",\n      \"method\": \"modalCloseEvent\",\n      \"target\": undefined,\n      \"capture\": false,\n      \"passive\": false\n    }]; }\n}\n"],"version":3}

package/dist/components/helper-modal.js

@@ -4,3 +4,5 @@ const HelperModal = HelperModal$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { HelperModal, defineCustomElement };
+
+//# sourceMappingURL=helper-modal.js.map

package/dist/components/helper-modal.js.map

@@ -0,0 +1 @@
+{"file":"helper-modal.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/helper-modal2.js

@@ -57,3 +57,5 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { HelperModal as H, defineCustomElement as d };
+
+//# sourceMappingURL=helper-modal2.js.map

package/dist/components/helper-modal2.js.map

@@ -0,0 +1 @@
+{"file":"helper-modal2.js","mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACO,MAAM,QAAQ,GAAG,CAAC,SAAS,KAAK;AACvC,EAAE,OAAO,CAAC,EAAE,SAAS,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC;AACrD,IAAI,SAAS,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC;AACnD,IAAI,SAAS,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC;AACtD,IAAI,SAAS,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,kDAAkD,CAAC,CAAC,CAAC;AACvF,CAAC;;ACXD,MAAM,cAAc,GAAG,y/BAAy/B;;MCEngC,WAAW;EACtB;;;;;;;;IAIE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACpB,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC;GAC7C;EACD,sBAAsB;IACpB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;GACpB;;EAED,MAAM;IACJ,SAAS,IAAI,CAAC,OAAO;MACnB,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,GAAG,uCAAuC,GAAG,oBAAoB,EAAE,EAC/F,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,uCAAuC,EAAE,EACzD,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,oBAAoB,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,2BAA2B,GAAG,EAAE,CAAC,EAAE,EACtG,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,kBAAkB,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,yBAAyB,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,EAC5J,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG;GAC9B;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../helper-modal/dist/collection/utils/utils.js","../helper-modal/dist/collection/components/helper-modal/helper-modal.css?tag=helper-modal&encapsulation=shadow","../helper-modal/dist/collection/components/helper-modal/helper-modal.js"],"sourcesContent":["/**\n * @name isMobile\n * @description A method that returns if the browser used to access the app is from a mobile device or not\n * @param {String} userAgent window.navigator.userAgent\n * @returns {Boolean} true or false\n */\nexport const isMobile = (userAgent) => {\n  return !!(userAgent.toLowerCase().match(/android/i) ||\n    userAgent.toLowerCase().match(/blackberry|bb/i) ||\n    userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||\n    userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));\n};\n/**\n * @name getDevice\n * @description A method that returns the type of the device\n * @param {String} userAgent window.navigator.userAgent\n * @returns {String} Android/iPhone/iPad/PC\n */\nexport const getDevice = (userAgent) => {\n  if (userAgent.toLowerCase().match(/android/i)) {\n    return 'Android';\n  }\n  if (userAgent.toLowerCase().match(/iphone/i)) {\n    return 'iPhone';\n  }\n  if (userAgent.toLowerCase().match(/ipad|ipod/i)) {\n    return 'iPad';\n  }\n  return 'PC';\n};\n",":host {\n  display: block;\n}\n\n.HelperModalWrapper {\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.7);\n  opacity: 0;\n  visibility: hidden;\n  transform: scale(1.1);\n  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;\n  z-index: 1;\n}\n\n.HelperModalVisible {\n  opacity: 1;\n  visibility: visible;\n  transform: scale(1);\n  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;\n}\n\n.HelperModalContent {\n  position: relative;\n  border: solid 1px #848e97;\n  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.007);\n  font-size: 14px;\n  padding: 10px 10px 5px 10px;\n  background-color: #fff;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border-radius: 4px;\n  width: 600px;\n  max-height: 600px;\n  overflow-y: scroll;\n}\n\n.HelperModalMobileContent {\n  background: #FFF;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border-radius: 4px;\n  width: 80%;\n  max-height: 350px;\n}\n\n.HelperModalClose {\n  cursor: pointer;\n  position: absolute;\n  top: 15px;\n  right: 15px;\n  font-size: 20px;\n  color: #000;\n}\n\n.HelperModalMobileClose {\n  position: absolute;\n  top: 15px;\n  right: 15px;\n  font-size: 20px;\n  color: #000;\n}","import { Component, Event, h, Prop } from '@stencil/core';\nimport { isMobile } from \"../../utils/utils\";\nexport class HelperModal {\n  constructor() {\n    /**\n     * Toggles if the helper is visible or not\n     */\n    this.visible = true;\n    this.userAgent = window.navigator.userAgent;\n  }\n  handleHelperModalClose() {\n    this.visible = false;\n    this.cancel.emit();\n  }\n  ;\n  render() {\n    return ((this.visible &&\n      h(\"div\", { class: this.visible ? \"HelperModalWrapper HelperModalVisible\" : \"HelperModalWrapper\" },\n        h(\"div\", { class: \"HelperModalWrapper HelperModalVisible\" },\n          h(\"div\", { class: \"HelperModalContent\" + (isMobile(this.userAgent) ? ' HelperModalMobileContent' : '') },\n            h(\"span\", { class: \"HelperModalClose\" + (isMobile(this.userAgent) ? ' HelperModalMobileClose' : ''), onClick: this.handleHelperModalClose.bind(this) }, \"X\"),\n            h(\"slot\", null))))));\n  }\n  static get is() { return \"helper-modal\"; }\n  static get encapsulation() { return \"shadow\"; }\n  static get originalStyleUrls() { return {\n    \"$\": [\"helper-modal.scss\"]\n  }; }\n  static get styleUrls() { return {\n    \"$\": [\"helper-modal.css\"]\n  }; }\n  static get properties() { return {\n    \"titleModal\": {\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\": \"Modal title\"\n      },\n      \"attribute\": \"title-modal\",\n      \"reflect\": false\n    },\n    \"visible\": {\n      \"type\": \"boolean\",\n      \"mutable\": true,\n      \"complexType\": {\n        \"original\": \"boolean\",\n        \"resolved\": \"boolean\",\n        \"references\": {}\n      },\n      \"required\": false,\n      \"optional\": false,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"Toggles if the helper is visible or not\"\n      },\n      \"attribute\": \"visible\",\n      \"reflect\": true,\n      \"defaultValue\": \"true\"\n    }\n  }; }\n  static get events() { return [{\n      \"method\": \"cancel\",\n      \"name\": \"modalCloseEvent\",\n      \"bubbles\": true,\n      \"cancelable\": true,\n      \"composed\": true,\n      \"docs\": {\n        \"tags\": [],\n        \"text\": \"The event triggered when the modal is closed\"\n      },\n      \"complexType\": {\n        \"original\": \"any\",\n        \"resolved\": \"any\",\n        \"references\": {}\n      }\n    }]; }\n}\n"],"version":3}

package/dist/components/helper-pagination.js

@@ -0,0 +1,218 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+/**
+ * @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
+ */
+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));
+};
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const TRANSLATIONS = {
+  en: {
+    firstPage: 'First',
+    previousPage: 'Previous',
+    nextPage: 'Next',
+    lastPage: 'Last'
+  },
+  ro: {
+    firstPage: 'Prima',
+    previousPage: 'Anterior',
+    nextPage: 'Urmatoarea',
+    lastPage: 'Ultima'
+  },
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const helperPaginationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}#PaginationContainer{width:100%;margin-top:20px;display:inline-flex;justify-content:space-between;align-items:center}.LeftItems button:not(:first-child),.RightItems button:not(:last-child){margin:0 10px}.LeftItems button,.RightItems button{padding:0;background-color:#009993;border-color:#009993}.PaginationArea{display:inline-flex;gap:10px;list-style:none}.PaginationArea li{margin:0;padding:0}.PaginationArea li button{width:24px;height:24px;display:flex;border:0;padding:0;justify-content:center;align-items:center;background-color:transparent;color:#000;cursor:pointer;pointer-events:all}.PaginationItem.ActiveItem button{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem button:disabled{pointer-events:none;cursor:not-allowed}.PaginationItem button:hover,.PaginationItem button:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}button{width:100px;height:32px;border:1px solid #524e52;border-radius:5px;background:#524e52;color:#fff;font-size:14px;font:inherit;cursor:pointer;transition:all 0.1s linear;text-transform:uppercase;text-align:center;letter-spacing:0}button:hover,button:active{background:#004D4A;border-color:#004D4A}button:disabled{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){button{width:90px;font-size:12px}}@media screen and (max-width: 480px){button{width:70px;font-size:10px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){button{width:58px;font-size:10px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem button:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem button:hover{background:#009993;border-color:#009993;color:#fff}}";
+
+const HelperPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.hpPageChange = createEvent(this, "hpPageChange", 7);
+    /**
+     * First page boolean value - determines if the page is disabled or active
+     */
+    this.firstPage = false;
+    /**
+     * Previous page boolean value - determines if the page is disabled or active
+     */
+    this.previousPage = false;
+    /**
+     * The received offset
+     */
+    this.offset = 0;
+    /**
+     * The received limit for the number of pages
+     */
+    this.limit = 1;
+    /**
+     * The received total number of pages
+     */
+    this.total = 1;
+    /**
+     * Language
+     */
+    this.language = 'en';
+    /**
+     * In component working variable for the array of pages
+     */
+    this.pagesArray = [];
+    /**
+     * In component working variable for last page
+     */
+    this.endInt = 0;
+    this.userAgent = window.navigator.userAgent;
+    this.currentPage = 1;
+    /**
+     * Navigation logic
+     */
+    this.navigateTo = (navigationPage) => {
+      switch (navigationPage) {
+        case 'firstPage':
+          this.offsetInt = 0;
+          break;
+        case 'lastPage':
+          this.offsetInt = this.endInt * this.limitInt;
+          break;
+        case 'previousPage':
+          this.offsetInt -= 10;
+          break;
+        case 'nextPage':
+          this.offsetInt += 10;
+          break;
+        case 'fivePagesBack':
+          this.offsetInt -= 30;
+          this.offsetInt = this.offsetInt < 0 ? 0 : this.offsetInt;
+          break;
+        case 'fivePagesForward':
+          this.offsetInt += 30;
+          this.offsetInt = this.offsetInt / 10 >= this.endInt ? this.endInt * 10 : this.offsetInt;
+          break;
+      }
+      this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
+    };
+    /**
+     * Handle navigation from here
+     */
+    this.paginationNavigation = (pageNumber, index) => {
+      if (!isNaN(pageNumber)) {
+        if (pageNumber === 1) {
+          this.offsetInt = pageNumber - 1;
+        }
+        else {
+          this.offsetInt = (pageNumber - 1) * 10;
+        }
+      }
+      else {
+        if (index === 0 && this.currentPage <= 4) {
+          this.navigateTo('firstPage');
+        }
+        else if (index === 0 && this.currentPage > 4) {
+          this.navigateTo('fivePagesBack');
+        }
+        else if (index === 4 && this.endInt - this.currentPage >= 2) {
+          this.navigateTo('fivePagesForward');
+        }
+      }
+      this.currentPage = this.offsetInt;
+      this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
+    };
+  }
+  componentWillRender() {
+    this.offsetInt = this.offset;
+    this.currentPage = this.offsetInt / this.limitInt + 1;
+    this.limitInt = this.limit;
+    this.totalInt = this.total;
+    this.endInt = (Math.ceil(this.totalInt / this.limitInt) - 1);
+    this.lastPage = (this.offsetInt >= this.endInt * this.limitInt) ? false : true;
+    /**
+     * Construct numbered navigation area based on current page position
+     */
+    if (this.currentPage === 1 || this.currentPage === 2) {
+      this.pagesArray = Array.from({ length: 4 }, (_, i) => i + 1);
+      this.pagesArray.push('...');
+    }
+    else if (this.currentPage >= 3 && ((this.endInt - this.currentPage) >= 2)) {
+      this.pagesArray = Array.from({ length: 3 }, (_, i) => this.currentPage + i - 1);
+      this.pagesArray.push('...');
+      this.pagesArray.unshift('...');
+    }
+    else if ((this.endInt - this.currentPage) < 3) {
+      this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endInt - 2 + i);
+      this.pagesArray.unshift('...');
+    }
+  }
+  render() {
+    /**
+     * Center navigation area
+     */
+    let navigationArea = h("ul", { class: "PaginationArea" }, this.pagesArray.map((item, index) => {
+      return (h("li", { class: 'PaginationItem' + (item === this.currentPage ? ' ActiveItem' : ' ') + ' ' + (isMobile(this.userAgent) ? 'MobileButtons' : '') }, h("button", { disabled: item === this.currentPage ? true : false, onClick: this.paginationNavigation.bind(this, item, index) }, h("span", null, item))));
+    }));
+    /**
+     * Left navigation area
+     */
+    let buttonsLeftSide = h("div", { class: "LeftItems" }, h("button", { disabled: !this.previousPage, onClick: this.navigateTo.bind(this, 'firstPage') }, translate('firstPage', this.language)), h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
+    if (isMobile(this.userAgent)) {
+      buttonsLeftSide =
+        h("div", { class: "LeftItems" }, h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
+    }
+    /**
+     * Right navigation area
+     */
+    let buttonsRightSide = h("div", { class: "RightItems" }, h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)), h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'lastPage') }, translate('lastPage', this.language)));
+    if (isMobile(this.userAgent)) {
+      buttonsRightSide =
+        h("div", { class: "RightItems" }, h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)));
+    }
+    return (h("div", { id: "PaginationContainer" }, buttonsLeftSide, navigationArea, buttonsRightSide));
+  }
+  static get style() { return helperPaginationCss; }
+}, [1, "helper-pagination", {
+    "firstPage": [1540, "first-page"],
+    "previousPage": [1540, "previous-page"],
+    "offset": [1538],
+    "limit": [1538],
+    "total": [1538],
+    "language": [1],
+    "offsetInt": [32],
+    "lastPage": [32],
+    "limitInt": [32],
+    "totalInt": [32],
+    "pagesArray": [32],
+    "endInt": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["helper-pagination"];
+  components.forEach(tagName => { switch (tagName) {
+    case "helper-pagination":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HelperPagination$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const HelperPagination = HelperPagination$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HelperPagination, defineCustomElement };
+
+//# sourceMappingURL=helper-pagination.js.map