@everymatrix/lottery-game-page 0.1.19 → 0.1.21

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5701a895.js');
+const index = require('./index-7b63209d.js');
 
 const DEFAULT_LANGUAGE = 'en';
 const SUPPORTED_LANGUAGES = ['ro', 'en'];
@@ -13,13 +13,19 @@ const TRANSLATIONS = {
   ro: {
     deleteTicket: 'Sterge biletul'
   },
+  fr: {
+    deleteTicket: 'Supprimer le billet'
+  },
+  ar: {
+    deleteTicket: 'حذف التذكرة'
+  }
 };
 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 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:5px;background:#009993;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none;margin-bottom:1px}.Header:hover{background:#00ABA4}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:#fff;text-transform:capitalize}.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) {
@@ -65,11 +71,43 @@ const Accordion = class {
      * Language
      */
     this.language = 'en';
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
+    this.limitStylingAppends = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let cssFile = document.createElement('style');
+      setTimeout(() => {
+        cssFile.innerHTML = this.clientStylingUrlContent;
+        this.stylingContainer.prepend(cssFile);
+      }, 1);
+    };
   }
   // @TODO fix the `any` type :)
   connectedCallback() {
     this.showContent = !this.collapsed;
   }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrlContent)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
   toggleContent() {
     this.showContent = !this.showContent;
   }
@@ -81,7 +119,7 @@ const Accordion = class {
     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 &&
+    return (index.h("div", { class: "Wrapper", ref: el => this.stylingContainer = el }, 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 Description" }, 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)))))));

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5701a895.js');
+const index = require('./index-7b63209d.js');
 
 const DEFAULT_LANGUAGE$1 = 'en';
 const SUPPORTED_LANGUAGES$1 = ['ro', 'en'];
@@ -31,6 +31,32 @@ const TRANSLATIONS$1 = {
     filterModalButton: 'Cauta',
     filterOrDate: 'sau cauta dupa data'
   },
+  fr: {
+    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'
+  },
+  ar: {
+    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'
+  }
 };
 const translate$2 = (key, customLang) => {
   const lang = customLang;
@@ -22265,26 +22291,55 @@ const HelperFilters = class {
      * Language
      */
     this.language = 'en';
+    /**
+     * Notifies if the quick filters from tickets are active
+     */
+    this.quickFiltersActive = false;
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
     this.showFilterModal = false;
     this.showClearButton = false;
     this.filterData = {};
     this.filterDataReset = { ticketDrawId: '', filterFromCalendar: '', filterToCalendar: '' };
+    this.limitStylingAppends = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let cssFile = document.createElement('style');
+      setTimeout(() => {
+        cssFile.innerHTML = this.clientStylingUrlContent;
+        this.stylingContainer.prepend(cssFile);
+      }, 1);
+    };
   }
   // 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 = '';
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrlContent)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
   }
   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)
+    if (this.filterData.ticketDrawId || this.filterData.filterFromCalendar || this.filterData.filterToCalendar)
       this.filterSelection.emit(event);
   }
   filterSelectionResetHandler(event) {
@@ -22320,7 +22375,10 @@ const HelperFilters = class {
     this.filterData.filterToCalendar = new Date(event.target.value).toISOString();
   }
   render() {
-    return (index.h("div", { class: "HelperFilters" }, index.h("div", { class: "FilterButtonsWrapper" }, index.h("button", { class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate$2('filterOpen', this.language)), this.showClearButton ? index.h("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate$2('filterClear', this.language)) : null), index.h("helper-modal", { "title-modal": "Filter Modal", visible: this.showFilterModal }, index.h("div", { class: "FilterModalHeader" }, index.h("h3", { class: "FilterModalTitle" }, this.activateTicketSearch ? translate$2('filterModalTicketTitle', this.language) : translate$2('filterModalDrawTitle', this.language))), index.h("div", { class: "FilterModalBody" }, index.h("input", { id: "FilterById", type: "text", value: this.filterData.ticketDrawId, onInput: (event) => this.handleTicketDrawId(event), class: "FilterModalSearch", placeholder: this.activateTicketSearch ? translate$2('filterTicketPlaceholder', this.language) : translate$2('filterDrawPlaceholder', this.language) }), index.h("p", null, translate$2('filterOrDate', this.language)), index.h("div", { class: "FilterCalendarWrapper" }, index.h("vaadin-date-picker", { value: this.filterData.filterFromCalendar, onChange: (event) => this.handleFilterFrom(event), placeholder: translate$2('filterFromCalendar', this.language), class: "VaadinDatePicker" }), index.h("vaadin-date-picker", { value: this.filterData.filterToCalendar, onChange: (event) => this.handleFilterTo(event), placeholder: translate$2('filterToCalendar', this.language), class: "VaadinDatePicker" }))), index.h("div", { class: "FilterModalFooter" }, index.h("button", { class: "FilterModalButton", onClick: () => this.filterSearch() }, translate$2('filterModalButton', this.language))))));
+    return (index.h("div", { class: "HelperFilters", ref: el => this.stylingContainer = el }, index.h("div", { class: "FilterButtonsWrapper" }, index.h("button", { class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate$2('filterOpen', this.language)), (this.showClearButton || this.quickFiltersActive) ?
+      index.h("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate$2('filterClear', this.language))
+      :
+        null), index.h("helper-modal", { "title-modal": "Filter Modal", visible: this.showFilterModal, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, index.h("div", { class: "FilterModalHeader" }, index.h("h3", { class: "FilterModalTitle" }, this.activateTicketSearch ? translate$2('filterModalTicketTitle', this.language) : translate$2('filterModalDrawTitle', this.language))), index.h("div", { class: "FilterModalBody" }, index.h("input", { id: "FilterById", type: "text", value: this.filterData.ticketDrawId, onInput: (event) => this.handleTicketDrawId(event), class: "FilterModalSearch", placeholder: this.activateTicketSearch ? translate$2('filterTicketPlaceholder', this.language) : translate$2('filterDrawPlaceholder', this.language) }), index.h("p", null, translate$2('filterOrDate', this.language)), index.h("div", { class: "FilterCalendarWrapper" }, index.h("vaadin-date-picker", { value: this.filterData.filterFromCalendar, onChange: (event) => this.handleFilterFrom(event), placeholder: translate$2('filterFromCalendar', this.language), class: "VaadinDatePicker" }), index.h("vaadin-date-picker", { value: this.filterData.filterToCalendar, onChange: (event) => this.handleFilterTo(event), placeholder: translate$2('filterToCalendar', this.language), class: "VaadinDatePicker" }))), index.h("div", { class: "FilterModalFooter" }, index.h("button", { class: "FilterModalButton", onClick: () => this.filterSearch() }, translate$2('filterModalButton', this.language))))));
   }
 };
 HelperFilters.style = helperFiltersCss;
@@ -22333,8 +22391,8 @@ const TRANSLATIONS = {
     drawId: 'Draw ID',
     drawName: 'Game name',
     drawDate: 'Draw Date',
-    drawNumbersGridDraw: 'Draw numbers Grid A',
-    drawNumbersGridTicket: 'Draw numbers Grid B',
+    drawNumbersGridDraw: 'Draw numbers Grid ',
+    drawNumbersGridTicket: 'Draw numbers Grid ',
     ticketResult: 'Ticket result',
     amountWon: 'Amount won',
     numberOfDraws: 'Number of draws',
@@ -22350,8 +22408,8 @@ const TRANSLATIONS = {
     drawId: 'Id extragere',
     drawName: 'Numele jocului',
     drawDate: 'Data extragerii',
-    drawNumbersGridDraw: 'Numerele extrase Grid A',
-    drawNumbersGridTicket: 'Numerele extrase Grid B',
+    drawNumbersGridDraw: 'Numerele extrase Grid',
+    drawNumbersGridTicket: 'Numerele extrase Grid',
     ticketResult: 'Rezultatul biletului',
     amountWon: 'Suma castigata',
     numberOfDraws: 'Numarul de extrageri',
@@ -22362,13 +22420,47 @@ const TRANSLATIONS = {
     ticketAmount: 'Valoarea biletului',
     winUpTo: 'Poti castiga'
   },
+  fr: {
+    drawResultsHeader: 'Résultats du dernier tirage',
+    drawId: 'ID de tirage',
+    drawName: 'Nom du jeu',
+    drawDate: 'Date du tirage',
+    drawNumbersGridDraw: 'Tirage des numéros Grille',
+    drawNumbersGridTicket: 'Tirage des numéros Grille',
+    ticketResult: 'Résultat du ticket',
+    amountWon: 'Montant gagné',
+    numberOfDraws: 'Nombre de tirages',
+    multiplier: 'Multiplicateur',
+    ticketPurchaseDate: 'Date d\'achat du billet',
+    ticketStatus: 'Statut du ticket',
+    ticketId: 'ID de billets',
+    ticketAmount: 'Montant du billet',
+    winUpTo: 'Gagnez jusqu\'à'
+  },
+  ar: {
+    drawResultsHeader: 'نتائج آخر سحب',
+    drawId: 'معرّف السحب',
+    drawName: 'اسم اللعبة',
+    drawDate: 'تاريخ السحب',
+    drawNumbersGridDraw: 'شبكة أرقام السحب',
+    drawNumbersGridTicket: 'شبكة أرقام السحب',
+    ticketResult: 'نتيجة التذكرة',
+    amountWon: 'المبلغ الذي تم ربحه',
+    numberOfDraws: 'عدد السحوبات',
+    multiplier: 'مضاعف',
+    ticketPurchaseDate: 'تاريخ شراء التذكرة',
+    ticketStatus: 'حالة التذكرة',
+    ticketId: 'معرّف التذكرة',
+    ticketAmount: 'مبلغ التذكرة',
+    winUpTo: 'ربح يصل إلى'
+  }
 };
 const translate = (key, customLang) => {
   const lang = customLang;
   return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
 };
 
-const lotteryDrawResultsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.TicketInfo{display:flex;flex-direction:row;gap:15px;background-color:#009993;color:#fff;padding:12px;font-size:14px}.DrawResultsArea{margin-top:15px}.DrawResultsSection{max-width:600px;margin:0px auto;border-radius:4px}.DrawResultsHeader{display:flex;justify-content:space-between;padding:10px 20px;background-color:#009993;color:#fff;font-size:14px;border-radius:4px 4px 0 0}.DrawResultsHeader h4{text-transform:uppercase;font-weight:400;margin:0;padding-top:15px}.DrawMultipler label{display:block;margin:15px 0}.DrawResultsBody{padding:0px 20px;margin-bottom:5px;border-radius:0 0 4px 4px;border:1px solid #009993}.DrawResultsBody .DrawNumbersGrid{font-size:14px}.DrawResultsBody .NumberOfDrawsContainer{display:table;width:100%}.Toggle{cursor:pointer;display:inline-block}.ToggleSwitch{display:inline-block;background:#ccc;border-radius:16px;width:58px;height:24px;position:relative;vertical-align:middle;transition:background 0.25s}.ToggleSwitch:before,.ToggleSwitch:after{content:\"\"}.ToggleSwitch:before{display:block;background:linear-gradient(to bottom, #fff 0%, #eee 100%);border-radius:50%;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.25);width:16px;height:16px;position:absolute;top:4px;left:4px;transition:left 0.25s}.Toggle:hover .ToggleSwitch:before{background:linear-gradient(to bottom, #fff 0%, #fff 100%);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.5)}.ToggleCheckbox:checked+.ToggleSwitch{background:#56c080}.ToggleCheckbox:checked+.ToggleSwitch:before{left:38px}.ToggleCheckbox{position:absolute;visibility:hidden}.Label{margin-right:5px;position:relative;top:2px}.DrawTicketsContainer{margin:30px auto}.ExpandableBoxes{position:relative}.ExpandableBox{line-height:12px;font-weight:lighter;width:100%;height:100%;max-height:70px;float:left;margin:0 0 20px 0;border:1px solid #f1f1f1;background:#fff;border-radius:4px;padding:10px;-webkit-transition:all 0.6s ease-in-out;-moz-transition:all 0.6s ease-in-out;-o-transition:all 0.6s ease-in-out;-ms-transition:all 0.6s ease-in-out;transition:all 0.6s ease-in-out;overflow:hidden;box-shadow:rgba(99, 99, 99, 0.2) 0px 2px 8px 0px}.ExpandableBox.ShowBox{max-height:400px;margin:0px 0px 20p 0px}.ExpandableBox.HideBox{width:0;height:0;overflow:hidden;border:none;padding:0;margin:0;opacity:0}";
+const lotteryDrawResultsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.TicketInfo{display:flex;flex-direction:row;gap:15px;background-color:#009993;color:#fff;padding:12px;font-size:14px}.DrawResultsArea{margin-top:15px}.DrawResultsArea.TicketDraws .Content{padding:0;border:0}.DrawResultsArea.TicketDraws .DrawResultsBody{padding:0;margin-bottom:5px;border-radius:0;border:0}.DrawResultsSection{max-width:600px;margin:0px auto;border-radius:4px}.DrawResultsHeader{display:flex;justify-content:space-between;padding:10px 20px;background-color:#009993;color:#fff;font-size:14px;border-radius:4px 4px 0 0}.DrawResultsHeader h4{text-transform:uppercase;font-weight:400;margin:0;padding-top:15px}.DrawResultsBody{padding:20px;margin-bottom:5px;border-radius:0 0 4px 4px;border:1px solid #009993}.DrawResultsBody>div{margin:10px 0}.DrawResultsBody .NumberOfDrawsContainer{display:table;width:100%}.DrawNumbersGrid{margin-bottom:15px}.DrawNumbersGrid label{display:block;margin-bottom:10px}.Toggle{cursor:pointer;display:inline-block}.ToggleSwitch{display:inline-block;background:#ccc;border-radius:16px;width:58px;height:24px;position:relative;vertical-align:middle;transition:background 0.25s}.ToggleSwitch:before,.ToggleSwitch:after{content:\"\"}.ToggleSwitch:before{display:block;background:linear-gradient(to bottom, #fff 0%, #eee 100%);border-radius:50%;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.25);width:16px;height:16px;position:absolute;top:4px;left:4px;transition:left 0.25s}.Toggle:hover .ToggleSwitch:before{background:linear-gradient(to bottom, #fff 0%, #fff 100%);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.5)}.ToggleCheckbox:checked+.ToggleSwitch{background:#56c080}.ToggleCheckbox:checked+.ToggleSwitch:before{left:38px}.ToggleCheckbox{position:absolute;visibility:hidden}.Label{position:relative}.DrawTicketsContainer{display:flex;flex-direction:column;margin:20px auto 0}.DrawMultipler{margin-top:15px}.ExpandableBoxes{position:relative;display:flex;flex-direction:column}.ExpandableBox{line-height:12px;font-weight:lighter;width:100%;height:100%;max-height:80px;float:left;margin:0 0 20px 0;border:1px solid #009993;background:#fff;border-radius:4px;padding:10px;box-sizing:border-box;-webkit-transition:all 0.6s ease-in-out;-moz-transition:all 0.6s ease-in-out;-o-transition:all 0.6s ease-in-out;-ms-transition:all 0.6s ease-in-out;transition:all 0.6s ease-in-out;overflow:hidden;box-shadow:rgba(99, 99, 99, 0.2) 0px 2px 8px 0px}.ExpandableBox:last-of-type{margin-bottom:0}.ExpandableBox.ShowBox{max-height:400px;margin:0px 0px 20p 0px}.ExpandableBox.HideBox{width:0;height:0;overflow:hidden;border:none;padding:0;margin:0;opacity:0}";
 
 const LotteryDrawResults = class {
   constructor(hostRef) {
@@ -22413,13 +22505,75 @@ const LotteryDrawResults = class {
      * The ticket draw count
      */
     this.ticketDrawCount = 0;
+    /**
+     * The ticket winning numbers
+     */
+    this.ticketNumbers = '';
+    /**
+     * The session id
+     */
+    this.sessionId = '';
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
     this.multiplier = 3;
     this.isLoading = true;
-    this.drawResults = [];
     this.rules = {};
     this.toggleDrawer = [false];
     this.hasErrors = false;
     this.errorText = '';
+    this.ticketData = [];
+    this.ticketDataLoaded = false;
+    this.ticketDraws = [];
+    this.hasDrawNumbers = false;
+    this.limitStylingAppends = false;
+    this.getTicketsData = () => {
+      let url = new URL(`${this.endpoint}/tickets`);
+      let drawOptions = {
+        method: "GET",
+        headers: {
+          'Content-Type': "application/json",
+          'Accept': 'application/json',
+          'Authorization': `Bearer ${this.sessionId}`
+        },
+      };
+      fetch(url.href, drawOptions)
+        .then((response) => {
+        return response.json();
+      })
+        .then((data) => {
+        if (data) {
+          this.ticketData = data;
+          this.ticketDataLoaded = true;
+        }
+        return this.ticketData;
+      }).then((response) => {
+        response.forEach(ticket => {
+          if (ticket.drawResults.length) {
+            ticket.drawResults.forEach(draw => {
+              fetch(`${this.endpoint}/games/${this.gameId}/draws/${draw.drawId}`)
+                .then((response) => {
+                return response.json();
+              })
+                .then((data) => {
+                // check if draw id is unique
+                if (!this.ticketDraws.some(el => el.drawId === draw.drawId)) {
+                  this.ticketDraws.push({ drawId: draw.drawId, drawNumbers: data.winningNumbers });
+                }
+              });
+            });
+          }
+          return this.ticketDraws;
+        });
+      }).then(() => {
+        this.hasDrawNumbers = true;
+      });
+    };
     this.changeBox = (index) => {
       this.toggleDrawer = this.toggleDrawer.map((item, itemIndex) => {
         if (itemIndex == index) {
@@ -22431,6 +22585,18 @@ const LotteryDrawResults = class {
         this.toggleDrawer.push(true);
       }
     };
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let cssFile = document.createElement('style');
+      setTimeout(() => {
+        cssFile.innerHTML = this.clientStylingUrlContent;
+        this.stylingContainer.prepend(cssFile);
+      }, 1);
+    };
   }
   connectedCallback() {
     let promises = [];
@@ -22438,14 +22604,28 @@ const LotteryDrawResults = class {
     if (this.drawId) {
       promises.push(this.getDrawData());
     }
+    if (!this.drawMode) {
+      this.getTicketsData();
+    }
     Promise.all(promises)
       .then(() => {
       this.isLoading = false;
     });
   }
-  getDrawData() {
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrlContent)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  getDrawData(drawID) {
     return new Promise((resolve, reject) => {
-      let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${this.drawId}`);
+      let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${drawID ? drawID : this.drawId}`);
       fetch(url.href)
         .then((response) => {
         // @TODO EXCEPTIONS
@@ -22455,6 +22635,9 @@ const LotteryDrawResults = class {
         this.drawData = data;
         resolve(true);
         this.isLoading = false;
+        if (drawID) {
+          return this.drawData.winningNumbers;
+        }
       })
         .catch((err) => {
         reject(err);
@@ -22494,12 +22677,16 @@ const LotteryDrawResults = class {
       index.h("p", null, this.errorText);
     }
     else {
-      return (index.h("section", { class: "DrawResultsSection" }, !this.drawMode ?
-        index.h("div", { class: "DrawResultsArea" }, index.h("div", { class: "TicketInfo" }, index.h("div", { class: "TicketGameName" }, translate('drawName', this.language), ": ", index.h("span", null, this.gameName)), index.h("div", { class: "TicketDate" }, translate('ticketPurchaseDate', this.language), ": ", index.h("span", null, this.ticketDate.slice(0, 10))), index.h("div", { class: "TicketStatus" }, translate('ticketStatus', this.language), ": ", index.h("span", null, this.ticketStatus))), index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "TicketIdContainer" }, index.h("p", null, translate('ticketId', this.language), ": ", index.h("span", null, this.ticketId))), index.h("div", { class: "TicketAmountContainer" }, index.h("p", null, translate('ticketAmount', this.language), " ", index.h("span", null, this.ticketAmount))), index.h("div", { class: "DrawNumbersGrid" }, index.h("p", null, translate('drawNumbersGridTicket', this.language), ":"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, "selected-numbers": this.selection, selectable: false, "display-selected": true, language: this.language }))), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('winUpTo', this.language), " ", index.h("span", null, JSON.stringify(this.ticketMultiplier)))), index.h("div", { class: "NumberOfDrawsContainer" }, index.h("p", null, translate('numberOfDraws', this.language), ": ", this.ticketDrawCount), index.h("div", { class: "DrawTicketsContainer" }, this.drawResults.map((item, index$1) => index.h("div", { class: "ExpandableBoxes" }, index.h("div", { class: this.toggleDrawer[index$1] ? 'ExpandableBox ShowBox' : 'ExpandableBox', onClick: () => this.changeBox(index$1) }, index.h("div", { class: "TicketResultContainer" }, index.h("p", null, translate('ticketResult', this.language), ": ", item.status)), item.state == 'won' &&
-          index.h("div", { class: "AmountWonContainer" }, index.h("p", null, translate('amountWon', this.language), ": ", Number(item.amount).toLocaleString('en'), " ", item.currency)), index.h("div", { class: "DrawIdContainer" }, index.h("p", null, translate('drawId', this.language), ": ", item.drawId)), index.h("div", { class: "DrawDateContainer" }, index.h("p", null, translate('drawDate', this.language), ": ", item.updatedAt.slice(0, 10), " | ", item.updatedAt.slice(11, 19))), index.h("div", { class: "DrawNumbersGrid" }), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('winUpTo', this.language), " ", item.multiplier)))))))))
+      return (index.h("section", { class: "DrawResultsSection", ref: el => this.stylingContainer = el }, this.drawMode ?
+        index.h("div", { class: "DrawResultsArea" }, this.drawData &&
+          index.h("div", null, index.h("div", { class: "DrawResultsHeader" }, index.h("span", null, translate('drawId', this.language), ":  ", this.drawData.id), index.h("span", null, translate('drawDate', this.language), ": ", this.drawData.date.slice(0, 10))), index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "DrawNumbersGrid" }, index.h("p", null, translate('drawNumbersGridDraw', this.language), "0:"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, "selected-numbers": this.drawData.winningNumbers.join(','), "display-selected": true, selectable: false, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", this.multiplier))))))
         :
-          index.h("div", { class: "DrawResultsArea" }, this.drawData &&
-            index.h("div", null, index.h("div", { class: "DrawResultsHeader" }, index.h("span", null, translate('drawId', this.language), ":  ", this.drawData.id), index.h("span", null, translate('drawDate', this.language), ": ", this.drawData.date.slice(0, 10))), index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "DrawNumbersGrid" }, index.h("p", null, translate('drawNumbersGridDraw', this.language), ":"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, selectedNumbers: this.drawData.winningNumbers.join(','), "display-selected": true, selectable: false, language: this.language })), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", this.multiplier))))))));
+          index.h("div", { class: "DrawResultsArea TicketDraws" }, index.h("div", { class: "DrawResultsBody" }, index.h("div", { class: "TicketIdContainer" }, index.h("label", { class: "Label" }, translate('ticketId', this.language), ": ", index.h("span", null, this.ticketId))), index.h("div", { class: "TicketAmountContainer" }, index.h("label", { class: "Label" }, translate('ticketAmount', this.language), " ", index.h("span", null, this.ticketAmount))), index.h("div", { class: "DrawNumbersGrid" }, index.h("label", { class: "Label" }, translate('drawNumbersGridTicket', this.language), "0:"), index.h("div", { class: "BulletContainer" }, index.h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, "selected-numbers": JSON.parse(this.ticketNumbers).join(','), selectable: false, "display-selected": true, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", JSON.stringify(this.ticketMultiplier))), index.h("div", { class: "NumberOfDrawsContainer" }, index.h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": ", this.ticketDrawCount), index.h("div", { class: "DrawTicketsContainer" }, this.ticketData.map((ticket) => index.h("div", { class: "ExpandableBoxes" }, ticket.drawResults.length ?
+            index.h("div", null, ticket.id == this.ticketId && ticket.drawResults.map((item, index$1) => index.h("div", { class: this.toggleDrawer[index$1] ? 'ExpandableBox ShowBox' : 'ExpandableBox', onClick: () => this.changeBox(index$1) }, index.h("div", { class: "TicketResultContainer" }, index.h("p", null, translate('ticketResult', this.language), ": ", item.state)), item.state == 'won' &&
+              index.h("div", { class: "AmountWonContainer" }, index.h("p", null, translate('amountWon', this.language), ": ", Number(item.amount).toLocaleString('en'), " ", item.currency)), index.h("div", { class: "DrawIdContainer" }, index.h("p", null, translate('drawId', this.language), ": ", item.drawId)), index.h("div", { class: "DrawDateContainer" }, index.h("p", null, translate('drawDate', this.language), ": ", item.updatedAt.slice(0, 10), " | ", item.updatedAt.slice(11, 19))), index.h("div", { class: "DrawNumbersGrid" }, this.hasDrawNumbers && this.ticketDraws.map((ticketDraw) => item.drawId && item.drawId === ticketDraw.drawId &&
+              index.h("div", null, index.h("label", { class: "Label" }, translate('drawNumbersGridDraw', this.language), "A:"), index.h("lottery-grid", { "maximum-allowed": this.rules.maximumAllowed, "total-numbers": this.rules.totalNumbers, "selected-numbers": ticketDraw.drawNumbers.join(','), selectable: false, "display-selected": true, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })))), index.h("div", { class: "DrawMultipler" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), " ", item.multiplier)))))
+            :
+              index.h("span", null)))))))));
     }
   }
 };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5701a895.js');
+const index = require('./index-7b63209d.js');
 
 /**
  * @name isMobile
@@ -27,16 +27,48 @@ const HelperModal = class {
      * Toggles if the helper is visible or not
      */
     this.visible = true;
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
+    this.limitStylingAppends = false;
     this.userAgent = window.navigator.userAgent;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let cssFile = document.createElement('style');
+      setTimeout(() => {
+        cssFile.innerHTML = this.clientStylingUrlContent;
+        this.stylingContainer.prepend(cssFile);
+      }, 1);
+    };
   }
   handleHelperModalClose() {
     this.visible = false;
     this.cancel.emit();
   }
   ;
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrlContent)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
   render() {
     return ((this.visible &&
-      index.h("div", { class: this.visible ? "HelperModalWrapper HelperModalVisible" : "HelperModalWrapper" }, index.h("div", { class: "HelperModalWrapper HelperModalVisible" }, index.h("div", { class: "HelperModalContent" + (isMobile(this.userAgent) ? ' HelperModalMobileContent' : '') }, index.h("span", { class: "HelperModalClose" + (isMobile(this.userAgent) ? ' HelperModalMobileClose' : ''), onClick: this.handleHelperModalClose.bind(this) }, "X"), index.h("slot", null))))));
+      index.h("div", { class: this.visible ? "HelperModalWrapper HelperModalVisible" : "HelperModalWrapper", ref: el => this.stylingContainer = el }, index.h("div", { class: "HelperModalWrapper HelperModalVisible" }, index.h("div", { class: "HelperModalContent" + (isMobile(this.userAgent) ? ' HelperModalMobileContent' : '') }, index.h("span", { class: "HelperModalClose" + (isMobile(this.userAgent) ? ' HelperModalMobileClose' : ''), onClick: this.handleHelperModalClose.bind(this) }, "X"), index.h("slot", null))))));
   }
 };
 HelperModal.style = helperModalCss;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5701a895.js');
+const index = require('./index-7b63209d.js');
 
 /**
  * @name isMobile
@@ -32,6 +32,18 @@ const TRANSLATIONS = {
     nextPage: 'Urmatoarea',
     lastPage: 'Ultima'
   },
+  fr: {
+    firstPage: 'First',
+    previousPage: 'Previous',
+    nextPage: 'Next',
+    lastPage: 'Last'
+  },
+  ar: {
+    firstPage: 'First',
+    previousPage: 'Previous',
+    nextPage: 'Next',
+    lastPage: 'Last'
+  }
 };
 const translate = (key, customLang) => {
   const lang = customLang;
@@ -68,6 +80,14 @@ const HelperPagination = class {
      * Language
      */
     this.language = 'en';
+    /**
+   * Client custom styling via string
+   */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
     /**
      * In component working variable for the array of pages
      */
@@ -78,6 +98,7 @@ const HelperPagination = class {
     this.endInt = 0;
     this.userAgent = window.navigator.userAgent;
     this.currentPage = 1;
+    this.limitStylingAppends = false;
     /**
      * Navigation logic
      */
@@ -132,6 +153,18 @@ const HelperPagination = class {
       this.currentPage = this.offsetInt;
       this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
     };
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let cssFile = document.createElement('style');
+      setTimeout(() => {
+        cssFile.innerHTML = this.clientStylingUrlContent;
+        this.stylingContainer.prepend(cssFile);
+      }, 1);
+    };
   }
   componentWillRender() {
     this.offsetInt = this.offset;
@@ -157,6 +190,17 @@ const HelperPagination = class {
       this.pagesArray.unshift('...');
     }
   }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrlContent)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
   render() {
     /**
      * Center navigation area