@everymatrix/lottery-game-page 1.44.0 → 1.45.0

package/dist/esm/{helper-filters_2.entry.js → helper-accordion_13.entry.js}

@@ -1,75 +1,166 @@
-import { r as registerInstance, c as createEvent, h as h$2 } from './index-d1baacd4.js';
+import { r as registerInstance, c as createEvent, h as h$2, g as getElement, a as getAssetPath } from './index-8248702b.js';
 
-const DEFAULT_LANGUAGE$1 = 'en';
-const SUPPORTED_LANGUAGES$1 = ['ro', 'en', 'hr'];
-const TRANSLATIONS$1 = {
-  en: {
-    filterOpen: 'Filter',
-    filterClear: 'Clear',
-    filterModalTicketTitle: 'Ticket Results',
-    filterModalDrawTitle: 'Draws Results History',
-    filterTicketPlaceholder: 'Search for a ticket ID',
-    filterDrawPlaceholder: 'Search for a draw ID',
-    filterDateRangePlaceholder: 'Date Range',
-    filterModalButton: 'Search',
-    filterFromCalendar: 'From',
-    filterToCalendar: 'To',
-    filterOrDate: 'or search by date'
-  },
-  ro: {
-    filterOpen: 'Filtrare',
-    filterClear: 'Stergere',
-    filterModalTicketTitle: 'Rezultatele biletelor',
-    filterModalDrawTitle: 'Rezultatele draw-urilor',
-    filterTicketPlaceholder: 'Cauta ID bilet',
-    filterDrawPlaceholder: 'Cauta ID draw',
-    filterDateRangePlaceholder: 'Perioada',
-    filterModalButton: 'Cauta',
-    filterOrDate: 'sau cauta dupa data'
-  },
-  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'
-  },
-  hr: {
-    filterOpen: 'Filter',
-    filterClear: 'Očisti',
-    filterModalTicketTitle: 'Rezultati listića',
-    filterModalDrawTitle: 'Povijest rezultata Izvlačenja',
-    filterTicketPlaceholder: 'Pretraga ID listića',
-    filterDrawPlaceholder: 'Pretraga ID izvlačenja',
-    filterDateRangePlaceholder: 'Raspon datuma',
-    filterModalButton: 'Traži',
-    filterFromCalendar: 'Od',
-    filterToCalendar: 'Do',
-    filterOrDate: 'ili tražite po datumu'
-  }
+const DEFAULT_LANGUAGE$6 = 'en';
+const TRANSLATIONS$6 = {
+    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$1[lang !== undefined && SUPPORTED_LANGUAGES$1.includes(lang) ? lang : DEFAULT_LANGUAGE$1][key];
+const translate$7 = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS$6[(lang !== undefined) && (lang in TRANSLATIONS$6) ? lang : DEFAULT_LANGUAGE$6][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;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 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$2("div", { key: 'ad26faefd6e3dd089171c7e2bff13faa5a26d972', class: "Wrapper", ref: el => this.stylingContainer = el }, h$2("div", { key: 'bb7045653ec12a2526029589744f7ef014ec6a6a', class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : 'Header', onClick: () => this.toggleContent() }, h$2("p", { key: 'ae30943582063e368e942124d8d5acadc1732629', class: "Title" }, this.headerTitle), h$2("p", { key: '7c35076cb768de784177988900c61fe40a71594c', class: "Subtitle" }, this.headerSubtitle), h$2("p", { key: 'daff2b456a427f45b00efc32ba33a68cdc2228f0', class: "Subtitle Description" }, this.description), h$2("span", { key: '0c4f942642da6e8b1ac3d2aeac46034963965d8f', class: "Expand" }, this.showContent ? '<' : '>')), this.showContent &&
+            h$2("div", { key: 'c688ab7cc629a3974b905a2fdc43063e996a3b90' }, h$2("div", { key: 'aaa3ad7d9f1503b8e1baaa2c756376a580ffe261', class: "Content" }, h$2("slot", { key: '8c5c8ff70857da9414c7284b052a3fbc5f503f4a', name: 'accordionContent' }), this.footer && this.showContent &&
+                h$2("div", { key: '917191f55a45647d708a5e3ff5e188c7e565a0c0' }, this.deleteTab &&
+                    h$2("span", { key: 'e7fdd5b4f18cacaceda206b36ce9576cc3fc1472', class: "ActionButton", onClick: () => this.deleteAction() }, translate$7('deleteTicket', this.language)))))));
+    }
+};
+HelperAccordion.style = HelperAccordionStyle0;
+
+const DEFAULT_LANGUAGE$5 = 'en';
+const SUPPORTED_LANGUAGES$5 = ['ro', 'en', 'hr'];
+const TRANSLATIONS$5 = {
+    en: {
+        filterOpen: 'Filter',
+        filterClear: 'Clear',
+        filterModalTicketTitle: 'Ticket Results',
+        filterModalDrawTitle: 'Draws Results History',
+        filterTicketPlaceholder: 'Search for a ticket ID',
+        filterDrawPlaceholder: 'Search for a draw ID',
+        filterDateRangePlaceholder: 'Date Range',
+        filterModalButton: 'Search',
+        filterFromCalendar: 'From',
+        filterToCalendar: 'To',
+        filterOrDate: 'or search by date'
+    },
+    ro: {
+        filterOpen: 'Filtrare',
+        filterClear: 'Stergere',
+        filterModalTicketTitle: 'Rezultatele biletelor',
+        filterModalDrawTitle: 'Rezultatele draw-urilor',
+        filterTicketPlaceholder: 'Cauta ID bilet',
+        filterDrawPlaceholder: 'Cauta ID draw',
+        filterDateRangePlaceholder: 'Perioada',
+        filterModalButton: 'Cauta',
+        filterOrDate: 'sau cauta dupa data'
+    },
+    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'
+    },
+    hr: {
+        filterOpen: 'Filter',
+        filterClear: 'Očisti',
+        filterModalTicketTitle: 'Rezultati listića',
+        filterModalDrawTitle: 'Povijest rezultata Izvlačenja',
+        filterTicketPlaceholder: 'Pretraga ID listića',
+        filterDrawPlaceholder: 'Pretraga ID izvlačenja',
+        filterDateRangePlaceholder: 'Raspon datuma',
+        filterModalButton: 'Traži',
+        filterFromCalendar: 'Od',
+        filterToCalendar: 'Do',
+        filterOrDate: 'ili tražite po datumu'
+    }
+};
+const translate$6 = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS$5[lang !== undefined && SUPPORTED_LANGUAGES$5.includes(lang) ? lang : DEFAULT_LANGUAGE$5][key];
 };
 
 /**
@@ -106,17 +197,17 @@ function defineCustomElement(CustomElement) {
  *
  * @private
  */
-class Lumo extends HTMLElement {
+class Lumo$2 extends HTMLElement {
   static get is() {
     return 'vaadin-lumo-styles';
   }
 
   static get version() {
-    return '24.2.5';
+    return '24.2.9';
   }
 }
 
-defineCustomElement(Lumo);
+defineCustomElement(Lumo$2);
 
 /**
  * @license
@@ -460,7 +551,7 @@ const addGlobalThemeStyles = (id, ...styles) => {
   document.head.insertAdjacentElement('afterbegin', styleTag);
 };
 
-const addLumoGlobalStyles = (id, ...styles) => {
+const addLumoGlobalStyles$2 = (id, ...styles) => {
   addGlobalThemeStyles(`lumo-${id}`, styles);
 };
 
@@ -470,7 +561,7 @@ const addLumoGlobalStyles = (id, ...styles) => {
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-const colorBase = i$1`
+const colorBase$2 = i$1`
   :host {
     /* Base (background) */
     --lumo-base-color: #fff;
@@ -557,9 +648,9 @@ const colorBase = i$1`
   }
 `;
 
-addLumoGlobalStyles('color-props', colorBase);
+addLumoGlobalStyles$2('color-props', colorBase$2);
 
-const color = i$1`
+const color$2 = i$1`
   [theme~='dark'] {
     /* Base (background) */
     --lumo-base-color: hsl(214, 35%, 21%);
@@ -676,7 +767,7 @@ const color = i$1`
   }
 `;
 
-registerStyles('', color, { moduleId: 'lumo-color' });
+registerStyles('', color$2, { moduleId: 'lumo-color' });
 
 /**
  * @license
@@ -684,7 +775,7 @@ registerStyles('', color, { moduleId: 'lumo-color' });
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-const sizing = i$1`
+const sizing$2 = i$1`
   :host {
     --lumo-size-xs: 1.625rem;
     --lumo-size-s: 1.875rem;
@@ -701,7 +792,7 @@ const sizing = i$1`
   }
 `;
 
-addLumoGlobalStyles('sizing-props', sizing);
+addLumoGlobalStyles$2('sizing-props', sizing$2);
 
 /**
  * @license
@@ -709,7 +800,7 @@ addLumoGlobalStyles('sizing-props', sizing);
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-const style = i$1`
+const style$2 = i$1`
   :host {
     /* Border radius */
     --lumo-border-radius-s: 0.25em; /* Checkbox, badge, date-picker year indicator, etc */
@@ -739,7 +830,7 @@ i$1`
   }
 `;
 
-addLumoGlobalStyles('style-props', style);
+addLumoGlobalStyles$2('style-props', style$2);
 
 /**
  * @license
@@ -747,7 +838,7 @@ addLumoGlobalStyles('style-props', style);
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-const font = i$1`
+const font$2 = i$1`
   :host {
     /* prettier-ignore */
     --lumo-font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
@@ -769,7 +860,7 @@ const font = i$1`
   }
 `;
 
-const typography = i$1`
+const typography$2 = i$1`
   body,
   :host {
     font-family: var(--lumo-font-family);
@@ -863,8 +954,8 @@ const typography = i$1`
   }
 `;
 
-registerStyles('', typography, { moduleId: 'lumo-typography' });
-addLumoGlobalStyles('typography-props', font);
+registerStyles('', typography$2, { moduleId: 'lumo-typography' });
+addLumoGlobalStyles$2('typography-props', font$2);
 
 registerStyles(
   'vaadin-input-container',
@@ -1814,7 +1905,7 @@ function isDescendant(base, path) {
  * @param {string} path Path to translate
  * @return {string} Translated string
  */
-function translate$1(base, newBase, path) {
+function translate$5(base, newBase, path) {
   return newBase + path.slice(base.length);
 }
 
@@ -4015,7 +4106,7 @@ function handleNotification(event, inst, fromProp, toPath, negate) {
   let detail = /** @type {Object} */(event.detail);
   let fromPath = detail && detail.path;
   if (fromPath) {
-    toPath = translate$1(fromProp, toPath, fromPath);
+    toPath = translate$5(fromProp, toPath, fromPath);
     value = detail && detail.value;
   } else {
     value = event.currentTarget[fromProp];
@@ -4301,10 +4392,10 @@ function computeLinkedPaths(inst, path, value) {
     for (let a in links) {
       let b = links[a];
       if (isDescendant(a, path)) {
-        link = translate$1(a, b, path);
+        link = translate$5(a, b, path);
         inst._setPendingPropertyOrPath(link, value, true, true);
       } else if (isDescendant(b, path)) {
-        link = translate$1(b, a, path);
+        link = translate$5(b, a, path);
         inst._setPendingPropertyOrPath(link, value, true, true);
       }
     }
@@ -4416,7 +4507,7 @@ function runBindingEffect(inst, path, props, oldProps, info, hasPaths, nodeList)
       node.__isPropertyEffectsClient &&
       node.__dataHasAccessor && node.__dataHasAccessor[binding.target]) {
     let value = props[path];
-    path = translate$1(part.source, binding.target, path);
+    path = translate$5(part.source, binding.target, path);
     if (node._setPendingPropertyOrPath(path, value, false, true)) {
       inst._enqueueClient(node);
     }
@@ -8364,7 +8455,60 @@ defineCustomElement(InputContainer);
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-const spacing = i$1`
+/**
+ * Dummy custom element used for collecting
+ * development time usage statistics.
+ *
+ * @private
+ */
+class Lumo$1 extends HTMLElement {
+  static get is() {
+    return 'vaadin-lumo-styles';
+  }
+
+  static get version() {
+    return '24.2.5';
+  }
+}
+
+defineCustomElement(Lumo$1);
+
+const addLumoGlobalStyles$1 = (id, ...styles) => {
+  addGlobalThemeStyles(`lumo-${id}`, styles);
+};
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const sizing$1 = i$1`
+  :host {
+    --lumo-size-xs: 1.625rem;
+    --lumo-size-s: 1.875rem;
+    --lumo-size-m: 2.25rem;
+    --lumo-size-l: 2.75rem;
+    --lumo-size-xl: 3.5rem;
+
+    /* Icons */
+    --lumo-icon-size-s: 1.25em;
+    --lumo-icon-size-m: 1.5em;
+    --lumo-icon-size-l: 2.25em;
+    /* For backwards compatibility */
+    --lumo-icon-size: var(--lumo-icon-size-m);
+  }
+`;
+
+addLumoGlobalStyles$1('sizing-props', sizing$1);
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const spacing$1 = i$1`
   :host {
     /* Square */
     --lumo-space-xs: 0.25rem;
@@ -8389,7 +8533,7 @@ const spacing = i$1`
   }
 `;
 
-addLumoGlobalStyles('spacing-props', spacing);
+addLumoGlobalStyles$1('spacing-props', spacing$1);
 
 /**
  * @license
@@ -8397,72 +8541,37 @@ addLumoGlobalStyles('spacing-props', spacing);
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-const overlay = i$1`
+const style$1 = i$1`
   :host {
-    top: var(--lumo-space-m);
-    right: var(--lumo-space-m);
-    bottom: var(--lumo-space-m);
-    left: var(--lumo-space-m);
-    /* Workaround for Edge issue (only on Surface), where an overflowing vaadin-list-box inside vaadin-select-overlay makes the overlay transparent */
-    /* stylelint-disable-next-line */
-    outline: 0px solid transparent;
-  }
-
-  [part='overlay'] {
-    background-color: var(--lumo-base-color);
-    background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
-    border-radius: var(--lumo-border-radius-m);
-    box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-m);
-    color: var(--lumo-body-text-color);
-    font-family: var(--lumo-font-family);
-    font-size: var(--lumo-font-size-m);
-    font-weight: 400;
-    line-height: var(--lumo-line-height-m);
-    letter-spacing: 0;
-    text-transform: none;
-    -webkit-text-size-adjust: 100%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  [part='content'] {
-    padding: var(--lumo-space-xs);
-  }
-
-  [part='backdrop'] {
-    background-color: var(--lumo-shade-20pct);
-    animation: 0.2s lumo-overlay-backdrop-enter both;
-    will-change: opacity;
-  }
-
-  @keyframes lumo-overlay-backdrop-enter {
-    0% {
-      opacity: 0;
-    }
-  }
+    /* Border radius */
+    --lumo-border-radius-s: 0.25em; /* Checkbox, badge, date-picker year indicator, etc */
+    --lumo-border-radius-m: var(--lumo-border-radius, 0.25em); /* Button, text field, menu overlay, etc */
+    --lumo-border-radius-l: 0.5em; /* Dialog, notification, etc */
 
-  :host([closing]) [part='backdrop'] {
-    animation: 0.2s lumo-overlay-backdrop-exit both;
-  }
+    /* Shadow */
+    --lumo-box-shadow-xs: 0 1px 4px -1px var(--lumo-shade-50pct);
+    --lumo-box-shadow-s: 0 2px 4px -1px var(--lumo-shade-20pct), 0 3px 12px -1px var(--lumo-shade-30pct);
+    --lumo-box-shadow-m: 0 2px 6px -1px var(--lumo-shade-20pct), 0 8px 24px -4px var(--lumo-shade-40pct);
+    --lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);
+    --lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct);
 
-  @keyframes lumo-overlay-backdrop-exit {
-    100% {
-      opacity: 0;
-    }
+    /* Clickable element cursor */
+    --lumo-clickable-cursor: default;
   }
+`;
 
-  @keyframes lumo-overlay-dummy-animation {
-    0% {
-      opacity: 1;
-    }
-
-    100% {
-      opacity: 1;
-    }
+/**
+ * Default values for component-specific custom properties.
+ */
+i$1`
+  html {
+    --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
+    --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
+    --vaadin-input-field-border-radius: var(--lumo-border-radius-m);
   }
 `;
 
-registerStyles('', overlay, { moduleId: 'lumo-overlay' });
+addLumoGlobalStyles$1('style-props', style$1);
 
 /**
  * @license
@@ -8470,571 +8579,1446 @@ registerStyles('', overlay, { moduleId: 'lumo-overlay' });
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-const menuOverlayCore = i$1`
-  :host([opening]),
-  :host([closing]) {
-    animation: 0.14s lumo-overlay-dummy-animation;
-  }
-
-  [part='overlay'] {
-    will-change: opacity, transform;
-  }
+const colorBase$1 = i$1`
+  :host {
+    /* Base (background) */
+    --lumo-base-color: #fff;
 
-  :host([opening]) [part='overlay'] {
-    animation: 0.1s lumo-menu-overlay-enter ease-out both;
-  }
+    /* Tint */
+    --lumo-tint-5pct: hsla(0, 0%, 100%, 0.3);
+    --lumo-tint-10pct: hsla(0, 0%, 100%, 0.37);
+    --lumo-tint-20pct: hsla(0, 0%, 100%, 0.44);
+    --lumo-tint-30pct: hsla(0, 0%, 100%, 0.5);
+    --lumo-tint-40pct: hsla(0, 0%, 100%, 0.57);
+    --lumo-tint-50pct: hsla(0, 0%, 100%, 0.64);
+    --lumo-tint-60pct: hsla(0, 0%, 100%, 0.7);
+    --lumo-tint-70pct: hsla(0, 0%, 100%, 0.77);
+    --lumo-tint-80pct: hsla(0, 0%, 100%, 0.84);
+    --lumo-tint-90pct: hsla(0, 0%, 100%, 0.9);
+    --lumo-tint: #fff;
 
-  @keyframes lumo-menu-overlay-enter {
-    0% {
-      opacity: 0;
-      transform: translateY(-4px);
-    }
-  }
+    /* Shade */
+    --lumo-shade-5pct: hsla(214, 61%, 25%, 0.05);
+    --lumo-shade-10pct: hsla(214, 57%, 24%, 0.1);
+    --lumo-shade-20pct: hsla(214, 53%, 23%, 0.16);
+    --lumo-shade-30pct: hsla(214, 50%, 22%, 0.26);
+    --lumo-shade-40pct: hsla(214, 47%, 21%, 0.38);
+    --lumo-shade-50pct: hsla(214, 45%, 20%, 0.52);
+    --lumo-shade-60pct: hsla(214, 43%, 19%, 0.6);
+    --lumo-shade-70pct: hsla(214, 42%, 18%, 0.69);
+    --lumo-shade-80pct: hsla(214, 41%, 17%, 0.83);
+    --lumo-shade-90pct: hsla(214, 40%, 16%, 0.94);
+    --lumo-shade: hsl(214, 35%, 15%);
 
-  :host([closing]) [part='overlay'] {
-    animation: 0.1s lumo-menu-overlay-exit both;
-  }
+    /* Contrast */
+    --lumo-contrast-5pct: var(--lumo-shade-5pct);
+    --lumo-contrast-10pct: var(--lumo-shade-10pct);
+    --lumo-contrast-20pct: var(--lumo-shade-20pct);
+    --lumo-contrast-30pct: var(--lumo-shade-30pct);
+    --lumo-contrast-40pct: var(--lumo-shade-40pct);
+    --lumo-contrast-50pct: var(--lumo-shade-50pct);
+    --lumo-contrast-60pct: var(--lumo-shade-60pct);
+    --lumo-contrast-70pct: var(--lumo-shade-70pct);
+    --lumo-contrast-80pct: var(--lumo-shade-80pct);
+    --lumo-contrast-90pct: var(--lumo-shade-90pct);
+    --lumo-contrast: var(--lumo-shade);
 
-  @keyframes lumo-menu-overlay-exit {
-    100% {
-      opacity: 0;
-    }
-  }
-`;
+    /* Text */
+    --lumo-header-text-color: var(--lumo-contrast);
+    --lumo-body-text-color: var(--lumo-contrast-90pct);
+    --lumo-secondary-text-color: var(--lumo-contrast-70pct);
+    --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
+    --lumo-disabled-text-color: var(--lumo-contrast-30pct);
 
-registerStyles('', menuOverlayCore, { moduleId: 'lumo-menu-overlay-core' });
+    /* Primary */
+    --lumo-primary-color: hsl(214, 100%, 48%);
+    --lumo-primary-color-50pct: hsla(214, 100%, 49%, 0.76);
+    --lumo-primary-color-10pct: hsla(214, 100%, 60%, 0.13);
+    --lumo-primary-text-color: hsl(214, 100%, 43%);
+    --lumo-primary-contrast-color: #fff;
 
-const menuOverlayExt = i$1`
-  /* Small viewport (bottom sheet) styles */
-  /* Use direct media queries instead of the state attributes ([phone] and [fullscreen]) provided by the elements */
-  @media (max-width: 420px), (max-height: 420px) {
-    :host {
-      top: 0 !important;
-      right: 0 !important;
-      bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;
-      left: 0 !important;
-      align-items: stretch !important;
-      justify-content: flex-end !important;
-    }
+    /* Error */
+    --lumo-error-color: hsl(3, 85%, 48%);
+    --lumo-error-color-50pct: hsla(3, 85%, 49%, 0.5);
+    --lumo-error-color-10pct: hsla(3, 85%, 49%, 0.1);
+    --lumo-error-text-color: hsl(3, 89%, 42%);
+    --lumo-error-contrast-color: #fff;
 
-    [part='overlay'] {
-      max-height: 50vh;
-      width: 100vw;
-      border-radius: 0;
-      box-shadow: var(--lumo-box-shadow-xl);
-    }
+    /* Success */
+    --lumo-success-color: hsl(145, 72%, 30%);
+    --lumo-success-color-50pct: hsla(145, 72%, 31%, 0.5);
+    --lumo-success-color-10pct: hsla(145, 72%, 31%, 0.1);
+    --lumo-success-text-color: hsl(145, 85%, 25%);
+    --lumo-success-contrast-color: #fff;
 
-    /* The content part scrolls instead of the overlay part, because of the gradient fade-out */
-    [part='content'] {
-      padding: 30px var(--lumo-space-m);
-      max-height: inherit;
-      box-sizing: border-box;
-      -webkit-overflow-scrolling: touch;
-      overflow: auto;
-      -webkit-mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
-      mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
-    }
+    /* Warning */
+    --lumo-warning-color: hsl(48, 100%, 50%);
+    --lumo-warning-color-10pct: hsla(48, 100%, 50%, 0.25);
+    --lumo-warning-text-color: hsl(32, 100%, 30%);
+    --lumo-warning-contrast-color: var(--lumo-shade-90pct);
+  }
 
-    [part='backdrop'] {
-      display: block;
+  /* forced-colors mode adjustments */
+  @media (forced-colors: active) {
+    html {
+      --lumo-disabled-text-color: GrayText;
     }
+  }
+`;
 
-    /* Animations */
+addLumoGlobalStyles$1('color-props', colorBase$1);
 
-    :host([opening]) [part='overlay'] {
-      animation: 0.2s lumo-mobile-menu-overlay-enter cubic-bezier(0.215, 0.61, 0.355, 1) both;
-    }
+const color$1 = i$1`
+  [theme~='dark'] {
+    /* Base (background) */
+    --lumo-base-color: hsl(214, 35%, 21%);
 
-    :host([closing]),
-    :host([closing]) [part='backdrop'] {
-      animation-delay: 0.14s;
-    }
+    /* Tint */
+    --lumo-tint-5pct: hsla(214, 65%, 85%, 0.06);
+    --lumo-tint-10pct: hsla(214, 60%, 80%, 0.14);
+    --lumo-tint-20pct: hsla(214, 64%, 82%, 0.23);
+    --lumo-tint-30pct: hsla(214, 69%, 84%, 0.32);
+    --lumo-tint-40pct: hsla(214, 73%, 86%, 0.41);
+    --lumo-tint-50pct: hsla(214, 78%, 88%, 0.5);
+    --lumo-tint-60pct: hsla(214, 82%, 90%, 0.58);
+    --lumo-tint-70pct: hsla(214, 87%, 92%, 0.69);
+    --lumo-tint-80pct: hsla(214, 91%, 94%, 0.8);
+    --lumo-tint-90pct: hsla(214, 96%, 96%, 0.9);
+    --lumo-tint: hsl(214, 100%, 98%);
 
-    :host([closing]) [part='overlay'] {
-      animation: 0.14s 0.14s lumo-mobile-menu-overlay-exit cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
-    }
-  }
+    /* Shade */
+    --lumo-shade-5pct: hsla(214, 0%, 0%, 0.07);
+    --lumo-shade-10pct: hsla(214, 4%, 2%, 0.15);
+    --lumo-shade-20pct: hsla(214, 8%, 4%, 0.23);
+    --lumo-shade-30pct: hsla(214, 12%, 6%, 0.32);
+    --lumo-shade-40pct: hsla(214, 16%, 8%, 0.41);
+    --lumo-shade-50pct: hsla(214, 20%, 10%, 0.5);
+    --lumo-shade-60pct: hsla(214, 24%, 12%, 0.6);
+    --lumo-shade-70pct: hsla(214, 28%, 13%, 0.7);
+    --lumo-shade-80pct: hsla(214, 32%, 13%, 0.8);
+    --lumo-shade-90pct: hsla(214, 33%, 13%, 0.9);
+    --lumo-shade: hsl(214, 33%, 13%);
 
-  @keyframes lumo-mobile-menu-overlay-enter {
-    0% {
-      transform: translateY(150%);
-    }
-  }
+    /* Contrast */
+    --lumo-contrast-5pct: var(--lumo-tint-5pct);
+    --lumo-contrast-10pct: var(--lumo-tint-10pct);
+    --lumo-contrast-20pct: var(--lumo-tint-20pct);
+    --lumo-contrast-30pct: var(--lumo-tint-30pct);
+    --lumo-contrast-40pct: var(--lumo-tint-40pct);
+    --lumo-contrast-50pct: var(--lumo-tint-50pct);
+    --lumo-contrast-60pct: var(--lumo-tint-60pct);
+    --lumo-contrast-70pct: var(--lumo-tint-70pct);
+    --lumo-contrast-80pct: var(--lumo-tint-80pct);
+    --lumo-contrast-90pct: var(--lumo-tint-90pct);
+    --lumo-contrast: var(--lumo-tint);
 
-  @keyframes lumo-mobile-menu-overlay-exit {
-    100% {
-      transform: translateY(150%);
-    }
-  }
-`;
+    /* Text */
+    --lumo-header-text-color: var(--lumo-contrast);
+    --lumo-body-text-color: var(--lumo-contrast-90pct);
+    --lumo-secondary-text-color: var(--lumo-contrast-70pct);
+    --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
+    --lumo-disabled-text-color: var(--lumo-contrast-30pct);
 
-const menuOverlay = [overlay, menuOverlayCore, menuOverlayExt];
+    /* Primary */
+    --lumo-primary-color: hsl(214, 90%, 48%);
+    --lumo-primary-color-50pct: hsla(214, 90%, 70%, 0.69);
+    --lumo-primary-color-10pct: hsla(214, 90%, 55%, 0.13);
+    --lumo-primary-text-color: hsl(214, 90%, 77%);
+    --lumo-primary-contrast-color: #fff;
 
-registerStyles('', menuOverlay, { moduleId: 'lumo-menu-overlay' });
+    /* Error */
+    --lumo-error-color: hsl(3, 79%, 49%);
+    --lumo-error-color-50pct: hsla(3, 75%, 62%, 0.5);
+    --lumo-error-color-10pct: hsla(3, 75%, 62%, 0.14);
+    --lumo-error-text-color: hsl(3, 100%, 80%);
 
-const datePickerOverlay = i$1`
-  [part='overlay'] {
-    /*
-  Width:
-      date cell widths
-    + month calendar side padding
-    + year scroller width
-  */
-    /* prettier-ignore */
-    width:
-    calc(
-        var(--lumo-size-m) * 7
-      + var(--lumo-space-xs) * 2
-      + 57px
-    );
-    height: 100%;
-    max-height: calc(var(--lumo-size-m) * 14);
-    overflow: hidden;
-    -webkit-tap-highlight-color: transparent;
-  }
+    /* Success */
+    --lumo-success-color: hsl(145, 72%, 30%);
+    --lumo-success-color-50pct: hsla(145, 92%, 51%, 0.5);
+    --lumo-success-color-10pct: hsla(145, 92%, 51%, 0.1);
+    --lumo-success-text-color: hsl(145, 85%, 46%);
 
-  [part='overlay'] {
-    flex-direction: column;
+    /* Warning */
+    --lumo-warning-color: hsl(43, 100%, 48%);
+    --lumo-warning-color-10pct: hsla(40, 100%, 50%, 0.2);
+    --lumo-warning-text-color: hsl(45, 100%, 60%);
+    --lumo-warning-contrast-color: var(--lumo-shade-90pct);
   }
 
-  [part='content'] {
-    padding: 0;
-    height: 100%;
-    overflow: hidden;
-    -webkit-mask-image: none;
-    mask-image: none;
+  html {
+    color: var(--lumo-body-text-color);
+    background-color: var(--lumo-base-color);
+    color-scheme: light;
   }
 
-  :host([top-aligned]) [part~='overlay'] {
-    margin-top: var(--lumo-space-xs);
+  [theme~='dark'] {
+    color: var(--lumo-body-text-color);
+    background-color: var(--lumo-base-color);
+    color-scheme: dark;
   }
 
-  :host([bottom-aligned]) [part~='overlay'] {
-    margin-bottom: var(--lumo-space-xs);
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--lumo-header-text-color);
   }
 
-  @media (max-width: 420px), (max-height: 420px) {
-    [part='overlay'] {
-      width: 100vw;
-      height: 70vh;
-      max-height: 70vh;
-    }
+  a:where(:any-link) {
+    color: var(--lumo-primary-text-color);
   }
-`;
-
-registerStyles('vaadin-date-picker-overlay', [menuOverlay, datePickerOverlay], {
-  moduleId: 'lumo-date-picker-overlay',
-});
 
-const button = i$1`
-  :host {
-    /* Sizing */
-    --lumo-button-size: var(--lumo-size-m);
-    min-width: calc(var(--lumo-button-size) * 2);
-    height: var(--lumo-button-size);
-    padding: 0 calc(var(--lumo-button-size) / 3 + var(--lumo-border-radius-m) / 2);
-    margin: var(--lumo-space-xs) 0;
-    box-sizing: border-box;
-    /* Style */
-    font-family: var(--lumo-font-family);
-    font-size: var(--lumo-font-size-m);
-    font-weight: 500;
-    color: var(--_lumo-button-color, var(--lumo-primary-text-color));
-    background-color: var(--_lumo-button-background-color, var(--lumo-contrast-5pct));
-    border-radius: var(--lumo-border-radius-m);
-    cursor: var(--lumo-clickable-cursor);
-    -webkit-tap-highlight-color: transparent;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    flex-shrink: 0;
+  a:not(:any-link) {
+    color: var(--lumo-disabled-text-color);
   }
 
-  /* Set only for the internal parts so we don't affect the host vertical alignment */
-  [part='label'],
-  [part='prefix'],
-  [part='suffix'] {
-    line-height: var(--lumo-line-height-xs);
+  blockquote {
+    color: var(--lumo-secondary-text-color);
   }
 
-  [part='label'] {
-    padding: calc(var(--lumo-button-size) / 6) 0;
+  code,
+  pre {
+    background-color: var(--lumo-contrast-10pct);
+    border-radius: var(--lumo-border-radius-m);
   }
+`;
 
-  :host([theme~='small']) {
-    font-size: var(--lumo-font-size-s);
-    --lumo-button-size: var(--lumo-size-s);
-  }
+registerStyles('', color$1, { moduleId: 'lumo-color' });
 
-  :host([theme~='large']) {
-    font-size: var(--lumo-font-size-l);
-    --lumo-button-size: var(--lumo-size-l);
-  }
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 
-  /* For interaction states */
-  :host::before,
-  :host::after {
-    content: '';
-    /* We rely on the host always being relative */
-    position: absolute;
-    z-index: 1;
-    inset: 0;
-    background-color: currentColor;
-    border-radius: inherit;
-    opacity: 0;
-    pointer-events: none;
-  }
+const font$1 = i$1`
+  :host {
+    /* prettier-ignore */
+    --lumo-font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 
-  /* Hover */
+    /* Font sizes */
+    --lumo-font-size-xxs: 0.75rem;
+    --lumo-font-size-xs: 0.8125rem;
+    --lumo-font-size-s: 0.875rem;
+    --lumo-font-size-m: 1rem;
+    --lumo-font-size-l: 1.125rem;
+    --lumo-font-size-xl: 1.375rem;
+    --lumo-font-size-xxl: 1.75rem;
+    --lumo-font-size-xxxl: 2.5rem;
 
-  @media (any-hover: hover) {
-    :host(:hover)::before {
-      opacity: 0.02;
-    }
+    /* Line heights */
+    --lumo-line-height-xs: 1.25;
+    --lumo-line-height-s: 1.375;
+    --lumo-line-height-m: 1.625;
   }
+`;
 
-  /* Active */
-
-  :host::after {
-    transition: opacity 1.4s, transform 0.1s;
-    filter: blur(8px);
+const typography$1 = i$1`
+  body,
+  :host {
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    line-height: var(--lumo-line-height-m);
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 
-  :host([active])::before {
-    opacity: 0.05;
-    transition-duration: 0s;
+  small,
+  [theme~='font-size-s'] {
+    font-size: var(--lumo-font-size-s);
+    line-height: var(--lumo-line-height-s);
   }
 
-  :host([active])::after {
-    opacity: 0.1;
-    transition-duration: 0s, 0s;
-    transform: scale(0);
+  [theme~='font-size-xs'] {
+    font-size: var(--lumo-font-size-xs);
+    line-height: var(--lumo-line-height-xs);
   }
 
-  /* Keyboard focus */
+  :where(h1, h2, h3, h4, h5, h6) {
+    font-weight: 600;
+    line-height: var(--lumo-line-height-xs);
+    margin-block: 0;
+  }
 
-  :host([focus-ring]) {
-    box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+  :where(h1) {
+    font-size: var(--lumo-font-size-xxxl);
   }
 
-  :host([theme~='primary'][focus-ring]) {
-    box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct);
+  :where(h2) {
+    font-size: var(--lumo-font-size-xxl);
   }
 
-  /* Types (primary, tertiary, tertiary-inline */
+  :where(h3) {
+    font-size: var(--lumo-font-size-xl);
+  }
 
-  :host([theme~='tertiary']),
-  :host([theme~='tertiary-inline']) {
-    background-color: transparent !important;
-    min-width: 0;
+  :where(h4) {
+    font-size: var(--lumo-font-size-l);
   }
 
-  :host([theme~='tertiary']) {
-    padding: 0 calc(var(--lumo-button-size) / 6);
+  :where(h5) {
+    font-size: var(--lumo-font-size-m);
   }
 
-  :host([theme~='tertiary-inline'])::before {
-    display: none;
+  :where(h6) {
+    font-size: var(--lumo-font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
   }
 
-  :host([theme~='tertiary-inline']) {
-    margin: 0;
-    height: auto;
-    padding: 0;
-    line-height: inherit;
-    font-size: inherit;
+  p,
+  blockquote {
+    margin-top: 0.5em;
+    margin-bottom: 0.75em;
   }
 
-  :host([theme~='tertiary-inline']) [part='label'] {
-    padding: 0;
-    overflow: visible;
-    line-height: inherit;
+  a {
+    text-decoration: none;
   }
 
-  :host([theme~='primary']) {
-    background-color: var(--_lumo-button-primary-background-color, var(--lumo-primary-color));
-    color: var(--_lumo-button-primary-color, var(--lumo-primary-contrast-color));
-    font-weight: 600;
-    min-width: calc(var(--lumo-button-size) * 2.5);
+  a:where(:any-link):hover {
+    text-decoration: underline;
   }
 
-  :host([theme~='primary'])::before {
-    background-color: black;
+  hr {
+    display: block;
+    align-self: stretch;
+    height: 1px;
+    border: 0;
+    padding: 0;
+    margin: var(--lumo-space-s) calc(var(--lumo-border-radius-m) / 2);
+    background-color: var(--lumo-contrast-10pct);
   }
 
-  @media (any-hover: hover) {
-    :host([theme~='primary']:hover)::before {
-      opacity: 0.05;
-    }
+  blockquote {
+    border-left: 2px solid var(--lumo-contrast-30pct);
   }
 
-  :host([theme~='primary'][active])::before {
-    opacity: 0.1;
+  b,
+  strong {
+    font-weight: 600;
   }
 
-  :host([theme~='primary'][active])::after {
-    opacity: 0.2;
+  /* RTL specific styles */
+  blockquote[dir='rtl'] {
+    border-left: none;
+    border-right: 2px solid var(--lumo-contrast-30pct);
   }
+`;
 
-  /* Colors (success, error, contrast) */
+registerStyles('', typography$1, { moduleId: 'lumo-typography' });
+addLumoGlobalStyles$1('typography-props', font$1);
 
-  :host([theme~='success']) {
-    color: var(--lumo-success-text-color);
-  }
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 
-  :host([theme~='success'][theme~='primary']) {
-    background-color: var(--lumo-success-color);
-    color: var(--lumo-success-contrast-color);
+const overlay = i$1`
+  :host {
+    top: var(--lumo-space-m);
+    right: var(--lumo-space-m);
+    bottom: var(--lumo-space-m);
+    left: var(--lumo-space-m);
+    /* Workaround for Edge issue (only on Surface), where an overflowing vaadin-list-box inside vaadin-select-overlay makes the overlay transparent */
+    /* stylelint-disable-next-line */
+    outline: 0px solid transparent;
   }
 
-  :host([theme~='error']) {
-    color: var(--lumo-error-text-color);
+  [part='overlay'] {
+    background-color: var(--lumo-base-color);
+    background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
+    border-radius: var(--lumo-border-radius-m);
+    box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-m);
+    color: var(--lumo-body-text-color);
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    font-weight: 400;
+    line-height: var(--lumo-line-height-m);
+    letter-spacing: 0;
+    text-transform: none;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 
-  :host([theme~='error'][theme~='primary']) {
-    background-color: var(--lumo-error-color);
-    color: var(--lumo-error-contrast-color);
+  [part='content'] {
+    padding: var(--lumo-space-xs);
   }
 
-  :host([theme~='contrast']) {
-    color: var(--lumo-contrast);
+  [part='backdrop'] {
+    background-color: var(--lumo-shade-20pct);
+    animation: 0.2s lumo-overlay-backdrop-enter both;
+    will-change: opacity;
   }
 
-  :host([theme~='contrast'][theme~='primary']) {
-    background-color: var(--lumo-contrast);
-    color: var(--lumo-base-color);
+  @keyframes lumo-overlay-backdrop-enter {
+    0% {
+      opacity: 0;
+    }
   }
 
-  /* Disabled state. Keep selectors after other color variants. */
-
-  :host([disabled]) {
-    pointer-events: none;
-    color: var(--lumo-disabled-text-color);
+  :host([closing]) [part='backdrop'] {
+    animation: 0.2s lumo-overlay-backdrop-exit both;
   }
 
-  :host([theme~='primary'][disabled]) {
-    background-color: var(--lumo-contrast-30pct);
-    color: var(--lumo-base-color);
+  @keyframes lumo-overlay-backdrop-exit {
+    100% {
+      opacity: 0;
+    }
   }
 
-  :host([theme~='primary'][disabled]) [part] {
-    opacity: 0.7;
+  @keyframes lumo-overlay-dummy-animation {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 1;
+    }
   }
+`;
 
-  /* Icons */
+registerStyles('', overlay, { moduleId: 'lumo-overlay' });
 
-  [part] ::slotted(vaadin-icon) {
-    display: inline-block;
-    width: var(--lumo-icon-size-m);
-    height: var(--lumo-icon-size-m);
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const menuOverlayCore = i$1`
+  :host([opening]),
+  :host([closing]) {
+    animation: 0.14s lumo-overlay-dummy-animation;
   }
 
-  /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
-  [part] ::slotted(vaadin-icon[icon^='vaadin:']) {
-    padding: 0.25em;
-    box-sizing: border-box !important;
+  [part='overlay'] {
+    will-change: opacity, transform;
   }
 
-  [part='prefix'] {
-    margin-left: -0.25em;
-    margin-right: 0.25em;
+  :host([opening]) [part='overlay'] {
+    animation: 0.1s lumo-menu-overlay-enter ease-out both;
   }
 
-  [part='suffix'] {
-    margin-left: 0.25em;
-    margin-right: -0.25em;
-  }
-
-  /* Icon-only */
-
-  :host([theme~='icon']:not([theme~='tertiary-inline'])) {
-    min-width: var(--lumo-button-size);
-    padding-left: calc(var(--lumo-button-size) / 4);
-    padding-right: calc(var(--lumo-button-size) / 4);
-  }
-
-  :host([theme~='icon']) [part='prefix'],
-  :host([theme~='icon']) [part='suffix'] {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  /* RTL specific styles */
-
-  :host([dir='rtl']) [part='prefix'] {
-    margin-left: 0.25em;
-    margin-right: -0.25em;
+  @keyframes lumo-menu-overlay-enter {
+    0% {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
   }
 
-  :host([dir='rtl']) [part='suffix'] {
-    margin-left: -0.25em;
-    margin-right: 0.25em;
+  :host([closing]) [part='overlay'] {
+    animation: 0.1s lumo-menu-overlay-exit both;
   }
 
-  :host([dir='rtl'][theme~='icon']) [part='prefix'],
-  :host([dir='rtl'][theme~='icon']) [part='suffix'] {
-    margin-left: 0;
-    margin-right: 0;
+  @keyframes lumo-menu-overlay-exit {
+    100% {
+      opacity: 0;
+    }
   }
 `;
 
-registerStyles('vaadin-button', button, { moduleId: 'lumo-button' });
-
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * @typedef ReactiveController
- * @type {import('lit').ReactiveController}
- */
-
-/**
- * A mixin for connecting controllers to the element.
- *
- * @polymerMixin
- */
-const ControllerMixin = dedupingMixin((superClass) => {
-  // If the superclass extends from LitElement,
-  // use its own controllers implementation.
-  if (typeof superClass.prototype.addController === 'function') {
-    return superClass;
-  }
+registerStyles('', menuOverlayCore, { moduleId: 'lumo-menu-overlay-core' });
 
-  return class ControllerMixinClass extends superClass {
-    constructor() {
-      super();
+const menuOverlayExt = i$1`
+  /* Small viewport (bottom sheet) styles */
+  /* Use direct media queries instead of the state attributes ([phone] and [fullscreen]) provided by the elements */
+  @media (max-width: 420px), (max-height: 420px) {
+    :host {
+      top: 0 !important;
+      right: 0 !important;
+      bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;
+      left: 0 !important;
+      align-items: stretch !important;
+      justify-content: flex-end !important;
+    }
 
-      /**
-       * @type {Set<ReactiveController>}
-       */
-      this.__controllers = new Set();
+    [part='overlay'] {
+      max-height: 50vh;
+      width: 100vw;
+      border-radius: 0;
+      box-shadow: var(--lumo-box-shadow-xl);
     }
 
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
+    /* The content part scrolls instead of the overlay part, because of the gradient fade-out */
+    [part='content'] {
+      padding: 30px var(--lumo-space-m);
+      max-height: inherit;
+      box-sizing: border-box;
+      -webkit-overflow-scrolling: touch;
+      overflow: auto;
+      -webkit-mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
+      mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
+    }
 
-      this.__controllers.forEach((c) => {
-        if (c.hostConnected) {
-          c.hostConnected();
-        }
-      });
+    [part='backdrop'] {
+      display: block;
     }
 
-    /** @protected */
-    disconnectedCallback() {
-      super.disconnectedCallback();
+    /* Animations */
 
-      this.__controllers.forEach((c) => {
-        if (c.hostDisconnected) {
-          c.hostDisconnected();
-        }
-      });
+    :host([opening]) [part='overlay'] {
+      animation: 0.2s lumo-mobile-menu-overlay-enter cubic-bezier(0.215, 0.61, 0.355, 1) both;
     }
 
-    /**
-     * Registers a controller to participate in the element update cycle.
-     *
-     * @param {ReactiveController} controller
-     * @protected
-     */
-    addController(controller) {
-      this.__controllers.add(controller);
-      // Call hostConnected if a controller is added after the element is attached.
-      if (this.$ !== undefined && this.isConnected && controller.hostConnected) {
-        controller.hostConnected();
-      }
+    :host([closing]),
+    :host([closing]) [part='backdrop'] {
+      animation-delay: 0.14s;
     }
 
-    /**
-     * Removes a controller from the element.
-     *
-     * @param {ReactiveController} controller
-     * @protected
-     */
-    removeController(controller) {
-      this.__controllers.delete(controller);
+    :host([closing]) [part='overlay'] {
+      animation: 0.14s 0.14s lumo-mobile-menu-overlay-exit cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
     }
-  };
-});
-
-const DEV_MODE_CODE_REGEXP =
-  /\/\*[\*!]\s+vaadin-dev-mode:start([\s\S]*)vaadin-dev-mode:end\s+\*\*\//i;
-
-const FlowClients = window.Vaadin && window.Vaadin.Flow && window.Vaadin.Flow.clients;
-
-function isMinified() {
-  function test() {
-    /** vaadin-dev-mode:start
-    return false;
-    vaadin-dev-mode:end **/
-    return true;
   }
-  return uncommentAndRun(test);
-}
 
-function isDevelopmentMode() {
-  try {
-    if (isForcedDevelopmentMode()) {
-      return true;
+  @keyframes lumo-mobile-menu-overlay-enter {
+    0% {
+      transform: translateY(150%);
     }
+  }
 
-    if (!isLocalhost()) {
-      return false;
+  @keyframes lumo-mobile-menu-overlay-exit {
+    100% {
+      transform: translateY(150%);
     }
+  }
+`;
 
-    if (FlowClients) {
-      return !isFlowProductionMode();
-    }
+const menuOverlay = [overlay, menuOverlayCore, menuOverlayExt];
 
-    return !isMinified();
-  } catch (e) {
-    // Some error in this code, assume production so no further actions will be taken
-    return false;
+registerStyles('', menuOverlay, { moduleId: 'lumo-menu-overlay' });
+
+const datePickerOverlay = i$1`
+  [part='overlay'] {
+    /*
+  Width:
+      date cell widths
+    + month calendar side padding
+    + year scroller width
+  */
+    /* prettier-ignore */
+    width:
+    calc(
+        var(--lumo-size-m) * 7
+      + var(--lumo-space-xs) * 2
+      + 57px
+    );
+    height: 100%;
+    max-height: calc(var(--lumo-size-m) * 14);
+    overflow: hidden;
+    -webkit-tap-highlight-color: transparent;
   }
-}
 
-function isForcedDevelopmentMode() {
-  return localStorage.getItem("vaadin.developmentmode.force");
-}
+  [part='overlay'] {
+    flex-direction: column;
+  }
 
-function isLocalhost() {
-  return (["localhost","127.0.0.1"].indexOf(window.location.hostname) >= 0);
-}
+  [part='content'] {
+    padding: 0;
+    height: 100%;
+    overflow: hidden;
+    -webkit-mask-image: none;
+    mask-image: none;
+  }
 
-function isFlowProductionMode() {
-  if (FlowClients) {
-    const productionModeApps = Object.keys(FlowClients)
-      .map(key => FlowClients[key])
-      .filter(client => client.productionMode);
-    if (productionModeApps.length > 0) {
-      return true;
-    }
+  :host([top-aligned]) [part~='overlay'] {
+    margin-top: var(--lumo-space-xs);
   }
-  return false;
-}
 
-function uncommentAndRun(callback, args) {
-  if (typeof callback !== 'function') {
-    return;
+  :host([bottom-aligned]) [part~='overlay'] {
+    margin-bottom: var(--lumo-space-xs);
   }
 
-  const match = DEV_MODE_CODE_REGEXP.exec(callback.toString());
-  if (match) {
-    try {
-      // requires CSP: script-src 'unsafe-eval'
-      callback = new Function(match[1]);
-    } catch (e) {
-      // eat the exception
-      console.log('vaadin-development-mode-detector: uncommentAndRun() failed', e);
+  @media (max-width: 420px), (max-height: 420px) {
+    [part='overlay'] {
+      width: 100vw;
+      height: 70vh;
+      max-height: 70vh;
     }
   }
+`;
+
+registerStyles('vaadin-date-picker-overlay', [menuOverlay, datePickerOverlay], {
+  moduleId: 'lumo-date-picker-overlay',
+});
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Dummy custom element used for collecting
+ * development time usage statistics.
+ *
+ * @private
+ */
+class Lumo extends HTMLElement {
+  static get is() {
+    return 'vaadin-lumo-styles';
+  }
+
+  static get version() {
+    return '24.2.9';
+  }
+}
+
+defineCustomElement(Lumo);
+
+const addLumoGlobalStyles = (id, ...styles) => {
+  addGlobalThemeStyles(`lumo-${id}`, styles);
+};
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const colorBase = i$1`
+  :host {
+    /* Base (background) */
+    --lumo-base-color: #fff;
+
+    /* Tint */
+    --lumo-tint-5pct: hsla(0, 0%, 100%, 0.3);
+    --lumo-tint-10pct: hsla(0, 0%, 100%, 0.37);
+    --lumo-tint-20pct: hsla(0, 0%, 100%, 0.44);
+    --lumo-tint-30pct: hsla(0, 0%, 100%, 0.5);
+    --lumo-tint-40pct: hsla(0, 0%, 100%, 0.57);
+    --lumo-tint-50pct: hsla(0, 0%, 100%, 0.64);
+    --lumo-tint-60pct: hsla(0, 0%, 100%, 0.7);
+    --lumo-tint-70pct: hsla(0, 0%, 100%, 0.77);
+    --lumo-tint-80pct: hsla(0, 0%, 100%, 0.84);
+    --lumo-tint-90pct: hsla(0, 0%, 100%, 0.9);
+    --lumo-tint: #fff;
+
+    /* Shade */
+    --lumo-shade-5pct: hsla(214, 61%, 25%, 0.05);
+    --lumo-shade-10pct: hsla(214, 57%, 24%, 0.1);
+    --lumo-shade-20pct: hsla(214, 53%, 23%, 0.16);
+    --lumo-shade-30pct: hsla(214, 50%, 22%, 0.26);
+    --lumo-shade-40pct: hsla(214, 47%, 21%, 0.38);
+    --lumo-shade-50pct: hsla(214, 45%, 20%, 0.52);
+    --lumo-shade-60pct: hsla(214, 43%, 19%, 0.6);
+    --lumo-shade-70pct: hsla(214, 42%, 18%, 0.69);
+    --lumo-shade-80pct: hsla(214, 41%, 17%, 0.83);
+    --lumo-shade-90pct: hsla(214, 40%, 16%, 0.94);
+    --lumo-shade: hsl(214, 35%, 15%);
+
+    /* Contrast */
+    --lumo-contrast-5pct: var(--lumo-shade-5pct);
+    --lumo-contrast-10pct: var(--lumo-shade-10pct);
+    --lumo-contrast-20pct: var(--lumo-shade-20pct);
+    --lumo-contrast-30pct: var(--lumo-shade-30pct);
+    --lumo-contrast-40pct: var(--lumo-shade-40pct);
+    --lumo-contrast-50pct: var(--lumo-shade-50pct);
+    --lumo-contrast-60pct: var(--lumo-shade-60pct);
+    --lumo-contrast-70pct: var(--lumo-shade-70pct);
+    --lumo-contrast-80pct: var(--lumo-shade-80pct);
+    --lumo-contrast-90pct: var(--lumo-shade-90pct);
+    --lumo-contrast: var(--lumo-shade);
+
+    /* Text */
+    --lumo-header-text-color: var(--lumo-contrast);
+    --lumo-body-text-color: var(--lumo-contrast-90pct);
+    --lumo-secondary-text-color: var(--lumo-contrast-70pct);
+    --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
+    --lumo-disabled-text-color: var(--lumo-contrast-30pct);
+
+    /* Primary */
+    --lumo-primary-color: hsl(214, 100%, 48%);
+    --lumo-primary-color-50pct: hsla(214, 100%, 49%, 0.76);
+    --lumo-primary-color-10pct: hsla(214, 100%, 60%, 0.13);
+    --lumo-primary-text-color: hsl(214, 100%, 43%);
+    --lumo-primary-contrast-color: #fff;
+
+    /* Error */
+    --lumo-error-color: hsl(3, 85%, 48%);
+    --lumo-error-color-50pct: hsla(3, 85%, 49%, 0.5);
+    --lumo-error-color-10pct: hsla(3, 85%, 49%, 0.1);
+    --lumo-error-text-color: hsl(3, 89%, 42%);
+    --lumo-error-contrast-color: #fff;
+
+    /* Success */
+    --lumo-success-color: hsl(145, 72%, 30%);
+    --lumo-success-color-50pct: hsla(145, 72%, 31%, 0.5);
+    --lumo-success-color-10pct: hsla(145, 72%, 31%, 0.1);
+    --lumo-success-text-color: hsl(145, 85%, 25%);
+    --lumo-success-contrast-color: #fff;
+
+    /* Warning */
+    --lumo-warning-color: hsl(48, 100%, 50%);
+    --lumo-warning-color-10pct: hsla(48, 100%, 50%, 0.25);
+    --lumo-warning-text-color: hsl(32, 100%, 30%);
+    --lumo-warning-contrast-color: var(--lumo-shade-90pct);
+  }
+
+  /* forced-colors mode adjustments */
+  @media (forced-colors: active) {
+    html {
+      --lumo-disabled-text-color: GrayText;
+    }
+  }
+`;
+
+addLumoGlobalStyles('color-props', colorBase);
+
+const color = i$1`
+  [theme~='dark'] {
+    /* Base (background) */
+    --lumo-base-color: hsl(214, 35%, 21%);
+
+    /* Tint */
+    --lumo-tint-5pct: hsla(214, 65%, 85%, 0.06);
+    --lumo-tint-10pct: hsla(214, 60%, 80%, 0.14);
+    --lumo-tint-20pct: hsla(214, 64%, 82%, 0.23);
+    --lumo-tint-30pct: hsla(214, 69%, 84%, 0.32);
+    --lumo-tint-40pct: hsla(214, 73%, 86%, 0.41);
+    --lumo-tint-50pct: hsla(214, 78%, 88%, 0.5);
+    --lumo-tint-60pct: hsla(214, 82%, 90%, 0.58);
+    --lumo-tint-70pct: hsla(214, 87%, 92%, 0.69);
+    --lumo-tint-80pct: hsla(214, 91%, 94%, 0.8);
+    --lumo-tint-90pct: hsla(214, 96%, 96%, 0.9);
+    --lumo-tint: hsl(214, 100%, 98%);
+
+    /* Shade */
+    --lumo-shade-5pct: hsla(214, 0%, 0%, 0.07);
+    --lumo-shade-10pct: hsla(214, 4%, 2%, 0.15);
+    --lumo-shade-20pct: hsla(214, 8%, 4%, 0.23);
+    --lumo-shade-30pct: hsla(214, 12%, 6%, 0.32);
+    --lumo-shade-40pct: hsla(214, 16%, 8%, 0.41);
+    --lumo-shade-50pct: hsla(214, 20%, 10%, 0.5);
+    --lumo-shade-60pct: hsla(214, 24%, 12%, 0.6);
+    --lumo-shade-70pct: hsla(214, 28%, 13%, 0.7);
+    --lumo-shade-80pct: hsla(214, 32%, 13%, 0.8);
+    --lumo-shade-90pct: hsla(214, 33%, 13%, 0.9);
+    --lumo-shade: hsl(214, 33%, 13%);
+
+    /* Contrast */
+    --lumo-contrast-5pct: var(--lumo-tint-5pct);
+    --lumo-contrast-10pct: var(--lumo-tint-10pct);
+    --lumo-contrast-20pct: var(--lumo-tint-20pct);
+    --lumo-contrast-30pct: var(--lumo-tint-30pct);
+    --lumo-contrast-40pct: var(--lumo-tint-40pct);
+    --lumo-contrast-50pct: var(--lumo-tint-50pct);
+    --lumo-contrast-60pct: var(--lumo-tint-60pct);
+    --lumo-contrast-70pct: var(--lumo-tint-70pct);
+    --lumo-contrast-80pct: var(--lumo-tint-80pct);
+    --lumo-contrast-90pct: var(--lumo-tint-90pct);
+    --lumo-contrast: var(--lumo-tint);
+
+    /* Text */
+    --lumo-header-text-color: var(--lumo-contrast);
+    --lumo-body-text-color: var(--lumo-contrast-90pct);
+    --lumo-secondary-text-color: var(--lumo-contrast-70pct);
+    --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
+    --lumo-disabled-text-color: var(--lumo-contrast-30pct);
+
+    /* Primary */
+    --lumo-primary-color: hsl(214, 90%, 48%);
+    --lumo-primary-color-50pct: hsla(214, 90%, 70%, 0.69);
+    --lumo-primary-color-10pct: hsla(214, 90%, 55%, 0.13);
+    --lumo-primary-text-color: hsl(214, 90%, 77%);
+    --lumo-primary-contrast-color: #fff;
+
+    /* Error */
+    --lumo-error-color: hsl(3, 79%, 49%);
+    --lumo-error-color-50pct: hsla(3, 75%, 62%, 0.5);
+    --lumo-error-color-10pct: hsla(3, 75%, 62%, 0.14);
+    --lumo-error-text-color: hsl(3, 100%, 80%);
+
+    /* Success */
+    --lumo-success-color: hsl(145, 72%, 30%);
+    --lumo-success-color-50pct: hsla(145, 92%, 51%, 0.5);
+    --lumo-success-color-10pct: hsla(145, 92%, 51%, 0.1);
+    --lumo-success-text-color: hsl(145, 85%, 46%);
+
+    /* Warning */
+    --lumo-warning-color: hsl(43, 100%, 48%);
+    --lumo-warning-color-10pct: hsla(40, 100%, 50%, 0.2);
+    --lumo-warning-text-color: hsl(45, 100%, 60%);
+    --lumo-warning-contrast-color: var(--lumo-shade-90pct);
+  }
+
+  html {
+    color: var(--lumo-body-text-color);
+    background-color: var(--lumo-base-color);
+    color-scheme: light;
+  }
+
+  [theme~='dark'] {
+    color: var(--lumo-body-text-color);
+    background-color: var(--lumo-base-color);
+    color-scheme: dark;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--lumo-header-text-color);
+  }
+
+  a:where(:any-link) {
+    color: var(--lumo-primary-text-color);
+  }
+
+  a:not(:any-link) {
+    color: var(--lumo-disabled-text-color);
+  }
+
+  blockquote {
+    color: var(--lumo-secondary-text-color);
+  }
+
+  code,
+  pre {
+    background-color: var(--lumo-contrast-10pct);
+    border-radius: var(--lumo-border-radius-m);
+  }
+`;
+
+registerStyles('', color, { moduleId: 'lumo-color' });
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const sizing = i$1`
+  :host {
+    --lumo-size-xs: 1.625rem;
+    --lumo-size-s: 1.875rem;
+    --lumo-size-m: 2.25rem;
+    --lumo-size-l: 2.75rem;
+    --lumo-size-xl: 3.5rem;
+
+    /* Icons */
+    --lumo-icon-size-s: 1.25em;
+    --lumo-icon-size-m: 1.5em;
+    --lumo-icon-size-l: 2.25em;
+    /* For backwards compatibility */
+    --lumo-icon-size: var(--lumo-icon-size-m);
+  }
+`;
+
+addLumoGlobalStyles('sizing-props', sizing);
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const spacing = i$1`
+  :host {
+    /* Square */
+    --lumo-space-xs: 0.25rem;
+    --lumo-space-s: 0.5rem;
+    --lumo-space-m: 1rem;
+    --lumo-space-l: 1.5rem;
+    --lumo-space-xl: 2.5rem;
+
+    /* Wide */
+    --lumo-space-wide-xs: calc(var(--lumo-space-xs) / 2) var(--lumo-space-xs);
+    --lumo-space-wide-s: calc(var(--lumo-space-s) / 2) var(--lumo-space-s);
+    --lumo-space-wide-m: calc(var(--lumo-space-m) / 2) var(--lumo-space-m);
+    --lumo-space-wide-l: calc(var(--lumo-space-l) / 2) var(--lumo-space-l);
+    --lumo-space-wide-xl: calc(var(--lumo-space-xl) / 2) var(--lumo-space-xl);
+
+    /* Tall */
+    --lumo-space-tall-xs: var(--lumo-space-xs) calc(var(--lumo-space-xs) / 2);
+    --lumo-space-tall-s: var(--lumo-space-s) calc(var(--lumo-space-s) / 2);
+    --lumo-space-tall-m: var(--lumo-space-m) calc(var(--lumo-space-m) / 2);
+    --lumo-space-tall-l: var(--lumo-space-l) calc(var(--lumo-space-l) / 2);
+    --lumo-space-tall-xl: var(--lumo-space-xl) calc(var(--lumo-space-xl) / 2);
+  }
+`;
+
+addLumoGlobalStyles('spacing-props', spacing);
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const style = i$1`
+  :host {
+    /* Border radius */
+    --lumo-border-radius-s: 0.25em; /* Checkbox, badge, date-picker year indicator, etc */
+    --lumo-border-radius-m: var(--lumo-border-radius, 0.25em); /* Button, text field, menu overlay, etc */
+    --lumo-border-radius-l: 0.5em; /* Dialog, notification, etc */
+
+    /* Shadow */
+    --lumo-box-shadow-xs: 0 1px 4px -1px var(--lumo-shade-50pct);
+    --lumo-box-shadow-s: 0 2px 4px -1px var(--lumo-shade-20pct), 0 3px 12px -1px var(--lumo-shade-30pct);
+    --lumo-box-shadow-m: 0 2px 6px -1px var(--lumo-shade-20pct), 0 8px 24px -4px var(--lumo-shade-40pct);
+    --lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);
+    --lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct);
+
+    /* Clickable element cursor */
+    --lumo-clickable-cursor: default;
+  }
+`;
+
+/**
+ * Default values for component-specific custom properties.
+ */
+i$1`
+  html {
+    --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
+    --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
+    --vaadin-input-field-border-radius: var(--lumo-border-radius-m);
+  }
+`;
+
+addLumoGlobalStyles('style-props', style);
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const font = i$1`
+  :host {
+    /* prettier-ignore */
+    --lumo-font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+
+    /* Font sizes */
+    --lumo-font-size-xxs: 0.75rem;
+    --lumo-font-size-xs: 0.8125rem;
+    --lumo-font-size-s: 0.875rem;
+    --lumo-font-size-m: 1rem;
+    --lumo-font-size-l: 1.125rem;
+    --lumo-font-size-xl: 1.375rem;
+    --lumo-font-size-xxl: 1.75rem;
+    --lumo-font-size-xxxl: 2.5rem;
+
+    /* Line heights */
+    --lumo-line-height-xs: 1.25;
+    --lumo-line-height-s: 1.375;
+    --lumo-line-height-m: 1.625;
+  }
+`;
+
+const typography = i$1`
+  body,
+  :host {
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    line-height: var(--lumo-line-height-m);
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  small,
+  [theme~='font-size-s'] {
+    font-size: var(--lumo-font-size-s);
+    line-height: var(--lumo-line-height-s);
+  }
+
+  [theme~='font-size-xs'] {
+    font-size: var(--lumo-font-size-xs);
+    line-height: var(--lumo-line-height-xs);
+  }
+
+  :where(h1, h2, h3, h4, h5, h6) {
+    font-weight: 600;
+    line-height: var(--lumo-line-height-xs);
+    margin-block: 0;
+  }
+
+  :where(h1) {
+    font-size: var(--lumo-font-size-xxxl);
+  }
+
+  :where(h2) {
+    font-size: var(--lumo-font-size-xxl);
+  }
+
+  :where(h3) {
+    font-size: var(--lumo-font-size-xl);
+  }
+
+  :where(h4) {
+    font-size: var(--lumo-font-size-l);
+  }
+
+  :where(h5) {
+    font-size: var(--lumo-font-size-m);
+  }
+
+  :where(h6) {
+    font-size: var(--lumo-font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+  }
+
+  p,
+  blockquote {
+    margin-top: 0.5em;
+    margin-bottom: 0.75em;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  a:where(:any-link):hover {
+    text-decoration: underline;
+  }
+
+  hr {
+    display: block;
+    align-self: stretch;
+    height: 1px;
+    border: 0;
+    padding: 0;
+    margin: var(--lumo-space-s) calc(var(--lumo-border-radius-m) / 2);
+    background-color: var(--lumo-contrast-10pct);
+  }
+
+  blockquote {
+    border-left: 2px solid var(--lumo-contrast-30pct);
+  }
+
+  b,
+  strong {
+    font-weight: 600;
+  }
+
+  /* RTL specific styles */
+  blockquote[dir='rtl'] {
+    border-left: none;
+    border-right: 2px solid var(--lumo-contrast-30pct);
+  }
+`;
+
+registerStyles('', typography, { moduleId: 'lumo-typography' });
+addLumoGlobalStyles('typography-props', font);
+
+const button = i$1`
+  :host {
+    /* Sizing */
+    --lumo-button-size: var(--lumo-size-m);
+    min-width: calc(var(--lumo-button-size) * 2);
+    height: var(--lumo-button-size);
+    padding: 0 calc(var(--lumo-button-size) / 3 + var(--lumo-border-radius-m) / 2);
+    margin: var(--lumo-space-xs) 0;
+    box-sizing: border-box;
+    /* Style */
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    font-weight: 500;
+    color: var(--_lumo-button-color, var(--lumo-primary-text-color));
+    background-color: var(--_lumo-button-background-color, var(--lumo-contrast-5pct));
+    border-radius: var(--lumo-border-radius-m);
+    cursor: var(--lumo-clickable-cursor);
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    flex-shrink: 0;
+  }
+
+  /* Set only for the internal parts so we don't affect the host vertical alignment */
+  [part='label'],
+  [part='prefix'],
+  [part='suffix'] {
+    line-height: var(--lumo-line-height-xs);
+  }
+
+  [part='label'] {
+    padding: calc(var(--lumo-button-size) / 6) 0;
+  }
+
+  :host([theme~='small']) {
+    font-size: var(--lumo-font-size-s);
+    --lumo-button-size: var(--lumo-size-s);
+  }
+
+  :host([theme~='large']) {
+    font-size: var(--lumo-font-size-l);
+    --lumo-button-size: var(--lumo-size-l);
+  }
+
+  /* For interaction states */
+  :host::before,
+  :host::after {
+    content: '';
+    /* We rely on the host always being relative */
+    position: absolute;
+    z-index: 1;
+    inset: 0;
+    background-color: currentColor;
+    border-radius: inherit;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* Hover */
+
+  @media (any-hover: hover) {
+    :host(:hover)::before {
+      opacity: 0.02;
+    }
+  }
+
+  /* Active */
+
+  :host::after {
+    transition: opacity 1.4s, transform 0.1s;
+    filter: blur(8px);
+  }
+
+  :host([active])::before {
+    opacity: 0.05;
+    transition-duration: 0s;
+  }
+
+  :host([active])::after {
+    opacity: 0.1;
+    transition-duration: 0s, 0s;
+    transform: scale(0);
+  }
+
+  /* Keyboard focus */
+
+  :host([focus-ring]) {
+    box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+  }
+
+  :host([theme~='primary'][focus-ring]) {
+    box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct);
+  }
+
+  /* Types (primary, tertiary, tertiary-inline */
+
+  :host([theme~='tertiary']),
+  :host([theme~='tertiary-inline']) {
+    background-color: transparent !important;
+    min-width: 0;
+  }
+
+  :host([theme~='tertiary']) {
+    padding: 0 calc(var(--lumo-button-size) / 6);
+  }
+
+  :host([theme~='tertiary-inline'])::before {
+    display: none;
+  }
+
+  :host([theme~='tertiary-inline']) {
+    margin: 0;
+    height: auto;
+    padding: 0;
+    line-height: inherit;
+    font-size: inherit;
+  }
+
+  :host([theme~='tertiary-inline']) [part='label'] {
+    padding: 0;
+    overflow: visible;
+    line-height: inherit;
+  }
+
+  :host([theme~='primary']) {
+    background-color: var(--_lumo-button-primary-background-color, var(--lumo-primary-color));
+    color: var(--_lumo-button-primary-color, var(--lumo-primary-contrast-color));
+    font-weight: 600;
+    min-width: calc(var(--lumo-button-size) * 2.5);
+  }
+
+  :host([theme~='primary'])::before {
+    background-color: black;
+  }
+
+  @media (any-hover: hover) {
+    :host([theme~='primary']:hover)::before {
+      opacity: 0.05;
+    }
+  }
+
+  :host([theme~='primary'][active])::before {
+    opacity: 0.1;
+  }
+
+  :host([theme~='primary'][active])::after {
+    opacity: 0.2;
+  }
+
+  /* Colors (success, error, contrast) */
+
+  :host([theme~='success']) {
+    color: var(--lumo-success-text-color);
+  }
+
+  :host([theme~='success'][theme~='primary']) {
+    background-color: var(--lumo-success-color);
+    color: var(--lumo-success-contrast-color);
+  }
+
+  :host([theme~='error']) {
+    color: var(--lumo-error-text-color);
+  }
+
+  :host([theme~='error'][theme~='primary']) {
+    background-color: var(--lumo-error-color);
+    color: var(--lumo-error-contrast-color);
+  }
+
+  :host([theme~='contrast']) {
+    color: var(--lumo-contrast);
+  }
+
+  :host([theme~='contrast'][theme~='primary']) {
+    background-color: var(--lumo-contrast);
+    color: var(--lumo-base-color);
+  }
+
+  /* Disabled state. Keep selectors after other color variants. */
+
+  :host([disabled]) {
+    pointer-events: none;
+    color: var(--lumo-disabled-text-color);
+  }
+
+  :host([theme~='primary'][disabled]) {
+    background-color: var(--lumo-contrast-30pct);
+    color: var(--lumo-base-color);
+  }
+
+  :host([theme~='primary'][disabled]) [part] {
+    opacity: 0.7;
+  }
+
+  /* Icons */
+
+  [part] ::slotted(vaadin-icon) {
+    display: inline-block;
+    width: var(--lumo-icon-size-m);
+    height: var(--lumo-icon-size-m);
+  }
+
+  /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
+  [part] ::slotted(vaadin-icon[icon^='vaadin:']) {
+    padding: 0.25em;
+    box-sizing: border-box !important;
+  }
+
+  [part='prefix'] {
+    margin-left: -0.25em;
+    margin-right: 0.25em;
+  }
+
+  [part='suffix'] {
+    margin-left: 0.25em;
+    margin-right: -0.25em;
+  }
+
+  /* Icon-only */
+
+  :host([theme~='icon']:not([theme~='tertiary-inline'])) {
+    min-width: var(--lumo-button-size);
+    padding-left: calc(var(--lumo-button-size) / 4);
+    padding-right: calc(var(--lumo-button-size) / 4);
+  }
+
+  :host([theme~='icon']) [part='prefix'],
+  :host([theme~='icon']) [part='suffix'] {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  /* RTL specific styles */
+
+  :host([dir='rtl']) [part='prefix'] {
+    margin-left: 0.25em;
+    margin-right: -0.25em;
+  }
+
+  :host([dir='rtl']) [part='suffix'] {
+    margin-left: -0.25em;
+    margin-right: 0.25em;
+  }
+
+  :host([dir='rtl'][theme~='icon']) [part='prefix'],
+  :host([dir='rtl'][theme~='icon']) [part='suffix'] {
+    margin-left: 0;
+    margin-right: 0;
+  }
+`;
+
+registerStyles('vaadin-button', button, { moduleId: 'lumo-button' });
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @typedef ReactiveController
+ * @type {import('lit').ReactiveController}
+ */
+
+/**
+ * A mixin for connecting controllers to the element.
+ *
+ * @polymerMixin
+ */
+const ControllerMixin = dedupingMixin((superClass) => {
+  // If the superclass extends from LitElement,
+  // use its own controllers implementation.
+  if (typeof superClass.prototype.addController === 'function') {
+    return superClass;
+  }
+
+  return class ControllerMixinClass extends superClass {
+    constructor() {
+      super();
+
+      /**
+       * @type {Set<ReactiveController>}
+       */
+      this.__controllers = new Set();
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+
+      this.__controllers.forEach((c) => {
+        if (c.hostConnected) {
+          c.hostConnected();
+        }
+      });
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+
+      this.__controllers.forEach((c) => {
+        if (c.hostDisconnected) {
+          c.hostDisconnected();
+        }
+      });
+    }
+
+    /**
+     * Registers a controller to participate in the element update cycle.
+     *
+     * @param {ReactiveController} controller
+     * @protected
+     */
+    addController(controller) {
+      this.__controllers.add(controller);
+      // Call hostConnected if a controller is added after the element is attached.
+      if (this.$ !== undefined && this.isConnected && controller.hostConnected) {
+        controller.hostConnected();
+      }
+    }
+
+    /**
+     * Removes a controller from the element.
+     *
+     * @param {ReactiveController} controller
+     * @protected
+     */
+    removeController(controller) {
+      this.__controllers.delete(controller);
+    }
+  };
+});
+
+const DEV_MODE_CODE_REGEXP =
+  /\/\*[\*!]\s+vaadin-dev-mode:start([\s\S]*)vaadin-dev-mode:end\s+\*\*\//i;
+
+const FlowClients = window.Vaadin && window.Vaadin.Flow && window.Vaadin.Flow.clients;
+
+function isMinified() {
+  function test() {
+    /** vaadin-dev-mode:start
+    return false;
+    vaadin-dev-mode:end **/
+    return true;
+  }
+  return uncommentAndRun(test);
+}
+
+function isDevelopmentMode() {
+  try {
+    if (isForcedDevelopmentMode()) {
+      return true;
+    }
+
+    if (!isLocalhost()) {
+      return false;
+    }
+
+    if (FlowClients) {
+      return !isFlowProductionMode();
+    }
+
+    return !isMinified();
+  } catch (e) {
+    // Some error in this code, assume production so no further actions will be taken
+    return false;
+  }
+}
+
+function isForcedDevelopmentMode() {
+  return localStorage.getItem("vaadin.developmentmode.force");
+}
+
+function isLocalhost() {
+  return (["localhost","127.0.0.1"].indexOf(window.location.hostname) >= 0);
+}
+
+function isFlowProductionMode() {
+  if (FlowClients) {
+    const productionModeApps = Object.keys(FlowClients)
+      .map(key => FlowClients[key])
+      .filter(client => client.productionMode);
+    if (productionModeApps.length > 0) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function uncommentAndRun(callback, args) {
+  if (typeof callback !== 'function') {
+    return;
+  }
+
+  const match = DEV_MODE_CODE_REGEXP.exec(callback.toString());
+  if (match) {
+    try {
+      // requires CSP: script-src 'unsafe-eval'
+      callback = new Function(match[1]);
+    } catch (e) {
+      // eat the exception
+      console.log('vaadin-development-mode-detector: uncommentAndRun() failed', e);
+    }
+  }
+
+  return callback(args);
+}
 
-  return callback(args);
-}
-
 // A guard against polymer-modulizer removing the window.Vaadin
 // initialization above.
 window['Vaadin'] = window['Vaadin'] || {};
@@ -9906,7 +10890,7 @@ const registered = new Set();
 const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '24.2.5';
+      return '24.2.9';
     }
 
     /** @protected */
@@ -11685,6 +12669,8 @@ const KeyboardMixin = dedupingMixin(
  * by the pointer or by releasing the activation key.
  *
  * @polymerMixin
+ * @mixes DisabledMixin
+ * @mixes KeyboardMixin
  */
 const ActiveMixin = (superclass) =>
   class ActiveMixinClass extends DisabledMixin(KeyboardMixin(superclass)) {
@@ -12754,7 +13740,7 @@ const fontIcons = i$1`
   }
 `;
 
-addLumoGlobalStyles('font-icons', fontIcons);
+addLumoGlobalStyles$1('font-icons', fontIcons);
 
 /**
  * @license
@@ -14075,6 +15061,14 @@ const OverlayMixin = (superClass) =>
       // and <vaadin-context-menu>).
       this.addEventListener('click', () => {});
       this.$.backdrop.addEventListener('click', () => {});
+
+      this.addEventListener('mouseup', () => {
+        // In Chrome, focus moves to body on overlay content mousedown
+        // See https://github.com/vaadin/flow-components/issues/5507
+        if (document.activeElement === document.body && this.$.overlay.getAttribute('tabindex') === '0') {
+          this.$.overlay.focus();
+        }
+      });
     }
 
     /** @protected */
@@ -17183,7 +18177,7 @@ class DomRepeat extends domRepeatBase {
             if (prop == this.as) {
               this.items[idx] = value;
             }
-            let path = translate$1(this.as, `${JSCompiler_renameProperty('items', this)}.${idx}`, prop);
+            let path = translate$5(this.as, `${JSCompiler_renameProperty('items', this)}.${idx}`, prop);
             this.notifyPath(path, value);
           }
         }
@@ -23370,443 +24364,1767 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
     if (e.detail.sourceEvent && e.detail.sourceEvent.composedPath().includes(this)) {
       e.preventDefault();
     }
-  }
-
-  /** @private */
-  _toggle(e) {
-    e.stopPropagation();
-    if (this.$.overlay.opened) {
-      this.close();
-    } else {
-      this.open();
+  }
+
+  /** @private */
+  _toggle(e) {
+    e.stopPropagation();
+    if (this.$.overlay.opened) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  // Workaround https://github.com/vaadin/web-components/issues/2855
+  /** @protected */
+  _openedChanged(opened) {
+    super._openedChanged(opened);
+
+    this.$.overlay.positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
+    this.$.overlay.noVerticalOverlap = true;
+  }
+}
+
+defineCustomElement(DatePicker);
+
+const helperFiltersCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.FilterButtonsWrapper{display:flex;justify-content:flex-end;gap:5px}.FilterButtonsWrapper .FilterOpen{cursor:pointer;border-radius:4px;padding:8px 15px;width:max-content;border:1px solid #00958f;background:#00958f;color:#FFF;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterButtonsWrapper .FilterOpen:hover{background:#00958f;color:#FFF}.FilterButtonsWrapper .FilterClear{cursor:pointer;border-radius:4px;padding:8px 15px;width:max-content;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterButtonsWrapper .FilterClear:hover{background:#00958f;color:#FFF}.FilterModalHeader,.FilterModalBody,.FilterModalFooter{display:flex;flex-direction:column;gap:5px;align-items:center;margin:20px 0}.FilterModalHeader .FilterModalTitle,.FilterModalBody .FilterModalTitle,.FilterModalFooter .FilterModalTitle{margin:0;padding:0;font-weight:700;font-size:16px;color:#009993;text-transform:uppercase}.FilterModalHeader .FilterModalSearch,.FilterModalBody .FilterModalSearch,.FilterModalFooter .FilterModalSearch{border-radius:4px;background:#e8ebef;color:#263445;width:100%;height:26px;max-width:280px;padding:5px;font-size:15px;border:none;outline:#009993}.FilterModalHeader .FilterCalendarWrapper,.FilterModalBody .FilterCalendarWrapper,.FilterModalFooter .FilterCalendarWrapper{display:flex;gap:5px}.FilterModalHeader .FilterCalendarWrapper .VaadinDatePicker,.FilterModalBody .FilterCalendarWrapper .VaadinDatePicker,.FilterModalFooter .FilterCalendarWrapper .VaadinDatePicker{width:50%;max-width:143px}.FilterModalHeader .FilterModalButton,.FilterModalBody .FilterModalButton,.FilterModalFooter .FilterModalButton{cursor:pointer;border-radius:4px;padding:8px 60px;width:max-content;margin:5px;border:1px solid #00958f;background:#00958f;color:#FFF;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.FilterModalHeader .FilterModalButton:hover,.FilterModalBody .FilterModalButton:hover,.FilterModalFooter .FilterModalButton:hover{background:#00958f;color:#FFF}.FilterModalHeader p,.FilterModalBody p,.FilterModalFooter p{margin:5px 0}";
+const HelperFiltersStyle0 = helperFiltersCss;
+
+const HelperFilters = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.filterDraw = createEvent(this, "filterDraw", 7);
+        this.filterSelection = createEvent(this, "filterSelection", 7);
+        this.filterSelectionReset = createEvent(this, "filterSelectionReset", 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.showFilterId = true;
+        this.activateTicketSearch = false;
+        this.gameId = '';
+        this.playerId = '';
+        this.session = '';
+        this.postMessage = false;
+        this.language = 'en';
+        this.quickFiltersActive = false;
+        this.clientStyling = '';
+        this.clientStylingUrlContent = '';
+        this.showFilterModal = false;
+        this.showClearButton = false;
+        this.filterData = {};
+        this.filterDataReset = { ticketDrawId: '', filterFromCalendar: '', filterToCalendar: '' };
+        this.limitStylingAppends = false;
+    }
+    // reset field values each time the filter modal opens
+    componentDidRender() {
+        // @TODO: to way binding?
+        if (document.getElementById('#FilterById'))
+            document.getElementById('#FilterById').value = '';
+        // start custom styling area
+        if (!this.limitStylingAppends && this.stylingContainer) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrlContent)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+        // end custom styling area
+    }
+    filterSelectionHandler(event) {
+        if (this.postMessage)
+            window.postMessage({ type: 'filterSelection', event }, window.location.href);
+        if (this.filterData.ticketDrawId || this.filterData.filterFromCalendar || this.filterData.filterToCalendar)
+            this.filterSelection.emit(event);
+    }
+    filterSelectionResetHandler(event) {
+        if (this.postMessage)
+            window.postMessage({ type: 'filterSelectionReset', event }, window.location.href);
+        this.filterSelectionReset.emit(event);
+    }
+    modalCloseEvent() {
+        this.showFilterModal = false;
+    }
+    // Toggle filter modal
+    toggleFilterModal() {
+        this.showFilterModal = true;
+    }
+    // Filter search
+    filterSearch() {
+        this.modalCloseEvent();
+        this.showClearButton = true;
+        this.filterSelectionHandler(this.filterData);
+        console.log(this.showClearButton);
+    }
+    resetSearch() {
+        this.showClearButton = false;
+        this.filterSelectionResetHandler(this.filterDataReset);
+        this.filterData = {};
+    }
+    handleTicketDrawId(event) {
+        this.filterData.ticketDrawId = event.target.value;
+    }
+    handleFilterFrom(event) {
+        this.filterData.filterFromCalendar = new Date(event.target.value).toISOString();
+    }
+    handleFilterTo(event) {
+        this.filterData.filterToCalendar = new Date(event.target.value).toISOString();
+    }
+    render() {
+        return (h$2("div", { key: 'd74774bd58fa3df6b0038fd979fb4aec4262d43d', class: "HelperFilters", ref: el => this.stylingContainer = el }, h$2("div", { key: '0827128924ba350888ae81e67e0306e536b15047', class: "FilterButtonsWrapper" }, h$2("button", { key: '73ae5aff5896195cd895410caf44dccfa1ac5cfc', class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate$6('filterOpen', this.language)), console.log('in filter Open', this.showClearButton, this.quickFiltersActive), (this.showClearButton || this.quickFiltersActive) ?
+            h$2("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate$6('filterClear', this.language))
+            :
+                null), h$2("helper-modal", { key: 'add83df2714fdb69e8dfa7a0f5d1eb0d526fc2b4', "title-modal": "Filter Modal", visible: this.showFilterModal, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h$2("div", { key: '861b04161876b557184fe49c514867788147e4b9', class: "FilterModalHeader" }, h$2("h3", { key: '7471430912f301ff995c401b08298d9006816216', class: "FilterModalTitle" }, this.activateTicketSearch ? translate$6('filterModalTicketTitle', this.language) : translate$6('filterModalDrawTitle', this.language))), h$2("div", { key: 'af6bd8e253f332c8724e1bb40100ba5e1e59838f', class: "FilterModalBody" }, h$2("input", { key: '9edc7e14b801d40d4861625264f82b2fa213a770', id: "FilterById", type: "text", value: this.filterData.ticketDrawId, onInput: (event) => this.handleTicketDrawId(event), class: "FilterModalSearch", placeholder: this.activateTicketSearch ? translate$6('filterTicketPlaceholder', this.language) : translate$6('filterDrawPlaceholder', this.language) }), h$2("p", { key: '9665b359f9d6da19f120eb9bb315c4b144c80ced' }, translate$6('filterOrDate', this.language)), h$2("div", { key: 'd155c7d73a719aaedc581f51aa97cf21ec3125df', class: "FilterCalendarWrapper" }, h$2("vaadin-date-picker", { key: '586fb38bc5c718a4afa06ebec96bec0fd46949eb', value: this.filterData.filterFromCalendar, onChange: (event) => this.handleFilterFrom(event), placeholder: translate$6('filterFromCalendar', this.language), class: "VaadinDatePicker" }), h$2("vaadin-date-picker", { key: '42e8965b2c740c19c53687c114faf6aa22f11de8', value: this.filterData.filterToCalendar, onChange: (event) => this.handleFilterTo(event), placeholder: translate$6('filterToCalendar', this.language), class: "VaadinDatePicker" }))), h$2("div", { key: '7529eef1b25d130d183a55e45862418444054d3c', class: "FilterModalFooter" }, h$2("button", { key: '7dac7dc7b01c1c66dde7c6670a352f597b3f75fc', class: "FilterModalButton", onClick: () => this.filterSearch() }, translate$6('filterModalButton', this.language))))));
+    }
+};
+HelperFilters.style = HelperFiltersStyle0;
+
+/**
+ * @name isMobile
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
+ * @param {String} userAgent window.navigator.userAgent
+ * @returns {Boolean} true or false
+ */
+const isMobile$1 = (userAgent) => {
+    return !!(userAgent.toLowerCase().match(/android/i) ||
+        userAgent.toLowerCase().match(/blackberry|bb/i) ||
+        userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+        userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+};
+
+const helperModalCss = ":host{display:block}.HelperModalWrapper{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.7);opacity:0;visibility:hidden;transform:scale(1.1);transition:visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;z-index:1}.HelperModalVisible{opacity:1;visibility:visible;transform:scale(1);transition:visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s}.HelperModalContent{position:relative;border:solid 1px #848e97;box-shadow:2px 2px 2px rgba(0, 0, 0, 0.007);font-size:14px;padding:10px 10px 5px 10px;background-color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:4px;width:600px;max-height:600px;overflow-y:scroll}.HelperModalMobileContent{background:#FFF;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:4px;width:80%;max-height:350px}.HelperModalClose{cursor:pointer;position:absolute;top:15px;right:15px;font-size:20px;color:#000}.HelperModalMobileClose{position:absolute;top:15px;right:15px;font-size:20px;color:#000}";
+const HelperModalStyle0 = helperModalCss;
+
+const HelperModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.cancel = createEvent(this, "modalCloseEvent", 7);
+        this.userAgent = window.navigator.userAgent;
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let cssFile = document.createElement('style');
+            setTimeout(() => {
+                cssFile.innerHTML = this.clientStylingUrlContent;
+                this.stylingContainer.prepend(cssFile);
+            }, 1);
+        };
+        this.titleModal = undefined;
+        this.visible = true;
+        this.clientStyling = '';
+        this.clientStylingUrlContent = '';
+        this.limitStylingAppends = false;
+    }
+    handleHelperModalClose() {
+        this.visible = false;
+        this.cancel.emit();
+    }
+    ;
+    componentDidRender() {
+        // start custom styling area
+        if (!this.limitStylingAppends && this.stylingContainer) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrlContent)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+        // end custom styling area
+    }
+    render() {
+        return ((this.visible &&
+            h$2("div", { key: 'ba2aed789565b37bfdbb34bdf3ccace827231653', class: this.visible ? "HelperModalWrapper HelperModalVisible" : "HelperModalWrapper", ref: el => this.stylingContainer = el }, h$2("div", { key: '151ca4cd80d259ac955b92b10bf6f0df2698a937', class: "HelperModalWrapper HelperModalVisible" }, h$2("div", { key: '804cb1dea73321c4935e4a8ddb1136e98e89a070', class: "HelperModalContent" + (isMobile$1(this.userAgent) ? ' HelperModalMobileContent' : '') }, h$2("span", { key: '30cf7928c1e4baa53f3514fc1930823db76c874c', class: "HelperModalClose" + (isMobile$1(this.userAgent) ? ' HelperModalMobileClose' : ''), onClick: this.handleHelperModalClose.bind(this) }, "X"), h$2("slot", { key: '5c1323a98cdcd09669020a00affe5673856e807e' }))))));
+    }
+};
+HelperModal.style = HelperModalStyle0;
+
+const helperTabCss = ":host{display:block}.TabContent{font-size:14px;color:#000;font-weight:normal}";
+const HelperTabStyle0 = helperTabCss;
+
+const HelperTab = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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.selectedIndex = 0;
+        this.cmsEndpoint = undefined;
+        this.clientStyling = '';
+        this.clientStylingUrlContent = '';
+        this.tabContent = '';
+        this.limitStylingAppends = false;
+    }
+    connectedCallback() {
+        /**
+         * fetch(cmsEndpoint + / + / + selectedIndex)
+         */
+    }
+    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() {
+        this.tabContent = h$2("div", { key: 'd69c61827b4fb6d934c72b0b2d37d72fca307575', class: "TabContent", ref: el => this.stylingContainer = el }, "Each play includes one set of numbers from 1 to 21 with a selectable number of 8 and a second, 4-digit set of numbers, with a minimum selection of 1. Draws are held every 5 minutes and the winnings are automatically credited to your account.");
+        if (this.selectedIndex + 1 == 2) {
+            this.tabContent = h$2("div", { key: 'ab912cbb3bc3e88ecf8fe5f8f0e7eb16460100bd', class: "TabContent", ref: el => this.stylingContainer = el }, h$2("ol", { key: '17bed41dffe7d5578452ee13a47b442d10366ce2' }, h$2("li", { key: 'cf0da42f07cf92f5cea9c9f504c8836e528a5708' }, "Register or Login"), h$2("li", { key: '4a0339df365c6b1a37b8a74c5022a56197e870db' }, "Buy tickets. Select 'Buy Tickets' to pick your numbers. Want us to automatically generate random numbers for you? Choose \u201CI feel lucky\u201D."), h$2("li", { key: '3f29a9b17c1059493648247868b83eb71241b8bd' }, "Review and Complete your purchase. Once you've chosen your total number of plays, and confirmed your number of selections, review your ticket details and complete your purchase!")));
+        }
+        else if (this.selectedIndex + 1 == 3) {
+            this.tabContent = h$2("div", { key: 'ceac54698e0e5c55a049600f02e8f413a76a1c33', class: "TabContent", ref: el => this.stylingContainer = el }, h$2("ul", { key: '426d89c86a1d44f6d515bc1a7902e43317127939' }, h$2("li", { key: '457a225564399001dcab48097578174a27231ca7' }, "What are my odds of winning?"), h$2("li", { key: 'd35220f2aca215eff391cab54d719f18ef906c77' }, "How can I find out if I\u2019ve won a draw game?"), h$2("li", { key: 'fcd560ee4b6740c319cf0f98a0b98da8fd9e14a4' }, "How do I claim my prize?")));
+        }
+        return (this.tabContent);
+    }
+};
+HelperTab.style = HelperTabStyle0;
+
+const helperTabsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Tabs{display:flex;gap:10px;overflow-x:auto}.TabButton{cursor:pointer;width:auto;border-radius:4px;padding:8px 15px;margin:5px 0 10px;border:1px solid #009993;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0;white-space:nowrap}.TabButton:hover{background:#F1F1F1}.TabButton.Active{background:#009993;color:#FFF}";
+const HelperTabsStyle0 = helperTabsCss;
+
+const HelperTabs = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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.disabled = false;
+        this.label = undefined;
+        this.selected = false;
+        this.cmsEndpoint = undefined;
+        this.selectedIndex = 0;
+        this.tabs = [{ label: 'How to Play' }, { label: 'About' }, { label: 'FAQs' }];
+        this.clientStyling = '';
+        this.clientStylingurl = '';
+        this.clientStylingUrlContent = '';
+        this.limitStylingAppends = false;
+    }
+    connectedCallback() {
+    }
+    componentDidRender() {
+        // start custom styling area
+        if (!this.limitStylingAppends && this.stylingContainer) {
+            this.setClientStyling();
+            if (this.clientStylingUrlContent) {
+                this.setClientStylingURL();
+            }
+            this.limitStylingAppends = true;
+        }
+        // end custom styling area
+    }
+    render() {
+        return (h$2("div", { key: '841b2a4b84f2ecdaf692b9cab2eac4b3413186e7', ref: el => this.stylingContainer = el }, h$2("div", { key: '4c5d57e669f9f45d204bff8a85ca89a0574c4627', class: "Tabs" }, this.tabs.map((tab, index) => h$2("button", { class: 'TabButton' + (this.selectedIndex == index ? ' Active' : ''), onClick: () => this.selectedIndex = index }, tab.label))), h$2("div", { key: '7ba983dec3b0355f390b19191d0d823914f09037' }, h$2("helper-tab", { key: 'e6c7739d50948582d8d14d530828508b4cb90d6e', selectedIndex: this.selectedIndex, "client-styling": this.clientStyling, "client-stylingurl": this.clientStylingurl, "client-styling-url-content": this.clientStylingUrlContent }))));
+    }
+    get host() { return getElement(this); }
+};
+HelperTabs.style = HelperTabsStyle0;
+
+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);
+        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$2("div", { key: 'af3601684ecf1f39d65fc9461430cba96b9e4b8c', class: 'Circle ' + (this.selectable ? '' : 'Disabled') + (this.isSelected ? 'Selected' : ''), onClick: () => this.select(), ref: el => this.stylingContainer = el }, this.value));
+    }
+};
+LotteryBullet.style = LotteryBulletStyle0;
+
+const DEFAULT_LANGUAGE$4 = 'en';
+const SUPPORTED_LANGUAGES$4 = ['ro', 'en', 'hr'];
+const TRANSLATIONS$4 = {
+    en: {
+        drawResultsHeader: 'Last draw results',
+        drawId: 'Draw ID',
+        drawName: 'Game name',
+        drawDate: 'Draw Date',
+        drawNumbersGridDraw: 'Draw numbers Grid ',
+        drawNumbersGridTicket: 'Draw numbers Grid ',
+        ticketResult: 'Ticket result',
+        amountWon: 'Amount won',
+        numberOfDraws: 'Number of draws',
+        multiplier: 'Multiplier:',
+        ticketPurchaseDate: 'Ticket Purchase Date',
+        ticketStatus: 'Ticket Status',
+        ticketId: 'Ticket ID',
+        ticketAmount: 'Ticket Amount',
+        winUpTo: 'Win up to',
+    },
+    ro: {
+        drawResultsHeader: 'Ultimele rezultate extragere',
+        drawId: 'Id extragere',
+        drawName: 'Numele jocului',
+        drawDate: 'Data extragerii',
+        drawNumbersGridDraw: 'Numerele extrase Grid',
+        drawNumbersGridTicket: 'Numerele extrase Grid',
+        ticketResult: 'Rezultatul biletului',
+        amountWon: 'Suma castigata',
+        numberOfDraws: 'Numarul de extrageri',
+        multiplier: 'Multiplicator:',
+        ticketPurchaseDate: 'Data achizitionarii biletului',
+        ticketStatus: 'Statusul biletului',
+        ticketId: 'Id biletul',
+        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: 'ربح يصل إلى'
+    },
+    hr: {
+        drawResultsHeader: 'Rezultati posljednjeg izvlačenja',
+        drawId: 'ID izvlačenja',
+        drawName: 'Naziv igre',
+        drawDate: 'Datum izvlačenja',
+        drawNumbersGridDraw: 'Tablica izvučenih brojeva',
+        drawNumbersGridTicket: 'Tablica izvučenih brojeva',
+        ticketResult: 'Rezultat listića',
+        amountWon: 'Osvojeni iznos',
+        numberOfDraws: 'Broj izvlačenja',
+        multiplier: 'Multiplikator',
+        ticketPurchaseDate: 'Datum uplate listića',
+        ticketStatus: 'Status listića',
+        ticketId: 'ID listića',
+        ticketAmount: 'Iznos listića',
+        winUpTo: 'Osvoji do'
+    },
+};
+const translate$4 = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS$4[lang !== undefined && SUPPORTED_LANGUAGES$4.includes(lang) ? lang : DEFAULT_LANGUAGE$4][key];
+};
+
+const lotteryDrawResultsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.TicketInfo{display:flex;flex-direction:row;gap:15px;background-color:#009993;color:#fff;padding:12px;font-size:14px}.DrawResultsArea{margin-top:15px}.DrawResultsArea.TicketDraws .Content{padding:0;border:0}.DrawResultsArea.TicketDraws .DrawResultsBody{padding:0;margin-bottom:5px;border-radius:0;border:0}.DrawResultsSection{max-width:600px;margin:0px auto;border-radius:4px}.DrawResultsHeader{display:flex;justify-content:space-between;padding:10px 20px;background-color:#009993;color:#fff;font-size:14px;border-radius:4px 4px 0 0}.DrawResultsHeader h4{text-transform:uppercase;font-weight:400;margin:0;padding-top:15px}.DrawResultsBody{padding:20px;margin-bottom:5px;border-radius:0 0 4px 4px;border:1px solid #009993}.DrawResultsBody>div{margin:10px 0}.DrawResultsBody .NumberOfDrawsContainer{display:table;width:100%}.DrawNumbersGrid{display:flex;flex-direction:column;gap:5px}.DrawNumbersGrid label{display:block;margin-bottom:7px}.Toggle{cursor:pointer;display:inline-block}.ToggleSwitch{display:inline-block;background:#ccc;border-radius:16px;width:58px;height:24px;position:relative;vertical-align:middle;transition:background 0.25s}.ToggleSwitch:before,.ToggleSwitch:after{content:\"\"}.ToggleSwitch:before{display:block;background:linear-gradient(to bottom, #fff 0%, #eee 100%);border-radius:50%;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.25);width:16px;height:16px;position:absolute;top:4px;left:4px;transition:left 0.25s}.Toggle:hover .ToggleSwitch:before{background:linear-gradient(to bottom, #fff 0%, #fff 100%);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.5)}.ToggleCheckbox:checked+.ToggleSwitch{background:#56c080}.ToggleCheckbox:checked+.ToggleSwitch:before{left:38px}.ToggleCheckbox{position:absolute;visibility:hidden}.Label{position:relative}.DrawTicketsContainer{display:flex;flex-direction:column;margin:20px auto 0}.DrawMultipler{margin-top:15px}.ExpandableBoxes{position:relative;display:flex;flex-direction:column;border:1px solid #ccc;border-radius:5px;background-color:white}.ExpandableBox{border-bottom:1px solid #ccc;transition:height 300ms ease-in-out;overflow:hidden;height:80px}.ExpandableBox:last-child{border-bottom:0}.ExpandableBoxHeader{position:relative;list-style:none;outline:0;cursor:pointer;text-transform:uppercase;transition:color 300ms ease-in-out;margin-bottom:24px;margin-left:5px}.ShowBox>.ExpandableBoxHeader{color:#009993}.ExpandableBoxHeader::-webkit-details-marker{display:none}.ExpandableBoxHeader:before,.ExpandableBoxHeader:after{content:\"\";position:absolute}.ExpandableBoxHeader:before{right:21px;top:50%;height:2px;margin-top:-1px;width:16px;background:#009993}.ExpandableBoxHeader:after{right:28px;top:50%;height:16px;margin-top:-8px;width:2px;margin-left:-1px;background:#009993;transition:all 300ms ease-in-out}.ShowBox .ExpandableBoxHeader:after{opacity:0;transform:translateY(25%)}.ExpandableBoxBody{padding-top:0;font-weight:lighter;margin-left:5px}.ExpandableBox.ShowBox{height:300px}";
+const LotteryDrawResultsStyle0 = lotteryDrawResultsCss;
+
+const LotteryDrawResults = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.ticketDrawDetails = [];
+        this.ticketDrawDetailsFlag = true;
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let cssFile = document.createElement('style');
+            setTimeout(() => {
+                cssFile.innerHTML = this.clientStylingUrlContent;
+                this.stylingContainer.prepend(cssFile);
+            }, 1);
+        };
+        this.endpoint = undefined;
+        this.gameId = undefined;
+        this.language = 'en';
+        this.playerId = undefined;
+        this.drawMode = false;
+        this.drawId = '';
+        this.gameName = '';
+        this.ticketDate = '';
+        this.ticketStatus = '';
+        this.ticketId = '';
+        this.ticketAmount = '';
+        this.ticketMultiplier = false;
+        this.ticketDrawCount = 0;
+        this.ticketNumbers = '';
+        this.sessionId = '';
+        this.clientStyling = '';
+        this.clientStylingUrlContent = '';
+        this.ticketDrawData = '';
+        this.multiplier = 3;
+        this.isLoading = true;
+        this.hasErrors = false;
+        this.errorText = '';
+        this.ticketData = [];
+        this.ticketDataLoaded = false;
+        this.ticketDraws = [];
+        this.toggleDrawer = [false];
+        this.limitStylingAppends = false;
+        this.drawData = undefined;
+    }
+    connectedCallback() {
+        let promises = [];
+        // Split ticket numbers for each grid
+        if (this.ticketNumbers) {
+            this.gridNumbers = JSON.parse(this.ticketNumbers);
+        }
+        if (this.drawId) {
+            promises.push(this.getDrawData());
+        }
+        Promise.all(promises)
+            .then(() => {
+            this.isLoading = false;
+        }).catch((err) => {
+            console.log('error ', err);
+            this.isLoading = false;
+        });
+    }
+    componentWillRender() {
+        if (this.ticketDrawData && this.ticketDrawDetailsFlag) {
+            this.ticketDrawDetails = JSON.parse(this.ticketDrawData);
+            this.ticketDrawDetails.forEach((drawDetail) => {
+                this.getDrawData(drawDetail.drawId).then((drawData) => drawDetail.drawData = drawData);
+            });
+            this.ticketDrawDetailsFlag = 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
+    }
+    getDrawData(drawId) {
+        this.isLoading = true;
+        return new Promise((resolve, reject) => {
+            let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${drawId ? drawId : this.drawId}`);
+            fetch(url.href)
+                .then((response) => {
+                // @TODO EXCEPTIONS
+                return response.json();
+            })
+                .then((data) => {
+                if (drawId) {
+                    resolve(data);
+                }
+                else {
+                    this.drawData = data;
+                    resolve(true);
+                }
+                this.isLoading = false;
+            })
+                .catch((err) => {
+                reject(err);
+                this.isLoading = false;
+            });
+        });
+    }
+    drawerToggle(index) {
+        this.toggleDrawer = this.toggleDrawer.map((item, itemIndex) => {
+            if (itemIndex == index) {
+                return !item;
+            }
+            return item;
+        });
+        if (index >= this.toggleDrawer.length) {
+            this.toggleDrawer.push(true);
+        }
+    }
+    render() {
+        if (this.isLoading) {
+            return (h$2("p", null, "Loading, please wait ..."));
+        }
+        else if (this.hasErrors) {
+            h$2("p", null, this.errorText);
+        }
+        else {
+            return (h$2("section", { class: "DrawResultsSection", ref: el => this.stylingContainer = el }, this.drawMode ?
+                h$2("div", { class: "DrawResultsArea" }, this.drawData &&
+                    h$2("div", null, h$2("div", { class: "DrawResultsHeader" }, h$2("span", null, translate$4('drawId', this.language), ":  ", this.drawData.id), h$2("span", null, translate$4('drawDate', this.language), ": ", this.drawData.date.slice(0, 10))), h$2("div", { class: "DrawResultsBody" }, h$2("div", { class: "DrawNumbersGrid" }, h$2("p", null, translate$4('drawNumbersGridDraw', this.language), "0:"), h$2("div", { class: "BulletContainer" }, h$2("lottery-grid", { "selected-numbers": this.drawData.winningNumbers.join(','), "display-selected": true, selectable: false, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })), h$2("div", { class: "DrawMultipler" }, h$2("label", { class: "Label" }, translate$4('multiplier', this.language), " ", this.multiplier))))))
+                :
+                    h$2("div", { class: "DrawResultsArea TicketDraws" }, h$2("div", { class: "DrawResultsBody" }, h$2("div", { class: "TicketIdContainer" }, h$2("label", { class: "Label" }, translate$4('ticketId', this.language), ": ", h$2("span", null, this.ticketId))), h$2("div", { class: "TicketAmountContainer" }, h$2("label", { class: "Label" }, translate$4('ticketAmount', this.language), " ", h$2("span", null, this.ticketAmount))), h$2("div", { class: "DrawNumbersGrid" }, this.gridNumbers.map((grid, index) => h$2("div", null, h$2("label", { class: "Label" }, translate$4('drawNumbersGridTicket', this.language), " ", String.fromCharCode(index + 65), ":"), h$2("div", { class: "BulletContainer" }, h$2("lottery-grid", { "selected-numbers": grid.join(','), selectable: false, "display-selected": true, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))))), h$2("div", { class: "DrawMultipler" }, h$2("label", { class: "Label" }, translate$4('multiplier', this.language), " ", JSON.stringify(this.ticketMultiplier))), h$2("div", { class: "NumberOfDrawsContainer" }, h$2("label", { class: "Label" }, translate$4('numberOfDraws', this.language), ": ", this.ticketDrawCount), h$2("div", { class: "DrawTicketsContainer" }, this.ticketDrawDetails && this.ticketDrawDetails.length > 0 &&
+                        h$2("div", { class: "ExpandableBoxes" }, this.ticketDrawDetails.map((drawDetail, index) => {
+                            var _a, _b, _c, _d, _e;
+                            return h$2("div", { class: { 'ExpandableBox': true, 'ShowBox': this.toggleDrawer[index] }, onClick: () => this.drawerToggle(index) }, h$2("div", { class: "ExpandableBoxHeader" }, h$2("div", { class: "TicketResultContainer" }, h$2("p", null, translate$4('ticketResult', this.language), ": ", drawDetail.state)), drawDetail.state == 'won' &&
+                                h$2("div", { class: "AmountWonContainer" }, h$2("p", null, translate$4('amountWon', this.language), ": ", Number(drawDetail.amount).toLocaleString('en'), " ", drawDetail.currency)), drawDetail.state == 'lost' &&
+                                h$2("div", { class: "DrawIdContainer" }, h$2("p", null, translate$4('drawId', this.language), ": ", drawDetail.drawId))), h$2("div", { class: "ExpandableBoxBody" }, h$2("div", { class: "DrawIdContainer" }, h$2("p", null, translate$4('drawId', this.language), ": ", drawDetail.drawId)), h$2("div", { class: "DrawDateContainer" }, h$2("p", null, translate$4('drawDate', this.language), ": ", (_a = drawDetail.drawData) === null || _a === void 0 ? void 0 :
+                                _a.date.slice(0, 10), " | ", (_b = drawDetail.drawData) === null || _b === void 0 ? void 0 :
+                                _b.date.slice(11, 19))), h$2("div", { class: "DrawNumbersGrid" }, drawDetail.drawData &&
+                                h$2("div", { class: 'BulletContainer' }, h$2("label", { class: "Label" }, translate$4('drawNumbersGridDraw', this.language), " ", String.fromCharCode(index + 10), ":"), h$2("lottery-grid", { "selected-numbers": (_d = (_c = drawDetail.drawData) === null || _c === void 0 ? void 0 : _c.winningNumbers) === null || _d === void 0 ? void 0 : _d.join(','), selectable: false, "display-selected": true, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))), h$2("div", { class: "DrawMultipler" }, h$2("label", { class: "Label" }, translate$4('multiplier', this.language), " ", (_e = drawDetail.drawData) === null || _e === void 0 ? void 0 :
+                                _e.multiplier))));
+                        }))))))));
+        }
+    }
+};
+LotteryDrawResults.style = LotteryDrawResultsStyle0;
+
+const DEFAULT_LANGUAGE$3 = 'en';
+const SUPPORTED_LANGUAGES$3 = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS$3 = {
+    en: {
+        drawResultsHeader: 'Draw results history',
+        drawId: 'Draw ID',
+        drawDate: 'Draw Date',
+        drawNumbersGridA: 'Draw numbers Grid A',
+        viewAllResults: 'View All',
+        lastFiveDraws: 'Last 5 Draws',
+        lastTenDraws: 'Last 10 Draws',
+        lastFifteenDraws: 'Last 15 Draws',
+        allDrawResultsHistory: 'All Draw Results History',
+        noResults: 'No results',
+        fetchingResults: 'Fetching results'
+    },
+    ro: {
+        drawResultsHeader: 'Istoricul extragerilor',
+        drawId: 'ID-ul extragerii',
+        drawDate: 'Data extragerii',
+        drawNumbersGridA: 'Numerele extrase Grid A',
+        viewAllResults: 'Vezi toate rezultatele',
+        lastFiveDraws: 'Ultimile 5 extrageri',
+        lastTenDraws: 'Ultimile 10 extrageri',
+        lastFifteenDraws: 'Ultimile 15 extrageri',
+        allDrawResultsHistory: 'Istoricul tuturor extragerilor',
+        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: 'جلب النتائج'
+    },
+    hr: {
+        drawResultsHeader: 'Povijest rezultata izvlačenja',
+        drawId: 'ID izvlačenja',
+        drawDate: 'Datum izvlačenja',
+        drawNumbersGridA: 'Izvučeni brojevi tablica A',
+        viewAllResults: 'Pogledaj sve',
+        lastFiveDraws: 'Zadnjih 5 izvlačenja',
+        lastTenDraws: 'Zadnjih 10 izvlačenja',
+        lastFifteenDraws: 'Zadnjih 15 izvlačenja',
+        allDrawResultsHistory: 'Povijest svih rezultata izvlačenja',
+        noResults: 'Nema rezultata',
+        fetchingResults: 'Dohvaćanje rezultata'
+    },
+};
+const translate$3 = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS$3[lang !== undefined && SUPPORTED_LANGUAGES$3.includes(lang) ? lang : DEFAULT_LANGUAGE$3][key];
+};
+
+const lotteryDrawResultsHistoryCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GridBanner{background-color:#009993;background-repeat:no-repeat;background-position:center;color:#111;padding:0 20px 30px}.GridBanner .BannerButtonsWrapper{display:flex;justify-content:space-between;padding-top:16px}.GridBanner .BannerButtonsWrapper .BannerBackButton,.GridBanner .BannerButtonsWrapper .BannerLobbyButton{background:#fff;border:1px solid #009993;border-radius:4px;padding:7px 15px;font-size:12px;text-transform:uppercase;width:80px;cursor:pointer}.GridBanner .HistoryGridBannerArea{padding-top:30px}.HistoryGridBannerArea{display:flex;flex-direction:column;align-items:center}.BannerText{font-size:14px;font-weight:300}.BannerCountdown{font-size:22px;display:flex;gap:20px}.DrawResultsSection{max-width:600px;margin:0px auto}.HistoryGrid{border-radius:5px}.DrawResultsHeader{color:#009993;padding:25px 0 10px 0;text-align:center;border-radius:4px 4px 0 0}.DrawResultsHeader h4{text-transform:uppercase;font-size:16px;font-weight:600;margin:0}.DrawNumbersGrid{padding:10px 50px}.DrawNumbersGrid p{margin:0 0 10px 0;font-size:14px}.BulletContainer{margin-bottom:20px}.DrawResultTop{background-color:#009993;padding:10px;text-align:center;color:#fff;padding:0 50px;display:flex;justify-content:center;gap:40px}.ViewAllResults{display:block;padding:10px 40px;margin:40px auto;border:0;border-radius:5px;background-color:#009993;color:#fff;outline:none}.FilterSection{display:flex;justify-content:space-between;padding:25px 15px 10px;gap:10px;margin:0px 15px}.FilterSection .FilterResultsContainer{display:flex;gap:5px;overflow-x:auto}.FilterSection .QuickFilterButton{cursor:pointer;width:max-content;border-radius:4px;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterSection .QuickFilterButton:hover{background:#F1F1F1}.FilterSection helper-filters{margin-left:auto}";
+const LotteryDrawResultsHistoryStyle0 = lotteryDrawResultsHistoryCss;
+
+const LotteryDrawResultsHistory = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.getDrawsData = () => {
+            let url = new URL(`${this.endpoint}/games/${this.gameId}/draws`);
+            if (this.dateFiltersFrom)
+                url.searchParams.append('from', this.dateFiltersFrom);
+            if (this.dateFiltersTo)
+                url.searchParams.append('to', this.dateFiltersTo);
+            fetch(url.href)
+                .then((res) => {
+                if (res.status >= 300) {
+                    throw new Error('There was an error while fetching the data');
+                }
+                return res.json();
+            })
+                .then((data) => {
+                this.winningDataSetsData = data.items.filter(draw => draw.winningNumbers);
+                this.drawData = this.winningDataSetsData.map((item) => item);
+            })
+                .catch((err) => {
+                console.log('err', err);
+            })
+                .finally(() => {
+                this.isLoading = false;
+                this.noResults = this.drawData.filter(draw => draw.winningNumbers).length == 0 ? true : false;
+            });
+        };
+        this.filterResults = (resultsNumber) => {
+            this.numberOfResults = resultsNumber;
+            this.displayAllDrawsResults = true;
+        };
+        this.getDrawResults = (drawID) => {
+            let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${drawID}`);
+            let drawOptions = {
+                method: "GET",
+                headers: {
+                    'Content-Type': "application/json",
+                    'Accept': 'application/json',
+                },
+            };
+            fetch(url.href, drawOptions)
+                .then((response) => {
+                if (response.status == 404)
+                    this.noResults = true;
+                return response.json();
+            })
+                .then((data) => {
+                this.drawData = [data].map((item) => item);
+            })
+                .catch((err) => {
+                console.log('err', err);
+            })
+                .finally(() => {
+                this.isLoading = false;
+            });
+        };
+        this.viewAllResults = () => {
+            this.numberOfResults = this.drawData.length;
+            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);
+        };
+        this.endpoint = undefined;
+        this.gameId = undefined;
+        this.numberOfResults = 3;
+        this.language = 'en';
+        this.clientStyling = '';
+        this.clientStylingUrlContent = '';
+        this.drawData = [];
+        this.winningDataSetsData = [''];
+        this.displayAllDrawsResults = true;
+        this.showQuickFilters = true;
+        this.dateFiltersFrom = '';
+        this.dateFiltersTo = '';
+        this.isLoading = false;
+        this.noResults = false;
+        this.limitStylingAppends = false;
+    }
+    // Filters events
+    // @Listen('filterDraw')
+    // filtersDrawHandler(event: CustomEvent<any>):void {
+    //   this.isLoading = true;
+    //   this.showQuickFilters = false;
+    // }
+    filtersHandler(event) {
+        this.showQuickFilters = false;
+        this.isLoading = true;
+        if (event.detail.ticketDrawId) {
+            this.getDrawResults(event.detail.ticketDrawId);
+        }
+        else {
+            this.dateFiltersFrom = event.detail.filterFromCalendar;
+            this.dateFiltersTo = event.detail.filterToCalendar;
+            this.getDrawsData();
+        }
+    }
+    clearFiltersHandler() {
+        this.showQuickFilters = true;
+        this.dateFiltersFrom = '';
+        this.dateFiltersTo = '';
+        this.drawData = this.winningDataSetsData;
+        this.isLoading = true;
+        this.getDrawsData();
+    }
+    connectedCallback() {
+        if (this.showQuickFilters)
+            this.getDrawsData();
+    }
+    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$2("div", { key: '1583b694983132e116397e73c9552c95897c0353', class: "DrawResultsHeader" }, this.displayAllDrawsResults ? h$2("h4", null, translate$3('drawResultsHeader', this.language)) :
+            [h$2("div", { class: "DrawResultsHeaderContent" }, h$2("h4", null, translate$3('allDrawResultsHistory', this.language)), h$2("div", { class: "FilterSection" }, this.showQuickFilters &&
+                    h$2("div", { class: "FilterResultsContainer" }, h$2("button", { class: "QuickFilterButton", onClick: () => this.filterResults(5) }, translate$3('lastFiveDraws', this.language)), h$2("button", { class: "QuickFilterButton", onClick: () => this.filterResults(10) }, translate$3('lastTenDraws', this.language)), h$2("button", { class: "QuickFilterButton", onClick: () => this.filterResults(15) }, translate$3('lastFifteenDraws', this.language))), h$2("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$2("section", { key: '4dc417fefb4d2ce1be3eaf7853a2d564ef554c38', class: "GridWrapper", ref: el => this.stylingContainer = el }, h$2("div", { key: '18c68785d3fa790b8e7e923dd986afa2ffc60a54', class: "DrawResultsSection" }, h$2("div", { key: '639d8f0c70aee9bb7d70b5bf6e7ee183aafb3c32', class: "DrawResultsAreaHistory" }, gridHeader, h$2("div", { key: '4e43f9d5acdbfceff15a84a51bd4c26f013f6781', class: "HistoryGridWrapper" }, h$2("div", { key: '344b9d8c9bbf87dde621eadec387c484b457671a', class: "HistoryGrid" }, this.isLoading &&
+            h$2("p", { key: '5c0950a3c07c0e868861fd53a8a919168acca345' }, translate$3('fetchingResults', this.language)), !this.isLoading && !this.noResults && this.drawData.map((item) => h$2("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$2("p", { key: '9b9fccfe879e3b6f3663f1778c4f04dd8779a5c1' }, translate$3('noResults', this.language))))), this.displayAllDrawsResults && h$2("button", { key: '3af21758d6aad9c255d164c6ced7aebfc990fd0d', class: "ViewAllResults", onClick: this.viewAllResults }, translate$3('viewAllResults', this.language)))));
     }
-  }
-
-  // Workaround https://github.com/vaadin/web-components/issues/2855
-  /** @protected */
-  _openedChanged(opened) {
-    super._openedChanged(opened);
+};
+LotteryDrawResultsHistory.style = LotteryDrawResultsHistoryStyle0;
+
+const lotteryGameDetailsCss = ":host{display:block}";
+const LotteryGameDetailsStyle0 = lotteryGameDetailsCss;
+
+const LotteryGameDetails = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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.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$2("div", { key: 'a972ed1a25317b0cdeb82e3b007ec79e30bbb871', class: "GamePageDetailsContainer", ref: el => this.stylingContainer = el }, h$2("helper-accordion", { key: '2c6f8d634241c412103cdae78909972c884b0515', "header-title": "Game Details", collapsed: false, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h$2("div", { key: 'f5f80e173d935cb0dabb6a7ef45e54a1312b5dc8', class: "AccordionContainer", slot: "accordionContent" }, h$2("helper-tabs", { key: 'a91396e0a4aa1235cc618dfe336ae8b603bc2a6c', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })))));
+    }
+};
+LotteryGameDetails.style = LotteryGameDetailsStyle0;
+
+const DEFAULT_LANGUAGE$2 = 'en';
+const SUPPORTED_LANGUAGES$2 = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS$2 = {
+    en: {
+        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: 'Last Draw Results',
+        modalLogin: 'Please login to submit a ticket',
+    },
+    ro: {
+        error: 'Eroare',
+        title: 'Loto 6/49',
+        backButton: 'Inapoi',
+        lobbyButton: 'Lobby',
+        prize: 'MARELE JACKPOT OMG',
+        winUpTo: 'Castiga pana la',
+        nextDraw: 'Urmatoarea extragere:',
+        buy: 'Cumpara bilet',
+        viewLatest: 'Ultimile extrageri',
+        createTicket: 'Creeaza bilet',
+        modalSuccess: 'Achizitie efectuata cu succes',
+        deleteTicketModalTitle: 'Sterge biletul',
+        deleteTicketModalText: 'Esti sigur ca vrei sa stergi acest bilet?',
+        deleteTicketModalCancel: 'Anuleaza',
+        deleteTicketModalConfirm: 'Sterge',
+        orderSummaryTitle: 'Rezumat comanda',
+        orderSummaryTickets: 'Bilet',
+        orderSummaryTotal: 'Total',
+        orderSummarySubmit: 'Trimite',
+        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: 'كرونو',
+        backButton: 'خلف',
+        lobbyButton: 'ردهة',
+        prize: 'جائزة',
+        winUpTo: 'الفوز بما يصل الى',
+        nextDraw: 'السحب التالي:',
+        buy: 'اشتري تذاكر',
+        viewLatest: 'عرض أحدث النتائج',
+        createTicket: 'إنشاء تذكرة',
+        modalSuccess: '!سيتم الشراء بنجاح قريبًا',
+        deleteTicketModalTitle: 'حذف التذكرة',
+        deleteTicketModalText: 'هل أنت متأكد أنك تريد حذف هذه التذكرة؟',
+        deleteTicketModalCancel: 'يلغي',
+        deleteTicketModalConfirm: 'حذف',
+        orderSummaryTitle: 'ملخص الطلب',
+        orderSummaryTickets: 'تذكرة',
+        orderSummaryTotal: 'المجموع',
+        orderSummarySubmit: 'يُقدِّم',
+        lastDrawResultsTitle: 'نتائج آخر سحب',
+        modalLogin: 'الرجاء تسجيل الدخول لتقديم تذكرة'
+    },
+    hr: {
+        error: 'Greška',
+        title: 'Krono',
+        backButton: 'Nazad',
+        lobbyButton: 'Lobby',
+        prize: 'Nagrada',
+        winUpTo: 'Osvoji do',
+        nextDraw: 'Sljedeće izvlačenje za: ',
+        buy: 'Uplati listić',
+        viewLatest: 'Pogledajte najnovije rezultate',
+        createTicket: 'Uplati listić',
+        modalSuccess: 'Kupnja uspješno obavljena!',
+        deleteTicketModalTitle: 'Izbriši listić',
+        deleteTicketModalText: 'Are you sure you want to delete this ticket?',
+        deleteTicketModalCancel: 'Otkaži',
+        deleteTicketModalConfirm: 'Izbriši',
+        orderSummaryTitle: 'Sažetak narudžbe',
+        orderSummaryTickets: 'Listić',
+        orderSummaryTotal: 'Ukupno',
+        orderSummarySubmit: 'Podnijeti',
+        lastDrawResultsTitle: 'Rezultati posljednjeg izvlačenja',
+        modalLogin: 'Molimo prijavite se da uplatite listić',
+    }
+};
+const translate$2 = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS$2[lang !== undefined && SUPPORTED_LANGUAGES$2.includes(lang) ? lang : DEFAULT_LANGUAGE$2][key];
+};
 
-    this.$.overlay.positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
-    this.$.overlay.noVerticalOverlap = true;
-  }
-}
+/**
+ * @name isMobile
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
+ * @param {String} userAgent window.navigator.userAgent
+ * @returns {Boolean} true or false
+ */
+const isMobile = (userAgent) => {
+    return !!(userAgent.toLowerCase().match(/android/i) ||
+        userAgent.toLowerCase().match(/blackberry|bb/i) ||
+        userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+        userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+};
 
-defineCustomElement(DatePicker);
+const lotteryGamePageCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.GamePage .GridBanner{background-color:#009993;background-repeat:no-repeat;background-position:center;color:#111;padding:0 20px 10px;height:220px;display:flex;flex-direction:column;justify-content:space-between}.GamePage .GridBanner .BannerButtonsWrapper{display:flex;justify-content:space-between;padding-top:16px}.GamePage .GridBanner .BannerButtonsWrapper .BannerBackButton,.GamePage .GridBanner .BannerButtonsWrapper .BannerLobbyButton{background:#fff;border:1px solid #D4D4D4;border-radius:4px;padding:7px 15px;font-size:12px;text-transform:uppercase;width:80px;cursor:pointer}.GamePage .GridBanner .GridBannerArea{padding-top:30px;display:flex;flex-direction:column;align-items:center}.GamePage .TotalWinnings{color:#000;font-size:18px;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px;text-transform:uppercase}.GamePage .TotalWinnings span{font-size:18px;font-weight:700}.GamePage .NextDraw{color:#00958f;font-size:24px;font-weight:600;margin:0 auto;text-align:center;text-transform:uppercase;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:4px}.GamePage .NextDraw .BannerText{font-weight:400;font-size:18px;text-transform:uppercase;padding:0;margin:15px 0 0 0}.GamePage .NextDraw .BannerCountdown{font-size:22px;color:#00958f;display:flex;gap:20px}.GamePage .Tabs{display:flex;justify-content:center;gap:10px}.GamePage .Tabs .TabButton{border-radius:4px;cursor:pointer;padding:8px 0;width:50%;max-width:200px;border:1px solid #00958f;background:#00958f;color:#fff;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.GamePage .Tabs .TabButton.Active{color:#00958f;background:#F1F1F1;border:1px solid #F1F1F1}.LastDrawResultsTitle{color:#009993;padding:25px 0 10px 0;text-align:center;border-radius:4px;text-transform:uppercase;font-size:16px;font-weight:600;margin:0}.NextDrawWrapper{padding:10px 15px;background:#F1F1F1;background:linear-gradient(0deg, rgb(241, 241, 241) 0%, rgba(253, 187, 45, 0) 100%)}.NextDrawWrapper .BannerText{font-size:16px;font-weight:700;text-align:center}.NextDrawWrapper .BannerCountdown{font-size:22px;display:flex;gap:8px;color:#009993;font-weight:bolder;justify-content:center}.GamePageContent{padding:15px;max-width:1200px;margin:0 auto}.GameDetails{padding-bottom:10px;margin-bottom:20px}.CreateNewTicket{background:#004D4A;height:100px;width:100%;display:flex;margin-top:10px;flex-direction:column;justify-content:center;align-items:center}.CreateNewTicket button{cursor:pointer;display:inline-block;border-radius:50%;width:40px;height:40px;margin:5px;border:1px solid #FFF;background:#FFF;color:#004D4A;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.CreateNewTicket button:hover{background:#F1F1F1}.CreateNewTicket span{display:inline-block;font-size:12px;text-align:center;margin:0 auto;color:#FFF}.OrderSummary{min-width:200px;border-radius:4px;display:flex;flex-direction:column;justify-content:center;margin-top:20px;background:#fff}.OrderSummary .OrderSummaryTitle{font-size:16px;color:#009993;text-transform:uppercase;text-align:center}.OrderSummary .Ticket{display:inline-block;color:#000;font-size:14px;height:50px;line-height:50px;margin-left:15px}.OrderSummary .Ticket span{text-align:right}.OrderSummary hr{border:none;border-top:1px double #D4D4D4;color:#D4D4D4;width:100%}.OrderSummary .Total{display:inline-block;color:#000;font-size:14px;height:50px;line-height:50px;margin-left:15px}.OrderSummary .Total span{text-align:right}.ButtonWrapper{display:flex;align-items:center;justify-content:center}.ButtonWrapper .Button{cursor:pointer;border-radius:4px;padding:8px 60px;width:max-content;margin:5px;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0;background:#009993;border:1px solid #009993;color:#FFF}.ButtonWrapper .Button:hover{background:#00ABA4}.ButtonWrapper .Button.ButtonDisabled{pointer-events:none;background:#ccc;border:1px solid #ccc}.SubmitModalSuccess{text-align:center;font-size:18px;padding:20px}.DeleteTicketModalWrapper{padding:20px;text-align:center}.DeleteTicketModalWrapper .DeleteTicketModalTitle{font-size:16px;color:#00958f;font-weight:400;text-transform:uppercase;margin:20px 0 40px}.DeleteTicketModalWrapper .DeleteTicketModalText{font-size:14px;color:#000;line-height:22px;margin-bottom:40px}.DeleteTicketModalWrapper .DeleteTicketModalButtons{display:flex;gap:10px;justify-content:center}.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalConfirm{cursor:pointer;border-radius:4px;padding:8px 25px;width:max-content;margin:5px;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}.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalConfirm:hover{background:#FF6536;border:1px solid #FF3D00}.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalCancel{cursor:pointer;width:max-content;border-radius:4px;padding:10px 25px;margin:5px;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}.DeleteTicketModalWrapper .DeleteTicketModalButtons .DeleteTicketModalCancel:hover{background:#F1F1F1}@media (min-width: 1200px){.GamePageContent .TicketsWrapper{float:left;width:49%}.GamePageContent .GameDetails{float:right;width:49%}.GamePageContent .OrderSummary{float:right;width:49%}}";
+const LotteryGamePageStyle0 = lotteryGamePageCss;
+
+const LotteryGamePage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.goBackEvent = createEvent(this, "goBackEvent", 7);
+        this.goToLobbyEvent = createEvent(this, "goToLobbyEvent", 7);
+        // @TODO fix any type
+        this.userAgent = window.navigator.userAgent;
+        this.multiplier = false;
+        this.quickPick = false;
+        this.isMobile = isMobile(this.userAgent);
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let url = new URL(this.clientStylingurl);
+            let cssFile = document.createElement('style');
+            fetch(url.href)
+                .then((res) => res.text())
+                .then((data) => {
+                this.clientStylingUrlContent = data;
+                cssFile.innerHTML = data;
+                setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+            })
+                .catch((err) => {
+                console.log('error ', err);
+            });
+        };
+        this.endpoint = undefined;
+        this.gameId = undefined;
+        this.playerId = undefined;
+        this.sessionId = undefined;
+        this.language = 'en';
+        this.backgroundUrl = undefined;
+        this.autoPick = false;
+        this.resetButton = false;
+        this.clientStyling = '';
+        this.clientStylingurl = '';
+        this.clientStylingUrlContent = '';
+        this.tickets = [];
+        this.tabIndex = 0;
+        this.hasErrors = false;
+        this.totalAmount = 0;
+        this.successVisible = false;
+        this.deleteVisible = false;
+        this.deleteEventData = undefined;
+        this.daysRemaining = undefined;
+        this.hoursRemaining = undefined;
+        this.minutesRemaining = undefined;
+        this.secondsRemaining = undefined;
+        this.latestDraw = {};
+        this.totalWinningsAmount = 0;
+        this.nextDate = undefined;
+        this.isLoggedIn = false;
+        this.loginModalVisible = false;
+        this.limitStylingAppends = false;
+    }
+    // @TODO fix `any` type later, I'm lazy now
+    connectedCallback() {
+        this.getGameDetails();
+        this.getDraws();
+        if (this.sessionId) {
+            this.isLoggedIn = true;
+        }
+    }
+    componentDidRender() {
+        // start custom styling area
+        if (!this.limitStylingAppends && this.stylingContainer) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingurl)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+        // end custom styling area
+    }
+    countdownLogic(date) {
+        this.interval = setInterval(() => {
+            this.daysRemaining = Math.floor((Date.parse(date) - new Date().getTime()) / (1000 * 60 * 60 * 24));
+            this.hoursRemaining = Math.floor((Date.parse(date) - new Date().getTime()) / (1000 * 60 * 60) - this.daysRemaining * 24);
+            this.minutesRemaining = Math.floor((Date.parse(date) - new Date().getTime()) / (1000 * 60) - this.daysRemaining * 24 * 60 - this.hoursRemaining * 60);
+            this.secondsRemaining = Math.floor((Date.parse(date) - new Date().getTime()) / 1000 - this.daysRemaining * 24 * 60 * 60 - this.hoursRemaining * 60 * 60 - this.minutesRemaining * 60);
+        }, 1000);
+    }
+    disconnectedCallback() {
+        clearInterval(this.interval);
+    }
+    getGameDetails() {
+        let url = new URL(`${this.endpoint}/games/${this.gameId}`);
+        fetch(url.href)
+            .then((res) => {
+            if (res.status >= 300) {
+                this.hasErrors = true;
+                throw new Error('There was an error while fetching the data');
+            }
+            return res.json();
+        })
+            .then((data) => {
+            this.gameData = data;
+            this.basicStake = this.gameData.type.stakes[0].amount;
+            let draws = this.gameData.draws.filter((item) => !item.winningNumbers);
+            draws.length > 0 && (this.nextDraw = draws[0].id);
+            this.createNewTicket();
+        })
+            .catch((err) => {
+            this.hasErrors = true;
+            console.log('Error', err);
+        });
+    }
+    calculateTotalAmount() {
+        const { currency } = this.gameData.type.stakes[0];
+        this.totalAmount = 0;
+        this.tickets.forEach((item) => {
+            if (item.completed) {
+                this.totalAmount += item.amount * item.stake;
+            }
+        });
+        this.currency = currency;
+    }
+    // @TODO CustomEvent type
+    gridFilledHandler(event) {
+        // @TODO item ts
+        this.tickets = this.tickets.map((item) => {
+            if (item.ticketId == event.detail.id) {
+                let arr = item.selectedNumbers || [];
+                arr[event.detail.index] = event.detail.selectedNumbers.map((item) => parseInt(item, 10));
+                return {
+                    gameId: item.gameId,
+                    ticketId: item.ticketId,
+                    completed: true,
+                    amount: event.detail.draws,
+                    stake: item.stake,
+                    selectedNumbers: arr
+                };
+            }
+            return item;
+        });
+        this.calculateTotalAmount();
+    }
+    // @TODO fix any type
+    gridDirtyHandler(event) {
+        // @TODO item ts
+        this.tickets = this.tickets.map((item) => {
+            if (item.gameId == event.detail.id) {
+                return {
+                    gameId: item.gameId,
+                    ticketId: item.ticketId,
+                    completed: false,
+                    amount: item.amount,
+                    stake: item.stake,
+                    grids: []
+                };
+            }
+            return item;
+        });
+    }
+    // @TODO CustomEvent type
+    deleteTicketHandler(event) {
+        this.deleteVisible = true;
+        this.deleteEventData = event;
+    }
+    modalCloseEvent() {
+        this.deleteVisible = false;
+        this.loginModalVisible = false;
+    }
+    stakeChangeHandler(event) {
+        const { ticketId, stake } = event.detail;
+        this.tickets[ticketId - 1].stake = stake;
+        this.calculateTotalAmount();
+    }
+    multiplierChangeHandler(event) {
+        this.multiplier = event.detail;
+    }
+    getDraws() {
+        // append from query param with the current date value in order to get the next draw
+        let url = new URL(`${this.endpoint}/games/${this.gameId}/draws`);
+        let drawOptions = {
+            method: "GET",
+            headers: {
+                'Content-Type': "application/json",
+                'Accept': 'application/json',
+            },
+        };
+        fetch(url.href, drawOptions)
+            .then((response) => {
+            return response.json();
+        })
+            .then((data) => {
+            var _a;
+            let upcoming = data.items.filter((item) => {
+                if (Date.parse(item.date) > new Date().getTime()) {
+                    return !item.winningNumbers;
+                }
+            });
+            let past = data.items.filter((item) => item.winningNumbers);
+            if (!upcoming[0])
+                return;
+            this.latestDraw = upcoming[0];
+            this.nextDate = this.latestDraw.date;
+            this.countdownLogic(this.nextDate);
+            this.lastDrawId = past[past.length - 1].id;
+            // calculate total winnings
+            // @TODO fix any type
+            (_a = this.latestDraw) === null || _a === void 0 ? void 0 : _a.prizes.forEach((element) => {
+                this.totalWinningsAmount += JSON.parse(element.amount);
+            });
+        })
+            .catch((err) => {
+            console.log('error ', err);
+        });
+    }
+    ;
+    // @TODO fix any type
+    confirmDeleteTicketHandler(event) {
+        // @TODO fix any type
+        this.tickets = this.tickets.filter((item) => {
+            if (item.ticketId == event.detail.ticketId) {
+                return false;
+            }
+            return true;
+        });
+        this.calculateTotalAmount();
+        this.deleteVisible = false;
+    }
+    createNewTicket() {
+        this.tickets = [
+            ...this.tickets,
+            { gameId: this.gameId, ticketId: this.tickets.length + 1, completed: false, amount: 1, stake: this.basicStake, grids: [] }
+        ];
+    }
+    showLoginModal() {
+        this.loginModalVisible = true;
+    }
+    submitTickets() {
+        let url = new URL(`${this.endpoint}/tickets`);
+        // @TODO Body TS type
+        let body = {
+            gameId: this.gameId,
+            tickets: []
+        };
+        this.tickets.forEach((item) => {
+            body.tickets.push({
+                startingDrawId: this.nextDraw,
+                amount: item.stake,
+                gameId: this.gameId,
+                currency: this.currency,
+                selection: item.selectedNumbers,
+                multiplier: this.multiplier,
+                drawCount: item.amount,
+                quickPick: this.quickPick,
+            });
+        });
+        // @TODO Options TS type
+        let options = {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json',
+                'Authorization': `Bearer ${this.sessionId}`
+            },
+            body: JSON.stringify(body)
+        };
+        fetch(url.href, options)
+            .then((res) => {
+            if (res.status > 300) {
+                throw new Error('err');
+            }
+            return res.json();
+        })
+            .then((data) => {
+            // should we treat this res?
+            console.log('data', data);
+        })
+            .catch((err) => {
+            console.log('error ', err);
+        });
+        this.successVisible = true;
+    }
+    goBack() {
+        this.goBackEvent.emit();
+    }
+    goToLobby() {
+        this.goToLobbyEvent.emit();
+    }
+    render() {
+        //Get path for background image
+        const backgroundImagePath = getAssetPath(this.isMobile ? '/assets/chrono_lottery_mobile.png' : '/assets/chrono_desktop.png');
+        if (this.hasErrors) {
+            return (h$2("div", { class: "GamePage" }, h$2("div", { class: "Title" }, translate$2('error', this.language))));
+        }
+        return (
+        /* Game details */
+        h$2("div", { class: "GamePage", dir: this.language == 'ar' ? 'rtl' : 'ltr', ref: el => this.stylingContainer = el }, h$2("div", { class: "GridBanner", style: { 'background': `url(${this.backgroundUrl ? this.backgroundUrl : backgroundImagePath})`, 'background-size': 'contain', 'background-repeat': 'no-repeat', 'background-position': 'center' } }, h$2("div", { class: "BannerButtonsWrapper" }, h$2("button", { class: "BannerBackButton", onClick: this.goBack.bind(this) }, h$2("span", { class: "BannerBackButtonArrow" }, "\u1438 "), translate$2('backButton', this.language)), h$2("button", { class: "BannerLobbyButton", onClick: this.goToLobby.bind(this) }, translate$2('lobbyButton', this.language))), h$2("div", { class: "Tabs" }, h$2("div", { class: 'TabButton' + (this.tabIndex == 0 ? ' Active' : ''), onClick: () => this.tabIndex = 0 }, translate$2('buy', this.language)), h$2("div", { class: 'TabButton' + (this.tabIndex == 1 ? ' Active' : ''), onClick: () => this.tabIndex = 1 }, translate$2('viewLatest', this.language)))), h$2("div", { class: "NextDrawWrapper" }, h$2("div", { class: "TotalWinnings" }, translate$2('winUpTo', this.language), ": ", h$2("span", null, "$", this.totalWinningsAmount.toLocaleString('en-US', { maximumFractionDigits: 2 }))), h$2("div", { class: "NextDraw" }, h$2("p", { class: "BannerText" }, translate$2('nextDraw', this.language)), h$2("div", { class: "BannerCountdown" }, h$2("span", { class: "CountdownDays" }, this.daysRemaining, "D"), h$2("span", { class: "CountdownHours" }, this.hoursRemaining, "H"), h$2("span", { class: "CountdownMinutes" }, this.minutesRemaining, "M"), h$2("span", { class: "CountdownSeconds" }, this.secondsRemaining, "S")))), this.tabIndex == 0 &&
+            h$2("div", { class: "GamePageContent" }, h$2("div", { class: "GameDetails" }, h$2("lottery-game-details", { "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })), h$2("div", { class: "TicketsWrapper" }, this.tickets.map((item) => h$2("lottery-ticket-controller", { endpoint: this.endpoint, "ticket-id": item.ticketId, "game-id": item.gameId, collapsed: false, last: true, language: this.language, "auto-pick": this.autoPick, "reset-button": this.resetButton, "total-controllers": this.tickets.length, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })), h$2("div", { class: "CreateNewTicket" }, h$2("button", { onClick: () => this.createNewTicket() }, "+"), h$2("span", null, translate$2('createTicket', this.language)))), h$2("div", { class: "OrderSummary" }, h$2("h3", { class: "OrderSummaryTitle" }, translate$2('orderSummaryTitle', this.language)), h$2("div", { class: "Ticket" }, translate$2('orderSummaryTickets', this.language), ": ", h$2("span", null, this.tickets.length)), h$2("hr", null), h$2("div", { class: "Total" }, translate$2('orderSummaryTotal', this.language), ": ", h$2("span", null, this.totalAmount, " ", this.currency)), h$2("div", { class: "ButtonWrapper" }, this.isLoggedIn &&
+                h$2("span", { class: "Button", onClick: () => this.submitTickets() }, translate$2('orderSummarySubmit', this.language)), !this.isLoggedIn &&
+                h$2("div", null, h$2("span", { class: "Button", onClick: () => this.showLoginModal() }, translate$2('orderSummarySubmit', this.language)), h$2("helper-modal", { "title-modal": "Success", visible: this.loginModalVisible, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h$2("p", { class: "SubmitModalSuccess" }, translate$2('modalLogin', this.language))))))), this.tabIndex == 1 &&
+            h$2("div", null, h$2("h4", { class: "LastDrawResultsTitle" }, translate$2('lastDrawResultsTitle', this.language)), h$2("lottery-draw-results", { endpoint: this.endpoint, "game-id": this.gameId, language: this.language, "draw-id": this.lastDrawId, "draw-mode": true, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }), h$2("lottery-draw-results-history", { endpoint: this.endpoint, "game-id": this.gameId, language: this.language, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })), h$2("helper-modal", { "title-modal": "Success", visible: this.successVisible, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h$2("p", { class: "SubmitModalSuccess" }, translate$2('modalSuccess', this.language))), h$2("helper-modal", { "title-modal": "Delete Ticket", visible: this.deleteVisible, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h$2("div", { class: "DeleteTicketModalWrapper" }, h$2("h3", { class: "DeleteTicketModalTitle" }, translate$2('deleteTicketModalTitle', this.language)), h$2("p", { class: "DeleteTicketModalText" }, translate$2('deleteTicketModalText', this.language)), h$2("div", { class: "DeleteTicketModalButtons" }, h$2("button", { class: "DeleteTicketModalCancel", onClick: () => this.modalCloseEvent() }, translate$2('deleteTicketModalCancel', this.language)), h$2("button", { class: "DeleteTicketModalConfirm", onClick: () => this.confirmDeleteTicketHandler(this.deleteEventData) }, translate$2('deleteTicketModalConfirm', this.language)))))));
+    }
+    static get assetsDirs() { return ["static"]; }
+    get element() { return getElement(this); }
+};
+LotteryGamePage.style = LotteryGamePageStyle0;
+
+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);
+        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);
+        };
+        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
+    }
+    // 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) => {
+            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
+            };
+        });
+        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$2("div", { key: '54b9187146b5d2625fd5ce7f53f38abf091cd943', class: "GridContainer", ref: el => this.stylingContainer = el }, h$2("div", { key: 'e7e8570557ebaa78edf881cdbc1ed720028cdf6e', class: this.gridType === 'ticket' ? 'Grid TicketGrid' : 'Grid' }, this.numbers.map((item) => h$2("div", null, h$2("lottery-bullet", { value: item.number, selectable: item.selectable, "is-selected": item.selected, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))))));
+    }
+};
+LotteryGrid.style = LotteryGridStyle0;
 
-const helperFiltersCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.FilterButtonsWrapper{display:flex;justify-content:flex-end;gap:5px}.FilterButtonsWrapper .FilterOpen{cursor:pointer;border-radius:4px;padding:8px 15px;width:max-content;border:1px solid #00958f;background:#00958f;color:#FFF;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterButtonsWrapper .FilterOpen:hover{background:#00958f;color:#FFF}.FilterButtonsWrapper .FilterClear{cursor:pointer;border-radius:4px;padding:8px 15px;width:max-content;border:1px solid #00958f;background:#FFF;color:#000;font-size:12px;transition:all 0.2s linear;text-align:center;letter-spacing:0}.FilterButtonsWrapper .FilterClear:hover{background:#00958f;color:#FFF}.FilterModalHeader,.FilterModalBody,.FilterModalFooter{display:flex;flex-direction:column;gap:5px;align-items:center;margin:20px 0}.FilterModalHeader .FilterModalTitle,.FilterModalBody .FilterModalTitle,.FilterModalFooter .FilterModalTitle{margin:0;padding:0;font-weight:700;font-size:16px;color:#009993;text-transform:uppercase}.FilterModalHeader .FilterModalSearch,.FilterModalBody .FilterModalSearch,.FilterModalFooter .FilterModalSearch{border-radius:4px;background:#e8ebef;color:#263445;width:100%;height:26px;max-width:280px;padding:5px;font-size:15px;border:none;outline:#009993}.FilterModalHeader .FilterCalendarWrapper,.FilterModalBody .FilterCalendarWrapper,.FilterModalFooter .FilterCalendarWrapper{display:flex;gap:5px}.FilterModalHeader .FilterCalendarWrapper .VaadinDatePicker,.FilterModalBody .FilterCalendarWrapper .VaadinDatePicker,.FilterModalFooter .FilterCalendarWrapper .VaadinDatePicker{width:50%;max-width:143px}.FilterModalHeader .FilterModalButton,.FilterModalBody .FilterModalButton,.FilterModalFooter .FilterModalButton{cursor:pointer;border-radius:4px;padding:8px 60px;width:max-content;margin:5px;border:1px solid #00958f;background:#00958f;color:#FFF;font-size:12px;transition:all 0.2s linear;text-transform:uppercase;text-align:center;letter-spacing:0}.FilterModalHeader .FilterModalButton:hover,.FilterModalBody .FilterModalButton:hover,.FilterModalFooter .FilterModalButton:hover{background:#00958f;color:#FFF}.FilterModalHeader p,.FilterModalBody p,.FilterModalFooter p{margin:5px 0}";
+const DEFAULT_LANGUAGE$1 = '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'
+    },
+    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 HelperFilters = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.filterDraw = createEvent(this, "filterDraw", 7);
-    this.filterSelection = createEvent(this, "filterSelection", 7);
-    this.filterSelectionReset = createEvent(this, "filterSelectionReset", 7);
-    /**
-     * Check if show the filter option by id
-     */
-    this.showFilterId = true;
-    /**
-     * Choose if filter by draw ID or ticket ID. By default is draw ID.
-     */
-    this.activateTicketSearch = false;
-    /**
-     * Game ID
-     */
-    this.gameId = '';
-    /**
-     * Player ID
-     */
-    this.playerId = '';
-    /**
-     * Session ID
-     */
-    this.session = '';
-    /**
-     * Instead of customEvents the widget triggers postMessages
-     */
-    this.postMessage = false;
-    /**
-     * Language
-     */
-    this.language = 'en';
-    /**
-     * Notifies if the quick filters from tickets are active
-     */
-    this.quickFiltersActive = false;
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
+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);
+        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.showFilterModal = false;
-    this.showClearButton = false;
-    this.filterData = {};
-    this.filterDataReset = { ticketDrawId: '', filterFromCalendar: '', filterToCalendar: '' };
-    this.limitStylingAppends = false;
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-    this.setClientStylingURL = () => {
-      let cssFile = document.createElement('style');
-      setTimeout(() => {
-        cssFile.innerHTML = this.clientStylingUrlContent;
-        this.stylingContainer.prepend(cssFile);
-      }, 1);
-    };
-  }
-  // reset field values each time the filter modal opens
-  componentDidRender() {
-    // @TODO: to way binding?
-    if (document.getElementById('#FilterById'))
-      document.getElementById('#FilterById').value = '';
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrlContent)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
-    }
-    // end custom styling area
-  }
-  filterSelectionHandler(event) {
-    if (this.postMessage)
-      window.postMessage({ type: 'filterSelection', event }, window.location.href);
-    if (this.filterData.ticketDrawId || this.filterData.filterFromCalendar || this.filterData.filterToCalendar)
-      this.filterSelection.emit(event);
-  }
-  filterSelectionResetHandler(event) {
-    if (this.postMessage)
-      window.postMessage({ type: 'filterSelectionReset', event }, window.location.href);
-    this.filterSelectionReset.emit(event);
-  }
-  modalCloseEvent() {
-    this.showFilterModal = false;
-  }
-  // Toggle filter modal
-  toggleFilterModal() {
-    this.showFilterModal = true;
-  }
-  // Filter search
-  filterSearch() {
-    this.modalCloseEvent();
-    this.showClearButton = true;
-    this.filterSelectionHandler(this.filterData);
-    console.log(this.showClearButton);
-  }
-  resetSearch() {
-    this.showClearButton = false;
-    this.filterSelectionResetHandler(this.filterDataReset);
-    this.filterData = {};
-  }
-  handleTicketDrawId(event) {
-    this.filterData.ticketDrawId = event.target.value;
-  }
-  handleFilterFrom(event) {
-    this.filterData.filterFromCalendar = new Date(event.target.value).toISOString();
-  }
-  handleFilterTo(event) {
-    this.filterData.filterToCalendar = new Date(event.target.value).toISOString();
-  }
-  render() {
-    return (h$2("div", { class: "HelperFilters", ref: el => this.stylingContainer = el }, h$2("div", { class: "FilterButtonsWrapper" }, h$2("button", { class: "FilterOpen", onClick: () => this.toggleFilterModal() }, translate$2('filterOpen', this.language)), console.log('in filter Open', this.showClearButton, this.quickFiltersActive), (this.showClearButton || this.quickFiltersActive) ?
-      h$2("button", { class: "FilterClear", onClick: () => this.resetSearch() }, translate$2('filterClear', this.language))
-      :
-        null), h$2("helper-modal", { "title-modal": "Filter Modal", visible: this.showFilterModal, "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }, h$2("div", { class: "FilterModalHeader" }, h$2("h3", { class: "FilterModalTitle" }, this.activateTicketSearch ? translate$2('filterModalTicketTitle', this.language) : translate$2('filterModalDrawTitle', this.language))), h$2("div", { class: "FilterModalBody" }, h$2("input", { id: "FilterById", type: "text", value: this.filterData.ticketDrawId, onInput: (event) => this.handleTicketDrawId(event), class: "FilterModalSearch", placeholder: this.activateTicketSearch ? translate$2('filterTicketPlaceholder', this.language) : translate$2('filterDrawPlaceholder', this.language) }), h$2("p", null, translate$2('filterOrDate', this.language)), h$2("div", { class: "FilterCalendarWrapper" }, h$2("vaadin-date-picker", { value: this.filterData.filterFromCalendar, onChange: (event) => this.handleFilterFrom(event), placeholder: translate$2('filterFromCalendar', this.language), class: "VaadinDatePicker" }), h$2("vaadin-date-picker", { value: this.filterData.filterToCalendar, onChange: (event) => this.handleFilterTo(event), placeholder: translate$2('filterToCalendar', this.language), class: "VaadinDatePicker" }))), h$2("div", { class: "FilterModalFooter" }, h$2("button", { class: "FilterModalButton", onClick: () => this.filterSearch() }, translate$2('filterModalButton', this.language))))));
-  }
+    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$2("div", null, h$2("p", null, translate$1('loading', this.language))));
+        }
+        else {
+            if (this.hasErrors) {
+                return (h$2("div", null, h$2("p", null, translate$1('error', this.language))));
+            }
+            else {
+                const { type } = this.gameData;
+                return (h$2("div", { class: "TicketContainer", ref: el => this.stylingContainer = el }, h$2("p", { class: "TicketTitle" }, this.gameData.name), this.resetButton && this.ticketDone &&
+                    h$2("div", { class: "ButtonContainer" }, h$2("a", { class: "ResetButton", onClick: () => this.toggleResetSelection() }, translate$1('resetButton', this.language))), this.autoPick && !this.ticketDone &&
+                    h$2("div", { class: "ButtonContainer" }, h$2("a", { class: "AutoButton", onClick: () => this.toggleAutoSelection() }, translate$1('autoButton', this.language))), this.grids.map((_, index) => h$2("div", { class: "TicketGridBullets" }, h$2("p", { class: "TicketGridTitle" }, translate$1('grid', this.language), " ", index + 1), h$2("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$2("div", null, h$2("label", { class: "Toggle" }, h$2("label", { class: "Label" }, translate$1('multiplier', this.language), ": "), h$2("input", { class: "ToggleCheckbox", type: "checkbox", onInput: (e) => this.multiplierChangeHandler(e) }), h$2("div", { class: "ToggleSwitch" }))), this.multipleDraws &&
+                    h$2("div", { class: "TicketDraws" }, h$2("label", { class: "Label" }, translate$1('numberOfDraws', this.language), ": "), h$2("div", { class: "NumberInput" }, h$2("button", { onClick: () => this.numberOfDraws > 1 ? this.numberOfDraws-- : this.numberOfDraws = 1, class: "Minus" }, "-"), h$2("input", { class: "InputDefault", min: "1", value: this.numberOfDraws, type: "number" }), h$2("button", { onClick: () => this.numberOfDraws++, class: "Plus" }, "+"))), h$2("div", null, h$2("label", { class: "Label" }, translate$1('wagerPerDraw', this.language), ": "), h$2("div", { class: "WagerInput" }, type.stakes.length > 1 ?
+                    (h$2("div", { "data-cluster": "SelectComponent", class: this.isCustomSelect ? "SelectWrapper SelectActive" : "SelectWrapper" }, h$2("div", { "data-cluster": "SelectComponent", class: "SelectButton", onClick: () => this.toggleClass() }, h$2("span", { "data-cluster": "SelectComponent" }, this.amountInfo.value, " ", this.amountInfo.currency), h$2("span", { "data-cluster": "SelectComponent", class: "SelectExpand" }, "\u25BC")), h$2("div", { "data-cluster": "SelectComponent", class: "SelectContent" }, h$2("ul", { "data-cluster": "SelectComponent", class: "SelectOptions" }, type.stakes.map((item) => h$2("li", { "data-cluster": "SelectComponent", class: this.amountInfo.value == item.value ? 'SelectedValue' : '', value: item.value, onClick: () => this.setDropdownItem(item) }, item.value, " ", item.currency)))))) : (h$2("div", null, h$2("input", { min: "1", value: type.stakes[0].amount, type: "number", disabled: true }), h$2("p", { class: "WagerInputTitle" }, type.stakes[0].currency)))))));
+            }
+        }
+    }
+    static get watchers() { return {
+        "numberOfDraws": ["drawsChangeHandler"]
+    }; }
 };
-HelperFilters.style = helperFiltersCss;
+LotteryTicket.style = LotteryTicketStyle0;
 
 const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en', 'hr'];
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
 const TRANSLATIONS = {
-  en: {
-    drawResultsHeader: 'Last draw results',
-    drawId: 'Draw ID',
-    drawName: 'Game name',
-    drawDate: 'Draw Date',
-    drawNumbersGridDraw: 'Draw numbers Grid ',
-    drawNumbersGridTicket: 'Draw numbers Grid ',
-    ticketResult: 'Ticket result',
-    amountWon: 'Amount won',
-    numberOfDraws: 'Number of draws',
-    multiplier: 'Multiplier:',
-    ticketPurchaseDate: 'Ticket Purchase Date',
-    ticketStatus: 'Ticket Status',
-    ticketId: 'Ticket ID',
-    ticketAmount: 'Ticket Amount',
-    winUpTo: 'Win up to',
-  },
-  ro: {
-    drawResultsHeader: 'Ultimele rezultate extragere',
-    drawId: 'Id extragere',
-    drawName: 'Numele jocului',
-    drawDate: 'Data extragerii',
-    drawNumbersGridDraw: 'Numerele extrase Grid',
-    drawNumbersGridTicket: 'Numerele extrase Grid',
-    ticketResult: 'Rezultatul biletului',
-    amountWon: 'Suma castigata',
-    numberOfDraws: 'Numarul de extrageri',
-    multiplier: 'Multiplicator:',
-    ticketPurchaseDate: 'Data achizitionarii biletului',
-    ticketStatus: 'Statusul biletului',
-    ticketId: 'Id biletul',
-    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: 'ربح يصل إلى'
-  },
-  hr: {
-    drawResultsHeader: 'Rezultati posljednjeg izvlačenja',
-    drawId: 'ID izvlačenja',
-    drawName: 'Naziv igre',
-    drawDate: 'Datum izvlačenja',
-    drawNumbersGridDraw: 'Tablica izvučenih brojeva',
-    drawNumbersGridTicket: 'Tablica izvučenih brojeva',
-    ticketResult: 'Rezultat listića',
-    amountWon: 'Osvojeni iznos',
-    numberOfDraws: 'Broj izvlačenja',
-    multiplier: 'Multiplikator',
-    ticketPurchaseDate: 'Datum uplate listića',
-    ticketStatus: 'Status listića',
-    ticketId: 'ID listića',
-    ticketAmount: 'Iznos listića',
-    winUpTo: 'Osvoji do'
-  },
+    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 lotteryDrawResultsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.TicketInfo{display:flex;flex-direction:row;gap:15px;background-color:#009993;color:#fff;padding:12px;font-size:14px}.DrawResultsArea{margin-top:15px}.DrawResultsArea.TicketDraws .Content{padding:0;border:0}.DrawResultsArea.TicketDraws .DrawResultsBody{padding:0;margin-bottom:5px;border-radius:0;border:0}.DrawResultsSection{max-width:600px;margin:0px auto;border-radius:4px}.DrawResultsHeader{display:flex;justify-content:space-between;padding:10px 20px;background-color:#009993;color:#fff;font-size:14px;border-radius:4px 4px 0 0}.DrawResultsHeader h4{text-transform:uppercase;font-weight:400;margin:0;padding-top:15px}.DrawResultsBody{padding:20px;margin-bottom:5px;border-radius:0 0 4px 4px;border:1px solid #009993}.DrawResultsBody>div{margin:10px 0}.DrawResultsBody .NumberOfDrawsContainer{display:table;width:100%}.DrawNumbersGrid{display:flex;flex-direction:column;gap:5px}.DrawNumbersGrid label{display:block;margin-bottom:7px}.Toggle{cursor:pointer;display:inline-block}.ToggleSwitch{display:inline-block;background:#ccc;border-radius:16px;width:58px;height:24px;position:relative;vertical-align:middle;transition:background 0.25s}.ToggleSwitch:before,.ToggleSwitch:after{content:\"\"}.ToggleSwitch:before{display:block;background:linear-gradient(to bottom, #fff 0%, #eee 100%);border-radius:50%;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.25);width:16px;height:16px;position:absolute;top:4px;left:4px;transition:left 0.25s}.Toggle:hover .ToggleSwitch:before{background:linear-gradient(to bottom, #fff 0%, #fff 100%);box-shadow:0 0 0 1px rgba(0, 0, 0, 0.5)}.ToggleCheckbox:checked+.ToggleSwitch{background:#56c080}.ToggleCheckbox:checked+.ToggleSwitch:before{left:38px}.ToggleCheckbox{position:absolute;visibility:hidden}.Label{position:relative}.DrawTicketsContainer{display:flex;flex-direction:column;margin:20px auto 0}.DrawMultipler{margin-top:15px}.ExpandableBoxes{position:relative;display:flex;flex-direction:column;border:1px solid #ccc;border-radius:5px;background-color:white}.ExpandableBox{border-bottom:1px solid #ccc;transition:height 300ms ease-in-out;overflow:hidden;height:80px}.ExpandableBox:last-child{border-bottom:0}.ExpandableBoxHeader{position:relative;list-style:none;outline:0;cursor:pointer;text-transform:uppercase;transition:color 300ms ease-in-out;margin-bottom:24px;margin-left:5px}.ShowBox>.ExpandableBoxHeader{color:#009993}.ExpandableBoxHeader::-webkit-details-marker{display:none}.ExpandableBoxHeader:before,.ExpandableBoxHeader:after{content:\"\";position:absolute}.ExpandableBoxHeader:before{right:21px;top:50%;height:2px;margin-top:-1px;width:16px;background:#009993}.ExpandableBoxHeader:after{right:28px;top:50%;height:16px;margin-top:-8px;width:2px;margin-left:-1px;background:#009993;transition:all 300ms ease-in-out}.ShowBox .ExpandableBoxHeader:after{opacity:0;transform:translateY(25%)}.ExpandableBoxBody{padding-top:0;font-weight:lighter;margin-left:5px}.ExpandableBox.ShowBox{height:300px}";
-
-const LotteryDrawResults = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Language of the widget
-     */
-    this.language = 'en';
-    /**
-     * Shows only the last draw
-     */
-    this.drawMode = false;
-    /**
-     * The drawID (option)
-     */
-    this.drawId = '';
-    /**
-     * The game name
-     */
-    this.gameName = '';
-    /**
-     * The ticket submission date
-     */
-    this.ticketDate = '';
-    /**
-     * The ticket status
-     */
-    this.ticketStatus = '';
-    /**
-     * The ticket id
-     */
-    this.ticketId = '';
-    /**
-     * The ticket amount
-     */
-    this.ticketAmount = '';
-    /**
-     * The ticket multiplier
-     */
-    this.ticketMultiplier = false;
-    /**
-     * The ticket draw count
-     */
-    this.ticketDrawCount = 0;
-    /**
-     * The ticket winning numbers
-     */
-    this.ticketNumbers = '';
-    /**
-     * The session id
-     */
-    this.sessionId = '';
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url content
-     */
-    this.clientStylingUrlContent = '';
-    /**
-     * Data showing the ticket's draw results details
-     */
-    this.ticketDrawData = '';
-    this.multiplier = 3;
-    this.isLoading = true;
-    this.hasErrors = false;
-    this.errorText = '';
-    this.ticketData = [];
-    this.ticketDataLoaded = false;
-    this.ticketDraws = [];
-    this.toggleDrawer = [false];
-    this.limitStylingAppends = false;
-    this.ticketDrawDetails = [];
-    this.ticketDrawDetailsFlag = true;
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-    this.setClientStylingURL = () => {
-      let cssFile = document.createElement('style');
-      setTimeout(() => {
-        cssFile.innerHTML = this.clientStylingUrlContent;
-        this.stylingContainer.prepend(cssFile);
-      }, 1);
-    };
-  }
-  connectedCallback() {
-    let promises = [];
-    // Split ticket numbers for each grid
-    if (this.ticketNumbers) {
-      this.gridNumbers = JSON.parse(this.ticketNumbers);
-    }
-    if (this.drawId) {
-      promises.push(this.getDrawData());
-    }
-    Promise.all(promises)
-      .then(() => {
-      this.isLoading = false;
-    }).catch((err) => {
-      console.log('error ', err);
-      this.isLoading = false;
-    });
-  }
-  componentWillRender() {
-    if (this.ticketDrawData && this.ticketDrawDetailsFlag) {
-      this.ticketDrawDetails = JSON.parse(this.ticketDrawData);
-      this.ticketDrawDetails.forEach((drawDetail) => {
-        this.getDrawData(drawDetail.drawId).then((drawData) => drawDetail.drawData = drawData);
-      });
-      this.ticketDrawDetailsFlag = 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
-  }
-  getDrawData(drawId) {
-    this.isLoading = true;
-    return new Promise((resolve, reject) => {
-      let url = new URL(`${this.endpoint}/games/${this.gameId}/draws/${drawId ? drawId : this.drawId}`);
-      fetch(url.href)
-        .then((response) => {
-        // @TODO EXCEPTIONS
-        return response.json();
-      })
-        .then((data) => {
-        if (drawId) {
-          resolve(data);
+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);
+        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);
         }
-        else {
-          this.drawData = data;
-          resolve(true);
+        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;
         }
-        this.isLoading = false;
-      })
-        .catch((err) => {
-        reject(err);
-        this.isLoading = false;
-      });
-    });
-  }
-  drawerToggle(index) {
-    this.toggleDrawer = this.toggleDrawer.map((item, itemIndex) => {
-      if (itemIndex == index) {
-        return !item;
-      }
-      return item;
-    });
-    if (index >= this.toggleDrawer.length) {
-      this.toggleDrawer.push(true);
+        // end custom styling area
     }
-  }
-  render() {
-    if (this.isLoading) {
-      return (h$2("p", null, "Loading, please wait ..."));
-    }
-    else if (this.hasErrors) {
-      h$2("p", null, this.errorText);
-    }
-    else {
-      return (h$2("section", { class: "DrawResultsSection", ref: el => this.stylingContainer = el }, this.drawMode ?
-        h$2("div", { class: "DrawResultsArea" }, this.drawData &&
-          h$2("div", null, h$2("div", { class: "DrawResultsHeader" }, h$2("span", null, translate('drawId', this.language), ":  ", this.drawData.id), h$2("span", null, translate('drawDate', this.language), ": ", this.drawData.date.slice(0, 10))), h$2("div", { class: "DrawResultsBody" }, h$2("div", { class: "DrawNumbersGrid" }, h$2("p", null, translate('drawNumbersGridDraw', this.language), "0:"), h$2("div", { class: "BulletContainer" }, h$2("lottery-grid", { "selected-numbers": this.drawData.winningNumbers.join(','), "display-selected": true, selectable: false, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent })), h$2("div", { class: "DrawMultipler" }, h$2("label", { class: "Label" }, translate('multiplier', this.language), " ", this.multiplier))))))
-        :
-          h$2("div", { class: "DrawResultsArea TicketDraws" }, h$2("div", { class: "DrawResultsBody" }, h$2("div", { class: "TicketIdContainer" }, h$2("label", { class: "Label" }, translate('ticketId', this.language), ": ", h$2("span", null, this.ticketId))), h$2("div", { class: "TicketAmountContainer" }, h$2("label", { class: "Label" }, translate('ticketAmount', this.language), " ", h$2("span", null, this.ticketAmount))), h$2("div", { class: "DrawNumbersGrid" }, this.gridNumbers.map((grid, index) => h$2("div", null, h$2("label", { class: "Label" }, translate('drawNumbersGridTicket', this.language), " ", String.fromCharCode(index + 65), ":"), h$2("div", { class: "BulletContainer" }, h$2("lottery-grid", { "selected-numbers": grid.join(','), selectable: false, "display-selected": true, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))))), h$2("div", { class: "DrawMultipler" }, h$2("label", { class: "Label" }, translate('multiplier', this.language), " ", JSON.stringify(this.ticketMultiplier))), h$2("div", { class: "NumberOfDrawsContainer" }, h$2("label", { class: "Label" }, translate('numberOfDraws', this.language), ": ", this.ticketDrawCount), h$2("div", { class: "DrawTicketsContainer" }, this.ticketDrawDetails && this.ticketDrawDetails.length > 0 &&
-            h$2("div", { class: "ExpandableBoxes" }, this.ticketDrawDetails.map((drawDetail, index) => {
-              var _a, _b, _c, _d, _e;
-              return h$2("div", { class: { 'ExpandableBox': true, 'ShowBox': this.toggleDrawer[index] }, onClick: () => this.drawerToggle(index) }, h$2("div", { class: "ExpandableBoxHeader" }, h$2("div", { class: "TicketResultContainer" }, h$2("p", null, translate('ticketResult', this.language), ": ", drawDetail.state)), drawDetail.state == 'won' &&
-                h$2("div", { class: "AmountWonContainer" }, h$2("p", null, translate('amountWon', this.language), ": ", Number(drawDetail.amount).toLocaleString('en'), " ", drawDetail.currency)), drawDetail.state == 'lost' &&
-                h$2("div", { class: "DrawIdContainer" }, h$2("p", null, translate('drawId', this.language), ": ", drawDetail.drawId))), h$2("div", { class: "ExpandableBoxBody" }, h$2("div", { class: "DrawIdContainer" }, h$2("p", null, translate('drawId', this.language), ": ", drawDetail.drawId)), h$2("div", { class: "DrawDateContainer" }, h$2("p", null, translate('drawDate', this.language), ": ", (_a = drawDetail.drawData) === null || _a === void 0 ? void 0 :
-                _a.date.slice(0, 10), " | ", (_b = drawDetail.drawData) === null || _b === void 0 ? void 0 :
-                _b.date.slice(11, 19))), h$2("div", { class: "DrawNumbersGrid" }, drawDetail.drawData &&
-                h$2("div", { class: 'BulletContainer' }, h$2("label", { class: "Label" }, translate('drawNumbersGridDraw', this.language), " ", String.fromCharCode(index + 10), ":"), h$2("lottery-grid", { "selected-numbers": (_d = (_c = drawDetail.drawData) === null || _c === void 0 ? void 0 : _c.winningNumbers) === null || _d === void 0 ? void 0 : _d.join(','), selectable: false, "display-selected": true, language: this.language, "grid-type": 'ticket', "client-styling": this.clientStyling, "client-styling-url-content": this.clientStylingUrlContent }))), h$2("div", { class: "DrawMultipler" }, h$2("label", { class: "Label" }, translate('multiplier', this.language), " ", (_e = drawDetail.drawData) === null || _e === void 0 ? void 0 :
-                _e.multiplier))));
-            }))))))));
+    render() {
+        console.log('ticket id:', this.ticketId);
+        return (h$2("div", { key: '203c89c4b240cd7c99eb3d37fa3a4dbc17ed18e3', class: "LotteryTicketControllerContainer", ref: el => this.stylingContainer = el }, h$2("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$2("div", { key: 'b9c618987e848d4b44fee6941f8b5c9696bd44e8', slot: "accordionContent" }, h$2("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 })))));
     }
-  }
 };
-LotteryDrawResults.style = lotteryDrawResultsCss;
-
-export { HelperFilters as helper_filters, LotteryDrawResults as lottery_draw_results };
+LotteryTicketController.style = LotteryTicketControllerStyle0;
 
-//# sourceMappingURL=helper-filters_2.entry.js.map
+export { HelperAccordion as helper_accordion, HelperFilters as helper_filters, HelperModal as helper_modal, HelperTab as helper_tab, HelperTabs as helper_tabs, LotteryBullet as lottery_bullet, LotteryDrawResults as lottery_draw_results, LotteryDrawResultsHistory as lottery_draw_results_history, LotteryGameDetails as lottery_game_details, LotteryGamePage as lottery_game_page, LotteryGrid as lottery_grid, LotteryTicket as lottery_ticket, LotteryTicketController as lottery_ticket_controller };