@everymatrix/lottery-game-page 0.1.20 → 0.1.21

package/dist/cjs/lottery-ticket.cjs.entry.js

@@ -27,6 +27,26 @@ const TRANSLATIONS = {
     resetButton: 'Reseteaza',
     autoButton: 'Ma simt norocos'
   },
+  fr: {
+    loading: 'Loading, please wait ...',
+    error: 'It was an error while trying to fetch the data',
+    grid: 'Grid',
+    multiplier: 'Multiplier',
+    numberOfDraws: 'Number of draws',
+    wagerPerDraw: 'Wager per draw',
+    resetButton: 'Reset',
+    autoButton: 'I feel lucky'
+  },
+  ar: {
+    loading: 'Loading, please wait ...',
+    error: 'It was an error while trying to fetch the data',
+    grid: 'Grid',
+    multiplier: 'Multiplier',
+    numberOfDraws: 'Number of draws',
+    wagerPerDraw: 'Wager per draw',
+    resetButton: 'Reset',
+    autoButton: 'I feel lucky'
+  }
 };
 const translate = (key, customLang) => {
   const lang = customLang;
@@ -63,6 +83,14 @@ const LotteryTicket = class {
      * Language
      */
     this.language = 'en';
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
     this.multiplier = false;
     this.numberOfDraws = 1;
     this.isLoading = true;
@@ -70,6 +98,19 @@ const LotteryTicket = class {
     this.ticketDone = false;
     this.isCustomSelect = false;
     this.amountInfo = {};
+    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 find a better way to implement click outside the custom select, so that we don't have to use the 'data-cluster' attribute on each element
@@ -103,6 +144,17 @@ const LotteryTicket = class {
       console.error('Error!', err);
     });
   }
+  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
+  }
   multiplierChangeHandler(e) {
     this.multiplier = e.target ? e.target.checked : false;
     this.multiplierChange.emit(this.multiplier);
@@ -151,9 +203,9 @@ const LotteryTicket = class {
       }
       else {
         const { rules } = this.gameData;
-        return (index.h("div", { class: "TicketContainer" }, index.h("p", { class: "TicketTitle" }, this.gameData.name), this.resetButton && this.ticketDone &&
+        return (index.h("div", { class: "TicketContainer", ref: el => this.stylingContainer = el }, index.h("p", { class: "TicketTitle" }, this.gameData.name), this.resetButton && this.ticketDone &&
           index.h("div", { class: "ButtonContainer" }, index.h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection() }, translate('resetButton', this.language))), this.autoPick && !this.ticketDone &&
-          index.h("div", { class: "ButtonContainer" }, index.h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection() }, translate('autoButton', this.language))), this.grids.map((item, index$1) => index.h("div", { class: "TicketGridBullets" }, index.h("p", { class: "TicketGridTitle" }, translate('grid', this.language), " ", item), index.h("lottery-grid", { "grid-index": index$1, "maximum-allowed": rules.boards[index$1].maximumAllowed, "minimum-allowed": rules.boards[index$1].minimumAllowed, "total-numbers": rules.boards[index$1].totalNumbers, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, language: this.language }))), rules.multiplier &&
+          index.h("div", { class: "ButtonContainer" }, index.h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection() }, translate('autoButton', this.language))), this.grids.map((item, index$1) => index.h("div", { class: "TicketGridBullets" }, index.h("p", { class: "TicketGridTitle" }, translate('grid', this.language), " ", item), index.h("lottery-grid", { "grid-index": index$1, "maximum-allowed": rules.boards[index$1].maximumAllowed, "minimum-allowed": rules.boards[index$1].minimumAllowed, "total-numbers": rules.boards[index$1].totalNumbers, selectable: true, "reset-button": true, "auto-pick": true, "game-id": this.gameId, "ticket-id": this.ticketId, language: this.language, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))), rules.multiplier &&
           index.h("div", null, index.h("label", { class: "Toggle" }, index.h("label", { class: "Label" }, translate('multiplier', this.language), ": "), index.h("input", { class: "ToggleCheckbox", type: "checkbox", onInput: (e) => this.multiplierChangeHandler(e) }), index.h("div", { class: "ToggleSwitch" }))), this.multipleDraws &&
           index.h("div", { class: "TicketDraws" }, index.h("label", { class: "Label" }, translate('numberOfDraws', this.language), ": "), index.h("div", { class: "NumberInput" }, index.h("button", { onClick: () => this.numberOfDraws > 1 ? this.numberOfDraws-- : this.numberOfDraws = 1, class: "Minus" }, "-"), index.h("input", { class: "InputDefault", min: "1", value: this.numberOfDraws, type: "number" }), index.h("button", { onClick: () => this.numberOfDraws++, class: "Plus" }, "+"))), index.h("div", null, index.h("label", { class: "Label" }, translate('wagerPerDraw', this.language), ": "), index.h("div", { class: "WagerInput" }, rules.stakes.length > 1 ?
           (index.h("div", { "data-cluster": "SelectComponent", class: this.isCustomSelect ? "SelectWrapper SelectActive" : "SelectWrapper" }, index.h("div", { "data-cluster": "SelectComponent", class: "SelectButton", onClick: () => this.toggleClass() }, index.h("span", { "data-cluster": "SelectComponent" }, this.amountInfo.amount, " ", this.amountInfo.currency), index.h("span", { "data-cluster": "SelectComponent", class: "SelectExpand" }, "\u25BC")), index.h("div", { "data-cluster": "SelectComponent", class: "SelectContent" }, index.h("ul", { "data-cluster": "SelectComponent", class: "SelectOptions" }, rules.stakes.map((item) => index.h("li", { "data-cluster": "SelectComponent", class: this.amountInfo.amount == item.amount ? 'SelectedValue' : '', value: item.amount, onClick: () => this.setDropdownItem(item) }, item.amount, " ", item.currency)))))) : (index.h("div", null, index.h("input", { min: "1", value: rules.stakes[0].amount, type: "number", disabled: true }), index.h("p", { class: "WagerInputTitle" }, rules.stakes[0].currency)))))));

package/dist/collection/utils/locale.utils.js

@@ -1,5 +1,5 @@
 const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en', 'ar'];
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar'];
 const TRANSLATIONS = {
   en: {
     error: 'Error',
@@ -47,6 +47,29 @@ const TRANSLATIONS = {
     lastDrawResultsTitle: 'Cele mai recente extrageri',
     modalLogin: 'Please login to submit a ticket',
   },
+  fr: {
+    error: 'Error',
+    title: 'Chrono',
+    backButton: 'Back',
+    lobbyButton: 'Lobby',
+    prize: 'Prize',
+    winUpTo: 'Win up to',
+    nextDraw: 'Next draw in: ',
+    buy: 'Buy tickets',
+    viewLatest: 'View latest results',
+    createTicket: 'Create Ticket',
+    modalSuccess: 'Purchase successfully completed!',
+    deleteTicketModalTitle: 'Delete Ticket',
+    deleteTicketModalText: 'Are you sure you want to delete this ticket?',
+    deleteTicketModalCancel: 'Cancel',
+    deleteTicketModalConfirm: 'Delete',
+    orderSummaryTitle: 'Order Summary',
+    orderSummaryTickets: 'Ticket',
+    orderSummaryTotal: 'Total',
+    orderSummarySubmit: 'Submit',
+    lastDrawResultsTitle: 'Résultats du dernier tirage',
+    modalLogin: 'Please login to submit a ticket',
+  },
   ar: {
     error: 'خطأ',
     title: 'كرونو',
@@ -67,9 +90,9 @@ const TRANSLATIONS = {
     orderSummaryTickets: 'تذكرة',
     orderSummaryTotal: 'المجموع',
     orderSummarySubmit: 'يُقدِّم',
-    lastDrawResultsTitle: 'Cele mai recente extrageri',
+    lastDrawResultsTitle: 'نتائج آخر سحب',
     modalLogin: 'الرجاء تسجيل الدخول لتقديم تذكرة'
-  },
+  }
 };
 export const translate = (key, customLang) => {
   const lang = customLang;

package/dist/components/helper-accordion2.js

@@ -9,6 +9,12 @@ const TRANSLATIONS = {
   ro: {
     deleteTicket: 'Sterge biletul'
   },
+  fr: {
+    deleteTicket: 'Supprimer le billet'
+  },
+  ar: {
+    deleteTicket: 'حذف التذكرة'
+  }
 };
 const translate = (key, customLang) => {
   const lang = customLang;

package/dist/components/helper-filters2.js

@@ -28,6 +28,32 @@ const TRANSLATIONS = {
     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$1 = (key, customLang) => {
   const lang = customLang;

package/dist/components/helper-pagination.js

@@ -28,6 +28,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;

package/dist/components/lottery-draw-results-history2.js

@@ -6,7 +6,7 @@ import { d as defineCustomElement$2 } from './lottery-draw-results2.js';
 import { d as defineCustomElement$1 } from './lottery-grid2.js';
 
 const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar'];
 const TRANSLATIONS = {
   en: {
     drawResultsHeader: 'Draw results history',
@@ -34,6 +34,32 @@ const TRANSLATIONS = {
     noResults: 'Niciun rezultat',
     fetchingResults: 'Se obtin rezultatele'
   },
+  fr: {
+    drawResultsHeader: 'Dessiner l\'historique des résultats',
+    drawId: 'ID de tirage',
+    drawDate: 'Date du tirage',
+    drawNumbersGridA: 'Tirage des numéros Grille',
+    viewAllResults: 'Voir tout',
+    lastFiveDraws: '5 derniers tirages',
+    lastTenDraws: '10 derniers tirages',
+    lastFifteenDraws: '15 derniers tirages',
+    allDrawResultsHistory: 'Historique des résultats de tous les tirages',
+    noResults: 'Aucun résultat',
+    fetchingResults: 'Récupération des résultats'
+  },
+  ar: {
+    drawResultsHeader: 'سجل نتائج السحب',
+    drawId: 'معرّف السحب',
+    drawDate: 'تاريخ السحب',
+    drawNumbersGridA: 'شبكة أرقام السحب',
+    viewAllResults: 'عرض الكل',
+    lastFiveDraws: 'آخر 5 سحوبات',
+    lastTenDraws: 'آخر 10 سحوبات',
+    lastFifteenDraws: 'آخر 15 سحبًا',
+    allDrawResultsHistory: 'سجل نتائج كل السحوبات',
+    noResults: 'لا توجد نتائج',
+    fetchingResults: 'جلب النتائج'
+  }
 };
 const translate = (key, customLang) => {
   const lang = customLang;
@@ -55,6 +81,14 @@ const LotteryDrawResultsHistory = /*@__PURE__*/ proxyCustomElement(class extends
      *Language
      */
     this.language = 'en';
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
     this.drawData = [];
     this.displayAllDrawsResults = true;
     this.showQuickFilters = true;
@@ -63,6 +97,7 @@ const LotteryDrawResultsHistory = /*@__PURE__*/ proxyCustomElement(class extends
     this.dateFiltersTo = '';
     this.isLoading = false;
     this.noResults = false;
+    this.limitStylingAppends = false;
     this.getDrawsData = (filterbydate = false) => {
       let url = filterbydate ? new URL(`${this.endpoint}/games/${this.gameId}/draws`) : new URL(`${this.endpoint}/games/${this.gameId}`);
       if (this.dateFiltersFrom)
@@ -121,19 +156,36 @@ const LotteryDrawResultsHistory = /*@__PURE__*/ proxyCustomElement(class extends
       this.displayAllDrawsResults = false;
       window.scrollTo({ top: 0, behavior: 'smooth' });
     };
+    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);
+    };
   }
   // Filters events
-  filtersDrawHandler(event) {
-    this.isLoading = true;
-    this.showQuickFilters = false;
-    this.getDrawResults(event.detail.ticketDrawId);
-  }
+  // @Listen('filterDraw')
+  // filtersDrawHandler(event: CustomEvent<any>):void {
+  //   this.isLoading = true;
+  //   this.showQuickFilters = false;
+  // }
   filtersHandler(event) {
     this.showQuickFilters = false;
-    this.dateFiltersFrom = event.detail.filterFromCalendar;
-    this.dateFiltersTo = event.detail.filterToCalendar;
     this.isLoading = true;
-    this.getDrawsData(true);
+    if (event.detail.ticketDrawId) {
+      this.getDrawResults(event.detail.ticketDrawId);
+    }
+    else {
+      this.dateFiltersFrom = event.detail.filterFromCalendar;
+      this.dateFiltersTo = event.detail.filterToCalendar;
+      this.getDrawsData(true);
+    }
   }
   clearFiltersHandler() {
     this.drawData = this.winningDataSetsData;
@@ -150,13 +202,24 @@ const LotteryDrawResultsHistory = /*@__PURE__*/ proxyCustomElement(class extends
   disconnectedCallback() {
     clearInterval(this.interval);
   }
+  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() {
     let gridHeader = h("div", { class: "DrawResultsHeader" }, this.displayAllDrawsResults ? h("h4", null, translate('drawResultsHeader', this.language)) :
       [h("div", { class: "DrawResultsHeaderContent" }, h("h4", null, translate('allDrawResultsHistory', this.language)), h("div", { class: "FilterSection" }, this.showQuickFilters &&
-          h("div", { class: "FilterResultsContainer" }, h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(5) }, translate('lastFiveDraws', this.language)), h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(10) }, translate('lastTenDraws', this.language)), h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(15) }, translate('lastFifteenDraws', this.language))), h("helper-filters", { "show-filter-id": "true", "activate-ticket-search": "false", "game-id": this.gameId }))),
+          h("div", { class: "FilterResultsContainer" }, h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(5) }, translate('lastFiveDraws', this.language)), h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(10) }, translate('lastTenDraws', this.language)), h("button", { class: "QuickFilterButton", onClick: () => this.filterResults(15) }, translate('lastFifteenDraws', this.language))), h("helper-filters", { "show-filter-id": "true", "activate-ticket-search": "false", "game-id": this.gameId, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))),
       ]);
-    return h("section", { class: "GridWrapper" }, h("div", { class: "DrawResultsSection" }, h("div", { class: "DrawResultsAreaHistory" }, gridHeader, h("div", { class: "HistoryGridWrapper" }, h("div", { class: "HistoryGrid" }, this.isLoading &&
-      h("p", null, translate('fetchingResults', this.language)), !this.isLoading && !this.noResults && this.drawData.map((item) => h("lottery-draw-results", { endpoint: this.endpoint, "game-id": this.gameId, "draw-id": item.id, "draw-mode": true })).reverse().slice(0, this.numberOfResults), !this.isLoading && this.noResults && (h("p", null, translate('noResults', this.language))))), this.displayAllDrawsResults && h("button", { class: "ViewAllResults", onClick: this.viewAllResults }, translate('viewAllResults', this.language)))));
+    return h("section", { class: "GridWrapper", ref: el => this.stylingContainer = el }, h("div", { class: "DrawResultsSection" }, h("div", { class: "DrawResultsAreaHistory" }, gridHeader, h("div", { class: "HistoryGridWrapper" }, h("div", { class: "HistoryGrid" }, this.isLoading &&
+      h("p", null, translate('fetchingResults', this.language)), !this.isLoading && !this.noResults && this.drawData.map((item) => h("lottery-draw-results", { endpoint: this.endpoint, "game-id": this.gameId, "draw-id": item.id, "draw-mode": true, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })).reverse().slice(0, this.numberOfResults), !this.isLoading && this.noResults && (h("p", null, translate('noResults', this.language))))), this.displayAllDrawsResults && h("button", { class: "ViewAllResults", onClick: this.viewAllResults }, translate('viewAllResults', this.language)))));
   }
   static get style() { return lotteryDrawResultsHistoryCss; }
 }, [1, "lottery-draw-results-history", {
@@ -164,6 +227,8 @@ const LotteryDrawResultsHistory = /*@__PURE__*/ proxyCustomElement(class extends
     "gameId": [1, "game-id"],
     "numberOfResults": [2, "number-of-results"],
     "language": [1],
+    "clientStyling": [1, "client-styling"],
+    "clientStylingUrlContent": [1, "client-styling-url-content"],
     "drawData": [32],
     "displayAllDrawsResults": [32],
     "showQuickFilters": [32],
@@ -171,8 +236,9 @@ const LotteryDrawResultsHistory = /*@__PURE__*/ proxyCustomElement(class extends
     "dateFiltersFrom": [32],
     "dateFiltersTo": [32],
     "isLoading": [32],
-    "noResults": [32]
-  }, [[0, "filterDraw", "filtersDrawHandler"], [0, "filterSelection", "filtersHandler"], [0, "filterSelectionReset", "clearFiltersHandler"]]]);
+    "noResults": [32],
+    "limitStylingAppends": [32]
+  }, [[0, "filterSelection", "filtersHandler"], [0, "filterSelectionReset", "clearFiltersHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/lottery-draw-results2.js

@@ -39,6 +39,40 @@ 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;

package/dist/components/lottery-game-details2.js

@@ -10,12 +10,48 @@ const LotteryGameDetails = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     super();
     this.__registerHost();
     this.__attachShadow();
+    /**
+     * 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);
+    };
+  }
+  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 (h("div", null, h("helper-accordion", { "header-title": "Game Details", collapsed: false }, h("div", { slot: "accordionContent" }, h("helper-tabs", null)))));
+    return (h("div", { class: "GamePageDetailsContainer", ref: el => this.stylingContainer = el }, h("helper-accordion", { "header-title": "Game Details", collapsed: false, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h("div", { class: "AccordionContainer", slot: "accordionContent" }, h("helper-tabs", { "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })))));
   }
   static get style() { return lotteryGameDetailsCss; }
-}, [1, "lottery-game-details"]);
+}, [1, "lottery-game-details", {
+    "clientStyling": [1, "client-styling"],
+    "clientStylingUrlContent": [1, "client-styling-url-content"],
+    "limitStylingAppends": [32]
+  }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/lottery-game-page.js

@@ -13,7 +13,7 @@ import { d as defineCustomElement$3 } from './lottery-ticket2.js';
 import { d as defineCustomElement$2 } from './lottery-ticket-controller2.js';
 
 const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en', 'ar'];
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar'];
 const TRANSLATIONS = {
   en: {
     error: 'Error',
@@ -61,6 +61,29 @@ const TRANSLATIONS = {
     lastDrawResultsTitle: 'Cele mai recente extrageri',
     modalLogin: 'Please login to submit a ticket',
   },
+  fr: {
+    error: 'Error',
+    title: 'Chrono',
+    backButton: 'Back',
+    lobbyButton: 'Lobby',
+    prize: 'Prize',
+    winUpTo: 'Win up to',
+    nextDraw: 'Next draw in: ',
+    buy: 'Buy tickets',
+    viewLatest: 'View latest results',
+    createTicket: 'Create Ticket',
+    modalSuccess: 'Purchase successfully completed!',
+    deleteTicketModalTitle: 'Delete Ticket',
+    deleteTicketModalText: 'Are you sure you want to delete this ticket?',
+    deleteTicketModalCancel: 'Cancel',
+    deleteTicketModalConfirm: 'Delete',
+    orderSummaryTitle: 'Order Summary',
+    orderSummaryTickets: 'Ticket',
+    orderSummaryTotal: 'Total',
+    orderSummarySubmit: 'Submit',
+    lastDrawResultsTitle: 'Résultats du dernier tirage',
+    modalLogin: 'Please login to submit a ticket',
+  },
   ar: {
     error: 'خطأ',
     title: 'كرونو',
@@ -81,9 +104,9 @@ const TRANSLATIONS = {
     orderSummaryTickets: 'تذكرة',
     orderSummaryTotal: 'المجموع',
     orderSummarySubmit: 'يُقدِّم',
-    lastDrawResultsTitle: 'Cele mai recente extrageri',
+    lastDrawResultsTitle: 'نتائج آخر سحب',
     modalLogin: 'الرجاء تسجيل الدخول لتقديم تذكرة'
-  },
+  }
 };
 const translate = (key, customLang) => {
   const lang = customLang;

package/dist/components/lottery-grid2.js

@@ -38,8 +38,33 @@ const LotteryGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Language
      */
     this.language = 'en';
+    /**
+     * Personalize grid for ticket
+     */
+    this.gridType = '';
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
     this.numbers = [];
+    this.limitStylingAppends = false;
     this.selectedCounter = 0;
+    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 selected = [];
@@ -68,6 +93,17 @@ const LotteryGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       });
     }
   }
+  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
+  }
   lotteryBulletSelectionHandler(event) {
     this.numbers = this.numbers.map((item) => {
       if (item.number == event.detail.value) {
@@ -158,7 +194,7 @@ const LotteryGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   render() {
-    return (h("div", { class: "GridContainer" }, h("div", { class: "Grid" }, this.numbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected }))))));
+    return (h("div", { class: "GridContainer", ref: el => this.stylingContainer = el }, h("div", { class: this.gridType === 'ticket' ? 'Grid TicketGrid' : 'Grid' }, this.numbers.map((item) => h("div", null, h("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))))));
   }
   static get style() { return lotteryGridCss; }
 }, [1, "lottery-grid", {
@@ -172,7 +208,11 @@ const LotteryGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "displaySelected": [4, "display-selected"],
     "language": [1],
     "gridIndex": [2, "grid-index"],
-    "numbers": [32]
+    "gridType": [1, "grid-type"],
+    "clientStyling": [1, "client-styling"],
+    "clientStylingUrlContent": [1, "client-styling-url-content"],
+    "numbers": [32],
+    "limitStylingAppends": [32]
   }, [[0, "lotteryBulletSelection", "lotteryBulletSelectionHandler"], [4, "resetSelection", "resetSelectionHandler"], [4, "autoSelection", "autoSelectionHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {