@everymatrix/lottery-ticket-controller 0.1.23 → 1.0.69

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

@@ -1,717 +1,620 @@
-import { r as registerInstance, c as createEvent, h } from './index-74cef6d4.js';
+import { r as registerInstance, c as createEvent, h } from './index-cf1a7f99.js';
 
 const DEFAULT_LANGUAGE$2 = 'en';
-const SUPPORTED_LANGUAGES$2 = ['ro', 'en'];
+const SUPPORTED_LANGUAGES$2 = ['ro', 'en', 'hr'];
 const TRANSLATIONS$2 = {
-  en: {
-    deleteTicket: 'Delete ticket'
-  },
-  ro: {
-    deleteTicket: 'Sterge biletul'
-  },
-  fr: {
-    deleteTicket: 'Supprimer le billet'
-  },
-  ar: {
-    deleteTicket: 'حذف التذكرة'
-  }
+    en: {
+        deleteTicket: 'Delete ticket'
+    },
+    ro: {
+        deleteTicket: 'Sterge biletul'
+    },
+    fr: {
+        deleteTicket: 'Supprimer le billet'
+    },
+    ar: {
+        deleteTicket: 'حذف التذكرة'
+    },
+    hr: {
+        deleteTicket: 'Izbriši listić'
+    }
 };
 const translate$2 = (key, customLang) => {
-  const lang = customLang;
-  return TRANSLATIONS$2[lang !== undefined && SUPPORTED_LANGUAGES$2.includes(lang) ? lang : DEFAULT_LANGUAGE$2][key];
+    const lang = customLang;
+    return TRANSLATIONS$2[lang !== undefined && SUPPORTED_LANGUAGES$2.includes(lang) ? lang : DEFAULT_LANGUAGE$2][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: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 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;cursor:pointer}.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;cursor:pointer}.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 HelperAccordionStyle0 = helperAccordionCss;
 
-const Accordion = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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';
-    /**
-     * 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;
-  }
-  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", ref: el => this.stylingContainer = el }, h("div", { class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : 'Header' }, h("p", { class: "Title" }, this.headerTitle), h("p", { class: "Subtitle" }, this.headerSubtitle), h("p", { class: "Subtitle Description" }, 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$2('deleteTicket', this.language)))))));
-  }
+const HelperAccordion = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.accordionEvent = createEvent(this, "helperAccordionAction", 7);
+        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);
+        };
+        this.ticketHistoryFlag = false;
+        this.headerTitle = '';
+        this.headerSubtitle = '';
+        this.description = '';
+        this.footer = false;
+        this.deleteTab = false;
+        this.postMessage = false;
+        this.eventName = 'helperAccordionAction';
+        this.collapsed = true;
+        this.language = 'en';
+        this.clientStyling = '';
+        this.clientStylingUrlContent = '';
+        this.showContent = undefined;
+        this.limitStylingAppends = false;
+    }
+    // @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;
+    }
+    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", { key: 'ad26faefd6e3dd089171c7e2bff13faa5a26d972', class: "Wrapper", ref: el => this.stylingContainer = el }, h("div", { key: 'bb7045653ec12a2526029589744f7ef014ec6a6a', class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : 'Header', onClick: () => this.toggleContent() }, h("p", { key: 'ae30943582063e368e942124d8d5acadc1732629', class: "Title" }, this.headerTitle), h("p", { key: '7c35076cb768de784177988900c61fe40a71594c', class: "Subtitle" }, this.headerSubtitle), h("p", { key: 'daff2b456a427f45b00efc32ba33a68cdc2228f0', class: "Subtitle Description" }, this.description), h("span", { key: '0c4f942642da6e8b1ac3d2aeac46034963965d8f', class: "Expand" }, this.showContent ? '<' : '>')), this.showContent &&
+            h("div", { key: 'c688ab7cc629a3974b905a2fdc43063e996a3b90' }, h("div", { key: 'aaa3ad7d9f1503b8e1baaa2c756376a580ffe261', class: "Content" }, h("slot", { key: '8c5c8ff70857da9414c7284b052a3fbc5f503f4a', name: 'accordionContent' }), this.footer && this.showContent &&
+                h("div", { key: '917191f55a45647d708a5e3ff5e188c7e565a0c0' }, this.deleteTab &&
+                    h("span", { key: 'e7fdd5b4f18cacaceda206b36ce9576cc3fc1472', class: "ActionButton", onClick: () => this.deleteAction() }, translate$2('deleteTicket', this.language)))))));
+    }
 };
-Accordion.style = helperAccordionCss;
+HelperAccordion.style = HelperAccordionStyle0;
 
-const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}@-webkit-keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.22) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.2) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@-webkit-keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}.Circle{-webkit-animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;cursor:pointer;color:#000000;display:block;height:30px;width:30px;margin:0;display:flex;align-items:center;justify-content:center;justify-content:center;align-items:center;border:solid 2px #ffffff;background:radial-gradient(circle at top, white 0%, white 100%);font-weight:bold;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5);user-select:none;font-size:16px;line-height:16px;font-weight:600;position:relative}.Circle:hover{-webkit-animation:hover-rotate 0.4s linear both;animation:hover-rotate 0.4s linear both;background:radial-gradient(circle at top, white 0%, #f1f1f1 100%)}.Circle.Selected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #00958f}.Circle.Disabled{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#D4D4D4;border:solid 2px #D4D4D4;cursor:default}.Circle.DisabledSelected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #D4D4D4;cursor:default}";
+const lotteryBulletCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}@-webkit-keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes Circle{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.22) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@keyframes hover-rotate{0%{-webkit-transform:scale(1) rotateZ(0);transform:scale(1) rotateZ(0)}50%{-webkit-transform:scale(1.2) rotateZ(180deg);transform:scale(1.2) rotateZ(180deg)}100%{-webkit-transform:scale(1) rotateZ(360deg);transform:scale(1) rotateZ(360deg)}}@-webkit-keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes selected-scaleUp{0%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}.Circle{-webkit-animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:Circle 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;cursor:pointer;color:#000000;display:block;height:30px;width:30px;margin:0;display:flex;align-items:center;justify-content:center;justify-content:center;align-items:center;border:solid 2px #ffffff;background:radial-gradient(circle at top, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);font-weight:bold;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5);user-select:none;font-size:16px;line-height:16px;font-weight:600;position:relative}.Circle:hover{-webkit-animation:hover-rotate 0.4s linear both;animation:hover-rotate 0.4s linear both;background:radial-gradient(circle at top, rgb(255, 255, 255) 0%, rgb(241, 241, 241) 100%)}.Circle.Selected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#ffffff;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #00958f}.Circle.Disabled{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#D4D4D4;border:solid 2px #D4D4D4;cursor:default}.Circle.DisabledSelected{-webkit-animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;animation:selected-scaleUp 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;color:#f1f1f1;background:#9EC258;background:-webkit-radial-gradient(top, #00958f, #004D4A);background:-moz-radial-gradient(top, #00958f, #004D4A);background:radial-gradient(to bottom, #00958f, #004D4A);border:solid 2px #D4D4D4;cursor:default}";
+const LotteryBulletStyle0 = lotteryBulletCss;
 
 const LotteryBullet = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.bulletEvent = createEvent(this, "lotteryBulletSelection", 7);
-    /**
-     * Value of the bullet
-     */
-    this.value = '0';
-    /**
-     * Marks if the bullet should be selectable
-     */
-    this.selectable = true;
-    /**
-     * Marks if the bullet should be selected
-     */
-    this.isSelected = false;
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url content
-     */
-    this.clientStylingUrlContent = '';
-    this.limitStylingAppends = false;
-    this.select = () => {
-      if (this.selectable) {
-        this.isSelected = !this.isSelected;
-        this.bulletEvent.emit({
-          value: this.value,
-          selected: this.isSelected
-        });
-      }
-    };
-    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", { class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select(), ref: el => this.stylingContainer = el }, this.value));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bulletEvent = createEvent(this, "lotteryBulletSelection", 7);
+        this.select = () => {
+            if (this.selectable) {
+                this.isSelected = !this.isSelected;
+                this.bulletEvent.emit({
+                    value: this.value,
+                    selected: this.isSelected
+                });
+            }
+        };
+        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);
+        };
+        this.value = '0';
+        this.selectable = true;
+        this.isSelected = false;
+        this.clientStyling = '';
+        this.clientStylingUrlContent = '';
+        this.limitStylingAppends = false;
+    }
+    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", { key: 'af3601684ecf1f39d65fc9461430cba96b9e4b8c', class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select(), ref: el => this.stylingContainer = el }, this.value));
+    }
 };
-LotteryBullet.style = lotteryBulletCss;
+LotteryBullet.style = LotteryBulletStyle0;
 
 const lotteryGridCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GridContainer{display:flex;flex-direction:column;max-width:1200px}.Grid{margin-top:10px 0 10px 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px}.Grid.TicketGrid{gap:5px}";
+const LotteryGridStyle0 = lotteryGridCss;
 
 const LotteryGrid = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.gridFilledEvent = createEvent(this, "gridFilled", 7);
-    this.gridDirtyEvent = createEvent(this, "gridDirty", 7);
-    /**
-     * Number of bullets of grid
-     */
-    this.totalNumbers = 0;
-    /**
-     * Number of maximum bullets that can be selected
-     */
-    this.maximumAllowed = 0;
-    /**
-     * Minimum allowed of bullets
-     */
-    this.minimumAllowed = 1;
-    /**
-     * Allows the user to select numbers on the grid
-     */
-    this.selectable = true;
-    /**
-     * Numbers that should be showed as selected on the grid (as a string of those numbers e.g. '1,2,3,4,5,6')
-     */
-    this.selectedNumbers = '';
-    /**
-     * Show only selected numbers
-     */
-    this.displaySelected = false;
-    /**
-     * 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 = [];
-    if (this.selectedNumbers.length > 0) {
-      selected = this.selectedNumbers.split(',');
-      this.selectedCounter = selected.length;
-    }
-    if (this.displaySelected) {
-      selected.forEach((item) => {
-        this.numbers.push({
-          number: item,
-          selected: true,
-          selectable: this.selectable
-        });
-      });
-    }
-    else {
-      [...Array(this.totalNumbers).keys()]
-        .map(number => (number + 1).toString())
-        .forEach((number) => {
-        this.numbers.push({
-          number,
-          selected: selected.indexOf(number) >= 0 ? true : false,
-          selectable: this.selectedCounter == this.maximumAllowed ? false : this.selectable
-        });
-      });
-    }
-  }
-  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) {
-        return {
-          number: item.number,
-          selected: event.detail.selected,
-          selectable: item.selectable
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.gridFilledEvent = createEvent(this, "gridFilled", 7);
+        this.gridDirtyEvent = createEvent(this, "gridDirty", 7);
+        this.selectedCounter = 0;
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
         };
-      }
-      return {
-        number: item.number,
-        selected: item.selected,
-        selectable: item.selectable
-      };
-    });
-    if (event.detail.selected) {
-      this.selectedCounter += 1;
-      if (this.selectedCounter == this.maximumAllowed) {
-        this.numbers = this.numbers.map((item) => {
-          return {
-            number: item.number,
-            selected: item.selected,
-            selectable: item.selected ? true : false
-          };
-        });
-        this.gridFilledEvent.emit({
-          id: this.ticketId,
-          index: this.gridIndex,
-          selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
-        });
-      }
+        this.setClientStylingURL = () => {
+            let cssFile = document.createElement('style');
+            setTimeout(() => {
+                cssFile.innerHTML = this.clientStylingUrlContent;
+                this.stylingContainer.prepend(cssFile);
+            }, 1);
+        };
+        this.ticketId = undefined;
+        this.totalNumbers = 0;
+        this.gameId = undefined;
+        this.maximumAllowed = 0;
+        this.minimumAllowed = 1;
+        this.selectable = true;
+        this.selectedNumbers = '';
+        this.displaySelected = false;
+        this.language = 'en';
+        this.gridIndex = undefined;
+        this.gridType = '';
+        this.clientStyling = '';
+        this.clientStylingUrlContent = '';
+        this.numbers = [];
+        this.limitStylingAppends = false;
+    }
+    connectedCallback() {
+        let selected = [];
+        if (this.selectedNumbers.length > 0) {
+            selected = this.selectedNumbers.split(',');
+            this.selectedCounter = selected.length;
+        }
+        if (this.displaySelected) {
+            selected.forEach((item) => {
+                this.numbers.push({
+                    number: item,
+                    selected: true,
+                    selectable: this.selectable
+                });
+            });
+        }
+        else {
+            [...Array(this.totalNumbers).keys()]
+                .map(number => (number + 1).toString())
+                .forEach((number) => {
+                this.numbers.push({
+                    number,
+                    selected: selected.indexOf(number) >= 0 ? true : false,
+                    selectable: this.selectedCounter == this.maximumAllowed ? false : this.selectable
+                });
+            });
+        }
+    }
+    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
     }
-    else {
-      if (this.selectedCounter == this.maximumAllowed) {
+    // wrote this because the classic .sort(() => 0.5 - Math.random()) method yielded low entropy shuffles for some reason on certain devices
+    shuffleArray(array) {
+        const result = [];
+        while (array.length > 0) {
+            const randomIndex = Math.floor(Math.random() * (array.length));
+            result.push(array.splice(randomIndex, 1)[0]);
+        }
+        return result;
+    }
+    lotteryBulletSelectionHandler(event) {
         this.numbers = this.numbers.map((item) => {
-          return {
-            number: item.number,
-            selected: item.selected,
-            selectable: true
-          };
-        });
-        this.gridDirtyEvent.emit({
-          id: this.ticketId,
-          index: this.gridIndex,
-          selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+            if (item.number == event.detail.value) {
+                return {
+                    number: item.number,
+                    selected: event.detail.selected,
+                    selectable: item.selectable
+                };
+            }
+            return {
+                number: item.number,
+                selected: item.selected,
+                selectable: item.selectable
+            };
         });
-      }
-      this.selectedCounter -= 1;
-    }
-  }
-  async resetSelectionHandler(event) {
-    if (event.detail && event.detail == this.ticketId) {
-      this.selectedCounter = 0;
-      this.numbers = this.numbers.map((item) => {
-        return {
-          number: item.number,
-          selected: false,
-          selectable: this.selectable
-        };
-      });
-      this.gridDirtyEvent.emit({
-        id: this.ticketId,
-        index: this.gridIndex,
-        selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
-      });
-    }
-  }
-  async autoSelectionHandler(event) {
-    if (event.detail && event.detail == this.ticketId) {
-      this.resetSelectionHandler(event);
-      let array = [...Array(this.totalNumbers).keys()]
-        .map(number => number + 1)
-        .sort(() => 0.5 - Math.random());
-      array = array.slice(0, this.minimumAllowed);
-      this.numbers = this.numbers.map((item) => {
-        return {
-          number: item.number,
-          selected: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
-          selectable: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
-        };
-      });
-      this.gridFilledEvent.emit({
-        id: this.ticketId,
-        index: this.gridIndex,
-        selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
-      });
-      this.selectedCounter = this.maximumAllowed;
-    }
-  }
-  render() {
-    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 }))))));
-  }
+        if (event.detail.selected) {
+            this.selectedCounter += 1;
+            if (this.selectedCounter == this.maximumAllowed) {
+                this.numbers = this.numbers.map((item) => {
+                    return {
+                        number: item.number,
+                        selected: item.selected,
+                        selectable: item.selected ? true : false
+                    };
+                });
+                this.gridFilledEvent.emit({
+                    id: this.ticketId,
+                    index: this.gridIndex,
+                    selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+                });
+            }
+        }
+        else {
+            if (this.selectedCounter == this.maximumAllowed) {
+                this.numbers = this.numbers.map((item) => {
+                    return {
+                        number: item.number,
+                        selected: item.selected,
+                        selectable: true
+                    };
+                });
+                this.gridDirtyEvent.emit({
+                    id: this.ticketId,
+                    index: this.gridIndex,
+                    selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+                });
+            }
+            this.selectedCounter -= 1;
+        }
+    }
+    async resetSelectionHandler(event) {
+        if (event.detail && event.detail == this.ticketId) {
+            this.selectedCounter = 0;
+            this.numbers = this.numbers.map((item) => {
+                return {
+                    number: item.number,
+                    selected: false,
+                    selectable: this.selectable
+                };
+            });
+            this.gridDirtyEvent.emit({
+                id: this.ticketId,
+                index: this.gridIndex,
+                selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+            });
+        }
+    }
+    async autoSelectionHandler(event) {
+        if (event.detail && event.detail == this.ticketId) {
+            this.resetSelectionHandler(event);
+            let array = [...Array(this.totalNumbers).keys()]
+                .map(number => number + 1);
+            array = this.shuffleArray(array);
+            array = array.slice(0, this.minimumAllowed);
+            this.numbers = this.numbers.map((item) => {
+                return {
+                    number: item.number,
+                    selected: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
+                    selectable: array.indexOf(parseInt(item.number, 10)) >= 0 ? true : false,
+                };
+            });
+            this.gridFilledEvent.emit({
+                id: this.ticketId,
+                index: this.gridIndex,
+                selectedNumbers: this.numbers.filter((item) => item.selected).map((item) => item.number)
+            });
+            this.selectedCounter = this.maximumAllowed;
+        }
+    }
+    render() {
+        return (h("div", { key: '54b9187146b5d2625fd5ce7f53f38abf091cd943', class: "GridContainer", ref: el => this.stylingContainer = el }, h("div", { key: 'e7e8570557ebaa78edf881cdbc1ed720028cdf6e', 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 }))))));
+    }
 };
-LotteryGrid.style = lotteryGridCss;
+LotteryGrid.style = LotteryGridStyle0;
 
 const DEFAULT_LANGUAGE$1 = 'en';
-const SUPPORTED_LANGUAGES$1 = ['ro', 'en'];
+const SUPPORTED_LANGUAGES$1 = ['ro', 'en', 'hr'];
 const TRANSLATIONS$1 = {
-  en: {
-    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'
-  },
-  ro: {
-    loading: 'Se incarca, va rugam asteptati ...',
-    error: 'A fost o eroare in timp ce asteptam datele',
-    grid: 'Grid',
-    multiplier: 'Multiplicator',
-    numberOfDraws: 'Numarul de extrageri',
-    wagerPerDraw: 'Pariul per extragere',
-    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'
-  }
+    en: {
+        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'
+    },
+    ro: {
+        loading: 'Se incarca, va rugam asteptati ...',
+        error: 'A fost o eroare in timp ce asteptam datele',
+        grid: 'Grid',
+        multiplier: 'Multiplicator',
+        numberOfDraws: 'Numarul de extrageri',
+        wagerPerDraw: 'Pariul per extragere',
+        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'
+    },
+    hr: {
+        loading: 'Učitavanje, molimo pričekajte ...',
+        error: 'Došlo je do pogreške prilikom pokušaja dohvaćanja podataka',
+        grid: 'Tablica',
+        multiplier: 'Multiplikator',
+        numberOfDraws: 'Broj izvlačenja',
+        wagerPerDraw: 'Ulog po izvlačenju',
+        resetButton: 'Resetiraj',
+        autoButton: 'Osjećam se sretno'
+    }
 };
 const translate$1 = (key, customLang) => {
-  const lang = customLang;
-  return TRANSLATIONS$1[lang !== undefined && SUPPORTED_LANGUAGES$1.includes(lang) ? lang : DEFAULT_LANGUAGE$1][key];
+    const lang = customLang;
+    return TRANSLATIONS$1[lang !== undefined && SUPPORTED_LANGUAGES$1.includes(lang) ? lang : DEFAULT_LANGUAGE$1][key];
 };
 
 const lotteryTicketCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.TicketTitle{font-size:16px;font-weight:bold}.ButtonContainer{display:flex;justify-content:flex-end}.Toggle{cursor:pointer;margin-top:20px;display:inline-block}.ToggleSwitch{display:inline-block;background:#707070;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%, #F1F1F1 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:#00ABA4}.ToggleCheckbox:checked+.ToggleSwitch:before{left:38px}.ToggleCheckbox{position:absolute;visibility:hidden}.Label{margin-right:5px;position:relative;top:2px;font-size:14px;font-weight:lighter;color:#000}input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.NumberInput,.WagerInput{margin-top:10px;display:inline-flex;align-items:center}.NumberInput,.NumberInput *{box-sizing:border-box}.NumberInput button{cursor:pointer;outline:none;-webkit-appearance:none;border:none;align-items:center;justify-content:center;height:20px;position:relative}.NumberInput button:after{display:inline-block;position:absolute;transform:translate(-50%, -50%) rotate(180deg);align-items:center;text-align:center}.NumberInput button.Plus:after{transform:translate(-50%, -50%) rotate(0deg);width:30px;display:inline-flex;align-items:center;text-align:center}.NumberInput input[type=number],.WagerInput input[type=number]{max-width:50px;display:inline-flex;align-items:center;padding:4px 10px;text-align:center}.NumberInput input[type=number] .WagerInputTitle,.WagerInput input[type=number] .WagerInputTitle{font-size:14px;color:#000;padding:10px}.InputDefault{background-color:#F1F1F1;border-radius:4px;padding:5px;border:solid 1px #D4D4D4;color:#707070}.AutoButton{cursor:pointer;display:inline-block;border-radius:4px;padding:8px 20px;width:max-content;margin:5px 0;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.AutoButton:active{background:#00958f;color:#FFF}.ResetButton{cursor:pointer;display:inline-block;border-radius:4px;padding:8px 20px;width:max-content;margin:5px 0;color:#000;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ResetButton:hover{background:#FF6536;border:1px solid #FF3D00}.TicketGridBullets{background:#f1f1f1;border-radius:4px;padding:20px;margin-top:5px}.TicketGridBullets .TicketGridTitle{margin-top:0px}.Minus{border-radius:4px;width:30px;height:24px !important;margin-right:10px;color:#FFF;background:#009993}.Plus{border-radius:4px;width:30px;height:24px !important;margin-left:10px;color:#FFF;background:#009993}.SelectWrapper{width:auto;padding:5px;margin:0 auto;border:1px solid #ccc;border-radius:5px;position:relative}.SelectButton,.SelectOptions li{display:flex;align-items:center;cursor:pointer}.SelectButton{display:flex;padding:0 5px;border-radius:7px;align-items:center;justify-content:space-between;font-size:14px}.SelectButton span:first-child{padding-right:10px}.SelectExpand{transition:transform 0.3s linear;font-size:12px}.SelectActive .SelectExpand{transform:rotate(180deg)}.SelectContent{display:none;padding:5px;border-radius:7px}.SelectWrapper.SelectActive .SelectContent{width:100%;display:block;position:absolute;left:0;top:32px;padding:0;border:1px solid #ccc;overflow:hidden;background:#fff}.SelectContent .SelectOptions{max-height:100px;margin:0;overflow-y:auto;padding:0}.SelectContent .SelectOptions .SelectedValue{background-color:#009993;color:#fff}.SelectOptions::-webkit-scrollbar{width:7px}.SelectOptions::-webkit-scrollbar-track{background:#f1f1f1;border-radius:25px}.SelectOptions::-webkit-scrollbar-thumb{background:#ccc;border-radius:25px}.SelectOptions li{height:20px;padding:0 13px;font-size:14px}.SelectOptions li:hover{background:#f2f2f2}";
+const LotteryTicketStyle0 = lotteryTicketCss;
 
 const LotteryTicket = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ticketCompleted = createEvent(this, "ticketCompleted", 7);
-    this.autoSelection = createEvent(this, "autoSelection", 7);
-    this.resetSelection = createEvent(this, "resetSelection", 7);
-    this.stakeChange = createEvent(this, "stakeChange", 7);
-    this.multiplierChange = createEvent(this, "multiplierChange", 7);
-    /**
-     * Number of grids of a ticket
-     */
-    this.numberOfGrids = 1;
-    /**
-     * Option to have the ticket registered for multiple draws
-     */
-    this.multipleDraws = true;
-    /**
-     * Shows the reset button
-     */
-    this.resetButton = false;
-    /**
-     * Shows the auto-pick button
-     */
-    this.autoPick = false;
-    /**
-     * Language
-     */
-    this.language = 'en';
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.ticketCompleted = createEvent(this, "ticketCompleted", 7);
+        this.autoSelection = createEvent(this, "autoSelection", 7);
+        this.resetSelection = createEvent(this, "resetSelection", 7);
+        this.stakeChange = createEvent(this, "stakeChange", 7);
+        this.multiplierChange = createEvent(this, "multiplierChange", 7);
+        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);
+        };
+        this.endpoint = undefined;
+        this.gameId = undefined;
+        this.numberOfGrids = 1;
+        this.multipleDraws = true;
+        this.ticketId = undefined;
+        this.resetButton = false;
+        this.autoPick = false;
+        this.language = 'en';
+        this.clientStyling = '';
+        this.clientStylingUrlContent = '';
+        this.multiplier = false;
+        this.numberOfDraws = 1;
+        this.isLoading = true;
+        this.hasErrors = false;
+        this.ticketDone = false;
+        this.isCustomSelect = false;
+        this.amountInfo = {};
+        this.limitStylingAppends = false;
+    }
     /**
-     * Client custom styling via url content
+     * @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
      */
-    this.clientStylingUrlContent = '';
-    this.multiplier = false;
-    this.numberOfDraws = 1;
-    this.isLoading = true;
-    this.hasErrors = false;
-    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
-   */
-  checkForClickOutside(ev) {
-    if (ev.composedPath()[0].getAttribute('data-cluster') !== 'SelectComponent') {
-      this.isCustomSelect = false;
-    }
-  }
-  connectedCallback() {
-    let url = new URL(`${this.endpoint}/games/${this.gameId}`);
-    fetch(url.href)
-      .then((response) => {
-      if (response.ok) {
-        return response.json();
-      }
-      else {
-        // Throw error
-        this.hasErrors = true;
-      }
-    })
-      .then((data) => {
-      this.isLoading = false;
-      this.gameData = data;
-      this.grids = [...Array(data.rules.boards.length).keys()];
-      this.amountInfo = this.gameData.rules.stakes[0]; // initial value for select
-    })
-      .catch((err) => {
-      this.isLoading = false;
-      this.hasErrors = true;
-      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);
-  }
-  drawsChangeHandler(event) {
-    this.ticket = Object.assign(Object.assign({}, this.ticket), { draws: event });
-    this.ticketCompleted.emit(this.ticket);
-  }
-  gridFilledHandler(event) {
-    this.ticket = Object.assign(Object.assign({}, event.detail), { draws: this.numberOfDraws });
-    this.ticketDone = true;
-    this.ticketCompleted.emit(this.ticket);
-  }
-  toggleAutoSelection() {
-    this.ticketDone = true;
-    this.autoSelection.emit(this.ticketId);
-  }
-  toggleResetSelection() {
-    this.ticketDone = false;
-    this.resetSelection.emit(this.ticketId);
-  }
-  changeStake(ticketid, amount) {
-    this.stakeChange.emit({
-      ticketId: ticketid,
-      stake: amount
-    });
-  }
-  toggleClass() {
-    this.isCustomSelect = !this.isCustomSelect;
-  }
-  setDropdownItem(item) {
-    this.amountInfo = {
-      amount: item.amount,
-      currency: item.currency
-    };
-    this.isCustomSelect = false;
-    this.changeStake(this.ticketId, item.amount);
-  }
-  render() {
-    if (this.isLoading) {
-      return (h("div", null, h("p", null, translate$1('loading', this.language))));
-    }
-    else {
-      if (this.hasErrors) {
-        return (h("div", null, h("p", null, translate$1('error', this.language))));
-      }
-      else {
-        const { rules } = this.gameData;
-        return (h("div", { class: "TicketContainer", ref: el => this.stylingContainer = el }, h("p", { class: "TicketTitle" }, this.gameData.name), this.resetButton && this.ticketDone &&
-          h("div", { class: "ButtonContainer" }, h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection() }, translate$1('resetButton', this.language))), this.autoPick && !this.ticketDone &&
-          h("div", { class: "ButtonContainer" }, h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection() }, translate$1('autoButton', this.language))), this.grids.map((item, index) => h("div", { class: "TicketGridBullets" }, h("p", { class: "TicketGridTitle" }, translate$1('grid', this.language), " ", item), h("lottery-grid", { "grid-index": index, "maximum-allowed": rules.boards[index].maximumAllowed, "minimum-allowed": rules.boards[index].minimumAllowed, "total-numbers": rules.boards[index].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 &&
-          h("div", null, h("label", { class: "Toggle" }, h("label", { class: "Label" }, translate$1('multiplier', this.language), ": "), h("input", { class: "ToggleCheckbox", type: "checkbox", onInput: (e) => this.multiplierChangeHandler(e) }), h("div", { class: "ToggleSwitch" }))), this.multipleDraws &&
-          h("div", { class: "TicketDraws" }, h("label", { class: "Label" }, translate$1('numberOfDraws', this.language), ": "), h("div", { class: "NumberInput" }, h("button", { onClick: () => this.numberOfDraws > 1 ? this.numberOfDraws-- : this.numberOfDraws = 1, class: "Minus" }, "-"), h("input", { class: "InputDefault", min: "1", value: this.numberOfDraws, type: "number" }), h("button", { onClick: () => this.numberOfDraws++, class: "Plus" }, "+"))), h("div", null, h("label", { class: "Label" }, translate$1('wagerPerDraw', this.language), ": "), h("div", { class: "WagerInput" }, rules.stakes.length > 1 ?
-          (h("div", { "data-cluster": "SelectComponent", class: this.isCustomSelect ? "SelectWrapper SelectActive" : "SelectWrapper" }, h("div", { "data-cluster": "SelectComponent", class: "SelectButton", onClick: () => this.toggleClass() }, h("span", { "data-cluster": "SelectComponent" }, this.amountInfo.amount, " ", this.amountInfo.currency), h("span", { "data-cluster": "SelectComponent", class: "SelectExpand" }, "\u25BC")), h("div", { "data-cluster": "SelectComponent", class: "SelectContent" }, h("ul", { "data-cluster": "SelectComponent", class: "SelectOptions" }, rules.stakes.map((item) => h("li", { "data-cluster": "SelectComponent", class: this.amountInfo.amount == item.amount ? 'SelectedValue' : '', value: item.amount, onClick: () => this.setDropdownItem(item) }, item.amount, " ", item.currency)))))) : (h("div", null, h("input", { min: "1", value: rules.stakes[0].amount, type: "number", disabled: true }), h("p", { class: "WagerInputTitle" }, rules.stakes[0].currency)))))));
-      }
-    }
-  }
-  static get watchers() { return {
-    "numberOfDraws": ["drawsChangeHandler"]
-  }; }
+    checkForClickOutside(ev) {
+        if (ev.composedPath()[0].getAttribute('data-cluster') !== 'SelectComponent') {
+            this.isCustomSelect = false;
+        }
+    }
+    connectedCallback() {
+        let url = new URL(`${this.endpoint}/games/${this.gameId}`);
+        fetch(url.href)
+            .then((response) => {
+            if (response.ok) {
+                return response.json();
+            }
+            else {
+                // Throw error
+                this.hasErrors = true;
+            }
+        })
+            .then((data) => {
+            this.isLoading = false;
+            this.gameData = data;
+            this.grids = [...Array(this.gameData.type.boards.length).keys()];
+            this.amountInfo = this.gameData.type.stakes[0]; // initial value for select
+        })
+            .catch((err) => {
+            this.isLoading = false;
+            this.hasErrors = true;
+            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);
+    }
+    drawsChangeHandler(event) {
+        this.ticket = Object.assign(Object.assign({}, this.ticket), { draws: event });
+        this.ticketCompleted.emit(this.ticket);
+    }
+    gridFilledHandler(event) {
+        this.ticket = Object.assign(Object.assign({}, event.detail), { draws: this.numberOfDraws });
+        this.ticketDone = true;
+        this.ticketCompleted.emit(this.ticket);
+    }
+    toggleAutoSelection() {
+        this.ticketDone = true;
+        this.autoSelection.emit(this.ticketId);
+    }
+    toggleResetSelection() {
+        this.ticketDone = false;
+        this.resetSelection.emit(this.ticketId);
+    }
+    changeStake(ticketid, amount) {
+        this.stakeChange.emit({
+            ticketId: ticketid,
+            stake: amount
+        });
+    }
+    toggleClass() {
+        this.isCustomSelect = !this.isCustomSelect;
+    }
+    setDropdownItem(item) {
+        this.amountInfo = {
+            value: item.value,
+            currency: item.currency
+        };
+        this.isCustomSelect = false;
+        this.changeStake(this.ticketId, item.amount);
+    }
+    render() {
+        if (this.isLoading) {
+            return (h("div", null, h("p", null, translate$1('loading', this.language))));
+        }
+        else {
+            if (this.hasErrors) {
+                return (h("div", null, h("p", null, translate$1('error', this.language))));
+            }
+            else {
+                const { type } = this.gameData;
+                return (h("div", { class: "TicketContainer", ref: el => this.stylingContainer = el }, h("p", { class: "TicketTitle" }, this.gameData.name), this.resetButton && this.ticketDone &&
+                    h("div", { class: "ButtonContainer" }, h("a", { class: "ResetButton", onClick: () => this.toggleResetSelection() }, translate$1('resetButton', this.language))), this.autoPick && !this.ticketDone &&
+                    h("div", { class: "ButtonContainer" }, h("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection() }, translate$1('autoButton', this.language))), this.grids.map((_, index) => h("div", { class: "TicketGridBullets" }, h("p", { class: "TicketGridTitle" }, translate$1('grid', this.language), " ", index + 1), h("lottery-grid", { "grid-index": index, "maximum-allowed": type.boards[index].maximumAllowed, "minimum-allowed": type.boards[index].minimumAllowed, "total-numbers": type.boards[index].highNumber - type.boards[index].lowNumber + 1, 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 }))), type.multiplier &&
+                    h("div", null, h("label", { class: "Toggle" }, h("label", { class: "Label" }, translate$1('multiplier', this.language), ": "), h("input", { class: "ToggleCheckbox", type: "checkbox", onInput: (e) => this.multiplierChangeHandler(e) }), h("div", { class: "ToggleSwitch" }))), this.multipleDraws &&
+                    h("div", { class: "TicketDraws" }, h("label", { class: "Label" }, translate$1('numberOfDraws', this.language), ": "), h("div", { class: "NumberInput" }, h("button", { onClick: () => this.numberOfDraws > 1 ? this.numberOfDraws-- : this.numberOfDraws = 1, class: "Minus" }, "-"), h("input", { class: "InputDefault", min: "1", value: this.numberOfDraws, type: "number" }), h("button", { onClick: () => this.numberOfDraws++, class: "Plus" }, "+"))), h("div", null, h("label", { class: "Label" }, translate$1('wagerPerDraw', this.language), ": "), h("div", { class: "WagerInput" }, type.stakes.length > 1 ?
+                    (h("div", { "data-cluster": "SelectComponent", class: this.isCustomSelect ? "SelectWrapper SelectActive" : "SelectWrapper" }, h("div", { "data-cluster": "SelectComponent", class: "SelectButton", onClick: () => this.toggleClass() }, h("span", { "data-cluster": "SelectComponent" }, this.amountInfo.value, " ", this.amountInfo.currency), h("span", { "data-cluster": "SelectComponent", class: "SelectExpand" }, "\u25BC")), h("div", { "data-cluster": "SelectComponent", class: "SelectContent" }, h("ul", { "data-cluster": "SelectComponent", class: "SelectOptions" }, type.stakes.map((item) => h("li", { "data-cluster": "SelectComponent", class: this.amountInfo.value == item.value ? 'SelectedValue' : '', value: item.value, onClick: () => this.setDropdownItem(item) }, item.value, " ", item.currency)))))) : (h("div", null, h("input", { min: "1", value: type.stakes[0].amount, type: "number", disabled: true }), h("p", { class: "WagerInputTitle" }, type.stakes[0].currency)))))));
+            }
+        }
+    }
+    static get watchers() { return {
+        "numberOfDraws": ["drawsChangeHandler"]
+    }; }
 };
-LotteryTicket.style = lotteryTicketCss;
+LotteryTicket.style = LotteryTicketStyle0;
 
 const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar'];
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
 const TRANSLATIONS = {
-  en: {
-    ticket: 'Ticket',
-  },
-  ro: {
-    ticket: 'Bilet',
-  },
-  fr: {
-    ticket: 'Billet'
-  },
-  ar: {
-    ticket: 'تذكرة',
-  }
+    en: {
+        ticket: 'Ticket',
+    },
+    ro: {
+        ticket: 'Bilet',
+    },
+    fr: {
+        ticket: 'Billet'
+    },
+    ar: {
+        ticket: 'تذكرة',
+    },
+    hr: {
+        ticket: 'Listić',
+    }
 };
 const translate = (key, customLang) => {
-  const lang = customLang;
-  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
 };
 
-const lotteryTicketControllerCss = ":host{display:block}";
+const lotteryTicketControllerCss = ":host{font-family:\"Roboto\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";font-size:0.8rem}*,*::before,*::after{margin:0;padding:0;list-style:none;outline:none;box-sizing:border-box}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.player-account-gaming-limits-popup-2{background:var(--emfe-w-color-black, #000000);color:var(--emfe-w-color-white, #000)}.Title{font-weight:800;font-size:18px}button{display:block;font-size:0.75rem;padding:12px 0;border:0;border-radius:2px;cursor:pointer}button.PrimaryButtonStyle{font-size:14px;color:#fff;background:rgb(122, 195, 23)}button.SecondaryButtonStyle{border:1px solid #999;color:#666;background:#fff}.LinkButton{display:inline;padding:0;color:#3366CC;text-decoration:underline;background-color:rgba(0, 0, 0, 0)}.ResultIconWrapper{display:flex;flex-direction:column;align-items:center;margin:12px 0}.ResultIconWrapper svg{height:auto;width:60px;margin:12px}.ResultIconWrapper p{color:#666}.Overlay{position:absolute;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0, 0, 0, 0.5);display:flex;justify-content:center;align-items:center}.ModalContainer{position:fixed;top:30vh;width:320px;height:auto;padding:18px 14px;background:#fff;border-radius:4px}.InitialWrapper{display:flex;flex-direction:column;gap:12px}.AdditionalInformation{margin:10px 0;font-size:14px}.TermsConditions{font-size:12px}.ExpandButton{font-size:14px;background-color:#fff;border:0;padding:0;margin-top:-10px;color:#999;display:flex;justify-content:center;align-items:center;cursor:pointer}.ExpandButton svg{width:28px;height:auto;margin-left:-4px}.LeftAlign{text-align:left;font-size:16px}.CenterAlign{text-align:center}.SetLimitSection{display:flex;flex-direction:column;gap:6px}.DepositTextSection{display:flex;justify-content:space-between}.DepositInputSection{height:32px;display:flex;gap:4px}.DepositInput{flex-grow:1;padding:0 6px}.SubmitDepositButton{flex-grow:1;font-size:0.75rem;padding:0}.SubmitDepositButton[disabled]{align-items:center;color:#ccc;cursor:not-allowed;background:#fff;border:#ccc 1px solid}.Hidden{display:none}.Extended{transform:rotate(180deg)}";
+const LotteryTicketControllerStyle0 = lotteryTicketControllerCss;
 
 const LotteryTicketController = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.deleteTicketEvent = createEvent(this, "deleteTicket", 7);
-    /**
-     * Endpoint URL for the source of data (NorWAy standard)
-     */
-    this.endpoint = '';
-    /**
-     * Ticket number
-     */
-    this.ticketId = 1;
-    /**
-     * Activates postMessages as events for actions from the widget
-     */
-    this.postMessage = false;
-    /**
-     * Name of the event emitter by the action button
-     */
-    this.eventName = 'deleteTicketAction';
-    /**
-     * Collapsed
-     */
-    this.collapsed = true;
-    /**
-     * Number of grids?
-     */
-    this.numberOfGrids = 1;
-    /**
-     * This toggles if the last ticket added should be expanded or not
-     */
-    this.last = false;
-    /**
-     * Language
-     */
-    this.language = 'en';
-    /**
-     * Shows the auto-pick button
-     */
-    this.autoPick = false;
-    /**
-     * Shows the reset button
-     */
-    this.resetButton = false;
-    /**
-     * 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
-  helperAccordionActionHandler() {
-    if (this.postMessage) {
-      window.postMessage({ type: this.eventName }, window.location.href);
-    }
-    this.deleteTicketEvent.emit({
-      ticketId: this.ticketId
-    });
-  }
-  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", { class: "LotteryTicketControllerContainer", ref: el => this.stylingContainer = el }, h("helper-accordion", { "header-title": `${translate('ticket', this.language)} ${this.ticketId}`, "header-subtitle": this.ticketDescription, footer: true, "delete-tab": true, collapsed: !this.last || this.collapsed, language: this.language, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h("div", { slot: "accordionContent" }, h("lottery-ticket", { endpoint: this.endpoint, "game-id": this.gameId, "ticket-id": this.ticketId, "number-of-grids": this.numberOfGrids, language: this.language, "reset-button": this.resetButton, "auto-pick": this.autoPick, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })))));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.deleteTicketEvent = createEvent(this, "deleteTicket", 7);
+        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);
+        };
+        this.endpoint = '';
+        this.ticketId = 1;
+        this.ticketDescription = undefined;
+        this.gameId = undefined;
+        this.postMessage = false;
+        this.eventName = 'deleteTicketAction';
+        this.collapsed = true;
+        this.numberOfGrids = 1;
+        this.last = false;
+        this.language = 'en';
+        this.autoPick = false;
+        this.resetButton = false;
+        this.totalControllers = 1;
+        this.clientStyling = '';
+        this.clientStylingUrlContent = '';
+        this.limitStylingAppends = false;
+    }
+    // @TODO fix the `any` type
+    helperAccordionActionHandler() {
+        if (this.postMessage) {
+            window.postMessage({ type: this.eventName }, window.location.href);
+        }
+        this.deleteTicketEvent.emit({
+            ticketId: this.ticketId
+        });
+    }
+    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() {
+        console.log('ticket id:', this.ticketId);
+        return (h("div", { key: '203c89c4b240cd7c99eb3d37fa3a4dbc17ed18e3', class: "LotteryTicketControllerContainer", ref: el => this.stylingContainer = el }, h("helper-accordion", { key: 'ad9801b15a1718ff7470ab3084c4b569ad23f6e3', "header-title": `${translate('ticket', this.language)} ${this.ticketId}`, "header-subtitle": this.ticketDescription, footer: true, "delete-tab": this.totalControllers !== 1, collapsed: !this.last || this.collapsed, language: this.language, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h("div", { key: 'b9c618987e848d4b44fee6941f8b5c9696bd44e8', slot: "accordionContent" }, h("lottery-ticket", { key: '8acdc3d3cce5b654e7cddd71576c2e993881786f', endpoint: this.endpoint, "game-id": this.gameId, "ticket-id": this.ticketId, "number-of-grids": this.numberOfGrids, language: this.language, "reset-button": this.resetButton, "auto-pick": this.autoPick, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })))));
+    }
 };
-LotteryTicketController.style = lotteryTicketControllerCss;
+LotteryTicketController.style = LotteryTicketControllerStyle0;
 
-export { Accordion as helper_accordion, LotteryBullet as lottery_bullet, LotteryGrid as lottery_grid, LotteryTicket as lottery_ticket, LotteryTicketController as lottery_ticket_controller };
+export { HelperAccordion as helper_accordion, LotteryBullet as lottery_bullet, LotteryGrid as lottery_grid, LotteryTicket as lottery_ticket, LotteryTicketController as lottery_ticket_controller };